/* THE GOD TERMINAL — popup scenes 16–20, the "operator" set: decrypt, satellite relay,
 * neural net, MRI, RAM hot-swap. A small shared HUD kit (sc4-*: status pill, inset screen
 * with corner brackets, telemetry fields, payoff banner) keeps the five consistent; every
 * colour is a palette token except the MRI's fixed medical greys and teal. */

@keyframes sc4-blink { 50% { opacity: 0.2; } }
@keyframes sc4-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes sc4-lockon {
  from { opacity: 0; transform: scale(1.9) rotate(18deg); }
  60% { opacity: 1; }
  to { opacity: 0.85; transform: none; }
}
@keyframes sc4-shiver {
  0% { translate: 0 0; }
  25% { translate: -1px 1px; }
  50% { translate: 1px -1px; }
  75% { translate: 1px 1px; }
}
@keyframes sc4-banner-in {
  from { opacity: 0; transform: scale(1.6); filter: brightness(3); }
  55% { opacity: 1; transform: scale(0.96); filter: brightness(1.4); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes sc4-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ───────── shared HUD kit ───────── */
.sc4-root { display: flex; flex-direction: column; gap: 0.7rem; container-type: inline-size; }
.sc4-root > * { animation: sc4-rise 280ms ease-out both; }
.sc4-root > :nth-child(2) { animation-delay: 50ms; }
.sc4-root > :nth-child(3) { animation-delay: 100ms; }
.sc4-root > :nth-child(4) { animation-delay: 150ms; }
.sc4-root > :nth-child(5) { animation-delay: 200ms; }

.sc4-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.45rem 1rem; min-height: 2rem;
}

/* Status pill: blinking dot + uppercase state; data-tone = good | warn | bad. */
.sc4-status {
  --tone: var(--accent);
  display: inline-flex; align-items: center; gap: 0.55rem; min-width: 0;
  padding: 0.22rem 0.8rem 0.22rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--tone) 60%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--tone) 13%, transparent);
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  color: color-mix(in srgb, var(--tone) 72%, var(--text-bright));
  text-shadow: 0 0 calc(10px * var(--glow-k)) color-mix(in srgb, var(--tone) 55%, transparent);
  transition: color 200ms, border-color 200ms, background-color 200ms;
}
.sc4-status[data-tone="good"] { --tone: var(--good); }
.sc4-status[data-tone="warn"] { --tone: var(--warn); }
.sc4-status[data-tone="bad"] { --tone: var(--bad); }
.sc4-status > i {
  flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--tone); box-shadow: 0 0 8px var(--tone);
  animation: sc4-blink 0.9s steps(1) infinite;
}
.sc4-status > span { overflow: hidden; text-overflow: ellipsis; }

/* Inset viewport: deep glass, lit edge, corner brackets and fine scanlines above the content. */
.sc4-screen {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 6px;
  background:
    radial-gradient(120% 90% at 50% 35%, color-mix(in srgb, var(--bg-2) 75%, transparent), transparent 75%),
    color-mix(in srgb, var(--bg) 90%, #000);
  box-shadow: inset 0 0 34px -12px var(--glow), inset 0 1px 0 color-mix(in srgb, var(--text-bright) 7%, transparent);
  transition: border-color 220ms, box-shadow 220ms;
}
.sc4-screen::before {
  --hb: 12px; --ht: 2px; --hc: color-mix(in srgb, var(--line-bright) 80%, transparent);
  content: ''; position: absolute; inset: 6px; z-index: 3; pointer-events: none;
  background:
    linear-gradient(var(--hc), var(--hc)) left top / var(--hb) var(--ht),
    linear-gradient(var(--hc), var(--hc)) left top / var(--ht) var(--hb),
    linear-gradient(var(--hc), var(--hc)) right top / var(--hb) var(--ht),
    linear-gradient(var(--hc), var(--hc)) right top / var(--ht) var(--hb),
    linear-gradient(var(--hc), var(--hc)) left bottom / var(--hb) var(--ht),
    linear-gradient(var(--hc), var(--hc)) left bottom / var(--ht) var(--hb),
    linear-gradient(var(--hc), var(--hc)) right bottom / var(--hb) var(--ht),
    linear-gradient(var(--hc), var(--hc)) right bottom / var(--ht) var(--hb);
  background-repeat: no-repeat;
}
.sc4-screen::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 3px);
}
.sc4-screen > canvas { display: block; width: 100%; }

