.observatory-wrap { isolation: isolate; background: transparent; border-radius: 2px; overflow: hidden; }
[data-theme="light"] .observatory-wrap { background: transparent; }
.observatory-wrap::before { content: ''; position: absolute; inset: 8%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 27% 30%,color-mix(in srgb,var(--mint) 8%,transparent),transparent 34%),radial-gradient(ellipse at 73% 30%,color-mix(in srgb,var(--orange) 7%,transparent),transparent 30%),radial-gradient(ellipse at 73% 70%,color-mix(in srgb,var(--violet) 7%,transparent),transparent 32%),radial-gradient(ellipse at 27% 70%,color-mix(in srgb,var(--blue) 7%,transparent),transparent 32%); }
#observatory { position: absolute; inset: 0; width: 100%; height: 100%; outline-offset: -8px; display: block; touch-action: pan-y; }
.spatial-hotspots { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.spatial-project { position: absolute; transform: translate(-50%,-50%); min-height: 44px; min-width: 112px; display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid color-mix(in srgb,var(--project-color) 35%,var(--line)); border-radius: 4px; color: var(--project-color); background: color-mix(in srgb,var(--bg) 88%,transparent); box-shadow: 0 5px 24px rgb(0 0 0 / 14%); backdrop-filter: blur(10px); pointer-events: auto; font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; transition: background .18s,border-color .18s,box-shadow .18s; }
.spatial-project i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
.spatial-project small { color: var(--muted); margin-left: auto; padding-left: 8px; font-size: 12px; font-weight: 400; }
.spatial-project:hover,.spatial-project.is-preview,.spatial-project[aria-pressed="true"] { border-color: var(--project-color); background: color-mix(in srgb,var(--project-color) 12%,var(--bg)); box-shadow: 0 0 30px color-mix(in srgb,var(--project-color) 10%,transparent); }
.spatial-project[aria-pressed="true"]::after { content: ''; position: absolute; left: 12px; right: 12px; height: 1px; background: var(--project-color); bottom: 4px; }
.spatial-project:focus-visible { outline-color: var(--project-color); outline-offset: 3px; }
.spatial-component { position: absolute; padding: 3px 7px; border-left: 1px solid var(--line); background: color-mix(in srgb,var(--bg) 88%,transparent); color: var(--text); font-size: 12px; line-height: 1.4; white-space: nowrap; box-shadow: 0 1px 6px rgb(0 0 0 / 10%); }
.spatial-unavailable { position: absolute; top: 22%; left: 10%; right: 10%; text-align: center; font-size: 14px; max-width: 420px; margin-inline: auto; z-index: 4; }
.spatial-failed { background: radial-gradient(ellipse at 50% 60%,color-mix(in srgb,var(--mint) 7%,transparent),transparent 65%); }
.spatial-failed #observatory { opacity: 0; }
.spatial-stage-label { position: absolute; left: 5%; right: 5%; bottom: 77px; display: flex; justify-content: space-between; gap: 12px; z-index: 3; color: var(--muted); font-size: 12px; letter-spacing: .09em; line-height: 1.4; pointer-events: none; }
.spatial-cut-label { position: absolute; color: var(--mint); font-size: 12px; padding: 4px 7px; border: 1px solid var(--mint); background: var(--bg); pointer-events: none; z-index: 4; transform: translate(-50%,-50%); white-space: nowrap; }
.spatial-cut-label[hidden] { display: none; }
.inst-scene-host { position: relative; isolation: isolate; overflow: hidden; min-height: 380px; background: var(--bg); border: 1px solid var(--line); }
[data-theme="light"] .inst-scene-host { background: var(--bg); }
.inst-scene-host .spatial-stage-label { bottom: 14px; }
.inst-scene-host .spatial-hotspots { display: none; }
.inst-scene-host[data-unavailable="true"]::after { content: '3D er ikke tilgjengelig. Diagrammet og forsøket nedenfor viser de samme beregningene.'; position: absolute; inset: auto 24px 20px; font-size: 12px; line-height: 1.5; color: var(--muted); pointer-events: none; }
@media (max-width:600px) { .spatial-stage-label { bottom: 70px; font-size: 12px; letter-spacing: .02em; }.spatial-stage-label span:last-child { max-width: 140px; text-align: right; }.inst-scene-host { min-height: 340px; } }
@media (max-width:600px) { .spatial-project { min-width: 103px; padding-inline: 10px; gap: 7px; font-size: 12px; }.spatial-project small { padding-left: 4px; }.spatial-component { font-size: 12px; max-width: 130px; } }
@media (prefers-reduced-motion:reduce) { .spatial-project { transition: none; } }