/* THE GOD TERMINAL — popup scenes 26–30: password, biometric, dna, intercept, power grid.
 * The "computer badass" set: precise HUD chrome around one big instrument per scene.
 * Shared pieces (telemetry, instrument stage, status line, verdict band) use the sc6-
 * prefix and are only used by these five scenes; everything else is .sc-<name>-*.
 * Palette tokens throughout, so every scene suits all seven palettes. */

@keyframes sc6-rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes sc6-blink { 50% { opacity: 0.2; } }
@keyframes sc6-verdict {
  0% { opacity: 0; transform: scale(1.35, 0.04); filter: brightness(3); }
  30% { opacity: 1; transform: scale(0.98, 1.1); filter: brightness(2); }
  55% { transform: scale(1.01, 0.97); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes sc6-verdict-calm {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* A spoken word (biometric caption) and a freshly read base (DNA ticker) pop in from white. */
@keyframes sc6-word {
  from { transform: translateY(3px) scale(1.25); color: #fff; }
  to { transform: none; }
}
@keyframes sc6-base {
  from { transform: translateY(-0.6em) scale(1.6); color: #fff; }
  to { transform: none; }
}

/* ───────── shared HUD pieces ───────── */
.sc6-root {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  container-type: inline-size;
}

.sc6-tele { display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; animation: sc6-rise 260ms ease-out both; }
.sc6-tm { display: grid; gap: 0.1rem; min-width: 0; }
.sc6-tm-k {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}
.sc6-tm-v {
  overflow: hidden;
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-bright);
  text-shadow: var(--text-glow);
}
.sc6-tm-v.is-good { color: var(--good); }
.sc6-tm-v.is-bad { color: var(--bad); }

/* The instrument: dark glass, fine scanlines, lit HUD corner brackets. */
.sc6-stage {
  --hb: 12px;
  --hc: color-mix(in srgb, var(--line-bright) 80%, transparent);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background:
    radial-gradient(90% 80% at 50% 50%, color-mix(in srgb, var(--glow) 9%, transparent), transparent 75%),
    color-mix(in srgb, var(--bg) 78%, transparent);
  box-shadow: inset 0 0 calc(34px * var(--glow-k)) calc(-14px * var(--glow-k)) var(--glow);
  animation: sc6-rise 280ms 60ms ease-out both;
}
.sc6-stage::before,
.sc6-stage::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
.sc6-stage::before {
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px);
}
.sc6-stage::after {
  inset: 5px;
  background:
    linear-gradient(var(--hc), var(--hc)) left top / var(--hb) 1.5px,
    linear-gradient(var(--hc), var(--hc)) left top / 1.5px var(--hb),
    linear-gradient(var(--hc), var(--hc)) right top / var(--hb) 1.5px,
    linear-gradient(var(--hc), var(--hc)) right top / 1.5px var(--hb),
    linear-gradient(var(--hc), var(--hc)) left bottom / var(--hb) 1.5px,
    linear-gradient(var(--hc), var(--hc)) left bottom / 1.5px var(--hb),
    linear-gradient(var(--hc), var(--hc)) right bottom / var(--hb) 1.5px,
    linear-gradient(var(--hc), var(--hc)) right bottom / 1.5px var(--hb);
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 calc(4px * var(--glow-k)) var(--glow));
}
.sc6-stage > canvas { display: block; width: 100%; }

.sc6-status {
  --s: var(--warn);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 1.5rem;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-bright);
  text-shadow: var(--text-glow);
}
.sc6-status::before {
  content: '';
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--s);
  box-shadow: 0 0 10px var(--s);
  animation: sc6-blink 640ms steps(1) infinite;
}
.sc6-status.is-good { --s: var(--good); color: color-mix(in srgb, var(--good) 45%, var(--text-bright)); }
.sc6-status.is-good::before { animation: none; }
.sc6-status.is-bad { --s: var(--bad); }