/* Telemetry: label / value pairs that wrap on narrow windows. */
.sc4-fields { display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; }
.sc4-field { display: inline-flex; align-items: baseline; gap: 0.55rem; min-width: 0; }
.sc4-label {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  color: var(--dim);
}
.sc4-value {
  font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--text-bright); text-shadow: var(--text-glow);
}

/* Payoff banner over a screen: display-size verdict, plain-weight subline. */
.sc4-banner {
  --tone: var(--good);
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem;
  padding: 1rem; text-align: center; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 50%, color-mix(in srgb, var(--bg) 88%, transparent), transparent);
  visibility: hidden;
}
.sc4-banner.is-on { visibility: visible; }
.sc4-banner.is-on > * { animation: sc4-banner-in 520ms cubic-bezier(.2,.8,.3,1) both; }
.sc4-banner.is-on > :nth-child(2) { animation-delay: 90ms; }
.sc4-banner.is-on > :nth-child(3) { animation: sc4-fade-up 360ms 420ms ease-out both; }
.sc4-banner-title {
  font-family: var(--font-display); font-size: clamp(2.6rem, 9cqi, 3.75rem); line-height: 0.9; letter-spacing: 0.04em;
  color: var(--tone);
  text-shadow: 0 0 calc(18px * var(--glow-k)) var(--tone), 0 0 2px #fff;
}
.sc4-banner-sub {
  font-size: 1rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-bright); text-shadow: var(--text-glow);
}
.sc4-banner-note { font-size: 1rem; font-weight: 500; font-style: italic; color: var(--text); }

html[data-reduced-motion="on"] .sc4-status > i { animation: none; }
html[data-reduced-motion="on"] .sc4-banner.is-on > * { animation-name: sc4-fade-up; }

/* ───────── 16 · Decrypting the Mainframe ───────── */
.sc-decrypt-readout { display: flex; align-items: baseline; gap: 0.15rem; }
.sc-decrypt-pct {
  min-width: 3ch; text-align: right;
  font-family: var(--font-display); font-size: 3rem; font-weight: 400; line-height: 0.75;
  font-variant-numeric: tabular-nums; color: var(--text-bright); text-shadow: var(--text-glow);
}
.sc-decrypt-unit { font-size: 1rem; font-weight: 800; color: var(--dim); }
.sc-decrypt-track {
  position: relative; height: 3px; margin-top: -0.3rem; border-radius: 2px; overflow: hidden;
  background: color-mix(in srgb, var(--line) 70%, transparent);
}
.sc-decrypt-bar {
  position: absolute; inset: 0; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--accent), var(--text-bright));
  box-shadow: 0 0 10px var(--accent);
}

