* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; overflow: hidden; }
body { background: #09030a; color: #fff; font-family: system-ui,-apple-system,"Segoe UI",sans-serif; }
.fireworks-page, #fireworksCanvas { position: fixed; inset: 0; width: 100%; height: 100%; }
.fireworks-page {
  isolation: isolate;
  background: radial-gradient(ellipse at 22% 20%,rgba(71,36,112,.32),transparent 34%),radial-gradient(ellipse at 78% 75%,rgba(118,21,70,.28),transparent 38%),radial-gradient(circle at 50% 65%,#2d0b22 0,transparent 38%),linear-gradient(#05020d,#160614);
}
.fireworks-page::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: -2;
  background: conic-gradient(from 40deg,transparent,rgba(103,61,151,.08),transparent 35%,rgba(194,44,109,.09),transparent 68%);
  filter: blur(40px);
  animation: nebula 24s linear infinite;
}
#fireworksCanvas { z-index: -1; touch-action: none; }
.fireworks-copy {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: min(calc(100% - 2rem),32rem);
  text-align: center;
  pointer-events: none;
  transform: translate(-50%,-50%);
  text-shadow: 0 2px 24px #000;
  transition: opacity 1.2s ease,transform 1.2s ease;
}
.fireworks-copy.quiet { opacity: .18; transform: translate(-50%,-54%) scale(.96); }
.fireworks-copy p { margin: 0 0 .75rem; color: #ff9cbd; font-size: .68rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }
.fireworks-copy h1 { margin: 0 0 1rem; font: 500 clamp(2.5rem,12vw,5rem)/.95 Georgia,"Times New Roman",serif; letter-spacing: -.045em; }
.back {
  position: absolute;
  z-index: 4;
  top: max(1rem,env(safe-area-inset-top));
  left: max(1rem,env(safe-area-inset-left));
  display: grid;
  place-items: center;
  min-height: 48px;
  padding: .6rem 1rem;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 99px;
  background: rgba(255,255,255,.08);
  color: #fff;
  text-decoration: none;
  backdrop-filter: blur(12px);
}
.announcement { position: absolute; left: 50%; bottom: max(1.5rem,env(safe-area-inset-bottom)); color: #ffb4cb; font-family: Georgia,serif; text-align: center; transform: translateX(-50%); }
.back:focus-visible { outline: 3px solid #ff8bb1; outline-offset: 3px; }
@keyframes nebula { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fireworks-page::before { animation: none; } }