:root{
    --paper:#0D2B4F;
    --paper-2:#0A2340;
    --line:#B8D4E8;
    --signal:#6FC7EE;
    --gold:#EFB93F;
    --chalk:#F2F7FB;
    --dim:rgba(184,212,232,0.38);
    --grid-cell:24px;
    --font-display:'Big Shoulders Display', sans-serif;
    --font-mono:'IBM Plex Mono', monospace;
    --font-sans:'IBM Plex Sans', sans-serif;
  }

  *,*::before,*::after{ box-sizing:border-box; }

  html{ background:var(--paper); }

  body{
    margin:0;
    background:
      repeating-linear-gradient(0deg, rgba(184,212,232,0.06) 0px, rgba(184,212,232,0.06) 1px, transparent 1px, transparent var(--grid-cell)),
      repeating-linear-gradient(90deg, rgba(184,212,232,0.06) 0px, rgba(184,212,232,0.06) 1px, transparent 1px, transparent var(--grid-cell)),
      radial-gradient(ellipse at 50% 0%, var(--paper-2) 0%, var(--paper) 70%);
    color:var(--line);
    font-family:var(--font-sans);
    line-height:1.5;
    overflow-x:hidden;
  }

  a{ color:var(--signal); }

  /* ---------- registration marks (fixed blueprint frame) ---------- */
  .reg-marks{ position:fixed; inset:0; pointer-events:none; z-index:50; }
  .reg-mark{ position:absolute; width:18px; height:18px; }
  .reg-mark::before,.reg-mark::after{ content:''; position:absolute; background:var(--dim); }
  .reg-mark::before{ width:100%; height:1px; top:50%; left:0; }
  .reg-mark::after{ width:1px; height:100%; left:50%; top:0; }
  .reg-mark--tl{ top:10px; left:10px; }
  .reg-mark--tr{ top:10px; right:10px; }
  .reg-mark--bl{ bottom:10px; left:10px; }
  .reg-mark--br{ bottom:10px; right:10px; }

  /* ---------- utility text styles ---------- */
  .mono{ font-family:var(--font-mono); }
  .eyebrow{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--dim);
  }

  /* ---------- header strip ---------- */
  .titlebar{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
    padding:28px clamp(20px,4vw,64px) 20px;
    border-bottom:1px solid rgba(184,212,232,0.25);
  }
  .titlebar-main{ max-width:820px; }
  .titlebar-main .eyebrow{ margin-bottom:10px; }
  .titlebar h1{
    font-family:var(--font-display);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.03em;
    font-size:clamp(40px,8vw,92px);
    line-height:0.92;
    margin:0 0 10px;
    color:var(--chalk);
  }
  .titlebar-sub{
    font-family:var(--font-mono);
    font-size:clamp(11px,1.6vw,14px);
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--signal);
  }
  .titlebar-meta{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:0.05em;
    color:var(--dim);
    text-align:right;
    display:flex;
    flex-direction:column;
    gap:4px;
    white-space:nowrap;
  }
  .titlebar-meta strong{ color:var(--line); font-weight:500; }

  /* ---------- section shell ---------- */
  .section{
    padding:64px clamp(20px,4vw,64px);
    position:relative;
  }
  .section-head{ margin-bottom:36px; max-width:760px; }
  .section-num{
    font-family:var(--font-mono);
    font-size:12px;
    color:var(--gold);
    letter-spacing:0.1em;
  }
  .section-title{
    font-family:var(--font-display);
    text-transform:uppercase;
    font-weight:700;
    letter-spacing:0.02em;
    font-size:clamp(26px,4vw,44px);
    color:var(--chalk);
    margin:6px 0 10px;
  }
  .section-body{
    font-size:15px;
    color:var(--line);
    max-width:640px;
  }

  /* ---------- dimension-line divider ---------- */
  .dim-divider{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--dim);
    font-family:var(--font-mono);
    font-size:10px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    margin:0 clamp(20px,4vw,64px);
  }
  .dim-divider::before,.dim-divider::after{
    content:'';
    flex:1;
    height:1px;
    background:repeating-linear-gradient(90deg, var(--dim) 0 4px, transparent 4px 8px);
  }

  /* ============================================================ */
  /* HERO                                                           */
  /* ============================================================ */
  .hero{
    padding:40px clamp(12px,3vw,64px) 20px;
    position:relative;
  }
  .hero-frame{
    position:relative;
    border:1px solid rgba(184,212,232,0.3);
    min-height:72vh;
    padding:8px;
  }
  .hero-legend{
    position:absolute;
    top:16px;
    right:16px;
    max-width:270px;
    border:1px solid rgba(184,212,232,0.4);
    background:rgba(13,43,79,0.85);
    padding:10px 14px;
    font-family:var(--font-mono);
    font-size:10px;
    line-height:1.6;
    color:var(--dim);
    letter-spacing:0.02em;
    z-index:5;
  }
  .hero-legend strong{ color:var(--line); }
  .hero-legend .gold{ color:var(--gold); }
  .hero-legend .cyan{ color:var(--signal); }

  .hero-svg{ display:block; width:100%; height:auto; }
  .hero-svg-m{ display:none; width:100%; height:auto; }

  /* node styling */
  .node{ cursor:pointer; outline:none; }
  .node-rect{
    /* opaque fills (tint pre-blended over --paper) so connection paths and the
       grid never show through a node's interior */
    fill:#163357;
    stroke:var(--line);
    stroke-width:1.5;
    transition:filter .2s ease, stroke-width .2s ease;
    rx:2;
  }
  .node--work .node-rect,.node--fsonnet .node-rect,.node--verifier .node-rect{
    stroke:var(--signal); fill:#14365A;
  }
  .node--strat .node-rect{ stroke:var(--gold); fill:#1F364E; }
  .node--scout .node-rect,.node--editor .node-rect{ stroke:var(--dim); fill:#123054; }

  .node:hover .node-rect,.node:focus .node-rect{
    stroke:var(--chalk);
    stroke-width:2.2;
    filter:drop-shadow(0 0 8px currentColor);
  }
  .node:focus .node-rect{ stroke:var(--chalk); }
  .node:focus-visible .node-rect{ stroke-width:2.5; }

  .corner-tick{ stroke:var(--dim); stroke-width:1; fill:none; }

  .node-title{
    font-family:var(--font-display);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.04em;
    fill:var(--chalk);
  }
  .node-sub{
    font-family:var(--font-mono);
    fill:var(--line);
  }
  .node-sub--dim{ fill:var(--dim); }

  .box-label{
    font-family:var(--font-mono);
    fill:var(--dim);
    letter-spacing:0.1em;
    text-anchor:middle;
  }
  .dashed-box{
    fill:none;
    stroke:var(--dim);
    stroke-width:1;
    stroke-dasharray:5 5;
  }

  .link{ fill:none; stroke:var(--line); stroke-width:1.5; }
  .link--thick{ stroke:var(--signal); stroke-width:3; }
  .link--gold{ stroke:var(--gold); stroke-width:1; stroke-dasharray:4 4; }
  .link--dim{ stroke:var(--dim); stroke-width:1.2; }
  .link--return{ stroke:var(--line); stroke-width:1.3; stroke-dasharray:2 6; }

  .link-label{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:0.08em;
  }
  .link-label--gold{ fill:var(--gold); }
  .link-label--dim{ fill:var(--dim); font-size:9px; }

  .mini-annot{
    font-family:var(--font-mono);
    font-size:10px;
    fill:var(--dim);
    letter-spacing:0.03em;
  }

  /* packets */
  .packet{}
  .packet--signal{ fill:var(--signal); filter:drop-shadow(0 0 4px var(--signal)); }
  .packet--gold{ fill:var(--gold); filter:drop-shadow(0 0 5px var(--gold)); }
  .packet--dim{ fill:var(--dim); filter:drop-shadow(0 0 3px var(--dim)); }
  .packet--line{ fill:var(--line); filter:drop-shadow(0 0 3px var(--line)); }
  .packet-text{
    font-family:var(--font-mono);
    font-size:9px;
    fill:var(--signal);
    letter-spacing:0.05em;
  }

  /* strategist pulse */
  @keyframes stratPulse{
    0%,78%,100%{ filter:none; }
    85%,93%{ filter:drop-shadow(0 0 12px var(--gold)); }
  }
  .node--strat .node-rect{ animation:stratPulse 9.5s ease-in-out infinite; }

  /* annotation cards */
  .annot{ opacity:0; pointer-events:none; transition:opacity .15s ease; }
  .annot.show{ opacity:1; }
  .annot-rect{
    fill:rgba(10,35,64,0.95);
    stroke:var(--signal);
    stroke-width:1;
  }
  .annot-role{
    font-family:var(--font-mono);
    font-weight:600;
    font-size:11px;
    fill:var(--chalk);
    letter-spacing:0.04em;
  }
  .annot-line{
    font-family:var(--font-mono);
    font-size:10px;
    fill:var(--line);
  }

  @media (max-width:900px){
    .hero-svg{ display:none; }
    .hero-svg-m{ display:block; }
    .hero-frame{ min-height:0; }
    .hero-legend{ position:static; max-width:none; margin-bottom:14px; }
  }

  /* ============================================================ */
  /* FLOW STEPS                                                     */
  /* ============================================================ */
  .flow{
    display:flex;
    gap:0;
    counter-reset:step;
  }
  .flow-step{
    flex:1;
    position:relative;
    padding:0 18px;
    opacity:0;
    transform:translateY(16px);
    transition:opacity .5s ease, transform .5s ease;
    transition-delay:calc(var(--i) * 0.1s);
  }
  .flow-step.in-view{ opacity:1; transform:translateY(0); }
  .flow-num{
    font-family:var(--font-display);
    font-weight:800;
    font-size:44px;
    color:var(--gold);
    line-height:1;
    margin-bottom:6px;
  }
  .flow-title{
    font-family:var(--font-mono);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.08em;
    font-size:13px;
    color:var(--chalk);
    margin-bottom:8px;
  }
  .flow-body{ font-size:13.5px; color:var(--line); }

  @media (max-width:900px){
    .flow{ flex-direction:column; gap:36px; }
  }

  /* ============================================================ */
  /* ECONOMICS TABLE                                                */
  /* ============================================================ */
  .econ-table{
    width:100%;
    border-collapse:collapse;
    font-family:var(--font-mono);
    font-size:13px;
  }
  .econ-table th{
    text-align:left;
    text-transform:uppercase;
    letter-spacing:0.08em;
    font-size:11px;
    color:var(--dim);
    padding:10px 12px;
    border-bottom:1px solid rgba(184,212,232,0.35);
  }
  .econ-table td{
    padding:14px 12px;
    border-bottom:1px solid rgba(184,212,232,0.15);
    color:var(--line);
  }
  .econ-role{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color:var(--chalk); font-size:16px; }
  .econ-table tr.gold-row td{ color:var(--gold); }
  .econ-table tr.gold-row .econ-role{ color:var(--gold); }
  .econ-table tr.cyan-row .econ-role{ color:var(--signal); }
  .econ-note{ margin-top:24px; font-size:14px; max-width:680px; }

  /* ============================================================ */
  /* RSI LOOP                                                       */
  /* ============================================================ */
  .rsi{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:48px;
  }
  .rsi-ring-wrap{
    /* wrap is sized to the ring PLUS the label zone on each side, so the
       absolutely-positioned station labels are always contained inside
       this box instead of overhanging into the viewport or the copy column */
    --ring:220px;
    --station-w:100px;
    --station-gap:8px;
    position:relative;
    width:calc(var(--ring) + (2 * (var(--station-w) + var(--station-gap))));
    height:var(--ring);
    flex:0 0 auto;
  }
  .rsi-ring{
    position:absolute;
    top:0;
    left:50%;
    margin-left:calc(var(--ring) / -2);
    width:var(--ring);
    height:var(--ring);
    border:1.5px dashed var(--dim);
    border-radius:50%;
    animation:rsiSpin 22s linear infinite;
  }
  .rsi-ring::before{
    content:'';
    position:absolute;
    inset:24px;
    border:1px dashed rgba(184,212,232,0.25);
    border-radius:50%;
  }
  @keyframes rsiSpin{ to{ transform:rotate(360deg); } }
  .rsi-orbit{
    position:absolute;
    top:0;
    left:50%;
    margin-left:calc(var(--ring) / -2);
    width:var(--ring);
    height:var(--ring);
    animation:rsiSpin 6s linear infinite;
  }
  .rsi-dot{
    position:absolute;
    top:-4px; left:50%;
    width:8px; height:8px;
    margin-left:-4px;
    border-radius:50%;
    background:var(--signal);
    box-shadow:0 0 8px var(--signal);
  }
  .rsi-station{
    position:absolute;
    font-family:var(--font-mono);
    font-size:9.5px;
    letter-spacing:0.06em;
    color:var(--dim);
    width:var(--station-w);
    text-align:center;
  }
  .rsi-station--1{ top:-30px; left:50%; transform:translateX(-50%); }
  .rsi-station--2{ top:50%; right:0; transform:translateY(-50%); }
  .rsi-station--3{ bottom:-30px; left:50%; transform:translateX(-50%); }
  .rsi-station--4{ top:50%; left:0; transform:translateY(-50%); }
  .rsi-copy{ flex:1; min-width:260px; font-size:15px; }
  .rsi-copy p{ margin:0 0 14px; }
  .rsi-annot{
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--dim);
    border-left:2px solid var(--gold);
    padding-left:12px;
  }

  @media (max-width:900px){
    .rsi{ flex-direction:column; align-items:center; gap:32px; }
    .rsi-copy{ min-width:0; width:100%; }
  }

  @media (max-width:480px){
    .rsi-ring-wrap{ --ring:150px; --station-w:76px; --station-gap:6px; }
    .rsi-station{ font-size:8.5px; }
  }

  @media (prefers-reduced-motion:reduce){
    .packet{ display:none; }
    .node--strat .node-rect{ animation:none; }
    .rsi-ring, .rsi-orbit{ animation:none; }
    .flow-step{ transition:none; }
  }

  /* ============================================================ */
  /* FOOTER TITLE BLOCK                                             */
  /* ============================================================ */
  .titleblock-wrap{ padding:0 clamp(20px,4vw,64px) 64px; }
  .titleblock{
    border:1px solid rgba(184,212,232,0.4);
    display:grid;
    grid-template-columns:repeat(4,1fr);
    font-family:var(--font-mono);
  }
  .tb-cell{
    border-right:1px solid rgba(184,212,232,0.25);
    border-bottom:1px solid rgba(184,212,232,0.25);
    padding:14px 16px;
    min-height:64px;
  }
  .tb-cell:nth-child(4n){ border-right:none; }
  .tb-label{
    font-size:9.5px;
    letter-spacing:0.1em;
    color:var(--dim);
    text-transform:uppercase;
    margin-bottom:6px;
  }
  .tb-value{ font-size:13px; color:var(--chalk); }
  .tb-cell--wide{ grid-column:span 2; }

  @media (max-width:700px){
    .titleblock{ grid-template-columns:repeat(2,1fr); }
    .tb-cell:nth-child(4n){ border-right:1px solid rgba(184,212,232,0.25); }
    .tb-cell:nth-child(2n){ border-right:none; }
    .tb-cell--wide{ grid-column:span 2; }
  }

  .footer-tail{
    text-align:center;
    font-family:var(--font-mono);
    font-size:10px;
    color:var(--dim);
    letter-spacing:0.1em;
    padding:24px 0 48px;
  }