/* A single environment, revealed through an illustrated perception layer. */
.vision-experience{background:#071726;color:#edf4ff}
.vision-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px 32px}
.vision-eyebrow{display:block;color:#9fb8d5;font-size:14px;margin-bottom:8px}
.vision-heading h3{font-size:clamp(25px,2.8vw,38px);letter-spacing:-.04em;line-height:1.15}
.vision-play{display:flex;align-items:center;gap:22px;flex-shrink:0;min-height:46px;border:1px solid #7092b8;border-radius:7px;padding:10px 17px;color:#e8f3ff;background:#193954;font-size:15px}
.vision-play:hover{background:#2a4d6f}.vision-play>span{font-size:19px}
.vision-stage{position:relative;aspect-ratio:16/9;isolation:isolate;overflow:hidden;background:#081523;--vision-mix:0}
.vision-stage>.vision-world,.vision-ai,.vision-ai>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vision-ai{opacity:var(--vision-mix);transition:opacity 1.4s cubic-bezier(.2,.7,.2,1);will-change:opacity}
.vision-stage.is-scrubbing .vision-ai{transition:none}
.vision-stage:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#020c2480,transparent 24%,transparent 82%,#04132699);z-index:3}
.vision-view-labels{position:absolute;inset:23px 28px auto;z-index:5;display:flex;justify-content:space-between;gap:20px;color:#d6e7fc;font-size:14px}.vision-view-labels>span:first-child{padding:5px 10px;background:#081b30d9;border:1px solid #7796b885;border-radius:4px}.vision-view-labels>span:last-child{align-self:center;text-shadow:0 1px 6px #000}
.vision-scan{position:absolute;inset:0 auto 0 -10%;width:10%;pointer-events:none;z-index:4;background:linear-gradient(90deg,transparent,#b3e4ff12);border-right:1px solid #b5e6ffbb;opacity:0;box-shadow:10px 0 50px -12px #8fe0ff;transform:translateX(0)}
.vision-stage.is-scanning .vision-scan{animation:vision-scan 1.65s cubic-bezier(.25,.5,.5,1) 1}
@keyframes vision-scan{0%{opacity:0;transform:translateX(0)}15%,80%{opacity:.85}100%{opacity:0;transform:translateX(1100%)}}
.vision-reticle{position:absolute;inset:16px;border:1px solid #b6d9f52e;pointer-events:none;z-index:4;clip-path:polygon(0 0,30px 0,30px 1px,1px 1px,1px 30px,0 30px,0 0,100% 0,100% 30px,calc(100% - 1px) 30px,calc(100% - 1px) 1px,calc(100% - 30px) 1px,calc(100% - 30px) 0,100% 0,100% 100%,calc(100% - 30px) 100%,calc(100% - 30px) calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) calc(100% - 30px),100% calc(100% - 30px),100% 100%,0 100%,0 calc(100% - 30px),1px calc(100% - 30px),1px calc(100% - 1px),30px calc(100% - 1px),30px 100%,0 100%)}
.vision-detections,.vision-route{position:absolute;inset:0;width:100%;height:100%;z-index:6}
.vision-detections{pointer-events:none}.vision-object{position:absolute;background:transparent;color:#c6edff;border:1px solid #83d9fdbb;border-radius:3px;pointer-events:auto;transition:box-shadow .3s,background .3s;min-width:44px;min-height:44px}
.vision-object>span{position:absolute;top:-28px;left:-1px;padding:3px 9px;background:#0d3048;color:#d7f3ff;border:1px solid #7ad5ff;white-space:nowrap;font-size:14px;line-height:20px;border-radius:3px 3px 0 0}.vision-object>i{position:absolute;inset:4px;border:1px solid currentColor;opacity:.22}
.vision-object[aria-pressed=true]{background:#99dfff13;box-shadow:0 0 0 3px #b0e4ff24,0 0 30px #40baff25}
.vision-person{left:45.3%;top:31%;width:13.4%;height:67%;color:#ffcd74;border-color:#ffcc76}.vision-person>span{background:#403224;border-color:#e6ba77;color:#ffe2aa}
.vision-shelf{left:6.5%;top:56.5%;width:12.7%;height:38%}
.vision-space{left:23.5%;top:80%;width:18%;height:16%}
.vision-object:hover{background:#cfedff24}.vision-object:focus-visible{outline-offset:7px!important}
.vision-route{pointer-events:none;overflow:visible}
.vision-route-line{fill:none;stroke:#a6edff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0}
.vision-route-glow{fill:none;stroke:#6ed7ff;stroke-width:14;opacity:.6;filter:url(#vision-route-glow)}
.vision-route.is-drawing .vision-route-line{animation:vision-route-draw 1.7s cubic-bezier(.2,.7,.2,1) 1}
.vision-clearance{fill:#ffbe6310;stroke:#ffc77c;stroke-width:2;stroke-dasharray:7 7}.vision-route-end{fill:#ddf8ff;stroke:#379edb;stroke-width:6}
@keyframes vision-route-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.vision-console{padding:0 32px 25px;background:linear-gradient(145deg,#102d47,#071726 72%)}
.vision-steps{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid #36516a;gap:24px}
.vision-steps button{display:flex;align-items:center;gap:12px;padding:21px 0 19px;background:none;border:0;border-bottom:2px solid transparent;color:#a2b8cf;font-size:17px;text-align:left;min-height:54px;transition:color .25s,border-color .25s}
.vision-steps button>span{font-size:13px;color:#9fbbd6;display:grid;place-items:center;width:26px;height:26px;border:1px solid #476078;border-radius:50%}
.vision-steps button[aria-pressed=true]{color:#fff;border-bottom-color:#a9dbff}.vision-steps button[aria-pressed=true]>span{background:#c9e6ff;color:#173653;border-color:#c9e6ff}.vision-steps button:hover{color:white}
.vision-details{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(250px,.85fr);gap:45px;padding-top:28px;align-items:center;min-height:173px}
.vision-narrative>span{font-size:13px;color:#95b5d8}.vision-narrative h4{font-size:26px;letter-spacing:-.025em;font-weight:500;line-height:1.2;margin:7px 0 10px}.vision-narrative p{font-size:16px;line-height:1.55;color:#bad0e4;max-width:53ch}
.vision-interaction label{display:flex;justify-content:space-between;color:#ecf6ff;font-size:15px;gap:15px;margin-bottom:18px}.vision-interaction output{color:#a2c8e9;font-variant-numeric:tabular-nums}
.vision-interaction input{width:100%;min-height:30px;accent-color:#afdfff;cursor:ew-resize}.vision-interaction input:focus-visible{outline:3px solid #91b6ff;outline-offset:4px;border-radius:3px}
.vision-view-switch{display:flex;justify-content:space-between;margin-top:2px}.vision-view-switch button{font-size:14px;padding:8px 0;min-height:44px;border:0;background:none;color:#bdd9f4}.vision-view-switch button:hover{color:white}
.vision-object-controls,.vision-goal-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.vision-object-controls button,.vision-goal-controls button{min-height:44px;border:1px solid #4a698a;background:#16324f;color:#dbeeff;font-size:14px;padding:10px 14px;border-radius:6px}.vision-object-controls button[aria-pressed=true],.vision-goal-controls button[aria-pressed=true]{background:#d0e9ff;color:#122e48;border-color:#d0e9ff}
.vision-object-controls a,.vision-goal-controls a{display:flex;align-items:center;gap:12px;min-height:44px;font-size:14px;color:#c5def6;width:100%;margin-top:7px}.vision-goal-controls>span{width:100%;font-size:15px;color:#bfd4ea;margin-bottom:5px}.vision-goal-controls>div{display:flex;gap:9px}
.vision-provenance{max-width:none;padding:15px 32px;font-size:12px;line-height:1.5;color:#9eb5cb;border-top:1px solid #30485f}

@media(max-width:760px){.vision-heading{padding:25px 22px;align-items:flex-start;gap:18px}.vision-heading h3{font-size:28px}.vision-heading>div{max-width:340px}.vision-play{gap:12px;font-size:14px;padding:10px 13px}.vision-console{padding:0 22px 25px}.vision-details{gap:25px;grid-template-columns:1.1fr 1fr;align-items:start}.vision-steps{gap:17px}.vision-steps button{font-size:15px;gap:8px}.vision-steps button>span{width:23px;height:23px}.vision-view-labels{inset:16px 20px auto;font-size:12px}.vision-narrative h4{font-size:25px}.vision-object>span{font-size:12px;top:-25px;padding:2px 6px}.vision-provenance{padding-inline:22px}.explorer-tabs{gap:4px}.explorer-tabs button{font-size:14px;padding-inline:13px}}
@media(max-width:540px){.vision-heading{display:block;padding:21px 18px}.vision-heading h3{font-size:29px;max-width:290px}.vision-play{margin-top:17px;min-height:44px}.vision-eyebrow{font-size:13px}.vision-view-labels{inset:10px 12px auto}.vision-view-labels>span:last-child{display:none}.vision-view-labels>span:first-child{padding:3px 7px}.vision-reticle{inset:8px}.vision-console{padding:0 18px 23px}.vision-steps{gap:8px}.vision-steps button{display:flex;flex-direction:column;align-items:flex-start;gap:7px;font-size:13px;padding:15px 0;line-height:1.25}.vision-steps button>span{font-size:12px}.vision-details{grid-template-columns:1fr;gap:22px;padding-top:23px;min-height:0}.vision-narrative h4{font-size:25px}.vision-narrative p{font-size:15px}.vision-interaction label{margin-bottom:9px}.vision-provenance{padding:13px 18px}.vision-object>span{display:none}.vision-person{width:14%}.vision-shelf{width:14%}.vision-space{height:20%;top:76%}.vision-object{min-width:40px;min-height:40px}.explorer-tabs{display:grid;grid-template-columns:1fr 1fr;padding:10px 12px;gap:5px}.explorer-tabs button{justify-content:center;min-height:44px;padding:10px 7px;font-size:14px}.vision-object-controls button{flex:1;padding-inline:8px}}
@media(prefers-reduced-motion:reduce){.vision-ai{transition:none}.vision-stage.is-scanning .vision-scan,.vision-route.is-drawing .vision-route-line{animation:none}}
/* Keep the image and its controls adjacent on a small screen. */
@media(max-width:540px){.vision-details{display:flex;flex-direction:column;align-items:stretch}.vision-interaction,.vision-object-controls,.vision-goal-controls{order:-1}.vision-interaction label{margin-bottom:4px}.vision-view-switch{margin-top:0}.vision-narrative{border-top:1px solid #2e4963;padding-top:19px}.vision-narrative p{font-size:16px}}
