:root{color:#f1eddf;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;background:#152b30;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body{flex-direction:column;height:100dvh;margin:0;display:flex;overflow:hidden}header{padding:max(8px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 8px max(20px, env(safe-area-inset-left));justify-content:space-between;align-items:center;gap:12px;min-height:36px;display:flex}h1{letter-spacing:-.04em;white-space:nowrap;margin:0;font-size:1.2rem;font-weight:450}h1 span{letter-spacing:.15em;color:#bbc4b8;margin-left:15px;font-size:.64rem}.controls{align-items:center;gap:14px;display:flex}#status{color:#bcc9c3;font-size:.7rem}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline-offset:-4px;outline:2px solid #fff6cb}#help-button{background:0 0;border:1px solid #627575;border-radius:50%;width:34px;height:34px;font-size:1rem}#update{background:0 0;border:1px solid #cbbf92;border-radius:5px;padding:7px;font-size:.7rem}#instrument{isolation:isolate;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;flex:1;min-height:0;position:relative}#surface,#notes{width:100%;height:100%;position:absolute;inset:0}#surface{pointer-events:none}.edge{fill:none;stroke:#152b30;stroke-opacity:.48;stroke-width:1.5px;vector-effect:non-scaling-stroke}.flash{fill:#f6e7b9;opacity:0}.note{touch-action:none;background:0 0;border:0;width:100%;height:100%;padding:0;position:absolute;inset:0}.note-label{left:var(--x);top:var(--y);pointer-events:none;justify-items:center;gap:8px;display:grid;position:absolute;transform:translate(-50%,-50%)}.pitch{letter-spacing:-.045em;text-shadow:0 1px 7px #152b3022;font-size:clamp(1.65rem,1rem + 2.1vmin,2.9rem);font-weight:350}.octave{opacity:.65;margin-left:.2em;font-size:.43em;font-weight:450}.note-detail{letter-spacing:.17em;opacity:.65;font-size:.6rem}.note[data-note="0"] .pitch{font-size:clamp(2.8rem,1rem + 4vmin,4.5rem)}.note[data-note="0"] .note-label:before{content:"";aspect-ratio:1;border:1px solid #eee5c02a;border-radius:50%;width:clamp(85px,15vmin,145px);position:absolute;top:45%;left:50%;transform:translate(-50%,-50%)}.note:focus-visible{background:#f6e7b925;outline:none}#welcome{-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);background:#122a307a;place-items:center;display:grid;position:absolute;inset:0}#welcome[hidden]{display:none}.welcome-card{text-align:center;padding:30px}.eyebrow{letter-spacing:.22em;color:#ddcb9f;font-size:.66rem}h2{letter-spacing:-.045em;margin:18px 0;font-family:Georgia,serif;font-size:clamp(2.2rem,1.2rem + 3vw,3.8rem);font-weight:400}.welcome-card>p:not(.eyebrow){color:#e1e2d4;font-size:.95rem}#begin{color:#243c3d;background:#e1cfaa;border:1px solid #d9c99e;border-radius:40px;min-width:190px;margin-top:22px;padding:16px 30px;font-size:.9rem;font-weight:550}#begin:disabled{opacity:.6;cursor:wait}dialog{color:#efeddf;background:#1d353a;border:1px solid #5d7474;border-radius:16px;max-width:420px;max-height:80dvh;padding:28px}dialog::backdrop{background:#081b20a8}dialog h2{font-size:2.2rem}dialog p{font-size:.95rem;line-height:1.65}.close{float:right;background:0 0;border:0;width:40px;height:40px;font-size:1.6rem}.technical{color:#afbeb9;font-size:.75rem}@media (width<=550px){#status{font-size:.6rem}.controls{gap:8px}h1 span{margin-left:8px;font-size:.55rem}header{padding-left:14px}.note-label{gap:4px}}@media (pointer:coarse){#help-button{width:44px;height:44px}}@media (prefers-reduced-motion:reduce){.flash{visibility:hidden}}@media (forced-colors:active){.edge{stroke:canvastext}.note:focus-visible{outline:3px solid highlight}}