/* Base page, sidebar, lesson page, player, cells, SVG diagrams, DP tables, code panel and mock test. */
[hidden]{display:none!important}
body{margin:0}
img{max-width:100%}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:15px/1.55 var(--body);padding-inline:16px;padding-block:0 40px}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1260px;margin:0 auto}

header.top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-block:16px 14px}
.brand{font:700 22px/1 var(--display);letter-spacing:-.01em;background:none;border:0;padding:0;cursor:pointer}
.brand img{display:block;flex:none;border-radius:10px}
header.top>.brand{display:inline-flex;align-items:center;gap:9px}
.brand span{color:var(--c5)}
.tag{color:var(--muted);font-size:13px;flex:1;min-width:0}
.pill{font:600 12px var(--mono);border-radius:99px;padding:5px 11px;border:1px solid var(--line);background:var(--panel);color:var(--muted)}
#navbtn{display:none}
.stripe{height:5px;border-radius:99px;background:linear-gradient(90deg,var(--c1) 0 8.33%,var(--c2) 0 16.66%,var(--c3) 0 25%,var(--c4) 0 33.33%,var(--c5) 0 41.66%,var(--c6) 0 50%,var(--c7) 0 58.33%,var(--c8) 0 66.66%,var(--c9) 0 75%,var(--c10) 0 83.33%,var(--c11) 0 91.66%,var(--c12) 0)}

.app{display:grid;grid-template-columns:250px minmax(0,1fr);gap:28px;padding-top:22px}
aside{position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px);align-self:start;max-height:calc(100vh - 24px);overflow:auto;display:flex;flex-direction:column;gap:12px;padding-right:4px}
#q{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.cat{font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--cat) 72%,var(--ink));margin:12px 0 4px;display:flex;align-items:center;gap:7px}
.cat::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--cat)}
.lk{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;border-left:2px solid color-mix(in srgb,var(--cat) 30%,var(--line));padding:5px 10px;cursor:pointer;color:var(--ink);border-radius:0 5px 5px 0}
.lk:hover{background:color-mix(in srgb,var(--cat) 10%,transparent)}
.lk.cur{border-left-color:var(--cat);background:color-mix(in srgb,var(--cat) 16%,transparent);font-weight:600}
.ck{margin-left:auto;font:600 11px var(--mono);color:var(--ok)}
.none{color:var(--muted);font-size:13px}

main{min-width:0}
.view{display:flex;flex-direction:column;gap:18px}
h1{font:700 clamp(26px,4vw,38px)/1.08 var(--display);letter-spacing:-.02em;margin:6px 0 8px;text-wrap:balance}
.blurb{max-width:65ch;color:var(--muted);margin:0}

/* overview */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.card{background:var(--panel);border:1px solid color-mix(in srgb,var(--cat) 35%,var(--line));border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.card header{background:var(--cat);color:var(--on-cat);padding:10px 14px;display:flex;align-items:baseline;gap:8px}
.card h3{font:700 16px var(--display);margin:0;flex:1}
.card header span{font:600 12px var(--mono)}
.card p{margin:0;padding:10px 14px 4px;font-size:13px;color:var(--muted)}
.card div{padding:6px 8px 10px;display:grid;gap:1px}
.lk2{display:flex;gap:8px;align-items:center;text-align:left;background:none;border:0;padding:5px 7px;border-radius:5px;cursor:pointer}
.lk2:hover{background:color-mix(in srgb,var(--cat) 14%,transparent)}
.types{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}

/* lesson */
.eyebrow{display:inline-block;font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;background:var(--cat);color:var(--on-cat);border-radius:5px;padding:3px 9px}
.meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}
.chip{font:600 12px var(--mono);border:1px solid color-mix(in srgb,var(--cat) 40%,var(--line));background:color-mix(in srgb,var(--cat) 9%,var(--panel));border-radius:5px;padding:4px 9px}
.chip small{color:var(--muted);font-weight:400;font-size:11px;margin-right:5px}
.learn{display:inline-flex;align-items:center;gap:6px;font-size:13px;margin-left:auto;cursor:pointer}
.learn input{accent-color:var(--ok)}

