.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.25rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
}
.hero-copy > * + * { margin-top: var(--sp-5); }
.hero-copy h1 { margin: 0; }
.hero-figure { min-width: 0; }

@keyframes hero-rise-shift { from { transform: translateY(14px); } }
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(14px); }
}
.hero-copy > * { animation: hero-rise 620ms var(--ease-settle) backwards; }
.hero-copy > :nth-child(1) { animation-delay: 40ms; animation-duration: 480ms; }

.hero-copy > :nth-child(2) { animation-name: hero-rise-shift; animation-delay: 0ms; }
.hero-copy > :nth-child(3) { animation-delay: 230ms; }
.hero-copy > :nth-child(4) { animation-delay: 320ms; }
.hero-figure { animation: hero-rise 680ms var(--ease-settle) 120ms backwards; }

.problem-body { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.standards-body, .early-body { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.standards-body > * + * { margin-top: var(--sp-5); }
.early-body > * + * { margin-top: var(--sp-5); }
.standards-card { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); max-width: 36rem; }

.pipeline-wrap { margin-top: clamp(2.25rem, 5vw, 3.25rem); }
.steps { margin-top: clamp(2.25rem, 5vw, 3.25rem); }
.grid-cards { margin-top: clamp(2.25rem, 5vw, 3.25rem); }
.preview-wrap { margin-top: clamp(1.75rem, 4vw, 2.75rem); }

.step--yours::before {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.footer-status { margin-top: var(--sp-3); }

.hero-viz {
  --hero-viz-cycle: 12s;
  --hero-viz-runs: 3;
  --hero-viz-lift: -40px;
  --hero-viz-stage: clamp(248px, 26vw, 268px);
  --hero-viz-wave-h: clamp(60px, 13vw, 88px);
  --hero-viz-ease: var(--ease-out, cubic-bezier(0.2, 0, 0, 1));
  position: relative;
  margin: 0;
  padding: clamp(1.05rem, 3.2vw, 1.6rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  box-shadow: var(--edge-hi), var(--shadow-3);
  overflow: hidden;
}

.hero-viz-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1rem, 2.6vw, 1.5rem);
  min-height: var(--hero-viz-stage);
}

.hero-viz-signal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.05rem);
}

