/* ReRoute — the Room.
 *
 * Visual language borrowed from primeintellect.ai and adapted: true black, one electric accent,
 * numbered ALL-CAPS section markers (01/02/03/04), monospace for every figure, hairline rules
 * instead of shadows, and a provenance block under each act that reads like a terminal. The point
 * of that language here is the same as there — it says "instrument", not "brochure", and an
 * investor reads a measured number differently when it is set in the type of a measurement.
 *
 * Seat colours are the one thing NOT chosen here: they come from ~/reroute-standard/seats.css so
 * that a colour means the same seat on this screen as on the ops dashboard.
 */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#000; --panel:#080809; --panel2:#0d0e10; --line:#1a1b1e; --line2:#2b2d32;
  --ink:#fff; --ink2:#8e9299; --ink3:#5a5e66;
  --acc:#3d7bfd; --acc2:#22d3ee; --alarm:#ff4d3d; --good:#1baf7a;
  --f:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --m:"SFMono-Regular",ui-monospace,"Roboto Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1); --easeIn:cubic-bezier(.6,0,.9,.2);
}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f);overflow:hidden;
  -webkit-font-smoothing:antialiased;letter-spacing:-.014em}
.mono{font-family:var(--m);font-variant-numeric:tabular-nums}
.stage{position:fixed;inset:0;display:flex;flex-direction:column;opacity:0;pointer-events:none;
  transition:opacity .45s var(--ease)}
.stage.on{opacity:1;pointer-events:auto}
.stage.scroll{overflow-y:auto;overflow-x:hidden}
/* the faint rule grid that sits under everything — PI's structural tell */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/ max(11.11vw,120px) 100%}
.stage>*{position:relative;z-index:1}

#wm{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.03}
#wm span{position:absolute;font-size:12px;letter-spacing:.36em;text-transform:uppercase;
  white-space:nowrap;transform:rotate(-24deg);font-family:var(--m)}

/* ── labels: 01 SHELF ──────────────────────────────────────────────────────────────────── */
.lab{font-family:var(--m);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink3);display:flex;align-items:center;gap:12px}
.lab b{color:var(--acc);font-weight:400}
.lab i{flex:1;height:1px;background:var(--line);font-style:normal;max-width:120px}

/* ── 0. the door ───────────────────────────────────────────────────────────────────────── */
#door{align-items:center;justify-content:center;text-align:center;padding:0 6vw}
#door .seal{width:76px;height:76px;border:1px solid var(--line2);display:grid;place-items:center;
  margin:0 auto 40px;position:relative;transition:transform 1s var(--easeIn),opacity .5s ease}
#door .seal::before{content:"";position:absolute;inset:-1px;border:1px solid transparent;
  border-top-color:var(--acc);animation:spin 4.5s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#door .seal b{font-family:var(--m);font-size:22px;font-weight:500;letter-spacing:.06em;color:var(--acc)}
#door h1{font-size:clamp(32px,5.4vw,74px);font-weight:600;letter-spacing:-.042em;line-height:1.02}
#door h1 em{font-style:normal;color:var(--ink3)}
#door p{margin-top:24px;color:var(--ink2);font-size:16.5px;line-height:1.62;max-width:50ch;
  margin-left:auto;margin-right:auto}
.enter{margin-top:44px;background:var(--ink);color:#000;border:0;padding:16px 34px;
  font:inherit;font-family:var(--m);font-size:12.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;transition:.3s var(--ease);display:inline-flex;
  align-items:center;gap:12px}
.enter:hover{background:var(--acc);color:#fff;gap:20px}
.enter.ghost{background:none;color:var(--ink2);border:1px solid var(--line2)}
.enter.ghost:hover{background:none;color:var(--ink);border-color:var(--acc)}
.door-tick{position:fixed;bottom:30px;left:0;right:0;text-align:center;color:var(--ink3);
  font-size:11.5px;letter-spacing:.06em;z-index:2}
.door-tick b{color:var(--ink2);font-weight:400}

/* ── 1. the wall ───────────────────────────────────────────────────────────────────────── */
#wall{padding:40px 6vw 0}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:26px;
  padding-bottom:22px;border-bottom:1px solid var(--line)}
.head h2{font-size:clamp(24px,3.4vw,42px);font-weight:600;letter-spacing:-.035em;margin-top:14px}
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(auto-fill,minmax(196px,1fr));flex:1;align-content:start;
  overflow-y:auto;margin-bottom:170px}
.tile{position:relative;aspect-ratio:16/10;border:0;background:var(--panel);cursor:pointer;
  overflow:hidden;display:grid;place-items:center;transition:background .3s,opacity .4s,transform .4s}
.tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--a);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.tile:hover{background:var(--panel2)}
.tile:hover::after{transform:none}
.tile .mark{font-size:clamp(15px,1.55vw,21px);font-weight:600;letter-spacing:-.028em;
  text-align:center;padding:0 16px;z-index:1;transition:transform .4s var(--ease)}
.tile .cat{position:absolute;top:11px;left:13px;font-family:var(--m);font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink3);z-index:1}
.tile .idx{position:absolute;top:11px;right:13px;font-family:var(--m);font-size:9.5px;color:var(--line2);z-index:1}
.tile .cnt{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-family:var(--m);
  font-size:10.5px;color:var(--ink3);opacity:0;transform:translateY(6px);transition:.35s var(--ease);z-index:1}
.tile:hover .cnt{opacity:1;transform:none}
.tile:hover .mark{transform:translateY(-8px)}
.tile.taken{opacity:.16;pointer-events:none}
.tile.flying{position:fixed;z-index:60;pointer-events:none;margin:0;border:1px solid var(--line2);
  transition:all .8s cubic-bezier(.65,0,.2,1)}

.tray{position:fixed;bottom:0;left:0;right:0;padding:22px 6vw 26px;background:#000;
  border-top:1px solid var(--line);display:flex;align-items:center;gap:1px;z-index:40}
.slot{flex:1;max-width:260px;height:70px;border:1px solid var(--line);display:flex;
  align-items:center;padding:0 18px;color:var(--ink3);font-family:var(--m);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;transition:.4s var(--ease);position:relative;
  overflow:hidden;background:var(--panel)}
.slot.full{color:var(--ink);font-family:var(--f);font-size:17px;letter-spacing:-.03em;
  text-transform:none;font-weight:600;border-color:var(--line2)}
.slot.full::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--a)}
.slot .x{position:absolute;top:7px;right:11px;font-size:15px;color:var(--ink3);cursor:pointer;
  opacity:0;transition:.2s;z-index:2}
.slot.full:hover .x{opacity:1}
.go{margin-left:auto;background:var(--ink);color:#000;border:0;padding:20px 32px;font:inherit;
  font-family:var(--m);font-weight:500;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;opacity:.22;pointer-events:none;transition:.4s var(--ease);display:flex;gap:12px}
