:root{--brand: #4F46E5;--brand-strong: #4338CA;--brand-soft: #EEF2FF;--brand-soft2: #E0E7FF;--glow: rgba(79, 70, 229, .42);--ink: #212429;--ink2: #4A4F57;--muted: #878D96;--line: #E8EAED;--bg: #F7F8FA;--card: #FFFFFF;--err: #E8590C;--err-soft: #FDEEE2;--staff-ink: #26282C;--radius-card: 16px;--radius-btn: 10px;--radius-chip: 8px;--font: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif}*{margin:0;padding:0;box-sizing:border-box}[hidden]{display:none!important}html{-webkit-text-size-adjust:100%}body{font-family:var(--font);font-size:15px;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}body.no-scroll{overflow:hidden}button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer}a{color:inherit;text-decoration:none}h1{font-size:28px;font-weight:700;letter-spacing:-.01em}.n,.num{font-variant-numeric:tabular-nums}.muted{color:var(--muted)}.small{font-size:12.5px}.brand-text{color:var(--brand);font-weight:600}.ic{width:20px;height:20px;flex:none;display:inline-block;vertical-align:-4px}::selection{background:var(--brand-soft2)}.banner{position:fixed;top:14px;left:50%;transform:translate(-50%);background:#2a2d33;color:#fff;font-size:13px;padding:7px 16px;border-radius:999px;z-index:300;box-shadow:0 4px 16px #0000002e}.shell{display:flex;min-height:100vh}.sidebar{width:212px;flex:none;padding:22px 14px 18px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:10px;padding:4px 10px 22px}.brand-mark{width:30px;height:30px;border-radius:9px;flex:none;background:var(--brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:700}.brand-mark.big{width:56px;height:56px;border-radius:16px;font-size:26px}.brand-name{font-weight:700;font-size:16px;letter-spacing:-.01em}.side-nav{display:flex;flex-direction:column;gap:2px}.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:2px}.nav-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--radius-btn);color:var(--ink2);font-size:14.5px;font-weight:500;transition:background .15s,color .15s;width:100%;text-align:left}.nav-item:hover{background:#f0f1f4;color:var(--ink)}.nav-item.on{background:var(--brand-soft);color:var(--brand-strong)}.nav-item.on .ic{color:var(--brand)}.main{flex:1;min-width:0}.content{max-width:1120px;margin:0 auto;padding:44px 48px 90px}.topnav{display:none}.page-head{margin-bottom:26px}.page-head .sub{color:var(--muted);margin-top:4px}.card{background:var(--card);border:1px solid #ECEEF1;border-radius:var(--radius-card);padding:22px 24px;box-shadow:0 1px 2px #1018280a}.card+.card{margin-top:18px}.card-t{font-size:17px;font-weight:650;margin-bottom:12px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 18px;border-radius:var(--radius-btn);background:#fff;border:1px solid var(--line);color:var(--ink);font-size:14.5px;font-weight:550;transition:background .15s,border-color .15s,transform .06s,box-shadow .15s}.btn:hover{background:#f4f5f7}.btn:active{transform:scale(.985)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 1px 3px #4338ca4d}.btn.primary:hover{background:var(--brand-strong);border-color:var(--brand-strong)}.btn.danger{color:#c2410c;border-color:#f3c9af}.btn.danger:hover{background:#fdf3ec}.btn.big{padding:12px 26px;font-size:15.5px;border-radius:12px}.btn.block{width:100%}kbd{font-family:inherit;font-size:11px;color:var(--muted);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px;background:#fafafb}.hero-card{padding:28px 30px}.hero-label{font-size:13px;font-weight:600;color:var(--brand);letter-spacing:.04em;margin-bottom:8px}.hero-title{font-size:24px;font-weight:700;letter-spacing:-.01em}.hero-reason{margin-top:8px;color:var(--ink2)}.hero-meta{margin-top:6px;font-size:13.5px}.hero-card .btn{margin-top:20px}.stat-row{display:flex;align-items:center;padding:20px 24px;gap:0}.stat{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px}.stat .num{font-size:21px;font-weight:650}.stat .lab{font-size:13px;color:var(--muted)}.stat-div{width:1px;height:36px;background:var(--line)}.recent-line{display:flex;align-items:center;gap:16px;padding:10px 2px;font-size:14.5px}.recent-line span:first-child{flex:1;font-weight:500}.empty-line{color:var(--muted);font-size:14px;padding:6px 0}.learn-grid{display:grid;grid-template-columns:1fr 380px;gap:26px;align-items:start}.pgroup-t{font-size:12.5px;font-weight:650;color:var(--muted);letter-spacing:.06em;margin:18px 0 10px 5px}.pgroup-t:first-child{margin-top:0}.pnode{position:relative;display:flex;align-items:center;gap:14px;padding:9px 12px 9px 6px;border-radius:var(--radius-btn);width:100%;text-align:left;transition:background .15s}.pnode:hover{background:#f0f1f4}.pnode.sel{background:var(--brand-soft)}.pnode .pdot{width:30px;height:30px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;transition:all .2s}.pnode.done .pdot{background:var(--brand);color:#fff}.pnode.done .pdot .ic{width:15px;height:15px}.pnode.cur .pdot{background:#fff;border:2.5px solid var(--brand);box-shadow:0 0 0 5px var(--brand-soft2);animation:curGlow 2.4s ease-in-out infinite}.pnode.open .pdot{background:#fff;border:2px solid #D4D7DC}.pnode.locked .pdot{background:#edeef1}.pnode.locked{opacity:.55}.pnode .pinfo{display:flex;flex-direction:column;line-height:1.35}.pnode .pl{font-size:15px;font-weight:600}.pnode .psub{font-size:12.5px;color:var(--muted)}.pnode:not(:last-child){margin-bottom:12px}.pnode:not(:last-child):after{content:"";position:absolute;left:20.5px;top:42px;bottom:-13px;width:2px;background:var(--line);border-radius:2px}.pnode.done:not(:last-child):after{background:var(--brand-soft2)}@keyframes curGlow{0%,to{box-shadow:0 0 0 5px var(--brand-soft2)}50%{box-shadow:0 0 0 8px var(--brand-soft)}}.lesson-detail{position:sticky;top:44px}.ld-title{font-size:21px;font-weight:700}.ld-sub{color:var(--muted);font-size:13.5px;margin-top:2px}.ld-desc{margin-top:12px;color:var(--ink2)}.ld-sec{font-size:13px;font-weight:650;color:var(--muted);margin:16px 0 8px;letter-spacing:.04em}.ld-items{list-style:none}.ld-items li{padding:3px 0 3px 18px;position:relative;color:var(--ink2);font-size:14.5px}.ld-items li:before{content:"";position:absolute;left:2px;top:12px;width:6px;height:6px;border-radius:50%;background:var(--brand-soft2)}.ld-meta{margin:14px 0 16px;font-size:13.5px}.free-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;margin-bottom:22px}.cfg-sec{font-size:13px;font-weight:650;color:var(--muted);margin:20px 0 10px;letter-spacing:.04em}.cfg-sec:first-child{margin-top:0}.cfg-hint{font-size:12.5px;margin-top:8px}.pos-fixed{display:inline-block;padding:8px 14px;border-radius:var(--radius-chip);background:#f1f2f4;color:var(--ink2);font-size:13.5px;font-weight:550}.opt-list{display:flex;flex-direction:column;gap:6px}.opt-row{display:flex;align-items:center;gap:12px;text-align:left;padding:10px 12px;border-radius:var(--radius-btn);border:1px solid var(--line);background:#fff;transition:border-color .15s,background .15s}.opt-row:hover{background:#fafafb}.opt-row.on{border-color:var(--brand);background:var(--brand-soft)}.opt-radio{width:17px;height:17px;border-radius:50%;flex:none;border:2px solid #CDD1D7;transition:all .15s}.opt-row.on .opt-radio{border-color:var(--brand);background:var(--brand);box-shadow:inset 0 0 0 3px #fff}.opt-info{display:flex;flex-direction:column;line-height:1.35}.opt-t{font-weight:600;font-size:14.5px}.opt-d{font-size:12.5px}.chips-row{display:flex;flex-wrap:wrap;gap:8px}.chip-note{min-width:44px;padding:8px 10px;border-radius:var(--radius-chip);background:#f1f2f4;color:#565b63;font-weight:600;font-size:14px;text-align:center;transition:all .13s}.chip-note:hover{background:#e8eaed}.chip-note.on{background:var(--brand-soft);color:var(--brand-strong)}.chip-note.ok{background:var(--brand);color:#fff}.chip-note.bad{background:var(--err-soft);color:var(--err)}.seg{display:inline-flex;background:#f1f2f4;border-radius:var(--radius-btn);padding:3px;gap:2px}.seg button{padding:7px 16px;border-radius:7px;font-size:13.5px;font-weight:550;color:var(--ink2);transition:all .13s}.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px #1018281a}.cfg-card .btn.block{margin-top:24px}.preview-card{position:sticky;top:44px}.pv-board{margin:6px 0 10px}.pv-board svg{width:100%;height:auto}.pv-text{font-size:13.5px}.pv-note{font-size:12.5px;margin-top:10px}.quiz-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:18px}.qcard{text-align:left;display:flex;flex-direction:column;gap:6px}.qcard:hover{border-color:#d9dce1}.qc-ic{width:42px;height:42px;border-radius:12px;margin-bottom:4px;background:var(--brand-soft);color:var(--brand-strong);display:inline-flex;align-items:center;justify-content:center}.qc-ic .ic{width:22px;height:22px}.qc-t{font-size:19px;font-weight:700}.qc-d{font-size:13.5px}.qcard .btn.primary{margin-top:14px;align-self:flex-start}.qcard.cfg{gap:0}.prog-grid{display:grid;grid-template-columns:1fr 380px;gap:22px;align-items:start}.dots{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 14px}.dot{width:46px;height:46px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:650;font-size:15px;transition:all .15s}.dot.full{background:var(--brand);color:#fff}.dot.part{background:#fff;color:var(--brand-strong);border:2px solid var(--brand-soft2)}.dot.none{background:#f0f1f3;color:#b4b8bf}.dot:hover{transform:translateY(-2px)}.dot.sel{box-shadow:0 0 0 3px var(--brand-soft2)}.dots-sum{color:var(--muted);font-size:13.5px}.dots-sum .num{color:var(--ink);font-weight:650;font-size:15px}.wk-streak{float:right;font-size:12.5px;font-weight:500}.week{display:flex;gap:8px;align-items:flex-end}.wday{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px}.wbar-w{height:72px;width:100%;display:flex;align-items:flex-end;justify-content:center}.wbar{display:block;width:100%;max-width:22px;border-radius:5px;background:var(--brand-soft2)}.wlab{font-size:11.5px}.wval{font-size:11px;color:var(--ink2)}.note-detail{position:sticky;top:44px}.nd-head{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}.nd-name{font-size:34px;font-weight:750;letter-spacing:-.02em}.nd-sol{font-size:14px}.bars{display:flex;flex-direction:column;gap:10px}.bar-row{display:flex;align-items:center;gap:10px}.bar-t{width:88px;font-size:13px;color:var(--ink2);flex:none}.bar-track{flex:1;height:8px;border-radius:5px;background:#eff1f3;overflow:hidden}.bar-fill{display:block;height:100%;border-radius:5px;background:var(--brand);transition:width .4s ease-out}.bar-v{width:40px;text-align:right;font-size:12.5px;color:var(--ink2)}.nd-ms{margin-top:14px;font-size:13.5px}.nd-empty{margin:8px 0 14px}.note-detail .btn{margin-top:16px}.conf-line{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:var(--radius-chip);background:#f8f9fa;margin-bottom:6px;font-size:14px}.conf-line .num{font-weight:650}.set-card .set-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid #F2F3F5}.set-card .set-row:last-of-type{border-bottom:none}.set-col{display:flex;flex-direction:column;line-height:1.4}.tuning{color:var(--ink2);font-weight:600;letter-spacing:.08em}.range{width:180px;accent-color:var(--brand)}.set-card .btn.danger{margin-top:14px}.switch{position:relative;display:inline-block;width:40px;height:23px;flex:none}.switch input{opacity:0;width:0;height:0}.switch i{position:absolute;inset:0;border-radius:999px;background:#d8dbe0;transition:background .18s;cursor:pointer}.switch i:after{content:"";position:absolute;top:2.5px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .18s}.switch input:checked+i{background:var(--brand)}.switch input:checked+i:after{transform:translate(16px)}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.metric{display:flex;flex-direction:column;align-items:center;gap:3px;padding:22px}.metric .num{font-size:30px;font-weight:700;letter-spacing:-.01em}.metric .lab{font-size:13px}.res-tip{margin-top:12px;font-size:13.5px;text-align:center}.result-acts{display:flex;gap:14px;justify-content:center;margin-top:26px}.rest-card{margin-top:26px;text-align:center;padding:26px}.rest-t{font-size:18px;font-weight:700}.rest-card p{margin-top:6px;font-size:13.5px}.rest-acts{display:flex;gap:12px;justify-content:center;margin-top:16px}.empty-card{text-align:center;padding:44px 24px}.empty-card p:first-child{font-size:17px;font-weight:600}.empty-card .muted{margin:6px 0 20px;font-size:14px}.focus{position:fixed;inset:0;z-index:100;background:#fbfbfc;display:flex;flex-direction:column}.focus-top{height:56px;flex:none;display:flex;align-items:center;padding:0 22px;gap:16px;position:relative}.ghost-btn{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:14px;font-weight:550;padding:7px 12px;border-radius:var(--radius-btn);transition:background .15s,color .15s}.ghost-btn:hover{background:#f0f1f4;color:var(--ink)}.ghost-btn .ic{width:17px;height:17px}.focus-title{flex:1;text-align:center;color:var(--ink2);font-size:14.5px;font-weight:550}button.focus-title{border-radius:var(--radius-btn);padding:7px 14px;transition:background .15s}button.focus-title:hover{background:#f0f1f4;color:var(--ink)}button.focus-title .ic{width:14px;height:14px;margin-left:5px;vertical-align:-2px;color:var(--muted)}.focus-meta{min-width:90px;text-align:right;color:var(--muted);font-size:14.5px}.focus-meta .timer{color:var(--ink2);font-weight:600}.focus-meta .timer.urgent{color:var(--brand-strong);font-weight:750}.focus-bar{height:3px;background:#eef0f3;flex:none}.focus-bar i{display:block;height:100%;width:0;background:var(--brand);border-radius:2px;transition:width .25s ease-out}.focus-body{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;padding:0 24px 14px;overflow-y:auto}.flex-sp{flex:1 1 0;min-height:4px}.staff-zone{flex:0 0 auto;display:flex;justify-content:center}.staff-holder{width:clamp(360px,38vw,440px)}.staff-holder svg{width:100%;height:auto;display:block}.prompt-zone{height:48px;flex:none;display:flex;align-items:center;justify-content:center}.prompt{font-size:15px;color:var(--ink2);transition:opacity .5s;text-align:center}.prompt.muted{color:var(--muted)}.prompt.ok{color:var(--brand);font-weight:700;font-size:21px}.prompt.err{color:var(--err);font-weight:550}.prompt.info{color:var(--ink);font-weight:550}.prompt.fade{opacity:0}.board-zone{flex:0 0 auto;display:flex;flex-direction:column;align-items:center}.board-holder{width:min(clamp(560px,72vw,980px),64vh)}.board-holder svg{width:100%;height:auto;display:block}.chips{display:flex;gap:9px;margin-top:16px}.action-zone{height:68px;flex:none;display:flex;align-items:center;justify-content:center;gap:14px;position:relative}.act-btn{display:inline-flex;align-items:center;gap:9px;padding:10px 20px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:14.5px;font-weight:550;color:var(--ink2);transition:background .15s,border-color .15s}.act-btn:hover{background:#f4f5f7;color:var(--ink)}.act-btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}.act-btn.primary:hover{background:var(--brand-strong)}.act-btn kbd{opacity:0;transition:opacity .15s;margin-left:2px}.act-btn:hover kbd,.act-btn:focus-visible kbd{opacity:1}.act-btn .ic{width:17px;height:17px}.px-loading{position:absolute;inset:0;z-index:5;background:#fbfbfc;display:flex;align-items:center;justify-content:center}.breath{color:var(--brand);animation:breath 1.3s ease-in-out infinite}.breath .ic{width:34px;height:34px}@keyframes breath{0%,to{opacity:.3;transform:scale(.94)}50%{opacity:1;transform:scale(1.05)}}.hint-pop{position:absolute;bottom:74px;left:50%;transform:translate(-50%,6px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 34px #10182824;padding:10px;width:230px;z-index:20;opacity:0;transition:opacity .16s,transform .16s}.hint-pop.show{opacity:1;transform:translate(-50%)}.hint-pop-t{font-size:12.5px;font-weight:650;color:var(--muted);padding:3px 10px 7px;letter-spacing:.04em}.hint-opt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:9px;font-size:14px;font-weight:500;text-align:left;transition:background .13s}.hint-opt:hover{background:#f4f5f7}.hint-opt i{font-style:normal;width:22px;height:22px;border-radius:50%;flex:none;background:var(--brand-soft);color:var(--brand-strong);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:650}.mode-pop{position:absolute;top:62px;left:50%;transform:translate(-50%);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 34px #10182824;padding:12px 14px;width:300px;z-index:30;text-align:left}.mode-pop .hint-pop-t{padding:1px 4px 5px}.mode-pop .cfg-sec{margin:11px 0 7px}.mode-pop .cfg-sec:first-of-type{margin-top:0}.mode-seg{width:100%}.mode-seg button{flex:1;padding:6px 8px}.mode-seg button:disabled{opacity:.85;cursor:default}.mode-chips .chip-note{min-width:0;padding:6px 9px;font-size:12.5px}.mode-pop .btn.block{margin-top:16px}.chip-note:disabled{opacity:.38;cursor:not-allowed}.staff .st-line{stroke:#c6cad1;stroke-width:1.3;opacity:.75}.staff .clef{fill:var(--staff-ink);opacity:.9}.staff .sn{animation:noteIn .22s ease-out both}@keyframes noteIn{0%{opacity:0}to{opacity:1}}.staff .sn .head{fill:var(--staff-ink);stroke:var(--staff-ink);stroke-width:1.6;transition:fill .12s,stroke .12s}.staff .sn .stem{stroke:var(--staff-ink);stroke-width:2.1;transition:stroke .12s}.staff .sn .ledger{stroke:var(--staff-ink);stroke-width:1.4}.staff .sn .lab{font-size:13px;font-weight:650;fill:var(--ink2);text-anchor:middle}.staff .sn .lab.err{fill:var(--err)}.staff .sn.correct .head{fill:var(--brand);stroke:var(--brand);filter:drop-shadow(0 0 7px var(--glow))}.staff .sn.correct .stem,.staff .sn.correct .ledger{stroke:var(--brand)}.staff .sn.correct .lab{fill:var(--brand-strong)}.staff .sn.ghost{opacity:.9}.staff .sn.ghost .head{fill:#fff;stroke:var(--err)}.staff .sn.ghost .stem,.staff .sn.ghost .ledger{stroke:var(--err)}.staff .sn.future{opacity:.42}.staff .sn.done .head{fill:var(--brand);stroke:var(--brand);opacity:.85}.staff .sn.done .stem{stroke:var(--brand);opacity:.85}.staff .playhead{fill:var(--brand);opacity:.06}.board .bg{fill:#f7f8fa;stroke:#e8ebf0}.board .nut{fill:#aeb6c2}.board .wire{stroke:#d8dde4;stroke-width:2}.board .inlay{fill:#e4e7ec}.board .str{stroke:#a8afb9;stroke-linecap:round}.board .sname{font-size:12.5px;font-weight:650;fill:#6f7785;text-anchor:end}.board .sname .sopen{font-size:9.5px;font-weight:500;fill:#a3a9b3}.board .fnum{font-size:11.5px;fill:#9aa2af;text-anchor:middle}.board .pz-title{letter-spacing:.3em}.board .lane-hint{fill:#4f46e50b;stroke:#4f46e547;stroke-width:1.5;opacity:0;transition:opacity .25s}.board .lane-hint.show{opacity:1}.board .hs{fill:transparent}.board.live .hs{cursor:pointer}.board.live .hs:hover{fill:#171a1f0d}.board.live .hs-cell:hover,.board.live .hs-pluck:hover{fill:#4f46e50d}.board .plk-halo{fill:none;stroke:var(--brand);stroke-width:2;opacity:0}.board .plk-btn{fill:#fff;stroke:#d9dee6;stroke-width:1.5;transition:transform .15s ease,stroke .15s ease,fill .15s ease;transform-box:fill-box;transform-origin:center}.board .plk-txt{font-size:14px;font-weight:600;fill:#697282;text-anchor:middle;dominant-baseline:central;pointer-events:none;transition:fill .15s ease}.board .plk{transition:opacity .4s}.board .plk.ring .plk-btn{animation:plkPop .34s ease}.board .plk.ring .plk-halo{animation:plkHalo .5s ease-out}@keyframes plkPop{0%{transform:scale(.9)}55%{transform:scale(1.12)}to{transform:scale(1)}}@keyframes plkHalo{0%{opacity:.45}to{opacity:0}}.board .plk.st-correct .plk-btn{fill:var(--brand);stroke:var(--brand)}.board .plk.st-correct .plk-txt{fill:#fff}.board .plk.st-wrong .plk-btn{fill:var(--err-soft);stroke:var(--err)}.board .plk.st-wrong .plk-txt{fill:var(--err)}.board .plk.st-teach .plk-btn{fill:#fff;stroke:var(--brand);stroke-width:3;animation:teachPulse 1.5s ease-in-out infinite}.board .plk.st-teach .plk-txt{fill:var(--brand)}.board .plk.st-plain .plk-btn{fill:var(--brand-soft);stroke:var(--brand-soft2)}.board .plk.st-plain .plk-txt{fill:var(--brand-strong)}.board .plk.st-question .plk-btn{fill:#4f46e514;stroke:var(--brand);stroke-dasharray:4 3}.board .plk.st-question .plk-txt{fill:var(--brand-strong)}.board .plk.fade{opacity:.3}.board .str.vibrate{animation:plkVib .22s linear 2}@keyframes plkVib{0%,to{transform:translateY(0)}25%{transform:translateY(-2px)}75%{transform:translateY(2px)}}.board .mk{transition:opacity .4s}.board .mk-correct{fill:var(--brand);filter:drop-shadow(0 0 9px var(--glow));animation:pop .22s .04s cubic-bezier(.2,1.4,.4,1) forwards;transform-box:fill-box;transform-origin:center}@keyframes pop{0%{transform:scale(1)}to{transform:scale(1.16)}}.board .mk-wrong{fill:var(--err-soft);stroke:var(--err);stroke-width:2}.board .mk-wrong.fade{opacity:.25}.board .mk-teach{fill:#fff;stroke:var(--brand);stroke-width:2.6;animation:teachPulse 1.5s ease-in-out infinite}@keyframes teachPulse{0%,to{stroke-opacity:1}50%{stroke-opacity:.4}}.board .mk-plain{fill:var(--brand-soft);stroke:var(--brand-soft2);stroke-width:2}.board .mk-question{fill:#4f46e51a;stroke:var(--brand);stroke-width:2;opacity:.8}.board .mk-press{fill:var(--brand);stroke:#fff;stroke-width:4;filter:drop-shadow(0 3px 8px rgba(79,70,229,.35));animation:pop .18s cubic-bezier(.2,1.4,.4,1) forwards;transform-box:fill-box;transform-origin:center}.board .marks,.board .lane-hint,.board .str,.board .bg,.board .nut,.board .wire,.board .sname,.board .fnum,.board .inlay,.board .plk-btn,.board .plk-halo{pointer-events:none}.trainer-head{display:flex;justify-content:space-between;align-items:center;width:min(clamp(560px,72vw,980px),64vh);margin-bottom:6px}.th-left{display:flex;align-items:center;gap:8px}.th-label{font-size:13.5px;font-weight:700}.th-state{font-size:12.5px;color:var(--muted)}.th-release{border:0;background:transparent;color:var(--muted);padding:5px 9px;border-radius:10px;cursor:pointer;font-size:12.5px}.th-release:hover{background:#f0f1f5;color:var(--ink)}.th-right{width:39%;text-align:center;font-size:13.5px;font-weight:700;line-height:1.25}.th-right span{display:block;color:var(--muted);font-size:11px;font-weight:500;margin-top:1px}.ob{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#fbfbfc}.ob-skip{position:absolute;top:20px;right:24px;color:var(--muted);font-size:13.5px;padding:6px 12px;border-radius:8px}.ob-skip:hover{background:#f0f1f4;color:var(--ink)}.ob-inner{display:flex;flex-direction:column;align-items:center;text-align:center;animation:riseIn .3s ease-out;max-width:560px;padding:20px}@keyframes riseIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.ob-brand{margin-bottom:18px}.ob-h{font-size:34px;letter-spacing:-.01em;margin-bottom:12px}.ob-p{font-size:16.5px;color:var(--ink2);line-height:1.8;margin-bottom:26px}.ob-tip{font-size:15px;font-weight:650;color:var(--brand);margin-bottom:6px}.ob-staff{width:420px;max-width:92vw}.ob-staff svg{width:100%;height:auto}.ob-board{width:560px;max-width:94vw;margin-top:14px}.ob-board svg{width:100%;height:auto}.ob-msg{min-height:26px;margin-top:14px;color:var(--ink2);font-size:15px}.ob-acts{margin-top:12px}.ob-acts-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:12px}.ob-done-check{width:60px;height:60px;border-radius:50%;margin-bottom:18px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center}.ob-done-check .ic{width:28px;height:28px}.modal-overlay{position:fixed;inset:0;z-index:400;background:#0f11156b;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .16s;padding:20px}.modal-overlay.show{opacity:1}.modal-card{background:#fff;border-radius:var(--radius-card);padding:24px;width:400px;max-width:100%;box-shadow:0 20px 60px #10182838;transform:translateY(6px);transition:transform .16s}.modal-overlay.show .modal-card{transform:none}.modal-title{font-size:17px;font-weight:700;margin-bottom:8px}.modal-body{color:var(--ink2);font-size:14px}.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}.help-body p{margin-bottom:10px;font-size:13.5px}.kbd-row{display:inline-flex;align-items:center;gap:6px;margin-right:14px}.toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,8px);background:#2a2d33;color:#fff;font-size:13.5px;padding:9px 18px;border-radius:999px;z-index:500;opacity:0;transition:all .25s}.toast.show{opacity:1;transform:translate(-50%)}@media(max-width:1279px){.sidebar{width:72px;padding:20px 10px 16px}.brand{justify-content:center;padding-left:0}.brand-name{display:none}.nav-item{justify-content:center;padding:11px 0;position:relative}.nav-item .label{display:none}.nav-item:hover:after{content:attr(title);position:absolute;left:66px;top:50%;transform:translateY(-50%);background:#2a2d33;color:#fff;font-size:12.5px;padding:5px 10px;border-radius:7px;white-space:nowrap;z-index:60}.content{padding:36px 32px 80px}.learn-grid,.prog-grid{grid-template-columns:1fr 320px}}@media(max-width:1023px){.sidebar{display:none}.topnav{display:flex;position:sticky;top:0;z-index:50;align-items:center;gap:6px;background:#f7f8faeb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:10px 18px;border-bottom:1px solid var(--line)}.topnav .brand{padding:0 10px 0 0}.top-nav{display:flex;gap:2px;margin-left:auto}.tnav-item{padding:8px 11px;border-radius:var(--radius-btn);color:var(--ink2);display:inline-flex}.tnav-item:hover{background:#f0f1f4}.tnav-item.on{background:var(--brand-soft);color:var(--brand-strong)}.content{padding:26px 22px 70px}.learn-grid,.prog-grid,.free-grid,.quiz-grid{grid-template-columns:1fr}.lesson-detail,.note-detail,.preview-card{position:static}}@media(max-width:767px){h1{font-size:24px}.content{padding:20px 14px 60px}.stat-row{flex-direction:column;gap:14px}.stat-div{width:72%;height:1px}.metrics{grid-template-columns:1fr}.result-acts{flex-direction:column}.staff-holder{width:min(400px,92vw)}.board-holder,.trainer-head{width:100%}.th-label{font-size:12.5px}.th-state{display:none}.focus-title{font-size:12.5px}.chips{flex-wrap:wrap;justify-content:center}.act-btn kbd{display:none}.prompt.ok{font-size:18px}.free-grid .cfg-card{padding:16px}.range{width:130px}}
