/*
 * Template "Neon Night" (Ulang Tahun): a glow party at night. Neon tube lettering (Monoton) that flickers on,
 * glowing outlines in two tube colors, an 80s grid floor running to a striped horizon sun, slow laser beams.
 * Mobile-first, one centered column (~460px); on wide screens it stands on a stage with the sun and the floor.
 *
 * Colors come from the chosen color variant (template.json → <x-inv.head>):
 *   --inv-primary (first tube color), --inv-accent (second tube color), --inv-background (the night), --inv-text
 * Everything else is mixed from those, so a new variant only needs four colors.
 *
 * Readability rules of this template: glow (text-shadow) only on large type and on lines; small text is plain
 * and light on the dark night (contrast well above 4.5:1). Text on a tube-colored fill uses the night color.
 *
 * Motion only runs with html.inv-anim (set by <x-inv.head> unless the guest prefers reduced motion); without it
 * every sign is simply lit and every drawing is finished.
 *
 * Contents: 1 base · 2 cover · 3 shared pieces (sign, heading, tube, arch, age, chips) · 4 sections in page order
 *           · 5 forms (RSVP, wishes) · 6 shared components · 7 screen sizes · 8 motion
 */

/* ---------- 1. base ---------- */
:root {
    --neon-night-display: 'Monoton', 'Manrope', system-ui, sans-serif;
    --neon-night-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    /* the night and its panels */
    --neon-night-deep: color-mix(in srgb, var(--inv-background) 72%, #000);
    --neon-night-panel: color-mix(in srgb, var(--inv-text) 6%, var(--inv-background));
    --neon-night-panel-2: color-mix(in srgb, var(--inv-text) 10%, var(--inv-background));
    --neon-night-line: color-mix(in srgb, var(--inv-text) 16%, transparent);
    --neon-night-muted: color-mix(in srgb, var(--inv-text) 80%, var(--inv-background));
    /* the bright core of each tube (lettering and lines) and readable small text in the tube colors */
    --neon-night-core: color-mix(in srgb, var(--inv-primary) 45%, #fff);
    --neon-night-core-alt: color-mix(in srgb, var(--inv-accent) 45%, #fff);
    --neon-night-primary-text: color-mix(in srgb, var(--inv-primary) 62%, #fff);
    --neon-night-accent-text: color-mix(in srgb, var(--inv-accent) 62%, #fff);
    --neon-night-glow: 0 0 2px rgb(255 255 255 / .45), 0 0 8px var(--inv-primary), 0 0 20px var(--inv-primary), 0 0 42px color-mix(in srgb, var(--inv-primary) 65%, transparent);
    --neon-night-glow-alt: 0 0 2px rgb(255 255 255 / .45), 0 0 8px var(--inv-accent), 0 0 20px var(--inv-accent), 0 0 42px color-mix(in srgb, var(--inv-accent) 65%, transparent);
    /* colors of the shared components */
    --inv-nav-bg: color-mix(in srgb, var(--neon-night-deep) 84%, transparent);
    --inv-nav-text: color-mix(in srgb, var(--inv-text) 78%, transparent);
    --inv-nav-active: var(--inv-primary);
    --inv-radius: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--inv-background);
    color: var(--inv-text);
    font-family: var(--neon-night-sans);
    font-size: 15.5px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { color: var(--neon-night-accent-text); }

.neon-night-preview {
    position: sticky; top: 0; z-index: 60; padding: .5rem 1rem; text-align: center;
    background: #fff4d6; color: #5c4300; font-size: .8125rem;
}

/* the one column of the page: the night with a light scatter of stars */
.neon-night-main {
    position: relative; max-width: 460px; margin: 0 auto; padding: 0 1.25rem; overflow-x: clip;
    background:
        radial-gradient(circle, rgb(255 255 255 / .38) 0 1px, transparent 1.6px) 14px 30px / 118px 140px,
        radial-gradient(circle, color-mix(in srgb, var(--inv-accent) 55%, transparent) 0 1px, transparent 1.7px) 70px 90px / 166px 196px,
        radial-gradient(circle, color-mix(in srgb, var(--inv-primary) 55%, transparent) 0 1px, transparent 1.7px) 40px 10px / 210px 230px,
        var(--inv-background);
}
.neon-night-branding { max-width: 460px; margin: 0 auto; background: var(--inv-background); color: var(--neon-night-muted); }
/* the page end: the last line sits ~125px above the end, clear of the bottom menu, the music button and
   the "Gulir" pill. The music player adds its own 72px spacer (.inv-music__space) when music or auto scroll is on. */
body.neon-night-body .neon-night-branding.inv-branding { opacity: 1; }
body.neon-night-body:not(:has(.inv-music__space)) .neon-night-branding.inv-branding { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
body.neon-night-body:not(:has(.inv-music__space)) .neon-night-main { padding-bottom: 5rem; }

/* every section: the same rhythm, content centered; a faint laser hairline between sections */
.neon-night-section { padding: 3.4rem 0; text-align: center; }
.neon-night-section + .neon-night-section {
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--inv-primary) 45%, transparent), transparent) 50% 0 / 72% 1px no-repeat;
}
.neon-night-section > p { margin: 0 auto 1rem; max-width: 34ch; }

.neon-night-amp { color: var(--neon-night-accent-text); font-weight: 800; }

/* three glowing dots, used as a divider */
.neon-night-dots { display: flex; justify-content: center; gap: .7rem; margin-top: 1.6rem; }
.neon-night-dots i { width: .42rem; height: .42rem; border-radius: 50%; background: var(--neon-night-core); box-shadow: 0 0 6px var(--inv-primary), 0 0 14px var(--inv-primary); }
.neon-night-dots i:nth-child(2) { background: var(--neon-night-core-alt); box-shadow: 0 0 6px var(--inv-accent), 0 0 14px var(--inv-accent); }

/* ---------- 2. cover ---------- */
.neon-night-cover {
    --neon-night-art-h: min(33svh, 84vw);
    position: fixed; inset: 0; z-index: 30; overflow-x: hidden; overflow-y: auto;
    display: flex; flex-direction: column; align-items: center; justify-content: safe center;
    min-height: 100svh; padding: 1.7rem 1.25rem 2.4rem;
    isolation: isolate; text-align: center; color: var(--inv-text);
    background:
        radial-gradient(130% 42% at 50% 100%, color-mix(in srgb, var(--inv-primary) 32%, transparent), transparent 70%),
        linear-gradient(to bottom, var(--neon-night-deep), var(--inv-background) 55%, color-mix(in srgb, var(--inv-primary) 10%, var(--inv-background)));
}
/* stars, thicker at the top */
.neon-night-cover__sky {
    position: absolute; inset: 0; z-index: -3; pointer-events: none;
    background:
        radial-gradient(circle, rgb(255 255 255 / .85) 0 1px, transparent 1.7px) 10px 16px / 96px 104px,
        radial-gradient(circle, color-mix(in srgb, var(--inv-accent) 80%, #fff) 0 1.1px, transparent 1.9px) 52px 60px / 140px 150px,
        radial-gradient(circle, color-mix(in srgb, var(--inv-primary) 70%, #fff) 0 1px, transparent 1.8px) 30px 96px / 180px 170px;
    -webkit-mask: linear-gradient(to bottom, #000 20%, transparent 72%);
    mask: linear-gradient(to bottom, #000 20%, transparent 72%);
}
/* two thin laser beams from the top corners */
.neon-night-cover__laser {
    position: absolute; top: -4svh; z-index: -2; width: 2px; height: 118svh; pointer-events: none; transform-origin: 50% 0;
    background: linear-gradient(to bottom, var(--neon-night-core), color-mix(in srgb, var(--inv-primary) 60%, transparent) 40%, transparent 78%);
    opacity: .38; transition: opacity .25s ease;
}
.neon-night-cover__laser--1 { left: 4%; rotate: -27deg; }
.neon-night-cover__laser--2 {
    right: 4%; rotate: 27deg;
    background: linear-gradient(to bottom, var(--neon-night-core-alt), color-mix(in srgb, var(--inv-accent) 60%, transparent) 40%, transparent 78%);
}
/* the 80s grid floor: lines laid flat in perspective, a bright horizon on top */
.neon-night-cover__floor {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: -2; height: 27svh; overflow: hidden; pointer-events: none;
    perspective: 240px; perspective-origin: 50% 0; transform-origin: 50% 100%;
    -webkit-mask: linear-gradient(to bottom, transparent, #000 30%); mask: linear-gradient(to bottom, transparent, #000 30%);
    opacity: .7;
}
.neon-night-cover__floor span {
    position: absolute; left: -60%; right: -60%; top: 0; height: 220%; transform-origin: 50% 0; transform: rotateX(70deg);
    background:
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--inv-accent) 70%, transparent) 0 2px, transparent 2px 46px),
        repeating-linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 75%, transparent) 0 2px, transparent 2px 38px);
}
.neon-night-cover__floor::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 2px;
    background: linear-gradient(90deg, transparent, var(--neon-night-core) 30%, #fff 50%, var(--neon-night-core) 70%, transparent);
    box-shadow: 0 0 12px var(--inv-primary), 0 0 26px var(--inv-primary);
}

.neon-night-cover__inner { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 400px; transition: transform .9s cubic-bezier(.5, 0, .3, 1); }

.neon-night-cover__title {
    margin: 0; padding: .32rem 1rem; border-radius: 999px; max-width: 100%;
    font-size: .7rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; line-height: 1.4;
    color: var(--neon-night-accent-text); background: color-mix(in srgb, var(--neon-night-deep) 70%, transparent);
    box-shadow: inset 0 0 0 1.5px var(--neon-night-core-alt), 0 0 12px -2px var(--inv-accent);
}

/* the art: the striped sun behind a neon arch; the round age sign on its edge */
.neon-night-cover__art { position: relative; isolation: isolate; margin-top: 1.25rem; }
.neon-night-cover__sun {
    position: absolute; left: 50%; top: 46%; z-index: -1; width: calc(var(--neon-night-art-h) * 1.18); aspect-ratio: 1; border-radius: 50%;
    translate: -50% -50%; opacity: .62; pointer-events: none;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--inv-accent) 35%, #fff6c8), var(--inv-primary) 62%, color-mix(in srgb, var(--inv-primary) 60%, var(--inv-background)));
    -webkit-mask: linear-gradient(to bottom, #000 50%, transparent 50% 54%, #000 54% 62%, transparent 62% 67%, #000 67% 74%, transparent 74% 80%, #000 80% 86%, transparent 86% 93%, #000 93%);
    mask: linear-gradient(to bottom, #000 50%, transparent 50% 54%, #000 54% 62%, transparent 62% 67%, #000 67% 74%, transparent 74% 80%, #000 80% 86%, transparent 86% 93%, #000 93%);
}

.neon-night-cover__name { margin: 1.05rem 0 0; }
.neon-night-cover__date {
    display: inline-flex; align-items: center; gap: .45rem; margin: .6rem 0 0;
    font-size: .88rem; font-weight: 700; letter-spacing: .03em; color: var(--neon-night-accent-text);
}
.neon-night-cover__date .neon-night-icon { width: 1.05rem; height: 1.05rem; }
.neon-night-cover__quote { max-width: 31ch; margin: .45rem auto 0; font-size: .9rem; line-height: 1.5; color: var(--neon-night-muted); }
.neon-night-cover__guest {
    position: relative; width: min(100%, 18rem); margin: 1.05rem 0 0; padding: .55rem 1rem .6rem; border-radius: 14px;
    background: color-mix(in srgb, var(--neon-night-deep) 82%, transparent);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-accent) 70%, transparent), 0 0 16px -6px var(--inv-accent);
}
.neon-night-cover__guest p { margin: 0; font-size: .66rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--neon-night-accent-text); }
.neon-night-cover__guest-name { display: block; font-size: 1.12rem; font-weight: 800; line-height: 1.3; color: var(--inv-text); overflow-wrap: anywhere; }
/* the open button: a lit tube (the glow sits on ::before, the shared pulse keeps the box-shadow) */
.neon-night-cover .neon-night-cover__open.inv-button {
    position: relative; margin-top: 1.15rem; min-height: 3rem; padding: .7rem 1.6rem;
    font-size: .95rem; font-weight: 800; letter-spacing: .03em;
    color: var(--neon-night-core-alt); background: color-mix(in srgb, var(--neon-night-deep) 85%, transparent); box-shadow: none;
}
.neon-night-cover__open::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    box-shadow: inset 0 0 0 2px var(--neon-night-core-alt), 0 0 14px var(--inv-accent), inset 0 0 12px color-mix(in srgb, var(--inv-accent) 45%, transparent);
}
.neon-night-cover__open .neon-night-icon { width: 1.15rem; height: 1.15rem; }

/* opening: the name surges, the floor rushes forward, the beams go out, the cover fades (never blocks: ~.95s) */
.neon-night-cover--leave { transition: opacity .6s ease .35s; }
.neon-night-cover--leave .neon-night-cover__floor { transition: transform .95s cubic-bezier(.5, 0, .75, 0), opacity .95s ease; }
.neon-night-cover--leave .neon-night-cover__name { transition: filter .35s ease, transform .9s cubic-bezier(.5, 0, .3, 1); }
.neon-night-cover--gone { opacity: 0; }
.neon-night-cover--gone .neon-night-cover__floor { transform: scale(1.6, 2.2); opacity: 1; }
.neon-night-cover--gone .neon-night-cover__laser { opacity: 0; }
.neon-night-cover--gone .neon-night-cover__name { filter: brightness(1.7); transform: scale(1.08); }
.neon-night-cover--gone .neon-night-cover__inner { transform: translateY(-1.2rem); }

/* ---------- 3. shared pieces ---------- */

/* a neon sign in tube lettering (names, short titles): the lit glass core with a glow around it */
.neon-night-sign {
    --neon-night-sign-size: 3rem;
    margin: 0; max-width: 100%;
    font-family: var(--neon-night-display); font-weight: 400; font-size: var(--neon-night-sign-size); line-height: 1.12;
    letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere;
    color: var(--neon-night-core); text-shadow: var(--neon-night-glow);
}
.neon-night-sign--md { --neon-night-sign-size: 2.45rem; }
.neon-night-sign--sm { --neon-night-sign-size: 2rem; }
.neon-night-sign--xs { --neon-night-sign-size: 1.55rem; }

/* section heading: a tube sign, the eyebrow, the glowing title, a laser line */
.neon-night-heading { --neon-night-c: var(--inv-primary); --neon-night-c-core: var(--neon-night-core); margin: 0 0 1.9rem; }
.neon-night-heading--alt { --neon-night-c: var(--inv-accent); --neon-night-c-core: var(--neon-night-core-alt); }
.neon-night-heading__tube { display: block; width: 2.6rem; height: 2.6rem; margin: 0 auto .75rem; }
.neon-night-heading__eyebrow { margin: 0 0 .35rem; font-size: .7rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--neon-night-muted); }
.neon-night-heading__title {
    margin: 0; font-size: 1.85rem; font-weight: 800; line-height: 1.15; letter-spacing: -.01em;
    color: var(--neon-night-c-core);
    text-shadow: 0 0 8px color-mix(in srgb, var(--neon-night-c) 70%, transparent), 0 0 22px color-mix(in srgb, var(--neon-night-c) 45%, transparent);
}
.neon-night-heading--sign .neon-night-heading__title {
    font-family: var(--neon-night-display); font-weight: 400; font-size: 2.05rem; line-height: 1.15; letter-spacing: .02em; text-transform: uppercase;
    text-shadow: 0 0 2px rgb(255 255 255 / .45), 0 0 8px var(--neon-night-c), 0 0 20px var(--neon-night-c), 0 0 40px color-mix(in srgb, var(--neon-night-c) 60%, transparent);
}
.neon-night-laser {
    display: block; width: 7.5rem; height: 2px; margin: .85rem auto 0; border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--neon-night-c, var(--inv-primary)), #fff, var(--neon-night-c, var(--inv-primary)), transparent);
    box-shadow: 0 0 8px var(--neon-night-c, var(--inv-primary));
    transition: transform 1s cubic-bezier(.65, 0, .35, 1) .3s;
}

