:root{
    --ink:#232A45; --muted:#5C648A; --paper:#FFFFFF; --sheet:#FFFFFF;
    --blue:#7280BD; --blue-ink:#2B3572; --wash:#E1E6F8; --wash2:#F4F6FD;
    --amber:#5A6410; --amber-wash:#DFEEB8; --line:#C1C9E5;
    --serif: Charter, Georgia, 'Times New Roman', serif;
    --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  }
  *{box-sizing:border-box}
  body{background:var(--paper);color:var(--ink);font-family:var(--sans);margin:0;line-height:1.58}
  .wrap{max-width:900px;margin:0 auto;padding:0 20px}
  a{color:var(--blue-ink)}
  h1,h2{font-family:var(--serif);line-height:1.18;text-wrap:balance}
  .band{background:var(--wash2);border-bottom:1px solid var(--line)}
  header.site{display:flex;align-items:center;gap:12px;padding:16px 0 14px}
  .wordmark{font-family:var(--serif);font-size:22px;font-weight:700}
  .tagline{font-size:12px;color:var(--muted)}
  .eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);font-weight:600}
  .hero h1{font-size:clamp(26px,4.6vw,34px);margin:10px 0 12px;max-width:24ch}
  .lede{font-size:16px;color:var(--muted);max-width:64ch}
  section{margin:42px 0}
  h2{font-size:23px;margin:0 0 10px}
  p{max-width:68ch;font-size:15px;margin:9px 0}
  .scroller{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--sheet);padding:12px}
  svg text{font-family:var(--sans)}
  .bx{fill:var(--sheet);stroke:var(--line);stroke-width:1.4}
  .bx-wash{fill:var(--wash2);stroke:var(--line);stroke-width:1.4}
  .bx-live{fill:var(--wash);stroke:var(--blue);stroke-width:2}
  .bx-plan{fill:var(--sheet);stroke:var(--muted);stroke-width:1.6;stroke-dasharray:6 4}
  .bx-star{fill:var(--amber-wash);stroke:var(--amber);stroke-width:2.2}
  .t{fill:var(--ink);font-size:13px}
  .t-h{fill:var(--blue-ink);font-size:13.5px;font-weight:650}
  .t-eb{fill:var(--amber);font-size:10.5px;font-weight:650;letter-spacing:.1em}
  .t-m{fill:var(--muted);font-size:11.5px}
  .t-mono{font-family:var(--mono);fill:var(--blue-ink);font-size:11px}
  .ln{stroke:var(--muted);stroke-width:1.4;fill:none}
  .ln-b{stroke:var(--blue);stroke-width:1.8;fill:none}
  .ln-dash{stroke:var(--muted);stroke-width:1.3;fill:none;stroke-dasharray:4 4}
  .legend{display:flex;flex-wrap:wrap;gap:16px;font-size:12.5px;color:var(--muted);margin:10px 2px}
  .legend span{display:inline-flex;align-items:center;gap:6px}
  .sw{display:inline-block;width:26px;height:13px;border-radius:3px}
  table{width:100%;border-collapse:collapse;font-size:13.5px;margin:14px 0}
  th{background:var(--blue-ink);color:#fff;text-align:left;padding:8px 10px;font-size:12.5px}
  td{border:1px solid var(--line);padding:7px 10px;vertical-align:top}
  tr:nth-child(even) td{background:var(--wash2)}
  .live{color:var(--blue-ink);font-weight:700}
  .star{color:var(--amber);font-weight:700}
  .plan{color:var(--muted);font-weight:600}
  .story{border-left:3px solid var(--amber);padding:4px 18px;margin:24px 0;font-family:var(--serif);font-size:17px;max-width:60ch}
  .concept-definition{font-family:var(--serif);font-size:20px;line-height:1.42;max-width:58ch;color:var(--blue-ink)}
  .concept-map{margin-top:24px;padding:24px;border:1px solid var(--line);border-radius:14px;background:var(--wash2)}
  .concept-person{text-align:center;font-weight:750;letter-spacing:.12em;font-size:12px;color:var(--amber)}
  .concept-down{text-align:center;color:var(--amber);font-size:24px;line-height:1.2}
  .concept-card{background:var(--sheet);border:1px solid var(--line);border-radius:10px;padding:16px 18px}
  .concept-card h3,.concept-card h4{margin:0 0 6px;color:var(--blue-ink);line-height:1.25}
  .concept-card h3{font-family:var(--serif);font-size:19px}.concept-card h4{font-size:14px}
  .concept-card p{margin:4px 0;font-size:14px}
  .concept-archive{max-width:510px;margin:0 auto;border-width:2px;border-color:var(--blue)}
  .concept-branchline{text-align:center;color:var(--blue);font-size:25px;line-height:1.2}
  .concept-branches{display:grid;grid-template-columns:1fr 1.35fr;gap:16px}
  .concept-nested{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:grid;gap:12px}
  .concept-cross,.concept-commons{margin-top:16px;border-radius:10px;padding:14px 18px;font-size:14px}
  .concept-cross{border:1px solid var(--amber);background:#fff}.concept-commons{background:var(--amber-wash);border:1px solid var(--amber)}
  .concept-cross p,.concept-commons p{margin:2px 0;font-size:14px}.concept-commons h3{font-family:var(--serif);margin:0 0 4px;font-size:18px}
  @media(max-width:650px){.concept-map{padding:16px}.concept-branches{grid-template-columns:1fr}}
  footer{border-top:1px solid var(--line);margin-top:60px;padding:22px 0 40px;font-size:12.5px;color:var(--muted)}
  footer .comp{margin-bottom:10px}

/* Frame — 980px frame, 760px reading column, wide-by-design elements keep the frame (her word, Sep 3, 2026, v3.100). */
.wrap{max-width:980px}
body>.wrap>*,body>main.wrap>*{max-width:760px;margin-left:max(0px,calc((100% - 760px)/2));margin-right:0} /* v3.108: the column's left edge is fixed; blocks narrower than 760 hug it (her word, Sep 4, 2026) */
/* v3.106 (Sep 4, 2026): the breakout rule is gone — every layout sits inside the 760 reading column; wide tables scroll inside their wrapper. Her word: "bring the other breakout layouts inside the column too." */