*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
:root {
  --accent:#ff8c00; --accent2:#ffd700;
  --dark:#0d0d1a; --card:#141428; --card2:#1a1a35; --card3:#20203f;
  --text:#e8e8ff; --muted:#9999c0; --border:rgba(255,140,0,.18); --line:rgba(153,153,192,.22);
  --green:#22c55e; --red:#f43f5e; --cyan:#00e5ff; --amber:#f59e0b;
}
html { -webkit-text-size-adjust:100%; }
body { background:var(--dark); color:var(--text); font-family:'Poppins',sans-serif; min-height:100vh; line-height:1.55; overflow-x:hidden; }
.stars { position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse at 20% 50%,#1a0a3d 0%,transparent 60%),
             radial-gradient(ellipse at 80% 20%,#0d1a3d 0%,transparent 50%), var(--dark); }
.page-main { position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:48px 28px 80px; }
.breadcrumb { color:var(--muted); font-size:.82rem; margin-bottom:22px; }
.breadcrumb a { color:var(--accent); text-decoration:none; }
a { color:var(--accent); }
button { font-family:inherit; }

.hero { background:var(--card); border:1px solid var(--border); border-radius:18px; padding:28px 30px; margin-bottom:26px; }
.hero h1 { font-family:'Orbitron',sans-serif; font-size:1.6rem; font-weight:900; line-height:1.25; margin-bottom:10px;
  background:linear-gradient(135deg,#fff 0%,var(--accent) 60%,var(--accent2) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero p { color:var(--muted); font-size:.93rem; max-width:820px; }
.hero .stats { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.hero .stats div { background:var(--card2); border-radius:12px; padding:10px 14px; font-size:.8rem; color:var(--muted); min-width:120px; }
.hero .stats b { display:block; color:var(--text); font-size:1.1rem; }

.loading, .error { color:var(--muted); padding:30px 0; }
.error { color:#ffb4b4; }

/* ---------------------------------------------------- browser */
.chap { background:var(--card); border:1px solid var(--border); border-radius:16px; margin-bottom:14px; overflow:hidden; }
.chap > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; padding:18px 20px; }
.chap > summary::-webkit-details-marker { display:none; }
.chap > summary:hover { background:rgba(255,140,0,.05); }
.chap .num { flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-weight:700;
  background:linear-gradient(135deg,var(--accent),#ff5e00); color:#1a0d00; }
.chap .ct { flex:1; min-width:0; }
.chap .ct h2 { font-size:1.02rem; line-height:1.3; }
.chap .ct p { color:var(--muted); font-size:.8rem; }
.chap .chev { flex:none; color:var(--muted); transition:transform .2s; }
.chap[open] .chev { transform:rotate(90deg); }
.chap .body { padding:4px 20px 18px; }
.sec h3 { font-size:.82rem; color:var(--accent); letter-spacing:.04em; text-transform:uppercase; margin:14px 0 8px; }
.topics { list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:8px; }
.topic { display:flex; align-items:flex-start; gap:10px; background:var(--card2); border:1px solid transparent; border-radius:12px;
  padding:11px 13px; color:inherit; text-decoration:none; transition:border-color .15s; height:100%; }
.topic:hover, .topic:focus-visible { border-color:var(--accent); outline:none; }
.topic .tid { flex:none; font-size:.72rem; color:var(--muted); font-variant-numeric:tabular-nums; padding-top:2px; min-width:38px; }
.topic .tt { flex:1; min-width:0; font-size:.86rem; line-height:1.4; }
.topic .tt small { display:block; color:var(--muted); font-size:.72rem; margin-top:3px; }
.badge { display:inline-block; font-size:.66rem; font-weight:700; padding:1px 8px; border-radius:999px; letter-spacing:.03em; vertical-align:middle; white-space:nowrap; }
.badge.dated { background:rgba(245,158,11,.12); color:var(--amber); border:1px solid rgba(245,158,11,.4); }
.badge.mains { background:rgba(0,229,255,.08); color:var(--cyan); border:1px solid rgba(0,229,255,.3); }
.badge.done { background:rgba(34,197,94,.12); color:var(--green); border:1px solid rgba(34,197,94,.35); }
.badge.lvl { background:rgba(153,153,192,.12); color:var(--muted); border:1px solid var(--line); text-transform:capitalize; }
.prog { height:4px; border-radius:4px; background:rgba(153,153,192,.18); margin-top:6px; overflow:hidden; }
.prog i { display:block; height:100%; background:var(--green); }

/* ----------------------------------------------------- player */
.p-head { background:var(--card); border:1px solid var(--border); border-radius:18px; padding:22px 24px; margin-bottom:16px; }
.p-head .back { display:inline-block; font-size:.84rem; text-decoration:none; margin-bottom:10px; }
.p-head .crumbs { color:var(--muted); font-size:.78rem; }
.p-head h1 { font-size:1.3rem; line-height:1.3; margin:4px 0 6px; }
.p-head .dated-note { margin-top:8px; font-size:.8rem; color:var(--amber); }
.controls { display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; margin-top:14px; }
.ctl-label { font-size:.75rem; color:var(--muted); margin-right:6px; }
.seg { display:inline-flex; flex-wrap:wrap; gap:4px; background:var(--card2); border-radius:999px; padding:3px; }
.seg button { border:0; background:transparent; color:var(--muted); font-size:.8rem; padding:5px 12px; border-radius:999px; cursor:pointer; }
.seg button[aria-pressed="true"] { background:var(--accent); color:#1a0d00; font-weight:600; }
.seg button:focus-visible { outline:2px solid var(--accent2); }
.linkbtn { border:1px solid var(--line); background:transparent; color:var(--muted); font-size:.78rem; padding:5px 12px; border-radius:999px; cursor:pointer; }
.linkbtn:hover { color:var(--text); border-color:var(--muted); }
.scorebar { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:.82rem; color:var(--muted); margin:4px 2px 14px; }
.scorebar b { color:var(--text); }

.qcard { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px 22px; margin-bottom:14px; }
.qcard .qmeta { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:.78rem; color:var(--muted); margin-bottom:10px; }
.qcard .qtext { font-size:.97rem; line-height:1.7; overflow-wrap:anywhere; }
.qtext br + br { display:none; }
.opts { list-style:none; display:grid; gap:8px; margin-top:14px; }
.opt { width:100%; text-align:left; display:flex; gap:10px; align-items:flex-start; background:var(--card2); border:1px solid var(--line);
  color:var(--text); border-radius:12px; padding:10px 12px; font-size:.9rem; line-height:1.55; cursor:pointer; }
.opt:hover:not(:disabled) { border-color:var(--accent); }
.opt:focus-visible { outline:2px solid var(--accent2); outline-offset:1px; }
.opt:disabled { cursor:default; }
.opt .L { flex:none; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-weight:700; font-size:.8rem; background:var(--card3); color:var(--muted); }
.opt .ot { flex:1; min-width:0; overflow-wrap:anywhere; }
.opt.right { border-color:rgba(34,197,94,.7); background:rgba(34,197,94,.1); }
.opt.right .L { background:var(--green); color:#04210f; }
.opt.wrong { border-color:rgba(244,63,94,.7); background:rgba(244,63,94,.1); }
.opt.wrong .L { background:var(--red); color:#2a0610; }
.verdict { margin-top:12px; font-weight:600; font-size:.9rem; }
.verdict.ok { color:var(--green); }
.verdict.no { color:#ff8095; }
.sol { margin-top:10px; background:rgba(0,229,255,.05); border:1px solid rgba(0,229,255,.22); border-left:4px solid var(--cyan); border-radius:10px;
  padding:12px 14px; font-size:.88rem; line-height:1.75; color:#d9d9f5; overflow-wrap:anywhere; }
.sol h4 { font-size:.8rem; color:var(--cyan); letter-spacing:.05em; text-transform:uppercase; margin-bottom:4px; }
.nav { display:flex; justify-content:space-between; gap:10px; margin-top:16px; flex-wrap:wrap; }
.btn { border:1px solid var(--border); background:var(--card2); color:var(--text); padding:9px 16px; border-radius:999px; cursor:pointer; font-size:.86rem; text-decoration:none; display:inline-block; }
.btn:hover:not(:disabled) { border-color:var(--accent); }
.btn:disabled { opacity:.4; cursor:default; }
.btn.primary { background:linear-gradient(135deg,var(--accent),#ff5e00); color:#1a0d00; font-weight:600; border-color:transparent; }

.summary { background:var(--card); border:1px solid var(--border); border-radius:18px; padding:24px; text-align:center; margin-bottom:16px; }
.summary .big { font-size:2.4rem; font-weight:700; color:var(--accent2); line-height:1.1; }
.summary p { color:var(--muted); font-size:.88rem; margin-top:6px; }
.summary table { margin:14px auto 0; border-collapse:collapse; font-size:.84rem; }
.summary th, .summary td { border:1px solid var(--line); padding:5px 12px; }
.summary th { color:var(--muted); font-weight:500; }
.summary .nav { justify-content:center; }

/* text produced by tex.js */
.qtbl { border-collapse:collapse; margin:8px 0; font-size:.86rem; }
.qtbl th, .qtbl td { border:1px solid rgba(153,153,192,.4); padding:4px 10px; text-align:center; }
.qtbl th { background:var(--card3); }
.tbl-wrap { overflow-x:auto; max-width:100%; }
.tex-center { text-align:center; }
.tex-center .tbl-wrap { display:flex; justify-content:center; }
.tex-center .qtbl { margin:8px auto; }
.blank { display:inline-block; width:4.5em; border-bottom:1.5px solid currentColor; margin:0 .2em; vertical-align:-2px; }
.hsp { display:inline-block; width:1em; }
code { font-family:Consolas,'Courier New',monospace; font-size:.92em; background:rgba(153,153,192,.12); padding:0 .25em; border-radius:4px; overflow-wrap:anywhere; }
mjx-container { max-width:100%; overflow-x:auto; overflow-y:hidden; }
mjx-container[display="true"] { margin:.4em 0 !important; }

.note { margin-top:30px; color:var(--muted); font-size:.82rem; }

@media (max-width:600px) {
  .page-main { padding:32px 16px 60px; }
  .hero { padding:20px; } .hero h1 { font-size:1.25rem; }
  .chap > summary { padding:14px; gap:10px; }
  .chap .body { padding:2px 14px 14px; }
  .topics { grid-template-columns:1fr; }
  .p-head { padding:18px 16px; } .p-head h1 { font-size:1.1rem; }
  .qcard { padding:16px 14px; }
}

.hero p.access { margin-top:12px; font-size:.86rem; }
.hero p.access a { color:var(--accent, #ff8c00); }