* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #050509; color: #fff; font-family: Arial, sans-serif; }
#app { position: fixed; inset: 0; overflow: hidden; touch-action: none; }
#app canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.identity { position: fixed; z-index: 5; top: 22px; right: 26px; left: 26px; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; pointer-events: none; }
.identity strong { font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: lowercase; }
.identity span { max-width: 360px; color: rgba(255,255,255,.7); font-size: 10px; line-height: 1.55; letter-spacing: .1em; text-align: right; text-transform: uppercase; }
.center-title { position: fixed; z-index: 4; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.center-title h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(56px, 10vw, 150px); font-weight: 400; letter-spacing: -.07em; line-height: .78; text-shadow: 0 0 38px rgba(0,0,0,.65); }
.center-title p { margin: 24px 0 0; color: rgba(255,255,255,.72); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.action { position: fixed; z-index: 6; right: 26px; bottom: 24px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.55); background: rgba(0,0,0,.32); color: #fff; font: inherit; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
@media (max-width: 640px) { .identity { top: 16px; right: 16px; left: 16px; } .identity span { max-width: 190px; font-size: 8px; } .action { right: 16px; bottom: 16px; } }