/* ===========================================================
     Two modes of one system.
       Zone A "Start here"  — near-white, centred, one idea per screen
       Zone B "Reference"   — cool grey canvas, white cards, left-aligned
     One accent, one type scale, one set of tokens across both.
     =========================================================== */
  :root{
    --bg:#FBFBFC;
    --bg-ref:#EFF0F3;
    --surface:#FFFFFF;
    --surface-2:#F5F6F8;
    --ink:#16171A;
    --ink-2:#565A62;
    --ink-3:#878B94;
    --ink-faint:var(--ink-3);
    --line:#E6E7EC;
    --line-2:#D4D7DE;
    --accent:#0B6BD4;
    --accent-ink:#0A5CB8;
    --accent-soft:#E9F1FC;
    --up:#0F7A4A;
    --up-soft:#E5F3EB;
    --up-ink:#0C6640;
    --down:#B3261E;
    --down-soft:#FBEBE9;
    --down-ink:#96201A;
    --warn-soft:#FFF5E3;
    --warn-line:#EBCF95;
    --warn-ink:#7A5A14;
    --on-dark:#F6F7F9;
    --on-dark-2:#B9BDC6;
    --shadow-1:0 1px 2px rgba(16,20,30,.04), 0 10px 24px -20px rgba(16,20,30,.3);
    --shadow-2:0 2px 6px rgba(16,20,30,.06), 0 24px 50px -28px rgba(16,20,30,.4);
    --radius:16px;
    --radius-sm:10px;
    --wrap:1120px;
    --read:68ch;
    --f-ui:-apple-system,"SF Pro Text","SF Pro Display",Inter,system-ui,"Segoe UI",sans-serif;
    --f-mono:ui-monospace,"SF Mono",SFMono-Regular,"IBM Plex Mono",Menlo,monospace;
    --t-hero:clamp(2.7rem,6.4vw,4.5rem);
    --t-h1:clamp(2rem,4.4vw,3rem);
    --t-h2:clamp(1.4rem,2.5vw,1.8rem);
    --t-h3:1.1rem;
    --t-body:1.0625rem;
    --t-sm:.9375rem;
    --t-xs:.8125rem;
    --t-label:.6875rem;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      color-scheme:dark;
      --bg:#0B0B0D; --bg-ref:#111214; --surface:#161719; --surface-2:#1D1E22;
      --ink:#F4F4F6; --ink-2:#A2A6AD; --ink-3:#73767D;
      --line:#26272C; --line-2:#36383E;
      --accent:#4A9EFF; --accent-ink:#86BCFF; --accent-soft:#10243D;
      --up:#4ADE8C; --up-soft:#0E2A1C; --up-ink:#7DEBAF;
      --down:#FF8E7E; --down-soft:#331714; --down-ink:#FFB3A6;
      --warn-soft:#2B2210; --warn-line:#5A4718; --warn-ink:#E8C98A;
      --on-dark:#F6F7F9; --on-dark-2:#B9BDC6;
      --shadow-1:0 1px 2px rgba(0,0,0,.5), 0 10px 24px -20px rgba(0,0,0,.8);
      --shadow-2:0 2px 6px rgba(0,0,0,.55), 0 24px 50px -28px rgba(0,0,0,.9);
    }
  }
  :root[data-theme="dark"]{
    color-scheme:dark;
    --bg:#0B0B0D; --bg-ref:#111214; --surface:#161719; --surface-2:#1D1E22;
    --ink:#F4F4F6; --ink-2:#A2A6AD; --ink-3:#73767D;
    --line:#26272C; --line-2:#36383E;
    --accent:#4A9EFF; --accent-ink:#86BCFF; --accent-soft:#10243D;
    --up:#4ADE8C; --up-soft:#0E2A1C; --up-ink:#7DEBAF;
    --down:#FF8E7E; --down-soft:#331714; --down-ink:#FFB3A6;
    --warn-soft:#2B2210; --warn-line:#5A4718; --warn-ink:#E8C98A;
    --on-dark:#F6F7F9; --on-dark-2:#B9BDC6;
    --shadow-1:0 1px 2px rgba(0,0,0,.5), 0 10px 24px -20px rgba(0,0,0,.8);
    --shadow-2:0 2px 6px rgba(0,0,0,.55), 0 24px 50px -28px rgba(0,0,0,.9);
  }

  *{ box-sizing:border-box; }
  body{
    background:var(--bg);
    color:var(--ink-2);
    font-family:var(--f-ui);
    font-size:var(--t-body);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    transition:background .35s ease;
  }
  body.ref{ background:var(--bg-ref); }
  a{ color:inherit; }
  ::selection{ background:var(--accent); color:#fff; }
  .wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:20px; padding-block:0 110px; }
  .mono{ font-family:var(--f-mono); font-size:.9em; color:var(--ink); }

  h1,h2,h3{ color:var(--ink); text-wrap:balance; }

  /* ---------------- masthead ---------------- */
  .topbar{
    position:sticky; top:env(safe-area-inset-top, 0px); z-index:20;
    background:var(--bg); padding-block:18px 10px;
    border-bottom:1px solid transparent;
    transition:background .35s ease, border-color .2s;
  }
  body.ref .topbar{ background:var(--bg-ref); }
  .topbar.stuck{ border-bottom-color:var(--line); }
  .bar-row{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
  .brand{ display:flex; flex-direction:column; gap:3px; text-decoration:none; flex:0 0 auto; }
  .brand .kicker{
    font-family:var(--f-mono); font-size:9.5px; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink);
  }
  .brand .brand-name{
    font-size:1.3rem; font-weight:650; line-height:1.1; letter-spacing:-.022em; color:var(--ink);
  }
  .search-row{ position:relative; flex:1 1 280px; min-width:200px; }
  .search-row input{
    width:100%; font-family:inherit; font-size:var(--t-sm);
    padding:11px 14px 11px 40px; border-radius:11px;
    border:1px solid var(--line-2); background:var(--surface); color:var(--ink);
  }
  .search-row input::placeholder{ color:var(--ink-3); }
  .search-row input:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
  .search-row svg{
    position:absolute; left:14px; top:50%; transform:translateY(-50%);
    width:15px; height:15px; color:var(--ink-3); pointer-events:none;
  }
  .nav-row{ display:flex; flex-wrap:wrap; gap:5px; padding:14px 0 2px; }
  .nav-chip{
    flex:0 0 auto; font-size:var(--t-xs); font-weight:550;
    padding:7px 13px; border-radius:999px; border:1px solid transparent;
    background:transparent; color:var(--ink-2);
    cursor:pointer; text-decoration:none; white-space:nowrap;
    transition:background .15s, color .15s;
  }
  .nav-chip:hover{ background:var(--surface-2); color:var(--ink); }
  .nav-chip.active{ background:var(--ink); color:var(--bg); }
  .nav-div{ width:1px; align-self:stretch; background:var(--line); margin-inline:7px; flex:0 0 auto; }
  .risk-chip{
    margin-top:11px; font-size:var(--t-xs); color:var(--ink-3);
    display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  }
  .risk-chip b{
    font-family:var(--f-mono); font-size:9px; font-weight:600;
    letter-spacing:.13em; text-transform:uppercase; color:var(--ink-2);
    border:1px solid var(--line-2); padding:3px 8px; border-radius:5px; flex:0 0 auto;
  }
  .risk-chip a{ color:var(--ink-3); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-2); }
  .risk-chip a:hover{ color:var(--ink); }

  /* ---------------- page openers ---------------- */
  .opener{
    position:relative; overflow:hidden; border-radius:var(--radius);
    margin-top:22px; background:#12161C; isolation:isolate;
  }
  .opener .op-img{ position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; }
  .opener .op-scrim{
    position:absolute; inset:0; z-index:1;
    background:
      linear-gradient(100deg, rgba(8,11,16,.74) 0%, rgba(8,11,16,.34) 54%, rgba(8,11,16,.10) 100%),
      linear-gradient(177deg, rgba(8,11,16,.16) 0%, rgba(8,11,16,.50) 58%, rgba(8,11,16,.86) 100%);
  }
  .opener .op-body{ position:relative; z-index:2; padding:72px 48px 44px; }
  .op-eyebrow{
    margin:0 0 16px; font-family:var(--f-mono); font-size:var(--t-label); font-weight:600;
    letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-2);
  }
  .opener h1{ margin:0; font-size:var(--t-h1); line-height:1.04; letter-spacing:-.032em; font-weight:700; color:var(--on-dark); }
  .op-blurb{ margin:18px 0 0; max-width:54ch; font-size:1.05rem; line-height:1.6; color:var(--on-dark-2); }
  .opener.tall .op-body{ padding:150px 48px 48px; }
  .opener.tall h1{ font-size:var(--t-hero); }
  .opener.short .op-body{ padding:54px 42px 34px; }
  .op-note{
    display:inline-flex; align-items:center; gap:8px; margin-top:22px;
    font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--on-dark-2); background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
    padding:6px 11px; border-radius:6px; backdrop-filter:blur(6px);
  }

  /* ---------------- page layout ---------------- */
  .page-layout{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:52px; align-items:start; }
  .page-layout.solo{ grid-template-columns:minmax(0,1fr); }
  .page-main{ min-width:0; }
  .side-menu{ position:sticky; top:var(--stick-top, 200px); display:flex; flex-direction:column; gap:1px; padding-top:34px; }
  .side-head{ padding-bottom:12px; margin-bottom:10px; border-bottom:1px solid var(--line); }
  .side-title{ display:block; font-size:1rem; font-weight:650; line-height:1.2; letter-spacing:-.015em; color:var(--ink); }
  .side-sub{
    display:block; margin-top:4px; font-family:var(--f-mono); font-size:9px; font-weight:600;
    letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
  }
  .side-link{
    display:flex; align-items:baseline; justify-content:space-between; gap:8px;
    width:100%; text-align:left; background:none; border:0;
    padding:8px 11px; border-radius:8px;
    font-family:inherit; font-size:var(--t-xs); line-height:1.4;
    color:var(--ink-2); cursor:pointer; text-decoration:none;
    transition:background .14s, color .14s;
  }
  .side-link:hover{ background:var(--surface-2); color:var(--ink); }
  .side-link:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
  .side-link.active{ background:var(--accent-soft); color:var(--accent-ink); font-weight:600; }
  .side-link.back{
    font-family:var(--f-mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
    color:var(--ink-3); margin-bottom:8px;
  }
  .side-count{ font-family:var(--f-mono); font-size:9.5px; color:var(--ink-3); flex:0 0 auto; }
  .side-scroll{ display:flex; flex-direction:column; max-height:calc(100vh - 320px); overflow-y:auto; scrollbar-width:thin; }
  @media (max-width:980px){
    .page-layout{ grid-template-columns:1fr; gap:10px; }
    .side-menu{ position:static; padding-top:26px; flex-direction:row; flex-wrap:wrap; gap:6px; }
    .side-head{ width:100%; border-bottom:0; padding-bottom:0; margin-bottom:2px; }
    .side-link{ width:auto; border:1px solid var(--line-2); border-radius:999px; padding:6px 13px; }
    .side-scroll{ flex-direction:row; flex-wrap:wrap; gap:6px; max-height:none; overflow:visible; }
  }

  /* ---------------- progressive title rule ---------------- */
  .title-rule{ display:flex; align-items:center; gap:14px; margin:0 0 26px; }
  .title-rule .track{ position:relative; flex:1 1 auto; height:2px; background:var(--line-2); border-radius:2px; overflow:hidden; }
  .title-rule .track span{
    position:absolute; left:0; top:0; bottom:0; background:var(--accent); border-radius:2px;
    transition:width .6s cubic-bezier(.4,0,.2,1);
  }
  .title-rule .step{ flex:0 0 auto; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; color:var(--ink-3); }
  .opener .title-rule{ margin:22px 0 0; max-width:300px; }
  .opener .title-rule .track{ background:rgba(255,255,255,.26); }
  .opener .title-rule .track span{ background:var(--on-dark); }
  .opener .title-rule .step{ color:var(--on-dark-2); }

  /* ---------------- scroll rail + margin axis ---------------- */
  .scroll-rail{ display:none; position:fixed; right:14px; top:220px; bottom:48px; width:2px; background:var(--line); border-radius:2px; z-index:6; }
  .scroll-rail span{ display:block; width:100%; height:0; background:var(--accent); border-radius:2px; }
  @media (min-width:1180px){ .scroll-rail{ display:block; } }
  .deco{ display:none; }
  .deco-left{
    position:fixed; top:0; bottom:0; left:18px; width:104px; height:100vh;
    opacity:1; pointer-events:none; z-index:0;
  }
  .deco-left .axis-track{ stroke:var(--line); stroke-width:1.5; stroke-linecap:round; }
  .deco-left .axis-fill{ stroke:var(--accent); stroke-width:1.5; stroke-linecap:round; }
  .deco-left .axis-dot{ fill:var(--accent); }
  .deco-left .axis-tick{ stroke:var(--line-2); stroke-width:1; }
  .deco-left .axis-tick.on{ stroke:var(--accent); stroke-width:1.6; }
  .deco-left .axis-label{ font-family:var(--f-mono); font-size:8.5px; letter-spacing:1.3px; fill:var(--ink-3); text-anchor:end; }
  .deco-left .axis-label.on{ fill:var(--ink); font-weight:600; }
  @media (min-width:1380px){ .deco-left{ display:block; } }

  .group, .relates, .card, .qz-item{ scroll-margin-top:190px; }

  .fineprint{
    margin-top:72px; padding-top:22px; border-top:1px solid var(--line);
    font-size:var(--t-xs); line-height:1.7; color:var(--ink-3);
  }

  /* ---------------- home ---------------- */
  .hero{ position:relative; }
  .hero h1{ margin:0; }
  .ticker{ margin:18px 0 0; border-radius:var(--radius-sm); overflow:hidden; white-space:nowrap; background:var(--surface); border:1px solid var(--line); }
  .ticker-track{ display:inline-flex; animation:scroll-left 64s linear infinite; }
  .ticker-track span{
    font-family:var(--f-mono); font-size:10.5px; font-weight:550; letter-spacing:.08em;
    color:var(--ink-3); padding:10px 18px;
  }
  @keyframes scroll-left{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  @media (prefers-reduced-motion: reduce){ .ticker-track{ animation:none; } .ticker{ overflow-x:auto; } }

  .first-run{
    margin-top:22px; padding:38px 44px;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow-1);
  }
  .first-run h2{ margin:0 0 16px; font-size:1.45rem; font-weight:650; letter-spacing:-.022em; }
  .first-run p{ margin:0 0 15px; font-size:var(--t-body); line-height:1.7; color:var(--ink-2); max-width:var(--read); }
  .first-run p:last-of-type{ margin-bottom:0; }
  .first-run .fr-num{ font-family:var(--f-mono); font-weight:600; color:var(--down); font-size:.94em; }
  .first-run .fr-links{ display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }
  .first-run .fr-links a{
    font-size:var(--t-sm); font-weight:550; text-decoration:none;
    padding:11px 20px; border-radius:999px; background:var(--accent); color:#fff; border:1px solid var(--accent);
  }
  .first-run .fr-links a.ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
  .first-run .fr-links a:hover{ opacity:.88; }

  .tile-sec{ display:flex; align-items:baseline; gap:14px; margin:72px 0 16px; }
  .tile-sec h2{
    margin:0; flex:0 0 auto; font-family:var(--f-mono); font-size:var(--t-label); font-weight:600;
    letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink);
  }
  .tile-sec span{ font-size:var(--t-xs); color:var(--ink-3); line-height:1.5; max-width:62ch; }
  @media (max-width:700px){ .tile-sec{ flex-wrap:wrap; gap:6px; } }
  .tiles{ display:grid; grid-template-columns:repeat(auto-fill, minmax(290px,1fr)); gap:14px; }
  .tile{
    position:relative; display:block; text-decoration:none;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:26px 26px 24px; box-shadow:var(--shadow-1);
    transition:border-color .16s, transform .16s, box-shadow .16s;
  }
  .tile:hover{ border-color:var(--line-2); transform:translateY(-2px); box-shadow:var(--shadow-2); }
  .tile-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:9px; }
  .tile h2{ margin:0; font-size:1.28rem; font-weight:650; line-height:1.18; letter-spacing:-.022em; }
  .tile .count{ font-family:var(--f-mono); font-size:10.5px; color:var(--ink-3); flex:0 0 auto; }
  .tile p{ margin:0; font-size:var(--t-sm); line-height:1.55; color:var(--ink-2); }

  /* ---------------- page head bits ---------------- */
  .page-head{ padding:0; }
  .blurb{ max-width:var(--read); margin:0; font-size:1.05rem; line-height:1.68; color:var(--ink-2); }
  .callout{
    margin-top:28px; background:var(--surface); border:1px solid var(--line);
    border-radius:var(--radius); padding:24px 28px;
    font-size:var(--t-sm); line-height:1.7; color:var(--ink-2); max-width:var(--read);
  }
  .callout a{ color:var(--accent-ink); }
  .relates{
    margin-top:28px; background:var(--surface); border:1px solid var(--line);
    border-radius:var(--radius); padding:28px 32px 30px; box-shadow:var(--shadow-1);
  }
  .relates h2{
    margin:0 0 14px; font-family:var(--f-mono); font-size:var(--t-label); font-weight:600;
    letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink);
  }
  .relates p{ margin:0; font-size:var(--t-sm); line-height:1.75; color:var(--ink-2); max-width:var(--read); }
  .relates .bullets{ max-width:var(--read); }

  .group{ margin-top:72px; }
  .group-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:8px; }
  .group-head h2{ margin:0; font-size:var(--t-h2); font-weight:650; letter-spacing:-.025em; }
  .group-head .count{ font-family:var(--f-mono); font-size:11px; color:var(--ink-3); }
  .group-blurb{ margin:0 0 26px; font-size:var(--t-sm); line-height:1.65; color:var(--ink-2); max-width:var(--read); }

  .bullets{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; }
  .bullets li{ position:relative; padding-left:20px; font-size:var(--t-sm); line-height:1.6; color:var(--ink-2); }
  .bullets li::before{
    content:""; position:absolute; left:3px; top:.62em; width:5px; height:5px;
    border-radius:50%; background:var(--accent); opacity:.65;
  }
  .bullets b{ font-family:var(--f-mono); font-weight:600; font-size:.9em; color:var(--ink); }

  /* ---------------- cards ---------------- */
  .grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(360px,1fr)); gap:16px; }
  .grid.wide{ grid-template-columns:1fr; }
  @media (max-width:720px){ .grid{ grid-template-columns:1fr; } }
  .card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:26px 28px; box-shadow:var(--shadow-1);
  }
  a.card{ text-decoration:none; display:block; transition:border-color .16s, transform .16s, box-shadow .16s; }
  a.card:hover{ border-color:var(--line-2); transform:translateY(-2px); box-shadow:var(--shadow-2); }
  a.card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:10px; }
  .card-head h3{ margin:0; font-size:1.14rem; font-weight:650; letter-spacing:-.018em; line-height:1.25; }
  .chips{ flex:0 0 auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
  .abbr{
    flex:0 0 auto; font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.03em;
    color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line);
    padding:3px 8px; border-radius:6px; white-space:nowrap;
  }
  .abbr.sig-up{ color:var(--up-ink); background:var(--up-soft); border-color:transparent; }
  .abbr.sig-down{ color:var(--down-ink); background:var(--down-soft); border-color:transparent; }
  .abbr.sig-flat{ color:var(--ink-3); background:var(--surface-2); border-color:var(--line); }
  .card p{ margin:0; font-size:var(--t-sm); line-height:1.65; color:var(--ink-2); }
  .card-foot{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    margin-top:20px; padding-top:15px; border-top:1px solid var(--line);
    font-family:var(--f-mono); font-size:10px; color:var(--ink-3);
  }
  .card-foot .more{ color:var(--accent-ink); font-weight:600; }
  .result-cat{
    display:block; margin-bottom:8px; font-family:var(--f-mono); font-size:9.5px;
    letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
  }

  /* ---------------- evidence tiers ---------------- */
  .ev{
    flex:0 0 auto; font-family:var(--f-mono); font-size:8.5px; font-weight:600;
    letter-spacing:.11em; text-transform:uppercase;
    padding:3px 7px; border-radius:5px; white-space:nowrap; cursor:help;
    border:1px solid transparent;
  }
  .ev-D{ color:var(--up-ink); background:var(--up-soft); }
  .ev-S{ color:var(--accent-ink); background:var(--accent-soft); }
  .ev-U{ color:var(--ink-3); background:transparent; border-color:var(--line-2); border-style:dashed; }
  .ev-big{ font-size:10px; padding:5px 11px; }
  .detail-meta .ev-D{ color:#8FE8B8; background:rgba(74,222,140,.14); }
  .detail-meta .ev-S{ color:#9CC8FF; background:rgba(74,158,255,.16); }
  .detail-meta .ev-U{ color:var(--on-dark-2); border-color:rgba(255,255,255,.28); }
  .ev-legend{
    margin-top:72px; background:var(--surface); border:1px solid var(--line);
    border-radius:var(--radius); padding:30px 34px 32px;
  }
  .ev-legend h2{ margin:0 0 12px; font-size:1.3rem; font-weight:650; letter-spacing:-.022em; }
  .ev-legend > p{ margin:0 0 20px; font-size:var(--t-sm); line-height:1.72; color:var(--ink-2); max-width:var(--read); }
  .ev-rows{ list-style:none; margin:0 0 20px; padding:0; display:grid; gap:0; }
  .ev-rows li{
    display:grid; grid-template-columns:110px 88px minmax(0,1fr); gap:16px; align-items:start;
    padding:18px 0; border-top:1px solid var(--line);
  }
  .ev-rows li p{ margin:0; font-size:var(--t-sm); line-height:1.65; color:var(--ink-2); }
  .ev-n{ font-family:var(--f-mono); font-size:10.5px; color:var(--ink-3); padding-top:4px; }
  .ev-foot{ margin:0; font-size:var(--t-xs); line-height:1.65; color:var(--ink-3); max-width:var(--read); }
  .ev-foot a{ color:var(--accent-ink); }
  @media (max-width:680px){ .ev-rows li{ grid-template-columns:1fr; gap:8px; } }

  /* ---------------- figures ---------------- */
  .pattern-body{ display:flex; gap:18px; align-items:flex-start; }
  .glyph-slot{ flex:0 0 100px; display:flex; align-items:flex-start; justify-content:center; }
  svg.glyph{ height:84px; width:auto; max-width:100px; }
  .pattern-body p{ flex:1 1 auto; min-width:0; }

  .shape-body{ display:flex; gap:24px; align-items:center; flex-wrap:wrap; }
  .shape-figs{ display:flex; gap:12px; flex:1 1 auto; flex-wrap:wrap; max-width:100%; min-width:0; }
  .shape-figs figure{ margin:0; display:flex; flex-direction:column; align-items:center; gap:7px; }
  .fig-frame{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px 9px; line-height:0; }
  .shape-figs figcaption{ font-family:var(--f-mono); font-size:9px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); }
  svg.shape-line{ width:252px; max-width:100%; height:auto; }
  svg.shape-candles{ width:160px; max-width:100%; height:auto; }
  .line-path{ fill:none; stroke:var(--ink); stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round; }
  .guide{ stroke:var(--accent); stroke-width:1; stroke-dasharray:3 3; opacity:.8; }
  .shape-body p{ flex:1 1 300px; min-width:min(100%,280px); }

  svg.smc-fig{ width:250px; max-width:100%; height:auto; display:block; }
  .smc-zone{ stroke-width:1; }
  .smc-zone-up{ fill:var(--up); fill-opacity:.12; stroke:var(--up); stroke-opacity:.32; }
  .smc-zone-down{ fill:var(--down); fill-opacity:.12; stroke:var(--down); stroke-opacity:.32; }
  .smc-zone-gold{ fill:var(--accent); fill-opacity:.15; stroke:var(--accent); stroke-opacity:.5; }
  .smc-zone-navy{ fill:var(--ink); fill-opacity:.07; stroke:var(--ink); stroke-opacity:.22; }
  .smc-line{ stroke:var(--ink-3); stroke-width:1; stroke-dasharray:3 3; }
  .smc-line.gold{ stroke:var(--accent); stroke-width:1.3; }
  .smc-label{ font-family:var(--f-mono); font-size:8.5px; font-weight:600; letter-spacing:.05em; fill:var(--ink-2); }
  .smc-label.gold{ fill:var(--accent-ink); }
  .smc-tag{ font-family:var(--f-mono); font-size:8px; font-weight:600; letter-spacing:.07em; fill:var(--ink-3); }
  .kz-track{ fill:var(--line); }
  .kz-win{ fill:var(--accent); }

  .diagram-panel{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:30px 16px 20px; margin:34px 0 0; box-shadow:var(--shadow-1);
  }
  .diagram-scroll{ overflow-x:auto; }
  .diagram-scroll svg{ display:block; width:100%; min-width:560px; max-width:680px; margin:0 auto; height:auto; }
  .dg-title{ font-family:var(--f-mono); font-size:13px; font-weight:600; fill:var(--ink); letter-spacing:.05em; }
  .dg-label{ font-family:var(--f-mono); font-size:12px; fill:var(--ink-2); }
  .dg-caption{ font-family:var(--f-ui); font-size:12.5px; fill:var(--ink-3); }
  .dg-line{ stroke:var(--accent); stroke-width:1; opacity:.75; fill:none; }
  .dg-up-fill{ fill:var(--up); }
  .dg-up-stroke{ stroke:var(--up); stroke-width:2.5; fill:none; }
  .dg-down-fill{ fill:var(--down); }
  .dg-down-stroke{ stroke:var(--down); stroke-width:2.5; fill:none; }

  /* ---------------- math panels ---------------- */
  .math-panel{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; align-items:stretch; }
  @media (max-width:860px){ .math-panel{ grid-template-columns:1fr; } }
  .math-panel > div{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:26px 28px 28px; box-shadow:var(--shadow-1);
  }
  .math-panel h3{
    margin:0 0 14px; font-family:var(--f-mono); font-size:var(--t-label); font-weight:600;
    letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink);
  }
  .math-panel p{ margin:0 0 13px; font-size:var(--t-sm); line-height:1.72; color:var(--ink-2); }
  .math-panel p:last-child{ margin-bottom:0; }
  .math-formula{ grid-column:1 / -1; display:flex; gap:34px; align-items:center; flex-wrap:wrap; }
  .mf-eq{ display:flex; align-items:center; gap:5px; font-size:2.2rem; font-weight:350; color:var(--ink); flex:0 0 auto; letter-spacing:-.02em; }
  .mf-frac{ display:inline-flex; flex-direction:column; align-items:center; vertical-align:middle; }
  .mf-num{ padding:0 12px 4px; border-bottom:1.5px solid var(--ink); }
  .mf-den{ padding:4px 12px 0; }
  .mf-key{ font-size:var(--t-sm); line-height:1.9; color:var(--ink-2); flex:1 1 300px; }
  .mf-key b{ font-family:var(--f-mono); color:var(--ink); font-size:.92em; }
  .math-example{ display:flex; flex-direction:column; }
  .be-steps{ list-style:none; margin:0 0 14px; padding:0; flex:1 1 auto; display:flex; flex-direction:column; justify-content:space-evenly; }
  .be-steps li{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding:11px 0; border-bottom:1px solid var(--line); }
  .be-steps li:last-child{ border-bottom:0; }
  .be-step{ flex:0 0 96px; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); }
  .be-val{ flex:1 1 auto; font-size:var(--t-sm); color:var(--ink); }
  .be-take{ margin-top:14px !important; padding-top:14px; border-top:1px solid var(--line); font-size:var(--t-sm) !important; color:var(--ink) !important; }
  .be-table{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
  .be-table th{
    font-family:var(--f-mono); font-size:9px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
    color:var(--ink-3); text-align:left; padding:0 8px 9px 0; border-bottom:1px solid var(--line-2);
  }
  .be-table td{ padding:7px 8px 7px 0; border-bottom:1px solid var(--line); font-size:var(--t-sm); }
  .be-table tr:last-child td{ border-bottom:0; }
  .be-table tr.lit td{ background:var(--accent-soft); }
  .be-loss{ font-family:var(--f-mono); color:var(--down); width:70px; }
  .be-gain{ font-family:var(--f-mono); color:var(--up); width:78px; text-align:right; font-weight:600; }
  .be-gain.hot{ color:var(--down); }
  .be-bar{ width:auto; }
  .be-fill{ display:block; height:7px; border-radius:4px; background:var(--up); opacity:.5; }
  .be-fill.hot{ background:var(--down); opacity:.55; }
  .math-table, .math-chart, .math-note{ grid-column:1 / -1; }
  .be-chart-wrap{ position:relative; }
  svg.be-chart{ width:100%; height:auto; display:block; touch-action:none; cursor:crosshair; }
  .be-area{ fill:var(--accent); opacity:.09; }
  .be-curve{ fill:none; stroke:var(--accent); stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round; }
  .be-grid{ stroke:var(--line); stroke-width:1; }
  .be-tick{ stroke:var(--line-2); stroke-width:1; }
  .be-asym{ stroke:var(--down); stroke-width:1.2; stroke-dasharray:4 4; opacity:.6; }
  .be-guide{ stroke:var(--ink); stroke-width:1; stroke-dasharray:3 3; opacity:.5; }
  .be-dot{ fill:var(--accent); stroke:var(--surface); stroke-width:2; }
  .be-axis{ font-family:var(--f-mono); font-size:11px; fill:var(--ink-3); }
  .be-readout{
    position:absolute; top:10px; left:80px;
    display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
    background:var(--surface); border:1px solid var(--line-2); border-radius:11px;
    padding:9px 14px; box-shadow:var(--shadow-1);
    font-variant-numeric:tabular-nums; pointer-events:none;
  }
  .be-r-loss{ font-family:var(--f-mono); font-size:1.05rem; font-weight:600; color:var(--down); }
  .be-r-arrow{ font-family:var(--f-mono); font-size:9px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); }
  .be-r-gain{ font-family:var(--f-mono); font-size:1.05rem; font-weight:600; color:var(--up); }
  .be-r-money{ flex-basis:100%; font-family:var(--f-mono); font-size:10px; color:var(--ink-3); }
  .be-hint{ margin:8px 0 0 !important; font-family:var(--f-mono); font-size:9.5px !important; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3) !important; }
  @media (max-width:600px){ .be-readout{ position:static; margin-bottom:10px; } }

  svg.cd-chart{ width:100%; height:auto; display:block; overflow:visible; }
  .cd-line{ fill:none; stroke-width:2.2; stroke-linejoin:round; }
  .cd-a{ stroke:var(--up); }
  .cd-b{ stroke:var(--accent); }
  .cd-c-line{ stroke:var(--down); }
  .cd-tag{ font-family:var(--f-mono); font-size:11px; font-weight:600; }
  .cd-tag.cd-a{ fill:var(--up); stroke:none; }
  .cd-tag.cd-b{ fill:var(--accent-ink); stroke:none; }
  .cd-tag.cd-c-line{ fill:var(--down); stroke:none; }
  .cd-table{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
  .cd-table th{
    font-family:var(--f-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--ink-3); font-weight:600; text-align:right; padding:0 0 9px 10px; border-bottom:1px solid var(--line-2);
  }
  .cd-table th.cd-corner{ text-align:left; padding-left:0; line-height:1.4; }
  .cd-table td{ padding:9px 0 9px 10px; border-bottom:1px solid var(--line); font-size:var(--t-sm); text-align:right; }
  .cd-table tr:last-child td{ border-bottom:0; }
  .cd-table tr.lit td{ background:var(--accent-soft); }
  .cd-c{ font-family:var(--f-mono); color:var(--ink); text-align:left !important; padding-left:0 !important; }
  .cd-cell{ font-family:var(--f-mono); color:var(--ink-2); }
  .cd-cell.warm{ color:var(--accent-ink); font-weight:600; }
  .cd-cell.hot{ color:var(--down); font-weight:600; }
  .cd-sub{ display:block; font-size:9.5px; color:var(--ink-3); font-weight:400; margin-top:3px; }
  .streak-table td{ vertical-align:top; }
  .streak-runs{ margin-top:0 !important; }
  .streak-runs li{ font-size:var(--t-sm) !important; }

  /* ---------------- base rates ---------------- */
  .br-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(330px,1fr)); }
  .br-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:30px 30px 26px; box-shadow:var(--shadow-1); display:flex; flex-direction:column;
  }
  .br-n{ font-size:clamp(2.4rem,5.4vw,3.2rem); line-height:1; letter-spacing:-.04em; font-weight:700; color:var(--down); margin-bottom:10px; }
  .br-of{ font-family:var(--f-mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); line-height:1.6; margin-bottom:18px; }
  .br-body{ margin:0 0 16px; font-size:var(--t-sm); line-height:1.7; color:var(--ink-2); flex:1 1 auto; }
  .br-caveat{ margin:0 0 16px; padding:14px 16px; border-radius:var(--radius-sm); background:var(--surface-2); font-size:var(--t-xs); line-height:1.65; color:var(--ink-2); }
  .br-caveat span{ display:block; font-family:var(--f-mono); font-size:8.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; }
  .br-cite{ margin:0; padding-top:15px; border-top:1px solid var(--line); font-size:var(--t-xs); line-height:1.55; color:var(--ink-3); }
  .br-cite a{ color:var(--accent-ink); text-decoration:none; }
  .br-cite a:hover{ text-decoration:underline; }
  .br-figure, .br-fair{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:30px 32px; box-shadow:var(--shadow-1); }
  svg.br-funnel{ width:100%; height:auto; display:block; overflow:visible; }
  .br-fn{ opacity:.92; }
  .br-fn-base{ fill:var(--ink); }
  .br-fn-some{ fill:var(--accent); }
  .br-fn-few{ fill:var(--down); }
  .br-fn-n{ font-family:var(--f-mono); font-size:13px; font-weight:600; fill:var(--ink); }
  .br-fn-n.inside{ fill:var(--bg); }
  .br-fn-l{ font-family:var(--f-ui); font-size:12px; fill:var(--ink-2); }
  .br-fn-cap{ font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; fill:var(--ink-3); }
  .br-fig-note{ margin:28px 0 0; padding-top:20px; border-top:1px solid var(--line); font-size:var(--t-sm); line-height:1.7; color:var(--ink-2); }
  .br-two{ display:grid; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); gap:16px; }
  .br-fig{
    margin:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:26px 28px; box-shadow:var(--shadow-1); display:flex; flex-direction:column-reverse; gap:18px;
  }
  .br-fig figcaption{ font-size:var(--t-sm); line-height:1.65; color:var(--ink-2); }
  .br-fig figcaption b{ color:var(--ink); }
  svg.br-chart{ width:100%; height:auto; display:block; }
  .br-surv{ fill:none; stroke:var(--down); stroke-width:2.4; stroke-linejoin:round; }
  .br-surv-area{ fill:var(--down); opacity:.07; }
  .br-pt{ font-family:var(--f-mono); font-size:11px; font-weight:600; fill:var(--down); }
  .br-bar{ opacity:.92; }
  .br-bar-mkt{ fill:var(--up); }
  .br-bar-avg{ fill:var(--accent); }
  .br-bar-act{ fill:var(--down); }
  .br-bar-l{ font-family:var(--f-ui); font-size:12px; fill:var(--ink-2); }
  .br-bar-n{ font-family:var(--f-mono); font-size:12.5px; font-weight:600; fill:var(--ink); }
  .br-why{ margin:24px 0 0; padding:22px 24px; border-radius:var(--radius-sm); background:var(--ink); color:var(--bg); font-size:var(--t-sm); line-height:1.72; }

  /* ---------------- quiz ---------------- */
  .qz-score{
    position:sticky; top:calc(env(safe-area-inset-top, 0px) + 10px); z-index:5;
    background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius);
    padding:18px 22px 19px; box-shadow:var(--shadow-1); margin-bottom:18px;
  }
  .qz-score.complete{ border-color:var(--accent); }
  .qz-bar{ height:5px; border-radius:3px; background:var(--surface-2); overflow:hidden; margin-bottom:12px; }
  .qz-bar span{ display:block; height:100%; background:var(--accent); border-radius:3px; transition:width .3s ease; }
  .qz-read{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
  .qz-read b{ font-family:var(--f-mono); font-size:1.05rem; color:var(--ink); flex:0 0 auto; }
  .qz-read span{ font-size:var(--t-xs); line-height:1.55; color:var(--ink-2); }
  .qz-list{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
  .qz-item{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 28px; box-shadow:var(--shadow-1); }
  .qz-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
  .qz-n{ font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; color:var(--ink-3); }
  .qz-topic{
    font-family:var(--f-mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--accent-ink); background:var(--accent-soft); padding:4px 9px; border-radius:5px;
  }
  .qz-q{ margin:0 0 18px; font-size:1.18rem; line-height:1.4; letter-spacing:-.018em; font-weight:600; color:var(--ink); }
  .qz-opts{ display:grid; gap:8px; }
  .qz-opt{
    display:flex; align-items:baseline; gap:12px; width:100%; text-align:left;
    font-family:inherit; font-size:var(--t-sm); line-height:1.5; color:var(--ink-2);
    background:transparent; border:1px solid var(--line-2); border-radius:var(--radius-sm);
    padding:13px 16px; cursor:pointer; transition:border-color .14s, background .14s;
  }
  .qz-opt:hover{ border-color:var(--accent); }
  .qz-key{ flex:0 0 auto; font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.05em; color:var(--ink-3); }
  .qz-item.answered .qz-opt{ cursor:default; }
  .qz-item.answered .qz-opt:hover{ border-color:var(--line-2); }
  .qz-opt.right{ border-color:var(--up); background:var(--up-soft); color:var(--up-ink); }
  .qz-opt.right .qz-key{ color:var(--up-ink); }
  .qz-opt.wrong{ border-color:var(--down); background:var(--down-soft); color:var(--down-ink); text-decoration:line-through; }
  .qz-opt.wrong .qz-key{ color:var(--down-ink); }
  .qz-opt.chosen.right .qz-key::after{ content:" \2713"; }
  .qz-why{ display:none; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:var(--t-sm); line-height:1.72; color:var(--ink-2); }
  .qz-item.answered .qz-why{ display:block; }
  .qz-why b{ display:block; margin-bottom:7px; font-family:var(--f-mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); }
  .qz-foot{ margin-top:20px; padding:26px 28px; background:var(--surface-2); border-radius:var(--radius); }
  .qz-foot p{ margin:16px 0 0; font-size:var(--t-sm); line-height:1.65; color:var(--ink-2); }
  .qz-reset{
    font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
    color:var(--ink-2); background:var(--surface); border:1px solid var(--line-2);
    border-radius:999px; padding:10px 18px; cursor:pointer;
  }
  .qz-reset:hover{ border-color:var(--accent); color:var(--ink); }

  /* ---------------- sources ---------------- */
  .src-list{ list-style:none; counter-reset:src; margin:0; padding:0; display:flex; flex-direction:column; }
  .src-item{ counter-increment:src; position:relative; padding:20px 18px 20px 52px; border-bottom:1px solid var(--line); }
  .src-item:first-child{ border-top:1px solid var(--line); }
  .src-item::before{
    content:counter(src, decimal-leading-zero); position:absolute; left:14px; top:22px;
    font-family:var(--f-mono); font-size:10px; font-weight:600; letter-spacing:.08em; color:var(--ink-3);
  }
  .src-item:hover{ background:var(--surface); }
  .src-name{ font-size:1.02rem; font-weight:600; color:var(--ink); text-decoration:none; }
  a.src-name{ color:var(--accent-ink); }
  a.src-name:hover{ text-decoration:underline; }
  .src-name.plain{ color:var(--ink); }
  .src-host{ display:inline-block; margin-left:10px; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.06em; color:var(--ink-3); }
  .src-item p{ margin:8px 0 0; font-size:var(--t-sm); line-height:1.65; color:var(--ink-2); max-width:var(--read); }
  .rh-list{ margin-top:22px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:4px 20px; }
  .rh-list summary{ cursor:pointer; padding:16px 0; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink); }
  .rh-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:4px 20px; padding:6px 0 20px; }
  .rh-grid a{ font-size:var(--t-xs); line-height:1.5; color:var(--ink-2); text-decoration:none; padding:4px 0; }
  .rh-grid a:hover{ color:var(--accent-ink); }

  /* ---------------- detail page ---------------- */
  .crumb{
    display:inline-flex; align-items:center; gap:7px; margin-top:26px;
    font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--ink-3); text-decoration:none;
  }
  .crumb:hover{ color:var(--accent-ink); }
  .detail-head{
    position:relative; margin:16px 0 0; padding:44px 46px 42px;
    border-radius:var(--radius); background:#12161C; overflow:hidden; isolation:isolate;
  }
  .detail-head .op-img{ position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; }
  .detail-head .op-scrim{
    position:absolute; inset:0; z-index:1;
    background:
      linear-gradient(100deg, rgba(8,11,16,.72) 0%, rgba(8,11,16,.40) 60%, rgba(8,11,16,.20) 100%),
      linear-gradient(170deg, rgba(8,11,16,.36), rgba(8,11,16,.82));
  }
  .detail-head > *{ position:relative; z-index:2; }
  .detail-head h1{ margin:0; font-size:var(--t-h1); line-height:1.05; letter-spacing:-.032em; font-weight:700; color:var(--on-dark); }
  .detail-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; align-items:center; }
  .detail-head .abbr{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); color:var(--on-dark); }
  .detail-head .abbr.sig-up{ background:rgba(74,222,140,.16); border-color:transparent; color:#8FE8B8; }
  .detail-head .abbr.sig-down{ background:rgba(255,142,126,.16); border-color:transparent; color:#FFB3A6; }
  .detail-head .abbr.sig-flat{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); color:var(--on-dark-2); }
  .detail-lede{ margin:22px 0 0; max-width:60ch; font-size:1.08rem; line-height:1.65; color:var(--on-dark-2); }
  .detail-section{ margin-top:52px; max-width:var(--read); }
  .detail-section h2{
    margin:0 0 16px; padding-bottom:12px; border-bottom:1px solid var(--line);
    font-family:var(--f-mono); font-size:var(--t-label); font-weight:600;
    letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink);
  }
  .detail-section p{ margin:0; font-size:var(--t-body); line-height:1.78; color:var(--ink-2); }
  .setting-tag{
    display:inline-block; margin-bottom:16px; font-family:var(--f-mono); font-size:13px; font-weight:600;
    background:var(--accent-soft); color:var(--accent-ink); padding:7px 14px; border-radius:8px;
  }
  .pager{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:64px; padding-top:22px; border-top:1px solid var(--line-2); }
  .pager a{ font-size:var(--t-sm); text-decoration:none; color:var(--ink); max-width:46%; font-weight:550; }
  .pager a:hover{ color:var(--accent-ink); }
  .pager .dir{ display:block; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-bottom:4px; }

  /* ---------------- search ---------------- */
  .results-head{ padding:46px 0 22px; }
  .results-head h1{ margin:0 0 8px; font-size:var(--t-h1); font-weight:700; letter-spacing:-.03em; }
  .results-head p{ margin:0; font-size:var(--t-sm); color:var(--ink-2); }
  .empty-state{ padding:64px 0; color:var(--ink-3); font-size:var(--t-sm); }

  @media (max-width:620px){
    .opener .op-body{ padding:54px 26px 30px; }
    .opener.tall .op-body{ padding:96px 26px 32px; }
    .opener.short .op-body{ padding:40px 24px 26px; }
    .detail-head{ padding:32px 24px 30px; }
    .first-run{ padding:28px 24px; }
    .card, .qz-item, .br-card{ padding:22px 22px; }
    .math-panel > div, .relates, .ev-legend, .br-figure, .br-fair{ padding:22px 22px; }
  }

  /* ---------------- card carousel (candle patterns) ---------------- */
  .cc{ margin-top:4px; }
  .cc-stage{
    position:relative; overflow:hidden; touch-action:pan-y; outline:none;
    -webkit-user-select:none; user-select:none; min-height:420px;
  }
  .cc-stage:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:var(--radius); }
  .cc-card{
    position:absolute; left:50%; top:50%;
    display:flex; flex-direction:column;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow-2); padding:24px 28px 26px;
    transition:transform .6s cubic-bezier(.2,.7,.2,1), opacity .45s ease, background-color .35s ease;
    cursor:pointer;
  }
  .cc-card.is-active{ cursor:grab; }
  .cc-stage.dragging .cc-card{ transition:none; cursor:grabbing; }
  .cc-card:not(.is-active){ background:var(--surface-2); box-shadow:var(--shadow-1); }
  .cc-inner{ display:flex; flex-direction:column; flex:1 1 auto; transition:opacity .35s ease .15s; }
  .cc-card:not(.is-active) .cc-inner{ opacity:0; transition-delay:0s; }
  .cc-top{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
  .cc-label{ font-family:var(--f-mono); font-size:9.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
  .cc-label.acc{ color:var(--accent-ink); }
  .cc-fig{
    display:flex; align-items:center; justify-content:center;
    margin:16px 0 8px; padding:10px; border-radius:var(--radius-sm);
    background:var(--surface-2); border:1px solid var(--line);
  }
  svg.cc-glyph{ height:170px; width:auto; max-width:100%; }
  .cc-ctx{ margin:0 0 4px; font-size:var(--t-xs); color:var(--ink-3); text-align:center; }
  .cc-card .chips{ justify-content:flex-start; margin-top:12px; }
  .cc-card h3{ margin:10px 0 8px; font-size:1.55rem; line-height:1.15; font-weight:700; letter-spacing:-.03em; color:var(--ink); }
  .cc-card p.cc-def{ margin:0; font-size:var(--t-sm); line-height:1.68; color:var(--ink-2); }
  .cc-evline{
    margin:14px 0 0; padding:11px 14px; border-radius:var(--radius-sm);
    background:var(--surface-2); font-size:var(--t-xs); line-height:1.6; color:var(--ink-2);
  }
  .cc-evline b{ color:var(--ink); }
  .cc-nav{ display:flex; align-items:center; justify-content:center; margin-top:20px; }
  .cc-dots{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; justify-content:center; }
  .cc-dot{
    width:7px; height:7px; padding:0; border:0; border-radius:4px; cursor:pointer;
    background:var(--line-2); transition:width .3s ease, background .3s ease;
  }
  .cc-dot.on{ width:20px; background:var(--accent); }
  .cc-hint{ margin:10px 0 0; text-align:center; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
  @media (max-width:620px){
    .cc-card{ padding:20px 18px 20px; }
    svg.cc-glyph{ height:130px; }
    .cc-card h3{ font-size:1.3rem; }
  }
  @media (prefers-reduced-motion: reduce){
    .cc-card, .cc-inner, .cc-dot{ transition:none; }
  }

  /* ================= motion =================
     Four behaviours, each used once where it earns its place, plus a quiet
     rise-in everywhere. All four resolve to their finished state under
     prefers-reduced-motion, and nothing is hidden unless JS is running.
     ========================================== */
  .js [data-rise]{
    opacity:0; transform:translateY(26px);
    transition:opacity 1.1s cubic-bezier(.19,.72,.26,1), transform 1.1s cubic-bezier(.19,.72,.26,1);
    will-change:opacity, transform;
  }
  .js [data-rise].in{ opacity:1; transform:none; }

  /* 01 — panels that cover each other */
  .br-stack{ margin:26px 0 0; border-radius:var(--radius); overflow:clip; }
  .sp{
    position:sticky; top:0; min-height:100vh;
    display:flex; align-items:center; overflow:hidden;
  }
  .sp-in{ width:100%; padding:188px 48px 56px; max-width:860px; }
  .sp-n{
    margin:0 0 12px; font-size:clamp(3rem,8.5vw,5.6rem); line-height:.96;
    letter-spacing:-.045em; font-weight:700; color:#fff; font-variant-numeric:tabular-nums;
  }
  .sp-of{
    margin:0 0 24px; font-family:var(--f-mono); font-size:11px; letter-spacing:.14em;
    text-transform:uppercase; color:rgba(255,255,255,.66); line-height:1.6;
  }
  .sp-body{ margin:0 0 20px; max-width:50ch; font-size:1.02rem; line-height:1.72; color:rgba(255,255,255,.86); }
  .sp-caveat{
    margin:0 0 20px; max-width:50ch; padding:14px 18px; border-radius:var(--radius-sm);
    background:rgba(255,255,255,.08); font-size:var(--t-sm); line-height:1.65; color:rgba(255,255,255,.80);
  }
  .sp-caveat span{
    display:block; font-family:var(--f-mono); font-size:8.5px; letter-spacing:.14em;
    text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:6px;
  }
  .sp-cite{ margin:0; font-size:var(--t-xs); line-height:1.55; color:rgba(255,255,255,.52); }
  .sp-cite a{ color:rgba(255,255,255,.78); }
  .sp-step{
    position:absolute; right:30px; top:190px;
    font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; color:rgba(255,255,255,.45);
  }
  .sp1{ background:#101D2C; } .sp2{ background:#14273A; } .sp3{ background:#183049; }
  .sp4{ background:#1C3958; } .sp5{ background:#204267; }
  @media (max-width:720px){
    .sp-in{ padding:150px 24px 44px; }
    .sp-step{ right:20px; top:150px; }
  }

  /* 02 — the chart the scroll controls */
  .be-scrub{ position:relative; margin-top:18px; height:300vh; }
  .pin-flow .grid{ grid-template-columns:1fr; }
  .be-stick{ position:sticky; top:var(--stick-top, 198px); }
  .be-money{
    flex-basis:100%; font-family:var(--f-mono); font-size:11px; color:var(--ink-3);
    font-variant-numeric:tabular-nums;
  }
  .be-stick .math-chart-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:26px 28px 24px; box-shadow:var(--shadow-1);
  }
  .be-scrub-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
  .be-scrub-head h3{
    margin:0; font-family:var(--f-mono); font-size:var(--t-label); font-weight:600;
    letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink);
  }
  .be-live{ display:flex; align-items:baseline; gap:12px; font-variant-numeric:tabular-nums; }
  .be-live .l{ font-family:var(--f-mono); font-size:1.35rem; font-weight:600; color:var(--down); }
  .be-live .m{ font-family:var(--f-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
  .be-live .g{ font-family:var(--f-mono); font-size:1.35rem; font-weight:600; color:var(--up); }
  .be-prog{ height:2px; background:var(--surface-2); border-radius:2px; overflow:hidden; margin-top:16px; }
  .be-prog span{ display:block; height:100%; width:0; background:var(--accent); border-radius:2px; }


  /* 03 — a figure that holds while the text moves */
  .pin-wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:start; margin-top:30px; }
  .pin-col, .pin-flow{ min-width:0; }
  .pin-col{ position:sticky; top:var(--stick-top, 206px); }
  .pin-col .diagram-scroll svg{ min-width:460px; }
  .pin-col .diagram-panel{ margin:0; }
  .pin-flow{ display:flex; flex-direction:column; gap:16px; }
  @media (max-width:980px){
    .pin-wrap{ grid-template-columns:1fr; gap:18px; }
    .pin-col{ position:static; }
  }

  @media (prefers-reduced-motion: reduce){
    .js [data-rise]{ opacity:1; transform:none; transition:none; }
    .sp{ position:static; min-height:0; }
    .sp-in{ padding:44px 36px; }
    .be-stick{ position:static; }
    .pin-col{ position:static; }
  }

  /* ---- figures and tables that build themselves, left to right ----
     Everything here is a transition rather than an animation, so scrolling
     back up unwinds it exactly the way scrolling down built it. ---- */
  .js svg.fa [data-fa]{ opacity:0; transition:opacity .5s cubic-bezier(.22,.8,.3,1); }
  .js svg.fa.go [data-fa]{ opacity:1; }

  .js svg.fa [data-fabar]{
    transform:scaleX(0); transform-origin:left center; transform-box:fill-box;
    transition:transform .8s cubic-bezier(.22,.8,.3,1);
  }
  .js svg.fa.go [data-fabar]{ transform:scaleX(1); }

  .js svg.fa [data-fadraw]{ transition:stroke-dashoffset 1.45s cubic-bezier(.3,.72,.28,1); }

  /* tables: each cell arrives left to right, row by row */
  .js table.tbl th, .js table.tbl td{
    opacity:0; transform:translateX(-12px);
    transition:opacity .52s cubic-bezier(.22,.8,.3,1), transform .52s cubic-bezier(.22,.8,.3,1);
  }
  .js table.tbl.go th, .js table.tbl.go td{ opacity:1; transform:none; }

  @media (prefers-reduced-motion: reduce){
    .js svg.fa [data-fa]{ opacity:1; transition:none; }
    .js svg.fa [data-fabar]{ transform:none; transition:none; }
    .js svg.fa [data-fadraw]{ stroke-dasharray:none !important; stroke-dashoffset:0 !important; transition:none; }
    .js table.tbl th, .js table.tbl td{ opacity:1; transform:none; transition:none; }
  }