.hero-viz-lines {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.hero-viz-line {
  margin: 0;
  padding-left: 0.7rem;
  border-left: 1px solid var(--border);
  color: var(--text-muted);
  font-size: clamp(0.8125rem, 1.5vw, 0.9375rem);
  line-height: 1.45;
  text-wrap: pretty;
}

.hero-viz-wave {
  transform-origin: 50% 50%;
}

.hero-viz-wave-svg {
  display: block;
  width: 100%;
  height: var(--hero-viz-wave-h);
}

.hero-viz-axis {
  fill: var(--border);
}

.hero-viz-bar {
  fill: var(--accent);
  opacity: 0.7;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: scaleY(calc(var(--a) * 0.6));
}

.hero-viz-bar--b { transform: scaleY(calc(var(--a) * 0.38)); }
.hero-viz-bar--c { transform: scaleY(calc(var(--a) * 0.82)); }

.hero-viz-entries {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}

.hero-viz-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.5rem 0.7rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.hero-viz-row-main {
  display: block;
  min-width: 0;
}

.hero-viz-row-label {
  display: block;
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.hero-viz .hero-viz-row-code {
  display: block;
  margin-top: 0.1rem;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.8125rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-viz-row-id {
  color: var(--text);
}

.hero-viz .hero-viz-draft {
  justify-self: end;
  display: inline-block;
  padding: 0.15rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.5;
  white-space: nowrap;
}

.hero-viz-rule {
  height: 1px;
  margin: 0.45rem 0 0.15rem;
  background: var(--border);
  transform-origin: left center;
}

.hero-viz-foot {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.hero-viz--motion .hero-viz-stage {
  display: block;
}

.hero-viz--motion .hero-viz-signal,
.hero-viz--motion .hero-viz-entries {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-viz--motion .hero-viz-signal,
.hero-viz--motion .hero-viz-entries,
.hero-viz--motion .hero-viz-wave,
.hero-viz--motion .hero-viz-line,
.hero-viz--motion .hero-viz-row,
.hero-viz--motion .hero-viz-rule,
.hero-viz--motion .hero-viz-foot {
  opacity: 0;
  animation-duration: var(--hero-viz-cycle);
  animation-timing-function: var(--hero-viz-ease);
  animation-iteration-count: var(--hero-viz-runs);
  animation-fill-mode: both;
}

.hero-viz--motion .hero-viz-signal  { animation-name: hero-viz-signal-cycle; }
.hero-viz--motion .hero-viz-entries { animation-name: hero-viz-entries-cycle; }
.hero-viz--motion .hero-viz-wave    { animation-name: hero-viz-wave-cycle; }
.hero-viz--motion .hero-viz-line    { animation-name: hero-viz-line-cycle; animation-delay: calc(var(--i) * 0.24s); }
.hero-viz--motion .hero-viz-row     { animation-name: hero-viz-row-cycle;  animation-delay: calc(var(--i) * 0.42s); }
.hero-viz--motion .hero-viz-rule    { animation-name: hero-viz-rule-cycle; }
.hero-viz--motion .hero-viz-foot    { animation-name: hero-viz-foot-cycle; }

.hero-viz--motion .hero-viz-bar {
  animation-timing-function: ease-in-out;
  animation-iteration-count: 14;
  animation-delay: var(--d);
}

.hero-viz--motion .hero-viz-bar--a { animation-name: hero-viz-speak-a; animation-duration: 2.6s; }
.hero-viz--motion .hero-viz-bar--b { animation-name: hero-viz-speak-b; animation-duration: 3.1s; }
.hero-viz--motion .hero-viz-bar--c { animation-name: hero-viz-speak-c; animation-duration: 3.7s; }

.hero-viz--paused,
.hero-viz--paused * {
  animation-play-state: paused !important;
}

@keyframes hero-viz-signal-cycle {
  0%    { opacity: 1; }
  37%   { opacity: 1; }
  40.5% { opacity: 0; }
  100%  { opacity: 0; }
}

@keyframes hero-viz-signal-cycle-sm {
  0%    { opacity: 1; }
  40%   { opacity: 1; }
  44%   { opacity: 0; }
  100%  { opacity: 0; }
}

@keyframes hero-viz-entries-cycle {
  0%    { opacity: 0; }
  36%   { opacity: 0; }
  40%   { opacity: 1; }
  100%  { opacity: 1; }
}

@keyframes hero-viz-wave-cycle {
  0%   { opacity: 1;    transform: translateY(var(--hero-viz-lift)) scaleY(1); }
  24%  { opacity: 1;    transform: translateY(var(--hero-viz-lift)) scaleY(1); }
  32%  { opacity: 0.34; transform: translateY(0) scaleY(0.14); }
  100% { opacity: 0.34; transform: translateY(0) scaleY(0.14); }
}

@keyframes hero-viz-wave-cycle-sm {
  0%   { opacity: 1;    transform: translateY(var(--hero-viz-lift)) scaleY(1); }
  33%  { opacity: 1;    transform: translateY(var(--hero-viz-lift)) scaleY(1); }
  40%  { opacity: 0.3;  transform: translateY(0) scaleY(0.14); }
  100% { opacity: 0.3;  transform: translateY(0) scaleY(0.14); }
}

@keyframes hero-viz-line-cycle {
  0%   { opacity: 0; transform: translateY(6px); }
  21%  { opacity: 0; transform: translateY(6px); }
  27%  { opacity: 1; transform: translateY(0); }
  90%  { opacity: 1; transform: translateY(0); }
  94%  { opacity: 0; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(6px); }
}

@keyframes hero-viz-row-cycle {
  0%   { opacity: 0; transform: translateY(10px); }
  36%  { opacity: 0; transform: translateY(10px); }
  42%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes hero-viz-rule-cycle {
  0%   { opacity: 0; transform: scaleX(0); }
  57%  { opacity: 0; transform: scaleX(0); }
  63%  { opacity: 1; transform: scaleX(1); }
  96%  { opacity: 1; transform: scaleX(1); }
  99%  { opacity: 0; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(0); }
}

@keyframes hero-viz-foot-cycle {
  0%   { opacity: 0; transform: translateY(4px); }
  61%  { opacity: 0; transform: translateY(4px); }
  67%  { opacity: 1; transform: translateY(0); }
  96%  { opacity: 1; transform: translateY(0); }
  99%  { opacity: 0; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(4px); }
}

@keyframes hero-viz-speak-a {
  0%   { transform: scaleY(calc(var(--a) * 0.16)); }
  7%   { transform: scaleY(calc(var(--a) * 0.70)); }
  14%  { transform: scaleY(calc(var(--a) * 0.34)); }
  21%  { transform: scaleY(calc(var(--a) * 0.82)); }
  30%  { transform: scaleY(calc(var(--a) * 0.26)); }
  37%  { transform: scaleY(calc(var(--a) * 0.58)); }
  45%  { transform: scaleY(calc(var(--a) * 0.18)); }
  52%  { transform: scaleY(calc(var(--a) * 0.16)); }
  60%  { transform: scaleY(calc(var(--a) * 0.74)); }
  68%  { transform: scaleY(calc(var(--a) * 0.38)); }
  76%  { transform: scaleY(calc(var(--a) * 0.64)); }
  85%  { transform: scaleY(calc(var(--a) * 0.22)); }
  93%  { transform: scaleY(calc(var(--a) * 0.30)); }
  100% { transform: scaleY(calc(var(--a) * 0.16)); }
}

@keyframes hero-viz-speak-b {
  0%   { transform: scaleY(calc(var(--a) * 0.20)); }
  6%   { transform: scaleY(calc(var(--a) * 0.46)); }
  12%  { transform: scaleY(calc(var(--a) * 0.78)); }
  19%  { transform: scaleY(calc(var(--a) * 0.32)); }
  25%  { transform: scaleY(calc(var(--a) * 0.66)); }
  33%  { transform: scaleY(calc(var(--a) * 0.22)); }
  40%  { transform: scaleY(calc(var(--a) * 0.18)); }
  48%  { transform: scaleY(calc(var(--a) * 0.60)); }
  55%  { transform: scaleY(calc(var(--a) * 0.84)); }
  63%  { transform: scaleY(calc(var(--a) * 0.36)); }
  70%  { transform: scaleY(calc(var(--a) * 0.52)); }
  78%  { transform: scaleY(calc(var(--a) * 0.24)); }
  86%  { transform: scaleY(calc(var(--a) * 0.68)); }
  94%  { transform: scaleY(calc(var(--a) * 0.30)); }
  100% { transform: scaleY(calc(var(--a) * 0.20)); }
}

@keyframes hero-viz-speak-c {
  0%   { transform: scaleY(calc(var(--a) * 0.14)); }
  8%   { transform: scaleY(calc(var(--a) * 0.60)); }
  15%  { transform: scaleY(calc(var(--a) * 0.28)); }
  22%  { transform: scaleY(calc(var(--a) * 0.72)); }
  29%  { transform: scaleY(calc(var(--a) * 0.40)); }
  36%  { transform: scaleY(calc(var(--a) * 0.86)); }
  44%  { transform: scaleY(calc(var(--a) * 0.24)); }
  51%  { transform: scaleY(calc(var(--a) * 0.16)); }
  58%  { transform: scaleY(calc(var(--a) * 0.52)); }
  66%  { transform: scaleY(calc(var(--a) * 0.78)); }
  73%  { transform: scaleY(calc(var(--a) * 0.34)); }
  80%  { transform: scaleY(calc(var(--a) * 0.62)); }
  88%  { transform: scaleY(calc(var(--a) * 0.26)); }
  95%  { transform: scaleY(calc(var(--a) * 0.44)); }
  100% { transform: scaleY(calc(var(--a) * 0.14)); }
}

@media (max-width: 560px) {
  .hero-viz {
    --hero-viz-stage: clamp(244px, 58vw, 262px);
    --hero-viz-wave-h: clamp(76px, 22vw, 100px);
  }
  .hero-viz--motion {
    --hero-viz-lift: 0px;
  }
  .hero-viz--motion .hero-viz-lines {
    display: none;
  }
  .hero-viz--motion .hero-viz-wave {
    animation-name: hero-viz-wave-cycle-sm;
  }
  .hero-viz--motion .hero-viz-signal {
    animation-name: hero-viz-signal-cycle-sm;
  }
}

@media (max-width: 380px) {
  .hero-viz-row {
    padding: 0.45rem 0.55rem;
  }
  .hero-viz .hero-viz-draft {
    padding: 0.1rem 0.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-viz .hero-viz-signal,
  .hero-viz .hero-viz-entries,
  .hero-viz .hero-viz-wave,
  .hero-viz .hero-viz-line,
  .hero-viz .hero-viz-row,
  .hero-viz .hero-viz-rule,
  .hero-viz .hero-viz-foot,
  .hero-viz .hero-viz-bar {
    animation: none !important;
    transition: none !important;
  }
  .hero-viz .hero-viz-stage {
    display: flex !important;
  }
  .hero-viz .hero-viz-lines {
    display: flex !important;
  }
  .hero-viz .hero-viz-signal,
  .hero-viz .hero-viz-entries {
    position: static !important;
  }
  .hero-viz .hero-viz-signal,
  .hero-viz .hero-viz-entries,
  .hero-viz .hero-viz-wave,
  .hero-viz .hero-viz-line,
  .hero-viz .hero-viz-row,
  .hero-viz .hero-viz-rule,
  .hero-viz .hero-viz-foot {
    opacity: 1 !important;
    transform: none !important;
  }
}

.pipe-figure {
  margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
}

.pipe-svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: inherit;
}

.pipe-svg--tall {
  max-width: 22rem;
  margin-left: auto;
  margin-right: auto;
}
.pipe-svg--wide {
  display: none;
}
@media (min-width: 760px) {
  .pipe-svg--wide { display: block; }
  .pipe-svg--tall { display: none; }
}

.pipe-node {
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.10));
}

.pipe-node-box {
  fill: var(--surface);
  stroke: var(--border-strong);
  stroke-width: 1.4;
}
.pipe-node--decide .pipe-node-box {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 2.4;
}

.pipe-num {
  fill: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pipe-node--decide .pipe-num {
  fill: var(--accent);
}

.pipe-label {
  fill: var(--text);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.pipe-node--decide .pipe-label {
  font-weight: 600;
}

.pipe-svg--tall .pipe-num { font-size: 11px; }
.pipe-svg--tall .pipe-label { font-size: 16.5px; }

.pipe-band {
  fill: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pipe-band--decide {
  fill: var(--accent);
}
.pipe-svg--tall .pipe-band {
  font-size: 10.5px;
  letter-spacing: 0.08em;
}

.pipe-rule {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1;
  stroke-linecap: round;
}
.pipe-rule--decide {
  stroke: var(--accent);
  stroke-width: 1.6;
}

.pipe-divider {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 3 5;
}

.pipe-flow,
.pipe-head {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pipe-conn--decide .pipe-flow,
.pipe-conn--decide .pipe-head {
  stroke: var(--accent);
  stroke-width: 2.4;
}

.pipe-flow {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

.pipe-pulse-wrap {
  opacity: 0;
}
.pipe-pulse {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: 6 100;
  stroke-dashoffset: 6;
}
.pipe-pulse--glow {
  stroke-width: 9;
  opacity: 0.22;
}
.pipe-pulse--core {
  stroke-width: 3;
  opacity: 0.95;
}

.pipe-armed .pipe-node,
.pipe-armed .pipe-band-group {
  opacity: 0;
  transform: translateY(8px);
}
.pipe-armed .pipe-flow {
  stroke-dashoffset: 100;
}
.pipe-armed .pipe-head {
  opacity: 0;
}

.pipe-armed.pipe-run .pipe-node,
.pipe-armed.pipe-run .pipe-band-group {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-3, 420ms) var(--ease-out, cubic-bezier(0.2, 0, 0, 1)),
    transform 560ms var(--ease-settle, cubic-bezier(0.16, 1, 0.3, 1));
  transition-delay: calc(var(--pipe-i, 0) * 80ms);
}

.pipe-armed.pipe-run .pipe-flow {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 300ms var(--ease-emph, cubic-bezier(0.3, 0, 0, 1));
  transition-delay: calc(var(--pipe-i, 0) * 80ms);
}

.pipe-armed.pipe-run .pipe-head {
  opacity: 1;
  transition: opacity var(--dur-2, 240ms) var(--ease-out, cubic-bezier(0.2, 0, 0, 1));
  transition-delay: calc(var(--pipe-i, 0) * 80ms + 250ms);
}

.pipe-armed.pipe-run .pipe-pulse-wrap {
  animation: pipe-pulse-fade 1400ms linear 1160ms 1 both;
}
.pipe-armed.pipe-run .pipe-pulse {
  animation: pipe-pulse-travel 1400ms cubic-bezier(0.4, 0, 0.6, 1) 1160ms 1 both;
}

@keyframes pipe-pulse-travel {
  from { stroke-dashoffset: 6; }
  to   { stroke-dashoffset: -100; }
}
@keyframes pipe-pulse-fade {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  86%  { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pipe-figure .pipe-node,
  .pipe-figure .pipe-band-group,
  .pipe-figure .pipe-head {
    opacity: 1 !important;
    transform: none !important;
  }
  .pipe-figure .pipe-flow {
    stroke-dashoffset: 0 !important;
  }
  .pipe-figure .pipe-pulse-wrap {
    display: none !important;
  }
}

.prev {
  --prev-gap: clamp(0.625rem, 1.6vw, 1rem);
}

.frame.prev-frame {
  background-color: var(--surface-2);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text);
  box-shadow: var(--edge-hi), var(--shadow-3);
}

.prev-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.5rem 0.875rem;
  background-color: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.prev-notice-label {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.pill.prev-chip-synth {
  white-space: normal;
  font-size: 0.75rem;
}

.prev-replay { margin-left: auto; }
.prev-replay[hidden] { display: none; }

.prev-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.625rem;
  padding: 0.625rem 0.875rem;
  background-color: var(--surface);
  border-bottom: 1px solid var(--border);
}

.prev-wordmark {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}

.prev-bar-sep {
  flex: none;
  width: 1px;
  height: 1rem;
  background-color: var(--border);
}

.prev-patient {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.125rem 0.375rem;
  min-width: 0;
  font-size: 0.8125rem;
  color: var(--text);
}

.prev-patient[hidden] { display: none; }
.prev-patient-name { font-weight: 600; }
.prev-patient-meta { color: var(--text-muted); }
.prev-dot { color: var(--text-muted); }

@media (max-width: 40rem) {
  .prev-bar-sep { display: none; }
}

.pill.prev-state {
  margin-left: auto;
  font-size: 0.75rem;
  gap: 0.375rem;
  padding-block: 0.1875rem;
}

.prev-state::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-pill);
}

.hero-viz-synth {
  display: block;
  color: var(--text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.prev-tabs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.25rem;
  padding-inline: 0.5rem;
  background-color: var(--surface);
  border-bottom: 1px solid var(--border);
}

.prev-ind {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 2px;
  background-color: var(--accent);
  transform: translate(var(--ind-x, 0px), var(--ind-y, 0px)) scaleX(var(--ind-w, 0));
  transform-origin: 0 50%;
  pointer-events: none;
  transition: transform var(--dur-2) var(--ease-emph);
}

.prev-tabs[data-ind] .prev-tab[aria-selected="true"] { border-bottom-color: transparent; }

@media (forced-colors: active) {
  .prev-ind { display: none; }
  .prev-tabs[data-ind] .prev-tab[aria-selected="true"] { border-bottom-color: Highlight; }
}

.prev-tab {
  min-height: 2.75rem;
  padding: 0.625rem 0.5rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}

.prev-tab:hover { color: var(--text); }

.prev-tab[aria-selected="true"] {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.prev-tab:focus-visible { outline-offset: -2px; }

.prev-panel { padding: var(--prev-gap); }
.prev-panel[hidden] { display: none; }
.prev-panel:focus-visible { outline-offset: -3px; }

@media (scripting: enabled) {
  .prev-panel { animation: prev-panel-in 240ms var(--ease-out); }
}
@keyframes prev-panel-in {
  from { opacity: 0; transform: translateY(4px); }
}

.prev-cols {
  display: grid;
  gap: var(--prev-gap);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .prev-cols { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); }
}

@media (min-width: 1100px) {
  .prev-cols { grid-template-columns: minmax(0, 1.24fr) minmax(0, 1fr); }
}

.prev-col {
  display: grid;
  gap: var(--prev-gap);
  align-content: start;
}

.prev-block {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: clamp(0.75rem, 1.8vw, 1rem);
}

.prev-block > * + * { margin-top: 0.625rem; }
.prev-title { margin-bottom: 0.125rem; }

.prev-lines { display: grid; gap: 0.4375rem; }

.prev-line {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text);
  hanging-punctuation: first;
}

.prev-line--reply { padding-left: 0.75rem; }

.prev-line--gap {
  color: var(--text-muted);
  letter-spacing: 0.25em;
  line-height: 1;
}

.prev-src {
  background-color: transparent;
  background-image:
    linear-gradient(var(--accent-soft), var(--accent-soft)),
    linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 0, 0 100%;
  background-size: 100% 100%, 100% 1.5px;
  color: var(--text);
  padding: 0.0625rem 0.125rem;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.prev-rows { display: grid; }

.prev-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.5rem;
  row-gap: 0.125rem;
  padding-block: 0.5rem;
  border-top: 1px solid var(--border);
}

.prev-row:first-child { border-top: 0; padding-top: 0.125rem; }
.prev-row:last-child { padding-bottom: 0.125rem; }

.prev-type {
  grid-column: 1;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.prev-draft {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.0625rem 0.4375rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background-color: var(--surface);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-muted);
  white-space: nowrap;
}

.prev-draft::before {
  content: "";
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-pill);
}

.prev-display {
  grid-column: 1 / -1;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--text);
}

.prev-codewrap {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.4375rem;
  margin-top: 0.125rem;
}

.prev-sys {
  font-size: 0.75rem;
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.prev-code.mono {
  padding: 0.0625rem 0.375rem;
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  background-color: var(--surface-3);
  color: var(--text);
  font-size: 0.8125rem;
  line-height: 1.4;
}

@media (min-width: 900px) {
  .prev-display { grid-column: 1; grid-row: 2; }
  .prev-codewrap {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: baseline;
    flex-wrap: nowrap;
    margin-top: 0;
  }
}

.prev-banner {
  padding: 0.4375rem 0.625rem;
  border-radius: var(--r-1);
  border-left: 2px solid var(--border-strong);
  background-color: var(--surface-3);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
}

.prev-soap {
  display: grid;
  grid-template-columns: 1.125rem minmax(0, 1fr);
  gap: 0.375rem 0.625rem;
}

.prev-soap dt {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--accent);
}

.prev-soap dd { color: var(--text); }

.prev-adv {
  background-color: var(--amber-soft);
  border-color: var(--border);
  border-color: color-mix(in srgb, var(--amber) 34%, transparent);
  border-left: 3px solid var(--amber);
}

.prev-adv .prev-title { color: var(--amber); }

.prev-adv .prev-title::after {
  background-color: var(--border);
  background-color: color-mix(in srgb, var(--amber) 34%, transparent);
}

.prev-adv-text { color: var(--text); }

.prev-adv-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.prev-basis {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text);
}

.prev-basis-label {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.6875rem;
}

.prev-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  padding: 0.75rem 0.875rem;
  background-color: var(--surface);
  border-top: 1px solid var(--border);
}

.prev-actions-set { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.prev-actions-sign { gap: 0.5rem 0.625rem; }

.prev-sign-note {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--text-muted);
}

.prev-frame .btn-primary:disabled {
  background-color: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text);
}

.prev-frame .btn:disabled:not(.btn-primary) {
  border-color: var(--border);
  color: var(--text-muted);
}

.prev-armed .prev-line { opacity: 0; transform: translateY(6px); }
.prev-armed .prev-src { background-size: 0% 100%, 0% 1.5px; }
.prev-armed .prev-note { opacity: 0; }
.prev-armed .prev-row { opacity: 0; transform: translateY(8px); }
.prev-armed .prev-codewrap { opacity: 0; transform: translateY(3px); }
.prev-armed .prev-adv { opacity: 0; transform: translateY(8px); }

.prev-armed.prev-run .prev-line {
  opacity: 1;
  transform: none;
  transition:
    opacity 320ms var(--ease-out),
    transform 440ms var(--ease-settle);
  transition-delay: calc(var(--prev-i, 0) * 90ms);
}

.prev-armed.prev-run .prev-src {
  background-size: 100% 100%, 100% 1.5px;
  transition: background-size 300ms var(--ease-out);
  transition-delay: calc(900ms + var(--prev-m, 0) * 110ms);
}

.prev-armed.prev-run .prev-note {
  opacity: 1;
  transition: opacity var(--dur-3) var(--ease-out);
  transition-delay: 1500ms;
}

.prev-armed.prev-run .prev-row {
  opacity: 1;
  transform: none;
  transition:
    opacity 340ms var(--ease-out),
    transform 480ms var(--ease-settle);
  transition-delay: calc(1600ms + var(--prev-i, 0) * 120ms);
}

.prev-armed.prev-run .prev-codewrap {
  opacity: 1;
  transform: none;
  transition:
    opacity 260ms var(--ease-out),
    transform 260ms var(--ease-out);
  transition-delay: calc(1750ms + var(--prev-i, 0) * 120ms);
}

.prev-armed.prev-run .prev-adv {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-3) var(--ease-out),
    transform 560ms var(--ease-settle);
  transition-delay: 2700ms;
}

