:root{--cream:#fffaf1;--ink:#5b5149;--accent:#49657a;--pastel:#d8e7f0;--pale:#edf4f7;--line:#b6cbd7;--gold:#bca273}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:#f3eee5;font:15px/1.6 Arial,sans-serif}body.girl{--accent:#795361;--pastel:#edd4de;--pale:#faf0f3;--line:#d9b5c3}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:5px}[hidden]{display:none!important}.stage{position:relative;max-width:460px;margin:24px auto 16px;background:var(--cream);border:1px solid #ded5c8;box-shadow:0 16px 60px #75675220;overflow:hidden;border-radius:130px 130px 16px 16px}.eyebrow{font:11px/1.6 Arial,sans-serif;letter-spacing:2.3px;text-transform:uppercase;color:var(--accent);margin:0}h1,h2,h3{font-family:Georgia,serif;font-weight:400}h1{font-size:42px;line-height:1.15;margin:20px 0 10px;color:var(--accent)}h1 em{font-weight:400}h2{font-size:28px;line-height:1.2;color:var(--accent);margin:15px 0}h3{font-size:26px;color:var(--accent);margin:10px 0}.cover{min-height:730px;padding:65px 30px 36px;text-align:center;background:radial-gradient(ellipse at 0 5%,var(--pastel),transparent 45%),radial-gradient(ellipse at 100% 85%,var(--pastel),transparent 42%),var(--cream)}.cover .eyebrow{margin-top:6px}.cover-heading{font:italic 35px Georgia,serif;margin:13px 0 38px;color:var(--accent)}.envelope-button{position:relative;border:0;background:transparent;width:100%;height:255px;padding:0;perspective:800px;margin:0 0 22px}.envelope{position:absolute;inset:14px 0 0;background:var(--pastel);border:1px solid var(--line);border-radius:4px;box-shadow:0 15px 30px #5b514925;transform:rotate(-3deg)}.flap{position:absolute;inset:0;background:linear-gradient(145deg,var(--pale),var(--pastel));clip-path:polygon(0 0,100% 0,50% 56%);filter:drop-shadow(0 3px 1px #0003);z-index:2;transform-origin:50% 0}.fold{position:absolute;inset:0;background:linear-gradient(155deg,transparent 49%,var(--line) 49.4%,var(--pastel) 50%);clip-path:polygon(0 0,50% 53%,100% 0,100% 100%,0 100%)}.fold:after{content:'';position:absolute;inset:0;background:linear-gradient(25deg,var(--pastel) 49%,var(--line) 49.4%,transparent 50%)}.seal{position:absolute;z-index:3;left:calc(50% - 31px);top:42%;width:62px;height:62px;background:#f3e8cf;border:3px double var(--gold);border-radius:50%;display:grid;place-items:center;box-shadow:0 3px 7px #53472b25}.seal span{font:32px Georgia,serif;color:#9a7b44}.open-caption{display:block;color:var(--accent);font-size:12px;letter-spacing:2px}.cover-bear{width:125px;height:155px;object-fit:contain;margin:22px auto 0;display:block}.cover .note{font-size:11px;margin:12px 0 0;color:#706860}.opening .flap{animation:flap-open .65s ease forwards}.opening .seal{animation:fade .3s forwards}.opening{animation:cover-out .8s .25s ease forwards}.invitation{padding-bottom:26px;animation:arrive .7s ease}.hero{position:relative;padding:62px 30px 22px;text-align:center;background:radial-gradient(ellipse at 0 0,var(--pastel),transparent 55%),var(--cream)}.hero:before{content:'';position:absolute;inset:16px 16px 0;border:1px solid var(--line);border-radius:115px 115px 0 0;pointer-events:none}.hero .hero-art{display:block;width:240px;height:280px;object-fit:contain;margin:8px auto 2px;animation:float 7s ease-in-out infinite}.hero h1{margin:12px 0 0}.hero .arrival{font:italic 18px Georgia,serif;color:var(--accent);margin:11px 0 21px}.hero .intro{max-width:310px;margin:0 auto;font-size:14px;line-height:1.85}.ribbon{width:50px;margin:25px auto 0;color:var(--gold);font-size:24px}.countdown{padding:22px 28px 27px;text-align:center;background:var(--pale);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:20px 16px 25px}.numbers{display:grid;grid-template-columns:repeat(4,1fr);margin-top:12px;gap:8px}.numbers strong{font:30px Georgia,serif;color:var(--accent);display:block;font-variant-numeric:tabular-nums}.numbers small{font-size:9px;letter-spacing:1.3px;color:var(--ink)}.cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0 25px}.paper{min-height:158px;color:var(--accent);background:#fffdf8;border:1px solid var(--line);box-shadow:0 5px 12px #6f625311;text-align:center;padding:19px 10px;border-radius:65px 65px 9px 9px;transition:transform .2s}.paper:hover{transform:translateY(-3px)}.paper .symbol{display:block;font:28px Georgia,serif;color:var(--gold);margin-bottom:12px}.paper .title{display:block;font:italic 23px Georgia,serif}.paper small{display:block;font:9px Arial,sans-serif;letter-spacing:1.8px;margin-top:13px}.footer-note{text-align:center;margin:26px 28px 0;font:italic 17px/1.6 Georgia,serif;color:var(--accent)}.tiny-bear{height:95px;width:85px;object-fit:contain;display:block;margin:16px auto 0}.controls{max-width:460px;margin:0 auto 15px;padding:0 12px;display:flex;justify-content:space-between;gap:10px}.controls button{background:var(--cream);color:var(--accent);border:1px solid var(--line);border-radius:30px;font-size:12px;min-height:44px;padding:10px 17px}.sample{text-align:center;font:11px Arial,sans-serif;color:#746b62;margin:14px 16px 26px}.audio-status{max-width:460px;margin:auto;padding:10px 15px;text-align:center;font-size:12px}dialog{width:min(92vw,420px);border:1px solid var(--line);border-radius:100px 100px 18px 18px;background:var(--cream);color:var(--ink);padding:55px 28px 30px;text-align:center;max-height:88svh;overflow:auto;box-shadow:0 20px 80px #322e3440}dialog::backdrop{background:#423d4166;backdrop-filter:blur(5px)}.dismiss{position:absolute;right:24px;top:21px;border:0;background:transparent;color:var(--accent);font-size:27px;width:44px;height:44px}.modal-art{height:130px;width:115px;object-fit:contain;margin:6px auto 15px}dialog p{font-size:14px;margin:10px 0}dialog .date{font-weight:600;color:var(--accent)}.calendar{max-width:280px;margin:22px auto;padding:15px;border:1px solid var(--line);border-radius:12px;background:var(--pale)}.calendar-title{font:12px Arial,sans-serif;letter-spacing:1px;color:var(--accent)}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:12px}.calendar-grid span{font-size:12px;display:grid;place-items:center;min-height:28px}.calendar-grid .weekday{font-size:10px}.calendar-grid .chosen{border-radius:50%;background:var(--accent);color:white}.separator{height:1px;background:var(--line);width:65px;margin:24px auto}.selection-card{max-width:800px;margin:60px auto;padding:40px 24px;text-align:center;background:var(--cream);border:1px solid #ded5c8;border-radius:22px}.selection-card h1{font-size:48px}.choices{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:30px 0}.choice{display:block;text-decoration:none;padding:28px 12px;border:1px solid var(--line);border-radius:100px 100px 12px 12px;color:var(--accent);background:var(--pale)}.girl-choice{--accent:#795361;--pale:#faf0f3;--line:#d9b5c3}.choice img{display:block;width:100%;height:230px;object-fit:contain}.choice span{display:block;font:italic 28px Georgia,serif;margin:14px 0}.choice small{font-size:10px;letter-spacing:1.5px}@keyframes float{50%{transform:translateY(-5px)}}@keyframes arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes flap-open{to{transform:rotateX(175deg)}}@keyframes fade{to{opacity:0}}@keyframes cover-out{to{opacity:0;transform:translateY(-25px)}}@media(max-width:500px){.stage{margin:0 auto 15px;border-radius:115px 115px 10px 10px}.cover{min-height:690px;padding:54px 28px 25px}.hero{padding-top:55px}.hero .hero-art{width:215px;height:255px}.selection-card{margin:15px 12px;padding:30px 15px}.choices{gap:12px}.choice img{height:170px}.choice span{font-size:23px}.choice{padding:20px 6px}.selection-card h1{font-size:40px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}