/* Verdict: a lit band that slams open across an instrument. */
.sc6-verdict {
  --v: var(--good);
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin-top: -3.4rem;
  padding: 0.75rem 1rem 0.85rem;
  border-block: 1px solid color-mix(in srgb, var(--v) 75%, transparent);
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--v) 14%, transparent) 30% 70%, transparent),
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 40%, transparent), color-mix(in srgb, var(--bg) 94%, transparent) 14% 86%, color-mix(in srgb, var(--bg) 40%, transparent));
  box-shadow: 0 0 calc(30px * var(--glow-k)) -8px var(--v), inset 0 0 calc(30px * var(--glow-k)) -14px var(--v);
  text-align: center;
  opacity: 0;
  pointer-events: none;
}
.sc6-verdict.is-in { animation: sc6-verdict 540ms cubic-bezier(.2, .9, .3, 1) both; }
.sc6-verdict-title {
  font-family: var(--font-display);
  font-size: min(3.4rem, 12.5cqw);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--v) 55%, #fff);
  text-shadow: 0 0 calc(16px * var(--glow-k)) var(--v), 0 0 3px color-mix(in srgb, var(--v) 60%, transparent);
}
.sc6-verdict-sub {
  max-width: 100%;
  text-wrap: balance;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-bright);
  text-shadow: var(--text-glow);
}

/* Narrow windows: telemetry becomes a tight label · value list instead of tall stacked pairs. */
@container (max-width: 360px) {
  .sc6-tele { display: grid; gap: 0.15rem; }
  .sc6-tm { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; }
  .sc6-tm-v { font-size: 0.875rem; }
  .sc6-verdict-sub { font-size: 0.8125rem; letter-spacing: 0.06em; }
}

html[data-reduced-motion="on"] .sc6-verdict.is-in { animation: sc6-verdict-calm 300ms ease-out both; }
html[data-reduced-motion="on"] .sc6-status::before { animation: none; }

/* ───────── 26 · Cracking the Password ───────── */
.sc-password-stage { padding: 0.8rem 0.8rem 1rem; }
.sc-password-hash {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--dim);
}
.sc-password-hash b {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--dim) 70%, var(--faint));
}

.sc-password-reels {
  --gap: clamp(2px, 1.1cqw, 0.3rem);
  --w: min(2.35rem, calc((100cqw - 1.8rem - (var(--n) - 1) * var(--gap)) / var(--n)));
  --fs: min(1.85rem, calc(var(--w) * 1.25));
  --cell: calc(var(--fs) * 1.3);
  position: relative;
  display: flex;
  justify-content: center;
  gap: var(--gap);
  padding: 0.35rem 0;
}
/* Payline: the lit window every reel lands in. */
.sc-password-reels::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: calc(var(--cell) + 6px);
  translate: 0 -50%;
  border-block: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 9%, transparent) 15% 85%, transparent);
  box-shadow: 0 0 calc(14px * var(--glow-k)) -4px var(--accent);
  pointer-events: none;
}
.sc-password-reel {
  position: relative;
  flex: none;
  width: var(--w);
  height: calc(var(--cell) * 1.9);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), color-mix(in srgb, var(--text) 7%, transparent) 50%, rgba(0, 0, 0, 0.55));
  font-size: var(--fs);
  font-weight: 800;
  line-height: var(--cell);
  text-align: center;
  color: var(--text);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 32%, #000 68%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 32%, #000 68%, transparent);
  transition: border-color 200ms, background-color 200ms;
}
.sc-password-strip {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% - var(--cell) * 1.5);
  will-change: transform;
}
.sc-password-strip span { display: block; height: var(--cell); }
/* Spinning reels smear vertically: two faint echoes read as motion blur. */
.sc-password-reel.is-spinning .sc-password-strip {
  color: color-mix(in srgb, var(--text) 80%, transparent);
  text-shadow:
    0 calc(var(--cell) * -0.22) 0 color-mix(in srgb, var(--text) 35%, transparent),
    0 calc(var(--cell) * 0.22) 0 color-mix(in srgb, var(--text) 35%, transparent);
}
.sc-password-reel.is-locked {
  border-color: var(--line-bright);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4), color-mix(in srgb, var(--accent) 20%, transparent) 50%, rgba(0, 0, 0, 0.4));
  color: var(--text-bright);
  text-shadow: 0 0 calc(10px * var(--glow-k)) var(--accent), 0 0 2px var(--accent);
  -webkit-mask-image: none;
  mask-image: none;
}
.sc-password-reel.is-locked .sc-password-strip span:not(:nth-child(2)) { opacity: 0; transition: opacity 160ms; }
.sc-password-reel.is-granted {
  border-color: var(--good);
  color: #fff;
  text-shadow: 0 0 calc(12px * var(--glow-k)) var(--good), 0 0 3px var(--good);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), color-mix(in srgb, var(--good) 28%, transparent) 50%, rgba(0, 0, 0, 0.35));
  box-shadow: 0 0 calc(16px * var(--glow-k)) -4px var(--good);
}
.sc-password-flash {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.85) 35% 65%, transparent);
  opacity: 0;
  pointer-events: none;
}

