.stn, .stn * { box-sizing: border-box; }
/* Layout (flex, direction, min-height) is owned by the Tailwind classes on the
   root div — flex-col lg:flex-row — like every other shell page. Declaring it
   here too would win over the layered utilities and force the stacked layout
   at every width. Only the type voice lives here. */
.stn { font-family: var(--theme-body, var(--font-geist-mono)), ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
/* No padding here — the row's own padding-block is the gap above and below
   the frame, the same gutter the rails get, so the frame's edges land level
   with theirs. The frame used to add its own m-3 on top of that, which
   stacked into a doubled 24px inset that left it floating 12px short of the
   rails on all four sides. (Before that, this scroller carried 40px of
   padding-bottom, which printed as a dead band once real scrolling was
   restored.) */
/* The centre column is the page's width container: page layouts answer it
   (Tailwind @-variants, cqi type), so a rail opening or resizing reflows the
   page exactly as a narrower window would. */
.stn-scroll { min-height: 0; flex: 1; overflow-y: auto; container: well / inline-size; }
/* A route supplies content; the shared footer follows its actual height. */
.stn-center-content > .route-fade { height: auto; min-height: 0; }

/* ── THE CENTRE FRAME ── */
/* It wraps the scroller and never scrolls, so the glow holds on all four
   edges at every scroll position. A rectangle, not a chamfer: the scroller
   fills it edge to edge (a chamfer would need padding to keep the corners off
   the content, and that padding was the gap beside the sticky chapter nav).
   The edge is one accent-tinted hairline plus a soft outer glow; two corner
   ticks mark it as the desk's focal surface. Static: the theme's own
   backdrop carries the motion. */
.stn-frame {
  position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0;
  /* Flatten translucent panel tokens over the solid theme base so the chassis
     artwork cannot show through any page's center. Rails retain their tokens. */
  background: linear-gradient(var(--theme-panel-bg), var(--theme-panel-bg)), var(--nilla-bg);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--nilla-accent) 36%, var(--nilla-border)),
    0 0 26px -10px color-mix(in srgb, var(--nilla-accent) 60%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--nilla-text) 6%, transparent);
}
.stn-frame::before, .stn-frame::after {
  content: ""; position: absolute; z-index: 45; width: 16px; height: 16px; pointer-events: none;
  border: 0 solid color-mix(in srgb, var(--nilla-accent) 85%, transparent);
}
.stn-frame::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.stn-frame::after { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.stn-frame--bare { box-shadow: none; }
.stn-frame--bare::before, .stn-frame--bare::after { display: none; }

/* ── NERV MASTHEAD & EMERGENCY ALERT ── */
.stn-hero {
  position: relative;
  padding: 22px 18px 20px;
  background: radial-gradient(ellipse at top left, color-mix(in srgb, var(--nilla-accent) 18%, transparent), var(--nilla-bg));
  border-bottom: 1px solid color-mix(in srgb, var(--nilla-border) 80%, transparent);
}
.stn-hero[data-emergency="1"] {
  background: radial-gradient(ellipse at top left, rgba(225, 29, 72, 0.3), var(--nilla-bg));
  border-color: #e11d48;
}

.stn-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 12px;
  background: color-mix(in srgb, var(--nilla-bg-alt) 95%, black);
  border: 1px solid color-mix(in srgb, var(--nilla-border) 80%, transparent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--nilla-accent);
}
.stn-hero[data-emergency="1"] .stn-status-bar {
  color: #f43f5e;
  border-color: #e11d48;
  background: rgba(225, 29, 72, 0.2);
}

.stn-kicker {
  margin-top: 14px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--nilla-accent);
}

.stn-title {
  margin: 6px 0 10px;
  font-size: clamp(26px, 4.2vw, 48px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--nilla-text);
}

.stn-sub {
  margin: 0 0 20px;
  max-width: 68ch;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--theme-ink-dim);
}

.stn-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.stn-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--nilla-bg);
  background: var(--theme-accent-2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
  transition: all 140ms ease;
  cursor: pointer;
}
.stn-btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.15);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--theme-accent-2) 50%, transparent);
}

.stn-btn-sec {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--nilla-text);
  background: color-mix(in srgb, var(--theme-panel-bg) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--nilla-border) 80%, transparent);
  transition: all 140ms ease;
  cursor: pointer;
}
.stn-btn-sec:hover {
  color: var(--nilla-bg);
  background: var(--nilla-accent);
  border-color: var(--nilla-accent);
}

