html, body { margin: 0; height: 100%; overflow: hidden; background: #000; touch-action: none; user-select: none; -webkit-user-select: none; }
canvas { display: block; }
.hg-back { position: fixed; top: 16px; left: 16px; z-index: 10; font: 600 13px/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: .04em; color: rgba(255,255,255,.55); text-decoration: none; padding: 8px 12px; border-radius: 99px; background: rgba(0,0,0,.25); backdrop-filter: blur(8px); }
.hg-back:hover { color: #fff; }
.hg-title { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: radial-gradient(ellipse at center, rgba(0,0,0,.35), rgba(0,0,0,.75)); cursor: pointer; transition: opacity .45s ease; }
.hg-title.out { opacity: 0; pointer-events: none; }
.hg-title-inner { text-align: center; color: #fff; font-family: ui-sans-serif, system-ui, sans-serif; padding: 0 16px; }
.hg-title h1 { margin: 0; font-size: clamp(56px, 14vw, 160px); letter-spacing: -.04em; line-height: .9; font-weight: 900; color: var(--accent); }
.hg-title p { margin: 18px 0 28px; font-size: clamp(15px, 2.4vw, 20px); opacity: .75; }
.hg-title button { font: 700 16px/1 inherit; letter-spacing: .12em; text-transform: uppercase; padding: 16px 34px; border-radius: 99px; border: 0; background: #fff; color: #000; cursor: pointer; }