:root{--bg:#0f1b2d;--card:#fff;--ink:#1d2733;--acc:#1e6fd9;--ok:#1a8f4c;--bad:#c62f2f;--mut:#6b7785;--soft:#eef3fa}
*{box-sizing:border-box}body{margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--soft);color:var(--ink)}
header{background:var(--bg);color:#fff;display:flex;align-items:center;gap:1rem;padding:.6rem 1rem;position:sticky;top:0;z-index:9;flex-wrap:wrap}
.brand{color:#fff;font-weight:700;text-decoration:none;font-size:1.1rem}nav{display:flex;gap:.2rem;flex-wrap:wrap}nav a{color:#cfe0ff;text-decoration:none;padding:.3rem .6rem;border-radius:6px}nav a:hover,nav a.on{background:#24406b;color:#fff}
#menuBtn{display:none;margin-left:auto;background:none;border:0;color:#fff;font-size:1.5rem}
@media(max-width:760px){#menuBtn{display:block}nav{display:none;width:100%;flex-direction:column}nav.open{display:flex}}
main{max-width:980px;margin:1rem auto;padding:0 1rem}footer{max-width:980px;margin:2rem auto;padding:1rem;font-size:.85rem;color:var(--mut)}
.card{background:var(--card);border-radius:12px;padding:1.2rem 1.4rem;margin:1rem 0;box-shadow:0 1px 4px #0001}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}.grid .card{margin:0}
h1,h2,h3{line-height:1.25}h1{font-size:1.7rem}.mut{color:var(--mut)}
.btn{display:inline-block;background:var(--acc);color:#fff;border:0;border-radius:8px;padding:.55rem 1rem;font-size:1rem;cursor:pointer;text-decoration:none;margin:.2rem .2rem .2rem 0}.btn.sec{background:#e3eaf5;color:var(--ink)}.btn:disabled{opacity:.5}
.bar{height:8px;background:#dde5f0;border-radius:4px;overflow:hidden}.bar>i{display:block;height:100%;background:var(--ok)}
.opt{display:block;width:100%;text-align:left;padding:.7rem 1rem;margin:.4rem 0;border:2px solid #d5deea;border-radius:8px;background:#fff;font-size:1rem;cursor:pointer}
.opt:hover{border-color:var(--acc)}.opt.sel{border-color:var(--acc);background:#eaf2ff}.opt.right{border-color:var(--ok);background:#e8f7ee}.opt.wrong{border-color:var(--bad);background:#fdecec}
.exp{background:#f6f8fb;border-left:4px solid var(--acc);padding:.6rem 1rem;margin-top:.5rem}.ref{font-size:.85rem;color:var(--mut)}
.box{background:#fff8e1;border-left:4px solid #e0a800;padding:.6rem 1rem;margin:1rem 0}.tip{background:#e8f4ff;border-left:4px solid var(--acc);padding:.6rem 1rem;margin:1rem 0}
table{border-collapse:collapse;width:100%;margin:1rem 0;font-size:.95rem}td,th{border:1px solid #d5deea;padding:.4rem .6rem;text-align:left;vertical-align:top}th{background:#eef3fa}
.tbl{overflow-x:auto}svg{max-width:100%;height:auto}code,.mono{font-family:ui-monospace,Consolas,monospace;background:#eef3fa;padding:.1rem .3rem;border-radius:4px}
.flash{min-height:220px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:1.2rem;cursor:pointer}
.pill{display:inline-block;font-size:.75rem;padding:.1rem .5rem;border-radius:99px;background:#e3eaf5;margin-right:.3rem}.pill.ok{background:#d4f2df}
.timer{font-weight:700;font-family:monospace;font-size:1.2rem}details{margin:.5rem 0;padding:.5rem;background:#f6f8fb;border-radius:8px}summary{cursor:pointer;font-weight:600}