@font-face{font-family:Figtree;font-style:normal;font-display:swap;font-weight:400;src:url(./figtree-latin-400-normal-g7Dtegnw.woff2) format("woff2"),url(./figtree-latin-400-normal-BD4aNku5.woff) format("woff")}@font-face{font-family:Figtree;font-style:normal;font-display:swap;font-weight:400;src:url(./figtree-latin-ext-400-normal-CXAzuTZb.woff2) format("woff2"),url(./figtree-latin-ext-400-normal-Gbh-3PTk.woff) format("woff")}@font-face{font-family:Figtree;font-style:normal;font-display:swap;font-weight:500;src:url(./figtree-latin-500-normal-BWnGEVsr.woff2) format("woff2"),url(./figtree-latin-500-normal-B_yy1phn.woff) format("woff")}@font-face{font-family:Figtree;font-style:normal;font-display:swap;font-weight:500;src:url(./figtree-latin-ext-500-normal-Du0rIuHj.woff2) format("woff2"),url(./figtree-latin-ext-500-normal-BOEJvrb_.woff) format("woff")}@font-face{font-family:Figtree;font-style:normal;font-display:swap;font-weight:600;src:url(./figtree-latin-600-normal-Cv_xCTDl.woff2) format("woff2"),url(./figtree-latin-600-normal-BM_oTo4n.woff) format("woff")}@font-face{font-family:Figtree;font-style:normal;font-display:swap;font-weight:600;src:url(./figtree-latin-ext-600-normal-DJlfifZj.woff2) format("woff2"),url(./figtree-latin-ext-600-normal-CQqsimlV.woff) format("woff")}@font-face{font-family:Figtree;font-style:normal;font-display:swap;font-weight:700;src:url(./figtree-latin-700-normal-th6qEP7c.woff2) format("woff2"),url(./figtree-latin-700-normal-BCCt2T1q.woff) format("woff")}@font-face{font-family:Figtree;font-style:normal;font-display:swap;font-weight:700;src:url(./figtree-latin-ext-700-normal-CS4sQkGV.woff2) format("woff2"),url(./figtree-latin-ext-700-normal-BoDi4KL2.woff) format("woff")}@font-face{font-family:JetBrains Mono;font-style:normal;font-display:swap;font-weight:500;src:url(./jetbrains-mono-latin-500-normal-BWZEU5yA.woff2) format("woff2"),url(./jetbrains-mono-latin-500-normal-CJOVTJB7.woff) format("woff")}@font-face{font-family:JetBrains Mono;font-style:normal;font-display:swap;font-weight:500;src:url(./jetbrains-mono-latin-ext-500-normal-Cut-4mMH.woff2) format("woff2"),url(./jetbrains-mono-latin-ext-500-normal-ckzbgY84.woff) format("woff")}@font-face{font-family:JetBrains Mono;font-style:normal;font-display:swap;font-weight:600;src:url(./jetbrains-mono-latin-600-normal-C8RAYTDA.woff2) format("woff2"),url(./jetbrains-mono-latin-600-normal-BfsvjouI.woff) format("woff")}@font-face{font-family:JetBrains Mono;font-style:normal;font-display:swap;font-weight:600;src:url(./jetbrains-mono-latin-ext-600-normal-BfB_LPfz.woff2) format("woff2"),url(./jetbrains-mono-latin-ext-600-normal-DObL3zCW.woff) format("woff")}@font-face{font-family:Unbounded;font-style:normal;font-display:swap;font-weight:500;src:url(./unbounded-latin-500-normal-4slEIF53.woff2) format("woff2"),url(./unbounded-latin-500-normal-ZsrgWWU1.woff) format("woff")}@font-face{font-family:Unbounded;font-style:normal;font-display:swap;font-weight:500;src:url(./unbounded-latin-ext-500-normal-BTIpesyw.woff2) format("woff2"),url(./unbounded-latin-ext-500-normal-DRTUZjT4.woff) format("woff")}@font-face{font-family:Unbounded;font-style:normal;font-display:swap;font-weight:600;src:url(./unbounded-latin-600-normal-oRSANpZr.woff2) format("woff2"),url(./unbounded-latin-600-normal-BPdB_PEv.woff) format("woff")}@font-face{font-family:Unbounded;font-style:normal;font-display:swap;font-weight:600;src:url(./unbounded-latin-ext-600-normal-0iZLtTDV.woff2) format("woff2"),url(./unbounded-latin-ext-600-normal-ClMPf-bu.woff) format("woff")}@font-face{font-family:Unbounded;font-style:normal;font-display:swap;font-weight:700;src:url(./unbounded-latin-700-normal-CaoNriVp.woff2) format("woff2"),url(./unbounded-latin-700-normal-CZtriu5h.woff) format("woff")}@font-face{font-family:Unbounded;font-style:normal;font-display:swap;font-weight:700;src:url(./unbounded-latin-ext-700-normal-BLzWLLjG.woff2) format("woff2"),url(./unbounded-latin-ext-700-normal-C5zWdd_U.woff) format("woff")}@font-face{font-family:Noto Music;font-style:normal;font-display:swap;font-weight:400;src:url(./noto-music-music-400-normal-CksxHXl6.woff2) format("woff2"),url(./noto-music-music-400-normal-BOLtuVsm.woff) format("woff")}:root{--ground: #eef1f0;--paper: #ffffff;--line: #d8dfde;--divider: #e7eceb;--grid: #e3e8e7;--track: #dde4e3;--rule: #b9c3c2;--rule-strong: #c9d2d1;--ink: #161b1c;--muted: #5a6667;--faint: #8a9596;--disabled: #6b7778;--accent: #2f6669;--accent-ink: #1f4a4c;--accent-soft: #dfeaea;--accent-ring: #b5cfcf;--accent-halo: #d3e3e3;--on-fill: #ffffff;--on-fill-muted: #cfe2e2;--tile-overlay: rgba(255, 255, 255, .1);--reward: #e0a526;--reward-soft: #f8edd2;--reward-ink: #8a6412;--reward-star: #c48a12;--diamond: #4cbfe3;--diamond-hi: #d9f6ff;--diamond-deep: #2576bd;--diamond-glow: rgba(76, 191, 227, .5);--diamond-ink: #1d6a96;--diamond-on-fill-hi: #d9f6ff;--diamond-on-fill: #4cbfe3;--diamond-on-fill-deep: #2576bd;--good: #1f8a5b;--gold: #b7791f;--gold-ink: #9a6a10;--miss: #c23b3b;--good-soft: #e3f2ea;--good-ink: #176c47;--miss-soft: #fbe4e4;--miss-ink: #a12f2f;--piano-white: #ffffff;--piano-white-edge: #c9d2d1;--piano-white-label: #5a6667;--piano-black: #161b1c;--piano-black-label: #9aa5a5;--piano-black-dot: #4cc38a;--slate: #2f6669;--staff: #9aa5a5;--lane-note: #dde4e3;--lane-grid: #e3e8e7;--lane-bar: #b9c3c2;--thumb: #ffffff;--thumb-shadow: 0 1px 3px rgba(22, 27, 28, .14);--knob: #ffffff;--backdrop: rgba(22, 27, 28, .42);--dialog-shadow: 0 24px 48px rgba(22, 27, 28, .14);--scroll-thumb: #b9c3c2;--scroll-thumb-hover: #8a9596;--focus: #e0a526;--link: #2f6669;--link-hover: #1f4a4c;--font-display: Unbounded, sans-serif;--font-ui: Figtree, system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace;--font-music: "Noto Music", serif;--mastery-mid: #9cc1c1;--mastery-mid-ink: #10302f;--ease-std: cubic-bezier(.2, 0, 0, 1);--ease-out-soft: cubic-bezier(.3, .8, .3, 1);color-scheme:light}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--ground: #101415;--paper: #191f20;--line: #2f3839;--divider: #262e2f;--grid: #262e2f;--track: #222a2b;--rule: #4a5657;--rule-strong: #3d4849;--ink: #e8eeed;--muted: #9aa7a7;--faint: #6b7778;--disabled: #7f8b8c;--accent: #8fbfc1;--accent-ink: #b7d8d9;--accent-soft: #1c3031;--accent-ring: #284445;--accent-halo: #1f3a3b;--on-fill: #101415;--on-fill-muted: #1f4446;--tile-overlay: rgba(255, 255, 255, .1);--reward: #f0b429;--reward-soft: #3a2f14;--reward-ink: #f0c35a;--reward-star: #f0c35a;--diamond: #7fd8f2;--diamond-hi: #f2fdff;--diamond-deep: #4a9fe0;--diamond-glow: rgba(127, 216, 242, .45);--diamond-ink: #8fdcf5;--diamond-on-fill-hi: #7fd8f2;--diamond-on-fill: #1f8fc2;--diamond-on-fill-deep: #0f4f8a;--good: #4cc38a;--gold: #f0b429;--gold-ink: #f0c35a;--miss: #ff6b6b;--good-soft: #15301f;--good-ink: #7ad9a8;--miss-soft: #3a1c1c;--miss-ink: #ff9a9a;--piano-white: #e8eeed;--piano-white-edge: #9aa7a7;--piano-white-label: #3d4849;--piano-black: #0b0e0f;--piano-black-label: #9aa5a5;--slate: #8fbfc1;--staff: #5d6a6b;--lane-note: #222a2b;--lane-grid: #262e2f;--lane-bar: #4a5657;--thumb: #3a4546;--thumb-shadow: 0 1px 3px rgba(0, 0, 0, .5);--knob: #191f20;--backdrop: rgba(0, 0, 0, .62);--dialog-shadow: 0 24px 48px rgba(0, 0, 0, .5);--scroll-thumb: #3d4849;--scroll-thumb-hover: #5d6a6b;--focus: #f0b429;--link: #8fbfc1;--link-hover: #b7d8d9;--mastery-mid: #3d6466;--mastery-mid-ink: #e8eeed;color-scheme:dark}}:root[data-theme=dark]{--ground: #101415;--paper: #191f20;--line: #2f3839;--divider: #262e2f;--grid: #262e2f;--track: #222a2b;--rule: #4a5657;--rule-strong: #3d4849;--ink: #e8eeed;--muted: #9aa7a7;--faint: #6b7778;--disabled: #7f8b8c;--accent: #8fbfc1;--accent-ink: #b7d8d9;--accent-soft: #1c3031;--accent-ring: #284445;--accent-halo: #1f3a3b;--on-fill: #101415;--on-fill-muted: #1f4446;--tile-overlay: rgba(255, 255, 255, .1);--reward: #f0b429;--reward-soft: #3a2f14;--reward-ink: #f0c35a;--reward-star: #f0c35a;--good: #4cc38a;--gold: #f0b429;--gold-ink: #f0c35a;--miss: #ff6b6b;--good-soft: #15301f;--good-ink: #7ad9a8;--miss-soft: #3a1c1c;--miss-ink: #ff9a9a;--piano-white: #e8eeed;--piano-white-edge: #9aa7a7;--piano-white-label: #3d4849;--piano-black: #0b0e0f;--piano-black-label: #9aa5a5;--slate: #8fbfc1;--staff: #5d6a6b;--lane-note: #222a2b;--lane-grid: #262e2f;--lane-bar: #4a5657;--thumb: #3a4546;--thumb-shadow: 0 1px 3px rgba(0, 0, 0, .5);--knob: #191f20;--backdrop: rgba(0, 0, 0, .62);--dialog-shadow: 0 24px 48px rgba(0, 0, 0, .5);--scroll-thumb: #3d4849;--scroll-thumb-hover: #5d6a6b;--focus: #f0b429;--link: #8fbfc1;--link-hover: #b7d8d9;--mastery-mid: #3d6466;--mastery-mid-ink: #e8eeed;color-scheme:dark}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;text-size-adjust:100%}#root{min-height:100dvh}h1,h2,h3,p{margin:0}a{color:var(--link)}a:hover{color:var(--link-hover)}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:not-allowed}button,a{transition:background-color .18s ease-out,border-color .18s ease-out,color .18s ease-out,box-shadow .18s ease-out,opacity .18s ease-out,transform .12s ease-out}button:active:not(:disabled){transform:scale(.97)}.m-ease{transition:background-color .2s ease-out,border-color .2s ease-out,color .2s ease-out,box-shadow .2s ease-out,opacity .2s ease-out,left .24s var(--ease-out-soft),width .3s ease-out}.m-in{animation:m-in .22s cubic-bezier(.2,.8,.3,1) both}@keyframes m-in{0%{opacity:0;transform:translateY(-4px)}}.m-goo{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.m-blob{position:absolute;box-sizing:border-box}.m-skin{position:absolute;top:0;right:0;bottom:0;left:0;box-sizing:border-box}@keyframes m-slide-a{0%{transform:translate(var(--fx),var(--fy)) scale(var(--sw),var(--sh))}to{transform:translate(0) scale(1)}}@keyframes m-slide-b{0%{transform:translate(var(--fx),var(--fy)) scale(var(--sw),var(--sh))}to{transform:translate(0) scale(1)}}.m-acc{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .34s var(--ease-out-soft),opacity .26s ease-out,visibility 0s linear .34s}.m-acc.is-open{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows .34s var(--ease-out-soft),opacity .26s ease-out,visibility 0s linear 0s}.m-acc>div{overflow:hidden;min-height:0}.m-sheet{animation:m-sheet .32s cubic-bezier(.2,.8,.3,1) both}@keyframes m-sheet{0%{opacity:0;transform:translateY(32px)}}.m-sheet-out{animation:m-sheet-out .24s cubic-bezier(.5,0,.8,.4) both}@keyframes m-sheet-out{to{opacity:0;transform:translateY(32px)}}.m-dialog{animation:m-dialog .32s cubic-bezier(.2,.8,.3,1) both}@keyframes m-dialog{0%{opacity:0;transform:translateY(8px)}}.m-dialog-out{animation:m-dialog-out .24s cubic-bezier(.5,0,.8,.4) both}@keyframes m-dialog-out{to{opacity:0;transform:translateY(8px)}}.m-fade-out{animation:m-fade-out .24s ease-in both}@keyframes m-fade-out{to{opacity:0}}html{scrollbar-width:none}html::-webkit-scrollbar{display:none}.no-scrollbar{scrollbar-width:none}.no-scrollbar::-webkit-scrollbar{display:none}.m-scroll{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent}.m-scroll::-webkit-scrollbar{width:10px;height:10px}.m-scroll::-webkit-scrollbar-track{background:transparent}.m-scroll::-webkit-scrollbar-thumb{background-color:var(--scroll-thumb);border-radius:99px;border:3px solid transparent;background-clip:padding-box}.m-scroll::-webkit-scrollbar-thumb:hover{background-color:var(--scroll-thumb-hover)}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus);outline-offset:2px}[tabindex="-1"]:focus{outline:none}input[type=range]{accent-color:var(--accent)}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){*,*:before,*:after{transition:none!important;animation:none!important}}.shell{height:100dvh;display:flex;background:var(--ground);color:var(--ink);overflow:hidden}.shell--phone,.shell--top{flex-direction:column}.shell-main{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:none}.shell-main::-webkit-scrollbar{display:none}.shell--tablet .shell-main{align-items:center;padding:0 24px}.shell--desktop .shell-main{align-items:center;padding:0 32px}.shell--desktop .shell-main--wide,.shell--tablet .shell-main--wide{align-items:stretch;padding:0}.column{width:100%;max-width:640px;flex:1;min-height:0;display:flex;flex-direction:column}.brand{font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:-.02em;color:var(--ink);text-decoration:none}.brand:hover{color:var(--ink)}.brand--home{font-size:21px}.brand--static{flex:none}.nav--tabs{flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--paper);border-top:1px solid var(--line);padding:6px 6px calc(8px + env(safe-area-inset-bottom,0px));font-size:11.5px;font-weight:600}.nav--tabs .nav-item{min-height:48px;text-decoration:none;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:12px}.nav--tabs .nav-item.is-current{color:var(--ink);font-weight:700}.nav-pill{width:56px;height:30px;border-radius:99px;display:flex;align-items:center;justify-content:center;transition:background-color .18s ease-out}.nav-item.is-current .nav-pill{background:var(--accent-soft);color:var(--accent-ink)}.topbar{flex:none;display:flex;align-items:center;gap:12px 24px;padding:14px 28px;background:var(--paper);border-bottom:1px solid var(--line)}.nav--top{margin-left:auto;display:flex;gap:4px;font-weight:600;font-size:14px}.nav--top .nav-item{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:10px;text-decoration:none;color:var(--muted)}.nav--top .nav-item.is-current{background:var(--accent-soft);color:var(--accent-ink);font-weight:700}.nav--top .nav-item:hover{color:var(--accent-ink)}.topbar--desk{flex-wrap:wrap;gap:12px 28px;padding:18px 40px}.topbar--desk .nav--top{margin-left:0;flex-wrap:wrap}.topbar--desk .nav--top .nav-item{padding:0 12px}.frame{height:100dvh;display:flex;justify-content:center;background:var(--ground);overflow:hidden}.frame-column{position:relative;width:100%;height:100%;min-height:0;display:flex;flex-direction:column}@media (min-width: 700px){.frame{padding:0 24px}.frame-column{max-width:640px}}@media (min-width: 1100px){.frame{padding:0 32px}}.page{--pt: 60px;--pb: 24px;--px: 20px;flex:1;min-height:0;display:flex;flex-direction:column;padding:calc(var(--pt) - 36px + env(safe-area-inset-top,0px)) var(--px) calc(var(--pb) - 12px + env(safe-area-inset-bottom,0px));overflow-y:auto;scrollbar-width:none}.page::-webkit-scrollbar{display:none}@media (hover: hover) and (pointer: fine){html,.no-scrollbar,.shell-main,.page{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent}html::-webkit-scrollbar,.no-scrollbar::-webkit-scrollbar,.shell-main::-webkit-scrollbar,.page::-webkit-scrollbar{display:block;width:10px;height:10px}html::-webkit-scrollbar-track,.no-scrollbar::-webkit-scrollbar-track,.shell-main::-webkit-scrollbar-track,.page::-webkit-scrollbar-track{background:transparent}html::-webkit-scrollbar-thumb,.no-scrollbar::-webkit-scrollbar-thumb,.shell-main::-webkit-scrollbar-thumb,.page::-webkit-scrollbar-thumb{background-color:var(--scroll-thumb);border-radius:99px;border:3px solid transparent;background-clip:padding-box}html::-webkit-scrollbar-thumb:hover,.no-scrollbar::-webkit-scrollbar-thumb:hover,.shell-main::-webkit-scrollbar-thumb:hover,.page::-webkit-scrollbar-thumb:hover{background-color:var(--scroll-thumb-hover)}}@media (min-width: 700px){.page{padding:var(--pt) var(--px) var(--pb)}}.page-title{margin:0;font-family:var(--font-display);font-weight:500;font-size:22px}.screen-head{display:flex;align-items:center;gap:10px;flex:none}.screen-head-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.screen-title{margin:0;flex:1;min-width:0;font-family:var(--font-display);font-weight:500;font-size:20px;line-height:1.2}.muted-text{font-size:13px;color:var(--muted);line-height:1.35}.muted-small{font-size:12px;color:var(--muted)}.mono-muted{font-family:var(--font-mono);font-size:13px;color:var(--muted)}.mono-accent{font-family:var(--font-mono);font-weight:600;color:var(--accent-ink)}.mono-line{font-family:var(--font-mono);font-size:13px;font-weight:600}.mono-line--big{font-size:14px}.music{font-family:var(--font-music)}.label,.eyebrow{margin:0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.eyebrow--fill{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--on-fill-muted)}.hairline{height:1px;background:var(--divider);margin:2px 0}.card{background:var(--paper);border-radius:20px}.tone-good{color:var(--good-ink)}.tone-gold{color:var(--gold-ink)}.tone-miss{color:var(--miss)}.tone-ink{color:var(--ink)}.tone-muted{color:var(--muted)}.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:14px;border:0;border-radius:14px;font-weight:700;font-size:16px;text-align:center;text-decoration:none}.btn--accent{background:var(--accent);color:var(--on-fill);border-radius:16px;padding:15px}.btn--accent:hover{color:var(--on-fill)}.btn--ink{background:var(--ink);color:var(--on-fill)}.btn--ink:hover{color:var(--on-fill)}.btn--on-fill{background:var(--paper);color:var(--accent-ink)}.btn--outline{background:var(--paper);color:var(--ink);border:1.5px solid var(--line);border-radius:16px}.btn--blocked,.btn--blocked:disabled{background:var(--track);color:var(--disabled);border-radius:16px;padding:15px}.icon-btn{width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;border:0;padding:0;background:transparent;color:var(--ink);border-radius:12px}.icon-btn:hover{color:var(--ink)}.icon-btn--edge{margin-left:-10px}.icon-btn--edge-sm{margin-left:-6px}.icon-btn--edge-sm-r{margin-right:-6px}.icon-btn--quiet,.icon-btn--quiet:hover{color:var(--faint)}.icon-btn--narrow{width:36px}.text-btn{border:0;background:transparent;color:var(--accent);font-weight:600;font-size:14px;min-height:44px;padding:10px 4px}.ghost-btn{min-height:44px;padding:0 14px;border:0;border-radius:12px;background:transparent;color:var(--accent-ink);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}.ghost-btn:hover{color:var(--accent-ink)}.ghost-btn.is-on{background:var(--accent-soft)}.kbd{font:600 11px var(--font-mono);color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:2px 6px}.kbd--bare{border:0;padding:0}.kbd--on-fill{color:var(--accent-soft);border-color:var(--accent-soft)}.switch{flex:none;width:44px;height:26px;border-radius:13px;position:relative;display:inline-block;background:var(--rule-strong)}.switch.is-on{background:var(--accent)}.switch-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--knob)}.switch.is-on .switch-knob{left:21px}.seg{position:relative;display:grid;background:var(--track);border-radius:14px}.seg-thumb{border-radius:10px;background:var(--thumb);box-shadow:var(--thumb-shadow)}.seg-btn{position:relative;background:transparent;border:0;border-radius:10px;padding:9px 4px;min-height:40px;font-weight:700;font-size:14px;white-space:nowrap;color:var(--muted)}.seg-btn.is-on{color:var(--ink)}.chip{height:44px;padding:0 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink)}.chip.is-on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}.chip.is-blocked{border:1.5px dashed var(--rule-strong);background:transparent;color:var(--muted)}.chip.is-blocked.is-on{border-style:solid;background:var(--track);text-decoration:line-through}.chip--meter{font-family:var(--font-display);font-weight:500;font-size:14px}.chip--glyph{height:48px;padding:0;font-family:var(--font-music);font-size:26px;line-height:1}.chip--text{font-weight:700;font-size:14px}.progress{flex:1;height:8px;border-radius:99px;background:var(--line);overflow:hidden}.progress>div{height:100%;background:var(--accent);border-radius:99px}.progress--grow{flex:1 1 200px}.home{gap:22px}.home-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}.home-chips{display:flex;align-items:center;gap:6px;margin-left:auto}.streak-pill,.level-chip{display:flex;align-items:center;gap:7px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:6px 12px 6px 9px;font-size:13px;font-weight:600;white-space:nowrap}.streak-dot{width:10px;height:10px;border-radius:50%;background:var(--reward)}.level-chip{position:relative;gap:6px;padding:6px 11px 6px 8px;color:var(--ink);font-family:inherit;line-height:inherit;cursor:pointer}.level-chip:after{content:"";position:absolute;top:-8px;right:0;bottom:-8px;left:0}@media (hover: hover){.level-chip:hover{border-color:var(--rule)}}.level-ring{flex:none;display:block}.level-ring circle{fill:none;stroke-width:2.6}.level-ring-track{stroke:var(--rule)}.level-ring-fill{stroke:var(--reward)}.continue-card{flex:1 0 auto;background:var(--accent);color:var(--on-fill);border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:14px}.continue-head{display:flex;flex-direction:column;gap:6px}.continue-title{margin:0;font-family:var(--font-display);font-weight:500;font-size:20px;line-height:1.2}.continue-staff{flex:1;min-height:110px;background:var(--paper);color:var(--ink);border-radius:14px;padding:8px 10px;display:flex;flex-direction:column}.home--tablet .continue-card,.home--tablet .continue-staff{flex:none}.continue-staff-body{flex:1;display:flex;align-items:center;justify-content:center}.preview-staff{width:290px;max-width:100%}.preview-staff--wide{width:100%;max-width:560px}.continue-btn{border-radius:14px}.continue-btn:hover{color:var(--accent-ink)}.tiles{display:grid;gap:6px}.tile{height:44px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.tile-id{font-family:var(--font-mono);font-size:12px;font-weight:600}.tile-stars{font-size:10px;letter-spacing:-1px}.tiles--fill .tile{background:var(--tile-overlay)}.tiles--fill .diamond-star{--diamond-hi: var(--diamond-on-fill-hi);--diamond: var(--diamond-on-fill);--diamond-deep: var(--diamond-on-fill-deep)}.tiles--fill .tile--done .tile-id{color:var(--on-fill)}.tiles--fill .tile--done .tile-stars{color:var(--reward)}.tiles--fill .tile--current{background:var(--paper);color:var(--accent-ink)}.tiles--fill .tile--upcoming{color:var(--on-fill-muted)}.tile--btn{border:0;padding:0;font:inherit;cursor:pointer}.tiles--fill .tile--btn:hover{box-shadow:inset 0 0 0 1.5px var(--on-fill-muted)}.tiles--paper .tile{height:46px;background:var(--ground)}.tiles--paper .tile--done .tile-id{color:var(--ink)}.tiles--paper .tile--done .tile-stars{color:var(--reward-ink)}.tiles--paper .tile--current{background:var(--accent-soft);color:var(--accent-ink);box-shadow:inset 0 0 0 1.5px var(--accent)}.tiles--paper .tile--upcoming{color:var(--muted)}.free{flex:none;display:flex;flex-direction:column;gap:8px}.free-title{margin:0 2px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.free-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.free-tile{min-width:0;min-height:64px;padding:12px;border-radius:18px;background:var(--paper);color:var(--ink);text-decoration:none;display:flex;flex-direction:column;align-items:flex-start;gap:6px}.free-tile:hover{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}.free-tile-icon{flex:none;height:32px;display:flex;align-items:center;font-family:var(--font-music);font-size:24px;line-height:1;color:var(--accent)}.free-tile-scale{display:block}.free-tile-text{min-width:0;display:flex;flex-direction:column;gap:1px}.free-tile-text b{font-size:14.5px}.free-tile-text span{font-size:12px;color:var(--muted);line-height:1.3}.home-desk{flex:1;width:100%;max-width:1240px;margin:0 auto;padding:32px 40px;display:flex;flex-wrap:wrap;gap:28px;align-items:stretch}.home-desk-aside{flex:1 1 290px;display:flex;flex-direction:column;gap:16px}.home-desk-main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:24px}.home-desk-main .continue-card{border-radius:24px;padding:28px 32px;gap:18px}.home-desk-main .eyebrow--fill{color:var(--accent-soft)}.home-desk-main .continue-head{gap:8px}.home-desk-main .continue-title{font-size:28px}.continue-staff--wide{border-radius:16px;padding:14px 18px 18px}.home-desk-main .continue-btn{align-self:flex-start;padding:14px 32px}.home-desk-main .free{gap:12px}.home-desk-main .free-title{margin:0;font-size:12px;font-weight:700;letter-spacing:.08em}.home-desk-main .free-tiles{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}.home-desk-main .free-tile{padding:18px;flex-direction:column;align-items:flex-start;gap:12px}.home-desk-main .free-tile-icon{width:52px;height:52px;border-radius:14px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;font-size:26px;line-height:1}.home-desk-main .free-tile-text{gap:2px}.home-desk-main .free-tile-text b{font-size:16px}.home-desk-main .free-tile-text span{font-size:13px;line-height:1.35}.status-card{padding:20px;display:flex;flex-direction:column;gap:16px}.status-card .hairline{margin:0}.streak-card{display:flex;align-items:center;gap:12px}.streak-badge{flex:none;width:44px;height:44px;border-radius:50%;background:var(--reward-soft);display:flex;align-items:center;justify-content:center}.streak-badge>span{width:14px;height:14px;border-radius:50%;background:var(--reward)}.streak-card-title{font-weight:700;font-size:17px}.level-block{display:flex;flex-direction:column;gap:8px}.level-block-head{display:flex;align-items:baseline;gap:8px}.level-block-level{font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:-.01em}.level-block-head .muted-text{font-size:14px}.path-card{flex:1;text-decoration:none;color:var(--ink);padding:20px;display:flex;flex-direction:column;gap:10px}.path-card:hover{color:var(--ink)}.path-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.path-card-current{font-weight:700;font-size:15.5px}.path-card-bar{display:grid;gap:4px}.path-card-seg{height:6px;border-radius:99px;background:var(--line)}.path-card-seg--done{background:var(--good)}.path-card-seg--current{background:var(--accent)}.path-card-link{margin-top:auto;font-weight:700;font-size:14px;color:var(--accent)}.path{--pb: 14px;gap:12px}.path--tablet{--px: max(24px, calc((100% - 720px)/2) );gap:14px}.path-head{flex:none;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}.path-head .mono-muted{white-space:nowrap}.track-switch{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:4px}.track-chip{min-width:0;min-height:54px;padding:6px 4px;border:0;border-radius:12px;background:transparent;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;transition:background-color .2s ease-out,color .2s ease-out}.track-chip.is-on{background:var(--accent);color:var(--on-fill)}.track-chip-name{display:flex;align-items:center;gap:4px;font-weight:700;font-size:13.5px}.track-glyph{flex:none;width:20px;height:22px;display:flex;align-items:center;justify-content:center;font-family:var(--font-music);font-size:16px;line-height:1}.track-chip-meta{display:flex;align-items:center;gap:3px;font-size:11.5px;font-weight:600;color:var(--muted)}.track-chip.is-on .track-chip-meta{color:var(--on-fill);opacity:.85}.path--tablet .track-chip{min-height:64px}.path--tablet .track-chip-name{gap:6px;font-size:15px}.path--tablet .track-glyph{width:24px;height:26px;font-size:19px}.path--tablet .track-chip-meta{font-size:12.5px}@media (max-width: 389px){.track-glyph{display:none}}.track-info{flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 10px;font-size:13px}.track-theory{display:inline-flex;align-items:center;gap:2px;min-height:32px;font-weight:600;text-decoration:none}.units{list-style:none;margin:-6px;padding:6px;display:flex;flex-direction:column;flex:0 1 auto;min-height:0;overflow-y:auto}.unit{display:flex;gap:14px;align-items:stretch}.unit-rail{display:flex;flex-direction:column;align-items:center;flex:none;width:48px}.unit-node{width:48px;height:48px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-music),var(--font-display);font-size:22px}.unit-node--text{font-family:var(--font-display);font-size:13px;font-weight:600}.unit-node--done{background:var(--paper);color:var(--good-ink);border:2px solid var(--good)}.unit-node--current{background:var(--accent);color:var(--on-fill);border:2px solid var(--accent);box-shadow:0 0 0 6px var(--accent-halo)}.unit-node--locked{background:var(--ground);color:var(--faint);border:2px dashed var(--rule)}.unit-node--pair{font-size:17px}.unit-node--small{width:40px;height:40px;font-size:20px}.unit-spine{width:2px;flex:1;min-height:14px;background:var(--rule-strong)}.unit-spine.is-done{background:var(--good)}.unit-spine.is-last{background:transparent}.unit-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;padding:2px 0 20px}.unit--locked .unit-body{opacity:.6}.unit-title{font-weight:700;font-size:15.5px}.unit-head{position:relative;z-index:1;width:100%;min-height:44px;padding:6px 0;border:0;background:transparent;color:var(--ink);display:flex;align-items:center;gap:10px;text-align:left}.unit-head .unit-title{flex:1;min-width:0}.unit-head .unit-title,.lesson-title{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}button.unit-head:active:not(:disabled){transform:none}.unit-score{flex:none;font-family:var(--font-mono);font-size:12.5px;color:var(--muted)}.unit-chevron{flex:none;color:var(--muted);transform:rotate(90deg);transition:transform .26s var(--ease-out-soft)}.unit-lock{flex:none;color:var(--muted)}.unit-head[aria-expanded=true] .unit-chevron{transform:rotate(-90deg)}@media (hover: hover){button.unit-head:hover .unit-title{text-decoration:underline;text-underline-offset:3px}}.lesson-rows,.lesson-tiles{list-style:none;margin:0;padding:6px 5px 8px}.lesson-rows{display:flex;flex-direction:column;gap:6px}.lesson-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.lesson-item{width:100%;height:100%;box-sizing:border-box;border:0;border-radius:12px;background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);font:inherit;text-align:left;display:flex}.lesson-rows .lesson-item{min-height:44px;padding:8px 12px;align-items:center;gap:10px}.lesson-tiles .lesson-item{min-height:84px;padding:9px 10px;flex-direction:column;gap:3px}button.lesson-item:active:not(:disabled){transform:scale(.98)}.lesson-id{flex:none;font-family:var(--font-mono);font-size:12px;font-weight:600;opacity:.85}.lesson-title{flex:1;min-width:0;font-size:14px;font-weight:600;line-height:1.25}.lesson-tiles .lesson-title{font-size:13px}.lesson-mark{flex:none;display:flex;align-items:center;font-size:12px;letter-spacing:-1px;color:var(--reward-star)}.lesson-item.is-open .lesson-mark{color:var(--rule)}.lesson-item.is-current{background:var(--accent);color:var(--on-fill);box-shadow:0 0 0 4px var(--accent-halo)}.lesson-item.is-current .lesson-mark{color:var(--on-fill)}.lesson-item.is-current .diamond-star{--diamond-hi: var(--diamond-on-fill-hi);--diamond: var(--diamond-on-fill);--diamond-deep: var(--diamond-on-fill-deep)}.lesson-item.is-locked{background:transparent;color:var(--faint);box-shadow:inset 0 0 0 1.5px var(--rule)}.lesson-item.is-locked .lesson-mark{color:inherit;letter-spacing:0}@media (hover: hover){button.lesson-item:not(.is-current):hover{box-shadow:inset 0 0 0 1.5px var(--accent)}}.unit-stars{display:flex;gap:6px;font-size:12px;letter-spacing:-1px;color:var(--rule)}.unit-stars .has-stars{color:var(--reward-star)}.lesson-stars{position:relative;border:0;background:transparent;padding:0;font:inherit;letter-spacing:inherit;color:inherit}button.lesson-stars{cursor:pointer;border-radius:6px}button.lesson-stars:after{content:"";position:absolute;top:-14px;right:-3px;bottom:-14px;left:-3px}button.lesson-stars.has-stars{color:var(--reward-star)}button.lesson-stars:hover{text-decoration:underline;text-underline-offset:3px}.diamond-star{display:inline-block;font-size:1.25em;line-height:1;letter-spacing:0;background:linear-gradient(135deg,var(--diamond-hi) 15%,var(--diamond) 50%,var(--diamond-deep) 85%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 .12em var(--diamond-glow))}.stars-diamond{display:inline-flex}.stars-diamond .diamond-star{font-size:1em;letter-spacing:inherit}.unit-sub{font-size:13px;color:var(--muted)}.path-start{margin-top:auto;flex:none}@media (max-height: 480px){.path:not(.path--desk){scroll-padding-bottom:76px}.path:not(.path--desk) .units{flex:none;overflow:visible}.path:not(.path--desk) .path-start{position:sticky;bottom:0;z-index:1;box-shadow:0 -18px 14px -6px var(--ground),0 40px 0 24px var(--ground)}}.path--tablet .unit-rail,.path--desk .unit-rail{width:52px}.path--tablet .unit-node,.path--desk .unit-node{width:52px;height:52px}.path--tablet .unit-body,.path--desk .unit-body{padding-top:4px}.path--tablet .unit-head .unit-title,.path--desk .unit-head .unit-title{font-size:16px}.path--desk{--px: max(32px, calc((100% - 1040px)/2) );--pt: 76px;flex-direction:row;align-items:stretch;gap:28px}.path-side{flex:1 1 300px;max-width:320px;display:flex;flex-direction:column;gap:14px}.track-cards{display:flex;flex-direction:column;gap:8px}.track-card{border:0;border-radius:16px;padding:14px;background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;gap:10px;text-align:left;transition:box-shadow .2s ease-out}.track-card.is-on{box-shadow:inset 0 0 0 2px var(--accent)}@media (hover: hover){.track-card:not(.is-on):hover{box-shadow:inset 0 0 0 1.5px var(--accent)}}.track-card-top{width:100%;display:flex;align-items:center;gap:12px}.track-card-glyph{flex:none;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--font-music);font-size:22px;background:var(--accent-soft);color:var(--accent-ink);transition:background-color .2s ease-out,color .2s ease-out}.track-card.is-on .track-card-glyph{background:var(--accent);color:var(--on-fill)}.track-card-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.track-card-text b{font-size:15.5px}.track-card-meta{font-size:12.5px;color:var(--muted)}.track-card-meta svg{margin-right:4px;vertical-align:-1px}.track-card-bottom{width:100%;display:flex;align-items:center;gap:10px;font-size:12.5px}.track-card-bar{flex:1;height:6px;border-radius:99px;background:var(--line);overflow:hidden}.track-card-bar>span{display:block;height:100%;border-radius:99px;background:var(--accent)}.path-main{flex:999 1 480px;min-width:0;min-height:0;display:flex;flex-direction:column;gap:14px}.path-main-head{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}.path-main-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.path-track-title{margin:0;font-family:var(--font-display);font-weight:500;font-size:20px}.path--desk .track-info{justify-content:flex-start;gap:2px 14px}.path--desk .path-start{margin-top:0;padding:13px 22px;font-size:15px}.setup{--pt: 52px;--pb: 26px;gap:16px}.switch-row{flex:none;border:0;background:var(--paper);border-radius:14px;padding:8px 12px;min-height:52px;display:flex;align-items:center;gap:12px;text-align:left;color:var(--ink)}.switch-row:active:not(:disabled){transform:none}.switch-row-text{flex:1;min-width:0;display:flex;flex-direction:column}.switch-row-text b{font-size:14px}.switch-row-text .muted-text{font-size:12.5px}.field{display:flex;flex-direction:column;gap:8px}.field--grow{flex:1;min-width:0}.chip-row{display:flex;flex-wrap:wrap;gap:8px}.glyph-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.hint-box{display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:1.3;color:var(--reward-ink);background:var(--reward-soft);border-radius:10px;padding:6px 10px}.bars-tempo{display:flex;gap:18px;align-items:flex-end}.stepper{display:flex;align-items:center;background:var(--paper);border:1.5px solid var(--line);border-radius:12px}.stepper button{width:44px;height:42px;border:0;background:transparent;color:var(--accent);font-size:20px;font-weight:700;border-radius:10px}.stepper button:disabled{color:var(--rule)}.stepper span{min-width:26px;text-align:center;font-family:var(--font-mono);font-weight:600;font-size:16px}.label--split{display:flex;justify-content:space-between;gap:8px}.label-value{font-family:var(--font-mono);color:var(--ink);letter-spacing:0}.tempo-range{width:100%;height:42px;margin:0}.more{display:flex;flex-direction:column}.more-toggle{align-self:flex-start;display:flex;align-items:center;gap:4px;min-height:32px;border:0;background:transparent;padding:0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}.more-toggle:active:not(:disabled){transform:none}.more-chevron{transition:transform .2s ease-out}.more-chevron.is-open{transform:rotate(90deg)}.more-grid{display:flex;flex-direction:column;gap:10px;padding:6px 0 2px}.more-row{display:flex;align-items:center;gap:12px}.more-label{flex:1;min-width:0;font-weight:700;font-size:14px}.more-row .seg{flex:none;width:238px}.preview-card{flex:none;background:var(--paper);border-radius:18px;padding:12px 14px 4px;display:flex;flex-direction:column;gap:2px}.preview-card .staff-fallback,.preview-card>div[role=img]{max-width:310px}.preview-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;color:var(--muted)}.difficulty{display:flex;align-items:center;gap:6px}.difficulty-bars{display:flex;gap:3px}.difficulty-bars span{width:14px;height:6px;border-radius:2px;background:var(--line);transition:background-color .18s ease-out}.difficulty-bars span.is-on{background:var(--reward)}.preview-none{min-height:80px;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--faint);margin:0}.start-btn{margin-top:auto;flex:none}.setup .start-btn{position:sticky;bottom:0;box-shadow:0 -18px 14px -6px var(--ground),0 40px 0 24px var(--ground)}.staff-fallback{margin:0;padding:8px;font-size:13px;color:var(--muted)}.play{--pt: 56px;--pb: 30px;--px: 16px;gap:16px;overflow:hidden}.play-top{display:flex;align-items:center;gap:8px;flex:none}.play-info{display:flex;justify-content:space-between;align-items:flex-end;padding:0 4px;flex:none}.play-info-left{display:flex;flex-direction:column;gap:2px}.play-combo{text-align:right}.play-combo-n{font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--accent);line-height:1}.play-staff{flex:none;padding:14px 8px 10px;box-shadow:0 1px 0 var(--line);display:flex;flex-direction:column;gap:4px}.lane-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 8px;font-size:11.5px;color:var(--muted);padding:0 2px}.lane-head--results{font-size:13px;padding:0}.lane-head--results b{color:var(--ink)}.lane-head--results span{color:var(--muted)}.beats{position:relative;flex:none;display:flex;justify-content:center;align-self:center;height:44px}.beat{position:relative;width:40px;height:44px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:500;font-size:18px;color:var(--rule);transition:color .12s ease-out}.beat.is-on{color:var(--on-fill);font-weight:700;font-size:20px}.beats-dot{position:absolute;top:0;left:-2px;width:44px;height:44px;border-radius:50%;background:var(--accent);transform:translate(calc(var(--beat) * 40px));transition:transform .12s ease-out,opacity .12s ease-out}.beats-dot.is-idle{opacity:0}.beats.is-count-in .beats-dot{background:transparent;box-shadow:inset 0 0 0 2px var(--accent)}.beats.is-count-in .beat.is-on{color:var(--accent)}.beats--analog{height:64px;align-items:center;gap:14px}@media (min-height: 700px) and (max-width: 1099.98px){.play .beats--analog{height:84px}}.analog{flex:none;height:100%;width:auto;overflow:visible}.analog-body{fill:var(--accent-soft);stroke:var(--accent-soft);stroke-width:4;stroke-linejoin:round}.analog-face{fill:var(--paper)}.analog-scale{stroke:var(--rule);stroke-width:1.5;stroke-linecap:round}.analog-base{fill:var(--accent-ring)}.analog-rod line{stroke:var(--accent);stroke-width:2.5;stroke-linecap:round}.analog-bob{fill:var(--accent)}.analog-pivot{fill:var(--accent-ink)}.analog-end{fill:var(--rule)}.analog-end.is-on{fill:var(--accent)}.analog-end.is-down{fill:var(--reward)}.analog-count{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:44px}.analog-count b{font-family:var(--font-display);font-weight:700;font-size:26px;line-height:1;color:var(--accent)}.beats--analog.is-idle .analog-count b{color:var(--rule)}.analog-dots{display:flex;gap:4px}.analog-dots span{width:6px;height:6px;border-radius:50%;background:var(--rule)}.analog-dots span.is-on{background:var(--accent)}.judgement{text-align:center;font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:.06em;min-height:1.3em;white-space:pre}.judgement--phone{margin-top:auto}.skip-link{flex:none;align-self:center;margin:6px 0 -10px;min-height:44px;padding:0 12px;border:0;background:transparent;color:var(--accent);font-size:13px;font-weight:600}.skip-link:disabled{visibility:hidden}@media (orientation: landscape) and (max-height: 560px){.frame--play .frame-column{max-width:1000px}.play{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);grid-template-rows:auto auto auto minmax(0,1fr);gap:8px 20px;padding:max(10px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}.play-top{grid-column:1 / -1}.play-info{grid-column:1;grid-row:2}.play-staff{grid-column:1;grid-row:3 / span 2;align-self:start;max-height:100%;overflow-y:auto}.play .beats{grid-column:2;grid-row:2;justify-self:center}.judgement--phone{grid-column:2;grid-row:3;margin-top:0}.play .pad{grid-column:2;grid-row:4;min-height:0;height:100%}.play .skip-link{display:none}.play .pad-ring{width:min(150px,60%);height:auto;max-height:70%}}@media (max-width: 699.98px) and (max-height: 699.98px) and (orientation: portrait){.play{--pt: 46px;--pb: 24px;gap:10px}.play-staff{padding:10px 8px 8px}.play .pad,.cal .pad{min-height:112px;container-type:size}.play .pad-ring,.cal .pad-ring{height:min(150px,100cqh - 16px);width:auto}}@media (max-width: 699.98px) and (max-height: 599.98px) and (orientation: portrait){.play{--pt: 44px;--pb: 22px;gap:8px}.play-staff{padding:8px 8px 6px}.play .pad,.cal .pad{min-height:76px}.skip-link{margin-top:0}}@container (max-height: 103.98px){.pad-glyph{display:none}}.judgement--cal{margin-top:auto;color:var(--accent-ink)}.pad{flex:0 1 214px;min-height:150px;border:0;border-radius:32px;background:var(--accent-soft);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--accent-ink);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:none}.pad:active:not(:disabled){transform:none}.pad.is-held{background:var(--accent-halo)}.pad-ring{position:absolute}.pad-ring-track{stroke:var(--accent-ring)}.pad-ring-fill{stroke:var(--accent)}.pad-face{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}.pad-glyph{font-family:var(--font-music);font-size:40px;line-height:1}.pad-label{font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:.04em}.dplay{min-height:100dvh;position:relative;display:flex;flex-direction:column;background:var(--ground)}.dplay-head{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;padding:20px 40px;background:var(--paper);border-bottom:1px solid var(--line)}.dplay-title{display:flex;flex-direction:column;gap:1px}.dplay-actions{display:flex;gap:8px}.btn-outline{height:44px;padding:0 16px;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px}.text-link-btn{height:44px;padding:0 16px;border-radius:12px;display:flex;align-items:center;text-decoration:none;color:var(--muted);font-weight:700;font-size:14px}.text-link-btn:hover{color:var(--ink)}.dplay-main{flex:1;width:100%;max-width:1160px;margin:0 auto;padding:40px 40px 36px;display:flex;flex-direction:column;gap:32px}.dplay-staff{border-radius:24px;padding:34px 40px 26px;box-shadow:0 1px 0 var(--line)}.dplay-staff-inner{width:100%;max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:6px}.dplay-staff .lane-head{font-size:12.5px;padding:0}.dplay-row{display:flex;flex-wrap:wrap;gap:24px;align-items:stretch}.dpad{flex:1 1 380px;min-height:200px;background:var(--accent-soft);border-radius:24px;padding:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;touch-action:none;user-select:none;-webkit-user-select:none;cursor:pointer}.keycap{min-width:220px;height:54px;border:0;border-radius:12px;background:var(--paper);box-shadow:0 4px 0 var(--accent-ring);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-family:var(--font-mono);font-weight:600;font-size:14px;color:var(--accent-ink);transition:none}.keycap:active:not(:disabled){transform:none}.keycap.is-held{box-shadow:0 1px 0 var(--accent-ring);transform:translateY(3px)}.keycap-bar{width:160px;height:5px;border-radius:3px;background:var(--accent-soft);overflow:hidden;display:block}.keycap-bar>span{display:block;height:100%;background:var(--accent)}.dstats{flex:1 1 280px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.stat{padding:18px;display:flex;flex-direction:column;gap:4px}.dbeats{display:flex;gap:10px;align-items:baseline;font-family:var(--font-display);font-weight:600}.dbeats span{font-size:20px;color:var(--rule);transition:color .12s ease-out,font-size .12s ease-out}.dbeats span.is-on{font-size:34px;color:var(--accent)}.dbeats.is-count-in span.is-on{color:transparent;-webkit-text-stroke:1.5px var(--accent)}.stat-big{font-family:var(--font-display);font-weight:700;font-size:34px;color:var(--accent);line-height:1.2}.stat-mono{font-family:var(--font-mono);font-weight:600;font-size:26px;line-height:1.3}.stat-switch{align-self:flex-start;display:flex;align-items:center;gap:8px;min-height:44px;border:0;background:transparent;padding:0;font-weight:700;font-size:14px;color:var(--ink)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;background:var(--backdrop);display:flex}.overlay--sheet{flex-direction:column;justify-content:flex-end;align-items:center}.overlay--dialog{align-items:center;justify-content:center;padding:24px}.overlay--dialog.overlay--low{align-items:flex-end;padding-bottom:48px}.sheet{width:100%;background:var(--paper);color:var(--ink);display:flex;flex-direction:column;max-height:100%;overflow-y:auto}.sheet--sheet{max-width:640px;border-radius:28px 28px 0 0;padding:22px 20px calc(18px + env(safe-area-inset-bottom,0px));gap:14px}.sheet--dialog{max-width:440px;border-radius:24px;box-shadow:var(--dialog-shadow);padding:28px;gap:16px}.sheet-head{display:flex;flex-direction:column;gap:2px}.sheet-title{margin:0;font-family:var(--font-display);font-weight:600;font-size:22px}.sheet--dialog .sheet-title{font-size:24px}.howto-diagram{display:block;max-width:100%;height:auto;font-family:var(--font-ui)}.sheet--dialog .howto-diagram{width:100%;max-width:420px}.d-fill{fill:var(--accent)}.d-empty{fill:var(--grid)}.d-ink{stroke:var(--ink)}.d-text{fill:var(--ink)}.d-on-fill{fill:var(--on-fill)}.d-muted{fill:var(--muted)}.steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}.steps li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.4}.step-n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:600;font-size:13px}.sheet-text{margin:0;font-size:15px;line-height:1.4}.sheet-note{font-size:13px;color:var(--muted);line-height:1.4}.sheet--dialog .sheet-note{font-size:14px}.sheet-note--icon{display:flex;gap:10px;align-items:flex-start}.sheet-note--icon svg{flex:none;margin-top:1px}.sheet-cta{height:54px;min-height:54px;flex:none;gap:10px}.intro-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}.intro-item{display:flex;align-items:center;gap:14px}.intro-glyph{flex:none;width:72px;height:72px;border-radius:18px;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-family:var(--font-music);font-size:40px;line-height:1}.intro-glyph--meter{flex-direction:column;font-family:var(--font-display);font-weight:700;font-size:24px;line-height:.95}.intro-glyph--tie,.intro-glyph--triplet{position:relative;font-size:30px}.intro-glyph--tie{gap:10px}.intro-glyph--triplet{gap:2px;padding-top:8px}.intro-tie{position:absolute;left:calc(50% - 3px);bottom:8px;width:22px;height:9px;transform:translate(-50%);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}.intro-three{position:absolute;top:6px;left:0;right:0;text-align:center;font-family:var(--font-display);font-weight:700;font-size:13px}.intro-text{display:flex;flex-direction:column;align-items:flex-start;font-size:16px;line-height:1.35}.intro-learn{min-height:44px;padding:10px 0;margin:-4px 0}.intro-actions{display:grid;grid-template-columns:auto 1fr;gap:10px}.intro-actions .btn{min-height:54px}.intro-actions .btn--outline{padding-inline:20px}.intro-actions .btn--outline.is-on{background:var(--accent-soft);border-color:var(--accent-ring);color:var(--accent-ink)}.menu{border:1px solid var(--divider);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}.menu-item{min-height:52px;width:100%;display:flex;align-items:center;gap:12px;padding:8px 14px;border:0;background:var(--paper);color:var(--ink);font-weight:600;font-size:16px;text-align:left}.sheet--dialog .menu-item{font-size:15px}.menu-item+.menu-item{border-top:1px solid var(--divider)}.menu-item:active:not(:disabled){transform:none;background:var(--ground)}.menu-icon{flex:none;width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center}.menu-end{margin-left:auto}.menu-chevron{color:var(--faint)}.results{--pt: 46px;--pb: 30px;--px: 16px;gap:10px;scroll-padding-bottom:140px}.score{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none}.score-stars{display:flex;flex-direction:column;align-items:center;font-size:34px;line-height:1;color:var(--rule-strong)}.score-stars-row{display:flex;gap:8px}.score-stars .is-on{color:var(--reward)}.score-stars--bonus .score-stars-row{font-size:22px}.score-stars--bonus .score-stars-row>:first-child{transform:translateY(12px) rotate(-20deg)}.score-stars--bonus .score-stars-row>:last-child{transform:translateY(12px) rotate(20deg)}.score-stars .is-bonus{margin-top:-2px;font-size:61px;text-shadow:0 0 .18em var(--reward-soft);animation:star-pop .56s cubic-bezier(.2,1.4,.4,1) .2s both}.score-stars--diamond .diamond-star{font-size:64px;animation:star-pop .56s cubic-bezier(.2,1.4,.4,1) .2s both}@keyframes star-pop{0%{opacity:0;transform:scale(.3) rotate(-40deg)}}.score-bonus{font-size:13px;font-weight:700;color:var(--diamond-ink)}.score-pct{font-family:var(--font-display);font-weight:700;font-size:48px;line-height:1.05;letter-spacing:-.02em}.score-sub{font-size:14px}.counts-card{flex:none;border-radius:18px;padding:10px 6px 8px;display:flex;flex-direction:column;gap:8px}.counts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));text-align:center}.count-n{font-family:var(--font-mono);font-weight:600;font-size:19px}.count-label{font-size:11.5px;color:var(--muted)}.holds{border-top:1px solid var(--divider);padding-top:8px;text-align:center;font-size:12.5px;color:var(--muted)}.results-staff{flex:none;border-radius:18px;padding:10px 8px 4px}.results-lane{flex:none;border-radius:18px;padding:12px 12px 10px;display:flex;flex-direction:column;gap:6px}.tip{flex:none;display:flex;gap:12px;align-items:flex-start;background:var(--reward-soft);border-radius:16px;padding:10px 14px;font-size:14px;line-height:1.45}.tip>svg{flex:none;margin-top:1px;color:var(--reward-ink)}.tip-body{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start}.tip-action{margin:0 0 -8px -14px}.tip-note{margin-top:4px;font-weight:600}.results-actions{margin-top:auto;flex:none;display:flex;flex-direction:column;gap:8px}.results-secondary{display:flex;justify-content:center;gap:8px}.listen-btn{min-width:116px}.results-main{display:grid;grid-template-columns:1fr 1.5fr;gap:10px}.results-main--again{grid-template-columns:1fr 1fr}.copy-btn.is-copied{color:var(--good-ink)}.copy-link{align-self:center;margin:-8px 0 -10px;color:var(--muted);font-size:13px;font-weight:600;gap:6px}.copy-link:hover{color:var(--ink)}.results .results-actions{position:sticky;bottom:0;z-index:1;background:var(--ground);box-shadow:0 -18px 14px -6px var(--ground),0 40px 0 24px var(--ground)}.settings{--pb: 10px;padding-left:0;padding-right:0}.settings-head{flex:none;padding:0 20px 10px;display:flex;align-items:center;min-height:44px}.settings-head .page-title{font-size:21px;letter-spacing:-.01em}.settings-body{flex:1;padding:2px 20px 10px;display:flex;flex-direction:column;gap:12px}.set-section{display:flex;flex-direction:column;gap:6px}.set-card{background:var(--paper);border-radius:20px;display:flex;flex-direction:column}.set-card>*+*{border-top:1px solid var(--divider)}.vol-row{padding:4px 8px 4px 16px;min-height:50px;display:flex;align-items:center;gap:10px}.vol-label{flex:none;width:82px;font-size:15px}.vol-slider{flex:1;min-width:0;display:flex;align-items:center;gap:8px}.vol-slider.is-dim{opacity:.45}.vol-slider input{flex:1;min-width:0;height:44px;margin:0}.vol-value{flex:none;width:38px;text-align:right;font-family:var(--font-mono);font-size:13px;font-weight:600}.vol-switch{flex:none;border:0;background:transparent;padding:0;width:52px;min-height:44px;display:flex;align-items:center;justify-content:center}.vol-switch:active:not(:disabled){transform:none}.row-link{display:flex;align-items:center;gap:12px;padding:8px 16px;min-height:54px;text-decoration:none;color:var(--ink);border-radius:20px 20px 0 0}.row-link:hover{color:var(--ink)}.row-link-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.row-link-text b{font-size:15px}.row-sub{font-size:12.5px;line-height:1.35;color:var(--muted)}.row-chevron{flex:none;color:var(--muted)}.seg-row{padding:10px 16px 12px;display:flex;flex-direction:column;gap:6px}.seg-row-line{display:flex;align-items:center;gap:12px}.seg-row-label{flex:1;min-width:0;font-size:15px}.seg--settings{flex:none;width:238px}.look-preview{margin-top:4px;padding:10px 16px;border-radius:14px;background:var(--ground);display:flex;align-items:center;justify-content:center;gap:18px;min-height:84px}.look-preview .beats{align-self:center}.look-preview-tempo{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--muted)}.lang-select{flex:none;width:238px;min-height:48px;padding:0 12px;border:0;border-radius:14px;background:var(--track);color:var(--ink);font:inherit;font-size:14px;font-weight:700}@media (max-width: 389.98px){.seg-row-line{flex-direction:column;align-items:stretch;gap:8px}.seg--settings,.lang-select{width:auto}}.about-row{padding:10px 16px;min-height:52px;display:flex;align-items:center;gap:12px}.about-version{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px}.about-version b{font-size:15px}.about-version .mono-muted{font-size:14px;font-weight:600}.about-version .about-branch{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.offline{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--ink)}.offline.is-off{color:var(--muted);font-weight:600}.reset-row{padding:2px 16px;display:flex;flex-direction:column}.reset-btn{width:100%;min-height:52px;border:0;background:transparent;padding:0;color:var(--miss);font-weight:700;font-size:15px;display:flex;align-items:center;gap:10px;text-align:left}.reset-btn svg{flex:none}.reset-confirm{min-height:60px;padding:6px 0;display:flex;align-items:center;gap:8px}.reset-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;line-height:1.3}.reset-text b{font-size:14.5px;color:var(--miss)}.reset-text span{font-size:12.5px;color:var(--muted)}.small-btn{flex:none;min-height:44px;padding:0 12px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);border-radius:12px;font-weight:700;font-size:14px}.small-btn--danger{border:0;padding:0 14px;background:var(--miss);color:var(--on-fill)}.reset-done{min-height:52px;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}.changelog{gap:16px}.changelog>*{flex-shrink:0}.cl-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}.cl-current{margin:0;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}.cl-filter{flex:1 1 100%}.cl-latest{display:grid;grid-template-areas:"head" "groups" "action";gap:14px;padding:18px 18px 16px;border-radius:24px;background:var(--accent);color:var(--on-fill)}.cl-latest-head{grid-area:head;display:flex;flex-direction:column;gap:4px}.cl-latest-tag{display:flex;align-items:center;gap:8px;margin-bottom:8px}.cl-latest-ver{font-family:var(--font-mono);font-size:12.5px;font-weight:600;padding:3px 8px;border-radius:8px;background:color-mix(in srgb,var(--on-fill) 14%,transparent)}.cl-latest-title{margin:0;font-family:var(--font-display);font-weight:600;font-size:24px;line-height:1.15}.cl-latest-meta{font-size:13px;color:var(--on-fill-muted)}.cl-groups{grid-area:groups;display:flex;flex-direction:column;gap:14px;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--on-fill) 16%,transparent)}.cl-group{display:flex;flex-direction:column;gap:8px}.cl-group-label{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--on-fill-muted)}.cl-bullets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.cl-bullets li{display:flex;gap:10px;font-size:14.5px;line-height:1.4}.cl-bullets li:before{content:"";flex:none;width:6px;height:6px;margin-top:7px;border-radius:50%;background:color-mix(in srgb,var(--on-fill) 70%,transparent)}.cl-try{grid-area:action;display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;border-radius:14px;background:var(--paper);color:var(--accent-ink);font-weight:700;font-size:15px;text-decoration:none}.cl-try:hover{color:var(--accent-ink)}.cl-earlier{display:flex;flex-direction:column;gap:8px}.cl-timeline{position:relative;list-style:none;margin:0;padding:0 0 0 22px;display:flex;flex-direction:column;gap:10px}.cl-timeline:before{content:"";position:absolute;left:6px;top:28px;bottom:28px;width:2px;border-radius:1px;background:var(--line)}.cl-release{position:relative;background:var(--paper);border-radius:18px}.cl-release:before{content:"";position:absolute;left:-21px;top:22px;width:12px;height:12px;box-sizing:border-box;border-radius:50%;background:var(--ground);border:2.5px solid var(--accent)}.cl-release-row{width:100%;border:0;background:transparent;color:var(--ink);padding:10px 14px;min-height:56px;display:flex;align-items:center;gap:12px;text-align:left;border-radius:18px}.cl-ver{flex:none;min-width:52px;box-sizing:border-box;text-align:center;font-family:var(--font-mono);font-size:13px;font-weight:600;padding:5px 6px;border-radius:9px;background:var(--accent-soft);color:var(--accent-ink)}.cl-ver.is-patch{background:var(--ground);color:var(--muted)}.cl-release-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.cl-release-text b{font-size:15px}.cl-chevron{flex:none;color:var(--muted);transform:rotate(90deg);transition:transform .26s var(--ease-out-soft)}.cl-chevron.is-open{transform:rotate(-90deg)}.cl-changes{list-style:none;margin:0;padding:0 14px 6px}.cl-change{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-top:1px solid var(--divider);font-size:14px;line-height:1.4}.cl-kind{flex:none;width:54px;margin-top:1px;text-align:center;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 0;border-radius:6px}.cl-kind--new{background:var(--accent-soft);color:var(--accent-ink)}.cl-kind--better{background:var(--reward-soft);color:var(--reward-ink)}.cl-kind--fix{background:var(--good-soft);color:var(--good-ink)}.cl-try-inline{margin:0 14px 8px;min-height:44px;display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:700;color:var(--accent-ink);text-decoration:none}.cl-try-inline:hover{color:var(--accent-ink)}.cl-footer{margin:0;padding:0 2px}@media (min-width: 700px){.cl-filter{flex:0 1 300px}.cl-latest{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;grid-template-areas:"head groups" "action groups";column-gap:28px;padding:24px;border-radius:28px}.cl-latest-title{font-size:30px;line-height:1.12}.cl-groups{padding-top:0;border-top:0}.cl-try{align-self:end}}.cl-fill-changes{list-style:none;margin:0;padding:0;gap:12px}.cl-fill-changes .cl-change{padding:0;border-top:0}.cl-fill-changes .cl-kind{background:color-mix(in srgb,var(--on-fill) 14%,transparent);color:var(--on-fill)}.changelog--wide{--pt: 28px;--px: 32px;--pb: 36px;gap:20px}.changelog--wide .screen-title{font-size:24px}.changelog--wide .cl-current{font-size:14.5px}.changelog--wide .cl-latest-head{gap:4px}.cl-latest-staff{display:block;width:220px;max-width:100%;height:auto;margin-top:8px;color:var(--on-fill)}.changelog--wide .cl-fill-changes{padding-top:2px}.changelog--wide .cl-fill-changes .cl-change{font-size:15px;line-height:1.45;gap:12px}.changelog--wide .cl-kind{width:56px}.changelog--wide .cl-earlier{gap:10px}.changelog--wide .cl-timeline{padding-left:26px;gap:12px}.changelog--wide .cl-timeline:before{left:7px;top:32px;bottom:32px}.changelog--wide .cl-release{border-radius:20px}.changelog--wide .cl-release:before{left:-25px;top:25px;width:14px;height:14px}.changelog--wide .cl-release-row{padding:12px 18px;min-height:64px;gap:14px;border-radius:20px}.changelog--wide .cl-release-row .cl-ver{min-width:58px;font-size:13.5px;padding:6px 8px;border-radius:10px}.changelog--wide .cl-release-text{gap:2px}.changelog--wide .cl-release-text b{font-size:16px}.changelog--wide .cl-release-text .row-sub{font-size:13px}.changelog--wide .cl-changes{padding:0 18px 8px 90px}.changelog--wide .cl-changes .cl-change{gap:12px;padding:11px 0;font-size:14.5px;line-height:1.45}.changelog--wide .cl-try-inline{margin:0 18px 8px 90px}.changelog--wide .cl-footer{font-size:13px;line-height:1.45}.changelog--desk{--pt: 20px;--px: max(40px, calc((100% - 1160px)/2) );--pb: 40px;flex-direction:row;align-items:flex-start;gap:28px}.cl-side{flex:none;width:300px;position:sticky;top:0;max-height:100%;display:flex;flex-direction:column;gap:14px}.cl-back{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;min-height:44px;margin-left:-6px;padding:0 8px 0 2px;border-radius:10px;font-size:14px;font-weight:600;color:var(--muted);text-decoration:none}.cl-back:hover{color:var(--ink)}.cl-side .screen-title{flex:none;padding:0 4px;font-size:26px;letter-spacing:-.01em}.cl-side .cl-current,.cl-side .cl-footer{padding:0 4px}.cl-side .cl-footer{line-height:1.45}.cl-nav{flex:0 1 auto;min-height:120px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;padding:6px;border-radius:20px;background:var(--paper)}.cl-nav-item{width:100%;min-height:60px;border:0;border-radius:14px;padding:10px 12px;display:flex;align-items:center;gap:12px;text-align:left;background:transparent;color:var(--ink)}.cl-nav-item:hover{background:var(--ground)}.cl-nav-item.is-current{background:var(--accent-soft)}.cl-nav-item .cl-ver{min-width:54px}.cl-nav-item.is-current .cl-ver{background:var(--accent);color:var(--on-fill)}.cl-nav-item .cl-release-text b{font-size:14.5px}.cl-detail{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:16px}.cl-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:18px;padding:32px;border-radius:28px;background:var(--paper)}.cl-card--latest{background:var(--accent);color:var(--on-fill)}.cl-card-staff{position:absolute;top:28px;right:-20px;width:300px;height:96px;color:var(--on-fill)}.cl-card .cl-latest-tag{position:relative;margin-bottom:0}.cl-card .cl-latest-ver{font-size:13px}.cl-card-head{position:relative;display:flex;flex-direction:column;gap:6px}.cl-card-title{margin:0;font-family:var(--font-display);font-weight:500;font-size:30px;line-height:1.12}.cl-card--latest .cl-card-head{padding-right:min(240px,25%)}.cl-card--latest .cl-card-title{font-weight:600;font-size:36px;line-height:1.1}.cl-card-meta{font-size:14px;color:var(--muted)}.cl-card--latest .cl-card-meta{color:var(--on-fill-muted)}.cl-card-changes{list-style:none;margin:0;padding:0;max-width:680px;display:flex;flex-direction:column}.cl-card-changes .cl-change{gap:12px;padding:12px 0;font-size:15.5px;line-height:1.45}.cl-card-changes .cl-kind{width:58px;margin-top:2px}.cl-card-changes.cl-fill-changes{max-width:640px}.cl-card-changes.cl-fill-changes .cl-change{padding:0}.cl-card .cl-try{align-self:flex-start;padding:0 22px}.cl-card .cl-try-inline{align-self:flex-start;margin:-8px 0 -10px}.cl-steps{display:flex;flex-wrap:wrap;gap:12px}.cl-step{min-height:56px;border:1.5px solid var(--line);border-radius:16px;padding:8px 16px 8px 10px;display:flex;align-items:center;gap:10px;text-align:left;background:var(--paper);color:var(--ink)}.cl-step>svg{flex:none;color:var(--muted)}.cl-step--older{margin-left:auto;padding:8px 10px 8px 16px;text-align:right}.cl-step-text{display:flex;flex-direction:column;gap:1px}.cl-step-label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.cl-step b{font-size:14.5px}.cl-step-ver{font-family:var(--font-mono);font-weight:600;color:var(--accent-ink)}.cal{--pt: 52px;--pb: 30px;gap:14px}.cal-intro{display:flex;flex-direction:column;gap:6px;padding:0 2px}.cal-intro p{font-size:15px;line-height:1.45}.cal-intro .muted-text{font-size:13px;line-height:1.4}.cal-card{flex:none;padding:16px 16px 12px;display:flex;flex-direction:column;gap:12px}.cal-stats{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}.cal-stat{display:flex;flex-direction:column;gap:2px}.cal-stat--right{text-align:right}.cal-count{font-family:var(--font-display);font-weight:600;font-size:26px;line-height:1.1}.cal-count span{font-size:15px;font-weight:500;color:var(--muted)}.cal-median{font-family:var(--font-mono);font-weight:600;font-size:18px;color:var(--accent-ink)}.pips{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:4px}.pips span{height:6px;border-radius:3px;background:var(--track)}.pips span.is-on{background:var(--accent)}.cal-plot{position:relative;height:96px;margin:0 6px}.cal-axis{position:absolute;left:0;right:0;top:66px;height:2px;background:var(--line);border-radius:1px}.cal-tick{position:absolute;top:62px;width:2px;height:10px;background:var(--line)}.cal-tick--end{top:60px;height:14px;background:var(--rule)}.cal-tick--zero{top:56px;height:20px;background:var(--faint)}.cal-median-line{position:absolute;top:14px;height:62px;width:2px;margin-left:-1px;background:var(--accent);border-radius:1px}.cal-dot{position:absolute;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--accent)}.cal-dot.is-last{background:var(--ink);border:2px solid var(--paper);box-shadow:0 0 0 1.5px var(--ink)}.cal-axis-label,.cal-side{position:absolute;font-size:11.5px;color:var(--muted)}.cal-axis-label{top:80px;font-family:var(--font-mono)}.cal-axis-label--mid{left:50%;transform:translate(-50%)}.cal-side{top:0}.cal .pad{flex:0 1 236px}.cal-anykey{text-align:center}.cal-result{margin-top:auto;flex:none;padding:22px 18px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}.cal-result-n{font-family:var(--font-display);font-weight:600;font-size:44px;line-height:1.1;color:var(--accent)}.cal-result-text{font-size:14px;line-height:1.45}.cal-actions{flex:none;display:flex;flex-direction:column;gap:10px}@media (orientation: landscape) and (max-height: 560px){.frame--cal .frame-column{max-width:1000px}.cal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;gap:8px 20px;padding:max(10px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}.cal>.screen-head{grid-column:1;grid-row:1}.cal-intro{grid-column:1;grid-row:2}.cal-intro p{font-size:13.5px;line-height:1.4}.cal-intro .muted-text{font-size:12px}.cal-card{grid-column:1;grid-row:3 / -1;align-self:start;padding:12px 14px 8px;gap:8px}.judgement--cal{grid-column:2;grid-row:1;align-self:center;margin-top:0}.cal .pad{grid-column:2;grid-row:2 / 4;min-height:0;height:100%}.cal .pad-ring{width:min(150px,60%);height:auto;max-height:70%}.cal-anykey{grid-column:2;grid-row:4}.cal-result{grid-column:2;grid-row:1 / 4;align-self:center;margin-top:0;padding:14px}.cal-actions{grid-column:2;grid-row:4}}@media (max-width: 699.98px) and (max-height: 699.98px) and (orientation: portrait){.cal{--pt: 46px;--pb: 24px;gap:10px}.cal-actions{flex-direction:row;position:sticky;bottom:0;z-index:1;background:var(--ground);box-shadow:0 -18px 14px -6px var(--ground),0 40px 0 24px var(--ground)}.cal-actions .btn{flex:1 1 0;min-width:0}}@media (max-width: 699.98px) and (max-height: 599.98px) and (orientation: portrait){.cal{--pt: 44px;--pb: 22px;gap:8px}.cal-intro{gap:4px}.cal-intro p{font-size:14px;line-height:1.4}.cal-intro .muted-text{font-size:12.5px}.cal-card{padding:12px 14px 8px;gap:8px}.cal-result{padding:14px}.cal-result-n{font-size:36px}}.crash{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center}.xp{display:flex;flex-direction:column;gap:6px}.xp-bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden}.xp-bar>div{height:100%;border-radius:99px;background:var(--reward);transition:width .5s var(--ease-std)}.xp-next{align-self:flex-end;font-size:12px;color:var(--muted)}@media (prefers-reduced-motion: reduce){.xp-bar>div{transition:none}}.daily-card{flex:none;display:flex;align-items:center;gap:14px;background:var(--paper);border-radius:20px;padding:14px 14px 14px 16px}.date-tile{flex:none;width:52px;height:52px;border-radius:14px;background:var(--reward-soft);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05}.date-tile-month{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--reward-ink)}.date-tile-day{font-family:var(--font-mono);font-size:19px;font-weight:600;color:var(--ink)}.daily-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.daily-text h2{font-weight:700;font-size:16px}.daily-done{font-size:12.5px;font-weight:600;color:var(--good-ink)}.daily-btn{flex:none;min-height:44px;padding:0 18px;border-radius:12px;font-size:15px}.daily-card--desk{flex-direction:column;align-items:stretch;gap:16px;padding:20px}.daily-row{display:flex;align-items:center;gap:14px}.badges{flex:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.badge{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 10px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:13px;font-weight:600}.badge--gold{background:var(--reward-soft);border-color:transparent;color:var(--reward-ink)}.badge--unlock{background:var(--accent-soft);border-color:transparent;color:var(--accent-ink)}.badge--quiet{color:var(--muted);font-weight:500}.levelup-head{display:flex;align-items:center;gap:16px}.level-badge{flex:none;width:64px;height:64px;border-radius:50%;background:var(--reward-soft);box-shadow:inset 0 0 0 3px var(--reward);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--reward-ink)}.levelup-text{display:flex;flex-direction:column;gap:2px;min-width:0}.levelup-eyebrow{color:var(--reward-ink)}.levelup-sub{font-size:14px}.ranks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 2px;font-size:13px;color:var(--muted)}.ranks li{padding:4px 8px;border-radius:999px}.ranks li+li:before{content:"›";margin:0 8px 0 -6px;color:var(--faint)}.ranks li.is-current{background:var(--reward-soft);color:var(--reward-ink);font-weight:700}.ranks li+li.is-current:before{margin-left:-8px}.levelup-line{min-height:30px}.mode-field{display:flex;flex-direction:column;gap:6px;flex:none}.echo-card{flex:none;min-height:246px;padding:18px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}.play-staff--echo{padding:0}.echo-play{width:84px;height:84px;border-radius:50%;border:0;background:var(--accent);color:var(--on-fill);box-shadow:0 0 0 8px var(--accent-soft);display:flex;align-items:center;justify-content:center;margin-bottom:8px}.echo-play svg{margin-left:4px}.echo-play:disabled{opacity:.55}.echo-play.is-playing:disabled{opacity:1;box-shadow:0 0 0 8px var(--accent-halo)}.echo-title{margin:0;font-size:17px;font-weight:700;color:var(--ink)}.echo-plays{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted)}.echo-pips{display:flex;gap:4px}.echo-pips span{width:8px;height:8px;border-radius:50%;background:var(--line)}.echo-pips span.is-on{background:var(--accent)}.echo-start{margin-top:6px;min-width:200px}.echo-count{display:flex;align-items:baseline;gap:8px}.echo-count b{font-family:var(--font-display);font-size:48px;font-weight:700;line-height:1;color:var(--accent)}.echo-actions{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:10px;width:100%;max-width:420px;margin-top:6px}.echo-actions .btn{min-height:46px;padding:10px;font-size:15px}.echo-actions .btn:disabled{opacity:.5}.pad:disabled{opacity:.5}@media (max-width: 699.98px) and (max-height: 599.98px) and (orientation: portrait){.echo-card{min-height:200px;padding:14px 16px;gap:4px}.echo-play{width:64px;height:64px;margin-bottom:6px}}.levelup-line .xp-next{text-align:right}.branch-badge{position:fixed;top:env(safe-area-inset-top,0px);left:50%;transform:translate(-50%);z-index:100;max-width:min(60vw,360px);padding:1px 8px 2px;border-radius:0 0 6px 6px;background:var(--reward);color:#161b1c;font-family:var(--font-mono);font-size:11px;font-weight:600;line-height:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;opacity:.9}.pitch-staff{width:100%;min-width:0}.tone-faint{color:var(--faint)}.seg--chips{background:transparent;border-radius:12px}.seg--chips .m-goo{z-index:1}.seg--chips .seg-thumb{border-radius:12px;background:color-mix(in srgb,var(--accent) 15%,transparent);box-shadow:none}.seg--chips .seg-btn{min-height:44px;padding:0 6px;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);font-size:13.5px}.seg--chips .seg-btn.is-on{border-color:var(--accent);color:var(--accent-ink)}.seg--small{border-radius:10px}.seg--small .seg-thumb{border-radius:8px}.seg--small .seg-btn{min-height:30px;padding:4px 9px;border-radius:8px;font-size:12px}.text-btn--link{text-decoration:none;display:flex;align-items:center}.nsetup{gap:14px}.clef-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.clef-btn{height:64px;border-radius:14px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);display:flex;align-items:center;gap:14px;padding:0 14px;text-align:left}.clef-btn.is-on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}.clef-glyph{flex:none;min-width:32px;text-align:center;font-family:var(--font-music);font-size:34px;line-height:1}.clef-text{display:flex;flex-direction:column}.clef-text b{font-size:15px}.clef-text span{font-size:12px;opacity:.8}.key-row{min-height:56px;border-radius:14px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);display:flex;align-items:center;gap:10px;padding:4px 12px 4px 6px;text-decoration:none}.key-row:hover{color:var(--ink);border-color:var(--rule)}.key-thumb{flex:none;width:72px;display:block}.key-row-text,.key-btn-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}.key-row-text b{font-size:15px}.key-row-text span{font-size:12.5px;color:var(--muted)}.input-hint{font-size:12.5px;line-height:17.5px;min-height:35px}.nsetup-summary{flex:none;background:var(--paper);border-radius:18px;padding:12px 16px;display:flex;align-items:center;gap:18px}.nsetup-glyphs{flex:none;width:50px;font-family:var(--font-music);font-size:30px;line-height:1;letter-spacing:6px;white-space:nowrap;color:var(--accent)}.nsetup-summary-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--muted);line-height:1.35}.nsetup-summary-text b{color:var(--ink);font-size:14px}.nkeys{--px: 16px;gap:12px}.key-list{display:flex;flex-direction:column;gap:6px}.key-cols,.key-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.key-cols{height:20px;align-items:end;padding:0 2px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.key-btn{min-width:0;height:52px;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);display:flex;align-items:center;gap:6px;padding:0 6px 0 2px;text-align:left}.key-btn--wide{padding-right:12px}.key-btn.is-picked{border-color:var(--accent);color:var(--accent-ink);box-shadow:inset 0 0 0 100px color-mix(in srgb,var(--accent) 15%,transparent)}.key-btn.is-on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}.key-btn-text b{font-size:14px;white-space:nowrap}.key-btn-text span{font-size:12px;color:var(--muted);white-space:nowrap}.key-btn-note{flex:none;font-size:12px;color:var(--muted)}@media (max-width: 359.98px){.key-btn{gap:4px;padding-right:4px}.key-btn-text b{font-size:13px}.key-btn-text span{font-size:11.5px}}.key-summary{background:var(--paper);border-radius:14px;padding:10px 12px;font-size:13px;line-height:1.45;color:var(--muted)}.key-summary b{color:var(--ink)}.nkeys .start-btn,.nsetup .start-btn{margin-top:auto}.nplay{overflow-y:auto}.nplay-count{padding-left:4px;font-weight:600}.nplay-ask{font-size:15px;font-weight:700}.nplay-score{text-align:right}.nplay-score-n{font-family:var(--font-mono);font-weight:600;font-size:20px;line-height:1}.nplay-staff{flex:none;padding:14px 12px;border-radius:20px;display:flex;flex-direction:column;gap:8px}.ntimer{height:4px;border-radius:99px;background:var(--track);overflow:hidden}.ntimer>div{height:100%;background:var(--accent);border-radius:99px;transition:width .1s linear}.nfeedback{flex:none;min-height:48px;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:14px;padding:8px 12px;font-size:15px;font-weight:600;line-height:1.35;color:var(--muted)}.nfeedback.is-right{background:var(--good-soft);color:var(--good-ink)}.nfeedback.is-wrong{background:var(--miss-soft);color:var(--miss-ink)}.nfeedback.is-hint,.nfeedback.is-news{background:var(--reward-soft);color:var(--reward-ink)}.nplay-skip{margin:-8px 0}.ninputs{margin-top:auto;flex:none;display:flex;flex-direction:column;gap:10px}.nlabels{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:var(--muted)}.nlabels .seg{width:228px;flex:none}.sign-row{display:flex;align-items:center;gap:10px}.sign-row-label{width:44px;flex:none}.sign-group{position:relative;flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.sign-btn{height:44px;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);display:flex;align-items:center;justify-content:center;gap:6px;padding:0 6px}.sign-btn.is-on{border-color:var(--accent);color:var(--accent-ink)}.sign-glyph{font-size:20px;font-weight:700}.sign-word{font-size:12px;font-weight:600;opacity:.75}.sign-thumb{position:absolute;top:0;height:44px;width:calc((100% - 12px) / 3);left:calc(var(--i) * ((100% - 12px) / 3 + 6px));border-radius:12px;background:color-mix(in srgb,var(--accent) 15%,transparent);pointer-events:none;transition:left .26s var(--ease-std)}.kbd--cap{min-width:26px;height:24px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--rule-strong);background:var(--paper);color:var(--muted);font-size:12px;padding:0 5px}.kbd--dark{border:0;background:#2c3536;color:#c9d2d1;font-size:11px}.name-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.name-btn{min-width:0;height:76px;border-radius:14px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0}.name-btn:disabled{cursor:default}.name-btn.is-right{border-color:var(--good);background:var(--good-soft);color:var(--good-ink)}.name-btn.is-wrong{border-color:var(--miss);background:var(--miss-soft);color:var(--miss-ink)}.name-main{font-weight:700;font-size:19px;white-space:nowrap}.name-grid--solfege .name-main{font-size:15px}.name-sub{font-family:var(--font-mono);font-size:11px;opacity:.6}.name-grid--few{width:100%;margin:0 auto}.nwrite-staff{width:100%;align-self:stretch;touch-action:none;cursor:pointer;border-radius:12px}.nwrite{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:76px}.nwrite-ask{display:flex;flex-direction:column;gap:2px;min-width:0}.nwrite-name{font-family:var(--font-display);font-weight:500;font-size:24px;line-height:1.2}.nwrite-moves{display:flex;gap:8px;flex:none}.nwrite-moves .btn{width:64px;min-height:56px;padding:0}.nwrite-up{transform:rotate(-90deg)}.nwrite-down{transform:rotate(90deg)}.nhear-btn{align-self:center;gap:8px;min-height:44px;padding:8px 18px}.piano{--black-w: 32px;position:relative;height:200px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}.piano-white{min-width:0;height:100%;border-radius:0 0 10px 10px;border:1.5px solid var(--piano-white-edge);background:var(--piano-white);color:var(--piano-white-label);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;padding:0 0 12px;font-weight:700;font-size:14px;box-shadow:inset 0 -4px #161b1c14}.piano-black{position:absolute;top:0;left:calc(var(--after) * (100% + 3px) / 7 - var(--black-w) / 2 - 1.5px);width:var(--black-w);height:61%;border:0;border-radius:0 0 8px 8px;background:var(--piano-black);color:var(--piano-black-label);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;padding:0 0 8px;font-weight:700;font-size:11px;line-height:1.15;text-align:center}.piano-white.is-right{border:2px solid var(--good);background:var(--good-soft);color:var(--good-ink)}.piano-white.is-wrong{border:2px solid var(--miss);background:var(--miss-soft);color:var(--miss-ink)}.piano-black.is-right{background:var(--good);color:#fff}.piano-black.is-wrong{background:var(--miss);color:#fff}.piano--kbd{--black-w: 52px;height:210px;gap:4px}.piano--kbd .piano-white{font-size:16px;padding-bottom:14px}.piano--kbd .piano-black{left:calc(var(--after) * (100% + 4px) / 7 - var(--black-w) / 2 - 2px);font-size:12px;padding-bottom:10px}.piano--diagram{height:132px;max-width:320px;width:100%;margin:0 auto;--black-w: 24px}.piano--diagram .piano-white{padding-bottom:8px;font-size:13px}.nactions{display:grid;grid-template-columns:1fr 1.6fr;gap:10px}.nactions .btn{min-height:50px;padding:0 12px}.nplay-main{padding-top:32px;gap:24px}.nplay-staff--desk{border-radius:24px;padding:28px 40px;box-shadow:0 1px 0 var(--line);align-items:center}.nplay-staff--desk .pitch-staff,.nplay-staff--desk .nwrite-staff{max-width:900px}.nplay-staff--desk .nwrite-staff{margin:0 auto}.nplay-staff--desk .ntimer{width:100%;max-width:900px}.nanswer{flex:999 1 560px;min-width:0;border-radius:24px;padding:22px 26px;display:flex;flex-direction:column;gap:16px}.nanswer-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}.nanswer-head .nmode{width:330px;background:var(--ground)}.nanswer-head .muted-text{font-size:13.5px}.nanswer .sign-group{flex:none;width:376px;gap:8px}.nanswer .sign-thumb{width:calc((100% - 16px) / 3);left:calc(var(--i) * ((100% - 16px) / 3 + 8px))}.nanswer .sign-btn{gap:8px}.nanswer .name-grid{gap:10px}.nanswer .name-btn{height:110px;border-radius:16px;gap:8px}.nanswer .name-main{font-size:22px}.nanswer .nfeedback{min-height:44px;justify-content:flex-start;text-align:left;padding:8px 14px;border-radius:12px}.nanswer .nactions{grid-template-columns:auto auto;justify-content:end}.nanswer .nactions .btn{min-width:150px}.nstats{flex:1 1 240px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start}.nstat-wide{grid-column:1 / -1}.nstat-text{font-size:14px;line-height:1.45;color:var(--muted)}.nstat-skip{grid-column:1 / -1;justify-self:center;margin:0}.ndone{gap:12px}.ncard{flex:none;border-radius:18px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;font-size:14px}.ncard-head{display:flex;justify-content:space-between;gap:8px}.ncard-head span{color:var(--muted);font-size:13px}.nchart{width:100%;height:auto;display:block}.nchart-base{stroke:var(--line);stroke-width:1}.nchart-slow{stroke:var(--faint);stroke-width:1;stroke-dasharray:3 3}.nchart-text{font-family:var(--font-mono);font-size:10.5px;fill:var(--muted)}.nchart-bar.is-right{fill:var(--accent)}.nchart-bar.is-hint{fill:var(--gold)}.nchart-bar.is-missed{fill:var(--miss)}.nlegend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--muted)}.nlegend>span{display:inline-flex;align-items:center;gap:5px}.nlegend-dot{width:9px;height:9px;border-radius:3px}.nlegend-dot.is-right{background:var(--accent)}.nlegend-dot.is-hint{background:var(--gold)}.nlegend-dot.is-missed{background:var(--miss)}.nlegend-slow{margin-left:auto}.nchips-row{display:flex;align-items:center;gap:10px}.nchips-label{flex:none;width:52px;font-size:12px;font-weight:700;color:var(--muted)}.nchips{display:flex;flex-wrap:wrap;gap:6px}.nchip{display:inline-flex;align-items:center;gap:6px;border-radius:10px;padding:2px 10px 2px 4px;font-family:var(--font-mono);font-weight:600;font-size:14px;background:var(--paper);border:1.5px solid var(--line)}.nchip--missed{border-color:var(--miss);color:var(--miss)}.nchip-staff{flex:none;width:50px}.nchip-tag{font-size:11.5px;color:var(--muted)}.nsign{display:flex;flex-direction:column;gap:4px}.nsign-head{display:flex;justify-content:space-between;gap:8px;font-size:13px}.nsign-bar{height:8px;border-radius:4px;background:var(--track);overflow:hidden}.nsign-bar>div{height:100%;border-radius:4px;background:var(--accent)}.ndone .results-actions{padding-top:4px}.ndone-change{align-self:center}.learn,.learn-chapter{gap:12px}.learn-head{display:flex;flex-direction:column;gap:4px}.learn-sub{font-size:14px}.learn-progress{display:flex;align-items:center;gap:10px}.learn-progress-bar{flex:1;height:6px;border-radius:99px;background:var(--line);overflow:hidden}.learn-progress-bar>div{height:100%;border-radius:99px;background:var(--accent)}.chapter-card{background:var(--paper);border-radius:16px;overflow:hidden}.chapter-row{width:100%;border:0;background:transparent;color:var(--ink);padding:10px 12px;display:flex;align-items:center;gap:12px;text-align:left}.chapter-row:active:not(:disabled){transform:none}.chapter-n{flex:none;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:600;font-size:16px;background:var(--ground);color:var(--ink)}.chapter-n.is-reading{background:var(--accent);color:var(--on-fill)}.chapter-n.is-done{background:var(--accent-soft);color:var(--accent-ink)}.chapter-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.chapter-text b{font-size:15px}.chapter-text span{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chapter-pill{flex:none;font-size:11.5px;font-weight:700;padding:4px 8px;border-radius:999px;background:var(--ink);color:var(--paper)}.chapter-pill.is-reading{background:var(--reward-soft);color:var(--reward-ink)}.chapter-pill.is-done{background:var(--accent-soft);color:var(--accent-ink)}.chapter-sections{display:flex;flex-direction:column;padding:0 12px 6px 60px}.chapter-section{min-height:44px;display:flex;align-items:center;gap:10px;border-top:1px solid var(--divider);text-decoration:none;color:var(--ink)}.chapter-section:hover{color:var(--accent-ink)}.chapter-section-n{width:26px;font-size:12.5px}.chapter-section-title{flex:1;font-size:14px;font-weight:600}.chapter-read{font-size:12px;font-weight:700;color:var(--good-ink)}.learn-chapter,.learn-main{gap:18px}.learn-main{min-width:0;display:flex;flex-direction:column}.learn-crumb{color:inherit;text-decoration:none}.learn-crumb:hover{color:var(--accent-ink)}.learn-intro{display:flex;flex-direction:column;gap:8px}.learn-title{font-family:var(--font-display);font-weight:600;font-size:24px;letter-spacing:-.01em;line-height:1.2}.learn-title span{color:var(--accent)}.learn-intro p{font-size:15px;line-height:1.5;color:var(--muted)}.learn-chips{display:flex;flex-wrap:wrap;gap:6px}.learn-chip{min-height:36px;display:inline-flex;align-items:center;gap:6px;padding:0 12px;border-radius:999px;background:var(--paper);border:1.5px solid var(--line);color:var(--ink);font-size:13px;font-weight:600;text-decoration:none}.learn-chip:hover{color:var(--ink);border-color:var(--accent)}.learn-section{scroll-margin-top:16px;padding:16px;display:flex;flex-direction:column;gap:12px}.learn-section-title{font-family:var(--font-display);font-weight:500;font-size:16px;display:flex;gap:8px;align-items:baseline}.learn-section-title .mono-accent{font-size:15px}.learn-section p,.learn-list{font-size:14.5px;line-height:1.5;color:var(--ink)}.learn-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}.learn-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.learn-pair--staves,.learn-pair--text{grid-template-columns:1fr}.learn-tile{background:var(--ground);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:4px}.learn-tile b{font-size:14px}.learn-tile span:last-child{font-size:13px;color:var(--muted);line-height:1.4}.learn-clef{display:block;height:64px;margin-top:-8px;font-family:var(--font-music);font-size:40px;line-height:64px}.learn-example{display:flex;flex-direction:column;gap:4px}.learn-example-head{display:flex;justify-content:space-between;gap:8px;font-size:13px}.learn-aid{font-size:13px;color:var(--muted);background:var(--ground);border-radius:10px;padding:8px 10px}.learn-names{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}.learn-names>div{background:var(--ground);border-radius:12px;padding:10px 0;display:flex;flex-direction:column;align-items:center;gap:2px}.learn-names b{font-size:18px}.learn-names span{font-size:13px;color:var(--accent-ink);font-weight:600}.learn-col{display:flex;flex-direction:column;gap:10px}.learn-sig{display:flex;align-items:center;gap:12px}.learn-sig .pitch-staff{width:150px;flex:none}.learn-sig .mono-accent{font-size:13px}.learn-check{padding:16px;display:flex;flex-direction:column;gap:10px}.learn-check b{font-size:15px}.learn-check--section{margin-top:4px;padding:14px 0 0;border-top:1px solid var(--line)}.learn-check-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.learn-answers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.learn-answer{height:52px;font-size:18px;font-weight:700}.learn-answers--long,.learn-chapter--wide .learn-answers--long{grid-template-columns:1fr}.learn-answers--long .learn-answer{height:auto;min-height:52px;padding:10px 14px;font-size:15px;font-weight:600}.learn-check .nfeedback{justify-content:flex-start;text-align:left;font-size:14px}.learn-end{display:flex;flex-direction:column;gap:6px;padding-bottom:8px}.learn-practice{align-self:flex-start;min-height:44px;font-size:14px}.piano-white.is-marked{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}.learn-listen,.learn-example-top{display:flex;align-items:center;gap:8px}.learn-listen>:last-child,.learn-example-top>.learn-example-head{flex:1 1 auto;min-width:0}.learn-example-top>.learn-verdict{align-self:center}.learn-listen>.piano--diagram{flex:0 1 320px;margin:0}.learn-play{flex:none;width:44px;height:44px;margin-left:-4px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--on-fill);display:flex;align-items:center;justify-content:center}.learn-play-dot{width:36px;height:36px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;transition:background-color .18s ease-out,box-shadow .18s ease-out}.learn-play:not(.is-on) .learn-play-dot svg{margin-left:2px}.learn-play:hover .learn-play-dot{background:var(--accent-ink)}.learn-play.is-on .learn-play-dot{box-shadow:0 0 0 4px var(--accent-halo)}.staff-counts{font-family:var(--font-mono);font-size:13px;font-weight:600}.learn-verdict{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;padding:3px 10px 3px 7px;border-radius:999px;font-size:12.5px;font-weight:700}.learn-verdict.is-write{color:var(--good-ink);background:var(--good-soft)}.learn-verdict.is-avoid{color:var(--miss-ink);background:var(--miss-soft)}.learn-table,.learn-accents{background:var(--ground);border-radius:14px;padding:4px 14px;display:flex;flex-direction:column}.learn-table-row{display:flex;align-items:center;gap:12px;padding:8px 0}.learn-table-row+.learn-table-row,.learn-accent-row+.learn-accent-row{border-top:1px solid var(--track)}.learn-table-glyph{flex:none;width:30px;font-family:var(--font-music);font-size:24px;line-height:34px;text-align:center}.learn-table-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.learn-table-text b{font-size:14.5px}.learn-table-text span{font-size:13px;color:var(--muted)}.learn-table-value{flex:none;font-size:13px;text-align:right}.learn-accent-row{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:10px;padding:10px 0}.learn-accent-beats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:end}.learn-accent{display:flex;flex-direction:column;gap:4px;font-size:12.5px;line-height:1.25;color:var(--muted)}.learn-accent>span:last-child{display:flex;flex-direction:column}.learn-accent-bar{display:block;height:12px;border-radius:4px;background:var(--rule-strong)}.learn-accent.is-strong{color:var(--ink);font-weight:700}.learn-accent.is-strong .learn-accent-bar{height:40px;background:var(--accent)}.learn-accent.is-medium{color:var(--ink);font-weight:600}.learn-accent.is-medium .learn-accent-bar{height:26px;background:var(--accent);opacity:.55}.learn-pulse,.learn-grid,.learn-timesig{background:var(--ground);border-radius:14px;padding:12px 14px}.learn-pulse,.learn-grid{display:flex;flex-direction:column;gap:10px}.learn-pulse-row{display:grid;grid-template-columns:40px 60px minmax(0,1fr);align-items:center;gap:8px}.learn-pulse-track{position:relative;height:14px}.learn-pulse-track:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--rule)}.learn-pulse-dot{position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--accent);transition:transform .12s ease-out,box-shadow .12s ease-out}.learn-pulse-dot.is-on{transform:scale(1.4);box-shadow:0 0 0 4px var(--accent-halo)}@media (max-width: 389.98px){.learn-pulse-row{grid-template-columns:40px minmax(0,1fr);row-gap:2px}.learn-pulse-row>.learn-play{grid-row:span 2}.learn-pulse-axis>.mono-muted{display:none}}.learn-pulse-axis .learn-pulse-track:before{display:none}.learn-pulse-axis .learn-pulse-track span{position:absolute;top:0;font-family:var(--font-mono);font-size:12px;line-height:14px;color:var(--muted)}.learn-timesig{display:flex;align-items:center;gap:16px}.learn-timesig-num{flex:none;width:32px;display:flex;flex-direction:column;font-family:var(--font-display);font-size:30px;font-weight:700;line-height:1;text-align:center}.learn-timesig-text{display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.4}.learn-grid-row{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:10px}.learn-grid-title{font-size:13px;color:var(--muted)}.learn-grid-cells{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px}.learn-grid-cell{min-width:0;padding:6px 0;border-radius:8px;background:var(--paper);font-family:var(--font-mono);font-size:13px;font-weight:600;text-align:center}.learn-grid-cell.is-held{color:var(--muted);background:transparent;box-shadow:inset 0 0 0 1px var(--rule)}.learn-tree{display:flex;flex-direction:column;gap:10px}.learn-tree-row+.learn-tree-row{border-top:1px solid var(--divider);padding-top:8px}.learn-tree-name{display:inline-block}.learn-tree-name:first-letter{text-transform:uppercase}.learn-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.learn-nav-link{min-height:64px;padding:12px 14px;border-radius:14px;background:var(--paper);color:var(--ink);text-decoration:none;display:flex;flex-direction:column;justify-content:center;gap:4px}.learn-nav-link b{font-size:14px}.learn-nav-link:hover b{color:var(--accent-ink)}.learn-nav-link--next{grid-column:2;text-align:right}@media (min-width: 700px){.learn-pair--staves,.learn-pair--text{grid-template-columns:repeat(2,minmax(0,1fr));align-items:center}.learn-section{padding:20px 22px}.learn-tree,.learn-table,.learn-accents,.learn-pulse,.learn-grid,.learn-timesig{max-width:640px}.learn-title{font-size:28px}.nsetup-summary,.key-summary{font-size:14px}}@media (min-width: 700px){.learn--wide{--px: max(40px, calc((100% - 960px)/2) );gap:14px}.learn--wide .chapter-card{border-radius:20px}.learn--wide .chapter-row{padding:14px 16px;gap:14px}.learn--wide .chapter-n{width:44px;height:44px;border-radius:12px;font-size:18px}.learn--wide .chapter-text b{font-size:17px}.learn--wide .chapter-text span{font-size:13.5px}.learn--wide .chapter-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--rows),auto);grid-auto-flow:column;column-gap:28px;padding:0 16px 8px 74px}.learn-chapter--wide{--px: max(40px, calc((100% - 1160px)/2) );flex-direction:row;align-items:flex-start;gap:40px}.learn-chapter--wide .learn-main{flex:1 1 0;gap:20px}.learn-chapter--wide .learn-intro{gap:12px}.learn-chapter--wide .learn-title{display:flex;align-items:flex-end;gap:18px;font-size:34px;letter-spacing:-.02em;line-height:1.1}.learn-chapter--wide .learn-title span{font-weight:700;font-size:60px;line-height:.85}.learn-chapter--wide .learn-intro p{max-width:700px;font-size:17px;line-height:1.55}.learn-chapter--wide .learn-section>.pitch-staff{width:100%;max-width:520px}.learn-chapter--wide .learn-check{padding:20px 22px}.learn-chapter--wide .learn-answers{max-width:520px}.learn-chapter--wide .learn-end{flex-direction:row;align-items:center;gap:12px}.learn-chapter--wide .learn-end .btn{flex:1}}.learn-side{flex:none;width:240px;position:sticky;top:0;max-height:100%;overflow-y:auto;scrollbar-width:thin;display:flex;flex-direction:column;gap:8px;font-size:14px}.learn-side-chapter{background:var(--accent-soft);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;gap:2px}.learn-side-title{display:flex;gap:10px;padding:2px 0 4px;font-weight:700;color:var(--accent-ink)}.learn-side-n{width:18px;font-family:var(--font-mono)}.learn-side-chapter a{display:flex;align-items:center;min-height:30px;padding-left:24px;color:var(--accent-ink);text-decoration:none}.learn-side-chapter a:hover{text-decoration:underline}@media (pointer: coarse){.learn-side-chapter a{min-height:44px}}.learn-side-other{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 10px;border-radius:12px;color:var(--ink);font-weight:600;text-decoration:none}.learn-side-other:hover{color:var(--accent-ink)}.learn-side-other .learn-side-n{color:var(--muted)}@media (pointer: coarse){.learn-side-other{min-height:44px}}@media (max-width: 389.98px){.name-btn{height:64px}.name-main{font-size:16px}.name-grid--solfege .name-main{font-size:13px}.sign-word{display:none}.nlabels{flex-direction:column;align-items:stretch}.nlabels .seg{width:auto}.piano{--black-w: 26px;height:170px}.piano-black{font-size:9.5px}.nactions .btn{min-height:46px}}.key-thumb .pitch-staff{overflow:hidden}.nplay-desk .text-link-btn{gap:8px}.nsetup>*,.nkeys>*,.nplay>*,.ndone>*,.learn>*,.learn-chapter>*{flex-shrink:0}@media (max-width: 699.98px) and (max-height: 699.98px) and (orientation: portrait){.nplay-staff{padding:10px 12px}.nplay .ninputs{flex-shrink:1;min-height:0;gap:8px}.nplay .piano{min-height:120px}}@media (max-width: 699.98px) and (max-height: 599.98px) and (orientation: portrait){.nplay-staff{padding:8px 12px}.nfeedback{min-height:40px;padding:6px 12px;font-size:14px}.nplay .name-btn{height:56px}.nplay .piano{min-height:80px}.nplay .nactions .btn{min-height:44px}}@media (min-width: 360px) and (max-width: 389.98px) and (max-height: 599.98px) and (orientation: portrait){.nlabels{flex-direction:row;align-items:center;font-size:12px}.nlabels .seg{flex:1 1 auto;min-width:0;max-width:228px}}@media (orientation: landscape) and (max-height: 560px){.nplay{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto auto minmax(0,1fr);overflow-y:auto}.nplay .play-info{grid-column:1;grid-row:2}.nplay .nplay-staff{grid-column:1;grid-row:3;max-height:none;overflow:visible}.nplay .nfeedback{grid-column:1;grid-row:4}.nplay .skip-link.nplay-skip{display:flex;align-items:center;grid-column:1;grid-row:5;align-self:start;justify-self:center;margin:0}.nplay .ninputs{grid-column:2;grid-row:2 / -1;margin-top:0;gap:8px}.nplay .name-btn{height:60px}.nplay .piano{height:150px}}.scale-stars{flex:none;font-size:16px;letter-spacing:1px;color:var(--reward-star);white-space:nowrap}.scale-stars-off{color:var(--rule-strong)}.scale-stars--big{font-size:36px;letter-spacing:4px;line-height:1}.hub{--pt: 48px;gap:12px}.hub>*{flex-shrink:0}.hub-title{flex:1}.hub-learn{min-height:44px;display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:12px;background:var(--paper);color:var(--link);font-weight:700;font-size:14px;text-decoration:none}.hub-learn:hover{color:var(--link-hover)}.hub-legend{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 12px;padding:0 2px;font-size:12.5px;color:var(--muted)}.hub-legend b{color:var(--ink)}.hub-legend-keys{display:flex;align-items:center;gap:8px}.hub-legend-keys>span{display:flex;align-items:center;gap:4px}.hub-dot{width:12px;height:12px;border-radius:50%}.hub-dot.is-l1{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-ring)}.hub-dot.is-l2{background:var(--mastery-mid)}.hub-dot.is-l3{background:var(--accent)}.circle{--circle-max: 358px;position:relative;width:min(100%,var(--circle-max));aspect-ratio:1;margin:0 auto;container-type:inline-size}.circle-ring{position:absolute;top:3.1%;right:3.1%;bottom:3.1%;left:3.1%;border-radius:50%;border:1.5px solid var(--line)}.circle-disc{position:absolute;top:19.3%;right:19.3%;bottom:19.3%;left:19.3%;border-radius:50%;background:var(--grid)}.circle-centre{position:absolute;left:50%;top:50%;width:31%;transform:translate(-50%,-42%);display:flex;flex-direction:column;align-items:center;gap:2px}.circle-centre .pitch-staff{width:94%}.circle-sig{font-family:var(--font-mono);font-size:max(10px,3.35cqw);font-weight:600;color:var(--muted);white-space:nowrap}.circle-halo{position:absolute;border-radius:50%;background:var(--reward);transform:translate(-50%,-50%);transition:left .26s var(--ease-out-soft),top .26s var(--ease-out-soft),width .26s var(--ease-out-soft),height .26s var(--ease-out-soft)}.circle-key{position:absolute;transform:translate(-50%,-50%);padding:0;border-radius:50%;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.05;transition:background-color .2s ease-out,color .2s ease-out,width .26s var(--ease-out-soft),height .26s var(--ease-out-soft)}.circle-key:active:not(:disabled){transform:translate(-50%,-50%) scale(.97)}.circle-key-name{font-weight:700;font-size:4.2cqw}.circle-key--minor .circle-key-name{font-size:3.75cqw}.circle-key-alt{font-size:2.9cqw;font-weight:600;opacity:.8}.circle-key--minor .circle-key-alt{font-size:2.65cqw}.circle-key.is-l1{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-ring)}.circle-key.is-l2{background:var(--mastery-mid);color:var(--mastery-mid-ink);border-color:var(--mastery-mid)}.circle-key.is-l3{background:var(--accent);color:var(--on-fill);border-color:var(--accent)}.circle-key.is-off{background:transparent;border-color:transparent;color:var(--muted)}.circle-key.is-off .circle-key-name{font-size:3.5cqw;font-weight:600}.circle-key--minor.is-off .circle-key-name{font-size:3.2cqw}.hub-panel{padding:14px 14px 12px;display:flex;flex-direction:column;gap:10px}.hub-panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.hub-panel-title{min-width:0;display:flex;flex-direction:column;gap:1px}.hub-panel-title b{font-family:var(--font-display);font-weight:600;font-size:18px}.hub-panel-title span{font-size:12.5px;color:var(--muted)}.hub-notes{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}.hub-note{height:34px;border-radius:9px;background:var(--ground);color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;white-space:nowrap}.hub-note.is-sign{background:var(--accent-soft);color:var(--accent-ink)}.hub-buttons{display:grid;grid-template-columns:1fr 1.5fr;gap:8px}.hub-buttons .btn{min-height:46px;padding:0 10px;text-decoration:none}.hub-round{width:100%;border:0;border-radius:18px;padding:12px 14px;display:flex;align-items:center;gap:12px;text-align:left;color:var(--ink)}.hub-round-icon{flex:none;color:var(--accent)}.hub-round-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.hub-round-text b{font-size:14.5px}.hub-round-text span{font-size:12.5px;color:var(--muted)}.hub--wide{--pt: 22px;--pb: 28px;width:100%;max-width:1240px;margin:0 auto;gap:20px;overflow:visible}.hub--tablet{--px: 32px}.hub--desktop{--px: 40px;gap:18px}.hub--wide .hub-title{font-size:24px}.hub--desktop .hub-title{font-size:26px}.hub-row{display:flex;gap:22px;align-items:stretch}.hub--desktop .hub-row{flex-wrap:wrap;gap:24px 40px}.hub-circle-col{flex:0 0 auto;width:min(500px,65%);display:flex;flex-direction:column;gap:18px}.hub--desktop .hub-circle-col{width:520px;max-width:100%;gap:14px}.hub--wide .circle{--circle-max: 520px}.hub-circle-top{display:flex;flex-direction:column;gap:12px}.hub--desktop .hub-circle-top{flex-direction:row;align-items:center;gap:16px}.hub--desktop .hub-switch{flex:0 0 240px}.hub--desktop .hub-legend{flex-direction:column;align-items:flex-start;font-size:13px}.hub-switch .seg-btn{min-height:44px}.hub-side{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:16px}.hub-sel{flex:1;min-width:0;border-radius:22px;padding:22px 18px 18px;display:flex;flex-direction:column;gap:16px}.hub--desktop .hub-sel{padding:24px 26px;gap:20px}.hub-sel-head{display:flex;flex-direction:column;gap:4px}.hub-sel-head h2{margin:0;font-family:var(--font-display);font-weight:600;font-size:23px;letter-spacing:-.01em}.hub--desktop .hub-sel-head h2{font-size:28px}.hub-sel-head span{font-size:13.5px;line-height:1.4;color:var(--muted)}.hub-boxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.hub-box{background:var(--ground);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:8px}.hub-sig-staff{width:min(192px,100%);align-self:center}.hub-sig-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 8px;font-size:13.5px}.hub-mastery{flex:1}.hub-mastery-big{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:14px}.hub-form{flex:1;min-height:36px;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px;border-top:1px solid var(--line)}.hub-form:first-of-type{border-top:0}.hub-form .scale-stars{font-size:20px;letter-spacing:2px}.hub-notes-block{display:flex;flex-direction:column;gap:8px}.hub--wide .hub-note{height:52px;border-radius:12px;font-size:18px}.hub--desktop .hub-note{height:58px;font-size:19px}.hub--wide .hub-buttons .btn{min-height:52px;font-size:15px}.hub--desktop .hub-buttons{margin-top:auto}.hub-practise{border-radius:22px;padding:24px;display:flex;flex-direction:column;gap:22px}.hub--wide .hub-round{padding:14px 18px;gap:14px}.hub--wide .hub-round-text b{font-size:15px}.hub--wide .hub-round-text span{font-size:13px}.ssetup{gap:13px;scroll-padding-bottom:80px}.ssetup>*{flex-shrink:0}.stype-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.stype{min-height:48px;padding:4px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left}.stype.is-on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}.stype b{font-size:14px}.stype-steps{font-family:var(--font-mono);font-size:10.5px;opacity:.8}.ssetup-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}.ssetup-pair .seg-btn{padding-left:2px;padding-right:2px;font-size:13.5px}.ssw{border-radius:14px;display:flex;flex-direction:column}.ssw-row{border:0;border-top:1px solid var(--divider);background:transparent;color:var(--ink);padding:8px 12px;min-height:48px;display:flex;align-items:center;gap:12px;text-align:left}.ssw-row:first-child{border-top:0}.ssw-row:active:not(:disabled){transform:none}.ssw-text{flex:1;min-width:0;display:flex;flex-direction:column}.ssw-text b{font-size:14px}.ssw-text span{font-size:12px;color:var(--muted)}.ssetup-summary{border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}.ssetup-summary b{font-size:14px}.ssetup .start-btn{margin-top:auto}.ssetup .input-hint a{font-weight:600}.splay{gap:12px}.splay-title{font-family:var(--font-display);font-weight:600;font-size:22px;line-height:1.2}.splay-again{display:inline-block;vertical-align:middle;margin-left:4px;padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font-family:var(--font-ui);font-size:12px;font-weight:700}.splay-mistakes{text-align:right}.splay-mistakes-n{font-family:var(--font-mono);font-weight:600;font-size:20px;line-height:1}.splay-staff{padding:10px 8px}.splay-degrees{flex:none;display:flex;flex-direction:column;gap:6px}.degrees{display:flex;align-items:center}.degree-pair{flex:1 1 0;min-width:0;display:flex;align-items:center}.degree-pair:last-child{flex:0 1 calc((100% - 105px)/8)}.degree{flex:1;min-width:0;height:46px;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;background:var(--grid);color:var(--muted);transition:background-color .2s ease-out,color .2s ease-out}.degree.is-done{background:var(--good-soft);color:var(--good-ink)}.degree.is-current{background:var(--paper);color:var(--accent-ink);box-shadow:inset 0 0 0 1.5px var(--accent)}.degree-n{font-size:9.5px;font-weight:700;opacity:.75}.degree-name{font-weight:700;font-size:14px;white-space:nowrap}.degree-step{flex:none;width:15px;text-align:center;font-size:11px;font-weight:700;color:var(--faint)}.degree-step.is-known{color:var(--accent)}.degree-step.is-H,.degree-step.is-WH{color:var(--gold-ink)}.degree-step.is-WH{font-size:9.5px}.splay-tools{flex:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.splay-tools .btn,.sstats>.btn{min-height:46px;padding:0 8px;gap:8px}.splay-hear svg{color:var(--accent)}.splay-tools .is-idle,.sstats>.is-idle{visibility:hidden}.splay .nplay-skip{margin:-6px 0}.spiano{--black-w: 26px;grid-template-columns:repeat(9,minmax(0,1fr));height:210px}.spiano .piano-black{left:calc(var(--after) * (100% + 3px) / 9 - var(--black-w) / 2 - 1.5px);height:61%;padding-bottom:10px}.spiano.piano--kbd{--black-w: 48px}.spiano.piano--kbd .piano-white{font-size:15px}.spiano.piano--kbd .piano-black{left:calc(var(--after) * (100% + 4px) / 9 - var(--black-w) / 2 - 2px)}.spiano .piano-white{padding-bottom:10px;font-size:13px}.spiano-dot{width:8px;height:8px;border-radius:50%;background:transparent}.spiano-dot.is-on{background:var(--good)}.piano-black .spiano-dot.is-on{background:var(--piano-black-dot)}.ssigns{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:8px}.ssign{height:84px;border-radius:16px;border:1.5px solid var(--line);background:var(--paper);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.ssign.is-wrong{border-color:var(--miss);background:var(--miss-soft);color:var(--miss-ink)}.ssign:disabled{opacity:.5}.ssign-main{font-size:28px;font-weight:700;line-height:1}.ssign-word{font-size:12.5px;font-weight:600;opacity:.8}.splay-inputs{gap:10px}.splay-desk .text-link-btn{gap:8px}.splay-desk .nplay-staff--desk{padding:18px 40px}.splay-desk .pitch-staff{max-width:760px}.sanswer .degree{height:54px;border-radius:10px}.sanswer .degree-name{font-size:17px}.sanswer .degree-n{font-size:10.5px}.sanswer .degree-step{width:22px;font-size:12px}.sanswer .degree-pair:last-child{flex-basis:calc((100% - 154px)/8)}.sanswer .ssign{height:104px}.sanswer .ssign-main{font-size:30px}.sanswer .nactions{grid-template-columns:1fr 1.6fr;justify-content:stretch}.sstats{display:flex;flex-direction:column}.sstats .stat{gap:4px}@media (max-width: 699.98px) and (max-height: 699.98px) and (orientation: portrait){.splay{gap:10px}.splay .splay-inputs{flex-shrink:1;min-height:0}.splay .spiano{min-height:140px}}@media (max-width: 699.98px) and (max-height: 599.98px) and (orientation: portrait){.splay{gap:8px}.splay-staff{padding:6px 8px}.splay .degree{height:40px}.splay-tools .btn{min-height:44px}.splay .spiano{min-height:110px}.splay .ssign{height:64px}}@media (orientation: landscape) and (max-height: 560px){.splay{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto auto auto minmax(0,1fr);overflow-y:auto}.splay .play-info{grid-column:1;grid-row:2}.splay .splay-staff{grid-column:1;grid-row:3;max-height:none;overflow:visible}.splay .splay-degrees{grid-column:1;grid-row:4}.splay .nfeedback{grid-column:1;grid-row:5}.splay .skip-link.nplay-skip{display:flex;align-items:center;grid-column:1;grid-row:6;align-self:start;justify-self:center;margin:0}.splay .splay-tools{grid-column:2;grid-row:2}.splay .splay-inputs{grid-column:2;grid-row:3 / -1;margin-top:0;gap:8px}.splay .spiano{height:160px}.splay .ssign{height:64px}}.sdone>*{flex-shrink:0}.sdone-score .score-pct{font-size:46px}.sdone-of{color:var(--faint)}.sdone-list{border-radius:18px;padding:2px 14px;display:flex;flex-direction:column}.sdone-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--divider)}.sdone-row:first-child{border-top:0}.sdone-row-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.sdone-row-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}.sdone-row-head b{font-size:15.5px}.sdone-row-head span{font-size:12.5px;font-weight:600}.sdone-back{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 7px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font-size:12px;font-weight:700}.sdone-stars{flex:none;font-size:19px;letter-spacing:2px;line-height:1;color:var(--reward)}.cprog{border-radius:18px;padding:12px 14px 12px 10px;display:flex;align-items:center;gap:12px}.cprog-svg{flex:none;width:176px;max-width:45%;height:auto;display:block}.cprog-ring{fill:none;stroke:var(--divider);stroke-width:1.5}.cprog-on{fill:var(--accent)}.cprog-off{fill:var(--paper);stroke:var(--line);stroke-width:1.5}.cprog-new{fill:none;stroke:var(--reward);stroke-width:2.5}.cprog-label{font:700 13px var(--font-ui);fill:var(--muted)}.cprog-label.is-small{font-size:11px}.cprog-label.is-on,.cprog-alt.is-on{fill:var(--on-fill)}.cprog-alt{font:600 8.5px var(--font-ui);fill:var(--muted)}.cprog-count{font:600 26px var(--font-display);fill:var(--ink)}.cprog-of{font:600 12px var(--font-ui);fill:var(--muted)}.cprog-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}.cprog-text b{font-size:13px}.cprog-n{font-family:var(--font-mono);font-weight:600;font-size:22px;line-height:1}.cprog-arrow{font-size:16px}.cprog-total{font-size:14px;color:var(--muted)}