.sc-password-deck {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 11.5rem;
  gap: 0.9rem;
  min-height: 6.4rem;
  animation: sc6-rise 280ms 120ms ease-out both;
}
.sc-password-log {
  display: grid;
  align-content: end;
  gap: 0.1rem;
  overflow: hidden;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sc-password-log span { overflow: hidden; text-overflow: ellipsis; color: var(--dim); }
.sc-password-log span::before { content: '✗  '; color: color-mix(in srgb, var(--bad) 70%, var(--dim)); }
.sc-password-log span:last-child { color: var(--text-bright); text-shadow: var(--text-glow); }
.sc-password-log span.is-hit { color: var(--good); }
.sc-password-log span.is-hit::before { content: '✓  '; color: var(--good); }

.sc-password-entropy { display: grid; align-content: end; gap: 0.35rem; }
.sc-password-entropy-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.sc-password-bits {
  font-size: 1.125rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-bright);
  text-shadow: var(--text-glow);
}
.sc-password-meter { --meter-color: var(--warn); --meter-h: 0.85rem; --meter-gap: 2px; }
.sc-password-log, .sc-password-entropy { transition: opacity 300ms ease; }
.sc-password-deck.is-done .sc-password-log,
.sc-password-deck.is-done .sc-password-entropy { opacity: 0.12; }
.sc-password-deck .sc6-verdict {
  top: 0;
  bottom: 0;
  justify-content: center;
  margin: 0;
  border-radius: 4px;
}

@container (max-width: 440px) {
  /* Every pixel goes to the reels so long passwords stay legible. */
  .sc-password-stage { padding: 0.6rem 0.35rem 0.8rem; }
  .sc-password-reels { --gap: 1px; --w: min(2.35rem, calc((100cqw - 0.8rem - (var(--n) - 1) * var(--gap)) / var(--n))); }
  .sc-password-deck { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; min-height: 8.4rem; }
  .sc-password-log span:nth-last-child(n + 4) { display: none; }
}

/* ───────── 27 · Biometric Scan ───────── */
.sc-biometric-stage {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  height: 16.5rem;
}
.sc-biometric-view {
  position: relative;
  min-height: 0;
  border-right: 1px solid var(--line);
}
.sc-biometric-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-biometric-caption {
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  bottom: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.1rem 0.45em;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--faint);
  opacity: 0;
  transition: opacity 200ms;
}
.sc-biometric-caption.is-on { opacity: 1; }
.sc-biometric-caption span { transition: color 120ms; }
.sc-biometric-caption span.is-said {
  color: var(--text-bright);
  text-shadow: 0 0 calc(10px * var(--glow-k)) var(--accent);
  animation: sc6-word 260ms cubic-bezier(.2, 1.4, .4, 1);
}

