/* GENESIS LABS / OUTPOST FLOOR 01
   Skin = the old genesislabproductions.com: black ground, Helvetica caps, mint headlines, sage body.
   World = the FLOOR ONE render. Nothing in the UI overlaps; panels are solid black. */

:root {
  --ground: #000;
  --mint: #B1D3BB;
  --sage: #7FA88B;
  --white: #fff;
  --rule: rgba(127, 168, 139, .32);
  --rule-strong: rgba(177, 211, 187, .6);
  --dim: #3f5446;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --bar: 56px;
  --panel: 440px;
  --gutter: 24px;
}
@media (max-width: 760px) { :root { --bar: 52px; --gutter: 16px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--ground); color: var(--sage); }
body {
  font-family: var(--sans); font-size: 14px; line-height: 1.6; text-transform: uppercase;
  -webkit-font-smoothing: antialiased; overflow: hidden; overscroll-behavior: none;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-transform: inherit; letter-spacing: inherit; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
:focus-visible { outline: 1px solid var(--mint); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- top bar (old-site nav) ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; height: var(--bar); z-index: 30;
  display: flex; align-items: center; gap: 28px; padding: 0 var(--gutter);
  background: var(--ground); border-bottom: 1px solid var(--rule);
}
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand img { height: 24px; width: auto; }
.brand .where { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--sage); white-space: nowrap; }
.nav { display: flex; gap: 34px; margin-left: auto; }
.nav button { color: var(--white); font-weight: 700; font-size: 13px; letter-spacing: .02em; padding: 6px 0; }
.nav button:hover, .nav button[aria-current="true"] { color: var(--mint); }
.apply {
  background: var(--mint); color: #000; font-size: 13px; letter-spacing: .12em; padding: 9px 18px; white-space: nowrap;
}
.apply:hover { background: var(--white); }
.menu-btn { display: none; color: var(--white); font-weight: 700; font-size: 13px; margin-left: auto; padding: 8px 0; }
@media (max-width: 980px) { .brand .where { display: none; } .nav { gap: 22px; } }
@media (max-width: 760px) {
  .nav, .top .apply { display: none; }
  .menu-btn { display: block; }
  .brand img { height: 20px; }
}
.sheet-nav {
  position: fixed; inset: var(--bar) 0 auto 0; z-index: 29; background: var(--ground);
  border-bottom: 1px solid var(--rule); display: none; flex-direction: column; padding: 8px var(--gutter) 20px;
}
.sheet-nav.open { display: flex; }
.sheet-nav button { text-align: left; color: var(--white); font-weight: 700; font-size: 15px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.sheet-nav .apply { margin-top: 18px; text-align: center; color: #000; }

/* ---------- stage / world ---------- */
.stage {
  position: fixed; inset: var(--bar) 0 0 0; overflow: hidden; touch-action: none; cursor: grab;
  background: #050605;
}
.stage.dragging { cursor: grabbing; }
.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.world .plate { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.plate-loop { position: absolute; object-fit: fill; pointer-events: none; opacity: 0; transition: opacity .6s; }
.plate-loop.on { opacity: 1; }
.plate-loop.on.sharp { opacity: 0; }
.screen { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; pointer-events: none; background: #000; opacity: .94; }
.screen > * { width: 100%; height: 100%; object-fit: cover; }
.zones { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.zone { fill: rgba(177, 211, 187, 0); stroke: none; cursor: pointer; transition: fill .2s; }
.zone.hot, .zone.active { fill: rgba(177, 211, 187, .10); stroke: var(--mint); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.zone.active { fill: rgba(177, 211, 187, .06); }

/* screen-space overlay: tags, leaders, crew */
.overlay { position: absolute; inset: 0; pointer-events: none; }
.leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.leaders line { stroke: var(--rule-strong); stroke-width: 1; }
.leaders rect { fill: var(--mint); }
.tag {
  position: absolute; left: 0; top: 0; pointer-events: auto; text-align: left; white-space: nowrap;
  background: #000; border: 1px solid var(--rule); padding: 5px 9px 6px; line-height: 1.25;
  transition: border-color .15s, opacity .2s;
}
.tag .t1 { display: flex; gap: 8px; align-items: baseline; }
.tag .num { font-family: var(--mono); font-size: 10px; color: var(--sage); letter-spacing: .08em; }
.tag .name { font-weight: 700; font-size: 12px; color: var(--white); letter-spacing: .03em; }
.tag .st { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; color: var(--sage); margin-top: 2px; }
.tag .st.live { color: var(--mint); }
.tag:hover, .tag.hot, .tag.active { border-color: var(--mint); }
.tag:hover .name, .tag.hot .name, .tag.active .name { color: var(--mint); }
.tag.hidden { visibility: hidden; opacity: 0; pointer-events: none; transition: none; }
.compact .tag { padding: 4px 7px; }
.compact .tag .st { display: none; }
.compact .tag .name { font-size: 11px; }

.crew { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 5px; transform: translate(-4px, -4px); }
.crew i { display: block; width: 8px; height: 8px; background: var(--mint); box-shadow: 0 0 0 1px #000; }
.crew b { font-family: var(--mono); font-weight: 400; font-size: 9px; letter-spacing: .12em; color: var(--mint); background: rgba(0, 0, 0, .78); padding: 0 3px; }
.crew.work i { animation: work 1.1s steps(2) infinite; }
@keyframes work { 50% { background: #000; box-shadow: 0 0 0 1px var(--mint); } }
.compact .crew b { display: none; }

/* bottom HUD: log left, controls right */
.hud { position: fixed; z-index: 20; bottom: var(--gutter); pointer-events: none; }
.log { left: var(--gutter); width: 340px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; line-height: 1.7; color: var(--sage); }
.log .clock { color: var(--mint); margin-bottom: 4px; }
.log ol { list-style: none; }
.log li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(0, 0, 0, .72); display: table; padding: 0 4px; }
.log li + li { margin-top: 2px; }
.ctrl { right: var(--gutter); display: flex; gap: 6px; pointer-events: auto; }
.ctrl button { width: 34px; height: 34px; background: #000; border: 1px solid var(--rule); color: var(--white); font-size: 15px; line-height: 1; }
.ctrl button.wide { width: auto; padding: 0 12px; font-size: 11px; letter-spacing: .12em; }
.ctrl button:hover { border-color: var(--mint); color: var(--mint); }
.hint { position: fixed; z-index: 20; left: 50%; transform: translateX(-50%); bottom: var(--gutter); font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--sage); background: rgba(0, 0, 0, .72); padding: 4px 8px; pointer-events: none; transition: opacity .6s; }
.panel-open .ctrl { right: calc(var(--panel) + var(--gutter)); }
.panel-open .hint { display: none; }
@media (max-width: 1100px) { .hint { display: none; } }
@media (max-width: 760px) {
  .log { width: auto; right: auto; bottom: calc(var(--gutter) + 50px); }
  .log ol { display: none; }
  .ctrl { bottom: calc(var(--gutter) + 50px); }
  .panel-open .ctrl { right: var(--gutter); }
}

/* mobile station bar */
.stations-btn { display: none; }
@media (max-width: 760px) {
  .stations-btn {
    display: flex; justify-content: space-between; align-items: center;
    position: fixed; z-index: 21; left: var(--gutter); right: var(--gutter); bottom: var(--gutter); height: 42px; padding: 0 14px;
    background: #000; border: 1px solid var(--rule-strong); color: var(--white); font-weight: 700; font-size: 13px;
  }
  .stations-btn span:last-child { font-family: var(--mono); font-weight: 400; font-size: 10px; color: var(--sage); letter-spacing: .12em; }
}

/* ---------- right panel (station, files, intake, origin) ---------- */
.panel {
  position: fixed; z-index: 25; top: var(--bar); right: 0; bottom: 0; width: var(--panel);
  background: var(--ground); border-left: 1px solid var(--rule);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.panel.open { transform: none; }
.p-head { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 14px; padding: 22px var(--gutter) 16px; border-bottom: 1px solid var(--rule); }
.p-num { font-weight: 200; font-size: 44px; line-height: .9; color: var(--mint); letter-spacing: -.02em; }
.p-title { font-weight: 400; font-size: 22px; line-height: 1.1; color: var(--mint); }
.p-meta { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--sage); margin-top: 6px; }
.p-close { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--white); border: 1px solid var(--rule); padding: 6px 9px; align-self: start; }
.p-close:hover { border-color: var(--mint); color: var(--mint); }
.p-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 6px var(--gutter) 40px; }
.files { list-style: none; }
.files li { border-bottom: 1px solid var(--rule); }
.file { display: grid; grid-template-columns: 112px 1fr; gap: 14px; width: 100%; text-align: left; padding: 14px 0; align-items: start; }
.file .th { width: 112px; aspect-ratio: 16 / 10; background: #0b0f0c; overflow: hidden; }
.file .th img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25); transition: filter .2s; }
.file:hover .th img { filter: none; }
.file .f-client { font-size: 11px; color: var(--sage); letter-spacing: .04em; }
.file .f-title { font-size: 15px; line-height: 1.25; color: var(--white); margin: 2px 0 4px; }
.file:hover .f-title { color: var(--mint); }
.file .f-roles { font-size: 10.5px; line-height: 1.45; color: var(--sage); }
.file .f-where { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; color: var(--dim); margin-top: 6px; }
.file .f-where b { color: var(--sage); font-weight: 400; }
.file.redacted { cursor: default; }
.file.redacted .th { background: repeating-linear-gradient(135deg, #0b0f0c 0 6px, #111812 6px 12px); display: grid; place-items: center; }
.file.redacted .th span { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; color: var(--sage); border: 1px solid var(--rule); padding: 2px 5px; background: #000; }
.file.redacted .f-title { color: var(--sage); }
.bar-redact { display: inline-block; width: 7.5em; height: .85em; background: var(--sage); vertical-align: -1px; }
.pending { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; color: #000; background: var(--sage); padding: 1px 5px; margin-left: 6px; vertical-align: 1px; }

.p-text p { font-size: 14px; line-height: 1.7; color: var(--sage); margin: 18px 0; }
.p-text h3 { font-weight: 400; font-size: 26px; color: var(--mint); margin: 22px 0 6px; }
.rows { list-style: none; margin: 16px 0 6px; }
.rows li { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.rows li span:first-child { font-size: 11px; color: var(--sage); }
.rows li span:last-child { font-size: 13px; color: var(--white); }
.trusted { display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: center; margin: 14px 0 6px; }
.trusted img { height: 38px; width: auto; filter: grayscale(1) brightness(1.8); opacity: .85; }
.label { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--sage); margin-top: 28px; }
.big-link { display: block; font-size: 18px; color: var(--mint); text-decoration: none; margin: 8px 0; word-break: break-all; text-transform: none; }
.big-link:hover { color: var(--white); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.btn-line { border: 1px solid var(--rule-strong); color: var(--white); font-size: 12px; letter-spacing: .1em; padding: 9px 14px; text-decoration: none; }
.btn-line:hover { border-color: var(--mint); color: var(--mint); }
.btn-solid { background: var(--mint); color: #000; font-size: 12px; letter-spacing: .12em; padding: 10px 16px; text-decoration: none; }
.btn-solid:hover { background: var(--white); }

@media (max-width: 760px) {
  .panel { top: auto; left: 0; width: auto; height: 76vh; border-left: 0; border-top: 1px solid var(--rule-strong); transform: translateY(100%); }
  .panel.open { transform: none; }
  .file { grid-template-columns: 92px 1fr; }
  .file .th { width: 92px; }
}

/* ---------- case file (old-site layout) ---------- */
.case {
  position: fixed; inset: 0; z-index: 50; background: var(--ground); overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden; opacity: 0; transition: opacity .25s, visibility 0s .25s;
}
.case.open { visibility: visible; opacity: 1; transition: opacity .25s; }
.c-bar {
  position: sticky; top: 0; z-index: 2; height: var(--bar); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--gutter); background: var(--ground); border-bottom: 1px solid var(--rule);
}
.c-bar button { color: var(--white); font-weight: 700; font-size: 13px; justify-self: start; }
.c-bar button:hover { color: var(--mint); }
.c-bar .c-id { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--sage); }
.c-bar .c-next { justify-self: end; }
.c-wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter) 120px; }
.c-head { display: grid; grid-template-columns: 5fr 6fr; gap: 56px; padding: 72px 0 56px; align-items: start; }
.c-head h1 { font-weight: 400; font-size: 52px; line-height: 1.02; color: var(--mint); letter-spacing: -.005em; }
.c-head .c-sub { font-size: 13px; color: var(--sage); margin-top: 10px; }
.c-head .c-mark { max-height: 130px; width: auto; margin-top: 26px; }
.c-head .c-intro p { font-size: 15px; line-height: 1.75; color: var(--sage); }
.c-head .c-intro p + p { margin-top: 18px; }
.c-roles { list-style: none; margin-top: 26px; border-top: 1px solid var(--rule); }
.c-roles li { font-size: 12px; color: var(--white); padding: 8px 0; border-bottom: 1px solid var(--rule); }
.c-specs { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.c-specs div { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.c-specs dt { font-size: 10.5px; color: var(--sage); }
.c-specs dd { font-size: 15px; color: var(--white); }
.c-price { font-weight: 200; font-size: 44px; color: var(--mint); margin-top: 20px; line-height: 1; }
.c-hero { margin-bottom: 72px; background: #050605; }
.c-hero video, .c-hero img { width: 100%; max-height: 78vh; object-fit: contain; margin: 0 auto; }
.c-sec { display: grid; grid-template-columns: 4fr 7fr; gap: 56px; padding: 56px 0; border-top: 1px solid var(--rule); }
.c-sec.wide { grid-template-columns: 1fr; gap: 28px; }
.c-sec h2 { font-weight: 400; font-size: 32px; line-height: 1.08; color: var(--mint); }
.c-sec .txt p { font-size: 14.5px; line-height: 1.75; color: var(--sage); margin-top: 22px; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-content: start; }
.wide .grid { grid-template-columns: repeat(3, 1fr); }
.grid figure { margin: 0; }
.grid figure.v { grid-column: 1 / -1; }
.grid img, .grid video { width: 100%; height: auto; background: #050605; }
.grid img { cursor: zoom-in; }
.grid figcaption { font-size: 11px; color: var(--white); margin-top: 7px; letter-spacing: .02em; }
.c-credits { border-top: 1px solid var(--rule); padding: 40px 0; }
.c-credits li { list-style: none; font-size: 12px; color: var(--white); padding: 4px 0; }
.c-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; border-top: 1px solid var(--rule); padding-top: 32px; }
.c-foot button { text-align: left; border: 1px solid var(--rule); padding: 18px; }
.c-foot button:last-child { text-align: right; }
.c-foot button:hover { border-color: var(--mint); }
.c-foot small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--sage); }
.c-foot span { display: block; font-size: 18px; color: var(--white); margin-top: 6px; }
.cta-row { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 860px) {
  .c-head, .c-sec { grid-template-columns: 1fr; gap: 28px; }
  .c-head { padding: 44px 0 36px; }
  .c-head h1 { font-size: 38px; }
  .c-sec h2 { font-size: 26px; }
  .wide .grid { grid-template-columns: repeat(2, 1fr); }
  .c-bar .c-id { display: none; }
  .c-bar { grid-template-columns: 1fr 1fr; }
}

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .96); display: none; place-items: center; padding: 64px var(--gutter); }
.lightbox.open { display: grid; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 128px); object-fit: contain; }
.lightbox button { position: absolute; color: var(--white); font-weight: 700; font-size: 13px; padding: 10px; }
.lightbox .lb-x { top: 12px; right: var(--gutter); }
.lightbox .lb-p { left: var(--gutter); top: 50%; }
.lightbox .lb-n { right: var(--gutter); top: 50%; }
.lightbox .lb-c { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; }

/* intro */
.intro { position: fixed; inset: 0; z-index: 80; background: #000; display: grid; place-items: center; transition: opacity .7s; cursor: pointer; }
.intro.gone { opacity: 0; pointer-events: none; }
.intro .in-box { width: min(640px, 86vw); }
.intro video { width: 100%; }
.intro .in-lines { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: var(--sage); margin-top: 10px; display: flex; justify-content: space-between; gap: 12px; }
.intro .in-lines span:last-child { color: var(--mint); }

@media (prefers-reduced-motion: reduce) {
  .panel, .case, .intro { transition: none; }
  .crew.work i { animation: none; }
}

/* ---------- descent: surface > slab > sublevel (T-Rex cross-section) > slab > FLOOR 01 ---------- */
.descent {
  position: fixed; inset: 0; z-index: 70; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; outline: none;
  transition: opacity .8s; display: none;
}
.descent.show { display: block; }
.descent.landed { opacity: 0; pointer-events: none; }
.descent section { position: relative; overflow: hidden; background: #000; }
.descent .d-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.d-surface { height: 100vh; height: 100svh; }
.d-surface .d-bg { object-position: 50% 70%; }
.d-title { position: absolute; left: 0; right: 0; top: 16%; display: grid; justify-items: center; gap: 10px; padding: 0 var(--gutter); }
.d-logo { width: min(560px, 82vw); mix-blend-mode: screen; }
.d-place { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; color: var(--white); text-align: center; }
.d-go {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(28px + var(--sab));
  display: grid; justify-items: center; gap: 10px; color: var(--mint); font-size: 12px; letter-spacing: .16em;
  background: rgba(0, 0, 0, .55); padding: 10px 14px 12px;
}
.d-go i { display: block; width: 1px; height: 34px; background: var(--mint); transform-origin: top; animation: d-line 1.6s ease-in-out infinite; }
@keyframes d-line { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.d-slab { display: block; width: 100%; height: auto; position: relative; z-index: 1; }
.d-sub { height: max(100vh, 64.6vw); }
@supports (height: 100svh) { .d-sub { height: max(100svh, 64.6vw); } }
.d-floor { height: 100vh; height: 100svh; background: transparent !important; }
.d-hud {
  position: fixed; z-index: 2; top: calc(var(--gutter) + var(--sat)); left: max(var(--gutter), var(--sal)); right: max(var(--gutter), var(--sar));
  display: flex; justify-content: space-between; align-items: center; pointer-events: none;
}
.d-level { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--mint); background: rgba(0, 0, 0, .6); padding: 5px 8px; }
.d-level::before { content: "LEVEL  "; color: var(--sage); }
.d-skip { pointer-events: auto; color: var(--white); font-weight: 700; font-size: 12px; letter-spacing: .04em; background: rgba(0, 0, 0, .6); border: 1px solid var(--rule); padding: 7px 10px; }
.d-skip:hover { border-color: var(--mint); color: var(--mint); }
@media (prefers-reduced-motion: reduce) { .d-go i { animation: none; } .descent { transition: none; } }

/* ---------- iOS: safe areas (notch, home bar), Safari's moving toolbar, tap behavior ---------- */
:root {
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
button, a, .tag, .file { touch-action: manipulation; }
.top { height: calc(var(--bar) + var(--sat)); padding: var(--sat) max(var(--gutter), var(--sar)) 0 max(var(--gutter), var(--sal)); }
.sheet-nav { inset: calc(var(--bar) + var(--sat)) 0 auto 0; padding-left: max(var(--gutter), var(--sal)); padding-right: max(var(--gutter), var(--sar)); }
.stage { inset: calc(var(--bar) + var(--sat)) 0 0 0; }
.panel { top: calc(var(--bar) + var(--sat)); }
.p-body { padding-bottom: calc(40px + var(--sab)); }
.hud { bottom: calc(var(--gutter) + var(--sab)); }
.log { left: max(var(--gutter), var(--sal)); }
.ctrl { right: max(var(--gutter), var(--sar)); }
.panel-open .ctrl { right: calc(var(--panel) + var(--gutter)); }
.case { -webkit-overflow-scrolling: touch; }
.c-bar { height: calc(var(--bar) + var(--sat)); padding: var(--sat) max(var(--gutter), var(--sar)) 0 max(var(--gutter), var(--sal)); }
.c-wrap { padding-bottom: calc(120px + var(--sab)); }
.lightbox { padding: calc(64px + var(--sat)) var(--gutter) calc(64px + var(--sab)); }
.lightbox .lb-x { top: calc(12px + var(--sat)); }
.lightbox .lb-c { bottom: calc(18px + var(--sab)); }
@media (max-width: 760px) {
  .panel { top: auto; height: 76vh; height: 76dvh; }
  .stations-btn { bottom: calc(var(--gutter) + var(--sab)); left: max(var(--gutter), var(--sal)); right: max(var(--gutter), var(--sar)); }
  .log { bottom: calc(var(--gutter) + 50px + var(--sab)); }
  .ctrl { bottom: calc(var(--gutter) + 50px + var(--sab)); }
  .panel-open .ctrl { right: max(var(--gutter), var(--sar)); }
}
.descent { scrollbar-width: none; }
.descent::-webkit-scrollbar { display: none; }
/* keep the T-Rex fossil (left third of the cross-section) in frame on portrait screens */
.d-sub .d-bg { object-position: 24% 62%; }
/* the logo video is mostly empty black (screen-blended away); pull the place line up under the mark so it sits on clear sky */
.d-place { margin-top: calc(min(560px, 82vw) * -0.17); }
@media (max-width: 520px) { .d-place { font-size: 10px; letter-spacing: .12em; max-width: 100%; white-space: normal; } .d-title { justify-items: center; } }

/* ---------- 7 rooms, Apple-clean pass (Oct 12 2026: "clean and intuitive and gamified") ---------- */
/* tags: one name, one dot, a count when the room holds more than one file */
.tag { display: flex; align-items: center; gap: 8px; padding: 7px 11px 7px 10px; border-color: rgba(255, 255, 255, .16); background: rgba(0, 0, 0, .86); }
.tag .name { font-size: 12.5px; letter-spacing: .04em; }
.tag .n { font-family: var(--mono); font-size: 10px; color: var(--sage); letter-spacing: .06em; }
.tag .n:empty { display: none; }
.tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); flex: none; transition: background .3s, box-shadow .3s; }
.tag.seen .dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--sage); }
.tag.live .dot { animation: live 1.4s ease-in-out infinite; }
@keyframes live { 50% { box-shadow: 0 0 0 4px rgba(177, 211, 187, .18); } }
.compact .tag { padding: 6px 9px; }
.compact .tag .n { display: none; }
.leaders line { stroke: rgba(255, 255, 255, .28); }
.leaders circle { fill: var(--mint); }
.crew i { width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .8); }
.crew.work i { animation: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .8), 0 0 0 4px rgba(177, 211, 187, .16); }

/* HUD: progress left, floor button right, nothing else */
.progress { left: max(var(--gutter), var(--sal)); display: grid; gap: 7px; pointer-events: none; }
.pg-bars { display: flex; gap: 4px; }
.pg-bars i { width: 18px; height: 3px; background: rgba(255, 255, 255, .2); transition: background .4s; }
.pg-bars i.on { background: var(--mint); }
.pg-text { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--sage); }
.pg-text span:first-child { color: var(--mint); }
.floor-btn {
  right: max(var(--gutter), var(--sar)); pointer-events: auto; background: #000; border: 1px solid var(--rule-strong);
  color: var(--white); font-weight: 700; font-size: 12px; letter-spacing: .06em; padding: 9px 14px;
  opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; visibility: hidden;
}
.floor-btn.show { opacity: 1; transform: none; visibility: visible; }
.floor-btn:hover { border-color: var(--mint); color: var(--mint); }
.panel-open .floor-btn { right: calc(var(--panel) + var(--gutter)); }
.hint { bottom: calc(var(--gutter) + var(--sab)); letter-spacing: .2em; }
.toast {
  position: fixed; z-index: 35; left: 50%; top: calc(var(--bar) + var(--sat) + 18px); transform: translate(-50%, -8px);
  background: var(--mint); color: #000; font-size: 12px; letter-spacing: .1em; padding: 10px 16px; opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s; white-space: nowrap;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 760px) {
  .progress { bottom: calc(var(--gutter) + 56px + var(--sab)); }
  .floor-btn { bottom: calc(var(--gutter) + 56px + var(--sab)); }
  .panel-open .floor-btn { display: none; }
  .hint { display: none; }
}

/* panel header: big room name, quiet meta */
.p-head { grid-template-columns: auto 1fr auto; padding: 26px var(--gutter) 18px; }
.p-num { font-size: 15px; font-weight: 400; font-family: var(--mono); letter-spacing: .1em; color: var(--sage); align-self: start; padding-top: 6px; }
.p-title { font-size: 30px; font-weight: 400; letter-spacing: -.005em; }
.p-close { border-color: rgba(255, 255, 255, .2); }

/* filter chips */
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 16px 0 6px; margin: 0 calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--sage); border: 1px solid var(--rule); padding: 7px 11px; }
.chip:hover { color: var(--white); border-color: rgba(255, 255, 255, .3); }
.chip.on { background: var(--mint); color: #000; border-color: var(--mint); }

/* cards: image first, three quiet lines */
.cards { list-style: none; display: grid; gap: 28px; padding: 18px 0 8px; }
.card[hidden] { display: none; }
.card > button { display: block; width: 100%; text-align: left; }
.c-th { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #0a0d0b; }
.c-th img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1), filter .3s; filter: saturate(.9); }
.card > button:hover .c-th img { transform: scale(1.03); filter: none; }
.c-meta { display: grid; gap: 3px; margin-top: 11px; }
.c-who { font-size: 11px; color: var(--sage); letter-spacing: .03em; }
.c-title { font-size: 17px; line-height: 1.2; color: var(--white); display: flex; justify-content: space-between; gap: 12px; }
.card > button:hover .c-title { color: var(--mint); }
.c-price { font-weight: 200; color: var(--mint); font-size: 17px; }
.c-roles { font-size: 10.5px; color: var(--sage); line-height: 1.5; }
.card.x .c-th { display: grid; place-items: center; background: repeating-linear-gradient(135deg, #0a0d0b 0 7px, #101611 7px 14px); }
.card.x .c-th span { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--sage); border: 1px solid var(--rule); background: #000; padding: 4px 8px; }
.card.x .c-title { color: var(--sage); }

/* brand rooms */
.b-hero { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-top: 18px; background: #0a0d0b; }
.b-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; margin-top: 14px; }
.b-specs div { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.b-specs dt { font-size: 10.5px; color: var(--sage); }
.b-specs dd { font-size: 14px; color: var(--white); }

/* rooms list (mobile) */
.rooms { list-style: none; padding-top: 8px; }
.room-row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; width: 100%; text-align: left; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.rr-num { font-family: var(--mono); font-size: 11px; color: var(--sage); letter-spacing: .1em; }
.rr-name { font-size: 20px; color: var(--white); }
.rr-state { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; color: #000; background: var(--mint); padding: 3px 6px; }
.room-row.seen .rr-state { background: none; color: var(--sage); border: 1px solid var(--rule); }
/* off-screen rooms: pinned to the edge, arrow points at the object */
.tag.edge { padding: 6px 10px; background: rgba(0, 0, 0, .9); }
.tag.edge .dot, .tag.edge .n { display: none; }
.tag.edge[data-dir="l"]::before { content: "\2039"; color: var(--mint); font-size: 16px; line-height: 1; margin-right: 2px; }
.tag.edge[data-dir="r"]::after { content: "\203A"; color: var(--mint); font-size: 16px; line-height: 1; margin-left: 2px; }
.tag.edge[data-dir="t"]::before { content: "\2191"; color: var(--mint); font-size: 12px; }
.tag.edge[data-dir="b"]::after { content: "\2193"; color: var(--mint); font-size: 12px; }
@media (max-width: 760px) { .progress { display: none; } }

/* brand breakdown timeline */
.shows h2 .tl-count { font-family: var(--mono); font-size: 13px; color: var(--sage); vertical-align: middle; margin-left: 8px; }
.tl { list-style: none; }
.tl-row { display: grid; grid-template-columns: 150px 1fr 220px; gap: 32px; padding: 34px 0; border-top: 1px solid var(--rule); align-items: start; }
.tl-date { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--mint); }
.tl-what h3 { font-weight: 400; font-size: 24px; line-height: 1.1; color: var(--white); }
.tl-where { font-size: 12px; color: var(--sage); margin-top: 6px; }
.tl-what p { font-size: 13.5px; line-height: 1.7; color: var(--sage); margin-top: 12px; }
.tl-credit { font-size: 11px; color: var(--white); margin-top: 10px; opacity: .8; }
.tl-vid { margin-top: 16px; }
.tl-vid video { width: 100%; background: #050605; }
.tl-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.tl-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; cursor: zoom-in; }
.tl-poster img { width: 100%; height: auto; cursor: zoom-in; background: #050605; }
@media (max-width: 860px) {
  .tl-row { grid-template-columns: 1fr; gap: 12px; padding: 26px 0; }
  .tl-poster { order: 3; max-width: 260px; }
}

/* ---------- back to the top level ---------- */
.surface-btn { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--mint); border: 1px solid var(--rule); padding: 6px 9px; white-space: nowrap; }
.surface-btn:hover { border-color: var(--mint); }
@media (max-width: 1180px) { .brand .where { display: none; } .nav { gap: 20px; } .nav button { font-size: 12px; } }
@media (max-width: 760px) { .surface-btn { display: none; } }
.overlay-open .top, .overlay-open .stage, .overlay-open .hud, .overlay-open .stations-btn { visibility: hidden; }

/* ---------- GENESIS TV ---------- */
.tv, .universe { position: fixed; inset: 0; z-index: 45; background: #000; display: none; }
.tv.open, .universe.open { display: block; }
.tv { display: none; grid-template-rows: auto 1fr auto auto; }
.tv.open { display: grid; }
.tv-top, .uv-top {
  display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2;
  padding: calc(14px + var(--sat)) max(var(--gutter), var(--sar)) 14px max(var(--gutter), var(--sal));
}
.tv-brand, .uv-brand { font-weight: 700; font-size: 14px; letter-spacing: .06em; color: var(--white); display: flex; align-items: center; gap: 10px; }
.tv-ch, #uv-num { font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .16em; color: var(--sage); }
.tv-live { width: 8px; height: 8px; border-radius: 50%; background: #e0412f; animation: live 1.6s ease-in-out infinite; }
.tv-x { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--white); border: 1px solid var(--rule); padding: 8px 11px; }
.tv-x:hover { border-color: var(--mint); color: var(--mint); }
.tv-stage { min-height: 0; display: grid; place-items: center; padding: 0 var(--gutter); }
.tv-stage video { max-width: 100%; max-height: 100%; width: auto; height: auto; background: #000; }
.tv-bar { height: 2px; background: rgba(255, 255, 255, .12); margin: 14px max(var(--gutter), var(--sal)) 0; }
.tv-bar i { display: block; height: 100%; background: var(--mint); transform-origin: left; transform: scaleX(0); }
.tv-bottom { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding: 16px max(var(--gutter), var(--sar)) calc(18px + var(--sab)) max(var(--gutter), var(--sal)); }
.tv-now { display: grid; gap: 4px; min-width: 0; }
.tv-client { font-size: 11px; color: var(--sage); }
.tv-title { font-size: 22px; color: var(--mint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-ctrl { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tv-ctrl button { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--white); border: 1px solid var(--rule); padding: 8px 10px; }
.tv-ctrl button:hover { border-color: var(--mint); color: var(--mint); }
.tv-ctrl .tv-open { background: var(--mint); color: #000; border-color: var(--mint); }
.tv-list { position: absolute; z-index: 3; right: 0; top: calc(60px + var(--sat)); bottom: calc(110px + var(--sab)); width: min(420px, 92vw); overflow-y: auto; list-style: none;
  background: #000; border-left: 1px solid var(--rule); border-top: 1px solid var(--rule); padding: 6px 0; display: none; }
.tv.list .tv-list { display: block; }
.tv-list button { display: grid; grid-template-columns: 34px 1fr; gap: 2px 8px; width: 100%; text-align: left; padding: 10px var(--gutter); border-bottom: 1px solid rgba(127, 168, 139, .14); }
.tv-list button span:nth-child(1) { font-family: var(--mono); font-size: 10px; color: var(--sage); grid-row: span 2; padding-top: 2px; }
.tv-list button span:nth-child(2) { font-size: 13px; color: var(--white); }
.tv-list button span:nth-child(3) { font-size: 10.5px; color: var(--sage); }
.tv-list li.on button span:nth-child(2) { color: var(--mint); }
@media (max-width: 760px) {
  .tv-bottom { flex-direction: column; align-items: stretch; gap: 14px; }
  .tv-title { font-size: 18px; white-space: normal; }
  .tv-ctrl { justify-content: flex-start; }
}

/* ---------- WEBSITES: universes ---------- */
.universe { overflow: hidden; touch-action: pan-x pan-y; }
#uv-stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.uv-top { position: absolute; left: 0; right: 0; top: 0; }
.uv-card {
  position: absolute; left: 50%; top: 50%; width: min(980px, 84vw); transform: translate(-50%, -52%);
  margin: 0; display: grid; gap: 20px; perspective: 1400px;
}
.uv-frame { aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid rgba(177, 211, 187, .35); background: #050605; transform: rotateX(4deg); transform-origin: 50% 100%; }
.uv-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.uv-card figcaption { display: grid; gap: 6px; }
.uv-meta { font-size: 11px; color: var(--sage); }
.uv-card h2 { font-weight: 400; font-size: clamp(26px, 4vw, 44px); line-height: 1.02; color: var(--mint); }
.uv-card p { font-size: 13px; color: var(--sage); }
.uv-url { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--white); align-self: center; text-transform: none; }
.uv-card.arrive { animation: uv-in .7s cubic-bezier(.2, .8, .2, 1) both; }
.uv-card.leave { animation: uv-out .26s ease-in both; }
.uv-card.leave-back { animation: uv-back .26s ease-in both; }
@keyframes uv-in { from { opacity: 0; transform: translate(-50%, -52%) scale(.35); filter: blur(6px); } to { opacity: 1; transform: translate(-50%, -52%) scale(1); filter: none; } }
@keyframes uv-out { to { opacity: 0; transform: translate(-50%, -52%) scale(2.2); filter: blur(4px); } }
@keyframes uv-back { to { opacity: 0; transform: translate(-50%, -52%) scale(.3); filter: blur(4px); } }
.uv-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 46px; height: 46px; border: 1px solid var(--rule); background: rgba(0, 0, 0, .7); color: var(--mint); font-size: 26px; line-height: 1; }
.uv-arrow:hover { border-color: var(--mint); }
.uv-prev { left: max(var(--gutter), var(--sal)); }
.uv-next { right: max(var(--gutter), var(--sar)); }
.uv-dots { position: absolute; left: 0; right: 0; bottom: calc(20px + var(--sab)); display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 0 var(--gutter); }
.uv-dots button { width: 28px; height: 3px; background: rgba(255, 255, 255, .22); position: relative; }
.uv-dots button.on { background: var(--mint); }
.uv-dots button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 760px) {
  .uv-card { width: 88vw; transform: translate(-50%, -55%); }
  .uv-arrow { top: auto; bottom: calc(52px + var(--sab)); transform: none; }
  @keyframes uv-in { from { opacity: 0; transform: translate(-50%, -55%) scale(.35); } to { opacity: 1; transform: translate(-50%, -55%) scale(1); } }
}
@media (prefers-reduced-motion: reduce) { .uv-card.arrive, .uv-card.leave, .uv-card.leave-back { animation: none; } }

/* store cards with a buy button; discord */
.card > a { display: block; text-decoration: none; }
.card > a:hover .c-title { color: var(--mint); }
.card .btn-row { margin: 12px 0 0; }
.discord h3 { font-size: 30px; }
.tl-era { list-style: none; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--mint); padding: 34px 0 6px; border-top: 1px solid var(--rule-strong); }
.tl-what h3 .pending { font-size: 9px; vertical-align: middle; }

/* ---------- GENESIS TV chamber ---------- */
.tv.chamber { display: none; }
.tv.chamber.open { display: block; }
.tv .ch-host { display: none; }
.tv.chamber .ch-host { display: block; position: absolute; inset: 0; }
.tv.chamber .ch-host canvas { display: block; cursor: grab; }
.tv.chamber .tv-top { position: absolute; left: 0; right: 0; top: 0; }
.tv.chamber .tv-stage, .tv.chamber .tv-bar, .tv.chamber .tv-bottom, .tv.chamber .tv-list { display: none; }
.tv:not(.chamber) .ch-hint, .tv:not(.chamber) .ch-hover, .tv:not(.chamber) .ch-focus { display: none; }
.ch-hint { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(22px + var(--sab)); font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--sage); background: rgba(0, 0, 0, .7); padding: 5px 9px; pointer-events: none; transition: opacity .6s; }
.ch-hover { position: absolute; left: max(var(--gutter), var(--sal)); bottom: calc(22px + var(--sab)); pointer-events: none; display: grid; gap: 3px; max-width: min(520px, 60vw); }
.ch-hover:empty { display: none; }
.ch-hover span:first-child { font-size: 11px; color: var(--sage); }
.ch-hover span:last-child { font-size: 18px; color: var(--mint); background: rgba(0, 0, 0, .6); }
.ch-focus { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 16px; pointer-events: none; opacity: 0; transition: opacity .35s; }
.ch-focus.on { opacity: 1; pointer-events: auto; background: rgba(0, 0, 0, .35); }
.ch-frame { width: min(86vw, calc(62vh * 16 / 9)); aspect-ratio: 16 / 9; background: #000; border: 1px solid rgba(177, 211, 187, .35); }
.ch-frame video { width: 100%; height: 100%; object-fit: contain; display: block; }
.ch-cap { width: min(86vw, calc(62vh * 16 / 9)); display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.ch-meta { display: grid; gap: 3px; min-width: 0; }
.ch-client { font-size: 11px; color: var(--sage); }
.ch-title { font-size: 20px; color: var(--mint); }
.ch-btns { display: flex; gap: 8px; }
@media (max-width: 760px) { .ch-frame, .ch-cap { width: 92vw; } .ch-title { font-size: 16px; } .ch-hover { display: none; } }

/* ---------- the floor's own web: links between rooms with signals running along them ---------- */
.bonds { pointer-events: none; }
.bond { fill: none; stroke: rgba(177, 211, 187, .14); stroke-width: 1.1px; vector-effect: non-scaling-stroke; transition: stroke .25s; }
.bond.hot { stroke: rgba(177, 211, 187, .55); }
.bond-sig { fill: none; stroke: var(--mint); stroke-width: 2px; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .75;
  stroke-dasharray: 3 140; animation: bond-sig 6s linear infinite; }
.bond-sig.rev { animation-direction: reverse; }
.bond-sig.hot { opacity: 1; stroke-width: 2.6px; }
@keyframes bond-sig { from { stroke-dashoffset: 143; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .bond-sig { display: none; } }

/* ---------- NETWORK button ---------- */
.net-btn { display: inline-flex; align-items: center; gap: 7px; }
.net-btn i, .net-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 rgba(177, 211, 187, .6); animation: net-pulse 2.2s ease-out infinite; }
@keyframes net-pulse { 0% { box-shadow: 0 0 0 0 rgba(177, 211, 187, .55); } 100% { box-shadow: 0 0 0 9px rgba(177, 211, 187, 0); } }
@media (prefers-reduced-motion: reduce) { .net-btn i, .net-pulse { animation: none; } }

/* ---------- filter dock (GENESIS TV wall and THE NETWORK) ---------- */
.dock {
  position: absolute; z-index: 3; top: calc(58px + var(--sat)); left: max(var(--gutter), var(--sal));
  width: min(420px, calc(100vw - 2 * var(--gutter))); background: rgba(0, 0, 0, .86); border: 1px solid var(--rule);
}
.dock.open { width: min(720px, calc(100vw - 2 * var(--gutter))); }
.tv:not(.chamber) .dock { display: none; }
.dk-bar { display: flex; align-items: center; gap: 12px; padding: 7px 10px; min-height: 42px; }
.dk-toggle { flex: none; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--white); border: 1px solid var(--rule); padding: 6px 10px; }
.dk-toggle:hover, .dock.open .dk-toggle { border-color: var(--mint); color: var(--mint); }
.dk-n { color: var(--mint); }
.dk-sum { flex: 1; min-width: 0; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock:not(.active) .dk-sum { color: var(--sage); }
.dk-count { flex: none; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--mint); }
.dk-tray { display: none; padding: 2px 10px 10px; border-top: 1px solid rgba(127, 168, 139, .16); }
.dock.open .dk-tray { display: block; }
.dk-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 8px; padding-top: 8px; }
.dk-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; color: var(--sage); }
.dk-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 1px; }
.dk-chips::-webkit-scrollbar { display: none; }
.dk-chips .chip i, .chip i { font-style: normal; margin-left: 7px; opacity: .55; }
.chip:disabled { opacity: .28; cursor: default; }
.dk-search { display: flex; gap: 6px; min-width: 0; }
.dk-search input {
  flex: 1; min-width: 0; max-width: 340px; background: #000; border: 1px solid var(--rule); color: var(--white); border-radius: 0;
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 7px 10px; -webkit-appearance: none; appearance: none;
}
.dk-search input:focus { outline: none; border-color: var(--mint); }
.dk-search input::placeholder { color: var(--dim); }
@media (max-width: 760px) {
  .dock { top: calc(54px + var(--sat)); }
  .dk-search input { font-size: 16px; padding: 6px 9px; }
  .dk-row { grid-template-columns: 52px minmax(0, 1fr); }
}

/* ---------- THE NETWORK ---------- */
.net { position: fixed; inset: 0; z-index: 45; background: #000; display: none; overflow: hidden; }
.net.open { display: block; }
.net-host { position: absolute; inset: 0; }
.net-host canvas { display: block; cursor: grab; }
.net-top { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
.net-top > * { pointer-events: auto; }
.net-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.net-pulse { display: inline-block; }
.net-hover { font-size: 15px; color: var(--mint); background: rgba(0, 0, 0, .6); padding: 2px 4px; }
.net-card {
  position: absolute; z-index: 4; right: max(var(--gutter), var(--sar)); top: calc(64px + var(--sat)); bottom: calc(var(--gutter) + var(--sab));
  width: 380px; background: #000; border: 1px solid var(--rule); overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(calc(100% + 40px)); transition: transform .38s cubic-bezier(.2, .8, .2, 1); visibility: hidden;
}
.net-card.on { transform: none; visibility: visible; }
.nc-media { aspect-ratio: 16 / 9; background: #050705; border-bottom: 1px solid var(--rule); }
.nc-media video, .nc-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nc-body { padding: 18px 18px 22px; }
.nc-meta { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--sage); padding-right: 64px; }
.nc-title { font-weight: 400; font-size: 24px; line-height: 1.12; color: var(--mint); margin-top: 8px; }
.nc-title small { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; color: var(--sage); margin-top: 6px; }
.nc-body p { font-size: 12.5px; line-height: 1.6; color: var(--sage); margin-top: 10px; }
.nc-body .btn-row { margin: 16px 0 4px; }
.nc-body .btn-line i, .c-net .btn-line i { font-style: normal; color: var(--mint); margin-left: 6px; }
.nc-body .label { margin-top: 18px; }
.nc-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.nc-link { text-align: left; font-size: 11px; line-height: 1.25; color: var(--white); border: 1px solid var(--rule); padding: 6px 9px; max-width: 100%; }
.nc-link span { display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; color: var(--sage); margin-bottom: 2px; }
.nc-link.far { border-style: dashed; }
.nc-link:hover { border-color: var(--mint); color: var(--mint); }
.nc-x { position: absolute; top: 10px; right: 10px; z-index: 2; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--white); background: rgba(0, 0, 0, .78); border: 1px solid var(--rule); padding: 6px 9px; }
.nc-x:hover { border-color: var(--mint); color: var(--mint); }
.nc-seen { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; color: var(--mint); border: 1px solid var(--mint); padding: 0 5px; margin-left: 6px; }
.c-net .nc-links { margin-top: 22px; }
@media (max-width: 760px) {
  .net-actions .tv-x:not(#net-close) { display: none; }
  .net-card {
    left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 58dvh; border-width: 1px 0 0;
    padding-bottom: var(--sab); transform: translateY(calc(100% + 20px));
  }
  .nc-media { aspect-ratio: 21 / 9; }
  .nc-title { font-size: 20px; }
}
.net .ch-hint { bottom: calc(22px + var(--sab)); }

/* ---------- the detail dial: SIMPLE to ADVANCED ---------- */
.net-level {
  position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); bottom: calc(18px + var(--sab));
  display: flex; align-items: center; gap: 14px; background: rgba(0, 0, 0, .86); border: 1px solid var(--rule); padding: 8px 14px 6px;
}
.nl-end { font-family: var(--mono); font-size: 9px; letter-spacing: .18em; color: var(--sage); padding-bottom: 14px; }
.nl-track { display: flex; position: relative; }
.nl-track::before { content: ''; position: absolute; left: 34px; right: 34px; top: 7px; height: 1px; background: var(--rule); }
.nl-track button { position: relative; width: 84px; display: grid; justify-items: center; gap: 6px; padding: 0; }
.nl-track i { width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--rule-strong); background: #000; transition: background .2s, border-color .2s, transform .2s; }
.nl-track span { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; color: var(--sage); white-space: nowrap; }
.nl-track button.past i { background: var(--dim); border-color: var(--sage); }
.nl-track button.on i { background: var(--mint); border-color: var(--mint); transform: scale(1.15); }
.nl-track button.on span { color: var(--mint); }
.nl-track button:hover i { border-color: var(--mint); }
.net .ch-hint { bottom: calc(86px + var(--sab)); }
.net-hover { bottom: calc(86px + var(--sab)) !important; }
@media (max-width: 760px) {
  .net-level { gap: 8px; padding: 8px 10px 6px; width: calc(100vw - 2 * var(--gutter)); justify-content: space-between; }
  .nl-track button { width: 62px; }
  .nl-track span { font-size: 8px; letter-spacing: .1em; }
  .nl-end { display: none; }
}
.net-top .tv-brand { white-space: nowrap; }
@media (max-width: 560px) { #net-count { display: none; } }
.tv-top .tv-brand { white-space: nowrap; }
@media (max-width: 560px) { .tv.chamber #tv-ch { display: none; } }

/* ---------- CURRENT WORK (the last 90 days, shown on entry) ---------- */
.now {
  position: fixed; z-index: 27; left: 0; right: 0; bottom: 0; background: #000; border-top: 1px solid var(--rule);
  padding: 16px 0 calc(18px + var(--sab)); transform: translateY(105%); transition: transform .45s cubic-bezier(.2, .8, .2, 1); visibility: hidden;
}
.now.open { transform: none; visibility: visible; }
.now-open .hint, .now-open .stations-btn, .now-open .hud { visibility: hidden; }
.now-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 max(var(--gutter), var(--sar)) 12px max(var(--gutter), var(--sal)); }
.now-title { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; letter-spacing: .06em; color: var(--white); white-space: nowrap; }
.now-count { font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .16em; color: var(--sage); }
.now-actions { display: flex; gap: 6px; }
.now-strip { list-style: none; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 max(var(--gutter), var(--sar)) 0 max(var(--gutter), var(--sal)); padding: 0 max(var(--gutter), var(--sar)) 4px max(var(--gutter), var(--sal)); scrollbar-width: none; }
.now-strip::-webkit-scrollbar { display: none; }
.now-card { flex: none; width: 280px; scroll-snap-align: start; display: grid; align-content: start; gap: 8px; }
.now-card.feat { width: min(560px, 82vw); }
.now-card > button { display: grid; gap: 8px; text-align: left; width: 100%; }
.now-m { display: block; aspect-ratio: 16 / 9; background: #050705; border: 1px solid var(--rule); overflow: hidden; }
.now-m video, .now-m img { width: 100%; height: 100%; object-fit: cover; display: block; }
.now-card > button:hover .now-m { border-color: var(--mint); }
.now-meta { display: grid; gap: 3px; }
.now-meta > span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; color: var(--sage); }
.now-meta b { font-weight: 400; font-size: 17px; line-height: 1.15; color: var(--mint); }
.now-card.feat .now-meta b { font-size: 26px; }
.now-meta small { font-size: 10.5px; color: var(--sage); line-height: 1.4; }
.now-up { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; color: #000; background: var(--mint); padding: 1px 5px; margin-left: 6px; }
.now-bd { justify-self: start; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: #000; background: var(--mint); padding: 8px 11px; }
.now-bd:hover { background: var(--white); }
.now-card.x .now-m { display: grid; place-items: center; background: repeating-linear-gradient(135deg, #070a08 0 10px, #0b100c 10px 20px); }
.now-redact { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--sage); border: 1px solid var(--rule); padding: 3px 7px; background: #000; }
@media (max-width: 760px) {
  .now { padding-top: 12px; }
  .now-head { flex-wrap: wrap; }
  .now-actions .tv-x:first-child { display: none; }
  .now-card { width: 220px; }
  .now-card.feat { width: 84vw; }
  .now-card.feat .now-meta b { font-size: 21px; }
}

/* ---------- BREAKDOWN (every case file) ---------- */
.bd .bd-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; margin-top: 22px; }
.bd-roles { list-style: none; margin-top: 10px; }
.bd-roles li { display: grid; grid-template-columns: 34px 1fr; align-items: baseline; font-size: 15px; color: var(--white); padding: 9px 0; border-bottom: 1px solid var(--rule); }
.bd-roles span { font-family: var(--mono); font-size: 10px; color: var(--mint); letter-spacing: .1em; }
.bd-facts { margin-top: 10px; }
.bd-facts div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.bd-facts dt { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--sage); padding-top: 3px; }
.bd-facts dd { font-size: 14px; color: var(--white); }
.bd > .label { margin-top: 34px; }
.bd-steps { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px 14px; margin-top: 14px; }
.bd-step .bd-m { aspect-ratio: 16 / 10; background: #050705; border: 1px solid var(--rule); overflow: hidden; }
.bd-step.tall .bd-m { aspect-ratio: 4 / 5; }
.bd-step video, .bd-step img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bd-cap { display: grid; grid-template-columns: 30px 1fr; gap: 2px 6px; margin-top: 8px; }
.bd-cap span { font-family: var(--mono); font-size: 10px; color: var(--mint); grid-row: span 2; padding-top: 2px; }
.bd-cap b { font-weight: 400; font-size: 13px; color: var(--white); }
.bd-cap small { font-size: 10.5px; color: var(--sage); }
@media (max-width: 760px) { .bd .bd-grid { grid-template-columns: 1fr; } .bd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; } .bd-facts div { grid-template-columns: 92px 1fr; } }
.me h3 { margin-top: 10px; }
.me-sub { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--sage); margin-top: 4px; }
.me p { margin: 14px 0; }