:root{
  --paper:#000000; --surface:#0E0F12; --surface2:#191B20; --ink:#F3F5F8; --soft:#8B94A1;
  --line:#1F2228; --line-hard:#2E3339; --body:#C3CAD4; --on-ink:#0A0B0D;
  --py:#4C7DFF; --c:#E2554B; --cpp:#12A085;
  --ok:#3BC08C; --no:#F0604F;
  --code-bg:#08090B; --code-fg:#D7DEE8;
  --mono:ui-monospace,SFMono-Regular,"JetBrains Mono","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{line-height:1.2; letter-spacing:-.02em; margin:0}
p{margin:0}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
a{color:inherit}
code,pre,.mono{font-family:var(--mono)}
:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

.wrap{max-width:1120px; margin:0 auto; padding:0 24px}

/* ---------- topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:40; background:rgba(0,0,0,.72);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex; align-items:center; gap:28px; height:62px}
.brand{font-family:var(--mono); font-size:15px; font-weight:600; letter-spacing:-.01em; text-decoration:none}
.brand b{font-weight:600}
.brand .dot{display:inline-block; width:7px; height:7px; background:var(--ink); margin-right:9px; vertical-align:1px}
.navlinks{display:flex; gap:22px; margin-left:auto; font-size:14px}
.navlinks a{text-decoration:none; color:var(--soft); padding:2px 0; border-bottom:1px solid transparent}
.navlinks a:hover{color:var(--ink); border-bottom-color:var(--ink)}
.hud{display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:12.5px}
.hud .lvl{color:var(--soft)}
.hud .xp{font-weight:600}
@media(max-width:720px){
  .navlinks{display:none}
  .topbar .wrap{gap:14px}
}

/* ---------- hero ---------- */
.hero{padding:76px 0 64px; border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(2rem,5.2vw,3.4rem); font-weight:800; max-width:17ch}
.hero .lede{margin-top:20px; color:var(--soft); max-width:62ch; font-size:1.03rem}
.demo{display:grid; grid-template-columns:1.15fr 1fr; gap:0; margin-top:44px; border:1px solid var(--line-hard)}
.demo .pane{min-width:0}
.demo .pane + .pane{border-left:1px solid var(--line-hard)}
.pane-head{
  display:flex; align-items:center; gap:10px; padding:9px 14px;
  border-bottom:1px solid var(--line); background:var(--surface);
  font-family:var(--mono); font-size:12px; color:var(--soft);
}
.pane-head .sq{width:8px; height:8px; border:1px solid currentColor}
.pane-body{margin:0; padding:16px 14px; min-height:186px; overflow:auto; font-size:13px; line-height:1.75}
.pane-body.code{background:var(--code-bg); color:var(--code-fg)}
.pane-body.out{background:var(--surface); color:var(--ink); white-space:pre-wrap}
.gutter{color:#4A5768; user-select:none; display:inline-block; width:2.2em; text-align:right; margin-right:14px}
.kw{color:#7FB3FF} .st{color:#8BD9A8} .nu{color:#F0A868} .cm{color:#6B7A8D}
.out .prompt{color:var(--soft)}
.cursor{display:inline-block; width:7px; height:14px; background:var(--ink); vertical-align:-2px; animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.btn{
  display:inline-flex; align-items:center; gap:9px; padding:11px 20px;
  border:1px solid var(--ink); font-size:14.5px; font-weight:600; text-decoration:none;
}
.btn.solid{background:var(--ink); color:var(--on-ink)}
.btn.solid:hover{background:#D6DBE2}
.btn.ghost:hover{background:var(--surface)}
.btn[disabled]{opacity:.4; cursor:not-allowed}
@media(max-width:820px){
  .demo{grid-template-columns:1fr}
  .demo .pane + .pane{border-left:none; border-top:1px solid var(--line-hard)}
}

/* ---------- sections ---------- */
section{padding:64px 0; border-bottom:1px solid var(--line)}
.sec-head h2{font-size:1.6rem; font-weight:800}
.sec-head p{margin-top:10px; color:var(--soft); max-width:60ch; font-size:14.5px}

/* ---------- lang tabs ---------- */
.tabs{display:flex; gap:0; margin:28px 0 0; border:1px solid var(--line-hard); width:max-content; max-width:100%; overflow:auto}
.tab{
  display:flex; align-items:center; gap:9px; padding:11px 22px; font-size:14.5px; font-weight:600;
  border-right:1px solid var(--line-hard); white-space:nowrap;
}
.tab:last-child{border-right:none}
.tab .bar{width:4px; height:16px; background:currentColor; opacity:.28}
.tab[aria-selected="true"]{background:var(--surface)}
.tab[aria-selected="true"] .bar{opacity:1}
.lang-intro{margin-top:22px; color:var(--soft); font-size:14.5px; padding-left:14px; border-left:3px solid var(--line-hard)}

/* ---------- chapter rows ---------- */
.rows{margin-top:26px; border-top:1px solid var(--line-hard)}
.row{border-bottom:1px solid var(--line); background:transparent}
.row-head{display:flex; align-items:center; gap:18px; width:100%; padding:17px 4px; text-align:left}
.row-head:hover{background:var(--surface)}
.row-head .num{font-family:var(--mono); font-size:13px; width:2.2em; color:var(--soft); flex:none}
.row-head .ttl{font-weight:600; font-size:15.5px}
.row-head .meta{margin-left:auto; display:flex; align-items:center; gap:16px; font-family:var(--mono); font-size:12px; color:var(--soft); flex:none}
.row-head .chev{width:9px; height:9px; border-right:1.5px solid var(--soft); border-bottom:1.5px solid var(--soft); transform:rotate(45deg); transition:transform .18s ease; flex:none; margin-bottom:3px}
.row.open .chev{transform:rotate(-135deg); margin-bottom:-3px}
.done-flag{color:var(--ok); font-family:var(--mono); font-size:12px}
.row-body{padding:4px 4px 30px 4px}
.row-body-inner{display:grid; grid-template-columns:1.15fr 1fr; gap:30px}
.row-body-inner > .col{min-width:0}
.row-body p.txt{font-size:14.5px; color:var(--body)}
.row-body .codeblk{margin:0; padding:14px; background:var(--code-bg); color:var(--code-fg); font-size:12.5px; line-height:1.75; overflow:auto}
.row-body ul{margin:16px 0 0; padding-left:0; list-style:none}
.row-body ul li{position:relative; padding-left:18px; margin-bottom:9px; font-size:14px; color:var(--body)}
.row-body ul li:before{content:""; position:absolute; left:0; top:.62em; width:6px; height:1.5px; background:var(--soft)}
.row-foot{display:flex; gap:12px; align-items:center; margin-top:22px}
.linkbtn{font-size:13.5px; font-weight:600; border-bottom:1.5px solid var(--ink); padding-bottom:1px}
@media(max-width:860px){
  .row-body-inner{grid-template-columns:1fr; gap:20px}
  .row-head .meta{display:none}
  .row-head{gap:12px}
}

/* ---------- level rows ---------- */
.levels{margin-top:26px; border-top:1px solid var(--line-hard)}
.level{display:flex; align-items:center; gap:20px; width:100%; padding:20px 4px; border-bottom:1px solid var(--line); text-align:left}
.level:hover:not([disabled]){background:var(--surface)}
.level .mk{width:4px; height:34px; flex:none}
.level .no{font-family:var(--mono); font-size:12.5px; color:var(--soft); width:4.6em; flex:none}
.level .name{font-weight:600; font-size:15.5px}
.level .sub{font-family:var(--mono); font-size:12px; color:var(--soft); margin-top:3px}
.level .right{margin-left:auto; display:flex; align-items:center; gap:20px; flex:none}
.stars{font-family:var(--mono); font-size:14px; letter-spacing:2px; color:var(--line-hard)}
.stars i{font-style:normal; color:var(--ink)}
.level .go{font-family:var(--mono); font-size:12.5px; color:var(--soft)}
.level[disabled]{opacity:.42; cursor:not-allowed}
@media(max-width:640px){ .level .go{display:none} }

/* ---------- progress ---------- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:28px; border:1px solid var(--line-hard)}
.stat{padding:24px; border-right:1px solid var(--line-hard)}
.stat:last-child{border-right:none}
.stat .k{font-size:13px; color:var(--soft); font-family:var(--mono)}
.stat .v{font-size:2rem; font-weight:800; letter-spacing:-.03em; margin-top:6px; font-variant-numeric:tabular-nums}
.bars{margin-top:26px; border-top:1px solid var(--line-hard)}
.barline{display:grid; grid-template-columns:5.5em 1fr 5.5em; align-items:center; gap:18px; padding:15px 4px; border-bottom:1px solid var(--line)}
.barline .nm{font-size:14px; font-weight:600}
.barline .track{height:6px; background:var(--line); position:relative}
.barline .fill{position:absolute; inset:0 auto 0 0; width:0; transition:width .5s cubic-bezier(.2,.8,.2,1)}
.barline .pct{font-family:var(--mono); font-size:12px; color:var(--soft); text-align:right}
.wrongbox{margin-top:34px}
.wrongbox h3{font-size:15px; font-weight:700}
.wronglist{margin-top:14px; border-top:1px solid var(--line-hard)}
.wrongitem{padding:16px 4px; border-bottom:1px solid var(--line); font-size:14px}
.wrongitem .qh{font-weight:600}
.wrongitem .qa{margin-top:8px; color:var(--soft); font-size:13.5px}
.wrongitem .qa b{color:var(--ok); font-weight:600}
.wrongitem .src{font-family:var(--mono); font-size:11.5px; color:var(--soft); margin-top:7px}
.empty{padding:22px 4px; color:var(--soft); font-size:14px; border-bottom:1px solid var(--line)}
.foot{display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:34px 0 60px}
.danger{font-size:13.5px; color:var(--no); border-bottom:1.5px solid currentColor; padding-bottom:1px}
@media(max-width:640px){ .stats{grid-template-columns:1fr} .stat{border-right:none; border-bottom:1px solid var(--line-hard)} .stat:last-child{border-bottom:none} }

footer{color:var(--soft); font-size:13px; padding:0 0 70px}
footer .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:22px}

/* ---------- quiz overlay ---------- */
.quiz{position:fixed; inset:0; z-index:80; background:var(--paper); overflow:auto; display:none}
.quiz.on{display:block}
.quiz-top{border-bottom:1px solid var(--line); background:rgba(0,0,0,.78); position:sticky; top:0; backdrop-filter:blur(8px); z-index:2}
.quiz-top .wrap{display:flex; align-items:center; gap:18px; height:58px}
.quiz-top .who{font-family:var(--mono); font-size:12.5px; color:var(--soft)}
.quiz-top .who b{color:var(--ink); font-weight:600}
.quiz-top .exit{margin-left:auto; font-size:13.5px; color:var(--soft); text-decoration:none}
.quiz-top .exit:hover{color:var(--ink)}
.qprog{display:flex; gap:5px; align-items:center}
.qprog span{width:22px; height:3px; background:var(--line-hard)}
.qprog span.ok{background:var(--ok)} .qprog span.no{background:var(--no)} .qprog span.cur{background:var(--ink)}
.quiz-main{padding:52px 0 90px}
.qcard{border:1px solid var(--line-hard); background:var(--surface); padding:34px 32px}
.qcard .qh{font-size:1.22rem; font-weight:700; line-height:1.45}
.qcard .qcode{margin:20px 0 0; padding:14px; background:var(--code-bg); color:var(--code-fg); font-size:13px; line-height:1.75; overflow:auto}
.opts{margin-top:26px; border-top:1px solid var(--line-hard)}
.opt{display:flex; gap:16px; align-items:flex-start; width:100%; padding:15px 4px; border-bottom:1px solid var(--line); text-align:left; font-size:15px}
.opt .key{font-family:var(--mono); font-size:12.5px; color:var(--soft); width:1.6em; flex:none; padding-top:3px}
.opt:hover:not(.locked){background:var(--surface2)}
.opt.locked{cursor:default}
.opt.correct{background:rgba(59,192,140,.14)}
.opt.correct .key{color:var(--ok)}
.opt.wrong{background:rgba(240,96,79,.14)}
.opt.wrong .key{color:var(--no)}
.opt .mark{margin-left:auto; font-family:var(--mono); font-size:12px; padding-top:3px; flex:none}
.opt.correct .mark{color:var(--ok)} .opt.wrong .mark{color:var(--no)}
.why{margin-top:24px; border-left:3px solid var(--ink); padding:2px 0 2px 16px; font-size:14.5px; color:var(--body); display:none}
.why.on{display:block}
.why .h{font-weight:700; margin-bottom:5px}
.qfoot{display:flex; align-items:center; gap:16px; margin-top:30px}
.qfoot .hint{font-family:var(--mono); font-size:12px; color:var(--soft)}
.qfoot .btn{margin-left:auto}
@media(max-width:640px){ .qcard{padding:24px 20px} .quiz-main{padding:30px 0 70px} }

/* result */
.result{border:1px solid var(--line-hard); background:var(--surface); padding:44px 32px; text-align:left}
.result .score{font-size:4rem; font-weight:800; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums}
.result .score small{font-size:1.1rem; font-weight:600; color:var(--soft); letter-spacing:0}
.result .verdict{margin-top:14px; font-size:1.15rem; font-weight:700}
.result .sum{margin-top:8px; color:var(--soft); font-size:14.5px}
.review{margin-top:32px; border-top:1px solid var(--line-hard)}
.review .ri{padding:15px 4px; border-bottom:1px solid var(--line); font-size:14px}
.review .ri .t{font-weight:600}
.review .ri .d{margin-top:6px; color:var(--soft); font-size:13.5px}
@media(max-width:640px){ .result{padding:30px 20px} }

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}