:root {
  --pink:#eaf7ff; --pink2:#d8efff; --rose:#6eaed4; --deep:#315f7c; --gold:#e7b95f; --ink:#365d75; --muted:#7898aa; --white:#f8fdff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--ink);font-family:"DM Sans",sans-serif;overflow-x:hidden;background:linear-gradient(145deg,#f4fbff,#dff2ff 48%,#f7fcff)}
button{font:inherit}
.sky{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 50% 22%,rgba(255,255,255,.98),transparent 52%),radial-gradient(ellipse at 15% 75%,rgba(255,255,255,.55),transparent 35%),linear-gradient(180deg,#bfe7ff 0%,#d9f0ff 48%,#f1faff 100%)}
.cloud{position:absolute;width:260px;height:65px;border-radius:60px;background:rgba(255,255,255,.62);filter:blur(2px)}
.cloud:before,.cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}
.cloud:before{width:105px;height:105px;left:45px;top:-48px}.cloud:after{width:130px;height:130px;right:35px;top:-66px}
.cloud-one{top:28%;left:-110px}.cloud-two{top:66%;right:-120px;transform:scale(.8)}
.hanging-balloons{position:absolute;inset:0 0 auto;height:280px}
.hang{position:absolute;top:-8px;font-size:clamp(34px,5vw,58px);transform-origin:top center;filter:drop-shadow(0 7px 5px #c9829a30);animation:sway 5s ease-in-out infinite}
.hang:after{content:"";position:absolute;top:48px;left:50%;height:110px;border-left:1px solid #c98da3aa}
.h1{left:3%;animation-delay:-1s}.h2{left:16%;top:-18px;animation-delay:-3s}.h3{left:31%;top:-27px;animation-delay:-2s}.h4{left:48%;top:-14px;animation-delay:-4s}.h5{right:31%;top:-26px;animation-delay:-1.5s}.h6{right:17%;top:-15px;animation-delay:-3.5s}.h7{right:4%;animation-delay:-2.5s}.h8{left:64%;top:-38px;animation-delay:-.5s}
.stars{position:absolute;inset:0;background-image:radial-gradient(#ffffff 1.3px,transparent 1.5px),radial-gradient(#fff 1.8px,transparent 2px);background-size:83px 91px,127px 113px;background-position:12px 15px,45px 40px;opacity:.42;animation:twinkle 4s ease-in-out infinite alternate}
@keyframes sway{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes twinkle{to{opacity:.8}}
.envelope-screen{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:70px 20px 45px;transition:opacity .7s,transform .7s}
.envelope-screen.leaving{opacity:0;transform:scale(1.04);pointer-events:none}
.intro-copy .tiny-label,.eyebrow,.section-kicker,.closing-overline{font-size:10px;font-weight:700;letter-spacing:.25em;color:#5485a3}
.intro-copy h1{font:500 clamp(40px,7vw,66px)/1.13 "Playfair Display",serif;margin:18px 0 10px;color:#315f7c}
.intro-copy h1 em{font-family:"Great Vibes",cursive;color:#4f9bc8;font-size:1.2em;font-weight:400}
.intro-copy p{font-size:13px;color:#6f94aa;margin:0 0 34px}
.tap-hint{font-size:9px;letter-spacing:.22em;color:#5d8eaa;margin-top:30px}.tap-hint span{color:#70a9ca;font-size:15px}
.page-shell{width:min(1080px,calc(100% - 42px));margin:auto;opacity:1;transition:opacity .9s}.page-shell.hidden{display:none;opacity:0}.page-shell.visible{animation:appear 1.1s both}
@keyframes appear{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.topbar{height:75px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d99eb333}
.brand{color:#9b6078;text-decoration:none;font-size:10px;letter-spacing:.2em;font-weight:700}.brand span{color:#d49a62;font-size:17px;margin-right:8px}.topbar-note{font-size:11px;color:#ad8797}
.hero{min-height:670px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;padding:65px 0 55px}
.eyebrow{display:flex;align-items:center;gap:13px}.eyebrow span{width:28px;height:1px;background:#dba7b8}
.floating-decor{position:absolute;color:#d9a65e;font-size:27px;animation:float 4s ease-in-out infinite}.decor-left{left:13%;top:27%}.decor-right{right:14%;top:40%;animation-delay:-2s}
.cake-wrap{position:relative;width:270px;height:205px;margin:22px 0 0;filter:drop-shadow(0 0 18px #ffd66dcc) drop-shadow(0 12px 16px #08091899)}
.cake{position:absolute;inset:0}
.cake-tier{position:absolute;border:2px solid #f1c579;border-radius:50% 50% 12px 12px / 18% 18% 10px 10px;background:linear-gradient(90deg,#f8e5bb,#fff6dd 28%,#fffdf2 55%,#f1d9aa);box-shadow:inset 8px 0 12px #dfb87655,inset -8px 0 12px #d6a85c55,0 8px 9px #4d244c55;overflow:visible}
.cake-tier-bottom{left:15px;bottom:21px;width:240px;height:82px}
.cake-tier-top{z-index:2;left:65px;bottom:91px;width:140px;height:68px;border-radius:50% 50% 10px 10px / 28% 28% 10px 10px}
.icing{position:absolute;z-index:1;top:-2px;left:-2px;width:calc(100% + 4px);height:23px;border-radius:50%;background:linear-gradient(180deg,#fffefa,#fff1d7);border:2px solid #fffef5;box-shadow:0 3px 5px #cfaa6c66}
.icing:after{content:"";position:absolute;left:12%;top:11px;width:13px;height:21px;border-radius:0 0 9px 9px;background:linear-gradient(#fffefa,#fff1d7);box-shadow:32px -3px 0 -1px #fff9ec,74px 2px 0 #fff4df,115px -3px 0 -1px #fff9ec}
.cake-sprinkles{position:absolute;z-index:3;left:0;right:0;top:34px;color:#c75c70;text-align:center;font-size:17px;letter-spacing:.22em;text-shadow:0 1px #fff}
.cake-tier-top .cake-sprinkles{top:28px;font-size:13px;letter-spacing:.18em}
.cake-base{position:absolute;z-index:1;bottom:15px;left:5px;width:260px;height:18px;border-radius:50%;background:linear-gradient(180deg,#fffef7,#e9c87e);border:2px solid #ffe6a3;box-shadow:0 3px 10px #ffd56b99}
.cake-plate{position:absolute;bottom:4px;left:0;width:270px;height:18px;border-radius:50%;background:linear-gradient(180deg,#fffefb,#dbefff);border:2px solid #fff3c3;box-shadow:0 0 26px #fff1a899,0 8px 18px #03081766}
.cake-candles{position:absolute;z-index:4;top:19px;left:75px;display:flex;gap:17px;align-items:flex-end}.cake-candles i{height:37px;width:9px;border-radius:4px 4px 2px 2px;background:repeating-linear-gradient(45deg,#c93d59 0 5px,#fff3df 5px 10px);border:1px solid #fff1d5;position:relative;box-shadow:0 0 8px #ffd27277}.cake-candles i:before{content:"";position:absolute;width:13px;height:18px;border-radius:80% 0 80% 80%;background:radial-gradient(ellipse at 35% 68%,#fffde1 0 18%,#fff19a 30%,#ff9c35 70%);top:-20px;left:-3px;transform:rotate(45deg);box-shadow:0 0 12px #ffc66e,0 0 28px #ffc66ecc,0 0 52px #ffdc91bb;animation:flicker .8s infinite alternate}
.cake-bear{position:absolute;z-index:5;bottom:12px;font-size:39px;line-height:1;filter:drop-shadow(0 4px 4px #38213b77);animation:bearBop 2.4s ease-in-out infinite alternate}
.cake-bear-left{left:-1px;transform-origin:bottom center}.cake-bear-right{right:-1px;transform-origin:bottom center;animation-delay:-1.2s}
@keyframes bearBop{to{translate:0 -5px;rotate:5deg}}
@keyframes flicker{to{transform:rotate(35deg) scale(.8);opacity:.75}}
.pre-title{margin:18px 0 0;color:#628ba4;font-size:13px;letter-spacing:.08em}
.hero h1{font:600 clamp(78px,15vw,150px)/1.05 "Playfair Display",serif;letter-spacing:-.06em;margin:0;color:#315f7c;text-shadow:0 9px 28px #bd82901b}.hero h1 span{color:#e4ad4e}
.birthday-rule{display:flex;align-items:center;gap:13px;color:#d39a62;margin:13px 0 20px}.birthday-rule span{height:1px;width:56px;background:#dfb8c2}
.hero-message{font:26px "Playfair Display",serif;color:#4c91b8;margin:0 0 10px}.hero-subtitle{font-size:13px;line-height:1.9;color:#6e8fa3;margin:0}
.surprise-button,.replay-button{margin-top:30px;padding:14px 21px;border:1px solid #88bddd;background:#f8fdffcc;color:#397da5;font-size:11px;font-weight:700;letter-spacing:.07em;cursor:pointer;display:inline-flex;gap:24px;align-items:center;transition:.3s;box-shadow:0 7px 20px #c47f9820}
.surprise-button:hover,.replay-button:hover{transform:translateY(-3px);background:#fff}
.scroll-hint{position:absolute;bottom:14px;color:#b58c9b;font-size:9px;letter-spacing:.2em}
.message-section,.wishes-section{padding:80px 0 55px;text-align:center}.message-card{max-width:720px;margin:30px auto 0;padding:52px 65px;background:#f8fdffcc;border:1px solid #b7dced;box-shadow:0 20px 65px #4e9bc414;position:relative;border-radius:4px}
.message-card:before,.message-card:after{content:"✧";position:absolute;color:#d6a36e;font-size:20px}.message-card:before{top:15px;left:18px}.message-card:after{bottom:15px;right:18px}
.quote-mark{font:65px "Playfair Display",serif;color:#6daed2;height:42px}.message-card h2{font:500 clamp(32px,5vw,46px)/1.2 "Playfair Display",serif;margin:12px 0 22px;color:#315f7c}.message-card h2 em,.closing-section h2 em{color:#4f9bc8}
.message-card p{max-width:540px;margin:0 auto 14px;color:#987e8c;font-size:13px;line-height:2}.signature{margin-top:27px;color:#477f9e;font:italic 16px "Playfair Display",serif}.signature span{color:#d4a05f;margin-left:8px}
.wish-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:35px}.wish-card{padding:30px 22px;border:1px solid #bfdeef;background:#f8fdffb8;transition:.3s;border-radius:5px}.wish-card:hover{transform:translateY(-6px);box-shadow:0 15px 30px #bd82901a}.wish-card>span{font-size:25px;color:#d49a68}.wish-card h3{font:22px "Playfair Display",serif;font-weight:500;margin:15px 0 9px;color:#3f7391}.wish-card p{color:#7898aa;font-size:12px;line-height:1.8;margin:0}
.closing-section{text-align:center;padding:100px 0 90px}.closing-star{font-size:26px;color:#e2ad50;margin-bottom:20px;animation:twinkle 1.5s infinite alternate}.closing-section h2{font:500 clamp(46px,8vw,78px)/1.1 "Playfair Display",serif;color:#81566b;margin:20px 0 14px}.closing-section>p:not(.closing-overline){color:#6e8fa3;font-size:13px}
footer{border-top:1px solid #d99eb333;min-height:70px;display:flex;justify-content:center;align-items:center;gap:17px;color:#7799ad;font-size:9px;letter-spacing:.2em}footer span:nth-child(2){color:#e2ad50}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);padding:13px 20px;border:1px solid #b8dced;background:#f8fdff;color:#397da5;font-size:12px;opacity:0;pointer-events:none;transition:.35s;z-index:20;white-space:nowrap;box-shadow:0 10px 30px #a9687b22}.toast.show{opacity:1;transform:translate(-50%,0)}
.confetti{position:fixed;top:-15px;width:8px;height:13px;z-index:15;pointer-events:none;animation:fall linear forwards;border-radius:2px}
@keyframes fall{to{transform:translate3d(var(--drift),110vh,0) rotate(720deg);opacity:.2}}
.fireworks{position:fixed;inset:0;pointer-events:none;z-index:14;overflow:hidden}.burst{position:absolute;width:5px;height:5px;border-radius:50%;animation:burst 1.1s ease-out forwards;box-shadow:0 0 8px currentColor}
@keyframes burst{from{transform:translate(0,0) scale(.4);opacity:1}to{transform:translate(var(--x),var(--y)) scale(0);opacity:0}}
.gift-reveal-flash{position:fixed;z-index:16;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 48%,#fff9d9 0%,#ffe69b99 12%,#ff9dc855 29%,transparent 65%)}
.gift-reveal-flash.active{animation:giftLightBurst 1.15s cubic-bezier(.15,.65,.25,1) forwards}
.gift-reveal-flash:after{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 48%,#fff4bd88 0deg 3deg,transparent 3deg 16deg);mask-image:radial-gradient(circle at 50% 48%,#000 0 5%,transparent 50%)}
@keyframes giftLightBurst{0%{opacity:0;transform:scale(.45)}20%{opacity:1}65%{opacity:.78;transform:scale(1.12)}100%{opacity:0;transform:scale(1.35)}}
@media(max-width:700px){.page-shell{width:calc(100% - 32px)}.topbar{height:65px}.topbar-note{font-size:9px}.hero{min-height:630px;padding-top:50px}.hang:after{height:75px}.h2,.h5,.h8{display:none}.decor-left{left:4%}.decor-right{right:4%}.message-section,.wishes-section{padding:65px 0 40px}.message-card{padding:45px 23px}.wish-grid{grid-template-columns:1fr;gap:11px}.wish-card{padding:25px 20px}.closing-section{padding:80px 0 70px}.desktop-break{display:none}footer{gap:10px;font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Responsive layout refinements for phones, tablets, and short laptop screens. */
@media (max-width: 700px) {
  .envelope-screen { min-height: 100vh; min-height: 100svh; padding: 48px 18px 32px; }
  .intro-copy .tiny-label { font-size: 9px; letter-spacing: .18em; }
  .intro-copy h1 { font-size: clamp(38px, 10vw, 54px); }
  .intro-copy p { margin-bottom: 26px; }
  .tap-hint { font-size: 8px; letter-spacing: .16em; }
  .hero { min-height: min(700px, calc(100svh - 65px)); padding: 40px 4px 55px; }
  .hero h1 { font-size: clamp(68px, 21vw, 112px); }
  .hero-message { max-width: 100%; font-size: clamp(20px, 6vw, 25px); }
  .hero-subtitle { max-width: 34em; font-size: 12px; }
  .eyebrow { gap: 8px; font-size: 8px; letter-spacing: .18em; }
  .eyebrow span { width: 18px; }
  .floating-decor { font-size: 20px; }
  .decor-left { left: 1%; top: 25%; }
  .decor-right { right: 1%; top: 38%; }
  .bottom-balloons { height: 90px; bottom: -28px; opacity: .45; }
  .bottom-balloons span { font-size: clamp(24px, 8vw, 38px); }
  .toast { width: calc(100% - 32px); max-width: 420px; text-align: center; white-space: normal; }
  .message-card { padding: 42px 22px; }
}

@media (max-width: 380px) {
  .page-shell { width: calc(100% - 24px); }
  .brand { font-size: 8px; letter-spacing: .14em; }
  .topbar-note { font-size: 8px; }
  .hero h1 { font-size: 66px; }
  .hero-message { font-size: 19px; }
  .surprise-button, .replay-button { padding: 13px 15px; gap: 14px; }
  footer { letter-spacing: .12em; }
}

@media (min-width: 701px) and (max-height: 760px) {
  .hero { min-height: 590px; padding-top: 42px; padding-bottom: 48px; }
  .cake-wrap { margin-top: 12px; }
  .pre-title { margin-top: 10px; }
}

@media (min-width: 1400px) {
  .page-shell { width: min(1160px, calc(100% - 80px)); }
  .hero { min-height: 720px; }
}

/* Sky-blue party atmosphere: fuller balloon canopy and floor clusters */
.hanging-balloons{height:310px}
.hang{filter:drop-shadow(0 8px 9px #377da52c);font-size:clamp(38px,5.2vw,64px)}
.hang:after{border-left:1px solid #6dabc888;height:135px}
.h9{left:9%;top:62px;animation-delay:-2.8s}.h10{left:40%;top:34px;animation-delay:-1.2s}
.h11{right:40%;top:76px;animation-delay:-3.8s}.h12{right:8%;top:58px;animation-delay:-.8s}
.bottom-balloons{position:fixed;left:0;right:0;bottom:-24px;height:155px;display:flex;align-items:flex-end;justify-content:space-around;pointer-events:none;z-index:0;opacity:.86}
.bottom-balloons span{font-size:clamp(32px,4.5vw,54px);filter:drop-shadow(0 5px 7px #377da52a);animation:bottomFloat 4.5s ease-in-out infinite}
.bottom-balloons span:nth-child(2n){animation-delay:-1.3s;transform:translateY(-12px)}
.bottom-balloons span:nth-child(3n){animation-delay:-2.6s;transform:translateY(-22px)}
@keyframes bottomFloat{0%,100%{translate:0 0}50%{translate:0 -18px}}
/* Make the cake feel softly illuminated */
.cake-wrap{filter:drop-shadow(0 0 13px #ffd66d88) drop-shadow(0 10px 14px #438db633)}
.cake-candles i:before{box-shadow:0 0 12px #ffc66e,0 0 28px #ffc66eaa,0 0 45px #ffdc91aa}
.cake-plate{box-shadow:0 0 24px #fff8c9aa,0 0 42px #a8dfff66}
.cake-layer{box-shadow:inset 0 4px 10px #ffffff88,0 0 16px #f7c86b55}

/* A shared twilight party scene, visible before and after the envelope opens. */
:root {
  --ink: #f3e8ff;
  --muted: #c0afd9;
}
body {
  color: var(--ink);
  background: linear-gradient(145deg, #090d24, #171238 52%, #101a38);
}
.sky {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(104, 78, 173, .25), transparent 52%),
    radial-gradient(ellipse at 12% 78%, rgba(43, 134, 171, .18), transparent 38%),
    linear-gradient(180deg, #080d24 0%, #111632 55%, #171431 100%);
}
.cloud { background: rgba(140, 157, 208, .10); filter: blur(14px); }
.stars {
  opacity: .7;
  background-image:
    radial-gradient(#fff8d7 1.3px, transparent 1.8px),
    radial-gradient(#b8ddff 1.8px, transparent 2.4px),
    radial-gradient(rgba(255,255,255,.55) 1px, transparent 1.6px);
  background-size: 83px 91px, 127px 113px, 59px 67px;
  background-position: 12px 15px, 45px 40px, 23px 31px;
  filter: drop-shadow(0 0 5px #a6d8ff);
}
.stars::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 22% 28%, #fffbd9 0 1px, transparent 3px),
    radial-gradient(circle at 78% 36%, #d8eaff 0 1.5px, transparent 4px),
    radial-gradient(circle at 65% 72%, #fff3c4 0 1.5px, transparent 4px),
    radial-gradient(circle at 35% 84%, #d5e9ff 0 1px, transparent 3px);
  opacity: .65;
  animation: starGlow 2.8s ease-in-out infinite alternate;
}
@keyframes starGlow { to { opacity: 1; filter: brightness(1.5); } }
.hang { filter: drop-shadow(0 0 9px rgba(212, 190, 255, .36)); }
.hang:nth-child(3n + 1), .bottom-balloons span:nth-child(3n + 1) { filter: hue-rotate(235deg) saturate(1.15) drop-shadow(0 0 9px #cf9bff66); }
.hang:nth-child(3n + 2), .bottom-balloons span:nth-child(3n + 2) { filter: hue-rotate(145deg) saturate(1.2) drop-shadow(0 0 9px #89e5ff66); }
.hang:nth-child(3n), .bottom-balloons span:nth-child(3n) { filter: hue-rotate(300deg) saturate(1.15) drop-shadow(0 0 9px #ff9ec866); }
.envelope-screen { color: #f4eaff; }
.intro-copy .tiny-label, .tap-hint { color: #c2acd9; }
.intro-copy h1 { color: #fff4e2; text-shadow: 0 0 24px #b992ff42; }
.intro-copy h1 em { color: #e2b9ff; }
.intro-copy p { color: #c7b9df; }
.tap-hint span { color: #f2c278; }
.topbar { border-color: #c8a9ff30; }
.brand, .topbar-note { color: #c5b2dc; }
.brand span { color: #ffd27d; }
.eyebrow, .section-kicker, .closing-overline { color: #d0b8ec; }
.eyebrow span, .birthday-rule span { background: #b9a0d35c; }
.hero h1 { color: #fff5e6; text-shadow: 0 0 34px #a47be533; }
.hero h1 span, .birthday-rule, .floating-decor, .closing-star { color: #ffd27c; }
.pre-title, .hero-subtitle, .scroll-hint, .closing-section > p:not(.closing-overline) { color: #c6badb; }
.hero-message { color: #e9c6ff; }
.surprise-button, .replay-button {
  border-color: #c5a5e8;
  background: #211d3dcc;
  color: #f6e8ff;
  box-shadow: 0 0 24px #a783dc26;
}
.surprise-button:hover, .replay-button:hover { background: #34274e; }
.message-card, .wish-card {
  background: rgba(24, 25, 53, .82);
  border-color: #c2a4e548;
  box-shadow: 0 18px 65px #02030b55;
}
.message-card h2, .wish-card h3 { color: #f4e8ff; }
.message-card p, .wish-card p { color: #c7b9d9; }
.quote-mark { color: #d4aeff; }
.message-card:before, .message-card:after, .wish-card > span, .signature span { color: #ffd27c; }
.signature { color: #e6d2f5; }
.closing-section h2 { color: #fff0e0; }
.closing-smiley { margin: 10px auto 18px; font-size: clamp(72px, 13vw, 132px); line-height: 1; filter: drop-shadow(0 0 18px #ffd778aa); animation: smileyFloat 2s ease-in-out infinite alternate; }
.message-card h2 em, .closing-section h2 em { color: #e1b9ff; }
footer { border-color: #c8a9ff30; color: #c5b2dc; }
.toast { background: #211d3d; border-color: #c5a5e8; color: #f6e8ff; box-shadow: 0 10px 30px #02030b88; }
.cake-wrap { filter: drop-shadow(0 0 16px #ffd66d99) drop-shadow(0 10px 14px #08091899); }
.cake-candles i:before { box-shadow: 0 0 14px #ffc66e, 0 0 32px #ffc66ecc, 0 0 52px #ffdc91bb; }
.cake-plate { box-shadow: 0 0 26px #fff1a899, 0 0 48px #a8a0ff77; }
@media (max-width: 700px) {
  .bottom-balloons { opacity: .75; }
}
.party-balloons, .night-sparkles, .smiley-stars, .diya-row { position: absolute; inset: 0; pointer-events: none; }
.party-balloons { position: fixed; overflow: hidden; z-index: 0; }
.party-balloons span {
  position: absolute;
  bottom: -14vh;
  left: var(--left);
  font-size: clamp(25px, 4vw, 48px);
  opacity: .8;
  filter: drop-shadow(0 0 12px #d89bff99);
  animation: balloonRise var(--duration) linear var(--delay) infinite;
}
.party-balloons span:nth-child(1) { --left: 3%; --duration: 19s; --delay: -4s; }
.party-balloons span:nth-child(2) { --left: 9%; --duration: 23s; --delay: -16s; }
.party-balloons span:nth-child(3) { --left: 15%; --duration: 17s; --delay: -9s; }
.party-balloons span:nth-child(4) { --left: 21%; --duration: 25s; --delay: -2s; }
.party-balloons span:nth-child(5) { --left: 27%; --duration: 20s; --delay: -13s; }
.party-balloons span:nth-child(6) { --left: 33%; --duration: 22s; --delay: -7s; }
.party-balloons span:nth-child(7) { --left: 39%; --duration: 18s; --delay: -15s; }
.party-balloons span:nth-child(8) { --left: 45%; --duration: 24s; --delay: -5s; }
.party-balloons span:nth-child(9) { --left: 51%; --duration: 19s; --delay: -11s; }
.party-balloons span:nth-child(10) { --left: 57%; --duration: 26s; --delay: -19s; }
.party-balloons span:nth-child(11) { --left: 63%; --duration: 18s; --delay: -3s; }
.party-balloons span:nth-child(12) { --left: 69%; --duration: 23s; --delay: -14s; }
.party-balloons span:nth-child(13) { --left: 75%; --duration: 20s; --delay: -8s; }
.party-balloons span:nth-child(14) { --left: 81%; --duration: 25s; --delay: -17s; }
.party-balloons span:nth-child(15) { --left: 87%; --duration: 18s; --delay: -6s; }
.party-balloons span:nth-child(16) { --left: 93%; --duration: 22s; --delay: -12s; }
.party-balloons span:nth-child(17) { --left: 37%; --duration: 21s; --delay: -10s; }
.party-balloons span:nth-child(18) { --left: 73%; --duration: 24s; --delay: -18s; }
.party-balloons span:nth-child(3n + 1) { filter: hue-rotate(235deg) drop-shadow(0 0 12px #d89bff99); }
.party-balloons span:nth-child(3n + 2) { filter: hue-rotate(145deg) drop-shadow(0 0 12px #89e5ff99); }
.party-balloons span:nth-child(3n) { filter: hue-rotate(300deg) drop-shadow(0 0 12px #ff9ec899); }
@keyframes balloonRise {
  0% { transform: translate3d(0, 0, 0) rotate(-10deg); opacity: 0; }
  10% { opacity: .78; }
  50% { transform: translate3d(15px, -58vh, 0) rotate(9deg); }
  90% { opacity: .72; }
  100% { transform: translate3d(-8px, -118vh, 0) rotate(-8deg); opacity: 0; }
}
.night-sparkles span {
  position: absolute;
  color: #fff2b7;
  font-size: clamp(34px, 6vw, 78px);
  opacity: .72;
  text-shadow: 0 0 9px #fff4b8, 0 0 25px #e3baff, 0 0 50px #9fcfff;
  animation: starPulse 2.4s ease-in-out infinite alternate;
}
.night-sparkles span:nth-child(1) { left: 8%; top: 18%; }
.night-sparkles span:nth-child(2) { left: 28%; top: 47%; font-size: clamp(26px, 4vw, 52px); }
.night-sparkles span:nth-child(3) { left: 82%; top: 21%; }
.night-sparkles span:nth-child(4) { left: 92%; top: 56%; font-size: clamp(28px, 5vw, 62px); }
.night-sparkles span:nth-child(5) { left: 66%; top: 78%; }
.night-sparkles span:nth-child(6) { left: 18%; top: 82%; font-size: clamp(25px, 4vw, 52px); }
.night-sparkles span:nth-child(n + 7) { display: none; }
@keyframes starPulse { to { transform: scale(1.25) rotate(16deg); opacity: 1; } }
.smiley-stars span {
  position: absolute;
  left: var(--left);
  top: var(--top);
  font-size: clamp(17px, 2.6vw, 34px);
  opacity: .28;
  filter: drop-shadow(0 0 12px #ffd878);
  animation: smileyFloat 5s ease-in-out infinite alternate;
}
.smiley-stars span:nth-child(1) { --left: 4%; --top: 42%; }
.smiley-stars span:nth-child(2) { --left: 13%; --top: 67%; }
.smiley-stars span:nth-child(3) { --left: 24%; --top: 12%; }
.smiley-stars span:nth-child(4) { --left: 35%; --top: 78%; }
.smiley-stars span:nth-child(5) { --left: 44%; --top: 24%; }
.smiley-stars span:nth-child(6) { --left: 56%; --top: 62%; }
.smiley-stars span:nth-child(7) { --left: 67%; --top: 10%; }
.smiley-stars span:nth-child(8) { --left: 76%; --top: 48%; }
.smiley-stars span:nth-child(9) { --left: 88%; --top: 72%; }
.smiley-stars span:nth-child(10) { --left: 96%; --top: 31%; }
.smiley-stars span:nth-child(11) { --left: 8%; --top: 8%; }
.smiley-stars span:nth-child(12) { --left: 19%; --top: 54%; }
.smiley-stars span:nth-child(13) { --left: 31%; --top: 35%; }
.smiley-stars span:nth-child(14) { --left: 40%; --top: 88%; }
.smiley-stars span:nth-child(15) { --left: 51%; --top: 13%; }
.smiley-stars span:nth-child(16) { --left: 63%; --top: 42%; }
.smiley-stars span:nth-child(17) { --left: 79%; --top: 88%; }
.smiley-stars span:nth-child(18) { --left: 92%; --top: 14%; }
@keyframes smileyFloat { to { transform: translateY(-10px) rotate(9deg); opacity: .48; } }
.diya-row {
  position: fixed;
  inset: auto 0 5px;
  z-index: 1;
  display: flex;
  justify-content: space-around;
  align-items: end;
}
.diya-row span {
  font-size: clamp(23px, 3.5vw, 39px);
  filter: drop-shadow(0 0 9px #ffb43e) drop-shadow(0 0 22px #ff7b2d99);
  animation: diyaFlicker 1.1s ease-in-out infinite alternate;
}
.diya-row span:nth-child(even) { animation-delay: -.55s; }
@keyframes diyaFlicker { to { transform: translateY(-4px) scale(1.08); filter: drop-shadow(0 0 14px #ffe26e) drop-shadow(0 0 30px #ff792dcc); } }
.always-smile {
  margin: 18px auto !important;
  color: #ffe28c !important;
  font: 800 clamp(28px, 5vw, 46px)/1.18 "DM Sans", sans-serif !important;
  letter-spacing: .04em;
  text-shadow: 0 0 8px #fff8d9, 0 0 16px #ffcc69, 0 0 34px #ed96ff99;
  animation: smileGlow 1.8s ease-in-out infinite alternate;
}
@keyframes smileGlow { to { text-shadow: 0 0 12px #fff, 0 0 24px #ffe27c, 0 0 48px #ff84c9; } }
.fireworks { z-index: 14; }
.burst { width: 6px; height: 6px; box-shadow: 0 0 10px currentColor, 0 0 22px currentColor; }
@media (max-width: 700px) {
  .party-balloons span { font-size: 27px; }
  .night-sparkles span:nth-child(2), .night-sparkles span:nth-child(4) { display: none; }
  .smiley-stars span { font-size: 18px; }
  .diya-row { bottom: 2px; }
  .diya-row span { font-size: 24px; }
}

.surprise-button {
  position: relative;
  border-color: #ffe29c;
  color: #fff4d3;
  background: linear-gradient(120deg, #45315f, #725083, #45315f);
  background-size: 200% 100%;
  box-shadow: 0 0 12px #ffcb7188, 0 0 28px #d89aff77, inset 0 0 14px #fff5cf24;
  text-decoration: none;
  animation: buttonGlow 2.2s ease-in-out infinite alternate;
  font-size: clamp(13px, 2vw, 16px);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.surprise-button:hover, .surprise-button:focus-visible {
  color: #fff;
  background-position: 100% 0;
  outline: 2px solid #ffe8b1;
  outline-offset: 4px;
  box-shadow: 0 0 18px #ffcb71bb, 0 0 42px #d89affaa;
}
@keyframes buttonGlow {
  to { box-shadow: 0 0 18px #ffcb71bb, 0 0 42px #d89aff99, inset 0 0 16px #fff5cf35; }
}
.birthday-note-screen { min-height: 100vh; min-height: 100svh; position: relative; overflow: hidden; }
.birthday-note-screen.hidden { display: none; }
.birthday-note-page {
  width: min(780px, calc(100% - 36px));
  min-height: 100vh;
  margin: auto;
  padding: 36px 0 90px;
  position: relative;
  z-index: 1;
}
.note-back {
  display: inline-block;
  color: #e4cff7;
  font-size: 13px;
  text-decoration: none;
  padding: 10px 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
}
.note-back span { margin-right: 8px; color: #ffdb8a; font-size: 1.35em; vertical-align: -1px; }
.note-back:hover { color: #ffe29c; }
.birthday-note-card {
  position: relative;
  isolation: isolate;
  margin: clamp(28px, 8vh, 80px) auto 30px;
  padding: clamp(34px, 7vw, 68px);
  text-align: center;
  background: linear-gradient(145deg, #211c3cF2, #17182ff5 55%, #281a3cf2);
  border: 1px solid #f1d29c99;
  border-radius: 18px;
  box-shadow: inset 0 0 0 5px #d3b2f21c, inset 0 0 32px #f6cc8e12,
    0 0 0 4px #d3b2f222, 0 0 34px #aa82db3b, 0 25px 90px #02030b99;
}
.birthday-note-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 13px;
  border: 1px solid #e9c98a66;
  border-radius: 10px;
  pointer-events: none;
}
.birthday-note-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 17px;
  border-radius: 8px;
  background:
    linear-gradient(#f5d99c, #f5d99c) left top / 24px 2px no-repeat,
    linear-gradient(#f5d99c, #f5d99c) left top / 2px 24px no-repeat,
    linear-gradient(#f5d99c, #f5d99c) right top / 24px 2px no-repeat,
    linear-gradient(#f5d99c, #f5d99c) right top / 2px 24px no-repeat,
    linear-gradient(#f5d99c, #f5d99c) left bottom / 24px 2px no-repeat,
    linear-gradient(#f5d99c, #f5d99c) left bottom / 2px 24px no-repeat,
    linear-gradient(#f5d99c, #f5d99c) right bottom / 24px 2px no-repeat,
    linear-gradient(#f5d99c, #f5d99c) right bottom / 2px 24px no-repeat;
  opacity: .68;
  pointer-events: none;
}
.birthday-note-card > * { position: relative; z-index: 1; }
.note-card-star { color: #ffdb8a; font-size: 32px; text-shadow: 0 0 22px #ffdf8a; }
.birthday-note-card .section-kicker { margin: 18px 0; }
.birthday-note-card h1 { color: #fff4e2; font: 500 clamp(42px, 8vw, 68px)/1.15 "Playfair Display", serif; margin: 12px 0 18px; }
.birthday-note-card > p:not(.section-kicker) { color: #d4c6e3; font-size: 15px; line-height: 1.95; }
.birthday-note-card .always-smile { margin: 26px 0 !important; }
.birthday-note-card .smile-promise { margin: -12px 0 30px; color: #fff0be; font: 800 clamp(27px, 4.8vw, 44px)/1.22 "DM Sans", sans-serif; text-shadow: 0 0 8px #fff, 0 0 18px #ffdc70, 0 0 38px #ff8cccaa; }
.smile-deco { display:inline-block; margin-inline:.12em; font-size:.82em; filter:drop-shadow(0 0 9px #ffe37b) drop-shadow(0 0 18px #ff7cc4); animation:smileBounce 1.5s ease-in-out infinite alternate; }
.smile-deco:nth-child(even) { animation-delay:-.75s; }
@keyframes smileBounce { to { transform:translateY(-5px) scale(1.1); } }
.birthday-note-card .note-signoff { margin-top: 34px; color: #ffe29c; font-size: 13px; letter-spacing: .12em; line-height: 2; }
.birthday-note-card .note-signoff strong { color: #fff0c9; font-size: clamp(18px, 3.8vw, 24px); font-weight: 800; text-shadow: 0 0 16px #ffce7a66; }
.signoff-smiley { display:inline-block; margin-left:5px; font-size:1.55em; vertical-align:-.16em; filter:drop-shadow(0 0 10px #ffd778aa); }
.note-stars span {
  position: absolute;
  color: #fff2b7;
  font-size: clamp(30px, 6vw, 66px);
  text-shadow: 0 0 12px #fff4b8, 0 0 35px #c49bff;
  animation: starPulse 2.6s ease-in-out infinite alternate;
}
.note-stars span:nth-child(1) { left: 9%; top: 18%; }
.note-stars span:nth-child(2) { right: 12%; top: 32%; }
.note-stars span:nth-child(3) { left: 18%; bottom: 20%; }
.note-stars span:nth-child(4) { right: 20%; bottom: 12%; }
.note-diyas {
  position: fixed;
  bottom: 4px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  font-size: clamp(24px, 4vw, 40px);
  filter: drop-shadow(0 0 14px #ffad43);
}
@media (prefers-reduced-motion: reduce) {
  .surprise-button { animation: none; }
}

@keyframes envelopeGlow { to { opacity: 1; transform: scale(1.13); } }
.tap-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 18px;
  border: 2px solid #ffe29c;
  border-radius: 5px;
  color: #fff0c9;
  font-size: clamp(13px, 2.3vw, 17px);
  font-weight: 800;
  letter-spacing: .2em;
  background: rgba(30, 23, 55, .55);
  box-shadow: 0 0 12px #ffcb7188, inset 0 0 12px #d89aff33;
  text-shadow: 0 0 8px #ffe29c, 0 0 20px #d89affcc, 0 0 36px #9f7cff99;
  animation: hintGlow 1.8s ease-in-out infinite alternate;
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.tap-hint:hover, .tap-hint:focus-visible {
  border-color: #fff6c9;
  box-shadow: 0 0 18px #ffe29c, 0 0 38px #d89affcc, inset 0 0 18px #ffe29c44;
  transform: scale(1.04);
  outline: none;
}
.tap-hint span { color: #ffe29c; font-size: 1.3em; text-shadow: 0 0 12px #ffe29c; }
@keyframes hintGlow { to { text-shadow: 0 0 12px #ffe29c, 0 0 28px #d89aff, 0 0 46px #9f7cffcc; } }
@media (prefers-reduced-motion: reduce) {
}

/* Touch and safe-area support for current iOS Safari and Android Chrome. */
html { -webkit-text-size-adjust: 100%; }
body, button { -webkit-tap-highlight-color: transparent; }
button, .surprise-button { touch-action: manipulation; }
.envelope-screen {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: max(48px, calc(48px + env(safe-area-inset-top)));
  padding-bottom: max(32px, calc(32px + env(safe-area-inset-bottom)));
}
.birthday-note-screen { min-height: 100vh; min-height: 100svh; }
.birthday-note-page {
  padding-top: calc(24px + env(safe-area-inset-top));
  padding-bottom: calc(90px + env(safe-area-inset-bottom));
}
.diya-row { bottom: max(3px, env(safe-area-inset-bottom)); }
.surprise-button, .replay-button, .note-back { min-height: 48px; }
.surprise-button, .replay-button { justify-content: center; }
.surprise-button:active, .replay-button:active, .note-back:active { transform: scale(.98); }
.note-back:focus-visible, .replay-button:focus-visible {
  outline: 2px solid #ffe8b1;
  outline-offset: 4px;
}
@media (max-width: 430px) {
  .page-shell { width: calc(100% - 28px); }
  .hero { padding-inline: 2px; }
  .surprise-button {
    width: min(100%, 360px);
    padding: 13px 14px;
    gap: 12px;
    line-height: 1.45;
    letter-spacing: .07em;
  }
  .birthday-note-page { width: calc(100% - 28px); }
  .birthday-note-card { padding: 30px 22px; }
  .birthday-note-card > p:not(.section-kicker) { font-size: 14px; }
  .birthday-note-card .note-signoff { letter-spacing: .07em; }
  .party-balloons { opacity: .62; }
  .diya-row span { font-size: clamp(21px, 7vw, 28px); }
}
@media (max-width: 350px) {
  .page-shell { width: calc(100% - 22px); }
  .birthday-note-page { width: calc(100% - 24px); }
  .birthday-note-card { padding: 26px 16px; }
  .brand { font-size: 7px; }
  .topbar-note { font-size: 8px; }
  .party-balloons span:nth-child(even) { display: none; }
}
@media (max-height: 650px) {
  .envelope-screen { justify-content: flex-start; }
  .hero { min-height: 600px; }
}

/* Keep the animated celebration visible while reducing the number of moving accents on touch screens. */
@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  .sky { isolation: isolate; }
  .party-balloons span:nth-child(n + 7),
  .bottom-balloons span:nth-child(n + 7) { display: none; }
  .hang:nth-child(n + 5) { display: none; }
  .night-sparkles span:nth-child(n + 4) { display: none; }
  .smiley-stars span:nth-child(n + 7) { display: none; }
  .diya-row span:nth-child(n + 4) { display: none; }
  .note-stars span:nth-child(n + 3) { display: none; }
  .diya-row { bottom: max(5px, env(safe-area-inset-bottom)); }
  /* Keep the phone layout visually steady; reserve motion for the candle flames and reveal transition. */
  .party-balloons span,
  .bottom-balloons span,
  .hang,
  .stars,
  .night-sparkles span,
  .smiley-stars span,
  .diya-row span,
  .tap-hint,
  .cake-bear,
  .smile-deco,
  .closing-smiley,
  .always-smile { animation: none !important; }
  .party-balloons span { bottom: auto; top: 14%; transform: none; opacity: .42; }
  .party-balloons span:nth-child(even) { top: 66%; }
  .bottom-balloons span,
  .hang,
  .night-sparkles span,
  .smiley-stars span,
  .diya-row span { transform: none; translate: none; }
  .tap-hint { text-shadow: 0 0 8px #ffe29c, 0 0 20px #d89affcc; }
  .envelope-screen {
    padding: max(28px, calc(28px + env(safe-area-inset-top))) 16px
      max(24px, calc(24px + env(safe-area-inset-bottom)));
  }
  .intro-copy h1 { font-size: clamp(36px, 10vw, 50px); }
  .tap-hint {
    max-width: calc(100vw - 32px);
    padding: 10px 12px;
    gap: 7px;
    font-size: 12px;
    letter-spacing: .08em;
    line-height: 1.45;
  }
  .tap-hint span { flex: 0 0 auto; }
  .hero { min-height: 620px; padding: 38px 2px 60px; }
  .wish-card:hover,
  .surprise-button:hover,
  .replay-button:hover { transform: none; }
  .surprise-button:hover, .replay-button:hover { background-position: 0 0; }
}

/* Fluid sizing for tablets, phones, and compact landscape screens. */
@media (min-width: 701px) and (max-width: 1024px) {
  .page-shell { width: calc(100% - 56px); }
  .hero { min-height: clamp(610px, 82svh, 700px); }
  .message-card { padding-inline: clamp(28px, 6vw, 60px); }
  .birthday-note-page { width: min(780px, calc(100% - 48px)); }
}

@media (max-width: 700px) {
  .page-shell { width: calc(100% - 32px); }
  .hero { min-height: clamp(560px, calc(100svh - 65px), 700px); }
  .birthday-note-page { width: min(780px, calc(100% - 32px)); }
  .birthday-note-card { padding: clamp(28px, 7vw, 46px) clamp(20px, 6vw, 40px); }
  .birthday-note-card .smile-promise { font-size: clamp(25px, 5.8vw, 38px); }
  .closing-section { padding-block: clamp(58px, 12vw, 80px); }
  .closing-section h2 { font-size: clamp(44px, 11vw, 68px); }
}

@media (max-width: 430px) {
  .cake-wrap { transform: scale(.92); transform-origin: center top; margin-bottom: -16px; }
  .birthday-note-card .always-smile { font-size: clamp(25px, 7vw, 32px) !important; }
  .birthday-note-card .smile-promise { font-size: clamp(24px, 6.5vw, 30px); }
  .topbar { gap: 10px; }
  .brand { white-space: nowrap; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .envelope-screen { justify-content: flex-start; gap: 8px; padding-block: 18px; }
  .intro-copy h1 { margin-block: 8px; font-size: clamp(32px, 7vh, 48px); }
  .intro-copy p { margin-bottom: 6px; }
  .tap-hint { margin-top: 4px; }
  .hero { min-height: 0; padding-block: 28px 48px; }
}

/* Emphasize the birthday greeting and recipient name. */
.hero-message {
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 700;
  text-shadow: 0 0 10px #ffd27d99, 0 0 24px #f09acb77;
}
.hero h1 {
  font-weight: 700;
  text-shadow: 0 0 12px #ffd27d88, 0 0 30px #e2aaff88, 0 8px 32px #bd829044;
}
@media (max-width: 700px) {
  .hero-message { font-size: clamp(24px, 6.5vw, 32px); }
  .hero h1 { text-shadow: 0 0 10px #ffd27d88, 0 0 23px #e2aaff77, 0 8px 26px #bd829044; }
  .hero .surprise-button { width: min(100%, 390px); margin-top: 12px; padding-inline: 14px; line-height: 1.4; }
}

.envelope-screen{position:relative;isolation:isolate;overflow:hidden}
.intro-copy,.tap-hint{position:relative;z-index:1}
.envelope-button{position:relative;z-index:1;isolation:isolate;display:block;width:min(360px,84vw);height:clamp(205px,54vw,250px);margin:0 auto;border:0;padding:0;background:transparent;cursor:pointer;perspective:900px;transform-style:preserve-3d;filter:drop-shadow(0 24px 28px #090715aa);transition:transform .3s ease,filter .3s ease}
.envelope-button:hover,.envelope-button:focus-visible{transform:translateY(-5px) scale(1.035) rotateX(3deg);filter:drop-shadow(0 0 24px #e8b8ff99) drop-shadow(0 25px 30px #090715aa);outline:none}
.envelope-glow{position:absolute;z-index:-1;inset:-24px;border-radius:50%;background:radial-gradient(ellipse,#ffd78655 0%,#dcaaff3d 42%,transparent 72%);filter:blur(19px);opacity:.9;animation:envelopeGlow 1.9s ease-in-out infinite alternate}
.envelope-back{position:absolute;inset:23% 3% 6%;border:1px solid #d7aa75;border-radius:6px;background:linear-gradient(105deg,#362449 0%,#745184 12%,#604071 48%,#3c2855 88%,#2d1e43 100%);box-shadow:inset 0 2px 10px #fff3,inset 0 -12px 20px #1a102e88,0 14px 24px #09071588,0 2px 0 #e8c18b;transform:rotateX(5deg);transform-origin:bottom center}
.envelope-letter{position:absolute;z-index:1;left:12%;right:12%;top:8%;height:69%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px solid #ead8c2;border-radius:3px;background:linear-gradient(145deg,#fffdf5,#f5ebdc);color:#65466e;box-shadow:0 3px 12px #09071555;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.envelope-letter>span{color:#c49143;font-size:22px}.envelope-letter strong{font:700 20px "Playfair Display",serif;letter-spacing:.14em}.envelope-letter small{font-size:9px;font-weight:700;letter-spacing:.16em;color:#987d9e}
.envelope-front{position:absolute;z-index:3;left:3%;right:3%;bottom:6%;height:62%;border:1px solid #d5a873;border-radius:0 0 6px 6px;background:linear-gradient(115deg,#38254c 0%,#795889 24%,#684678 52%,#4d3467 78%,#312145 100%);clip-path:polygon(0 0,50% 57%,100% 0,100% 100%,0 100%);filter:drop-shadow(0 5px 5px #170c2788)}
.envelope-address{position:absolute;z-index:5;left:0;right:0;bottom:16%;color:#f0d39a;text-align:center;font:800 clamp(11px,2.2vw,14px) "DM Sans",sans-serif;letter-spacing:.24em;text-shadow:0 2px 4px #241238;pointer-events:none}
.envelope-address i{margin:0 5px;color:#ffdf97;font-style:normal}
.envelope-flap{position:absolute;z-index:4;left:3%;right:3%;top:23%;height:48%;border-top:1px solid #d7b27d;background:linear-gradient(155deg,#9874a5 0%,#765586 58%,#553a70 100%);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top center;transition:transform .72s ease;backface-visibility:hidden;filter:drop-shadow(0 5px 7px #170c2799)}
.envelope-seal{position:absolute;z-index:6;left:calc(50% - 21px);top:51%;width:42px;height:42px;display:grid;place-items:center;border:1px solid #6c1d35;border-radius:46% 54% 49% 51% / 52% 46% 54% 48%;background:radial-gradient(circle at 34% 28%,#d9607a 0%,#ad304f 42%,#7d1d3a 78%,#59152d 100%);color:#f8c8b5;font:700 19px "Playfair Display",serif;text-shadow:0 1px 2px #4e102599;box-shadow:inset 0 0 0 2px #e9878d66,inset 0 0 8px #4b0d2455,0 0 0 2px #f2cf9b,0 4px 8px #170c2766;transition:opacity .3s,transform .3s}
.envelope-seal:before{content:"";position:absolute;inset:5px;border:1px solid #f6b5a866;border-radius:inherit;box-shadow:inset 0 0 5px #4b0d2433}
.envelope-button.open .envelope-flap{transform:rotateX(180deg);z-index:0}
.envelope-button.open .envelope-letter{transform:translateY(-35%)}
.envelope-button.open .envelope-seal{opacity:0;transform:scale(.7)}
.envelope-screen .tap-hint{font-weight:900;text-transform:uppercase;letter-spacing:.12em}
@media(max-width:700px){.envelope-button{width:min(340px,86vw);height:clamp(190px,62vw,230px)}.envelope-screen .tap-hint{max-width:calc(100vw - 28px);font-size:clamp(12px,3.5vw,15px);line-height:1.5;letter-spacing:.08em}}
@media(max-height:520px) and (orientation:landscape){.envelope-button{height:min(190px,46vh)}}
@media(prefers-reduced-motion:reduce){.envelope-glow{animation:none}}