:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #f0f0ed; background: #080a0b; }
* { box-sizing: border-box; }
body { margin: 0; }
#landing { min-height: 100svh; position: relative; overflow: hidden; isolation: isolate; }
.surface { position: absolute; inset: 0; background: radial-gradient(ellipse at 44% 42%, #35393b 0%, #15191b 39%, #080a0b 85%); }
.surface canvas { display: block; width: 100%; height: 100%; touch-action: pinch-zoom; }
.surface canvas[hidden] { display: none; }
.fallback-symbol { position: absolute; width: clamp(220px, 29vw, 450px); top: 47%; left: 50%; transform: translate(-50%, -50%); opacity: .7; }
.surface[data-ready="true"] .fallback-symbol { display: none; }
header { position: absolute; left: 24px; right: 24px; top: max(30px, env(safe-area-inset-top)); padding-top: 12px; z-index: 2; text-align: center; pointer-events: none; }
/* Translucent engraving lets the live light and surface grain carry the title. */
h1 { font-size: 1.125rem; font-weight: 500; margin: 0; letter-spacing: -.035em; line-height: 1.2; color: #777f83; opacity: .45; text-shadow: 0 -.5px .5px #0008, 0 .5px .5px #dce7ed38; }
#landing:focus-visible::after { content: ""; position: absolute; inset: 6px; z-index: 3; border: 2px solid #a8becb; border-radius: 3px; pointer-events: none; }
#landing:focus { outline: none; }
@media (max-width: 600px) {
  header { top: max(20px, env(safe-area-inset-top)); }
  h1 { font-size: 1rem; }
}
@media (max-height: 460px) { header { top: 10px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }