:root{color:var(--ink);background:var(--canvas);font-synthesis:none;text-rendering:optimizelegibility;--red:#ef233c;--red-dark:#bd1428;--red-soft:#ef233c1f;--canvas:#0b0b0d;--surface:#121215;--surface-raised:#19191d;--surface-soft:#202025;--ink:#faf9f7;--muted:#939298;--line:#ffffff1a;--line-strong:#ffffff2e;--shadow:0 24px 80px #00000052;--radius:22px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}:root[data-theme=light]{--canvas:#f4f2ef;--surface:#fff;--surface-raised:#faf9f7;--surface-soft:#efedea;--ink:#111114;--muted:#6d6c72;--line:#1111141a;--line-strong:#1111142e;--shadow:0 24px 70px #3228231f}*{box-sizing:border-box}html{background:var(--canvas);scroll-behavior:smooth;min-width:320px;min-height:100%}body{background:radial-gradient(circle at 16% -15%, #ef233c14, transparent 34rem), var(--canvas);min-width:320px;min-height:100vh;margin:0}body,button,input{font:inherit}button,input{color:inherit}button{border:0}button:not(:disabled){cursor:pointer}button:disabled{cursor:default}button,input{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline-offset:3px;outline:3px solid #ef233c73}::selection{color:#fff;background:var(--red)}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.brand{color:var(--ink);letter-spacing:-.07em;align-items:center;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:clamp(1.8rem,5vw,2.6rem);font-weight:800;line-height:1;display:inline-flex}.brand strong{color:var(--red);font-weight:800}.brand__pulse{background:var(--red);width:.4em;height:.4em;box-shadow:0 0 0 .18em var(--red-soft);border-radius:50%;margin-right:.28em}.brand--compact{font-size:1.35rem}.spinner{justify-content:center;align-items:center;display:inline-flex}.spinner>span:first-child{border:2px solid;border-right-color:#0000;border-radius:50%;width:1.4rem;height:1.4rem;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.boot-screen{align-content:center;place-items:center;gap:2rem;min-height:100dvh;display:grid}.boot-screen .spinner{color:var(--red)}.boot-error{z-index:20;top:max(1rem, env(safe-area-inset-top));width:min(100% - 2rem,34rem);color:var(--red);background:var(--surface);box-shadow:var(--shadow);border:1px solid #ef233c4d;border-radius:12px;padding:.8rem 1rem;position:fixed;left:50%;transform:translate(-50%)}.auth-page{min-height:100dvh;padding:max(1.25rem, env(safe-area-inset-top)) 1.25rem max(7.5rem, calc(env(safe-area-inset-bottom) + 6.5rem));place-items:center;display:grid;position:relative;overflow:hidden}.auth-page:before{border:1px solid var(--line);content:"";border-radius:50%;width:min(60rem,90vw);height:min(60rem,90vw);position:absolute;top:5%;left:50%;transform:translate(-50%,-50%)}.auth-page__glow{background:var(--red);filter:blur(100px);opacity:.14;border-radius:50%;width:min(36rem,90vw);height:20rem;position:absolute;top:0;left:50%;transform:translate(-50%,-60%)}.auth-card{z-index:2;border:1px solid var(--line);background:color-mix(in srgb, var(--surface) 92%, transparent);width:min(100%,27rem);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:28px;padding:clamp(1.4rem,5vw,2.2rem);position:relative}.auth-card:after{z-index:-1;border-radius:inherit;content:"";pointer-events:none;background:linear-gradient(145deg,#ffffff0e,#0000 35%);position:absolute;inset:0}.auth-card__header{text-align:center;margin:.5rem 0 2rem}.auth-card__header p{color:var(--muted);margin:.85rem 0 0;font-size:.9rem}.segmented{border:1px solid var(--line);background:var(--surface-soft);border-radius:12px;gap:.2rem;padding:.25rem;display:inline-flex}.segmented button{min-height:2.35rem;color:var(--muted);background:0 0;border-radius:9px;padding:.45rem .9rem;font-size:.82rem;font-weight:700;transition:all .16s}.segmented button.is-active{color:var(--ink);background:var(--surface);box-shadow:0 3px 10px #0000001f}.segmented--auth{grid-template-columns:1fr 1fr;width:100%;margin-bottom:1.55rem;display:grid}.auth-form{gap:1rem;display:grid}.auth-form label{gap:.45rem;display:grid}.auth-form label>span:first-child{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:.73rem;font-weight:700}.auth-form input{border:1px solid var(--line-strong);background:var(--canvas);border-radius:12px;outline:0;width:100%;height:3.15rem;padding:0 .95rem;transition:border-color .16s,box-shadow .16s}.auth-form input:focus{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}.password-field{position:relative}.password-field input{padding-right:4rem}.password-field button{color:var(--muted);background:0 0;padding:.45rem;font-size:.72rem;font-weight:700;position:absolute;top:50%;right:.55rem;transform:translateY(-50%)}.form-message{min-height:1.2rem;color:var(--red);text-align:center;font-size:.78rem}.primary-button,.secondary-button{border-radius:12px;min-height:3.1rem;padding:.75rem 1.35rem;font-weight:800;transition:transform .16s,background .16s,box-shadow .16s}.primary-button{color:#fff;background:var(--red);box-shadow:0 10px 28px #ef233c38}.primary-button:not(:disabled):hover{background:#fa2d46;transform:translateY(-1px);box-shadow:0 14px 34px #ef233c4d}.primary-button:disabled{opacity:.64}.primary-button--wide{width:100%;margin-top:.1rem}.secondary-button{border:1px solid var(--line-strong);background:var(--surface-soft)}.piano-decal{opacity:.95;pointer-events:none;height:7rem;display:flex;position:absolute;bottom:-1rem;left:-2%;right:-2%;transform:rotate(-1.2deg)}.piano-decal__key{background:#f8f7f3;border:1px solid #bebcc0;border-radius:0 0 7px 7px;flex:1;position:relative;box-shadow:inset 0 -8px 12px #0000001a}.piano-decal__key i{z-index:2;background:#101012;border-radius:0 0 5px 5px;width:50%;height:62%;position:absolute;top:-1px;right:-25%;box-shadow:0 6px 8px #0000004d}.app-shell{min-height:100dvh}.topbar{z-index:30;border-bottom:1px solid var(--line);background:color-mix(in srgb, var(--canvas) 88%, transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);grid-template-columns:1fr auto 1fr;align-items:center;height:4.6rem;padding:0 max(1.25rem,50vw - 38rem);display:grid;position:sticky;top:0}.logo-button{background:0 0;justify-self:start;padding:0}.desktop-nav{align-items:stretch;gap:1.5rem;height:100%;display:flex}.desktop-nav button{color:var(--muted);background:0 0;padding:0 .2rem;font-size:.82rem;font-weight:700;position:relative}.desktop-nav button:after{background:var(--red);content:"";opacity:0;height:2px;transition:all .18s;position:absolute;bottom:0;left:0;right:0;transform:scaleX(.4)}.desktop-nav button.is-active{color:var(--ink)}.desktop-nav button.is-active:after{opacity:1;transform:scaleX(1)}.user-menu{justify-self:end;align-items:center;gap:.55rem;min-width:0;display:flex}.user-avatar{color:#fff;background:linear-gradient(145deg, var(--red), #941326);border-radius:50%;flex:none;place-items:center;width:2rem;height:2rem;font-size:.75rem;font-weight:800;display:grid}.user-menu__name{text-overflow:ellipsis;white-space:nowrap;max-width:9rem;font-size:.78rem;font-weight:700;overflow:hidden}.quiet-button{color:var(--muted);background:0 0;padding:.5rem .6rem;font-size:.72rem;font-weight:700}.shell-content{padding-bottom:2rem}.mobile-nav{display:none}.page{width:min(100% - 2.5rem,72rem);margin:0 auto;padding:clamp(2rem,5vw,4.25rem) 0}.page--train{padding-top:clamp(1.6rem,4vw,3.25rem)}.hero-strip{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(112deg, transparent 58%, #ef233c1a), var(--surface);grid-template-columns:1fr auto;align-items:center;gap:2rem;min-height:11rem;padding:clamp(1.6rem,4vw,2.6rem);display:grid;position:relative;overflow:hidden;box-shadow:0 18px 55px #00000014}.hero-strip:after{border:1px solid var(--line);content:"";border-radius:50%;width:12rem;height:12rem;position:absolute;top:-6rem;right:7rem}.eyebrow{color:var(--red);letter-spacing:.19em;margin:0 0 .7rem;font-size:.7rem;font-weight:800}.hero-strip h1,.page-header h1,.result-card h1{letter-spacing:-.065em;margin:0;font-family:Manrope,sans-serif;font-size:clamp(2rem,5vw,3.6rem);font-weight:800;line-height:1.02}.hero-strip h1 em{color:var(--red);font-style:normal}.hero-strip .piano-decal{opacity:.08;width:16rem;height:100%;inset:0 -1rem auto auto;transform:skew(-10deg)}.mini-stats{z-index:2;gap:.7rem;display:flex;position:relative}.mini-stats span{border:1px solid var(--line);min-width:5.7rem;color:var(--muted);background:color-mix(in srgb, var(--canvas) 78%, transparent);text-transform:uppercase;border-radius:12px;padding:.8rem .9rem;font-size:.68rem;display:grid}.mini-stats strong{color:var(--ink);letter-spacing:-.04em;margin-bottom:.1rem;font-family:Manrope,sans-serif;font-size:1.35rem}.section-block{margin-top:clamp(2rem,5vw,3.5rem)}.section-heading{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.section-heading>div{align-items:center;gap:.7rem;display:flex}.section-heading span{color:var(--red);font-family:Manrope,sans-serif;font-size:.66rem;font-weight:800}.section-heading h2{letter-spacing:.04em;text-transform:uppercase;margin:0;font-size:.85rem;font-weight:800}.mode-grid{grid-template-columns:repeat(3,1fr);gap:.85rem;display:grid}.mode-grid--four{grid-template-columns:repeat(4,1fr)}.mode-card{border:1px solid var(--line);min-height:11.5rem;color:var(--ink);background:var(--surface);text-align:left;border-radius:18px;grid-template-rows:auto 1fr auto auto;align-items:end;padding:1.15rem;transition:border-color .18s,transform .18s,box-shadow .18s;display:grid;position:relative;overflow:hidden}.mode-card:before{border:1px solid var(--line);content:"";border-radius:50%;width:10rem;height:10rem;transition:all .2s;position:absolute;top:-4.5rem;right:-4.5rem}.mode-card:hover{border-color:var(--line-strong);transform:translateY(-3px)}.mode-card.is-selected{border-color:var(--red);box-shadow:0 0 0 1px var(--red), 0 15px 35px #ef233c1a}.mode-card.is-selected:before{background:var(--red-soft);border-color:#ef233c40;transform:scale(1.08)}.mode-card--impossible{background:linear-gradient(145deg, color-mix(in srgb, var(--red) 8%, var(--surface)), var(--surface))}.mode-card__number{color:var(--muted);letter-spacing:.1em;align-self:start;font-size:.65rem;font-weight:800}.mode-card__mark{color:color-mix(in srgb, var(--ink) 15%, transparent);font-family:Georgia,serif;font-size:2.8rem;font-weight:700;line-height:1;transition:color .18s;position:absolute;top:1.2rem;right:1.2rem}.mode-card.is-selected .mode-card__mark{color:var(--red)}.mode-card__title{letter-spacing:-.04em;font-family:Manrope,sans-serif;font-size:clamp(1.08rem,2vw,1.35rem);font-weight:800}.mode-card__kicker{color:var(--muted);margin-top:.2rem;font-size:.74rem}.mode-card__check{color:#fff;background:var(--red);opacity:0;border-radius:50%;place-items:center;width:1.3rem;height:1.3rem;font-size:.68rem;transition:all .18s;display:grid;position:absolute;bottom:.8rem;right:.8rem;transform:scale(.5)}.mode-card.is-selected .mode-card__check{opacity:1;transform:scale(1)}.difficulty-row{grid-template-columns:repeat(4,1fr);gap:.75rem;display:grid}.difficulty-row button{border:1px solid var(--line);min-height:4.6rem;color:var(--muted);background:var(--surface);border-radius:14px;justify-content:space-between;align-items:center;padding:.9rem 1rem;transition:all .18s;display:flex}.difficulty-row button:hover{border-color:var(--line-strong)}.difficulty-row button.is-selected{border-color:var(--ink);color:var(--ink)}.difficulty-row button span{font-size:.85rem;font-weight:800}.difficulty-row button strong{min-width:2.05rem;height:2.05rem;color:var(--muted);background:var(--surface-soft);text-transform:uppercase;border-radius:8px;place-items:center;padding:0 .35rem;font-size:.66rem;display:grid}.difficulty-row button.is-selected strong{color:#fff;background:var(--red)}.impossible-banner{background:var(--red-soft);border:1px solid #ef233c40;border-radius:15px;align-items:center;gap:1rem;margin-top:2rem;padding:1.25rem 1.4rem;display:flex}.impossible-banner span{color:var(--red);font-family:Manrope,sans-serif;font-size:1.8rem;font-weight:800}.impossible-banner b{font-size:.82rem}.start-button{color:#fff;background:var(--red);border-radius:15px;justify-content:space-between;align-items:center;width:min(100%,26rem);min-height:4rem;margin:clamp(2rem,5vw,3.4rem) auto 0;padding:.7rem .75rem .7rem 1.5rem;font-family:Manrope,sans-serif;font-weight:800;transition:all .18s;display:flex;box-shadow:0 16px 38px #ef233c3b}.start-button:hover{background:#f82b44;transform:translateY(-2px);box-shadow:0 20px 45px #ef233c52}.start-button i{background:#ffffff29;border-radius:10px;place-items:center;width:2.6rem;height:2.6rem;font-size:1.2rem;font-style:normal;display:grid}.keyboard-hint{color:var(--muted);text-align:center;margin:.9rem 0 0;font-size:.68rem}.start-overlay{z-index:100;color:var(--red);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#08080ab8;place-items:center;display:grid;position:fixed;inset:0}.start-overlay .spinner>span:first-child{border-width:3px;width:2.4rem;height:2.4rem}.toast{z-index:100;max-width:min(26rem,100% - 2rem);color:var(--red);background:var(--surface);box-shadow:var(--shadow);border:1px solid #ef233c40;border-radius:12px;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1rem;font-size:.8rem;display:flex;position:fixed;bottom:1rem;right:1rem}.game-page{background:radial-gradient(circle at 50% 30%, #ef233c13, transparent 28rem), var(--canvas);min-height:100dvh;overflow:hidden}.game-page:before,.game-page:after{z-index:0;border:1px solid var(--line);content:"";pointer-events:none;border-radius:50%;position:fixed}.game-page:before{width:26rem;height:26rem;top:18%;left:-12rem}.game-page:after{width:23rem;height:23rem;bottom:-12rem;right:-9rem}.game-page--impossible{background:repeating-linear-gradient(135deg, transparent 0 36px, #ef233c05 36px 37px), radial-gradient(circle at 50% 25%, #ef233c24, transparent 28rem), var(--canvas)}.game-topbar{z-index:4;grid-template-columns:1fr auto 1fr;align-items:center;width:min(100% - 2rem,72rem);height:5.2rem;margin:0 auto;display:grid;position:relative}.exit-button{border:1px solid var(--line);width:2.4rem;height:2.4rem;color:var(--muted);background:var(--surface);border-radius:50%;place-items:center;font-size:1.35rem;line-height:1;display:grid}.game-title{align-items:center;gap:.5rem;font-size:.76rem;display:flex}.game-title span{font-weight:800}.game-title b{color:var(--red);background:var(--red-soft);letter-spacing:.07em;text-transform:uppercase;border-radius:6px;padding:.3rem .5rem;font-size:.6rem}.game-counters{justify-self:end;gap:1.4rem;display:flex}.game-counters span{text-align:right;display:grid}.game-counters small{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:.58rem;font-weight:700}.game-counters b{font-family:Manrope,sans-serif;font-size:1rem}.progress-track{z-index:4;background:var(--surface-soft);border-radius:4px;width:min(100% - 2rem,72rem);height:3px;margin:0 auto;position:relative;overflow:hidden}.progress-track span{border-radius:inherit;background:var(--red);height:100%;transition:width .3s;display:block;box-shadow:0 0 12px #ef233c99}.game-stage{z-index:3;flex-direction:column;align-items:center;width:min(100% - 2rem,60rem);min-height:calc(100dvh - 5.4rem);margin:0 auto;padding:clamp(1rem,3vh,2rem) 0 2rem;display:flex;position:relative}.round-count{color:var(--muted);letter-spacing:.12em;font-size:.66rem;font-weight:700}.round-count span{color:var(--ink)}.listen-orb{border:1px solid var(--line-strong);background:radial-gradient(circle, var(--surface-raised), var(--surface));border-radius:50%;place-items:center;width:clamp(6.5rem,16vh,9rem);height:clamp(6.5rem,16vh,9rem);margin:clamp(.75rem,3vh,1.75rem) 0 .35rem;display:grid;position:relative;box-shadow:0 20px 55px #00000024,inset 0 0 30px #ffffff06}.listen-orb:before{border:1px solid var(--line);border-radius:inherit;content:"";position:absolute;inset:14%}.listen-orb>span{z-index:2;color:var(--ink);font-family:Georgia,serif;font-size:clamp(2.1rem,7vh,3.6rem);font-weight:700;position:relative}.listen-orb i{border:1px solid var(--red);border-radius:inherit;opacity:0;position:absolute;inset:-1px}.listen-orb.is-playing{border-color:var(--red);box-shadow:0 0 45px #ef233c1f,inset 0 0 30px #ef233c0f}.listen-orb.is-playing i{animation:1.4s ease-out infinite sound-ring}.listen-orb.is-playing i:nth-child(2){animation-delay:.35s}.listen-orb.is-playing i:nth-child(3){animation-delay:.7s}.listen-orb.is-wrong{border-color:var(--red);animation:.26s shake}@keyframes sound-ring{0%{opacity:.55;transform:scale(1)}to{opacity:0;transform:scale(1.45)}}@keyframes shake{25%{transform:translate(-5px)}75%{transform:translate(5px)}}.stage-status{height:1.3rem;color:var(--muted);letter-spacing:.13em;text-transform:uppercase;font-size:.65rem;font-weight:800}.answer-grid{grid-template-columns:repeat(4,1fr);gap:.55rem;width:100%;margin-top:clamp(.8rem,2.5vh,1.5rem);display:grid}.answer-grid--single{grid-template-columns:repeat(6,1fr)}.answer-grid button{border:1px solid var(--line);min-height:clamp(3.4rem,8vh,4.7rem);color:var(--ink);background:var(--surface);box-shadow:0 5px 0 color-mix(in srgb, var(--canvas) 75%, #000);border-radius:12px;place-items:center;padding:.65rem .5rem;font-family:Manrope,sans-serif;font-size:clamp(.88rem,2.4vw,1.12rem);font-weight:800;transition:all .11s;display:grid;position:relative}.answer-grid button:not(:disabled):hover{border-color:var(--red);background:color-mix(in srgb, var(--red) 5%, var(--surface));transform:translateY(-2px)}.answer-grid button:not(:disabled):active{box-shadow:0 1px 0 color-mix(in srgb, var(--canvas) 75%, #000);transform:translateY(3px)}.answer-grid button.is-accidental{color:#fafafa;background:#202024;border-color:#29292e;box-shadow:0 5px #09090a}:root[data-theme=light] .answer-grid button.is-accidental{color:#fafafa;background:#202024}.answer-grid button:disabled{opacity:.48}.answer-grid kbd{color:var(--muted);opacity:.6;font-family:inherit;font-size:.52rem;font-weight:700;position:absolute;top:.34rem;right:.42rem}.answer-grid.is-locked button{transform:scale(.99)}.game-actions{justify-content:center;align-items:center;gap:.7rem;width:100%;margin-top:1.1rem;display:flex}.replay-button{border:1px solid var(--line-strong);min-height:2.7rem;color:var(--ink);background:var(--surface);border-radius:10px;padding:.55rem 1rem;font-size:.73rem;font-weight:800}.replay-button span{color:var(--red);margin-right:.2rem;font-size:1rem;display:inline-block}.replay-button:disabled{opacity:.45}.instrument-chip{color:var(--muted);background:var(--surface-soft);letter-spacing:.07em;text-transform:uppercase;border-radius:7px;padding:.38rem .65rem;font-size:.6rem;font-weight:800}.feedback{z-index:20;color:#fff;pointer-events:none;border-radius:15px;place-items:center;width:clamp(8rem,22vw,12rem);height:clamp(4.2rem,12vw,6.2rem);font-family:Manrope,sans-serif;font-size:clamp(1.1rem,3vw,1.6rem);font-weight:800;animation:.16s ease-out both feedback-in;display:grid;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 18px 55px #0000004d}.feedback--correct{background:#178f5a}.feedback--wrong{background:var(--red)}@keyframes feedback-in{0%{opacity:0;transform:translate(-50%,-50%)scale(.86)}}.game-error{z-index:20;max-width:min(26rem,100% - 2rem);color:var(--red);background:var(--surface);box-shadow:var(--shadow);border:1px solid #ef233c40;border-radius:10px;padding:.75rem 1rem;font-size:.78rem;position:fixed;bottom:1rem;right:1rem}.result-page{place-items:center;min-height:100dvh;padding:2rem 1rem 7rem;display:grid;position:relative;overflow:hidden}.result-glow{background:var(--red);filter:blur(140px);opacity:.08;border-radius:50%;width:30rem;height:30rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.result-card{z-index:2;border:1px solid var(--line);background:color-mix(in srgb, var(--surface) 94%, transparent);width:min(100%,37rem);box-shadow:var(--shadow);text-align:center;border-radius:26px;padding:clamp(1.5rem,5vw,2.75rem);position:relative}.result-mark{color:#fff;background:#178f5a;border-radius:50%;place-items:center;width:3.2rem;height:3.2rem;margin:0 auto 1rem;font-size:1.35rem;font-weight:800;display:grid;box-shadow:0 0 0 8px #178f5a1a}.result-mark--failed{background:var(--red);box-shadow:0 0 0 8px var(--red-soft)}.result-card .eyebrow{margin-bottom:.55rem}.result-card h1{font-size:clamp(1.8rem,5vw,2.8rem)}.result-score{justify-content:center;align-items:baseline;gap:.35rem;margin:1.2rem 0 .8rem;display:flex}.result-score strong{letter-spacing:-.08em;font-family:Manrope,sans-serif;font-size:clamp(2.7rem,9vw,4.6rem);line-height:1}.result-score span{color:var(--muted);font-size:.75rem}.score-ring{background:conic-gradient(var(--red) var(--score-progress), var(--surface-soft) 0);border-radius:50%;place-items:center;width:5.3rem;height:5.3rem;margin:1rem auto 1.7rem;display:grid;position:relative}.score-ring:before{background:var(--surface);content:"";border-radius:50%;width:4.15rem;height:4.15rem;position:absolute}.score-ring span{z-index:2;font-family:Manrope,sans-serif;font-size:1.05rem;font-weight:800;position:relative}.score-ring small{color:var(--muted);font-size:.6rem}.breakdown-grid{grid-template-columns:repeat(5,1fr);gap:.45rem;display:grid}.breakdown-grid div{border:1px solid var(--line);background:var(--surface-raised);border-radius:10px;gap:.3rem;padding:.8rem .4rem;display:grid}.breakdown-grid span{color:var(--muted);text-transform:uppercase;font-size:.56rem;font-weight:700}.breakdown-grid b{font-size:.78rem}.unlock-line{color:var(--red);background:var(--red-soft);text-transform:capitalize;border:1px solid #ef233c40;border-radius:10px;margin-top:1rem;padding:.75rem;font-size:.72rem;font-weight:800}.result-actions{grid-template-columns:1fr 1fr;gap:.65rem;margin-top:1.5rem;display:grid}.page-header{margin-bottom:2rem}.page-header--split{justify-content:space-between;align-items:end;gap:2rem;display:flex}.leader-panel,.settings-card,.best-card{border:1px solid var(--line);background:var(--surface)}.leader-panel{border-radius:var(--radius);overflow:hidden;box-shadow:0 18px 55px #0000000f}.leader-filters{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:1rem;padding:1rem;display:flex}.leader-filters .segmented{overflow-x:auto}.difficulty-tabs{gap:.25rem;display:flex}.difficulty-tabs button{color:var(--muted);background:0 0;border-radius:8px;padding:.55rem .65rem;font-size:.7rem;font-weight:800}.difficulty-tabs button.is-active{color:var(--red);background:var(--red-soft)}.leader-table{display:grid}.leader-row{border-bottom:1px solid var(--line);grid-template-columns:.55fr 2fr 1.2fr 1fr;align-items:center;gap:1rem;min-height:4.25rem;padding:.75rem 1.2rem;font-size:.78rem;display:grid}.leader-row:last-child{border-bottom:0}.leader-row--head{min-height:2.7rem;color:var(--muted);background:var(--surface-raised);letter-spacing:.09em;text-transform:uppercase;font-size:.58rem;font-weight:800}.leader-row.is-you{background:var(--red-soft)}.leader-row>span{min-width:0}.leader-row>span:nth-child(2),.leader-row>span:nth-child(3){align-items:baseline;gap:.45rem;display:flex}.leader-row b{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.leader-row small{color:var(--muted);font-size:.6rem}.leader-row.is-you>span:nth-child(2) small{color:#fff;background:var(--red);text-transform:uppercase;border-radius:4px;padding:.18rem .35rem;font-size:.52rem;font-weight:800}.rank{color:var(--muted);font-family:Manrope,sans-serif;font-weight:800}.rank--1,.rank--2,.rank--3{color:var(--red);font-size:1rem}.table-loading,.empty-state{min-height:15rem;color:var(--muted);place-items:center;padding:2rem;font-size:.82rem;display:grid}.table-loading .spinner{color:var(--red)}.empty-state span{color:var(--red);margin-bottom:.6rem;font-size:2rem;display:block}.empty-state--large{border:1px dashed var(--line-strong);border-radius:var(--radius);min-height:24rem}.totals-row{gap:.7rem;display:flex}.totals-row span{min-width:5rem;color:var(--muted);letter-spacing:.07em;text-transform:uppercase;font-size:.58rem;font-weight:800;display:grid}.totals-row b{color:var(--ink);letter-spacing:-.05em;margin-bottom:.1rem;font-family:Manrope,sans-serif;font-size:1.5rem}.bests-grid{grid-template-columns:repeat(3,1fr);gap:.85rem;display:grid}.best-card{border-radius:16px;padding:1.25rem}.best-card__top{justify-content:space-between;align-items:center;margin-bottom:2.2rem;display:flex}.best-card__top span{font-size:.78rem;font-weight:800}.best-card__top b{color:var(--red);background:var(--red-soft);letter-spacing:.05em;text-transform:uppercase;border-radius:5px;padding:.25rem .4rem;font-size:.55rem}.best-card>strong{letter-spacing:-.055em;font-family:Manrope,sans-serif;font-size:2rem}.best-bar{background:var(--surface-soft);border-radius:4px;height:4px;margin:.75rem 0;overflow:hidden}.best-bar span{border-radius:inherit;background:var(--red);height:100%;display:block}.best-card__meta{color:var(--muted);justify-content:space-between;align-items:center;font-size:.62rem;display:flex}.best-card__meta span{color:var(--ink);font-weight:800}.save-state{color:var(--muted);background:0 0;border:0;align-items:center;gap:.5rem;padding:.4rem 0;font-size:.7rem;font-weight:700;display:flex}.save-state:disabled{opacity:1}.save-state span{background:#178f5a;border-radius:50%;width:.5rem;height:.5rem}.save-state--saving span{background:#d89b21;animation:.8s infinite alternate save-pulse}.save-state--error span{background:var(--red)}@keyframes save-pulse{to{opacity:.35}}.settings-layout{grid-template-columns:1fr 1fr;gap:.85rem;display:grid}.settings-card{border-radius:18px;padding:clamp(1.2rem,3vw,1.7rem)}.settings-card--wide{grid-column:1/-1}.settings-card__heading{align-items:center;gap:.8rem;margin-bottom:1.4rem;display:flex}.settings-card__heading>span{width:2.5rem;height:2.5rem;color:var(--red);background:var(--red-soft);border-radius:10px;flex:none;place-items:center;font-size:1.15rem;font-weight:800;display:grid}.settings-card__heading h2{margin:0 0 .15rem;font-size:.9rem}.settings-card__heading p{color:var(--muted);margin:0;font-size:.68rem}.large-toggle{grid-template-columns:1fr 1fr;gap:.65rem;display:grid}.large-toggle>button,.instrument-options>button{border:1px solid var(--line);color:var(--ink);background:var(--surface-raised);border-radius:13px;transition:all .16s;position:relative}.large-toggle>button{text-align:left;grid-template-columns:1fr auto;align-items:center;gap:.5rem;padding:.75rem;display:grid}.large-toggle>button.is-active,.instrument-options>button.is-active{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}.large-toggle>button>span{font-size:.72rem;font-weight:800}.large-toggle em,.instrument-options em{color:#fff;background:var(--red);opacity:0;border-radius:50%;place-items:center;width:1.2rem;height:1.2rem;font-size:.6rem;font-style:normal;display:grid}.large-toggle .is-active em,.instrument-options .is-active em{opacity:1}.theme-preview{border-radius:8px;grid-column:1/-1;align-items:end;gap:3px;height:4rem;margin-bottom:.25rem;display:flex;position:relative;overflow:hidden}.theme-preview--dark{background:#101014}.theme-preview--light{background:#f0eeeb}.theme-preview b{background:#f8f8f8;border-radius:3px 3px 0 0;width:20%;height:72%;display:block}.theme-preview b:nth-child(2){background:var(--red);height:52%}.theme-preview b:nth-child(3){background:#232327;height:83%}.instrument-options{grid-template-columns:repeat(3,1fr);gap:.55rem;display:grid}.instrument-options>button{place-items:center;min-height:6.5rem;padding:.8rem .5rem;display:grid}.instrument-options b{font-size:.68rem}.instrument-options em{position:absolute;top:.5rem;right:.5rem}.instrument-icon{justify-content:center;align-items:end;gap:2px;width:3rem;height:2.4rem;display:flex;position:relative}.instrument-icon i{background:var(--ink);border-radius:4px 4px 1px 1px;width:.5rem;display:block}.instrument-icon i:first-child{height:60%}.instrument-icon i:nth-child(2){background:var(--red);height:90%}.instrument-icon i:last-child{height:72%}.instrument-icon--xylophone{transform:rotate(-8deg)}.instrument-icon--xylophone i{border-radius:2px;width:.65rem}.instrument-icon--guitar i{background:var(--muted);width:2px;height:100%!important}.instrument-icon--guitar:before{border:3px solid var(--ink);content:"";border-radius:50%;width:2.1rem;height:2.1rem;position:absolute;top:.4rem}.accidental-list{grid-template-columns:repeat(2,1fr);gap:.65rem 1.5rem;display:grid}.accidental-row{border:1px solid var(--line);background:var(--surface-raised);border-radius:12px;justify-content:space-between;align-items:center;min-height:3.7rem;padding:.55rem .65rem .55rem .9rem;display:flex}.accidental-row>span{font-size:.72rem;font-weight:800}.accidental-row .segmented button{min-width:2.8rem}@media (width<=820px){.topbar{grid-template-columns:1fr auto;padding:0 1rem}.desktop-nav,.quiet-button,.user-menu__name{display:none}.mobile-nav{z-index:40;right:.75rem;bottom:max(.75rem, env(safe-area-inset-bottom));border:1px solid var(--line-strong);background:color-mix(in srgb, var(--surface) 92%, transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:18px;grid-template-columns:repeat(4,1fr);height:4.15rem;padding:.35rem;display:grid;position:fixed;left:.75rem;box-shadow:0 15px 50px #0000003d}.mobile-nav button{color:var(--muted);background:0 0;border-radius:12px;place-items:center;gap:.15rem;font-size:.58rem;font-weight:800;display:grid}.mobile-nav button span{font-size:.85rem}.mobile-nav button.is-active{color:#fff;background:var(--red)}.shell-content{padding-bottom:5rem}.mode-grid,.mode-grid--four{grid-template-columns:repeat(2,1fr)}.mode-card{min-height:9.8rem}.bests-grid{grid-template-columns:repeat(2,1fr)}.leader-filters{flex-direction:column;align-items:stretch}.leader-filters .segmented{grid-auto-columns:1fr;grid-auto-flow:column;display:grid}.difficulty-tabs{overflow-x:auto}.difficulty-tabs button{flex:1 0 auto}}@media (width<=620px){.page{width:min(100% - 1.5rem,72rem);padding-top:1.6rem}.hero-strip{grid-template-columns:1fr;gap:1.1rem;min-height:10rem;padding:1.3rem}.hero-strip h1{font-size:clamp(2rem,11vw,3.1rem)}.mini-stats{gap:.5rem}.mini-stats span{min-width:0;padding:.65rem .75rem}.section-block{margin-top:2rem}.mode-grid,.mode-grid--four{gap:.6rem}.mode-card{border-radius:15px;min-height:8.9rem;padding:.9rem}.mode-card__mark{font-size:2.15rem;top:.9rem;right:.9rem}.difficulty-row{grid-template-columns:repeat(2,1fr);gap:.55rem}.difficulty-row button{min-height:4rem}.keyboard-hint{display:none}.game-topbar{grid-template-columns:.65fr 1.4fr 1fr;width:calc(100% - 1rem);height:4.6rem}.game-title{justify-content:center}.game-title span{display:none}.game-counters{gap:.75rem}.game-counters b{font-size:.86rem}.progress-track{width:calc(100% - 1rem)}.game-stage{width:calc(100% - 1rem);min-height:calc(100dvh - 4.7rem);padding-top:.65rem}.listen-orb{width:clamp(5.7rem,14.5vh,7.2rem);height:clamp(5.7rem,14.5vh,7.2rem);margin-top:clamp(.55rem,2vh,1rem)}.answer-grid,.answer-grid--single{grid-template-columns:repeat(3,1fr);gap:.42rem;margin-top:.65rem}.answer-grid--chord,.answer-grid--random,.answer-grid--impossible{grid-template-columns:repeat(2,1fr)}.answer-grid button{min-height:clamp(3rem,7.2vh,3.8rem);box-shadow:0 3px 0 color-mix(in srgb, var(--canvas) 75%, #000);border-radius:10px;font-size:.82rem}.game-actions{margin-top:.7rem}.breakdown-grid{grid-template-columns:repeat(3,1fr)}.result-page{padding:1rem .75rem 6.5rem}.result-card{border-radius:20px;padding:1.35rem 1rem}.score-ring{margin-bottom:1.25rem}.page-header--split{flex-direction:column;align-items:stretch;gap:1.2rem}.page-header h1{font-size:2.45rem}.leader-row{grid-template-columns:.5fr 1.6fr 1fr;gap:.5rem;padding:.7rem}.leader-row>span:last-child{display:none}.bests-grid{grid-template-columns:1fr}.best-card__top{margin-bottom:1.45rem}.totals-row{grid-template-columns:repeat(3,1fr);display:grid}.totals-row span{min-width:0}.settings-layout{grid-template-columns:1fr}.settings-card--wide{grid-column:auto}.accidental-list{grid-template-columns:1fr}.instrument-options b{font-size:.6rem}}@media (height<=700px) and (width>=621px){.game-topbar{height:4.5rem}.game-stage{min-height:calc(100dvh - 4.7rem);padding-top:.5rem}.listen-orb{width:5.7rem;height:5.7rem;margin-top:.5rem}.answer-grid{margin-top:.55rem}.answer-grid button{min-height:3.15rem}.game-actions{margin-top:.6rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}