.scenario-section { isolation: isolate; }
#rule-graphs { scroll-margin-top: calc(var(--header-h, 76px) + 12px); }
.scenario-stack { display: flex; flex-direction: column; gap: 22svh; }
.scenario-card { --stack-cover: 0; }
.scenario-inner {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  align-items: center;
  gap: clamp(24px, 5vw, 68px);
  min-height: clamp(300px, 48svh, 440px);
  padding: clamp(24px, 4vw, 48px);
  background: #151b0e;
  border: 1px solid #384822;
  border-radius: 24px;
  box-shadow: 0 -20px 50px -28px #000, inset 0 1px #ffffff0e;
}
.scenario-card:nth-child(2) .scenario-inner { background: #1d2710; }
.scenario-card:nth-child(3) .scenario-inner { background: #263313; }
.scenario-card:last-child .scenario-inner { background: var(--shielded); color: #131900; border-color: var(--shielded); }
.scenario-copy h3 { margin: 0 0 16px; font-size: clamp(2.15rem, 4vw, 4rem); letter-spacing: -.055em; line-height: .98; }
.scenario-rule { margin: 0; max-width: 29ch; font-size: clamp(1.05rem, 1.7vw, 1.45rem); }
.scenario-detail { margin: 15px 0 0; max-width: 38ch; color: #c2cbb6; }
.scenario-card:last-child .scenario-detail { color: #35420a; }
.scenario-panel {
  margin: 0;
  min-width: 0;
  padding: 16px 18px 13px;
  border: 1px solid #465732;
  border-radius: 16px;
  color: var(--ink);
  background: #090d06;
}
.scenario-panel-head { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.scenario-panel-head strong { font-size: 15px; }
.scenario-badge { color: var(--shielded-text); background: #242e16; border-radius: 999px; padding: 4px 8px; font-size: 10px; }
.scenario-replay {
  margin-left: auto;
  padding: 4px 7px;
  color: var(--ink);
  border: 1px solid #465732;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
}
.scenario-replay:hover { color: var(--shielded); border-color: var(--shielded); }
.scenario-graph { display: block; width: 100%; margin: 12px 0 8px; }
.scenario-gridline { stroke: #344029; stroke-width: .8; }
.scenario-level { stroke: var(--shielded); stroke-width: 1; stroke-dasharray: 4 4; }
.scenario-band { fill: #ccff0016; }
.scenario-level-text, .scenario-axis { fill: #d7f28b; font: 500 10px var(--font-mono); }
.scenario-axis { fill: #a9b599; }
.scenario-line { fill: none; stroke: #f3ffd8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scenario-after { fill: none; stroke: #91a27b; stroke-width: 1.3; stroke-dasharray: 4 4; }
.scenario-point { fill: var(--shielded); stroke: #090d06; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.scenario-point.is-skipped { fill: #090d06; stroke: #aab799; }
.scenario-caption { border-top: 1px dashed #465732; padding-top: 8px; font-size: 11px; color: var(--shielded-text); }
@media (min-width: 901px) and (min-height: 520px) and (prefers-reduced-motion: no-preference) {
  .scenario-card { position: sticky; top: calc(var(--header-h, 76px) + 22px + var(--stack-offset)); }
  .scenario-inner {
    transform: scale(calc(1 - var(--stack-cover) * .06));
    transform-origin: top center;
    filter: brightness(calc(1 - var(--stack-cover) * .45));
  }
}
@media (max-width: 900px) {
  .scenario-stack { gap: 14px; }
  .scenario-inner { grid-template-columns: 1fr; min-height: 0; gap: 20px; padding: 20px; }
  .scenario-panel { padding: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  .scenario-reveal {
    --reveal-ease: cubic-bezier(.22, 1, .36, 1);
    transition: opacity .72s var(--reveal-ease), transform .82s var(--reveal-ease), filter .72s var(--reveal-ease);
  }
  .scenario-card:not(.is-revealed):not(:focus-within) .scenario-reveal {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(6px);
  }
  .scenario-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .scenario-area, .scenario-after, .scenario-point { opacity: 0; }
  .scenario-graph.is-playing .scenario-line { animation: scenario-draw 1.35s cubic-bezier(.65, 0, .35, 1) both; }
  .scenario-graph.is-playing .scenario-area { animation: scenario-appear .6s .45s both; }
  .scenario-graph.is-playing .scenario-after { animation: scenario-appear .4s 1.32s both; }
  .scenario-graph.is-playing .scenario-point { animation: scenario-mark .38s var(--point-delay) both; }
  .scenario-graph.is-playing .scenario-point.is-trigger { animation-delay: 1.22s; }
}
@keyframes scenario-draw { to { stroke-dashoffset: 0; } }
@keyframes scenario-appear { to { opacity: 1; } }
@keyframes scenario-mark {
  from { opacity: 0; transform: scale(.25); }
  to { opacity: 1; transform: scale(1); }
}