:root{
  /* Layout idea: a traffic-control lab notebook. Cool paper, ink rules, blue tokens; green = 200, red = 429. */
  --paper:#EDF0F4;
  --sheet:#FFFFFF;
  --ink:#121826;
  --muted:#5A6478;
  --rule:#C9D0DB;
  --token:#2E5BFF;
  --ok:#11955F;
  --no:#DC3D43;
  --warn:#C77700;
  /* Text-safe shades of the accents: same hue, ≥ 4.5:1 on white and on every light tint used here (WCAG AA). */
  --ok-t:#0E7A4D;
  --no-t:#CB252B;
  --warn-t:#995C00;
  --orange-t:#B54509;
  --display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 var(--body)}
.wrap{max-width:860px;margin:0 auto;padding:18px 16px 70px;display:grid;gap:34px}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.02;text-wrap:balance}
h1{font-size:clamp(44px,11vw,86px);font-weight:900;font-stretch:125%;letter-spacing:-.02em}
h1 .code{color:var(--no-t)}
h2{font-size:clamp(26px,6vw,38px);font-weight:800;font-stretch:112%}
h3{font-size:19px;font-weight:800;font-stretch:105%}
p{margin:0;max-width:64ch}
.muted{color:var(--muted)}
.stack{display:grid;gap:12px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.between{justify-content:space-between}
.sec-head{display:grid;gap:6px;border-top:3px solid var(--ink);padding-top:12px}
.num{font:600 13px var(--mono);color:var(--token);letter-spacing:.08em;text-transform:uppercase}
.sheet{background:var(--sheet);border:1px solid var(--rule);border-radius:12px;padding:16px;display:grid;gap:14px}
.nav{display:flex;gap:8px;flex-wrap:wrap}
.nav a{font:600 14px var(--body);color:var(--ink);text-decoration:none;border:1.5px solid var(--ink);border-radius:999px;padding:5px 12px;background:var(--sheet)}
.nav a:hover{background:var(--ink);color:#fff}
.btn{font:700 15px var(--body);border:1.5px solid var(--ink);background:var(--ink);color:#fff;border-radius:8px;padding:9px 14px;cursor:pointer;transition:transform .06s}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:var(--sheet);color:var(--ink)}
.btn.blue{background:var(--token);border-color:var(--token)}
.btn[disabled]{opacity:.35;cursor:not-allowed}
input[type=checkbox],input[type=radio]{width:18px;height:18px;accent-color:var(--token);flex:none}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--token);outline-offset:2px}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
/* Chips: every single-choice row (tabs, algorithm pickers, presets) shares this spec */
.tabs button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;box-sizing:border-box;padding:7px 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font:600 14px/1.25 var(--body);cursor:pointer}
.tabs button:hover,.lb-algos [role=radio]:hover,.ca-fixes [role=radio]:hover,.cm-opts [role=radio]:hover{border-color:#9AA4B8}
.tabs button[aria-selected="true"],.tabs button[aria-pressed="true"]{border-color:var(--token);background:var(--token);color:#fff}
canvas{width:100%;display:block;border-radius:10px;background:#F7F9FC;border:1px solid var(--rule)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (max-width:620px){.facts{grid-template-columns:repeat(2,1fr)}}
.fact{border:1px solid var(--rule);border-radius:8px;padding:8px 10px;display:grid;gap:2px;background:#F7F9FC}
.fact b{font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fact span{font-weight:700;font-size:15px}
.one{font-size:17px}
.one strong{color:var(--token)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.dotk{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px}

/* compare */
.cmp{display:grid;gap:10px}
.crow{display:grid;grid-template-columns:150px 1fr 54px;gap:10px;align-items:center}
@media (max-width:520px){.crow{grid-template-columns:1fr 54px}.crow .cname{grid-column:1 / -1}}
.cname{font-weight:700}
.strip{display:flex;gap:3px;position:relative}
.strip i{flex:1;height:22px;border-radius:4px}
.strip .mid{position:absolute;left:50%;top:-4px;bottom:-4px;border-left:2px dashed var(--ink)}
.cval{font:600 15px var(--mono);text-align:right;font-variant-numeric:tabular-nums}

/* race */
.seq{display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:#F7F9FC}
.seq .lane{font:700 13px var(--mono);text-align:center;padding:8px 4px;background:var(--ink);color:#fff}
.seq .msg{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:7px 8px;border-top:1px solid var(--rule);font:13px var(--mono);animation:in .35s ease-out}
@keyframes in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.msg .l{text-align:left}.msg .c{text-align:center}.msg .r{text-align:right}
.msg.bad{background:#FDECEC}.msg.good{background:#E8F6EF}
pre{margin:0;font:13px/1.6 var(--mono);background:var(--ink);color:#E6EAF2;border-radius:10px;padding:12px 14px;overflow-x:auto}
pre .c{color:#8C97AD}pre .h{color:#FF8A8E}pre .g{color:#7FE0B0}
.verdict{font:800 18px var(--display);font-stretch:110%}
.verdict.bad{color:var(--no-t)}.verdict.good{color:var(--ok-t)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:620px){.two{grid-template-columns:1fr}}

/* game */
.brief{border-left:5px solid var(--token);padding:4px 0 4px 12px;display:grid;gap:8px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
/* Tags label things; they have a tint and no border, so they never read as buttons */
.chip{font:600 12px var(--mono);border:0;background:#EEF1F6;color:#3E475C;border-radius:4px;padding:3px 8px}
.group{display:grid;gap:8px}
.group > b{font:600 12px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.choices{display:flex;gap:6px;flex-wrap:wrap}
.choices button{font:600 14px var(--body);border:1.5px solid var(--rule);background:var(--sheet);color:var(--ink);border-radius:8px;padding:7px 11px;cursor:pointer}
.choices button[aria-checked="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.nums{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.nums label{display:grid;gap:4px;font-size:14px;font-weight:600}
.nums input{font:600 16px var(--mono);border:1.5px solid var(--rule);border-radius:8px;padding:8px 10px;width:100%}
.review{display:grid;gap:8px}
.rv{display:grid;grid-template-columns:28px 1fr 56px;gap:10px;align-items:start;border:1px solid var(--rule);border-radius:8px;padding:9px 10px;background:#F7F9FC}
.rv .ic{font:800 18px var(--display);text-align:center}
.rv .pts{font:600 14px var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.rv.full .ic{color:var(--ok-t)}.rv.partial .ic{color:var(--warn-t)}.rv.zero .ic{color:var(--no-t)}
.rv small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.score-big{font:900 64px var(--display);font-stretch:125%;line-height:1}
details.follow{border:1px dashed var(--token);border-radius:8px;padding:10px 12px;background:#F2F5FF}
details.follow summary{cursor:pointer;font-weight:700;color:var(--token)}
.bars{display:grid;gap:8px}
.brow{display:grid;grid-template-columns:110px 1fr 70px;gap:10px;align-items:center;font-size:14px}
.btrack{height:12px;background:#E4E8EF;border-radius:6px;overflow:hidden}
.bfill{height:100%;background:var(--token)}
.bval{font:600 13px var(--mono);text-align:right}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- site shell ---------- */
.site-head{position:sticky;top:0;z-index:5;background:rgba(237,240,244,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.site-head .in{max-width:860px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.brand{font:900 20px var(--display);font-stretch:125%;color:var(--ink);text-decoration:none;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.brand i{width:12px;height:12px;border-radius:50%;background:var(--no);box-shadow:0 0 0 3px #FAD4D5}
.head-nav{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;min-width:0}
.head-nav a{white-space:nowrap}
.head-nav a{font:600 14px var(--body);color:var(--ink);text-decoration:none;padding:6px 10px;border-radius:8px}
.head-nav a:hover{background:var(--sheet)}
.head-nav a.primary{background:var(--ink);color:#fff}
.head-nav .who{font:600 13px var(--mono);color:var(--muted);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:700px){.head-nav .topic-link{display:none}}
@media (max-width:420px){.head-nav{gap:2px}.head-nav a{padding:6px 8px}.brand{font-size:18px;gap:7px}}
@media (max-width:359px){.site-head .in{gap:6px}.brand{font-size:16px;gap:6px}.head-nav a{padding:6px 6px;font-size:13px}}
.banner{max-width:860px;margin:10px auto 0;padding:8px 14px;border-radius:8px;background:#FFF4DB;border:1px solid #F1D48C;font-size:14px}
.banner b{font-weight:700}
.banner:empty{display:none}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:480px){.hero-cta .btn{flex:1 1 100%}}
a.btn{text-decoration:none;display:inline-block}
.topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.tcard{background:var(--sheet);border:1px solid var(--rule);border-radius:12px;padding:16px;display:grid;gap:10px;align-content:start;text-decoration:none;color:var(--ink);transition:transform .1s,border-color .1s}
.tcard:hover{transform:translateY(-2px);border-color:var(--ink)}
.tcard .k{font:600 12px var(--mono);color:var(--token);letter-spacing:.08em;text-transform:uppercase}
.tcard p{font-size:15px;color:var(--muted)}
.tcard .meta{display:flex;gap:6px;flex-wrap:wrap}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:620px){.steps3{grid-template-columns:1fr}}
.step{border-top:3px solid var(--ink);padding-top:10px;display:grid;gap:4px}
.step b{font:800 20px var(--display);font-stretch:110%}
.authbox{max-width:420px;margin:10px auto;width:100%}
.form{display:grid;gap:12px}
.form label{display:grid;gap:5px;font-weight:600;font-size:14px}
.form input{font:16px var(--body);border:1.5px solid var(--rule);border-radius:8px;padding:10px 12px;width:100%;background:#fff;color:var(--ink)}
.form input:focus{border-color:var(--token);outline:none;box-shadow:0 0 0 3px rgba(46,91,255,.18)}
.form .btn{width:100%;padding:11px}
.err{color:var(--no-t);font-size:14px;min-height:1em}
.okmsg{color:var(--ok-t);font-size:14px}
.small{font-size:14px}
.small a,.linkish{color:var(--token);font-weight:600}
.linkish{background:none;border:0;padding:0;cursor:pointer;font:inherit;text-decoration:underline}
.divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--rule)}
.gate{border:2px dashed var(--token);border-radius:12px;padding:18px;display:grid;gap:12px;background:#F2F5FF}
.site-foot{max-width:860px;margin:0 auto;padding:24px 16px 40px;color:var(--muted);font-size:13px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.loading{padding:40px 0;color:var(--muted)}
.ring-wrap{display:grid;gap:10px}
.statline{display:flex;gap:8px;flex-wrap:wrap}
/* Status readouts are not controls: no box, no fill, a coloured rule on the left. Buttons and chips keep the boxes. */
.stat{font:600 13px var(--mono);border:0;border-left:3px solid var(--rule);background:none;border-radius:0;padding:2px 0 2px 9px}
.stat.bad{color:var(--no-t);border-left-color:var(--no)}.stat.good{color:var(--ok-t);border-left-color:var(--ok)}
.ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-weight:600;font-size:14px}
.ctrl button{width:34px;height:34px;padding:0;font:800 18px var(--body)}
.ctrl output{font:700 16px var(--mono);min-width:22px;text-align:center}
.toggle{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;cursor:pointer;user-select:none}
.toggle input{width:18px;height:18px;accent-color:var(--token)}
.order-strip{display:flex;gap:4px;flex-wrap:wrap}
.order-strip span{font:600 12px var(--mono);width:26px;height:26px;display:grid;place-items:center;border-radius:5px;background:#E8F6EF;border:1px solid #A9DCC4}
.order-strip span.bad{background:#FDECEC;border-color:#F2B8BA;color:var(--no-t)}
section[id]{scroll-margin-top:70px}
.label{font:600 12px var(--mono);letter-spacing:.06em;text-transform:uppercase}

/* =========================================================
   v2 layout: course landing + 3-column lesson pages
   ========================================================= */
:root{--navy:#0E1424;--navy2:#161E33;--line-dark:#27304A;--maxw:1240px}
body{background:var(--paper)}
.site-head .in{max-width:var(--maxw);padding:10px 24px}
.banner{max-width:var(--maxw);margin:10px auto 0;font-size:13px;padding:6px 12px}
body[data-view] .banner{margin-left:auto;margin-right:auto}
#main{min-height:60vh}
.page{max-width:var(--maxw);margin:0 auto;padding:36px 24px 60px;display:grid;gap:48px}
.crumbs{display:flex;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.crumbs a{color:var(--token);text-decoration:none;padding:2px 0}.crumbs a:hover{text-decoration:underline}
.crumbs [aria-current]{color:var(--ink);font-weight:600}
.eyebrow{font:600 11px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--token)}
.btn.lg{padding:12px 20px;font-size:16px}
.btn.block{display:block;width:100%;text-align:center}
.btn.ghost-dark{background:transparent;color:#fff;border-color:#4A5574}
.btn.ghost-dark:hover{border-color:#fff}
.center{text-align:center}

/* hero band */
.hero-band{background:radial-gradient(1200px 400px at 85% 10%,rgba(46,91,255,.22),transparent 60%),var(--navy);color:#fff}
.hero-in{max-width:var(--maxw);margin:0 auto;padding:44px 24px 52px;display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:48px;align-items:center}
@media (max-width:960px){.hero-in{grid-template-columns:1fr;gap:28px;padding:32px 24px 36px}.hero-in .inc-card{width:100%;max-width:520px}}
.hero-copy{display:grid;gap:16px}
.hero-band .crumbs{color:#9AA4BE}
/* Hero facts: a line of small caps text, not pills, so nothing here looks pressable */
.badges{display:flex;gap:4px 22px;flex-wrap:wrap;align-items:center;overflow:hidden}
.badge{position:relative;font:600 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:0;background:none;border:0;white-space:nowrap}
/* separator sits in the gap; one that would start a wrapped line is clipped */
.badge + .badge::before{content:"·";position:absolute;left:-14px;color:#A3ABBA}
.badge:not(.ghost){color:var(--ok-t);display:inline-flex;align-items:center;gap:6px}
.badge:not(.ghost)::after{content:none}
.badge.ghost{background:none;border:0}
.hero-band h1{font-size:clamp(38px,5.2vw,64px);font-weight:900;font-stretch:118%;letter-spacing:-.02em;color:#fff;line-height:1}
.lede{font-size:18px;color:#C9D1E6;max-width:60ch}
.statrow{display:flex;gap:6px 22px;flex-wrap:wrap;color:#AEB8D1;font-size:14px}
@media (max-width:480px){.statrow{display:grid;grid-template-columns:1fr 1fr}}
.statrow b{color:#fff;font-size:16px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.inc-card{background:#fff;color:var(--ink);border-radius:14px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.inc-card canvas{display:block;width:100%;border:0;border-radius:0;background:var(--navy2)}
.inc-body{padding:18px;display:grid;gap:12px}
.inc-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}
.inc-list li{padding-left:24px;position:relative}
.inc-list li::before{content:"✓";position:absolute;left:0;color:var(--ok-t);font-weight:800}
.mini-prog{display:grid;gap:6px;font-weight:600;font-size:14px}

/* roadmap */
.roadmap{display:grid;gap:14px}
.modules{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.module{background:var(--sheet);border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.mod-head{width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 18px;background:none;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
div.mod-head{cursor:default}
.mod-n{width:36px;height:36px;border-radius:10px;background:var(--ink);color:#fff;display:grid;place-items:center;font:800 15px var(--display)}
.module.soon .mod-n{background:#D5DAE3;color:#5A6478}
.module.soon b{color:var(--muted)}
.mod-t{display:grid;gap:3px}.mod-t b{font-size:17px}
.mod-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.chip.done{color:var(--ok-t);border-color:#A9DCC4;background:#EAF7F0}
.caret{transition:transform .15s;font-size:14px;color:var(--muted)}
.module.open .caret{transform:rotate(180deg)}
.lessons{list-style:none;margin:0;padding:0 18px 14px 76px;display:none;gap:2px}
.module.open .lessons{display:grid}
.lessons a{display:flex;gap:12px;align-items:center;padding:9px 10px;border-radius:8px;color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
.lessons a:hover{background:#F1F4FA}
.ln{font:600 12px var(--mono);color:var(--muted);width:30px}
.tag{margin-left:auto;font:600 11px var(--mono);color:var(--token);border:0;background:#EEF2FF;border-radius:4px;padding:2px 7px}
.ln{flex:none}
.lt{min-width:0}
@media (max-width:640px){
  .mod-head{grid-template-columns:36px 1fr;padding:14px;align-items:start}.mod-meta{grid-column:2;justify-content:flex-start}
  .lessons,.chapter .lessons{padding:0 8px 10px}
  /* phone: number + title on one line, time and tag underneath */
  .lessons a{flex-wrap:wrap;gap:2px 10px}
  .lessons a .lt{flex:1 1 calc(100% - 40px)}
  .lessons a .ltime{margin-left:40px}
}

.how{display:grid;gap:16px}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:760px){.how-grid{grid-template-columns:1fr}}
.how-card{background:var(--sheet);border:1px solid var(--rule);border-radius:12px;padding:18px;display:grid;gap:8px;align-content:start}
.how-n{font:900 28px var(--display);font-stretch:120%;color:var(--token)}
.cta-band > div{display:grid;gap:6px}
.cta-band{background:var(--navy);color:#fff;border-radius:14px;padding:26px;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta-band h2{color:#fff}.cta-band .muted{color:#AEB8D1}

/* lesson layout */
.course{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:270px minmax(0,1fr) 250px;gap:36px;padding:0 24px}
.outline,.toc{position:sticky;top:64px;align-self:start;max-height:calc(100vh - 72px);overflow:auto;padding:22px 0 30px}
.outline{display:grid;gap:16px;align-content:start}
.ol-head{display:grid;gap:3px;padding-bottom:12px;border-bottom:1px solid var(--rule)}
.ol-head b{font-size:16px}
.ol-list{display:grid;gap:4px}
.ol-t{display:flex;gap:10px;align-items:center;padding:8px 8px;border-radius:8px;text-decoration:none;color:var(--ink);font-weight:700;font-size:15px}
.ol-t:hover{background:#E4E8F0}
.ol-topic.on .ol-t{background:#fff;box-shadow:inset 0 0 0 1px var(--rule)}
.ol-n{width:24px;height:24px;border-radius:7px;background:#D5DAE3;display:grid;place-items:center;font:800 12px var(--body);flex:none}
.ol-topic.on .ol-n{background:var(--token);color:#fff}
.ol-n.ok{background:var(--ok)!important;color:#fff}
.ol-topic ul{list-style:none;margin:4px 0 6px;padding:0 0 0 20px;border-left:2px solid var(--rule);margin-left:19px;display:grid;gap:1px}
.ol-topic li a{display:flex;gap:8px;align-items:center;padding:6px 10px;border-radius:6px;font-size:14px;color:var(--muted);text-decoration:none}
.ol-topic li a:hover{color:var(--ink);background:#E9ECF2}
.ol-topic li a.active{color:var(--token);font-weight:700;background:#E8EDFF}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;opacity:.6}
.ol-topic li a{align-items:flex-start}.ol-topic li a .dot{margin-top:.6em}
.lock{font-size:11px}
.ol-soon{display:grid;gap:4px;padding:12px 8px 0;border-top:1px solid var(--rule);margin-top:8px}
.ol-soon span:not(.eyebrow){font-size:14px;color:#8A93A6}
.ol-soon .eyebrow{color:var(--muted)}
.ol-cta{background:var(--navy);color:#fff;border-radius:12px;padding:14px;display:grid;gap:8px}
.ol-cta .small{color:#AEB8D1}
.lesson-col{min-width:0;padding:22px 0 60px;display:grid;gap:14px;align-content:start}
.lesson-top{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.lesson-meta{display:flex;gap:6px;flex-wrap:wrap}
.small-btn{padding:6px 10px;font-size:13px}
#drawerBtn{display:none}
.lesson{display:grid;gap:40px;max-width:900px}
.lesson > header h1{font-size:clamp(36px,4.4vw,56px)}
.lesson > header .nav{display:none}
.lesson .sheet{padding:20px}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:900px;margin-top:20px}
.pg{display:grid;gap:2px;border:1px solid var(--rule);background:var(--sheet);border-radius:10px;padding:12px 14px;text-decoration:none;color:var(--ink)}
.pg:hover{border-color:var(--ink)}
.pg.next{text-align:right}
.toc{display:grid;gap:14px;align-content:start}
.toc-box{display:grid;gap:8px}
.toc-box nav{display:grid;gap:2px;border-left:2px solid var(--rule)}
.toc-box nav a{display:flex;gap:8px;padding:6px 10px;margin-left:-2px;border-left:2px solid transparent;font-size:14px;color:var(--muted);text-decoration:none}
.toc-box nav a span{font:600 12px var(--mono);color:#9AA4B8}
.toc-box nav a:hover{color:var(--ink)}
.toc-box nav a.active{color:var(--token);border-left-color:var(--token);font-weight:700}
.cheat{background:var(--sheet);border:1px solid var(--rule);border-radius:12px;padding:14px}
.cheat dl{margin:0;display:grid;gap:8px}
.cheat dt{font:600 11px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.cheat dd{margin:0 0 4px;font-weight:700;font-size:14px}
section[id]{scroll-margin-top:76px}
.scrim{display:none}
@media (max-width:1220px){.course{grid-template-columns:250px minmax(0,1fr)}.toc{display:none}}
@media (max-width:900px){
  .course{grid-template-columns:minmax(0,1fr);padding:0 16px}
  #drawerBtn{display:inline-block}
  .lesson > header .nav{display:flex}
  .outline{position:fixed;left:0;top:0;bottom:0;height:100dvh;align-self:stretch;width:300px;max-height:none;background:var(--paper);z-index:20;padding:20px;transform:translateX(-105%);transition:transform .2s;box-shadow:10px 0 30px rgba(0,0,0,.15)}
  body.drawer-open .outline{transform:none}
  body.drawer-open .scrim{display:block;position:fixed;inset:0;background:rgba(14,20,36,.4);z-index:15}
}

/* auth */
.auth-wrap{max-width:var(--maxw);margin:0 auto;padding:40px 24px 60px;display:flex;gap:32px;justify-content:center;align-items:flex-start;flex-wrap:wrap}
.auth-wrap .authbox{margin:0}
.auth-links a{white-space:nowrap}
.auth-side{max-width:320px;display:grid;gap:12px;padding-top:24px}

/* footer */
.site-foot{display:block;max-width:none;padding:0;border-top:1px solid var(--rule);background:#E6EAF0}
.foot-in{max-width:var(--maxw);margin:0 auto;padding:30px 24px 16px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.4fr;gap:24px}
@media (max-width:760px){.foot-in{grid-template-columns:1fr 1fr}}
.foot-col{display:grid;gap:6px;align-content:start;font-size:14px}
.foot-col a{color:var(--ink);text-decoration:none}.foot-col a:hover{color:var(--token)}
.foot-brand{display:grid;gap:6px;align-content:start}
.foot-base{max-width:var(--maxw);margin:0 auto;padding:10px 24px 24px}
/* one page gutter on phones: header, hero, pages, auth and footer line up with the lesson column (.course uses 16px below 900px) */
@media (max-width:640px){.site-head .in,.hero-in,.page,.auth-wrap,.foot-in,.foot-base{padding-left:16px;padding-right:16px}}

/* fixes */
.banner{max-width:none;margin:0;border-radius:0;border-width:0 0 1px;text-align:center}
/* (rate-limiter / consistent-hashing / kafka header width now handled by body:has(.course)) */

/* =========================================================
   Chapter 1 lesson components
   ========================================================= */
.verdict.warn{color:var(--warn-t)}
.fb{border-left:4px solid var(--ok);background:#E9F6EF;border-radius:6px;padding:9px 12px;font-size:15px}
.fb.bad{border-color:var(--no);background:#FDECEC}
.opts{display:grid;gap:8px}
.opt{text-align:left;background:var(--sheet);border:1.5px solid var(--rule);color:var(--ink);border-radius:9px;padding:10px 12px;font:600 15px var(--body);cursor:pointer;overflow-wrap:anywhere}
.opt:hover:not([disabled]){border-color:var(--ink)}
.opt.right{border-color:var(--ok);background:#E9F6EF}
.opt.wrong{border-color:var(--no);background:#FDECEC}
.opt.dim{opacity:.55}
.opt[disabled]{cursor:default}
.qz{display:grid;gap:10px;padding:14px 0;border-top:1px solid var(--rule)}
.qz-q{font-weight:700;font-size:16px;display:flex;gap:10px;align-items:flex-start;overflow-wrap:anywhere}
.qz-q > :last-child{min-width:0}
.qz-n{flex:none;width:24px;height:24px;border-radius:7px;background:var(--ink);color:#fff;display:grid;place-items:center;font:800 12px var(--body)}
.qz-done{display:flex;gap:16px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--rule);padding-top:14px}
.qz-done .stack{flex:1;min-width:200px}

/* request path */
.hops{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hop{display:inline-flex;align-items:center;gap:7px;font:700 14px var(--body);color:var(--ink);background:var(--sheet);border:1.5px solid var(--rule);border-radius:10px;padding:9px 12px;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s}
.hop-dot{width:10px;height:10px;border-radius:50%;background:var(--c)}
.hop.seen{border-color:var(--c)}
.hop.on{border-color:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,transparent);transform:translateY(-2px)}
.hop-arrow{color:#9AA4B8;font-weight:700}
.hop-info{background:#F7F9FC;border:1px dashed var(--rule);border-radius:8px;padding:9px 12px;font-size:15px;min-height:42px}
.tline{display:flex;height:22px;border-radius:6px;overflow:hidden;background:#E4E8EF}
.tline span{display:block;height:100%;transition:width .3s}
.hoplog{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.hoplog li{display:flex;gap:10px;align-items:center;font-size:14px;padding:4px 0;border-bottom:1px dashed #E1E6EE}
.hoplog li b{margin-left:auto;font:600 13px var(--mono)}
.hoplog li.tot{font-weight:800;border-bottom:0}
.sw{width:10px;height:10px;border-radius:3px;flex:none}

/* stateless farm */
.farm{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:620px){.farm{grid-template-columns:1fr}}
.srv{border:1.5px solid var(--rule);border-radius:10px;background:#F7F9FC;padding:10px;display:grid;gap:8px;align-content:start;min-height:120px}
.srv.dead{background:repeating-linear-gradient(45deg,#FDECEC,#FDECEC 8px,#FBE1E1 8px,#FBE1E1 16px);border-color:#F2B8BA}
.srv-h{display:flex;justify-content:space-between;align-items:center}
.srv.dead .srv-h .small{color:var(--no-t);font-weight:700}
.mem{color:var(--muted);font-family:var(--mono);font-size:12px}
.users{display:flex;gap:6px;flex-wrap:wrap}
.user{font:600 13px var(--body);border-radius:999px;padding:3px 10px}
.user.in{background:#E9F6EF;color:var(--ok-t)}
.user.out{background:#FDECEC;color:var(--no-t)}
.redis{grid-column:1 / -1;display:flex;gap:10px;align-items:center;justify-content:center;border:1.5px solid #C2255C;background:#FCEBF1;border-radius:10px;padding:8px}

/* latency ladder */
.ladder{display:grid;gap:8px}
.lrow{display:grid;grid-template-columns:220px 1fr 110px;gap:10px;align-items:center}
@media (max-width:620px){.lrow{grid-template-columns:1fr 90px}.lrow .ltrack{grid-column:1 / -1;grid-row:2}}
.lname{font-weight:600;font-size:14px}
.ltrack{height:18px;background:#E4E8EF;border-radius:5px;overflow:hidden}
.lbar{height:100%;background:linear-gradient(90deg,#11955F,#2E5BFF 45%,#C2255C);border-radius:5px;transition:width .05s linear}
.lval{font:600 13px var(--mono);text-align:right}

/* estimator */
.est{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:18px}
@media (max-width:760px){.est{grid-template-columns:1fr}}
.est-in{display:grid;gap:12px;align-content:start}
.slider{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-weight:600;font-size:14px}
.slider input{grid-column:1 / -1;width:100%;accent-color:var(--token)}
.slider output{font:700 14px var(--mono);color:var(--token)}
.slider.wide{max-width:520px}
.est-out{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}
.tile{border:1px solid var(--rule);background:#F7F9FC;border-radius:10px;padding:10px 12px;display:grid;gap:2px}
.tile b{font:800 24px var(--display);font-stretch:110%}

/* scaling */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:760px){.vs{grid-template-columns:1fr}}
.vs-card{border:1px solid var(--rule);border-radius:12px;padding:14px;display:grid;gap:12px;align-content:start;background:#F7F9FC}
.machines{display:flex;justify-content:center;align-items:flex-end;min-height:110px}
.machines.grid{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start;align-content:flex-start;min-height:110px}
.mach{width:44px;height:44px;border-radius:8px;background:var(--ink);color:#fff;display:grid;place-items:center;font:700 12px var(--mono)}
.mach.big{width:calc(90px * var(--s));height:calc(70px * var(--s));align-content:center;gap:2px;font-family:var(--body)}
.mach.big span{font-size:11px;opacity:.75}
.mach.dead{background:#F2B8BA;color:var(--no-t);text-decoration:line-through}
.sizes{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.sizes button{font:700 13px var(--body);text-align:left;border:1.5px solid var(--rule);background:#fff;border-radius:8px;padding:6px 9px;cursor:pointer;display:grid}
.sizes button span{font:600 11px var(--mono);color:var(--muted)}
.sizes button.sel{border-color:var(--token);background:#E8EDFF}
.util{height:14px;background:#E4E8EF;border-radius:7px;overflow:hidden}
.util div{height:100%;transition:width .2s}
.vs-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.vs-foot .verdict{font-size:15px}
.fixes{display:grid;gap:8px}
.fix{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--rule);border-radius:10px;padding:10px 12px;cursor:pointer;background:#fff}
.fix input{width:18px;height:18px;margin-top:3px;accent-color:var(--ok)}
.fix div{display:grid;gap:2px}
.fix.bad .small{color:var(--no-t)}.fix.ok{border-color:#A9DCC4;background:#F1FAF5}.fix.ok .small{color:var(--ok-t)}
.readiness{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.readiness .bfill{transition:width .3s}

/* chapters */
.ways{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:760px){.ways{grid-template-columns:1fr}}
.way{border-radius:14px;padding:20px;display:grid;gap:10px;align-content:start}
.way.start{background:var(--token);color:#fff}
.way.start .muted{color:#DCE4FF}
.way.jump{background:var(--sheet);border:1px solid var(--rule)}
.way .btn.white{background:#fff;color:var(--token);border-color:#fff}
.jump-chips{display:flex;gap:8px;flex-wrap:wrap}
.jump-chips a{font:700 14px var(--body);text-decoration:none;color:var(--ink);border:1.5px solid var(--rule);border-radius:999px;padding:6px 12px;background:#F7F9FC}
.jump-chips a:hover{border-color:var(--ink)}
@media (min-width:641px){.chapter .lessons{padding-left:66px}} /* lesson numbers line up with the chapter title */
.lessons .soon-item{display:flex;gap:12px;align-items:center;padding:9px 10px;color:#8A93A6;font-size:15px}
.lessons .soon-item .tag{color:#8A93A6;border-color:#D5DAE3}
.lessons a .tag.quiz{color:var(--ok-t);background:#E8F6EF}
.track{font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--warn-t)}
.ol-ch{border-top:1px solid var(--rule);padding-top:6px}
.ol-ch summary{list-style:none;cursor:pointer;display:flex;gap:8px;align-items:center;padding:6px 8px;border-radius:8px;font:700 13px var(--body);color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.ol-ch summary::-webkit-details-marker{display:none}
.ol-ch summary:hover{background:#E4E8F0}
.ol-ch summary .cnt{margin-left:auto;font:600 11px var(--mono);text-transform:none;letter-spacing:0}
.ol-ch[open] summary{color:var(--ink)}
.ol-soonrow{display:flex;gap:10px;align-items:center;padding:6px 8px;font-size:14px;color:#8A93A6}
.ol-soonrow .ol-n{background:#E4E8EF;color:#8A93A6}
.ctrl button.small-btn{width:auto;height:34px;min-height:0;padding:0 12px;font:600 13px var(--body);margin-left:6px}
.ok-mark{color:var(--ok-t);font-weight:800}

/* run 0: lesson flow */
.site-head{position:sticky}
.readbar{height:3px;background:transparent;overflow:hidden}
.readbar span{display:block;height:100%;background:var(--token);transform:scaleX(0);transform-origin:left;transition:transform .1s linear}
.chip.strong{border-color:var(--token);color:var(--token);background:#EEF2FF}
.resume{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:#EEF2FF;border:1px solid #C3D0FF;border-radius:10px;padding:8px 12px;font-size:14px;max-width:900px}
.resume[hidden]{display:none}
.next-up{max-width:900px;margin-top:28px;background:var(--navy);color:#fff;border-radius:14px;padding:20px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center}
@media (max-width:640px){.next-up{grid-template-columns:1fr}}
.next-up h3{color:#fff;font-size:22px}
.next-up .muted{color:#AEB8D1}
.next-up .eyebrow{color:#9FB3FF}
.nu-main{display:grid;gap:6px}
.nu-steps{list-style:none;margin:6px 0 0;padding:0;display:flex;gap:6px 14px;flex-wrap:wrap}
.nu-steps a{color:#AEB8D1;text-decoration:none;font-size:13px;font-weight:600}
.nu-steps li.done a{color:#3DDC97}
.nu-cta{display:grid;gap:8px;justify-items:end}
@media (max-width:640px){.nu-cta{justify-items:stretch;text-align:center}}
.nu-cta a.small{color:#C9D1E6;display:inline-block;padding:6px 0}
.ol-topic li a.seen .dot{background:var(--ok);opacity:1;width:7px;height:7px}
.ol-topic li a.seen{color:var(--ink)}

/* run 1: less reading */
.lesson > header > .num{display:none}
.lesson > header{gap:10px!important}
.say{max-width:64ch;background:#FFF8E6;border:1px solid #F1D48C;border-left:4px solid var(--warn);border-radius:8px;padding:9px 12px;font-size:15px}
.say b{color:#8A5300}
.lesson .sheet > p:first-child{font-size:15px;color:var(--muted)}
@media (max-width:900px){
  .lesson > header .nav{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);padding-right:28px}
  .lesson > header .nav a{white-space:nowrap;font-size:13px;padding:4px 10px}
  .banner{font-size:12px;padding:5px 10px}
}

/* run 2: density + mobile */
.sim-ctrls{padding:2px 0}
@media (max-width:640px){
  .lesson .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .lesson .row > .tabs{width:0;min-width:100%}
  .lesson .tabs button{white-space:nowrap;flex:none}
  .ctrl button{width:40px;height:40px}
  .lesson .btn{min-height:42px}
  .lesson .sheet{padding:14px}
  .hop{padding:8px 10px;font-size:13px}
  .lesson h2{font-size:24px}
}
@media (max-width:640px){
  .sim-ctrls{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .sim-ctrls .btn{padding:8px 10px;font-size:14px}
  .sim-ctrls .ctrl{grid-column:1 / -1}
}

/* run 3: accessibility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;font-weight:700;text-decoration:none}
.skip:focus{top:10px}
summary:focus-visible,.opt:focus-visible,.fix:focus-within,.tok:focus-visible,[tabindex="-1"]:focus{outline:3px solid var(--token);outline-offset:2px}
.fb[tabindex="-1"]:focus{outline:none}
.lessons .soon-item,.ol-soonrow,.ol-soon span:not(.eyebrow){color:#6B7486}
.module.soon b{color:#5A6478}
@media (prefers-reduced-motion:reduce){.readbar span,.bar,.lbar,.util div{transition:none!important}}
#main:focus{outline:none}

/* run 4: design review UX */
.g-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.g-steps{list-style:none;margin:0;padding:0;display:flex;gap:6px}
.g-steps li span{display:grid;place-items:center;min-width:30px;height:30px;padding:0 6px;border-radius:8px;border:1.5px solid var(--rule);font:700 12px var(--mono);color:var(--muted);background:#fff}
.g-steps li.now span{border-color:var(--token);color:var(--token);background:#EEF2FF}
.g-steps li.done span{border-color:var(--ok);color:#fff;background:var(--ok)}
.chip.req{background:#FFF8E6;border-color:#F1D48C;color:#7A4A00}
.group{border:1px solid transparent;border-radius:10px;padding:8px 10px;margin:0 -10px;transition:background .15s,border-color .15s}
.group > b{display:flex;align-items:center;gap:8px}
.g-n{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:#E4E8EF;color:var(--muted);font:800 11px var(--body);letter-spacing:0}
.group.done .g-n{background:var(--ok);color:#fff}
.group.missing{border-color:#F2B8BA;background:#FFF4F4}
.group.missing .g-n{background:var(--no);color:#fff}
.g-bar{position:sticky;bottom:0;z-index:2;display:flex;gap:12px;align-items:center;justify-content:space-between;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-top:1px solid var(--rule);margin:0 -20px -20px;padding:12px 20px;border-radius:0 0 12px 12px}
.g-prog{display:grid;gap:4px;flex:1;max-width:280px;font-weight:600;font-size:13px;color:var(--muted)}
.g-prog .btrack{height:8px}
#gSubmit:not(.ready){background:#8FA6FF;border-color:#8FA6FF}
.better{display:inline-block;margin-top:6px;font:700 13px var(--body);color:var(--token);background:#EEF2FF;border-radius:6px;padding:2px 8px}
.g-summary{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.g-summary li{display:grid;grid-template-columns:minmax(0,220px) 1fr 40px;gap:10px;align-items:center;font-size:14px}
.g-summary li b{font:700 14px var(--mono);text-align:right}
@media (max-width:640px){.g-bar{margin:0 -14px -14px;padding:10px 14px}.g-summary li{grid-template-columns:1fr 40px}.g-summary li .btrack{grid-column:1 / -1;grid-row:2}}

/* run 5: auth UX */
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:64px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:#EEF2FF;color:var(--token);font:700 12px var(--body);border-radius:6px;padding:5px 9px;cursor:pointer}
.caps{color:var(--warn-t);font-weight:600}
.caps[hidden]{display:none}

/* run 6: consistency */
:root{--gap-1:6px;--gap-2:10px;--gap-3:14px;--gap-4:20px;--gap-5:28px;--gap-6:40px}
.sheet{gap:var(--gap-3)}
.lesson{gap:var(--gap-6)}
.stack{gap:var(--gap-2)}
.ic-lock{width:12px;height:12px;flex:none;fill:currentColor;stroke:currentColor;stroke-width:1.6}
.ic-lock path{fill:none}
.ltime{margin-left:auto;font:600 12px var(--mono);color:var(--muted)}
.lessons a .ltime + .tag{margin-left:10px}
.gate-preview{background:#fff;border:1px solid var(--rule);border-radius:10px;padding:12px 14px;display:grid;gap:6px}
/* one button scale everywhere */
.btn{min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn.small-btn{min-height:32px}
.chip{line-height:1.4}
a.btn{display:inline-flex}.btn.block,a.btn.block{display:flex;width:100%}

/* =========================================================
   Light theme (Nov 2): white surfaces, no dark bands
   ========================================================= */
:root{--paper:#FFFFFF;--sheet:#FFFFFF;--panel:#F7F9FC;--line:#E3E7EE}
html,body{background:#fff}
.site-head{background:rgba(255,255,255,.94);border-bottom-color:var(--line)}
.sheet{border-color:var(--line);box-shadow:0 1px 2px rgba(18,24,38,.04)}
/* hero */
.hero-band{background:radial-gradient(900px 340px at 85% 0%,rgba(46,91,255,.08),transparent 70%),linear-gradient(#fff,#F7F9FC);color:var(--ink);border-bottom:1px solid var(--line)}
.hero-band h1{color:var(--ink)}
.hero-band .crumbs{color:var(--muted)}
.lede{color:#3E475C}
.statrow{color:var(--muted)}.statrow b{color:var(--ink)}
.badge.ghost{color:var(--muted)}
.btn.ghost-dark{background:#fff;color:var(--ink);border-color:var(--rule)}
.btn.ghost-dark:hover{border-color:var(--ink)}
.inc-card{border:1px solid var(--line);box-shadow:0 12px 32px rgba(18,24,38,.08)}
.inc-card canvas{background:var(--panel);border-bottom:1px solid var(--line)}
/* light cards that used to be dark */
.cta-band{background:#F2F5FF;color:var(--ink);border:1px solid #D5DEFF}
.cta-band h2{color:var(--ink)}.cta-band .muted{color:var(--muted)}
.ol-cta{background:#F2F5FF;color:var(--ink);border:1px solid #D5DEFF}
.ol-cta .small{color:var(--muted)}
.next-up{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:0 8px 24px rgba(18,24,38,.06)}
.next-up h3{color:var(--ink)}.next-up .muted{color:var(--muted)}.next-up .eyebrow{color:var(--token)}
.nu-steps a{color:var(--muted)}.nu-steps li.done a{color:var(--ok-t)}
.nu-cta a.small{color:var(--token)}
.way.start{background:#F2F5FF;color:var(--ink);border:1px solid #D5DEFF}
.way.start h2{color:var(--ink)!important}
.way.start .muted{color:var(--muted)}
.way.start .eyebrow{color:var(--token)!important}
.way .btn.white{background:var(--token);color:#fff;border-color:var(--token)}
.outline{border-right:1px solid var(--line);padding-right:18px}
.ol-topic.on .ol-t{background:#F2F5FF;box-shadow:inset 0 0 0 1px #D5DEFF}
.module,.how-card,.tcard,.gate-preview,.cheat,.pg{border-color:var(--line)}
.site-foot{background:var(--panel);border-top-color:var(--line)}
.seq .lane{background:#EEF1F6;color:var(--ink);border-bottom:1px solid var(--line)}
canvas{background:var(--panel);border-color:var(--line)}
.g-bar{background:rgba(255,255,255,.97)}

/* rate limiter: intro + algorithm guide */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:900px){.why-grid{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.why-grid{grid-template-columns:1fr}}
.why{border:1px solid var(--line);border-radius:10px;padding:12px;display:grid;gap:4px;align-content:start;background:var(--panel)}
.why-ic{width:30px;height:30px;border-radius:8px;background:#EEF2FF;display:grid;place-items:center;font:800 15px var(--body);color:var(--token)}
.where{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:8px;align-items:stretch}
@media (max-width:760px){.where{grid-template-columns:1fr}.where-arrow{transform:rotate(90deg);justify-self:center}}
.where-step{border:1.5px solid var(--line);border-radius:10px;padding:12px;display:grid;gap:4px;align-content:start}
.where-step.no{border-style:dashed;background:#FFF7F7}
.where-step.no b{color:var(--no-t)}
.where-step.yes{background:#F4FBF7;border-color:#BFE5D1}
.where-arrow{align-self:center;color:#9AA4B8;font-weight:800}
.ask{margin:0;padding:0;list-style:none;counter-reset:a;display:grid;gap:6px}
.ask li{counter-increment:a;display:grid;grid-template-columns:28px 230px 1fr;gap:10px;align-items:baseline;padding:8px 10px;border:1px solid var(--line);border-radius:8px}
.ask li::before{content:counter(a);font:800 12px var(--mono);color:#fff;background:var(--ink);border-radius:6px;width:22px;height:22px;display:grid;place-items:center}
.ask li span{color:var(--muted);font-size:15px}
@media (max-width:760px){.ask li{grid-template-columns:28px 1fr}.ask li span{grid-column:2}}
.guide-box{border-top:1px solid var(--line);padding-top:14px;display:grid;gap:12px}
.guide-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px}
@media (max-width:860px){.guide-grid{grid-template-columns:1fr}}
.gl{font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.gl.ok{color:var(--ok-t)}.gl.bad{color:var(--no-t)}
.how-list{margin:0;padding-left:20px;display:grid;gap:6px;font-size:15px}
.code-light{background:var(--panel);color:var(--ink);border:1px solid var(--line);font-size:12.5px;line-height:1.55}
.pc ul{margin:4px 0 0;padding-left:18px;display:grid;gap:3px;font-size:15px}
.pc p{margin-top:4px}
.tbl-wrap{overflow-x:auto}
.pick{width:100%;border-collapse:collapse;font-size:14px;min-width:620px}
.pick th{text-align:left;font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line)}
.pick td{padding:10px;border-bottom:1px solid var(--line)}
.pick tr[data-k]{cursor:pointer}
.pick tr[data-k]:hover td{background:var(--panel)}
.pick tr.on td{background:#EEF2FF}
.pick td.g{color:var(--ok-t);font-weight:600}.pick td.r{color:var(--no-t);font-weight:600}
@media (max-width:460px){.why{grid-template-columns:30px 1fr;column-gap:10px;padding:10px}.why-ic{grid-row:span 2}}

/* rate limiter: definition + theory/design parts */
.def{font-size:19px;line-height:1.6;max-width:62ch;border-left:4px solid var(--token);padding:4px 0 4px 14px;color:#3E475C}
.def b{color:var(--ink)}
@media (max-width:640px){.def{font-size:17px}}
.part{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:12px;background:#F2F5FF;border:1px solid #D5DEFF}
.part > div{display:grid;gap:2px}
.part b{font:800 22px var(--display);font-stretch:110%}
.part-n{font:700 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--token);border-radius:6px;padding:4px 8px;white-space:nowrap}
/* the second part banner of any lesson (Design / Design review) is green, whatever its id */
#part-design,.part ~ .part{background:#F4FBF7;border-color:#BFE5D1}
#part-design .part-n,.part ~ .part .part-n{background:var(--ok-t)}
.how-first{display:grid;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.how-first .gl:last-child{color:var(--token)}
.def{display:grid;gap:2px;max-width:none;font-size:18px}
@media (max-width:640px){.part{flex-direction:column;align-items:flex-start;gap:6px;padding:12px 14px}.part b{font-size:20px}}

/* request flow: scenario cards + route */
.scen-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:640px){.scen-cards{grid-template-columns:1fr}}
.scen-card{display:grid;grid-template-columns:1fr auto;gap:2px 10px;text-align:left;border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:12px 14px;cursor:pointer;font:inherit;color:var(--ink)}
.scen-card:hover{border-color:#9AA4B8}
.scen-card[aria-selected="true"]{border-color:var(--token);background:#F2F5FF;box-shadow:inset 0 0 0 1px var(--token)}
.sc-name{font-weight:800;font-size:16px}
.sc-ms{font:800 20px var(--display);font-stretch:110%;color:var(--token);grid-row:span 2;align-self:center}
.sc-sub{font-size:13px;color:var(--muted)}
.sc-used{grid-column:1 / -1;font:600 11px var(--mono);color:var(--muted);letter-spacing:.04em;margin-top:4px}
.route-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;border-top:1px solid var(--line);padding-top:14px}
.route-head b{font-size:17px}
.route-total{display:grid;justify-items:end}
.route-total b{font:800 26px var(--display);font-stretch:110%}
.route{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.hop-row{display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:center;border:1.5px solid var(--line);border-left:5px solid var(--c);border-radius:10px;padding:9px 12px;background:#fff;transition:opacity .2s,background .2s}
.hop-n{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font:800 12px var(--mono);color:#fff;background:var(--c)}
.hop-main{display:grid;gap:1px}
.hop-main b{font-size:15px}
.hop-what{font-size:14px}
.hop-desc{color:var(--muted)}
.hop-ms{font:700 14px var(--mono);white-space:nowrap}
.hop-row.wait{opacity:.45}
.hop-row.now{background:#F2F5FF;box-shadow:0 0 0 3px rgba(46,91,255,.12)}
.hop-row.skipped{border-left-color:var(--line);background:var(--panel)}
.hop-row.skipped .hop-n{background:#C9D0DB}
.hop-row.skipped b{color:var(--muted);text-decoration:line-through;text-decoration-color:#B5BDCB}
.hop-row.skipped .hop-what{color:var(--muted)}
.skip-tag{font:600 11px var(--mono);color:var(--muted);border:1px dashed #B5BDCB;border-radius:5px;padding:2px 6px}
.hop-row.back{border-style:dashed;border-left-style:solid}
.route-total b,.sc-ms{white-space:nowrap}
@media (max-width:640px){
  .scen-card{padding:9px 12px}.sc-used{display:none}.sc-ms{font-size:18px}
  .hop-desc{display:none}
  .hop-row{grid-template-columns:26px 1fr auto;gap:10px;padding:8px 10px}
  .route-total b{font-size:22px}
}

/* declutter lesson header */
.lesson-top{gap:10px}
.meta-line{margin:0;font:600 13px var(--mono);color:var(--muted);display:flex;gap:2px 20px;flex-wrap:wrap;align-items:center;overflow:hidden}
/* separators sit in the gap; one that would start a wrapped line falls outside the box and is clipped */
.meta-line > *{position:relative;white-space:nowrap}
.meta-line > * + *::before{content:"·";position:absolute;left:-13px;color:#B5BDCB;font-weight:600}
.meta-line b{color:var(--token);font-weight:600}
.lesson-col{gap:10px}
.lesson > header{gap:12px!important}
.lesson > header h1{font-size:clamp(32px,3.6vw,46px)}
.goals{border:1px solid var(--line);border-radius:12px;padding:12px 16px;background:var(--panel);display:grid;gap:6px}
.goals ul{margin:0;padding:0;list-style:none;display:grid;gap:5px}
.goals li{position:relative;padding-left:24px;font-size:16px}
.goals li::before{content:"✓";position:absolute;left:0;top:0;color:var(--ok-t);font-weight:800}
/* "Start here": plain-language intro + key terms, shown on every lesson above the goals */
.intro{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fff;display:grid;gap:10px}
.intro .eyebrow{color:var(--token)}
.intro-plain{font-size:16px;line-height:1.6;max-width:none}
.concept{display:grid;gap:14px}
.cc-block{display:grid;gap:6px}
.cc-block h3{font:700 15px var(--body);font-stretch:100%;line-height:1.3}
.cc-block p{font-size:16px;line-height:1.6;max-width:none}
.cc-steps{margin:0;padding-left:0;list-style:none;counter-reset:cc;display:grid;gap:8px}
.cc-steps li{counter-increment:cc;display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start;font-size:16px;line-height:1.55}
.cc-steps li::before{content:counter(cc);width:24px;height:24px;border-radius:50%;background:#EEF2FF;color:var(--token);font:700 13px/24px var(--body);text-align:center;margin-top:1px}
.cc-example{background:#FFF8E6;border:1px solid #F1D48C;border-radius:10px;padding:10px 14px}
.cc-example h3{color:#8A5300}
.intro-plain{font-weight:600}
.terms-box summary{cursor:pointer;font-weight:700;font-size:14px}
.terms-box[open] summary{margin-bottom:10px}
.terms{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
@media (max-width:640px){.terms{grid-template-columns:1fr}}
.terms div{display:grid;gap:2px;align-content:start;border-top:1px solid var(--line);padding-top:8px}
.terms dt{font-weight:700;font-size:14px}
.terms dd{margin:0;font-size:14px;line-height:1.5;color:#3E475C}
.takeaway{margin:0 0 6px;font-size:15px;background:#FFF8E6;border:1px solid #F1D48C;border-radius:8px;padding:8px 12px;color:var(--ink)}
.takeaway b{color:#8A5300}
/* the section list lives in "On this page" when that column is visible */
@media (min-width:1221px){.ol-topic ul{display:none}}

/* ---- Where to start (run 7, learned from aced.io's "Where to start" table) ---- */
.wts{display:grid;gap:16px;border:1px solid var(--line,#E3E7EE);border-radius:16px;padding:24px;background:#fff}
.wts-head h2{margin:2px 0 4px}
.wts-head p{margin:0}
.wts-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.wts-tabs [role=tab]{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:2px;padding:12px 14px;border:1px solid var(--line,#E3E7EE);border-radius:10px;background:var(--panel,#F7F9FC);transition:border-color .15s,background .15s}
.wts-tabs [role=tab] b{font-size:15px;color:var(--ink)}
.wts-tabs [role=tab] span{font-size:13px;color:var(--muted)}
.wts-tabs [role=tab]:hover{border-color:#B9C6F5}
.wts-tabs [role=tab][aria-selected=true]{background:#F2F5FF;border-color:var(--token,#2E5BFF);box-shadow:0 0 0 1px var(--token,#2E5BFF) inset}
.wts-tabs [role=tab]:focus-visible{outline:2px solid var(--token,#2E5BFF);outline-offset:2px}
.wts-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:none}
.wts-steps a{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line,#E3E7EE);border-radius:12px;text-decoration:none;color:inherit}
.wts-steps a:hover{border-color:#B9C6F5;background:#FAFBFF}
.wts-n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#EEF2FF;color:var(--token,#2E5BFF);font-weight:700;font-size:14px}
.wts-steps li.done .wts-n{background:#E3F6EC;color:var(--ok-t)}
.wts-t{display:grid;gap:2px;min-width:0}
.wts-meta{display:flex;gap:8px;align-items:center;white-space:nowrap}
.wts-foot{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.wts-foot p{margin:0;flex:1 1 320px;color:var(--muted)}
.wts-foot p b{color:var(--ink)}
@media (max-width:760px){.wts{padding:18px}.wts-tabs{grid-template-columns:1fr}.wts-steps a{grid-template-columns:30px 1fr;align-items:start}.wts-meta{grid-column:2}.wts-foot .btn{width:100%;justify-content:center}}
.wts-panel{display:grid;gap:14px}
.wts-head h2{font-size:clamp(22px,3.2vw,34px);line-height:1.15}
@media (max-width:760px){.wts-tabs{grid-template-columns:repeat(3,1fr);gap:6px}.wts-tabs [role=tab]{padding:10px 8px;text-align:center}.wts-tabs [role=tab] b{font-size:13px;line-height:1.25}.wts-tabs [role=tab] span{display:none}.wts-meta{justify-content:flex-start}}
.wts-meta .ltime{margin:0!important;width:auto!important;min-width:0!important;text-align:left}

/* ---- Step controls (run 8, learned from educative.io step-by-step walkthroughs) ---- */
.stepper{display:inline-flex;align-items:center;gap:6px;margin-left:8px;flex-wrap:nowrap}
.stepper .btn.sm{padding:6px 10px;font-size:13px;min-height:32px}
.stepper .btn:disabled{opacity:.4;cursor:default}
.step-n{font:600 12px var(--mono);color:var(--muted);min-width:86px;text-align:center}
.seq .msg.cur,.msg.cur{outline:2px solid var(--token,#2E5BFF);outline-offset:1px;border-radius:6px}
@media (max-width:560px){.stepper{margin-left:0;width:100%;justify-content:space-between}}

/* Divider under the rate-limiter algorithm tabs (Nov 2) */
#algTabs{padding-bottom:16px;margin-bottom:4px;border-bottom:1px solid var(--line,#E3E7EE)}

/* Social sign-in buttons */
.social{display:grid;gap:8px}
.social-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%}
.social-btn svg{flex:none;color:var(--ink)}
.social-ic{width:18px;height:18px;flex:none;display:block;object-fit:contain}

/* ---- 2.1 Availability and the nines ---- */
.av-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.av-table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.av-table th,.av-table td{padding:9px 10px;border-bottom:1px solid var(--line,#E3E7EE);text-align:left;white-space:nowrap}
.av-table td{font-family:var(--mono);font-size:13px}
.av-table thead th{font-size:12px;color:var(--muted);font-weight:600}
.av-table tbody tr{cursor:pointer}
.av-table tbody tr:hover{background:#FAFBFF}
.av-table tbody tr.sel{background:#F2F5FF;box-shadow:inset 3px 0 0 var(--token)}
.av-table tbody tr:focus-visible{outline:2px solid var(--token);outline-offset:-2px}
.av-budget{margin:0;padding:12px 14px;border-radius:10px;background:#FFF8EC;border:1px solid #F3DEB4}
.av-result{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;padding:12px 14px;border-radius:10px;background:var(--panel,#F7F9FC);border:1px solid var(--line,#E3E7EE)}
.av-result .big{font-size:22px}
.av-chain{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}
.av-comp{flex:1 1 180px;display:grid;gap:8px;padding:12px;border:1px solid var(--line,#E3E7EE);border-radius:12px;background:#fff}
.av-comp select{margin-left:6px;font:inherit;padding:4px 6px;border-radius:6px;border:1px solid var(--line,#E3E7EE)}
.av-arrow{align-self:center;color:var(--muted);font-size:20px}
.av-formula{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.av-formula>div{display:grid;gap:2px;padding:12px 14px;border-radius:10px;border:1px solid var(--line,#E3E7EE);background:var(--panel,#F7F9FC)}
.av-formula>div.warn{background:#FFF4F2;border-color:#F3C2BC}
.av-formula b{font-size:16px;font-family:var(--mono)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;cursor:pointer}
.check input{margin-top:3px}
#avCv{width:100%;display:block}
.av-legend{display:flex;flex-wrap:wrap;gap:6px 18px}
.av-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.precise summary{cursor:pointer}
/* a closed <details> still lays out its (empty) content slot as a grid item; drop the gap so the card hugs its summary */
details.sheet:not([open]){gap:0}
.precise ul{margin:10px 0 0;padding-left:18px;display:grid;gap:8px;font-size:14px}
.av-moves{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.av-moves .sheet{display:grid;gap:6px;align-content:start}
.av-moves p{margin:0}
details summary{cursor:pointer;font-weight:600;font-size:14px;padding:6px 0}
details p{margin:4px 0 10px}
@media (max-width:900px){.av-moves{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.av-moves{grid-template-columns:1fr}.av-formula{grid-template-columns:1fr}.av-arrow{display:none}}

/* ---- 2.2 CAP theorem ---- */
.cap-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cap-modes [role=radio],.cap-pickrow [role=radio]{all:unset;box-sizing:border-box;cursor:pointer;border:1px solid var(--line,#E3E7EE);border-radius:10px;background:var(--panel,#F7F9FC)}
.cap-modes [role=radio]{display:grid;gap:2px;padding:12px 14px}
.cap-modes [role=radio] b{font-size:16px}
.cap-modes [role=radio] span{font-size:13px;color:var(--muted)}
.cap-modes [role=radio][aria-checked=true],.cap-pickrow [role=radio][aria-checked=true]{background:#F2F5FF;border-color:var(--token);box-shadow:inset 0 0 0 1px var(--token)}
.cap-modes [role=radio]:focus-visible,.cap-pickrow [role=radio]:focus-visible{outline:2px solid var(--token);outline-offset:2px}
#capCv{width:100%;display:block;background:var(--panel,#F7F9FC);border-radius:12px}
.cap-ctrl{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cap-who{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line,#E3E7EE);border-radius:12px}
.cap-who>b{width:100%;display:flex;gap:8px;align-items:baseline}
.cap-who>span{width:100%;margin-top:-6px}
.cap-score{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px 18px}
.cap-score > span{display:flex;flex-direction:column;gap:2px;font:500 12px/1.35 var(--body);color:var(--muted);padding:1px 0 1px 10px;border:0;border-left:3px solid var(--line);border-radius:0;background:none}
.cap-score > span b{font:700 16px/1.3 var(--mono);color:var(--ink)}
.cap-score > span:has(b.bad){border-left-color:var(--no)}.cap-score > span:has(b.warn){border-left-color:var(--warn)}
.cap-score b.warn{color:var(--warn-t,#995C00)}
.cap-score b.bad{color:var(--no-t,#CB252B)}
.cap-log{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px}
.cap-log li{padding:8px 12px;border-radius:8px;background:var(--panel,#F7F9FC);border-left:3px solid var(--rule,#C9D0DB)}
.cap-log li.ok{border-left-color:var(--ok,#11955F)}
.cap-log li.warn{border-left-color:var(--warn,#C77700);background:#FFF8EC}
.cap-log li.bad{border-left-color:var(--no,#DC3D43);background:#FFF4F2}
.cap-pac{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cap-pac>div{display:grid;gap:6px;align-content:start;padding:12px;border:1px solid var(--line,#E3E7EE);border-radius:12px}
.cap-pac p{margin:0}
.cap-pac .chip{justify-self:start}
.cap-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cap-card{display:grid;gap:10px;align-content:start;padding:14px;border:1px solid var(--line,#E3E7EE);border-radius:12px;background:#fff}
.cap-card.right{border-color:#9ED9BC;background:#F3FBF7}
.cap-card.wrong{border-color:#F3C2BC;background:#FFF7F5}
.cap-card p{margin:0}
.cap-pickrow{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cap-pickrow [role=radio]{padding:8px;text-align:center;font-size:13px;font-weight:600}
@media (max-width:900px){.cap-ctrl,.cap-pac,.cap-cards{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.cap-modes,.cap-ctrl,.cap-pac,.cap-cards{grid-template-columns:1fr}}
@media (max-width:640px){.cap-ctrl{gap:6px}.cap-who{flex-wrap:nowrap;padding:8px 10px;gap:6px}.cap-who>b{width:auto;flex:1}.cap-who>span{display:none}.cap-who .btn{padding:8px 12px;min-height:38px;font-size:14px}.cap-modes [role=radio]{padding:10px 12px}}

/* ---- 2.3 Consistency models ---- */
.cm-ladder{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cm-ladder li{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:start;padding:12px 14px;border:1px solid var(--line,#E3E7EE);border-radius:12px;background:#fff}
.cm-rung{align-self:stretch;border-radius:8px;background:color-mix(in srgb,var(--token,#2E5BFF) calc(100% - var(--k)*20%),#E8EDFB);color:#fff;font:700 11px var(--mono);display:grid;place-items:center;text-transform:uppercase;min-height:44px}
.cm-ladder li:nth-child(n+4) .cm-rung{color:#1D3FC4}
.cm-ladder p{margin:2px 0 0}
.ok-t{color:var(--ok-t,#0E7A4D);font-weight:600}
.cm-pol{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.cm-pol [role=radio]{all:unset;box-sizing:border-box;cursor:pointer;border:1px solid var(--line,#E3E7EE);border-radius:10px;background:var(--panel,#F7F9FC)}
.cm-opts [role=radio]{all:unset;display:inline-flex;align-items:center;justify-content:center;min-height:40px;box-sizing:border-box;padding:7px 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font:600 14px/1.25 var(--body);cursor:pointer}
.cm-pol [role=radio]{display:grid;gap:2px;padding:10px 12px}
.cm-pol [role=radio] b{font-size:14px}
.cm-pol [role=radio] span{font:600 11px var(--mono);color:var(--muted)}
.cm-pol [role=radio][aria-checked=true]{background:#F2F5FF;border-color:var(--token);box-shadow:inset 0 0 0 1px var(--token)}
.cm-opts [role=radio][aria-checked=true]{background:var(--token);border-color:var(--token);color:#fff}
.cm-pol [role=radio]:focus-visible,.cm-opts [role=radio]:focus-visible{outline:2px solid var(--token);outline-offset:2px}
#cmCv{width:100%;display:block;background:var(--panel,#F7F9FC);border-radius:12px}
.cm-act{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cm-act>div{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line,#E3E7EE);border-radius:12px}
.cm-act>div>b{min-width:48px}
.cm-score{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px 18px}
.cm-score > span{display:flex;flex-direction:column;gap:2px;font:500 12px/1.35 var(--body);color:var(--muted);padding:1px 0 1px 10px;border:0;border-left:3px solid var(--line);border-radius:0;background:none}
.cm-score > span b{font:700 16px/1.3 var(--mono);color:var(--ink)}
.cm-score > span:has(b.bad){border-left-color:var(--no)}.cm-score > span:has(b.warn){border-left-color:var(--warn)}
.cm-score b.warn{color:var(--warn-t,#995C00)}
.cm-score b.bad{color:var(--no-t,#CB252B)}
.cm-cmp td.cm-bad{color:var(--no-t,#CB252B);font-weight:700}
.cm-cmp td.cm-ok{color:var(--ok-t,#0E7A4D);font-weight:700}
.cm-cmp{min-width:600px}
.cm-shards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cm-shard{display:grid;gap:8px;padding:12px;border:1px solid var(--line,#E3E7EE);border-radius:12px;background:var(--panel,#F7F9FC)}
.cm-node{display:grid;gap:6px;padding:10px;border-radius:10px;background:#fff;border:1px solid var(--line,#E3E7EE);min-height:64px;align-content:start}
.cm-node.rep{border-style:dashed}
.cm-msg{display:inline-block;padding:6px 10px;border-radius:8px;font-size:13px;font-weight:600;margin:2px 6px 2px 0}
.cm-msg.q{background:#EEF2FF;color:#2742B8}
.cm-msg.a{background:#E7F6EE;color:#0E7A4E}
.cm-msg.a.held{background:#FFF4E0;color:#9A5B00}
.cm-msg.missing{background:#FDECEC;color:var(--no-t,#CB252B);font-style:italic}
.cm-dave{padding:12px 14px;border-radius:12px;border:1px solid var(--line,#E3E7EE);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cm-dave.bad{background:#FFF4F2;border-color:#F3C2BC}
.cm-dave.ok{background:#F3FBF7;border-color:#9ED9BC}
.cm-flag{font:700 11px var(--mono);text-transform:uppercase;color:var(--no-t,#CB252B);margin-left:auto}
.cm-flag.ok{color:var(--ok-t,#0E7A4D)}
.cm-say{margin:0;font-size:15px;min-height:3em}
.cm-opts{display:flex;flex-wrap:wrap;gap:6px}
.cm-opts [role=radio]{min-height:34px;padding:5px 12px;font-size:13px}
@media (max-width:1000px){.cm-pol{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.cm-pol{grid-template-columns:1fr 1fr}.cm-act,.cm-shards{grid-template-columns:1fr}.cm-ladder li{grid-template-columns:1fr}.cm-rung{min-height:24px}}

/* ---- 2.4 Load balancing ---- */
.lb-algos{display:flex;flex-wrap:wrap;gap:8px}
.lb-algos [role=radio]{all:unset;display:inline-flex;align-items:center;justify-content:center;min-height:40px;box-sizing:border-box;padding:7px 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font:600 14px/1.25 var(--body);cursor:pointer}
.lb-algos [role=radio][aria-checked=true]{background:var(--token,#2E5BFF);border-color:var(--token,#2E5BFF);color:#fff}
.lb-algos [role=radio]:focus-visible{outline:2px solid var(--token);outline-offset:2px}
#lbCv{width:100%;display:block;background:var(--panel,#F7F9FC);border-radius:12px}
.lb-ctrl{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:14px;align-items:center}
.lb-metrics{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px 18px}
.lb-metrics > span{display:flex;flex-direction:column;gap:2px;font:500 12px/1.35 var(--body);color:var(--muted);padding:1px 0 1px 10px;border:0;border-left:3px solid var(--line);border-radius:0;background:none}
.lb-metrics > span b{font:700 16px/1.3 var(--mono);color:var(--ink)}
.lb-metrics > span:has(b.bad){border-left-color:var(--no)}.lb-metrics > span:has(b.warn){border-left-color:var(--warn)}
.lb-metrics b.warn{color:var(--warn-t,#995C00)}
.lb-metrics b.bad{color:var(--no-t,#CB252B)}
.lb-tbl{min-width:640px}
.lb-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lb-two .sheet{display:grid;gap:6px;align-content:start}
.lb-two .chip{justify-self:start}
.lb-two p{margin:0}
.lb-hc{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:760px){.lb-ctrl,.lb-two,.lb-hc{grid-template-columns:1fr}}
.lb-tbl td.cm-bad{color:var(--no-t,#CB252B);font-weight:700}
.lb-tbl td.cm-ok{color:var(--ok-t,#0E7A4D);font-weight:700}

/* ---- 3.1 SQL vs NoSQL ---- */
.sn-fams{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.sn-fam{display:grid;gap:6px;align-content:start;padding:12px;border:1px solid var(--line,#E3E7EE);border-radius:12px;background:#fff}
.sn-fam p{margin:0}
.sn-bad{color:var(--no-t,#CB252B);font-weight:600}
.sn-qs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.sn-qs [role=radio]{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line,#E3E7EE);border-radius:10px;background:var(--panel,#F7F9FC)}
.sn-qs [role=radio] b{font-size:14px}
.sn-qs [role=radio] span{font:600 11px var(--mono);color:var(--muted)}
.sn-qs [role=radio][aria-checked=true]{background:#F2F5FF;border-color:var(--token);box-shadow:inset 0 0 0 1px var(--token)}
.sn-qs [role=radio]:focus-visible{outline:2px solid var(--token);outline-offset:2px}
.sn-side-by-side{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.sn-side{display:grid;gap:10px;padding:12px;border:1px solid var(--line,#E3E7EE);border-radius:12px;background:var(--panel,#F7F9FC);min-width:0}
.sn-side > *{min-width:0}
.sn-count{font:600 12px var(--mono);color:var(--muted)}
.sn-count b{color:var(--ink)}
.sn-count b.warn{color:var(--warn-t,#995C00)}
.sn-code{display:block;font:500 11.5px var(--mono);background:#121826;color:#E3E7EE;padding:8px 10px;border-radius:8px;white-space:pre-wrap;word-break:break-word}
.sn-tbl{display:grid;gap:4px;margin-top:6px;min-width:0;overflow-x:auto}
.sn-tname{font:700 11px var(--mono);color:var(--muted);text-transform:uppercase}
.sn-tbl table{border-collapse:collapse;font:500 12px var(--mono);background:#fff;border:1px solid var(--line,#E3E7EE);border-radius:8px;width:100%}
.sn-tbl th,.sn-tbl td{padding:4px 8px;text-align:left;border-bottom:1px solid #EEF0F4;white-space:nowrap}
.sn-tbl th{color:var(--muted);font-weight:600;font-size:11px}
.sn-tbl tr.sn-r td{background:#E8EEFF}
.sn-tbl tr.sn-w td{background:#FFF1D6}
.sn-tbl tr.sn-now td{box-shadow:inset 0 2px 0 var(--token),inset 0 -2px 0 var(--token)}
.sn-docs{display:grid;gap:6px}
.sn-doc{margin:0;font:500 11.5px/1.45 var(--mono);color:var(--ink,#121826);background:#fff;border:1px solid var(--line,#E3E7EE);border-radius:8px;padding:8px 10px;white-space:pre-wrap;word-break:break-word;position:relative}
.sn-doc.sn-r{background:#E8EEFF;border-color:#B9C8FF}
.sn-doc.sn-w{background:#FFF1D6;border-color:#F3D08A}
.sn-doc.sn-now{box-shadow:0 0 0 2px var(--token)}
.sn-node{display:inline-block;font:700 10px var(--mono);color:#fff;background:#5A6478;border-radius:4px;padding:1px 5px;margin-right:6px}
.sn-step{margin:0;font-size:14px;min-height:2.6em}
.sn-verdict{margin:0;padding:12px 14px;border-radius:10px;background:#F2F5FF;border:1px solid #D5DEFF}
.sn-verdict:empty{display:none}
@media (max-width:1100px){.sn-fams{grid-template-columns:repeat(3,1fr)}.sn-qs{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.sn-side-by-side{grid-template-columns:1fr}}
@media (max-width:640px){.sn-fams,.sn-qs{grid-template-columns:1fr 1fr}}

/* ---- 3.2 Indexes ---- */
.ix-ops{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ix-ops label{display:flex;gap:6px;align-items:center;font-weight:600;font-size:14px}
.ix-ops input[type=number]{width:64px;font:600 14px var(--mono);padding:6px 8px;border:1px solid var(--line,#E3E7EE);border-radius:8px}
.ix-canvas-wrap{overflow-x:auto;background:var(--panel,#F7F9FC);border-radius:12px;-webkit-overflow-scrolling:touch}
#ixCv{display:block}
.ix-say{margin:0;font-size:15px;min-height:2.6em}
.ix-scale{display:grid;gap:8px;padding:12px 14px;border-radius:10px;background:#F2F5FF;border:1px solid #D5DEFF}
.ix-bars{display:grid;gap:8px}
.ix-bar{display:grid;grid-template-columns:150px 1fr 90px;gap:6px 12px;align-items:center;padding:10px 12px;border:1px solid var(--line,#E3E7EE);border-radius:10px;background:#fff}
.ix-bar>div{height:14px;background:#EEF0F4;border-radius:7px;overflow:hidden}
.ix-bar i{display:block;height:100%;background:#9AA4B8;border-radius:7px}
.ix-bar.win{border-color:#9ED9BC;background:#F3FBF7}
.ix-bar.win i{background:var(--ok,#11955F)}
.ix-bar b{font:700 13px var(--mono);text-align:right}
.ix-bar .small{grid-column:1 / -1}
.ix-qs{display:grid;gap:6px}
.ix-qs [role=radio]{all:unset;box-sizing:border-box;cursor:pointer;padding:8px 12px;border:1px solid var(--line,#E3E7EE);border-radius:10px;background:var(--panel,#F7F9FC)}
.ix-qs [role=radio] code{font:500 12.5px var(--mono);white-space:normal;word-break:break-word;background:none;padding:0}
.ix-qs [role=radio][aria-checked=true]{background:#F2F5FF;border-color:var(--token);box-shadow:inset 0 0 0 1px var(--token)}
.ix-qs [role=radio]:focus-visible{outline:2px solid var(--token);outline-offset:2px}
.ix-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ix-col{display:grid;gap:2px;padding:10px 12px;border-radius:10px;border:2px solid var(--line,#E3E7EE);background:#fff}
.ix-col b{font-family:var(--mono)}
.ix-col.seek{border-color:var(--ok,#11955F);background:#F3FBF7}
.ix-col.range{border-color:var(--token,#2E5BFF);background:#F2F5FF}
.ix-col.filter{border-color:var(--warn,#C77700);background:#FFF8EC}
.ix-col.none{opacity:.55}
@media (max-width:640px){.ix-bar{grid-template-columns:1fr 70px}.ix-bar>div{grid-column:1 / -1;grid-row:2}.ix-cols{grid-template-columns:1fr}}
.ix-col.sort{border-color:#9C36B5;background:#F8F0FC}

/* ---- 3.3 Replication ---- */
.rp-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rp-modes [role=radio]{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line,#E3E7EE);border-radius:10px;background:var(--panel,#F7F9FC)}
.rp-modes [role=radio] b{font-size:15px}
.rp-modes [role=radio] span{font:600 11px var(--mono);color:var(--muted)}
.rp-modes [role=radio][aria-checked=true]{background:#F2F5FF;border-color:var(--token);box-shadow:inset 0 0 0 1px var(--token)}
.rp-modes [role=radio]:focus-visible{outline:2px solid var(--token);outline-offset:2px}
.rp-ctrl{display:grid;grid-template-columns:1.4fr auto auto;gap:16px;align-items:center}
#rpCv{width:100%;display:block;background:#fff;border:1px solid var(--line,#E3E7EE);border-radius:12px}
.rp-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px 18px}
.rp-stats > span{display:flex;flex-direction:column;gap:2px;font:500 12px/1.35 var(--body);color:var(--muted);padding:1px 0 1px 10px;border:0;border-left:3px solid var(--line);border-radius:0;background:none}
.rp-stats > span b{font:700 16px/1.3 var(--mono);color:var(--ink)}
.rp-stats > span:has(b.bad){border-left-color:var(--no)}.rp-stats > span:has(b.warn){border-left-color:var(--warn)}
.rp-stats b.bad{color:var(--no-t,#CB252B)}
.rp-result{margin:0;font-size:15px}
.rp-result:empty{display:none}
.rp-bad{color:var(--no-t,#CB252B)}
.rp-ok{color:var(--ok-t,#0E7A4D)}
.rp-tbl{min-width:620px}
.rp-tbl td.cm-bad{color:var(--no-t,#CB252B);font-weight:700}
.rp-tbl td.cm-ok{color:var(--ok-t,#0E7A4D);font-weight:700}
.rp-topos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rp-topos .sheet{display:grid;gap:6px;align-content:start}
.rp-topos p{margin:0}
.rp-topos .chip{justify-self:start}
.rp-q-ctrl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rp-nodes{display:flex;flex-wrap:wrap;gap:8px}
.rp-node{display:grid;place-items:center;gap:2px;width:84px;height:64px;border-radius:12px;border:2px solid var(--line,#E3E7EE);background:#fff;font:800 18px var(--mono)}
.rp-node span{font:600 10px var(--sans,inherit);color:var(--muted)}
.rp-node.w{border-color:var(--token);background:#F2F5FF}
.rp-node.r{border-color:var(--ok,#11955F);background:#F3FBF7}
.rp-node.both{border-color:#9C36B5;background:#F8F0FC}
@media (max-width:760px){.rp-modes,.rp-topos,.rp-q-ctrl{grid-template-columns:1fr}.rp-ctrl{grid-template-columns:1fr}.rp-node{width:64px;height:56px;font-size:15px}}

/* ---- 3.4 Sharding ---- */
.sh-strats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sh-strats [role=radio]{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line,#E3E7EE);border-radius:10px;background:var(--panel,#F7F9FC)}
.sh-strats [role=radio] b{font-size:14px}
.sh-strats [role=radio] span{font:600 11px var(--mono);color:var(--muted)}
.sh-strats [role=radio][aria-checked=true]{background:#F2F5FF;border-color:var(--token);box-shadow:inset 0 0 0 1px var(--token)}
.sh-strats [role=radio]:focus-visible{outline:2px solid var(--token);outline-offset:2px}
.sh-ctrl{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center}
.sh-chart{display:grid;grid-template-rows:170px auto;gap:4px;padding:10px 10px 6px;border:1px solid var(--line,#E3E7EE);border-radius:12px;background:#fff}
.sh-plot{position:relative;display:flex;gap:6px;align-items:flex-end;height:170px}
.sh-labels{display:flex;gap:6px}
.sh-labels span{flex:1;text-align:center;font:600 10px var(--mono);color:var(--muted);min-width:0}
.sh-bars{flex:1;display:flex;gap:2px;align-items:flex-end;height:100%;min-width:0}
.sh-bars i{flex:1;border-radius:4px 4px 0 0;min-height:1px;transition:height .3s}
.sh-bars i.w,.sh-legend i.w{background:var(--token,#2E5BFF)}
.sh-bars i.s,.sh-legend i.s{background:#B9C6F5}
.sh-fair{position:absolute;left:0;right:0;border-top:2px dashed #9AA4B8;pointer-events:none;z-index:1}
.sh-legend{display:flex;flex-wrap:wrap;gap:6px 18px}
.sh-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.sh-metrics{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px 18px}
.sh-metrics > span{display:flex;flex-direction:column;gap:2px;font:500 12px/1.35 var(--body);color:var(--muted);padding:1px 0 1px 10px;border:0;border-left:3px solid var(--line);border-radius:0;background:none}
.sh-metrics > span b{font:700 16px/1.3 var(--mono);color:var(--ink)}
.sh-metrics > span:has(b.bad){border-left-color:var(--no)}.sh-metrics > span:has(b.warn){border-left-color:var(--warn)}
.sh-metrics b.warn{color:var(--warn-t,#995C00)}
.sh-metrics b.bad{color:var(--no-t,#CB252B)}
.sh-say{margin:0;padding:12px 14px;border-radius:10px;background:#F2F5FF;border:1px solid #D5DEFF}
.sh-tbl{min-width:640px}
.sh-tbl tr.sel{background:#F2F5FF}
.sh-tbl td.cm-bad{color:var(--no-t,#CB252B);font-weight:700}
.sh-tbl td.cm-ok{color:var(--ok-t,#0E7A4D);font-weight:700}
@media (max-width:900px){.sh-strats{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.sh-ctrl{grid-template-columns:1fr}.sh-plot,.sh-labels{gap:3px}.sh-chart{padding:8px 6px 6px}}

/* ---- 4.1 Caching and CDNs ---- */
#caCv,#hrCv{width:100%;display:block;background:#fff;border:1px solid var(--line,#E3E7EE);border-radius:12px}
.ca-tbl{min-width:560px}
.ca-tbl td.cm-ok{color:var(--ok-t,#0E7A4D);font-weight:700}
.ca-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:0}
.ca-three{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ca-three .sheet{display:grid;gap:6px;align-content:start}
.ca-three p{margin:0}
.ca-three .chip{justify-self:start}
.ca-race{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;min-height:72px}
.ca-actor{display:grid;gap:4px;align-content:start;padding:10px 12px;border:1px solid var(--line,#E3E7EE);border-radius:10px;background:#fff}
.ca-actor span{font:600 13px var(--mono);min-height:1.3em}
.ca-actor.bad{border-color:#F3C2BC;background:#FFF4F2}
.ca-actor.bad span{color:var(--no-t,#CB252B)}
.ca-fixes{display:flex;flex-wrap:wrap;gap:8px}
.ca-fixes [role=radio]{all:unset;display:inline-flex;align-items:center;justify-content:center;min-height:40px;box-sizing:border-box;padding:7px 14px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font:600 14px/1.25 var(--body);cursor:pointer}
.ca-fixes [role=radio][aria-checked=true]{background:var(--token,#2E5BFF);border-color:var(--token,#2E5BFF);color:#fff}
.ca-fixes [role=radio]:focus-visible{outline:2px solid var(--token);outline-offset:2px}
.ca-cdn-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.ca-sel{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px}
.ca-sel select{font:inherit;padding:6px 8px;border-radius:8px;border:1px solid var(--line,#E3E7EE)}
@media (max-width:760px){.ca-three,.ca-race,.ca-cdn-opts{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ca-three,.ca-race,.ca-cdn-opts{grid-template-columns:1fr}}
.ca-tbl th,.ca-tbl td{white-space:normal}

/* ---- 4.3 Message queues ---- */
.mq-ctrl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mq-toggles{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center}
#mqCv,#mqDepth{width:100%;display:block;background:#fff;border:1px solid var(--line,#E3E7EE);border-radius:12px}
.mq-tbl{min-width:620px}
.mq-tbl th,.mq-tbl td{white-space:normal}
.mq-tbl td.cm-bad{color:var(--no-t,#CB252B);font-weight:700}
.mq-tbl td.cm-ok{color:var(--ok-t,#0E7A4D);font-weight:700}
.mq-pat{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mq-pat [role=radio]{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line,#E3E7EE);border-radius:10px;background:var(--panel,#F7F9FC)}
.mq-pat [role=radio] span{font:600 11px var(--mono);color:var(--muted)}
.mq-pat [role=radio][aria-checked=true]{background:#F2F5FF;border-color:var(--token);box-shadow:inset 0 0 0 1px var(--token)}
.mq-pat [role=radio]:focus-visible{outline:2px solid var(--token);outline-offset:2px}
.mq-fan{display:grid;grid-template-columns:auto auto 1fr;gap:12px;align-items:center}
.mq-fbox{padding:14px;border-radius:12px;background:#F2F5FF;border:1px solid #D5DEFF;font:700 13px var(--mono);text-align:center}
.mq-farrow{font-size:22px;color:var(--muted)}
.mq-fsubs{display:grid;gap:8px}
.mq-fsub{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line,#E3E7EE);border-radius:10px;background:#fff;transition:background .3s}
.mq-fsub span{font:600 12px var(--mono);color:var(--muted)}
.mq-fsub.hit{background:#E8EEFF;border-color:var(--token)}
@media (max-width:760px){.mq-ctrl{grid-template-columns:1fr}.mq-fan{grid-template-columns:1fr}.mq-farrow{display:none}}

/* ---- 5.1 Timeouts, retries and idempotency ---- */
#toCv,#rtCv{width:100%;display:block;background:#fff;border:1px solid var(--line,#E3E7EE);border-radius:12px}
.rt-tbl{min-width:620px}
.rt-tbl th,.rt-tbl td{white-space:normal}
.rt-tbl tr.sel{background:#F2F5FF}
.rt-tbl td.cm-bad{color:var(--no-t,#CB252B);font-weight:700}
.rt-tbl td.cm-ok{color:var(--ok-t,#0E7A4D);font-weight:700}
.rt-idem{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;min-height:72px}
@media (max-width:760px){.rt-idem{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.rt-idem{grid-template-columns:1fr}}

/* ---- 5.2 Circuit breakers ---- */
.cb-opts{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center}
#cbCv{width:100%;display:block;background:#fff;border:1px solid var(--line,#E3E7EE);border-radius:12px}
.cb-sm{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cb-st{flex:1 1 160px;display:grid;gap:2px;padding:10px 12px;border:2px solid var(--line,#E3E7EE);border-radius:10px;background:#fff;transition:opacity .2s}
.cb-st span{font-size:12px;color:var(--muted)}
.cb-st:not(.on){background:#F7F9FC;border-style:dashed}
.cb-st:not(.on) b{color:var(--muted)}
.cb-st.on{opacity:1}
.cb-st.closed.on{border-color:var(--ok,#11955F);background:#F3FBF7}
.cb-st.open.on{border-color:var(--no,#DC3D43);background:#FFF4F2}
.cb-st.half.on{border-color:var(--warn,#C77700);background:#FFF8EC}
.cb-arrow{color:var(--muted);font-size:18px}
.cb-tbl{min-width:640px}
.cb-tbl th,.cb-tbl td{white-space:normal}
.cb-tbl tr.sel{background:#F2F5FF}
.cb-tbl td.cm-bad,.cb-bad{color:var(--no-t,#CB252B);font-weight:700}
.cb-tbl td.cm-ok{color:var(--ok-t,#0E7A4D);font-weight:700}
@media (max-width:640px){.cb-arrow{display:none}.cb-st{flex-basis:100%}}

/* ---- 5.3 Observability ---- */
#obCv,#obSloCv{width:100%;display:block;background:#fff;border:1px solid var(--line,#E3E7EE);border-radius:12px}
.ob-red{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ob-red>div{display:grid;gap:4px;padding:12px;border-radius:10px;background:var(--panel,#F7F9FC);border:1px solid var(--line,#E3E7EE)}
.ob-tbl{min-width:520px}
.ob-tbl th,.ob-tbl td{white-space:normal}
.ob-tbl td.cm-bad{color:var(--no-t,#CB252B);font-weight:700}
.ob-tbl td.cm-ok{color:var(--ok-t,#0E7A4D);font-weight:700}
.ob-tbl tr.ob-sum th{font-weight:700}
.ob-trace{display:grid;gap:4px}
.ob-row{all:unset;box-sizing:border-box;display:grid;grid-template-columns:minmax(120px,210px) 1fr 64px;gap:10px;align-items:center;padding:6px 8px;border-radius:8px;cursor:pointer;font-size:13px}
.ob-row.root{cursor:default;font-weight:700}
button.ob-row:hover{background:#F7F9FC}
button.ob-row:focus-visible{outline:2px solid var(--token);outline-offset:1px}
.ob-row.picked{background:#F2F5FF;box-shadow:inset 0 0 0 1px var(--token)}
.ob-row.answer .ob-track i{background:var(--ok,#11955F)}
.ob-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob-track{position:relative;height:16px;background:#F2F4F7;border-radius:4px}
.ob-track i{position:absolute;top:0;bottom:0;background:#7F98FF;border-radius:4px}
.ob-row.root .ob-track i{background:#9AA4B8}
.ob-track b{position:absolute;top:3px;bottom:3px;background:rgba(255,255,255,.75);border-radius:2px}
.ob-ms{font:600 12px var(--mono);text-align:right}
@media (max-width:640px){.ob-red{grid-template-columns:1fr}.ob-row{grid-template-columns:1fr 54px;grid-template-areas:"n m" "t t"}.ob-name{grid-area:n}.ob-ms{grid-area:m}.ob-track{grid-area:t}}

/* ---------- 6.1 URL shortener ---------- */
.us-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.us-list{margin:0;padding-left:18px;display:grid;gap:4px}
.us-ctrl{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 20px;align-items:end}
.us-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.us-nums>div{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line,#E3E7EE);border-radius:10px;background:#fff}
.us-nums b{font:700 18px var(--mono);color:var(--ink)}
pre.us-code{margin:0;background:var(--panel,#F7F9FC);color:var(--ink,#0F1729);border:1px solid var(--line,#E3E7EE);border-radius:10px;padding:12px;font:500 12.5px/1.5 var(--mono);white-space:pre-wrap;word-break:break-word}
.us-svg{overflow-x:auto;-webkit-overflow-scrolling:touch}
.us-svg svg{display:block;width:100%;height:auto}
@media (max-width:640px){.us-svg svg{min-width:600px}}
.us-edge{stroke:#C9CFDA;stroke-width:1.5}
.us-edge.on{stroke:var(--token,#2E5BFF);stroke-width:2.5}
.us-box rect{fill:#fff;stroke:#C9CFDA;stroke-width:1.5}
.us-box text{font:600 12.5px var(--sans,system-ui);fill:var(--muted,#5B6475)}
.us-box.on rect{fill:#F2F5FF;stroke:var(--token,#2E5BFF);stroke-width:2}
.us-box.on text{fill:var(--ink,#0F1729)}
.us-codes{margin:8px 0 0;padding-left:22px;display:grid;gap:6px}
.us-codes li{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.us-codes .small{overflow-wrap:anywhere}
code.us-c{font:700 14px var(--mono);color:var(--token,#2E5BFF);background:#F2F5FF;padding:2px 8px;border-radius:6px}
.us-codes .chip{background:#FDECEC;color:var(--no-t,#CB252B)}
.us-tbl td{white-space:normal}
.us-tbl th{white-space:normal;text-align:left;width:38%}
@media (max-width:640px){.us-two{grid-template-columns:1fr}.us-nums{grid-template-columns:1fr 1fr}.us-nums b{font-size:16px}}

/* ---------- 6.2 Chat app ---------- */
.ct-tbl td,.ct-tbl th{white-space:normal;vertical-align:top}
.ct-tbl td:nth-child(2),.ct-tbl td:nth-child(3),.ct-tbl td:nth-child(4){font:600 13px var(--mono);white-space:nowrap}
.ct-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;align-items:center}
.ct-opts .btn{justify-self:start}
.ct-lanes{display:grid;gap:10px}
.ct-row{display:flex;flex-wrap:wrap;gap:6px;min-height:34px;padding:8px;border-radius:10px;background:var(--panel,#F7F9FC);border:1px solid var(--line,#E3E7EE)}
.ct-m{font:700 13px var(--mono);padding:4px 9px;border-radius:14px;background:#fff;border:1px solid #C9D0DB;color:var(--ink,#121826)}
#ctBob .ct-m{background:#EAF7F0;border-color:#A9DCC4}
#ctBob .ct-m.dup{background:#FDECEC;border-color:#F5C2C3;color:var(--no-t,#CB252B)}
#ctBob .ct-m.late{background:#FFF4E0;border-color:#F2D29B;color:var(--warn-t,#995C00)}
.ct-log{margin:8px 0 0;padding-left:22px;display:grid;gap:2px;max-height:260px;overflow:auto;font-family:var(--mono)}
.ct-strip{display:grid;grid-template-columns:96px 1fr;gap:6px 10px;align-items:center}
.ct-bar{position:relative;height:18px;border-radius:9px;background:#BFE7D2;overflow:hidden}
.ct-bar i{position:absolute;top:0;bottom:0;background:var(--no,#DC3D43)}
#ctShown{background:#11955F}
.ct-axis{display:flex;justify-content:space-between}
@media (max-width:640px){.ct-opts{grid-template-columns:1fr}.ct-strip{grid-template-columns:70px 1fr}}
.ct-tbl td:last-child{font:400 13.5px/1.45 var(--sans,system-ui);min-width:220px}
.ct-tbl th{font-size:12.5px}

/* ---------- 6.3 News feed ---------- */
.nf-chart svg{display:block;width:100%;height:auto;font:500 11px var(--mono);fill:var(--muted,#5A6478)}
.nf-grid{stroke:#E6E9EF;stroke-width:1}
.nf-w{fill:none;stroke:#E8590C;stroke-width:2.5}
.nf-r{fill:none;stroke:var(--token,#2E5BFF);stroke-width:2.5}
.nf-cur{stroke:var(--ink,#121826);stroke-width:1.5;stroke-dasharray:4 3}
.nf-k{display:inline-block;width:14px;height:3px;border-radius:2px;vertical-align:middle;margin-right:6px}
.nf-k.w{background:#E8590C}.nf-k.r{background:var(--token,#2E5BFF)}
.ct-m.nf-new{background:#EEF2FF;border-color:#B9C7FF;color:var(--token,#2E5BFF)}
#nfP2 .ct-m.ok{background:#EAF7F0;border-color:#A9DCC4}
#nfP2 .ct-m.dup{background:#FDECEC;border-color:#F5C2C3;color:var(--no-t,#CB252B)}

/* ---------- 6.4 Payments ledger ---------- */
.pl-acts{display:flex;flex-wrap:wrap;gap:8px}
.pl-acts .btn{padding:8px 14px;font-size:14px}
.pl-acts .pl-off{opacity:.7;border-style:dashed}
.pl-sm{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pl-st{font:600 12.5px var(--mono);padding:4px 10px;border-radius:14px;border:1px solid #C9D0DB;background:#fff;color:var(--muted,#5A6478)}
.pl-st.end{border-style:dashed}
.pl-st.on{background:var(--token,#2E5BFF);border-color:var(--token,#2E5BFF);color:#fff;border-style:solid}
.pl-arrow{color:#C9D0DB}
.pl-tbl td,.pl-tbl th{white-space:normal;vertical-align:top}
.pl-tbl td{font:600 13px var(--mono)}
.pl-tbl .pl-sum th,.pl-tbl .pl-sum td{border-top:2px solid var(--ink,#121826)}
.pl-recon{padding:12px 14px;border-radius:10px;border:1px solid var(--line,#E3E7EE);background:#fff}
.pl-bad{color:var(--no-t,#CB252B)}
@media (max-width:640px){#plBal th:nth-child(2),#plBal td:nth-child(2){display:none}.pl-tbl td{font-size:12px}}

/* ---------- 3.6 Key-value store ---------- */
.kv-map td,.kv-map th{white-space:normal}
.kv-nodes{display:flex;flex-wrap:wrap;gap:8px}
.kv-node{display:grid;justify-items:center;gap:2px;min-width:72px;padding:8px 10px;border-radius:10px;border:1px solid #C9D0DB;background:#fff;color:var(--muted,#5A6478)}
.kv-node b{font:700 16px var(--mono)}
.kv-node.spare{border-style:dashed}
.kv-node.on{border-color:var(--token,#2E5BFF);background:#F2F5FF;color:var(--ink,#121826)}
.kv-node.down{border-color:#F5C2C3;background:#FDECEC;color:var(--no-t,#CB252B)}
.kv-steps{margin:0;padding-left:22px;display:grid;gap:8px}
.kv-step{display:grid;gap:3px;padding:8px 10px;border-radius:10px;border:1px solid var(--line,#E3E7EE);background:#fff}
.kv-step.cur{border-color:var(--token,#2E5BFF);background:#F7F9FF}
.kv-step code{font:600 13px var(--mono);background:#F2F5FF;padding:1px 6px;border-radius:5px;white-space:normal}
.kv-ck{font:700 12.5px var(--mono);color:var(--token,#2E5BFF);margin-left:6px}
.kv-grid{display:grid;grid-template-columns:repeat(32,1fr);gap:3px}
.kv-grid i{display:block;aspect-ratio:1;border-radius:3px;background:var(--token,#2E5BFF)}
.kv-grid i.dead{background:var(--no,#DC3D43);opacity:1}
.kv-mk circle{fill:#fff;stroke:#C9D0DB;stroke-width:1.5}
.kv-mk.vis circle{fill:#EAF7F0;stroke:var(--ok,#11955F)}
.kv-mk.bad circle{fill:#FDECEC;stroke:var(--no,#DC3D43);stroke-width:2}
.kv-mk text,.kv-cap{font:500 10px var(--mono);fill:var(--muted,#5A6478)}
@media (max-width:640px){.kv-grid{grid-template-columns:repeat(16,1fr)}}

/* ---------- wide screens and zoomed-out browsers ----------
   One width for the lesson grid, the header and the footer so their edges line up,
   and let the layout grow on large or zoomed-out screens instead of leaving empty bands. */
:root{--course:1440px}
.course{max-width:var(--course)}
body:has(.course) .site-head .in,body:has(.course) .foot-in,body:has(.course) .foot-base{max-width:var(--course)}
.lb-speed{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
@media (min-width:1600px){
  :root{--maxw:1400px;--course:1680px}
  .course{grid-template-columns:290px minmax(0,1fr) 280px;gap:48px}
  .lesson,.pager{max-width:1060px}
}
@media (min-width:2100px){
  :root{--maxw:1560px;--course:1920px}
  .course{grid-template-columns:300px minmax(0,1fr) 300px;gap:56px}
  .lesson,.pager{max-width:1200px}
}

/* ---------- 3.7 Unique IDs ---------- */
.id-tbl th{white-space:normal;width:38%}.id-tbl td{white-space:normal}
.id-samples{display:grid;gap:6px}
.id-samples>div{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;padding:8px 10px;border-radius:8px;background:var(--panel,#F7F9FC);border:1px solid var(--line,#E3E7EE)}
.id-samples code,.id-out code{font:600 13px var(--mono);word-break:break-all;background:none;padding:0}
.id-bits{display:flex;gap:2px;border-radius:8px;overflow:hidden}
.id-seg{display:grid;gap:2px;min-width:0;padding:6px 4px;color:#fff;text-align:center}
.id-sb{font:600 11px/1.3 var(--mono);word-break:break-all;letter-spacing:.02em}
.id-sl{font:600 11px var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.id-seg.sign{background:#5A6478}.id-seg.ts{background:var(--token,#2E5BFF)}.id-seg.dc{background:#0B7285}.id-seg.mc{background:#9C36B5}.id-seg.sq{background:#B54509}
.id-seg.sign .id-sl,.id-seg.dc .id-sl{font-size:10px}
.id-out{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline}
.id-dec{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.id-dec input{flex:1;min-width:200px;font:600 14px var(--mono);padding:8px 10px;border:1px solid var(--rule);border-radius:8px}
.id-ms{display:grid;grid-template-columns:repeat(20,1fr);gap:3px;align-items:end;height:90px}
.id-cell{display:grid;grid-template-rows:1fr auto;height:100%;gap:2px}
.id-cell i{align-self:end;display:block;background:var(--ok,#11955F);border-radius:3px 3px 0 0;min-height:2px}
.id-cell.dup i{background:var(--no,#DC3D43)}.id-cell.ref i{background:var(--warn,#C77700)}
.id-cell span{font:600 10px var(--mono);color:var(--muted);text-align:center}
.id-lanes{display:grid;gap:6px}
.id-lane{display:grid;grid-template-columns:170px 1fr;gap:10px;align-items:center}
.id-lane>div{position:relative;height:16px;background:var(--panel,#F7F9FC);border:1px solid var(--line,#E3E7EE);border-radius:8px}
.id-lane i{position:absolute;top:3px;width:2px;height:8px;background:var(--token,#2E5BFF);border-radius:1px}
@media (max-width:640px){.id-sb{display:none}.id-seg{padding:8px 2px}.id-lane{grid-template-columns:1fr}.id-ms span{font-size:8px}}
.id-seg{flex-basis:0!important;min-width:46px}
.id-seg.sign{min-width:22px}
.id-legend{display:flex;flex-wrap:wrap;gap:4px 16px}
.id-legend span{display:inline-flex;gap:6px;align-items:center}
.id-k{display:inline-block;width:10px;height:10px;border-radius:3px}
.id-k.sign{background:#5A6478}.id-k.ts{background:var(--token,#2E5BFF)}.id-k.dc{background:#0B7285}.id-k.mc{background:#9C36B5}.id-k.sq{background:#B54509}

/* ---------- 6.5 Notifications ---------- */
.nt-day{position:relative;height:56px;border-radius:10px;background:var(--panel,#F7F9FC);border:1px solid var(--line,#E3E7EE);overflow:hidden}
.nt-night{position:absolute;top:0;bottom:0;background:#E7EBF7}
.nt-day i{position:absolute;top:10px;width:3px;height:36px;border-radius:2px;background:var(--token,#2E5BFF);margin-left:-1px}
.nt-day i.promo{background:#E8590C}.nt-day i.security{background:var(--no,#DC3D43);width:5px}
.nt-day i.digest,.nt-day i.morning{background:var(--ok,#11955F);width:5px}
.nt-day i.chat{background:#9C36B5}
.nt-axis{display:flex;justify-content:space-between}
.nt-leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin:0 4px 0 8px;vertical-align:-1px}
.nt-leg i.b{background:var(--token,#2E5BFF)}.nt-leg i.c{background:#9C36B5}.nt-leg i.p{background:#E8590C}.nt-leg i.g{background:var(--ok,#11955F)}.nt-leg i.r{background:var(--no,#DC3D43)}

/* ---------- 6.6 Web crawler ---------- */
.wc-tbl td,.wc-tbl th{white-space:normal;vertical-align:top}
.wc-tbl td:nth-child(2){word-break:break-all}
.wc-tbl code{font:600 12.5px var(--mono);background:none;padding:0}

/* ---------- 6.7 Autocomplete ---------- */
.ac-in{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.ac-in input#acQ{font:600 16px var(--mono);padding:8px 12px;border:1.5px solid var(--token,#2E5BFF);border-radius:8px;min-width:220px;flex:1;max-width:360px}
.ac-walk{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ac-node{font:600 13px var(--mono);padding:4px 10px;border-radius:14px;border:1px solid #C9D0DB;background:#fff}
.ac-node.end{background:var(--token,#2E5BFF);border-color:var(--token,#2E5BFF);color:#fff}
.ac-node.miss{background:#FDECEC;border-color:#F5C2C3;color:var(--no-t,#CB252B)}
.ac-arrow{color:#9AA4B8}
.ac-sugg{margin:0;padding:0;list-style:none;display:grid;gap:4px;max-width:420px}
.ac-sugg li{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:8px;background:#fff;border:1px solid var(--line,#E3E7EE);font-size:15px}
.ac-trend svg{display:block;width:100%;height:auto}
.ac-bar{fill:#9AA4B8}.ac-track{fill:#EEF0F4}.ac-on{fill:var(--token,#2E5BFF)}.ac-live{fill:var(--ok,#11955F)}
.ac-lab{font:600 11px var(--body);fill:var(--muted,#5A6478)}
@media (max-width:640px){.ac-trend svg{min-width:560px}}

/* ---------- 6.8 Video streaming ---------- */
.vs-chart svg{display:block;width:100%;height:auto;font:500 11px var(--mono);fill:var(--muted,#5A6478)}
.vs-bw{fill:none;stroke:var(--ink,#121826);stroke-width:1.8}
.vs-buf{fill:none;stroke:var(--ok,#11955F);stroke-width:2.2}
.vs-q{fill:var(--token,#2E5BFF)}.vs-q.q0{opacity:.35}.vs-q.q1{opacity:.5}.vs-q.q2{opacity:.65}.vs-q.q3{opacity:.8}.vs-q.q4{opacity:.95}
.vs-best{fill:var(--ok,#11955F);stroke:#fff;stroke-width:2}
@media (max-width:640px){.vs-chart svg{min-width:560px}}

/* ---------- 6.9 File sync ---------- */
.fs-strips{display:grid;gap:10px}
.fs-strip{display:grid;gap:4px}
.fs-strip>div{position:relative;height:26px;border-radius:6px;background:#EAF7F0;overflow:hidden}
.fs-strip i{position:absolute;top:0;bottom:0;border-right:1px solid #fff;background:#BFE7D2}
.fs-strip i.new{background:var(--no,#DC3D43)}
.kv-step.bad{border-color:#F5C2C3;background:#FDECEC}

/* ---------- 7.1 Object-oriented design ---------- */
.oo-flow{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;counter-reset:oo}
.oo-flow li{counter-increment:oo;display:grid;gap:3px;padding:10px 12px;border-radius:10px;background:#fff;border:1px solid var(--line,#E3E7EE);font-size:13.5px}
.oo-flow li b::before{content:counter(oo) "  ";font:700 12px var(--mono);color:var(--token,#2E5BFF)}
.oo-flow li span{color:var(--muted,#5A6478)}
.oo-req{font-size:17px;line-height:1.8;max-width:none;margin:0}
.oo-req mark{padding:1px 4px;border-radius:5px}
.oo-req mark.oo-n{background:#E8EDFF;color:#1D3FC4;font-weight:700}
.oo-req mark.oo-v{background:#EAF7F0;color:var(--ok-t,#0E7A4D);font-weight:700}
.oo-code{min-width:0}
.oo-title{font:700 12px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:4px}
pre.oo-pre{margin:0;background:#F7F9FC;color:var(--ink,#121826);border:1px solid var(--line,#E3E7EE);border-radius:10px;padding:10px 0;font:500 12.5px/1.55 var(--mono);overflow-x:auto;-webkit-overflow-scrolling:touch}
.oo-l{display:inline-block;min-width:100%;padding:0 14px;box-sizing:border-box;white-space:pre}
.oo-l.add{background:#E6F6EE;box-shadow:inset 3px 0 0 var(--ok,#11955F)}
.oo-l.chg{background:#FFF4E0;box-shadow:inset 3px 0 0 var(--warn,#C77700)}
.oo-l.bad{background:#FDECEC;box-shadow:inset 3px 0 0 var(--no,#DC3D43)}
.oo-l .k{color:#9C36B5;font-weight:700}
.oo-l .c{color:#606A7D;font-style:italic}
#ooCards .cm-opts{grid-template-columns:repeat(5,1fr)}

/* ---------- 7.2 Design patterns ---------- */
.dp-fam{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.dp-log{margin:0;padding-left:30px;max-height:none}
.dp-log li.bad{color:var(--no-t,#CB252B)}.dp-log li.warn{color:var(--warn-t,#995C00)}.dp-log li.ok{color:var(--ink,#121826)}
.dp-doc{min-height:52px;padding:12px 14px;border-radius:10px;border:1px solid var(--line,#E3E7EE);background:#fff;font:500 18px/1.5 var(--body);word-break:break-word}
.dp-caret{display:inline-block;width:2px;height:1.1em;background:var(--token,#2E5BFF);vertical-align:-3px;margin-left:1px;animation:dpBlink 1s steps(1) infinite}
@keyframes dpBlink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.dp-caret{animation:none}}
.dp-stack{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:4px}
.dp-stack li{font:600 13px var(--mono);padding:6px 10px;border-radius:8px;background:var(--panel,#F7F9FC);border:1px solid var(--line,#E3E7EE)}
.dp-stack li.top{border-color:var(--token,#2E5BFF);background:#F2F5FF}
.dp-why{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dp-why p{margin:4px 0 0}
#dpCmdActs .btn:disabled{opacity:.4;cursor:default}
@media (max-width:760px){.dp-fam,.dp-why{grid-template-columns:1fr}}

/* ---------- 7.3 UML ---------- */
.um-anatomy{display:grid;grid-template-columns:260px 1fr;gap:16px;align-items:center}
.um-anatomy svg{width:100%;height:auto;display:block}
.um-box{fill:#fff;stroke:var(--ink,#121826);stroke-width:1.4}
.um-div{stroke:var(--ink,#121826);stroke-width:1}
.um-name{font:700 12.5px var(--body);fill:var(--ink,#121826)}
.um-t{font:500 11.5px var(--mono);fill:var(--ink,#121826)}
.um-line{stroke:var(--ink,#121826);stroke-width:1.6;fill:none}
.um-line.dash{stroke-dasharray:6 4}
.um-mk-open{fill:none;stroke:var(--ink,#121826);stroke-width:1.6}
.um-mk-hollow{fill:#fff;stroke:var(--ink,#121826);stroke-width:1.4}
.um-mk-fill{fill:var(--ink,#121826);stroke:var(--ink,#121826);stroke-width:1.4}
.um-mult{font:600 11px var(--mono);fill:var(--token,#2E5BFF)}
.um-cap{font:600 11px var(--body);fill:var(--muted,#5A6478)}
.um-legend{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.um-legend [role=radio]{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:4px;justify-items:center;padding:8px 10px;border:1px solid var(--line,#E3E7EE);border-radius:10px;background:#fff;font-weight:600;font-size:13.5px;text-align:center}
.um-legend [role=radio] svg{width:70px;height:16px}
.um-legend [role=radio][aria-checked=true]{border-color:var(--token,#2E5BFF);background:#F2F5FF;box-shadow:inset 0 0 0 1px var(--token,#2E5BFF)}
.um-legend [role=radio]:focus-visible{outline:2px solid var(--token);outline-offset:2px}
.um-pair{align-items:start}
.um-svg svg{display:block;width:100%;height:auto}
.um-seq svg{display:block;width:100%;height:auto}
.um-life{stroke:#9AA4B8;stroke-dasharray:4 4}
.um-msg{stroke:var(--ink,#121826);stroke-width:1.5}
.um-msg.ret{stroke-dasharray:5 4}
.um-msg.cur{stroke:var(--token,#2E5BFF);stroke-width:2.2}
.um-msg.off{opacity:.25}
.um-msg-t{font:600 11.5px var(--mono);fill:var(--ink,#121826)}
.um-msg-t.off{opacity:.3}
.um-alt{fill:none;stroke:#9C36B5;stroke-width:1.2}
.um-alt-t{font:700 11px var(--mono);fill:#9C36B5}
.um-alt-g{font:600 11px var(--mono);fill:#9AA4B8}.um-alt-g.on{fill:#9C36B5}
.um-alt-sep{stroke:#9C36B5;stroke-dasharray:4 3}
.um-init{fill:var(--ink,#121826)}
.um-tr{stroke:#9AA4B8;stroke-width:1.5}
.um-tr.on{stroke:var(--token,#2E5BFF);stroke-width:2.2}
.um-sm-mk{fill:#9AA4B8}
.um-tr-t{font:600 11px var(--mono);fill:var(--muted,#5A6478)}.um-tr-t.on{fill:var(--token,#2E5BFF)}
.um-st rect{fill:#fff;stroke:var(--ink,#121826);stroke-width:1.4}
.um-st rect.um-fin{fill:none;stroke-width:1}
.um-st text{font:700 12.5px var(--body);fill:var(--ink,#121826)}
.um-st.on rect{fill:#F2F5FF;stroke:var(--token,#2E5BFF);stroke-width:2}
.um-opts{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.um-anatomy{grid-template-columns:1fr}.um-anatomy svg{max-width:280px}.um-legend{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.um-seq svg{min-width:620px}.um-svg svg{min-width:0}#umState svg{min-width:620px}}
.um-pair{grid-template-columns:1fr}
.um-legend [role=radio] svg{width:90px;height:20px}
.um-svg svg{max-width:640px}

/* ---------- 1.1 Request flow ---------- */
.rf-cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.rf-cards .sc-ms{grid-row:auto;grid-column:1 / -1;font-size:18px}
.rf-cards .scen-card{grid-template-columns:1fr}
.rf-skipped{margin:0}
.rf-note{margin:0;padding:10px 12px;border-radius:10px;background:var(--panel);border:1px solid var(--line);font-size:15px;max-width:none}
.rf-note.bad{background:#FFF5F5;border-color:#F5C2C3}.rf-note.good{background:#F3FBF7;border-color:#9ED9BC}
.rf-break{display:grid;gap:8px;padding:14px;border-radius:12px;border:1.5px solid var(--line)}
.rf-break p{max-width:none}
.rf-break.bad{background:#FFF5F5;border-color:#F5C2C3}.rf-break.bad .eyebrow{color:var(--no-t)}
.rf-break.good{background:#F3FBF7;border-color:#9ED9BC}.rf-break.good .eyebrow{color:var(--ok-t)}
#brTabs{margin-bottom:2px}
.rf-token{border-color:var(--token);background:#F2F5FF}
.user.warn{background:#FFF4DB;color:var(--warn-t)}
.rf-sketch{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
@media (max-width:640px){.rf-sketch{grid-template-columns:1fr}}
.rf-tier{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;padding:10px;border:1px dashed var(--rule);border-radius:10px;background:var(--panel)}
.rf-tier .eyebrow{flex:1 1 100%;color:var(--muted)}
.rf-box{font:600 13px var(--body);padding:6px 10px;border-radius:8px;border:1.5px dashed var(--rule);background:#fff;color:var(--muted);transition:background .2s,color .2s,border-color .2s}
.rf-box.on{color:var(--ink);border:1.5px solid var(--ink)}
.rf-box.cur{background:var(--token);border-color:var(--token);color:#fff}
.rf-say{margin:0;padding-left:22px;display:grid;gap:6px;font-size:15px}
.rf-say li{color:var(--muted)}
.rf-say li::marker{font-weight:700}
.rf-say li.done{color:var(--ink)}
.rf-say li.cur{font-weight:700}
.rf-say li.cur::marker{color:var(--token)}
.rf-paths{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:640px){.rf-paths{grid-template-columns:1fr}}
.rf-pathcol{display:grid;gap:4px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#fff}
.rf-toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
@media (max-width:640px){.rf-toggles{grid-template-columns:1fr}}
.rf-track{position:relative;display:flex;height:28px;border-radius:8px;background:#EEF0F4;margin-top:22px}
.rf-track span{display:block;height:100%;transition:width .3s}
.rf-track span:first-child{border-radius:8px 0 0 8px}
.rf-target{position:absolute;top:-6px;bottom:-6px;border-left:2px dashed var(--ink)}
.rf-target em{position:absolute;bottom:100%;left:0;transform:translateX(-50%);font:600 11px var(--mono);font-style:normal;white-space:nowrap;color:var(--ink);padding-bottom:2px}

/* ---------- privacy and terms pages ---------- */
.legal{max-width:760px;margin:0 auto;padding:36px 24px 70px;display:grid;gap:12px;align-content:start}
.legal h1{font-size:clamp(34px,6vw,48px)}
.legal h2{font-size:22px;margin-top:18px}
.legal h3{font-size:16px;margin-top:6px}
.legal p,.legal li{font-size:16px;line-height:1.6;max-width:68ch}
.legal ul{margin:0;padding-left:20px;display:grid;gap:6px}
.legal a{color:var(--token)}
.legal-sum{background:#F2F5FF;border:1px solid #D5DEFF;border-radius:10px;padding:12px 14px}
.legal-foot{margin-top:20px;border-top:1px solid var(--line);padding-top:14px}
.foot-base a{color:inherit}
@media (max-width:640px){.legal{padding:24px 16px 56px}}

/* consistent hashing: coloured key next to server names (text stays ink for contrast) */
.ch-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:1px}

/* account: your data */
.acct-data{margin-top:var(--gap-5,28px);padding-top:var(--gap-4,20px);border-top:1px solid var(--line,#E3E7EE)}
.acct-data h3{margin-bottom:6px}
.btn.danger{color:var(--no-t);border-color:#F2B8BA}
.btn.danger-solid{background:var(--no-t);border-color:var(--no-t);color:#fff}
.acct-del{margin-top:12px;padding:14px;border:1px solid #F2B8BA;border-radius:10px;background:#FFF7F7;display:grid;gap:8px}
.acct-del[hidden]{display:none}
.acct-del input{font:inherit;padding:10px 12px;border:1px solid var(--rule);border-radius:8px;max-width:220px}
.acct-del p{margin:0}
/* account page on phones: long emails wrap, score column never pushes the page sideways */
#acctEmail{overflow-wrap:anywhere;font-size:clamp(18px,5vw,34px);font-stretch:100%}
.auth-wrap .sheet{min-width:0;box-sizing:border-box}
.auth-wrap .brow{grid-template-columns:minmax(0,120px) minmax(0,1fr) max-content}
@media (max-width:640px){.auth-wrap .brow{grid-template-columns:minmax(0,1fr) 64px max-content}}
.auth-wrap .bval{white-space:nowrap}

/* ---------- lesson grids follow the lesson column, not the viewport ----------
   The column is ~600 px wide at 1280 (outline + table of contents beside it), so 4- and 5-up card rows
   sized by viewport media queries came out cramped. Container queries size them by the column itself. */
.lesson{container:lesson / inline-size}
@container lesson (max-width:760px){
  .why-grid,.av-moves,.sh-strats{grid-template-columns:1fr 1fr}
  /* five cards: wrap and let the last row stretch, so no empty cell is left */
  .cm-pol,.sn-fams,.sn-qs{display:flex;flex-wrap:wrap}
  .cm-pol > *,.sn-fams > *,.sn-qs > *,.cm-pol > [role=radio],.sn-qs > [role=radio]{flex:1 1 160px}
  .av-chain{flex-direction:column}
  .av-arrow{transform:rotate(90deg)}
}
@container lesson (max-width:520px){
  .why-grid,.av-moves,.sh-strats{grid-template-columns:1fr}
  .cm-pol > *,.sn-fams > *,.sn-qs > *,.cm-pol > [role=radio],.sn-qs > [role=radio]{flex-basis:140px}
}

/* ---------- account: progress by chapter (ap-) ---------- */
.acct .ap-sum{display:grid;gap:10px;margin:6px 0 18px}
.acct .ap-count{margin:0;font-size:16px}
.acct .ap-count b{font:700 18px var(--mono)}
.acct .ap-sum .btn{justify-self:start;max-width:100%;white-space:normal;text-align:left}
.ap-chapters{display:grid;gap:10px;margin-bottom:18px}
.ap-ch{border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.ap-ch summary{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;font-weight:700;list-style-position:inside}
.ap-ch summary{list-style:none}.ap-ch summary::-webkit-details-marker{display:none}
.ap-chn::after{content:" ▸";color:var(--muted)}.ap-ch[open] .ap-chn::after{content:" ▾"}
.ap-cht{min-width:0;overflow-wrap:anywhere}
.ap-chn{font:600 13px var(--mono);color:var(--muted);white-space:nowrap}
.ap-list{list-style:none;margin:0;padding:0 6px 8px}
.ap-list a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:9px 8px;border-radius:8px;color:var(--ink);text-decoration:none}
.ap-list a:hover{background:#F2F5FF}
.ap-list a:focus-visible{outline:2px solid var(--token);outline-offset:-2px}
.ap-t{min-width:0;overflow-wrap:anywhere}
.ap-t .ln{font:600 12px var(--mono);color:var(--muted);margin-right:8px}
.ap-s{font:600 12px var(--mono);color:var(--muted);text-align:right;white-space:nowrap}
.ap-done .ap-s{color:var(--ok-t)}
.ap-open .ap-s{color:var(--token)}
.ap-bar{grid-column:1/-1;height:4px;border-radius:2px;background:#E4E8EF;overflow:hidden}
.ap-bar i{display:block;height:100%;background:var(--token)}
.ap-done .ap-bar i{background:var(--ok)}
.ap-none .ap-bar{background:#EEF1F5}
@media (max-width:420px){.ap-list a{grid-template-columns:1fr}.ap-s{text-align:left}}