*{margin:0;padding:0;box-sizing:border-box}
:root{--pink:#e91e63;--dark-pink:#ad1457;--light-pink:#fff0f5;--border:#f48fb1;--text:#333;--muted:#666}
body{font-family:'Cairo',sans-serif;background:linear-gradient(135deg,#fff0f5 0%,#fce4ec 45%,#f3e5f5 100%);min-height:100vh;overflow-x:hidden;position:relative;color:var(--text)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 10% 20%,rgba(255,255,255,.8),transparent 32%),radial-gradient(circle at 90% 80%,rgba(255,182,193,.4),transparent 30%);z-index:0}
.page-wrapper{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:22px;position:relative;z-index:2}
.card{background:rgba(255,255,255,.94);backdrop-filter:blur(8px);padding:28px 22px;border-radius:25px;box-shadow:0 10px 35px rgba(233,30,99,.15);text-align:center;width:100%;max-width:570px;position:relative;z-index:2;max-height:88vh;overflow-y:auto}
.card::-webkit-scrollbar{width:5px}.card::-webkit-scrollbar-thumb{background:#f48fb1;border-radius:10px}
.stage.hidden{display:none}.stage.active{display:block;animation:fadeIn .45s ease-in-out}
.emoji{font-size:49px;margin-bottom:7px;cursor:pointer;transition:transform .2s}.emoji:hover{transform:scale(1.07)}
.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.5px;color:#d81b60;margin:2px 0 8px}
h1{font-size:23px;line-height:1.35;color:#c2185b;margin-bottom:9px}
.hb-title{font-size:24px;color:#ad1457;font-weight:700}
p{color:var(--muted);font-size:14px;line-height:1.75;margin:0 auto 13px}
.btn{padding:11px 21px;font-family:inherit;font-size:14px;font-weight:700;border:0;border-radius:50px;cursor:pointer;transition:transform .2s,background .2s;margin-top:8px}
.primary-btn{background:#e91e63;color:white;box-shadow:0 4px 15px rgba(233,30,99,.25)}.primary-btn:hover{background:#c2185b;transform:translateY(-2px)}
.cake-box{display:flex;flex-direction:column;align-items:center;gap:0;cursor:pointer;margin:10px auto 2px;border:0;background:transparent;font-family:inherit}
.candle{font-size:30px;display:block;animation:flicker 1s infinite alternate}.cake-img{font-size:76px;display:block;line-height:1.2}
.hint-text{font-size:12px;color:#ad1457;margin-top:6px}
.gift-box-interactive{font-size:75px;cursor:pointer;margin:14px auto;transition:transform .3s ease;display:block;border:0;background:transparent}
.subtitle{font-size:13px;color:#555;margin-bottom:12px}
.coupon-card{background:#fff0f5;border:2px dashed #f48fb1;padding:13px 15px;border-radius:12px;text-align:left;margin:10px 0}
.coupon-card h3{font-size:14px;color:#ad1457;margin-bottom:4px}.coupon-card p{font-size:13px;color:#333;margin-bottom:4px}.fine-print{font-size:10px;color:#888;display:block}
.promise-card{background:#fff8e1;border-color:#ffca28}.promise-card h3{color:#f57f17}
.letters-area{text-align:left;margin:15px 0 8px}.letter-list{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto;padding:2px 4px 2px 0}
.letter-button{display:flex;align-items:center;gap:11px;width:100%;padding:11px 12px;border:1px solid #f8bbd0;background:#fff8fb;border-radius:11px;text-align:left;cursor:pointer;font-family:inherit;transition:background .2s,border-color .2s}
.letter-button:hover{background:#fff0f5;border-color:#e91e63}.letter-num{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;border-radius:50%;background:#fce4ec;color:#c2185b;font-size:11px;font-weight:700}
.letter-button-copy{min-width:0;flex:1}.letter-name{display:block;font-weight:700;font-size:13px;color:#ad1457;overflow-wrap:anywhere}.letter-year{display:block;font-size:11px;color:#888;margin-top:3px}.letter-song-label{display:block;font-size:10px;color:#ad1457;font-weight:700;margin-top:6px}.letter-song-list{display:block;font-size:11px;line-height:1.5;color:#666;overflow-wrap:anywhere;margin-top:2px}.letter-arrow{color:#e91e63;font-size:17px;align-self:flex-start;margin-top:5px}
.letter-detail{background:#fff8fb;border:1px solid #f8bbd0;border-radius:13px;padding:17px 15px;margin-top:10px;animation:fadeIn .35s ease}
.letter-detail.hidden{display:none}.letter-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid #f8bbd0}.letter-count{font-size:10px;letter-spacing:.8px;font-weight:700;color:#c2185b}
.back-btn{border:1px solid #f48fb1;background:#fff;color:#ad1457;border-radius:30px;padding:6px 10px;font-family:inherit;font-size:11px;font-weight:700;cursor:pointer}
.letter-greeting{font-size:22px;color:#ad1457;margin:4px 0}.letter-from{font-size:13px;color:#e91e63;font-weight:700;margin-bottom:14px}
.letter-meta{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:15px}.meta-card{background:white;border:1px solid #f8bbd0;border-radius:8px;padding:10px 11px}.meta-label{display:block;color:#999;font-size:10px;letter-spacing:.7px;font-weight:700;margin-bottom:4px}.meta-value{color:#444;font-size:12px;line-height:1.6}.songs{display:flex;flex-wrap:wrap;gap:6px}.song{display:inline-block;background:#fce4ec;color:#ad1457;border-radius:20px;padding:4px 9px;font-size:11px}
.letter-message{font-size:13px;color:#444;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere;text-align:left;margin-bottom:14px}.letter-signoff{font-size:12px;color:#e91e63;font-weight:700;text-align:right}
.final-note{font-size:12px;color:#ad1457;margin-top:14px}
.hearts-container{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:1}.falling-heart{position:absolute;top:-30px;animation:fallLinear linear forwards;opacity:.85}
.studio-credit{margin-top:16px;text-align:center;width:100%;display:flex;justify-content:center;flex-wrap:wrap;gap:8px 15px;font-size:10px;letter-spacing:.7px;color:#9b7183;font-weight:700}
@keyframes fallLinear{0%{transform:translateY(-20px) rotate(0);opacity:0}10%{opacity:.9}100%{transform:translateY(105vh) rotate(360deg);opacity:0}}
@keyframes flicker{0%{transform:scale(1);filter:drop-shadow(0 0 1px #ffeb3b)}100%{transform:scale(1.08);filter:drop-shadow(0 0 6px #ffca28)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:520px){.page-wrapper{padding:13px}.card{padding:24px 16px;max-height:90vh;border-radius:20px}h1{font-size:21px}.hb-title{font-size:22px}.emoji{font-size:43px}.cake-img{font-size:67px}.letter-detail{padding:13px 11px}.letter-toolbar{align-items:flex-start}.studio-credit{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}