/* a small tube sign (line drawing): glass core + glow */
.neon-night-tube {
    --neon-night-c: var(--inv-primary);
    overflow: visible; fill: none; stroke: color-mix(in srgb, var(--neon-night-c) 45%, #fff); stroke-width: 2.4;
    stroke-linecap: round; stroke-linejoin: round;
    filter: drop-shadow(0 0 2px var(--neon-night-c)) drop-shadow(0 0 7px var(--neon-night-c));
}
.neon-night-tube--alt, .neon-night-heading--alt .neon-night-tube { --neon-night-c: var(--inv-accent); }

/* icons */
.neon-night-icon { width: 1.15rem; height: 1.15rem; flex: none; }

/* the neon arch (cover + closing): two glass tubes around the photo, or a lit sign without one */
.neon-night-arch {
    position: relative; width: calc(var(--neon-night-art-h) * .76); height: var(--neon-night-art-h); padding: 7px;
    border-radius: 999px 999px 18px 18px; background: var(--neon-night-deep);
    box-shadow: 0 0 0 2.5px var(--neon-night-core), 0 0 14px 1px var(--inv-primary), 0 0 36px color-mix(in srgb, var(--inv-primary) 55%, transparent);
}
.neon-night-arch::after {
    content: ''; position: absolute; inset: 3px; border-radius: inherit; pointer-events: none;
    border: 1.5px solid var(--neon-night-core-alt);
    box-shadow: 0 0 8px var(--inv-accent), inset 0 0 8px color-mix(in srgb, var(--inv-accent) 60%, transparent);
}
.neon-night-arch__photo { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 999px 999px 12px 12px; }
.neon-night-arch__empty {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; height: 100%; border-radius: 999px 999px 12px 12px; overflow: hidden;
    background:
        radial-gradient(70% 55% at 50% 45%, color-mix(in srgb, var(--inv-primary) 26%, transparent), transparent 70%),
        repeating-linear-gradient(180deg, transparent 0 13px, color-mix(in srgb, var(--inv-accent) 14%, transparent) 13px 14px),
        var(--neon-night-deep);
}
.neon-night-arch__small { font-size: .78rem; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: var(--neon-night-accent-text); }
.neon-night-arch__number {
    font-family: var(--neon-night-display); font-size: calc(var(--neon-night-art-h) * .3); line-height: 1.05;
    color: var(--neon-night-core); text-shadow: var(--neon-night-glow);
}
.neon-night-arch__number--long { font-size: calc(var(--neon-night-art-h) * .21); }

/* the age as a round neon sign */
.neon-night-age {
    --age-size: 4.6rem;
    position: relative; display: grid; place-content: center; width: var(--age-size); aspect-ratio: 1; border-radius: 50%;
    line-height: 1; text-align: center; background: var(--neon-night-deep);
    box-shadow: 0 0 0 2.5px var(--neon-night-core-alt), 0 0 14px var(--inv-accent), inset 0 0 0 5px var(--neon-night-deep), inset 0 0 0 6.5px color-mix(in srgb, var(--inv-primary) 70%, transparent);
}
.neon-night-age__small { font-size: calc(var(--age-size) * .13); font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--neon-night-accent-text); }
.neon-night-age__number {
    margin-top: .08em; font-family: var(--neon-night-display); font-size: calc(var(--age-size) * .4);
    color: var(--neon-night-core); text-shadow: 0 0 6px var(--inv-primary), 0 0 16px var(--inv-primary);
}
.neon-night-age__number--long { font-size: calc(var(--age-size) * .29); }
.neon-night-age--cover { --age-size: calc(var(--neon-night-art-h) * .34); position: absolute; right: calc(var(--neon-night-art-h) * -.16); bottom: 5%; }
.neon-night-age--portrait { --age-size: 4.5rem; position: absolute; right: -2%; bottom: 0; }

/* a small rounded link with an icon (Instagram, TikTok): ≥44px tall */
.neon-night-socials { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin: 1.2rem 0 0 !important; max-width: none !important; }
.neon-night-chip {
    display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .35rem 1.05rem;
    border-radius: 999px; font-size: .85rem; font-weight: 700; text-decoration: none; color: var(--neon-night-primary-text);
    background: var(--neon-night-panel); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-primary) 65%, transparent), 0 0 12px -5px var(--inv-primary);
}
.neon-night-chip--alt { color: var(--neon-night-accent-text); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-accent) 65%, transparent), 0 0 12px -5px var(--inv-accent); }
.neon-night-chip .neon-night-icon { width: 1.05rem; height: 1.05rem; }
.neon-night-chip:focus-visible { outline: 2px solid var(--neon-night-core-alt); outline-offset: 3px; }

/* ---------- 4. sections ---------- */

/* opening: a crescent tube, the greeting lit, the sentence plain */
.neon-night-opening { padding-top: 3.9rem; }
.neon-night-opening__moon { display: block; width: 3rem; height: 3rem; margin: 0 auto 1rem; }
.neon-night-opening__greeting {
    margin: 0 auto .8rem !important; font-size: 1.65rem; font-weight: 800; line-height: 1.2;
    color: var(--neon-night-core-alt); text-shadow: 0 0 8px color-mix(in srgb, var(--inv-accent) 70%, transparent), 0 0 22px color-mix(in srgb, var(--inv-accent) 45%, transparent);
}
.neon-night-opening__message { color: var(--neon-night-muted); }