.sc-biometric-steps {
  display: grid;
  align-content: center;
  gap: 0.55rem;
  padding: 0.9rem;
}
.sc-biometric-step {
  display: grid;
  gap: 0.4rem;
  padding: 0.55rem 0.75rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 4px;
  opacity: 0.5;
  transition: opacity 220ms, border-color 220ms, background-color 220ms, box-shadow 220ms;
}
.sc-biometric-step.is-active {
  opacity: 1;
  border-color: var(--line-bright);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  box-shadow: inset 0 0 calc(18px * var(--glow-k)) -8px var(--glow), 0 0 calc(14px * var(--glow-k)) -8px var(--glow);
}
.sc-biometric-step.is-done { opacity: 1; border-color: color-mix(in srgb, var(--good) 35%, transparent); }
.sc-biometric-step-head { display: flex; align-items: center; gap: 0.6rem; }
.sc-biometric-led {
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--faint);
}
.is-active .sc-biometric-led { background: var(--warn); box-shadow: 0 0 10px var(--warn); animation: sc6-blink 500ms steps(1) infinite; }
.is-done .sc-biometric-led { background: var(--good); box-shadow: 0 0 10px var(--good); }
.sc-biometric-step-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-bright);
}
.sc-biometric-step-val {
  font-size: 0.9375rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--dim);
}
.is-done .sc-biometric-step-val { color: var(--good); text-shadow: 0 0 calc(8px * var(--glow-k)) var(--good); }
.sc-biometric-step-bar {
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: color-mix(in srgb, var(--faint) 50%, transparent);
}
.sc-biometric-step-bar i {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.is-done .sc-biometric-step-bar i { background: var(--good); box-shadow: 0 0 8px var(--good); transition: transform 200ms ease-out; }
.sc-biometric-step-note {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.is-done .sc-biometric-step-note { color: var(--good); }

.sc-biometric-view, .sc-biometric-steps { transition: opacity 400ms ease; }
.sc-biometric-stage.is-done .sc-biometric-view,
.sc-biometric-stage.is-done .sc-biometric-steps { opacity: 0.35; }
.sc-biometric-verdict { margin-top: -4.3rem; }
.sc-biometric-verdict .sc6-verdict-title { font-size: min(3.2rem, calc(170cqw / var(--len))); white-space: nowrap; }
.sc-biometric-confirmed { color: var(--good); letter-spacing: 0.3em; }

@container (max-width: 440px) {
  .sc-biometric-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: 13rem auto; height: auto; }
  .sc-biometric-view { border-right: 0; border-bottom: 1px solid var(--line); }
  .sc-biometric-steps { padding: 0.6rem; gap: 0.3rem; }
  .sc-biometric-step { padding: 0.35rem 0.6rem 0.45rem; gap: 0.3rem; }
  .sc-biometric-step-note { display: none; }
  .sc-biometric-verdict { top: 6.5rem; padding-inline: 0.5rem; }
  .sc-biometric-verdict .sc6-verdict-title { font-size: min(2.6rem, 11cqw); white-space: normal; text-wrap: balance; }
  .sc-biometric-confirmed { letter-spacing: 0.16em; }
}
html[data-reduced-motion="on"] .is-active .sc-biometric-led,
html[data-reduced-motion="on"] .sc-biometric-caption span.is-said { animation: none; }

/* ───────── 28 · Sequencing DNA ───────── */
.sc-dna-stage canvas { height: 10.5rem; }
.sc-dna-stage .sc6-verdict { margin-top: -3.2rem; }

.sc-dna-ticker {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  animation: sc6-rise 280ms 100ms ease-out both;
}
.sc-dna-tape {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
  height: 1.6rem;
  overflow: hidden;
  font-size: 1.0625rem;
  font-weight: 800;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%);
  mask-image: linear-gradient(90deg, transparent, #000 25%);
}
.sc-dna-tape span { flex: none; width: 0.78em; text-align: center; animation: sc6-base 300ms cubic-bezier(.2, 1.4, .4, 1); }
.sc-dna-tape .sc-dna-gap { flex: none; width: 0.5em; }
.sc-dna-b0 { color: var(--b0); text-shadow: 0 0 calc(8px * var(--glow-k)) var(--b0); }
.sc-dna-b1 { color: var(--b1); text-shadow: 0 0 calc(8px * var(--glow-k)) var(--b1); }
.sc-dna-b2 { color: var(--b2); text-shadow: 0 0 calc(8px * var(--glow-k)) var(--b2); }
.sc-dna-b3 { color: var(--b3); text-shadow: 0 0 calc(8px * var(--glow-k)) var(--b3); }

.sc-dna-rows { display: grid; gap: 0.35rem; animation: sc6-rise 280ms 140ms ease-out both; }
.sc-dna-row {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr) 4.4rem;
  align-items: center;
  gap: 0.8rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: border-color 250ms, background-color 250ms;
}
.sc-dna-row.is-lead {
  border-color: color-mix(in srgb, var(--line-bright) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.sc-dna-name {
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-bright);
}
.sc-dna-track {
  position: relative;
  height: 0.6rem;
  overflow: hidden;
  border-radius: 2px;
  background: color-mix(in srgb, var(--faint) 40%, rgba(0, 0, 0, 0.4));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 80%, transparent);
}
.sc-dna-lead,
.sc-dna-fill {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left;
}
.sc-dna-lead { background: rgba(255, 255, 255, 0.85); transition: transform 120ms ease-out; }
.sc-dna-fill {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 50%, transparent), var(--accent));
  box-shadow: 0 0 10px var(--accent);
}
.sc-dna-row.is-lead .sc-dna-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--good) 50%, transparent), var(--good)); box-shadow: 0 0 12px var(--good); }
.sc-dna-pct {
  text-align: right;
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-bright);
}
.sc-dna-row.is-lead .sc-dna-pct { color: var(--good); text-shadow: 0 0 calc(8px * var(--glow-k)) var(--good); }

