:root { color-scheme: light; font-family: "M PLUS Rounded 1c", system-ui, sans-serif; color: #24382c; background: #fff; }
* { box-sizing: border-box; }
body { margin: 0; padding: 64px 24px; }
main { max-width: 560px; margin: auto; }
.eyebrow, h1 { text-align: center; }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: 1.125rem; font-weight: 700; }
h1 { font-family: "Barriecito", system-ui, sans-serif; font-weight: 400; font-size: clamp(2.7rem, 9vw, 4rem); line-height: 1.08; margin: 20px 0; }
h1 span { color: #c14c28; white-space: nowrap; }
.party-image { display: block; width: 100%; height: auto; margin: 24px 0; }
.details { margin: 32px 0 24px; padding: 12px 22px; border-left: 3px solid #c14c28; background: #f2f2f2; }
.details p { line-height: 1.5; margin: 10px 0; }
.details a { color: inherit; text-underline-offset: .18em; }
.details a:hover { color: #c14c28; }
.description { line-height: 1.7; }
h2 { font-size: 1.4rem; margin-top: 40px; }
ul { list-style: none; padding: 0; }
li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid #deded1; }
.status { font-size: .85rem; color: #626b61; }
.status[data-status="yes"] { color: #2c6839; background: #e0efdc; border-radius: 999px; padding: 4px 12px; font-weight: 700; }
select, button { font: inherit; color: inherit; background: #fffdf8; border: 1px solid #9bA592; border-radius: 6px; padding: 9px; max-width: 65%; }
select[data-status="yes"] { color: #2c6839; background: #e0efdc; border-color: #b5d4ad; border-radius: 999px; font-weight: 700; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #c14c28; outline-offset: 3px; }
#message { font-size: .85rem; line-height: 1.5; color: #626b61; }
@media (max-width: 400px) { body { padding: 32px 20px; } }

.lasers { position: absolute; inset: 0 0 auto; width: 100%; height: 64px; overflow: hidden; pointer-events: none; }
.laser { --from-x: -120px; --to-x: 1020px; --from-y: 20px; --to-y: 140px; --angle: 6deg; fill: none; stroke: #c14c28; stroke-width: 2; stroke-linecap: round; animation: laser-shot 10s linear infinite both; }
.laser path { vector-effect: non-scaling-stroke; }
.laser-green { --from-x: 1020px; --to-x: -120px; --from-y: 30px; --to-y: 130px; --angle: -5deg; stroke: #3b906b; animation-delay: 2.4s; }
.laser-gold { --from-y: 125px; --to-y: 45px; --angle: -4deg; stroke: #c99428; animation-delay: 5.1s; }
.laser-blue { --from-x: 1020px; --to-x: -120px; --from-y: 110px; --to-y: 50px; --angle: 3deg; stroke: #678cbd; animation-delay: 7.6s; }
.laser-glow { stroke-width: 9; opacity: .16; }
@keyframes laser-shot {
  0% { transform: translate(var(--from-x), var(--from-y)) rotate(var(--angle)); }
  9%, 100% { transform: translate(var(--to-x), var(--to-y)) rotate(var(--angle)); }
}
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 10; }
.confetti-piece { animation: confetti-fall var(--duration) var(--delay) linear both; }
.confetti-piece rect { transform-box: fill-box; transform-origin: center; animation: confetti-spin 1s linear infinite; }
@keyframes confetti-fall {
  from { transform: translate(0, -24px); opacity: 1; }
  80% { opacity: 1; }
  to { transform: translate(var(--drift), calc(100vh + 30px)); opacity: 0; }
}
@keyframes confetti-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .lasers, #confetti { display: none; }
  .laser, .confetti-piece, .confetti-piece rect { animation: none; }
}