/* Original visual components recovered from the owner's Pulsar preview, 4 Sep 2026. */
:root{--font-mono:var(--font-body);--cool:#AFC9BC}
    .thesis{
      font-family:var(--font-display);
      font-weight:700;
      font-size:clamp(1.7rem,3.9vw,3.5rem);
      line-height:1.16;
      letter-spacing:-.035em;
      max-width:24ch;
    }
    /* .38 rather than .12: the un-revealed state has to stay readable on its
       own, because a visitor landing mid-page sees it before scrolling.
       The reveal to full opacity is still perfectly legible as an effect. */
    .rw{display:inline-block;opacity:.38;will-change:opacity}
    .rw.hi{color:var(--accent)}

    .decay{
      display:grid;
      gap:3rem;
    }
    @media(min-width:1024px){
      .decay{grid-template-columns:1.15fr .85fr;gap:5rem;align-items:start}
    }

    .chart-frame{
      position:relative;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:linear-gradient(180deg,var(--surface) 0%,var(--bg-2) 100%);
      padding:1.6rem 1.4rem 1.2rem;
      overflow:hidden;
    }
    .chart-frame::before{
      content:'';
      position:absolute;
      inset:0;
      background-image:
        linear-gradient(var(--line) 1px,transparent 1px),
        linear-gradient(90deg,var(--line) 1px,transparent 1px);
      background-size:44px 44px;
      opacity:.6;
      pointer-events:none;
    }
    .chart-head{
      position:relative;
      display:flex;
      justify-content:space-between;
      align-items:baseline;
      gap:1rem;
      margin-bottom:1.2rem;
      font-family:var(--font-mono);
      font-size:.68rem;
      letter-spacing:.13em;
      text-transform:uppercase;
      color:var(--text-3);
      flex-wrap:wrap;
    }
    .chart-head b{color:var(--text-2);font-weight:500}
    .chart-svg{position:relative;width:100%;height:auto;display:block}
    /* presentation attributes lose against CSS, so these follow the tokens
       without touching the markup's fallback colours */
    .ch-hold{stroke:var(--accent)}
    .ch-decay{stroke:var(--warn)}
    .ch-dot-a{fill:var(--accent)}
    .ch-dot-w{fill:var(--warn)}
    #sparkGrad stop{stop-color:var(--accent)}
    .sw{width:14px;height:2px;border-radius:2px;display:block}
    .sw-accent{background:var(--accent)}
    .sw-warn{background:var(--warn)}
    .chart-legend{
      position:relative;
      display:flex;
      flex-wrap:wrap;
      gap:1.4rem;
      margin-top:1.1rem;
      padding-top:1rem;
      border-top:1px solid var(--line);
      font-family:var(--font-mono);
      font-size:.66rem;
      letter-spacing:.1em;
      text-transform:uppercase;
      color:var(--text-3);
    }
    .chart-legend span{display:flex;align-items:center;gap:.5rem}
    .chart-legend i{width:14px;height:2px;border-radius:2px;display:block}

    /* failure list — border-top grouping, not cards */
    .fail-list{list-style:none;display:flex;flex-direction:column}
    .fail-list li{
      border-top:1px solid var(--line);
      padding:1.5rem 0;
      display:grid;
      grid-template-columns:auto 1fr;
      gap:1.2rem;
      align-items:start;
    }
    .fail-list li:last-child{border-bottom:1px solid var(--line)}
    .fail-list .idx{
      font-family:var(--font-mono);
      font-size:.68rem;
      color:var(--accent);
      padding-top:.25rem;
      letter-spacing:.08em;
    }
    .fail-list h3{
      font-family:var(--font-body);
      font-weight:600;
      font-size:1rem;
      letter-spacing:-.01em;
      line-height:1.35;
      margin-bottom:.4rem;
    }
    .fail-list p{
      font-size:.92rem;
      color:var(--text-2);
      line-height:1.55;
      max-width:46ch;
    }

    /* ═══════════════════════════════════════════════════════════
       MARQUEE DIVIDER
       ═══════════════════════════════════════════════════════════ */
    .marquee{
      overflow:hidden;
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
      padding:1.5rem 0;
      background:var(--bg-2);
    }
    .marquee-track{
      display:flex;
      align-items:center;
      gap:2.6rem;
      width:max-content;
      font-family:var(--font-display);
      font-weight:800;
      font-size:clamp(1.6rem,3.4vw,2.9rem);
      letter-spacing:-.03em;
      white-space:nowrap;
      color:var(--text-3);
      will-change:transform;
    }
    .marquee-track .on{color:var(--text)}
    .marquee-track .star{color:var(--accent);font-size:.55em;transform:translateY(-.18em)}

    /* ═══════════════════════════════════════════════════════════
       SYSTEM — pinned scrollytelling
       ═══════════════════════════════════════════════════════════ */
    .system{background:var(--bg-2);border-top:1px solid var(--line)}

    .pin-stage{
      min-height:100dvh;
      display:flex;
      align-items:center;
      padding:6rem 0;
    }
    .stage-grid{
      display:grid;
      gap:3rem;
      width:100%;
    }
    @media(min-width:1024px){
      .stage-grid{grid-template-columns:.85fr 1.15fr;gap:5rem;align-items:center}
    }

    /* left: orbital dial */
    .dial-wrap{position:relative;aspect-ratio:1;max-width:420px;width:100%;margin:0 auto}
    .dial{width:100%;height:100%;overflow:visible}
    .dial .ring-bg{fill:none;stroke:var(--line-2);stroke-width:.6}
    .dial .ring-arc{
      fill:none;
      stroke:var(--accent);
      stroke-width:1.4;
      stroke-linecap:round;
      filter:drop-shadow(0 0 6px rgb(var(--accent-rgb) / .5));
    }
    .dial .spoke{stroke:var(--line);stroke-width:.5}
    .dial .node circle{
      fill:var(--bg-2);
      stroke:var(--line-2);
      stroke-width:1;
      transition:fill .4s var(--ease),stroke .4s var(--ease),r .4s var(--ease);
    }
    .dial .node text{
      font-family:var(--font-mono);
      font-size:3.6px;
      letter-spacing:.14em;
      fill:var(--text-3);
      text-transform:uppercase;
      transition:fill .4s var(--ease);
      /* no text-anchor here on purpose: a CSS declaration would override the
         per-node text-anchor attribute and re-centre every label on its dot */
    }
    .dial .node.is-on circle{fill:var(--accent);stroke:var(--accent)}
    .dial .node.is-on text{fill:var(--text)}
    .dial .node.is-past circle{stroke:var(--accent-line)}

    .dial-core{
      position:absolute;
      inset:0;
      display:grid;
      place-items:center;
      text-align:center;
      pointer-events:none;
    }
    .dial-core .k{
      display:block;
      font-family:var(--font-mono);
      font-size:.62rem;
      letter-spacing:.2em;
      text-transform:uppercase;
      color:var(--text-3);
      margin-bottom:.5rem;
    }
    .dial-core .v{
      display:block;
      font-family:var(--font-display);
      font-weight:800;
      font-size:clamp(1.5rem,3.4vw,2.3rem);
      letter-spacing:-.03em;
      line-height:1;
    }

    /* right: stacked step panels */
    .viz-steps{position:relative}
    .viz-step{
      position:absolute;
      inset:0;
      opacity:0;
      pointer-events:none;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }
    .viz-step.is-on{opacity:1;pointer-events:auto}
    .step-no{
      font-family:var(--font-mono);
      font-size:.7rem;
      letter-spacing:.2em;
      color:var(--accent);
      margin-bottom:1.4rem;
      display:flex;
      align-items:center;
      gap:.9rem;
    }
    .step-no .bar{
      flex:1;
      max-width:120px;
      height:1px;
      background:linear-gradient(90deg,var(--accent),transparent);
    }
    .viz-step h3{
      font-size:clamp(1.9rem,4.2vw,3.4rem);
      letter-spacing:-.04em;
      line-height:1;
      margin-bottom:1.4rem;
    }
    .viz-step p{
      font-size:clamp(1rem,1.25vw,1.15rem);
      line-height:1.62;
      color:var(--text-2);
      max-width:46ch;
      margin-bottom:1.8rem;
      text-wrap:pretty;
    }
    .step-out{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
    }
    .step-out span{
      font-family:var(--font-mono);
      font-size:.66rem;
      letter-spacing:.1em;
      text-transform:uppercase;
      color:var(--text-2);
      border:1px solid var(--line);
      border-radius:999px;
      padding:.42rem .85rem;
      background:rgba(242,243,240,.02);
    }

    /* mobile: steps become a plain stacked list */
    .steps-mobile{display:flex;flex-direction:column}
    .steps-mobile .step-m{
      border-top:1px solid var(--line);
      padding:2.4rem 0;
    }
    .steps-mobile .step-m:last-child{border-bottom:1px solid var(--line)}
    @media(min-width:1024px){ .steps-mobile{display:none} }
    /* the dial made the loop obvious; unrolled into a rail it needs saying */
    .loop-back{
      margin-top:1.4rem;
      padding-top:1rem;
      border-top:1px solid var(--accent-line);
      font-family:var(--font-mono);
      font-size:.68rem;
      letter-spacing:.1em;
      text-transform:uppercase;
      color:var(--accent);
    }

    /* ═══════════════════════════════════════════════════════════
       WORK — horizontal scroll track of creative units
       ═══════════════════════════════════════════════════════════ */
    .concept-library{overflow:hidden;border-top:1px solid var(--line)}
    .work-viewport{
      display:flex;
      align-items:center;
      min-height:100dvh;
      padding:5rem 0;
    }
    .work-track{
      display:flex;
      gap:1.4rem;
      padding:0 24px;
      width:max-content;
      will-change:transform;
    }
    @media(min-width:768px){ .work-track{gap:2rem;padding:0 40px} }
    @media(min-width:1280px){ .work-track{padding:0 56px} }

    .work-intro{
      flex-shrink:0;
      width:min(78vw,420px);
      display:flex;
      flex-direction:column;
      justify-content:center;
      padding-right:2rem;
    }

    .concept{
      flex-shrink:0;
      width:min(70vw,286px);
      display:flex;
      flex-direction:column;
      gap:.9rem;
    }
    .concept-frame{
      position:relative;
      aspect-ratio:9/16;
      border-radius:var(--radius);
      overflow:hidden;
      border:1px solid var(--line);
      background:var(--surface);
      cursor:pointer;
    }
    .concept-frame img{
      width:100%;height:100%;
      object-fit:cover;
      filter:grayscale(.25) contrast(1.08) brightness(.82);
      transition:filter .6s var(--ease);
      will-change:transform;
    }
    .concept-frame:hover img{filter:grayscale(0) contrast(1.04) brightness(1)}
    .concept-frame::after{
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(to top,rgba(6,6,7,.92) 0%,rgba(6,6,7,.15) 45%,rgba(6,6,7,.5) 100%);
      pointer-events:none;
    }
    .concept-overlay{
      position:absolute;
      inset:0;
      z-index:2;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      padding:1.05rem;
      pointer-events:none;
    }
    .concept-top{display:flex;justify-content:space-between;align-items:flex-start;gap:.6rem}
    .concept-id{
      font-family:var(--font-mono);
      font-size:.58rem;
      letter-spacing:.1em;
      color:rgba(242,243,240,.62);
      background:rgba(6,6,7,.55);
      backdrop-filter:blur(6px);
      -webkit-backdrop-filter:blur(6px);
      border:1px solid var(--line);
      border-radius:5px;
      padding:.28rem .5rem;
    }
    .pill{
      font-family:var(--font-mono);
      font-size:.56rem;
      letter-spacing:.1em;
      text-transform:uppercase;
      border-radius:999px;
      padding:.3rem .62rem;
      white-space:nowrap;
      border:1px solid;
    }
    .pill-win{color:var(--accent);border-color:var(--accent-line);background:rgb(var(--accent-rgb) / .1)}
    .pill-sig{color:var(--cool);border-color:rgba(95,211,243,.34);background:rgba(95,211,243,.08)}
    .pill-fat{color:var(--warn);border-color:rgba(255,107,61,.34);background:rgba(255,107,61,.08)}
    .pill-neu{color:var(--text-2);border-color:var(--line-2);background:rgba(242,243,240,.04)}

    .concept-hook{
      font-family:var(--font-display);
      font-weight:700;
      font-size:1.16rem;
      line-height:1.14;
      letter-spacing:-.025em;
      text-wrap:balance;
    }
    .concept-hook::before{content:'\201C'}
    .concept-hook::after{content:'\201D'}

    .concept-meta{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:.35rem .9rem;
      font-family:var(--font-mono);
      font-size:.62rem;
      letter-spacing:.05em;
      color:var(--text-3);
    }
    .concept-meta b{
      color:var(--text-3);
      font-weight:500;
      display:block;
      text-transform:uppercase;
      font-size:.55rem;
      letter-spacing:.12em;
    }
    .concept-meta span{color:var(--text-2)}

    .work-end{
      flex-shrink:0;
      width:min(70vw,300px);
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:1.4rem;
    }


    /* under 768px the track is not pinned — it scrolls natively with snap */
    @media(max-width:767px){
      .work-viewport{
        min-height:auto;
        padding:4rem 0;
        overflow-x:auto;
        overflow-y:hidden;
        scroll-snap-type:x proximity;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
      }
      .work-viewport::-webkit-scrollbar{display:none}
      .work-track{align-items:stretch}
      .work-intro,.concept,.work-end{scroll-snap-align:center}
    }

    /* ═══════════════════════════════════════════════════════════
       INTELLIGENCE — dashboard mock
       ═══════════════════════════════════════════════════════════ */
    .dash{
      border:1px solid var(--line);
      border-radius:18px;
      background:linear-gradient(180deg,var(--surface) 0%,var(--bg-2) 100%);
      overflow:hidden;
      position:relative;
    }
    /* spotlight border that tracks the cursor */
    .dash::before{
      content:'';
      position:absolute;
      inset:0;
      border-radius:18px;
      padding:1px;
      background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%),rgb(var(--accent-rgb) / .42),transparent 70%);
      -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
      -webkit-mask-composite:xor;
      mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
      mask-composite:exclude;
      opacity:0;
      transition:opacity .4s var(--ease);
      pointer-events:none;
      z-index:3;
    }
    .dash:hover::before{opacity:1}

    .dash-bar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      flex-wrap:wrap;
      padding:.95rem 1.2rem;
      border-bottom:1px solid var(--line);
      background:rgba(6,6,7,.5);
      font-family:var(--font-mono);
      font-size:.66rem;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:var(--text-3);
    }
    .dash-bar .lights{display:flex;gap:.4rem;align-items:center}
    .dash-bar .lights i{width:7px;height:7px;border-radius:50%;background:var(--line-2);display:block}
    .dash-bar .lights i:first-child{background:var(--accent)}
    .dash-tabs{display:flex;gap:.3rem;flex-wrap:wrap}
    .dash-tab{
      background:none;
      border:1px solid transparent;
      border-radius:999px;
      padding:.72rem 1rem;
      min-height:44px;
      font-family:var(--font-mono);
      font-size:.63rem;
      letter-spacing:.1em;
      text-transform:uppercase;
      color:var(--text-3);
      cursor:pointer;
      transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
    }
    .dash-tab:hover{color:var(--text-2)}
    .dash-tab.is-on{
      color:var(--accent);
      border-color:var(--accent-line);
      background:rgb(var(--accent-rgb) / .08);
    }

    .dash-body{padding:1.4rem}
    @media(min-width:768px){ .dash-body{padding:2rem} }

    .dash-panel{display:none}
    .dash-panel.is-on{display:block;animation:panelIn .45s var(--ease)}
    @keyframes panelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

    /* KPI row — 4 uneven cells, no empty space */
    .kpi-row{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:1px;
      background:var(--line);
      border:1px solid var(--line);
      border-radius:10px;
      overflow:hidden;
      margin-bottom:1.6rem;
    }
    @media(min-width:900px){ .kpi-row{grid-template-columns:repeat(4,1fr)} }
    .kpi{background:var(--surface);padding:1.15rem 1.1rem}
    .kpi .k{
      font-family:var(--font-mono);
      font-size:.6rem;
      letter-spacing:.13em;
      text-transform:uppercase;
      color:var(--text-3);
      margin-bottom:.7rem;
      display:block;
    }
    .kpi .v{
      font-family:var(--font-mono);
      font-weight:700;
      font-size:clamp(1.35rem,2.4vw,1.85rem);
      letter-spacing:-.035em;
      line-height:1;
      font-variant-numeric:tabular-nums;
      display:flex;
      align-items:baseline;
      gap:.25rem;
    }
    .kpi .u{font-size:.62em;color:var(--text-3);font-weight:400}
    .kpi .d{
      margin-top:.55rem;
      font-family:var(--font-mono);
      font-size:.62rem;
      letter-spacing:.05em;
      color:var(--text-3);
      display:flex;
      align-items:center;
      gap:.35rem;
    }
    .kpi .d.up{color:var(--accent)}
    .kpi .d.down{color:var(--warn)}

    .spark{width:100%;height:34px;margin-top:.8rem;display:block;overflow:visible}
    .spark path{fill:none;stroke:var(--accent);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
    .spark .fill{fill:url(#sparkGrad);stroke:none}

    /* segmented performance bars */
    .seg-list{display:flex;flex-direction:column;gap:1.05rem}
    .viz-seg{display:grid;grid-template-columns:1fr auto;gap:.5rem .9rem;align-items:center}
    .seg-name{
      font-size:.9rem;
      color:var(--text-2);
      letter-spacing:-.005em;
    }
    .seg-name b{color:var(--text);font-weight:500}
    .seg-val{
      font-family:var(--font-mono);
      font-size:.78rem;
      font-variant-numeric:tabular-nums;
      color:var(--text);
      white-space:nowrap;
    }
    .seg-rail{
      grid-column:1/-1;
      height:4px;
      border-radius:2px;
      background:rgba(242,243,240,.06);
      overflow:hidden;
    }
    .seg-fill{
      height:100%;
      width:0;
      border-radius:2px;
      background:var(--accent);
      transform-origin:left center;
    }
    .seg-fill.mid{background:rgb(var(--accent-rgb) / .5)}
    .seg-fill.low{background:var(--line-2)}
    .seg-fill.bad{background:var(--warn)}

    .dash-split{display:grid;gap:1.6rem}
    @media(min-width:900px){ .dash-split{grid-template-columns:1fr 1fr;gap:2.4rem} }

    .note-block{
      border:1px solid var(--line);
      border-radius:10px;
      padding:1.3rem;
      background:rgba(242,243,240,.015);
    }
    .note-block h3{
      font-family:var(--font-mono);
      font-size:.63rem;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:var(--accent);
      margin-bottom:1rem;
      font-weight:500;
    }
    .note-block ul{list-style:none;display:flex;flex-direction:column;gap:.85rem}
    .note-block li{
      font-size:.9rem;
      line-height:1.55;
      color:var(--text-2);
      padding-left:1.15rem;
      position:relative;
      text-wrap:pretty;
    }
    .note-block li::before{
      content:'';
      position:absolute;
      left:0; top:.62em;
      width:5px;height:1px;
      background:var(--accent);
    }
    .note-block li b{color:var(--text);font-weight:500}

    /* this disclaimer has to be readable, not a whisper: the demos are
       deliberately built to look like real reporting */
    .dash-caption{
      margin-top:1.2rem;
      display:inline-flex;
      align-items:center;
      gap:.6rem;
      padding:.6rem 1rem;
      border:1px solid var(--line-2);
      border-radius:999px;
      background:rgba(242,243,240,.03);
      font-family:var(--font-mono);
      font-size:.68rem;
      letter-spacing:.09em;
      text-transform:uppercase;
      color:var(--text-2);
    }
    .dash-caption::before{
      content:'';
      width:6px;height:6px;
      border-radius:50%;
      background:var(--warn);
      flex-shrink:0;
    }

    /* ═══════════════════════════════════════════════════════════
       TAXONOMY — creative spec sheet
       ═══════════════════════════════════════════════════════════ */
    .tax{display:grid;gap:3rem}
    @media(min-width:1024px){ .tax{grid-template-columns:.95fr 1.05fr;gap:5rem;align-items:center} }

    .chain{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:2rem}
    .chain span{
      font-family:var(--font-mono);
      font-size:.65rem;
      letter-spacing:.1em;
      text-transform:uppercase;
      padding:.45rem .8rem;
      border:1px solid var(--line);
      border-radius:6px;
      color:var(--text-2);
      background:rgba(242,243,240,.02);
      transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease);
    }
    .chain span.lit{
      border-color:var(--accent-line);
      color:var(--accent);
      background:rgb(var(--accent-rgb) / .08);
    }

    .spec{
      border:1px solid var(--line);
      border-radius:14px;
      background:linear-gradient(180deg,var(--surface) 0%,var(--bg-2) 100%);
      overflow:hidden;
    }
    .spec-head{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:1rem;
      padding:1rem 1.3rem;
      border-bottom:1px solid var(--line);
      background:rgba(6,6,7,.45);
      font-family:var(--font-mono);
      font-size:.66rem;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:var(--text-3);
    }
    .spec-rows{display:flex;flex-direction:column}
    .spec-row{
      display:grid;
      grid-template-columns:minmax(88px,.42fr) 1fr;
      gap:1rem;
      padding:.72rem 1.3rem;
      border-bottom:1px solid var(--line);
      font-family:var(--font-mono);
      font-size:.74rem;
      align-items:baseline;
    }
    .spec-row:last-child{border-bottom:none}
    .spec-row dt{
      color:var(--text-3);
      letter-spacing:.1em;
      text-transform:uppercase;
      font-size:.62rem;
    }
    .spec-row dd{color:var(--text-2);font-variant-numeric:tabular-nums}
    .spec-row dd.hl{color:var(--text)}
    .spec-row.is-metric{background:rgba(242,243,240,.012)}
    .spec-foot{
      padding:1rem 1.3rem;
      border-top:1px solid var(--line);
      background:rgb(var(--accent-rgb) / .05);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      flex-wrap:wrap;
      font-family:var(--font-mono);
      font-size:.68rem;
      letter-spacing:.1em;
      text-transform:uppercase;
    }
    .spec-foot .lbl{color:var(--text-3)}
    .spec-foot .val{color:var(--accent);font-weight:500}

    /* ═══════════════════════════════════════════════════════════
       WINNER LADDER — signal strength scale
       ═══════════════════════════════════════════════════════════ */
    .ladder{display:flex;flex-direction:column;border-top:1px solid var(--line)}
    .rung{
      display:grid;
      grid-template-columns:auto 1fr;
      gap:1rem;
      align-items:center;
      padding:1.5rem 0;
      border-bottom:1px solid var(--line);
      transition:background .35s var(--ease);
    }
    @media(min-width:768px){
      .rung{
        grid-template-columns:52px minmax(170px,.62fr) 1fr 156px;
        gap:2rem;
        padding:1.7rem .9rem;
        border-radius:8px;
      }
      .rung:hover{background:rgba(242,243,240,.022)}
    }
    .rung-bars{display:flex;align-items:flex-end;gap:2.5px;height:26px}
    .rung-bars i{
      display:block;
      width:5px;
      border-radius:1px;
      background:rgba(242,243,240,.11);
    }
    .rung-bars i.on{background:var(--accent)}
    .rung-bars i.warn{background:var(--warn)}
    .rung-bars i:nth-child(1){height:22%}
    .rung-bars i:nth-child(2){height:42%}
    .rung-bars i:nth-child(3){height:62%}
    .rung-bars i:nth-child(4){height:81%}
    .rung-bars i:nth-child(5){height:100%}

    .rung-name{
      font-family:var(--font-display);
      font-weight:700;
      font-size:1.05rem;
      letter-spacing:-.02em;
    }
    .rung-desc{
      font-size:.9rem;
      color:var(--text-2);
      line-height:1.5;
      max-width:52ch;
      text-wrap:pretty;
    }
    .rung-tag{
      font-family:var(--font-mono);
      font-size:.6rem;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:var(--text-3);
      white-space:nowrap;
    }
    @media(min-width:768px){ .rung-tag{text-align:right} }
    @media(max-width:767px){
      .rung-name{grid-column:2}
      .rung-desc,.rung-tag{grid-column:1/-1}
      .rung-tag{margin-top:.2rem}
    }

    /* ── exploit / explore allocation ── */
    .ladder-more[hidden]{display:none}
    .ladder-toggle{
      margin-top:1.4rem;
      display:inline-flex;
      align-items:center;
      gap:.6rem;
      min-height:44px;
      padding:0 1.2rem;
      background:transparent;
      border:1px solid var(--line-2);
      border-radius:999px;
      color:var(--text-2);
      font-family:var(--font-mono);
      font-size:.7rem;
      letter-spacing:.11em;
      text-transform:uppercase;
      cursor:pointer;
      transition:border-color .25s var(--ease),color .25s var(--ease);
    }
    .ladder-toggle:hover{border-color:var(--text);color:var(--text)}
    .ladder-toggle svg{width:13px;height:13px;transition:transform .3s var(--ease)}
    .ladder-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}

    .alloc{margin-top:4.5rem}
    .alloc-rail{
      display:flex;
      height:60px;
      border-radius:10px;
      overflow:hidden;
      border:1px solid var(--line);
      background:var(--surface);
    }
    .alloc-seg{
      position:relative;
      display:flex;
      align-items:center;
      padding:0 1.1rem;
      width:0;
      overflow:hidden;
      border-right:1px solid var(--bg);
      transition:filter .3s var(--ease);
    }
    .alloc-seg:last-child{border-right:none}
    .alloc-seg span{
      font-family:var(--font-mono);
      font-size:.66rem;
      letter-spacing:.12em;
      text-transform:uppercase;
      white-space:nowrap;
    }
    .alloc-a{background:var(--accent)}
    .alloc-a span{color:#060607;font-weight:500}
    .alloc-b{background:rgb(var(--accent-rgb) / .24)}
    .alloc-b span{color:var(--text)}
    .alloc-c{background:rgba(242,243,240,.07)}
    .alloc-c span{color:var(--text-2)}

    .alloc-keys{
      display:grid;
      gap:1.4rem;
      margin-top:1.6rem;
    }
    @media(min-width:768px){ .alloc-keys{grid-template-columns:repeat(3,1fr);gap:2.4rem} }
    .alloc-key h3{
      font-family:var(--font-mono);
      font-size:.66rem;
      letter-spacing:.13em;
      text-transform:uppercase;
      margin-bottom:.6rem;
      display:flex;
      align-items:center;
      gap:.5rem;
      font-weight:500;
    }
    .alloc-key h3 i{width:9px;height:9px;border-radius:2px;display:block;flex-shrink:0}
    .k-accent{background:var(--accent)}
    .k-accent-soft{background:rgb(var(--accent-rgb) / .24)}
    .k-neutral{background:rgba(242,243,240,.14)}
    .alloc-key p{font-size:.9rem;color:var(--text-2);line-height:1.55;text-wrap:pretty}

    /* the pinned stage is a desktop device. Below 1024 the stacked list IS the
       system section — rendering both meant every step appeared twice. */
    @media(max-width:1023px){ .pin-stage{display:none} }

    /* the dial, unrolled: a vertical rail that fills as you scroll the steps */
    .steps-mobile{position:relative;padding-left:2.1rem}
    .steps-mobile::before{
      content:'';
      position:absolute;
      left:5px; top:0; bottom:0;
      width:1px;
      background:var(--line-2);
    }
    .rail-fill{
      position:absolute;
      left:5px; top:0;
      width:1px; height:0;
      background:var(--accent);
      box-shadow:0 0 9px rgb(var(--accent-rgb) / .55);
    }
    .steps-mobile .step-m{position:relative}
    .steps-mobile .step-m::before{
      content:'';
      position:absolute;
      left:-2.1rem; top:2.55rem;
      width:11px; height:11px;
      border-radius:50%;
      background:var(--bg-2);
      border:1px solid var(--line-2);
      transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
    }
    .steps-mobile .step-m.is-on::before{
      background:var(--accent);
      border-color:var(--accent);
      transform:scale(1.2);
    }


/* Brand and progressive-enhancement layer. All six stages remain readable without JS. */
.band-tight{padding-block:clamp(3.5rem,7vw,6rem)}
.h-sub{font-size:clamp(1.4rem,3vw,2rem);line-height:1.1;letter-spacing:-.03em}
.viz-note{position:relative;font-size:.875rem;color:var(--text-2);margin:0 0 1.25rem;line-height:1.5}
.pin-stage{display:none}
.steps-mobile{display:flex}
.steps-mobile .h-sub{margin-bottom:.7rem}
.steps-mobile .step-no{margin-bottom:.8rem}
.system .sec-head .h-section,.concept-library .h-section,#intelligence .h-section{margin-top:1.2rem}
.viz-step{visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.viz-step.is-on{visibility:visible}
.viz-step h3{text-transform:none;font-weight:700}
.viz-step p{font-size:1.05rem}
.step-out span,.step-no,.chart-head,.chart-legend,.dial-core .k,.chain span,.spec-row dt,.spec-head,.spec-foot,.concept-meta,.concept-meta b,.concept-id,.pill,.dash-tab,.dash-caption,.kpi .k,.kpi .d,.note-block h3,.rung-tag,.alloc-key h3{font-size:.875rem;letter-spacing:.04em}
.dial .node text{font-size:3.4px;letter-spacing:0}
.chart-svg text{fill:var(--text-2);font-size:12px}
.rw{opacity:.58}
.fail-list p,.note-block li,.rung-desc,.alloc-key p{font-size:1rem}
.fail-list h3{font-size:1.12rem}
.hero-title{font-size:clamp(3rem,8.2vw,7.5rem);max-width:1100px}
.hero-sub{max-width:52ch}
.hero-label{font-size:.875rem}
.hero-title .accent{display:inline}
.chart-frame{min-width:0}
.system .band-tight{padding-bottom:0}
@media(min-width:1024px) and (prefers-reduced-motion:no-preference){
  .motion-ready .pin-stage{display:flex}
  .motion-ready .steps-mobile{display:none}
  .motion-ready .system>.container:last-child{display:none}
}
@media(max-width:767px){
  .thesis{font-size:clamp(1.8rem,7.5vw,2.3rem)}
  .hero-title{font-size:clamp(2.8rem,12.3vw,5.8rem)}
  .chart-frame{padding:1.2rem .9rem}
  .chart-legend{flex-direction:column;gap:.65rem}
  .hero-label{font-size:.8rem}
  .pin-stage{padding-block:3rem}
}
@media(prefers-reduced-motion:reduce){.rw{opacity:1}.rail-fill{height:100%!important}.ch-area,.ch-dot{opacity:1}.viz-step{transition:none}}

/* Same long-form visual rhythm; smaller paragraphs, not fewer visual components. */
.concept-library{position:relative}
.work-viewport{overflow-x:auto;overflow-y:hidden;min-height:auto;padding-block:4.5rem;scroll-snap-type:x proximity}
.work-track{align-items:center}
.work-intro,.concept,.work-end{scroll-snap-align:start}
.concept{width:clamp(260px,23vw,310px)}
.concept-frame{cursor:default}
.concept-hook{font-size:1.45rem;font-weight:700;line-height:1.12;text-transform:none}
.concept-meta{gap:.7rem .8rem;line-height:1.35}
.concept-meta b{font-size:.75rem;color:var(--text-3);margin-bottom:.15rem}
.concept-id,.pill{font-size:.75rem}
.concept-top{flex-wrap:wrap}
.work-intro{width:clamp(310px,34vw,420px);padding-right:2rem}
.work-intro .dash-caption{white-space:normal;line-height:1.5;border-radius:10px}
.work-intro .h-section{font-size:clamp(2.2rem,3.8vw,3.25rem)}
.work-swipe,.work-edge{display:none}
.dash-panel[hidden]{display:none!important}
.dash-body{min-height:430px}
.dash-tabs{flex-wrap:nowrap}
.dash-tab{font-size:.875rem;letter-spacing:.02em;padding:.65rem .9rem}
.dash-bar{font-size:.8rem;letter-spacing:.04em}
.dash-caption{font-size:.875rem;line-height:1.4}
.kpi .v{font-family:var(--font-display);font-size:clamp(2rem,3vw,2.75rem);font-weight:700}
.kpi .k{min-height:2.5em;line-height:1.3}
.kpi .d{font-size:.8rem;line-height:1.3}
.seg-name{font-size:.95rem}.seg-val{font-size:.9rem}
.seg-fill{display:block}
.spark{height:64px}
.spec-row{font-size:.95rem;grid-template-columns:minmax(100px,.4fr) 1fr}
.spec-row dt{font-size:.8rem}
.rung-name{font-size:1.3rem}
.rung-tag{white-space:normal}
.alloc-seg{padding:0 .7rem;justify-content:center}
.alloc-seg span{font-size:.85rem;letter-spacing:0}
.alloc-c span{font-size:0}.alloc-c span::after{content:'10%';font-size:.85rem}
.alloc-rail{height:64px}
.tl-item{padding-block:1.6rem}.tl-body p{max-width:48ch}
.nav-links{gap:1.4rem}.nav-links a{font-size:.8rem;letter-spacing:.04em}
.roles p{font-size:1rem}.faq details p{max-width:75ch}
.marquee-track{font-size:clamp(2rem,4vw,3.8rem);line-height:1}
.marquee{padding-block:1.5rem}
@media(min-width:1024px) and (prefers-reduced-motion:no-preference){
 .motion-ready .work-viewport{min-height:100dvh;overflow:visible;scroll-snap-type:none;padding-block:4.5rem}
}
@media(max-width:1100px){.nav-links{gap:1rem}.nav-links a{font-size:.75rem}}
@media(max-width:1023px){.nav-links{display:none}.menu-btn{display:block}.work-swipe{display:flex;position:absolute;left:1.25rem;bottom:1.2rem;font-size:.875rem;gap:.5rem;color:var(--text-2);align-items:center}.work-swipe svg{width:14px}.menu-list a{font-size:clamp(1.7rem,5.8vw,2.8rem)}}
@media(max-width:767px){
 .concept{width:74vw;max-width:310px}.work-intro{width:84vw;padding-right:1.1rem}
 .work-viewport{padding-block:3.5rem;align-items:stretch}.work-track{align-items:stretch}
 .dash-bar{padding:1rem .65rem;gap:.8rem}.dash-bar .lights{display:none}
 .dash-body{padding:1rem;min-height:0}.dash-tab{padding:.65rem .75rem;font-size:.8rem}
 .kpi{padding:1rem .75rem}.kpi .v{font-size:2.1rem}.kpi .k{font-size:.75rem;min-height:3em}
 .dash-caption{border-radius:10px}.kpi .d{font-size:.75rem}
 .spec-row{padding:.75rem 1rem;gap:.6rem}.spec-head{flex-wrap:wrap}
 .alloc-seg{padding:0 .25rem}.alloc-seg span{font-size:.75rem}.alloc-c span{font-size:0}
 .rung{padding-block:1.25rem}.rung-desc{font-size:1rem}
 .menu-overlay .container{max-height:calc(100dvh - 110px);overflow-y:auto;margin-top:1rem}
}
@media(prefers-reduced-motion:reduce){.marquee-track{transform:none!important}.concept-frame img{transform:none!important}.work-viewport{min-height:auto}}