/* ==========================================================================
   1. THE ORIGINAL DOSSIER DESIGN SYSTEM — inlined verbatim.
   Every card, callout, table and grid renders exactly as it always has.
   ========================================================================== */

  /* ============================================================
     EMBER — concept dossier
     Design system: "the night between two people"
     Warm honey-amber (the human) meets cool signal-cyan (the screen)
     ============================================================ */

  :root {
    /* type roles */
    --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, ui-serif, serif;
    --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;

    /* brand accents (constant across themes) */
    --warm: #F6B24E;
    --warm-bright: #FFC978;
    --cool: #46C7D2;
    --cool-bright: #6FE0EA;

    /* semantic */
    --good: #6BD69B;
    --crit: #F0736A;

    /* light theme (cool lilac-grey, deliberately not cream) */
    --bg: #F1EFF6;
    --bg-elev: #FFFFFF;
    --bg-elev-2: #F8F6FC;
    --ink: #1A1726;
    --ink-soft: #524D66;
    --ink-faint: #8A83A0;
    --line: rgba(26, 20, 48, 0.11);
    --line-strong: rgba(26, 20, 48, 0.2);
    --warm-ink: #A5620A;   /* legible amber on light ground */
    --cool-ink: #0C8A96;   /* legible cyan on light ground */
    --shadow: 0 1px 2px rgba(26,20,48,.06), 0 8px 30px rgba(26,20,48,.07);
    --glow-warm: rgba(246, 178, 78, .13);
    --glow-cool: rgba(70, 199, 210, .12);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0E0D15;
      --bg-elev: #17151F;
      --bg-elev-2: #201D2B;
      --ink: #ECEAF2;
      --ink-soft: #A9A4BC;
      --ink-faint: #706A85;
      --line: rgba(255, 255, 255, 0.09);
      --line-strong: rgba(255, 255, 255, 0.16);
      --warm-ink: #F6B24E;
      --cool-ink: #56D0D9;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 40px rgba(0,0,0,.35);
      --glow-warm: rgba(246, 178, 78, .16);
      --glow-cool: rgba(70, 199, 210, .14);
    }
  }
  /* explicit toggles must win in both directions */
  :root[data-theme="light"] {
    --bg: #F1EFF6; --bg-elev: #FFFFFF; --bg-elev-2: #F8F6FC;
    --ink: #1A1726; --ink-soft: #524D66; --ink-faint: #8A83A0;
    --line: rgba(26,20,48,0.11); --line-strong: rgba(26,20,48,0.2);
    --warm-ink: #A5620A; --cool-ink: #0C8A96;
    --shadow: 0 1px 2px rgba(26,20,48,.06), 0 8px 30px rgba(26,20,48,.07);
    --glow-warm: rgba(246,178,78,.13); --glow-cool: rgba(70,199,210,.12);
  }
  :root[data-theme="dark"] {
    --bg: #0E0D15; --bg-elev: #17151F; --bg-elev-2: #201D2B;
    --ink: #ECEAF2; --ink-soft: #A9A4BC; --ink-faint: #706A85;
    --line: rgba(255,255,255,0.09); --line-strong: rgba(255,255,255,0.16);
    --warm-ink: #F6B24E; --cool-ink: #56D0D9;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 40px rgba(0,0,0,.35);
    --glow-warm: rgba(246,178,78,.16); --glow-cool: rgba(70,199,210,.14);
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  ::selection { background: var(--warm); color: #1A1726; }

  /* ---------- layout primitives ---------- */
  .wrap { width: min(1120px, 92vw); margin-inline: auto; }
  .measure { max-width: 66ch; }
  .band { padding: clamp(3.5rem, 8vw, 6.5rem) 0; border-top: 1px solid var(--line); }
  .band:first-of-type { border-top: none; }

  section { scroll-margin-top: 84px; }

  /* ---------- type ---------- */
  h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; text-wrap: balance; line-height: 1.1; letter-spacing: -0.01em; }
  h2.section-title { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin: 0 0 .4em; }
  h3 { font-size: 1.32rem; margin: 0 0 .5rem; line-height: 1.2; }
  p { margin: 0 0 1.1rem; }
  .lede { font-size: clamp(1.12rem, 1.9vw, 1.4rem); line-height: 1.55; color: var(--ink-soft); font-family: var(--serif); font-weight: 500; }
  a { color: var(--cool-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
  a:hover { color: var(--warm-ink); }
  strong { color: var(--ink); font-weight: 650; }
  em.term { font-style: normal; color: var(--warm-ink); font-weight: 600; }

  .eyebrow {
    font-family: var(--mono); font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
    color: var(--ink-faint); margin: 0 0 1.1rem; display: flex; align-items: center; gap: .7rem;
  }
  .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--warm); opacity: .8; }

  .kicker { color: var(--warm-ink); }
  .kicker-cool { color: var(--cool-ink); }

  /* ---------- part dividers (structure) ---------- */
  .part-band { border-top: 8px solid var(--bg-elev-2); background: linear-gradient(180deg, var(--bg-elev-2), transparent); }
  .part { text-align:center; padding: clamp(2.6rem,6vw,4.2rem) 0 clamp(1.6rem,3vw,2.4rem); }
  .part .pd-num { font-family: var(--mono); font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color: var(--warm-ink); }
  .part .pd-name { font-family: var(--serif); font-size: clamp(1.5rem,3.4vw,2.3rem); color: var(--ink); margin:.45rem 0 0; font-weight:600; letter-spacing:-.01em; }
  .part .pd-line { width:56px; height:2px; background: linear-gradient(90deg, var(--warm), var(--cool)); margin:.9rem auto .8rem; border-radius:2px; }
  .part .pd-desc { font-family: var(--sans); font-size:.94rem; color: var(--ink-soft); max-width:48ch; margin:0 auto; line-height:1.5; }
  .part-band + section { border-top: none; }

  /* ---------- top nav ---------- */
  header.nav {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: saturate(140%) blur(14px);
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    border-bottom: 1px solid var(--line);
  }
  .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; }
  .brand { display: flex; align-items: center; gap: .6rem; font-family: var(--mono); font-size: .82rem; letter-spacing: .28em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
  .brand:hover { color: var(--ink); }
  .brand .dot { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--warm-bright), var(--warm)); box-shadow: 0 0 10px var(--warm); }
  nav.links { display: flex; gap: .3rem; flex-wrap: wrap; }
  nav.links a { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; padding: .34rem .55rem; border-radius: 7px; white-space: nowrap; }
  nav.links a:hover { color: var(--ink); background: var(--bg-elev-2); }
  .nav-links-wrap { overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; }
  .nav-links-wrap::-webkit-scrollbar { display: none; }
  @media (max-width: 760px) { nav.links { display: none; } }

  /* ---------- HERO (committed dark "night") ---------- */
  .hero {
    position: relative; overflow: hidden;
    background: #0B0A12;
    color: #ECEAF2;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .hero::before, .hero::after {
    content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none;
  }
  .hero::before { width: 420px; height: 420px; left: -80px; top: 10%; background: radial-gradient(circle, rgba(246,178,78,.55), transparent 70%); }
  .hero::after { width: 460px; height: 460px; right: -110px; bottom: -10%; background: radial-gradient(circle, rgba(70,199,210,.5), transparent 70%); }
  .hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.5rem; align-items: center; padding: clamp(3.2rem, 8vw, 6rem) 0 clamp(3rem, 7vw, 5rem); }
  @media (max-width: 880px) { .hero-inner { grid-template-columns: 1fr; gap: 1.5rem; } }

  .hero .tag { font-family: var(--mono); font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: #B9B3CE; margin-bottom: 1.4rem; }
  .hero h1 {
    font-size: clamp(2.7rem, 6.4vw, 4.7rem); line-height: 1.02; margin: 0 0 1.2rem; letter-spacing: -0.025em;
    color: #F7F5FB;
  }
  .hero h1 .warm { color: var(--warm-bright); }
  .hero h1 .cool { color: var(--cool-bright); }
  .hero .thesis { font-family: var(--serif); font-size: clamp(1.1rem, 1.9vw, 1.4rem); line-height: 1.5; color: #C9C4DA; max-width: 40ch; margin: 0 0 1.8rem; }
  .hero .meta-row { display: flex; flex-wrap: wrap; gap: .5rem .5rem; }
  .chip { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; padding: .4rem .7rem; border: 1px solid rgba(255,255,255,.16); border-radius: 100px; color: #D5D0E4; }
  .chip.warm { border-color: rgba(246,178,78,.45); color: var(--warm-bright); }
  .chip.cool { border-color: rgba(70,199,210,.4); color: var(--cool-bright); }

  /* node diagram */
  .diagram { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 380px; margin-inline: auto; }
  .diagram svg { width: 100%; height: 100%; overflow: visible; }
  .node-label { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; fill: #C9C4DA; }
  .pulse-dot { fill: #FFFFFF; }
  @media (prefers-reduced-motion: no-preference) {
    .pulse-dot { animation: travel 3.6s ease-in-out infinite; }
    .node-glow-a { animation: breathe 4s ease-in-out infinite; }
    .node-glow-b { animation: breathe 4s ease-in-out infinite .5s; }
  }
  @keyframes travel {
    0% { offset-distance: 0%; opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
  }
  @keyframes breathe { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

  /* ---------- stat band ---------- */
  .stat-band { background: var(--bg-elev); }
  .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
  @media (max-width: 760px) { .stat-grid { grid-template-columns: 1fr; } }
  .stat { background: var(--bg-elev); padding: 1.7rem 1.5rem; }
  .stat .n { font-family: var(--serif); font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 600; line-height: 1; color: var(--warm-ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .stat .n.cool { color: var(--cool-ink); }
  .stat .d { margin: .7rem 0 0; font-size: .96rem; color: var(--ink-soft); line-height: 1.45; }
  .stat .src { font-family: var(--mono); font-size: .68rem; color: var(--ink-faint); margin-top: .6rem; letter-spacing: .04em; }

  /* ---------- generic cards ---------- */
  .grid { display: grid; gap: 1.1rem; }
  .cols-2 { grid-template-columns: repeat(2, 1fr); }
  .cols-3 { grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 880px) { .cols-3 { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 620px) { .cols-2, .cols-3 { grid-template-columns: 1fr; } }

  .card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 1.5rem 1.5rem 1.4rem; box-shadow: var(--shadow); }
  .card h3 { font-size: 1.16rem; }
  .card p { font-size: .95rem; color: var(--ink-soft); margin-bottom: 0; }
  .card .num { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; color: var(--warm-ink); display: block; margin-bottom: .5rem; }

  /* ---------- evidence table ---------- */
  .table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
  table.evidence { width: 100%; border-collapse: collapse; min-width: 760px; background: var(--bg-elev); }
  table.evidence th, table.evidence td { text-align: left; padding: 1rem 1.15rem; vertical-align: top; border-bottom: 1px solid var(--line); }
  table.evidence thead th { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); background: var(--bg-elev-2); position: sticky; top: 0; }
  table.evidence tbody tr:last-child td { border-bottom: none; }
  table.evidence tbody tr:hover { background: var(--bg-elev-2); }
  .mech { font-family: var(--serif); font-weight: 600; font-size: 1.02rem; color: var(--ink); width: 20%; }
  .finding { font-size: .92rem; color: var(--ink-soft); width: 30%; }
  .study { font-family: var(--mono); font-size: .78rem; color: var(--cool-ink); width: 22%; line-height: 1.5; }
  .study .n { color: var(--ink-faint); }
  .apply { font-size: .92rem; color: var(--ink); width: 28%; }
  .apply b { color: var(--warm-ink); font-weight: 600; }

  /* ---------- graded-evidence table ---------- */
  table.graded { width: 100%; border-collapse: collapse; min-width: 860px; background: var(--bg-elev); }
  table.graded th, table.graded td { text-align: left; padding: 1rem 1.1rem; vertical-align: top; border-bottom: 1px solid var(--line); }
  table.graded thead th { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); background: var(--bg-elev-2); position: sticky; top: 0; }
  table.graded tbody tr:last-child td { border-bottom: none; }
  table.graded tbody tr:hover { background: var(--bg-elev-2); }
  .g-claim { font-family: var(--serif); font-weight: 600; font-size: 1rem; color: var(--ink); width: 21%; }
  .g-claim .cite { display:block; font-family: var(--mono); font-size: .7rem; color: var(--cool-ink); margin-top:.4rem; line-height:1.45; font-weight:400; }
  .g-effect { font-size: .9rem; color: var(--ink); width: 20%; }
  .g-effect .es { font-family: var(--mono); font-weight: 600; color: var(--warm-ink); font-variant-numeric: tabular-nums; }
  .g-effect .base { display:block; color: var(--ink-faint); font-family: var(--mono); font-size: .7rem; margin-top:.35rem; }
  .g-grade { width: 12%; }
  .g-caveat { font-size: .88rem; color: var(--ink-soft); width: 30%; font-style: italic; }
  .grade { display:inline-flex; align-items:center; gap:.4rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; padding:.28rem .55rem; border-radius: 999px; white-space:nowrap; border:1px solid transparent; }
  .grade::before { content:""; width:7px; height:7px; border-radius:50%; background: currentColor; flex:none; }
  .grade.robust   { color:#2E9C6A; background: rgba(107,214,155,.14); border-color: rgba(107,214,155,.3); }
  .grade.solid    { color: var(--cool-ink); background: rgba(70,199,210,.13); border-color: rgba(70,199,210,.28); }
  .grade.emerging { color: var(--warm-ink); background: rgba(246,178,78,.15); border-color: rgba(246,178,78,.32); }
  .grade.contested{ color:#C6564D; background: rgba(240,115,106,.13); border-color: rgba(240,115,106,.3); }
  @media (prefers-color-scheme: dark) {
    .grade.robust { color:#7FE0AC; } .grade.contested { color:#F58B82; }
  }
  :root[data-theme="dark"] .grade.robust { color:#7FE0AC; }
  :root[data-theme="dark"] .grade.contested { color:#F58B82; }
  .grade-legend { display:flex; flex-wrap:wrap; gap:.9rem 1.4rem; margin:1.6rem 0 .2rem; font-size:.82rem; color:var(--ink-soft); }
  .grade-legend .li { display:flex; align-items:center; gap:.5rem; }

  /* ---------- efficacy trial ---------- */
  .arms { display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; margin-top:1.4rem; }
  @media (max-width: 820px) { .arms { grid-template-columns: 1fr; } }
  .arm { background: var(--bg-elev); border:1px solid var(--line); border-radius:14px; padding:1.3rem; box-shadow: var(--shadow); position:relative; overflow:hidden; }
  .arm::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; }
  .arm.treat::before { background: var(--warm); }
  .arm.active::before { background: var(--cool); }
  .arm.ctrl::before  { background: var(--ink-faint); }
  .arm .arm-k { font-family: var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-faint); }
  .arm h4 { font-family: var(--serif); font-size:1.12rem; margin:.35rem 0 .5rem; color: var(--ink); }
  .arm p { font-size:.9rem; color: var(--ink-soft); margin:0; }
  .arm .role { display:inline-block; margin-top:.7rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color: var(--warm-ink); }
  .arm.active .role { color: var(--cool-ink); }
  .arm.ctrl .role { color: var(--ink-faint); }
  .endpoints { margin-top:1.4rem; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow: var(--shadow); }
  .ep { display:grid; grid-template-columns: 1.1fr 1.4fr auto; gap:1rem; padding:.95rem 1.15rem; border-top:1px solid var(--line); align-items:center; background: var(--bg-elev); }
  .ep:first-child { border-top:none; }
  @media (max-width: 720px) { .ep { grid-template-columns: 1fr; gap:.3rem; } }
  .ep .ep-name { font-family: var(--serif); font-weight:600; color: var(--ink); font-size:1rem; }
  .ep .ep-name span { display:block; font-family:var(--mono); font-size:.68rem; color: var(--cool-ink); font-weight:400; margin-top:.25rem; }
  .ep .ep-how { font-size:.88rem; color: var(--ink-soft); }
  .ep .ep-tier { font-family: var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; padding:.24rem .5rem; border-radius:999px; white-space:nowrap; border:1px solid var(--line-strong); color: var(--ink-faint); justify-self:start; }
  .ep .ep-tier.primary { color: var(--warm-ink); border-color: rgba(246,178,78,.4); background: rgba(246,178,78,.1); }
  .kill { margin-top:1.4rem; background: var(--bg-elev); border:1px solid var(--line); border-left:3px solid var(--crit); border-radius:12px; padding:1.3rem 1.4rem; }
  .kill h3 { color: var(--ink); }
  .kill .rule { display:flex; gap:.7rem; align-items:flex-start; margin-top:.7rem; font-size:.93rem; color: var(--ink-soft); }
  .kill .rule::before { content:"✕"; color: var(--crit); font-weight:700; flex:none; line-height:1.5; }

  /* ---------- theory of change ---------- */
  .toc-flow { display:grid; grid-template-columns: repeat(4, 1fr) ; gap:.6rem; margin-top:1.6rem; align-items:stretch; }
  @media (max-width: 900px) { .toc-flow { grid-template-columns: 1fr; gap:.9rem; } }
  .toc-col { background: var(--bg-elev); border:1px solid var(--line); border-radius:14px; padding:1.1rem 1.05rem; box-shadow: var(--shadow); position:relative; }
  .toc-col::after { content:"▸"; position:absolute; right:-.62rem; top:50%; transform:translateY(-50%); color: var(--ink-faint); font-size:.9rem; z-index:2; }
  .toc-col:last-child::after { display:none; }
  @media (max-width: 900px) { .toc-col::after { content:"▾"; right:auto; left:50%; top:auto; bottom:-.85rem; transform:translateX(-50%); } }
  .toc-col .st { font-family: var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint); }
  .toc-col h4 { font-family: var(--serif); font-size:1.06rem; margin:.25rem 0 .1rem; }
  .toc-col .when { font-family: var(--mono); font-size:.62rem; color: var(--ink-faint); letter-spacing:.04em; }
  .toc-col.s0 { border-top:3px solid var(--cool); } .toc-col.s0 h4 { color: var(--cool-ink); }
  .toc-col.s1 { border-top:3px solid var(--warm); } .toc-col.s1 h4 { color: var(--warm-ink); }
  .toc-col.s2 { border-top:3px solid #B07CE0; } .toc-col.s2 h4 { color:#9A63D0; }
  .toc-col.s3 { border-top:3px solid var(--good); } .toc-col.s3 h4 { color:#2E9C6A; }
  :root[data-theme="dark"] .toc-col.s2 h4 { color:#C79BEC; } :root[data-theme="dark"] .toc-col.s3 h4 { color:#7FE0AC; }
  @media (prefers-color-scheme: dark) { .toc-col.s2 h4 { color:#C79BEC; } .toc-col.s3 h4 { color:#7FE0AC; } }
  .toc-col ul { list-style:none; margin:.8rem 0 0; padding:0; }
  .toc-col li { font-size:.85rem; color: var(--ink-soft); padding:.4rem 0; border-top:1px solid var(--line); line-height:1.4; }
  .toc-col li:first-child { border-top:none; }
  .assume { display:grid; grid-template-columns: auto 1fr; gap:.9rem 1rem; align-items:start; margin-top:.9rem; padding:1rem 1.1rem; border:1px solid var(--line); border-radius:12px; background: var(--bg-elev); }
  .assume .a-txt { font-size:.92rem; color: var(--ink-soft); }
  .assume .a-txt b { color: var(--ink); }

  /* ---------- applied modes ---------- */
  .modes { display:grid; grid-template-columns: repeat(2,1fr); gap:1.1rem; margin-top:1.6rem; }
  @media (max-width: 760px){ .modes { grid-template-columns:1fr; } }
  .mode { background: var(--bg-elev); border:1px solid var(--line); border-radius:16px; padding:1.5rem 1.5rem 1.3rem; box-shadow: var(--shadow); border-top:3px solid var(--warm); display:flex; flex-direction:column; }
  .mode.repair { border-top-color:#E08A6B; } .mode.distance { border-top-color: var(--cool); }
  .mode.kin { border-top-color:#B07CE0; } .mode.remember { border-top-color: var(--good); }
  .mode .m-for { font-family: var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-faint); }
  .mode h3 { font-size:1.3rem; margin:.35rem 0 .5rem; }
  .mode > p { font-size:.94rem; color: var(--ink-soft); margin:0 0 1rem; }
  .mode .m-sci { font-family: var(--mono); font-size:.72rem; line-height:1.55; color: var(--cool-ink); background: var(--bg-elev-2); border-radius:9px; padding:.7rem .85rem; margin:0 0 1rem; }
  .mode .m-sci b { color: var(--warm-ink); font-weight:600; }
  .mode .m-how { font-size:.92rem; color: var(--ink); margin:0 0 1rem; }
  .mode .m-how b { color: var(--warm-ink); }
  .mode .m-guard { margin-top:auto; display:flex; gap:.55rem; align-items:flex-start; font-size:.82rem; color: var(--ink-soft); border-top:1px solid var(--line); padding-top:.85rem; }
  .mode .m-guard::before { content:"🛡"; flex:none; filter: grayscale(.2); font-size:.85rem; }

  /* ---------- biological signatures ---------- */
  .bio { display:grid; grid-template-columns: 1fr 1fr; gap:1.1rem; margin-top:1.6rem; }
  @media (max-width: 760px){ .bio { grid-template-columns:1fr; } }
  .sig { background: var(--bg-elev); border:1px solid var(--line); border-radius:16px; padding:1.4rem 1.5rem 1.3rem; box-shadow: var(--shadow); position:relative; overflow:hidden; }
  .sig .wave { display:block; width:100%; height:34px; margin:.2rem 0 1rem; opacity:.9; }
  .sig .sig-k { font-family: var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-faint); }
  .sig h3 { font-size:1.24rem; margin:.3rem 0 .6rem; }
  .sig p { font-size:.93rem; color: var(--ink-soft); margin:0 0 .9rem; }
  .sig .sig-cite { font-family: var(--mono); font-size:.7rem; color: var(--cool-ink); line-height:1.5; }
  .sig .sig-imp { font-size:.9rem; color: var(--ink); border-top:1px solid var(--line); padding-top:.85rem; margin-top:.2rem; }
  .sig .sig-imp b { color: var(--warm-ink); }

  /* ---------- accessibility commitments ---------- */
  .commit { display:grid; grid-template-columns: repeat(2,1fr); gap:1px; background: var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-top:1.4rem; }
  @media (max-width: 680px){ .commit { grid-template-columns:1fr; } }
  .commit > div { background: var(--bg-elev); padding:1.3rem 1.4rem; }
  .commit .c-h { font-family: var(--serif); font-weight:600; font-size:1.08rem; color: var(--ink); display:flex; align-items:center; gap:.5rem; margin-bottom:.4rem; }
  .commit .c-h .ic { font-size:1.05rem; filter:grayscale(.15); }
  .commit p { font-size:.9rem; color: var(--ink-soft); margin:0; }
  .commit p b { color: var(--warm-ink); font-weight:600; }

  /* ---------- loneliness mechanism (spiral) ---------- */
  .lspiral { margin-top:1.7rem; }
  .lstep { display:grid; grid-template-columns:auto 1fr; gap:1.1rem; padding:1.2rem 0; border-top:1px solid var(--line); align-items:start; }
  .lstep:first-child { border-top:none; }
  .lstep .ln { font-family:var(--mono); font-size:.82rem; font-weight:600; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1.5px solid; flex:none; font-variant-numeric:tabular-nums; }
  .lstep.s1 .ln { color:var(--cool-ink); border-color:var(--cool); }
  .lstep.s2 .ln { color:var(--warm-ink); border-color:var(--warm); }
  .lstep.s3 .ln { color:var(--warm-ink); border-color:var(--warm); }
  .lstep.s4 .ln { color:var(--crit); border-color:var(--crit); }
  .lstep.s5 .ln { color:var(--crit); border-color:var(--crit); }
  .lstep h4 { font-family:var(--serif); font-size:1.14rem; margin:.2rem 0 .35rem; color:var(--ink); }
  .lstep p { margin:0; font-size:.94rem; color:var(--ink-soft); }
  .lstep .lc { font-family:var(--mono); font-size:.68rem; color:var(--ink-faint); margin-top:.5rem; display:block; letter-spacing:.02em; }

  /* ---------- principles list ---------- */
  .principle { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; padding: 1.3rem 0; border-top: 1px solid var(--line); align-items: start; }
  .principle:first-child { border-top: none; }
  .principle .p-n { font-family: var(--mono); font-size: .8rem; color: var(--warm-ink); padding-top: .35rem; font-variant-numeric: tabular-nums; }
  .principle h3 { margin-bottom: .3rem; font-size: 1.18rem; }
  .principle p { margin: 0; color: var(--ink-soft); font-size: .96rem; }

  /* ---------- loop / session steps ---------- */
  .loop { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; counter-reset: step; }
  @media (max-width: 820px) { .loop { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 480px) { .loop { grid-template-columns: 1fr; } }
  .step { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 1.4rem; position: relative; box-shadow: var(--shadow); }
  .step .phase { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cool-ink); }
  .step h3 { font-size: 1.14rem; margin: .5rem 0 .5rem; }
  .step p { font-size: .9rem; color: var(--ink-soft); margin: 0; }
  .step .sci { margin-top: .8rem; font-family: var(--mono); font-size: .68rem; color: var(--ink-faint); letter-spacing: .03em; }

  /* card-type pills */
  .cardtypes { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; }
  @media (max-width: 620px){ .cardtypes { grid-template-columns: 1fr; } }
  .ctype { border: 1px solid var(--line); border-left: 3px solid var(--warm); border-radius: 10px; padding: 1rem 1.2rem; background: var(--bg-elev); }
  .ctype.reveal { border-left-color: var(--warm); }
  .ctype.guess { border-left-color: var(--cool); }
  .ctype.together { border-left-color: #B07CE0; }
  .ctype.reflect { border-left-color: var(--good); }
  .ctype h4 { font-size: 1.04rem; margin: 0 0 .25rem; }
  .ctype .lbl { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
  .ctype p { font-size: .9rem; color: var(--ink-soft); margin: .3rem 0 0; }
  .ctype .ex { font-family: var(--serif); font-style: italic; color: var(--ink); font-size: .95rem; margin-top: .5rem; display: block; }

  /* ---------- version timeline ---------- */
  .versions { display: flex; flex-direction: column; gap: 0; }
  .ver { display: grid; grid-template-columns: 130px 1fr; gap: 1.6rem; padding: 2rem 0; border-top: 1px solid var(--line); position: relative; }
  @media (max-width: 720px) { .ver { grid-template-columns: 1fr; gap: .8rem; } }
  .ver-mark { position: relative; }
  .ver-tag { font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; color: var(--warm-ink); text-transform: uppercase; }
  .ver-depth { font-family: var(--mono); font-size: .66rem; color: var(--ink-faint); margin-top: .35rem; display: flex; align-items: center; gap: .4rem; }
  .ver-depth .bar { height: 4px; border-radius: 3px; background: linear-gradient(90deg, var(--warm), var(--cool)); display: inline-block; }
  .ver h3 { font-size: 1.5rem; margin-bottom: .6rem; }
  .ver .vname { color: var(--ink-faint); font-family: var(--sans); font-size: .95rem; font-style: normal; font-weight: 500; }
  .wcw { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 1rem; }
  @media (max-width: 720px) { .wcw { grid-template-columns: 1fr; } }
  .wcw > div { background: var(--bg-elev); padding: 1.1rem 1.2rem; }
  .wcw .h { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .5rem; }
  .wcw .weak .h { color: var(--crit); }
  .wcw .chg .h { color: var(--warm-ink); }
  .wcw .why .h { color: var(--cool-ink); }
  .wcw p { font-size: .9rem; color: var(--ink-soft); margin: 0; }
  .ver ul { margin: 1rem 0 0; padding-left: 1.1rem; }
  .ver li { font-size: .95rem; color: var(--ink-soft); margin-bottom: .45rem; }
  .ver li b { color: var(--ink); font-weight: 600; }

  /* ---------- metrics: keep vs refuse ---------- */
  .metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
  @media (max-width: 620px){ .metrics { grid-template-columns: 1fr; } }
  .mcol { border: 1px solid var(--line); border-radius: 14px; padding: 1.4rem 1.5rem; background: var(--bg-elev); }
  .mcol.refuse { background: var(--bg-elev-2); }
  .mcol h3 { font-size: 1.1rem; display: flex; align-items: center; gap: .5rem; }
  .mcol ul { list-style: none; padding: 0; margin: .8rem 0 0; }
  .mcol li { font-size: .93rem; color: var(--ink-soft); padding: .4rem 0 .4rem 1.5rem; position: relative; border-top: 1px solid var(--line); }
  .mcol li:first-child { border-top: none; }
  .mcol.keep li::before { content: "→"; position: absolute; left: 0; color: var(--good); }
  .mcol.refuse li::before { content: "✕"; position: absolute; left: 0; color: var(--crit); font-size: .8rem; top: .55rem; }

  /* ---------- risks ---------- */
  .risk { border-top: 1px solid var(--line); padding: 1.2rem 0; display: grid; grid-template-columns: 1fr 1.3fr; gap: 1.5rem; }
  @media (max-width: 720px){ .risk { grid-template-columns: 1fr; gap: .4rem; } }
  .risk:first-of-type { border-top: none; }
  .risk h4 { font-size: 1.1rem; margin: 0; color: var(--crit); }
  .risk p { margin: 0; font-size: .95rem; color: var(--ink-soft); }
  .risk .mit { color: var(--ink); }
  .risk .mit b { color: var(--warm-ink); }

  /* ---------- callout ---------- */
  .callout { border: 1px solid var(--line-strong); border-radius: 16px; padding: clamp(1.6rem, 3vw, 2.4rem); background: linear-gradient(135deg, var(--glow-warm), transparent 55%), var(--bg-elev); position: relative; }
  .callout .q { font-family: var(--serif); font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.35; color: var(--ink); font-weight: 600; text-wrap: balance; margin: 0; }
  .callout .q .hl { color: var(--warm-ink); }

  /* ---------- footer ---------- */
  footer { border-top: 1px solid var(--line); padding: 3rem 0 4rem; color: var(--ink-faint); }
  footer .refs { font-family: var(--mono); font-size: .74rem; line-height: 1.9; color: var(--ink-faint); columns: 2; column-gap: 2.5rem; }
  @media (max-width: 620px){ footer .refs { columns: 1; } }
  footer .refs a { color: var(--ink-soft); text-decoration: none; }
  footer .refs a:hover { color: var(--warm-ink); }
  footer .refgrid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.7rem 2.5rem; margin-top: .3rem; }
  @media (max-width: 860px){ footer .refgrid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px){ footer .refgrid { grid-template-columns: 1fr; } }
  footer .refcat { font-family: var(--mono); font-size: .72rem; line-height: 1.7; color: var(--ink-faint); break-inside: avoid; }
  footer .refcat h4 { font-family: var(--mono); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: var(--warm-ink); margin: 0 0 .6rem; font-weight: 600; }
  footer .refcat a { color: var(--ink-soft); text-decoration: none; display: block; margin-bottom: .4rem; }
  footer .refcat a:hover { color: var(--warm-ink); }
  .foot-note { font-family: var(--sans); font-size: .9rem; color: var(--ink-soft); margin-bottom: 1.8rem; max-width: 60ch; }

  .divider-glyph { display: flex; justify-content: center; padding: 1.5rem 0 0; }
  .divider-glyph svg { width: 120px; opacity: .6; }

  :focus-visible { outline: 2px solid var(--cool-ink); outline-offset: 3px; border-radius: 4px; }

  .sub { color: var(--ink-soft); }
  .tabnum { font-variant-numeric: tabular-nums; }

  /* ---------- decks (V4) ---------- */
  .tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; }
  @media (max-width: 720px) { .tiers { grid-template-columns: 1fr; } }
  .tier { background: var(--bg-elev); border: 1px solid var(--line); border-top: 3px solid var(--warm); border-radius: 14px; padding: 1.4rem; box-shadow: var(--shadow); }
  .tier.spark { border-top-color: var(--cool); }
  .tier.kindling { border-top-color: var(--warm); }
  .tier.blaze { border-top-color: var(--crit); }
  .tier .t-lbl { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
  .tier h3 { margin: .4rem 0 .5rem; font-size: 1.3rem; }
  .tier p { font-size: .92rem; color: var(--ink-soft); margin: 0; }

  .deck-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.3rem; }
  @media (max-width: 720px) { .deck-grid { grid-template-columns: 1fr; } }
  .deck { background: var(--bg-elev); border: 1px solid var(--line); border-left: 3px solid var(--warm); border-radius: 12px; padding: 1.2rem 1.3rem; box-shadow: var(--shadow); }
  .deck.reveal { border-left-color: var(--warm); }
  .deck.guess { border-left-color: var(--cool); }
  .deck.together { border-left-color: #B07CE0; }
  .deck.reflect { border-left-color: var(--good); }
  .deck .d-lbl { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); display: block; margin-bottom: .5rem; }
  .rung { display: grid; grid-template-columns: 76px 1fr; gap: .7rem; align-items: start; padding: .6rem 0; border-top: 1px solid var(--line); }
  .rung:first-of-type { border-top: none; }
  .rung .r { font-family: var(--mono); font-size: .64rem; letter-spacing: .07em; text-transform: uppercase; padding-top: .28rem; }
  .rung .r.spark { color: var(--cool-ink); }
  .rung .r.kindling { color: var(--warm-ink); }
  .rung .r.blaze { color: var(--crit); }
  .rung p { margin: 0; font-size: .95rem; color: var(--ink); font-family: var(--serif); font-style: italic; line-height: 1.4; }