/*
 * 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 { padding-bottom: 3.5rem; opacity: 1; }
body.neon-night-body:not(:has(.inv-music__space)) .neon-night-branding.inv-branding { padding-bottom: 8rem; }
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; }
}