@font-face {
  font-family: "Wordmark";
  src: local("HelveticaNeue-CondensedBlack"), local("Helvetica Neue Condensed Black"), local("Impact");
}

:root {
  /* theme defaults = SIGNAL (Sam's pick 2026-10-13): brand lime #c9ff5b on near-black; js/theme.js overrides per theme */
  --ink-rgb: 201, 255, 91;
  --bg: #0a0a0a;
  --panel-bg: rgba(16, 16, 16, 0.72);
  /* pass 7 selective contrast: full lime (--hi) is reserved for the visor, the chest core, active status dots,
     hovered/pinned elements and the one big number; everything else is a .72 / .45 / .28 tint */
  --hi: #dcff9c;
  --visor: rgb(238, 255, 204);
  --lime: rgba(var(--ink-rgb), 0.72);
  --lime-70: rgba(var(--ink-rgb), 0.7);
  --lime-dim: rgba(var(--ink-rgb), 0.45);
  --lime-30: rgba(var(--ink-rgb), 0.28);
  --lime-line: rgba(var(--ink-rgb), 0.25);
  --lime-faint: rgba(var(--ink-rgb), 0.12);
  --yellow: #fee75c;
  --red: #ed4245;
  --grey: #99aab5;
  --cream: #ece6cf;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gap: 12px;
  --fs: clamp(10px, 0.6vw, 12px);
  /* head placement over the schematic body — tune in devtools */
  --head-scale: 1.04;   /* rig square width ÷ figure width */
  --head-top: -1.2%;    /* rig square top, % of figure height */
  --head-cx: 0.6;       /* x of the chin inside the rig square (0..1); centred on the neck */
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--lime);
  font: 400 var(--fs)/1.35 var(--mono);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-variant-numeric: tabular-nums;
}
h1, h2, dl, dd, ol, ul { margin: 0; padding: 0; }
.dim { color: var(--lime-dim); }
.jp { color: var(--lime-dim); font-size: 0.92em; letter-spacing: 0.04em; }

body::before {
  content: ""; position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(var(--ink-rgb), 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.035) 1px, transparent 1px);
  background-size: 32px 32px; pointer-events: none; z-index: 0; transition: opacity 0.3s;
}
body.no-grid::before, body.no-grid .rig { background-image: none; }
body.no-grid::before { opacity: 0; }
body::after {
  content: ""; position: fixed; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none; z-index: 50;
}

/* ---------- grid: ident/left | figure | tag/right | footer ---------- */
.hud {
  position: relative; z-index: 1;
  height: max(100vh, 820px);
  padding: 16px 20px 8px;
  display: grid;
  grid-template-columns: 28fr 44fr 28fr;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "ident center right"
    "left  center right"
    "foot  foot   foot";
  gap: var(--gap) 16px;
}
.ident { grid-area: ident; min-width: 0; }
.tagtop { display: flex; justify-content: flex-end; align-items: flex-start; gap: 12px; padding: 4px 0 18px; flex: none; }
.col { min-height: 0; display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.col--left { grid-area: left; }
.col--right { grid-area: right; }
.rig { grid-area: center; }
.footbar { grid-area: foot; }

/* ---------- ident ---------- */
.eyebrow { letter-spacing: 0.1em; font-size: 1.05em; margin-bottom: 8px; }
.ident__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ident__word { display: flex; flex-direction: column; gap: 4px; }
.wordmark__os { font-size: 0.5em; letter-spacing: 0; margin-left: 0.2em; color: var(--lime-70); }
.wordmark {
  font: 900 clamp(66px, 6.2vw, 120px)/0.8 "Wordmark", var(--sans);
  letter-spacing: -0.04em; transform: scaleY(1.15); transform-origin: bottom left; color: var(--lime);
  margin-top: 14px;
}
.ident__jp { display: flex; align-items: flex-start; gap: 18px; margin-top: 6px; }
.jp-big { font-family: var(--sans); font-weight: 800; font-size: clamp(24px, 2vw, 38px); line-height: 1; border-bottom: 2px solid var(--lime); padding-bottom: 4px; }
.tagline { color: var(--lime-dim); font-size: 0.85em; letter-spacing: 0.08em; }
.ident__spec { display: grid; grid-template-columns: auto auto; gap: 1px 12px; font-size: 0.92em; padding-bottom: 6px; }
.ident__spec dt { color: var(--lime-dim); letter-spacing: 0.08em; }
.ident__spec dd { text-transform: uppercase; }
.ident__spec .ver { grid-column: 1 / -1; font-size: 1.7em; font-weight: 600; margin-bottom: 6px; }
.dot, .online-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px var(--lime); vertical-align: 1px; }
.online-dot { margin-left: 6px; }
.dot--hollow { background: transparent; box-shadow: none; border: 1px solid var(--lime-dim); }
.dot--off { background: var(--lime-faint); box-shadow: none; }
.tagtop__jp { font-family: var(--sans); font-size: clamp(14px, 1.1vw, 20px); font-weight: 500; letter-spacing: 0.06em; border-bottom: 1px solid var(--lime-dim); padding-bottom: 6px; }
.crosshair { width: 22px; height: 22px; position: relative; flex: none; border-radius: 50%; border: 1px solid var(--lime-dim); }
.crosshair::before, .crosshair::after { content: ""; position: absolute; background: var(--lime-dim); }
.crosshair::before { left: 50%; top: -5px; bottom: -5px; width: 1px; }
.crosshair::after { top: 50%; left: -5px; right: -5px; height: 1px; }
.crosshair--sm { width: 12px; height: 12px; border: 0; margin-left: auto; overflow: visible; }

