/* Satin champagne controls, with restrained borders and a clear pressed state. */
.primary,.outline,.scroll,.text-button,header>a:last-child{border-radius:999px;border:1px solid #b69b73;background:linear-gradient(180deg,#fffdf7 0%,#f1e6d4 48%,#e5d3b5 100%);color:#59452e;box-shadow:inset 0 1px 0 #fff,0 3px 9px #8063411c;text-shadow:none;font-weight:500;letter-spacing:.65px;min-height:48px;transition:background .2s,box-shadow .2s,transform .2s}
.primary:hover,.outline:hover,.scroll:hover,.text-button:hover,header>a:last-child:hover{background:linear-gradient(180deg,#fffdf8,#ead8ba);box-shadow:inset 0 1px 0 white,0 5px 13px #80634126;transform:translateY(-1px)}
.primary:active,.outline:active,.scroll:active,.text-button:active{transform:translateY(1px);box-shadow:inset 0 2px 5px #80634120}
.scroll{font-size:11px;padding:14px 24px;margin-top:20px}
.team,.team.girl{border:1px solid #c9b99f;box-shadow:0 4px 16px #7c695514;background:linear-gradient(155deg,#fffefa,#edf2f4);border-radius:90px 90px 16px 16px}
.team.girl{background:linear-gradient(155deg,#fffefa,#f6e9ec)}
.team::after,.team.girl::after{border-color:#cbbba3;background:#fffaf3;color:#69543b;font-weight:500;letter-spacing:.3px}
.team[aria-pressed=true],.team.girl[aria-pressed=true]{border:1.5px solid #9f8055;box-shadow:inset 0 0 0 3px #fff9,0 3px 13px #7c695518;transform:none}
.team[aria-pressed=true]::after,.team.girl[aria-pressed=true]::after{background:#eadcc5;color:#59452e;border-color:#b69b73}
.answer,.answer.no,.answer.maybe{border:1px solid #ccbaa1;box-shadow:0 3px 12px #7c695511;background:linear-gradient(160deg,#fffdf9,#f0e9dd);border-radius:65px 65px 14px 14px}
.answer.yes{background:linear-gradient(160deg,#fffdf9,#e9f0f3)}.answer.no{background:linear-gradient(160deg,#fffdf9,#f5e8eb)}
.answer:has(input:checked),.answer.no:has(input:checked),.answer.maybe:has(input:checked){border:1.5px solid #a78a62;box-shadow:inset 0 0 0 3px #fff9,0 3px 12px #7c695518;transform:none}
.answer:has(input:checked):after,.answer.no:has(input:checked):after,.answer.maybe:has(input:checked):after{background:#9b805b;border-color:#9b805b}
/* Start the illustration immediately below the baby's names, with room for both bears. */
.hero{border-radius:0;overflow:hidden;background:var(--cream);display:flex;flex-direction:column;justify-content:flex-start}
.hero-copy{padding:18px 22px 0;margin:0 auto;flex:none;width:100%;z-index:2}
.hero-copy>.eyebrow{margin-top:5px}.hero .intro{margin:12px 0 12px;font-size:29px}.hero h1{font-size:clamp(40px,5.8vw,64px)}.hero .divider{margin:10px auto}.hero .parents{font-size:clamp(25px,3vw,32px)}
.hero-note{position:relative;display:table;margin:12px auto 0;padding:8px 15px;max-width:100%;background:rgba(250,245,238,.88);border:1px solid rgba(203,183,154,.5);border-radius:10px;color:#51473e;line-height:1.5;z-index:2}
.hero::after{position:absolute;top:var(--art-start,350px);bottom:0;left:0;right:0;min-height:0;margin:0;aspect-ratio:auto;background:none center bottom / auto 155% no-repeat;mask-image:linear-gradient(to bottom,transparent 0,#000 55px);z-index:0}
.hero .decorations{z-index:1}.hero .scroll{margin-bottom:10px}
.intro-stage{position:relative;--panel-height:850px;--crossfade:0;height:calc(var(--panel-height) + 75svh);isolation:isolate}
.intro-frame{height:var(--panel-height);position:sticky;top:0;max-width:900px;margin:auto}
.intro-frame>.hero,.intro-frame>.welcome{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0}
.intro-frame>.hero{opacity:calc(1 - var(--crossfade));will-change:opacity}
.intro-frame>.welcome{opacity:var(--crossfade);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:45px 28px;background:var(--cream);will-change:opacity;pointer-events:none}
.intro-frame>.welcome.is-current{pointer-events:auto}.intro-frame>.welcome>p{flex:none}.intro-frame>.welcome .decorations{z-index:0}.intro-frame>.welcome h2{max-width:650px;text-wrap:balance}.intro-frame>.welcome .date{margin:25px auto 10px}.intro-frame>.welcome .countdown{margin-top:20px}
@media(max-width:480px){.hero-copy{padding:14px 18px 0}.hero h1{font-size:clamp(36px,10.5vw,46px)}.hero .intro{font-size:26px;margin:10px 0}.hero .parents{font-size:25px}.hero .divider{margin:8px auto}.hero-note{font-size:13px}.intro-frame>.welcome{padding:35px 24px}.intro-frame>.welcome h2{font-size:36px}}
@media(prefers-reduced-motion:reduce){.primary,.outline,.scroll,.text-button,header>a:last-child{transition:none}.intro-stage{height:auto!important}.intro-frame{position:static;height:auto!important}.intro-frame>.hero,.intro-frame>.welcome{position:relative;height:auto;opacity:1;will-change:auto}.intro-frame>.hero{min-height:var(--panel-height)}.intro-frame>.welcome{pointer-events:auto}}