/* ============================================================
   THE CONSTELLATION — page styles (shared by network.html and
   the homepage embed; extracted from network.html inline block)
   ============================================================ */

  /* ---------- editorial head ---------- */
  .fig-line {
    display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
    font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:2.5px; text-transform:uppercase;
    color:var(--ink-soft); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
    padding:10px 2px; margin-bottom:38px;
  }
  .net-title {
    font-family:'Marcellus',serif; font-size:clamp(40px,6.4vw,96px); line-height:0.98;
    text-transform:uppercase; letter-spacing:0.5px; color:var(--ink);
  }
  .net-title em { font-family:'Cormorant Garamond',serif; font-style:italic; text-transform:lowercase; letter-spacing:0; }
  .net-title .ol { color:transparent; -webkit-text-stroke:1.5px var(--ink); }
  .net-head .row { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-top:28px; }
  .net-head .row p.lede { max-width:620px; margin:0; }
  .net-fig {
    position:absolute; left:18px; bottom:40px; z-index:15;
    font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:2px; text-transform:uppercase;
    color:var(--ink-soft); white-space:pre-line; line-height:1.9; pointer-events:none;
  }
  .net-legend .gl { margin-left:8px; color:var(--klein); font-size:11px; }
  html[data-theme="blue"] .net-legend .gl, html[data-theme="dark"] .net-legend .gl { color:var(--sand); }
  .view-seg button { font-family:'Space Grotesk',sans-serif; font-weight:500; letter-spacing:1px; }

  /* ---------- page head ---------- */
  .net-head { padding:64px 0 34px; }
  .net-head .row { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
  .net-head h1 { font-family:'Marcellus',serif; font-size:clamp(38px,4.6vw,64px); line-height:1.04; max-width:820px; }
  .net-head p.lede { margin-top:16px; max-width:640px; }
  .net-sub {
    font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:3px;
    text-transform:uppercase; color:var(--ink-soft); margin-top:12px;
  }

  /* ---------- head detail row (under the description) ---------- */
  .net-detail { display:grid; grid-template-columns:repeat(3,1fr); gap:34px; margin-top:44px; }
  .net-detail .nd-cell { border-top:1px solid var(--rule); padding-top:16px; }
  .net-detail .nd-k {
    display:block; font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:2px;
    text-transform:uppercase; color:var(--klein); margin-bottom:10px;
  }
  html[data-theme="dark"] .net-detail .nd-k { color:var(--rose); }
  .net-detail p { font-size:13.5px; line-height:1.6; color:var(--ink-soft); }
  @media (max-width:900px) { .net-detail { grid-template-columns:1fr; gap:24px; margin-top:32px; } }

  /* ---------- stage ---------- */
  .net-stage { position:relative; height:calc(100vh - 64px); min-height:600px; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); overflow:hidden; }
  #net-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; cursor:grab; touch-action:none; }
  #net-canvas.grabbing { cursor:grabbing; }
  #net-canvas.pointing { cursor:pointer; }

  /* ---------- toolbar ---------- */
  .net-bar {
    position:absolute; top:0; left:0; right:0; z-index:20; display:flex; align-items:center; gap:10px;
    padding:14px 18px; flex-wrap:wrap; pointer-events:none;
  }
  .net-bar > * { pointer-events:auto; }
  .nbtn {
    font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:1.5px; text-transform:uppercase;
    padding:9px 14px; border:1px solid var(--rule); border-radius:20px; background:transparent; color:var(--ink);
    cursor:pointer; transition:border-color .35s, background .35s, color .35s, transform .35s cubic-bezier(.22,.9,.26,1); white-space:nowrap;
  }
  .nbtn:hover { border-color:var(--klein); color:var(--klein); transform:translateY(-1.5px); }
  .nbtn.hot { background:var(--klein); border-color:var(--klein); color:var(--sand); }
  html[data-theme="blue"] .nbtn:hover, html[data-theme="dark"] .nbtn:hover { border-color:var(--rose); color:var(--rose); }
  html[data-theme="blue"] .nbtn.hot, html[data-theme="dark"] .nbtn.hot { background:var(--sand); border-color:var(--sand); color:var(--graphite); }
  #net-search {
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:1px; padding:9px 14px 9px 34px; width:190px;
    border:1px solid var(--rule); border-radius:20px; background:transparent; color:var(--ink); outline:none;
  }
  #net-search { transition:border-color .3s, box-shadow .3s; }
  #net-search:focus { border-color:var(--klein); box-shadow:0 0 0 3px rgba(0,47,167,0.14); }
  html[data-theme="dark"] #net-search:focus, html[data-theme="blue"] #net-search:focus { border-color:var(--rose); box-shadow:0 0 0 3px rgba(200,154,150,0.16); }
  #net-search::placeholder { color:var(--ink-soft); text-transform:uppercase; letter-spacing:1.5px; font-size:9.5px; }
  .net-spacer { flex:1; }
  .seg { display:inline-flex; border:1px solid var(--rule); border-radius:20px; overflow:hidden; }
  .seg button {
    font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase;
    padding:9px 12px; border:none; background:transparent; color:var(--ink-soft); cursor:pointer;
  }
  .seg button.on { background:var(--klein); color:var(--sand); }
  html[data-theme="blue"] .seg button.on, html[data-theme="dark"] .seg button.on { background:var(--sand); color:var(--graphite); }

  /* active filter pills */
  .net-pills { position:absolute; top:58px; left:226px; right:18px; z-index:19; display:flex; gap:8px; flex-wrap:wrap; pointer-events:none; }
  .net-pills .fpill {
    pointer-events:auto; font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:1.2px; text-transform:uppercase;
    background:transparent; color:var(--ink); border:1.5px solid var(--ink); border-radius:16px;
    padding:4px 5px 4px 12px; display:inline-flex; gap:8px; align-items:center; cursor:pointer;
    transition:color .3s, border-color .3s, transform .3s cubic-bezier(.22,.9,.26,1);
    animation:pillIn .5s cubic-bezier(.2,.85,.3,1.15) backwards;
  }
  @keyframes pillIn { from { opacity:0; transform:translateY(-7px) scale(.9); } }
  .net-pills .fpill:hover { transform:translateY(-1px); }
  .net-pills .fpill .x {
    width:17px; height:17px; border-radius:50%; border:1.5px solid currentColor;
    display:inline-flex; align-items:center; justify-content:center; font-size:8.5px; line-height:1; opacity:.85;
    transition:background .15s, color .15s, opacity .15s;
  }
  .net-pills .fpill:hover { color:var(--rose); border-color:var(--rose); }
  .net-pills .fpill:hover .x { background:var(--rose); color:var(--graphite); opacity:1; }
  .net-pills .fpill.clearall { border-color:var(--rose); color:var(--rose); }
  .net-pills .fpill.clearall:hover { background:var(--rose); color:var(--graphite); }
  .net-pills .fpill.clearall:hover .x { background:var(--graphite); color:var(--rose); }

  /* ---------- popovers ---------- */
  .net-pop {
    position:absolute; z-index:30; top:56px; max-height:min(430px, 62vh); overflow:auto; width:340px;
    background:var(--sand); border:1px solid var(--rule); border-radius:12px; padding:18px;
    box-shadow:0 20px 50px rgba(0,0,0,0.22);
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-10px) scale(.98);
    transition:opacity .4s cubic-bezier(.22,.9,.26,1), transform .4s cubic-bezier(.22,.9,.26,1), visibility 0s linear .4s;
  }
  html[data-theme="blue"] .net-pop, html[data-theme="dark"] .net-pop { background:var(--graphite); }
  .net-pop.open { opacity:1; visibility:visible; pointer-events:auto; transform:none; transition-delay:0s; }
  .net-pop h5 { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--klein); margin:14px 0 8px; }
  .net-pop h5 i, .fpill i { text-transform:none; font-style:normal; }
  html[data-theme="blue"] .net-pop h5, html[data-theme="dark"] .net-pop h5 { color:var(--rose); }
  .net-pop h5:first-child { margin-top:0; }
  .ychips { display:flex; flex-wrap:wrap; gap:6px; }
  .ychip {
    font-family:'IBM Plex Mono',monospace; font-size:10px; padding:5px 9px; border-radius:14px;
    border:1px solid var(--rule); background:transparent; color:var(--ink); cursor:pointer;
    transition:all .3s cubic-bezier(.22,.9,.26,1);
  }
  .ychip:hover { transform:translateY(-1px); }
  .ychip:hover { border-color:var(--klein); }
  .ychip.on { background:var(--klein); border-color:var(--klein); color:var(--sand); }
  html[data-theme="blue"] .ychip.on, html[data-theme="dark"] .ychip.on { background:var(--sand); border-color:var(--sand); color:var(--graphite); }
  .ychip .dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; vertical-align:1px; }

  /* ---------- HUD ---------- */
  .net-stats {
    position:absolute; left:18px; bottom:16px; z-index:15; font-family:'IBM Plex Mono',monospace;
    font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-soft); pointer-events:none;
  }
  .net-zoom { position:absolute; right:18px; bottom:16px; z-index:15; display:flex; gap:8px; }
  .net-zoom button {
    width:34px; height:34px; border-radius:50%; border:1px solid var(--rule); background:transparent; color:var(--ink);
    font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .net-zoom button { transition:all .3s cubic-bezier(.22,.9,.26,1); }
  .net-zoom button:hover { border-color:var(--klein); color:var(--klein); transform:scale(1.14); }
  .net-rail { position:absolute; left:18px; top:auto; bottom:96px; z-index:16; width:190px; display:flex; flex-direction:column; gap:18px; pointer-events:none; }
  .net-searchwrap { position:relative; display:inline-flex; align-items:center; color:var(--ink); }
  .net-searchwrap svg { position:absolute; left:13px; width:13px; height:13px; opacity:.55; pointer-events:none; }
  .net-legend {
    font-family:'IBM Plex Mono',monospace; font-size:9px;
    letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-soft); text-align:left; pointer-events:none; line-height:2.1;
  }
  .net-legend .sw { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:8px; vertical-align:0; }
  .net-legend .rg { display:inline-block; width:10px; height:10px; border-radius:50%; border:2px solid var(--klein); margin-left:8px; vertical-align:-1px; }

  /* ---------- timelapse ---------- */
  .net-time {
    position:absolute; left:50%; transform:translateX(-50%); bottom:14px; z-index:16;
    display:flex; align-items:center; gap:12px; padding:9px 16px;
    border:1px solid var(--rule); border-radius:24px; background:var(--sand);
    box-shadow:0 8px 26px rgba(0,0,0,0.14);
  }
  html[data-theme="blue"] .net-time, html[data-theme="dark"] .net-time { background:var(--graphite); }
  .net-time input[type="range"] { width:min(300px, 38vw); accent-color:var(--klein); }
  html[data-theme="blue"] .net-time input[type="range"], html[data-theme="dark"] .net-time input[type="range"] { accent-color:var(--rose); }
  .net-time #tl-play {
    width:30px; height:30px; border-radius:50%; border:1px solid var(--rule); background:transparent;
    color:var(--ink); cursor:pointer; font-size:11px; flex:none;
  }
  .net-time #tl-play:hover { border-color:var(--klein); color:var(--klein); }
  .net-time #tl-year { font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:2px; color:var(--ink); min-width:46px; text-align:center; }
  .fdepth button { background:none; border:none; cursor:pointer; font:inherit; letter-spacing:inherit; padding:0 3px; color:var(--ink-soft); }
  .fdepth button.on { color:var(--klein); text-decoration:underline; }
  html[data-theme="blue"] .fdepth button.on, html[data-theme="dark"] .fdepth button.on { color:var(--rose); }

  /* ---------- onboarding: auth + enrichment ---------- */
  .btn-auth {
    display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
    padding:12px; margin-bottom:10px; border:1px solid var(--rule); border-radius:8px;
    background:transparent; color:var(--ink);
    font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:500; cursor:pointer;
    transition:border-color .2s;
  }
  .btn-auth:hover { border-color:var(--klein); }
  html[data-theme="blue"] .btn-auth:hover, html[data-theme="dark"] .btn-auth:hover { border-color:var(--rose); }
  .ba-ic {
    width:22px; height:22px; border-radius:50%; background:var(--klein); color:var(--sand);
    font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none;
  }
  .en-div { display:flex; align-items:center; gap:12px; margin:18px 0 14px; }
  .en-div::before, .en-div::after { content:''; flex:1; height:1px; background:var(--rule); }
  .en-div span { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-soft); }
  .en-card { border:1px solid var(--rule); border-radius:10px; padding:14px 16px; margin-bottom:12px; }
  .en-head { display:flex; justify-content:space-between; align-items:center; gap:14px; }
  .en-name { font-family:'Marcellus',serif; font-size:16px; }
  .en-desc { font-size:12.5px; color:var(--ink-soft); margin-top:2px; max-width:330px; }
  .en-found { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:1.2px; text-transform:uppercase; color:var(--ink-soft); margin:12px 0 8px; }
  .d-idrow { display:flex; align-items:center; gap:14px; margin:8px 0 2px; }
  .d-idrow h3 { margin:0; }
  .d-avatar { width:54px; height:54px; border-radius:50%; object-fit:cover; flex:none; border:1.5px solid var(--rule); }
  .pill.zg { background:var(--klein); color:var(--sand); border:none; }
  html[data-theme="blue"] .pill.zg, html[data-theme="dark"] .pill.zg { background:var(--sand); color:var(--graphite); }
  .pend { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--rose); white-space:nowrap; }

  /* ---------- ask the map ---------- */
  .net-chat {
    position:absolute; left:18px; right:auto; top:116px; width:280px; z-index:18;
    background:var(--sand); border:1px solid var(--rule); border-radius:12px;
    box-shadow:0 14px 38px rgba(0,0,0,0.14); overflow:hidden;
    display:flex; flex-direction:column; max-height:min(46%, 380px);
  }
  html[data-theme="blue"] .net-chat, html[data-theme="dark"] .net-chat { background:var(--graphite); }
  .nc-head {
    display:flex; justify-content:space-between; align-items:center; width:100%; gap:10px;
    font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:1.4px; text-transform:uppercase;
    color:var(--klein); background:none; border:none; padding:12px 14px; cursor:pointer; flex:none;
    text-align:left; white-space:nowrap;
  }
  html[data-theme="blue"] .nc-head, html[data-theme="dark"] .nc-head { color:var(--rose); }
  .nc-head b { color:var(--ink-soft); font-weight:400; }
  .nc-body { animation:riseIn .45s cubic-bezier(.22,.9,.26,1) backwards; }
  @keyframes riseIn { from { opacity:0; transform:translateY(8px); } }
  .net-chat.closed .nc-body { display:none; }
  .net-chat.closed { max-height:none; }
  .nc-body { display:flex; flex-direction:column; min-height:0; border-top:1px solid var(--rule); }
  .nc-log { overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column; gap:8px; min-height:60px; }
  .nc-m { font-size:12.5px; line-height:1.5; max-width:95%; }
  .nc-m.sys { color:var(--ink-soft); }
  .nc-m.usr {
    align-self:flex-end; background:var(--klein); color:var(--sand);
    padding:6px 11px; border-radius:12px 12px 2px 12px;
  }
  html[data-theme="blue"] .nc-m.usr, html[data-theme="dark"] .nc-m.usr { background:var(--sand); color:var(--graphite); }
  .og-badge {
    display:inline-flex; align-items:center; gap:7px; font-family:'IBM Plex Mono',monospace; font-size:9px;
    letter-spacing:2px; text-transform:uppercase; color:var(--rose); border:1px solid var(--rose);
    border-radius:14px; padding:5px 11px; margin:10px 0 4px;
  }
  .ws .og-k { color:var(--rose); margin-top:16px; display:inline-block; }
  .nc-mbtns { display:flex; gap:6px; margin-top:9px; flex-wrap:wrap; }
  .nc-mbtns button {
    font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:1px; text-transform:uppercase;
    padding:6px 12px; border-radius:14px; border:1px solid var(--rule); background:transparent; color:var(--ink);
    cursor:pointer; transition:all .3s cubic-bezier(.22,.9,.26,1);
  }
  .nc-mbtns button:hover { border-color:var(--rose); color:var(--rose); transform:translateY(-1px); }
  .nc-sugs { display:flex; flex-wrap:wrap; gap:6px; padding:2px 14px 10px; flex:none; }
  .nc-sugs button { text-align:left; }
  .nc-sugs button {
    font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:0.5px;
    padding:5px 10px; border-radius:12px; border:1px solid var(--rule);
    background:transparent; color:var(--ink-soft); cursor:pointer; transition:border-color .15s, color .15s;
  }
  .nc-sugs button:hover { border-color:var(--klein); color:var(--klein); }
  html[data-theme="blue"] .nc-sugs button:hover, html[data-theme="dark"] .nc-sugs button:hover { border-color:var(--rose); color:var(--rose); }
  .nc-head .nc-right { display:flex; align-items:center; gap:10px; }
  #nc-mode { font-style:normal; font-size:8.5px; letter-spacing:1px; color:var(--ink-soft); text-transform:none; }
  .nc-think { animation:nc-pulse 1.2s ease-in-out infinite; }
  @keyframes nc-pulse { 50% { opacity:.3; } }
  .nc-row {
    display:flex; align-items:center; flex:none;
    margin:8px 12px 12px; padding:4px 4px 4px 14px;
    border:1.5px solid var(--rule); border-radius:14px;
    transition:border-color .2s, box-shadow .2s;
  }
  .nc-row:focus-within { border-color:var(--klein); box-shadow:0 0 0 3px rgba(0,47,167,0.08); }
  html[data-theme="blue"] .nc-row:focus-within, html[data-theme="dark"] .nc-row:focus-within { border-color:var(--rose); box-shadow:0 0 0 3px rgba(200,154,150,0.12); }
  .nc-row input {
    flex:1; border:none; background:transparent; outline:none; padding:9px 8px 9px 0; min-width:0;
    font-family:'Alegreya Sans',sans-serif; font-size:14px; color:var(--ink);
  }
  .nc-row input::placeholder { color:var(--ink-soft); font-size:13.5px; letter-spacing:0; text-transform:none; }
  .nc-row button {
    width:30px; height:30px; border-radius:50%; border:none; flex:none;
    background:var(--klein); color:var(--sand); font-size:14px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:background .2s, transform .15s;
  }
  .nc-row button:hover { background:var(--rose); transform:scale(1.08); }
  html[data-theme="blue"] .nc-row button, html[data-theme="dark"] .nc-row button { background:var(--sand); color:var(--graphite); }
  .net-hint {
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:60;
    background:rgba(18,20,23,0.85); color:#F5F1E8; font-family:'IBM Plex Mono',monospace;
    font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; padding:12px 22px; border-radius:24px;
    opacity:0; pointer-events:none; transition:opacity .3s;
  }
  .net-hint.on { opacity:1; }

  /* ---------- my constellation ---------- */
  .wrapx { position:fixed; inset:0; z-index:950; background:#121417; overflow-y:auto; display:none; scroll-behavior:smooth; }
  .wrapx.open { display:block; }
  .ws { display:flex; flex-direction:column; align-items:center; text-align:center; padding:96px 24px; position:relative; color:#F5F1E8; }
  .ws.hero { min-height:92vh; justify-content:center; background:linear-gradient(#002FA7 82%, #121417); }
  .ws.hero img { width:104px; height:104px; border-radius:50%; object-fit:cover; border:3px solid #F5F1E8; margin:26px 0 18px; box-shadow:0 10px 40px rgba(0,0,0,.35); }
  .ws.hero h1 { font-family:'Marcellus',serif; font-size:clamp(34px,6vw,64px); font-weight:400; line-height:1.05; }
  .ws.last { padding:120px 24px 140px; }
  .ws .k { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:3px; text-transform:uppercase; opacity:.75; }
  .ws .big { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(84px,17vw,180px); line-height:.9; letter-spacing:-2px; color:#F5F1E8; }
  .ws .big.rose { color:#C89A96; }
  .ws h2 { font-family:'Marcellus',serif; font-size:clamp(22px,3.6vw,40px); text-transform:uppercase; margin:16px 0 6px; line-height:1.1; font-weight:400; max-width:640px; }
  .ws .sub { font-family:'Alegreya Sans',sans-serif; font-size:16.5px; max-width:520px; opacity:.85; line-height:1.6; }
  .ws .sub b { color:#C89A96; font-weight:600; }
  .ws .cue { font-size:26px; margin-top:44px; opacity:.7; animation:wsCue 1.8s ease-in-out infinite; }
  @keyframes wsCue { 0%,100% { transform:translateY(0); } 50% { transform:translateY(9px); } }
  .ws .rowlist { margin-top:34px; width:min(430px,86vw); text-align:left; }
  .ws .rowlist .r { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(245,241,232,.18); padding:11px 2px; font-size:15px; font-family:'Alegreya Sans',sans-serif; }
  .ws .rowlist .rr { display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; }
  .ws .bar { display:inline-block; height:8px; background:#F5F1E8; border-radius:4px; width:0; transition:width 1.1s cubic-bezier(.2,.7,.2,1) .35s; }
  .ws .bar.rosebar { background:#C89A96; }
  .ws.in .bar { width:var(--w); }
  .ws .chips { display:flex; flex-wrap:wrap; gap:9px; justify-content:center; max-width:460px; margin-top:18px; }
  .ws .chip { font-family:'Space Grotesk',sans-serif; font-size:12.5px; padding:7px 14px; border:1px solid rgba(245,241,232,.4); border-radius:999px; opacity:0; transform:scale(.6); transition:.5s cubic-bezier(.2,.9,.3,1.3); }
  .ws.in .chip { opacity:1; transform:scale(1); }
  .ws .rev { opacity:0; transform:translateY(26px); transition:opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
  .ws.in .rev { opacity:1; transform:none; }
  .spine { position:relative; }
  .spine::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:1px; background:linear-gradient(transparent, rgba(245,241,232,.22) 4%, rgba(245,241,232,.22) 96%, transparent); }
  .spine .ws { padding:110px 24px; }
  .sdot { width:9px; height:9px; border-radius:50%; background:#C89A96; margin-bottom:40px; box-shadow:0 0 0 6px rgba(200,154,150,.14); position:relative; z-index:1; }
  .wmap { width:min(360px,78vw); margin-top:30px; }
  .wmap line { stroke:#F5F1E8; stroke-opacity:.5; stroke-dasharray:160; stroke-dashoffset:160; transition:stroke-dashoffset 1.1s ease; }
  .ws.in .wmap line { stroke-dashoffset:0; }
  .wmap circle { fill:#F5F1E8; opacity:0; transition:opacity .5s ease; }
  .wmap circle.hubdot { fill:#C89A96; opacity:0; transition:opacity .6s ease .15s; }
  .ws.in .wmap circle { opacity:1; }
  .wmap text { fill:#F5F1E8; font-size:10px; font-family:'IBM Plex Mono',monospace; text-anchor:middle; opacity:0; transition:opacity .5s ease; }
  .ws.in .wmap text { opacity:.85; }
  @media (prefers-reduced-motion: reduce) {
    .ws .rev, .ws .chip, .wmap line, .wmap circle, .wmap text { transition:none; opacity:1; transform:none; stroke-dashoffset:0; }
    .ws .cue { animation:none; }
    .ws .bar { transition:none; }
  }

  /* ---------- journey ---------- */
  .journey-cap {
    position:absolute; left:50%; transform:translateX(-50%); bottom:78px; z-index:17;
    max-width:min(640px, 88vw); text-align:center; padding:14px 24px;
    background:var(--sand); border:1px solid var(--rule); border-radius:12px;
    box-shadow:0 12px 34px rgba(0,0,0,0.16);
  }
  html[data-theme="blue"] .journey-cap, html[data-theme="dark"] .journey-cap { background:var(--graphite); }
  .journey-cap .jc-year { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:22px; letter-spacing:1px; color:var(--klein); }
  html[data-theme="blue"] .journey-cap .jc-year, html[data-theme="dark"] .journey-cap .jc-year { color:var(--rose); }
  .journey-cap .jc-line { font-size:14px; color:var(--ink); margin-top:4px; line-height:1.5; }
  .o-row { display:grid; grid-template-columns:86px 1fr; gap:10px; padding:6px 0; font-size:14px; }
  .o-row .k { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-soft); padding-top:3px; }

  /* ---------- drawer ---------- */
  .net-drawer {
    position:absolute; top:0; right:0; bottom:0; width:min(380px, 92vw); z-index:40;
    background:var(--sand); border-left:1px solid var(--rule); padding:26px 26px 40px; overflow-y:auto;
    transform:translateX(102%); transition:transform .45s cubic-bezier(.22,1,.36,1);
    background-image:url('assets/noise-sand.png');
  }
  html[data-theme="blue"] .net-drawer, html[data-theme="dark"] .net-drawer { background-color:var(--graphite); background-image:none; }
  .net-drawer.open { transform:none; }
  .net-drawer .close { position:absolute; top:16px; right:18px; background:none; border:none; font-size:19px; color:var(--ink-soft); cursor:pointer; }
  .net-drawer .d-kicker { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--klein); }
  html[data-theme="blue"] .net-drawer .d-kicker, html[data-theme="dark"] .net-drawer .d-kicker { color:var(--rose); }
  .net-drawer h3 { font-family:'Marcellus',serif; font-size:27px; margin:8px 0 2px; }
  .net-drawer .d-sub { font-size:14px; color:var(--ink-soft); margin-bottom:14px; }
  .net-drawer .d-tags { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 4px; }
  .net-drawer .d-sec { margin-top:22px; padding-top:16px; border-top:1px solid var(--rule); }
  .net-drawer .d-sec h6 { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-soft); margin-bottom:10px; }
  .net-drawer .fr-row { display:flex; align-items:baseline; gap:10px; margin-bottom:9px; flex-wrap:wrap; }
  .net-drawer .fr-row .fr { font-family:'Marcellus',serif; font-size:15px; min-width:96px; }
  .net-drawer .co { display:flex; justify-content:space-between; align-items:baseline; padding:7px 0; border-bottom:1px solid var(--rule-light, rgba(0,0,0,0.06)); cursor:pointer; }
  .net-drawer .co:hover .co-n { color:var(--klein); }
  html[data-theme="blue"] .net-drawer .co:hover .co-n, html[data-theme="dark"] .net-drawer .co:hover .co-n { color:var(--rose); }
  .net-drawer .co .co-n { font-size:14.5px; }
  .net-drawer .co .co-c { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:1px; color:var(--ink-soft); }
  .net-drawer .d-actions { display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }
  .net-attendees { display:flex; flex-wrap:wrap; gap:6px; }
  .net-attendees button {
    font-size:12.5px; font-family:'Alegreya Sans',sans-serif; padding:5px 10px; border-radius:14px;
    border:1px solid var(--rule); background:transparent; color:var(--ink); cursor:pointer;
  }
  .net-attendees button:hover { border-color:var(--klein); color:var(--klein); }

  /* ---------- onboarding modal ---------- */
  .net-modal {
    position:fixed; inset:0; z-index:800; display:none; align-items:center; justify-content:center;
    background:rgba(18,20,23,0.55); backdrop-filter:blur(3px); padding:20px;
  }
  .net-modal.open { display:flex; }
  .net-modal .m-card {
    width:min(560px, 96vw); max-height:88vh; overflow-y:auto; background:var(--sand); border-radius:14px; padding:36px 38px;
    background-image:url('assets/noise-sand.png'); position:relative;
  }
  html[data-theme="blue"] .net-modal .m-card, html[data-theme="dark"] .net-modal .m-card { background-color:var(--graphite); background-image:none; border:1px solid var(--rule); }
  .net-modal .close { position:absolute; top:14px; right:18px; background:none; border:none; font-size:19px; color:var(--ink-soft); cursor:pointer; }
  .net-modal .m-step { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--klein); }
  html[data-theme="blue"] .net-modal .m-step, html[data-theme="dark"] .net-modal .m-step { color:var(--rose); }
  .net-modal h3 { font-family:'Marcellus',serif; font-size:26px; margin:10px 0 6px; }
  .net-modal p.m-note { font-size:14px; color:var(--ink-soft); margin-bottom:20px; }
  .net-modal .pane { display:none; }
  .net-modal .pane.on { display:block; }
  .net-modal .m-nav { display:flex; justify-content:space-between; align-items:center; margin-top:26px; }
  .net-modal .m-dots { display:flex; gap:6px; }
  .net-modal .m-dots i { width:6px; height:6px; border-radius:50%; background:var(--rule); }
  .net-modal .m-dots i.on { background:var(--klein); }
  html[data-theme="blue"] .net-modal .m-dots i.on, html[data-theme="dark"] .net-modal .m-dots i.on { background:var(--rose); }
  .net-modal .frgrid { margin-bottom:14px; }
  .net-modal .frgrid .fr { font-family:'Marcellus',serif; font-size:15px; margin-bottom:7px; }
  .net-modal .tagchips { display:flex; flex-wrap:wrap; gap:8px; }

  /* ---------- explainer band ---------- */
  .read-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px; }
  .read-card { border-top:2px solid var(--rose); padding:18px 4px 0; }
  .read-card h4 { font-family:'Marcellus',serif; font-size:19px; margin-bottom:8px; }
  .read-card p { font-size:14px; color:var(--ink-soft); line-height:1.6; }

  @media (max-width: 900px) {
    .net-stage { height:calc(100svh - 64px); min-height:520px; }
    .net-bar { gap:8px; padding:10px 12px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
    .net-bar::-webkit-scrollbar { display:none; }
    .net-searchwrap { flex:none; }
    #net-search { width:150px; }
    .net-legend { display:none; }
    .net-pop { left:12px !important; right:12px; width:auto; }
    .net-time { bottom:56px; width:calc(100% - 32px); justify-content:center; }
    .net-chat { width:calc(100% - 24px); left:12px; right:12px; top:auto !important; bottom:104px; max-height:44%; }
    .net-chat.closed { bottom:104px; left:auto; width:auto; }
    .journey-cap { bottom:126px; }
    .fl-hide { display:none; }
    .net-fig { bottom:64px; }
    .net-stats { bottom:14px; max-width:55%; }
    .net-drawer { width:100%; top:auto; height:62%; border-left:none; border-top:1px solid var(--rule); transform:translateY(103%); }
    .net-drawer.open { transform:none; }
    .read-grid { grid-template-columns:1fr; }
    .net-pills { top:108px; left:12px; }
  }
  /* no mixed grounds: blue theme panels are deep klein, not graphite */
  html[data-theme="blue"] .net-pop, html[data-theme="blue"] .net-time, html[data-theme="blue"] .net-chat,
  html[data-theme="blue"] .journey-cap, html[data-theme="blue"] .net-drawer,
  html[data-theme="blue"] .net-modal .m-card { background:#041F73 !important; background-image:none; }
  /* wrapped overlay obeys the theme's ground */
  html[data-theme="blue"] .wrapx { background:var(--klein, #002FA7); }
  html[data-theme="blue"] .ws.hero { background:#002FA7; }
  html[data-theme="dark"] .ws.hero { background:linear-gradient(#1B2027 82%, #121417); }