/* ---------- tokens ---------- */
:root{
  color-scheme: light;
  --paper:#F4F6F3;
  --surface:#FFFFFF;
  --surface-2:#EBEFEA;
  --ink:#11181A;
  --ink-2:#475254;
  --ink-3:#6E7B7B;
  --rule:#D8DED7;
  --rule-strong:#B4BEB6;
  --brand:#0B6E63;
  --brand-ink:#06554C;
  --brand-soft:#DBEDE8;
  --change:#94570A;
  --change-soft:#F9E9D2;
  --break:#AD2E22;
  --break-soft:#F9E1DD;
  --stable:#22684B;
  --stable-soft:#DBEDE1;
  --code-bg:#F7F9F6;
  --shadow-1:0 1px 2px rgba(17,24,26,.05);
  --shadow-2:0 2px 4px rgba(17,24,26,.05), 0 18px 34px -22px rgba(17,24,26,.45);
  --r-s:6px; --r-m:10px; --r-l:16px;
  --sans:"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  --display:"IBM Plex Sans Condensed", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#0D1315;
    --surface:#151E20;
    --surface-2:#1D282A;
    --ink:#E6EDEA;
    --ink-2:#A6B3B1;
    --ink-3:#7F8D8C;
    --rule:#263335;
    --rule-strong:#3A4A4C;
    --brand:#4BC3B2;
    --brand-ink:#7FD8CA;
    --brand-soft:#10332F;
    --change:#E3A44F;
    --change-soft:#33240F;
    --break:#F0796A;
    --break-soft:#381915;
    --stable:#6BC698;
    --stable-soft:#14301F;
    --code-bg:#101A1C;
    --shadow-1:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 2px 4px rgba(0,0,0,.35), 0 18px 34px -22px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#0D1315;
  --surface:#151E20;
  --surface-2:#1D282A;
  --ink:#E6EDEA;
  --ink-2:#A6B3B1;
  --ink-3:#7F8D8C;
  --rule:#263335;
  --rule-strong:#3A4A4C;
  --brand:#4BC3B2;
  --brand-ink:#7FD8CA;
  --brand-soft:#10332F;
  --change:#E3A44F;
  --change-soft:#33240F;
  --break:#F0796A;
  --break-soft:#381915;
  --stable:#6BC698;
  --stable-soft:#14301F;
  --code-bg:#101A1C;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 2px 4px rgba(0,0,0,.35), 0 18px 34px -22px rgba(0,0,0,.9);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--display); font-weight:700; line-height:1.15; margin:0; text-wrap:balance; letter-spacing:-.01em}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
code{font-family:var(--mono); font-size:.92em}
a{color:var(--brand-ink)}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:3px}
.skip{position:absolute; left:-999px; top:8px; z-index:50; background:var(--surface); padding:10px 14px; border-radius:var(--r-s); border:1px solid var(--rule)}
.skip:focus{left:12px}
.label{font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- app frame ---------- */
.app{
  display:grid;
  grid-template-columns:232px minmax(0,1fr);
  grid-template-areas:"top top" "nav main" "nav foot";
  max-width:1360px; margin:0 auto; min-height:100%;
}
.topbar{
  grid-area:top; position:sticky; top:env(safe-area-inset-top,0px); z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:14px 24px; background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--rule);
}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand-mark{display:grid; place-items:center; width:38px; height:38px; border-radius:var(--r-m); background:var(--brand-soft); color:var(--brand-ink); flex:none}
.brand-text{display:flex; flex-direction:column; min-width:0}
.brand-text strong{font-family:var(--display); font-size:19px; letter-spacing:.01em}
.brand-text span{font-size:12.5px; color:var(--ink-3)}
.topbar-actions{display:flex; gap:8px; align-items:center}

