*,:before,:after{box-sizing:border-box}html,body{margin:0}body{background:var(--bg);min-height:100dvh;color:var(--fg);font-family:var(--font-body);flex-direction:column;align-items:center;gap:20px;padding:24px 16px 32px;display:flex}.top{text-align:center}.top h1{font:700 clamp(1.8rem, 5vw, 2.6rem) var(--font-head);letter-spacing:-.01em;margin:0}.top p{color:var(--fg-muted);margin:4px 0 0}main{flex-direction:column;align-items:center;gap:16px;width:100%;max-width:1200px;display:flex}footer{width:100%;max-width:1200px;margin-top:24px}.pond{aspect-ratio:16/9;background:radial-gradient(at 40% 35%,#2f6b5a,#123a33 60%,#0a221e);width:100%;position:relative}@media (width<=640px){.pond{aspect-ratio:3/4}}.pond canvas{touch-action:none;cursor:crosshair;-webkit-mask-composite:source-in;width:100%;height:100%;display:block;-webkit-mask-image:linear-gradient(90deg,#0000,#000 3% 97%,#0000),linear-gradient(#0000,#000 4% 96%,#0000);mask-image:linear-gradient(90deg,#0000,#000 3% 97%,#0000),linear-gradient(#0000,#000 4% 96%,#0000);-webkit-mask-composite:source-in;mask-composite:intersect}.fallback{text-align:center;color:#e9f0df;font:500 1rem var(--font-body);place-items:center;margin:0;padding:24px;display:grid;position:absolute;inset:0}.fallback[hidden]{display:none}.controls{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.pill{border:1px solid var(--border-strong);background:var(--bg-elev);min-height:44px;color:var(--fg);font:500 .95rem var(--font-body);cursor:pointer;border-radius:999px;align-items:center;gap:8px;padding:8px 18px;display:inline-flex}.pill svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px}.pill[aria-pressed=true]{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}#sound[aria-pressed=false] .wave{opacity:.3}.pill:hover{border-color:var(--accent)}.pill:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (prefers-reduced-motion:no-preference){.pill{transition:transform .35s cubic-bezier(.34,1.56,.64,1),background-color .2s,border-color .2s}.pill:hover{transform:translateY(-2px)scale(1.04)}.pill:active{transition-duration:80ms;transform:scale(.94)}}.embed body{gap:0;padding:0;display:block;overflow:hidden}.embed .chrome{display:none}.embed main{max-width:none;display:block}.embed .pond{aspect-ratio:auto;position:fixed;inset:0}.embed .pond canvas{touch-action:pan-y;-webkit-mask-image:none;mask-image:none}