/* A fixed app surface, with two numbered explanations and a guided spotlight. */
.orientation-slide{max-width:none;padding:12px 0}
.orientation-layout{width:min(100%,1000px);margin:0 auto}
.orientation-map{position:relative}
.orientation-screen{position:relative;width:min(100%,1000px,calc((100svh - 350px) * 16 / 9));margin:0 auto;aspect-ratio:16 / 9}
.orientation-screen img{display:block;width:100%;height:auto}
.orientation-callouts{display:grid;grid-template-columns:19.21875% 45.78125% 35%;align-items:start;min-height:80px;margin-bottom:24px}
/* Entry and replay hide immediately; only the timed reveals fade in. */
.orientation-callout{display:grid;grid-template-columns:68px minmax(0,1fr);gap:14px;padding:0 10px;color:var(--ink);opacity:0;transition:none}
.orientation-callout.is-revealed{opacity:1;transition:opacity 180ms ease}
.orientation-callout.is-muted{opacity:.45}
.orientation-center{grid-column:2}
.orientation-right{grid-column:3}
.orientation-number{display:block;font-size:52px;font-weight:600;line-height:.96;letter-spacing:-2px;color:var(--blue);font-variant-numeric:tabular-nums}
.orientation-callout h2{font-size:20px;font-weight:500;line-height:1.15;letter-spacing:-.32px;margin-bottom:7px}
.orientation-callout p{font-size:18px;line-height:1.3;color:var(--body)}
.orientation-focus{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.orientation-scrim{fill:#161616;opacity:0}
.orientation-outline{fill:none;stroke:var(--blue);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.orientation-arrows{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.orientation-arrow{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;opacity:0}
.orientation-anchor{fill:#fff;stroke:var(--blue);stroke-width:2;opacity:0}
@media(max-width:800px){
 .orientation-slide{padding:24px 0 30px}
 .orientation-layout{width:100%}
 .orientation-screen{width:100%}
 .orientation-callouts{grid-template-columns:1fr 1fr;gap:18px;min-height:174px;margin-bottom:34px}
 .orientation-center{grid-column:1}
 .orientation-right{grid-column:2}
 .orientation-callout{display:block;padding:0}
 .orientation-number{font-size:48px;letter-spacing:-2px;margin-bottom:10px}
 .orientation-copy{padding-top:0}
 .orientation-callout h2{font-size:19px}
 .orientation-callout p{font-size:17px;line-height:1.3}
}
@media(prefers-reduced-motion:reduce){.orientation-callout,.orientation-callout.is-revealed{transition:none}}