.mesh-stage{
    --bg:#070C16;
    --panel-bg:13,19,31;          /* Ice & Ink surface */
    --surface:9,14,24;
    --ink:#F8FAFC; --ink-dim:#94A3B8; --ink-faint:#7789A3;
    --line:#171F2E; --line-2:#232E42; --line-ice:#1F2937;
    --cyan:var(--cyan-site,#00C2FF);               /* Signal: rest state */
    --focus:var(--cyan-site,#00C2FF);              /* Signal: primary action */
    --violet:#7C3AED;             /* Signal: structure */
    --copper:var(--accent,#E89B3C);             /* Copper: selection only */
    --copper-rgb:232,155,60;
    --cyan-rgb:0,194,255;
    --defer:#64748B; --defer-rgb:100,116,139;
    --panelW:436px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  /* [v0.3.1] page must scroll beneath the stage */
  .mesh-stage{position:relative;width:100%;height:100svh;min-height:560px;overflow:hidden;background:var(--bg);isolation:isolate}
  .mesh-stage{font-family:'Inter',system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
  #scene{position:absolute;inset:0;display:block;z-index:0;touch-action:none}
  .vig{position:absolute;inset:0;z-index:5;pointer-events:none;
    background:radial-gradient(ellipse 72% 58% at 52% 46%,transparent 0%,rgba(7,12,22,.5) 68%,rgba(7,12,22,.92) 100%)}

  /* ── Left rail ── */
  .rail{position:absolute;top:0;left:0;bottom:0;z-index:25;width:clamp(266px,23vw,338px);
    padding:clamp(20px,3.4vh,44px) 26px clamp(18px,3vh,26px);
    display:flex;flex-direction:column;pointer-events:none}
  .rail-top,.rail-mid,.rail-bottom{pointer-events:none}
  .rail-top>*,.rail-mid>*,.rail-bottom>*{pointer-events:auto}
  .rail-mid{margin-top:auto;margin-bottom:auto;padding:30px 0}
  .rail-bottom{margin-top:0}
  .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.3em;
    text-transform:uppercase;color:var(--cyan);opacity:.85;margin-bottom:15px}
  h1{font-family:'Space Grotesk',sans-serif;font-weight:500;
    font-size:clamp(27px,2.55vw,40px);line-height:1.06;letter-spacing:-.026em;margin-bottom:15px}
  h1 em{font-style:normal;color:var(--cyan)}
  .sub{font-weight:300;font-size:13px;line-height:1.62;color:var(--ink-dim);max-width:34ch;transition:opacity .3s}

  /* ── How this works ── */
  .howto-card{border:1px solid var(--line-2);border-radius:9px;padding:14px 15px;
    background:rgba(var(--surface),.5);backdrop-filter:blur(12px)}
  .howto-hd{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
    background:none;border:none;padding:0;cursor:pointer;
    font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.24em;text-transform:uppercase;
    color:var(--cyan);transition:color .2s}
  .howto-hd:hover{color:var(--ink)}
  .howto-hd i{font-style:normal;font-size:13px;line-height:1;color:var(--ink-faint)}
  .howto{display:none;margin-top:13px;padding:0}
  .howto.open{display:block}
  .howto li{list-style:none;font-size:11.5px;font-weight:300;line-height:1.5;color:var(--ink-dim);
    margin-bottom:9px;display:flex;gap:9px}
  .howto li:last-child{margin-bottom:0}
  .howto li b{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--cyan);
    flex-shrink:0;padding-top:2px;font-weight:400}
  .legend{margin-top:28px}
  .progress{margin-top:28px}

  /* ── Rail stepper ── */
  .pg-nav{display:flex;gap:6px;align-items:center;margin-top:11px}
  .pg-start{flex:1;background:rgba(var(--copper-rgb),.14);border:1px solid var(--copper);
    color:var(--copper);border-radius:7px;padding:9px 10px;cursor:pointer;transition:.2s;
    font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase}
  .pg-start:hover{background:var(--copper);color:#0B1220}
  .pg-arrow{width:32px;height:30px;display:grid;place-items:center;cursor:pointer;
    background:none;border:1px solid var(--line-2);border-radius:7px;color:var(--ink-dim);
    font-size:13px;line-height:1;transition:.18s}
  .pg-arrow:hover:not(:disabled){border-color:var(--copper);color:var(--copper)}
  .pg-arrow:disabled{opacity:.28;cursor:not-allowed}
  .pg-count{flex:1;text-align:center;font-family:'IBM Plex Mono',monospace;font-size:9.5px;
    letter-spacing:.14em;color:var(--ink-dim)}

  /* ── Stage nav ── */
  .snav{margin-top:30px;display:flex;flex-direction:column}
  .snav-title{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.26em;
    text-transform:uppercase;color:var(--ink-faint);margin-bottom:14px}
  .snav-item{display:flex;align-items:center;gap:12px;background:none;border:none;cursor:pointer;
    padding:9px 0;color:var(--ink-faint);text-align:left;width:100%;transition:color .2s}
  .snav-item:hover{color:var(--ink)}
  .snav-item .rule{width:13px;height:1px;background:currentColor;opacity:.45;flex-shrink:0;
    transition:width .3s cubic-bezier(.22,1,.36,1),opacity .2s}
  .snav-item:hover .rule{width:22px;opacity:.85}
  .scol{display:flex;flex-direction:column;gap:3px;min-width:0}
  .slabel{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;
    text-transform:uppercase;white-space:nowrap}
  .sbadge{display:none;font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:.13em;
    text-transform:uppercase;color:var(--ink-faint);white-space:nowrap}
  .snav-item.on{color:var(--copper)}          /* active stage = Copper */
  .snav-item.on .rule{width:34px;opacity:1}
  .snav-item.on .sbadge{display:block;color:var(--copper);opacity:.7}

  /* ── Labels ── */
  #labels{position:absolute;inset:0;z-index:10;pointer-events:none}
  .label{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;
    white-space:nowrap;text-align:center;padding:5px 9px;transition:opacity .32s ease}
  .lnum{display:none;font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.2em;
    color:var(--cyan);margin-bottom:3px}
  .label.is-step .lnum{display:block}
  .lstart{display:none;font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:.22em;
    text-transform:uppercase;color:#0B1220;background:var(--copper);border-radius:3px;
    padding:3px 8px;margin-bottom:7px;white-space:nowrap;
    box-shadow:0 2px 14px rgba(var(--copper-rgb),.45)}
  .label.is-first .lstart{display:inline-block;animation:startpulse 2.2s ease-in-out infinite}
  @keyframes startpulse{0%,100%{opacity:1;transform:translateY(0)}50%{opacity:.7;transform:translateY(-2px)}}
  .label .lname{font-family:'Space Grotesk',sans-serif;font-size:12.5px;font-weight:500;color:var(--ink);
    text-shadow:0 1px 12px rgba(7,12,22,.96),0 0 3px rgba(7,12,22,1);transition:color .3s}
  .label .lkind{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--ink-faint);margin-top:2px;opacity:0;transition:opacity .3s}
  .label.is-near .lkind,.label.is-active .lkind,.label.is-defer .lkind{opacity:1}
  .label.is-domain .lname{font-size:14px;font-weight:700;letter-spacing:-.005em}
  .label.is-north .lname{font-size:16px;font-weight:700;letter-spacing:.01em}
  .label.is-outcome .lname{font-weight:700}
  .label.is-leaf .lname{font-size:11px;font-weight:400}
  .lbrief{display:none;font-size:10.5px;font-weight:300;line-height:1.42;color:var(--ink-dim);
    margin-top:6px;max-width:196px;white-space:normal;
    text-shadow:0 1px 10px rgba(7,12,22,.98),0 0 3px rgba(7,12,22,1)}
  .label.is-hover .lbrief{display:block}
  .label.is-hover .lname{color:var(--cyan)}
  .label.is-hover .lkind{opacity:1}
  .label.is-active.is-hover .lname{color:var(--copper)}
  .label.is-active .lname{color:var(--copper)}        /* selected = Copper */
  .label.is-active .lnum,.label.is-active .lkind{color:var(--copper);opacity:.8}
  .label.is-rel .lname{color:var(--cyan)}             /* related stays Signal */
  .label.is-defer .lname{color:var(--ink-faint);font-weight:400}
  .label.is-defer .lkind{color:var(--defer);opacity:.75}
  .label:focus-visible{outline:1px solid var(--copper);outline-offset:3px;border-radius:4px}

  .surface{background:rgba(var(--surface),.84);backdrop-filter:blur(16px);
    border:1px solid var(--line-2);border-radius:10px}

  /* ── Finder ── */
  .finder{position:absolute;top:24px;right:24px;z-index:45;width:252px;transition:transform .45s cubic-bezier(.22,1,.36,1)}
  .finder.shift{transform:translateX(calc(-1 * var(--panelW)))}
  .finder-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:11px 13px;cursor:pointer;color:var(--ink);
    font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
  .finder-btn .fb-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
  .finder-btn .fb-caret{color:var(--ink-faint);transition:transform .25s;flex-shrink:0}
  .finder.open .fb-caret{transform:rotate(180deg)}
  .finder-pop{position:absolute;top:calc(100% + 8px);left:0;right:0;max-height:min(58vh,420px);
    overflow:hidden;display:none;flex-direction:column}
  .finder.open .finder-pop{display:flex}
  .finder-search{width:100%;background:transparent;border:none;border-bottom:1px solid var(--line-2);
    padding:12px 14px;color:var(--ink);font-family:'Inter',sans-serif;font-size:13px;outline:none}
  .finder-search::placeholder{color:var(--ink-faint)}
  .finder-list{overflow-y:auto;padding:6px 0}
  .fgroup{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;
    color:var(--ink-faint);padding:11px 14px 5px;display:flex;align-items:center;gap:8px}
  .fgroup i{width:6px;height:6px;border-radius:50%;flex-shrink:0}
  .fitem{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:7px 14px;
    color:var(--ink-dim);font-size:12.5px;font-family:'Inter',sans-serif;font-weight:300;transition:.15s;
    display:flex;justify-content:space-between;gap:8px;align-items:center}
  .fitem:hover,.fitem.cursor{background:rgba(var(--copper-rgb),.11);color:var(--ink)}
  .fitem.sel{color:var(--copper)}
  .fitem .fn{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--cyan);letter-spacing:.08em;flex-shrink:0}
  .fitem.lv3{padding-left:30px;font-size:12px}
  .fitem .fdef{font-family:'IBM Plex Mono',monospace;font-size:8px;color:var(--defer);letter-spacing:.14em;text-transform:uppercase}
  .fempty{padding:16px 14px;color:var(--ink-faint);font-size:12px;font-weight:300}

  /* ── Toolbar ── */
  .toolbar{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:45;
    display:flex;align-items:center;gap:4px;padding:7px 9px;transition:transform .45s cubic-bezier(.22,1,.36,1)}
  .toolbar.shift{transform:translateX(calc(-50% - var(--panelW)/2))}
  .tb-btn{width:30px;height:30px;display:grid;place-items:center;cursor:pointer;background:none;
    border:1px solid transparent;border-radius:7px;color:var(--ink-dim);font-size:17px;line-height:1;transition:.16s}
  .tb-btn:hover{color:var(--ink);border-color:var(--line-2);background:rgba(255,255,255,.04)}
  .tb-btn:active{background:rgba(var(--copper-rgb),.16);color:var(--copper)}
  .tb-btn:disabled{opacity:.3;cursor:not-allowed}
  .zpct{min-width:52px;text-align:center;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:11px;
    letter-spacing:.08em;color:var(--ink);padding:6px 2px;border-radius:6px;transition:.16s;user-select:none}
  .zpct:hover{background:rgba(255,255,255,.05);color:var(--copper)}
  .tb-sep{width:1px;height:20px;background:var(--line-2);margin:0 5px}
  .tb-text{background:none;border:none;cursor:pointer;padding:7px 9px;border-radius:6px;
    font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--ink-faint);transition:.16s;white-space:nowrap}
  .tb-text:hover{color:var(--ink);background:rgba(255,255,255,.04)}
  .tb-text.on{color:var(--cyan)}
  .zrange{-webkit-appearance:none;appearance:none;width:104px;height:22px;background:transparent;
    cursor:pointer;outline:none;touch-action:none}
  .zrange::-webkit-slider-runnable-track{height:2px;background:var(--line-2);border-radius:2px}
  .zrange::-moz-range-track{height:2px;background:var(--line-2);border-radius:2px}
  .zrange::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;
    background:var(--cyan);margin-top:-4.5px;box-shadow:0 0 10px rgba(var(--cyan-rgb),.6);transition:transform .15s}
  .zrange::-moz-range-thumb{width:11px;height:11px;border:none;border-radius:50%;background:var(--cyan);
    box-shadow:0 0 10px rgba(var(--cyan-rgb),.6)}
  .zrange:hover::-webkit-slider-thumb{transform:scale(1.25)}

  /* ── Panel: Ice & Ink, frosted ── */
  .panel{position:absolute;top:0;right:0;height:100%;width:min(var(--panelW),92vw);z-index:50;
    background:linear-gradient(180deg,rgba(var(--panel-bg),.10) 0%,rgba(var(--panel-bg),.30) 100%);
    backdrop-filter:blur(34px) saturate(130%);-webkit-backdrop-filter:blur(34px) saturate(130%);
    border-left:1px solid var(--line-ice);box-shadow:-24px 0 60px rgba(0,0,0,.45);
    padding:38px 34px 46px;overflow-y:auto;transform:translateX(100%);
    transition:transform .45s cubic-bezier(.22,1,.36,1)}
  .panel.open{transform:translateX(0)}
  .panel-close{position:absolute;top:24px;right:24px;background:none;border:1px solid var(--line-ice);
    color:var(--ink-dim);width:31px;height:31px;border-radius:50%;cursor:pointer;font-size:13px;line-height:1;transition:.2s}
  .panel-close:hover{color:var(--copper);border-color:var(--copper)}
  .p-crumb{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--ink-faint);margin-bottom:9px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
  .p-crumb b{color:var(--cyan);font-weight:400}
  .p-kind{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
    color:var(--copper);margin-bottom:11px}
  .p-kind.warn{color:var(--defer)}
  .p-title{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:29px;line-height:1.1;
    letter-spacing:-.02em;margin-bottom:13px}
  .p-num{font-family:'IBM Plex Mono',monospace;font-size:15px;color:var(--copper);margin-right:9px;font-weight:400}
  .p-desc{font-weight:300;font-size:13.5px;line-height:1.66;color:var(--ink-dim)}
  .p-rule{height:1px;background:var(--line-ice);margin:26px 0}
  .p-head{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;
    color:var(--ink-faint);margin-bottom:13px}
  .p-list{list-style:none;display:grid;gap:8px}
  .p-list li{font-size:13px;font-weight:300;color:var(--ink);display:flex;gap:10px;align-items:baseline}
  .p-list li::before{content:'';width:3px;height:3px;border-radius:50%;background:var(--ink-faint);
    flex-shrink:0;transform:translateY(-3px)}
  .p-out li::before{background:var(--cyan)}
  .p-note{font-size:12px;font-weight:300;line-height:1.6;color:var(--ink-faint);
    border-left:1px solid var(--line-2);padding-left:13px}
  .p-note b{color:var(--ink-dim);font-weight:400}

  .rowlist{display:grid;gap:2px}
  .row{display:flex;gap:11px;align-items:baseline;width:100%;text-align:left;background:none;border:none;
    cursor:pointer;padding:8px;border-radius:6px;transition:.16s;color:var(--ink-dim)}
  .row:hover{background:rgba(var(--copper-rgb),.10);color:var(--ink)}
  .row .rn{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:var(--cyan);letter-spacing:.06em;
    flex-shrink:0;min-width:24px}
  .row .rname{font-size:13px;font-weight:300}
  .row.def{color:var(--ink-faint)}
  .row.def .rn{color:var(--defer)}

  .conn{border:1px solid var(--line-ice);border-radius:6px;padding:11px 13px;cursor:pointer;transition:.22s;
    background:transparent;text-align:left;width:100%;display:block}
  .conn:hover{border-color:var(--copper);background:rgba(var(--copper-rgb),.06)}
  .conn-dir{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--ink-faint);margin-bottom:5px}
  .conn-name{font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:500;color:var(--ink);margin-bottom:3px}
  .conn-reason{font-family:'IBM Plex Mono',monospace;font-size:10px;line-height:1.5;color:var(--ink-dim)}
  .p-conn{display:grid;gap:10px}

  .actionbox{border-left:2px solid var(--copper);padding:2px 0 2px 14px;margin:20px 0 0}
  .actionbox.defer{border-color:var(--defer)}
  .actionbox .albl{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.24em;
    text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px}
  .actionbox p{font-family:'Space Grotesk',sans-serif;font-size:15px;line-height:1.46;color:var(--ink);font-weight:400}

  /* escape hatch */
  .hatch{margin-top:18px;border:1px solid var(--line-2);border-radius:8px;padding:15px 16px;
    background:rgba(var(--cyan-rgb),.04)}
  .hatch h5{font-family:'Space Grotesk',sans-serif;font-size:13.5px;font-weight:500;margin-bottom:6px;color:var(--ink)}
  .hatch p{font-size:12px;font-weight:300;line-height:1.6;color:var(--ink-dim);margin-bottom:11px}
  .hatch a{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
    color:var(--cyan);text-decoration:none;transition:.2s}
  .hatch a:hover{color:var(--copper)}

  .stepnav{display:flex;gap:8px;margin-top:22px}
  .stepnav button{flex:1;border:1px solid var(--line-ice);background:transparent;color:var(--ink-dim);
    border-radius:7px;padding:11px 8px;cursor:pointer;transition:.2s;
    font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
  .stepnav button:hover:not(:disabled){border-color:var(--copper);color:var(--copper)}
  .stepnav button:disabled{opacity:.3;cursor:not-allowed}

  .p-target{border:1px solid var(--line-ice);border-radius:8px;padding:14px 16px;background:rgba(var(--cyan-rgb),.05)}
  .p-target .tl{font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.24em;
    text-transform:uppercase;color:var(--ink-faint);margin-bottom:7px}
  .p-target .tv{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:500;color:var(--cyan)}

  .cta-mini{margin-top:26px;border:1px solid var(--line-2);border-radius:9px;padding:18px;
    background:rgba(var(--copper-rgb),.055)}
  .cta-mini h5{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:500;
    line-height:1.34;color:var(--ink);margin-bottom:7px;letter-spacing:-.01em}
  .cta-mini p{font-size:12.5px;font-weight:300;line-height:1.6;color:var(--ink-dim);margin-bottom:15px}
  .cta-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
  .btn-sm{background:var(--copper);color:#0B1220;border:none;border-radius:7px;padding:10px 15px;
    font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
    font-weight:500;text-decoration:none;transition:.2s;display:inline-block}
  .btn-sm:hover{filter:brightness(1.1);transform:translateY(-1px)}
  .link-sm{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.15em;
    text-transform:uppercase;color:var(--ink-dim);text-decoration:none;transition:.2s;padding:10px 2px}
  .link-sm:hover{color:var(--copper)}
  .p-foot p{font-size:12.5px;font-weight:300;line-height:1.6;color:var(--ink-dim);margin-bottom:13px}
  .cta{margin-top:30px;border:1px solid var(--line-2);border-radius:10px;padding:22px;
    background:linear-gradient(160deg,rgba(var(--copper-rgb),.09),rgba(var(--cyan-rgb),.05))}
  .cta h4{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:500;line-height:1.32;
    margin-bottom:9px;letter-spacing:-.01em}
  .cta p{font-size:12.5px;font-weight:300;line-height:1.6;color:var(--ink-dim);margin-bottom:16px}
  .cta-row{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
  .cta-btn{background:var(--copper);color:#0B1220;border:none;border-radius:7px;padding:11px 17px;cursor:pointer;
    font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;
    font-weight:500;transition:.2s;text-decoration:none;display:inline-block}
  .cta-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
  .cta-alt{background:none;border:none;color:var(--ink-dim);cursor:pointer;padding:11px 6px;text-decoration:none;
    font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;transition:.2s}
  .cta-alt:hover{color:var(--cyan)}

  /* ── Legend / progress ── */
  .legend{display:flex;flex-direction:column;gap:6px}
  .legend.hide{display:none}
  .lg-title{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.24em;text-transform:uppercase;
    color:var(--ink-faint);margin-bottom:2px}
  .chip{display:flex;align-items:center;gap:9px;background:none;border:none;cursor:pointer;padding:2px 0;
    font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-faint);transition:color .2s}
  .chip:hover,.chip.on{color:var(--ink)}
  .chip i{width:7px;height:7px;border-radius:50%;flex-shrink:0;opacity:.6;transition:.2s}
  .chip.on i{opacity:1}
  .progress{display:none;flex-direction:column;gap:9px}
  .progress.show{display:flex}
  .pg-stage{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:500;color:var(--copper)}
  .pg-meta{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}
  .pg-bar{height:2px;background:var(--line-2);border-radius:2px;overflow:hidden}
  .pg-fill{height:100%;background:var(--copper);width:0%;transition:width .4s cubic-bezier(.22,1,.36,1)}

  .keys{position:absolute;right:24px;bottom:22px;z-index:20;text-align:right;pointer-events:none;
    font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-faint);line-height:1.9;transition:opacity .4s}
  .keys.hide{opacity:0}
  .keys b{color:var(--ink-dim);font-weight:400}
  :focus-visible{outline:1px solid var(--copper);outline-offset:2px}

  @media (max-width:900px){
    .keys{display:none}
    .rail{position:absolute;top:0;left:0;right:0;bottom:auto;width:auto;padding:15px 14px 0;display:block}
    h1{font-size:21px;margin-bottom:9px}
    .eyebrow{margin-bottom:10px;font-size:9px}
    .sub{font-size:11.5px;line-height:1.5;max-width:none;
      display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .snav{margin-top:13px;flex-direction:row;gap:5px;overflow-x:auto;padding-bottom:4px}
    .snav-title{display:none}
    .snav-item{width:auto;gap:0;padding:7px 11px;border:1px solid var(--line-2);border-radius:7px;
      background:rgba(var(--surface),.8);backdrop-filter:blur(12px)}
    .snav-item .rule{display:none}
    .sbadge{display:none!important}
    .slabel{font-size:9px;letter-spacing:.1em}
    .snav-item.on{background:rgba(var(--copper-rgb),.15);border-color:var(--copper)}
    .rail-mid{margin:0;padding:0}
    .legend,.progress{position:absolute;left:12px;bottom:112px;width:212px;margin:0}
    .rail-bottom{display:none}
    .lbrief{display:none!important}
    .finder{top:auto;bottom:70px;right:12px;left:12px;width:auto}
    .finder.shift{transform:none}
    .finder-pop{top:auto;bottom:calc(100% + 8px)}
    .toolbar{bottom:14px;left:12px;right:12px;transform:none;justify-content:center;overflow-x:auto}
    .toolbar.shift{transform:none}
    .panel{width:100vw;padding:32px 22px 40px}
    .panel.open ~ .toolbar,.panel.open ~ .finder{opacity:0;pointer-events:none}
    .label .lname{font-size:11px}
    .label.is-domain .lname{font-size:12px}
    .zrange{width:76px}
    .tb-text{font-size:9px;letter-spacing:.1em;padding:7px 6px}
  }
  @media (max-height:760px){.howto{display:none}.howto-card{padding:11px 14px}}
  @media (prefers-reduced-motion:reduce){.panel,.finder,.toolbar{transition:none}
    .label.is-first .lstart{animation:none}}

/* ══════════ SITE INTEGRATION LAYER · v0.3.1 ══════════
   Everything below is integration only. v13's type scale, spacing, colour
   relationships and interaction model are untouched. */

.mesh-stage{--nav-h:80px}
@media (max-width:1024px){.mesh-stage{--nav-h:64px}}

/* The stage sits under a fixed nav that v13 never had. Move the rail and the
   label plane down by the nav height rather than padding them — internal
   spacing then stays exactly as designed. */
/* Stage is taller than the viewport by --nav-h; keep rail chrome inside the fold */
.mesh-stage .rail{top:var(--nav-h);bottom:var(--nav-h)}
/* DEFECT 1 — the detail panel began at stage top, so its title sat behind the
   fixed nav whenever it opened. DEFECT 3 — at the extended stage height its
   content ran past the fold. Anchor it to the visible viewport instead. */
.mesh-stage .panel{top:var(--nav-h);height:calc(100vh - var(--nav-h));max-height:calc(100vh - var(--nav-h))}
@media (max-width:1024px){.mesh-stage .panel{width:100vw}}
/* Two constraints pull against each other:
     1. #scene and #labels must share identical geometry, or projected labels
        drift off their nodes.
     2. The scene needs the full height v13 was composed for — squeezing it by
        the nav height raised measured label collisions from ~14 to ~26 pairs,
        while letting it run under the nav hides the north star.
   Resolved by extending the stage by the nav height, so the scene still gets a
   full viewport of pixels while starting below the nav. */
.mesh-stage{height:calc(100svh + var(--nav-h))}
.mesh-stage #scene,
.mesh-stage #labels,
.mesh-stage .vig{top:var(--nav-h);height:calc(100% - var(--nav-h));bottom:auto}
.mesh-stage .nav-scrim{display:none}
/* Chrome anchored to the visible viewport, not the extended stage bottom */
.mesh-stage .toolbar{bottom:calc(var(--nav-h) + 22px)}
.mesh-stage .keys{bottom:calc(var(--nav-h) + 22px)}
.mesh-scroll-cue{bottom:calc(var(--nav-h) + 8px)}

/* Node → service link */
.mesh-stage .svc-row{margin-top:14px}
.mesh-stage .svc-link{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.1em;color:var(--copper);text-decoration:none;
  border-bottom:1px solid rgba(var(--copper-rgb),.4);padding-bottom:2px;transition:.2s}
.mesh-stage .svc-link:hover{color:#F0B369;border-bottom-color:#F0B369}
.mesh-stage .svc-link--soft{color:var(--cyan);border-bottom-color:rgba(var(--cyan-rgb),.4)}

/* Tier B fallback */
.mesh-stage[data-tier="B"] #scene,
.mesh-stage[data-tier="B"] #labels,
.mesh-stage[data-tier="B"] .toolbar,
.mesh-stage[data-tier="B"] .keys,
.mesh-stage[data-tier="B"] .rail,
.mesh-stage[data-tier="B"] .vig,
.mesh-stage[data-tier="B"] .finder{display:none}
.mesh-stage[data-tier="A"] .mesh-fallback{display:none}
.mesh-fallback{display:block;position:absolute;inset:0;overflow-y:auto;background:var(--bg);
  padding:calc(var(--nav-h) + 24px) clamp(20px,5vw,48px) 48px}
.mesh-fallback__inner{max-width:64ch;margin-inline:auto}
.mesh-scroll-cue{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:40;
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-dim);text-decoration:none;padding:10px 16px;min-height:44px;display:flex;align-items:center}
.mesh-scroll-cue:hover{color:var(--copper)}
@media (max-width:1023px){.mesh-stage{height:auto;min-height:0}}

/* ── Tier B fallback typography ── */
.mf-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:14px}
.mf-h1{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:clamp(28px,6vw,44px);
  line-height:1.06;letter-spacing:-.026em;color:var(--ink);margin:0 0 14px}