/* ---------- panels ---------- */
.panel {
  position: relative; border: 1px solid var(--lime-line); background: var(--panel-bg);
  padding: 9px 13px 10px; min-height: 0; display: flex; flex-direction: column;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.panel::before, .panel::after { content: ""; position: absolute; width: 9px; height: 9px; pointer-events: none; border-color: var(--lime); border-style: solid; }
.panel::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.panel::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
.panel--grow { flex: 1; }
.panel.is-pulse { border-color: var(--lime); box-shadow: inset 0 0 24px rgba(var(--ink-rgb), 0.06); }
.panel.is-pulse-warn { border-color: var(--yellow); box-shadow: inset 0 0 24px rgba(254, 231, 92, 0.07); }
.panel__head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 7px; margin-bottom: 8px; border-bottom: 1px solid var(--lime-faint); white-space: nowrap; }
.panel__head h2 { font: 600 1.08em/1 var(--mono); letter-spacing: 0.1em; }
.panel__meta { margin-left: auto; color: var(--lime-dim); font-size: 0.88em; letter-spacing: 0.06em; overflow: hidden; text-overflow: ellipsis; }
.panel__meta.live { color: var(--lime); display: flex; align-items: center; gap: 6px; }
.tag { display: inline-block; padding: 0 5px; border: 1px solid var(--lime-30); color: var(--lime-dim); font-size: 0.78em; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.5; white-space: nowrap; }
.k { color: var(--lime-dim); letter-spacing: 0.08em; font-size: 0.86em; }

/* mini bar strips */
.strip { display: flex; align-items: flex-end; gap: 1px; height: 18px; }
.strip i { flex: 1; background: var(--lime); min-height: 1px; opacity: 0.9; }
.strip i.z { background: var(--lime-faint); }
.strip--hollow i { background: transparent; border: 1px solid var(--lime-faint); height: 100%; }
.spark { width: 100%; height: 18px; display: block; overflow: visible; }
.spark polyline { fill: none; stroke: var(--lime-70); stroke-width: 1.2; vector-effect: non-scaling-stroke; }

