:root { color-scheme: dark; --background: #08090b; --text: #e1e3e6; --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; background: var(--background); color: var(--text); font-family: Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
::selection { background: #bbc9df; color: #08090b; }
.page-shell { height: 100svh; height: 100dvh; position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 70% 52%, #171b2238, transparent 48%); }
header { position: absolute; left: clamp(24px, 5vw, 80px); right: clamp(24px, 5vw, 80px); display: flex; align-items: center; justify-content: space-between; z-index: 2; }
header { top: 0; height: clamp(64px, 13svh, 116px); pointer-events: none; }
.brand { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; pointer-events: auto; }
.brand-logo { display: block; width: 166px; height: auto; }
.copy { position: absolute; left: clamp(24px, 9vw, 144px); top: 50%; transform: translateY(-45%); z-index: 1; pointer-events: none; }
h1 { margin: 0; font: 600 30px/1.6 var(--mono); letter-spacing: .015em; color: #08090b; background-color: #e1e3e6;}
.more-soon { pointer-events: auto; margin-top: 8px; min-height: 44px; border: 0; background: none; padding: 0; font: 12px var(--mono); letter-spacing: .035em; color: #a5a9b2; cursor: pointer; transition: color .25s; }
.more-soon:hover, .more-soon[aria-pressed="true"] { color: #d4e3ff; }
.cursor { animation: blink 1.8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.matter-field { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: transparent; cursor: grab; touch-action: none; }
.matter-field:active { cursor: grabbing; }
#matter { display: block; width: 100%; height: 100%; pointer-events: none; }
a:focus-visible, button:focus-visible { outline: 1px solid #a8b7cf; outline-offset: 6px; }
.matter-field:focus-visible { outline-offset: -10px; }
.matter-fallback { position: absolute; width: 28vw; aspect-ratio: 1; left: 55%; top: 30%; border-radius: 42% 58% 61% 39%; background: radial-gradient(circle at 32% 25%, #e1e5eb, #646e7c 18%, #161b23 48%, #a2adba 73%, #141820 85%); transform: rotate(-25deg); box-shadow: inset -15px -10px 45px #000; }
.scene-ready .matter-fallback { display: none; }
@media (max-width: 760px) and (orientation: portrait) {
  .page-shell { background: radial-gradient(ellipse at 50% 62%, #171b2238, transparent 50%); }
  header { height: 10svh; min-height: 52px; }
  .brand-logo { width: 149px; }
  .copy { top: 16%; left: 8vw; transform: none; }
  .more-soon { margin-top: 8px; font-size: 12px; }
  .matter-fallback { left: 20%; top: 45%; width: 60%; }
}
@media (max-height: 420px) and (orientation: landscape) { .brand-logo { width: 149px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }