:root {
  color-scheme: dark;
  --ink: #f7f4ee;
  --muted: rgba(247,244,238,.72);
  --deep: #06101c;
  --card: rgba(10,18,34,.48);
  --glow: #4f8fe8;
  --glow-warm: #d7b07a;
  --glow-cool: #5a8ea8;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { background: #04080f; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  background: var(--deep);
  color: var(--ink);
  isolation: isolate;
}
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}
body::before {
  z-index: -2;
  background:
    radial-gradient(1.4px 1.4px at 8% 12%, rgba(255,255,255,.62), transparent 2.2px),
    radial-gradient(1px 1px at 14% 28%, rgba(210,230,255,.38), transparent 2px),
    radial-gradient(1.6px 1.6px at 22% 8%, rgba(255,255,255,.48), transparent 2.4px),
    radial-gradient(1px 1px at 29% 19%, rgba(255,255,255,.28), transparent 2px),
    radial-gradient(1.2px 1.2px at 36% 6%, rgba(200,220,255,.42), transparent 2.1px),
    radial-gradient(1px 1px at 43% 24%, rgba(255,255,255,.22), transparent 2px),
    radial-gradient(1.5px 1.5px at 51% 11%, rgba(255,255,255,.55), transparent 2.3px),
    radial-gradient(1px 1px at 58% 4%, rgba(220,235,255,.4), transparent 2px),
    radial-gradient(1.3px 1.3px at 65% 21%, rgba(255,255,255,.34), transparent 2.2px),
    radial-gradient(1px 1px at 72% 9%, rgba(255,255,255,.46), transparent 2px),
    radial-gradient(1.1px 1.1px at 79% 16%, rgba(190,220,255,.3), transparent 2px),
    radial-gradient(1.4px 1.4px at 86% 5%, rgba(255,255,255,.5), transparent 2.2px),
    radial-gradient(1px 1px at 93% 18%, rgba(255,255,255,.26), transparent 2px),
    radial-gradient(1px 1px at 4% 42%, rgba(220,235,255,.2), transparent 2px),
    radial-gradient(1.2px 1.2px at 18% 48%, rgba(255,255,255,.18), transparent 2.1px),
    radial-gradient(1px 1px at 33% 38%, rgba(255,255,255,.14), transparent 2px),
    radial-gradient(1.3px 1.3px at 47% 44%, rgba(210,230,255,.22), transparent 2.2px),
    radial-gradient(1px 1px at 61% 36%, rgba(255,255,255,.16), transparent 2px),
    radial-gradient(1.1px 1.1px at 76% 41%, rgba(255,255,255,.2), transparent 2px),
    radial-gradient(1px 1px at 89% 33%, rgba(200,225,255,.18), transparent 2px),
    radial-gradient(1px 1px at 11% 62%, rgba(255,255,255,.1), transparent 2px),
    radial-gradient(1.2px 1.2px at 27% 71%, rgba(220,235,255,.12), transparent 2px),
    radial-gradient(1px 1px at 54% 58%, rgba(255,255,255,.08), transparent 2px),
    radial-gradient(1px 1px at 82% 66%, rgba(255,255,255,.1), transparent 2px),
    radial-gradient(ellipse 92% 54% at 50% -18%, color-mix(in srgb, var(--glow) 58%, white 10%), transparent 72%),
    radial-gradient(ellipse 46% 28% at 50% -6%, color-mix(in srgb, var(--glow-warm) 28%, transparent), transparent 78%),
    radial-gradient(ellipse 48% 40% at 112% 8%, color-mix(in srgb, var(--glow-cool) 36%, transparent), transparent 72%),
    radial-gradient(ellipse 42% 36% at -8% 14%, color-mix(in srgb, var(--glow) 32%, transparent), transparent 70%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--glow) 22%, #152844) 0%,
      #102038 18%,
      #0b172c 42%,
      #071221 68%,
      #050b14 100%);
}
body::after {
  z-index: -1;
  opacity: .14;
  mix-blend-mode: overlay;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}
.stage {
  position: relative;
  min-height: 100vh;
  padding: 28px 22px 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.stage::before {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  top: -8%;
  height: 48%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 38% at 28% 42%, color-mix(in srgb, var(--glow) 34%, transparent), transparent 72%),
    radial-gradient(ellipse 58% 32% at 72% 28%, color-mix(in srgb, var(--glow-cool) 30%, transparent), transparent 74%),
    radial-gradient(ellipse 40% 22% at 50% 8%, color-mix(in srgb, var(--glow-warm) 16%, transparent), transparent 78%);
  filter: blur(28px);
  opacity: .85;
  animation: aurora 36s ease-in-out infinite alternate;
}
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(180deg, transparent 0%, transparent 72%, rgba(4,8,15,.22) 100%),
    radial-gradient(ellipse 120% 28% at 50% 118%, rgba(4,8,15,.55), transparent 70%),
    radial-gradient(ellipse 80% 10% at 50% 100%, color-mix(in srgb, var(--glow-cool) 18%, transparent), transparent 72%);
}
.stage > * { position: relative; z-index: 1; }
@keyframes aurora {
  from { transform: translate3d(-3%, 0, 0) scale(1); }
  to { transform: translate3d(3%, 2%, 0) scale(1.04); }
}
.mark { width: 36px; height: 36px; border-radius: 10px; background: #fff; color: #0a1220; display: grid; place-items: center; font-weight: 800; letter-spacing: -.04em; margin-bottom: 22px; }
.kicker { letter-spacing: .22em; font-size: 11px; font-weight: 700; opacity: .7; }
h1 { font-size: clamp(32px, 8vw, 44px); line-height: 1.08; margin: 10px 0 8px; font-weight: 650; font-family: ui-serif, "Iowan Old Style", "Times New Roman", serif; }
.lede, .meta { font-size: 16px; line-height: 1.45; color: var(--muted); margin: 0 0 10px; }
.card {
  margin: 18px 0 22px;
  padding: 16px 16px 14px;
  border-radius: 22px;
  background: var(--card);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 50px rgba(4,10,22,.28);
  backdrop-filter: blur(18px) saturate(140%);
}
.row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin: 6px 0; }
.row span { opacity: .62; font-size: 12px; letter-spacing: .14em; font-weight: 700; }
.row strong { font-size: 16px; font-weight: 650; text-align: right; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,210,92,.18);
  color: #ffe7a3;
  width: fit-content;
  margin-bottom: 8px;
}
.pill.ok { background: rgba(90,214,160,.18); color: #b6f3d4; }
.pill.used { background: rgba(255,255,255,.12); color: #ddd; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
a.btn { display: block; text-align: center; text-decoration: none; border-radius: 999px; padding: 15px 18px; font-weight: 650; margin-bottom: 12px; }
.primary { background: #fff; color: #0a1220; }
.secondary { background: rgba(255,255,255,.14); color: #fff; }
.ghost { background: transparent; color: var(--muted); padding: 8px; font-weight: 600; }
p.fine { opacity: .62; font-size: 13px; line-height: 1.5; margin: 8px 0 0; }
.links { display: grid; gap: 10px; margin: 18px 0 24px; }
.links a {
  display: flex; justify-content: space-between; align-items: center;
  text-decoration: none; color: inherit;
  padding: 14px 16px; border-radius: 18px;
  background: rgba(12,22,40,.42);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px) saturate(130%);
}
.cover {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 18px;
  margin: 16px 0 8px;
  background: rgba(255,255,255,.08);
  display: none;
}
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.nav a {
  color: inherit;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .78;
}
.nav .brand { opacity: 1; font-size: 14px; letter-spacing: .16em; }
.legal { max-width: 40rem; }
.legal p { color: var(--muted); font-size: 15px; line-height: 1.55; }
.legal a { color: inherit; }
.foot { margin-top: 28px; }
.foot a { color: inherit; text-decoration: none; font-weight: 650; }
.avatar {
  width: 72px;
  height: 72px;
  border-radius: 24px;
  object-fit: cover;
  background: rgba(255,255,255,.1);
  display: none;
  margin: 16px 0 8px;
}
.grid {
  display: grid;
  gap: 10px;
  margin: 18px 0 24px;
}
.grid a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(12,22,40,.42);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px) saturate(130%);
}
.home { --glow: #4f8fe8; --glow-warm: #c9b896; --glow-cool: #648ca0; }
.series { --glow: #2f9bff; --glow-warm: #8ec8ff; --glow-cool: #3558d4; }
.collab { --glow: #4a7b82; --glow-warm: #c9b896; --glow-cool: #2f5e62; }
.get { --glow: #2ea7ff; --glow-warm: #9ad0ff; --glow-cool: #1d4e89; }
.post { --glow: #7a5cff; --glow-warm: #c4b5ff; --glow-cool: #3d2a80; }
.spark { --glow: #ffb048; --glow-warm: #ff7a59; --glow-cool: #3d2a18; }
.profile { --glow: #5ad6a0; --glow-warm: #c9e8d8; --glow-cool: #1f6b4a; }
.lost { --glow: #8a93a6; --glow-warm: #d7d2c8; --glow-cool: #3a4254; }
@media (prefers-reduced-motion: reduce) {
  .stage::before { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  body::after { opacity: .08; mix-blend-mode: normal; }
  .card, .links a, .grid a { backdrop-filter: none; background: rgba(10,18,34,.88); }
}