.spine{grid-area:nav; padding:22px 14px 22px 24px}
.spine ul{position:sticky; top:calc(84px + env(safe-area-inset-top,0px)); display:flex; flex-direction:column; gap:4px}
.spine-item{
  width:100%; display:grid; grid-template-columns:30px 1fr; align-items:center; gap:10px;
  padding:9px 10px; border-radius:var(--r-m); border:1px solid transparent; background:none;
  font:inherit; color:var(--ink-2); text-align:left; cursor:pointer;
}
.spine-item:hover{background:var(--surface-2); color:var(--ink)}
.spine-item .k{
  font-family:var(--display); font-size:17px; color:var(--ink-3);
  display:grid; place-items:center; width:28px; height:28px; border-radius:7px;
  border:1px solid var(--rule-strong); background:var(--surface);
}
.spine-item .t{font-size:14px; line-height:1.25}
.spine-item .t small{display:block; font-size:11.5px; color:var(--ink-3)}
.spine-item[aria-current="page"]{background:var(--surface); border-color:var(--rule); color:var(--ink); box-shadow:var(--shadow-1)}
.spine-item[aria-current="page"] .k{background:var(--brand); border-color:var(--brand); color:#fff}
.spine-sep{height:1px; background:var(--rule); margin:10px 6px}

main{grid-area:main; padding:8px 24px 40px; min-width:0}
main:focus{outline:none}
.foot{grid-area:foot; padding:0 24px 40px; max-width:70ch}
.foot p{font-size:12.5px; color:var(--ink-3)}

@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr); grid-template-areas:"top" "nav" "main" "foot"}
  .spine{padding:10px 0 10px; border-bottom:1px solid var(--rule); overflow-x:auto}
  .spine ul{position:static; flex-direction:row; gap:6px; padding:0 16px; min-width:max-content}
  .spine-item{grid-template-columns:auto; width:auto; padding:7px 11px}
  .spine-item .t{display:none}
  .spine-item .t.short{display:block; font-size:12.5px}
  .spine-sep{display:none}
  main{padding:6px 16px 32px}
  .foot{padding:0 16px 32px}
}

/* ---------- shared pieces ---------- */
.btn{
  font:500 13.5px/1 var(--sans); color:var(--ink); background:var(--surface);
  border:1px solid var(--rule-strong); border-radius:var(--r-s); padding:9px 13px;
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:hover{background:var(--surface-2)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.btn-primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn-primary:hover{background:var(--brand-ink); border-color:var(--brand-ink)}
.btn-quiet{background:none; border-color:transparent; color:var(--ink-2)}
.btn-quiet:hover{background:var(--surface-2)}
.btn .glyph{font-size:14px; line-height:1}

.card{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-l); box-shadow:var(--shadow-1)}
.section{margin-top:34px}
.section > header{margin-bottom:14px}
.section h2{font-size:21px}
.section .sub{font-size:14px; color:var(--ink-2); margin-top:4px; max-width:68ch}

.pill{
  display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px;
  font-family:var(--mono); font-size:11px; letter-spacing:.04em; border:1px solid var(--rule-strong); color:var(--ink-2);
}
.pill.change{color:var(--change); border-color:var(--change); background:var(--change-soft)}
.pill.break{color:var(--break); border-color:var(--break); background:var(--break-soft)}
.pill.stable{color:var(--stable); border-color:var(--stable); background:var(--stable-soft)}

/* ---------- overview ---------- */
.hero{padding:40px 0 8px; max-width:74ch}
.hero .eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-ink)}
.hero h1{font-size:clamp(30px,4.6vw,46px); margin:12px 0 14px}
.hero p{font-size:17px; color:var(--ink-2); max-width:62ch}
.hero .cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px}

.map{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px; margin-top:8px}
.map-card{
  display:flex; flex-direction:column; gap:12px; padding:18px; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-l);
  font:inherit; color:inherit; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.map-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-2); border-color:var(--rule-strong)}
.map-card .top{display:flex; align-items:baseline; gap:9px}
.map-card .letter{font-family:var(--display); font-size:26px; color:var(--brand); line-height:1}
.map-card h3{font-size:16px}
.map-card .tag{font-family:var(--mono); font-size:11.5px; color:var(--ink-3)}
.map-card .glyphbox{background:var(--code-bg); border:1px solid var(--rule); border-radius:var(--r-m); padding:10px; height:104px; display:grid; place-items:center}
.map-card .glyphbox svg{width:100%; height:100%}
.map-card p{font-size:13.5px; color:var(--ink-2)}
.map-card .go{font-family:var(--mono); font-size:11.5px; color:var(--brand-ink); letter-spacing:.04em}

/* ---------- legend ---------- */
.legend{padding:16px 18px}
.legend summary{cursor:pointer; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.legend summary::marker{color:var(--ink-3)}
.legend-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px 22px; margin-top:16px}
.legend-item{display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--ink-2)}
.legend-item b{display:block; color:var(--ink); font-weight:600; font-size:13px}
.legend-swatch{flex:none; width:56px; height:30px; display:grid; place-items:center}
.legend-swatch svg{overflow:visible}

/* ---------- lesson header ---------- */
.lesson-head{padding:26px 0 0}
.lesson-head .kicker{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.lesson-head .letter{
  font-family:var(--display); font-size:15px; color:#fff; background:var(--brand);
  width:26px; height:26px; border-radius:7px; display:grid; place-items:center;
}
.lesson-head h1{font-size:clamp(26px,3.6vw,36px); margin:12px 0 0}
.lesson-head .definition{font-size:17.5px; color:var(--ink); margin-top:14px; max-width:60ch; border-left:3px solid var(--brand); padding-left:14px}
.analogy{display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:22px; overflow:hidden}
.analogy > div{padding:16px 18px}
.analogy > div + div{border-left:1px solid var(--rule)}
.analogy p{font-size:14px; color:var(--ink-2); margin-top:6px}
@media (max-width:640px){
  .analogy{grid-template-columns:1fr}
  .analogy > div + div{border-left:0; border-top:1px solid var(--rule)}
}

/* ---------- stage ---------- */
.studio{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:16px; align-items:start}
@media (max-width:1040px){.studio{grid-template-columns:minmax(0,1fr)}}

.panel{background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-l); box-shadow:var(--shadow-1); overflow:hidden}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid var(--rule); background:var(--surface-2); flex-wrap:wrap}
.panel-head .title{font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2)}