/* celebrant: a round portrait in two glass rings with the age sign on its edge */
.neon-night-portrait { position: relative; width: min(13.5rem, 62vw); margin: .3rem auto 1.7rem; }
.neon-night-portrait__ring {
    position: relative; display: block; aspect-ratio: 1; padding: 9px; border-radius: 50%; background: var(--neon-night-deep);
    box-shadow: 0 0 0 2.5px var(--neon-night-core), 0 0 16px var(--inv-primary), 0 0 40px color-mix(in srgb, var(--inv-primary) 50%, transparent);
}
.neon-night-portrait__ring::after {
    content: ''; position: absolute; inset: 4px; border-radius: 50%; pointer-events: none;
    border: 1.5px solid var(--neon-night-core-alt); box-shadow: 0 0 8px var(--inv-accent), inset 0 0 8px color-mix(in srgb, var(--inv-accent) 60%, transparent);
}
.neon-night-portrait__photo { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.neon-night-portrait__initial {
    display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 50%;
    font-family: var(--neon-night-display); font-size: 5.6rem; line-height: 1; color: var(--neon-night-core); text-shadow: var(--neon-night-glow);
    background: radial-gradient(60% 60% at 50% 45%, color-mix(in srgb, var(--inv-primary) 24%, transparent), transparent 75%);
}
.neon-night-celebrant__title {
    display: inline-flex !important; align-items: center; gap: .55rem; margin: 0 auto .9rem !important; padding: .28rem .95rem .28rem .3rem; border-radius: 999px;
    font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--inv-text);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-accent) 70%, transparent), 0 0 12px -4px var(--inv-accent);
}
.neon-night-celebrant__title span { padding: .12rem .55rem; border-radius: 999px; font-size: .66rem; letter-spacing: .16em; color: var(--inv-background); background: var(--neon-night-core-alt); }
.neon-night-celebrant__nickname { --neon-night-sign-size: 2.5rem; margin: 0 auto .35rem !important; max-width: none !important; }
.neon-night-celebrant__name { margin: 0 0 .4rem; font-size: 1.2rem; font-weight: 800; line-height: 1.3; color: var(--inv-text); overflow-wrap: anywhere; }
.neon-night-celebrant__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .1rem .8rem; margin: 0 auto .25rem !important; max-width: none !important; font-size: .88rem; color: var(--neon-night-muted); }
.neon-night-celebrant__meta span + span::before { content: ''; display: inline-block; width: .38rem; height: .38rem; margin: 0 .8rem .1rem 0; border-radius: 50%; background: var(--neon-night-core-alt); box-shadow: 0 0 6px var(--inv-accent); }
.neon-night-celebrant__parents {
    margin: 1.4rem auto 0; padding: 1.1rem 1.1rem 1.15rem; border-radius: 18px; background: var(--neon-night-panel);
    box-shadow: inset 0 0 0 1px var(--neon-night-line);
}
.neon-night-celebrant__parents-label { margin: 0 0 .35rem; font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--neon-night-accent-text); }
.neon-night-celebrant__parents-names { display: flex; flex-direction: column; align-items: center; margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.4; }

/* message: a neon speech bubble (a lit outline with a tail), the sender under the tail */
.neon-night-bubble {
    position: relative; margin: 0 .2rem; padding: 1.4rem 1.3rem; border-radius: 24px 24px 24px 6px; text-align: left;
    background: var(--neon-night-panel);
    box-shadow: 0 0 0 2px var(--neon-night-core-alt), 0 0 14px var(--inv-accent), inset 0 0 18px color-mix(in srgb, var(--inv-accent) 22%, transparent);
}
.neon-night-bubble::after {
    content: ''; position: absolute; left: -2px; bottom: -14px; width: 22px; height: 14px;
    background: var(--neon-night-core-alt); clip-path: polygon(0 0, 100% 0, 0 100%);
    filter: drop-shadow(0 0 4px var(--inv-accent));
}
.neon-night-bubble p { margin: 0; font-size: 1.04rem; font-weight: 500; line-height: 1.65; color: var(--inv-text); }
.neon-night-message__from { display: flex !important; align-items: center; gap: .65rem; margin: 1.5rem 0 0 .3rem !important; max-width: none !important; }
.neon-night-message__avatar {
    display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; flex: none;
    font-size: 1.05rem; font-weight: 800; color: var(--neon-night-core); background: var(--neon-night-deep);
    box-shadow: inset 0 0 0 1.5px var(--neon-night-core), 0 0 10px -2px var(--inv-primary);
}
.neon-night-message__from cite { font-style: normal; font-weight: 800; color: var(--inv-text); }

/* events: club entry passes with marquee bulbs; the two tube colors take turns */
.neon-night-pass {
    --neon-night-c: var(--inv-primary); --neon-night-c-core: var(--neon-night-core); --neon-night-c-text: var(--neon-night-primary-text);
    position: relative; overflow: hidden; border-radius: 20px; text-align: left; background: var(--neon-night-panel);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--neon-night-c) 75%, transparent), 0 0 24px -8px var(--neon-night-c);
}
.neon-night-pass--alt { --neon-night-c: var(--inv-accent); --neon-night-c-core: var(--neon-night-core-alt); --neon-night-c-text: var(--neon-night-accent-text); }
.neon-night-pass + .neon-night-pass { margin-top: 1.6rem; }
.neon-night-pass__marquee {
    display: grid; gap: .3rem; padding: .7rem 1.1rem .75rem; text-align: center;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--neon-night-c) 16%, var(--inv-background)), var(--neon-night-panel));
    border-bottom: 1.5px dashed color-mix(in srgb, var(--neon-night-c) 45%, transparent);
}
/* a row of little light bulbs that chase along */
.neon-night-pass__bulbs {
    display: block; height: 8px; margin: 0 -.4rem;
    background: radial-gradient(circle, var(--neon-night-c-core) 0 2.3px, color-mix(in srgb, var(--neon-night-c) 40%, transparent) 2.8px, transparent 3.6px) 0 50% / 16px 8px repeat-x;
}
.neon-night-pass__kicker { margin: .25rem 0 0; font-size: .66rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--neon-night-c-text); }
.neon-night-pass__name {
    margin: 0 0 .25rem; font-size: 1.4rem; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere;
    color: var(--neon-night-c-core); text-shadow: 0 0 10px color-mix(in srgb, var(--neon-night-c) 55%, transparent);
}
.neon-night-pass__photo { position: relative; aspect-ratio: 16 / 9; }
.neon-night-pass__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.neon-night-pass__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, var(--neon-night-panel)); }
.neon-night-pass__body { padding: 1.05rem 1.15rem 1.3rem; }
.neon-night-pass__date { display: flex; align-items: center; gap: .95rem; margin-bottom: 1rem; }
.neon-night-pass__day {
    flex: none; min-width: 4.4rem; padding: .35rem .3rem .2rem; border-radius: 14px; text-align: center;
    font-family: var(--neon-night-display); font-size: 2.35rem; line-height: 1.1; color: var(--neon-night-c-core);
    text-shadow: 0 0 6px var(--neon-night-c), 0 0 16px var(--neon-night-c); background: var(--neon-night-deep);
    box-shadow: inset 0 0 0 1px var(--neon-night-line);
}
.neon-night-pass__when { display: grid; line-height: 1.3; }
.neon-night-pass__weekday { font-size: 1.05rem; font-weight: 800; color: var(--inv-text); }
.neon-night-pass__month { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--neon-night-muted); }
.neon-night-pass__rows { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; font-size: .92rem; }
.neon-night-pass__rows li { display: flex; align-items: flex-start; gap: .75rem; }
.neon-night-pass__rows .neon-night-icon {
    width: 2.2rem; height: 2.2rem; padding: .5rem; border-radius: 50%; color: var(--neon-night-c-core);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--neon-night-c) 65%, transparent), 0 0 10px -3px var(--neon-night-c);
}
.neon-night-pass__rows li > span { padding-top: .35rem; }
.neon-night-pass__venue { display: block; font-weight: 800; }
.neon-night-pass__address { display: block; font-size: .86rem; color: var(--neon-night-muted); }
.neon-night-pass .inv-maps { margin-top: 1.2rem; text-align: center; }
.neon-night-pass .inv-maps .inv-button { width: 100%; min-height: 2.9rem; }
.neon-night-pass .inv-maps__frame { height: 190px; border-radius: 14px; box-shadow: 0 0 0 1px var(--neon-night-line); }

/* countdown: an LED panel with scan lines, the numbers as lit tube digits, blinking colons */
.neon-night-countdown .inv-countdown {
    gap: 0; padding: 1.15rem .4rem 1rem; border-radius: 18px;
    background:
        repeating-linear-gradient(0deg, rgb(255 255 255 / .035) 0 1px, transparent 1px 3px),
        radial-gradient(circle, rgb(255 255 255 / .05) 0 .8px, transparent 1.2px) 0 0 / 6px 6px,
        var(--neon-night-deep);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-accent) 60%, transparent), 0 0 22px -8px var(--inv-accent), inset 0 0 28px rgb(0 0 0 / .5);
}
.neon-night-countdown .inv-countdown__item { position: relative; flex: 1 1 0; min-width: 0; padding: 0; border-radius: 0; background: none; }
.neon-night-countdown .inv-countdown__item:hover { transform: none; }
.neon-night-countdown .inv-countdown__item + .inv-countdown__item::before {
    content: ''; position: absolute; left: 0; top: .95rem; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
    background: var(--neon-night-core-alt); box-shadow: 0 13px 0 var(--neon-night-core-alt), 0 0 6px var(--inv-accent), 0 13px 6px var(--inv-accent);
}
.neon-night-countdown .inv-countdown__value {
    font-family: var(--neon-night-display); font-weight: 400; font-size: clamp(1.6rem, 8.2vw, 2.1rem); line-height: 1.2;
    font-variant-numeric: tabular-nums; color: var(--neon-night-core); text-shadow: 0 0 6px var(--inv-primary), 0 0 18px var(--inv-primary);
}
.neon-night-countdown .inv-countdown__label { margin-top: .3rem; font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--neon-night-accent-text); opacity: 1; }
.neon-night-countdown .inv-countdown__done { font-size: 1.1rem; font-weight: 800; color: var(--neon-night-core); }
.neon-night-countdown .inv-countdown__actions { flex-direction: column; align-items: center; gap: .6rem; margin-top: 1.6rem; }
.neon-night-countdown .inv-countdown__actions .inv-button { width: min(100%, 17rem); min-height: 2.8rem; padding: .6rem 1rem; font-size: .84rem; }
.neon-night-countdown .inv-cal {
    --inv-cal-bg: var(--neon-night-panel); --inv-cal-text: var(--inv-text); --inv-cal-mark: var(--neon-night-core);
    max-width: 19rem; margin: 2.75rem auto 0; border-radius: 18px;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-primary) 55%, transparent), 0 0 24px -10px var(--inv-primary);
}
.neon-night-countdown .inv-cal__month { font-family: var(--neon-night-display); font-size: 1.35rem; text-transform: uppercase; color: var(--neon-night-core); text-shadow: 0 0 8px var(--inv-primary); }
.neon-night-countdown .inv-cal__dow { opacity: .8; }
.neon-night-countdown .inv-cal__day--mark { text-shadow: 0 0 6px var(--inv-primary); }

