:root{--bg:#0b1022;--panel:#11182f;--panel-2:#1a2342;--border:#26315a;--text:#e2e8f0;--muted:#94a3b8;--accent:#38bdf8;--accent-2:#fb923c;--good:#4ade80;--bad:#f43f5e;--gold:#facc15;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);-webkit-user-select:none;user-select:none;margin:0;font:14px/1.4 system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}#topbar{background:var(--panel);border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:10px 16px;padding:10px 14px;display:flex}.brand{letter-spacing:-.02em;font-size:20px;font-weight:900}.brand span{color:var(--accent);margin-left:2px}.group{align-items:center;gap:6px;display:flex}button,select{font:inherit;color:var(--text);background:var(--panel-2);border:1px solid var(--border);cursor:pointer;border-radius:8px;padding:6px 12px}button:hover,select:hover{border-color:var(--accent)}button.primary{background:var(--accent);color:#06121f;border-color:var(--accent);min-width:96px;font-weight:700}select{max-width:260px}.seg{gap:0}.seg button{border-radius:0;margin-left:-1px}.seg button:first-child{border-radius:8px 0 0 8px}.seg button:last-child{border-radius:0 8px 8px 0}.seg button.active{background:var(--accent);border-color:var(--accent);color:#06121f;font-weight:700;position:relative}.speed{color:var(--muted);align-items:center;gap:8px;display:flex}.speed input{width:110px;accent-color:var(--accent)}#speedVal{color:var(--text);font-variant-numeric:tabular-nums;min-width:40px}.toggles label{color:var(--muted);cursor:pointer;align-items:center;gap:5px;display:flex}.toggles input{accent-color:var(--accent)}.status{background:var(--panel-2);border:1px solid var(--border);color:var(--muted);white-space:nowrap;border-radius:999px;margin-left:auto;padding:5px 10px;font-size:13px}.status.ok{color:var(--good);border-color:#4ade8066}.status.warn{color:var(--gold);border-color:#facc1566}#stage{flex:1;min-height:0;position:relative}#canvas{touch-action:none;width:100%;height:100%;display:block}#hint{color:var(--muted);background:var(--panel);border-top:1px solid var(--border);padding:6px 14px;font-size:12px}#hint b{color:var(--text)}.overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#050814a6;place-items:center;display:grid;position:absolute;inset:0}.hidden{display:none!important}.card{background:var(--panel);border:1px solid var(--border);text-align:center;border-radius:16px;min-width:320px;padding:28px 36px;box-shadow:0 20px 60px #00000080}.card h2{margin:0 0 6px;font-size:28px}.stars{letter-spacing:6px;color:#334155;font-size:48px}.stars .on{color:var(--gold);text-shadow:0 0 18px #facc1599}.big{margin:4px 0 16px;font-size:22px;font-weight:800}.stats{color:var(--muted);grid-template-columns:repeat(3,1fr);gap:10px 24px;margin-bottom:20px;font-size:12px;display:grid}.stats b{color:var(--text);font-size:20px;display:block}.actions{justify-content:center;gap:10px;display:flex}.toast{background:var(--panel-2);border:1px solid var(--accent);border-radius:10px;max-width:80%;padding:8px 16px;position:absolute;top:16px;left:50%;transform:translate(-50%)}.toast.error{border-color:var(--bad);color:#fecdd3}.screen{flex-direction:column;height:100dvh;display:flex}html{touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}.icon-btn{padding:4px 10px;font-size:18px;line-height:1}.icon-btn.danger:hover{border-color:var(--bad);color:var(--bad)}button.ghost{background:0 0}button.big{padding:10px 22px;font-size:17px}button:disabled{cursor:default;opacity:.55}.gold{color:var(--gold)}.stars-inline span{color:#3b4566}.stars-inline span.on{color:var(--gold)}.chip{background:var(--panel-2);border:1px solid var(--border);border-radius:999px;padding:1px 8px;font-size:12px;display:inline-block}.card-kicker{text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-bottom:4px;font-size:11px;font-weight:800}#home{overflow:hidden}.home-header{background:var(--panel);border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:24px;padding:14px 24px;display:flex}.home-header .brand{font-size:24px}.stats-bar{flex-wrap:wrap;gap:12px;display:flex}.stat{background:var(--panel-2);border:1px solid var(--border);font:inherit;color:var(--text);border-radius:12px;align-items:center;gap:10px;padding:6px 14px;line-height:1.2;display:flex}.stat small{color:var(--muted);font-size:11px;display:block}.stat b{font-size:15px}.stat-icon{font-size:20px}.level-badge{background:linear-gradient(135deg, var(--accent), #6366f1);color:#06121f;border-radius:50%;place-items:center;width:30px;height:30px;font-weight:900;display:grid}.xp-wrap{min-width:150px}.xp-track{background:var(--border);border-radius:3px;height:6px;margin-bottom:3px;overflow:hidden}.xp-fill{background:linear-gradient(90deg, var(--accent), #818cf8);height:100%;transition:width .4s}.stat.goal{cursor:pointer;text-align:left}.ring{width:30px;height:30px;transform:rotate(-90deg)}.ring circle{fill:none;stroke-width:4px}.ring-bg{stroke:var(--border)}.ring-fg{stroke:var(--accent-2);stroke-linecap:round;transition:stroke-dashoffset .4s}.stat.goal.met .ring-fg{stroke:var(--good)}.tabs{background:var(--panel);border-bottom:1px solid var(--border);gap:6px;padding:10px 24px 0;display:flex}.tabs button{color:var(--muted);background:0 0;border:none;border-bottom:3px solid #0000;border-radius:0;padding:8px 16px 10px;font-size:15px;font-weight:700}.tabs button.active{color:var(--text);border-bottom-color:var(--accent)}.tabs #freePlayBtn{color:var(--text)}.tabs .spacer{flex:1}.home-content{flex:1;padding:24px;overflow-y:auto}.home-content>*{max-width:1100px;margin-left:auto;margin-right:auto}.continue-card{background:linear-gradient(120deg,#38bdf82e,#818cf82e);border:1px solid #38bdf866;border-radius:16px;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px;padding:22px 26px;display:flex}.continue-card h2{margin:0 0 4px;font-size:24px}.continue-card p{color:var(--muted);margin:0}.course{margin-bottom:36px}.course-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:14px;display:flex}.course-head h2{margin:0 0 4px;font-size:22px}.course-head p{color:var(--muted);max-width:600px;margin:0}.course-progress{text-align:right;min-width:220px}.course-progress .bar{background:var(--border);border-radius:4px;height:8px;margin-bottom:4px;overflow:hidden}.course-progress .bar div{background:var(--good);height:100%}.course-progress small{color:var(--muted)}.unit{background:var(--panel);border:1px solid var(--border);border-radius:14px;margin-bottom:12px;padding:16px 18px}.unit h3{margin:0 0 2px;font-size:16px}.unit>p{color:var(--muted);margin:0 0 12px;font-size:13px}.unit-num{color:var(--muted);margin-right:4px;font-weight:600}.lesson-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;display:grid}.lesson-tile{text-align:left;border-radius:12px;grid-template-columns:auto 1fr;align-items:center;gap:2px 10px;min-height:64px;padding:10px 12px;display:grid}.lesson-tile .num{background:var(--border);border-radius:50%;grid-row:span 2;place-items:center;width:28px;height:28px;font-size:13px;font-weight:800;display:grid}.lesson-tile .t{font-size:13px;font-weight:700;line-height:1.25}.lesson-tile .s{color:var(--muted);font-size:13px}.lesson-tile.done .num{background:var(--good);color:#052e16}.lesson-tile.next{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent), 0 0 18px #38bdf840}.lesson-tile.next .num{background:var(--accent);color:#06121f}.lesson-tile.next .s{color:var(--accent);font-weight:700}.practice-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;display:grid}.drill-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;flex-direction:column;gap:10px;padding:18px;display:flex}.drill-head{align-items:center;gap:10px;display:flex}.drill-head h3{margin:0}.drill-icon{background:var(--panel-2);border-radius:10px;place-items:center;width:40px;height:40px;font-family:Segoe UI Symbol,Segoe UI Emoji,sans-serif;font-size:22px;display:grid}.drill-card p{color:var(--muted);margin:0;font-size:13px}.drill-controls{flex-wrap:wrap;gap:8px 12px;display:flex}.drill-controls label{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;flex-direction:column;gap:3px;font-size:11px;font-weight:700;display:flex}.drill-controls select{text-transform:none;letter-spacing:0;padding:5px 8px;font-weight:400}.drill-extra{color:var(--muted);font-size:12px}.drill-foot{justify-content:space-between;align-items:center;gap:10px;margin-top:auto;display:flex}.drill-best{color:var(--muted)}.songs-head{justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;display:flex}.songs-head h2{margin:0}.songs-head p{color:var(--muted);margin:2px 0 0}.song-section{margin-bottom:22px}.song-section h3{margin:0 0 8px;font-size:15px}.level-dots{color:var(--accent-2);letter-spacing:2px;margin-left:6px;font-size:11px}.song-list{flex-direction:column;gap:6px;display:flex}.song-row{background:var(--panel);border:1px solid var(--border);border-radius:12px;align-items:center;gap:12px;padding:10px 14px;display:flex}.song-info{flex:1;min-width:0}.song-info b{display:block}.song-info small{color:var(--muted)}.song-stars{text-align:right;min-width:48px}.session-title{white-space:nowrap;text-overflow:ellipsis;max-width:260px;font-weight:800;overflow:hidden}#topbar.locked .lockable,#topbar.no-song .lockable,#topbar.no-song .song-controls{display:none}.lesson-bar{color:var(--muted);align-items:center;gap:10px;font-size:13px;display:flex}.lesson-title{white-space:nowrap;font-weight:700}.step-dots{gap:5px;display:flex}.step-dots span{background:var(--border);border-radius:50%;width:9px;height:9px}.step-dots span.done{background:var(--good)}.step-dots span.current{background:var(--accent);box-shadow:0 0 8px var(--accent)}.step-card{border:1px solid var(--border);z-index:3;background:#11182ff7;border-radius:16px;width:min(560px,100% - 32px);max-height:calc(100% - 240px);padding:22px 26px;position:absolute;top:50px;left:50%;overflow-y:auto;transform:translate(-50%);box-shadow:0 20px 60px #00000080}.step-card h3{margin:0 0 10px;font-size:22px}.step-card p{color:#cbd5e1;margin:0 0 10px;line-height:1.55}.step-card b{color:var(--text)}.step-card .card-hint{color:var(--accent);font-size:13px}.step-card .card-goal{font-weight:700}.step-card .actions{justify-content:flex-start;margin-top:6px}.chips{flex-wrap:wrap;gap:6px;margin:4px 0 10px;display:flex}.chips span{background:var(--panel-2);border:1px solid var(--border);color:var(--muted);border-radius:999px;padding:3px 10px;font-size:12px}.big-stars{font-size:44px}.quiz-card{text-align:center;border:2px solid var(--border);z-index:2;background:#11182ff2;border-radius:18px;min-width:300px;max-width:calc(100% - 32px);padding:18px 34px 14px;transition:border-color .15s,box-shadow .15s;position:absolute;top:50px;left:50%;transform:translate(-50%)}.quiz-progress{color:var(--muted);font-size:12px;font-weight:700}.quiz-text{margin:4px 0;font-size:64px;font-weight:900;line-height:1.1}.quiz-sub{color:#cbd5e1}.quiz-hint{color:var(--gold);margin-top:6px;font-size:13px}.quiz-card.correct{border-color:var(--good);box-shadow:0 0 30px #4ade8059}.quiz-card.shake{border-color:var(--bad);animation:.35s shake}@keyframes shake{0%,to{transform:translate(-50%)}20%{transform:translate(calc(-50% - 10px))}40%{transform:translate(calc(10px - 50%))}60%{transform:translate(calc(-50% - 6px))}80%{transform:translate(calc(6px - 50%))}}.res-note{margin:-8px 0 14px;font-weight:700}.res-note:empty{display:none}.res-note.good{color:var(--good)}.res-note.bad{color:#fda4af;max-width:380px;margin-left:auto;margin-right:auto;font-weight:500}.ref-panel{border:1px solid var(--border);z-index:3;background:#11182ff7;border-radius:16px;flex-direction:column;gap:8px;width:min(900px,100% - 32px);padding:18px 24px 16px;display:flex;position:absolute;top:12px;bottom:200px;left:50%;transform:translate(-50%);box-shadow:0 20px 60px #00000080}.ref-head{justify-content:space-between;align-items:baseline;display:flex}.ref-count{color:var(--muted);font-size:12px;font-weight:700}.ref-panel h3{margin:0;font-size:22px}.ref-visual{flex:1 1 0;justify-content:center;align-items:center;min-height:80px;display:flex}.ref-visual svg{width:100%;height:100%;max-height:340px}.ref-text{flex:none}.ref-text p{color:#cbd5e1;margin:0 0 8px;line-height:1.55}.ref-text b{color:var(--text)}.ref-text .card-hint{color:var(--accent);font-size:13px}.ref-nav{justify-content:space-between;align-items:center;gap:12px;display:flex}.ref-dots span{cursor:pointer}.ref-toc{margin:0;padding-left:18px;font-size:13px;line-height:1.7}.ref-toc a{color:var(--accent);text-decoration:none}.ref-toc a:hover{text-decoration:underline}@media (pointer:coarse){#hint{display:none}button,select{min-height:38px}.toggles input{width:18px;height:18px}}@media (width<=900px){#topbar{gap:8px 10px;padding:8px 10px}.session-title{max-width:150px}.speed input{width:80px}.home-header{gap:12px;padding:12px 16px}.home-content{padding:16px}.ref-panel,.step-card{padding:14px 16px}}