.inputs{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.inputs label{display:grid;gap:3px;font-size:12px;color:var(--muted);min-width:0}
.inputs input{padding:7px 9px;border:1px solid var(--line);border-radius:6px;background:var(--panel);font-family:var(--mono);font-size:13px;width:100%}
.inputs .wide{flex:1 1 200px}.inputs .narrow{flex:0 1 120px}
.btn{border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:7px 13px;cursor:pointer;font-weight:500}
.btn:hover{border-color:var(--muted)}
.btn.pri{background:var(--cat);border-color:var(--cat);color:var(--on-cat);font-weight:600;min-width:74px}
.btn.sm{padding:3px 9px;font-size:12px}
.err{color:var(--bad);font-size:13px;flex-basis:100%}

.board{border:1px solid var(--line);border-top:4px solid var(--cat);border-radius:10px;overflow:hidden;background:var(--panel)}
#stage{min-height:250px;padding:22px 16px;display:flex;flex-direction:column;gap:16px;justify-content:center;
  background-color:var(--stage);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:22px 22px}
#msg{min-height:3.4em;padding:12px 16px;border-top:1px solid var(--line);font-weight:500;display:flex;align-items:center;background:color-mix(in srgb,var(--cat) 7%,var(--panel))}
.ctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 16px;border-top:1px solid var(--line)}
#scrub{flex:1 1 140px;min-width:0;accent-color:var(--cat)}
#count{font:12px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums;min-width:62px;text-align:right}
#speed{padding:6px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);padding:8px 16px;border-top:1px solid var(--line)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}

.row{display:flex;gap:10px;align-items:flex-end;min-width:0}
.rl{font:600 12px var(--mono);color:var(--muted);width:56px;flex:none;padding-bottom:40px;text-align:right}
.cells{display:flex;gap:6px;overflow-x:auto;align-items:flex-end;padding:2px;min-width:0}
.cell{display:grid;justify-items:center;gap:2px;flex:none}
.cell b{display:flex;align-items:flex-end;justify-content:center;min-width:42px;height:var(--h,42px);padding:0 6px 9px;border:1.5px solid var(--line);border-radius:6px;background:var(--panel);font:600 14px var(--mono);transition:background .2s,border-color .2s,height .25s}
.cell i{font:normal 11px var(--mono);color:var(--muted)}
.cell em{font:600 11px var(--mono);font-style:normal;color:color-mix(in srgb,var(--cat) 70%,var(--ink));min-height:17px}
.empty{font:13px var(--mono);color:var(--muted);padding-bottom:40px}
.s-cmp b,td.s-cmp{border-color:var(--cmp);background:color-mix(in srgb,var(--cmp) 24%,var(--panel))}
.s-act b,td.s-act{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--panel))}
.s-ok b,td.s-ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 24%,var(--panel))}
.s-piv b,td.s-piv{border-color:var(--piv);background:color-mix(in srgb,var(--piv) 22%,var(--panel))}
.s-bad b,td.s-bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 24%,var(--panel))}
.s-dim{opacity:.38}

.svgw{display:flex;justify-content:center}
.flow-svg{max-width:820px;overflow:visible}
.flow-edge{stroke:var(--line);stroke-width:2.5;fill:none;transition:stroke .2s}
.flow-edge.s-act,.flow-edge.s-ok{stroke:var(--accent)}
.flow-arrow{fill:var(--muted)}
.flow-node rect{fill:var(--panel);stroke:var(--line);stroke-width:2;transition:fill .2s,stroke .2s}
.flow-node.s-act rect{stroke:var(--accent);fill:color-mix(in srgb,var(--accent) 18%,var(--panel))}
.flow-node.s-ok rect{stroke:var(--ok);fill:color-mix(in srgb,var(--ok) 20%,var(--panel))}
.flow-node.s-piv rect{stroke:var(--piv);fill:color-mix(in srgb,var(--piv) 18%,var(--panel))}
.flow-node.s-dim{opacity:.42}
.flow-node text{font:600 13px var(--mono);fill:var(--ink);text-anchor:middle}
.flow-node .flow-sub{font-size:11px;fill:var(--muted)}
svg{width:100%;height:auto}
svg .e{stroke:var(--line);stroke-width:2.5;fill:none}
svg .e.s-ok{stroke:var(--ok)} svg .e.s-cmp{stroke:var(--cmp)} svg .e.s-bad{stroke:var(--bad);stroke-dasharray:5 5}
svg .ah{fill:var(--muted)}
svg circle{fill:var(--panel);stroke:var(--muted);stroke-width:2;transition:fill .2s,stroke .2s}
svg .s-cmp circle{stroke:var(--cmp);fill:color-mix(in srgb,var(--cmp) 28%,var(--panel))}
svg .s-act circle{stroke:var(--accent);fill:color-mix(in srgb,var(--accent) 20%,var(--panel))}
svg .s-ok circle{stroke:var(--ok);fill:color-mix(in srgb,var(--ok) 26%,var(--panel))}
svg .s-bad circle{stroke:var(--bad);fill:color-mix(in srgb,var(--bad) 26%,var(--panel))}
svg text{font:600 14px var(--mono);fill:var(--ink);text-anchor:middle}
svg .ns{font-size:11px;fill:color-mix(in srgb,var(--cat) 70%,var(--ink))}
svg .ew{font-size:12px;fill:var(--muted);paint-order:stroke;stroke:var(--stage);stroke-width:6px}

