.stage { padding: 15px 18px 12px; overflow: hidden; background: radial-gradient(ellipse at 85% 30%, #805648, #302330 60%, #19151f); }
.scene-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.scene-heading strong { color: var(--gold); font-size: clamp(18px, 2vw, 25px); }
.scene-heading .small-label { color: var(--muted); font-size: 11px; letter-spacing: .03em; }
#bridge-scene { display: block; width: 100%; height: auto; overflow: visible; }
.reference-deck { fill: none; stroke: #b8adbe80; stroke-width: 1.5; stroke-dasharray: 6 5; }
.future-deck { fill: none; stroke: var(--coral); stroke-width: 2; stroke-dasharray: 4 5; opacity: .7; }
.future-label { fill: var(--coral); paint-order: stroke; stroke: #30202c; stroke-width: 4; font: bold 15px Arial, sans-serif; }
.slab-face { stroke: #241c25; stroke-width: 2; stroke-linejoin: round; }
.slab-top { fill: #b98361; }
.slab-side { fill: #6e4840; }
.deck-grid { stroke: #e6b38b; stroke-opacity: .38; stroke-width: 1; fill: none; }
.deck-rim { fill: none; stroke: #f4c79a; stroke-width: 2; }
.platform-letter { fill: #fff2d9; paint-order: stroke; stroke: #30202c; stroke-width: 5; font: bold 24px Arial, sans-serif; text-anchor: middle; }
.dock-label { fill: var(--muted); font: bold 18px Arial, sans-serif; text-anchor: middle; letter-spacing: 1px; }
.axis-line { stroke: #ffe493; stroke-width: 2; }
.axis-tip { fill: #ffe493; }
.hop-path { fill: none; stroke-width: 3; stroke-dasharray: 5 7; }
.hop-path.settled { stroke: var(--orange); }
.hop-path.adaptive { stroke: var(--mint); }
.hop-path.blocked { opacity: .25; }
.hop-marker { stroke: #20171b; stroke-width: 2; }
.platform-readings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.platform-readings > div { padding: 7px 10px; border: 1px solid var(--line); border-radius: 5px; background: #19151fd9; }
.platform-readings .next-platform { border-color: #ffe49380; }
.platform-readings strong { display: block; color: var(--gold); font-size: 15px; }
.platform-readings strong span { color: var(--cream); margin-left: 5px; }
.platform-readings > div > span { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.scene-explanation { margin: 10px 0 0; min-height: 1.4em; color: var(--cream); font-size: clamp(14px, 1.4vw, 18px); line-height: 1.35; }
.pose-controls { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; }
.pose-controls button { flex: 1; padding: 7px 9px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: #19151f; font: 700 14px Arial, sans-serif; cursor: pointer; white-space: nowrap; }
.pose-controls button[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); background: #493331; }
.pose-controls button:hover { color: var(--cream); }
.pose-controls button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.tier-comparison { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.tier { padding: 13px 15px; border-top: 3px solid var(--orange); }
.tier.adaptive { border-top-color: var(--mint); }
.tier-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tier-heading h2 { font-size: clamp(18px, 1.9vw, 24px); }
.tier-heading h2::before { content: ""; display: inline-block; width: 9px; height: 9px; margin: 0 7px 2px 0; background: var(--orange); }
.adaptive .tier-heading h2::before { border-radius: 50%; background: var(--mint); }
.tier-heading h2 span { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); font-weight: 400; }
.decision { color: var(--coral); font-size: 12px; text-align: right; }
.tier[data-pass="true"] .decision { color: var(--mint); }
.limits { margin: 10px 0 5px; font-size: clamp(17px, 1.8vw, 23px); font-variant-numeric: tabular-nums; }
.limits b { color: var(--gold); }
.limits span { font-size: 14px; color: var(--muted); }
.tier-description, .decision-reason { margin: 0; font-size: 14px; line-height: 1.35; }
.tier-description { color: var(--muted); }
.decision-reason { margin-top: 8px; min-height: 2.7em; }
.shared-rule { margin: 12px 0 0; padding-left: 12px; border-left: 2px solid var(--lilac); color: var(--muted); font-size: 14px; line-height: 1.4; }
.shared-rule strong { color: var(--cream); }
@media (max-width: 700px) {
  .scene-heading { flex-direction: column; gap: 4px; }
  .stage { padding: 12px 10px; }
  #bridge-scene { margin: 8px 0; }
  .platform-readings { gap: 5px; }
  .platform-readings > div { padding: 6px; }
  .platform-readings strong { font-size: 13px; }
  .platform-readings strong span { display: block; margin: 2px 0 0; }
  .platform-readings > div > span { font-size: 12px; }
  .scene-explanation { min-height: 4.05em; }
  .pose-controls { display: grid; grid-template-columns: repeat(2, 1fr); }
  .tier-comparison { grid-template-columns: 1fr; gap: 8px; }
  .tier-heading h2 span { display: inline; margin-left: 6px; }
  .decision-reason { min-height: 2.7em; }
}