.sc-decrypt-vault {
  --tile: 32px;
  padding: calc(var(--tile) * 2.2) 0.75rem calc(var(--tile) * 2.4);
}
.sc-decrypt-vault.is-alert { border-color: var(--warn); box-shadow: inset 0 0 40px -12px var(--warn); }
.sc-decrypt-vault.is-solved { border-color: var(--good); box-shadow: inset 0 0 40px -14px var(--good); }
.sc-decrypt-cols { position: absolute; inset: 0; height: 100%; pointer-events: none; }
.sc-decrypt-line {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: calc(var(--tile) * 0.5) calc(var(--tile) * 0.55);
}
.sc-decrypt-word { display: flex; gap: calc(var(--tile) * 0.12); }
.sc-decrypt-tile {
  --c: var(--line-bright);
  position: relative;
  display: grid; place-items: center;
  width: var(--tile); height: calc(var(--tile) * 1.24);
  border: 1px solid var(--line); border-radius: 4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--text) 9%, var(--panel-strong)), var(--panel-strong));
  font-size: max(0.8rem, calc(var(--tile) * 0.66)); font-weight: 800; line-height: 1;
  color: var(--faint);
  /* The glyph settles faster than the face, so a bright letter emerges from each white flash
     instead of both fading through the same grey. */
  transition: color 80ms, border-color 260ms, background-color 260ms, box-shadow 260ms;
}
.sc-decrypt-tile > b { font-weight: inherit; }
/* Lock-on brackets close in on each tile as it resolves. */
.sc-decrypt-tile::before {
  content: ''; position: absolute; inset: -4px; opacity: 0; pointer-events: none;
  background:
    linear-gradient(var(--c), var(--c)) left top / 6px 1.5px, linear-gradient(var(--c), var(--c)) left top / 1.5px 6px,
    linear-gradient(var(--c), var(--c)) right top / 6px 1.5px, linear-gradient(var(--c), var(--c)) right top / 1.5px 6px,
    linear-gradient(var(--c), var(--c)) left bottom / 6px 1.5px, linear-gradient(var(--c), var(--c)) left bottom / 1.5px 6px,
    linear-gradient(var(--c), var(--c)) right bottom / 6px 1.5px, linear-gradient(var(--c), var(--c)) right bottom / 1.5px 6px;
  background-repeat: no-repeat;
}
.sc-decrypt-tile.is-locked {
  color: var(--text-bright); border-color: var(--line-bright);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, var(--panel-strong)), var(--panel-strong));
  text-shadow: var(--text-glow);
  box-shadow: 0 0 calc(16px * var(--glow-k)) -5px var(--glow);
}
.sc-decrypt-tile.is-locked::before { animation: sc4-lockon 320ms cubic-bezier(.2,.8,.3,1) forwards; }
.sc-decrypt-tile.is-hot {
  background: #fff; color: var(--bg); border-color: #fff; text-shadow: none;
  box-shadow: 0 0 22px -2px #fff;
  transition: none;
}
.is-alert .sc-decrypt-tile { color: var(--warn); border-color: var(--warn); --c: var(--warn); animation: sc4-shiver 110ms steps(1) infinite; }
.sc-decrypt-tile.is-flying {
  z-index: 2;
  border-color: var(--text-bright);
  box-shadow: 0 14px 22px -8px rgba(0, 0, 0, 0.9), 0 0 22px -4px var(--glow);
}
.is-solved .sc-decrypt-tile:not(.is-hot) {
  color: var(--bg); border-color: color-mix(in srgb, var(--good) 60%, #fff); text-shadow: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--good) 75%, #fff), var(--good));
  box-shadow: 0 0 calc(20px * var(--glow-k)) -4px var(--good);
}
.is-solved .sc-decrypt-tile::before { opacity: 0; animation: none; }
.sc-decrypt-caption {
  position: absolute; left: 0; right: 0; bottom: calc(var(--tile) * 0.7); z-index: 1;
  padding: 0 1rem; text-align: center;
  font-size: 1.125rem; font-weight: 700; font-style: italic;
  color: var(--text-bright); text-shadow: var(--text-glow);
  opacity: 0; transform: translateY(8px);
  transition: opacity 380ms 160ms ease-out, transform 380ms 160ms cubic-bezier(.2,1.4,.4,1);
}
.sc-decrypt-caption.is-on { opacity: 1; transform: none; }
.sc-decrypt-key { min-width: 12ch; }
.sc-decrypt-key.is-found { color: var(--good); }

html[data-reduced-motion="on"] .is-alert .sc-decrypt-tile { animation: none; }

/* ───────── 17 · Relaying Satellites ───────── */
.sc-satellite-relay-banner { justify-content: flex-start; padding-top: 9%; }
.sc-satellite-relay-telemetry {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(6.4rem, 1fr)); gap: 0.5rem;
}
.sc-satellite-relay-cell {
  display: flex; flex-direction: column; gap: 0.3rem; min-width: 0;
  padding: 0.4rem 0.6rem 0.45rem;
  border: 1px solid var(--line); border-radius: 6px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
}
.sc-satellite-relay-dial { display: flex; align-items: center; gap: 0.5rem; }
.sc-satellite-relay-gauge { flex: none; width: 2.1rem; height: 2.1rem; }
.sc-satellite-relay-gauge svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sc-satellite-relay-gauge circle { fill: color-mix(in srgb, var(--panel-strong) 80%, transparent); stroke: var(--line-bright); stroke-width: 1.2; }
.sc-satellite-relay-gauge g line { stroke: var(--dim); stroke-width: 1.2; }
.sc-satellite-relay-gauge .n {
  stroke: var(--accent); stroke-width: 2; stroke-linecap: round;
  transform-origin: 20px 20px;
  filter: drop-shadow(0 0 3px var(--accent));
}
.sc-satellite-relay-gauge .hub { fill: var(--text-bright); stroke: none; }
.sc-satellite-relay-dial .sc4-value { font-size: 0.9375rem; }

.sc-satellite-relay-bars { display: flex; align-items: flex-end; gap: 3px; height: 1.6rem; }
.sc-satellite-relay-bars i {
  flex: 1; max-width: 0.55rem; border-radius: 1px;
  background: color-mix(in srgb, var(--faint) 70%, transparent);
  transition: background-color 160ms, box-shadow 200ms, transform 260ms cubic-bezier(.2,1.8,.4,1);
  transform-origin: bottom;
}
.sc-satellite-relay-bars i:nth-child(1) { height: 25%; }
.sc-satellite-relay-bars i:nth-child(2) { height: 43%; }
.sc-satellite-relay-bars i:nth-child(3) { height: 62%; }
.sc-satellite-relay-bars i:nth-child(4) { height: 81%; }
.sc-satellite-relay-bars i:nth-child(5) { height: 100%; }
.sc-satellite-relay-bars i.is-on { background: var(--good); box-shadow: 0 0 8px var(--good); }

.sc-satellite-relay-num { display: flex; align-items: baseline; gap: 0.2rem; transform-origin: left center; }
.sc-satellite-relay-num span { font-size: 0.875rem; font-weight: 800; color: var(--dim); }
.sc-satellite-relay-big {
  font-family: var(--font-display); font-size: 2.1rem; font-weight: 400; line-height: 0.8;
  font-variant-numeric: tabular-nums; color: var(--text-bright); text-shadow: var(--text-glow);
}

.sc-satellite-relay-payload {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 0.3rem 0.9rem;
  padding: 0.55rem 0.8rem;
  border: 1px dashed var(--line); border-radius: 6px;
  background: color-mix(in srgb, var(--bg) 50%, transparent);
  transition: border-color 260ms, background-color 260ms, box-shadow 260ms;
}
.sc-satellite-relay-payload.is-open {
  border-style: solid; border-color: var(--line-bright);
  background: color-mix(in srgb, var(--accent) 9%, var(--bg));
  box-shadow: 0 0 calc(18px * var(--glow-k)) -6px var(--glow);
}
.sc-satellite-relay-msg {
  min-width: 0; font-size: 1rem; font-weight: 800; letter-spacing: 0.04em;
  color: var(--faint); overflow-wrap: anywhere;
  transition: color 200ms;
}
.is-open .sc-satellite-relay-msg { color: var(--text-bright); text-shadow: var(--text-glow); }