.mf-sub{font-size:15px;line-height:1.62;color:var(--ink-dim);max-width:60ch;margin:0 0 28px}
.mf-stages{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.mf-stage{display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  background:rgba(var(--surface),.6);border:1px solid var(--line-2);border-radius:9px;
  padding:10px 14px;min-height:44px;cursor:pointer;color:var(--ink-dim);transition:.2s}
.mf-stage:hover{border-color:var(--copper);color:var(--ink)}
.mf-stage.on{border-color:var(--copper);color:var(--copper);background:rgba(var(--copper-rgb),.1)}
.mf-stage__label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.mf-stage__badge{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--ink-faint)}
.mf-thesis{font-size:16px;line-height:1.6;color:var(--ink);max-width:60ch;
  border-left:2px solid var(--copper);padding-left:16px;margin:0 0 26px}
.mf-h2{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-faint);margin:26px 0 14px}
.mf-moves{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px}
.mf-moves li{display:flex;gap:14px}
.mf-num{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--cyan);flex-shrink:0;padding-top:3px}
.mf-move{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:500;color:var(--ink);margin:0 0 3px}
.mf-move--defer{color:var(--ink-dim)}
.mf-why{font-size:14px;line-height:1.55;color:var(--ink-dim);margin:0;max-width:58ch}
.mf-svc{display:inline-block;margin-top:6px;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.08em;color:var(--copper);text-decoration:none;border-bottom:1px solid rgba(var(--copper-rgb),.4)}
.mf-svc:hover{color:#F0B369}
.mf-defer{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;opacity:.8}
.mf-cta{margin-top:30px}
.mf-full{margin-top:36px;border-top:1px solid var(--line-2);padding-top:18px}
.mf-full summary{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cyan);cursor:pointer;min-height:44px;display:flex;align-items:center}
.mf-tree{margin-top:14px;font-size:14px;color:var(--ink-dim);line-height:1.7}
.mf-tree ul{list-style:none;padding-left:16px;margin:6px 0}
.mf-dom{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--copper);margin:16px 0 4px}
.mf-tree strong{color:var(--ink);font-weight:500}
.mf-kind{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--ink-faint)}
.mf-tree a{color:var(--copper);text-decoration:none;border-bottom:1px solid rgba(var(--copper-rgb),.35)}
.mf-note{margin-top:26px;font-size:13px;color:var(--ink-faint);max-width:56ch}
.mesh-stage .rail-h{font-family:'Space Grotesk',sans-serif;font-weight:500;
  font-size:clamp(27px,2.55vw,40px);line-height:1.06;letter-spacing:-.026em;margin-bottom:15px}
.mesh-stage .rail-h em{font-style:normal;color:var(--cyan)}

/* ══════════ ISOLATION RESET · v0.3.1 ══════════
   v13 was a standalone document: html font-size 16px, body line-height normal,
   no site component classes. Inside the site it inherits html{font-size:17px},
   body{line-height:1.6} and the global 44px target rule, which together inflated
   the rail to twice its designed height. Restore v13's baseline inside the stage. */
.mesh-stage{font-size:16px;line-height:normal;cursor:auto}
.mesh-stage .rail,
.mesh-stage .rail *,
.mesh-stage #labels,
.mesh-stage #labels *,
.mesh-stage .toolbar,
.mesh-stage .toolbar *,
.mesh-stage .finder,
.mesh-stage .finder *,
.mesh-stage .keys,
.mesh-stage .keys *{line-height:normal}

/* The global WCAG target rule must not inflate mesh chrome — these are pointer
   targets inside a 3D canvas, sized by v13's own layout. */
.mesh-stage button,
.mesh-stage .chip,
.mesh-stage .tb-btn,
.mesh-stage .tb-text,
.mesh-stage .snav-item,
.mesh-stage .pg-arrow{min-height:0;min-width:0}
.mesh-stage .howto-hd,
.mesh-stage .finder-btn,
.mesh-stage .pg-start{min-height:32px}

