/* The 3D system's DOM layers: HUD, labels, hotspots, callouts and tour controls. Numbers and labels use the mono token
   with tabular figures and slashed zero; colours are design tokens; red only for what is live or selected. */
.hud .lbl,.nxo3d-hud,.nxo3d-card,.nxo3d-tour{font-family:var(--font-mono,var(--mono,"IBM Plex Mono",ui-monospace,monospace));font-variant-numeric:tabular-nums slashed-zero;font-feature-settings:"tnum" 1,"zero" 1}
.nxo3d-hud{position:absolute;inset:0;pointer-events:none;color:var(--t3);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;z-index:2}
.nxo3d-hud .c{display:none} /* owner rule: no CAD corner ticks */
.nxo3d-hud .c.tl{top:12px;inset-inline-start:12px;border-top-width:1px;border-inline-start-width:1px}.nxo3d-hud .c.tr{top:12px;inset-inline-end:12px;border-top-width:1px;border-inline-end-width:1px}
.nxo3d-hud .c.bl{bottom:12px;inset-inline-start:12px;border-bottom-width:1px;border-inline-start-width:1px}.nxo3d-hud .c.br{bottom:12px;inset-inline-end:12px;border-bottom-width:1px;border-inline-end-width:1px}
.nxo3d-hud .ticks{position:absolute;inset-inline-start:34px;inset-inline-end:34px;top:12px;height:6px;display:none}
.nxo3d-hud .tl-t{position:absolute;top:24px;inset-inline-start:34px;display:flex;gap:14px;align-items:baseline}
.nxo3d-hud .tl-t b{color:var(--t1);font-weight:500}.nxo3d-hud .tl-t .live{color:var(--accent-text,var(--accent))}
.nxo3d-hud .br-t{position:absolute;bottom:26px;inset-inline-end:34px;text-align:end;line-height:1.6}
.nxo3d-hud .bl-t{position:absolute;bottom:26px;inset-inline-start:34px;display:flex;gap:18px;align-items:flex-end}
.nxo3d-hud .scale{display:flex;flex-direction:column;gap:4px}.nxo3d-hud .scale i{display:block;height:5px;border:1px solid var(--t2);border-top:0}
.nxo3d-hud .north{width:34px;height:34px;position:relative}.nxo3d-hud .north svg{width:34px;height:34px;overflow:visible}
.nxo3d-hud .north path,.nxo3d-hud .north circle{fill:none;stroke:var(--t2);stroke-width:1}.nxo3d-hud .north .n{fill:var(--accent-graphic,var(--accent));stroke:none}
.nxo3d-hud .out{position:absolute;top:24px;inset-inline-end:34px;text-align:end;line-height:1.7;max-width:46%}
.nxo3d-hud .out b{color:var(--t1);font-weight:500;margin-inline-start:10px}
@media (max-width:700px){.nxo3d-hud .out,.nxo3d-hud .ticks{display:none}.nxo3d-hud{font-size:9.5px}}
/* hotspots: focusable buttons placed over the canvas */
.nxo3d-hot{/*rtl:keep*/position:absolute;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;border:0;padding:0;background:transparent;cursor:pointer;pointer-events:auto;z-index:3}
.nxo3d-hot::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--accent-graphic,var(--accent))}
.nxo3d-hot::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--accent-graphic,var(--accent));animation:nxo3d-pulse 2.4s ease-out infinite}
.nxo3d-hot[aria-expanded=true]::after{border-width:2px}
.nxo3d-hot:focus-visible{outline:2px solid var(--accent-hot,var(--accent));outline-offset:3px}
.nxo3d-hot[data-hidden]{opacity:.25}
@keyframes nxo3d-pulse{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.nxo3d-hot::after{animation:none;transform:scale(1.1);opacity:.6}}
.nxo3d-card{position:absolute;z-index:4;width:280px;max-width:calc(100% - 24px);padding:14px 16px;background:var(--surface,var(--bg));border:1px solid var(--hair2);border-radius:5px;color:var(--t2);font-size:12px;line-height:1.5;text-transform:none;letter-spacing:0;pointer-events:auto}
.nxo3d-card h3{margin:0 0 6px;padding-inline-end:28px;font:500 11px/1.3 var(--font-mono,var(--mono));letter-spacing:.1em;text-transform:uppercase;color:var(--t1)}
.nxo3d-card p{margin:0 0 8px;font-family:var(--font-sans,var(--sans,system-ui))}.nxo3d-card dl{margin:0 0 8px;display:grid;grid-template-columns:auto 1fr;gap:2px 10px}
.nxo3d-card dt{color:var(--t3)}.nxo3d-card dd{margin:0;color:var(--t1);text-align:end}.nxo3d-card a{color:var(--accent-text,var(--accent))}
.nxo3d-card .x{position:absolute;top:6px;inset-inline-end:8px;border:0;background:transparent;color:var(--t3);font-size:16px;cursor:pointer}
.nxo3d-card .lead{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--accent-graphic,var(--accent))}
/* tours */
.nxo3d-tour{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--surface,var(--bg));border:1px solid var(--hair2);border-radius:5px;pointer-events:auto;font-size:11px;color:var(--t2)}
.nxo3d-tour button{border:1px solid var(--hair2);background:transparent;color:var(--t1);border-radius:5px;min-width:30px;height:28px;cursor:pointer;font:inherit}
.nxo3d-tour button:hover{border-color:var(--accent-graphic,var(--accent))}
.nxo3d-tour button:focus-visible{outline:2px solid var(--accent-hot,var(--accent));outline-offset:2px}
.nxo3d-tour input[type=range]{width:160px;accent-color:var(--accent-graphic,var(--accent))}
.nxo3d-cap{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);z-index:4;max-width:min(620px,calc(100% - 32px));padding:10px 14px;background:color-mix(in srgb,var(--bg) 82%,transparent);border-inline-start:2px solid var(--accent-graphic,var(--accent));color:var(--t1);font:14px/1.5 var(--font-sans,var(--sans,system-ui));pointer-events:none}
.nxo3d-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* leader line from a label nudged off its anchor (labels.js settle) */
.lbl[data-led]:after{/*rtl:keep*/content:"";position:absolute;left:8px;width:1px;height:var(--led,0);background:currentColor;opacity:.55}
.lbl[data-led=up]:after{top:100%}.lbl[data-led=down]:after{bottom:100%}

/* scroll always scrolls: a vertical swipe on any scene scrolls the page; the scene turns on a deliberate horizontal drag or the keyboard */
.envs canvas,.nxo-stage-canvas canvas,.cad-stage canvas,.x3d canvas,.ss-canvas canvas,canvas.hg{touch-action:pan-y}

/* copy over a 3D stage sits on the scrim token (render sweep 2026-11-04): the explainers' intro, contents, chapter rail and
   hint, and the observatory hero's copy column (hero.js lays its own plate); the plate's outline adds a gutter without moving the layout */
:is(.ch,.xch).intro > .in,.stage > :is(.rail,.xrail,.hint),.has-hero:has(> .nxo-hero--obs) .copy{background:var(--scrim);outline:12px solid var(--scrim);border-radius:5px}