/* party "Wajib glow": the theme in a pill tube, glow sticks for the dress colors, note, hashtag sign */
.neon-night-party__label { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--neon-night-accent-text); }
.neon-night-party__theme {
    padding: 1.05rem 1.4rem 1.15rem; border-radius: 999px; background: var(--neon-night-deep);
    box-shadow: 0 0 0 2.5px var(--neon-night-core), 0 0 18px var(--inv-primary), inset 0 0 22px color-mix(in srgb, var(--inv-primary) 35%, transparent);
}
.neon-night-party__theme-name {
    margin: .15rem 0 0; font-size: 1.5rem; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere;
    color: var(--neon-night-core); text-shadow: 0 0 8px color-mix(in srgb, var(--inv-primary) 75%, transparent), 0 0 20px color-mix(in srgb, var(--inv-primary) 45%, transparent);
}
.neon-night-party__dress {
    margin-top: 1.4rem; padding: 1.2rem 1.1rem 1.1rem; border-radius: 22px; background: var(--neon-night-panel);
    box-shadow: inset 0 0 0 1px var(--neon-night-line);
}
.neon-night-party__dress-head { display: flex; align-items: center; justify-content: center; gap: .85rem; text-align: left; }
.neon-night-party__shirt {
    display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; flex: none; color: var(--inv-text);
    background: var(--neon-night-deep); box-shadow: inset 0 0 0 1.5px var(--neon-night-line);
}
.neon-night-party__shirt .neon-night-icon {
    width: 2.1rem; height: 2.1rem; stroke-width: 1.4; fill: var(--neon-night-pick, var(--inv-primary));
    filter: drop-shadow(0 0 6px var(--neon-night-pick, var(--inv-primary))); transition: fill .35s ease, filter .35s ease;
}
.neon-night-party__dress-name { margin: .1rem 0 0; font-size: 1.12rem; font-weight: 800; line-height: 1.3; }
.neon-night-sticks { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1rem; margin-top: 1.1rem; }
.neon-night-stick {
    display: grid; place-items: center; width: 2.9rem; height: 6.4rem; padding: 0; border: 0; border-radius: 12px; cursor: pointer; background: none;
}
.neon-night-stick:focus-visible { outline: 2px solid var(--neon-night-core-alt); outline-offset: 2px; }
.neon-night-stick__tube {
    position: relative; display: block; width: .95rem; height: 5.1rem; border-radius: 999px; opacity: .72;
    background: linear-gradient(90deg, color-mix(in srgb, var(--neon-night-stick) 70%, #000), var(--neon-night-stick) 35%, color-mix(in srgb, var(--neon-night-stick) 45%, #fff) 52%, var(--neon-night-stick) 70%);
    box-shadow: 0 0 0 1px rgb(255 255 255 / .18), 0 0 8px color-mix(in srgb, var(--neon-night-stick) 55%, transparent);
    transition: opacity .3s ease, box-shadow .3s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
/* the dark plastic caps of the stick */
.neon-night-stick__tube::before, .neon-night-stick__tube::after {
    content: ''; position: absolute; left: 50%; width: 1.15rem; height: .5rem; margin-left: -.575rem; border-radius: 4px; background: #2b2738;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12);
}
.neon-night-stick__tube::before { top: -.3rem; }
.neon-night-stick__tube::after { bottom: -.3rem; }
.neon-night-stick[aria-pressed=true] .neon-night-stick__tube {
    opacity: 1; transform: rotate(-9deg) scale(1.06);
    box-shadow: 0 0 0 1px rgb(255 255 255 / .35), 0 0 8px var(--neon-night-stick), 0 0 22px var(--neon-night-stick), 0 0 44px color-mix(in srgb, var(--neon-night-stick) 60%, transparent);
}
.neon-night-party__hint { margin: .7rem auto 0 !important; font-size: .8rem; color: var(--neon-night-muted); }
.neon-night-party__note {
    display: flex !important; align-items: flex-start; gap: .7rem; max-width: none !important; margin: 1rem 0 0 !important;
    padding: .95rem 1.05rem; border-radius: 16px; text-align: left; font-size: .92rem; background: var(--neon-night-panel);
    box-shadow: inset 3px 0 0 var(--neon-night-core-alt), inset 0 0 0 1px var(--neon-night-line);
}
.neon-night-party__note .neon-night-icon { margin-top: .15rem; color: var(--neon-night-accent-text); }
.neon-night-party__hashtag {
    display: inline-flex; align-items: center; gap: .65rem; max-width: 100%; margin-top: 1.5rem; padding: .35rem .4rem .35rem 1.15rem;
    border-radius: 999px; background: var(--neon-night-deep);
    box-shadow: 0 0 0 2px var(--neon-night-core-alt), 0 0 14px var(--inv-accent);
}
.neon-night-party__hashtag-text {
    font-size: 1.15rem; font-weight: 800; overflow-wrap: anywhere; text-align: left;
    color: var(--neon-night-core-alt); text-shadow: 0 0 10px color-mix(in srgb, var(--inv-accent) 60%, transparent);
}
.neon-night-party__copy {
    min-height: 2.75rem; padding: .3rem 1rem; border: 0; border-radius: 999px; cursor: pointer; flex: none;
    font: 800 .78rem/1 var(--neon-night-sans); color: var(--inv-background); background: var(--neon-night-core-alt);
}
.neon-night-party__copy:focus-visible { outline: 2px solid var(--inv-text); outline-offset: 2px; }

/* rundown: a setlist on a laser line (time | laser + node | text) */
.neon-night-rundown__list { position: relative; margin: 0; padding: 0; list-style: none; text-align: left; }
.neon-night-rundown__list::before {
    content: ''; position: absolute; left: 4.95rem; top: .55rem; bottom: .55rem; width: 2px; border-radius: 2px; transform-origin: top;
    background: linear-gradient(to bottom, var(--neon-night-core-alt), var(--neon-night-core));
    box-shadow: 0 0 8px var(--inv-accent), 0 0 16px color-mix(in srgb, var(--inv-primary) 60%, transparent);
}
.neon-night-rundown__item { position: relative; display: grid; grid-template-columns: 4.1rem minmax(0, 1fr); column-gap: 1.75rem; padding: 0 0 1.4rem; }
.neon-night-rundown__item:last-child { padding-bottom: 0; }
.neon-night-rundown__item::before {
    content: ''; position: absolute; left: calc(4.95rem - 5px); top: .45rem; width: 12px; height: 12px; border-radius: 50%;
    background: var(--neon-night-core); box-shadow: 0 0 0 3px var(--inv-background), 0 0 10px 1px var(--inv-primary);
}
.neon-night-rundown__item:nth-child(even)::before { background: var(--neon-night-core-alt); box-shadow: 0 0 0 3px var(--inv-background), 0 0 10px 1px var(--inv-accent); }
.neon-night-rundown__time {
    justify-self: start; align-self: start; padding: .2rem .55rem; border-radius: 8px; font-size: .84rem; font-weight: 800;
    font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--neon-night-accent-text); background: var(--neon-night-deep);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 45%, transparent);
}
.neon-night-rundown__body h3 { margin: 0; font-size: 1.02rem; font-weight: 800; line-height: 1.4; }
.neon-night-rundown__body p { margin: .15rem 0 0; font-size: .86rem; color: var(--neon-night-muted); }

/* story: levels climbing up; a lit tube edge on one side, left and right in turn */
.neon-night-story__list { margin: 0; padding: 0; list-style: none; }
.neon-night-story__item { --neon-night-c: var(--inv-primary); --neon-night-c-core: var(--neon-night-core); position: relative; margin-right: 1.1rem; }
.neon-night-story__item:nth-child(even) { --neon-night-c: var(--inv-accent); --neon-night-c-core: var(--neon-night-core-alt); margin: 0 0 0 1.1rem; }
.neon-night-story__item + .neon-night-story__item { margin-top: 1.4rem; }
.neon-night-story__card {
    position: relative; padding: 1rem 1.15rem 1.2rem 1.3rem; border-radius: 18px; text-align: left; background: var(--neon-night-panel);
    box-shadow: inset 0 0 0 1px var(--neon-night-line);
}
.neon-night-story__card::before {
    content: ''; position: absolute; left: -1px; top: 1rem; bottom: 1rem; width: 3px; border-radius: 3px;
    background: var(--neon-night-c-core); box-shadow: 0 0 8px var(--neon-night-c), 0 0 18px var(--neon-night-c); transform-origin: top;
}
.neon-night-story__item:nth-child(even) .neon-night-story__card::before { left: auto; right: -1px; }
.neon-night-story__top { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.neon-night-story__level { margin: 0; font-size: .66rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--neon-night-muted); }
.neon-night-story__year {
    margin: 0; font-family: var(--neon-night-display); font-size: 1.45rem; line-height: 1.1; overflow-wrap: anywhere; text-align: right;
    color: var(--neon-night-c-core); text-shadow: 0 0 6px var(--neon-night-c), 0 0 16px var(--neon-night-c);
}
.neon-night-story__photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-top: .8rem; border-radius: 12px; }
.neon-night-story__card h3 { margin: .7rem 0 0; font-size: 1.15rem; font-weight: 800; line-height: 1.3; }
.neon-night-story__text { margin: .3rem 0 0; font-size: .9rem; color: var(--neon-night-muted); }

/* gallery: photos framed like lit screens, the two colors in turn */
.neon-night-gallery .inv-gallery { gap: .7rem; }
.neon-night-gallery .inv-gallery__item { border-radius: 14px; box-shadow: 0 0 0 1.5px var(--neon-night-core), 0 0 14px -3px var(--inv-primary); }
.neon-night-gallery .inv-gallery__item:nth-child(even) { box-shadow: 0 0 0 1.5px var(--neon-night-core-alt), 0 0 14px -3px var(--inv-accent); }
.neon-night-gallery .inv-gallery__item:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; border-radius: 20px; }
.neon-night-gallery .inv-gallery__item:focus-visible { outline: 2px solid var(--inv-text); outline-offset: 3px; }