.go.on{opacity:1;pointer-events:auto}
.go.on:hover{background:var(--acc);color:#fff;gap:20px}

/* ── 2. the dossier ────────────────────────────────────────────────────────────────────── */
.tabs{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:0;padding:0 6vw;
  background:rgba(0,0,0,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--ink3);font:inherit;
  font-size:14px;font-weight:500;padding:20px 22px;cursor:pointer;transition:.25s var(--ease);
  letter-spacing:-.02em}
.tab.on{color:var(--ink);border-bottom-color:var(--a,var(--acc))}
.tab:hover{color:var(--ink)}
.tabs .back{margin-left:auto;background:none;border:0;color:var(--ink3);font-family:var(--m);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;padding:20px 0}
.tabs .back:hover{color:var(--ink)}
.act{padding:110px 6vw 0;max-width:1240px}
.act h3{font-size:clamp(26px,3.9vw,52px);font-weight:600;letter-spacing:-.042em;line-height:1.08;
  margin:20px 0 18px;max-width:19ch}
.act h3 b{font-weight:600;color:var(--acc)}
.act h3 s{text-decoration:none;color:var(--ink3)}
.act .lede{color:var(--ink2);font-size:16.5px;line-height:1.68;max-width:64ch;margin-bottom:40px}
.act .lede b{color:var(--ink);font-weight:500}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* provenance — the terminal block. Every act says where its numbers came from. */
.prov{margin-top:26px;border:1px solid var(--line);background:var(--panel);font-family:var(--m);
  font-size:12px;color:var(--ink3);line-height:1.75}
.prov .t{display:flex;align-items:center;gap:9px;padding:9px 16px;border-bottom:1px solid var(--line);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.prov .t b{width:6px;height:6px;border-radius:50%;background:var(--good)}
.prov pre{padding:14px 16px;overflow-x:auto;white-space:pre-wrap;word-break:break-word}
.prov .k{color:var(--acc2)}

.stats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(176px,1fr))}
.stat{background:var(--panel);padding:26px 22px}
.stat .k{font-family:var(--m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:14px}
.stat .v{font-family:var(--m);font-size:clamp(25px,3vw,36px);font-weight:400;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums}
.stat .n{font-size:12px;color:var(--ink3);margin-top:10px;line-height:1.55}

.bar{display:flex;height:52px;border:1px solid var(--line)}
.band{position:relative;transition:flex-grow 1s var(--ease);min-width:2px}
.band i{position:absolute;inset:0;opacity:.5}
.band.h1 i{background-image:repeating-linear-gradient(45deg,#0000 0 5px,#0004 5px 10px)}
.band.h2 i{background-image:repeating-linear-gradient(-45deg,#0000 0 5px,#0004 5px 10px)}
.band.h3 i{background-image:repeating-linear-gradient(90deg,#0000 0 5px,#0005 5px 8px)}
.band.h4 i{background-image:radial-gradient(#0005 1.3px,#0000 1.4px);background-size:7px 7px}
.legend{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-top:0;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.legend div{background:var(--panel);padding:15px 17px;font-size:13px;color:var(--ink2);
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.legend b{width:9px;height:9px;flex:none;align-self:center}
.legend em{font-style:normal;color:var(--ink);font-family:var(--m);font-size:13px;margin-left:auto}
.legend small{width:100%;color:var(--ink3);font-family:var(--m);font-size:11px}

.rows{border:1px solid var(--line)}
.row,.rows .hdr{display:grid;grid-template-columns:1fr 128px 92px 104px;gap:16px;align-items:center;
  padding:16px 20px;border-bottom:1px solid var(--line);background:var(--panel)}
.row{opacity:0;transform:translateX(-14px);transition:.55s var(--ease)}
.row.in{opacity:1;transform:none}
.row:last-child{border-bottom:0}
.row.flag{background:linear-gradient(90deg,rgba(255,77,61,.09),var(--panel) 58%)}
.row .nm{font-size:14.5px;display:flex;align-items:center;gap:10px;min-width:0;letter-spacing:-.015em}
.row .nm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .num{text-align:right;font-family:var(--m);font-size:14px;font-variant-numeric:tabular-nums}
.row .num.dim{color:var(--ink3);font-size:12.5px}
.chip{font-family:var(--m);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 7px;border:1px solid var(--line2);color:var(--ink3);flex:none}
.chip.acc{border-color:#1e3a6e;color:var(--acc);background:rgba(61,123,253,.08)}
.chip.warn{border-color:#4a231d;color:var(--alarm);background:rgba(255,77,61,.07)}
.rows .hdr{background:#050506;font-family:var(--m);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink3);opacity:1;transform:none}
.rows .hdr div:not(:first-child){text-align:right}

/* the ledger — modelled on PI's reserved-cluster economics table */
.ledger{border:1px solid var(--line);background:var(--panel)}
.lrow{display:flex;align-items:flex-start;justify-content:space-between;gap:28px;padding:24px 26px;
  border-bottom:1px solid var(--line)}
.lrow .lbl{font-size:14.5px;color:var(--ink3);max-width:56ch;line-height:1.6}
.lrow .lbl b{color:var(--ink);font-weight:500;display:block;margin-bottom:6px;font-size:15px;
  letter-spacing:-.02em}
.lrow .amt{font-family:var(--m);font-size:clamp(19px,2.2vw,27px);font-weight:400;white-space:nowrap;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.lrow .amt.op{color:var(--ink3);font-size:17px}
.lrow.total{background:linear-gradient(100deg,rgba(61,123,253,.09),transparent 62%);border-bottom:0}
.lrow.total .amt{color:var(--acc);font-size:clamp(30px,4.4vw,54px)}
.slider{display:flex;align-items:center;gap:16px;padding:18px 26px;background:#050506;
  border-top:1px solid var(--line);font-family:var(--m);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink3);flex-wrap:wrap}
.slider input{flex:1;max-width:300px;accent-color:var(--acc);min-width:150px}
.slider .val{color:var(--acc);font-size:14px;letter-spacing:0}
.note{margin-top:16px;font-size:13px;color:var(--ink3);line-height:1.65;display:flex;
  align-items:baseline;gap:11px;flex-wrap:wrap}
.note b{color:var(--ink);font-weight:500}

/* ── 3. the vault ──────────────────────────────────────────────────────────────────────── */
#vault{align-items:center;justify-content:center;text-align:center;padding:0 6vw}
#vault .big{font-family:var(--m);font-size:clamp(38px,9.4vw,132px);font-weight:400;
  letter-spacing:-.055em;font-variant-numeric:tabular-nums;line-height:1;margin-top:24px}
#vault .cap{margin:26px auto 0;color:var(--ink2);font-size:16.5px;line-height:1.7;max-width:58ch}
#vault .cap b{color:var(--acc);font-weight:500}
#vault .strip{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  margin-top:60px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));width:min(940px,92vw)}
#vault .strip div{background:var(--panel);padding:24px 18px}
#vault .strip .v{font-size:27px;font-weight:400;font-family:var(--m);letter-spacing:-.035em}
#vault .strip .k2{font-family:var(--m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink3);margin-top:10px}
.pulse{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--alarm);
  margin-right:9px;animation:pl 1.9s ease-in-out infinite;vertical-align:middle}
@keyframes pl{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,77,61,.5)}50%{opacity:.45;box-shadow:0 0 0 8px rgba(255,77,61,0)}}

.expiry{position:fixed;top:14px;right:6vw;z-index:70;font-family:var(--m);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
@media (max-width:760px){
  body::before{display:none}
  .row,.rows .hdr{grid-template-columns:1fr 108px}
  .row .num.hide,.rows .hdr div.hide{display:none}
  .lrow{flex-direction:column;gap:10px}
  .tray{flex-wrap:wrap;gap:8px}.slot{max-width:none;height:56px}
  .act{padding-top:72px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}