@font-face{font-family:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;font-stretch:75% 100%;src:url(./bricolage-grotesque-vietnamese-standard-normal-Br4FGdAc.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,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(./bricolage-grotesque-latin-ext-standard-normal-qp-RdZgh.woff2) format("woff2-variations");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}@font-face{font-family:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;font-stretch:75% 100%;src:url(./bricolage-grotesque-latin-standard-normal-C5Lc8Qmc.woff2) format("woff2-variations");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}:root{--paper: #e9eef0;--paper-2: #dde5e9;--ink: #14304a;--ink-soft: #4a6276;--rule: #b9c7cf;--accent: #b3263e;--display: "Bricolage Grotesque Variable", system-ui, sans-serif;--good: #2f7d4f;color-scheme:light dark}@media(prefers-color-scheme:dark){:root{--paper: #0f2233;--paper-2: #16304a;--ink: #dce6ea;--ink-soft: #94aab8;--rule: #2b465d;--accent: #f0798d;--good: #5cc48a}}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:var(--paper);color:var(--ink);font-family:system-ui,sans-serif;line-height:1.5}main{width:min(100%,44rem);margin:0 auto;padding:1.5rem 1rem 3rem}.back{color:var(--ink-soft);font-family:var(--display);font-size:.875rem;text-decoration-color:var(--accent);text-underline-offset:.18em}h1{margin:.5rem 0 .75rem;font-family:var(--display);font-size:clamp(2.25rem,7vw,3rem);font-weight:800;font-stretch:82%;letter-spacing:-.04em;line-height:1}h2{margin:0;font-family:var(--display);font-size:1.25rem;font-weight:600}.lede{color:var(--ink-soft);margin:0 0 1.5rem;max-width:38rem}.muted{color:var(--ink-soft)}.small{font-size:.875rem}a{color:inherit;text-decoration-color:var(--accent);text-underline-offset:.18em}button,select{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.label{display:block;font-family:var(--display);font-size:.8rem;color:var(--ink-soft)}.levels,.songs,.modes{display:flex;flex-wrap:wrap;gap:.5rem}.levels button,.songs button,.modes button{padding:.5rem .95rem;border:1px solid var(--rule);border-radius:999px;background:transparent;font-family:var(--display);font-weight:600}.levels button{display:grid;justify-items:center;min-width:5.5rem;padding:.35rem 1rem .45rem;border-radius:.75rem;font-size:1.4rem;line-height:1.1}.levels small{font-size:.8rem;font-weight:500}[role=radio][aria-checked=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}.level-blurb{margin:.5rem 0 .9rem;font-size:.9rem}.songs{margin-bottom:1rem}.stage{position:relative;display:grid;gap:.75rem;padding:.9rem .9rem .75rem;border:1px solid var(--rule);border-radius:.75rem;background:var(--paper-2);grid-template-columns:minmax(0,1fr);user-select:none;-webkit-user-select:none}.stage>*{min-width:0}.key.white{min-width:0}body.tap .stage{cursor:pointer}.stage-head{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem}.stage-head .title{display:grid;min-width:0}.stage-head strong{font-family:var(--display);font-size:1.15rem;font-weight:700}#progress{white-space:nowrap;font-variant-numeric:tabular-nums}.cards{display:grid;grid-template-columns:1.6fr 1fr;gap:.75rem}.now-card,.next-card{position:relative;display:grid;justify-items:center;align-content:center;min-height:clamp(6.5rem,20vh,10rem);padding:1.4rem .4rem .4rem;border-radius:.75rem;background:var(--paper);overflow:hidden}.now-card{border:4px solid var(--c, transparent)}.next-card{border:3px dashed var(--c, var(--rule))}.now-card b,.next-card b{font-family:var(--display);font-weight:800;font-stretch:82%;line-height:1;color:var(--c);text-shadow:0 0 1px var(--ink),0 0 1px var(--ink)}.now-card b{font-size:clamp(3.5rem,15vh,7rem)}.next-card b{font-size:clamp(2.2rem,8vh,4rem);opacity:.85}.now-card .label,.next-card .label{position:absolute;top:.35rem;left:.6rem}.syllable{min-height:1.4em;font-family:var(--display);font-size:clamp(1.1rem,4vh,1.6rem);font-weight:600}.again{font-family:var(--display);font-weight:600;font-size:.9rem;white-space:nowrap}.now-card:after{content:"";position:absolute;left:0;bottom:0;height:6px;width:calc(var(--left, 0) * 100%);background:var(--c)}.bump{animation:bump .28s ease-out}@keyframes bump{0%{transform:scale(.94)}60%{transform:scale(1.03)}to{transform:none}}.lane{--h: clamp(4.5rem, 13vh, 7rem);position:relative;height:var(--h);border-radius:.5rem;background:var(--paper);overflow:hidden}.track{position:absolute;inset:.35rem 0;will-change:transform}.stepped .track{transition:transform .25s ease-out}.track.with-lyrics{bottom:1.3rem}.pill{position:absolute;bottom:calc(var(--y) * (100% - 1.6rem));height:1.6rem;padding:0 .35rem;border:0;border-radius:.5rem;background:var(--c);color:#fff;font:700 .85rem/1.6rem var(--display);text-align:left;text-shadow:0 0 2px rgb(0 0 0 / .55);white-space:nowrap;opacity:.75}.pill.line-start:before{content:"";position:absolute;left:-.5rem;top:-100vh;bottom:-100vh;border-left:1px dashed var(--rule)}.pill i{position:absolute;left:.2rem;line-height:1.2rem;color:var(--ink);font-style:normal;font-weight:500;text-shadow:none}.pill.past{opacity:.25}.pill.current{opacity:1;box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--ink)}.playhead{position:absolute;top:0;bottom:0;left:20%;width:2px;margin-left:-1px;background:var(--ink);opacity:.5}.keys{--w: calc(100% / var(--whites));position:relative;display:flex;height:clamp(9rem,30vh,15rem);padding-top:.9rem}.key{position:relative;display:flex;justify-content:center;align-items:flex-end}.key.white{flex:1;margin:0 1px;padding-bottom:.5rem;border:1px solid #9aa9b3;border-radius:0 0 .45rem .45rem;background:#fbfbf8;box-shadow:inset 0 -6px #e3e6e2;transition:background .12s}.key.black{position:absolute;top:.9rem;left:calc(var(--at) * var(--w));width:calc(var(--w) * .6);height:60%;margin-left:calc(var(--w) * -.3);padding-bottom:.35rem;border-radius:0 0 .35rem .35rem;background:#1c2329;box-shadow:inset 0 -5px #3a444c;z-index:1}.key.black.landmark{background:#8d969d;box-shadow:none;opacity:.55}.key.white.unused{background:#eceee9}.key.white.unused .dot{opacity:.35}.key.middle-c:before{content:"";position:absolute;top:-.75rem;width:.5rem;height:.5rem;border-radius:50%;background:var(--ink)}.dot{flex-shrink:0;display:grid;place-items:center;min-width:clamp(1.8rem,6vw,2.6rem);height:clamp(1.8rem,6vw,2.6rem);padding:0 .25rem;border-radius:999px;background:var(--c);color:#fff;font:800 clamp(.95rem,3.2vw,1.35rem)/1 var(--display);text-shadow:0 0 2px rgb(0 0 0 / .5)}.key.black .dot{min-width:clamp(1.5rem,5vw,2.2rem);height:clamp(1.5rem,5vw,2.2rem);padding:0 .2rem;font-size:clamp(.65rem,2.4vw,.95rem);white-space:nowrap}.key.now{background:var(--c);box-shadow:inset 0 -6px #0000002e,0 0 0 3px var(--ink);z-index:2}.key.now .dot{opacity:1;box-shadow:0 0 0 3px #fff}.key.next:not(.now){outline:4px dashed var(--c);outline-offset:-6px}.key.now.next{outline:4px dashed #fff;outline-offset:-10px}.key.white.now.bump{animation:press .28s ease-out}@keyframes press{0%{transform:translateY(4px)}to{transform:none}}.hint{margin:0}.overlay{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;border-radius:inherit;background:color-mix(in srgb,var(--paper-2) 82%,transparent);pointer-events:none;z-index:3}.overlay[hidden]{display:none}.overlay b{font-family:var(--display);font-size:clamp(4rem,22vh,9rem);font-weight:800;font-stretch:82%;line-height:1}.overlay span{font-family:var(--display);font-size:1.2rem;font-weight:600}.controls{display:grid;gap:.75rem;margin:1rem 0 2rem}.buttons{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.6rem}.buttons [hidden]{display:none}.primary{min-width:9rem;padding:.75rem 1.6rem;border:0;border-radius:999px;background:var(--ink);color:var(--paper);font-family:var(--display);font-size:1.1rem;font-weight:700}.quiet{padding:.6rem 1.1rem;border:1px solid var(--rule);border-radius:999px;background:transparent;font-family:var(--display);font-weight:600}.round{min-width:2.9rem;padding:.6rem .8rem}.small-btn{min-width:2.5rem;padding:.35rem .5rem}.speed{display:flex;align-items:center;gap:.5rem}.speed .label{display:inline}.speed input{flex:1;min-width:0;accent-color:var(--accent)}.speed output{min-width:3.5rem;text-align:right;font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums}.modes{justify-content:center}.mode-help{margin:0;text-align:center;min-height:1.5em}section.settings{display:flex;flex-wrap:wrap;align-items:end;gap:.9rem 1rem;margin-bottom:2rem}.settings h2{flex-basis:100%}.field{display:grid;gap:.25rem;flex:1 1 12rem;min-width:0}.field span{font-family:var(--display);font-size:.875rem;color:var(--ink-soft)}select{width:100%;padding:.55rem .7rem;border:1px solid var(--rule);border-radius:.5rem;background:var(--paper)}.check{display:flex;align-items:center;gap:.5rem;flex-basis:100%}.help{color:var(--ink-soft);font-size:.875rem}kbd{padding:0 .3em;border:1px solid var(--rule);border-radius:.25rem;font-family:inherit;font-size:.85em}body.focus main{width:100%;max-width:none;min-height:100dvh;padding:.5rem;display:flex;flex-direction:column;gap:.5rem}body.focus .intro,body.focus .levels,body.focus .level-blurb,body.focus .songs,body.focus .settings,body.focus .help,body.focus .speed .label,body.focus .modes,body.focus .mode-help,body.focus .hint{display:none}body.focus .stage{flex:1;grid-template-rows:auto auto auto 1fr}body.focus .keys{height:auto;min-height:9rem}body.focus .controls{margin:0;grid-template-columns:auto 1fr;align-items:center}body.focus .cards .now-card{min-height:clamp(6.5rem,24vh,14rem)}body.focus .now-card b{font-size:clamp(3.5rem,19vh,10rem)}@media(orientation:landscape)and (max-height:32rem){body.focus .stage{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);grid-template-rows:auto auto 1fr}body.focus .stage-head,body.focus .keys{grid-column:1 / -1}body.focus .cards .now-card,body.focus .cards .next-card{min-height:0}body.focus .now-card b{font-size:clamp(2.5rem,16vh,5rem)}body.focus .next-card b{font-size:clamp(1.8rem,10vh,3rem)}}@media(max-width:30rem){.levels button{min-width:0;flex:1}.buttons .quiet:not(.round){padding:.6rem .8rem}}