@font-face{font-family:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;font-stretch:75% 100%;src:url(/assets/bricolage-grotesque-vietnamese-standard-normal-Br4FGdAc.woff2)format("woff2-variations");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;font-stretch:75% 100%;src:url(/assets/bricolage-grotesque-latin-ext-standard-normal-qp-RdZgh.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,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}@font-face{font-family:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;font-stretch:75% 100%;src:url(/assets/bricolage-grotesque-latin-standard-normal-C5Lc8Qmc.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--bg:#e9edf3;--surface:#f7f9fc;--ink:#1a1f2b;--muted:#5a6273;--line:#d3d9e3;--case:#202637;--case-hi:#2b3247;--case-ink:#e8ebf2;--case-muted:#9aa3b8;--felt:#9e2236;--ivory:#fffdf7;--ivory-shade:#ece8dc;--ebony:#16171b;--ebony-hi:#34363e;--marigold:#ffb000;--marigold-ink:#4a3200;--press:#7ea6ff;--miss:#d8434f;--wk:clamp(30px, calc((min(100vw, 1240px) - 72px) / 25), 56px);--radius:10px;--sel-bg:#202637;--sel-ink:#e8ebf2;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:Bricolage Grotesque Variable,system-ui,sans-serif}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#121620;--surface:#1a1f2c;--ink:#e8ebf2;--muted:#9aa3b8;--line:#2c3344;--case:#0c0f16;--case-hi:#1b2130;--sel-bg:#313a52;--sel-ink:#f2f4f8;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--bg:#121620;--surface:#1a1f2c;--ink:#e8ebf2;--muted:#9aa3b8;--line:#2c3344;--case:#0c0f16;--case-hi:#1b2130;--sel-bg:#313a52;--sel-ink:#f2f4f8;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;margin:0;font-size:17px;line-height:1.5}.page{max-width:1240px;margin:0 auto;padding:32px 16px 48px}kbd{text-align:center;background:var(--surface);border:1px solid var(--line);min-width:1.7em;color:var(--ink);border-bottom-width:3px;border-radius:6px;padding:.05em .45em;font-family:inherit;font-size:.82em;font-weight:650;line-height:1.4;display:inline-block}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid var(--marigold);outline-offset:2px}.masthead{margin-bottom:20px}.wordmark{font-variation-settings:"wdth" 75, "opsz" 96;letter-spacing:-.015em;word-spacing:.06em;margin:0;font-size:clamp(40px,7vw,76px);font-weight:800;line-height:.95}.tagline{color:var(--muted);max-width:48ch;margin:10px 0 0;font-size:19px}.instrument{background:linear-gradient(180deg, var(--case-hi), var(--case) 60%);color:var(--case-ink);border-radius:18px 18px 14px 14px;padding:18px 18px 22px;box-shadow:inset 0 1px #ffffff0f,0 24px 48px -28px #0a0e1eb3}.case-top{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 24px;padding:2px 4px 16px;display:flex}.readout{flex-direction:column;min-width:13ch;display:flex}.readout-note{font-variation-settings:"wdth" 80;color:var(--marigold);font-variant-numeric:tabular-nums;font-size:34px;font-weight:750;line-height:1.05}.readout-sub{color:var(--case-muted);font-size:14px}.controls{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.control{align-items:center;gap:8px;display:flex}.ctl-label{color:var(--case-muted);font-size:12px;line-height:1;display:block}.ctl-btn{color:var(--case-ink);background:#ffffff0f;border:1px solid #ffffff1f;border-radius:999px;align-items:center;gap:8px;padding:7px 14px;font-size:15px;font-weight:550;display:inline-flex}.ctl-btn:hover:not(:disabled){background:#ffffff1f}.ctl-btn:disabled{opacity:.35;cursor:default}.ctl-btn kbd{color:var(--case-muted);background:0 0;border-color:#fff3;font-size:12px}.ctl-btn span[aria-hidden]{font-size:20px;line-height:1}.toggle[aria-pressed=true]{background:var(--marigold);border-color:var(--marigold);color:var(--marigold-ink)}.toggle[aria-pressed=true] kbd{color:var(--marigold-ink);border-color:#4a320059}.octave-value{text-align:center;min-width:48px}.octave-value strong{font-size:22px;line-height:1.1}.volume input{width:110px;accent-color:var(--marigold)}.felt{background:repeating-linear-gradient(90deg, #00000014 0 2px, transparent 2px 5px), var(--felt);z-index:3;border-radius:3px 3px 0 0;height:10px;position:relative;box-shadow:0 3px 4px #00000059}.keys-scroll{scrollbar-width:thin;scrollbar-color:var(--case-hi) transparent;overflow-x:auto}.keys{width:calc(var(--wk) * var(--whites));height:calc(var(--wk) * 4.1);touch-action:none;-webkit-user-select:none;user-select:none;min-height:170px;max-height:230px;margin:0 auto;display:flex;position:relative}.key{cursor:pointer;flex-direction:column;justify-content:flex-end;align-items:center;display:flex;position:relative}.key.white{flex:0 0 var(--wk);background:linear-gradient(180deg, var(--ivory-shade), var(--ivory) 14%);border-right:1px solid #c9c4b6;border-radius:0 0 7px 7px;padding-bottom:12px;transition:background 60ms,transform 60ms;box-shadow:inset 0 -2px #d8d3c4}.key.white:first-child{border-left:1px solid #c9c4b6}.key.black{z-index:2;--bw:calc(var(--wk) * .6);width:var(--bw);top:0;left:calc(var(--wk) * var(--x) - var(--bw) / 2 + var(--bw) * var(--nudge));background:linear-gradient(180deg, var(--ebony) 0%, var(--ebony-hi) 88%, #0c0c0f 92%);border-radius:0 0 5px 5px;height:62%;padding-bottom:12px;transition:background 60ms;position:absolute;box-shadow:0 3px 5px #00000073}.note-name{text-align:center;color:#7b7466;visibility:hidden;margin-bottom:6px;font-size:12px;line-height:1.15}.note-name sub{vertical-align:baseline;font-size:.8em}.key.black .note-name{color:#a7a9b3;font-size:10px}.key.names-on .note-name,.key.white[aria-label^=C] .note-name{visibility:visible}.middle-c{text-align:center;color:var(--felt);white-space:nowrap;margin-bottom:3px;font-size:10px;font-weight:700;line-height:1.1}.cap{color:#1a1f2b;background:#fff;border:1px solid #cfd4dd;border-bottom-width:3px;min-width:26px;padding:2px 0 1px;font-size:14px}.cap:empty{visibility:hidden}.key.black .cap{color:#f2f3f6;background:#3b3e48;border-color:#50535e;min-width:22px;font-size:12px}.key.white:not(.in-window){background:linear-gradient(#dcd8cc,#eeebe2 14%)}.key.white.down,.key.white.auto{background:linear-gradient(180deg, #cfdcff, var(--press));transform:translateY(1px)}.key.black.down,.key.black.auto{background:linear-gradient(180deg, #2c3f72, var(--press))}.key.down .note-name,.key.auto .note-name{color:#1a2a55;visibility:visible}.key.hint.white{background:linear-gradient(180deg, #ffe6a8, var(--marigold))}.key.hint.black{background:linear-gradient(180deg, #7a5500, var(--marigold))}.key.hint .cap{border-color:var(--marigold-ink);animation:1s ease-in-out infinite nudge}.key.hint .note-name{color:var(--marigold-ink);visibility:visible}.key.hint.down{background:linear-gradient(180deg, #cfdcff, var(--press))}@keyframes nudge{50%{transform:translateY(-3px)}}.legend{grid-template-columns:auto 1fr;align-items:center;gap:16px 40px;padding:22px 4px 8px;display:grid}.map{flex-direction:column;gap:6px;display:flex}.map-row{gap:4px;display:flex}.map-row.top{padding-left:22px}.map-key,.map-gap{width:40px;color:var(--muted);flex-direction:column;align-items:center;gap:2px;font-size:11px;display:flex}.map-key kbd{width:36px;font-size:14px}.map-key.b kbd{background:var(--ebony);color:#f2f3f6;border-color:#000}.legend-notes{color:var(--muted);gap:8px;max-width:60ch;margin:0;padding:0;list-style:none;display:grid}.legend-notes strong{color:var(--ink);font-weight:650}.songs{border-top:1px solid var(--line);grid-template-columns:minmax(250px,320px) 1fr;gap:28px;margin-top:36px;padding-top:32px;display:grid}.songs h2{font-variation-settings:"wdth" 80;letter-spacing:-.01em;margin:0;font-size:30px;font-weight:750}.songs-intro{color:var(--muted);margin:6px 0 16px;font-size:15px}.song-list{gap:2px;margin:0;padding:0;list-style:none;display:grid}.song{text-align:left;background:0 0;border:0;border-radius:8px;justify-content:space-between;align-items:baseline;gap:12px;width:100%;padding:9px 12px;display:flex}.song:hover{background:var(--surface)}.song[aria-pressed=true]{background:var(--sel-bg);color:var(--sel-ink)}.song[aria-pressed=true] .song-level{color:var(--marigold)}.song-title{font-weight:600}.song-level{color:var(--muted);white-space:nowrap;font-size:13px}.dots{letter-spacing:1px;vertical-align:1px;font-size:9px}.practice{background:var(--surface);border:1px solid var(--line);border-radius:16px;align-self:start;min-width:0;padding:22px 22px 18px}.practice-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:14px 20px;display:flex}.practice h3{margin:0;font-size:24px;font-weight:700;line-height:1.2}.song-meta{color:var(--muted);max-width:52ch;margin:4px 0 0;font-size:15px}.practice-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.btn{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:9px 18px;font-weight:650}.btn:hover{border-color:var(--muted)}.btn.primary{background:var(--marigold);border-color:var(--marigold);color:var(--marigold-ink)}.btn.primary:hover{filter:brightness(1.05)}.speed{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:3px;display:inline-flex}.speed button{color:var(--muted);background:0 0;border:0;border-radius:999px;padding:5px 11px;font-size:14px}.speed button[aria-checked=true]{background:var(--sel-bg);color:var(--sel-ink)}.status{min-height:1.6em;margin:16px 0 10px;font-size:16px}.status kbd{background:var(--marigold);color:var(--marigold-ink);border-color:#c98a00;font-size:15px}.status .count{color:var(--muted);margin-left:6px;font-size:14px}.strip{flex-wrap:wrap;gap:10px 4px;max-height:232px;padding:4px 2px;display:flex;position:relative;overflow-y:auto}.bar{border-right:2px solid var(--line);gap:4px;margin-right:4px;padding-right:8px;display:inline-flex}.chip{min-width:36px;color:var(--muted);flex-direction:column;align-items:center;gap:1px;font-size:11px;transition:opacity .12s;display:inline-flex}.chip kbd{min-width:32px;font-size:15px}.chip.black kbd{background:var(--ebony);color:#f2f3f6;border-color:#000}.chip.long kbd{min-width:48px}.chip.short kbd{font-size:13px}.chip.rest{min-width:14px;color:var(--line);justify-content:center;font-size:18px}.chip.done{opacity:.35}.chip.current kbd{background:var(--marigold);color:var(--marigold-ink);border-color:#c98a00;transform:translateY(-2px)}.chip.current span{color:var(--ink);font-weight:650}.chip.miss{animation:.3s shake}.chip.miss kbd{border-color:var(--miss)}@keyframes shake{25%{transform:translate(-3px)}75%{transform:translate(3px)}}.footer{color:var(--muted);margin-top:40px;font-size:13px}@media (prefers-reduced-motion:reduce){.key.hint .cap,.chip.miss{animation:none}.key.white{transition:none}}@media (hover:none) and (pointer:coarse){.legend{display:none}}@media (width<=860px){.songs,.legend{grid-template-columns:1fr}.map{display:none}}@media (width<=560px){.page{padding-top:20px}.instrument{border-radius:0;margin:0 -16px;padding:14px 10px 16px}.readout-note{font-size:28px}.volume{display:none}.ctl-btn{padding:6px 11px;font-size:14px}.ctl-btn kbd{display:none}.keys{margin:0}.middle-c{background:var(--felt);border-radius:50%;width:6px;height:6px;font-size:0}.practice{padding:18px 14px}}