/* Layout: a single surveillance console built in code on a 556×777 unit grid
   (measured from the reference), centred in a dark control room, with a
   sightings log below. Committed single dark look: cool top key light,
   CRT phosphor blue, backlit amber/red labels. */
:root {
  --void: #05070b;
  --steel-hi: #b3bcc7;
  --steel: #8792a0;
  --steel-lo: #5a6470;
  --steel-dark: #2b3139;
  --phosphor: #cfe4ff;
  --phosphor-dim: #7f9bbd;
  --amber: #ffb347;
  --alarm: #ff3b2f;
  --paper: #f0ebdf;
  --ink: #17161a;

  --f-display: "Black Ops One", "Impact", "Arial Black", sans-serif;
  --f-crt: "VT323", "Courier New", monospace;
  --f-mono: "Share Tech Mono", ui-monospace, "Consolas", monospace;

  --tex: url(../assets/steel.webp);
  --main-glow: 150 195 255;
  --px: 0px; --py: 0px;
  /* cursors: a rounded glossy arrow in NEO's wood; the clickable one wears his grey face plate and bead eyes (drawn in SVG) */
  --cur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cpath id='a' d='M5 4 L5 23.6 L10 19.2 L13.5 26.8 L17.5 25.1 L14 17.7 L20.8 17.7 Z'/%3E%3ClinearGradient id='g' x1='0' y1='0' x2='.75' y2='1'%3E%3Cstop offset='0' stop-color='%23fff4e0'/%3E%3Cstop offset='.5' stop-color='%23e8dabd'/%3E%3Cstop offset='1' stop-color='%23bfa47c'/%3E%3C/linearGradient%3E%3CclipPath id='c'%3E%3Cuse href='%23a' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/clipPath%3E%3Cfilter id='s' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='1'/%3E%3C/filter%3E%3Cfilter id='i' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='.9'/%3E%3C/filter%3E%3C/defs%3E%3Cuse href='%23a' transform='translate%281.1 1.7%29' fill='%23000' stroke='%23000' stroke-width='3' stroke-linejoin='round' opacity='.42' filter='url%28%23s%29'/%3E%3Cuse href='%23a' fill='%234b3c2c' stroke='%234b3c2c' stroke-width='4' stroke-linejoin='round'/%3E%3Cuse href='%23a' fill='url%28%23g%29' stroke='url%28%23g%29' stroke-width='2' stroke-linejoin='round'/%3E%3Cg clip-path='url%28%23c%29'%3E%3Cuse href='%23a' fill='none' stroke='%238a7d68' stroke-width='3' stroke-linejoin='round' opacity='.6' filter='url%28%23i%29' transform='translate%28-1.3 -1.5%29'/%3E%3Cellipse cx='7.6' cy='11.5' rx='1.7' ry='5.6' fill='%23fff' opacity='.8' transform='rotate%28-8 7.6 11.5%29'/%3E%3C/g%3E%3C/svg%3E") 4 3, default;
  --cur-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3Cpath id='a' d='M5 4 L5 23.6 L10 19.2 L13.5 26.8 L17.5 25.1 L14 17.7 L20.8 17.7 Z'/%3E%3ClinearGradient id='g' x1='0' y1='0' x2='.75' y2='1'%3E%3Cstop offset='0' stop-color='%23d6d3ce'/%3E%3Cstop offset='.5' stop-color='%238e8a84'/%3E%3Cstop offset='1' stop-color='%235e5a55'/%3E%3C/linearGradient%3E%3CclipPath id='c'%3E%3Cuse href='%23a' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/clipPath%3E%3Cfilter id='s' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='1'/%3E%3C/filter%3E%3Cfilter id='i' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='.9'/%3E%3C/filter%3E%3C/defs%3E%3Cuse href='%23a' transform='translate%281.1 1.7%29' fill='%23000' stroke='%23000' stroke-width='3' stroke-linejoin='round' opacity='.42' filter='url%28%23s%29'/%3E%3Cuse href='%23a' fill='%232a2622' stroke='%232a2622' stroke-width='4' stroke-linejoin='round'/%3E%3Cuse href='%23a' fill='url%28%23g%29' stroke='url%28%23g%29' stroke-width='2' stroke-linejoin='round'/%3E%3Cg clip-path='url%28%23c%29'%3E%3Cuse href='%23a' fill='none' stroke='%233a3733' stroke-width='3' stroke-linejoin='round' opacity='.6' filter='url%28%23i%29' transform='translate%28-1.3 -1.5%29'/%3E%3Cellipse cx='7.6' cy='11.5' rx='1.7' ry='5.6' fill='%23fff' opacity='.8' transform='rotate%28-8 7.6 11.5%29'/%3E%3C/g%3E%3Ccircle cx='8.4' cy='13.9' r='1.25' fill='%231a0d08'/%3E%3Ccircle cx='11.9' cy='13.9' r='1.25' fill='%231a0d08'/%3E%3Ccircle cx='8.05' cy='13.5' r='.42' fill='%23fff'/%3E%3Ccircle cx='11.55' cy='13.5' r='.42' fill='%23fff'/%3E%3C/svg%3E") 4 3, pointer;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { background: var(--void); cursor: var(--cur); }
body { margin: 0; background: var(--void); color: var(--phosphor); font: 15px/1.55 var(--f-mono); overflow: hidden; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ================= Boot screen ================= */
.boot { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: #000; overflow: hidden; }
.boot::after { /* glass: scanlines + curvature vignette over static, logo and button alike */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(transparent 0 2px, rgb(0 0 0 / .3) 2px 3px), radial-gradient(ellipse at center, transparent 55%, rgb(0 0 0 / .85) 100%);
}
.boot__tv { position: absolute; inset: 0; width: 100%; height: 100%; filter: saturate(1.15) contrast(1.05); }
.boot__center { position: relative; z-index: 2; display: grid; justify-items: center; gap: clamp(12px, 2.2vh, 22px); padding: 0 16px; }
/* the logo is cut into scanline strips that the same signal shifts (see boot.js) */
.boot__logo { position: relative; width: min(56vw, 400px); aspect-ratio: 1100 / 705;
  filter: drop-shadow(0 0 16px rgb(120 180 255 / .6)) drop-shadow(3px 0 0 rgb(255 0 70 / .5)) drop-shadow(-3px 0 0 rgb(0 220 255 / .5)); }
.boot__strip { position: absolute; left: 0; right: 0; background: url(../assets/logo.webp) no-repeat; will-change: transform; }
.boot__grain { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: overlay; opacity: .55; pointer-events: none;
  -webkit-mask: url(../assets/logo.webp) center / 100% 100% no-repeat; mask: url(../assets/logo.webp) center / 100% 100% no-repeat; }
.boot__logo.is-lost { opacity: .45; }
.boot__enter {
  min-width: 150px; border: 0; cursor: var(--cur-hand); padding: 9px 22px 8px; border-radius: 8px;
  font: 20px/1 var(--f-crt); letter-spacing: .32em; text-indent: .32em; color: #e9f2ff;
  background: linear-gradient(rgb(20 26 34 / .82), rgb(7 10 14 / .88));
  box-shadow: inset 0 2px 0 rgb(255 255 255 / .12), inset 0 -2px 0 rgb(0 0 0 / .7), 0 0 0 2px #2b323b, 0 0 0 4px rgb(11 13 16 / .9), 0 10px 22px rgb(0 0 0 / .6);
  text-shadow: 0 0 8px rgb(200 225 255 / .7); transition: color .2s, box-shadow .2s;
  transform: translateX(var(--dx, 0px)) scale(var(--sc, 1));
}
.boot__enter:disabled { cursor: progress; color: #8fa3bb; }
.boot.is-ready .boot__enter { color: var(--amber); text-shadow: 0 0 10px rgb(255 179 71 / .9), 2px 0 0 rgb(255 0 70 / .45), -2px 0 0 rgb(0 220 255 / .45); animation: enter-pulse 1.4s ease-in-out infinite; }
.boot.is-ready .boot__enter:hover { --sc: 1.05; }
.boot.is-ready .boot__enter:active { --sc: .96; }
.boot.is-off { animation: boot-out .55s ease-out forwards; pointer-events: none; }   /* static clears into the TV picture */
.zooming .neo3d, .zooming .neo-hai, .zooming .dust { visibility: hidden; }
.zooming .stage { overflow: hidden; }
/* bottom deck waits until the camera has pulled back out of the TV, then rises in (neo.js revealDeck) */
.deck-hidden .half--bottom, .deck-hidden .neo3d, .deck-hidden .neo-hai { visibility: hidden; }
.booting .neo3d, .booting .neo-hai, .vault-open .neo3d, .vault-open .neo-hai { visibility: hidden; }
@keyframes enter-pulse { 50% { box-shadow: inset 0 2px 0 rgb(255 255 255 / .12), inset 0 -2px 0 rgb(0 0 0 / .7), 0 0 0 2px #2b323b, 0 0 0 4px rgb(11 13 16 / .9), 0 0 22px rgb(255 179 71 / .55); } }
@keyframes boot-out { 0% { opacity: 1; filter: brightness(1); } 25% { opacity: 1; filter: brightness(1.8); } 100% { opacity: 0; filter: brightness(1); } }
@keyframes crt-off { 0% { transform: none; filter: brightness(1); } 45% { transform: scale(1, .006); filter: brightness(3); } 75% { transform: scale(.002, .006); filter: brightness(4); opacity: 1; } 100% { transform: scale(0, 0); opacity: 0; } }

/* ================= Control room =================
   Full-screen deck face; the vault sits behind the console inside it. */
.viewport { position: fixed; inset: 0; overflow: hidden; background: var(--void); }
.world { position: absolute; inset: 0; }
.face { position: absolute; inset: 0; overflow: hidden; background: var(--void); }
.face--deck { container-type: size; }
.face__wall {
  position: absolute; inset: -6%;
  background: url(../assets/wall.webp) center 30% / cover no-repeat;
  filter: brightness(.6) saturate(.9);
  transform: translate3d(var(--px), var(--py), 0) scale(1.04);
  transition: transform .5s ease-out;
}
.face__wall::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 50% 35%, transparent 30%, rgb(3 5 8 / .88) 100%),
    linear-gradient(transparent 55%, var(--void) 100%);
}
.face__spill {
  position: absolute; left: 50%; top: 30%; width: 120vmin; height: 90vmin; translate: -50% -50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--main-glow) / .3), transparent 75%);
  mix-blend-mode: screen; filter: blur(30px); transition: background .8s;
  animation: breathe 6s ease-in-out infinite;
}
.face__beam {
  position: absolute; left: 50%; top: -12%; width: 150vmin; height: 135%; translate: -50% 0; pointer-events: none;
  background: conic-gradient(from 180deg at 50% 0%, transparent 152deg, rgb(170 200 240 / .1) 168deg, rgb(190 215 250 / .16) 180deg, rgb(170 200 240 / .1) 192deg, transparent 208deg);
  mask: linear-gradient(#000 0%, #000 45%, transparent 95%);
  mix-blend-mode: screen; filter: blur(14px); animation: beam 9s ease-in-out infinite;
}
.dust { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; mix-blend-mode: screen; }
body::after {
  content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background: var(--grain, none) 0 0 / 256px 256px; opacity: .07; mix-blend-mode: overlay;
  animation: grain .5s steps(4) infinite;
}

/* ================= Stage (deck wall) ================= */
.stage { /* console stands on the bottom edge of the screen */
  position: absolute; inset: 0; z-index: 2;
  display: grid; align-items: safe end; justify-items: center;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none; -ms-overflow-style: none;            /* scrolls, but no visible bar */
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: max(8px, env(safe-area-inset-top, 0px)) 0;
}
.stage > .rig { width: min(100%, (100cqh - 8px) * 556 / 777 * 1.5); } /* feed at 150% */
.stage::-webkit-scrollbar { display: none; }
.vault-open .stage { pointer-events: none; } /* opened deck must not swallow clicks meant for the vault */
/* deck turns 3/4 toward NEO; the console tilts (not the scroller), shrinking a touch so no edge is clipped */
.stage > .rig { transform-origin: 50% 100%; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.neo-out .stage > .rig { /* scale grows downward (translateY offsets it) so the top screen stays reachable;
   the vanishing point sits on the bottom edge so the foot stays flush; mild 15° turn */
  transform: translate(-12%, 20%) perspective(2600px) rotateY(15deg) scale(1.14);
}

/* ================= NEO 3D mascot ================= */
.neo3d { position: fixed; right: 0; bottom: 0; z-index: 20; width: min(60vw, 690px); height: min(100vh, 990px); pointer-events: none; outline: none; }
.neo3d:focus, .neo3d:focus-visible { outline: none; } /* keyboard focus shows the speech bubble instead */
.neo-hai { /* comic speech bubble; the tail is part of the outline so balloon and tail read as one shape */
  position: fixed; left: 0; top: 0; z-index: 21; pointer-events: none; translate: -30% calc(-100% - 6px);
  max-width: min(17em, 70vw); font: 15px/1.2 var(--f-display); letter-spacing: .03em; color: var(--ink); text-wrap: balance;
  padding: 9px 14px 8px; border-radius: 16px; background: var(--paper); border: 2px solid #17161a;
  filter: drop-shadow(0 10px 18px rgb(0 0 0 / .5));
  opacity: 0; transform-origin: 30% calc(100% + 12px);
}
.neo-hai::before, .neo-hai::after { content: ""; position: absolute; left: calc(30% - 11px); clip-path: polygon(0 0, 100% 0, 30% 100%); }
.neo-hai::before { bottom: -15px; width: 22px; height: 15px; background: #17161a; }                  /* tail outline */
.neo-hai::after { bottom: -10px; left: calc(30% - 8px); width: 16px; height: 12px; background: var(--paper); } /* tail fill, covers the border seam */
.neo-hai__rest { visibility: hidden; }                                                              /* untyped part keeps the layout steady */
.neo-hai.is-on { opacity: 1; animation: hai-in .42s cubic-bezier(.3, 1.7, .45, 1); }          /* pops out of the head */
.neo-hai.is-out { animation: hai-out .34s ease-in forwards; }                                         /* drifts off to the right */
@keyframes hai-in { from { opacity: 0; scale: .4; rotate: -6deg; } 30% { opacity: 1; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes hai-out { from { opacity: 1; } to { opacity: 0; translate: calc(-30% + 36px) calc(-100% - 6px); rotate: 3deg; } }

/* ================= Console grid system =================
   1 unit = 1px of the 736px-wide reference. Canvas spans x 90→646, y 62→774 (cabinet foot = bottom edge). */
.rig { position: relative; width: 100%; container-type: inline-size; }
.console {
  --u: calc(100cqw / 556);
  position: relative; width: 100%; aspect-ratio: 556 / 777;
}
.layer { position: absolute; inset: 0; pointer-events: none; }
/* Clamshell: the monitor half hinges at its top edge and swings up toward the camera,
   the cabinet half hinges at its foot and swings down; the vault shows through. */
.console { perspective: 1500px; perspective-origin: 50% 46%; }
.half {
  position: absolute; inset: 0; pointer-events: none;
  transition: transform 1.25s cubic-bezier(.65, 0, .25, 1) .28s, opacity .9s ease .5s, filter 1.25s .28s;
}
.half > * { pointer-events: none; }
.half > .layer > * { pointer-events: auto; }
.half--top { transform-origin: 50% 1.65%; }
.half--bottom { transform-origin: 50% 99.27%; }
.vault-open .half { transition-delay: 0s, .45s, 0s; filter: brightness(.55); }
.vault-open .half--top { transform: translateY(-64%) rotateX(66deg); opacity: .0; }
.vault-open .half--bottom { transform: translateY(60%) rotateX(-72deg); opacity: .0; }
.layer > * { pointer-events: auto; }
.layer--glow, .layer--glow > *, .glow { pointer-events: none !important; } /* light only: never catches clicks */

.p {
  position: absolute; margin: 0;
  left: calc((var(--x) - 90) * var(--u)); top: calc((var(--y) - 62) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
}
.lp {
  position: absolute; margin: 0;
  left: calc(var(--l) * var(--u)); top: calc(var(--t) * var(--u));
  width: calc(var(--lw) * var(--u)); height: calc(var(--lh) * var(--u));
}

/* Material: painted steel = shading gradient overlaid on the steel texture.
   Convex parts get a lit top edge + dark bottom edge; concave parts the inverse. */
.mat {
  background-blend-mode: overlay, normal;
}

/* ================= Main monitor ================= */
.mon { /* convex housing: lit top bevel, darker flanks, chin */
  border-radius: calc(11 * var(--u)) calc(11 * var(--u)) calc(7 * var(--u)) calc(7 * var(--u));
  background:
    linear-gradient(90deg, rgb(0 0 0 / .38), transparent 7%, transparent 93%, rgb(0 0 0 / .42)),
    linear-gradient(#c3cbd4, #9aa4b0 18%, #8a95a2 70%, #6d7884),
    var(--tex) 0 0 / calc(180 * var(--u));
  background-blend-mode: normal, overlay, normal;
  box-shadow:
    inset 0 calc(1.4 * var(--u)) 0 rgb(255 255 255 / .65), inset 0 calc(-2 * var(--u)) calc(1 * var(--u)) rgb(0 0 0 / .5),
    inset calc(1.2 * var(--u)) 0 0 rgb(255 255 255 / .15), inset calc(-1.2 * var(--u)) 0 0 rgb(0 0 0 / .35),
    0 calc(10 * var(--u)) calc(18 * var(--u)) rgb(0 0 0 / .8), 0 0 calc(30 * var(--u)) rgb(var(--main-glow) / .12);
}
.mon__recess { /* concave throat around the glass */
  border-radius: calc(9 * var(--u));
  background: linear-gradient(#0d1014, #1d232a 85%, #3a424c);
  box-shadow:
    inset 0 calc(4 * var(--u)) calc(5 * var(--u)) #000, inset calc(3 * var(--u)) 0 calc(4 * var(--u)) rgb(0 0 0 / .7),
    inset calc(-2 * var(--u)) 0 calc(3 * var(--u)) rgb(0 0 0 / .6), inset 0 calc(-1.6 * var(--u)) 0 rgb(220 230 240 / .45),
    0 calc(-1 * var(--u)) 0 rgb(0 0 0 / .35), 0 calc(1.2 * var(--u)) 0 rgb(255 255 255 / .35);
}
.mon__recess > .screen { position: absolute; left: calc(8 * var(--u)); top: calc(5 * var(--u)); right: calc(5 * var(--u)); bottom: calc(5 * var(--u)); clip-path: url(#crt-glass-flat); }
.mon__groove { border-radius: calc(2 * var(--u)); background: linear-gradient(#3e4650, #c3cad3); box-shadow: inset 0 calc(1 * var(--u)) calc(1 * var(--u)) rgb(0 0 0 / .6); }
.mon__plate { /* engraved dark plate: contract address + links */
  display: flex; align-items: center; gap: calc(4 * var(--u)); padding: 0 calc(3 * var(--u)) 0 calc(4 * var(--u));
  border-radius: calc(2 * var(--u)); background: linear-gradient(#22272d, #121519);
  box-shadow: inset 0 calc(1 * var(--u)) calc(1.5 * var(--u)) #000, 0 calc(.8 * var(--u)) 0 rgb(255 255 255 / .4), 0 calc(-.6 * var(--u)) 0 rgb(0 0 0 / .4);
}
.ca {
  flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: calc(4 * var(--u));
  border: 0; padding: 0; background: none; cursor: var(--cur-hand); color: #e9edf1; text-align: left;
}
.ca.is-empty { cursor: var(--cur); }
.mon__plate .ca { flex: 0 1 auto; max-width: calc(50% - 40 * var(--u)); }   /* long addresses ellipsize before the logo */
.mon__plate .soc { margin-left: auto; }
.plate__logo { /* NEO wordmark badge, dead centre of the plate */
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; height: 122%; width: auto; pointer-events: none;
  filter: drop-shadow(0 0 calc(3 * var(--u)) rgb(110 170 255 / .45)) drop-shadow(0 calc(1 * var(--u)) calc(1 * var(--u)) rgb(0 0 0 / .8));
}
.ca__tag {
  flex: none; font: calc(8 * var(--u)) / 1 var(--f-display); letter-spacing: .08em; color: #2b1300;
  padding: calc(2 * var(--u)) calc(3 * var(--u)); border-radius: calc(1.2 * var(--u));
  background: linear-gradient(#ffd38a, #e98a1f); box-shadow: 0 0 calc(5 * var(--u)) rgb(255 160 50 / .45);
}
.ca__val {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: calc(8.6 * var(--u)) / 1 var(--f-mono); letter-spacing: .12em; text-shadow: 0 0 calc(2 * var(--u)) rgb(255 255 255 / .35);
}
.ca.is-empty .ca__val { letter-spacing: .34em; color: #aeb8c4; }
.ca.is-copied .ca__val { color: var(--amber); }
.ca__copy { flex: none; width: calc(9 * var(--u)); height: calc(9 * var(--u)); fill: none; stroke: currentColor; stroke-width: 2; opacity: .7; }
.ca.is-empty .ca__copy { display: none; }
.ca:not(.is-empty):hover .ca__val, .ca:not(.is-empty):hover .ca__copy { color: var(--amber); opacity: 1; }
.soc { flex: none; display: flex; gap: calc(3 * var(--u)); padding-left: calc(4 * var(--u)); border-left: calc(.6 * var(--u)) solid #050607; box-shadow: calc(-.6 * var(--u)) 0 0 rgb(255 255 255 / .08); }
.soc__btn {
  width: calc(17 * var(--u)); height: calc(17 * var(--u)); display: grid; place-items: center; text-decoration: none;
  border-radius: calc(2.5 * var(--u)); color: #e9edf1; font: calc(6 * var(--u)) / 1 var(--f-mono);
  background: linear-gradient(#3a414a, #191d22);
  box-shadow: inset 0 calc(.6 * var(--u)) 0 rgb(255 255 255 / .25), inset 0 calc(-.8 * var(--u)) 0 rgb(0 0 0 / .6), 0 calc(1 * var(--u)) calc(1.5 * var(--u)) rgb(0 0 0 / .7);
  transition: color .15s, box-shadow .15s, transform .1s;
}
.soc__btn img { width: 66%; height: 66%; object-fit: contain; }
.soc__mask { width: 58%; height: 58%; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.soc__btn[href]:hover, .soc__btn[href]:focus-visible { color: var(--amber); box-shadow: inset 0 calc(.6 * var(--u)) 0 rgb(255 255 255 / .25), 0 0 calc(6 * var(--u)) rgb(255 179 71 / .5); outline: none; }
.soc__btn[href]:active { transform: translateY(calc(.6 * var(--u))); }
.soc__btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }  /* brand logos keep their colours while waiting for a link */

/* ================= Lower console ================= */
.face { /* light steel front panel, convex top edge */
  border-radius: calc(6 * var(--u)) calc(6 * var(--u)) 0 0;
  background:
    linear-gradient(90deg, rgb(0 0 0 / .3), transparent 5%, transparent 95%, rgb(0 0 0 / .34)),
    linear-gradient(#c0c8d2, #a0aab6 8%, #8e99a6 60%, #7b8693),
    var(--tex) 0 0 / calc(200 * var(--u));
  background-blend-mode: normal, overlay, normal;
  box-shadow:
    inset 0 calc(1.6 * var(--u)) 0 rgb(255 255 255 / .75), inset 0 calc(3 * var(--u)) calc(3 * var(--u)) rgb(255 255 255 / .18),
    calc(-1 * var(--u)) 0 0 rgb(160 190 230 / .18), calc(1 * var(--u)) 0 0 rgb(160 190 230 / .12),
    0 calc(-4 * var(--u)) calc(14 * var(--u)) rgb(0 0 0 / .6);
}
.crt { /* each monitor: raised mid-grey housing */
  border: 0; padding: 0; cursor: var(--cur-hand);
  border-radius: calc(5 * var(--u));
  background: linear-gradient(#8e98a4, #6c7682 55%, #545d68), var(--tex) 0 0 / calc(120 * var(--u));
  background-blend-mode: overlay, normal;
  box-shadow:
    0 0 0 calc(1.4 * var(--u)) rgb(20 24 30 / .9),                     /* seam to the panel */
    inset 0 calc(1.2 * var(--u)) 0 rgb(255 255 255 / .55), inset 0 calc(-1.4 * var(--u)) 0 rgb(0 0 0 / .45),
    inset calc(1 * var(--u)) 0 0 rgb(255 255 255 / .12), inset calc(-1 * var(--u)) 0 0 rgb(0 0 0 / .3),
    0 calc(2.4 * var(--u)) calc(4 * var(--u)) rgb(0 0 0 / .55);
  transition: box-shadow .25s;
}
.crt:hover, .crt:focus-visible { box-shadow: 0 0 0 calc(1.4 * var(--u)) var(--amber), inset 0 calc(1.2 * var(--u)) 0 rgb(255 255 255 / .55), inset 0 calc(-1.4 * var(--u)) 0 rgb(0 0 0 / .45), 0 0 calc(10 * var(--u)) rgb(255 179 71 / .35); outline: none; }
.crt__throat { /* concave lip around the glass */
  position: absolute; inset: calc(3 * var(--u)); border-radius: calc(7 * var(--u)) / calc(9 * var(--u));
  background: linear-gradient(#090b0e, #1b2026 80%, #2e353e);
  box-shadow: inset 0 calc(2.4 * var(--u)) calc(3 * var(--u)) #000, inset 0 calc(-1 * var(--u)) 0 rgb(220 230 240 / .35), inset calc(1.6 * var(--u)) 0 calc(2 * var(--u)) rgb(0 0 0 / .6), inset calc(-1.6 * var(--u)) 0 calc(2 * var(--u)) rgb(0 0 0 / .6);
}
.crt__throat > .screen { position: absolute; inset: calc(1.8 * var(--u)) calc(1.8 * var(--u)) calc(1.6 * var(--u)); clip-path: url(#crt-glass); }

.ledge-top { /* desk surface catching the key light */
  background: linear-gradient(#6f7984, #a9b3be 55%, #c8d0d9), var(--tex) 0 0 / calc(220 * var(--u));
  background-blend-mode: overlay, normal;
  clip-path: polygon(1.2% 0, 98.8% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 calc(-1 * var(--u)) 0 rgb(255 255 255 / .5);
}
.ledge { /* front face with a rolled (convex) bottom rim */
  border-radius: 0 0 calc(3 * var(--u)) calc(3 * var(--u));
  background:
    linear-gradient(transparent 82%, rgb(235 242 250 / .95) 88%, #6d7682 94%, #2b3139),
    linear-gradient(90deg, rgb(0 0 0 / .32), transparent 5%, transparent 95%, rgb(0 0 0 / .32)),
    linear-gradient(#97a2ae, #7e8995), var(--tex) 0 0 / calc(220 * var(--u));
  background-blend-mode: normal, normal, overlay, normal;
  box-shadow: 0 calc(5 * var(--u)) calc(9 * var(--u)) rgb(0 0 0 / .85);
}
.cabinet {
  border-radius: 0 0 calc(4 * var(--u)) calc(4 * var(--u));
  background:
    linear-gradient(90deg, rgb(0 0 0 / .45), transparent 6%, transparent 94%, rgb(0 0 0 / .5)),
    linear-gradient(#4a525c, #343b44 30%, #1f242a 75%, #12151a),
    var(--tex) 0 0 / calc(220 * var(--u));
  background-blend-mode: normal, overlay, normal;
  box-shadow: inset 0 calc(14 * var(--u)) calc(14 * var(--u)) calc(-6 * var(--u)) rgb(0 0 0 / .85), 0 calc(16 * var(--u)) calc(24 * var(--u)) rgb(0 0 0 / .9);
}
.switches {
  border: 0; cursor: var(--cur-hand); padding: calc(2 * var(--u)) calc(4 * var(--u));
  display: flex; justify-content: space-between; border-radius: calc(2 * var(--u));
  background: linear-gradient(#262b31, #15181c);
  box-shadow: inset 0 calc(1.4 * var(--u)) calc(2 * var(--u)) #000, 0 calc(.8 * var(--u)) 0 rgb(255 255 255 / .3);
}
.switches i { /* knob cap + slider slot + lever */
  position: relative; width: calc(7 * var(--u)); height: 100%;
  background:
    radial-gradient(circle at 50% 22%, #9aa2ab 0 calc(1 * var(--u)), #2a2e33 calc(2.4 * var(--u)), #0b0c0e calc(3.1 * var(--u)), transparent calc(3.4 * var(--u))),
    linear-gradient(90deg, transparent 42%, #000 42% 58%, transparent 58%) 0 calc(9 * var(--u)) / 100% calc(13 * var(--u)) no-repeat;
}
.switches i:nth-child(n+5) { background:
    radial-gradient(circle at 50% 22%, #d8cf8a 0 calc(.8 * var(--u)), #6e6a3c calc(2.4 * var(--u)), #1d1c10 calc(3.1 * var(--u)), transparent calc(3.4 * var(--u))),
    linear-gradient(90deg, transparent 42%, #000 42% 58%, transparent 58%) 0 calc(9 * var(--u)) / 100% calc(13 * var(--u)) no-repeat; }
.switches i::after {
  content: ""; position: absolute; left: 22%; right: 22%; height: calc(3 * var(--u)); top: var(--lv, calc(15 * var(--u)));
  border-radius: calc(.8 * var(--u)); background: linear-gradient(#d9dee4, #7c848d); box-shadow: 0 calc(1 * var(--u)) calc(1 * var(--u)) #000;
  transition: top .25s cubic-bezier(.3, 1.6, .5, 1);
}
.switches i:nth-child(2)::after { --lv: calc(11 * var(--u)); }
.switches i:nth-child(4)::after { --lv: calc(18 * var(--u)); }
.switches i:nth-child(6)::after { --lv: calc(12 * var(--u)); }
.switches[data-mode="night"] i:nth-child(odd)::after { --lv: calc(10 * var(--u)); }
.switches[data-mode="color"] i::after { --lv: calc(19 * var(--u)); }
.keypad {
  border-radius: calc(1.5 * var(--u));
  background:
    linear-gradient(90deg, #6b3e05 calc(.6 * var(--u)), transparent 0) 0 0 / calc(7.4 * var(--u)) 100%,
    linear-gradient(#6b3e05 calc(.6 * var(--u)), transparent 0) 0 0 / 100% calc(6 * var(--u)),
    linear-gradient(#ffd27a, #e3961f);
  box-shadow: inset 0 0 0 calc(1 * var(--u)) #3a2000, 0 calc(1 * var(--u)) calc(1.5 * var(--u)) rgb(0 0 0 / .7), 0 0 calc(5 * var(--u)) rgb(255 170 60 / .35);
}
.speaker {
  border: 0; cursor: var(--cur-hand); border-radius: 50%;
  background: radial-gradient(circle, #050608 calc(.55 * var(--u)), transparent calc(.7 * var(--u))) 0 0 / calc(2 * var(--u)) calc(2 * var(--u)), linear-gradient(#2c3238, #191c20);
  box-shadow: inset 0 calc(1.5 * var(--u)) calc(2 * var(--u)) #000, 0 calc(.8 * var(--u)) 0 rgb(255 255 255 / .35);
}
.speaker[aria-pressed="true"] { animation: thump 1.1s ease-in-out infinite; }
.vent {
  display: flex; gap: calc(2 * var(--u)); padding: calc(2 * var(--u)); border-radius: calc(1.5 * var(--u));
  background: #0c0e11;
  box-shadow: 0 0 0 calc(1.2 * var(--u)) #3d4550, inset 0 calc(1 * var(--u)) calc(2 * var(--u)) #000, 0 calc(1.6 * var(--u)) 0 calc(1.2 * var(--u)) rgb(255 255 255 / .08);
}
.vent i { /* four rounded slats per column */
  flex: 1; border-radius: calc(.6 * var(--u));
  background: repeating-linear-gradient(#bcc4cd 0, #e6ebf0 calc(.8 * var(--u)), #8a929c calc(2.6 * var(--u)), #2b3037 calc(3.4 * var(--u)), #07080a calc(3.8 * var(--u)), #07080a calc(5.6 * var(--u)));
  filter: brightness(.82);
}
.hatch { /* access hatch doubles as the jump to the sightings log */
  display: grid; place-items: center; text-decoration: none; cursor: var(--cur-hand);
  transform: skewY(2.4deg); border-radius: calc(2 * var(--u)); transition: filter .2s, box-shadow .2s;
  background: linear-gradient(#3c434c, #2a3038), var(--tex) 0 0 / calc(140 * var(--u));
  background-blend-mode: overlay, normal;
  box-shadow: inset 0 calc(1 * var(--u)) 0 rgb(255 255 255 / .18), inset 0 calc(-1 * var(--u)) 0 rgb(0 0 0 / .6), 0 calc(2 * var(--u)) calc(3 * var(--u)) rgb(0 0 0 / .6), 0 0 0 calc(.8 * var(--u)) #14181d;
}
.hatch:hover, .hatch:focus-visible { filter: brightness(1.25); outline: none; box-shadow: 0 0 0 calc(1.2 * var(--u)) var(--amber), 0 0 calc(14 * var(--u)) rgb(255 179 71 / .35); }
.hatch__label {
  display: grid; justify-items: center; gap: calc(3 * var(--u));
  font: calc(11 * var(--u)) / 1 var(--f-display); letter-spacing: .1em; color: #c9d1da;
  text-shadow: 0 calc(-.6 * var(--u)) 0 rgb(0 0 0 / .85), 0 calc(.6 * var(--u)) 0 rgb(255 255 255 / .18); /* stamped into the plate */
}
.hatch__label small { font: calc(8 * var(--u)) / 1 var(--f-crt); letter-spacing: .16em; color: var(--amber); text-shadow: 0 0 calc(3 * var(--u)) rgb(255 179 71 / .6); animation: nudge 1.6s ease-in-out infinite; }
.hatch__led { width: calc(5 * var(--u)); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffe2a8, var(--amber) 55%, #7a4300); box-shadow: 0 0 calc(5 * var(--u)) rgb(255 179 71 / .8); animation: blink 1.6s steps(2) infinite; }
.stamp { /* legal line debossed into the bottom steel: dark fill, lit lower lip, shaded upper lip */
  display: grid; place-items: center; white-space: nowrap; pointer-events: none;
  font: calc(8.4 * var(--u)) / 1 var(--f-mono); letter-spacing: .3em; color: #0a0d11;
  text-shadow: 0 calc(.8 * var(--u)) 0 rgb(185 202 225 / .38), 0 calc(-.6 * var(--u)) 0 rgb(0 0 0 / .85), 0 0 calc(1 * var(--u)) rgb(0 0 0 / .5);
}
.hatch b { position: absolute; width: calc(5 * var(--u)); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #8f98a2, #2b3036 70%); box-shadow: 0 calc(.6 * var(--u)) calc(.8 * var(--u)) #000; }
.hatch b:nth-child(1) { left: calc(4 * var(--u)); top: calc(4 * var(--u)); }
.hatch b:nth-child(2) { right: calc(4 * var(--u)); top: calc(4 * var(--u)); }
.hatch b:nth-child(3) { left: calc(4 * var(--u)); bottom: calc(4 * var(--u)); }
.hatch b:nth-child(4) { right: calc(4 * var(--u)); bottom: calc(4 * var(--u)); }

/* tooltips for desk controls */
[data-tip] { position: absolute; }
[data-tip]::before {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 5 * var(--u)); translate: -50% 0; z-index: 3;
  font: calc(8 * var(--u)) / 1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: #f5f5f5; background: #111316; padding: calc(3 * var(--u)) calc(5 * var(--u)); border-radius: calc(1.5 * var(--u));
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
[data-tip]:hover::before, [data-tip]:focus-visible::before { opacity: 1; }

/* ================= Chart monitor + market stats ================= */
.crt--chart { cursor: var(--cur); }
.crt--chart:hover { box-shadow: 0 0 0 calc(1.4 * var(--u)) rgb(20 24 30 / .9), inset 0 calc(1.2 * var(--u)) 0 rgb(255 255 255 / .55), inset 0 calc(-1.4 * var(--u)) 0 rgb(0 0 0 / .45), 0 calc(2.4 * var(--u)) calc(4 * var(--u)) rgb(0 0 0 / .55); }
.screen--chart { background: #070b10; }
/* the embed lays itself out for a full page: render it bigger and shrink it, so its text and controls get small and the candles get the room */
.screen--chart iframe { --zoom: .6; position: absolute; top: 0; left: 0; z-index: 1; width: calc(100% / var(--zoom)); height: calc(100% / var(--zoom)); border: 0; transform: scale(var(--zoom)); transform-origin: 0 0; }
.chart-idle { /* honest empty state: scope grid + sweep, no invented prices */
  position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; gap: calc(3 * var(--u)); text-align: center;
  background:
    linear-gradient(90deg, transparent 0 calc(100% - 1px), rgb(120 200 160 / .12) 0) 0 0 / calc(19.6 * var(--u)) 100%,
    linear-gradient(transparent 0 calc(100% - 1px), rgb(120 200 160 / .12) 0) 0 0 / 100% calc(15 * var(--u)),
    radial-gradient(ellipse at center, #0c1a16, #04080a 75%);
}
.chart-idle::after { content: ""; position: absolute; top: 0; bottom: 0; width: 18%; background: linear-gradient(90deg, transparent, rgb(120 230 170 / .14), transparent); animation: sweep 3.2s linear infinite; }
.chart-idle b { font: calc(13 * var(--u)) / 1 var(--f-display); letter-spacing: .08em; color: #9ff0c4; text-shadow: 0 0 calc(5 * var(--u)) rgb(120 240 170 / .6); }
.chart-idle i { font: calc(7.5 * var(--u)) / 1.2 var(--f-crt); font-style: normal; letter-spacing: .08em; color: #7fb7a0; }
.chart-idle[hidden] { display: none; }
.stats { /* stats card: recessed steel plate with six LCD cells */
  padding: calc(3 * var(--u)); border-radius: calc(3 * var(--u));
  background: linear-gradient(#2a3038, #171b20), var(--tex) 0 0 / calc(140 * var(--u)); background-blend-mode: overlay, normal;
  box-shadow: 0 0 0 calc(1.4 * var(--u)) rgb(20 24 30 / .9), inset 0 calc(1 * var(--u)) 0 rgb(255 255 255 / .18), inset 0 calc(-1 * var(--u)) 0 rgb(0 0 0 / .6), 0 calc(2 * var(--u)) calc(4 * var(--u)) rgb(0 0 0 / .55);
}
.stats__grid { margin: 0; height: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: calc(2.2 * var(--u)); }
.stats__grid > div {
  min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: calc(1.2 * var(--u)); padding: 0 calc(4 * var(--u));
  border-radius: calc(1.6 * var(--u)); background: linear-gradient(#0b0f0c, #111712);
  box-shadow: inset 0 calc(1 * var(--u)) calc(2 * var(--u)) #000, 0 calc(.6 * var(--u)) 0 rgb(255 255 255 / .1);
}
.stats dt { font: calc(5.2 * var(--u)) / 1 var(--f-mono); letter-spacing: .16em; color: #7f9a8a; }
.stats dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: calc(9.5 * var(--u)) / 1 var(--f-crt); letter-spacing: .06em; color: var(--amber); text-shadow: 0 0 calc(3 * var(--u)) rgb(255 179 71 / .55); font-variant-numeric: tabular-nums; }
.stats dd.up { color: #6ff0a0; text-shadow: 0 0 calc(3 * var(--u)) rgb(110 240 160 / .55); }
.stats dd.down { color: #ff6a5a; text-shadow: 0 0 calc(3 * var(--u)) rgb(255 90 80 / .55); }

/* ================= CRT glass (shared) ================= */
.screen { display: block; overflow: hidden; background: #0a1018; }
.screen img.feed, .screen .slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.screen img.feed { transition: filter .35s, opacity .4s; }
.screen::before { /* scanlines + rolling bar */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(transparent 0 46%, rgb(255 255 255 / .06) 50%, transparent 54%) 0 0 / 100% 300%,
    repeating-linear-gradient(transparent 0 calc(1.2 * var(--u)), rgb(0 0 0 / .3) calc(1.2 * var(--u)) calc(2 * var(--u)));
  animation: roll 7s linear infinite;
}
.screen::after { /* convex glass: specular + streak + edge falloff */
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 28% 10%, rgb(255 255 255 / .2), transparent 62%),
    linear-gradient(118deg, transparent 38%, rgb(255 255 255 / .06) 44%, transparent 52%),
    radial-gradient(ellipse at center, transparent 50%, rgb(0 0 0 / .7) 100%);
  box-shadow: inset 0 0 calc(8 * var(--u)) rgb(0 0 0 / .85);
}
.screen .noise { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; background: var(--grain, #222) 0 0 / 128px 128px; mix-blend-mode: screen; }
.screen.is-tuning .noise { opacity: .85; animation: grain .12s steps(4) infinite; }
.screen.is-tuning img.feed, .screen.is-tuning .slide.is-on { opacity: .25; }
.osd {
  position: absolute; z-index: 5; inset: auto 7% 7% 7%; margin: 0;
  display: flex; justify-content: space-between; gap: calc(3 * var(--u));
  font: calc(7 * var(--u)) / 1 var(--f-crt); letter-spacing: .06em; color: #f2f7ff; white-space: nowrap;
  text-shadow: 0 0 calc(2 * var(--u)) rgb(200 225 255 / .8), calc(.5 * var(--u)) 0 rgb(255 0 60 / .35), calc(-.5 * var(--u)) 0 rgb(0 200 255 / .35);
  pointer-events: none;
}
.osd--top { inset: 7% 7% auto 7%; }
.osd--center { justify-content: center; }
.osd .rec::before { content: "●"; color: var(--alarm); margin-right: .3em; animation: blink 1.2s steps(2) infinite; }

/* tint modes for camera feeds */
.console[data-tint="mixed"] .crt:not(.crt--wide) img.feed,
.console[data-tint="blue"] .crt img.feed { filter: grayscale(1) sepia(.4) hue-rotate(178deg) saturate(1.7) brightness(.95) contrast(1.15); }
.console[data-tint="mixed"] .crt--wide img.feed { filter: saturate(.8) sepia(.15) contrast(1.08) brightness(.95); }
.console[data-tint="night"] .crt img.feed { filter: grayscale(1) sepia(1) hue-rotate(60deg) saturate(2.6) brightness(1.05) contrast(1.25); }
.console[data-tint="color"] .crt img.feed { filter: saturate(1.05) contrast(1.05); }
.crt:hover img.feed, .crt:focus-visible img.feed { filter: none !important; }

.tv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.screen--main { cursor: var(--cur-hand); }
.tv-sound { pointer-events: auto; border: 0; padding: 0; background: none; cursor: var(--cur-hand); font: inherit; letter-spacing: inherit; color: inherit; text-shadow: inherit; }
.tv-sound[aria-pressed="true"]::before { content: "♪ "; color: var(--amber); }
/* main broadcast */
.screen--main .osd { font-size: calc(10 * var(--u)); }

/* light leaving the glass */
.glow { position: absolute; background: radial-gradient(closest-side, rgb(var(--c, 150 195 255) / .5), transparent); opacity: .3; filter: blur(calc(6 * var(--u))); animation: flicker 4s infinite steps(1); }
.glow--main { --c: var(--main-glow); opacity: .42; transition: background .8s; }

/* ================= Desk props ================= */
.frame { /* wooden picture frame */
  padding: calc(4 * var(--u)); transform: rotate(-3deg);
  background: linear-gradient(135deg, #8a5a32, #5a3518 50%, #7a4a26);
  box-shadow: inset 0 0 0 calc(1 * var(--u)) #2e1a08, inset 0 0 0 calc(2 * var(--u)) #a8794c, 0 calc(4 * var(--u)) calc(6 * var(--u)) rgb(0 0 0 / .75);
}
.frame img { width: 100%; height: 100%; object-fit: cover; box-shadow: inset 0 0 0 1px #000; filter: sepia(.2) contrast(1.05); }
.newspaper { object-fit: contain; transform: rotate(-9deg); filter: drop-shadow(0 calc(4 * var(--u)) calc(4 * var(--u)) rgb(0 0 0 / .8)) brightness(.86); pointer-events: none; }
.receipt {
  border: 0; cursor: var(--cur-hand); text-align: left; color: var(--ink);
  display: flex; flex-direction: column; gap: calc(2.4 * var(--u)); padding: calc(4 * var(--u)) calc(7 * var(--u)) calc(9 * var(--u));
  background:
    radial-gradient(circle, #1b1b1b calc(1.2 * var(--u)), transparent calc(1.4 * var(--u))) 0 0 / calc(5 * var(--u)) calc(6.5 * var(--u)) repeat-y,
    radial-gradient(circle, #1b1b1b calc(1.2 * var(--u)), transparent calc(1.4 * var(--u))) 100% 0 / calc(5 * var(--u)) calc(6.5 * var(--u)) repeat-y,
    linear-gradient(#fffdf6, var(--paper));
  font: calc(4.4 * var(--u)) / 1.1 var(--f-mono);
  transform-origin: 50% 0; animation: sway 6s ease-in-out infinite;
  filter: drop-shadow(0 calc(4 * var(--u)) calc(4 * var(--u)) rgb(0 0 0 / .6));
  --zz: calc(6 * var(--u));
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--zz) 100%;
}
.receipt:hover { background-color: #fff; filter: drop-shadow(0 calc(4 * var(--u)) calc(4 * var(--u)) rgb(0 0 0 / .6)) brightness(1.06); }
.receipt__cta { font: calc(6 * var(--u)) / 1.05 var(--f-display); text-align: center; }
.receipt__cta b { font-weight: 400; font-size: calc(9 * var(--u)); }
.receipt__arrow { align-self: center; width: calc(16 * var(--u)); height: calc(6 * var(--u)); background: #111; clip-path: polygon(0 30%, 62% 30%, 62% 0, 100% 50%, 62% 100%, 62% 70%, 0 70%); transform: rotate(-12deg); }
.receipt__row { display: flex; justify-content: space-between; border-bottom: calc(.4 * var(--u)) dotted #888; }
.receipt__row i { font-style: normal; }
.receipt__bar { height: calc(7 * var(--u)); background: repeating-linear-gradient(90deg, #111 0 calc(.6 * var(--u)), transparent 0 calc(1.3 * var(--u)), #111 0 calc(2.4 * var(--u)), transparent 0 calc(2.9 * var(--u))); }

/* ================= Memes vault: a 3D stack of TVs behind the deck ================= */
.vault {
  position: absolute; z-index: 1; inset: 0; overflow: hidden;
  opacity: 0; visibility: hidden; transform: scale(.9);
  transition: opacity .45s ease, transform .6s cubic-bezier(.6, 0, .3, 1), visibility 0s .6s;
}
.vault-open .vault { opacity: 1; visibility: visible; transform: none; transition: opacity .6s ease .35s, transform 1.3s cubic-bezier(.2, .8, .2, 1) .3s, visibility 0s; }
.restack { /* appears once the pile has been knocked about */
  position: absolute; z-index: 4; left: 50%; bottom: clamp(56px, 11vh, 96px); translate: -50% 12px; opacity: 0; pointer-events: none;
  font: 15px/1 var(--f-crt); letter-spacing: .24em; color: var(--amber); padding: 9px 16px 8px; border-radius: 8px; cursor: var(--cur-hand);
  background: rgb(10 12 15 / .82); border: 1px solid rgb(255 179 71 / .45); box-shadow: 0 0 18px rgb(255 179 71 / .18);
  transition: opacity .25s, translate .25s cubic-bezier(.3, 1.6, .5, 1);
}
.restack.is-on { opacity: 1; translate: -50% 0; pointer-events: auto; }
.restack:hover { background: rgb(30 24 12 / .9); }
/* FRAGILE: a kraft shipping label slapped over the pile on the first visit */
.fragile { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 16px; background: rgb(2 3 5 / .55); }
.fragile[hidden] { display: none; }
.fragile__label {
  --tape: repeating-linear-gradient(-45deg, #d9a514 0 14px, #141414 14px 28px);
  position: relative; width: min(360px, 100%); padding: 34px 26px 24px; text-align: center; color: #2a1a0c; rotate: -2deg;
  background: radial-gradient(120% 90% at 30% 20%, #e2c38c, #c99d5c 60%, #b0844a);   /* corrugated kraft */
  border-radius: 6px; box-shadow: inset 0 0 0 3px rgb(80 45 15 / .35), inset 0 0 30px rgb(90 50 15 / .35), 0 18px 40px rgb(0 0 0 / .7);
  animation: slap .45s cubic-bezier(.3, 1.6, .5, 1);
}
.fragile__label::before, .fragile__label::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; background: var(--tape); }   /* hazard tape */
.fragile__label::before { top: 0; border-radius: 6px 6px 0 0; }
.fragile__label::after { bottom: 0; border-radius: 0 0 6px 6px; }
.fragile__glass { width: 44px; height: 58px; fill: none; stroke: #b3261e; stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.fragile__label h2 { margin: 6px 0 4px; font: 44px/1 var(--f-display); letter-spacing: .12em; color: #b3261e; text-shadow: 0 1px 0 rgb(255 230 190 / .4); }
.fragile__label p { margin: 0 0 18px; font: 17px/1.25 var(--f-crt); letter-spacing: .06em; text-transform: uppercase; }
.fragile__ok {
  font: 20px/1 var(--f-display); letter-spacing: .2em; color: #fff3dc; padding: 10px 34px 9px; border: 0; border-radius: 8px; cursor: var(--cur-hand);
  background: linear-gradient(#c8372d, #8e1c15); box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 3px 0 #4a0d09, 0 6px 14px rgb(0 0 0 / .35);
}
.fragile__ok:hover { filter: brightness(1.1); }
.fragile__ok:active { translate: 0 2px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 1px 0 #4a0d09; }
@keyframes slap { from { opacity: 0; scale: 1.4; rotate: 6deg; } }
.vault__stage { position: absolute; inset: 0; z-index: 2; }
.vault__stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.vault__title { position: absolute; left: 0; right: 0; z-index: 3; margin: 0; text-align: center; pointer-events: none; padding-inline: 56px;
  bottom: max(18px, env(safe-area-inset-bottom, 0px) + 12px); font: clamp(18px, 2.6vw, 32px)/1 var(--f-display); letter-spacing: .14em; color: #fff; text-shadow: 0 0 14px rgb(160 210 255 / .8); }
.vault__static { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; pointer-events: none; }
.vault.is-on .vault__static { animation: crt-off .7s cubic-bezier(.6, 0, .4, 1) forwards; }
.gallery { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; padding: 0; list-style: none; } /* keyboard / screen-reader list of every meme */
.gallery .card { width: 1px; height: 1px; border: 0; padding: 0; }
.back {
  position: absolute; z-index: 7; top: max(16px, env(safe-area-inset-top, 0px) + 12px); right: max(16px, env(safe-area-inset-right, 0px));
  width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: var(--cur-hand); color: #fff;
  background: radial-gradient(circle at 38% 30%, #ffb0a0 0 8%, #ff4a35 22%, #b5170c 62%, #4d0603);
  box-shadow: 0 6px 12px rgb(0 0 0 / .7), 0 0 16px rgb(255 50 30 / .45), 0 0 0 3px #1b2026;
  transition: transform .15s;
}
.back svg { width: 20px; height: 20px; }
.back:hover { transform: scale(1.08); }
.back:active { transform: scale(.94); }

/* ================= Dialogs ================= */
.crt-dialog { border: 0; padding: 0; background: transparent; color: var(--phosphor); max-width: min(920px, calc(100vw - 32px)); width: 100%; }
.crt-dialog::backdrop { background: rgb(2 4 8 / .82); backdrop-filter: blur(4px); }
.crt-dialog[open] { animation: power-on .35s ease-out; }
.crt-dialog__frame {
  padding: clamp(10px, 2.4vw, 22px); border-radius: 16px; display: grid; gap: 12px;
  background: linear-gradient(#c3cbd4, #9aa4b0 20%, #6d7884), var(--tex) 0 0 / 300px; background-blend-mode: overlay, normal;
  box-shadow: inset 0 2px 0 rgb(255 255 255 / .6), inset 0 -3px 0 rgb(0 0 0 / .5), 0 30px 80px rgb(0 0 0 / .8);
}
.crt-dialog__screen { position: relative; overflow: hidden; background: #000; clip-path: url(#crt-glass-flat); }
.crt-dialog__screen img { width: 100%; max-height: 70vh; object-fit: contain; }
.crt-dialog__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(transparent 0 2px, rgb(0 0 0 / .22) 2px 3px), radial-gradient(ellipse, transparent 60%, rgb(0 0 0 / .7)); }
.crt-dialog__ctrl { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.crt-dialog__ctrl button, .crt-dialog__ctrl .btn { font: 20px/1 var(--f-crt); letter-spacing: .1em; text-decoration: none; color: #e9eef5; cursor: var(--cur-hand); border: 0; border-radius: 4px; padding: 8px 14px; background: linear-gradient(#20262e, #0c0f13); box-shadow: inset 0 1px 0 rgb(255 255 255 / .15), 0 2px 0 #000; }
.crt-dialog__ctrl button:hover, .crt-dialog__ctrl .btn:hover { color: var(--amber); }
.crt-dialog__ctrl .icon { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; }
.crt-dialog__ctrl .icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.crt-dialog__ctrl .close { margin-left: auto; background: radial-gradient(circle at 50% 35%, #ff6a52, #9d1209); color: #fff; }
.dossier { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: clamp(14px, 3vw, 28px); align-items: start; padding: clamp(16px, 3vw, 28px); border-radius: 14px; background: radial-gradient(ellipse at 40% 30%, #0e1a2a, #03060b); box-shadow: inset 0 0 0 4px #0b0d10, inset 0 0 40px #000; }
.dossier__mug { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 0 18px rgb(150 195 255 / .35)); }
.dossier__body { min-width: 0; }
.dossier__stamp { margin: 0; display: inline-block; font: 18px/1 var(--f-crt); letter-spacing: .14em; color: var(--alarm); border: 2px solid currentColor; padding: 4px 8px; transform: rotate(-3deg); }
.dossier h2 { margin: 10px 0 12px; font: 54px/1 var(--f-display); color: var(--paper); letter-spacing: .06em; }
.dossier dl { margin: 0 0 14px; display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
.dossier dt { font: 18px/1.2 var(--f-crt); color: var(--phosphor-dim); letter-spacing: .1em; text-transform: uppercase; }
.dossier dd { margin: 0; color: var(--phosphor); }
.dossier .hot-text { color: var(--alarm); }
.dossier p { margin: 0 0 14px; max-width: 60ch; color: #b9cbe0; }
.dossier .dossier__lede { font-size: 17px; color: var(--paper); }
.about-links { --u: 2.3px; display: flex; flex-wrap: wrap; gap: 8px; }
.about-links .soc__btn { width: 40px; height: 40px; border-radius: 6px; }

/* ================= Motion ================= */
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.14); } }
@keyframes roll { to { background-position: 0 300%, 0 0; } }
@keyframes grain { 0% { background-position: 0 0; } 25% { background-position: -64px 32px; } 50% { background-position: 48px -80px; } 75% { background-position: -96px -16px; } }
@keyframes flicker { 0%, 100% { opacity: .3; } 41% { opacity: .26; } 42% { opacity: .38; } 70% { opacity: .29; } 71% { opacity: .34; } }
@keyframes breathe { 50% { opacity: .82; } }
@keyframes beam { 50% { opacity: .78; } 53% { opacity: .9; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes sweep { from { left: -20%; } to { left: 100%; } }
@keyframes hang { from { opacity: 0; transform: translateY(-22px) rotate(-2.5deg); } }
@keyframes nudge { 50% { transform: translateY(calc(2 * var(--u))); } }
@keyframes sway { 50% { transform: rotate(1.8deg); } }
@keyframes thump { 50% { box-shadow: inset 0 calc(1.5 * var(--u)) calc(2 * var(--u)) #000, 0 0 calc(10 * var(--u)) rgb(var(--main-glow) / .7); } }
@keyframes logo-flicker { 0%, 92%, 94%, 97%, 100% { opacity: 1; } 93% { opacity: .55; } 96% { opacity: .75; } }
@keyframes power-on { from { transform: scaleY(.02) scaleX(.6); filter: brightness(3); } 60% { transform: scaleY(1.02) scaleX(1); } to { transform: none; filter: none; } }

@media (max-width: 640px) {
  .neo3d { width: 69vw; height: 60vh; }
  .neo-out .stage > .rig { transform: translate(-10%, 17%) perspective(1800px) rotateY(14deg) scale(1.12); }
  .neo-hai { font-size: 13px; }
}
@media (max-width: 560px) {
  .dossier { grid-template-columns: 1fr; }
  .dossier__mug { width: 120px; }
  .dossier h2 { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .dust { display: none; }
  .boot.is-off { animation: none; opacity: 0; }
}