.prev-nofx, .prev-nofx * {
  transition: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .prev .prev-line,
  .prev .prev-note,
  .prev .prev-row,
  .prev .prev-codewrap,
  .prev .prev-adv {
    opacity: 1 !important;
    transform: none !important;
  }

  .prev .prev-src {
    background-size: 100% 100%, 100% 1.5px !important;
  }

  .prev-replay { display: none !important; }
}

.prev-panel-label { display: none; }

@media (scripting: none) {
  .prev-tabs { display: none; }
  .prev-frame [data-prev-chip] { display: none; }
  .prev-panel-label {
    display: block;
    margin: 0 0 var(--prev-gap);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 600;
  }
  .prev-panel + .prev-panel { border-top: 1px solid var(--border); }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .prev-state::before,
  :root:not([data-theme="light"]) .prev-draft::before { border-color: var(--text-muted); }
}
:root[data-theme="dark"] .prev-state::before,
:root[data-theme="dark"] .prev-draft::before { border-color: var(--text-muted); }


/* Print. The entrance animations are declared in THIS file, which loads after
   site.css, so the print reset there cannot reach them - it has to live here.
   hero-rise holds its elements at opacity 0 through the delay window, so a
   print issued in the first second would otherwise put a blank hero on paper. */
@media print {
  .hero-copy > *,
  .hero-figure,
  .prev-panel,
  .prev-panel .prev-block {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}