:root {
  --night: #0d1638;
  --night-2: #16225a;
  --ink: #fff7e8;
  --ink-soft: #d9d3ea;
  --gold: #ffc94a;
  --gold-deep: #f0a417;
  --red: #e0262f;
  --red-deep: #a8101f;
  --pink: #ff7aa2;
  --teal: #3cc6b4;
  --card: rgba(255, 255, 255, .06);
  --line: rgba(255, 255, 255, .14);
  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--night);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--gold); }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Moon */
.moon {
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 35%, rgba(255,255,255,.55) 0 6%, transparent 7%),
    radial-gradient(circle at 62% 58%, rgba(214,150,40,.28) 0 9%, transparent 10%),
    radial-gradient(circle at 44% 70%, rgba(214,150,40,.22) 0 6%, transparent 7%),
    radial-gradient(circle at 70% 30%, rgba(214,150,40,.2) 0 5%, transparent 6%),
    radial-gradient(circle at 38% 38%, #fff6cf, #ffd772 55%, #f2a922 100%);
  box-shadow: 0 0 60px 10px rgba(255, 201, 74, .45), 0 0 180px 40px rgba(255, 170, 50, .18);
}

/* Starry sky */
.sky {
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 62%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 40%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 76%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 82%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 54% 88%, #fff 50%, transparent 51%),
    radial-gradient(ellipse at 70% 10%, #2a3a8c 0%, transparent 60%),
    radial-gradient(ellipse at 10% 100%, #3a1450 0%, transparent 55%),
    linear-gradient(180deg, #0b1233 0%, #121d52 60%, #1d1450 100%);
}

/* Hanging lanterns */
.hang { position: absolute; top: 0; transform-origin: top center; pointer-events: none; }
.hang::before {
  content: ""; display: block; width: 2px; margin: 0 auto; height: var(--string, 60px);
  background: linear-gradient(#ffd77a00, #ffd77a);
}
.hang svg { display: block; filter: drop-shadow(0 0 18px rgba(255, 90, 60, .55)); }
.hang.gold svg { filter: drop-shadow(0 0 18px rgba(255, 201, 74, .6)); }
@media (prefers-reduced-motion: no-preference) {
  .hang { animation: swing var(--dur, 5s) ease-in-out infinite alternate; }
}
@keyframes swing { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }