@font-face { font-family: "Arct Mono"; src: local("SFMono-Regular"), local("Menlo"), local("Consolas"); }

:root {
  color-scheme: light;
  --ink: #17212c;
  --ice: #f5f8fb;
  --blue: #96dcff;
  --blue-strong: #d5f2ff;
  --line: rgba(242, 248, 255, .42);
  --panel: rgba(224, 233, 241, .82);
  --panel-dark: rgba(19, 29, 40, .84);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { background: #aeb9c7; scroll-behavior: auto; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: #aeb9c7; color: white; font-family: "Arct Mono", ui-monospace, SFMono-Regular, Menlo, monospace; cursor: none; }
button, a, select { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--blue-strong); outline-offset: 3px; }

.experience { height: 100svh; height: 100dvh; }
.stage { position: relative; min-height: 600px; height: 100svh; height: 100dvh; overflow: hidden; isolation: isolate; background: #b9c3cf; }
.visual, .media, .mascot-hold, .mascot-hold__plate, .depth-fog, .fog-bridge, .bloom, .grain, .vignette { position: absolute; inset: 0; width: 100%; height: 100%; }
.visual { z-index: 0; background: #b9c3cf; }
.media { object-fit: cover; object-position: center; opacity: 0; transform: translateZ(0); backface-visibility: hidden; will-change: opacity; }
.media--artefact { object-position: center 48%; }
.media.is-visible { opacity: 1; }

.reactive-video {
  --reveal-x: 50vw; --reveal-y: 50vh; --reveal-radius: 210px;
  position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; transform: translateZ(0);
  -webkit-mask-image: radial-gradient(circle var(--reveal-radius) at var(--reveal-x) var(--reveal-y), #000 0 34%, rgba(0,0,0,.97) 48%, rgba(0,0,0,.6) 68%, transparent 100%);
  mask-image: radial-gradient(circle var(--reveal-radius) at var(--reveal-x) var(--reveal-y), #000 0 34%, rgba(0,0,0,.97) 48%, rgba(0,0,0,.6) 68%, transparent 100%);
  will-change: opacity, -webkit-mask-position, mask-position;
}
.reactive-video.is-reacting { opacity: .98; }
.reactive-video--shelter { z-index: 6; }
.reactive-video--mascot { --reveal-radius: 285px; z-index: 5; filter: contrast(1.04); }
.reactive-reticle { position: fixed; z-index: 18; top: 0; left: 0; width: 138px; height: 138px; border: 1px solid rgba(255,255,255,.46); border-radius: 50%; opacity: 0; transform: translate3d(-200px,-200px,0); pointer-events: none; box-shadow: 0 0 30px rgba(213,242,255,.1); will-change: transform, opacity; }
.reactive-reticle.is-reacting { opacity: 1; }
.reactive-reticle i { position: absolute; inset: 13px; border: 1px dashed rgba(255,255,255,.25); border-radius: inherit; animation: reticle-spin 12s linear infinite; }
.reactive-reticle span { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap; font-size: 7px; letter-spacing: .15em; text-shadow: 0 1px 8px rgba(0,0,0,.4); }

.mascot-hold { opacity: 0; pointer-events: none; background: #bec7d2; will-change: opacity; }
.mascot-hold__plate, .mascot-hold__subject { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mascot-hold__subject { transform-origin: 50% 58%; will-change: transform; }
.mascot-hold__shadow { position: absolute; left: 50%; top: 78%; width: min(24vw, 350px); height: min(3.2vw, 46px); border-radius: 50%; background: rgba(25,34,46,.17); filter: blur(18px); transform: translate(-50%,-50%); }

.depth-fog { inset: -8%; width: 116%; height: 116%; opacity: .1; pointer-events: none; mix-blend-mode: screen; will-change: transform, opacity; }
.depth-fog--far { background: radial-gradient(ellipse at 14% 74%, rgba(255,255,255,.5), transparent 31%), radial-gradient(ellipse at 89% 23%, rgba(235,244,255,.38), transparent 29%); filter: blur(34px); }
.depth-fog--near { background: radial-gradient(ellipse at 82% 87%, rgba(255,255,255,.32), transparent 33%), radial-gradient(ellipse at 6% 11%, rgba(255,255,255,.36), transparent 30%); filter: blur(58px); }
.fog-bridge { z-index: 6; opacity: 0; overflow: hidden; pointer-events: none; background: rgba(220,231,241,.06); will-change: opacity; }
.fog-bridge i { position: absolute; display: block; width: 88vw; height: 66vh; border-radius: 50%; background: radial-gradient(ellipse, rgba(250,253,255,.96) 0, rgba(230,240,249,.68) 33%, rgba(205,221,236,.18) 66%, transparent 74%); filter: blur(35px); opacity: .82; will-change: transform; }
.fog-bridge i:nth-child(1) { left: -30vw; top: -14vh; }
.fog-bridge i:nth-child(2) { right: -26vw; top: 20vh; }
.fog-bridge i:nth-child(3) { left: 12vw; bottom: -37vh; width: 110vw; }
.bloom { z-index: 7; pointer-events: none; opacity: 0; background: radial-gradient(circle at center, white 0, rgba(246,251,255,.98) 16%, rgba(220,234,247,.52) 43%, transparent 73%); mix-blend-mode: screen; transform: scale(.64); will-change: opacity, transform; }
.grain { z-index: 8; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.58'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.vignette { z-index: 9; pointer-events: none; background: linear-gradient(90deg, rgba(20,29,40,.25), transparent 17% 82%, rgba(20,29,40,.14)), linear-gradient(0deg, rgba(20,29,40,.22), transparent 20% 80%, rgba(255,255,255,.04)); }

.hud { position: absolute; left: max(clamp(24px,4vw,68px), env(safe-area-inset-left)); right: max(clamp(24px,4vw,68px), env(safe-area-inset-right)); z-index: 40; display: flex; justify-content: space-between; align-items: flex-start; }
.hud--top { top: max(clamp(22px,4vh,48px), env(safe-area-inset-top)); }
.hud--bottom { bottom: max(clamp(20px,3.2vh,42px), env(safe-area-inset-bottom)); align-items: flex-end; }
.wordmark { text-decoration: none; font: 800 clamp(30px,3vw,48px)/.8 Arial, Helvetica, sans-serif; letter-spacing: -.095em; text-shadow: 0 0 24px rgba(255,255,255,.32); }
.wordmark__dot { margin-left: .22em; font-size: .28em; vertical-align: top; letter-spacing: 0; }
.header-actions { display: flex; align-items: center; gap: 22px; }
.header-status { display: flex; align-items: center; gap: 8px; font-size: 8px; letter-spacing: .14em; opacity: .78; }
.header-status i { width: 5px; height: 5px; border-radius: 50%; background: #d9f7ff; box-shadow: 0 0 12px #b9edff; }
.header-cta { padding: 10px 13px; border: 1px solid rgba(255,255,255,.58); background: rgba(24,35,47,.08); text-decoration: none; font-size: 8px; letter-spacing: .14em; backdrop-filter: blur(8px); }

.coordinate { position: absolute; z-index: 35; top: 50%; display: flex; align-items: center; gap: 12px; color: rgba(244,249,255,.74); writing-mode: vertical-rl; font-size: 8px; letter-spacing: .14em; text-shadow: 0 1px 8px rgba(18,31,49,.25); will-change: transform; }
.coordinate--left { left: clamp(11px,1.6vw,28px); transform: translateY(-50%) rotate(180deg); }
.coordinate--right { right: clamp(11px,1.6vw,28px); transform: translateY(-50%); }
.coordinate i { width: 1px; height: 42px; background: var(--line); }

.story { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.story-panel { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; will-change: opacity, transform, filter; }
.story-panel.is-active, .story-panel a, .story-panel button { pointer-events: auto; }
.eyebrow { margin: 0 0 17px; font-size: 8px; line-height: 1.4; letter-spacing: .2em; text-transform: uppercase; opacity: .75; }
.story-panel h1, .story-panel h2 { margin: 0; font-family: Arial, Helvetica, sans-serif; font-weight: 500; letter-spacing: -.055em; text-wrap: balance; }
.story-panel h1 { font-size: clamp(54px,6.6vw,108px); line-height: .86; }
.story-panel h2 { font-size: clamp(38px,4.8vw,78px); line-height: .94; }
.story-panel p { text-wrap: pretty; }

.story-panel--hero { left: clamp(28px,7.5vw,136px); top: 21vh; width: min(670px,50vw); height: auto; }
.story-panel--hero .lede { max-width: 570px; margin: 25px 0 0; font-family: Arial, Helvetica, sans-serif; font-size: clamp(14px,1.2vw,19px); line-height: 1.45; text-shadow: 0 2px 18px rgba(18,30,44,.25); }
.story-actions { display: flex; gap: 10px; margin-top: 30px; }
.button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 14px; padding: 0 17px; border: 1px solid rgba(255,255,255,.55); text-decoration: none; font-size: 8px; letter-spacing: .15em; cursor: none; }
.button--primary { border-color: var(--ice); background: var(--ice); color: var(--ink); }
.button--quiet { background: rgba(23,32,43,.08); backdrop-filter: blur(8px); }
.diagnostics { display: flex; gap: 24px; margin: 40px 0 0; }
.diagnostics div { display: grid; gap: 6px; min-width: 112px; border-left: 1px solid rgba(255,255,255,.43); padding-left: 10px; }
.diagnostics dt { font-size: 7px; letter-spacing: .16em; opacity: .62; }
.diagnostics dd { margin: 0; font-size: 9px; letter-spacing: .11em; }

.story-panel--perimeter { left: 50%; top: 24vh; width: min(680px,54vw); height: auto; transform: translateX(-50%); text-align: center; text-shadow: 0 2px 22px rgba(25,36,48,.34); }
.story-panel--perimeter p:last-child { max-width: 570px; margin: 24px auto 0; font-family: Arial, Helvetica, sans-serif; font-size: clamp(14px,1.15vw,18px); line-height: 1.5; }

.story-panel--core .section-copy { position: absolute; left: clamp(42px,6vw,108px); top: 17vh; width: min(410px,28vw); text-shadow: 0 2px 22px rgba(27,38,51,.3); }
.story-panel--core .section-copy h2 { font-size: clamp(40px,4.3vw,69px); }
.story-panel--core .section-copy > p:last-child { margin: 20px 0 0; font-family: Arial, Helvetica, sans-serif; font-size: clamp(13px,1vw,17px); line-height: 1.5; }
.instrument { position: absolute; overflow: hidden; border: 1px solid rgba(248,252,255,.62); border-radius: 6px; background: linear-gradient(145deg, rgba(236,243,248,.91), rgba(203,216,226,.75)); color: var(--ink); box-shadow: 0 18px 55px rgba(31,45,60,.2); backdrop-filter: blur(16px) saturate(.8); }
.instrument header { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 0 13px; border-bottom: 1px solid rgba(36,53,70,.13); font-size: 7px; letter-spacing: .15em; }
.instrument header b { color: #406276; font-size: 6px; font-weight: 600; }
.live-dot { width: 5px; height: 5px; border-radius: 50%; background: #57a8ca; box-shadow: 0 0 0 4px rgba(87,168,202,.13); }
.instrument--fleet { left: 6vw; bottom: 12vh; width: min(290px,22vw); }
.instrument--fleet > strong { display: block; padding: 16px 13px 9px; font: 500 29px/1 Arial, Helvetica, sans-serif; letter-spacing: -.04em; }
.instrument--fleet > strong small { margin-left: 3px; font: 10px/1 "Arct Mono", monospace; letter-spacing: .02em; }
.instrument ul { list-style: none; margin: 0; padding: 0 13px 11px; }
.instrument li { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid rgba(36,53,70,.1); font-size: 8px; }
.instrument em { font-style: normal; }.instrument .ok { color: #397a6b; }.instrument .wait { color: #8d6e31; }.instrument .warn { color: #8c4f43; }
.instrument footer { padding: 9px 13px; background: rgba(255,255,255,.25); font-size: 6px; letter-spacing: .12em; }
.instrument--health { right: 6vw; top: 15vh; width: min(300px,23vw); }
.metric-row { display: flex; align-items: baseline; gap: 8px; padding: 15px 13px 3px; }.metric-row strong { font: 500 30px/1 Arial, sans-serif; letter-spacing: -.04em; }.metric-row span { font-size: 6px; letter-spacing: .12em; opacity: .58; }
.instrument svg { display: block; width: calc(100% - 26px); height: 64px; margin: 3px 13px; overflow: visible; }.chart-grid { fill: none; stroke: rgba(37,54,72,.12); stroke-width: 1; }.chart-line { fill: none; stroke: #4d819d; stroke-width: 1.5; vector-effect: non-scaling-stroke; }.chart-area { fill: rgba(112,190,227,.13); }
.instrument--health dl { display: grid; grid-template-columns: 1fr 1fr; margin: 8px 13px 14px; }.instrument--health dl div { border-left: 1px solid rgba(36,53,70,.14); padding-left: 8px; }.instrument dt { font-size: 6px; letter-spacing: .1em; opacity: .55; }.instrument dd { margin: 5px 0 0; font-size: 10px; }
.instrument--routing { right: 8vw; bottom: 11vh; width: min(300px,23vw); }.instrument--routing dl { margin: 0; padding: 7px 13px 12px; }.instrument--routing dl div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(36,53,70,.1); }.instrument--routing dd { margin: 0; }

.story-panel--control { display: flex; align-items: center; justify-content: center; }
.control-shell { position: absolute; left: 50%; top: 50%; width: min(1180px,82vw); min-height: min(650px,71vh); transform: translate(-50%,-50%); overflow: hidden; border: 1px solid rgba(244,249,255,.7); border-radius: 8px; background: rgba(231,238,244,.94); color: var(--ink); box-shadow: 0 32px 100px rgba(27,39,53,.28); backdrop-filter: blur(18px); transform-origin: 50% 50%; }
.control-topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 58px; padding: 0 20px; border-bottom: 1px solid rgba(34,49,66,.14); background: rgba(249,251,253,.55); }
.control-topbar > strong { font-size: 9px; letter-spacing: .12em; }.control-topbar nav { display: flex; gap: 3px; }.control-topbar button { border: 0; background: transparent; color: rgba(23,33,44,.58); padding: 9px 10px; font-size: 7px; cursor: pointer; }.control-topbar nav .is-selected { color: var(--ink); border-bottom: 1px solid var(--ink); }.control-topbar > div { display: flex; justify-content: flex-end; gap: 4px; }.control-topbar .deploy { border-radius: 3px; background: var(--ink); color: white; }
.control-body { display: grid; grid-template-columns: 250px 1fr; min-height: calc(min(650px,71vh) - 58px); }
.control-summary { padding: 23px 20px; border-right: 1px solid rgba(34,49,66,.13); }.ui-label { margin: 0; font-size: 7px; letter-spacing: .15em; opacity: .55; }.control-summary h3 { margin: 8px 0 20px; font: 500 25px/1 Arial, sans-serif; letter-spacing: -.035em; }.summary-stat { display: grid; grid-template-columns: 1fr auto; align-items: baseline; padding: 11px 0; border-top: 1px solid rgba(34,49,66,.12); }.summary-stat span { font-size: 8px; opacity: .58; }.summary-stat strong { font: 500 18px/1 Arial, sans-serif; }.summary-stat em { grid-column: 2; margin-top: 5px; color: #387464; font-size: 6px; font-style: normal; letter-spacing: .1em; }.summary-stat em.warn { color: #956a3b; }
.policy-mini { margin-top: 19px; border: 1px solid rgba(34,49,66,.13); border-radius: 4px; padding: 12px; background: rgba(255,255,255,.24); }.policy-mini header { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 6px; letter-spacing: .12em; }.policy-mini header b { color: #387464; }.policy-mini p { display: flex; justify-content: space-between; margin: 0; padding: 6px 0; border-top: 1px solid rgba(34,49,66,.09); font-size: 7px; }.policy-mini p em { font-style: normal; color: #537183; }
.fleet-surface { min-width: 0; padding: 22px 24px; }.surface-heading { display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 24px; }.surface-heading > div:first-child { display: grid; gap: 7px; }.surface-heading span { font-size: 6px; letter-spacing: .12em; opacity: .54; }.surface-heading strong { font: 500 23px/1 Arial, sans-serif; letter-spacing: -.03em; }.performance-deltas { display: flex; gap: 17px; }.performance-deltas span { display: grid; gap: 5px; }.performance-deltas b { color: #3e7891; font: 500 13px/1 Arial, sans-serif; letter-spacing: -.01em; }.legend { display: flex; gap: 13px; }.legend span { display: flex; align-items: center; gap: 5px; }.legend i, .status-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; }.legend i.ok, .status-dot.ok { background: #4a917e; }.legend i.warn, .status-dot.warn { background: #b07b45; }.status-dot.wait { background: #c0954f; }
.fleet-chart { width: 100%; height: 22vh; min-height: 140px; max-height: 190px; margin: 18px 0 10px; overflow: visible; }.fleet-chart .chart-area { transform-box: fill-box; transform-origin: 50% 100%; will-change: transform, opacity; }.fleet-chart .chart-line { stroke-dasharray: 1400; stroke-dashoffset: 1400; transform-box: fill-box; transform-origin: 50% 100%; will-change: transform, stroke-dashoffset; }.agent-table { border-top: 1px solid rgba(34,49,66,.13); }.agent-row { display: grid; width: 100%; grid-template-columns: 2fr 1fr .8fr .7fr .6fr .55fr; align-items: center; min-height: 43px; padding: 0 10px; border: 0; border-bottom: 1px solid rgba(34,49,66,.1); background: transparent; color: var(--ink); text-align: left; font-size: 7px; cursor: pointer; }.agent-row--head { min-height: 29px; font-size: 6px; letter-spacing: .1em; opacity: .5; }.agent-row--selected { background: rgba(141,207,238,.2); box-shadow: inset 2px 0 #6ab9de; }.agent-row > span { display: flex; align-items: center; gap: 7px; }.agent-icon { display: inline-grid; width: 21px; height: 21px; place-items: center; border: 1px solid rgba(34,49,66,.15); border-radius: 3px; font-style: normal; font-size: 7px; }
.control-copy { position: absolute; left: 9vw; bottom: 7vh; width: min(560px,42vw); text-shadow: 0 2px 24px rgba(19,29,41,.45); }.control-copy h2 { font-size: clamp(32px,3.4vw,55px); }.control-copy > p:last-child { max-width: 500px; margin: 14px 0 0; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.45; }
.trace-orbit { position: absolute; left: 50%; top: 50%; width: min(32vw,480px); aspect-ratio: 1; border: 1px solid rgba(222,246,255,.8); border-radius: 50%; transform: translate(-50%,-50%) scale(.2); opacity: 0; box-shadow: 0 0 50px rgba(154,226,255,.28), inset 0 0 50px rgba(154,226,255,.2); }.trace-orbit::before, .trace-orbit::after { content: ""; position: absolute; border: 1px solid rgba(222,246,255,.45); border-radius: 50%; inset: 17%; }.trace-orbit::after { inset: 35%; }.trace-orbit i { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: white; box-shadow: 0 0 15px #9ee4ff; transform: rotate(calc(var(--i) * 60deg)) translateY(-15vw); }.trace-orbit i:nth-child(1){--i:0}.trace-orbit i:nth-child(2){--i:1}.trace-orbit i:nth-child(3){--i:2}.trace-orbit i:nth-child(4){--i:3}.trace-orbit i:nth-child(5){--i:4}.trace-orbit i:nth-child(6){--i:5}.trace-orbit span { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 7px; letter-spacing: .15em; }

.story-panel--trace { text-shadow: 0 2px 22px rgba(17,27,39,.35); }.trace-copy { position: absolute; left: 7vw; top: 16vh; width: min(500px,35vw); }.trace-copy h2 { font-size: clamp(35px,4vw,64px); }.trace-nodes { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }.trace-nodes li { position: absolute; display: flex; align-items: center; gap: 11px; opacity: .22; }.trace-nodes li:nth-child(1){left:19vw;top:47vh}.trace-nodes li:nth-child(2){left:31vw;top:27vh}.trace-nodes li:nth-child(3){right:29vw;top:23vh}.trace-nodes li:nth-child(4){right:17vw;top:44vh}.trace-nodes li:nth-child(5){right:26vw;bottom:19vh}.trace-nodes li:nth-child(6){left:25vw;bottom:18vh}.trace-nodes li > i { width: 8px; height: 8px; border: 1px solid white; border-radius: 50%; box-shadow: 0 0 0 7px rgba(255,255,255,.11), 0 0 16px rgba(205,241,255,.35); }.trace-nodes li div { display: grid; grid-template-columns: auto auto; gap: 5px 11px; min-width: 188px; padding: 11px 13px; border: 1px solid rgba(255,255,255,.45); background: rgba(20,31,43,.28); box-shadow: 0 12px 34px rgba(14,24,35,.12); backdrop-filter: blur(12px); }.trace-nodes li span { grid-row: 1 / 3; font-size: 8px; opacity: .58; }.trace-nodes li strong { font: 500 12px/1 Arial, sans-serif; }.trace-nodes li em { font-size: 8px; font-style: normal; opacity: .76; }
.trace-event-card { position: absolute; z-index: 3; width: min(360px,27vw); overflow: hidden; border: 1px solid rgba(247,252,255,.62); border-radius: 5px; background: rgba(21,32,44,.78); color: white; box-shadow: 0 20px 58px rgba(7,13,20,.22); backdrop-filter: blur(18px); }.trace-event-card--account { right: 8vw; top: 24vh; }.trace-event-card--approval { left: 39vw; bottom: 12vh; }.trace-event-card header { display: flex; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.14); font-size: 7px; letter-spacing: .12em; }.trace-event-card header b { color: #bdeeff; }.trace-event-card--approval header b { color: #ffe2a7; }.trace-event-card > div { display: flex; align-items: center; gap: 13px; padding: 16px 14px 13px; }.trace-event-icon { display: grid; flex: 0 0 34px; height: 34px; place-items: center; border: 1px solid rgba(255,255,255,.36); border-radius: 50%; color: #ccefff; font: 500 15px/1 Arial, sans-serif; }.trace-event-card p { display: grid; gap: 6px; margin: 0; }.trace-event-card p strong { font: 500 16px/1.1 Arial, sans-serif; }.trace-event-card p small { max-width: 250px; font-size: 7px; line-height: 1.45; opacity: .64; }.trace-event-card dl { display: grid; grid-template-columns: repeat(3,1fr); margin: 0 14px 14px; border-top: 1px solid rgba(255,255,255,.12); }.trace-event-card dl div { padding: 11px 8px 0 0; }.trace-event-card dt { font-size: 6px; letter-spacing: .1em; opacity: .48; }.trace-event-card dd { margin: 5px 0 0; font-size: 8px; }
.trace-inspector { position: absolute; right: 7vw; bottom: 11vh; width: min(330px,25vw); overflow: hidden; border: 1px solid rgba(248,252,255,.55); border-radius: 5px; background: rgba(22,32,44,.76); box-shadow: 0 20px 60px rgba(7,13,20,.22); backdrop-filter: blur(16px); }.trace-inspector header { display: flex; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.15); font-size: 6px; letter-spacing: .12em; }.trace-inspector header b { color: #ffe2a7; }.trace-inspector h3 { margin: 14px 14px 10px; font: 500 16px/1 Arial, sans-serif; }.trace-inspector dl { margin: 0 14px; }.trace-inspector dl div { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.1); }.trace-inspector dt { font-size: 7px; opacity: .55; }.trace-inspector dd { margin: 0; font-size: 7px; }.trace-inspector button { width: calc(100% - 28px); margin: 8px 14px 14px; padding: 10px; border: 1px solid rgba(255,255,255,.36); border-radius: 3px; background: rgba(255,255,255,.08); cursor: pointer; font-size: 7px; letter-spacing: .08em; }

.story-panel--niva .niva-copy { position: absolute; left: 7vw; top: 19vh; width: min(470px,35vw); text-shadow: 0 2px 24px rgba(20,31,43,.32); }.niva-copy h2 { font-size: clamp(38px,4.5vw,72px); }.niva-copy > p:last-child { max-width: 430px; margin-top: 21px; font-family: Arial, sans-serif; font-size: clamp(13px,1vw,16px); line-height: 1.5; }
.niva-interaction-cue { position: absolute; z-index: 4; left: 50%; top: 68vh; display: flex; align-items: center; gap: 12px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.48); border-radius: 4px; background: rgba(21,32,44,.2); transform: translateX(-50%); text-shadow: 0 1px 9px rgba(18,29,41,.35); backdrop-filter: blur(9px); }.niva-interaction-cue > i { width: 18px; height: 18px; border: 1px dashed rgba(255,255,255,.72); border-radius: 50%; animation: reticle-spin 6s linear infinite; }.niva-interaction-cue p { display: grid; gap: 4px; margin: 0; }.niva-interaction-cue span { font-size: 7px; letter-spacing: .13em; }.niva-interaction-cue small { font-size: 6px; letter-spacing: .09em; opacity: .58; }
.niva-stack-card { position: absolute; right: 6.5vw; top: 20vh; width: min(430px,32vw); overflow: hidden; border: 1px solid rgba(247,251,255,.72); border-radius: 7px; background: linear-gradient(145deg, rgba(237,243,248,.95), rgba(208,221,231,.86)); color: var(--ink); box-shadow: 0 25px 70px rgba(26,38,51,.23); backdrop-filter: blur(18px); transform-origin: 50% 0; will-change: transform, opacity, filter; }
.niva-stack-card > header { display: flex; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(29,43,58,.13); font-size: 6px; letter-spacing: .12em; }.niva-stack-card header div { display: flex; align-items: center; gap: 8px; }.niva-stack-card header i { width: 6px; height: 6px; border-radius: 50%; background: #4da4cb; box-shadow: 0 0 0 4px rgba(77,164,203,.12); }.niva-stack-card header b { color: #577180; }
.niva-card { z-index: 5; }
.niva-query, .niva-response { margin: 15px 16px 0; padding: 12px; border: 1px solid rgba(29,43,58,.12); border-radius: 4px; background: rgba(255,255,255,.3); }.niva-query > span, .niva-response > span { font-size: 6px; letter-spacing: .14em; opacity: .5; }.niva-query p { margin: 7px 0 0; font: 500 14px/1.35 Arial, sans-serif; }.niva-response { background: rgba(116,190,225,.12); }.niva-response p { margin: 8px 0 0; font: 13px/1.5 Arial, sans-serif; }.niva-actions { display: flex; gap: 6px; margin: 13px 16px; }.niva-actions button { flex: 1; padding: 10px 5px; border: 1px solid rgba(29,43,58,.18); border-radius: 3px; background: rgba(255,255,255,.32); color: var(--ink); cursor: pointer; font-size: 7px; }.niva-actions button:first-child { background: var(--ink); color: white; }.niva-card footer { display: flex; gap: 11px; padding: 12px 16px; border-top: 1px solid rgba(29,43,58,.12); font-size: 6px; letter-spacing: .08em; color: #496b7e; }
.niva-side-card { z-index: 2; min-height: 306px; background: linear-gradient(145deg, rgba(231,239,246,.96), rgba(194,211,223,.9)); }.niva-side-card--policy { z-index: 3; }.niva-side-heading { display: grid; grid-template-columns: 1fr 1.1fr; align-items: end; gap: 18px; padding: 18px 17px 4px; }.niva-side-heading > div { display: grid; gap: 7px; }.niva-side-heading span, .niva-policy-body span { font-size: 6px; letter-spacing: .12em; opacity: .53; }.niva-side-heading strong, .niva-policy-body strong { font: 500 36px/1 Arial, sans-serif; letter-spacing: -.045em; }.niva-side-heading p { margin: 0; font: 10px/1.45 Arial, sans-serif; opacity: .66; }
.niva-compare-chart { display: block; width: calc(100% - 34px); height: 112px; margin: 6px 17px 0; overflow: visible; }.niva-chart-grid { fill: none; stroke: rgba(30,46,62,.11); stroke-width: 1; vector-effect: non-scaling-stroke; }.niva-chart-area { fill: rgba(92,176,216,.12); transform-box: fill-box; transform-origin: 50% 100%; }.niva-chart-baseline, .niva-chart-current { fill: none; vector-effect: non-scaling-stroke; }.niva-chart-baseline { stroke: rgba(35,62,79,.35); stroke-width: 1.25; stroke-dasharray: 4 5; }.niva-chart-current { stroke: #4d9fc5; stroke-width: 2; stroke-linecap: round; }.niva-chart-point { fill: #eaf9ff; stroke: #4d9fc5; stroke-width: 2; filter: drop-shadow(0 0 5px rgba(77,159,197,.7)); }
.niva-side-card footer { display: flex; align-items: center; gap: 14px; min-height: 41px; padding: 0 17px; border-top: 1px solid rgba(29,43,58,.11); font-size: 6px; letter-spacing: .08em; color: #557181; }.niva-side-card footer span { display: flex; align-items: center; gap: 5px; }.niva-side-card footer i { width: 12px; height: 1px; border-top: 1px dashed #667c88; }.niva-side-card footer i.is-current { border-top: 2px solid #4d9fc5; }.niva-side-card footer b { margin-left: auto; color: #3c7892; }
.niva-policy-body { position: relative; padding: 18px 17px 0; }.niva-policy-body > div { position: absolute; z-index: 1; left: 17px; top: 19px; display: grid; gap: 5px; }.niva-policy-body small { font-size: 7px; opacity: .58; }.niva-policy-gauge { display: block; width: 100%; height: 180px; overflow: visible; }.niva-gauge-track, .niva-gauge-value { fill: none; stroke-width: 8; stroke-linecap: round; }.niva-gauge-track { stroke: rgba(35,56,72,.1); }.niva-gauge-value { stroke: #62a9c9; filter: drop-shadow(0 0 6px rgba(98,169,201,.25)); }.niva-gauge-limit { stroke: #9d7848; stroke-width: 2; }.niva-gauge-needle line { stroke: #233542; stroke-width: 1.5; }.niva-gauge-needle circle { fill: #eef7fb; stroke: #233542; stroke-width: 2; }.niva-policy-gauge text { fill: rgba(27,43,56,.5); font: 6px "Arct Mono", monospace; letter-spacing: .08em; }

.story-panel--final { left: 50%; top: 22vh; width: min(760px,63vw); height: auto; transform: translateX(-50%); text-align: center; text-shadow: 0 2px 22px rgba(21,32,44,.34); }.story-panel--final > p:not(.eyebrow) { margin: 23px auto 0; font: clamp(14px,1.15vw,18px)/1.5 Arial, sans-serif; }.story-panel--final .story-actions { justify-content: center; }.story-panel--final small { display: block; margin-top: 30px; font-size: 7px; letter-spacing: .14em; opacity: .7; }

.chapter { position: absolute; z-index: 40; left: clamp(24px,4vw,68px); bottom: clamp(77px,11vh,120px); display: flex; gap: 12px; min-width: 190px; text-shadow: 0 1px 12px rgba(24,36,50,.32); will-change: transform, opacity; }.chapter__number { margin-top: 3px; font-size: 8px; opacity: .68; }.chapter__name { margin: 0; font: 600 clamp(11px,.9vw,14px)/1.1 Arial, sans-serif; letter-spacing: .18em; }.chapter__detail { margin: 7px 0 0; font-size: 7px; letter-spacing: .11em; opacity: .65; }
.sound { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; cursor: none; opacity: .75; font-size: 8px; letter-spacing: .13em; }.sound__icon { display: flex; height: 12px; align-items: center; gap: 2px; }.sound__icon i { display: block; width: 1px; height: 4px; background: white; }.sound__icon i:nth-child(2){height:10px}.sound__icon i:nth-child(3){height:7px}.sound[aria-pressed="false"] .sound__icon i { height: 2px; }
.progress { position: absolute; left: 50%; bottom: 0; display: flex; align-items: center; gap: 10px; transform: translateX(-50%); opacity: .76; font-size: 8px; letter-spacing: .13em; }.progress__track { width: clamp(90px,11vw,160px); height: 1px; background: rgba(255,255,255,.35); }.progress__track i { display: block; width: 100%; height: 1px; background: white; transform: scaleX(0); transform-origin: left; }.edition { margin: 0; opacity: .7; font-size: 8px; letter-spacing: .13em; }
.scroll-cue { position: absolute; z-index: 40; left: 50%; bottom: clamp(58px,7vh,86px); display: flex; flex-direction: column; align-items: center; gap: 10px; transform: translateX(-50%); font-size: 7px; letter-spacing: .16em; opacity: .82; }.scroll-cue i { width: 1px; height: 25px; background: white; transform-origin: top; animation: scroll-pulse 1.8s var(--ease) infinite; }
.cursor { position: fixed; z-index: 60; top: 0; left: 0; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.78); border-radius: 50%; transform: translate3d(-100px,-100px,0); pointer-events: none; mix-blend-mode: difference; will-change: transform; }.cursor span { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: white; transform: translate(-50%,-50%); }.cursor.is-active { background: rgba(255,255,255,.14); }

.loader { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; background: #c8d0da; color: white; transition: opacity .5s ease, visibility .5s ease; }.loader__topline { position: absolute; top: max(30px, env(safe-area-inset-top)); right: max(36px, env(safe-area-inset-right)); left: max(36px, env(safe-area-inset-left)); display: flex; justify-content: space-between; font-size: 8px; letter-spacing: .15em; }.loader__mark { position: relative; width: 72px; height: 72px; }.loader__mark span { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.78); border-radius: 50%; animation: calibrate 1.8s ease-in-out infinite; }.loader__mark span:nth-child(2){inset:12px;animation-delay:-.5s}.loader__mark span:nth-child(3){inset:25px;animation-delay:-1s}.loader p { position: absolute; top: calc(50% + 61px); margin: 0; font-size: 8px; letter-spacing: .15em; text-transform: uppercase; }

@keyframes calibrate { 0%,100%{transform:scale(.9);opacity:.25}50%{transform:scale(1.1);opacity:1} }
@keyframes scroll-pulse { 0%{transform:scaleY(0)}42%{transform:scaleY(1);transform-origin:top}70%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom} }
@keyframes reticle-spin { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
  .header-status, .coordinate { display: none; }
  .story-panel--hero { left: 6vw; width: 62vw; }
  .instrument--fleet { left: 4vw; width: 29vw; }.instrument--health { right: 4vw; width: 29vw; }.instrument--routing { right: 4vw; width: 29vw; }
  .control-shell { width: 90vw; }.control-topbar nav button:nth-child(n+4), .control-topbar > div button:not(.deploy) { display: none; }.control-body { grid-template-columns: 205px 1fr; }.policy-mini { display: none; }.surface-heading { grid-template-columns: 1fr auto; }.legend { display: none; }
  .trace-event-card { width: min(340px,32vw); }.trace-event-card--account { right: 5vw; }.trace-event-card--approval { left: 38vw; }
  .niva-stack-card { right: 4vw; width: 39vw; }.story-panel--niva .niva-copy { left: 5vw; width: 40vw; }
}

@media (max-width: 720px) {
  body, .button, .sound { cursor: auto; }
  .stage { min-height: 560px; }
  .media, .mascot-hold__plate, .mascot-hold__subject { object-position: 54% center; }
  .hud { left: max(20px, env(safe-area-inset-left)); right: max(20px, env(safe-area-inset-right)); }.hud--top { top: max(23px, env(safe-area-inset-top)); }.header-cta { padding: 9px 10px; }.wordmark { font-size: 29px; }
  .story-panel h1 { font-size: clamp(50px,15vw,74px); }.story-panel h2 { font-size: clamp(36px,10vw,53px); }
  .story-panel--hero { left: 23px; right: 23px; top: 17vh; width: auto; }.story-panel--hero .lede { max-width: 88%; font-size: 15px; }.diagnostics { gap: 9px; margin-top: 26px; }.diagnostics div { min-width: 0; flex: 1; }.story-actions { flex-wrap: wrap; margin-top: 23px; }
  .story-panel--perimeter { width: 85vw; top: 20vh; }
  .story-panel--core .section-copy { left: 23px; top: 14vh; width: 75vw; }.story-panel--core .section-copy h2 { font-size: 45px; }.instrument--fleet { left: 23px; bottom: 15vh; width: calc(100vw - 46px); }.instrument--health, .instrument--routing { display: none; }
  .control-shell { width: calc(100vw - 30px); min-height: 64vh; top: 48%; }.control-topbar { grid-template-columns: 1fr auto; padding: 0 12px; }.control-topbar nav { display: none; }.control-body { grid-template-columns: 1fr; }.control-summary { display: none; }.fleet-surface { padding: 18px 13px; }.surface-heading { grid-template-columns: 1fr auto; gap: 10px; }.performance-deltas { gap: 9px; }.performance-deltas span:last-child { display: none; }.fleet-chart { height: 18vh; min-height: 105px; }.agent-row { grid-template-columns: 1.8fr 1fr .75fr; }.agent-row span:nth-child(3), .agent-row span:nth-child(4), .agent-row span:nth-child(5) { display: none; }.control-copy { left: 24px; bottom: 12vh; width: 82vw; }.control-copy > p:last-child { display: none; }.trace-orbit { width: 75vw; }
  .trace-copy { left: 23px; top: 14vh; width: 80vw; }.trace-nodes li div { display: none; }.trace-nodes li:nth-child(1){left:17vw}.trace-nodes li:nth-child(2){left:29vw}.trace-nodes li:nth-child(3){right:29vw}.trace-nodes li:nth-child(4){right:17vw}.trace-event-card, .trace-event-card--account, .trace-event-card--approval { left: 23px; right: auto; top: auto; bottom: 13vh; width: calc(100vw - 46px); }.trace-inspector { left: 23px; right: auto; bottom: 13vh; width: calc(100vw - 46px); }
  .story-panel--niva .niva-copy { left: 23px; top: 10vh; width: 82vw; }.niva-copy > p:last-child, .niva-interaction-cue { display: none; }.niva-stack-card { left: 23px; right: auto; top: 41vh; width: calc(100vw - 46px); }.niva-card footer { display: none; }.niva-response p { font-size: 12px; }.niva-actions button { font-size: 6px; }.niva-side-card { min-height: 0; }.niva-side-heading { padding-top: 13px; }.niva-side-heading p { display: none; }.niva-compare-chart { height: 86px; }.niva-policy-gauge { height: 130px; }.niva-side-card footer { min-height: 34px; }
  .story-panel--final { top: 18vh; width: 86vw; }.story-panel--final small { line-height: 1.6; }
  .chapter { left: max(20px, env(safe-area-inset-left)); bottom: calc(72px + env(safe-area-inset-bottom)); }.edition { display: none; }.progress { left: auto; right: 0; transform: none; }.scroll-cue { bottom: calc(66px + env(safe-area-inset-bottom)); }
  .cursor, .reactive-reticle, .reactive-video { display: none; }
}

@media (max-height: 600px) and (orientation: landscape) {
  .stage { min-height: 100svh; min-height: 100dvh; }
  .hud--top { top: max(14px, env(safe-area-inset-top)); }
  .hud--bottom { bottom: max(12px, env(safe-area-inset-bottom)); }
  .story-panel--hero { top: 18vh; left: max(34px, env(safe-area-inset-left)); width: min(58vw, 520px); }
  .story-panel h1 { font-size: clamp(42px, 6vw, 58px); }
  .story-panel--hero .lede { margin-top: 16px; max-width: 520px; font-size: 12px; line-height: 1.45; }
  .story-actions { margin-top: 14px; }
  .button { min-height: 40px; padding: 0 16px; }
  .diagnostics, .chapter, .scroll-cue { display: none; }
  .control-shell { min-height: 82vh; max-height: calc(100dvh - 32px); }
  .story-panel--final { top: 20vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .experience { height: auto; }.stage { min-height: 100svh; }.story-panel:not(.story-panel--hero) { display: none; }.story-panel--hero { opacity: 1 !important; visibility: visible !important; transform: none !important; }.loader { display: none; }.reactive-video, .reactive-reticle, .depth-fog, .fog-bridge, .bloom { display: none; }
}

@media (pointer: coarse) { body, .button, .sound { cursor: auto; }.cursor, .reactive-reticle, .reactive-video { display: none; } }