/* ── LIVE ARCHIVE FIGURES ── */
/* Five counts of the operator's own archive, tabular, under the masthead.
   Dashes while the read is pending — never invented zeros. */
.stn-figures {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--nilla-border) 70%, transparent);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}
.stn-fig { display: flex; flex-direction: column; gap: 3px; }
.stn-fig-val { font-size: 26px; font-family: var(--theme-display), ui-monospace, monospace; font-weight: 900; color: var(--nilla-text); font-variant-numeric: tabular-nums; }
.stn-fig-lbl { font-size: 9px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--theme-ink-dim); }

/* ── SECTION HEADINGS ── */
.stn-sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 10px;
  margin: 28px 32px 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--nilla-border) 70%, transparent);
}
.stn-sec-head b {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--nilla-accent);
}
.stn-sec-head span {
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--theme-ink-dim);
}

/* ── DOSSIER WALLS & STATE STRIPS ── */
.stn-wall { margin: 0 32px; }
.stn-strip {
  margin: 0 32px;
  padding: 14px 16px;
  border: 1px dashed color-mix(in srgb, var(--nilla-border) 80%, transparent);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--theme-ink-dim);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.stn-strip .stn-btn-sec { padding: 7px 12px; font-size: 8.5px; }

/* ── ORDER CONSTELLATION ── */
/* The share bar behind each tile is the order's size against the LARGEST
   order, not against a made-up ceiling — the same normalisation the nav bar
   and the welcome rail use, for the same reason: the comparison BETWEEN
   orders is the only signal there is. */
.stn-orders {
  margin: 0 32px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}
.stn-order {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--nilla-bg-alt) 88%, black);
  border: 1px solid color-mix(in srgb, var(--nilla-border) 70%, transparent);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 140ms ease, transform 140ms ease;
}
.stn-order:hover { border-color: var(--nilla-accent); transform: translateY(-1px); }
.stn-order__bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--nilla-accent) 8%, transparent);
}
.stn-order__head {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.stn-order__head b {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nilla-text);
}
.stn-order__head em {
  font-style: normal;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--theme-ink-faint);
}
.stn-order__head em[data-hot="1"] { color: var(--theme-accent-2); }
.stn-order__sub {
  position: relative;
  font-size: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--theme-ink-dim);
}

/* ── SUBJECT DOORWAYS ── */
.stn-doors {
  margin: 0 32px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
}
.stn-door {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--nilla-border) 65%, transparent);
  background: color-mix(in srgb, var(--nilla-bg) 70%, transparent);
  text-decoration: none;
  transition: all 140ms ease;
}
.stn-door:hover {
  border-color: var(--theme-accent-2);
  background: color-mix(in srgb, var(--theme-accent-2) 10%, transparent);
}
.stn-door b {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nilla-text);
}
.stn-door span {
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nilla-accent);
}

/* ── MAGI TELEMETRY HUD ── */
.stn-magi-grid {
  margin: 0 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.stn-magi-card {
  padding: 14px;
  background: color-mix(in srgb, var(--nilla-bg-alt) 90%, black);
  border: 1px solid color-mix(in srgb, var(--nilla-border) 80%, transparent);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stn-magi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.stn-magi-name {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nilla-accent);
}
.stn-magi-status {
  font-size: 8px;
  font-weight: 800;
  padding: 2px 6px;
  color: var(--nilla-bg);
  background: var(--theme-accent-2);
}
.stn-magi-role {
  font-size: 9px;
  color: var(--theme-ink-dim);
}
.stn-magi-sync {
  font-size: 16px;
  font-weight: 900;
  color: var(--nilla-text);
  margin-top: 4px;
}

/* ── SUPER BRAIN AI SIMULATOR ── */
.stn-ai-card {
  margin: 0 32px;
  padding: 18px 22px;
  background: color-mix(in srgb, var(--nilla-bg-alt) 90%, black);
  border: 1px solid color-mix(in srgb, var(--nilla-border) 80%, transparent);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.stn-ai-input {
  width: 100%;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nilla-text);
  background: var(--nilla-bg);
  border: 1px solid color-mix(in srgb, var(--nilla-border) 80%, transparent);
  padding: 10px 14px;
}
.stn-ai-input:focus-visible {
  outline: none;
  border-color: var(--theme-accent-2);
}

.stn-ai-result {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--nilla-bg) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--nilla-border) 60%, transparent);
}
.stn-ai-stat-lbl {
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--theme-ink-dim);
}
.stn-ai-stat-val {
  font-size: 11px;
  font-weight: 800;
  color: var(--nilla-text);
  margin-top: 3px;
}

