.robot-route-story { position: relative; --route-base-distance:360; --route-orbit-distance:100; }
.robot-route-story.is-scroll-ready { height: calc(100svh + var(--route-base-distance) * 1svh + var(--route-orbit-distance) * 1svh); }
.robot-route-stage {
  position: relative; height: min(850px, calc(100svh - var(--header) - 24px));
  min-height: 470px; overflow: hidden; border-radius: 28px; background: #f8faf6;
  isolation: isolate; box-shadow: 0 18px 60px #18332b0b;
}
.is-scroll-ready .robot-route-stage { position: sticky; top: calc(var(--header) + 12px); }
.robot-route-heading { position: absolute; top: 5%; left: 4%; right: 4%; z-index: 2; pointer-events: none; }
.robot-route-heading .eyebrow { margin-bottom: 10px; }
.robot-route-heading h2 { font-size: clamp(28px, 3.2vw, 44px); line-height: 1.12; letter-spacing: -.04em; margin-bottom: 10px; max-width: 85%; }
.robot-route-heading > p:last-child { color: #4d6458; font-size: 15px; max-width: 620px; line-height: 1.5; }
.robot-route-view { position: absolute; inset: 23% 0 11%; }
.robot-route-model, .robot-route-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.robot-route-canvas { opacity: 0; }
.has-model .robot-route-canvas { opacity: 1; }
.robot-structure-label { position: absolute; transform: translate(-50%,-120%); padding: 6px 10px; font-size: 12px; border: 1px solid #cad8cd; border-radius: 7px; background: #fffffff2; color: #244235; white-space: nowrap; pointer-events:none; }
.robot-route-legend { position: absolute; left: 4%; bottom: 13%; z-index: 2; display: flex; gap: 12px; opacity: 0; transition: opacity .2s; }
.is-routing .robot-route-legend { opacity: 1; }
.robot-route-legend > span { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid #d5ded6; border-radius: 10px; background: #fffffff2; font-size: 12px; }
.robot-route-legend strong { font-weight: 500; }
.robot-route-legend i { width: 8px; height: 8px; border-radius: 50%; background: #8b4cf6; }
.robot-route-legend .aerial-label i { background: #60bd9d; }
.robot-route-bottom { position:absolute; inset:auto 0 0; z-index:2; padding: 20px 4%; display:flex; justify-content:space-between; align-items:center; gap:24px; border-top:1px solid #dce4dc; background:#f8faf6; color:#4d6458; font-size:12px; }
.robot-route-control { display: flex; width: 130px; flex-shrink:0; }
.robot-route-control input { width: 100%; height: 24px; accent-color: #419a7b; cursor:pointer; }
.robot-route-context { display:flex; justify-content:space-between; align-items: baseline; gap:20px; margin-top:20px; font-size:12px; color:#617468; }
@media (max-width:700px) {
  .robot-route-story { --route-base-distance:360; }
  .robot-route-stage { min-height: 480px; border-radius:20px; }
  .robot-route-heading { top:4%; left:6%; right:6%; }
  .robot-route-heading .eyebrow { font-size:12px; }
  .robot-route-heading h2 { font-size:30px; max-width:100%; }
  .robot-route-heading > p:last-child { font-size:13px; }
  .robot-route-view { inset:29% 0 16%; }
  .robot-route-legend { bottom:15%; left:6%; gap:7px; }
  .robot-route-legend > span { font-size:10px; padding:7px 9px; gap:5px; }
  .robot-route-bottom { padding:12px 6%; gap:12px; font-size:10px; }
  .robot-route-control { width:90px; }
  .robot-route-context { display:block; font-size:11px; }
  .robot-route-context .text-link { margin-top:12px; }
  .robot-structure-label { font-size:10px; padding:4px 6px; }
}
@media (prefers-reduced-motion:reduce) {
  .robot-route-story.is-scroll-ready { height:auto; }
  .is-scroll-ready .robot-route-stage { position:relative; top:auto; }
  .robot-route-legend { transition:none; }
}