* { box-sizing: border-box; }
html { color-scheme: dark; background: #0a0a0a; }
body { margin: 0; color: #e8e6e2; font: 13px/1.4 system-ui, sans-serif; }
header { position: fixed; z-index: 5; inset: max(16px, env(safe-area-inset-top)) 20px auto; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
a { color: inherit; padding: 12px; margin: -12px; min-height: 44px; display: inline-flex; align-items: center; pointer-events: auto; text-underline-offset: 4px; }
a:focus-visible { outline: 2px solid #e8603c; outline-offset: 3px; }
h1 { font: inherit; font-weight: 400; margin: 0; }
main { height: 300vh; height: 300dvh; }
#stage { position: fixed; inset: 0; overflow: hidden; }
canvas { width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; mix-blend-mode: screen; }
canvas:active { cursor: grabbing; }
#grid, #reveal, #grain { position: absolute; inset: 0; pointer-events: none; }
#grid { background-image: linear-gradient(#ffffff04 1px, transparent 1px), linear-gradient(90deg, #ffffff04 1px, transparent 1px); background-size: 50px 50px; }
#reveal { mask-image: radial-gradient(circle 250px at var(--x, 50%) var(--y, 50%), transparent 0%, black 100%); -webkit-mask-image: radial-gradient(circle 250px at var(--x, 50%) var(--y, 50%), transparent 0%, black 100%); }
#grain { opacity: .03; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); }

.globe-control { position: absolute; border-radius: 50%; touch-action: none; cursor: grab; }
.globe-control:active { cursor: grabbing; }
.globe-control:focus-visible { outline: 2px solid #e8603c; outline-offset: 4px; }