/* ── ROW ENGINE SHOWCASE ── */
.stn-row-tabs {
  margin: 0 32px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.stn-row-tab {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 7px 14px;
  color: var(--theme-ink-dim);
  background: color-mix(in srgb, var(--nilla-bg) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--nilla-border) 70%, transparent);
  cursor: pointer;
  transition: all 120ms ease;
}
.stn-row-tab[aria-pressed="true"] {
  color: var(--nilla-bg);
  background: var(--theme-accent-2);
  border-color: var(--theme-accent-2);
}

/* ── MODULES MATRIX & PROTOCOL ── */
.stn-mod-grid {
  margin: 0 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.stn-mod-card {
  padding: 16px;
  background: color-mix(in srgb, var(--nilla-bg-alt) 85%, black);
  border: 1px solid color-mix(in srgb, var(--nilla-border) 70%, transparent);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stn-proto {
  margin: 0 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.stn-proto-step {
  padding: 14px;
  background: color-mix(in srgb, var(--nilla-bg-alt) 85%, black);
  border: 1px solid color-mix(in srgb, var(--nilla-border) 70%, transparent);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stn-mod-code {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .2em;
  color: var(--nilla-accent);
}
.stn-mod-title {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nilla-text);
}
.stn-mod-desc {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--theme-ink-dim);
}

/* ── ASSET SPECIFICATIONS ── */
.stn-asset-grid {
  margin: 0 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.stn-asset-card {
  padding: 14px;
  background: color-mix(in srgb, var(--nilla-bg-alt) 80%, black);
  border: 1px solid color-mix(in srgb, var(--nilla-border) 70%, transparent);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stn-asset-title {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nilla-accent);
}
.stn-asset-dims {
  font-size: 12px;
  font-weight: 800;
  color: var(--nilla-text);
}
.stn-asset-desc {
  font-size: 9px;
  line-height: 1.5;
  color: var(--theme-ink-dim);
}

/* ── FOOTER STRIP ── */
/* Pinned to the bottom of the frame on short viewports by the flex spacer
   rendered just before it; on long pages it simply follows the last section. */
.stn-foot {
  margin: 0 32px 8px;
  padding: 12px 0 4px;
  border-top: 1px solid color-mix(in srgb, var(--nilla-border) 70%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--theme-ink-faint);
}

/* ── HERO BACKDROP + MOTION ── */
/* The generated command-center plate sits under the hero's own gradient at
   low opacity, drifting slowly; a scanline band sweeps it on a long period.
   Both are pure decor: pointer-events none, aria-hidden, and stilled under
   reduced motion. Emergency mode hides the plate so the alert reads pure. */
.stn-hero { overflow: hidden; }
.stn-hero__bg {
  position: absolute;
  inset: -6%;
  background-size: cover;
  background-position: center;
  opacity: 0.22;
  pointer-events: none;
  animation: stn-hero-drift 46s ease-in-out infinite alternate;
}
.stn-hero__bg::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 22%;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--nilla-accent) 12%, transparent), transparent);
  animation: stn-hero-scan 9s linear infinite;
}
.stn-hero[data-emergency="1"] .stn-hero__bg { display: none; }
/* A theme with a living backdrop (Night Session's tide) shows it through the hero instead of the plate. */
html[data-fx="night"] .stn-hero__bg { display: none; }
.stn-hero > *:not(.stn-hero__bg) { position: relative; z-index: 1; }
@keyframes stn-hero-drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
  to { transform: translate3d(1.5%, 1%, 0) scale(1.07); }
}
@keyframes stn-hero-scan {
  from { top: -25%; }
  to { top: 110%; }
}

/* ── SIGNAL FEED — the cover marquee ── */
/* An infinite belt of the archive's covers, duplicated once so the -50%
   translate loops seamlessly. Hover pauses it; reduced motion stills it into
   an ordinary horizontal scroller so nothing is unreachable. */
.stn-feed {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--nilla-border) 80%, transparent);
  background: color-mix(in srgb, var(--nilla-bg) 70%, black);
}
.stn-feed__label {
  position: absolute;
  top: 6px;
  left: 32px;
  z-index: 2;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--nilla-accent);
  pointer-events: none;
}
.stn-feed__track {
  display: flex;
  gap: 10px;
  width: max-content;
  padding: 22px 10px 10px;
  animation: stn-feed-scroll 90s linear infinite;
}
.stn-feed:hover .stn-feed__track,
.stn-feed:focus-within .stn-feed__track { animation-play-state: paused; }
@keyframes stn-feed-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.stn-feed::before,
.stn-feed::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 64px;
  z-index: 1;
  pointer-events: none;
}
.stn-feed::before { left: 0; background: linear-gradient(to right, var(--nilla-bg), transparent); }
.stn-feed::after { right: 0; background: linear-gradient(to left, var(--nilla-bg), transparent); }
.stn-feed__card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 148px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--nilla-border) 70%, transparent);
  background: color-mix(in srgb, var(--nilla-bg-alt) 88%, black);
  cursor: pointer;
  text-align: left;
  transition: border-color 140ms ease, transform 140ms ease;
}
.stn-feed__card:hover { border-color: var(--nilla-accent); transform: translateY(-2px); }
.stn-feed__card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.stn-feed__card span {
  padding: 0 8px 7px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--theme-ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── ORDER TILE PLATE ART ── */
/* The category's generated plate, bled under the tile at low opacity. It is
   the ::before — the first child in paint order — so the bar, head and sub
   all paint above it with no z-index bookkeeping. */
.stn-order::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--stn-plate);
  background-size: cover;
  background-position: center;
  opacity: 0.16;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.stn-order:hover::before { opacity: 0.32; }


/* ── STATION GUTTERS ── */
/* tier.surf's 32px gutters, from a medium centre column up; 18px below, so a
   phone keeps its width for the content. */
.stn-sec-head, .stn-wall, .stn-strip, .stn-mod-grid, .stn-proto, .stn-foot, .stn-pad { margin-left: 18px; margin-right: 18px; }
@container well (min-width: 48rem) {
  .stn-hero { padding: 28px 32px 24px; }
  .stn-sec-head, .stn-wall, .stn-strip, .stn-mod-grid, .stn-proto, .stn-foot, .stn-pad { margin-left: 32px; margin-right: 32px; }
}

/* ── THE CONNECTION DRILL ── */
/* "Pull the cable": the hero's alert state. The plate goes, the status bar
   turns, and four cards say what the workstation does when the link drops. */
.stn-drill { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.stn-drill__card { padding: 12px 14px; border: 1px solid color-mix(in srgb, #e11d48 55%, transparent);
  background: color-mix(in srgb, #e11d48 8%, var(--nilla-bg)); display: flex; flex-direction: column; gap: 5px;
  animation: stn-drill-in 260ms ease-out both; animation-delay: calc(var(--i, 0) * 70ms); }
.stn-drill__card b { font-size: 9.5px; font-weight: 800; letter-spacing: .2em; color: #f43f5e; }
.stn-drill__card strong { font-size: 13px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--nilla-text); }
.stn-drill__card span { font-size: 12.5px; line-height: 1.55; color: var(--theme-ink-dim); }
@keyframes stn-drill-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.stn-hero[data-emergency="1"] .stn-title-accent { color: #f43f5e; }
.stn-hero[data-emergency="1"] .stn-btn-primary { background: #f43f5e; }
.stn-drill-key { padding: 3px 9px; font: inherit; font-size: 9px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase;
  color: var(--nilla-bg); background: var(--nilla-accent); border: 0; cursor: pointer; }
.stn-hero[data-emergency="1"] .stn-drill-key { background: var(--theme-chart-up); }
.stn-status-bar .stn-lamp { display: inline-block; width: 6px; height: 6px; margin-right: 8px; background: var(--theme-chart-up);
  box-shadow: 0 0 8px var(--theme-chart-up); animation: stn-lamp 1.6s ease-in-out infinite; vertical-align: 1px; }
.stn-hero[data-emergency="1"] .stn-status-bar .stn-lamp { background: #f43f5e; box-shadow: 0 0 10px #f43f5e; animation-duration: .5s; }
@keyframes stn-lamp { 50% { opacity: .35; } }

/* ── SIGNAL FEED ART ── */
.stn-feed__card svg { display: block; width: 100%; aspect-ratio: 16 / 9; }
.stn-feed__card { text-decoration: none; }
.stn-feed__card em { padding: 0 8px; font-style: normal; font-size: 8.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--nilla-accent); }
.stn-feed__card:focus-visible { outline: 1px solid var(--theme-accent-2); outline-offset: 2px; }

/* ── THE HERO MINIATURE ── */
.stn-mock { margin-top: 22px; }

@media (prefers-reduced-motion: reduce) {
  .stn-hero__bg,
  .stn-hero__bg::after,
  .stn-feed__track,
  .stn-drill__card,
  .stn-status-bar .stn-lamp { animation: none; }
  .stn-feed { overflow-x: auto; }
}