@font-face{font-family:Instrument Sans;font-style:normal;font-display:swap;font-weight:400 700;font-stretch:75% 100%;src:url(./instrument-sans-latin-BVScPF0l.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Instrument Sans;font-style:normal;font-display:swap;font-weight:400 700;font-stretch:75% 100%;src:url(./instrument-sans-latin-ext-C5E2Gvlv.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}:root{color-scheme:light dark;--paper: #eceff3;--surface: #ffffff;--surface-sunk: #f4f6f9;--ink: #161c2a;--muted: #586174;--line: #d3d9e2;--felt: #a1244a;--felt-deep: #6f1633;--felt-soft: #f6e3e9;--on-felt: #ffffff;--ok: #1d7a4c;--ok-soft: #dcf0e4;--try: #9a5708;--try-soft: #fbead1;--error: #b42318;--error-soft: #fde6e3;--heard: #4f6f9c;--ivory: #fbfaf6;--ivory-edge: #b9bec8;--ebony: #1b1b20;--staff-paper: #fdfdfb;--radius-s: 8px;--radius-m: 12px;--radius-l: 18px;--gutter: clamp(16px, 3vw, 36px);--tap: 48px;--font: "Instrument Sans", ui-sans-serif, system-ui, sans-serif}@media (prefers-color-scheme: dark){:root{--paper: #0f131b;--surface: #181e29;--surface-sunk: #131821;--ink: #e8ecf2;--muted: #9aa3b4;--line: #2a3242;--felt: #e46a8e;--felt-deep: #7d1f3d;--felt-soft: #3a1a26;--on-felt: #1a0a10;--ok: #62c994;--ok-soft: #173427;--try: #e7a656;--try-soft: #3a2a14;--error: #ff8b7e;--error-soft: #3c1b18;--heard: #8fb0de;--ivory: #f1efe9;--ivory-edge: #0f131b}}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.5;font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent}h1,h2,h3,p{margin:0}button,input,select{font:inherit;color:inherit}[hidden]{display:none!important}:focus-visible{outline:3px solid var(--felt);outline-offset:2px}.topbar{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--paper) 88%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}.topbar-inner{max-width:1280px;margin:0 auto;padding:8px var(--gutter);display:flex;align-items:center;gap:12px 24px;flex-wrap:wrap}.wordmark{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:650;font-size:1.05rem;letter-spacing:-.01em;min-height:var(--tap)}.wordmark-keys{display:block;width:26px;height:22px;border-radius:4px;background:linear-gradient(90deg,var(--ebony) 0 3px,transparent 3px) 5px 0 / 8px 60% no-repeat,linear-gradient(90deg,var(--ebony) 0 3px,transparent 3px) 14px 0 / 8px 60% no-repeat,repeating-linear-gradient(90deg,var(--ivory) 0 7.6px,var(--ivory-edge) 7.6px 8.6px);border-top:3px solid var(--felt);box-shadow:inset 0 0 0 1px var(--ivory-edge)}.tabs{display:flex;gap:4px;margin-right:auto}.tabs a{display:flex;align-items:center;min-height:var(--tap);padding:0 14px;border-radius:var(--radius-s);color:var(--muted);text-decoration:none;font-weight:550}.tabs a:hover{color:var(--ink);background:var(--surface-sunk)}.tabs a[aria-current=page]{color:var(--ink);box-shadow:inset 0 -3px 0 var(--felt);border-radius:var(--radius-s) var(--radius-s) 0 0}.naming{display:flex;padding:3px;border-radius:var(--radius-s);background:var(--surface-sunk)}.naming button{min-height:34px;padding:0 10px;border:0;border-radius:calc(var(--radius-s) - 2px);background:transparent;color:var(--muted);font:inherit;font-size:.85rem;font-weight:600;white-space:nowrap;cursor:pointer;touch-action:manipulation}.naming button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px #0000001f}.mic{display:flex;align-items:center;gap:12px}.mic-state{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;color:var(--muted);white-space:nowrap}.mic-state:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--line)}.mic-state[data-state=listening]{color:var(--ok)}.mic-state[data-state=listening]:before{background:var(--ok);animation:listening 1.6s ease-in-out infinite}.mic-state[data-state=requesting]:before{background:var(--try)}.mic-state[data-state=denied],.mic-state[data-state=error],.mic-state[data-state=unsupported]{color:var(--error)}.mic-state[data-state=denied]:before,.mic-state[data-state=error]:before,.mic-state[data-state=unsupported]:before{background:var(--error)}@keyframes listening{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--ok) 25%,transparent)}}.shell{max-width:1280px;margin:0 auto;padding:clamp(16px,2.5vw,28px) var(--gutter) 40px}.banner{max-width:1280px;margin:12px auto 0;padding:0 var(--gutter)}.banner p,.mic-banner{padding:12px 16px;border-radius:var(--radius-m);background:var(--surface);border:1px solid var(--line);color:var(--muted);font-size:.95rem}.mic-banner[data-tone=error]{background:var(--error-soft);border-color:transparent;color:var(--error)}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:0 18px;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface);color:var(--ink);font-weight:600;cursor:pointer;touch-action:manipulation;white-space:nowrap}.button:hover{border-color:var(--muted)}.button:active{transform:translateY(1px)}.button:disabled{opacity:.55;cursor:default}.button-primary{background:var(--felt);border-color:var(--felt);color:var(--on-felt)}.button-primary:hover{border-color:var(--felt-deep);background:color-mix(in srgb,var(--felt) 88%,var(--felt-deep))}.button-quiet{background:transparent;border-color:transparent;color:var(--muted)}.button-quiet:hover{color:var(--ink);border-color:var(--line)}.button[aria-pressed=true]{background:var(--felt-soft);border-color:var(--felt);color:var(--ink)}.keybed{margin-top:clamp(16px,2.5vh,28px);padding:0 0 4px}.keyboard{display:block;width:100%;height:auto;max-height:min(32vh,260px);margin:0 auto;filter:drop-shadow(0 6px 10px rgb(10 15 25 / .12))}.key-white{fill:var(--ivory);stroke:var(--ivory-edge);stroke-width:1}.key-black{fill:var(--ebony)}.key-felt{fill:var(--felt-deep)}.key[data-state=target]{fill:var(--felt)}.key-black[data-state=target]{fill:#c9406a}.key[data-state=hit]{fill:#2f9a64}.key[data-state=off]{fill:#d98a2b}.key[data-state=heard]{fill:#6f8fbd}.key-finger{fill:#fff;stroke:var(--felt-deep);stroke-width:2}.key-finger-number{fill:var(--felt-deep);font-family:var(--font);font-size:14px;font-weight:700;text-anchor:middle}.key-label,.key-octave{text-anchor:middle;font-family:var(--font);pointer-events:none}.key-label{fill:#fff;font-size:15px;font-weight:700}.key-label-black,.key-label-long{font-size:11px}.key-octave{fill:#8a909b;font-size:11px;font-weight:550}.staff{background:var(--staff-paper);border-radius:var(--radius-m);padding:4px 8px;color:#161c2a}.staff svg{display:block;width:100%;height:auto;max-height:170px}.staff:empty{min-height:170px}.note-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}.note-chip{display:inline-flex;flex-direction:column;align-items:flex-start;min-width:52px;padding:6px 12px;border-radius:var(--radius-s);background:var(--surface-sunk);border:1px solid var(--line);font-weight:650;font-size:1.05rem;line-height:1.25}.note-chip small{font-size:.78rem;font-weight:500;color:var(--muted)}.note-chip-compact{flex-direction:row;align-items:baseline;min-width:0;padding:4px 10px;font-size:1rem}.note-chip sub{font-size:.72rem;font-weight:600;margin-left:1px;vertical-align:baseline;position:relative;top:.25em}.name-aside{display:block;margin-top:6px;font-size:.38em;font-weight:550;font-stretch:100%;letter-spacing:0;color:var(--muted)}.note-chip[data-state=done]{background:var(--ok-soft);border-color:transparent;color:var(--ok)}.note-chip[data-state=current]{background:var(--felt);border-color:var(--felt);color:var(--on-felt)}.note-chip[data-state=current] small{color:inherit}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@media (max-width: 1100px){.mic-state{font-size:0;gap:0}}@media (max-width: 960px){.wordmark-text{display:none}}@media (max-width: 640px){.tabs{order:3;width:100%;margin-right:0}.tabs a{flex:1;justify-content:center;padding:0 8px}.mic{margin-left:auto}.mic-state{font-size:0;gap:0}}