/* ---------- ACTIVITY ---------- */
.activity { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.activity__top { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 14px; }
.wave { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wave svg { width: 100%; height: 118px; display: block; border: 1px solid var(--lime-faint); background:
  linear-gradient(rgba(var(--ink-rgb), 0.05) 1px, transparent 1px) 0 0 / 100% 25%,
  linear-gradient(90deg, rgba(var(--ink-rgb), 0.05) 1px, transparent 1px) 0 0 / 10% 100%; }
.wave .up { fill: none; stroke: var(--lime); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.wave .down { fill: none; stroke: var(--lime-dim); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.wave .axis { stroke: var(--lime-30); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wave__axis { display: flex; justify-content: space-between; color: var(--lime-dim); font-size: 0.8em; }
.wave__legend { display: flex; gap: 12px; font-size: 0.8em; color: var(--lime-dim); }
.wave__legend b { color: var(--lime); font-weight: 500; }
.bignums { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; }
.bignum__n { font: 600 clamp(20px, 1.5vw, 28px)/1 var(--mono); letter-spacing: -0.02em; }
.bignum__k { color: var(--lime-dim); font-size: 0.8em; letter-spacing: 0.08em; }
.bignum .strip { height: 12px; margin-top: 2px; }
.recent { list-style: none; display: grid; gap: 1px; border-top: 1px solid var(--lime-faint); padding-top: 6px; }
.recent li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; white-space: nowrap; transition: background 0.3s; padding: 0 3px; }
.recent li span { overflow: hidden; text-overflow: ellipsis; }
.recent .t { color: var(--lime-dim); }
.recent .c { color: var(--lime-dim); }
.recent li.is-pulse { background: rgba(var(--ink-rgb), 0.12); }
.recent li.is-typing .x::after { content: "▌"; }

/* ---------- CHANNELS ---------- */
.channels { display: grid; gap: 5px; min-height: 0; overflow: hidden; }
.chan { display: grid; grid-template-columns: 26px minmax(0, 1fr) 10px minmax(110px, 1.1fr); gap: 10px; align-items: center; }
.glyph { width: 26px; height: 26px; border: 1px solid var(--lime-dim); display: grid; place-items: center; font: 700 13px/1 var(--sans); }
.chan__name { line-height: 1.2; min-width: 0; }
.chan__name b { font-weight: 500; display: block; }
.chan__name span { color: var(--lime-dim); font-size: 0.86em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.chan .strip { height: 20px; }
.notel { display: flex; align-items: center; gap: 6px; }
.notel .strip { flex: 1 1 0; min-width: 0; }
.notel .tag { flex: none; }

/* ---------- SYSTEM STATUS ---------- */
.system { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(0, 1fr); gap: 6px 12px; min-height: 0; }
.vital { display: flex; flex-direction: column; gap: 2px; min-width: 0; border-left: 1px solid var(--lime-line); padding-left: 8px; justify-content: center; }
.vital__v { font-size: 1.15em; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vital__s { color: var(--lime-dim); font-size: 0.82em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- RIG / FIGURE ---------- */
.rig {
  position: relative; min-height: 0; border: 1px solid var(--lime-line);
  background:
    linear-gradient(rgba(var(--ink-rgb), 0.04) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.04) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--bg);
  overflow: hidden; isolation: isolate;
}
.rig::before, .rig::after { content: ""; position: absolute; width: 16px; height: 16px; border: solid var(--lime); pointer-events: none; z-index: 6; }
.rig::before { top: 6px; left: 6px; border-width: 1px 0 0 1px; transform-origin: top left; }
.rig::after { bottom: 6px; right: 6px; border-width: 0 1px 1px 0; transform-origin: bottom right; }
.motion .rig::before, .motion .rig::after { animation: drawon 600ms ease-out both; }
@keyframes drawon { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.rig__hint { position: absolute; left: 14px; bottom: 10px; font-size: 0.8em; letter-spacing: 0.08em; z-index: 6; }
.figure {
  position: absolute; z-index: 2; aspect-ratio: 1; left: 0; top: 0; width: 600px;
  --o-frame: 0.55; --o-wiring: 0.75; --o-units: 1; --o-shell: 0.7; --o-visor: 1;
  --breath: 8s;
}
.figure[data-soul="bright"] { --o-wiring: 0.9; --o-units: 1; --o-shell: 0.8; }
.figure[data-soul="twitchy"] { --o-frame: 0.7; --o-wiring: 1; }
.figure[data-iso] { --o-frame: 0.12; --o-wiring: 0.12; --o-units: 0.12; --o-shell: 0.12; }
.figure[data-iso="frame"] { --o-frame: 1; }
.figure[data-iso="wiring"] { --o-wiring: 1; }
.figure[data-iso="units"] { --o-units: 1; }
.figure[data-iso="shell"] { --o-shell: 1; }
.stack, .regions, .hits { position: absolute; inset: 0; transform-origin: 50% 85%; }
.motion .stack, .motion .regions, .motion .hits { animation: breathe var(--breath) ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.012); } }
.lw { position: absolute; inset: 0; }
.lw img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.lw { mix-blend-mode: screen; transition: opacity 240ms ease; }
.lw[data-l="frame"] { opacity: var(--o-frame); }
.lw[data-l="wiring"] { opacity: var(--o-wiring); }
.lw[data-l="units"] { opacity: var(--o-units); }
.lw[data-l="shell"] { opacity: var(--o-shell); }
.lw[data-l="visor"] { opacity: var(--o-visor); mix-blend-mode: normal; }
.motion .lw[data-l="visor"] img { animation: visorlift var(--breath) ease-in-out infinite; }
@keyframes visorlift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
.lw[data-l="wiring"].is-flicker { opacity: 0.25; transition: none; }
.lw[data-l="wiring"].is-bright img { animation: brightpulse 700ms ease-in-out; }
@keyframes brightpulse { 50% { filter: brightness(1.14) saturate(1.35) drop-shadow(0 0 6px var(--lime-dim)) drop-shadow(0 0 14px var(--lime-30)); } }
/* scan wipe: a fully-bright copy of the stack, visible only inside a moving band */
.stack--scan { pointer-events: none; clip-path: inset(0 0 100% 0); visibility: hidden; }
.stack--scan .lw { opacity: 1 !important; filter: brightness(1.35); }
.stack--scan.is-scanning { visibility: visible; animation: scan 2.4s linear 1 forwards; }
.motion .stack--scan.is-scanning { animation: breathe var(--breath) ease-in-out infinite, scan 2.4s linear 1 forwards; }
@keyframes scan { from { clip-path: inset(-6% 0 100% 0); } to { clip-path: inset(100% 0 -6% 0); } }
/* organ regions: units copies clipped to one module each */
.region { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.region .lw { mix-blend-mode: screen; opacity: 1; }
.region .lw[data-l="visor"] { mix-blend-mode: normal; }
.region { transition: opacity 160ms ease, filter 160ms ease; }
.region.is-hot { opacity: 1; filter: brightness(1.16) saturate(1.35) drop-shadow(0 0 8px var(--lime-dim)) drop-shadow(0 0 18px var(--lime-30)); }
.hits { z-index: 3; pointer-events: none; }
.hit { position: absolute; pointer-events: auto; cursor: crosshair; }
.region.is-pulse { animation: organ 700ms ease-in-out; }
@keyframes organ { 0%, 100% { opacity: 0; filter: brightness(1); } 45% { opacity: 1; filter: brightness(1.16) saturate(1.35) drop-shadow(0 0 10px var(--lime-dim)) drop-shadow(0 0 20px var(--lime-30)); } }
.legend { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 4px; z-index: 6; }
.legend button {
  font: inherit; font-size: 0.86em; letter-spacing: 0.08em; color: var(--lime-dim); background: rgba(11, 10, 8, 0.8);
  border: 1px solid var(--lime-line); padding: 2px 8px; cursor: pointer; transition: color 240ms, border-color 240ms, background 240ms;
}
.legend button b { color: var(--lime); font-weight: 600; margin-right: 4px; }
.legend button:hover { color: var(--lime); border-color: var(--lime-dim); }
.legend button[aria-pressed="true"] { background: var(--lime); color: var(--bg); border-color: var(--lime); }
.legend button[aria-pressed="true"] b { color: var(--bg); }
.legend button:focus-visible { outline: 1px solid var(--lime); outline-offset: 2px; }
.rig__hint { top: 12px; bottom: auto; left: 30px; }

.rig__leaders { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
.rig__leaders polyline { stroke: var(--lime-dim); stroke-width: 1; fill: none; transition: stroke 0.25s; }
.rig__leaders circle { fill: var(--lime); }
.rig__leaders circle.halo { fill: none; stroke: var(--lime); stroke-width: 1; opacity: 0.35; }
.rig__leaders .is-pulse polyline, .rig__leaders .is-hot polyline { stroke: var(--lime); stroke-width: 1.6; }
.rig__leaders .is-hot circle.halo { opacity: 1; }
.callouts { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.callout { pointer-events: auto; cursor: crosshair; position: absolute; width: max-content; white-space: nowrap; font-size: 0.92em; line-height: 1.32; padding: 3px 7px; background: rgba(11, 10, 8, 0.8); transition: background 160ms ease; }
.callout[data-side="left"] { text-align: right; transform: translate(-100%, -50%); }
.callout[data-side="right"] { transform: translate(0, -50%); }
.callout__jp { font-family: var(--sans); font-weight: 700; font-size: 1.18em; }
.callout__en { letter-spacing: 0.1em; }
.callout__v { color: var(--lime-dim); }
.callout__v b { color: var(--lime); font-weight: 500; }
.callout.is-pulse, .callout.is-hot { background: var(--lime); }
.callout.is-pulse *, .callout.is-hot * { color: var(--bg) !important; }

/* ---------- ACTIVE MODEL ---------- */
.model { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; align-items: center; }
.model__name { display: flex; align-items: center; gap: 12px; }
.model__mark { width: 52px; height: 52px; flex: none; }
.model__mark circle, .model__mark path { fill: none; stroke: var(--lime); stroke-width: 1.4; }
.model__title { font: 600 clamp(16px, 1.35vw, 26px)/1.1 var(--sans); white-space: nowrap; }
.model__run { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 1.05em; }
.model__table { display: grid; grid-template-columns: auto auto; gap: 3px 10px; border-left: 1px solid var(--lime-faint); padding-left: 12px; }
.model__table dd { text-align: right; }
.model__voice { grid-column: 1 / -1; border-top: 1px solid var(--lime-faint); padding-top: 6px; display: flex; gap: 10px; }
.model__voice span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- FUNCTIONS ---------- */
.functions { flex: 1; display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow: hidden; }
.fn { display: grid; grid-template-columns: 10px minmax(0, 1fr) 6px minmax(70px, 0.9fr) 46px; gap: 9px; align-items: center; transition: background 0.3s; }
.fn__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn__tick { width: 1px; height: 10px; background: var(--lime-dim); }
.fn__bar { height: 5px; background: var(--lime-faint); position: relative; }
.fn__bar i { position: absolute; inset: 0 auto 0 0; background: var(--lime); }
.fn__bar.hollow { background: transparent; border: 1px dashed var(--lime-faint); height: 6px; }
.fn__n { text-align: right; color: var(--lime-dim); font-size: 0.9em; white-space: nowrap; }
.fn.is-paused .fn__name { color: var(--lime-dim); }
.fn.is-pulse { background: rgba(var(--ink-rgb), 0.1); }
.fn__cmds { margin-top: auto; padding-top: 6px; border-top: 1px solid var(--lime-faint); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.fn__cmds .cmd { color: var(--lime-dim); border: 1px dashed var(--lime-line); padding: 0 4px; }

/* ---------- MEMORY ---------- */
.memory { display: grid; grid-template-columns: minmax(0, 1fr) clamp(90px, 7.5vw, 140px); gap: 14px; align-items: center; min-height: 0; }
.memtable { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; }
.memtable dt { color: var(--lime-dim); letter-spacing: 0.04em; }
.memtable dd { text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sphere { width: 100%; aspect-ratio: 1; display: block; overflow: visible; }
.sphere * { fill: none; stroke: var(--lime-dim); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sphere .rim { stroke: var(--lime); }
.sphere .core { fill: var(--lime-faint); stroke: var(--lime); }
.sphere .mer { transform-box: fill-box; transform-origin: center; }
.motion .sphere .mer { animation: meridian 12s linear infinite; }
.sphere.is-pulse .rim { stroke-width: 2.5; filter: drop-shadow(0 0 6px var(--lime)); }
@keyframes meridian { from { transform: scaleX(1); } 50% { transform: scaleX(-1); } to { transform: scaleX(1); } }

/* ---------- ENVIRONMENT ---------- */
.env { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; align-items: center; min-height: 0; }
.envtable { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px; }
.envtable dt { color: var(--lime-dim); letter-spacing: 0.06em; }
.envtable dd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.homes { display: grid; grid-template-columns: repeat(2, max-content); gap: 2px 12px; }
.homes span { display: inline-flex; align-items: center; gap: 4px; }
.homes .dot { width: 5px; height: 5px; }
.worldmap { width: 100%; display: block; overflow: visible; }
.worldmap circle.land { fill: rgba(var(--ink-rgb), 0.2); }
.worldmap circle.pin { fill: var(--lime); }
.worldmap circle.ring { fill: none; stroke: var(--lime); stroke-width: 1; vector-effect: non-scaling-stroke; }
.worldmap text { font: 600 9px var(--mono); fill: var(--lime); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.worldmap text.sub { fill: var(--lime-70); font-weight: 400; font-size: 7.5px; }

/* ---------- footer ---------- */
.footbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; border-top: 1px solid var(--lime-faint); padding-top: 6px; font-size: 0.9em; letter-spacing: 0.06em; }
.footbar__brand { justify-self: start; }
.footbar__right { justify-self: end; }
.footbar__brand b { font-family: var(--sans); font-weight: 900; letter-spacing: -0.02em; font-size: 1.35em; }
.footbar__brand .x { font-family: var(--sans); font-weight: 400; font-size: 1em; margin: 0 2px; }
.footbar__mid { display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; }
.footbar__jp { font-family: var(--sans); letter-spacing: 0.2em; }
.footbar__right { display: flex; align-items: center; gap: 14px; }
.footbar__stamp { color: var(--lime-dim); text-align: right; }
.barcode { width: 110px; height: 22px; background: repeating-linear-gradient(90deg, var(--lime) 0 1px, transparent 1px 3px, var(--lime) 3px 5px, transparent 5px 6px, var(--lime) 6px 7px, transparent 7px 10px); opacity: 0.8; }

@media (max-width: 1600px) {
  .callout { font-size: 0.84em; }
  .system { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 8px; }
}
/* short screens (1440×900 etc.) */
@media (max-height: 960px) {
  .wave svg { height: 84px; }
  .wordmark { font-size: clamp(56px, 5vw, 86px); margin-top: 8px; }
  .eyebrow { margin-bottom: 4px; }
  .chan .strip { height: 14px; }
  .glyph { width: 20px; height: 20px; font-size: 11px; }
  .chan { grid-template-columns: 20px minmax(0, 1fr) 10px minmax(90px, 1fr); }
  .model__mark { width: 40px; height: 40px; }
}

/* ================= pass 4: ambient instruments (all gated by body.motion) ================= */
/* radar pings on status dots */
.ping { position: relative; }
.ping::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--lime); opacity: 0; pointer-events: none; }
.motion .ping::after { animation: ping 4s ease-out infinite; animation-delay: var(--ping-delay, 0s); }
@keyframes ping { 0% { transform: scale(1); opacity: 0.45; } 60%, 100% { transform: scale(2.4); opacity: 0; } }
/* heartbeat under the tagline: real sent/90d, scrolls ~40 s per pass */
.heartbeat { position: relative; height: 18px; overflow: hidden; margin: -10px 0 8px; flex: none; opacity: 0.45; border-bottom: 1px solid var(--lime-faint); }
.heartbeat svg { position: absolute; left: 0; top: 0; width: 200%; height: 16px; }
.heartbeat polyline { fill: none; stroke: var(--lime); stroke-width: 1; vector-effect: non-scaling-stroke; }
.heartbeat span { position: absolute; right: 0; bottom: 1px; font-size: 0.72em; color: var(--lime-dim); background: var(--bg); padding-left: 4px; letter-spacing: 0.08em; }
.motion .heartbeat svg { animation: hb 40s linear infinite; }
@keyframes hb { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* rings behind the figure */
.rings { position: absolute; z-index: 1; pointer-events: none; overflow: visible; opacity: 0.18; }
.rings circle, .rings line { fill: none; stroke: var(--lime); vector-effect: non-scaling-stroke; }
.rings .dotted { stroke-width: 1.4; stroke-dasharray: 1 7; stroke-linecap: round; }
.rings .gapped { stroke-width: 1; }
.rings g { transform-box: view-box; transform-origin: 100px 100px; }
.motion .rings__outer { animation: spin 60s linear infinite; }
.motion .rings__inner { animation: spin 45s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
/* oscilloscope sweep over the activity waveform */
.wave__box { position: relative; }
.scope { position: absolute; inset: 1px; overflow: hidden; pointer-events: none; }
.scope i { position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(100% - 24px), rgba(var(--ink-rgb), 0.16) calc(100% - 1px), var(--lime) calc(100% - 1px)); transform: translateX(-101%); opacity: 0; }
.motion .scope i { opacity: 1; animation: sweep 6s linear infinite; }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.motion .bignum .strip i:last-child { animation: breatheop 3s ease-in-out infinite; }
@keyframes breatheop { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
/* channels: staggered breathing dots, slow cursor at the newest bar */
.motion .dot.breathe { animation: breatheop 3.2s ease-in-out infinite; }
.strip--cursor { position: relative; }
.strip--cursor::after { content: ""; position: absolute; right: -3px; top: 0; bottom: 0; width: 1px; background: var(--lime); opacity: 0.6; }
.motion .strip--cursor::after { animation: blinkslow 2s steps(1) infinite; }
@keyframes blinkslow { 50% { opacity: 0; } }
/* system status */
.motion .spark polyline { stroke-dasharray: 1; animation: drawline 900ms ease-out both; animation-delay: var(--d, 0ms); }
@keyframes drawline { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.radar { width: 12px; height: 12px; margin-left: 8px; vertical-align: -1px; overflow: visible; }
.radar circle { fill: none; stroke: var(--lime-dim); stroke-width: 1; vector-effect: non-scaling-stroke; }
.radar path { fill: rgba(var(--ink-rgb), 0.45); }
.radar__arm { transform-box: view-box; transform-origin: 6px 6px; }
.motion .radar__arm { animation: spin var(--turn, 5s) linear infinite; }
.wfgrid { display: inline-grid; grid-template-columns: repeat(7, 4px); gap: 2px; margin-left: 8px; vertical-align: middle; }
.wfgrid i { width: 4px; height: 4px; border-radius: 50%; border: 1px solid var(--lime-dim); }
.wfgrid i.on { background: var(--lime); border-color: var(--lime); }
.wfgrid i.is-blink, .fn .dot.is-blink { opacity: 0.15; }
/* functions: bars fill once on load */
.fn__bar i { transform-origin: left center; }
.motion .fn__bar i { animation: fillx 700ms ease-out both; animation-delay: var(--d, 0ms); }
@keyframes fillx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* model: OpenAI-style knot + token ring */
.knot { overflow: visible; }
.knot rect { fill: none; stroke: var(--lime); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
/* real service marks (Simple Icons), inlined */
.logo { display: inline-block; flex: none; fill: currentColor; color: var(--lime); }
.logo--xs { width: 12px; height: 12px; margin-right: 5px; vertical-align: -2px; color: var(--lime-70); }
.chan__logo { width: 16px; height: 16px; justify-self: center; }
svg.logo.knot { width: 40px; height: 40px; transform-origin: 50% 50%; }
.motion svg.logo.knot { animation: spin 40s linear infinite, knotop 6s ease-in-out infinite; }
.knot__spin { transform-box: view-box; transform-origin: 0 0; }
.motion .knot__spin { animation: spin 40s linear infinite, knotop 6s ease-in-out infinite; }
@keyframes knotop { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
.tokring { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.ring20 { width: 18px; height: 18px; }
.ring20 path { fill: none; stroke: var(--lime); stroke-width: 1.6; }
.motion .ring20 path { animation: segon 1ms linear both; animation-delay: calc(var(--i) * 40ms); }
@keyframes segon { from { opacity: 0.12; } to { opacity: 1; } }
/* memory: orbit + libreta gauge */
.memory { grid-template-columns: minmax(0, 1fr) 54px clamp(90px, 7.5vw, 140px); }
.orbit ellipse { fill: none; stroke: var(--lime); stroke-width: 1; opacity: 0.3; vector-effect: non-scaling-stroke; }
.orbit__dot { fill: var(--lime); stroke: none; opacity: 0; }
.motion .orbit__dot { opacity: 0.9; }
.gauge { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.gauge svg { width: 44px; height: 44px; }
.gauge line { stroke: var(--lime-faint); stroke-width: 0.6; }
.gauge line.on { stroke: var(--lime); }
.gauge span { position: absolute; top: 14px; left: 0; right: 0; text-align: center; font-size: 0.9em; }
.gauge em { font-style: normal; font-size: 0.7em; color: var(--lime-dim); letter-spacing: 0.06em; }
/* environment: alternate pin pings + Berlin → San Salvador link */
.worldmap .pinping { fill: none; stroke: var(--lime); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; vector-effect: non-scaling-stroke; }
.motion .worldmap .pinping { animation: pinping 4s ease-out infinite; }
@keyframes pinping { 0% { transform: scale(1); opacity: 0.5; } 60%, 100% { transform: scale(2.6); opacity: 0; } }
.worldmap .link { fill: none; stroke: var(--lime); stroke-width: 1; opacity: 0.3; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.worldmap .link__dot { fill: var(--lime); opacity: 0; }
.motion .worldmap .link__dot { opacity: 0.9; }
/* figure ambient copies: slow core glow (all souls), faint thruster flicker (bright only) */
.amb { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.amb .lw { mix-blend-mode: screen; opacity: 1; }
.motion .amb[data-r="core"] { animation: coreglow 4s ease-in-out infinite; }
@keyframes coreglow { 0%, 100% { opacity: 0; } 50% { opacity: 0.4; filter: brightness(1.15); } }
.motion .figure[data-soul="bright"] .amb[data-r^="thruster"] { animation: thrflick 1.5s steps(2) infinite; }
@keyframes thrflick { 0% { opacity: 0.06; } 50% { opacity: 0.15; } }

@media (prefers-reduced-motion: reduce) {
  .panel, .callout, .recent li, .fn { transition: none; }
  .stack, .regions, .lw[data-l="visor"] img { animation: none; }
  .sphere .mer { animation: none; }
}
.model__mark.logo path { fill: currentColor; stroke: none; }
.ver-lc { text-transform: none; }
.envtable dd:has(.homes) { overflow: visible; }


/* ================= pass 7 · art direction (all states) ================= */
:root {
  /* three text sizes only */
  --t-s: 11px;     /* S · metadata */
  --t-m: 12.5px;   /* M · section names, values */
  --t-l: 15px;     /* L (in DIAGNOSTICS: panel headers + headline figures); the wordmark and IDLE's big number are display L */
  --rule: rgba(var(--ink-rgb), 0.18);
}
body { font-size: var(--t-s); }
/* reserved full lime */
.dot, .online-dot { background: var(--hi); box-shadow: 0 0 8px var(--hi); }
.dot--hollow { background: transparent; box-shadow: none; }
.dot--off { background: var(--lime-faint); box-shadow: none; }
.callout.is-pulse, .callout.is-hot { background: var(--hi); }
.rig__leaders .is-pulse polyline, .rig__leaders .is-hot polyline { stroke: var(--hi); }
.rig__leaders circle { fill: var(--lime); }
.legend button[aria-pressed="true"] { background: var(--hi); border-color: var(--hi); }
.chip--solid { background: var(--lime); }
/* borders −70%: no panel rectangles; a top rule + header only. Figure-frame corners survive in DIAGNOSTICS. */
.panel { border: 0; border-top: 1px solid var(--rule); background: none; padding: 8px 2px 4px; }
.panel::before, .panel::after { display: none; }
.panel.is-pulse { border-color: var(--hi); box-shadow: none; }
.panel.is-pulse-warn { border-color: var(--yellow); box-shadow: none; }
.panel__head { border-bottom: 0; padding-bottom: 4px; margin-bottom: 6px; }
.panel__head h2 { font-size: var(--t-l); font-weight: 700; }
.panel__meta, .jp, .k { font-size: var(--t-s); }
.tag { font-size: var(--t-s); border-color: var(--rule); color: var(--lime-30); letter-spacing: 0.06em; }
.rig { border-color: transparent; }
.wave svg { border: 0; }
.counter, .glyph { border-color: var(--rule); }
/* collapse the stray sizes */
.bignum__n, .model__title, .ident__spec .ver { font-size: var(--t-l); font-weight: 700; font-family: var(--mono); }
.vital__v, .callout, .recent li, .fn, .chan__name b, .memtable, .envtable, .model__table, .model__voice, .eyebrow { font-size: var(--t-m); }
.bignum__k, .vital__s, .chan__name span, .wave__legend, .wave__axis, .chart__axis, .fn__n, .callout__v, .tagline, .footbar, .footbar__stamp, .rig__hint, .legend button, .gauge em, .heartbeat span { font-size: var(--t-s); }
.callout__jp { font-size: var(--t-m); }
.tagtop__jp { font-size: var(--t-m); }
.jp-big { font-size: clamp(20px, 1.6vw, 28px); }
/* grid and rings near-invisible until a scan passes */
.rig { background:
  linear-gradient(rgba(var(--ink-rgb), 0.03) 1px, transparent 1px) 0 0 / 24px 24px,
  linear-gradient(90deg, rgba(var(--ink-rgb), 0.03) 1px, transparent 1px) 0 0 / 24px 24px, var(--bg); transition: background 600ms ease; }
.rig.is-scanned { background:
  linear-gradient(rgba(var(--ink-rgb), 0.08) 1px, transparent 1px) 0 0 / 24px 24px,
  linear-gradient(90deg, rgba(var(--ink-rgb), 0.08) 1px, transparent 1px) 0 0 / 24px 24px, var(--bg); }
.rings { opacity: 0.12; }

/* ================= pass 7 · three states: 01 IDLE · 02 INSPECT · 03 DIAGNOSTICS ================= */
.hud { transition: grid-template-columns 320ms ease; }
body.no-anim .hud, body.no-anim .hud * { transition: none !important; }
body:not([data-mode="diag"]) .hud { grid-template-columns: 22fr 56fr 22fr; }
.idle--left { grid-area: left; }
.idle--right { grid-area: right; }
/* swapped layers share grid areas; they cross-fade (320 ms, small lift) instead of display toggling */
.idle, .col--left, .col--right, .ident__spec, .eyebrow, .tagline, .callouts, .rig__leaders, .legend, .rig__hint, .rings__inner {
  transition: opacity 320ms ease, transform 320ms ease, visibility 0s linear 0s;
}
body:not([data-mode="diag"]) :is(.col--left, .col--right, .ident__spec, .eyebrow, .tagline, .callouts, .rig__leaders, .legend, .rig__hint) {
  opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none;
  transition: opacity 320ms ease, transform 320ms ease, visibility 0s linear 320ms;
}
body[data-mode="diag"] .idle { opacity: 0; visibility: hidden; transform: translateY(6px); pointer-events: none;
  transition: opacity 320ms ease, transform 320ms ease, visibility 0s linear 320ms; }
body:not([data-mode="diag"]) .rings__inner { opacity: 0; }
body:not([data-mode="diag"]) .rig::before, body:not([data-mode="diag"]) .rig::after { visibility: hidden; }
.rig::before, .rig::after { transition: opacity 320ms ease; }
.ident__status { display: none; }
body:not([data-mode="diag"]) .ident__status { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: var(--t-m); letter-spacing: 0.12em; }
.ident__status .lc { text-transform: none; }

/* ---------- IDLE left zone ---------- */
.idle { min-height: 0; display: flex; flex-direction: column; min-width: 0; }
.idle--left { gap: 44px; padding-top: 34px; }
.big__n { font: 600 clamp(34px, 2.6vw, 48px)/0.95 var(--mono); letter-spacing: -0.04em; color: var(--hi); text-shadow: 0 0 18px rgba(var(--ink-rgb), 0.18); }
.big__k { margin-top: 10px; font-size: var(--t-s); letter-spacing: 0.14em; color: var(--lime-dim); }
.latest h3, .isec h3 { margin: 0 0 10px; font: 600 var(--t-m)/1 var(--mono); letter-spacing: 0.14em; color: var(--lime); }
.latest ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.latest li { font-size: var(--t-m); color: var(--lime); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 300ms; }
.latest li .t { color: var(--lime-dim); margin-right: 8px; }
.latest li.is-pulse { color: var(--hi); }
.ambient { margin-top: auto; height: 46px; position: relative; overflow: hidden; opacity: 0.25; }
.ambient svg { position: absolute; left: 0; top: 0; width: 200%; height: 100%; }
.ambient polyline { fill: none; stroke: var(--lime); stroke-width: 1; vector-effect: non-scaling-stroke; }
.motion .ambient svg { animation: hb 60s linear infinite; }

/* ---------- IDLE right zone ---------- */
.idle--right { justify-content: center; gap: 0; }
.isec { appearance: none; border: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; padding: 18px 0; border-top: 1px solid var(--rule);
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; width: 100%; }
.isec:last-child { border-bottom: 1px solid var(--rule); }
.isec h3 { grid-column: 1; margin: 0; }
.isec__v { grid-column: 1; font-size: var(--t-s); color: var(--lime-dim); letter-spacing: 0.06em; display: flex; align-items: center; gap: 6px; }
.isec__v .dot { width: 6px; height: 6px; }
.isec__g { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 56px; height: 56px; }
.isec:hover h3, .isec:focus-visible h3, .isec.is-on h3 { color: var(--hi); }
.isec:focus-visible { outline: 1px solid var(--lime-dim); outline-offset: 4px; }
svg.logo.knot.idle__mark { width: 30px; height: 30px; }
.isec .sphere { width: 56px; height: 56px; }
.isec .wfgrid { margin: 0; grid-template-columns: repeat(5, 5px); gap: 4px; }
.isec .wfgrid i { width: 5px; height: 5px; }

/* ---------- mode strip + help ---------- */
.footbar__mid { position: relative; gap: 3px; }
.modes { display: flex; align-items: center; gap: 6px; }
.modes button { font: inherit; font-size: var(--t-s); letter-spacing: 0.12em; color: var(--lime-30); background: none; border: 0; padding: 2px 4px; cursor: pointer; }
.modes button:hover { color: var(--lime); }
.modes button[aria-current="true"] { color: var(--hi); }
.modes button:focus-visible { outline: 1px solid var(--lime-dim); }
.modes__help { margin-left: 6px; border: 1px solid var(--rule) !important; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; padding: 0 !important; }
.helppop { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: var(--t-s); letter-spacing: 0.1em;
  color: var(--lime); background: var(--bg); border-top: 1px solid var(--rule); padding: 6px 10px; }

/* ---------- INSPECT ---------- */
.inspect { position: absolute; z-index: 20; width: 320px; padding: 2px 0 2px 16px; font-size: var(--t-s); color: var(--lime);
  border-left: 1px solid var(--hi); background: linear-gradient(90deg, rgba(11, 10, 8, 0.86), rgba(11, 10, 8, 0.6));
  opacity: 0; transform: translateX(8px); transition: opacity 260ms ease, transform 260ms ease; pointer-events: none; }
.inspect.is-left { border-left: 0; border-right: 1px solid var(--hi); padding: 2px 16px 2px 0; transform: translateX(-8px);
  background: linear-gradient(270deg, rgba(11, 10, 8, 0.86), rgba(11, 10, 8, 0.6)); }
.inspect.is-open { opacity: 1; transform: none; pointer-events: auto; }
.inspect__head { padding-bottom: 8px; }
.inspect__jp { font-family: var(--sans); font-weight: 700; font-size: var(--t-m); color: var(--hi); }
.inspect__en { font-size: var(--t-m); letter-spacing: 0.14em; color: var(--hi); }
.inspect__sub { font-size: var(--t-s); color: var(--lime-dim); letter-spacing: 0.08em; }
.inspect dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); }
.inspect dt, .inspect dd { margin: 0; padding: 5px 0; border-top: 1px solid var(--rule); }
.inspect dt { color: var(--lime-dim); letter-spacing: 0.08em; padding-right: 14px; white-space: nowrap; }
.inspect dd { text-align: right; min-width: 0; }
.inspect dd.wrap { text-align: left; grid-column: 1 / -1; padding-top: 0; border-top: 0; color: var(--lime); }
.inspect .ilist { list-style: none; margin: 0; padding: 0; grid-column: 1 / -1; }
.inspect .ilist li { display: grid; grid-template-columns: minmax(0, 1fr) 70px 46px; gap: 8px; align-items: center; padding: 3px 0; }
.inspect .ilist li span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inspect .ilist .bar { height: 3px; background: var(--lime-faint); position: relative; }
.inspect .ilist .bar i { position: absolute; inset: 0 auto 0 0; background: var(--lime); }
.inspect .ilist li span:last-child { text-align: right; color: var(--lime-dim); }
.inspect .chans { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: flex-end; }
.inspect .chans span { display: inline-flex; align-items: center; gap: 4px; }
.inspect .months { display: flex; align-items: flex-end; gap: 14px; height: 40px; justify-content: flex-end; padding-top: 4px; }
.inspect .months span { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; color: var(--lime-dim); }
.inspect .months i { display: block; width: 12px; background: var(--lime); }
.inspect .ctx { list-style: none; margin: 0; padding: 0; grid-column: 1 / -1; }
.inspect .ctx li { padding: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--lime); }
.inspect .ctx .t { color: var(--lime-dim); margin-right: 8px; }
.inspect__line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 19; overflow: visible; }
.inspect__line polyline { fill: none; stroke: var(--hi); stroke-width: 1; }
.inspect__line circle { fill: var(--hi); }
.inspect__line .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawline 220ms ease-out forwards; }
/* the side zone the panel lands on steps back */
body[data-mode="inspect"] .idle.is-under { opacity: 0.12; }

/* floating unit's ground shadow: a faintly lit floor pad with a dark blurred core at the soles (dark alone is invisible on black) */
.figure .shadow { position: absolute; left: 50%; top: 96.6%; width: 54%; height: 6%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at center, rgba(var(--ink-rgb), .14) 0%, rgba(var(--ink-rgb), .06) 55%, transparent 80%); filter: blur(5px); }
.figure .shadow::after { content: ""; position: absolute; left: 14%; right: 14%; top: 22%; bottom: 22%; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 50%, transparent 78%); filter: blur(6px); }
.motion .figure .shadow { animation: shadowbreathe var(--breath) ease-in-out infinite; }
@keyframes shadowbreathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 50% { transform: translate(-50%, -50%) scale(1.03); opacity: .85; } }

/* ================= pass 8 · contextual INSPECT: spotlight the zone, dim the rest ================= */
@property --fk { syntax: "<number>"; inherits: true; initial-value: 1; }
.figure { --fk: 1; transition: --fk 400ms ease; }
.figure[data-focus] { --fk: 0.28; transition: --fk 260ms ease; }
.lw[data-l="frame"] { opacity: calc(var(--o-frame) * var(--fk)); }
.lw[data-l="wiring"] { opacity: calc(var(--o-wiring) * var(--fk)); }
.lw[data-l="units"] { opacity: calc(var(--o-units) * var(--fk)); }
.lw[data-l="shell"] { opacity: calc(var(--o-shell) * var(--fk)); }
.region .lw, .amb .lw { opacity: 1; }
.lw[data-l="visor"] img { transition: filter 260ms ease; }
.figure[data-focus="head"] .stack .lw[data-l="visor"] img { filter: brightness(1.15); }
.rings { transition: opacity 400ms ease; }
body[data-focus] .rings { opacity: 0.06; transition-duration: 260ms; }
body[data-mode="diag"] .callout, body[data-mode="diag"] .rig__leaders g { transition: opacity 260ms ease, background 160ms ease; }
body[data-mode="diag"][data-focus] .callout:not(.is-hot), body[data-mode="diag"][data-focus] .rig__leaders g:not(.is-hot) { opacity: 0.25; }

/* head-clipped copy for look-around turns (shared NudgeHead helper) */
.stack__head { position: absolute; inset: 0; display: none; clip-path: inset(0 0 64% 0); transform-origin: 50.5% 36%; }
.stack__head.is-on { display: block; }
#stack.is-headturn > .lw { clip-path: inset(36% 0 0 0); }

/* ================= pass 8 · legible information type (decoration stays tiny) ================= */
:root { --t-m: 13px; --lime-text: rgba(var(--ink-rgb), 0.78); }
/* information: ≥ 13 px, line-height ≥ 1.45, letter-spacing ≤ .06em, dim no lower than .62 */
.latest li { font-size: 13px; line-height: 1.45; letter-spacing: 0.02em; color: var(--lime-text);
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.latest li .t { color: rgba(var(--ink-rgb), 0.62); }
.latest ol { gap: 10px; }
.isec__v { font-size: 13px; line-height: 1.45; letter-spacing: 0.02em; color: var(--lime-text); }
.inspect { font-size: 13px; line-height: 1.45; width: 340px; }
.inspect dt { color: rgba(var(--ink-rgb), 0.62); letter-spacing: 0.06em; }
.inspect dd, .inspect dd.wrap, .inspect .ctx li, .inspect .ilist li { color: var(--lime-text); letter-spacing: 0.02em; }
.inspect .ilist li span:last-child, .inspect .ctx .t { color: rgba(var(--ink-rgb), 0.62); }
.inspect__sub { font-size: 11px; }
.modes button { font-size: 13px; letter-spacing: 0.06em; color: rgba(var(--ink-rgb), 0.62); }
.helppop { font-size: 13px; letter-spacing: 0.04em; line-height: 1.45; color: var(--lime-text); }
/* DIAG values */
.recent li, .fn, .vital__v, .chan__name b, .memtable, .envtable, .model__table, .model__voice, .callout__v { font-size: 13px; line-height: 1.45; letter-spacing: 0.02em; }
.vital__s, .chan__name span, .fn__n, .recent .t, .recent .c, .memtable dt, .envtable dt, .model__table dt, .callout__v { color: rgba(var(--ink-rgb), 0.62); }
.vital__s, .chan__name span, .fn__n { font-size: 12px; letter-spacing: 0.02em; }
/* section headers 13 px bold .1em */
.latest h3, .isec h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; }