:root{color-scheme:dark;--bg:#0b0e14;--panel:#131722;--panel2:#1a1f2e;--line:#2a2e39;--ink:#d1d4dc;--soft:#8b93a7;--hi:#fff;--up:#26a69a;--dn:#ef5350;--info:#5b9cf6;--warn:#f5a623;--acc:#b388ff;--mut:#8b93a7}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--info)}
h1,h2,h3{color:var(--hi);line-height:1.2;letter-spacing:-.01em}
h1{font-size:clamp(1.9rem,4.5vw,2.8rem);margin:.2em 0 .3em}
h2{font-size:1.35rem;margin:2.2em 0 .5em}
p{margin:0 0 .9em}
.wrap{max-width:980px;margin:0 auto;padding:0 18px}
header.top{border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:5}
header.top .wrap{display:flex;align-items:center;gap:16px;min-height:56px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:var(--hi);text-decoration:none;font-weight:700;font-size:1.05rem}
.brand svg{width:26px;height:26px}
.brand small{color:var(--soft);font-weight:500}
nav.m{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
nav.m a{color:var(--ink);text-decoration:none;padding:6px 10px;border-radius:6px;font-size:.92rem}
nav.m a:hover,nav.m a[aria-current]{background:var(--panel2);color:var(--hi)}
main{padding:28px 0 56px}
.kick{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:99px;border:1px solid var(--line);color:var(--soft)}
.kick.ict{color:var(--acc);border-color:#4a3a73}.kick.base{color:var(--info);border-color:#2d4a7a}
.lead{font-size:1.15rem;color:#e5e8ee}
.hero{padding:20px 0 6px}
.risk{border:1px solid #6b4a14;background:#1d1609;color:#ecd9b0;border-radius:10px;padding:14px 16px;font-size:.95rem;margin:24px 0}
.risk b{color:#ffcf70}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;margin:14px 0}
.card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 16px 14px;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.card:hover,.card:focus-visible{border-color:var(--info);transform:translateY(-2px)}
.card .nb{font-size:.8rem;color:var(--soft);font-weight:700}
.card h3{margin:.2em 0 .35em;font-size:1.12rem}
.card p{margin:0;font-size:.93rem;color:var(--soft)}
.card svg{display:block;width:100%;height:46px;margin-bottom:8px}
/* player */
.pl{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 10px 12px;margin:20px 0}
.pl:focus-visible{outline:2px solid var(--info)}
.stage svg{display:block;width:100%;height:auto;background:#0e1220;border-radius:8px}
.grid line{stroke:#1d2333;stroke-width:1}
.ax{fill:var(--soft);font-size:11px;font-variant-numeric:tabular-nums}
.tk{stroke:var(--soft)}
.cd .hit{fill:transparent}
.cd .wk{stroke:var(--up);stroke-width:1.4}.cd .bd{fill:var(--up)}
.cd.dn .wk{stroke:var(--dn)}.cd.dn .bd{fill:var(--dn)}
.cd.sel .bd{stroke:#fff;stroke-width:1.5}
.cd.new{animation:cin .38s ease-out both}
@keyframes cin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mk.new{animation:min .5s ease-out both}
@keyframes min{from{opacity:0}to{opacity:1}}
.c-up{--mc:var(--up)}.c-dn{--mc:var(--dn)}.c-info{--mc:var(--info)}.c-warn{--mc:var(--warn)}.c-acc{--mc:var(--acc)}.c-mut{--mc:var(--mut)}
.ln{stroke:var(--mc);stroke-width:1.6;fill:none}.ln.dash{stroke-dasharray:5 4}.ln.thick{stroke-width:2.4}
.ah{fill:var(--mc)}
.dot{fill:var(--mc);stroke:#0e1220;stroke-width:1.5}
.zn{fill:var(--mc);fill-opacity:.16;stroke:var(--mc);stroke-opacity:.7;stroke-width:1}
.vb{fill:var(--mc);fill-opacity:.07}
.lbl{fill:var(--mc);font-size:12.5px;font-weight:600;paint-order:stroke;stroke:#0e1220;stroke-width:4px;stroke-linejoin:round}
.cap{min-height:5.4em;padding:12px 6px 4px;font-size:1.02rem;color:#e5e8ee}
.ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 4px 0}
.ctl button{background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 14px;font:inherit;font-size:.93rem;cursor:pointer;min-height:40px}
.ctl button:hover:not(:disabled){border-color:var(--info);color:var(--hi)}
.ctl button.pri{background:var(--info);border-color:var(--info);color:#06101f;font-weight:700}
.ctl button:disabled{opacity:.4;cursor:default}
.ctl .stp{margin-left:auto;color:var(--soft);font-size:.88rem}
.inspect{margin:8px 4px 0;font-size:.93rem;color:var(--soft);min-height:1.6em}
.inspect b{color:var(--hi);font-variant-numeric:tabular-nums}.inspect b.u{color:var(--up)}.inspect b.d{color:var(--dn)}
/* lesson */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:720px){.cols{grid-template-columns:1fr}}
.box{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px 18px 10px}
.box h2{margin-top:.8em;font-size:1.1rem}
.box ul{padding-left:1.1em;margin:.4em 0 .6em}.box li{margin:.45em 0}
.note{border-left:3px solid var(--acc);background:var(--panel);padding:10px 14px;border-radius:0 8px 8px 0;font-size:.95rem;color:#c9cdd8;margin:20px 0}
.quiz{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 18px 16px;margin:22px 0}
.quiz h2{margin:.2em 0 .5em;font-size:1.1rem}
.quiz .q{color:var(--hi);margin-bottom:.6em}
.opt{display:block;width:100%;text-align:left;background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:6px 0;font:inherit;font-size:.97rem;cursor:pointer}
.opt:hover:not(:disabled){border-color:var(--info)}
.opt.ok{border-color:var(--up);background:#0f2a27}.opt.ko{border-color:var(--dn);background:#2c1416}
.explain{margin:.8em 0 0;font-size:.97rem}.explain .verdict{font-weight:700;color:var(--hi)}
.pn{display:flex;justify-content:space-between;gap:12px;margin-top:30px;flex-wrap:wrap}
.pn a{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 14px;text-decoration:none;color:var(--ink);font-size:.95rem}
.pn a:hover{border-color:var(--info)}
footer{border-top:1px solid var(--line);background:var(--panel);padding:22px 0 30px;color:var(--soft);font-size:.86rem}
footer p{margin:0 0 .6em}
footer a{color:var(--soft)}
.crumb{font-size:.9rem;margin-bottom:6px}.crumb a{color:var(--soft);text-decoration:none}.crumb a:hover{color:var(--hi)}
@media(max-width:560px){body{font-size:16px}.ctl button{padding:8px 10px}.ctl .stp{width:100%;margin:0}nav.m{margin-left:0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}