/* Restore v13 line-heights where it set them explicitly */
.mesh-stage .sub{line-height:1.62}
.mesh-stage .howto li{line-height:1.5}
.mesh-stage .p-body,.mesh-stage .p-why{line-height:1.6}

/* ══════════ CLASS-COLLISION GUARD · v0.3.1 ══════════
   The site defines .label{font-weight:700;text-transform:uppercase;letter-spacing:.12em;
   color:var(--bold-orange)} and .label::before. The mesh independently uses .label for
   every node. The site rule was widening and re-casing all 26 node labels, which is what
   doubled label overlap versus v13 (14 pairs -> 27). Neutralise it inside the stage only.
   !important is used deliberately: these are integration overrides against a rule that
   wins on specificity, and the alternative is renaming a class inside the frozen v13 file. */
.mesh-stage .label{
  font-weight:400 !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  color:inherit !important;
  font-size:inherit !important;
}
.mesh-stage .label::before{content:none !important;display:none !important}
.mesh-stage .label .lname{font-weight:500 !important;text-transform:none !important}
.mesh-stage .label.is-domain .lname{font-weight:700 !important;letter-spacing:-.005em !important}
.mesh-stage .label.is-north  .lname{font-weight:700 !important;letter-spacing:.01em !important}
.mesh-stage .label.is-outcome .lname{font-weight:700 !important}
.mesh-stage .label .lkind{text-transform:uppercase !important;letter-spacing:.2em !important}

