:root { color-scheme: dark; background: #020203; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { background: #020203; }
#universe { position: fixed; inset: 0; overflow: hidden; isolation: isolate; background: #020203; }
canvas, #still { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#space, #fallback { opacity: 0; }
#space.visible, #fallback.visible { opacity: 1; }
#probe { position: absolute; left: 79%; top: 74%; width: clamp(32px, 2.65vw, 40px); aspect-ratio: 100 / 72; opacity: .87; transform: rotate(-23deg); transform-origin: 50% 45%; will-change: transform; pointer-events: none; }
#probe svg { display: block; width: 100%; height: 100%; filter: drop-shadow(-.5px -.5px .7px #f6c27c36); }
/* Immediate first paint, and the final safety net if neither canvas API exists. */
#still { --size: min(37vw, 75.5vh); background: radial-gradient(ellipse at 43% 47%, #37251815, transparent 65%), #020203; }
.still-halo, .still-hole, .still-disk { position: absolute; left: 43%; top: 47%; transform: translate(-50%, -50%) rotate(8deg); }
.still-halo { width: calc(var(--size) * 1.19); height: calc(var(--size) * 1.4); border-radius: 50%; clip-path: inset(0 0 49%); background: repeating-radial-gradient(ellipse closest-side, #ffe5b344 0 1px, transparent 1px 3px), linear-gradient(110deg, #fff1cc, #d7a85f 48%, #7b4b1d); mask-image: radial-gradient(ellipse closest-side, transparent 77%, #0008 80%, #000 86%, #0006 93%, transparent 100%); }
.still-hole { width: var(--size); height: var(--size); border-radius: 50%; background: #000; border-top: 1px solid #e9c28b80; }
.still-disk { margin-top: calc(var(--size) * .095); width: min(104vw, 212vh); height: min(7.5vw, 15vh); border-radius: 50%; background: linear-gradient(90deg, #f1f4ffbb, #fff0cacc 28%, #dca76499 55%, #78461766 80%, transparent), repeating-radial-gradient(ellipse at 50% 0, #edce9455 0 1px, #5e361800 2px 4px); mask-image: radial-gradient(ellipse, #000 25%, #000a 50%, transparent 71%); filter: drop-shadow(0 0 5px #eeb06c40); }
@media (orientation: portrait) {
  #probe { left: 81%; top: 72%; width: 28px; }
  #still { --size: 63.4vw; }
  .still-halo, .still-hole, .still-disk { left: 48%; top: 45%; }
  .still-disk { width: 178vw; height: 14vw; }
}
@media (prefers-reduced-motion: reduce) { #probe { will-change: auto; } }