.switch{display:inline-flex; background:var(--surface); border:1px solid var(--rule-strong); border-radius:999px; padding:3px; gap:3px}
.switch button{
  font:500 13px/1 var(--sans); padding:7px 14px; border-radius:999px; border:1px solid transparent;
  background:none; color:var(--ink-2); cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
.switch button[aria-checked="true"]{background:var(--ink); color:var(--paper)}
.switch button .dot{width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.55}

.requests{display:flex; gap:8px; flex-wrap:wrap; padding:12px 16px; border-bottom:1px solid var(--rule)}
.requests .label{width:100%; margin-bottom:2px}
.req{
  font:500 13px/1.2 var(--sans); padding:8px 12px; border-radius:999px; cursor:pointer;
  background:var(--surface); border:1px dashed var(--rule-strong); color:var(--ink-2);
  display:inline-flex; align-items:center; gap:7px;
}
.req:hover{border-color:var(--brand); color:var(--ink)}
.req[aria-pressed="true"]{background:var(--brand-soft); border-style:solid; border-color:var(--brand); color:var(--brand-ink)}
.req .glyph{font-family:var(--mono); font-size:12px}

.stage-wrap{padding:16px; background:
  radial-gradient(circle at 1px 1px, var(--rule) 1px, transparent 0) 0 0/22px 22px,
  var(--code-bg);
}
.stage{position:relative; min-height:260px}
.stage-grid{display:grid; gap:18px 60px; position:relative; z-index:2; align-items:start}
.edges{position:absolute; inset:0; z-index:1; overflow:visible; pointer-events:none}
.edge-labels{position:absolute; inset:0; z-index:3; pointer-events:none}
.edge-label{
  position:absolute; transform:translate(-50%,-50%); white-space:nowrap;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.02em; color:var(--ink-2);
  background:var(--code-bg); border:1px solid var(--rule); border-radius:999px; padding:2px 7px;
}
.edge-label.change{color:var(--change); border-color:var(--change); background:var(--change-soft)}
.edge-label.break{color:var(--break); border-color:var(--break); background:var(--break-soft)}
.edge-label.stable{color:var(--stable); border-color:var(--stable); background:var(--stable-soft)}
.edge-label.runtime{color:var(--brand-ink); border-color:var(--brand); background:var(--brand-soft)}

/* nodes */
.node{
  position:relative; display:flex; flex-direction:column; gap:7px; text-align:left; width:100%;
  padding:11px 12px; border-radius:var(--r-m); border:1.5px solid var(--rule-strong);
  background:var(--surface); color:var(--ink); font:inherit; cursor:default;
  box-shadow:var(--shadow-1);
  transition:border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}
button.node{cursor:pointer}
.node .kind{display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.node .name{font-family:var(--mono); font-size:13.5px; font-weight:600; letter-spacing:-.01em; word-break:break-word}
.node .desc{font-size:12px; color:var(--ink-3); line-height:1.4}
.node .chips{display:flex; flex-direction:column; gap:4px; margin-top:1px}
.node .chip{
  display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink-2);
  background:var(--surface-2); border:1px solid transparent; border-radius:var(--r-s); padding:3px 7px;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.node .chip .mk{font-family:var(--mono); font-size:10px; color:var(--ink-3)}
.node[data-kind="protocol"]{border-style:dashed; background:linear-gradient(0deg,var(--surface),var(--surface))}
.node[data-kind="client"]{border-left-width:5px; border-left-color:var(--brand)}
.node[data-kind="actor"]{border-style:dotted; background:var(--surface-2); box-shadow:none}
.node[data-kind="external"]{background:var(--surface-2); border-style:solid; color:var(--ink-2)}
.node[data-kind="group"]{background:transparent; border-style:dashed; box-shadow:none}

.node .flag{
  position:absolute; top:-10px; right:8px; display:inline-flex; align-items:center; gap:5px;
  font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase;
  padding:2px 8px; border-radius:999px; border:1px solid var(--rule-strong); background:var(--surface); color:var(--ink-2);
}
.node[data-mark="change"]{border-color:var(--change); background:var(--change-soft)}
.node[data-mark="change"] .flag{border-color:var(--change); color:var(--change); background:var(--change-soft)}
.node[data-mark="break"]{border-color:var(--break); background:var(--break-soft)}
.node[data-mark="break"] .flag{border-color:var(--break); color:var(--break); background:var(--break-soft)}
.node[data-mark="stable"]{border-color:var(--stable)}
.node[data-mark="stable"] .flag{border-color:var(--stable); color:var(--stable); background:var(--stable-soft)}
.node[data-mark="focus"]{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.node[data-dim="true"]{opacity:.45}
.node[data-enter="true"]{animation:pop .42s cubic-bezier(.2,.8,.3,1) both}
@keyframes pop{from{opacity:0; transform:translateY(10px) scale(.97)} to{opacity:1; transform:none}}
.node .chip[data-mark="change"]{background:var(--change-soft); color:var(--change); border-color:var(--change)}
.node .chip[data-mark="break"]{background:var(--break-soft); color:var(--break); border-color:var(--break)}
.node .chip[data-mark="stable"]{background:var(--stable-soft); color:var(--stable); border-color:var(--stable)}

/* transport / steps */
.transport{display:flex; align-items:center; gap:10px; padding:12px 16px; border-top:1px solid var(--rule); flex-wrap:wrap}
.steps-dots{display:flex; gap:6px; margin-left:auto}
.dot-btn{width:22px; height:22px; border-radius:50%; border:1px solid var(--rule-strong); background:var(--surface); cursor:pointer; font-family:var(--mono); font-size:10px; color:var(--ink-3); display:grid; place-items:center; padding:0}
.dot-btn[aria-current="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.caption{
  display:flex; gap:10px; align-items:flex-start; padding:14px 16px; border-top:1px solid var(--rule);
  background:var(--surface); font-size:14.5px; color:var(--ink); min-height:64px;
}
.caption .num{font-family:var(--mono); font-size:11px; color:var(--ink-3); padding-top:3px; flex:none}
.caption strong{font-weight:600}

/* impact */
.impact{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--rule); border-top:1px solid var(--rule)}
.impact > div{background:var(--surface); padding:12px 14px; min-height:86px}
.impact h4{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; display:flex; align-items:center; gap:6px; font-weight:600}
.impact .i-change h4{color:var(--change)}
.impact .i-break h4{color:var(--break)}
.impact .i-safe h4{color:var(--stable)}
.impact ul{margin-top:8px; display:flex; flex-direction:column; gap:5px}
.impact li{font-family:var(--mono); font-size:11.5px; color:var(--ink-2); line-height:1.35}
.impact .none{font-size:11.5px; color:var(--ink-3); font-style:italic; font-family:var(--sans)}
@media (max-width:560px){.impact{grid-template-columns:1fr}}

/* ---------- code ---------- */
.codewrap{position:relative}
.code{margin:0; padding:14px 0; max-height:min(58vh,520px); overflow:auto; background:var(--code-bg); font-family:var(--mono); font-size:12.5px; line-height:1.62}
.code .line{display:grid; grid-template-columns:38px 1fr; gap:0; padding:0 12px 0 0; border-left:3px solid transparent; transition:background .18s ease, border-color .18s ease}
.code .line .n{color:var(--ink-3); opacity:.6; text-align:right; padding-right:12px; user-select:none; font-size:11px}
.code .line .s{white-space:pre-wrap; word-break:break-word}
.code .line[data-hl="true"]{background:var(--brand-soft); border-left-color:var(--brand)}
.code .line[data-hl="change"]{background:var(--change-soft); border-left-color:var(--change)}
.code .line[data-hl="break"]{background:var(--break-soft); border-left-color:var(--break)}
.code .line[data-owned="true"]:hover{background:var(--surface-2); cursor:pointer}
.tok-kw{color:var(--brand-ink); font-weight:500}
.tok-str{color:var(--change)}
.tok-com{color:var(--ink-3); font-style:italic}
.tok-num{color:var(--break)}
.tok-def{color:var(--ink); font-weight:600}
.tok-self{color:var(--ink-3)}
.run{display:flex; align-items:center; gap:10px; padding:11px 16px; border-top:1px solid var(--rule); flex-wrap:wrap}
.out{border-top:1px solid var(--rule); background:var(--surface-2); padding:12px 16px}
.out pre{margin:6px 0 0; font-family:var(--mono); font-size:12px; line-height:1.6; white-space:pre-wrap; color:var(--ink)}
.out .label{display:flex; align-items:center; gap:6px}

/* ---------- prediction ---------- */
.predict{padding:20px}
.predict h3{font-size:17px}
.predict .q{font-size:15.5px; margin-top:8px; max-width:62ch}
.options{display:flex; flex-direction:column; gap:9px; margin-top:16px; max-width:70ch}
.opt{
  display:flex; gap:11px; align-items:flex-start; text-align:left; padding:12px 14px; cursor:pointer;
  border:1px solid var(--rule-strong); border-radius:var(--r-m); background:var(--surface); font:inherit; color:inherit;
  transition:border-color .15s ease, background .15s ease;
}
.opt:hover{border-color:var(--brand)}
.opt .mk{
  flex:none; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--rule-strong);
  display:grid; place-items:center; font-family:var(--mono); font-size:11px; color:var(--ink-3);
}
.opt[data-state="picked"]{border-color:var(--brand); background:var(--brand-soft)}
.opt[data-state="right"]{border-color:var(--stable); background:var(--stable-soft)}
.opt[data-state="wrong"]{border-color:var(--break); background:var(--break-soft)}
.opt[data-state="right"] .mk{border-color:var(--stable); color:var(--stable)}
.opt[data-state="wrong"] .mk{border-color:var(--break); color:var(--break)}
.verdict{margin-top:14px; padding:14px 16px; border-radius:var(--r-m); border:1px solid var(--rule); background:var(--surface-2); font-size:14px; max-width:70ch}
.verdict .head{display:flex; align-items:center; gap:8px; font-weight:600; margin-bottom:5px}
.verdict.right .head{color:var(--stable)}
.verdict.wrong .head{color:var(--change)}

/* ---------- takeaway ---------- */
.takeaway{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule); overflow:hidden}
.takeaway > div{background:var(--surface); padding:18px}
.takeaway h4{display:flex; align-items:center; gap:8px; font-family:var(--display); font-size:15px}
.takeaway p{font-size:14px; color:var(--ink-2); margin-top:7px}
@media (max-width:640px){.takeaway{grid-template-columns:1fr}}
.callout{display:flex; gap:12px; padding:16px 18px; border-radius:var(--r-m); border:1px solid var(--brand); background:var(--brand-soft); margin-top:16px}
.callout .glyph{font-family:var(--mono); color:var(--brand-ink); font-size:14px}
.callout p{font-size:14px; color:var(--ink)}
.callout b{color:var(--brand-ink)}

