.btn,select,.step,.lesson-card,.seg button{font-family:inherit}.btn{background:var(--panel2);color:var(--text);border:1px solid #353b4c;border-radius:9px;padding:9px 14px;font-size:13px;cursor:pointer;transition:background .15s,border-color .15s,transform .05s}.btn:hover{border-color:#4a5268;background:#2d3240}.btn:active{transform:translateY(1px)}.btn.on{background:var(--accent2);border-color:var(--accent2);color:#fff;font-weight:600}.btn.gold{background:var(--accent);border-color:var(--accent);color:#1a1206;font-weight:700}.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}.btn.ghost:hover{color:var(--text);background:var(--panel)}select{background:var(--panel2);color:var(--text);border:1px solid #353b4c;border-radius:8px;padding:7px 10px;font-size:13px;cursor:pointer}.home{max-width:1040px;margin:0 auto;padding:24px 22px 60px}.home-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:26px}.home-head h1{font-size:30px;font-weight:800;letter-spacing:.5px}.home-head h1 span{color:var(--accent)}.tagline{color:var(--muted);font-size:14px;margin-top:4px}.head-right{display:flex;align-items:center;gap:12px}.total-stars{font-size:15px;font-weight:700;color:var(--accent);background:var(--panel);border:1px solid var(--border);padding:8px 14px;border-radius:99px}.course{margin-bottom:30px}.course-head h2{font-size:19px;font-weight:700}.course-head p{color:var(--muted);font-size:13px;margin:2px 0 14px}.lesson-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}.lesson-card{text-align:left;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px;cursor:pointer;display:flex;flex-direction:column;gap:12px;transition:transform .12s,border-color .15s,box-shadow .15s}.lesson-card:hover:not(.locked){transform:translateY(-2px);border-color:var(--accent);box-shadow:0 8px 22px #00000047}.lesson-card.locked{opacity:.5;cursor:not-allowed}.lesson-card.done{border-color:#3a5a3f}.lc-top{display:flex;justify-content:space-between;align-items:center}.lc-title{font-size:15px;font-weight:700}.lc-meta{display:flex;align-items:center;gap:8px}.badge{font-size:10px;text-transform:uppercase;letter-spacing:.6px;background:var(--panel2);color:var(--muted);border:1px solid var(--border);border-radius:6px;padding:2px 7px}.lc-count{font-size:12px;color:var(--muted)}.lc-foot{display:flex;justify-content:space-between;align-items:center}.mini-stars span{color:#3a3f4c;font-size:15px}.mini-stars span.lit{color:var(--accent)}.lc-acc{font-size:12px;color:var(--green);font-weight:600}.home-foot{color:var(--muted);font-size:12px;line-height:1.7;margin-top:18px}.play{min-height:100vh;display:flex;flex-direction:column}.play-top{display:flex;align-items:center;gap:14px;padding:14px 20px}.play-title{font-size:16px;font-weight:700}.play-title span{color:var(--muted);font-weight:400;font-size:13px}.hud{margin-left:auto;display:flex;gap:8px}.hud-pill{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;padding:4px 10px;border-radius:99px;border:1px solid var(--border)}.hud-pill.good{color:var(--green)}.hud-pill.warn{color:var(--accent)}.hud-pill.bad{color:var(--red)}.stage-steps{display:flex;gap:8px;padding:0 20px;flex-wrap:wrap}.step{background:var(--panel);border:1px solid var(--border);color:var(--muted);border-radius:10px;padding:8px 14px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:7px}.step b{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--panel2);font-size:11px}.step.on{border-color:var(--accent);color:var(--text)}.step.on b{background:var(--accent);color:#1a1206}.stage-blurb{color:var(--muted);font-size:13px;padding:8px 20px 0}.staff-area{position:relative;padding:12px 20px}.staff-wrap{border:1px solid #2a3140;border-radius:12px;overflow:hidden;box-shadow:inset 0 1px 6px #00000059}.staff-wrap svg{display:block}.countin{position:absolute;top:12px;right:20px;bottom:12px;left:20px;display:flex;align-items:center;justify-content:center;font-size:80px;font-weight:800;color:var(--accent);text-shadow:0 4px 18px rgba(0,0,0,.5);pointer-events:none}.toast{position:absolute;top:22px;left:50%;transform:translate(-50%);background:#e0574feb;color:#fff;padding:8px 16px;border-radius:99px;font-size:13px;font-weight:600}.play-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:4px 20px 6px}.ctl{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}.input-msg{color:var(--accent);font-size:12px;padding:0 20px 6px}.heard{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);font-weight:600;background:var(--panel);border:1px solid var(--border);padding:6px 12px;border-radius:99px}.heard.live{color:var(--green);border-color:#2f5a3c}.heard .dot{width:8px;height:8px;border-radius:50%;background:#555}.heard.live .dot{background:var(--green);box-shadow:0 0 7px var(--green)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#08090db8;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.card{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:28px 30px;text-align:center;width:min(440px,92vw);box-shadow:0 24px 60px #00000080}.card h2{font-size:22px;margin-bottom:6px}.card-sub{color:var(--muted);font-size:14px;margin-bottom:8px}.stars{display:flex;justify-content:center;gap:10px;margin:12px 0 6px}.star{font-size:46px;color:#3a3f4c;transition:transform .25s}.star.lit{color:var(--accent);text-shadow:0 0 18px rgba(224,169,62,.6);transform:scale(1.1)}.result-grid{display:flex;justify-content:center;gap:26px;margin:14px 0 20px}.result-grid div{display:flex;flex-direction:column}.result-grid b{font-size:22px;color:var(--accent);font-variant-numeric:tabular-nums}.result-grid span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}.card-actions{display:flex;flex-direction:column;gap:8px}.piano{margin-top:auto;display:flex;justify-content:safe center;background:linear-gradient(#0b0c10,#11131a);padding:22px 14px 20px;overflow-x:auto;border-top:5px solid #2c2014}.white-slot{position:relative;flex-shrink:0}.key{border:none;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;touch-action:none}.key.white{position:relative;width:46px;height:220px;background:linear-gradient(#f5f4f0,#e3e1da);border:1px solid #b8b5ac;border-radius:0 0 6px 6px;box-shadow:inset 0 -7px #00000014;color:#6d6a61}.key.white:active,.key.white.active{background:linear-gradient(#dcd9d0,#cfccc2);box-shadow:inset 0 -3px #0000001f}.key.black{position:absolute;top:0;right:-14px;width:28px;height:134px;background:linear-gradient(#3a3d46,#16181d 70%);border-radius:0 0 5px 5px;box-shadow:0 3px 5px #00000080,inset 0 -6px #ffffff0f;color:#9aa0ae;z-index:2;font-size:10px;padding-bottom:8px}.key.black:active,.key.black.active{background:linear-gradient(#2c2e35,#101115 70%);height:130px}.key.target{animation:glow 1s ease-in-out infinite}.key.white.target{background:linear-gradient(#ffe9b8,#f4c95d);border-color:var(--accent)}.key.black.target{background:linear-gradient(#a8842e,#6e571d 70%)}@keyframes glow{0%,to{box-shadow:0 0 6px 2px #e0a93e8c}50%{box-shadow:0 0 18px 6px #e0a93ed9}}.key.wrong{animation:shake .3s}.key.white.wrong{background:linear-gradient(#f3b8b8,#e58a8a)}.key.black.wrong{background:linear-gradient(#8a3030,#571c1c 70%)}@keyframes shake{25%{transform:translate(-3px)}75%{transform:translate(3px)}}.key-label{font-size:11px;font-weight:600;pointer-events:none}.key.white.middle-c:after{content:"";position:absolute;bottom:34px;left:50%;transform:translate(-50%);width:7px;height:7px;border-radius:50%;background:var(--accent2);opacity:.8}@media(max-width:720px){.key.white{width:38px;height:176px}.key.black{width:24px;height:108px;right:-12px}.piano{justify-content:flex-start}.countin{font-size:56px}}*{box-sizing:border-box;margin:0;padding:0}:root{--bg: #14161c;--panel: #1e2129;--panel2: #262a35;--border: #2c3140;--text: #e8eaf0;--muted: #8b91a0;--accent: #e0a93e;--accent2: #4e9af5;--red: #e05555;--green: #4ecf7a}html,body,#root{height:100%}body{background:radial-gradient(1200px 600px at 50% -10%,#232836,var(--bg));color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;user-select:none;-webkit-user-select:none}