/* ───────── 18 · Building a Neural Network ───────── */
.sc-neural-net-banner {
  gap: 0.25rem;
  background: radial-gradient(56% 52% at 50% 50%, color-mix(in srgb, var(--bg) 94%, transparent), transparent);
}
.sc-neural-net-view > canvas { transition: opacity 500ms ease-out; }
.sc-neural-net-view.is-verdict > canvas { opacity: 0.4; }
.sc-neural-net-train {
  display: flex; align-items: center; gap: 0.9rem; min-width: 0;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--line); border-radius: 6px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
}
.sc-neural-net-train .sc4-value { min-width: 4.2ch; }
.sc-neural-net-chart { flex: 1; min-width: 3rem; height: 2.4rem; display: block; }
@container (max-width: 380px) {
  .sc-neural-net-train { flex-wrap: wrap; gap: 0.3rem 0.9rem; }
  .sc-neural-net-chart { order: 3; flex-basis: 100%; }
}

/* ───────── 19 · Scanning MRI ─────────
 * Medical-grade whatever the palette: the HUD tokens are re-pointed at cool greys and teal
 * inside the scene, so the shared kit (status, screens, fields) follows automatically. */
.sc-mri-root {
  --bg: #030607; --bg-2: #0a1214; --panel-strong: rgba(8, 13, 15, 0.95);
  --text: #9fbcbf; --text-bright: #e4f6f3; --dim: #6c9296; --faint: #3b555a;
  --line: rgba(120, 196, 192, 0.24); --line-bright: rgba(140, 226, 218, 0.72);
  --glow: rgba(79, 216, 200, 0.32); --glow-k: 0.6;
  --accent: #4fd8c8; --good: #4fd8c8; --warn: #ffb547;
  --text-glow: 0 0 6px rgba(79, 216, 200, 0.35);
}
.sc-mri-views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.sc-mri-pane { background: #020405; }
.sc-mri-pane > canvas { aspect-ratio: 1 / 0.84; height: auto; }
.sc-mri-tag {
  position: absolute; left: 0.6rem; top: 0.45rem; z-index: 2;
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em;
  color: var(--accent); text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}
.sc-mri-tag.is-right { left: auto; right: 0.6rem; font-variant-numeric: tabular-nums; color: var(--text-bright); }

.sc-mri-strip { height: 3.5rem; background: #020405; }
.sc-mri-strip > canvas { height: 100%; }
.sc-mri-finding {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem;
  padding: 0.3rem 1rem; text-align: center;
  background: linear-gradient(90deg, rgba(40, 22, 0, 0.92), rgba(58, 32, 2, 0.95) 50%, rgba(40, 22, 0, 0.92));
  border-top: 1px solid var(--warn); border-bottom: 1px solid var(--warn);
  visibility: hidden;
}
.sc-mri-finding b {
  font-size: 1.125rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.2;
  color: var(--warn); text-shadow: 0 0 12px rgba(255, 181, 71, 0.6);
}
.sc-mri-finding span { font-size: 0.8125rem; font-weight: 500; font-style: italic; color: #ffe2b0; }
.sc-mri-finding.is-on { visibility: visible; animation: sc-mri-finding-in 420ms cubic-bezier(.2,.8,.3,1) both; }
@keyframes sc-mri-finding-in {
  from { clip-path: inset(0 50% 0 50%); filter: brightness(2.4); }
  to { clip-path: inset(0 0 0 0); filter: none; }
}

.sc-mri-vitals { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.sc-mri-heart { font-size: 1.1rem; line-height: 1; color: #ff6f78; text-shadow: 0 0 8px rgba(255, 90, 100, 0.7); }
.sc-mri-bpm {
  min-width: 3ch; text-align: right;
  font-family: var(--font-display); font-size: 2.2rem; font-weight: 400; line-height: 0.8;
  font-variant-numeric: tabular-nums; color: var(--text-bright); text-shadow: var(--text-glow);
}
.sc-mri-ecg { flex: 1; min-width: 4rem; height: 2.4rem; display: block; }
@container (max-width: 380px) {
  .sc-mri-vitals > .sc4-field { display: none; }
}
.sc-mri-vitals.is-racing .sc-mri-bpm { color: var(--warn); text-shadow: 0 0 10px rgba(255, 181, 71, 0.6); }
.sc-mri-vitals.is-racing .sc-mri-heart { animation: sc-mri-thump 0.47s ease-out infinite; }
@keyframes sc-mri-thump { 15% { transform: scale(1.35); } }
html[data-reduced-motion="on"] .sc-mri-vitals.is-racing .sc-mri-heart { animation: none; }

/* ───────── 20 · Hot-Swapping RAM ───────── */
.sc-ram-swap-banner { background: radial-gradient(62% 58% at 50% 50%, color-mix(in srgb, var(--bg) 90%, transparent), transparent); }
.sc-ram-swap-test {
  display: flex; flex-direction: column; gap: 0.45rem;
  padding: 0.5rem 0.7rem 0.6rem;
  border: 1px solid var(--line); border-radius: 6px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
}
.sc-ram-swap-test-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.8rem; }
.sc-ram-swap-count { display: inline-flex; align-items: baseline; gap: 0.2rem; }
.sc-ram-swap-count span { font-size: 0.875rem; font-weight: 800; color: var(--dim); white-space: nowrap; }
.sc-ram-swap-tb {
  min-width: 2ch; text-align: right;
  font-family: var(--font-display); font-size: 2rem; font-weight: 400; line-height: 0.8;
  font-variant-numeric: tabular-nums; color: var(--text-bright); text-shadow: var(--text-glow);
}
.sc-ram-swap-verdict {
  margin-left: auto;
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dim);
}
.sc-ram-swap-verdict.is-pass { color: var(--good); text-shadow: 0 0 10px var(--good); }
.sc-ram-swap-grid { display: grid; grid-template-columns: repeat(32, minmax(0, 1fr)); gap: 2px; }
.sc-ram-swap-grid i {
  height: 0.6rem; border-radius: 1px;
  background: color-mix(in srgb, var(--faint) 45%, transparent);
  transition: background-color 260ms ease-out, box-shadow 260ms ease-out;
}
.sc-ram-swap-grid i.is-hot { background: #fff; box-shadow: 0 0 6px #fff; transition: none; }
.sc-ram-swap-grid i.is-ok { background: var(--good); box-shadow: 0 0 calc(5px * var(--glow-k)) color-mix(in srgb, var(--good) 60%, transparent); }

/* ───────── narrow windows (phones) ───────── */
@container (max-width: 420px) {
  .sc4-banner-title { font-size: 2.4rem; }
  .sc4-banner-sub { font-size: 0.875rem; letter-spacing: 0.1em; }
  .sc4-banner-note { font-size: 0.875rem; }
  .sc-satellite-relay-telemetry { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
  .sc-satellite-relay-cell { padding: 0.35rem 0.5rem 0.4rem; }
  .sc-satellite-relay-gauge { display: none; }
  .sc-satellite-relay-payload { gap: 0.25rem 0.6rem; padding: 0.5rem 0.6rem; }
  .sc-mri-strip { height: 5.4rem; }
  .sc-mri-finding b { font-size: 1rem; }
  .sc-mri-finding span { font-size: 0.75rem; }
}
/* The narrowest phone windows: secondary readouts step aside (the dish dials, since the dish
   slews on screen anyway, and the MRI sequence tag) and the payload stacks labels over values. */
@container (max-width: 300px) {
  .sc-satellite-relay-cell.is-dial { display: none; }
  .sc-satellite-relay-cell { padding: 0.35rem 0.4rem 0.4rem; }
  .sc-satellite-relay-cell .sc4-label { letter-spacing: 0.06em; }
  .sc-satellite-relay-big { font-size: 1.75rem; }
  .sc-satellite-relay-payload { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .sc-satellite-relay-payload .sc4-label:not(:first-child) { margin-top: 0.4rem; }
  .sc-mri-tag.is-seq { display: none; }
}