:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; background: #000; }
body { overflow: hidden; color: #dedede; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .055; background: repeating-linear-gradient(to bottom, transparent 0 3px, #fff 4px, transparent 5px); mix-blend-mode: screen; }
.stage { min-height: 100svh; min-height: 100dvh; display: grid; place-items: center; padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); position: relative; }
.intro { display: block; width: min(88vw, 1100px); max-height: 82svh; max-height: 82dvh; object-fit: contain; opacity: 1; transition: opacity 420ms ease; }
.intro.is-fading { opacity: 0; }
.reveal { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: .55rem; opacity: 0; visibility: hidden; transition: opacity 1.8s ease; text-align: center; }
.reveal.is-visible { opacity: 1; visibility: visible; }
h1 { margin: 0 0 .35rem; color: #e9e9e9; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: clamp(3.2rem, 10vw, 8rem); font-weight: 400; letter-spacing: .16em; text-shadow: 2px 0 #3d080d; }
.reveal p, .reveal small { margin: 0; color: #9b9b9b; font-size: clamp(.62rem, 1.3vw, .8rem); letter-spacing: .24em; }
.reveal p:nth-of-type(2) { color: #5d5d5d; font-size: clamp(.52rem, 1vw, .68rem); }
.reveal small { margin-top: 1.8rem; color: #3c3c3c; letter-spacing: .16em; }
.noscript { position: fixed; inset: 0; display: grid; place-items: center; margin: 0; color: #ddd; font: 1rem monospace; }
@media (max-width: 600px) { .intro { width: 94vw; max-height: 70dvh; } .reveal { padding: 1rem; } .reveal p { letter-spacing: .13em; } }
@media (prefers-reduced-motion: reduce) { .intro, .reveal { transition: none; } body::before { opacity: .025; } }