:root {
  --text: #f2efff; --muted: #93a3b5; --cyan: #5eead4; --blue: #60a5fa; --violet: #818cf8;
  --star-h1: 175; --star-h2: 210; --star-sat: 45; --star-density: 1.7; --radius: 18px;
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --font-brand: Bahnschrift, "DIN Alternate", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100svh; background: #030409; color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
#sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.aurora { position: fixed; inset: -20%; z-index: 1; pointer-events: none; filter: blur(70px); opacity: .62; }
.aurora i { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
.aurora i:nth-child(1) { width: 70vw; height: 44vw; left: -4%; top: 4%; background: radial-gradient(closest-side, #14b8a6, transparent); animation: drift1 20s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { width: 62vw; height: 40vw; right: -6%; top: 18%; background: radial-gradient(closest-side, #2563eb, rgba(37,99,235,.4) 45%, transparent); animation: drift2 24s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { width: 56vw; height: 34vw; left: 26%; top: 50%; background: radial-gradient(closest-side, #7c3aed, rgba(124,58,237,.35) 45%, transparent); animation: drift1 28s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate(8vw, 4vw) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-10vw, 6vw) scale(.9); } }
.grad { background: linear-gradient(90deg, var(--cyan), var(--blue) 45%, var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.foot { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); color: rgba(163, 155, 204, .7); font-size: .8rem; }
.foot a { color: inherit; text-decoration: none; }
.foot a:hover { color: var(--text); }
.foot .legal { flex-basis: 100%; margin: 2px 0 0; text-align: center; font-size: .72rem; color: rgba(163, 155, 204, .5); }
.back { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); text-decoration: none; font-size: .95rem;
  padding: 8px 14px 8px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); }
.back svg { width: 18px; height: 18px; }
.back:hover { color: var(--text); }
.page { position: relative; z-index: 2; width: min(100%, 760px); margin: 0 auto; padding: 64px 16px 96px; }
.page h1 { font-family: var(--font-brand); font-size: clamp(2rem, 5vw, 3rem); margin: 18px 0 24px; }
.page h2 { font-size: 1.25rem; margin: 32px 0 10px; }
.page p, .page li { color: #d9d4f2; line-height: 1.65; }
.page a { color: var(--cyan); }
.page .box { background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.09); border-radius: var(--radius); padding: 22px 24px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.lost { position: relative; z-index: 2; min-height: 80svh; display: grid; place-items: center; text-align: center; padding: 16px; }
.lost h1 { font-family: var(--font-brand); font-size: clamp(2.2rem, 6vw, 3.6rem); margin: 0 0 12px; }
.lost p { color: var(--muted); margin: 0 0 26px; }
.lost a { color: #eef0ff; text-decoration: none; padding: 12px 24px; border-radius: 999px; border: 1px solid rgba(150,160,255,.45); background: rgba(88,101,242,.18); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }