:root{--bg:#05060f;--cy:#22d3ee;--in:#818cf8;--em:#10b981;--gold:#fbbf24;--pk:#f472b6;--tx:#e2e8f0;--mut:#64748b}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(900px 500px at 15% -10%,#1e1b4b66,transparent),radial-gradient(800px 500px at 100% 10%,#0e749033,transparent),var(--bg);color:var(--tx);font-family:'Segoe UI',system-ui,sans-serif;min-height:100vh}
body:before{content:"";position:fixed;inset:0;background-image:linear-gradient(#22d3ee0a 1px,transparent 1px),linear-gradient(90deg,#22d3ee0a 1px,transparent 1px);background-size:40px 40px;pointer-events:none}
a{color:inherit;text-decoration:none}
.wrap{position:relative;max-width:1180px;margin:0 auto;padding:20px 16px 60px}
.glass{background:#0f172acc;border:1px solid #22d3ee33;border-radius:16px;backdrop-filter:blur(12px)}
h1{margin:0;font-size:clamp(1.4rem,4vw,2.2rem);background:linear-gradient(90deg,var(--cy),var(--in),var(--pk));-webkit-background-clip:text;color:transparent;font-weight:800}
.hero{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding:20px;margin:16px 0}
.pbar{height:8px;background:#1e293b;border-radius:9px;overflow:hidden;min-width:220px;margin-top:6px}
.pbar i{display:block;height:100%;background:linear-gradient(90deg,var(--cy),var(--em));box-shadow:0 0 12px var(--cy);transition:width .6s}
.pct{font-size:2.2rem;font-weight:800;color:var(--cy);text-shadow:0 0 16px var(--cy)}
.tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:14px}
.tab{flex:0 0 auto;background:#0f172a;border:1px solid #334155;color:var(--tx);border-radius:12px;padding:8px 14px;cursor:pointer;text-align:left;font-weight:700}
.tab span{display:block;font-size:.65rem;color:var(--mut);font-weight:500}
.tab.on{border-color:var(--cy);box-shadow:0 0 14px #22d3ee55}
.lesson-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.card{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px;min-height:176px;background:#0b1224;border:1.5px solid #1e293b;border-radius:14px;transition:.2s}
.card.open:hover,.card.cleared:hover,.card.current:hover{transform:translateY(-3px)}
.card .num{position:absolute;top:8px;left:10px;font-weight:800;color:var(--mut);font-size:.85rem}
.card .lk{position:absolute;top:8px;right:10px;color:var(--mut);font-size:.75rem}
.badge{margin-top:18px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:1.5rem;color:var(--c);border:2px solid var(--c);box-shadow:0 0 14px var(--c),inset 0 0 12px #0008;background:#0008}
.b-intro{--c:#22d3ee}.b-new{--c:#fbbf24}.b-review{--c:#a78bfa}.b-timed{--c:#f472b6}.b-arcade{--c:#a3e635}.b-boss{--c:#f59e0b}
.sub{text-align:center;font-size:.68rem;color:#94a3b8;line-height:1.25;flex:1;word-break:break-word}.sub b{display:block;color:var(--tx);font-size:.74rem}
.stars{font-size:.95rem;letter-spacing:2px;color:#334155}.stars .lit,.lit{color:var(--gold);text-shadow:0 0 8px var(--gold)}
.card.locked{opacity:.4;cursor:not-allowed;filter:grayscale(.6)}
.card.current{border-color:var(--cy);animation:pulse 1.6s infinite;box-shadow:0 0 18px #22d3ee66}
.card.open{border-color:#6366f1;box-shadow:0 0 10px #6366f144}
.card.cleared{border-color:var(--em);box-shadow:0 0 10px #10b98133}
@keyframes pulse{50%{box-shadow:0 0 30px #22d3eecc;border-color:var(--in)}}
.btn{background:#0f172a;border:1px solid var(--cy);color:var(--cy);border-radius:10px;padding:10px 18px;font-weight:700;cursor:pointer}
.btn:hover{background:var(--cy);color:#001}.btn.alt{border-color:#475569;color:#cbd5e1}
/* arena */
.crumb{font-size:.8rem;color:var(--mut);margin-bottom:6px}.crumb a{color:var(--cy)}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:12px 0}
.stat{padding:10px;text-align:center}.stat b{display:block;font-size:1.5rem;color:var(--cy)}.stat small{color:var(--mut);font-size:.65rem;text-transform:uppercase;letter-spacing:1px}
.textbox{position:relative;height:150px;overflow:hidden;padding:18px;font:1.6rem/2.4rem 'Courier New',monospace;cursor:text}
.textbox>div{position:relative;height:100%;overflow:hidden;word-break:break-word}
#text span{color:#64748b;padding:1px 0}#text .ok{color:var(--em)}#text .bad{color:#f87171;text-decoration:line-through;background:#f8717122}
#text .cur{color:#fff;border-bottom:3px solid var(--cy);background:#22d3ee22}
#mi{position:absolute;opacity:0;width:1px;height:1px}
.kb{margin:14px auto;max-width:760px;padding:12px}
.kr{display:flex;gap:4px;margin-bottom:4px;justify-content:center}
.key{flex:1;min-width:0;height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0b1224;border:1px solid #334155;border-bottom:3px solid var(--fc,#334155);border-radius:7px;font-size:.78rem;color:#cbd5e1;position:relative}
.key small{font-size:.55rem;color:var(--mut);line-height:.8}.key.w2{flex:2.2}.key.space{flex:none;width:50%}
.key.on{background:var(--fc,#22d3ee);color:#001;box-shadow:0 0 18px var(--fc,#22d3ee);transform:translateY(2px)}.key.on small{color:#001}
#sL.on,#sR.on{--fc:#f472b6}
.hands{display:flex;justify-content:center;gap:24px;max-width:520px;margin:0 auto}
.hand{width:48%}.palm{fill:#0b1224;stroke:#334155}.fg{fill:#0f172a;stroke:var(--fc);stroke-width:2}
.fg.on{fill:var(--fc);filter:drop-shadow(0 0 8px var(--fc))}
.modal{position:fixed;inset:0;background:#000b;display:none;place-items:center;z-index:50;padding:16px}.modal.show{display:grid}
.mbox{max-width:420px;width:100%;padding:28px;text-align:center;animation:pop .35s}@keyframes pop{from{transform:scale(.8);opacity:0}}
.mstars{font-size:2.4rem;letter-spacing:4px;color:#334155;margin:8px 0}
.mrow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
@media(max-width:1100px){.lesson-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:800px){.lesson-grid{grid-template-columns:repeat(3,1fr)}.stats{grid-template-columns:repeat(3,1fr)}.textbox{font-size:1.2rem;line-height:2rem}}
@media(max-width:560px){.lesson-grid{grid-template-columns:repeat(2,1fr)}.key{height:30px;font-size:.6rem}.key small{display:none}.hands{display:none}}