/* Current v2 screen styles, adapted from design_prototypes/v2. Loaded directly by
   journey/base.html; npm's Tailwind build does not generate this file. Shared
   tokens keep forms, cakes, and reveal screens consistent. [hidden] and disabled
   styles support journey.js state changes; server guards remain authoritative.
   Google fonts have CSS fallbacks for offline/local rendering. */
@font-face { font-family: 'DM Sans'; src: url('/static/landing/dm-sans-normal-400.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/static/landing/dm-sans-normal-600.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/static/landing/dm-sans-normal-700.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/static/landing/fraunces-normal-700.ttf') format('truetype'); font-weight: 500 700; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/static/landing/fraunces-italic-600.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }

:root { --journey-width: 500px; color-scheme: light; --cream: #fffaf4; --ink: #4b3f4d; --muted: #756977; --plum: #544258; --pink: #f6b7c8; --pink-ink: #954663; --blue: #a8d9e9; --blue-ink: #38697d; --line: #e9e0e7; --paper: #ffffffd9; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: radial-gradient(ellipse at 10% 15%, #f6b7c833, transparent 43%), radial-gradient(ellipse at 90% 45%, #a8d9e92e, transparent 38%), var(--cream); font: 16px/1.6 'DM Sans', sans-serif; min-height: 100svh; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; color: inherit; }
a { color: inherit; text-underline-offset: 4px; }
button:disabled { cursor: default; opacity: .55; }
button, input, select, textarea, a { outline-offset: 4px; }
:focus-visible { outline: 3px solid #83618c; }
[hidden] { display: none !important; }
svg { display: block; max-width: 100%; }
img { max-width: 100%; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3, .display { font-family: 'Fraunces', Georgia, serif; font-weight: 500; overflow-wrap: anywhere; }
h1 { font-size: clamp(2.3rem, 9vw, 3rem); line-height: 1.12; letter-spacing: -.055em; text-wrap: balance; }
h2 { font-size: 1.7rem; letter-spacing: -.035em; line-height: 1.25; }
h3 { font-size: 1.3rem; line-height: 1.35; }
em { color: var(--pink-ink); font-weight: 500; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: fixed; z-index: 100; top: -100px; left: 12px; padding: 12px; background: white; }
.skip-link:focus { top: 12px; }
.site-header { max-width: var(--journey-width); margin: auto; padding: 24px 24px 20px; display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; min-width: 0; text-decoration: none; }
.brand img { display: block; width: 200px; max-width: 100%; height: auto; }
#language-form { display: flex; align-items: center; gap: .4rem; width: auto; margin: 0; flex-shrink: 0; justify-content: flex-end; font-size: .75rem; }
#language-form select, #language-form button { min-height: 44px; border: 1px solid #cbb7c0; border-radius: 1rem; background: white; color: inherit; padding: .35rem .6rem; }
#language-form button { cursor: pointer; }
.app-shell { width: 100%; max-width: var(--journey-width); margin: auto; background: #fffcf8; position: relative; }
.step-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 14px; padding: 14px 24px 0; }
.step-nav + .step-header { padding-top: 8px; }
.step-header { padding: 22px 24px 0; }
.step-meta { display: flex; align-items: center; justify-content: space-between; font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.step-meta span:last-child { color: var(--muted); font-weight: 500; letter-spacing: .03em; }
.step-track { display: flex; gap: 7px; margin-top: 9px; }
.step-track a { flex: 1; height: 24px; display: flex; align-items: center; text-decoration: none; }
.step-track a::after { content: ''; display: block; height: 3px; width: 100%; border-radius: 8px; background: #ebe5eb; }
.step-track a.complete::after { background: #dcc7de; }
.step-track a[aria-current='step']::after { background: #8c6695; }
.screen { padding: 29px 24px 32px; animation: enter .4s ease both; }
.screen.center { text-align: center; }
.eyebrow { text-transform: uppercase; font-size: .64rem; font-weight: 700; letter-spacing: .19em; color: #865b73; }
.screen > .eyebrow + h1, .intro > .eyebrow + h1 { margin-top: 14px; }
.lead { margin-top: 16px; color: var(--muted); font-size: .93rem; line-height: 1.75; }
.intro { margin-bottom: 28px; }
.intro.center { text-align: center; }
.tiny { font-size: .73rem; color: var(--muted); line-height: 1.65; }
.muted { color: var(--muted); }
.spaced { margin-top: 24px; }
.small-space { margin-top: 12px; }
.large-space { margin-top: 32px; }
.center { text-align: center; }
.primary-button, .secondary-button { width: 100%; min-height: 56px; border-radius: 17px; border: 1px solid transparent; padding: 14px 20px; display: flex; align-items: center; justify-content: center; gap: 12px; font-size: .91rem; font-weight: 700; text-decoration: none; transition: transform .18s, background .18s; }
.primary-button { background: var(--plum); color: #fff; box-shadow: 0 8px 18px #54425817; }
.primary-button:hover { background: #443548; transform: translateY(-2px); }
.primary-button .arrow { margin-left: auto; font-size: 1.25rem; font-weight: 400; line-height: 1; }
.primary-button.has-arrow { justify-content: flex-start; }
.secondary-button { border-color: var(--line); background: white; }
.secondary-button:hover { background: #f5eef6; }
.text-button { display: inline-flex; align-items: center; border: 0; background: none; min-height: 44px; padding: 10px 4px; font-size: .82rem; text-decoration: underline; text-underline-offset: 5px; }
.back-link { display: inline-flex; min-height: 44px; align-items: center; gap: 7px; font-size: .79rem; text-decoration: none; color: var(--muted); }
.action-row { margin-top: 27px; }
.action-row .tiny { text-align: center; margin-top: 13px; }
.bottom-links { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.art { width: 100%; max-width: 340px; margin: 12px auto 0; }
.invite-art { height: 205px; }
.invite-screen { padding-top: 19px; }
.invite-screen h1 { font-size: clamp(2.65rem, 11vw, 3.35rem); }
.invite-screen .lead { max-width: 325px; margin-inline: auto; }
.float { animation: float 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.float-alt { animation-delay: -2s; animation-duration: 6s; }
.date-ticket { display: flex; align-items: center; text-align: left; background: white; border: 1px solid var(--line); border-radius: 20px; padding: 16px 20px; margin-top: 24px; }
.date-stamp { min-width: 63px; padding-right: 18px; border-right: 1px dashed #d9cdd8; text-align: center; }
.date-stamp span { display: block; font-size: .58rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; }
.date-stamp strong { display: block; font: 500 2.2rem/1.2 'Fraunces', serif; }
.date-info { padding-left: 19px; }
.date-info strong { font-size: .84rem; }
.date-info span { display: block; font-size: .73rem; color: var(--muted); }
.guest-strip { margin-top: 22px; display: flex; justify-content: center; gap: 11px; align-items: center; font-size: .7rem; color: var(--muted); }
.avatars { display: flex; padding-left: 6px; }
.avatar { width: 30px; height: 30px; margin-left: -6px; display: grid; place-items: center; border: 2px solid #fffcf8; border-radius: 50%; font-size: .55rem; font-weight: 700; background: #ecdff4; color: #604a66; }
.avatar:nth-child(2n) { background: #d3eaf1; color: #38697d; }
.avatar:nth-child(3n) { background: #f6d5e0; color: #954663; }
.field { margin-top: 22px; text-align: left; }
.field:first-child { margin-top: 0; }
.field label, .field-label, legend { display: block; font-size: .85rem; font-weight: 700; margin-bottom: 9px; }
.field label span, .field-label span { color: var(--muted); font-size: .73rem; font-weight: 400; }
.input-field { display: block; width: 100%; min-height: 56px; border: 1px solid #ded4df; border-radius: 15px; padding: 14px 16px; background: white; color: var(--ink); }
.input-field::placeholder { color: #817582; opacity: 1; }
.input-field:focus { border-color: #9c7ba4; }
textarea.input-field { min-height: 112px; resize: vertical; }
.field .tiny { margin-top: 8px; }
.icon-field { position: relative; }
.icon-field .input-field { padding-left: 48px; }
.icon-field svg { position: absolute; top: 18px; left: 16px; width: 21px; height: 21px; color: #89718f; }
.note { background: #f3edf6; padding: 16px 18px; border-radius: 16px; font-size: .8rem; color: #6c5871; line-height: 1.7; }
.note p + p { margin-top: 7px; }
.pill { display: inline-flex; gap: 7px; align-items: center; background: #f0eaf5; border: 1px solid #e6daeb; border-radius: 20px; padding: 6px 12px; font-size: .65rem; font-weight: 700; }
.pill.open { background: #ecf4ec; border-color: #dfebdf; color: #4c7257; }
.pill.open::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #6a9974; }
.clock-art { height: 133px; margin-top: 20px; }
.countdown { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; margin: 23px 0 15px; }
.time-unit { background: white; border: 1px solid #e7dee8; border-radius: 15px; padding: 13px 3px 12px; box-shadow: 0 4px 0 #f1eaf2; }
.time-unit strong { display: block; font: 500 clamp(1.9rem,8vw,2.65rem)/1.15 'Fraunces',serif; font-variant-numeric: tabular-nums; letter-spacing: -.055em; }
.time-unit span { display: block; font-size: .54rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; margin-top: 6px; }
.calendar-link { display: inline-flex; justify-content: center; align-items: center; gap: 9px; min-height: 48px; background: none; border: 0; text-decoration: underline; text-underline-offset: 4px; font-size: .79rem; }
.calendar-link svg { width: 17px; height: 17px; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 24px; }
.choice { display: block; position: relative; border-radius: 90px 90px 24px 24px; padding: 19px 10px 21px; text-align: center; border: 2px solid transparent; background: #fce6ed; cursor: pointer; transition: transform .2s, border-color .2s; }
.choice.boy { background: #e1f0f7; }
.choice:hover { transform: translateY(-4px); }
.choice:has(input:checked) { border-color: var(--plum); box-shadow: 0 0 0 4px #e9e0ed; }
.choice:has(input:focus-visible) { outline: 3px solid #83618c; outline-offset: 5px; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.choice svg { width: 100%; height: 137px; margin: 4px auto 10px; }
.choice strong { font: 500 1.9rem/1.2 'Fraunces',serif; display: block; color: var(--pink-ink); }
.choice.boy strong { color: var(--blue-ink); }
.choice small { font-size: .64rem; color: var(--pink-ink); }
.choice.boy small { color: var(--blue-ink); }
.choose-divider { text-align: center; margin-top: 23px; color: var(--muted); font-size: .75rem; }
.error { color: #9d274d; font-size: .8rem; margin-top: 12px; }
.name-fields { display: grid; gap: 13px; margin-top: 24px; }
.name-entry { position: relative; text-align: left; }
.name-entry label { display: block; font-size: .73rem; margin-bottom: 6px; color: var(--muted); }
.name-entry .input-field { padding-right: 47px; }
.remove-name { position: absolute; right: 4px; bottom: 5px; width: 43px; height: 46px; border: 0; border-radius: 12px; background: transparent; font-size: 1.2rem; }
.add-name { margin-top: 10px; width: 100%; background: none; border: 1px dashed #cdbdd3; border-radius: 14px; min-height: 49px; font-size: .8rem; color: #75567c; }
.add-name:hover { background: #f4edf6; }
.letter-art { height: 155px; }
.prediction-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); background: white; padding: 17px; border-radius: 19px; text-align: left; }
.prediction-summary strong { display: block; font-size: .85rem; overflow-wrap: anywhere; }
.prediction-summary .tiny { margin-top: 2px; }
.prediction-summary a { min-height: 44px; padding: 10px 8px; font-size: .75rem; }
.party-note { padding: 22px; background: #f4edf5; border-radius: 20px; margin-top: 24px; }
.party-note blockquote { font: 500 1.15rem/1.55 'Fraunces',serif; margin: 10px 0 11px; }
.lock-art { height: 154px; }
.panel { padding: 22px 20px; border-radius: 22px; background: white; border: 1px solid var(--line); margin-top: 20px; }
.panel > .eyebrow { margin-bottom: 8px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-heading h2 { font-size: 1.45rem; }
.panel-heading .tiny { text-align: right; }
.cakes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 15px; }
.cake-button { min-width: 0; background: #f5fafc; border: 1px solid #dfeaf0; padding: 12px 7px 17px; border-radius: 20px; }
.cake-button.girl { background: #fff5f8; border-color: #f2e0e7; }
.cake-button[aria-expanded='true'] { outline: 2px solid var(--plum); outline-offset: 3px; }
.cake-button svg { width: 100%; height: 157px; }
.cake-count { font: 500 2rem/1.2 'Fraunces',serif; color: var(--blue-ink); }
.cake-button.girl .cake-count { color: var(--pink-ink); }
.cake-count small { font: 500 .66rem 'DM Sans',sans-serif; }
.cake-team { display: block; font-weight: 700; font-size: .75rem; margin-top: 5px; }
.cake-hint { display: block; font-size: .61rem; color: var(--muted); margin-top: 4px; }
.voter-panel { margin-top: 18px; padding-top: 17px; border-top: 1px dashed #dccddd; }
.voter-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 0; }
.voter-list li { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid #f0e9ef; font-size: .8rem; }
.voter-list li:last-child { border-bottom: 0; }
.voter-list .avatar { margin: 0; flex-shrink: 0; }
.voter-list strong { display: block; font-size: .79rem; overflow-wrap: anywhere; }
.voter-list small { color: var(--muted); font-size: .68rem; }
.balloon-panel { overflow: hidden; background: radial-gradient(ellipse at 50% 70%, #f1edf780, transparent 80%), white; }
.balloon-legend { display: flex; gap: 15px; margin-top: 8px; font-size: .62rem; color: var(--muted); }
.balloon-legend span { display: flex; gap: 5px; align-items: center; }
.balloon-legend span::before { content: ''; width: 7px; height: 7px; background: #f1b5cc; border-radius: 50%; }
.balloon-legend span:last-child::before { background: #a8d9e9; }
.balloon-cloud { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px 9px; padding: 23px 0 17px; align-items: start; }
.name-balloon { position: relative; width: 100%; min-width: 0; height: 111px; margin-bottom: 30px; border: 1px solid #e8a6bd; border-radius: 50% 50% 46% 46%; background: radial-gradient(ellipse at 28% 20%, #fffbfd 0%, #f9d7e4 35%, #efb1c9 100%); color: #7e3855; box-shadow: inset -5px -7px 12px #db8bab1a; font-family: 'Fraunces',serif; font-size: .89rem; padding: 8px; overflow-wrap: anywhere; line-height: 1.2; animation: float 5.5s ease-in-out infinite; }
.name-balloon.boy { border-color: #9ccadb; background: radial-gradient(ellipse at 28% 20%, #fafdff, #d4ecf6 35%, #a0d1e3 100%); color: #315e72; }
.name-balloon::before { content: ''; position: absolute; bottom: -8px; left: calc(50% - 5px); width: 10px; height: 10px; background: #ecb1c9; clip-path: polygon(50% 0,100% 100%,0 100%); }
.name-balloon::after { content: ''; position: absolute; height: 26px; width: 9px; border-right: 1px solid #c4b2c1; border-radius: 50%; bottom: -33px; left: calc(50% - 4px); }
.name-balloon.boy::before { background: #a0d1e3; }
.name-balloon:nth-child(3n+2) { margin-top: 16px; animation-delay: -2s; }
.name-balloon:nth-child(3n) { animation-delay: -3.5s; }
.name-balloon:hover, .name-balloon[aria-pressed='true'] { outline: 2px solid var(--plum); outline-offset: 4px; }
.balloon-cloud:hover .name-balloon, .balloon-cloud:focus-within .name-balloon { animation-play-state: paused; }
.show-names { width: 100%; justify-content: center; margin-bottom: 10px; }
.balloon-detail { background: #f7f1f7; border-radius: 13px; padding: 13px; font-size: .79rem; overflow-wrap: anywhere; }
.final-number { font: 500 7rem/1 'Fraunces',serif; display: grid; place-items: center; width: 230px; height: 230px; margin: 37px auto; border: 9px solid white; outline: 1px solid #ebdfee; border-radius: 50%; background: linear-gradient(130deg,#f8d4e2,#d8ebf5); box-shadow: 0 0 0 14px #f7edf680; }
.reveal-screen { position: relative; overflow: hidden; }
.reveal-screen h1 { font-size: 3.8rem; color: var(--pink-ink); }
.reveal-screen.is-boy h1 { color: var(--blue-ink); }
.reveal-art { height: 230px; }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; left: var(--x); top: -20px; width: 7px; height: 12px; background: var(--c); border-radius: 2px; animation: fall 4s linear var(--delay) 2 both; }
.host-tabs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 15px; margin-bottom: 25px; font-size: .73rem; }
.host-tabs a { min-height: 44px; display: flex; align-items: center; }
.host-tabs .pill { align-self: center; }
.checkbox-field { display: flex !important; align-items: flex-start; gap: 10px; font-size: .78rem !important; font-weight: 500 !important; line-height: 1.5; cursor: pointer; }
.checkbox-field input[type='checkbox'] { margin-top: 3px; flex-shrink: 0; width: 18px; height: 18px; }
.host-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 20px; }
.stat { border-radius: 17px; border: 1px solid var(--line); background: white; padding: 16px; }
.stat strong { display: block; font: 500 2rem/1.2 'Fraunces',serif; }
.stat span { font-size: .7rem; color: var(--muted); }
.dark-panel { background: var(--plum); color: white; border-color: transparent; }
.dark-panel .eyebrow { color: #f3c3d7; }
.dark-panel .tiny, .dark-panel .lead { color: #e5dce8; }
.dark-panel .primary-button { background: #f3c1d3; color: #4b3143; }
details > summary { cursor: pointer; min-height: 44px; display: list-item; padding: 10px 0; font-size: .82rem; font-weight: 700; }
.dark-panel details .secondary-button { color: var(--ink); margin-top: 14px; }
.table-wrap { overflow-x: auto; margin-top: 14px; }
table { width: 100%; border-collapse: collapse; font-size: .72rem; text-align: left; }
th, td { padding: 11px 7px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
thead th { text-transform: uppercase; letter-spacing: .1em; font-size: .57rem; color: var(--muted); }
.team-tag { display: inline-block; padding: 3px 7px; border-radius: 8px; background: #fce6ed; color: #954663; font-size: .63rem; font-weight: 700; }
.team-tag.boy { background: #e1f0f7; color: #38697d; }
.compact-choices { display: flex; gap: 10px; }
.compact-choices label { flex: 1; padding: 14px; border: 1px solid var(--line); border-radius: 13px; font-size: .85rem; background: #fff5f8; }
.compact-choices label:last-child { background: #eff8fc; }
input[type='radio'], input[type='checkbox'] { accent-color: var(--plum); }
.upload-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.upload { padding: 13px; border: 1px dashed #c9b4ce; border-radius: 15px; background: #faf6fb; font-size: .73rem; overflow: hidden; }
.upload input { width: 100%; margin-top: 9px; font-size: .6rem; }
.upload img { width: 100%; height: 90px; border-radius: 10px; object-fit: cover; margin-top: 10px; }
.family-photo { width: 100%; height: 200px; object-fit: cover; border-radius: 17px; margin-top: 18px; }
.mail-art { width: 125px; height: 125px; border-radius: 50%; background: #f3eaf5; display: grid; place-items: center; margin: 8px auto 28px; }
.mail-art svg { width: 80px; height: 80px; }
.preview-footer { width: 100%; max-width: var(--journey-width); margin: auto; padding: 21px 24px 35px; text-align: center; font-size: .67rem; color: var(--muted); }
.preview-footer > p { margin-bottom: 10px; }
.footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 20px; }
.footer-links a { display: inline-flex; min-height: 38px; align-items: center; }
.preview-tools { margin-top: 13px; border-top: 1px solid #e9e0e6; text-align: left; }
.preview-tools summary { text-align: center; font-size: .67rem; font-weight: 500; }
.preview-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
.preview-nav a { padding: 8px 10px; min-height: 40px; border-radius: 9px; text-decoration: none; background: #fffaf7; border: 1px solid var(--line); }
.preview-nav a[aria-current='page'] { background: #eee4f1; }
.preview-actions { display: flex; gap: 8px; margin: 12px 0; }
.preview-actions button { flex: 1; padding: 9px; min-height: 44px; border: 1px solid #d8c9df; border-radius: 10px; background: #f6eef8; font-size: .65rem; }
.toast { position: fixed; z-index: 90; bottom: 20px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); border-radius: 16px; padding: 13px 20px; background: #49364f; color: white; font-size: .82rem; box-shadow: 0 8px 30px #54425830; text-align: center; }
.locked-message { padding: 20px; border: 1px solid #dcc9e2; border-radius: 17px; background: #f4edf6; margin-bottom: 20px; font-size: .88rem; }
.locked-message a { display: block; margin-top: 8px; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1deg); } }
@keyframes fall { from { transform: translateY(-15px) rotate(0); } to { transform: translateY(850px) rotate(340deg); } }
@media (min-width: 600px) {
  body { background: radial-gradient(ellipse at 18% 22%, #f5d6e580, transparent 37%), radial-gradient(ellipse at 86% 70%, #cde8f27d, transparent 35%), radial-gradient(ellipse at 72% 5%, #e7ddf260, transparent 28%), #f9f5ef; }
  .site-header { padding-top: 32px; padding-bottom: 22px; }
  .app-shell { border: 1px solid #fff; border-radius: 32px; box-shadow: 0 20px 75px #6b526514, 0 1px 4px #6b52650a; overflow: hidden; }
  .screen { padding: 30px 34px 35px; }
  .step-nav { padding: 18px 34px 0; }
  .step-header { padding: 25px 34px 0; }
  .invite-art { height: 214px; }
  .name-balloon { height: 122px; }
}
@media (max-width: 359px) { .screen { padding-inline: 18px; } .step-nav { padding-inline: 18px; } .step-header { padding-inline: 18px; } .cake-button svg { height: 127px; } .name-balloon { height: 92px; font-size: .75rem; } .date-ticket { padding: 14px; } .date-info { padding-left: 12px; } .choice svg { height: 111px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (prefers-contrast: more) { :root { --muted: #4e4352; --line: #95839b; } .input-field, .step-track a::after { border-color: #7e6b85; } .tiny { color: #4e4352; } }

/* Application states beyond the static preview. */
fieldset:disabled .choice { cursor: default; opacity: .6; }
.dark-panel > .secondary-button { color: var(--ink); }
.error-summary { margin-bottom: 20px; padding: 16px 18px; border: 2px solid #c8394f; border-radius: 16px; background: #fdf1f3; color: #8f2740; font-size: .8rem; line-height: 1.7; }
.error-summary p + p, .error-summary ul { margin-top: 7px; }
.date-info { min-width: 0; overflow-wrap: anywhere; }
.upload label { display: block; }
@media (prefers-reduced-motion: reduce) { .screen { animation: none; } }

.management { margin-bottom: 2rem; }
.management label, .table-wrap details label { display: block; margin: .75rem 0; }
.management input, .table-wrap details input { margin-bottom: .75rem; }

/* v3 celebration screens, scoped to the four guest pages. */
/* V3 adds a tactile waiting room and a balloon-party finale to the copied journey. */
.celebration { background: #fffaf4; color: var(--party-ink); }
.celebration .site-header { max-width: var(--journey-width); padding: 29px 36px; }
.celebration .brand { font-size: 1.7rem; }

.celebration .app-shell { background: transparent; }
.celebration #journey-content > .screen { padding: 45px 36px 24px; }
.celebration h1 { font-size: clamp(2.8rem, 5.5vw, 4.4rem); letter-spacing: -.065em; line-height: 1.04; }
.celebration h1 em { color: #a14766; }
.celebration .eyebrow { font-size: .6rem; letter-spacing: .13em; }
.celebration .lead { font-size: .94rem; line-height: 1.8; }
.waiting-screen { display: grid; grid-template-columns: 1fr 1fr; gap: 35px 50px; align-items: center; }
.waiting-story > .eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 21px; }
.little-star { color: #9a7daf; font-size: 23px; line-height: 1; }
.waiting-story h1 { max-width: 470px; }
.prediction-ticket { display: flex; align-items: center; gap: 14px; margin: 26px 0; padding: 18px 0; border-block: 1px dashed #d9c6d5; }
.ticket-flower { font-size: 42px; color: #b35b7a; background: #fce6eb; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; }
.prediction-ticket strong { font-size: .91rem; }
.prediction-ticket .eyebrow { font-size: .53rem; margin-bottom: 3px; }
.prediction-ticket a { margin-left: auto; font-size: .75rem; padding: 12px 4px; }
.waiting-time .eyebrow { font-size: .56rem; }
.waiting-time .countdown { margin: 13px 0 3px; max-width: 340px; gap: 10px; }
.waiting-time .time-unit { background: transparent; border: 0; padding: 4px 0; box-shadow: none; text-align: left; border-right: 1px solid #e4d7df; border-radius: 0; }
.waiting-time .time-unit:last-child { border: 0; }
.waiting-time .time-unit strong { font-size: 2.1rem; }
.waiting-time .time-unit span { font-size: .51rem; margin-top: 3px; }
.waiting-time .calendar-link { font-size: .73rem; padding: 4px 0; }
.smash-card { position: relative; text-align: center; background: #f0e8f3; border: 1px solid #e8dbea; border-radius: 180px 180px 32px 32px; padding: 42px 20px 30px; min-height: 520px; overflow: hidden; }
.secret-status { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #d8c9df; background: #fffaf7b3; border-radius: 30px; padding: 7px 13px; font-size: .61rem; }
.secret-status > span:first-child { width: 6px; height: 6px; border-radius: 50%; background: #97849e; }
.hand-note, .stage-note, .reveal-scribble { font: italic 500 1.15rem/1.3 'Fraunces', Georgia, serif; }
.hand-note { margin-top: 27px; transform: rotate(-7deg); color: #71567e; }
.hand-arrow { position: absolute; width: 57px; height: 57px; right: 35px; top: 125px; transform: rotate(10deg); color: #8b7196; }
.smash-orbit { position: relative; display: grid; place-items: center; height: 280px; margin-top: 6px; }
.button-plinth { padding: 12px; width: 246px; height: 246px; border-radius: 50%; background: #e6dae9; box-shadow: 0 14px 0 #d6c8dc, 0 24px 24px #61436f18; transform: rotate(-8deg); }
.smash-button { position: relative; width: 100%; height: 100%; border: 1px solid #d599ae; border-radius: 50%; background: radial-gradient(circle at 35% 24%, #f9d3df, #e9b3c7 80%); color: #795466; box-shadow: inset 0 5px 2px #ffeaf2, inset 0 -5px 4px #d598b2, 0 12px 0 #b57f99, 0 15px 4px #76546b30; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform .18s, box-shadow .18s, background .3s; }
.smash-button:active { transform: translateY(9px); box-shadow: inset 0 3px 2px #ffeaf2, 0 3px 0 #b57f99; }
.smash-button[aria-disabled='true'] { cursor: not-allowed; }
.button-lock { width: 23px; height: 23px; margin-bottom: 10px; }
.smash-word { font: 700 2.6rem/.95 'DM Sans', sans-serif; letter-spacing: -.06em; }
.smash-caption { font-size: .54rem; font-weight: 700; letter-spacing: .15em; margin-top: 10px; }
.orbit-star { position: absolute; color: #aa8eb9; font-size: 35px; }
.star-one { left: 5px; top: 51px; transform: rotate(-15deg); }
.star-two { right: 6px; bottom: 36px; color: #c391a6; font-size: 30px; }
.orbit-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #c7b5d7; }
.dot-one { top: 35px; right: 35px; }.dot-two { bottom: 35px; left: 29px; background: #b5d6dc; }
.smash-hint { margin: 12px auto 0; max-width: 255px; font-size: .75rem; font-weight: 600; line-height: 1.65; }
.patience-note { margin-top: 10px; font-size: .61rem; }
.love-note { grid-column: 1 / -1; display: flex; gap: 17px; align-items: center; border-top: 1px solid #eadfe5; padding: 24px 0 0; max-width: 760px; margin: 0 auto; }
.love-note > span { font-size: 30px; color: #b98299; }
.love-note p { font: italic 500 1.05rem/1.6 'Fraunces', Georgia, serif; }
.love-note small { display: block; font: 500 .62rem/1.8 'DM Sans', sans-serif; margin-top: 5px; color: var(--muted); }
.results-ready .smash-card { background: #f7e5ed; border-color: #efcedb; }
.results-ready .secret-status { color: #3e704e; background: #f4faf0; border-color: #c9ddc7; }
.results-ready .secret-status > span:first-child { background: #5b986e; }
.results-ready .smash-button { color: #fffaf7; background: radial-gradient(circle at 34% 22%, #ff8d9f, #e9537c 85%); border-color: #c84871; box-shadow: inset 0 5px 2px #ffb7c4, inset 0 -5px 5px #dc3b67, 0 12px 0 #ad365a, 0 17px 8px #8c33584d; }
.results-ready .smash-button:hover { transform: translateY(-3px) rotate(3deg); }
.results-ready .smash-button:active { transform: translateY(9px); box-shadow: inset 0 3px 2px #ffb7c4, 0 3px 0 #ad365a; }
.results-ready .button-lock { display: none; }.results-ready .smash-word { font-size: 2.85rem; }
.results-ready .patience-note { visibility: hidden; }
.wiggle { animation: button-wiggle .4s ease; }
.celebration .finale-screen { max-width: 100%; margin: auto; padding-top: 30px; }
.finale-screen h1 { margin-top: 18px; font-size: clamp(2.5rem, 5vw, 3.8rem); }
.finale-screen .lead { margin-top: 14px; }
.balloon-stage { position: relative; height: 360px; max-width: 700px; margin: 20px auto 0; display: grid; justify-items: center; align-content: start; }
.count-balloon { position: relative; isolation: isolate; width: 268px; height: 280px; border-radius: 48% 48% 46% 46%; background: radial-gradient(ellipse at 26% 22%, #fff9ff 0%, #ead9f5 30%, #d5b6e6 78%); border: 1px solid #c9a3dd; box-shadow: inset -13px -10px 25px #b892cf42, 0 15px 40px #84689116; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 14px; transform: rotate(-5deg); transition: background 1s; }
.count-balloon::after { content: ''; position: absolute; bottom: -14px; width: 23px; height: 17px; background: #cba9df; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.balloon-shine { position: absolute; top: 29px; left: 33px; width: 34px; height: 70px; border-left: 9px solid #ffffff80; border-radius: 50%; transform: rotate(35deg); }
.balloon-topline { font-size: .54rem; font-weight: 700; letter-spacing: .16em; color: #715182; }
#final-number { font: 500 8.2rem/1.3 'Fraunces', Georgia, serif; letter-spacing: -.08em; padding-right: 7px; font-variant-numeric: tabular-nums; }
.balloon-string { position: absolute; width: 50px; height: 70px; top: 307px; color: #b7a0c5; }
.stage-spark { position: absolute; font-size: 49px; color: #c399d4; }
.spark-a { left: 17%; top: 20px; transform: rotate(15deg); }.spark-b { right: 19%; top: 0; color: #b5839c; font-size: 44px; }.spark-c { left: 24%; bottom: 18px; font-size: 32px; color: #cfa767; }.spark-d { right: 15%; bottom: 76px; color: #8cb9c9; }
.side-balloon { position: absolute; width: 65px; height: 82px; border-radius: 50% 50% 47% 47%; top: 115px; }
.side-balloon::after { content: ''; position: absolute; top: 100%; left: 50%; width: 15px; height: 65px; border-left: 1px solid #b8a7bc; border-radius: 50%; }
.balloon-pink { background: radial-gradient(circle at 30% 25%, #ffe9f0, #efb7cc); left: 8%; transform: rotate(-20deg); }
.balloon-blue { background: radial-gradient(circle at 30% 25%, #e9faff, #a8d5e6); right: 7%; transform: rotate(20deg); }
.stage-note { position: absolute; font-size: 1rem; color: #8a6a91; }.note-left { bottom: 47px; left: 3%; transform: rotate(-9deg); }.note-right { right: 0; top: 65px; transform: rotate(10deg); }
.counting .count-balloon { animation: bob-balloon 2.5s ease-in-out infinite; }.counting .side-balloon { animation: bob-balloon 3s ease-in-out infinite alternate; }
.nearly-there .count-balloon { background: radial-gradient(ellipse at 26% 22%, #fff9ff, #edc2d8 65%, #d5b6e6); }
.number-pop { animation: number-pop .4s cubic-bezier(.2,.8,.3,1); }
.count-beads { display: flex; gap: 9px; justify-content: center; margin: 7px 0 16px; }.count-beads span { width: 7px; height: 7px; border-radius: 50%; background: #e4d9e8; transition: background .3s, transform .3s; }.count-beads .done { background: #9c659c; transform: scale(1.2); }
.count-prompt { font: italic 500 1.14rem/1.5 'Fraunces', Georgia, serif; min-height: 28px; }
.final-caption { max-width: 325px; margin: 20px auto 4px; font-size: .63rem; }
.party-button { background: #654073; border-radius: 100px; box-shadow: 0 4px 0 #44294f; min-height: 56px; }
.party-button:hover { background: #754881; }.party-button:active { transform: translateY(3px); box-shadow: 0 1px 0 #44294f; }
.party-button > span { margin-left: auto; font-size: 1.3rem; }
.finale-screen > .back-link { font-size: .7rem; margin-top: 9px; }
.celebration .celebration-reveal { max-width: 100%; margin: auto; border-radius: 40px; padding-top: 39px; background: radial-gradient(ellipse at 50% 35%, #ffe6edb3, transparent 70%); }
.celebration-reveal.is-boy { background: radial-gradient(ellipse at 50% 35%, #dceff8cc, transparent 70%); }
.reveal-headline { position: relative; width: fit-content; margin: 22px auto 0; }.reveal-kicker { font: italic 500 1.6rem 'Fraunces', Georgia, serif; }
.celebration-reveal h1 { font-size: clamp(4rem, 9vw, 6.9rem); line-height: 1.1; color: #a14766; margin-top: 3px; }.celebration-reveal.is-boy h1 { color: #3e778c; }
.reveal-spark { position: absolute; right: -60px; top: 18px; font-size: 44px; color: #c391aa; transform: rotate(15deg); }.is-boy .reveal-spark { color: #79aec3; }
.reveal-scene { position: relative; max-width: 490px; margin: 0 auto; }.reveal-scene .reveal-art { height: 215px; margin-top: 0; }
.reveal-sticker { position: absolute; top: 55px; left: 9px; background: #f4e4ae; color: #7e5b30; border-radius: 50%; width: 76px; height: 76px; display: grid; align-content: center; font-size: .77rem; line-height: 1.4; font-weight: 700; transform: rotate(-15deg); outline: 1px dashed #c8a768; outline-offset: -5px; }
.reveal-scribble { position: absolute; right: 0; bottom: 38px; transform: rotate(10deg); color: #9f6883; font-size: 1rem; }.is-boy .reveal-scribble { color: #527f97; }
.celebration-reveal .lead { margin-top: 0; }.parents-signature { font: 500 1.45rem 'Fraunces', Georgia, serif; margin: 18px 0 5px; }
.memory-strip { max-width: 470px; margin: 27px auto 22px; padding: 20px 0; border-block: 1px dashed #d9c6d5; display: flex; align-items: center; gap: 15px; text-align: left; }.memory-strip > span { font-size: 35px; }.memory-strip p { font-size: .69rem; color: var(--muted); line-height: 1.8; }.memory-strip strong { color: var(--party-ink); font-weight: 600; }
.reveal-actions { max-width: 325px; margin: auto; }.reveal-actions .text-button { font-size: .73rem; margin-top: 10px; }
.celebration-reveal .confetti { border-radius: 35px; }.celebration-reveal .confetti i:nth-child(3n) { border-radius: 50%; width: 9px; height: 9px; }.celebration-reveal .confetti i:nth-child(4n) { width: 5px; height: 18px; }
.celebration-reveal > .family-photo { position: relative; z-index: 1; }
.celebration .preview-footer { max-width: var(--journey-width); margin-top: 28px; border-top: 1px solid #eadfe5; }.preview-actions { flex-wrap: wrap; }.preview-actions button { flex: 1 1 140px; }
@keyframes button-wiggle { 25% { transform: translateY(4px) rotate(-5deg); } 65% { transform: translateY(4px) rotate(5deg); } }
@keyframes bob-balloon { 50% { transform: translateY(-8px) rotate(3deg); } }
@keyframes number-pop { 0% { opacity: .4; transform: scale(.84); } 60% { transform: scale(1.06); } }
/* Compact celebration layout at every viewport width. */
  .celebration .site-header { padding: 20px 22px; }.celebration .brand { font-size: 1.5rem; }
  .celebration #journey-content > .screen { padding: 24px 23px; }.waiting-screen { grid-template-columns: 1fr; gap: 25px; }.waiting-story { display: contents; }.waiting-story > .eyebrow { margin-bottom: -10px; font-size: .5rem; justify-content: center; }
  .waiting-story h1 { text-align: center; font-size: 3.25rem; margin-top: 0; }.waiting-story > .lead { text-align: center; font-size: .79rem; margin-top: -12px; }.prediction-ticket { order: 3; margin: 0; }.waiting-time { order: 2; text-align: center; }.waiting-time .countdown { margin-inline: auto; }.waiting-time .time-unit { text-align: center; }
  .smash-card { padding: 24px 14px 20px; min-height: 0; border-radius: 160px 160px 25px 25px; max-width: 390px; width: 100%; margin: 0 auto; }.secret-status { font-size: .57rem; }.hand-note { font-size: 1rem; margin-top: 20px; }.hand-arrow { top: 88px; right: 23px; width: 44px; }.smash-orbit { height: 238px; }.button-plinth { width: 211px; height: 211px; padding: 10px; }.smash-word { font-size: 2.3rem; }.results-ready .smash-word { font-size: 2.5rem; }.smash-caption { font-size: .48rem; }.star-one { left: 8px; font-size: 27px; }.star-two { right: 7px; font-size: 27px; }.smash-hint { font-size: .7rem; margin-top: 9px; }.patience-note { font-size: .55rem; margin-top: 6px; }
  .love-note { order: 4; padding-top: 20px; }.love-note p { font-size: .91rem; }.waiting-time .calendar-link { min-height: 44px; }
  .celebration .finale-screen { padding-top: 26px; }.finale-screen > .eyebrow { font-size: .48rem; }.finale-screen h1 { font-size: 2.7rem; margin-top: 17px; }.finale-screen .lead { font-size: .76rem; max-width: 260px; margin-inline: auto; }
  .balloon-stage { height: 308px; margin-top: 17px; }.count-balloon { width: 221px; height: 236px; margin-top: 15px; }#final-number { font-size: 7rem; }.balloon-topline { font-size: .46rem; }.balloon-string { top: 263px; height: 52px; }.balloon-shine { top: 25px; left: 30px; height: 48px; border-width: 7px; }
  .stage-spark { font-size: 28px; }.spark-a { left: 6%; top: 20px; }.spark-b { right: 8%; top: 8px; }.spark-c { left: 12%; bottom: 23px; font-size: 23px; }.spark-d { right: 6%; bottom: 33px; }.side-balloon { width: 37px; height: 49px; top: 148px; }.balloon-pink { left: 0; }.balloon-blue { right: 0; }.side-balloon::after { height: 33px; }.stage-note { display: none; }
  .count-beads { margin-top: 5px; }.count-prompt { font-size: 1rem; }.final-caption { margin-top: 18px; }.celebration .celebration-reveal { padding-top: 27px; }.celebration-reveal > .eyebrow { font-size: .48rem; }.reveal-kicker { font-size: 1.4rem; }.celebration-reveal h1 { font-size: 4.25rem; }.reveal-spark { right: -24px; font-size: 25px; top: 8px; }.reveal-scene .reveal-art { height: 202px; max-width: 270px; }.reveal-sticker { width: 57px; height: 57px; font-size: .6rem; left: 0; top: 47px; }.reveal-scribble { font-size: .73rem; right: 0; bottom: 19px; }.memory-strip p { font-size: .63rem; }.memory-strip { gap: 10px; }.celebration .preview-footer { margin: 12px auto 0; width: calc(100% - 40px); padding-inline: 0; }

@media (max-width: 359px) { .celebration #journey-content > .screen { padding-inline: 17px; }.waiting-story h1 { font-size: 2.8rem; }.finale-screen h1 { font-size: 2.35rem; }.celebration-reveal h1 { font-size: 3.6rem; }.count-prompt { font-size: .89rem; } }
.cake-party .intro { margin-bottom: 32px; }.cake-party .intro h1 { font-size: clamp(3.1rem, 6vw, 4.3rem); }.cake-party .intro .lead { font-size: .86rem; }
.cake-party .intro .pill { color: #795683; background: #f2e9f5; font-size: .55rem; letter-spacing: .1em; }
.cake-party .cake-table { padding: 26px; background: #fffdf9; border-color: #eadddf; border-radius: 26px; }
.cake-table .panel-heading { margin-bottom: 23px; }.cake-table .panel-heading h2 { margin-top: 5px; font-size: 1.8rem; }.cake-table-star { font-size: 36px; color: #b799c4; }
.cake-party .cakes { gap: 20px; margin-top: 0; }
.cake-party .cake-button { position: relative; padding: 22px 14px; border-radius: 100px 100px 22px 22px; border-color: #cce2ea; background: #edf6fa; transition: background .2s, box-shadow .2s; }
.cake-party .cake-button.girl { border-color: #efcdd9; background: #fcebf1; }
.cake-party .cake-button:hover { background: #e0f0f6; box-shadow: 0 8px 20px #7797a317; }.cake-party .cake-button.girl:hover { background: #f9e0eb; }
.cake-invitation { display: block; position: relative; z-index: 1; font: italic 500 1.35rem/1.2 'Fraunces', Georgia, serif; color: #416b7c; transform: rotate(-7deg); margin: 7px 0 0; }
.cake-invitation > span { display: block; font-size: .86rem; margin-top: 4px; }.girl .cake-invitation { color: #a05270; transform: rotate(7deg); }
.cake-illustration { display: block; position: relative; padding-top: 15px; }
.cake-party .cake-illustration > svg:not(.cake-doodle-arrow) { height: 215px; width: 100%; transform-origin: 50% 87%; animation: cake-wobble 4.8s ease-in-out 1; }
.cake-party .girl .cake-illustration > svg:not(.cake-doodle-arrow) { animation-delay: .35s; }
.cake-party .cake-illustration .cake-doodle-arrow { position: absolute; top: -14px; right: -1px; width: 66px; height: 77px; color: #72a4b5; z-index: 2; transform: rotate(-14deg); }
.cake-party .girl .cake-doodle-arrow { right: auto; left: -5px; transform: scaleX(-1) rotate(-10deg); color: #bf819b; }
.cake-spark { position: absolute; left: 5px; top: 40%; font-size: 30px; color: #7bafc0; }.girl .cake-spark { left: auto; right: 4px; top: 49%; color: #c98ca5; }
.cake-party .cake-count { display: block; font-size: 2.7rem; margin-top: 1px; }.cake-party .cake-count small { font-size: .7rem; }.cake-party .cake-team { margin-top: 3px; font-size: .85rem; }.cake-party .cake-hint { margin-top: 12px; font-size: .57rem; }
.cake-party .cake-button:is(:hover, :focus-visible) .cake-illustration > svg:not(.cake-doodle-arrow) { animation: cake-hover-wobble .65s ease-in-out 1; }
.cake-party .cake-button[aria-expanded='true'] .cake-illustration > svg:not(.cake-doodle-arrow) { animation: none; }
.cake-party .cake-button[aria-expanded='true'] { outline-color: #8a6897; background: #e0f0f6; }.cake-party .cake-button.girl[aria-expanded='true'] { background: #f9e0eb; }
.cake-party .voter-panel { background: #f8f1f7; padding: 20px; border: 1px dashed #d7bedc; border-radius: 18px; margin-top: 26px; }.cake-party .voter-panel h3 { font-size: 1.4rem; }.cake-party .voter-list { grid-template-columns: 1fr 1fr; gap: 0 16px; }
.cake-party .voter-panel[data-team='boy'] { background: #e0f0f6; }
.cake-party .voter-panel[data-team='girl'] { background: #f9e0eb; }
.cake-party .balloon-panel { margin-top: 26px; padding: 26px; border-radius: 26px; }
.cake-party .balloon-cloud { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px; }
.cake-party .name-balloon-group { flex: 0 1 var(--balloon-size); width: var(--balloon-size); max-width: 100%; }
.cake-party .name-balloon { max-width: none; height: auto; aspect-ratio: 1 / 1.08; }
.cake-party #results-unlocked > .action-row { max-width: 390px; margin: 28px auto 0; }
@keyframes cake-wobble { 0%, 30%, 55%, 85%, 100% { transform: rotate(0); } 5%, 15%, 60%, 70% { transform: rotate(-4deg); } 10%, 20%, 65%, 75% { transform: rotate(4deg); } 25%, 80% { transform: rotate(-2deg); } }
@keyframes cake-hover-wobble { 25% { transform: rotate(-5deg); } 65% { transform: rotate(5deg); } }
/* Compact celebration layout at every viewport width. */
  .cake-party #journey-content > .screen { padding-inline: 19px; }.cake-party .intro h1 { font-size: 3.25rem; }.cake-party .intro .lead { font-size: .77rem; }.cake-party .cake-table { padding: 20px 12px 16px; }.cake-table .panel-heading { padding: 0 4px; margin-bottom: 20px; }.cake-table .panel-heading h2 { font-size: 1.4rem; }.cake-table .eyebrow { font-size: .5rem; }.cake-table-star { font-size: 29px; }
  .cake-party .cakes { gap: 12px; }.cake-party .cake-button { padding: 18px 7px; border-radius: 80px 80px 18px 18px; }.cake-invitation { font-size: 1.05rem; margin-top: 3px; }.cake-invitation > span { font-size: .68rem; }.cake-party .cake-illustration > svg:not(.cake-doodle-arrow) { height: 158px; }.cake-party .cake-illustration .cake-doodle-arrow { top: -3px; right: -3px; height: 58px; width: 45px; }.cake-party .girl .cake-doodle-arrow { left: -4px; }.cake-spark { font-size: 19px; left: -1px; }.girl .cake-spark { right: -1px; }.cake-party .cake-count { font-size: 2.2rem; }.cake-party .cake-team { font-size: .73rem; }.cake-party .cake-hint { font-size: .52rem; line-height: 1.5; max-width: 103px; margin-inline: auto; }.cake-party .voter-panel { padding: 16px; }.cake-party .voter-list { grid-template-columns: 1fr; }.cake-party .balloon-panel { padding: 22px 16px; }.cake-party .balloon-cloud { column-gap: 9px; }

@media (prefers-reduced-motion: reduce) { .celebration .smash-button, .celebration .count-balloon, .celebration .side-balloon, .celebration #final-number, .cake-party .cake-illustration > svg:not(.cake-doodle-arrow), .celebration .confetti i { animation: none !important; transition: none !important; } .celebration-reveal .confetti i { top: var(--y); transform: rotate(25deg); opacity: .5; } }
.waiting-screen > .bottom-links { grid-column: 1 / -1; justify-content: center; order: 5; }
.waiting-screen > .family-photo { grid-column: 1 / -1; order: 4; }

/* Local event details sit quietly below the four-unit countdown. */
.countdown-local-time { margin: 10px 0 4px; font-size: .7rem; line-height: 1.65; overflow-wrap: anywhere; }
.countdown-local-time time, .countdown-local-time span { display: block; }
.waiting-time .countdown-local-time { margin-top: 8px; }

/* Keep the shared, untranslated webpage name beside the language selector. */
.brand { font-size: clamp(1.1rem, 4.8vw, 1.45rem); }
.celebration .brand { font-size: clamp(1.1rem, 4.8vw, 1.7rem); }

/* Balloon presentation uses neutral particles until the guarded reveal page. */
.balloon-waiting { max-width: 340px; margin: 10px auto 20px; }
.balloon-waiting > .tiny { margin-top: 10px; }
.balloon-waiting .countdown { margin: 15px auto 0; gap: 8px; }
.balloon-waiting .time-unit { background: #f5edf6; padding: 9px 3px; }
.balloon-waiting .time-unit strong { font-size: 1.6rem; }
.balloon-waiting .time-unit span { font-size: .5rem; }
.balloon-stage { isolation: isolate; --balloon-half: 134px; --needle-contact-y: 100px; }
.ribbon-needle { position: absolute; z-index: 5; width: 170px; height: 104px; left: calc(50% + var(--balloon-half) - 16px); top: var(--needle-contact-y); opacity: 0; pointer-events: none; filter: drop-shadow(0 6px 4px #6e527228); transform-origin: 8% 58%; }
.needle-arriving .ribbon-needle { animation: needle-flight 1100ms cubic-bezier(.25,.5,.36,1) both; }
.needle-arriving .count-balloon { animation: balloon-brace 1100ms ease-in both; }
.pop-flash { position: absolute; top: 25px; left: calc(50% - 150px); width: 300px; line-height: 270px; font-size: 290px; color: #e0badb; opacity: 0; pointer-events: none; }
.popped .count-balloon { animation: balloon-burst 220ms ease-out both; }
.popped .balloon-string { opacity: 0; transition: opacity .15s; }
.popped .ribbon-needle { animation: needle-exit 650ms ease-out forwards; }
.popped .pop-flash { animation: pop-flash 650ms ease-out both; }
.pop-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pop-confetti i { position: absolute; left: 50%; top: 43%; width: 7px; height: 13px; border-radius: 2px; background: var(--c); opacity: 0; }
.pop-confetti i:nth-child(3n) { width: 10px; height: 10px; border-radius: 50%; }
.popped .pop-confetti i { animation: pop-particle 1000ms cubic-bezier(.12,.65,.4,1) both; }
@keyframes needle-flight { 0% { opacity: 0; transform: translate(90px, -70px) rotate(-24deg); } 15% { opacity: 1; } 60% { transform: translate(28px, -20px) rotate(9deg); } 82% { transform: translate(14px, -8px) rotate(-4deg); } 100% { opacity: 1; transform: translate(0, 0) rotate(0); } }
@keyframes balloon-brace { 0%, 75% { transform: rotate(-5deg); } 90% { transform: rotate(-3deg) scale(1.025); } 100% { transform: rotate(0) scale(1.055); } }
@keyframes balloon-burst { 0% { opacity: 1; transform: scale(1.055); } 35% { opacity: .75; transform: scale(1.13); } 100% { opacity: 0; transform: scale(.2); } }
@keyframes needle-exit { from { opacity: 1; transform: translate(0, 0); } to { opacity: 0; transform: translate(-50px, 90px) rotate(-30deg); } }
@keyframes pop-flash { 0% { opacity: 0; transform: scale(.4) rotate(-15deg); } 20% { opacity: .9; } 100% { opacity: 0; transform: scale(1.3) rotate(25deg); } }
@keyframes pop-particle { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--spin)); } }
/* Compact celebration layout at every viewport width. */
  .smash-invitation { grid-template-columns: 1fr; text-align: center; padding: 29px 17px 24px; gap: 26px; }
  .smash-story h2 { font-size: 2.65rem; }.smash-story .lead { margin-bottom: 17px; }.smash-story > .tiny { margin-inline: auto; max-width: 230px; }
  .smash-playground { max-width: 310px; width: 100%; margin: auto; }.smash-playground .smash-orbit { height: 252px; }.smash-playground .button-plinth { width: 220px; height: 220px; }.smash-playground .smash-word { font-size: 2.6rem; }.smash-playground .hand-note { font-size: 1rem; }
  .result-ticket { margin-bottom: 24px; gap: 10px; }.result-ticket .eyebrow { font-size: .45rem; }.result-ticket a { font-size: .67rem; }.result-ticket .ticket-flower { flex: 0 0 44px; height: 44px; font-size: 33px; }
  .gathering-meta { gap: 10px; font-size: .6rem; }.cake-party .intro .pill { font-size: .48rem; }
  .balloon-stage { --balloon-half: 110.5px; --needle-contact-y: 87px; overflow: hidden; }
  .balloon-stage { height: 363px; }
  .balloon-stage .count-balloon { margin-top: 70px; }
  .balloon-stage .balloon-string { top: 318px; }
  .ribbon-needle { width: 100px; height: 61px; left: calc(50% + 70px); top: 55px; transform-origin: 8% 58%; }
  /* The mobile needle approaches from above so the whole satin bow stays in view. */
  @keyframes needle-flight { 0% { opacity: 0; transform: translate(-20px, -30px) rotate(-140deg); } 20% { opacity: 1; } 70% { transform: translate(-8px, 0) rotate(-120deg); } 100% { opacity: 1; transform: translate(0, 10px) rotate(-115deg); } }
  @keyframes needle-exit { from { opacity: 1; transform: translate(0, 10px) rotate(-115deg); } to { opacity: 0; transform: translate(-30px, 90px) rotate(-150deg); } }
  .pop-flash { top: 0; font-size: 230px; }

@media (prefers-reduced-motion: reduce) {
  .needle-arriving .ribbon-needle { opacity: 1; transform: none; }
  .popped .count-balloon, .popped .ribbon-needle, .popped .balloon-string { opacity: 0; }
  .popped .pop-confetti i { opacity: .7; transform: translate(var(--dx), var(--dy)); }
}


.participation-panel { margin-bottom: 24px; }
.participation-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; }
.participation-actions > a { white-space: normal; text-align: center; }
.device-participant-list { list-style: none; padding: 0; }
.device-participant-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; overflow-wrap: anywhere; }
.device-participant-list small { display: block; }
.context-warning { margin-bottom: 20px; }
/* Results SMASH button adapted from the v3 prototype. */
@font-face {
  font-family: 'Smash Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../landing/fraunces-normal-700.ttf') format('truetype');
}
@font-face {
  font-family: 'Smash DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../landing/dm-sans-normal-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Smash DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../landing/dm-sans-normal-700.ttf') format('truetype');
}

.smash-section {
  text-align: center;
  margin-top: 28px;
  padding: 30px 18px 26px;
  border: 1px solid #deddd0;
  border-radius: 12px;
  background: #fbf7ee;
  color: #393c30;
  font-family: 'Smash DM Sans', sans-serif;
}

#results-unlocked > .smash-section:first-child { margin: 0 0 32px; }

.smash-section .eyebrow {
  color: #696b5e;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .14em;
}

.smash-section .smash-button,
.smash-section .smash-button:hover,
.smash-section .smash-button:active,
.smash-section .smash-button[aria-disabled='true']:hover,
.smash-section .smash-button[aria-disabled='true']:active {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 204px;
  height: 198px;
  margin: 29px auto 30px;
  padding: 12px;
  border: 1px solid #8eabc9;
  border-radius: 50%;
  background: #b9d0ed;
  box-shadow: 0 5px 0 #8eabc9, 0 7px 0 #e2d8c9;
  color: #fffaf3;
  text-decoration: none;
  transform: none;
  opacity: 1;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.smash-section .smash-face {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 1px solid #863b2f;
  border-radius: 50%;
  background: #b8503e;
  box-shadow: 0 5px 0 #863b2f;
  transform: translateY(-4px);
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
  font: 700 2.65rem/1 'Smash Fraunces', Georgia, serif;
  letter-spacing: -.055em;
  text-shadow: none;
}

/* Fine printed outlines echo the landing page's illustrated balloons. */
.smash-section .smash-face::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid #fffaf32b;
  border-radius: inherit;
  pointer-events: none;
}

.smash-section .smash-face > span {
  margin-top: 12px;
  font: 400 1.5rem/1 'Smash DM Sans', sans-serif;
  color: #f4ddb0;
}

.smash-section .smash-button:not([aria-disabled='true']) { cursor: pointer; }

@media (hover: hover) {
  .smash-section .smash-button:not([aria-disabled='true']):hover .smash-face {
    background: #a24334;
    transform: translateY(-6px);
    box-shadow: 0 7px 0 #863b2f;
  }
}

.smash-section .smash-button:not([aria-disabled='true']):active .smash-face {
  transform: translateY(0);
  box-shadow: 0 1px 0 #863b2f;
}

.smash-section .smash-button:focus-visible {
  outline: 3px solid #547447;
  outline-offset: 7px;
}

.smash-section .smash-button[aria-disabled='true'] .smash-face {
  background: #b96f60;
}

.smash-section .smash-status {
  position: absolute;
  bottom: -17px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: max-content;
  padding: 7px 10px;
  border: 1px solid #c8b9a6;
  border-radius: 3px;
  background: #fffdf8;
  color: #696b5e;
  font: 700 .5rem/1.2 'Smash DM Sans', sans-serif;
  letter-spacing: .1em;
  text-shadow: none;
  text-transform: uppercase;
  pointer-events: none;
}

.smash-section #smash-hint {
  max-width: 260px;
  margin-inline: auto;
  color: #696b5e;
  font-size: .7rem;
  line-height: 1.8;
}

@media (prefers-reduced-motion: reduce) {
  .smash-section .smash-face { transition: none; }
}

.name-balloon-group { min-width: 0; text-align: center; }
.name-balloon-group:nth-child(3n + 2) { padding-top: 16px; }
.name-balloon { animation: name-float 6s ease-in-out infinite; }
.name-balloon-group:nth-child(3n + 2) .name-balloon { animation-delay: -2s; }
.name-balloon-group:nth-child(3n) .name-balloon { animation-delay: -4s; }
.name-balloon-group .name-balloon.is-active { animation: name-accent 750ms ease-in-out; animation-play-state: running; }
.name-balloon::after { top: calc(100% + 6px); bottom: auto; left: 49%; width: 15px; height: 30px; border-right: 0; border-left: 1px solid #a3967e; border-radius: 50%; transform: rotate(-10deg); }
.name-balloon::before { bottom: -8px; background: inherit; border: inherit; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.balloon-cloud:is(:hover, :focus-within) .name-balloon.is-active { animation-play-state: running; }
@keyframes name-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-4px) rotate(1deg); } }
@keyframes name-accent { 0%, 100% { transform: none; } 25% { transform: translateY(-6px) rotate(-4deg); } 65% { transform: translateY(-3px) rotate(4deg); } }
#name-attribution-layer { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
.name-tooltip { position: absolute; margin: 0; padding: 12px 16px; border: 1px solid #dbc8df; border-radius: 18px; background: #fffaf4; color: #544258; box-shadow: 0 8px 26px #60496e24; max-width: min(340px, calc(100vw - 24px)); overflow-wrap: anywhere; font-size: .8rem; line-height: 1.6; }
.name-tooltip { width: min(340px, calc(100vw - 24px)); max-height: min(300px, calc(100vh - 24px)); overflow: auto; pointer-events: auto; }
.name-author-list { list-style: none; padding: 0; margin: 0; }
.name-author-list li + li { margin-top: 10px; }
.name-author-list small { display: block; font-size: .7rem; }
@media (prefers-reduced-motion: reduce) { .name-balloon.is-active { animation: none; } }

.name-balloon.neutral { background:#d9c7e9; color:#49364f; }
.event-mode-picker { display:flex; flex-wrap:wrap; gap:16px; margin:24px 0; }
.event-mode-picker label { display:flex; align-items:center; gap:8px; }

/* Organizer contact validation and the mandatory returning-host prompt. */
.input-field[aria-invalid="true"] { border-color: #b32d46; box-shadow: 0 0 0 2px #b32d4626; }
.field-error { color: #a5223b; font-size: .9rem; margin: .4rem 0; }
.host-email-modal { position: fixed; inset: 0; width: min(92vw, 32rem); max-height: 90dvh; overflow: auto; margin: auto; padding: clamp(1.4rem, 5vw, 2.5rem); border: 1px solid #e1d4ca; border-radius: 1.4rem; background: #fffaf4; color: #352b36; box-shadow: 0 0 0 100vmax #352b3670; }
.host-email-modal::backdrop { background: #352b3670; }
.host-email-modal:modal { box-shadow: 0 12px 60px #352b3633; }
.host-email-modal h1 { font-size: clamp(1.7rem, 5vw, 2.3rem); }
.host-email-modal .field { margin-top: 1rem; }
.host-contact { margin: 1.5rem 0 2rem; }

.footer-contact a { display: inline-block; padding-block: 8px; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }