:root{--bg:#080b17;--panel:#141a2c;--panel2:#1c2440;--line:#344168;--ink:#f7f9ff;--muted:#aeb9d5;--cyan:#61e5f3;--violet:#9e7cff;--gold:#ffd166;--green:#43db87;--red:#ff6875}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 10% -5%,#28467b 0,transparent 32%),radial-gradient(circle at 95% 0,#5b235d 0,transparent 28%),var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;min-height:100vh}.hero{max-width:1250px;margin:auto;padding:26px 22px 18px;display:flex;justify-content:space-between;align-items:center}.hero h1{font-size:clamp(2rem,6vw,4.3rem);line-height:.95;margin:.12em 0;background:linear-gradient(90deg,#fff,var(--cyan),#c998ff);color:transparent;background-clip:text}.hero p{color:var(--muted);margin:.5rem 0}.eyebrow{font-size:.75rem;letter-spacing:.2em;color:var(--cyan);font-weight:900}.level-ring{width:92px;height:92px;border-radius:50%;display:grid;place-content:center;text-align:center;background:conic-gradient(var(--cyan) 0deg,#2a3252 0);border:5px solid #27304d}.level-ring b{font-size:1.25rem}.level-ring span{font-size:.7rem;color:var(--muted)}.app{width:min(1250px,100%);margin:auto;padding:0 18px 30px}.tabs{display:flex;gap:8px;margin:8px 0 14px;overflow-x:auto}.tab{white-space:nowrap}.tab.active{background:linear-gradient(135deg,var(--cyan),#8aa0ff);color:#101425;border-color:transparent}.view{display:none}.view.active{display:block}.panel{background:#13192bea;border:1px solid var(--line);border-radius:18px;box-shadow:0 16px 45px #0005}.selectors{display:grid;grid-template-columns:1fr 1fr 2fr 1fr;gap:10px;padding:13px}.field label{display:block;color:var(--muted);font-size:.78rem;margin:0 0 5px}.field select{width:100%;border:1px solid #475681;background:#202946;color:white;border-radius:10px;padding:10px}.song-card{margin-top:12px;padding:16px;display:flex;justify-content:space-between;gap:18px;align-items:center}.song-card h2{margin:.25rem 0}.song-card p{margin:.25rem 0;color:var(--muted)}.tag{display:inline-block;border-radius:99px;background:#313d68;color:#dce5ff;font-size:.7rem;font-weight:900;padding:5px 9px;letter-spacing:.08em}.song-facts{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.song-facts span{background:#0c1020;border:1px solid #303a60;border-radius:9px;padding:7px 9px;color:var(--muted);font-size:.8rem}.score{margin-top:12px;padding:14px}.score-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.score-head h3{margin:0}.score-head p{margin:.3rem 0;color:var(--muted);font-size:.85rem}.switch{color:var(--muted);font-size:.8rem}.switch input{accent-color:var(--cyan)}#paper,#trainerPaper{background:#fff;color:#111;border-radius:10px;min-height:210px;padding:8px;overflow-x:auto}#paper svg,#trainerPaper svg{max-width:none}.loading{color:#64748b;text-align:center;padding:70px 10px}#fallback{background:#fff;color:#111;border-radius:10px;padding:20px}.lesson{margin-top:12px;padding:15px}.lesson-head{display:flex;justify-content:space-between;gap:15px;align-items:center}.lesson-head>div:first-child{flex:1}.lesson-progress{height:9px;background:#090c17;border-radius:99px;overflow:hidden;margin-top:6px}.lesson-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--violet));transition:.25s}.score-box{background:#0c1020;border-radius:10px;padding:8px 12px;color:var(--muted)}.score-box b{color:var(--gold);font-size:1.2rem}.coach{text-align:center;min-height:60px;padding:10px}.coach b{display:block}.coach span{color:var(--muted);font-size:.88rem}.controls{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}button{border:1px solid #48557f;background:#30395e;color:white;border-radius:11px;padding:10px 13px;font:inherit;font-weight:800;cursor:pointer}button.primary{border:0;background:linear-gradient(135deg,var(--cyan),#8ba4ff);color:#101426}button:disabled{opacity:.4;cursor:not-allowed}.keyboard-panel{margin-top:12px;padding:14px}.keyboard-head{display:flex;justify-content:space-between;align-items:center}.keyboard-head h3{margin:.2rem}.keyboard-head span{color:var(--muted);font-size:.78rem}.keyboard-scroll{overflow-x:auto;padding:6px 0 10px}.keyboard{position:relative;height:190px;min-width:1260px;background:#0b0e18;border-radius:12px;padding:0 10px;display:flex}.white-key{position:relative;width:52px;height:178px;border:1px solid #69738b;border-radius:0 0 8px 8px;background:linear-gradient(#fff,#dce3f1);color:#172039;display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;font-weight:900;box-shadow:inset 0 -8px 15px #aab3c8}.black-key{position:absolute;z-index:2;top:0;width:34px;height:112px;border-radius:0 0 7px 7px;background:linear-gradient(90deg,#090b12,#3c4357,#080a10);color:white;font-size:.67rem;display:flex;align-items:flex-end;justify-content:center;padding-bottom:9px;box-shadow:0 5px 6px #0008}.piano-key.active{background:var(--gold)!important;color:#111;transform:translateY(3px)}.piano-key.correct{background:var(--green)!important}.piano-key.wrong{background:var(--red)!important}.note-readout{text-align:center;color:var(--gold);min-height:25px;font-weight:900}.trainer-grid{display:grid;grid-template-columns:2fr 1fr;gap:12px}.trainer-card{padding:18px}.trainer-card h2{margin:.4rem 0}.trainer-card p{color:var(--muted)}.trainer-answer{text-align:center;min-height:45px;padding:10px;font-weight:800}.trainer-grid>.panel:last-child{padding:18px}.big-stat{background:#0c1020;border-radius:12px;padding:14px;text-align:center;margin:10px 0}.big-stat b{display:block;font-size:2rem;color:var(--cyan)}.big-stat span{color:var(--muted)}.theory-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.theory-card{padding:16px}.theory-card .symbol{font-size:3rem;color:var(--gold)}.theory-card p{color:var(--muted);font-size:.88rem}footer{text-align:center;color:#7f8bad;padding:18px;font-size:.8rem}@media(max-width:850px){.selectors{grid-template-columns:1fr 1fr}.field.wide{grid-column:span 2}.song-card{align-items:flex-start;flex-direction:column}.song-facts{justify-content:flex-start}.trainer-grid{grid-template-columns:1fr}.theory-grid{grid-template-columns:1fr 1fr}.keyboard-head{display:block}}@media(max-width:520px){.hero{padding:18px 10px}.level-ring{display:none}.app{padding:0 8px 20px}.selectors{grid-template-columns:1fr}.field.wide{grid-column:auto}.score-head{display:block}.theory-grid{grid-template-columns:1fr}}