.route-demo{--scene-base:#e1e5db;--scene-edge:#cbd2c0;--scene-road:#a4ae9d;--scene-road-mark:#dce1d2;--scene-paving:#e9ebdf;--scene-curb:#c3ccb8;--scene-grid:#d4dacb;--scene-roof:#e8ebdf;--scene-roof-inset:#d4dacb;--scene-wall:#e0e5d7;--scene-wall-side:#cbd3c0;--scene-window:#b2c0a5;--scene-shadow:#74826927;--scene-trunk:#839274;--scene-tree-back:#82966b;--scene-tree:#a1b58b;--scene-tree-light:#c3d2af;--scene-planter:#c5ccb7;--scene-planter-side:#a7b498;--scene-lamp:#6e7b62;--scene-car:#bdc6b4;--scene-car-side:#8d9c7f;--scene-car-front:#a6b398;--scene-car-roof:#dce1d1;--scene-car-seam:#78866c;--scene-glass:#657b6d;--scene-wheel:#495644;--scene-metal:#bbc4b0;--scene-metal-side:#899b79;--scene-barricade:#9cae84;--scene-stripe:#f2f0df;--scene-cone:#b8a17e;--scene-cone-base:#8e876c;--scene-work-area:#c6c1a6;--scene-work-line:#b3b196;background:var(--paper)}
[data-mode=dark] .route-demo{--scene-base:#253023;--scene-edge:#1b2419;--scene-road:#192316;--scene-road-mark:#4c5a42;--scene-paving:#35432f;--scene-curb:#293825;--scene-grid:#43533b;--scene-roof:#5a6a4d;--scene-roof-inset:#4c5d40;--scene-wall:#4a5b3f;--scene-wall-side:#36462d;--scene-window:#263d2b;--scene-shadow:#00000040;--scene-trunk:#606e53;--scene-tree-back:#3d5735;--scene-tree:#6b8454;--scene-tree-light:#98b37e;--scene-planter:#576846;--scene-planter-side:#3f5233;--scene-lamp:#7a8d69;--scene-car:#b1bba4;--scene-car-side:#738362;--scene-car-front:#8c9d79;--scene-car-roof:#c4ceb5;--scene-glass:#455d4d;--scene-wheel:#1e2b1b;--scene-metal:#8b9e76;--scene-metal-side:#566d43;--scene-barricade:#8ca675;--scene-stripe:#d9ddc6;--scene-cone:#a18a68;--scene-cone-base:#6c6a4e;--scene-work-area:#555944;--scene-work-line:#697051}
.demo-intro{display:grid;grid-template-columns:1.5fr 1fr;align-items:end;gap:70px;margin-bottom:40px}.demo-intro h2{margin-top:28px}.demo-intro>p{font-size:14px;line-height:1.8;color:var(--muted);margin:0;max-width:340px;justify-self:end}.demo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.scenario-buttons{display:flex;flex-wrap:wrap;gap:9px}.scenario-buttons button{background:none;border:1px solid var(--line);border-radius:30px;color:var(--muted);padding:12px 20px;font-size:11px;line-height:1.4}.scenario-buttons button[aria-selected=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}.demo-controls{display:flex;gap:8px}.demo-controls button{background:none;color:var(--ink);border:1px solid var(--line);width:37px;height:37px;border-radius:50%;font-size:17px;flex-shrink:0}.demo-controls button:hover{background:var(--soft)}.demo-frame{background:var(--card);border:1px solid var(--line);border-radius:27px;overflow:hidden;position:relative}.demo-canvas{height:565px;position:relative;overflow:hidden;background:radial-gradient(ellipse at center,var(--soft),var(--card) 74%)}.demo-canvas svg{display:block;width:100%;height:100%;overflow:hidden}.demo-badge{position:absolute;left:28px;top:27px;display:flex;align-items:center;gap:9px;font-size:8px;letter-spacing:1.5px;z-index:2;color:var(--muted)}.demo-badge i{width:6px;height:6px;border-radius:50%;background:var(--accent)}#baseline-route{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:5 9;fill:none;opacity:.18}#suggested-route{stroke:var(--accent);stroke-width:2;stroke-dasharray:6 8;fill:none}#travelled-route{stroke:var(--accent);stroke-width:5;stroke-linecap:round;fill:none;opacity:.65}.person-shadow{fill:var(--scene-shadow)}.obstacle-footprint{stroke:var(--accent);stroke-width:1.3;stroke-dasharray:6 5;fill:color-mix(in srgb,var(--accent) 5%,transparent)}.obstacle-brackets{stroke:var(--accent);stroke-width:2.5;fill:none}.obstacle-label-bg{fill:var(--card);stroke:var(--line);stroke-width:1}#obstacle-label{font-family:'Manrope',Arial,sans-serif;font-size:11px;fill:var(--ink);font-weight:500}.demo-hud{display:flex;align-items:center;gap:19px;border-top:1px solid var(--line);padding:26px 30px;background:var(--card);min-height:126px}.demo-wave{height:44px;width:44px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:3px;border-radius:50%;flex-shrink:0}.demo-wave i{width:2px;height:8px;background:var(--accent);border-radius:3px;animation:demo-wave 1.7s ease-in-out infinite alternate}.demo-wave i:nth-child(2),.demo-wave i:nth-child(4){height:16px;animation-delay:-.6s}.demo-wave i:nth-child(3){height:25px;animation-delay:-1.2s}.is-paused .demo-wave i{animation-play-state:paused}.demo-guidance{max-width:560px;flex:1}.demo-guidance .eyebrow{font-size:8px;letter-spacing:1.4px;color:var(--muted)}.demo-guidance p{margin:9px 0 0;font-size:16px;line-height:1.5;letter-spacing:-.35px;color:var(--ink);min-height:48px;display:flex;align-items:center}.demo-status{margin-left:auto;text-align:right;min-width:250px}.demo-status>span{font-size:10px;color:var(--muted)}.demo-steps{display:flex;gap:15px;margin-top:15px}.demo-steps span{font-size:9px;color:var(--muted);opacity:.5;white-space:nowrap}.demo-steps .current{opacity:1;color:var(--accent)}.demo-progress{height:3px;background:var(--soft)}.demo-progress i{display:block;height:100%;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left center}.demo-note{font-size:10px;line-height:1.8;color:var(--muted);max-width:760px;margin:20px 0 0}@keyframes demo-wave{to{transform:scaleY(.4);opacity:.6}}@media(max-width:1000px){.demo-intro{gap:35px}.demo-intro h2{font-size:42px}.demo-hud{padding:22px;gap:15px}.demo-status{min-width:0}.demo-status>span{font-size:9px}.demo-steps{gap:10px}.demo-steps span{font-size:8px}.demo-guidance p{font-size:14px}.demo-canvas{height:500px}}
@media(max-width:700px){.demo-intro{grid-template-columns:1fr;gap:24px;margin-bottom:28px}.demo-intro h2{font-size:35px}.demo-intro>p{justify-self:start;max-width:100%;font-size:13px}.demo-toolbar{align-items:start;gap:12px}.scenario-buttons{gap:6px;max-width:240px}.scenario-buttons button{padding:10px 13px;font-size:10px}.demo-controls{gap:6px;padding-top:1px}.demo-controls button{height:33px;width:33px}.demo-frame{border-radius:21px}.demo-canvas{height:365px}.demo-badge{top:20px;left:20px;font-size:7px;letter-spacing:1px}.demo-hud{display:grid;grid-template-columns:35px 1fr;gap:12px;padding:20px;min-height:155px}.demo-wave{height:35px;width:35px;align-self:start;margin-top:2px;gap:2px}.demo-guidance .eyebrow{font-size:7px;letter-spacing:.8px}.demo-guidance p{font-size:13px;line-height:1.65;min-height:44px;margin-top:6px}.demo-status{grid-column:2;margin:0;text-align:left}.demo-status>span{font-size:9px}.demo-steps{display:none}.demo-note{font-size:9px;margin-top:17px}.spec-context .status{font-size:10px}.card-top{line-height:1.6}.hero-rule>span{max-width:45%;line-height:1.7}}
@media(prefers-reduced-motion:reduce){.demo-wave i{animation:none}}
.demo-progress{position:relative}.demo-progress input{appearance:none;-webkit-appearance:none;position:absolute;left:0;bottom:-8px;width:100%;height:20px;margin:0;background:transparent;cursor:ew-resize}.demo-progress input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:11px;height:11px;border:2px solid var(--card);border-radius:50%;background:var(--accent);opacity:0}.demo-progress input::-moz-range-thumb{width:9px;height:9px;border:2px solid var(--card);border-radius:50%;background:var(--accent);opacity:0}.demo-progress:hover input::-webkit-slider-thumb,.demo-progress input:focus-visible::-webkit-slider-thumb{opacity:1}.demo-progress:hover input::-moz-range-thumb,.demo-progress input:focus-visible::-moz-range-thumb{opacity:1}.demo-progress input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* Additional street scenarios and traffic-signal states. */
.route-demo{--scene-tactile:#bdc8a7;--scene-signal:#35452e;--scene-stop:#bc7565;--scene-walk:#bdd998}.demo-controls{flex-shrink:0}.demo-scenario-description{font-size:12px;line-height:1.75;color:var(--muted);margin:0 0 22px;max-width:690px;min-height:21px}.signal-red{fill:var(--scene-stop)}.signal-green{fill:#738167;opacity:.35}.crossing-green .signal-red{opacity:.25}.crossing-green .signal-green{fill:var(--scene-walk);opacity:1}.scenario-buttons button:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
[data-mode=dark] .route-demo{--scene-tactile:#7f9062;--scene-signal:#202c1a;--scene-stop:#cf8776;--scene-walk:#cceba7}
@media(max-width:700px){.demo-toolbar{position:relative;display:block;padding-bottom:0}.scenario-buttons{max-width:none;padding-right:0;gap:7px}.scenario-buttons button{padding:10px 12px}.demo-controls{justify-content:flex-end;margin-top:14px}.demo-scenario-description{font-size:11px;margin-bottom:18px;min-height:38px}.demo-canvas{height:390px}}