.route-story { --route-green:#009a24; --route-red:#f21c35; --map-scale:1; --route-hold:clamp(220px,45svh,420px); position:relative; width:93.333333%; margin:0 auto; padding:0; color:#202124; font-family:Inter,Arial,sans-serif; scroll-margin-top:24px; }
.route-stage { display:flow-root; background:#fff; }
.route-story[data-pinned="true"] { height:calc(var(--route-stage-height) + var(--route-hold)); }
.route-story[data-pinned="true"] > .route-stage { position:sticky; top:24px; }
.route-header { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.route-header h2 { font-size:clamp(22px,2.2222vw,32px); line-height:1.2; font-weight:600; color:#ff2788; margin:0; }
.route-scenario { display:flex; align-items:center; gap:8px; margin-left:auto; font-size:12px; color:#72757a; }
.route-scenario select { min-height:44px; max-width:180px; padding:8px 26px 8px 10px; border:1px solid #e7e7e7; border-radius:6px; background:#fff; color:#333; font:500 12px/1.25 Inter,Arial,sans-serif; cursor:pointer; }
.route-scenario select:focus-visible { outline:2px solid #ff2788; outline-offset:2px; }
.route-controls { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.route-controls button { min-height:44px; border:0; border-radius:6px; background:transparent; padding:8px 10px; font:500 12px/1.25 Inter,Arial,sans-serif; color:#6c7178; cursor:pointer; }
.route-controls button[aria-pressed="true"] { color:#ff2788; background:#fff0f6; }
.route-controls button:hover { color:#202124; background:#f5f5f5; }
.route-controls button:focus-visible { outline:2px solid #ff2788; outline-offset:2px; }
.route-controls [data-route-play] { border-left:1px solid #e7e7e7; border-radius:0; margin-left:5px; padding-left:15px; color:#333; }
.route-status { display:flex; align-items:baseline; gap:12px; margin:12px 0 18px; font-size:12px; line-height:1.5; min-height:20px; color:#72757a; }
.route-status strong { color:#333; font-weight:500; white-space:nowrap; }
.route-status small { margin-left:auto; white-space:nowrap; font-size:10px; color:#92959b; }
.route-map { position:relative; width:min(100%,var(--route-map-width,1280px)); margin-inline:auto; aspect-ratio:1344 / 710; overflow:hidden; background:#fbfbfb; isolation:isolate; }
.route-canvas { transform:scale(var(--map-scale)); transform-origin:top left; }
.route-canvas { z-index:2; }
.route-canvas p { margin:0; }
.route-overlay { position:absolute; inset:0; width:100%; height:100%; z-index:1; overflow:visible; }
.route-event-overlay { position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; }
.route-overlay path[data-route-path] { vector-effect:non-scaling-stroke; stroke-linejoin:round; stroke-linecap:round; }
.route-overlay [data-route-path="safe"] { stroke:var(--route-green); stroke-width:2; stroke-dasharray:7 6; }
.route-overlay [data-route-path="previous"] { stroke:#c5c9c7; stroke-width:1; stroke-dasharray:4 5; }
.route-overlay [data-route-path="closed"] { stroke:var(--route-red); stroke-width:2; stroke-dasharray:5 5; }
.route-overlay [data-route-path="deviation"] { stroke:#e99a00; stroke-width:2; stroke-dasharray:4 5; }
.route-overlay [data-route-arrow] { transition:opacity .3s; }
.route-static-overlay { display:none; }
.route-fire,.route-blocked-marker { opacity:0; transition:opacity .4s ease; }
.route-fire[data-active="true"],.route-blocked-marker[data-active="true"] { opacity:1; }
.route-fire { transform-origin:center; }
.route-story[data-phase="1"][data-playing="true"] .route-fire[data-active="true"] { animation:route-alert 1.8s ease-in-out infinite; }
.route-exit-symbol path { fill:var(--route-green); transition:fill .4s; }
.route-exit-symbol[data-blocked="true"] path { fill:var(--route-red); }
.route-canvas [data-route-sign]:not(.route-exit-symbol) { opacity:.45; transition:opacity .4s; }
.route-canvas [data-route-sign][data-selected="true"] { opacity:1; }
.route-canvas linearGradient stop { stop-color:var(--route-green); }
.route-canvas [data-route-sign][data-blocked="true"] { opacity:1; }
.route-canvas [data-blocked="true"] path[fill="#009A24"] { fill:var(--route-red); }
.route-canvas [data-blocked="true"] stop { stop-color:var(--route-red); }
.route-person { z-index:5; transform-origin:center; will-change:transform; }
.route-legend { display:grid; grid-template-columns:1.4fr 1.2fr .8fr; gap:16px 32px; width:min(100%,1000px); margin:16px auto 24px; font-size:12px; line-height:1.4; color:#52575e; }
.route-legend-group { list-style:none; display:grid; align-content:start; gap:8px; margin:0; padding:0; }
.route-key { display:flex; align-items:center; gap:12px; min-height:26px; }
.route-key-icons { flex:0 0 28px; display:flex; align-items:center; gap:3px; height:26px; }
.route-key-wide { flex-basis:80px; }
.route-key-icon { display:block; flex:1; min-width:0; height:26px; }
.route-key-icon svg [stroke] { vector-effect:non-scaling-stroke; }
@keyframes route-alert { 0%,100% {transform:scale(1)} 50% {transform:scale(1.045)} }
@media (max-width:1100px) { .route-header { align-items:flex-start; } .route-controls { gap:0; } .route-controls button {font-size:11px;padding:8px;} }
@media (max-width:700px) {
  .route-header { gap:8px; }
  .route-header h2 { width:100%; }
  .route-scenario { margin-left:0; }
  .route-controls { width:100%; justify-content:space-between; }
  .route-controls button { min-height:44px; padding:7px 6px; font-size:11px; }
  .route-controls [data-route-play] { margin-left:0; padding-left:10px; }
  .route-status { flex-wrap:wrap; gap:3px 8px; margin:8px 0 14px; min-height:40px; font-size:11px; }
  .route-status [data-route-copy] { order:3; width:100%; }
  .route-status small { font-size:9px; }
  .route-legend { grid-template-columns:1fr 1fr; gap:12px 20px; font-size:11px; }
  .route-legend-group:first-child { grid-row:span 2; }
  .route-key { gap:8px; }
  .route-key-icons { flex-basis:24px; height:24px; }
  .route-key-wide { flex-basis:64px; }
  .route-key-icon { height:24px; }
}
@media (prefers-reduced-motion:reduce) {
  .route-story[data-pinned="true"] { height:auto; }
  .route-story[data-pinned="true"] > .route-stage { position:static; }
  .route-fire,.route-blocked-marker,.route-exit-symbol path,.route-person,.route-overlay [data-route-arrow] { transition:none; animation:none!important; will-change:auto; }
}
@media print { .route-controls,.route-status { display:none; } .route-story { break-inside:avoid; height:auto!important; } .route-story > .route-stage { position:static!important; } }