:root{--ink:#1c1a29;--muted:#666273;--paper:#fbf7ee;--surface:#fffdf8;--line:#ded7c8;--night:#171528;--violet:#7357d8;--violet-dark:#4f399e;--coral:#e55f4a;--mint:#b8ead7;--gold:#f2c55d;--focus:#0878e8;--shadow:0 22px 60px rgba(25,20,45,.13);--radius:24px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{margin:0;color:var(--ink);background:var(--paper);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55}
button,select{font:inherit}
button,a,select{touch-action:manipulation}
button{color:inherit}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
[hidden]{display:none!important}
.skip-link{position:fixed;z-index:100;top:.75rem;left:.75rem;padding:.75rem 1rem;background:#fff;color:#111;border-radius:.5rem;transform:translateY(-180%)}
.skip-link:focus{transform:none}
.site-header{height:68px;padding:0 clamp(1rem,4vw,4rem);display:flex;align-items:center;justify-content:space-between;background:var(--night);color:#fff;border-bottom:1px solid rgba(255,255,255,.13)}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;font-weight:800;letter-spacing:-.02em}
.brand img{object-fit:contain}
.brand b{padding-left:.65rem;border-left:1px solid rgba(255,255,255,.3);color:var(--mint);font-weight:650}
.site-header nav{display:flex;gap:1.5rem;font-size:.9rem}
.site-header nav a{text-decoration:none;color:#e9e5f4}
.site-header nav a:hover{text-decoration:underline;text-underline-offset:4px}
main{overflow:hidden}
.hero{min-height:540px;padding:clamp(2.5rem,6vw,6rem) clamp(1rem,7vw,7rem);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(340px,.8fr);align-items:center;gap:clamp(2rem,7vw,8rem);background:radial-gradient(circle at 82% 20%,rgba(115,87,216,.42),transparent 29rem),linear-gradient(135deg,#171528 0%,#242039 60%,#171528 100%);color:#fff;position:relative}
.hero:after{content:"";position:absolute;inset:auto 0 0;height:5px;background:linear-gradient(90deg,var(--coral),var(--gold),var(--mint),var(--violet))}
.breadcrumb{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;font-size:.82rem;color:#c9c3d9}
.breadcrumb a{text-underline-offset:3px}
.eyebrow,.section-kicker{margin:0 0 .55rem;text-transform:uppercase;letter-spacing:.14em;font-size:.73rem;font-weight:850;color:var(--coral)}
.hero h1{max-width:770px;margin:.75rem 0 1.25rem;font-size:clamp(3.6rem,8vw,7.7rem);line-height:.86;letter-spacing:-.07em}
.hero h1 span{display:block;margin-top:1rem;color:#d9d2f5;font-size:clamp(1.25rem,2.8vw,2.4rem);line-height:1.05;letter-spacing:-.035em;font-weight:520}
.hero-lead{max-width:690px;margin:0;color:#ece8f5;font-size:clamp(1.05rem,1.5vw,1.28rem)}
.hero-proof{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}
.hero-proof span{display:flex;align-items:baseline;gap:.45rem;padding:.7rem .9rem;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.07);color:#ded9eb;font-size:.82rem}
.hero-proof b{font-size:1.1rem;color:#fff}
.hero-score{min-height:340px;position:relative;border-radius:36px;background:#fffdf8;color:var(--ink);box-shadow:0 40px 100px rgba(0,0,0,.35);transform:rotate(1.5deg);overflow:hidden}
.hero-score:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(242,197,93,.16),transparent 44%)}
.hero-score i{display:block;position:relative;top:86px;height:2px;margin:20px 32px 0;background:#35313d}
.hero-clef{position:absolute;z-index:2;left:42px;top:60px;font-family:"Apple Symbols","Noto Music",serif;font-size:9rem;line-height:1}
.hero-note{position:absolute;z-index:2;font-size:2rem;color:var(--violet);line-height:1}
.hero-note:after{content:"";position:absolute;width:2px;height:52px;background:currentColor;left:24px;bottom:14px}
.hero-note--g{left:42%;top:174px}.hero-note--a{left:59%;top:154px}.hero-note--b{left:76%;top:134px}
.hero-score p{position:absolute;right:30px;bottom:18px;margin:0;color:var(--muted);font-weight:700;letter-spacing:.1em}
.entry,.guide,.studio,.method,.library,.sources,.no-script-reading{max-width:1260px;margin:0 auto;padding:clamp(4rem,7vw,7rem) clamp(1rem,4vw,3rem)}
.entry{display:grid;grid-template-columns:minmax(230px,.55fr) minmax(0,1.45fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.entry h2,.studio-heading h2,.method h2,.library h2,.sources h2{margin:.25rem 0 1rem;font-size:clamp(2rem,4vw,3.5rem);line-height:1;letter-spacing:-.05em}
.entry>div>p:last-child,.method-heading>p:last-child,.library-heading>p,.sources>div>p:last-child{color:var(--muted)}
.entry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.entry-card{min-height:220px;padding:1.3rem;text-align:left;border:1px solid var(--line);border-radius:22px;background:var(--surface);display:flex;flex-direction:column;align-items:flex-start;cursor:pointer;box-shadow:0 8px 20px rgba(30,25,45,.04);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.entry-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(30,25,45,.1);border-color:#b6accb}
.entry-card>span{display:grid;place-items:center;width:2.2rem;height:2.2rem;margin-bottom:auto;border-radius:50%;background:#eee9f7;color:var(--violet-dark);font-size:.75rem;font-weight:850}
.entry-card strong{font-size:1.15rem;line-height:1.2;margin:1.3rem 0 .45rem}
.entry-card small{color:var(--muted);font-size:.9rem}
.entry-card--primary{background:var(--violet);border-color:var(--violet);color:#fff}
.entry-card--primary>span{background:#fff;color:var(--violet-dark)}
.entry-card--primary small{color:#eeeaff}
.device-note{grid-column:2;margin:0!important;padding:.8rem 1rem;border-left:3px solid var(--gold);font-size:.88rem!important}
.guide{padding-top:1rem}
.guide-progress{display:flex;align-items:center;justify-content:space-between;gap:2rem;margin-bottom:1rem;color:var(--muted);font-size:.82rem}
.guide-progress>span{font-weight:800;color:var(--violet-dark)}
.guide-progress ol{display:flex;gap:.4rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.guide-progress li{padding:.32rem .65rem;border-radius:999px;background:#ece6dc}
.guide-progress li.is-current{background:var(--night);color:#fff}
.guide-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.5rem,4vw,3rem);box-shadow:var(--shadow);display:grid;grid-template-columns:minmax(0,.8fr) minmax(300px,1.2fr);gap:2rem}
.guide-card h2{margin:.2rem 0 1rem;font-size:clamp(2rem,4vw,3rem);line-height:1;letter-spacing:-.04em}
.guide-activity{min-height:240px;border-radius:20px;background:#f0ecf8;display:grid;place-items:center;padding:1.5rem}
.feedback{min-height:3rem;margin:0;padding:.85rem 1rem;border-radius:12px;background:#f2eee5;color:#494454}
.feedback.is-success{background:#dff4ea;color:#174d3d}
.feedback.is-error{background:#fee5df;color:#792c21}
.guide-actions{grid-column:1/-1;display:flex;justify-content:space-between;gap:1rem}
.button,.icon-button{min-height:46px;padding:.72rem 1rem;border:1px solid #c9c1b5;border-radius:12px;background:#fff;cursor:pointer;font-weight:750}
.button:hover,.icon-button:hover{border-color:var(--violet);color:var(--violet-dark)}
.button--primary{background:var(--night);border-color:var(--night);color:#fff}
.button--primary:hover{background:#302b49;color:#fff}
.button--primary:disabled{opacity:.45;cursor:not-allowed}
.button--quiet{background:transparent}
.button--accent{background:var(--coral);border-color:var(--coral);color:#fff}
.button--accent:hover{background:#c94836;color:#fff}
.guide-tone{width:min(100%,330px);min-height:150px;border:0;border-radius:28px;background:linear-gradient(145deg,var(--violet),#9c84ef);color:#fff;box-shadow:0 12px 30px rgba(79,57,158,.26);cursor:pointer;font-size:1.3rem;font-weight:850}
.guide-tone.is-playing{transform:scale(.98);box-shadow:0 4px 14px rgba(79,57,158,.25)}
.guide-choice{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.guide-choice button{min-width:140px;min-height:100px;border:1px solid #c7bddc;border-radius:18px;background:#fff;cursor:pointer;font-weight:800}
.pulse-orb{width:130px;height:130px;border-radius:50%;border:0;background:var(--gold);box-shadow:0 0 0 18px rgba(242,197,93,.16);font-weight:850;cursor:pointer}
.pulse-orb.is-beat{transform:scale(1.08)}
.studio{max-width:1380px;padding-top:3rem}
.studio-heading{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:1.5rem}
.local-resume{display:flex;align-items:center;gap:.5rem;color:var(--muted);font-size:.84rem}
.local-resume>span:first-child{color:#348d70;font-size:1.5rem}
.mode-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid #cfc7bc;border-radius:18px 18px 0 0;overflow:hidden;background:#ece7de}
.mode-tabs button{min-height:76px;padding:1rem;border:0;border-right:1px solid #cfc7bc;background:transparent;cursor:pointer;text-align:left}
.mode-tabs button:last-child{border-right:0}
.mode-tabs button[aria-selected=true]{background:var(--night);color:#fff}
.mode-tabs b,.mode-tabs small{display:block}.mode-tabs small{margin-top:.2rem;color:var(--muted)}.mode-tabs [aria-selected=true] small{color:#ccc6da}
.desk{padding:clamp(1rem,3vw,2.5rem);border:1px solid #cfc7bc;border-top:0;border-radius:0 0 26px 26px;background:#eae4d9;box-shadow:var(--shadow)}
.desk-topline,.piece-intro,.transport,.studio-heading,.unlock-panel>header,.library-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.desk-topline label{display:flex;align-items:center;gap:.65rem;font-size:.82rem;font-weight:800}
select{min-height:42px;padding:.55rem 2.2rem .55rem .75rem;border:1px solid #bdb4a8;border-radius:10px;background:#fff;color:var(--ink)}
.desk-settings{display:flex;align-items:center;gap:1rem}
.piece-intro{margin:2rem 0 1rem;align-items:end}
.piece-intro p{margin:0;color:var(--muted)}
.piece-intro>div>p{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:var(--violet-dark)}
.piece-intro h3{margin:.2rem 0 0;font-size:clamp(2rem,4vw,3.2rem);line-height:1;letter-spacing:-.04em}
.score-shell{min-height:250px;padding:1rem;border-radius:18px;background:#fffdf8;border:1px solid #cfc6b8;overflow-x:auto;box-shadow:inset 0 0 40px rgba(97,77,44,.04)}
.partition-score{display:block;width:100%;min-width:690px;height:auto;max-height:300px}
.score-staff line{stroke:#33303a;stroke-width:1.7}
.score-measure-active{fill:#f0eaff;stroke:#8e78d9;stroke-width:2}
.score-clef{font-family:"Apple Symbols","Noto Music","Segoe UI Symbol",serif;font-size:92px;fill:#282531}
.score-meter text{font-family:Georgia,serif;font-size:36px;font-weight:700;text-anchor:middle;fill:#282531}
.score-note-filled{fill:#282531;stroke:#282531;stroke-width:2}.score-note-open{fill:#fffdf8;stroke:#282531;stroke-width:3}.score-stem{stroke:#282531;stroke-width:3}.score-rest-mark{fill:#282531}.score-name{font-family:Inter,ui-sans-serif,sans-serif;font-size:16px;font-weight:800;text-anchor:middle;fill:#5d536d}
.measure-choices{display:flex;justify-content:center;gap:.6rem;margin-top:1rem;flex-wrap:wrap}
.measure-choices button,.attempt-kinds button{min-height:40px;padding:.55rem .85rem;border:1px solid #bbb2a5;border-radius:999px;background:#fff;cursor:pointer;font-weight:750}
.measure-choices button[aria-pressed=true],.attempt-kinds button.is-active{background:var(--violet-dark);border-color:var(--violet-dark);color:#fff}
.transport{justify-content:center;flex-wrap:wrap;margin:1.25rem 0}
.practice-layout{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.keyboard-panel,.attempt-panel{padding:1.4rem;border-radius:18px;background:rgba(255,255,255,.67);border:1px solid #d2cabf}
.keyboard-panel>div:first-child p:last-child,.attempt-panel>.attempt-help{color:var(--muted);font-size:.85rem}
.keyboard-panel h3,.attempt-panel h3{margin:.2rem 0 .2rem;font-size:1.35rem}
.screen-keyboard{display:flex;justify-content:center;gap:.45rem;margin-top:1rem}
.piano-key{width:min(29%,120px);height:150px;border:1px solid #9c9489;border-radius:8px 8px 14px 14px;background:linear-gradient(#fff,#f1ece3);box-shadow:0 7px 0 #c8c0b4;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.55rem;padding:1rem;font-weight:850;text-transform:capitalize}
.piano-key kbd{padding:.12rem .42rem;border-radius:4px;background:#e4dfee;font-size:.75rem}.piano-key.is-playing{transform:translateY(5px);box-shadow:0 2px 0 #c8c0b4;background:#e8e0ff}
.attempt-kinds{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}
.rhythm-pad{width:100%;min-height:88px;border:2px solid var(--coral);border-radius:18px;background:#fff7f4;color:#7d3026;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;font-weight:850}
.rhythm-pad small{font-weight:600}.rhythm-pad.is-playing{background:#f7cfc7;transform:scale(.99)}
.attempt-panel .feedback{margin-top:1rem}
.unlock-panel,.result-panel{margin-top:1.5rem;padding:clamp(1.2rem,4vw,2.5rem);border-radius:24px;background:var(--night);color:#fff;box-shadow:var(--shadow)}
.unlock-panel .icon-button{color:var(--ink)}
.unlock-panel .section-kicker,.result-panel .section-kicker{color:var(--gold)}
.unlock-panel h2,.result-panel h2{margin:.2rem 0 0;font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.04em}
.diagnosis{display:grid;grid-template-columns:58px 1fr;gap:1.2rem;margin:2rem 0;padding:1.2rem;border-radius:16px;background:rgba(255,255,255,.08)}
.diagnosis>span{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--gold);color:#251e0e;font-weight:900}
.diagnosis h3{margin:0 0 .4rem}.diagnosis p{margin:.25rem 0;color:#e0dbea}.diagnosis-limit{font-size:.82rem}
.unlock-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;padding:0;list-style:none;counter-reset:step}
.unlock-steps li{counter-increment:step;padding:1rem;border:1px solid rgba(255,255,255,.15);border-radius:14px;background:rgba(255,255,255,.05)}
.unlock-steps li:before{content:counter(step);display:grid;place-items:center;width:1.8rem;height:1.8rem;margin-bottom:.7rem;border-radius:50%;background:#fff;color:var(--night);font-weight:850}
.unlock-steps button{margin-top:.8rem;width:100%;min-height:38px;border:1px solid rgba(255,255,255,.3);border-radius:9px;background:transparent;color:#fff;cursor:pointer}
.transfer-card{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(340px,1fr) auto;align-items:center;gap:1rem;margin-top:1rem;padding:1rem;border-radius:16px;background:#fff;color:var(--ink)}
.transfer-card h3{margin:.2rem 0}.transfer-card p{margin:.2rem 0;color:var(--muted)}
.mini-score{overflow-x:auto}.mini-score .partition-score{min-width:440px}.mini-score .score-name{display:none}
.result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin:1.5rem 0}
.result-grid div{padding:1rem;border-radius:14px;background:rgba(255,255,255,.08)}.result-grid dt{color:#bfb8d0;font-size:.76rem;text-transform:uppercase;letter-spacing:.1em}.result-grid dd{margin:.35rem 0 0;font-weight:800}
.method{max-width:none;background:#fff;padding-left:max(clamp(1rem,4vw,3rem),calc((100vw - 1260px)/2 + 3rem));padding-right:max(clamp(1rem,4vw,3rem),calc((100vw - 1260px)/2 + 3rem))}
.method-heading{max-width:790px}
.concept-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-top:2.5rem}
.concept-grid article{min-height:260px;padding:1.2rem;border:1px solid #e1dbd1;border-radius:18px;background:var(--surface)}
.concept-grid span{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:#ece7f8;color:var(--violet-dark);font-size:.75rem;font-weight:850}.concept-grid h3{font-size:1.05rem;line-height:1.25;margin:1.5rem 0 .7rem}.concept-grid p{color:var(--muted);font-size:.9rem}
.library-heading{align-items:end}.library-heading>p{max-width:550px}
.piece-library{list-style:none;padding:0;margin:2rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.piece-library button{width:100%;min-height:130px;padding:1rem;text-align:left;display:grid;grid-template-columns:44px 1fr;gap:.15rem 1rem;align-items:start;border:1px solid var(--line);border-radius:16px;background:var(--surface);cursor:pointer}
.piece-library button:hover{border-color:var(--violet);box-shadow:0 10px 24px rgba(50,40,80,.08)}
.piece-library span{grid-row:1/3;color:var(--coral);font-weight:900}.piece-library strong{font-size:1.05rem}.piece-library small{color:var(--muted)}
.no-script-reading{padding-top:0}
.no-script-reading details,.sources details{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.no-script-reading summary,.sources summary{padding:1rem 0;cursor:pointer;font-weight:800}
.no-script-reading li{margin:.75rem 0}.no-script-notice{padding:1rem;border-radius:12px;background:#fff1c9}
.sources{display:grid;grid-template-columns:1fr 1fr;gap:4rem;border-top:1px solid var(--line)}
.sources details p,.sources li span{color:var(--muted);font-size:.86rem}.sources li{margin:.75rem 0}.sources li span{display:block}
footer{padding:1.5rem clamp(1rem,5vw,5rem);display:flex;justify-content:space-between;gap:1rem;background:var(--night);color:#ddd8e8;font-size:.86rem}
@media(max-width:1050px){.hero{grid-template-columns:1fr minmax(300px,.7fr);gap:2rem}.entry{grid-template-columns:1fr}.device-note{grid-column:1}.entry-grid{grid-template-columns:repeat(3,1fr)}.concept-grid{grid-template-columns:repeat(3,1fr)}.transfer-card{grid-template-columns:1fr}.unlock-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.site-header nav a:first-child{display:none}.hero{min-height:auto;grid-template-columns:1fr;padding-top:3.5rem}.hero-score{min-height:250px}.hero-score i{top:52px;margin-top:16px}.hero-clef{top:35px;font-size:7rem}.hero-note--g{top:128px}.hero-note--a{top:112px}.hero-note--b{top:96px}.entry-grid,.practice-layout,.sources{grid-template-columns:1fr}.entry-card{min-height:160px}.guide-card{grid-template-columns:1fr}.guide-activity{min-height:190px}.mode-tabs small{display:none}.mode-tabs button{text-align:center}.desk-topline,.studio-heading,.piece-intro,.library-heading{align-items:flex-start;flex-direction:column}.desk-settings{width:100%;justify-content:space-between;flex-wrap:wrap}.transport{justify-content:stretch}.transport .button{flex:1 1 100%}.concept-grid{grid-template-columns:1fr 1fr}.piece-library{grid-template-columns:1fr 1fr}.result-grid{grid-template-columns:1fr 1fr}.sources{gap:1rem}footer{flex-direction:column}.partition-score{min-width:650px}}
@media(max-width:470px){.site-header{padding:0 1rem}.brand b{display:none}.hero h1{font-size:3.7rem}.hero-score{min-height:225px}.hero-proof{gap:.5rem}.hero-proof span{font-size:.75rem}.entry,.guide,.studio,.library,.sources,.no-script-reading{padding-left:1rem;padding-right:1rem}.entry-grid{grid-template-columns:1fr}.entry-card{min-height:145px}.guide-progress>span{display:none}.guide-progress ol{width:100%;justify-content:space-between}.guide-progress li{font-size:.67rem;padding:.25rem .45rem}.mode-tabs button{padding:.65rem .25rem;min-height:58px}.mode-tabs b{font-size:.82rem}.desk{padding:.8rem}.screen-keyboard{gap:.25rem}.piano-key{height:130px;padding:.65rem}.concept-grid,.piece-library,.result-grid,.unlock-steps{grid-template-columns:1fr}.concept-grid article{min-height:auto}.score-shell{padding:.5rem}.partition-score{min-width:610px}.measure-choices button{flex:1}.sources{display:block}.hero-score p{font-size:.8rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.entry-card,.pulse-orb,.piano-key,.rhythm-pad{transition:none!important}.entry-card:hover{transform:none}}
@media(forced-colors:active){.entry-card--primary,.button--primary,.mode-tabs button[aria-selected=true],.unlock-panel,.result-panel{border:2px solid CanvasText}.score-note-filled{fill:CanvasText}.score-staff line,.score-stem{stroke:CanvasText}}