/* Site target-size rule (button:not(...)) outranks .mesh-stage button — force it off
   for mesh chrome, whose hit areas are sized by v13's own layout. */
.mesh-stage button,
.mesh-stage .chip{min-height:0 !important;min-width:0 !important}
.mesh-stage .howto-hd,
.mesh-stage .finder-btn,
.mesh-stage .pg-start,
.mesh-stage .snav-item{min-height:30px !important}

/* Node labels are overlays on a 3D scene — the sphere is the pointer target, and
   v13 sized them at ~30px. The global 44px rule (WCAG 2.5.5 AAA) was inflating all
   26 of them vertically, which is what kept label collisions at ~2x the v13
   baseline. Natural height still clears WCAG 2.2 SC 2.5.8 AA, which asks 24px. */
.mesh-stage #labels .label{min-height:0 !important;min-width:0 !important}

/* ── Tier B / mobile: fallback must be in flow ──
   .mesh-fallback is absolutely positioned so it can overlay the canvas on
   desktop. On Tier B there is no canvas, so absolute positioning left the stage
   with zero height and the hero vanished. Put it back in flow. */
.mesh-stage[data-tier="B"]{height:auto;min-height:0}
.mesh-stage[data-tier="B"] .mesh-fallback{position:static;inset:auto;overflow:visible;
  padding:calc(var(--nav-h) + 28px) clamp(20px,5vw,48px) 40px}
