@font-face { font-family: 'Space Grotesk'; src: url('../fonts/SpaceGrotesk.ttf') format('truetype'); font-style: normal; font-weight: 300 700; font-display: swap; }
:root, .dark { color-scheme: dark; --background: #030207; --foreground: #fff; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--background); }
body { font-family: 'Space Grotesk', Arial, sans-serif; }
.experience { position: fixed; inset: 0; background: radial-gradient(ellipse at 50% 50%, #402346 0%, #120b19 40%, #030207 80%); }
canvas { display: block; width: 100%; height: 100%; }
.hold-surface { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; border: 0; padding: 24px; background: transparent; font-family: inherit; color: white; cursor: default; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.hold-surface:focus { outline: none; }
.hold-surface:focus-visible { outline: 1px solid #ffffff80; outline-offset: -8px; }
.email { opacity: 0; font-size: clamp(1.15rem, 4.5vw, 2.8rem); font-weight: 400; letter-spacing: .035em; line-height: 1.4; text-shadow: 0 2px 12px #000, 0 0 35px #000; transition: opacity 180ms ease; overflow-wrap: anywhere; }
.email.revealed { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .email { transition: none; } }