.gridw{overflow-x:auto}
table.dp{border-collapse:separate;border-spacing:3px;margin:0 auto;font:600 13px var(--mono)}
table.dp th{color:var(--muted);font-weight:600;padding:4px 8px;white-space:nowrap}
table.dp td{min-width:34px;height:34px;text-align:center;border:1.5px solid var(--line);border-radius:5px;background:var(--panel)}

.lower{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:18px}
.lower>div{min-width:0}
h2{font:700 15px var(--display);margin:0 0 8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
h2 .sp{flex:1}
.code{background:var(--code-bg);border:1px solid var(--line);border-radius:10px;padding:12px 0;overflow-x:auto;font:13px/1.7 var(--mono)}
.ln{display:flex;white-space:pre;padding-right:16px;border-left:3px solid transparent;min-width:max-content}
.ln u{text-decoration:none;color:var(--muted);width:38px;flex:none;text-align:right;padding-right:12px;user-select:none;opacity:.7}
.ln.on{background:color-mix(in srgb,var(--cmp) 22%,transparent);border-left-color:var(--cmp)}
.kw{color:var(--sy-kw)} .ty{color:var(--sy-ty)} .fn{color:var(--sy-fn)} .nu{color:var(--sy-nu)} .st{color:var(--sy-st)} .cm{color:var(--muted);font-style:italic}
.notes p{margin:0 0 10px;max-width:60ch}
.notes ul{margin:0;padding-left:18px;display:grid;gap:6px;max-width:60ch}
.net{margin-top:14px;border:1px solid color-mix(in srgb,var(--c3) 45%,var(--line));background:color-mix(in srgb,var(--c3) 9%,var(--panel));border-radius:8px;padding:10px 12px;max-width:60ch}
.net strong{display:block;font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--c3) 75%,var(--ink));margin-bottom:3px}
.keys{color:var(--muted);font-size:12px;font-weight:400;font-family:var(--body)}
kbd{font:11px var(--mono);border:1px solid var(--line);border-radius:4px;padding:1px 5px;background:var(--panel)}
.pager{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap}
.pager .btn{max-width:100%;text-align:left}

.mk-dots{flex:1;display:flex;gap:5px;justify-content:center;flex-wrap:wrap}
.mk-dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.mk-dots i.done{background:var(--cat)} .mk-dots i.cur{outline:2px solid var(--cat);outline-offset:2px}
.side-mock{width:100%;text-align:left;font-weight:600;border-color:color-mix(in srgb,var(--c5) 45%,var(--line));background:color-mix(in srgb,var(--c5) 9%,var(--panel))}
@media (max-width:980px){.lower,.types{grid-template-columns:minmax(0,1fr)}}
@media (max-width:820px){
  /* the top menu becomes its own full-width row that scrolls sideways, instead of widening the page */
  header.top{gap:8px 10px}
  header.top .nav{order:10;flex:1 1 100%;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-inline:-4px}
  header.top .nav::-webkit-scrollbar{display:none}
  header.top .navlk{padding:8px 10px}
  .app{grid-template-columns:minmax(0,1fr);gap:16px}
  #navbtn{display:inline-block}
  aside{position:static;max-height:none;display:none}
  aside.open{display:flex}
  .tag{display:none}.langsw{margin-left:auto}
  .rl{width:40px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* phones: compact lesson cells so a typical 7-8 item array fits without sideways scrolling */
@media (max-width:520px){
  #stage{padding:16px 10px;gap:12px}
  .cells{gap:4px}
  .cell b{min-width:34px;padding-inline:4px;font-size:13px}
  .rl{width:30px}
}