@font-face { font-family: 'Inter Tight'; font-weight: 400; src: url('/vendor/fonts/inter-tight-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-weight: 500; src: url('/vendor/fonts/inter-tight-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-weight: 600; src: url('/vendor/fonts/inter-tight-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-weight: 700; src: url('/vendor/fonts/inter-tight-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-weight: 800; src: url('/vendor/fonts/inter-tight-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; src: url('/vendor/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; src: url('/vendor/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 700; src: url('/vendor/fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2'); }

:root {
  --bg: #07090b;
  --fg: #eef1f4;
  --dim: #8b95a1;
  --dimmer: #56606b;
  --line: rgba(255, 255, 255, 0.16);
  --blue: #4da3ff;
  --cyan: #9ccbff;
  --red: #ff3b3b;
  --amber: #ff3b3b;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
canvas { position: absolute; inset: 0; display: block; }
#hud, #fx { position: absolute; inset: 0; pointer-events: none; }
#fx { z-index: 5; }
#hud { z-index: 10; }
svg.overlay { position: absolute; inset: 0; width: 1920px; height: 1080px; overflow: visible; }

.mono { font-family: var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.abs { position: absolute; }

/* frame + corner brackets */
.frame { position: absolute; inset: 36px; border: 1px solid rgba(255,255,255,0.06); }
.corner { position: absolute; width: 26px; height: 26px; border-color: rgba(255,255,255,0.55); border-style: solid; border-width: 0; }
.corner.tl { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.corner.tr { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.corner.bl { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
.corner.br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

.topbar { position: absolute; top: 56px; left: 72px; right: 72px; height: 20px; font-size: 14px; color: var(--dim); display: flex; justify-content: space-between; }
.topbar b { color: var(--fg); font-weight: 500; }
.topbar .sep { color: var(--dimmer); margin: 0 12px; }
.rec { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--red); margin-right: 10px; vertical-align: 1px; box-shadow: 0 0 10px var(--red); }
.bottombar { position: absolute; bottom: 52px; left: 72px; right: 72px; font-size: 12px; color: var(--dimmer); display: flex; justify-content: space-between; }

/* step caption */
.caption { position: absolute; left: 72px; bottom: 112px; width: 980px; }
.caption .num { font-family: var(--mono); font-size: 15px; color: var(--blue); letter-spacing: 0.2em; margin-bottom: 14px; display: flex; align-items: center; gap: 14px; }
.caption .num::after { content: ''; height: 1px; width: var(--rule, 120px); background: var(--blue); opacity: 0.7; }
.caption .title { font-size: 58px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.02; text-transform: none; }
.caption .sub { margin-top: 14px; font-size: 24px; color: #b7c0ca; line-height: 1.35; max-width: 900px; font-weight: 400; }
.caption .title .accent { color: var(--blue); }
.caption.red .num { color: var(--red); }
.caption.red .num::after { background: var(--red); }

/* labels over actors */
.tag { position: absolute; transform: translate(-50%, -100%); font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; color: #06121f; background: var(--blue); padding: 3px 7px 2px; border-radius: 2px; white-space: nowrap; }
.tag::after { content: ''; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: inherit; }
.tag.op { background: var(--blue); }
.tag.hostile { background: var(--red); color: #1a0505; }
.tag.ugv { background: var(--cyan); color: #04161b; }
.tag.ghost { background: transparent; border: 1px dashed var(--amber); color: var(--amber); }
.tag.alert { background: var(--amber); color: #1a0f00; }
.roomtag { position: absolute; transform: translate(-50%, -50%); font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em; color: var(--dim); white-space: nowrap; text-align: center; }
.roomtag .state { display: block; margin-top: 4px; font-size: 12px; }
.roomtag.clear .state { color: var(--cyan); }
.roomtag.hostile .state { color: var(--red); }
.roomtag.stale .state { color: var(--amber); }
.roomtag.closed .state { color: var(--amber); }

/* callouts */
.callout { position: absolute; width: 420px; }
.callout .k { font-family: var(--mono); font-size: 14px; letter-spacing: 0.16em; color: var(--blue); margin-bottom: 8px; }
.callout .v { font-size: 25px; font-weight: 600; line-height: 1.22; letter-spacing: -0.01em; }
.callout.red .k { color: var(--red); }
.callout.amber .k { color: var(--amber); }
.callout.cyan .k { color: var(--cyan); }
.callout .box { background: rgba(7,9,11,0.72); border-left: 2px solid var(--blue); padding: 14px 18px 16px; backdrop-filter: blur(6px); }
.callout.red .box { border-left-color: var(--red); }
.callout.amber .box { border-left-color: var(--amber); }
.callout.cyan .box { border-left-color: var(--cyan); }

/* legend */
.legend { position: absolute; right: 72px; top: 118px; width: 300px; font-family: var(--mono); font-size: 14px; letter-spacing: 0.1em; color: var(--dim); background: rgba(7,9,11,0.55); border: 1px solid var(--line); padding: 16px 18px; }
.legend .h { color: var(--fg); margin-bottom: 12px; font-size: 13px; letter-spacing: 0.2em; }
.legend .row { display: flex; align-items: center; gap: 12px; height: 28px; }
.legend .chip { min-width: 46px; text-align: center; font-weight: 700; font-size: 13px; padding: 2px 5px; border-radius: 2px; color: #06121f; background: var(--blue); }
.legend .chip.h { background: var(--red); color: #1a0505; }
.legend .chip.u { background: var(--cyan); color: #04161b; }

/* PiP feed frame */
.pip { position: absolute; border: 1px solid rgba(156,203,255,0.6); }
.pip .lbl { position: absolute; top: -30px; left: 0; font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em; color: var(--cyan); white-space: nowrap; }
.pip .lbl2 { position: absolute; bottom: -28px; right: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--dim); white-space: nowrap; }
.pip .cross { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid rgba(156,203,255,0.5); border-radius: 50%; }
.pip .rc { position: absolute; top: 12px; left: 14px; font-family: var(--mono); font-size: 12px; color: #fff; letter-spacing: 0.12em; }
.pip .scan { position: absolute; left: 0; right: 0; height: 2px; background: rgba(98,227,255,0.25); }

/* counters */
.counters { position: absolute; right: 72px; bottom: 112px; display: flex; gap: 14px; }
.counter { border: 1px solid var(--line); background: rgba(7,9,11,0.6); padding: 12px 16px 10px; min-width: 170px; }
.counter .k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; color: var(--dim); }
.counter .v { font-family: var(--mono); font-size: 34px; font-weight: 500; margin-top: 6px; letter-spacing: 0.02em; }
.counter.red .v { color: var(--red); }
.counter.amber .v { color: var(--amber); }
.counter.cyan .v { color: var(--cyan); }

.ff { opacity: 0; position: absolute; top: 100px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 16px; letter-spacing: 0.2em; color: var(--amber); border: 1px solid rgba(255,177,59,0.5); padding: 6px 14px; background: rgba(7,9,11,0.6); }

/* problem cards */
.card { position: absolute; left: 72px; top: 170px; width: 700px; background: rgba(7,9,11,0.82); border: 1px solid var(--line); border-top: 2px solid var(--red); padding: 30px 34px 34px; backdrop-filter: blur(8px); }
.card .n { font-family: var(--mono); font-size: 15px; letter-spacing: 0.2em; color: var(--red); }
.card .t { font-size: 64px; font-weight: 800; letter-spacing: -0.03em; margin-top: 12px; line-height: 1; }
.card .b { font-size: 25px; color: #c3cbd4; margin-top: 18px; line-height: 1.38; }
.card .extra { margin-top: 24px; }

.bubble { position: absolute; transform: translate(-50%, -100%); background: rgba(7,9,11,0.88); border: 1px solid rgba(255,255,255,0.3); padding: 8px 12px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; color: var(--fg); white-space: nowrap; }
.bubble .who { color: var(--amber); margin-right: 8px; }

.vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%); }
.grain { position: absolute; inset: 0; opacity: 0.035; background-size: 256px 256px; mix-blend-mode: screen; }
.dim { position: absolute; inset: 0; background: #05070a; opacity: 0; }
.redflash { position: absolute; inset: 0; box-shadow: inset 0 0 220px 40px rgba(255,40,40,0.8); opacity: 0; }

.title-wrap { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.bigtitle { font-size: 220px; font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.titlerule { height: 1px; background: var(--blue); margin-top: 34px; }
.titlesub { margin-top: 26px; font-family: var(--mono); font-size: 18px; letter-spacing: 0.4em; color: var(--dim); }

table.cmp { border-collapse: collapse; width: 100%; }
table.cmp td { padding: 18px 0; border-top: 1px solid var(--line); font-size: 26px; vertical-align: top; }
table.cmp td.k { font-family: var(--mono); font-size: 14px; letter-spacing: 0.16em; color: var(--dim); width: 300px; padding-top: 24px; }
table.cmp td.a { color: #aab3bd; width: 440px; }
table.cmp td.b { color: var(--fg); font-weight: 600; }
table.cmp th { text-align: left; font-family: var(--mono); font-size: 14px; letter-spacing: 0.2em; font-weight: 500; padding-bottom: 14px; }

/* ---------------- 2D slides */
.slide { position: absolute; inset: 0; display: none; background: var(--bg); overflow: hidden; }
.fromimg { position: absolute; inset: 0; width: 1920px; height: 1080px; z-index: 50; }
.kicker { position: absolute; font-size: 15px; letter-spacing: 0.22em; color: var(--blue); display: flex; align-items: center; gap: 14px; }
.kicker::after { content: ''; width: 90px; height: 1px; background: var(--blue); opacity: .7; }
.h1 { position: absolute; font-size: 76px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; }
.p { position: absolute; font-size: 28px; line-height: 1.38; color: #b7c0ca; }
span.red, .plabel3.red { color: var(--red); }
.giant.blue { color: var(--blue); }
.giant { position: absolute; font-size: 170px; font-weight: 800; letter-spacing: -0.045em; line-height: 1; white-space: nowrap; }
.strike { position: absolute; height: 10px; background: var(--red); width: 0; box-shadow: 0 0 20px rgba(255,59,59,.5); }
.xitem { position: absolute; font-size: 16px; letter-spacing: .2em; color: var(--dim); text-decoration: line-through; text-decoration-color: var(--red); }
.xitem .x { color: var(--red); margin-right: 12px; text-decoration: none; display: inline-block; }
.pill { position: absolute; width: 230px; border-top: 1px solid var(--line); padding-top: 16px; }
.pill .n { font-size: 14px; letter-spacing: .2em; color: var(--blue); }
.pill .t { font-size: 26px; font-weight: 600; margin-top: 8px; letter-spacing: -0.01em; }
.bracket { position: absolute; border: 2px solid var(--red); }
.bracket .bl { position: absolute; left: -2px; top: -34px; font-size: 14px; letter-spacing: .18em; color: #1a0505; background: var(--red); padding: 5px 10px 4px; white-space: nowrap; }
.panel { position: absolute; border: 1px solid var(--line); background: rgba(12,15,19,0.8); }
.panel .plabel { position: absolute; top: 14px; left: 18px; font-size: 13px; letter-spacing: .2em; color: var(--dim); }
.panel .plabel2 { position: absolute; bottom: 16px; left: 24px; font-size: 16px; letter-spacing: .2em; color: var(--blue); }
.panel .plabel3 { position: absolute; bottom: 16px; right: 24px; font-size: 16px; letter-spacing: .2em; }
.eglow { position: absolute; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle, rgba(140,200,255,1) 0%, rgba(77,163,255,.7) 30%, rgba(77,163,255,0) 70%); }
.ring { position: absolute; left: 960px; top: 300px; width: 180px; height: 180px; border: 2px solid var(--red); border-radius: 50%; }
.livedot { position: absolute; left: 960px; top: 300px; width: 34px; height: 34px; border-radius: 50%; background: var(--red); box-shadow: 0 0 30px var(--red); }
.tglow { position: absolute; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(160,210,255,.95) 0%, rgba(77,163,255,.55) 28%, rgba(77,163,255,0) 68%); mix-blend-mode: screen; }
.tlabel { position: absolute; font-size: 15px; letter-spacing: .16em; color: #cfe4ff; background: rgba(7,9,11,.7); padding: 3px 8px; white-space: nowrap; }
.gaze { position: absolute; width: 96px; height: 96px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.gaze::after { content: 'GAZE'; position: absolute; top: -26px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 12px; letter-spacing: .2em; color: #fff; }
.step { position: absolute; font-size: 23px; line-height: 1.35; color: #c3cbd4; padding-left: 56px; }
.step .n { position: absolute; left: 0; top: 4px; font-size: 14px; letter-spacing: .2em; color: var(--blue); }
.bars { position: absolute; right: 150px; top: 50px; display: flex; gap: 14px; align-items: flex-end; height: 160px; }
.bar { width: 34px; height: 160px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.bar .fill { width: 34px; background: rgba(255,255,255,.25); }
.bar .bl { font-size: 11px; color: var(--dim); margin-top: 6px; letter-spacing: .06em; }
.panel .cmd { position: absolute; right: 22px; top: 96px; font-size: 22px; letter-spacing: .14em; color: var(--blue); border: 1px solid var(--blue); padding: 8px 12px; }
.node { position: absolute; width: 360px; }
.node .ph { width: 360px; height: 240px; border: 1px solid var(--line); background: #0c0f13 no-repeat; display: flex; align-items: center; justify-content: center; }
.node .chip { font-size: 20px; letter-spacing: .2em; color: var(--blue); border: 1px solid var(--blue); padding: 14px 18px; }
.node .n { font-size: 15px; letter-spacing: .2em; color: var(--blue); margin-top: 20px; }
.node .s { font-size: 22px; line-height: 1.35; color: #c3cbd4; margin-top: 10px; }
.badge { position: absolute; font-size: 15px; letter-spacing: .2em; color: var(--fg); border: 1px solid var(--blue); padding: 12px 16px; }
.rcard { position: absolute; width: 530px; }
.rcard .ph { width: 530px; height: 290px; background: #0c0f13 center/cover no-repeat; border: 1px solid var(--line); }
.rcard .n { font-size: 15px; letter-spacing: .2em; color: var(--blue); margin-top: 22px; }
.rcard .t { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; margin-top: 10px; }
.rcard .s { font-size: 22px; line-height: 1.38; color: #b7c0ca; margin-top: 12px; }
.callout.big .k { font-size: 20px; letter-spacing: .18em; margin-bottom: 10px; }
.callout.big .v { font-size: 38px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.callout.big .box { padding: 18px 22px 20px; border-left-width: 3px; }
.reason { position: absolute; font-size: 58px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; color: var(--fg); white-space: nowrap; }
.reason .rx { color: var(--red); margin-right: 22px; font-weight: 800; }

/* relay bubbles (big) */
.bubble.big { font-family: var(--sans); font-size: 24px; font-weight: 600; letter-spacing: -0.01em; padding: 12px 18px 14px; border: 1.5px solid rgba(255,255,255,0.7); background: rgba(7,9,11,0.92); white-space: nowrap; }
.bubble.big .who { font-family: var(--mono); font-size: 14px; letter-spacing: .18em; color: #9ccbff; margin-bottom: 6px; font-weight: 500; }
.bubble.big::after { content: ''; position: absolute; left: 50%; bottom: -10px; margin-left: -9px; border: 9px solid transparent; border-bottom: 0; border-top-color: rgba(255,255,255,0.7); }

/* wide problem cards */
.card.wide { width: 1140px; }
.slow { margin-top: 30px; }
.trow { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.trow .lbl { width: 120px; font-size: 13px; letter-spacing: .16em; color: var(--dim); }
.trow .track { flex: 1; height: 44px; display: flex; gap: 3px; background: rgba(255,255,255,0.03); }
.trow .ph { height: 100%; overflow: hidden; display: flex; align-items: center; }
.trow .ph span { font-size: 13px; letter-spacing: .12em; padding-left: 10px; white-space: nowrap; color: #fff; }
.trow .ph.wait { background: rgba(255,59,59,0.75); }
.trow .ph.go { background: rgba(77,163,255,0.85); }
.tlegend { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 13px; letter-spacing: .16em; color: var(--dim); }
.tlegend .sw { width: 18px; height: 18px; display: inline-block; margin-left: 18px; }
.tlegend .sw:first-child { margin-left: 0; }
.tlegend .sw.wait { background: rgba(255,59,59,0.75); } .tlegend .sw.go { background: rgba(77,163,255,0.85); }

.chain { display: flex; align-items: flex-start; gap: 18px; margin-top: 34px; }
.chain .node, .chain .man { position: relative; display: flex; flex-direction: column; align-items: center; }
.chain .nm { font-size: 14px; letter-spacing: .18em; color: var(--fg); margin-top: 8px; }
.chain .say { position: relative; margin-top: 12px; font-size: 20px; font-weight: 600; line-height: 1.25; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.35); padding: 10px 14px; white-space: nowrap; text-align: center; }
.chain .say.g { font-size: 18px; color: #ffb0b0; border-color: rgba(255,59,59,0.6); padding: 8px 10px; }
.chain .pipe { position: relative; width: 120px; height: 2px; margin-top: 42px; background: rgba(255,255,255,0.25); }
.chain .pipe .dot { position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #fff; margin-left: -5px; }
.chain .men { display: flex; gap: 14px; }
.stale { display: flex; align-items: center; gap: 14px; margin-top: 30px; font-size: 16px; letter-spacing: .2em; color: var(--red); }
.ssvep { position: absolute; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle, rgba(160,210,255,.55) 0%, rgba(77,163,255,.25) 45%, rgba(77,163,255,0) 70%); display: flex; align-items: center; justify-content: center; }
.ssvep span { font-size: 26px; color: #dff0ff; text-shadow: 0 0 12px #4da3ff; }
.ssvep i { position: absolute; top: 60px; font-style: normal; font-size: 11px; letter-spacing: .12em; color: #9ccbff; white-space: nowrap; }
.ssvep.on { box-shadow: 0 0 0 2px #fff inset; }
.ssvep-cmd { position: absolute; right: 12px; top: 10px; font-size: 13px; letter-spacing: .16em; color: #fff; background: rgba(77,163,255,.35); padding: 4px 8px; }
.pill2 { font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: #04121f; background: var(--blue); padding: 5px 9px; white-space: nowrap; }
.punch { margin-top: 26px; font-size: 40px; font-weight: 800; letter-spacing: -0.02em; color: var(--blue); }
.howstep { position: absolute; font-size: 20px; letter-spacing: .2em; color: var(--fg); display: flex; gap: 12px; align-items: baseline; }
.howstep b { color: var(--blue); font-weight: 500; font-size: 15px; }
.howcmd { position: absolute; left: 1440px; top: 860px; border: 1.5px solid var(--blue); background: rgba(7,9,11,0.85); padding: 16px 22px; }
.howcmd .k { font-size: 13px; letter-spacing: .2em; color: var(--dim); }
.howcmd .v { font-size: 44px; font-weight: 800; color: var(--blue); margin: 6px 0; letter-spacing: -0.01em; }
.howcmd .k2 { font-size: 13px; letter-spacing: .18em; color: #9ccbff; }
.feedframe { position: absolute; background: #000; border: 1px solid rgba(255,255,255,0.18); }
.feedframe .c { position: absolute; width: 34px; height: 34px; border-color: var(--red); border-style: solid; border-width: 0; }
.feedframe .c.tl { left: -2px; top: -2px; border-top-width: 3px; border-left-width: 3px; }
.feedframe .c.tr { right: -2px; top: -2px; border-top-width: 3px; border-right-width: 3px; }
.feedframe .c.bl { left: -2px; bottom: -2px; border-bottom-width: 3px; border-left-width: 3px; }
.feedframe .c.br { right: -2px; bottom: -2px; border-bottom-width: 3px; border-right-width: 3px; }
.feedframe .lbl { position: absolute; top: -30px; left: 0; font-size: 14px; letter-spacing: .2em; color: var(--dim); }
.feedframe .rec { position: absolute; top: 18px; left: 22px; font-size: 15px; letter-spacing: .2em; color: #fff; display: flex; align-items: center; gap: 10px; }
.feedframe .rec span { width: 12px; height: 12px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); display: inline-block; }
.feedframe .stby { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-size: 20px; letter-spacing: .4em; color: var(--dim); }
.feedframe .ctl { position: absolute; bottom: -32px; right: 0; font-size: 13px; letter-spacing: .2em; color: var(--dim); }
.feedframe .ctl b { color: var(--blue); font-weight: 500; }
.rcard .ph { position: relative; overflow: hidden; }
.rcard .half { position: absolute; inset: 0; background-size: cover; background-position: center; }
.rcard .half.a { clip-path: polygon(0 0, 100% 0, 0 100%); }
.rcard .half.b { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.rcard .diag { position: absolute; inset: 0; }
.rcard .hl { position: absolute; font-size: 12px; letter-spacing: .2em; color: #fff; background: rgba(7,9,11,.6); padding: 4px 8px; }
.rcard .hl.a { left: 12px; top: 12px; } .rcard .hl.b { right: 12px; bottom: 12px; }
.pillars { position: absolute; left: 0; right: 0; top: 0; bottom: 0; padding: 150px 120px 0; }
.pillars .ph { font-size: 16px; letter-spacing: .22em; color: var(--blue); }
.pillars .headline { font-size: 88px; font-weight: 800; letter-spacing: -0.035em; margin-top: 14px; line-height: 1; }
.pillars .headline span { color: var(--blue); }
.pillars .cols { display: flex; gap: 32px; margin-top: 56px; }
.pillars .pc { flex: 1; border: 1.5px solid rgba(77,163,255,.5); background: rgba(7,9,11,.8); padding: 30px 30px 28px; min-height: 380px; position: relative; }
.pillars .tag2 { display: inline-block; font-size: 15px; letter-spacing: .2em; color: #04121f; background: var(--blue); padding: 7px 12px; }
.pillars .big { font-size: 84px; font-weight: 800; letter-spacing: -0.035em; margin-top: 26px; line-height: 1; white-space: nowrap; }
.pillars .big .n0 { color: var(--blue); }
.pillars .d { font-size: 27px; line-height: 1.32; color: #d3dae2; margin-top: 18px; }
.pillars .was { position: absolute; left: 30px; bottom: 24px; font-size: 13px; letter-spacing: .16em; color: var(--dim); }
.pillars .punch2 { margin-top: 44px; font-size: 56px; font-weight: 800; letter-spacing: -0.03em; color: var(--blue); }
.stopwatch { position: absolute; left: 1330px; top: 560px; width: 780px; height: 800px; opacity: 0; filter: drop-shadow(0 0 30px rgba(77,163,255,0.25)); }
.swnote { position: absolute; left: 72px; top: 560px; font-size: 54px; font-weight: 800; letter-spacing: -0.03em; }
.swnote span { color: var(--red); }
.hoptag { position: absolute; font-size: 18px; letter-spacing: .22em; color: #04121f; background: #9ccbff; padding: 6px 12px; white-space: nowrap; }
.card.slim { width: auto; padding-bottom: 26px; }
.card.slim .b, .card.slim .extra { display: none; }
.titletag { margin-top: 22px; font-size: 40px; font-weight: 600; letter-spacing: -0.01em; color: #cfd8e2; }
.titlesub { font-size: 30px !important; letter-spacing: 0.3em !important; color: var(--fg) !important; }
.title-wrap .bigtitle, .title-wrap .titletag, .title-wrap .titlesub { text-shadow: 0 0 18px #07090b, 0 0 36px #07090b, 0 0 6px #07090b; }
.howhist { position: absolute; left: 1370px; top: 740px; width: 480px; border: 1px solid rgba(255,255,255,0.2); background: rgba(7,9,11,0.82); padding: 16px 20px 18px; }
.howhist .k { font-size: 13px; letter-spacing: .2em; color: var(--dim); }
.howhist .bars4 { display: flex; gap: 22px; height: 190px; margin-top: 14px; align-items: flex-end; }
.howhist .hb { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.howhist .track { flex: 1; width: 100%; display: flex; align-items: flex-end; background: rgba(255,255,255,0.04); }
.howhist .fill { width: 100%; background: rgba(156,203,255,0.55); }
.howhist .hb.on .fill { background: #35d07f; box-shadow: 0 0 24px rgba(53,208,127,0.6); }
.howhist .lbl { margin-top: 8px; font-size: 14px; letter-spacing: .12em; color: var(--fg); text-align: center; }
.howhist .lbl span { font-size: 11px; color: var(--dim); }
.howhist .hb.on .lbl { color: #35d07f; }
.howhist .res { margin-top: 12px; font-size: 16px; letter-spacing: .16em; color: #35d07f; }

/* problem cards: translucent red so they read as problems */
.card { background: rgba(120, 14, 14, 0.5) !important; border: 1px solid rgba(255, 59, 59, 0.55) !important; border-top: 4px solid var(--red) !important; box-shadow: 0 0 60px rgba(255, 40, 40, 0.18); }
.card .n { color: #ffb3b3 !important; }
.card .b { color: #f1d6d6 !important; }

/* 3D sequences: captions sit bottom-right over a dark gradient */
.caption { left: auto !important; right: 72px; width: 1000px; text-align: right; }
.caption .num { flex-direction: row-reverse; justify-content: flex-start; }
.caption .sub { margin-left: auto; }
.bottomfade { position: absolute; left: 0; right: 0; bottom: 0; height: 460px; background: linear-gradient(to top, rgba(4,6,8,0.92) 0%, rgba(4,6,8,0.7) 40%, rgba(4,6,8,0) 100%); opacity: 0; }


.callout.purple .k { color: #b57bff; }
.callout.purple .box { border-left-color: #b57bff; }

.badge.big { font-size: 30px; font-weight: 700; letter-spacing: .14em; padding: 18px 26px; border-width: 2px; background: rgba(77,163,255,0.1); }

.badgerow { position: absolute; left: 120px; top: 860px; display: flex; gap: 28px; }
.badgerow .badge { position: relative; }

/* live demo: rover feed + per-target decoder scores */
.feedframe .feed { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.livehist { position: absolute; border: 1px solid rgba(255,255,255,0.18); background: rgba(12,15,19,0.85); padding: 24px 28px; box-sizing: border-box; }
.livehist .k { font-size: 14px; letter-spacing: .22em; color: var(--dim); }
.livehist .now { margin-top: 18px; display: flex; align-items: center; gap: 16px; height: 64px; color: var(--dimmer); }
.livehist .now .g { font-size: 48px; line-height: 1; }
.livehist .now .w { font-family: var(--mono); font-size: 30px; letter-spacing: .16em; font-weight: 700; }
.livehist .now.on { color: #35d07f; text-shadow: 0 0 18px rgba(53,208,127,0.55); }
.livehist .plot { position: absolute; left: 28px; right: 28px; top: 150px; bottom: 24px; }
.livehist .grid { position: absolute; left: 0; right: 0; top: 0; bottom: 85px; background: repeating-linear-gradient(to top, rgba(255,255,255,0.08) 0 1px, transparent 1px 25%); }
.livehist .lbars { position: absolute; inset: 0; display: flex; gap: 22px; height: auto; align-items: stretch; }
.livehist .lb { flex: 1; display: flex; flex-direction: column; align-items: center; }
.livehist .track { flex: 1; width: 100%; display: flex; align-items: flex-end; background: rgba(255,255,255,0.03); }
.livehist .fill { width: 100%; background: rgba(156,203,255,0.6); }
.livehist .lb.on .fill { background: #35d07f; box-shadow: 0 0 26px rgba(53,208,127,0.6); }
.livehist .gl { margin-top: 12px; font-size: 26px; color: var(--fg); line-height: 1; }
.livehist .nm { margin-top: 8px; font-size: 14px; letter-spacing: .14em; color: var(--fg); }
.livehist .hz { margin-top: 4px; font-size: 12px; letter-spacing: .12em; color: var(--dim); }
.livehist .lb.on .gl, .livehist .lb.on .nm { color: #35d07f; }
.livehist.offline .fill { background: rgba(255,255,255,0.12); }



/* website embed (?web=1): the page draws titles, captions and chrome */
.web .frame, .web .topbar, .web .bottombar, .web .caption, .web .bottomfade, .web .title-wrap, .web .vignette { display: none !important; }
/* neutral callout (website): facts about the building, not friend or foe */
.callout.grey .k { color: #c3cbd4; }
.callout.grey .box { border-left-color: #9aa6b2; }
/* website: the helmet scene's headlines are drawn by the page */
.helmet-web .giant, .helmet-web .h1, .helmet-web .kicker, .helmet-web .p { display: none !important; }