@font-face { font-family: Alegreya; src: url('fonts/Alegreya.ttf') format('truetype'); font-weight: 400 900; font-display: swap; }
:root { color-scheme: light; --ink: #345d61; --mist: #d1dfda; --faint: #567a79; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--mist); color: var(--ink); font-family: 'Trebuchet MS', sans-serif; }
main { max-width: 1240px; padding: 24px 44px 16px; margin: auto; }
header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
h1 { font-family: Alegreya, Georgia, serif; font-size: clamp(33px, 4.4vw, 57px); font-weight: 500; letter-spacing: -.035em; line-height: 1.05; margin: 0 0 6px; }
.subtitle { margin: 0; font-family: Alegreya, Georgia, serif; font-size: 21px; color: #527675; }
button { font: inherit; font-size: 14px; color: var(--ink); background: #e2eae4; border: 1px solid #8eafa5; padding: 10px 17px; border-radius: 24px; cursor: pointer; white-space: nowrap; }
button:hover { background: #eff4ee; }
button:focus-visible, summary:focus-visible, canvas:focus-visible { outline: 3px solid #67458b; outline-offset: 4px; }
button:active { transform: translateY(1px); }
.pond-wrap { position: relative; margin: 12px -12px 0; }
canvas { display: block; width: 100%; height: min(62vh, 650px); min-height: 340px; touch-action: none; cursor: crosshair; }
.chapter { position: absolute; left: 5%; top: 2%; pointer-events: none; }
.chapter span { font-size: 12px; color: #5e817f; }
h2 { font-family: Alegreya, Georgia, serif; font-weight: 500; font-size: 23px; margin: 2px 0; }
.arrival { position: absolute; inset: auto 0 7%; text-align: center; pointer-events: none; }
.arrival p { display: inline-block; color: #244d51; font-family: Alegreya, Georgia, serif; font-size: 25px; background: #dbe9e0ef; border-radius: 18px; padding: 7px 15px; margin: 0 12px 0 0; }
.arrival button { pointer-events: auto; border-color: #52786d; background: #e8f0df; padding: 12px 22px; }
footer { display: flex; justify-content: space-between; align-items: center; gap: 22px; padding: 0 4px; }
.instruction p { margin: 0 0 6px; line-height: 1.45; font-size: 15px; max-width: 66ch; }
#status { color: #5a7e7a; font-size: 13px; min-height: 1.45em; }
details { font-size: 12px; color: #5a7e7a; margin: 18px 4px 0; line-height: 1.55; max-width: 80ch; }
summary { cursor: pointer; width: fit-content; }
details p { margin: 10px 0; }
a { color: #345d61; text-underline-offset: 3px; }
[hidden] { display: none !important; }
@media (max-width: 640px) {
  main { padding: 20px 18px 18px; }
  header { align-items: flex-start; gap: 8px; }
  h1 { max-width: 7.5em; }
  .subtitle { font-size: 18px; }
  #sound { padding: 9px 12px; font-size: 12px; margin-top: 5px; }
  .pond-wrap { margin-top: 17px; }
  canvas { min-height: 430px; height: 64svh; max-height: 640px; }
  .chapter { top: 0; left: 5%; }
  h2 { font-size: 21px; }
  footer { align-items: flex-end; gap: 10px; }
  .instruction p { font-size: 13px; }
  #status { font-size: 12px; }
  #restart { padding: 10px 12px; font-size: 12px; }
  .arrival { bottom: 13%; }
  .arrival p { font-size: 20px; margin: 0 0 8px; display: block; background: transparent; padding: 0; }
}
@media (prefers-reduced-motion: reduce) { button:active { transform: none; } }