@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Nunito+Sans:wght@400;500;600;700&display=swap');
:root{--bg:#fbf3ed;--ink:#674440;--rose:#ad5b65;--muted:#987c75;--line:#e6d2c8}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Nunito Sans',sans-serif;text-align:center;background-image:radial-gradient(ellipse at 15% 30%,#f4d9d750,transparent 55%),radial-gradient(ellipse at 90% 70%,#f8e5d5,transparent 50%);min-height:100svh}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #c58a52;outline-offset:5px}[hidden]{display:none!important}header{display:flex;justify-content:space-between;max-width:1240px;margin:auto;padding:30px 40px;font-size:12px;letter-spacing:3px;border-bottom:1px solid var(--line)}i{color:var(--rose);font-style:normal;margin-left:12px}.scene{max-width:740px;margin:auto;padding:45px 24px 25px;animation:appear .8s ease}.eyebrow{font-size:12px;letter-spacing:3px;color:var(--muted);margin:0 0 22px}h1{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(48px,7vw,78px);font-weight:400;line-height:1.07;margin:0 0 24px;letter-spacing:-2px}h1 em{font-weight:400;color:var(--rose)}.intro{font-size:17px;line-height:1.9;color:var(--muted);margin:0 0 22px}button:not(.text-button,.sound,#photo-open,#close-photo){border:1px solid var(--rose);border-radius:40px;padding:16px 28px;background:var(--rose);color:white;font-size:15px;letter-spacing:.4px}button span{margin-left:16px}.footnote,.tiny{font-size:13px;color:var(--muted);line-height:1.7}.text-button{display:block;margin:16px auto;border:0;background:none;color:var(--rose);font-size:14px;padding:8px;text-decoration:underline;text-underline-offset:5px}.envelope{height:210px;width:300px;position:relative;margin:50px auto 35px;background:#ecd2c6;border-radius:4px;box-shadow:0 22px 45px #805a3c17;transform:rotate(-4deg);border:1px solid #dcb8a9}.envelope:after{content:'';position:absolute;inset:0;background:linear-gradient(145deg,transparent 49.7%,#f4dfd4 50%) left/50.2% 100% no-repeat,linear-gradient(215deg,transparent 49.7%,#f1d9ce 50%) right/50.2% 100% no-repeat;pointer-events:none}.letter{position:absolute;left:20px;right:20px;top:-24px;background:#fffaf3;padding:25px 12px 50px;font:italic 30px 'Cormorant Garamond',Georgia,serif;border:1px solid #e4d6c8}.letter small{font-size:17px}.flap{position:absolute;inset:0;background:#e7c4b6;clip-path:polygon(0 0,100% 0,50% 58%)}.seal{position:absolute;top:92px;left:127px;background:var(--rose);color:#efd1c6;border:4px double #ce8e8c;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;z-index:2}footer{padding:26px 15px 30px;color:#b2978d;font-size:10px;letter-spacing:2px}footer span{display:block;margin-top:12px;color:var(--rose)}.cake-art{width:300px;height:250px;position:relative;margin:15px auto 0}.halo{position:absolute;width:240px;height:240px;border-radius:50%;background:#f6dfc3;filter:blur(35px);opacity:.65;left:30px;top:-10px}.cake-body{position:absolute;top:127px;left:35px;width:230px;height:95px;background:linear-gradient(90deg,#d88f9b,#edb6bb 45%,#d994a0);border-radius:0 0 30px 30px;border-bottom:8px solid #c88591;box-shadow:inset 0 7px 10px #b5727c15}.cake-body span{display:block;margin-top:33px;color:#fff2e9;font:italic 28px 'Cormorant Garamond',Georgia,serif}.icing{position:absolute;top:100px;left:35px;width:230px;height:55px;border-radius:50% 50% 25% 25%;background:#fff1dd;z-index:2;display:flex;justify-content:space-around;align-items:center;color:var(--rose);box-shadow:0 6px 0 #f5ddce}.icing span{font-size:18px}.plate{position:absolute;top:210px;left:7px;width:286px;height:27px;border-radius:50%;background:#ddc0a1;border-bottom:5px solid #bd9d80;z-index:-0}.cake-body,.icing{z-index:2}.candles{position:absolute;top:47px;left:105px;display:flex;gap:47px;z-index:3}.candle{width:12px;height:67px;background:repeating-linear-gradient(140deg,#fff2db 0 9px,#b7747e 9px 16px);border-radius:3px}.flame{position:absolute;top:-35px;width:17px;height:30px;background:radial-gradient(ellipse at 50% 75%,#fffad1 10%,#f9c35d 55%,#e88c42);border-radius:65% 35% 60% 40%;box-shadow:0 0 24px #ffbc50;animation:flicker .7s infinite alternate;transform-origin:bottom}.smoke{display:none;position:absolute;top:-35px;color:#a99690;font-size:32px}.out .flame{display:none}.out .smoke{display:block;animation:smoke 1.6s forwards}.tiny{margin:0 0 24px}.heart-mark{font:52px Georgia;color:var(--rose);margin-bottom:18px}.small-heart{font-size:27px;color:var(--rose)}#wish h1{font-size:clamp(42px,6vw,62px)}.wish-copy{font-family:'Cormorant Garamond',Georgia,serif;font-size:26px;line-height:1.65;max-width:590px;margin:25px auto}.signature{font:italic 29px 'Cormorant Garamond',Georgia,serif;color:var(--rose);margin:22px 0}.signature span{font-size:16px}.photo-frame{max-width:440px;padding:13px 13px 0;background:#fffaf5;box-shadow:0 15px 40px #6e47471a;margin:28px auto 20px;border:1px solid #eee0d4;transform:rotate(-1deg)}#photo-open{display:block;border:0;background:#f4e6dd;padding:0;width:100%}#photo{display:block;width:100%;height:440px;object-fit:contain;transition:opacity .45s}.photo-caption{display:flex;justify-content:space-between;align-items:center;padding:20px 5px;font:italic 24px 'Cormorant Garamond',Georgia,serif}#counter{font:12px 'Nunito Sans',sans-serif;letter-spacing:2px;color:var(--muted)}.album-controls{display:flex;justify-content:center;gap:13px;align-items:center}.album-controls button{padding:10px 18px!important;background:transparent!important;color:var(--rose)!important;border-color:var(--line)!important}#dots{margin:16px}#dots button{width:7px;height:7px;padding:0!important;margin:0 6px;border:0!important;background:#dec7c0!important}#dots button.active{background:var(--rose)!important}.closing{font:italic 30px/1.5 'Cormorant Garamond',Georgia,serif;margin:32px 0 24px}.sound{border:1px solid var(--line);background:#fff8efed;color:var(--rose);border-radius:30px;padding:10px 15px;font-size:13px}#music-controls{position:fixed;bottom:14px;right:14px;z-index:6;display:flex;gap:5px}dialog{border:0;background:#201916ed;padding:50px 10px 10px;width:100vw;max-width:100vw;height:100svh;max-height:100svh;margin:0}dialog::backdrop{background:#201916}dialog img{width:100%;height:100%;object-fit:contain}#close-photo{position:absolute;right:20px;top:12px;border:0;background:none;color:white;font-size:28px}#confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:10}#confetti i{position:absolute;top:-20px;width:8px;height:13px;animation:fall 3s ease-in forwards}.grain{position:fixed;inset:0;pointer-events:none;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.2' filter='url(%23n)'/%3E%3C/svg%3E")}@keyframes flicker{to{transform:rotate(9deg) scale(.9,1.07)}}@keyframes smoke{to{transform:translate(15px,-65px);opacity:0}}@keyframes fall{to{transform:translateY(110vh) rotate(550deg)}}@keyframes appear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media(max-width:600px){header{padding:22px 22px;font-size:10px}.scene{padding-top:35px}.eyebrow{font-size:10px;letter-spacing:2px}#photo{height:min(52svh,440px)}.wish-copy{font-size:24px}.envelope{margin-top:45px}h1{letter-spacing:-1.5px}footer{padding-bottom:62px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.out .smoke{display:none}}

.mic-meter{max-width:220px;margin:14px auto 0}.mic-meter progress{display:block;width:100%;height:8px;border:0;border-radius:9px;overflow:hidden;accent-color:var(--rose);background:#ead8ce}.mic-meter progress::-webkit-progress-bar{background:#ead8ce}.mic-meter progress::-webkit-progress-value{background:var(--rose);border-radius:9px}.mic-meter progress::-moz-progress-bar{background:var(--rose)}.mic-meter small{display:block;font-size:12px;color:var(--muted);margin-top:8px}.mic-active .flame{animation:none;transform:rotate(var(--flame-angle,0deg)) scale(var(--flame-width,1),var(--flame-height,1));opacity:var(--flame-opacity,1)}@media(prefers-reduced-motion:reduce){.mic-active .flame{transform:none;opacity:var(--flame-opacity,1)}}
