@import"https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;600;700;800&display=swap";:root{--ink:#1e2924;--muted:#718078;--paper:#f4f1e9;--card:#fffdf7;--lime:#d7ef62;--orange:#ef744c;--line:#d8ddd2}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 10% 8%,#e8efcd,transparent 28%),var(--paper);color:var(--ink);font-family:Manrope,sans-serif}.app-shell{min-height:100vh;max-width:1240px;margin:auto;padding:26px 38px 44px 202px}.topbar{height:48px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;font-weight:800}.brand b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--lime);font:11px DM Mono}.account,.primary-button,.overview button{border:0;border-radius:9px;background:var(--ink);color:var(--lime);padding:10px 13px;font:700 12px Manrope;text-decoration:none;cursor:pointer}.side-nav{position:fixed;top:90px;left:max(20px,calc(50% - 620px));width:148px}.side-nav>p,.eyebrow{color:var(--orange);font:500 10px DM Mono;letter-spacing:.14em}.nav-item{display:block;width:100%;min-height:47px;border:0;border-left:3px solid transparent;background:transparent;color:var(--muted);padding:12px;text-align:left;font:700 12px Manrope;cursor:pointer}.nav-item.active{color:var(--ink);background:#fff8ed;border-left-color:var(--orange)}.nav-item.import input,.primary-button input{display:none}.midi-card{border-top:1px solid var(--line);margin-top:25px;padding-top:17px}.midi-card span{display:block;font:10px DM Mono;color:var(--orange)}.midi-card button{margin:9px 0;border:0;background:none;padding:0;color:var(--ink);font:700 12px Manrope;cursor:pointer}.midi-card small{display:block;color:var(--muted);font-size:10px;line-height:1.5}.content{padding-top:50px}.overview{max-width:650px;padding:50px 0}.overview h1,.scores h1{font-size:clamp(42px,7vw,78px);line-height:.98;letter-spacing:-.07em;margin:16px 0}.overview em{color:#829330;font-style:normal}.overview p:not(.eyebrow),.scores>p{max-width:560px;color:var(--muted);line-height:1.7}.lesson-header,.piano-toolbar{display:flex;align-items:center;justify-content:space-between}.lesson-header h1{margin:7px 0 20px;font-size:30px;letter-spacing:-.06em}.clefs button,.piano-toolbar button,.piano-toolbar select{border:1px solid var(--line);border-radius:8px;background:var(--card);padding:8px 10px;color:var(--muted);font:700 11px Manrope;cursor:pointer}.clefs button.active,.piano-toolbar button.active{background:var(--ink);color:var(--lime);border-color:var(--ink)}.practice-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px}.score-card,.target-card,.scores{border:1px solid #e4e6db;border-radius:18px;background:var(--card);box-shadow:0 18px 50px #26372a10}.score-card{padding:24px}.staff{width:100%;height:190px}.staff line{stroke:#6f7d71;stroke-width:1.4}.staff text{font-size:61px;fill:var(--ink)}.staff ellipse{fill:var(--orange)}.staff path{stroke:var(--ink);stroke-width:3}.score-card p{border-top:1px solid var(--line);padding-top:15px;color:var(--muted);font-size:13px}.text-button{border:0;background:none;padding:0;color:var(--orange);font:700 12px Manrope;cursor:pointer}.target-card{display:flex;flex-direction:column;justify-content:center;padding:27px;background:var(--ink);color:#fff}.target-card>span{color:var(--lime);font:10px DM Mono;letter-spacing:.12em}.target-card strong{color:var(--lime);font-size:56px;letter-spacing:-.1em;margin:15px 0 2px}.target-card h2{margin:0;font-size:20px}.target-card p{color:#b4c1b8;font-size:12px;line-height:1.6}.piano-area{margin-top:32px}.piano-toolbar h2{font-size:24px;letter-spacing:-.05em}.piano-toolbar select{margin-left:6px}.piano{position:relative;display:flex;height:124px;max-width:820px;margin:auto;filter:drop-shadow(0 12px 12px #1e292418)}.white-key{position:relative;flex:1;border:1px solid #c0c6b9;border-radius:0 0 7px 7px;background:#fffdf8;color:var(--ink);cursor:pointer}.white-key b,.white-key span{position:absolute;display:block;width:100%;text-align:center}.white-key b{top:68%;font:700 12px DM Mono}.white-key span{top:82%;color:#8a978c;font:700 11px DM Mono}.black-key{position:absolute;z-index:2;top:0;height:67%;border:1px solid #647069;border-radius:0 0 6px 6px;background:var(--ink);color:#edf2e9;cursor:pointer}.black-key b,.black-key span{position:absolute;display:block;width:100%;text-align:center}.black-key b{top:32%;font:700 10px DM Mono}.black-key span{top:53%;font:700 11px DM Mono}.target{background:var(--lime);color:var(--ink)}.scores{padding:30px;min-height:420px}.scores h1{font-size:38px}.measure-list{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}.measure-list button{min-width:120px;border:1px solid var(--line);border-radius:9px;background:#faf9f2;padding:12px;text-align:left;cursor:pointer}.measure-list small{display:block;color:var(--muted);font:10px DM Mono}.measure-list b{display:block;margin-top:8px;font:700 12px DM Mono}@media (max-width:880px){.app-shell{padding:22px}.side-nav{position:static;width:auto;display:flex;gap:5px;align-items:center;margin-top:16px}.side-nav>p,.midi-card{display:none}.nav-item{width:auto;border:1px solid var(--line);border-radius:8px}.content{padding-top:25px}.practice-grid{grid-template-columns:1fr}.target-card{min-height:200px}}@media (max-width:600px){.side-nav{overflow:auto}.nav-item{white-space:nowrap}.piano-toolbar{align-items:flex-start;gap:10px;flex-direction:column}.piano{height:100px}.white-key b{font-size:10px}.white-key span{font-size:9px}.black-key b{font-size:8px}.black-key span{font-size:9px}.app-shell{padding:16px}.content{padding-top:10px}}.fl-answer{margin-top:20px;padding-top:15px;border-top:1px solid #536158}.fl-answer span{display:block;color:#b4c1b8;font:10px DM Mono;letter-spacing:.12em}.fl-answer b{display:block;color:var(--lime);font:700 32px DM Mono;margin:7px 0}.fl-answer small{color:#b4c1b8;font-size:11px;line-height:1.5}.black-key{display:grid;place-content:center;gap:4px;padding:0}.black-key b,.black-key span{position:static;width:auto;text-align:center}.black-key b{font:700 clamp(8px,1vw,10px) "DM Mono"}.black-key span{font:700 clamp(9px,1.1vw,11px) "DM Mono"}.hear-note{align-self:flex-start;margin-top:18px;border:1px solid #75846f;border-radius:8px;background:transparent;color:#fff;padding:9px 12px;font:700 11px Manrope;cursor:pointer}.hear-note:hover{background:#fff;color:var(--ink)}