:root[data-theme="dark"]{
    --bg:#0A0E13;
    --panel:#131922;
    --panel-alt:#0F1520;
    --border:#232B37;
    --ink:#E8EDF3;
    --ink-muted:#9BA7B6;
    --ink-faint:#647082;
    --teal-900:#0B4F49;
    --teal-700:#14958A;
    --teal-500:#2FB3A6;
    --teal-200:#12312D;
    --teal-200-ink:#7FE0D2;
    --amber-700:#D97706;
    --amber-500:#E8A23C;
    --amber-100:#2E2210;
    --amber-100-ink:#F0B860;
    --code-bg:#050A0F;
    --code-ink:#D9E4EE;
    --code-accent:#7FD8CB;
    --shadow:0 8px 24px rgba(0,0,0,.35);
    --spine:#2A3340;
  }
  :root[data-theme="light"]{
    --bg:#F6F7F9;
    --panel:#FFFFFF;
    --panel-alt:#FAFBFC;
    --border:#E1E5EA;
    --ink:#171F2B;
    --ink-muted:#5B6472;
    --ink-faint:#8C94A3;
    --teal-900:#0B4F49;
    --teal-700:#0F766E;
    --teal-500:#14958A;
    --teal-200:#CFEAE6;
    --teal-200-ink:#0B4F49;
    --amber-700:#B45309;
    --amber-500:#D97706;
    --amber-100:#FCEACB;
    --amber-100-ink:#7C3A05;
    --code-bg:#0F1720;
    --code-ink:#D9E4EE;
    --code-accent:#7FD8CB;
    --shadow:0 4px 14px rgba(20,30,40,.06);
    --spine:#D8DEE5;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:'IBM Plex Sans', system-ui, sans-serif;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    transition:background .25s ease, color .25s ease;
  }

  .wrap{max-width:1040px; margin:0 auto; padding:32px 24px 120px;}

  /* THEME TOGGLE */
  .topbar{display:flex; justify-content:flex-end; margin-bottom:8px;}
  .theme-toggle{
    display:flex; align-items:center; gap:8px;
    background:var(--panel); border:1px solid var(--border);
    border-radius:20px; padding:6px 14px 6px 6px; cursor:pointer;
    font-family:'IBM Plex Mono', monospace; font-size:11px;
    color:var(--ink-muted); letter-spacing:.03em;
    transition:background .2s ease, border-color .2s ease;
  }
  .theme-toggle:hover{border-color:var(--teal-500);}
  .theme-toggle .dot{
    width:22px; height:22px; border-radius:50%;
    background:var(--teal-700); display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:12px; flex-shrink:0;
  }

  header.hero{margin-bottom:48px;}
  .eyebrow{
    font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--teal-700); font-weight:600;
    display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{content:""; width:22px; height:1px; background:var(--teal-700);}
  h1{
    font-family:'IBM Plex Mono', monospace; font-size:clamp(26px,3.6vw,38px);
    font-weight:700; letter-spacing:-0.01em; margin:14px 0 12px; color:var(--ink);
  }
  .sub{font-size:16px; color:var(--ink-muted); margin:0;}
  .sub strong{color:var(--ink); font-weight:600;}
  .principle{
    margin-top:24px; border-left:3px solid var(--teal-700); background:var(--teal-200);
    padding:14px 18px; border-radius:0 6px 6px 0; font-size:14.5px; color:var(--teal-200-ink);
  }
  .principle code{
    font-family:'IBM Plex Mono', monospace; background:rgba(127,224,210,.14);
    padding:1px 6px; border-radius:4px; font-size:13px;
  }

  .wip-banner{
    margin-top:18px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 18px;
    border:1px solid var(--teal-500);
    border-radius:10px;
    background:linear-gradient(90deg, var(--teal-200) 0%, var(--panel) 65%);
    position:relative;
    overflow:hidden;
    box-shadow:0 0 0 1px rgba(47,179,166,.08), 0 4px 18px rgba(20,149,138,.12);
  }
  .wip-banner::after{
    content:"";
    position:absolute;
    top:0; left:-40%;
    width:35%; height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
    animation:wip-shimmer 4.5s ease-in-out infinite;
  }
  @keyframes wip-shimmer{
    0%   { left:-40%; }
    55%  { left:110%; }
    100% { left:110%; }
  }
  .wip-badge{
    flex-shrink:0;
    font-family:'IBM Plex Mono', monospace;
    font-size:10px;
    font-weight:700;
    letter-spacing:.09em;
    color:#fff;
    background:linear-gradient(135deg, var(--teal-700), var(--teal-500));
    padding:4px 9px;
    border-radius:20px;
    z-index:1;
  }
  .wip-text{
    font-size:13.5px;
    color:var(--ink);
    z-index:1;
  }
  .wip-text strong{color:var(--teal-500); font-weight:600;}
  .wip-spark{
    margin-left:auto;
    flex-shrink:0;
    font-size:14px;
    color:var(--teal-500);
    z-index:1;
    animation:wip-twinkle 2.4s ease-in-out infinite;
  }
  @keyframes wip-twinkle{
    0%, 100% { opacity:.4; transform:scale(.85) rotate(0deg); }
    50%      { opacity:1;  transform:scale(1.15) rotate(15deg); }
  }
  @media (prefers-reduced-motion: reduce){
    .wip-banner::after{animation:none; display:none;}
    .wip-spark{animation:none;}
  }

  /* ===== FUNNEL + ALTERNATING CALLOUTS ===== */
  .timeline{margin:40px 0 8px; position:relative;}
  .timeline::before{
    content:"";
    position:absolute;
    left:50%;
    top:61px;
    bottom:61px;
    width:2px;
    background:var(--spine);
    transform:translateX(-50%);
    z-index:0;
  }

  /* Bands stack tightly, independent of callout height — that's what keeps them
     reading as one continuous funnel instead of beads on a thread. Callouts float
     as separate absolutely-positioned elements centered on their band; being taller
     than the band spacing is fine, since alternating sides means neighbours never collide. */
  .band-mini{
    position:absolute;
    left:50%;
    width:220px;
    height:90px;
    transform:translateX(-50%);
    clip-path: polygon(var(--inset) 0, calc(100% - var(--inset)) 0, calc(100% - var(--inset-b)) 100%, var(--inset-b) 100%);
    background:linear-gradient(135deg, var(--c1), var(--c2));
    box-shadow:var(--shadow);
    display:flex; align-items:center; justify-content:center;
    z-index:2;
  }
  .band-mini-inner{
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px;
    padding:6px calc(var(--inset-b) + 10%);
    color:#fff;
  }
  .band-mini .band-num{font-family:'IBM Plex Mono', monospace; font-size:15px; font-weight:700; opacity:.85; line-height:1;}
  .band-mini .band-label{font-size:11.5px; font-weight:600; line-height:1.15; max-width:100%;}

  .connector-line{
    position:absolute;
    width:144px;
    height:0;
    border-top:1.5px dashed var(--teal-500);
    z-index:1;
  }

  .callout{
    position:absolute;
    width:calc(50% - 144px);
    background:var(--panel); border:1px solid var(--border); border-radius:10px;
    padding:14px 18px; box-shadow:var(--shadow);
    border-left:3px solid var(--callout-accent, var(--teal-500));
    z-index:1;
  }
  .callout.side-left{left:0;}
  .callout.side-right{right:0;}
  .callout-title{font-weight:600; font-size:14.5px; margin:0 0 5px; color:var(--ink);}
  .callout-desc{font-size:12.8px; color:var(--ink-muted); margin:0; line-height:1.45;}
  .callout-scope{
    font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--ink-faint);
    margin-top:8px; letter-spacing:.02em;
  }

  .funnel-caption{
    font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--ink-faint);
    text-align:center; margin-top:24px; letter-spacing:.03em;
  }

  @media (max-width:760px){
    .timeline{height:auto !important;}
    .timeline::before{display:none;}
    .connector-line{display:none;}
    .band-mini, .callout{
      position:static; transform:none; width:100%; margin:0 0 8px;
    }
    .callout{margin-bottom:16px;}
    .phase-block{display:block; margin-bottom:4px;}
  }

  /* DETAIL CARDS */
  .details-heading{margin-top:72px; margin-bottom:22px; display:flex; align-items:baseline; gap:12px;}
  .details-heading h2{font-family:'IBM Plex Mono', monospace; font-size:20px; margin:0; color:var(--ink);}
  .details-heading span{font-size:13px; color:var(--ink-faint);}
  details{background:var(--panel); border:1px solid var(--border); border-radius:10px; margin-bottom:10px; overflow:hidden;}
  details[open]{border-color:var(--teal-500);}
  summary{
    list-style:none; cursor:pointer; padding:16px 20px; display:flex; align-items:center; gap:14px;
    font-weight:600; font-size:14.5px; color:var(--ink);
  }
  summary::-webkit-details-marker{display:none;}
  summary .tag{
    font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:700; color:#fff;
    background:var(--teal-700); padding:3px 9px; border-radius:20px; flex-shrink:0;
  }
  summary .chev{margin-left:auto; font-size:13px; color:var(--ink-faint); transition:transform .18s ease;}
  details[open] summary .chev{transform:rotate(90deg);}
  .detail-body{padding:0 20px 22px; font-size:14px; color:var(--ink-muted);}
  .detail-body p{margin:0 0 12px;}
  .detail-body .why{
    border-left:2px solid var(--amber-500); background:var(--amber-100); padding:10px 14px;
    border-radius:0 6px 6px 0; color:var(--amber-100-ink); font-size:13.5px; margin-top:14px;
  }
  pre{
    background:var(--code-bg); color:var(--code-ink); padding:16px 18px; border-radius:8px;
    overflow-x:auto; font-family:'IBM Plex Mono', monospace; font-size:12.5px; line-height:1.6;
    margin:0 0 4px; border:1px solid var(--border);
  }
  pre .kw{color:var(--code-accent);}
  pre .cm{color:#7A8CA3; font-style:italic;}

  /* COVERAGE MATRIX */
  .matrix-heading{margin-top:72px; margin-bottom:20px;}
  .matrix-heading h2{font-family:'IBM Plex Mono', monospace; font-size:20px; margin:0 0 8px; color:var(--ink);}
  .matrix-heading p{color:var(--ink-muted); font-size:14px; margin:0; max-width:600px;}
  .matrix{
    width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--border);
    border-radius:10px; overflow:hidden; font-size:13.5px;
  }
  .matrix th, .matrix td{text-align:left; padding:12px 16px; border-bottom:1px solid var(--border); vertical-align:top; color:var(--ink-muted);}
  .matrix th{
    font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--ink-faint); background:var(--panel-alt); font-weight:600;
  }
  .matrix tr:last-child td{border-bottom:none;}
  .matrix td.scenario{font-weight:600; color:var(--ink);}
  .matrix code{font-family:'IBM Plex Mono', monospace; background:var(--panel-alt); padding:1px 5px; border-radius:4px; font-size:12px;}
  .phase-pill{
    display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:11px; font-weight:700;
    color:var(--teal-200-ink); background:var(--teal-200); padding:2px 8px; border-radius:20px; white-space:nowrap;
  }

  footer{margin-top:64px; padding-top:24px; border-top:1px solid var(--border); font-size:12.5px; color:var(--ink-faint); text-align:center; font-family:'IBM Plex Mono', monospace;}

  @media print{ body{background:#fff;} details{border:1px solid #ccc; break-inside:avoid;} }