:root{--background:#f6f4ec;--panel:#fff;--panel-line:#d8d4c4;--ink:#1c2b46;--ink-dim:#6b6b6b;--accent:#2f7a52;--accent-ink:#fff;--danger:#b8452f;--font-display:-apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}@media (prefers-color-scheme:dark){:root{--background:#14171c;--panel:#1c2028;--panel-line:#2c3038;--ink:#eef1f4;--ink-dim:#9aa0aa;--panel-line-strong:#3a3f4a}}html{height:100%}html,body{max-width:100vw;overflow-x:hidden}body{min-height:100%;color:var(--ink);background:var(--background);font-family:var(--font-display), Arial, Helvetica, sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}button{cursor:pointer;font-family:inherit}.wrap{flex-direction:column;gap:20px;max-width:920px;margin:0 auto;padding:20px 18px 60px;display:flex}.loading-screen{text-align:center;color:var(--ink-dim);padding-top:80px}.topbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand h1{letter-spacing:.01em;font-size:clamp(20px,5vw,26px)}.subtitle{color:var(--ink-dim);font-size:13px}.mascot svg{display:block}.stats{gap:18px;display:flex}.stat{font-variant-numeric:tabular-nums;flex-direction:column;align-items:center;display:flex}.stat .n{font-size:20px;font-weight:700}.stat .label{color:var(--ink-dim);text-transform:uppercase;letter-spacing:.04em;font-size:11px}.theme-select{border:1px solid var(--panel-line);background:var(--panel);color:var(--ink);border-radius:8px;padding:8px 10px;font-size:13px}.stage-tabs{gap:6px;display:flex}.stage-tab{border:1px solid var(--panel-line);background:var(--panel);color:var(--ink-dim);border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600}.stage-tab.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.strand{border-left:4px solid;flex-direction:column;gap:10px;padding-left:14px;display:flex}.strand h2{text-transform:uppercase;letter-spacing:.04em;font-size:15px}.topic-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;display:grid}.topic-card{text-align:left;background:var(--panel);border:1px solid var(--panel-line);border-radius:12px;flex-direction:column;gap:4px;padding:14px;display:flex;position:relative}.topic-card.mastered{border-color:var(--accent)}.topic-name{font-size:14px;font-weight:700}.topic-brief{color:var(--ink-dim);font-size:12px;line-height:1.4}.badge-pill{background:var(--accent);color:var(--accent-ink);border-radius:999px;align-self:flex-start;padding:2px 8px;font-size:11px}.badges{flex-direction:column;gap:8px;display:flex}.badge-row{flex-wrap:wrap;gap:8px;display:flex}.reset-btn{color:var(--ink-dim);align-self:flex-start;font-size:12px}.primary{background:var(--accent);color:var(--accent-ink);border:none;border-radius:10px;padding:12px 18px;font-size:14px;font-weight:700}.primary:disabled{opacity:.5;cursor:not-allowed}.ghost{border:1px solid var(--panel-line);color:var(--ink-dim);background:0 0;border-radius:10px;padding:10px 14px;font-size:13px}.qcard{background:var(--panel);border:1px solid var(--panel-line);border-radius:14px;flex-direction:column;gap:16px;padding:24px;display:flex}.breadcrumb{color:var(--ink-dim);font-size:11.5px;font-family:var(--font-mono);justify-content:space-between;display:flex}.mascot-row{justify-content:center;display:flex}.gate-card{text-align:center;align-items:center}.gate-question{font-size:16px}.gate-actions{gap:10px;display:flex}.qtext{font-family:var(--font-mono);white-space:pre-wrap;font-size:17px;line-height:1.55}.choices{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;display:grid}.choice{border:1px solid var(--panel-line);background:var(--panel);color:var(--ink);font-size:14px;font-family:var(--font-mono);border-radius:10px;padding:12px}.choice.selected{border-color:var(--accent)}.choice.correct{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 15%, var(--panel))}.choice.incorrect{border-color:var(--danger);background:color-mix(in srgb, var(--danger) 15%, var(--panel))}.answer-display{font-family:var(--font-mono);border:1px solid var(--panel-line);background:var(--background);border-radius:10px;min-height:1.4em;padding:10px 14px;font-size:22px}.keypad{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.key{border:1px solid var(--panel-line);background:var(--panel);color:var(--ink);font-size:16px;font-family:var(--font-mono);border-radius:10px;padding:14px 0}.key-wide{grid-column:span 2;font-size:13px}.key:disabled{opacity:.5}.feedback{border-radius:10px;flex-direction:column;gap:4px;padding:14px;display:flex}.feedback.ok{background:color-mix(in srgb, var(--accent) 12%, var(--panel));border:1px solid var(--accent)}.feedback.oops{background:color-mix(in srgb, var(--danger) 12%, var(--panel));border:1px solid var(--danger)}.feedback .explain{color:var(--ink-dim);font-size:13px}.loading{color:var(--ink-dim);align-items:center;gap:10px;font-size:13px;display:flex}.spinner{border:2px solid var(--panel-line);border-top-color:var(--accent);border-radius:50%;width:16px;height:16px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.error-box{color:var(--danger);flex-direction:column;align-items:flex-start;gap:10px;font-size:13px;display:flex}.teach-card{border:1px dashed var(--panel-line);border-radius:10px;flex-direction:column;gap:8px;padding:14px;font-size:13px;display:flex}.teach-card h3{text-transform:uppercase;letter-spacing:.04em;color:var(--ink-dim);font-size:13px}.teach-card .worked{font-family:var(--font-mono);white-space:pre-wrap;background:var(--background);border-radius:8px;padding:10px}