.mesh-stage[data-tier="B"] .mesh-scroll-cue{display:none}
@media (max-width:1023px){
  .mesh-stage{height:auto;min-height:0}
  .mesh-fallback{position:static;inset:auto;overflow:visible}
}

/* ── DEFECT 2 · scroll affordance ──
   The old text cue sat behind the toolbar and keyboard hints, so a visitor
   landing on a full-height canvas had no visible way past it except the page
   edges. Anchor a real button bottom-right of the visible viewport, clear of
   both the toolbar (centre) and the hints (far right), and pulse it until the
   user scrolls. */
.mesh-scroll-cue{display:none}
.mesh-scroll-btn{position:absolute;right:26px;bottom:calc(var(--nav-h) + 74px);z-index:46;
  display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:11px 17px;
  border:1px solid var(--line-2);border-radius:999px;text-decoration:none;
  background:rgba(var(--surface),.72);backdrop-filter:blur(12px);
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-dim);transition:.22s;cursor:pointer}
.mesh-scroll-btn:hover,.mesh-scroll-btn:focus-visible{color:var(--copper,#E89B3C);
  border-color:var(--copper,#E89B3C);transform:translateY(-2px)}
.mesh-scroll-btn svg{width:15px;height:15px;animation:vxNudge 2.1s ease-in-out infinite}
@keyframes vxNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.mesh-stage.vx-scrolled .mesh-scroll-btn{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.mesh-scroll-btn svg{animation:none}}
@media (max-width:1023px){.mesh-scroll-btn{display:none}}

/* ══════════ v0.5.0 · BOTTOM-RIGHT COLUMN ══════════
   Four things competed for one corner: the utility dock, the keyboard hints,
   the Continue button and (previously) three loose fixed widgets. Give them a
   deterministic vertical order with real spacing, and clear the transient ones
   while the dock is expanded so nothing ever overlaps. */
/* The stage runs --nav-h below the viewport, so anything anchored to its bottom
   lands that much too low. Offset by --nav-h, and sit left of the 48px dock. */
.mesh-stage .keys{right:96px;bottom:calc(var(--nav-h) + 26px);text-align:right;transition:opacity .22s}
.mesh-scroll-btn{right:24px;bottom:calc(var(--nav-h) + 96px);transition:opacity .22s,transform .22s}

/* Dock open — stand the transient controls down rather than let them collide */
body:has(#vx-dock[data-open="true"]) .mesh-stage .keys,
body:has(#vx-dock[data-open="true"]) .mesh-scroll-btn{opacity:0;pointer-events:none}

@media (max-width:1023px){
  .mesh-stage .keys{display:none}
}

/* ══════════ v0.5.1 · LABEL STACKING ══════════
   The site defines .label{display:inline-flex;align-items:center;gap:.5rem}.
   The mesh independently uses .label for every node, so every label laid its
   children out in a ROW — "Start here / Business Growth / NORTH STAR / The one
   number everything else feeds" all on one line, spreading across the scene and
   colliding with neighbours. They are block elements by design; restore that. */
.mesh-stage .label{
  display:block !important;
  gap:0 !important;
  align-items:initial !important;
  text-align:center;
  white-space:normal;
}
/* Long names wrap to a second line rather than running horizontally */
.mesh-stage .label .lname{
  white-space:normal;
  max-width:190px;
  margin-inline:auto;
  line-height:1.22;
  text-wrap:balance;
}
.mesh-stage .label.is-north .lname,
.mesh-stage .label.is-domain .lname{max-width:220px}
.mesh-stage .label .lkind{display:block;margin-top:3px}
.mesh-stage .label .lstart{margin-inline:auto}
.mesh-stage .label .lbrief{margin-inline:auto;max-width:200px}

/* ══════════ v0.5.1 · CONTINUE — centre bottom, beside the zoom bar ══════════ */
.mesh-scroll-btn{
  left:50%;right:auto;
  transform:translateX(-50%);
  bottom:calc(var(--nav-h) + 84px);
  padding:13px 22px;min-height:48px;
  font-size:12px;letter-spacing:.22em;
  color:var(--cyan);
  border-color:rgba(var(--cyan-rgb),.45);
  background:rgba(var(--surface),.82);
}
.mesh-scroll-btn:hover,.mesh-scroll-btn:focus-visible{
  color:var(--ink);border-color:var(--cyan);
  transform:translateX(-50%) translateY(-2px);
  box-shadow:0 0 0 1px rgba(var(--cyan-rgb),.28)}
.mesh-scroll-btn svg{width:17px;height:17px;stroke-width:2.2}

/* Mesh chrome in ice blue — the controls that were too dim to find */
.mesh-stage .keys{color:var(--cyan);opacity:.72}
.mesh-stage .tb-text,.mesh-stage .tb-btn{color:var(--cyan)}
.mesh-stage .tb-text:hover,.mesh-stage .tb-btn:hover{color:var(--ink)}
.mesh-stage .zpct{color:var(--cyan)}

/* ══════════ v0.5.2 · ZOOM & TOUCH ══════════
   touch-action:none blocked native pinch on touchscreens, so users could not
   zoom the page over the hero. pinch-zoom lets the browser keep its gesture
   while one-finger drag still reaches the orbit handler. WCAG 2.1 SC 1.4.4. */
.mesh-stage #scene{touch-action:pinch-zoom}

/* At high browser zoom the effective viewport shrinks. Stand the mesh chrome
   down rather than let it cover the content the user zoomed in to read. */
@media (max-height:560px), (max-width:900px){
  .mesh-stage .keys{display:none}
  .mesh-stage .toolbar{transform:translateX(-50%) scale(.88);transform-origin:bottom center}
}
@media (max-height:460px){
  .mesh-stage .rail{position:relative;height:auto;bottom:auto}
  .mesh-scroll-btn{display:none}
}

/* ══════════ R12 · Tier B poster ══════════
   The fallback was correct and crawlable but entirely typographic: a mobile
   visitor read a list where a desktop visitor saw a model. The poster carries
   the same structure as a diagram. Tier A never loads it. */
.mesh-poster{display:block;width:100%;max-width:720px;height:auto;margin:0 auto 1.75rem;
  border-radius:12px;border:1px solid #1E2A3C;background:#070C16}
.mesh-stage[data-tier="A"] .mesh-poster{display:none}