@container (max-width: 400px) {
  .sc-dna-stage canvas { height: 8.5rem; }
  .sc-dna-row { grid-template-columns: 4.2rem minmax(0, 1fr) 3.8rem; gap: 0.5rem; padding-inline: 0.35rem; }
  .sc-dna-name { letter-spacing: 0.06em; }
  .sc-dna-stage .sc6-verdict { margin-top: -3rem; padding-inline: 0.4rem; }
}
html[data-reduced-motion="on"] .sc-dna-tape span { animation: none; }

/* ───────── 29 · Audio Intercept ───────── */
.sc-intercept-stage canvas { height: 13rem; }

.sc-intercept-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; animation: sc6-rise 280ms 100ms ease-out both; }
.sc-intercept-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.25);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--dim);
  transition: color 200ms, border-color 200ms, background-color 200ms, box-shadow 200ms;
}
.sc-intercept-chip i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--faint);
  transition: background-color 150ms, box-shadow 150ms;
}
.sc-intercept-chip.is-on {
  border-color: var(--line-bright);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text-bright);
  box-shadow: 0 0 calc(14px * var(--glow-k)) -5px var(--glow);
}
.sc-intercept-chip.is-on i { background: var(--good); box-shadow: 0 0 8px var(--good); }
.sc-intercept-chip small { margin-left: -0.15rem; font-size: inherit; }

.sc-intercept-transcript {
  min-height: 5.6rem;
  padding: 0.6rem 0.85rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  opacity: 0.45;
  transition: opacity 250ms, border-color 300ms, box-shadow 300ms;
  animation: sc6-rise 280ms 140ms ease-out both;
}
.sc-intercept-transcript.is-on { opacity: 1; border-color: var(--line-bright); }
.sc-intercept-transcript.is-decoded {
  border-color: var(--good);
  box-shadow: 0 0 calc(18px * var(--glow-k)) -6px var(--good), inset 0 0 calc(20px * var(--glow-k)) -10px var(--good);
}
.sc-intercept-who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.7rem;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 220ms ease-out, transform 320ms cubic-bezier(.2, 1.4, .4, 1);
}
.sc-intercept-who.is-on { opacity: 1; transform: none; }
.sc-intercept-who b {
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--text-bright);
  text-shadow: 0 0 calc(10px * var(--glow-k)) var(--accent);
}
.sc-intercept-match {
  margin-left: auto;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--good);
}
.sc-intercept-text {
  margin: 0.35rem 0 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-bright);
  text-shadow: var(--text-glow);
}
.sc-intercept-caret {
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--cursor);
  box-shadow: 0 0 8px var(--cursor);
  animation: sc6-blink 900ms steps(1) infinite;
}
.sc-intercept-caret.is-done { background: var(--good); box-shadow: 0 0 8px var(--good); }

@container (max-width: 420px) {
  .sc-intercept-stage canvas { height: 10.5rem; }
  .sc-intercept-chips { gap: 0.35rem; }
  .sc-intercept-chip { gap: 0.35rem; padding: 0.3rem 0.45rem; letter-spacing: 0.04em; }
  .sc-intercept-chip small { display: none; }
  .sc-intercept-text { font-size: 1rem; }
}
html[data-reduced-motion="on"] .sc-intercept-caret { animation: none; }

/* ───────── 30 · Rerouting the Power Grid ───────── */
.sc-power-grid-stage canvas { height: 14rem; }
.sc-power-grid-verdict { top: auto; bottom: 0.9rem; margin-top: 0; }

.sc-power-grid-dials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  animation: sc6-rise 280ms 120ms ease-out both;
}
.sc-power-grid-dial {
  display: grid;
  justify-items: center;
  gap: 0.05rem;
  padding: 0.35rem 0.4rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  transition: border-color 200ms, box-shadow 200ms;
}
.sc-power-grid-dial.is-red {
  border-color: color-mix(in srgb, var(--bad) 70%, transparent);
  box-shadow: 0 0 calc(16px * var(--glow-k)) -6px var(--bad);
}
.sc-power-grid-gauge { display: block; width: 100%; max-width: 8.5rem; overflow: visible; }
.sc-power-grid-arc { fill: none; stroke: color-mix(in srgb, var(--text) 25%, transparent); stroke-width: 2; }
.sc-power-grid-red { fill: none; stroke: var(--bad); stroke-width: 3.5; opacity: 0.8; }
.sc-power-grid-ticks { fill: none; stroke: color-mix(in srgb, var(--text) 55%, transparent); stroke-width: 1.2; }
.sc-power-grid-needle {
  stroke: var(--text-bright);
  stroke-width: 2.4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px var(--accent));
}
.sc-power-grid-hub { fill: var(--accent); stroke: var(--text-bright); stroke-width: 1.2; }
.is-red .sc-power-grid-needle { stroke: #fff; filter: drop-shadow(0 0 4px var(--bad)); }
.sc-power-grid-value {
  margin-top: -0.6rem;
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-bright);
  text-shadow: var(--text-glow);
}
.is-red .sc-power-grid-value { color: color-mix(in srgb, var(--bad) 60%, #fff); }

@container (max-width: 420px) {
  .sc-power-grid-stage canvas { height: 13rem; }
  .sc-power-grid-dials { gap: 0.4rem; }
  .sc-power-grid-dial { padding-inline: 0.2rem; }
  .sc-power-grid-value { margin-top: -0.4rem; font-size: 0.8125rem; }
  .sc-power-grid-verdict { padding-inline: 0.4rem; }
}