/* live streaming: an "On air" studio sign */
.neon-night-stream__card {
    padding: 1.6rem 1.3rem 1.5rem; border-radius: 22px; background: var(--neon-night-panel);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-primary) 60%, transparent), 0 0 24px -10px var(--inv-primary);
}
.neon-night-stream__onair {
    display: inline-flex; align-items: center; gap: .55rem; margin: 0; padding: .35rem .95rem; border-radius: 8px;
    font-size: .78rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: #ffd9de;
    box-shadow: inset 0 0 0 1.5px #ff6b7d, 0 0 14px -2px #ff4d64;
}
.neon-night-stream__onair i { width: .6rem; height: .6rem; border-radius: 50%; background: #ff5c70; box-shadow: 0 0 6px #ff5c70, 0 0 14px #ff5c70; }
.neon-night-stream__title {
    margin: .9rem 0 .35rem; font-size: 1.65rem; font-weight: 800; line-height: 1.15;
    color: var(--neon-night-core); text-shadow: 0 0 8px color-mix(in srgb, var(--inv-primary) 70%, transparent), 0 0 20px color-mix(in srgb, var(--inv-primary) 40%, transparent);
}
.neon-night-stream__card p { margin: 0 auto .4rem; max-width: 30ch; font-size: .92rem; }
.neon-night-stream__note { color: var(--neon-night-muted); font-size: .86rem !important; }
.neon-night-stream__button { margin-top: .8rem; min-height: 2.9rem; }

/* RSVP: the guest-list door; the wristband after sending */
.neon-night-door {
    position: relative; overflow: hidden; border-radius: 22px; background: var(--neon-night-panel);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-accent) 65%, transparent), 0 0 26px -10px var(--inv-accent);
}
.neon-night-door__head {
    position: relative; display: flex; justify-content: center; padding: .85rem 1rem .8rem;
    background: repeating-linear-gradient(135deg, var(--neon-night-deep) 0 10px, color-mix(in srgb, var(--inv-accent) 9%, var(--neon-night-deep)) 10px 20px);
    border-bottom: 1px solid color-mix(in srgb, var(--inv-accent) 40%, transparent);
}
.neon-night-door__tag { font-size: .78rem; font-weight: 800; letter-spacing: .32em; text-transform: uppercase; color: var(--neon-night-accent-text); }
/* the scanner light that runs along the bottom edge of the header */
.neon-night-door__scan {
    position: absolute; left: 0; bottom: -1px; width: 30%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--neon-night-core-alt), transparent); box-shadow: 0 0 10px var(--inv-accent);
}
.neon-night-door__intro { margin: 1.15rem auto 0; padding: 0 1.2rem; max-width: 32ch; font-size: .9rem; color: var(--neon-night-muted); }
.neon-night-door .inv-rsvp { padding: 1.1rem 1.15rem 1.35rem; }
.neon-night-door .inv-rsvp__deadline { margin: 0 0 1rem; font-size: .84rem; font-weight: 700; text-align: center; color: var(--neon-night-accent-text); }
.neon-night-door__sent { position: relative; padding: 1.5rem 1.1rem .2rem; }
.neon-night-door__beam {
    position: absolute; left: -30%; z-index: 2; width: 160%; height: 2px; opacity: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--neon-night-core) 40%, #fff 50%, var(--neon-night-core) 60%, transparent);
    box-shadow: 0 0 10px var(--inv-primary);
}
.neon-night-door__beam--1 { top: 32%; rotate: -10deg; }
.neon-night-door__beam--2 { top: 52%; rotate: 8deg; background: linear-gradient(90deg, transparent, var(--neon-night-core-alt) 40%, #fff 50%, var(--neon-night-core-alt) 60%, transparent); box-shadow: 0 0 10px var(--inv-accent); }
/* the wristband: a woven strap with a lit tag and a clasp */
.neon-night-band { position: relative; display: flex; align-items: center; justify-content: center; width: min(100%, 17.5rem); height: 3.6rem; margin: 0 auto 1.1rem; }
.neon-night-band__strap {
    position: absolute; left: 0; right: 0; top: 50%; height: 1.5rem; margin-top: -.75rem; border-radius: 999px; transform-origin: left center;
    background: repeating-linear-gradient(90deg, var(--inv-primary) 0 9px, color-mix(in srgb, var(--inv-primary) 72%, #000) 9px 11px);
    box-shadow: 0 0 16px color-mix(in srgb, var(--inv-primary) 70%, transparent), inset 0 2px 0 rgb(255 255 255 / .25);
}
.neon-night-band__face {
    position: relative; z-index: 1; display: grid; gap: .1rem; padding: .35rem 1rem .4rem; border-radius: 12px; background: var(--neon-night-deep);
    box-shadow: inset 0 0 0 2px var(--neon-night-core), 0 0 14px var(--inv-primary);
}
.neon-night-band__vip { font-family: var(--neon-night-display); font-size: 1.15rem; line-height: 1.1; letter-spacing: .06em; text-transform: uppercase; color: var(--neon-night-core); text-shadow: 0 0 6px var(--inv-primary), 0 0 14px var(--inv-primary); }
.neon-night-band__name { max-width: 9rem; font-size: .64rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--inv-text); overflow-wrap: anywhere; }
.neon-night-band__clasp {
    position: absolute; right: 9%; top: 50%; z-index: 1; width: 1rem; height: 1rem; margin-top: -.5rem; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff, #c9c4d6 60%, #8d879c); box-shadow: 0 0 0 2px var(--neon-night-deep), 0 0 8px rgb(255 255 255 / .6);
}
/* "maybe": an outlined band for the waiting list, in the second color */
.neon-night-door--maybe .neon-night-band__strap { background: transparent; box-shadow: inset 0 0 0 2px var(--neon-night-core-alt), 0 0 12px color-mix(in srgb, var(--inv-accent) 60%, transparent); }
.neon-night-door--maybe .neon-night-band__face { box-shadow: inset 0 0 0 2px var(--neon-night-core-alt), 0 0 14px var(--inv-accent); }
.neon-night-door--maybe .neon-night-band__vip { font-size: .9rem; color: var(--neon-night-core-alt); text-shadow: 0 0 6px var(--inv-accent), 0 0 14px var(--inv-accent); }
.neon-night-door__heart { display: flex; justify-content: center; margin-bottom: .8rem; }
.neon-night-door__heart-tube { width: 3.6rem; height: 3.6rem; }
.neon-night-door__thanks {
    margin: 0; font-size: 1.35rem; font-weight: 800; line-height: 1.25;
    color: var(--neon-night-core); text-shadow: 0 0 8px color-mix(in srgb, var(--inv-primary) 70%, transparent), 0 0 20px color-mix(in srgb, var(--inv-primary) 40%, transparent);
}
.neon-night-door__line { margin: .3rem auto 0; max-width: 30ch; font-size: .9rem; color: var(--neon-night-muted); }

/* gift: dark cards with a lit edge and a chip light, two per row; the address card full width below */
.neon-night-gift__intro { color: var(--neon-night-muted); }
.neon-night-gift .inv-gift__accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1.4rem; }
.neon-night-gift .inv-gift__account:last-child:nth-child(odd) { grid-column: 1 / -1; }
.neon-night-gift .inv-gift__account {
    --neon-night-c: var(--inv-primary); --neon-night-c-core: var(--neon-night-core);
    position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; min-width: 0; margin: 0;
    padding: 1.45rem .75rem 1rem; border-radius: 16px; background: var(--neon-night-panel);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--neon-night-c) 60%, transparent), 0 0 20px -10px var(--neon-night-c);
}
.neon-night-gift .inv-gift__account:nth-child(even) { --neon-night-c: var(--inv-accent); --neon-night-c-core: var(--neon-night-core-alt); }
/* the chip light in the top corner */
.neon-night-gift .inv-gift__account::before {
    content: ''; position: absolute; left: .8rem; top: .7rem; width: .45rem; height: .45rem; border-radius: 50%;
    background: var(--neon-night-c-core); box-shadow: 0 0 6px var(--neon-night-c), 0 0 12px var(--neon-night-c);
}
.neon-night-gift .inv-gift__account p { margin: 0; }
.neon-night-gift .inv-gift__bank { font-weight: 800; font-size: .88rem; color: var(--inv-text); }
.neon-night-gift .inv-gift__logo { display: inline-flex; align-items: center; height: 1.7rem; padding: .2rem .5rem; border-radius: .4rem; background: #fff; }
.neon-night-gift .inv-gift__logo img { max-width: 5rem; max-height: 100%; }
.neon-night-gift .inv-gift__number {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: .98rem; font-weight: 700;
    letter-spacing: .04em; line-height: 1.3; overflow-wrap: anywhere; color: var(--inv-text);
}
.neon-night-gift .inv-gift__holder { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--neon-night-muted); overflow-wrap: anywhere; }
.neon-night-gift .inv-gift__account .inv-button { margin-top: .4rem; min-height: 2.75rem; padding: .35rem .95rem; font-size: .76rem; }
.neon-night-gift .inv-gift__address { margin-top: .75rem; font-size: .9rem; }
.neon-night-gift .inv-gift__address::before { display: none; }
.neon-night-gift .inv-gift__address .inv-gift__holder { font-size: .76rem; font-weight: 700; }

