:root{color:#f1eddf;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;--viewport-height:100dvh;background:#0f1e22;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}html{border-top:1px solid #0000}body{height:var(--viewport-height);flex-direction:column;margin:0;display:flex;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline-offset:-4px;outline:2px solid #fff6cb}#instrument.preparing{filter:blur(14px)}#instrument{isolation:isolate;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;flex:1;min-height:0;transition:filter .7s ease-out;position:relative}#surface,#notes{width:100%;height:100%;position:absolute;inset:0}#surface{pointer-events:none}.edge{fill:none;stroke:#0f1e22;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;opacity:.8;justify-items:center;gap:8px;display:grid;position:absolute;transform:translate(-50%,-50%)}.pitch{letter-spacing:-.045em;text-shadow:0 1px 7px #0f1e2222;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:.8rem}.note[data-note="0"] .pitch{font-size:clamp(2.8rem,1rem + 4vmin,4.5rem)}.note:focus-visible{background:#f6e7b925;outline:none}#update-banner{top:max(12px, env(safe-area-inset-top));color:#243c3d;z-index:10;pointer-events:none;background:#e1cfaa;border-radius:999px;margin:0;padding:8px 16px;font-size:.85rem;font-weight:600;position:fixed;left:50%;translate:-50%}#update-banner[hidden]{display:none}#settings-button{z-index:5;opacity:.22;background:0 0;border:0;padding:8px;line-height:0;transition:opacity .7s ease-out;position:fixed;top:0;right:0}#instrument.preparing~#settings-button{opacity:0;pointer-events:none}#settings-button:hover{opacity:.5}#settings-button svg{width:20px;height:20px}#settings{width:min(380px,100vw - 32px);color:inherit;background:#16292d;border:1px solid #f1eddf22;border-radius:14px;padding:0}#settings::backdrop{background:#0009}#settings form{gap:18px;padding:16px 20px 22px;display:grid}#settings header{justify-content:space-between;align-items:center;display:flex}#settings h2{margin:0;font-size:1.05rem;font-weight:550}#settings header button{opacity:.6;background:0 0;border:0;padding:6px}#settings fieldset{border:0;gap:10px;margin:0;padding:0;display:grid}#settings legend{letter-spacing:.08em;text-transform:uppercase;opacity:.65;white-space:nowrap;margin-bottom:10px;padding:0;font-size:.8rem}#settings .option{align-items:baseline;gap:10px;display:flex}#settings .option small{opacity:.6;margin-top:2px;font-size:.8rem;display:block}#settings input{accent-color:#e1cfaa}#settings .gain{align-items:center;gap:12px;display:flex}#settings .gain input{flex:1}#settings .gain output{text-align:right;font-variant-numeric:tabular-nums;min-width:1.5em}@media (width<=550px){.note-label{gap:4px}}@media (pointer:coarse){:focus-visible{outline:none}}@media (prefers-reduced-motion:reduce){.flash{visibility:hidden}}@media (forced-colors:active){.edge{stroke:canvastext}.note:focus-visible{outline:3px solid highlight}}