.pager{display:flex; justify-content:space-between; gap:12px; margin-top:34px; padding-top:18px; border-top:1px solid var(--rule)}

/* ---------- recap ---------- */
.recap-card{padding:18px; display:flex; flex-direction:column; gap:12px}
.recap-card .scenario{font-size:15px; max-width:70ch}
.recap-card .scenario .who{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:5px}
.chipset{display:flex; gap:7px; flex-wrap:wrap}
.chip-btn{
  font:500 13px/1 var(--sans); padding:8px 12px; border-radius:999px; cursor:pointer;
  border:1px solid var(--rule-strong); background:var(--surface); color:var(--ink-2);
  display:inline-flex; align-items:center; gap:7px;
}
.chip-btn .k{font-family:var(--display); font-size:13px; color:var(--brand)}
.chip-btn[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.chip-btn[aria-pressed="true"] .k{color:var(--paper)}
.chip-btn[data-result="hit"]{background:var(--stable-soft); border-color:var(--stable); color:var(--stable)}
.chip-btn[data-result="hit"] .k{color:var(--stable)}
.chip-btn[data-result="miss"]{background:var(--break-soft); border-color:var(--break); color:var(--break)}
.chip-btn[data-result="miss"] .k{color:var(--break)}
.chip-btn[data-result="missed"]{border-style:dashed; border-color:var(--stable); color:var(--stable)}
.recap-feedback{font-size:14px; color:var(--ink-2); border-left:3px solid var(--rule-strong); padding-left:12px}
.recap-feedback.ok{border-color:var(--stable)}
.recap-feedback.part{border-color:var(--change)}
.scoreline{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:16px 18px}
.scoreline .n{font-family:var(--display); font-size:30px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}

/* ---------- diagram details ---------- */
.stage-grid[data-cols="3"]{gap:18px 54px}
.stage-grid[data-cols="4"]{gap:16px 34px}
@media (max-width:620px){
  .stage-grid{grid-template-columns:minmax(0,1fr) !important; gap:26px 0 !important}
  .stage-grid > .node{grid-column:1 / -1 !important; grid-row:auto !important}
}
.node .chip b{font-family:var(--mono); font-weight:500; font-size:11.5px}
.node .chip .note{font-style:normal; color:var(--ink-3); font-size:11px}
.node .chip[data-mark] .note{color:inherit; opacity:.8}
.node[data-hover="true"]{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.code .line[data-hover="true"]{background:var(--brand-soft); border-left-color:var(--brand)}
.edges path.edge{fill:none; stroke:var(--rule-strong); stroke-width:1.7; transition:stroke .25s ease, stroke-width .25s ease}
.edges path.edge[data-kind="impl"]{stroke-dasharray:7 5}
.edges path.edge[data-kind="request"]{stroke-dasharray:2 4}
.edges path.edge[data-kind="runtime"]{stroke-dasharray:1 6; stroke-linecap:round; stroke-width:2.2; stroke:var(--brand)}
.edges path.edge[data-state="change"]{stroke:var(--change); stroke-width:2.4}
.edges path.edge[data-state="break"]{stroke:var(--break); stroke-width:2.4}
.edges path.edge[data-state="stable"]{stroke:var(--stable)}
.edges path.edge[data-state="active"]{stroke:var(--brand); stroke-width:2.2}
.map-card .glyphbox svg{fill:none; stroke:var(--ink-3); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.map-card .glyphbox svg .ac{stroke:var(--brand)}
.map-card .glyphbox svg .fill{fill:var(--brand-soft); stroke:none}
.predict .label{display:block; margin-bottom:6px}
.out pre{max-height:220px; overflow:auto}

/* ---------- fixes ---------- */
.spine-item .t.short{display:none}
@media (max-width:900px){ .spine-item .t.short{display:block; font-size:12.5px} }
.node .chips{min-width:0}
.node .chip{flex-wrap:wrap; row-gap:2px}
.node .chip b{min-width:0; overflow-wrap:anywhere}
.node .chip .note{flex-basis:100%; padding-left:16px; line-height:1.3}
.node .name{overflow-wrap:anywhere}
.stage-wrap{overflow-x:auto}

/* ---------- diagram sizing ---------- */
.studio{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr)}
@media (max-width:1040px){.studio{grid-template-columns:minmax(0,1fr)}}
.stage-grid[data-cols="3"], .stage-grid[data-cols="4"]{justify-content:space-between}
.stage-grid[data-cols="3"]{grid-template-columns:repeat(3,auto) !important; gap:20px 30px}
.stage-grid[data-cols="4"]{grid-template-columns:repeat(4,auto) !important; gap:18px 22px}
.node{max-width:250px}
.node[data-kind="actor"], .node[data-kind="external"]{max-width:none}
.node .chip{font-size:11px}
.node .chip b{font-size:11px; letter-spacing:-.01em}
.code{font-size:12px}
@media (max-width:620px){ .node{max-width:none} }
.stage-grid[data-cols="3"]{gap:34px 30px}
.stage-grid[data-cols="4"]{gap:30px 22px}
.edge-label{max-width:136px; white-space:normal; text-align:center; line-height:1.3}
.node{max-width:216px}
.node[data-kind="actor"], .node[data-kind="external"]{max-width:none}
.node{max-width:190px}
.node[data-kind="actor"], .node[data-kind="external"]{max-width:none}
.edge-label{max-width:150px}
.edge-label{font-size:10px; padding:2px 5px; overflow-wrap:anywhere}
.node{max-width:172px}
.node[data-kind="actor"], .node[data-kind="external"]{max-width:none}
.edge-label.lift{transform:translate(-50%, calc(-50% - 11px))}
.edge-label{white-space:nowrap; max-width:none; overflow-wrap:normal}

/* five across on wide screens: the map mirrors the S-O-L-I-D spine */
.map{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1180px){.map{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.map{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.map{grid-template-columns:minmax(0,1fr)}}
.map-card .glyphbox{height:92px}
.chip-btn[data-result]::after{font-family:var(--mono); font-size:10px; letter-spacing:.04em; opacity:.9}
.chip-btn[data-result="hit"]::after{content:"✓"}
.chip-btn[data-result="miss"]::after{content:"✕ no"}
.chip-btn[data-result="missed"]::after{content:"+ missed"}
.edge-label:not(.lift){transform:translate(calc(-50% - 22px), -50%)}
.node{max-width:154px}
.node[data-kind="actor"], .node[data-kind="external"]{max-width:none}
.map-card .top{min-height:62px; align-items:flex-start}
.map-card .tag{display:block; margin-top:2px}

/* ======================================================================
   OOP foundations: object nodes, inheritance/containment arrows,
   the two-track navigation, and the interactive lab.
   ====================================================================== */

/* ---------- object nodes and the new arrow kinds ---------- */
.node[data-kind="object"]{
  border-left-width:5px; border-left-color:var(--brand);
  box-shadow:inset 3px 0 0 var(--surface), inset 6px 0 0 var(--brand), var(--shadow-1);
  padding-left:16px;
}
.node .kind .badge{
  font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:.04em;
  text-transform:none; color:var(--brand-ink); background:var(--brand-soft);
  border-radius:999px; padding:1px 7px; margin-left:2px;
}
.edges path.edge[data-kind="inherit"]{stroke-width:2.4}
.edges path.edge[data-kind="contains"]{stroke-width:2}

/* ---------- spine: one group per track ---------- */
.spine-head{
  display:flex; align-items:baseline; gap:8px; padding:14px 10px 5px;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}
.spine-head small{font-size:10px; letter-spacing:.04em; text-transform:none; color:var(--brand-ink); opacity:.9}
@media (max-width:900px){
  .spine-head{
    padding:7px 4px; align-self:center; white-space:nowrap;
    border-left:1px solid var(--rule); padding-left:12px; margin-left:4px;
  }
  .spine-head small{display:none}
}

/* ---------- overview: track framing and the OOP → SOLID bridges ---------- */
.track-head{display:grid; gap:6px}
.track-tag{display:inline-flex; align-items:baseline; gap:9px; flex-wrap:wrap}
.track-tag b{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brand-ink); background:var(--brand-soft); border-radius:999px; padding:3px 10px;
}
.track-tag i{font-style:normal; font-size:11.5px; color:var(--ink-3)}
.track-foot{margin-top:12px}
.track-foot .btn{font-family:var(--mono); font-size:12px}

.bridges{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px}
.bridge-card{display:flex; flex-direction:column; gap:9px}
.bridge-pair{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px}
.bridge-pair b{font-weight:600}
.bridge-pair .arrow{color:var(--brand); font-family:var(--mono)}
.bridge-card p{font-size:13px; color:var(--ink-2); line-height:1.55; flex:1}
.bridge-actions{display:flex; gap:8px; flex-wrap:wrap}
.bridge-actions .btn{font-size:12px; padding:6px 10px}

.card.bridge{display:flex; align-items:center; gap:18px; justify-content:space-between; flex-wrap:wrap}
.card.bridge p{margin-top:5px; font-size:13.5px; color:var(--ink-2); line-height:1.6; max-width:72ch}
.card.bridge .btn{flex:none}

/* ---------- the lab ---------- */
.lab{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:16px; align-items:start}
@media (max-width:1040px){.lab{grid-template-columns:minmax(0,1fr)}}

.lab-stage{
  position:relative; padding:18px 16px;
  background:
    radial-gradient(circle at 1px 1px, var(--rule) 1px, transparent 0) 0 0/22px 22px,
    var(--code-bg);
}
.lab-edges{position:absolute; inset:0; z-index:1; overflow:visible; pointer-events:none}
.lab-stage .edge-labels{z-index:3}
.lab-cards{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:16px 40px; align-items:start;
}
@media (max-width:620px){.lab-cards{grid-template-columns:minmax(0,1fr); gap:22px 0}}

.lab-card{
  position:relative; display:flex; flex-direction:column; gap:7px; text-align:left;
  padding:11px 12px; border-radius:var(--r-m); border:1.5px solid var(--rule-strong);
  background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1);
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.lab-kind{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
}
.lab-kind .badge{
  font-size:9.5px; letter-spacing:.03em; text-transform:none; font-weight:500;
  color:var(--brand-ink); background:var(--brand-soft); border-radius:999px; padding:1px 7px;
}
.lab-name{font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:-.01em; overflow-wrap:anywhere}
.lab-sub{font-size:11.5px; color:var(--ink-3); line-height:1.45}

.lab-fields{display:flex; flex-direction:column; gap:3px; margin-top:2px}
.lab-field{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font-family:var(--mono); font-size:11.5px; padding:3px 7px; border-radius:var(--r-s);
  background:var(--surface-2); border:1px solid transparent;
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.lab-field .k{color:var(--ink-3)}
.lab-field .v{color:var(--ink); font-weight:500; overflow-wrap:anywhere; text-align:right}
.lab-field[data-derived="true"]{background:transparent; border-style:dashed; border-color:var(--rule)}
.lab-field[data-hot="true"]{background:var(--change-soft); border-color:var(--change); color:var(--change)}
.lab-field[data-hot="true"] .k,.lab-field[data-hot="true"] .v{color:var(--change)}

.lab-methods{list-style:none; display:flex; flex-direction:column; gap:3px; margin-top:2px}
.lab-methods li{display:flex; align-items:baseline; gap:7px; flex-wrap:wrap}
.lab-methods code{font-family:var(--mono); font-size:11.5px; color:var(--ink-2); overflow-wrap:anywhere; min-width:0}
.lab-methods i{font-style:normal; font-size:11px; color:var(--ink-3)}

.lab-card[data-role="class"]{border-color:var(--ink-3)}
.lab-card[data-role="subclass"]{border-left-width:4px; border-left-color:var(--brand)}
.lab-card[data-role="instance"]{
  border-left-width:5px; border-left-color:var(--brand); padding-left:16px;
  box-shadow:inset 3px 0 0 var(--surface), inset 6px 0 0 var(--brand), var(--shadow-1);
}
.lab-card[data-role="gate"]{border-style:dashed; background:var(--surface-2)}
.lab-card[data-role="internal"]{border-style:dotted; background:var(--surface-2); box-shadow:none}
.lab-card[data-role="client"]{border-left-width:5px; border-left-color:var(--ink-3)}
.lab-card[data-role="result"]{border-color:var(--stable); background:var(--stable-soft)}
.lab-card[data-role="note"]{border-style:dashed; background:transparent; box-shadow:none; color:var(--ink-3)}

.lab-card[data-tone="bad"]{border-color:var(--break); background:var(--break-soft)}
.lab-card[data-flash="call"]{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.lab-card[data-flash="read"]{border-color:var(--brand); opacity:.92}
.lab-card[data-flash="ok"]{border-color:var(--stable); background:var(--stable-soft)}
.lab-card[data-flash="reject"]{border-color:var(--break); background:var(--break-soft)}
.lab-card[data-flash]::after{
  position:absolute; top:-10px; right:8px;
  font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase;
  padding:2px 8px; border-radius:999px; border:1px solid var(--rule-strong); background:var(--surface);
}
.lab-card[data-flash="call"]::after{content:"● called"; color:var(--brand-ink); border-color:var(--brand); background:var(--brand-soft)}
.lab-card[data-flash="read"]::after{content:"● read"; color:var(--brand-ink); border-color:var(--brand); background:var(--brand-soft)}
.lab-card[data-flash="ok"]::after{content:"✓ applied"; color:var(--stable); border-color:var(--stable); background:var(--stable-soft)}
.lab-card[data-flash="reject"]::after{content:"✕ refused"; color:var(--break); border-color:var(--break); background:var(--break-soft)}

/* state before → after, shown for accepted and refused operations alike */
.lab-strip{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:10px 16px; border-top:1px solid var(--rule); font-family:var(--mono); font-size:12px;
}
.lab-strip .label{letter-spacing:.1em; text-transform:uppercase; font-size:10px; color:var(--ink-3)}
.lab-strip b{font-weight:600}
.lab-strip .arrow{color:var(--ink-3)}
.lab-strip i{font-style:normal; font-size:11.5px; font-family:var(--sans)}
.lab-strip.ok{background:var(--stable-soft); color:var(--stable)}
.lab-strip.bad{background:var(--break-soft); color:var(--break)}

.lab-controls{display:flex; flex-direction:column; gap:10px; padding:12px 16px; border-top:1px solid var(--rule)}
.lab-group{display:grid; gap:6px}
.lab-group .label{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.lab-buttons{display:flex; gap:8px; flex-wrap:wrap}
.lab-buttons .req{font-family:var(--mono); font-size:12px}
.lab-buttons .req:disabled{opacity:.42; cursor:not-allowed; border-style:dashed}
.lab-buttons .req:disabled:hover{border-color:var(--rule-strong); color:var(--ink-2)}
.lab-steps{font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-left:auto}

.lab-log{border-top:1px solid var(--rule); background:var(--surface-2); padding:12px 16px}
.lab-log .label{display:flex; align-items:center; gap:6px}
.lab-log-lines{
  display:flex; flex-direction:column; gap:2px; margin:8px 0 0;
  font-family:var(--mono); font-size:11.5px; line-height:1.6;
  max-height:190px; overflow:auto;
}
.lab-log-lines .muted{color:var(--ink-3)}
.log-line{white-space:pre-wrap; overflow-wrap:anywhere; padding-left:14px; text-indent:-14px}
.log-line[data-tone="in"]{color:var(--ink)}
.log-line[data-tone="ok"]{color:var(--stable)}
.log-line[data-tone="bad"]{color:var(--break)}
.log-line[data-tone="note"]{color:var(--ink-3)}

/* ---------- recap: the snippet a question is about ---------- */
.recap-code{
  margin:2px 0 4px; padding:12px 14px; border-radius:var(--r-m);
  background:var(--code-bg); border:1px solid var(--rule); overflow-x:auto;
}
.recap-code .line{display:block}
.recap-code .s{font-family:var(--mono); font-size:11.5px; line-height:1.65; white-space:pre}

@media (max-width:620px){
  .lab-stage{padding:14px 12px}
  .card.bridge{align-items:flex-start}
  .lab-log-lines{max-height:150px}
}