/* wishlist: prize boxes drawn in tube lines that open (the body unfolds with a grid-rows transition) */
.neon-night-wishlist__intro { font-size: .88rem; color: var(--neon-night-muted); }
.neon-night-wishlist__list { display: grid; gap: .75rem; margin: 1.2rem 0 0; padding: 0; list-style: none; text-align: left; }
.neon-night-wishlist__item { border-radius: 18px; background: var(--neon-night-panel); box-shadow: inset 0 0 0 1px var(--neon-night-line); transition: box-shadow .3s ease; }
.neon-night-wishlist__item.is-open { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-accent) 65%, transparent), 0 0 22px -10px var(--inv-accent); }
.neon-night-wishlist__head {
    display: flex; align-items: center; gap: .85rem; width: 100%; min-height: 4.4rem; padding: .7rem 1rem .7rem .85rem;
    border: 0; border-radius: inherit; cursor: pointer; text-align: left; font: inherit; color: inherit; background: none;
}
.neon-night-wishlist__head:focus-visible { outline: 2px solid var(--neon-night-core-alt); outline-offset: 2px; }
.neon-night-wishlist__box { width: 3rem; height: 3rem; flex: none; overflow: visible; filter: drop-shadow(0 0 4px var(--inv-primary)); }
.neon-night-wishlist__box-base, .neon-night-wishlist__box-lid { fill: none; stroke: var(--neon-night-core); stroke-width: 2; }
.neon-night-wishlist__box-ribbon, .neon-night-wishlist__box-bow { fill: none; stroke: var(--neon-night-core-alt); stroke-width: 1.8; stroke-linejoin: round; }
.neon-night-wishlist__lid { transform-box: view-box; transform-origin: 6px 22px; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.neon-night-wishlist__item.is-open .neon-night-wishlist__lid { transform: translateY(-4px) rotate(-16deg); }
.neon-night-wishlist__label { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.neon-night-wishlist__number { font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--neon-night-accent-text); }
.neon-night-wishlist__name { font-size: 1.05rem; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.neon-night-wishlist__toggle {
    display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; flex: none; color: var(--neon-night-core-alt);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-accent) 55%, transparent); transition: transform .35s ease;
}
.neon-night-wishlist__item.is-open .neon-night-wishlist__toggle { transform: rotate(180deg); }
.neon-night-wishlist__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .4s cubic-bezier(.4, 0, .2, 1), visibility .4s; }
.neon-night-wishlist__item.is-closed .neon-night-wishlist__body { grid-template-rows: 0fr; visibility: hidden; }
.neon-night-wishlist__inner { min-height: 0; overflow: hidden; padding: 0 1rem; }
.neon-night-wishlist__inner > :first-child { margin-top: .1rem; }
.neon-night-wishlist__inner > :last-child { margin-bottom: 1rem; }
.neon-night-wishlist__photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: .75rem; border-radius: 12px; }
.neon-night-wishlist__note { margin: 0 0 .75rem; padding-left: .8rem; font-size: .9rem; color: var(--neon-night-muted); border-left: 2px solid var(--neon-night-core-alt); }
.neon-night-wishlist__shop { width: 100%; min-height: 2.75rem; font-size: .86rem; }
.neon-night-wishlist__shop .neon-night-icon { width: 1.05rem; height: 1.05rem; }

/* co-hosts: small tube-outlined name tags */
.neon-night-cohosts__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.neon-night-cohosts__list li {
    padding: .5rem 1.05rem; border-radius: 999px; font-size: .95rem; font-weight: 700; line-height: 1.35;
    background: var(--neon-night-panel); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-primary) 65%, transparent), 0 0 12px -5px var(--inv-primary);
}
.neon-night-cohosts__list li:nth-child(even) { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-accent) 65%, transparent), 0 0 12px -5px var(--inv-accent); }

/* contacts: cards with the initial in a glowing ring and a WhatsApp button */
.neon-night-contacts__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.neon-night-contacts__list > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: min(100%, 15rem); }
.neon-night-contact {
    display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 1.2rem .8rem 1.1rem; border-radius: 18px;
    background: var(--neon-night-panel); box-shadow: inset 0 0 0 1px var(--neon-night-line);
}
.neon-night-contact__avatar {
    display: grid; place-items: center; width: 3.1rem; height: 3.1rem; margin-bottom: .6rem; border-radius: 50%;
    font-size: 1.3rem; font-weight: 800; color: var(--neon-night-core-alt); background: var(--neon-night-deep);
    box-shadow: inset 0 0 0 2px var(--neon-night-core-alt), 0 0 14px -2px var(--inv-accent);
}
.neon-night-contact p { margin: 0; }
.neon-night-contact__name { font-weight: 800; font-size: .96rem; overflow-wrap: anywhere; }
.neon-night-contact__role { font-size: .82rem; color: var(--neon-night-muted); }
.neon-night-contact__button { margin-top: .8rem; min-height: 2.75rem; padding: .45rem 1.05rem; font-size: .84rem; }
.neon-night-contact__button .neon-night-icon { width: 1.1rem; height: 1.1rem; }
.neon-night-contact__phone { margin-top: .5rem !important; font-size: .86rem; }

/* health protocol */
.neon-night-protocol__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.neon-night-protocol__list li {
    display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .95rem; border-radius: 999px; font-size: .86rem;
    background: var(--neon-night-panel); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-accent) 55%, transparent);
}
.neon-night-protocol__list .neon-night-icon { width: 1rem; height: 1rem; color: var(--neon-night-core-alt); }
.neon-night-protocol__note { font-size: .9rem; color: var(--neon-night-muted); }

/* vendors: the end credits (role | name), one panel */
.neon-night-vendors__list {
    margin: 0; padding: 1rem 1rem; list-style: none; border-radius: 18px; background: var(--neon-night-panel);
    box-shadow: inset 0 0 0 1px var(--neon-night-line);
}
.neon-night-vendor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 1rem; align-items: baseline; padding: .6rem 0; text-align: left; }
.neon-night-vendor + .neon-night-vendor { border-top: 1px dashed var(--neon-night-line); }
.neon-night-vendor__role { text-align: right; font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--neon-night-accent-text); overflow-wrap: anywhere; }
.neon-night-vendor__name { font-size: 1rem; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.neon-night-vendor__link {
    grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: .35rem; min-height: 2rem;
    font-size: .8rem; font-weight: 700; text-decoration: none; color: var(--neon-night-primary-text); overflow-wrap: anywhere;
}
.neon-night-vendor__link .neon-night-icon { width: .95rem; height: .95rem; }

/* closing: the arch on a strip of grid floor, the message, the name sign */
.neon-night-closing { padding-bottom: 2.1rem; }
.neon-night-closing__art { --neon-night-art-h: 12.5rem; position: relative; isolation: isolate; display: flex; justify-content: center; margin: 1.4rem auto 2.6rem; }
.neon-night-closing__sun { top: 44%; opacity: .5; }
.neon-night-closing__floor {
    position: absolute; left: -1.25rem; right: -1.25rem; bottom: -1.6rem; z-index: -1; height: 3.2rem;
    background:
        linear-gradient(90deg, transparent, var(--neon-night-core) 30%, #fff 50%, var(--neon-night-core) 70%, transparent) 0 0 / 100% 2px no-repeat,
        repeating-linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 55%, transparent) 0 1.5px, transparent 1.5px 11px),
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--inv-accent) 45%, transparent) 0 1.5px, transparent 1.5px 30px);
    -webkit-mask: linear-gradient(to bottom, #000, transparent), linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
    -webkit-mask-composite: source-in;
    mask: linear-gradient(to bottom, #000, transparent), linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
    mask-composite: intersect;
}
.neon-night-closing__message { margin: 0 auto; max-width: 32ch; color: var(--neon-night-muted); }
.neon-night-closing__signature { margin: 1.5rem auto .5rem !important; font-size: .9rem; font-weight: 700; color: var(--neon-night-muted); }
.neon-night-closing__name { --neon-night-sign-size: 2.7rem; margin: 0 auto !important; max-width: none !important; }

/* ---------- 5. forms (shared RSVP + wishes, restyled) ---------- */
.neon-night-main .inv-form { gap: 1rem; }
.neon-night-main .inv-form label, .neon-night-main .inv-form__choices legend { font-size: .84rem; font-weight: 700; color: var(--inv-text); }
.neon-night-main .inv-form input:not([type=radio]):not([type=checkbox]),
.neon-night-main .inv-form select,
.neon-night-main .inv-form textarea {
    width: 100%; min-height: 2.9rem; margin-top: .3rem; padding: .7rem .95rem; border: 0; border-radius: 12px;
    font: 500 .95rem/1.4 var(--neon-night-sans); color: var(--inv-text); background: var(--neon-night-deep);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-text) 22%, transparent);
    transition: box-shadow .2s ease;
}
.neon-night-main .inv-form select {
    appearance: none; padding-right: 2.4rem;
    background: var(--neon-night-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cfc6e6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .8rem center / 1.1rem no-repeat;
}
.neon-night-main .inv-form select option { color: var(--inv-text); background: var(--inv-background); }
.neon-night-main .inv-form input:not([type=radio]):focus-visible,
.neon-night-main .inv-form select:focus-visible,
.neon-night-main .inv-form textarea:focus-visible {
    outline: none; box-shadow: inset 0 0 0 2px var(--neon-night-core-alt), 0 0 0 4px color-mix(in srgb, var(--inv-accent) 28%, transparent), 0 0 16px -4px var(--inv-accent);
}
.neon-night-main .inv-form button[type=submit] { width: 100%; min-height: 3.1rem; font-weight: 800; letter-spacing: .02em; }
.neon-night-main .inv-form .inv-button--outline { width: 100%; min-height: 2.9rem; }
.neon-night-main .inv-form__notice { text-align: center; color: var(--inv-text); background: color-mix(in srgb, var(--inv-accent) 14%, var(--inv-background)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 40%, transparent); }

/* the three answers as lit toggles with icons (the radio dot is hidden but still focusable) */
.neon-night-rsvp .inv-form__choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.neon-night-rsvp .inv-form__choices legend { margin-bottom: .5rem; padding: 0; }
.neon-night-rsvp .inv-form__choices label {
    --neon-night-c: var(--inv-primary); --neon-night-c-core: var(--neon-night-core);
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .5rem;
    min-height: 5.6rem; padding: .85rem .3rem .75rem; border-radius: 16px; cursor: pointer; text-align: center;
    font-size: .82rem; font-weight: 800; line-height: 1.2; color: var(--inv-text); background: var(--neon-night-deep);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-text) 18%, transparent);
    transition: background-color .25s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}
.neon-night-rsvp .inv-form__choices label:nth-of-type(2) { --neon-night-c: color-mix(in srgb, var(--inv-text) 70%, var(--inv-background)); --neon-night-c-core: var(--neon-night-muted); }
.neon-night-rsvp .inv-form__choices label:nth-of-type(3) { --neon-night-c: var(--inv-accent); --neon-night-c-core: var(--neon-night-core-alt); }
.neon-night-rsvp .inv-form__choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* icon: a tube ring (::before) with a check, a cross or a question mark in it (::after, a mask) */
.neon-night-rsvp .inv-form__choices label::before {
    content: ''; width: 2.25rem; height: 2.25rem; border-radius: 50%; flex: none;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--neon-night-c) 70%, transparent);
    transition: box-shadow .25s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.neon-night-rsvp .inv-form__choices label::after {
    content: ''; position: absolute; left: 50%; top: 1.37rem; width: 1.15rem; height: 1.15rem; margin-left: -.575rem;
    background: var(--neon-night-c-core); pointer-events: none;
    -webkit-mask: var(--neon-night-choice-icon) center / contain no-repeat; mask: var(--neon-night-choice-icon) center / contain no-repeat;
}
.neon-night-rsvp .inv-form__choices label:nth-of-type(1) {
    --neon-night-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.neon-night-rsvp .inv-form__choices label:nth-of-type(2) {
    --neon-night-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
}
.neon-night-rsvp .inv-form__choices label:nth-of-type(3) {
    --neon-night-choice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M8.5 8.8a3.5 3.5 0 1 1 4.9 3.2c-.9.4-1.4 1.1-1.4 2v.5M12 19h.01'/%3E%3C/svg%3E");
}
.neon-night-rsvp .inv-form__choices label:has(input:checked) {
    transform: translateY(-3px); background: color-mix(in srgb, var(--neon-night-c) 14%, var(--inv-background));
    box-shadow: inset 0 0 0 2px var(--neon-night-c-core), 0 0 18px -3px var(--neon-night-c);
}
.neon-night-rsvp .inv-form__choices label:has(input:checked)::before { box-shadow: inset 0 0 0 2px var(--neon-night-c-core), 0 0 12px var(--neon-night-c); transform: scale(1.1); }
.neon-night-rsvp .inv-form__choices label:has(input:focus-visible) { outline: 2px solid var(--inv-text); outline-offset: 3px; }

/* wishes: the form on a panel, the wishes as lit messages in a scroll box of about three */
.neon-night-wishes .inv-wishes { --inv-wishes-height: 20rem; }
.neon-night-wishes .inv-form {
    padding: 1.3rem 1.1rem; border-radius: 22px; background: var(--neon-night-panel);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-accent) 55%, transparent), 0 0 24px -12px var(--inv-accent);
}
.neon-night-wishes .inv-wishes__list { margin-top: 1.1rem; }
.neon-night-wishes .inv-wishes:not(.inv-wishes--paged) .inv-wishes__list {
    padding: .6rem; border-radius: 18px; background: var(--neon-night-deep); box-shadow: inset 0 0 0 1px var(--neon-night-line);
    scrollbar-color: color-mix(in srgb, var(--inv-accent) 55%, transparent) transparent;
}
.neon-night-wishes .inv-wish { padding: .75rem .95rem .75rem 1.05rem; border-radius: 14px; background: var(--neon-night-panel); box-shadow: inset 3px 0 0 var(--neon-night-core); }
.neon-night-wishes .inv-wish:nth-child(even) { box-shadow: inset 3px 0 0 var(--neon-night-core-alt); }
.neon-night-wishes .inv-wish__name { font-weight: 800; color: var(--inv-text); }
.neon-night-wishes .inv-wish__message { font-size: .9rem; line-height: 1.55; }
.neon-night-wishes .inv-wish__time { font-size: .72rem; color: var(--neon-night-muted); opacity: 1; }
.neon-night-wishes .inv-wishes__empty { color: var(--neon-night-muted); opacity: 1; }
.neon-night-wishes .inv-wish__reply-label { opacity: 1; color: var(--neon-night-accent-text); }

/* ---------- 6. shared components ---------- */
/* filled buttons: the tube color with the night as text; outline buttons: a lit outline */
.neon-night-body .inv-button { font-weight: 800; color: var(--inv-background); background: var(--neon-night-core); box-shadow: 0 0 16px -4px var(--inv-primary); }
.neon-night-body .inv-button--outline { color: var(--neon-night-accent-text); background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--inv-accent) 70%, transparent); }
.neon-night-body .inv-button:focus-visible { outline: 2px solid var(--inv-text); outline-offset: 3px; }
.neon-night-body .inv-nav { font-family: var(--neon-night-sans); border-color: color-mix(in srgb, var(--inv-primary) 40%, transparent); box-shadow: 0 10px 30px -10px rgb(0 0 0 / .6), 0 0 18px -8px var(--inv-primary); }
.neon-night-body .inv-nav__item.is-active { color: var(--inv-background); }
.neon-night-body .inv-music__button { color: var(--inv-background); background: var(--neon-night-core); box-shadow: 0 0 14px -2px var(--inv-primary); }
.neon-night-body .inv-autoscroll { color: var(--neon-night-accent-text); background: color-mix(in srgb, var(--neon-night-deep) 88%, transparent); border-color: color-mix(in srgb, var(--inv-accent) 50%, transparent); }
.neon-night-body .inv-autoscroll--running { color: var(--inv-background); background: var(--neon-night-core-alt); }
.neon-night-body .inv-to-top { color: var(--inv-text); background: var(--neon-night-panel-2); }
.neon-night-body .inv-ambient { --inv-ambient-1: var(--neon-night-core-alt); --inv-ambient-2: var(--neon-night-core); }
.neon-night-body .inv-wishes__page-button { color: var(--neon-night-accent-text); border-color: color-mix(in srgb, var(--inv-accent) 50%, transparent); }

/* the stage behind the column (wide screens only) */
.neon-night-stage { display: none; }

/* ---------- 7. screen sizes ---------- */

/* short phones: the art and the type step down so everything fits without scrolling */
@media (max-height: 760px) {
    .neon-night-cover { --neon-night-art-h: min(31svh, 80vw); padding-top: 1.4rem; padding-bottom: 2.2rem; }
    .neon-night-cover__art { margin-top: 1.05rem; }
    .neon-night-cover__name { margin-top: .9rem; }
    .neon-night-cover__name.neon-night-sign { --neon-night-sign-size: 2.7rem; }
    .neon-night-cover__name.neon-night-sign--md { --neon-night-sign-size: 2.2rem; }
    .neon-night-cover__quote { font-size: .86rem; }
    .neon-night-cover__guest { margin-top: .85rem; }
    .neon-night-cover .neon-night-cover__open.inv-button { margin-top: .95rem; }
}
@media (max-height: 660px) {
    .neon-night-cover { --neon-night-art-h: min(28svh, 76vw); padding-top: 1.1rem; padding-bottom: 2.1rem; }
    .neon-night-cover__title { padding: .26rem .85rem; font-size: .64rem; }
    .neon-night-cover__art { margin-top: .9rem; }
    .neon-night-cover__name { margin-top: .75rem; }
    .neon-night-cover__name.neon-night-sign { --neon-night-sign-size: 2.35rem; }
    .neon-night-cover__name.neon-night-sign--md { --neon-night-sign-size: 2rem; }
    .neon-night-cover__name.neon-night-sign--sm { --neon-night-sign-size: 1.75rem; }
    .neon-night-cover__date { margin-top: .4rem; font-size: .82rem; }
    .neon-night-cover__quote { font-size: .82rem; line-height: 1.42; margin-top: .35rem; }
    .neon-night-cover__guest { margin-top: .75rem; padding: .42rem .9rem .48rem; }
    .neon-night-cover__guest-name { font-size: 1.02rem; }
    .neon-night-cover .neon-night-cover__open.inv-button { margin-top: .8rem; min-height: 2.85rem; padding: .6rem 1.5rem; }
}

/* wide screens: the phone-width column on a stage with the horizon sun and the grid floor */
@media (min-width: 560px) {
    body.neon-night-body { background: var(--neon-night-deep); }
    .neon-night-stage { position: fixed; inset: 0; z-index: -1; display: block; overflow: hidden; pointer-events: none; perspective: 300px; perspective-origin: 50% 62%; }
    .neon-night-stage__sun {
        position: absolute; left: 50%; top: 62%; width: min(70vh, 60vw); aspect-ratio: 1; border-radius: 50%; translate: -50% -100%; opacity: .35;
        background: linear-gradient(to bottom, color-mix(in srgb, var(--inv-accent) 35%, #fff6c8), var(--inv-primary) 70%);
        -webkit-mask: linear-gradient(to bottom, #000 55%, transparent 55% 60%, #000 60% 70%, transparent 70% 76%, #000 76% 84%, transparent 84% 91%, #000 91%);
        mask: linear-gradient(to bottom, #000 55%, transparent 55% 60%, #000 60% 70%, transparent 70% 76%, #000 76% 84%, transparent 84% 91%, #000 91%);
    }
    .neon-night-stage__floor {
        position: absolute; left: -50%; right: -50%; top: 62%; height: 120%; transform-origin: 50% 0; transform: rotateX(72deg); opacity: .5;
        background:
            repeating-linear-gradient(90deg, color-mix(in srgb, var(--inv-accent) 70%, transparent) 0 2px, transparent 2px 70px),
            repeating-linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 75%, transparent) 0 2px, transparent 2px 56px);
    }
    .neon-night-main, .neon-night-branding { box-shadow: 0 0 0 1px color-mix(in srgb, var(--inv-primary) 30%, transparent), 0 0 60px -20px var(--inv-primary); }
}

/* ---------- 8. motion ---------- */
/* a neon sign warming up: off (the dim glass), a few stutters, then fully lit */
@keyframes neon-night-sign-on {
    0%, 7%, 11%, 19%, 30% { color: color-mix(in srgb, var(--inv-primary) 28%, var(--inv-background)); text-shadow: none; }
    9%, 15%, 34%, 100% { color: var(--neon-night-core); text-shadow: var(--neon-night-glow); }
}
@keyframes neon-night-tube-on {
    0%, 8%, 13%, 24% { opacity: .2; }
    10%, 18%, 30%, 100% { opacity: 1; }
}
@keyframes neon-night-floor-run { to { background-position: 0 0, 0 38px; } }
@keyframes neon-night-sweep-1 { 0%, 100% { rotate: -27deg; } 50% { rotate: -14deg; } }
@keyframes neon-night-sweep-2 { 0%, 100% { rotate: 27deg; } 50% { rotate: 15deg; } }
@keyframes neon-night-chase { to { background-position-x: 16px; } }
@keyframes neon-night-blink { 50% { opacity: .25; } }
@keyframes neon-night-scan { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@keyframes neon-night-strap { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes neon-night-snap { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes neon-night-beam { 0% { opacity: 0; transform: translateX(-55%); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateX(55%); } }
@keyframes neon-night-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes neon-night-draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* the cover name flickers on once as the cover loads */
html.inv-anim .neon-night-cover__name { animation: neon-night-sign-on 1.5s linear .35s both; }
/* the cover's floor runs towards the guest, the beams sweep slowly */
html.inv-anim .neon-night-cover__floor span { animation: neon-night-floor-run 1.6s linear infinite; }
html.inv-anim .neon-night-cover__laser--1 { animation: neon-night-sweep-1 9s ease-in-out infinite; }
html.inv-anim .neon-night-cover__laser--2 { animation: neon-night-sweep-2 11s ease-in-out infinite; }
/* headings: the tube flickers on and the laser draws when they scroll into view */
html.inv-anim .neon-night-heading:not(.is-revealed) .neon-night-laser { transform: scaleX(0); }
html.inv-anim .neon-night-heading:not(.is-revealed) .neon-night-heading__tube { opacity: .2; }
html.inv-anim .neon-night-heading.is-revealed .neon-night-heading__tube { animation: neon-night-tube-on 1.1s linear .25s both; }
/* the closing name flickers on when it scrolls into view */
html.inv-anim .neon-night-closing__name:not(.is-revealed) { color: color-mix(in srgb, var(--inv-primary) 28%, var(--inv-background)); text-shadow: none; }
html.inv-anim .neon-night-closing__name.is-revealed { animation: neon-night-sign-on 1.5s linear .5s both; }
/* the marquee bulbs chase, the on-air lamp and the countdown colons blink, the door scanner runs */
html.inv-anim .neon-night-pass__bulbs { animation: neon-night-chase 1.2s steps(4) infinite; }
html.inv-anim .neon-night-pass__bulbs:last-child { animation-direction: reverse; }
html.inv-anim .neon-night-stream__onair i { animation: neon-night-blink 1.6s ease-in-out infinite; }
html.inv-anim .neon-night-countdown .inv-countdown__item + .inv-countdown__item::before { animation: neon-night-blink 1s steps(2) infinite; }
html.inv-anim .neon-night-door__scan { animation: neon-night-scan 2.8s ease-in-out infinite alternate; }
/* RSVP sent: the strap wraps, the tag snaps, the clasp clicks, two laser beams sweep across */
html.inv-anim .neon-night-door.is-checked .neon-night-band__strap { animation: neon-night-strap .5s cubic-bezier(.65, 0, .35, 1) both; }
html.inv-anim .neon-night-door.is-checked .neon-night-band__face { animation: neon-night-snap .55s cubic-bezier(.34, 1.56, .64, 1) .35s both; }
html.inv-anim .neon-night-door.is-checked .neon-night-band__clasp { animation: neon-night-snap .4s cubic-bezier(.34, 1.56, .64, 1) .6s both; }
html.inv-anim .neon-night-door.is-checked .neon-night-door__beam--1 { animation: neon-night-beam .9s ease-out .2s both; }
html.inv-anim .neon-night-door.is-checked .neon-night-door__beam--2 { animation: neon-night-beam .9s ease-out .38s both; }
html.inv-anim .neon-night-door--no .neon-night-door__heart-tube { animation: neon-night-tube-on 1.1s linear .1s both; }

/* scroll-drawn details (the default, without support, is the finished drawing) */
@supports (animation-timeline: view()) {
    html.inv-anim .neon-night-rundown__list::before { animation: neon-night-grow linear both; animation-timeline: view(); animation-range: entry 20% cover 55%; }
    html.inv-anim .neon-night-story__card::before { animation: neon-night-grow linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
    html.inv-anim .neon-night-section + .neon-night-section { animation: neon-night-hairline linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    @keyframes neon-night-hairline { from { background-size: 0 1px; } to { background-size: 72% 1px; } }
}

@media (prefers-reduced-motion: reduce) {
    .neon-night-cover, .neon-night-cover--leave, .neon-night-cover__inner, .neon-night-cover__floor, .neon-night-cover__name, .neon-night-cover__laser,
    .neon-night-laser, .neon-night-wishlist__body, .neon-night-wishlist__lid, .neon-night-wishlist__toggle, .neon-night-stick__tube { transition: none; }
    .neon-night-cover__name, .neon-night-cover__floor span, .neon-night-cover__laser, .neon-night-pass__bulbs, .neon-night-stream__onair i, .neon-night-door__scan { animation: none; }
}

/* ---------- 9. intro scene "Lampu Pesta Menyala" (scene.json + sections/_scene; the intro lives in <body>):
   the party switching on at night. Lasers swing in from the top corners, the grid floor rolls in and runs, the
   striped sun rises over the horizon, tube signs flicker on, the round age sign drops on its wires and swings,
   then the name card lights up as a neon sign standing on the floor. ---------- */
.neon-night-scene-sun { width: 100%; height: 100%; container-type: size; position: relative; }
.neon-night-scene-sun span {
    position: absolute; left: 50%; bottom: 0; width: min(100cqw, 100cqh); aspect-ratio: 1; border-radius: 50%; translate: -50% 0;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--inv-accent) 35%, #fff6c8), var(--inv-primary) 62%, color-mix(in srgb, var(--inv-primary) 60%, var(--inv-background)));
    -webkit-mask: linear-gradient(to bottom, #000 46%, transparent 46% 50%, #000 50% 58%, transparent 58% 63%, #000 63% 70%, transparent 70% 76%, #000 76% 82%, transparent 82% 89%, #000 89%);
    mask: linear-gradient(to bottom, #000 46%, transparent 46% 50%, #000 50% 58%, transparent 58% 63%, #000 63% 70%, transparent 70% 76%, #000 76% 82%, transparent 82% 89%, #000 89%);
    filter: drop-shadow(0 0 22px color-mix(in srgb, var(--inv-primary) 70%, transparent));
}
.neon-night-scene-floor {
    position: relative; width: 100%; height: 100%; overflow: hidden; perspective: 240px; perspective-origin: 50% 0;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--inv-primary) 16%, var(--neon-night-deep)), var(--neon-night-deep) 70%);
}
.neon-night-scene-floor span {
    position: absolute; left: -60%; right: -60%; top: 0; height: 220%; transform-origin: 50% 0; transform: rotateX(70deg);
    background:
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--inv-accent) 70%, transparent) 0 2px, transparent 2px 46px),
        repeating-linear-gradient(180deg, color-mix(in srgb, var(--inv-primary) 75%, transparent) 0 2px, transparent 2px 38px);
}
.neon-night-scene-floor::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 2px;
    background: linear-gradient(90deg, transparent, var(--neon-night-core) 25%, #fff 50%, var(--neon-night-core) 75%, transparent);
    box-shadow: 0 0 12px var(--inv-primary), 0 0 26px var(--inv-primary);
}
.neon-night-scene-beam {
    display: block; width: 2px; height: 100%; margin: 0 auto;
    background: linear-gradient(to bottom, var(--neon-night-core), color-mix(in srgb, var(--inv-primary) 60%, transparent) 40%, transparent 80%);
    box-shadow: 0 0 10px var(--inv-primary);
}
.neon-night-scene-beam--alt {
    background: linear-gradient(to bottom, var(--neon-night-core-alt), color-mix(in srgb, var(--inv-accent) 60%, transparent) 40%, transparent 80%);
    box-shadow: 0 0 10px var(--inv-accent);
}
.neon-night-scene-sign { display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; container-type: inline-size; }
.neon-night-scene-sign__wires {
    flex: 1; width: 52%; min-height: 1rem;
    border-inline: 1.5px solid color-mix(in srgb, var(--inv-text) 38%, transparent);
}
.neon-night-scene-sign .neon-night-age { --age-size: 100cqi; flex: none; box-shadow: 0 0 0 3px var(--neon-night-core-alt), 0 0 18px var(--inv-accent), 0 0 44px color-mix(in srgb, var(--inv-accent) 45%, transparent), inset 0 0 0 7px var(--neon-night-deep), inset 0 0 0 9px color-mix(in srgb, var(--inv-primary) 75%, transparent), inset 0 0 18px color-mix(in srgb, var(--inv-primary) 35%, transparent); }
.neon-night-scene-sign .neon-night-age__number { text-shadow: var(--neon-night-glow); }
html.inv-anim .inv-intro.is-playing .neon-night-scene-floor span { animation: neon-night-floor-run 1.1s linear infinite; }
html.inv-anim .inv-intro.is-playing .neon-night-scene-sign .neon-night-age__number { animation: neon-night-sign-on 1.4s linear 2.3s both; }

/* the name card: a neon sign board (two glass tubes) standing on the floor; the name flickers on like the cover */
body.neon-night-body .inv-intro--scene .inv-scene__card {
    top: 75%; aspect-ratio: auto; padding: 1.25rem 1.1rem 1.2rem; border-radius: 24px;
    -webkit-mask: none; mask: none; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    background: color-mix(in srgb, var(--neon-night-deep) 84%, transparent);
    box-shadow: 0 0 0 2.5px var(--neon-night-core), 0 0 16px var(--inv-primary), 0 0 42px color-mix(in srgb, var(--inv-primary) 45%, transparent),
        inset 0 0 0 7px color-mix(in srgb, var(--neon-night-deep) 84%, transparent), inset 0 0 0 8.5px color-mix(in srgb, var(--inv-accent) 75%, transparent), inset 0 0 22px color-mix(in srgb, var(--inv-accent) 28%, transparent);
}
body.neon-night-body .inv-scene__card .inv-intro__label { margin-bottom: .55rem; color: var(--neon-night-accent-text); font: 800 .68rem/1.3 var(--neon-night-sans); letter-spacing: .22em; }
body.neon-night-body .inv-scene__card .inv-intro__names {
    font-family: var(--neon-night-display) !important; font-weight: 400; font-size: clamp(1.7rem, 8.6vw, 2.5rem); line-height: 1.12;
    letter-spacing: .02em; text-transform: uppercase; color: var(--neon-night-core); text-shadow: var(--neon-night-glow);
}
body.neon-night-body .inv-scene__card .inv-intro__rule { width: 7rem; height: 2px; margin: .8rem auto .7rem; background: linear-gradient(90deg, transparent, var(--inv-accent), #fff, var(--inv-accent), transparent); box-shadow: 0 0 8px var(--inv-accent); }
body.neon-night-body .inv-scene__card .inv-intro__date { color: var(--neon-night-accent-text); font: 700 .84rem/1.3 var(--neon-night-sans); letter-spacing: .04em; }
html.inv-anim body.neon-night-body .inv-intro--scene.is-playing .inv-scene__card .inv-intro__names { animation: neon-night-scene-name 1.6s linear calc(var(--scene-card-at, 3.5s) + .55s) both; }
@keyframes neon-night-scene-name {
    0% { opacity: 0; }
    1%, 8%, 13%, 22%, 32% { opacity: 1; color: color-mix(in srgb, var(--inv-primary) 28%, var(--inv-background)); text-shadow: none; }
    10%, 17%, 36%, 100% { opacity: 1; color: var(--neon-night-core); text-shadow: var(--neon-night-glow); }
}
body.neon-night-body .inv-intro--scene .inv-intro__skip { border-color: color-mix(in srgb, var(--inv-accent) 70%, transparent); background: color-mix(in srgb, var(--neon-night-deep) 80%, transparent); color: var(--neon-night-accent-text); }