:root {--pink:#ff69b4;--hot:#ff2e86;--soft:#ffd6ea;--bg1:#ffe6f3;--bg2:#ffc2e0;--text:#571433;--white:#ffffff;--shadow:rgba(255, 69, 165, .35)}
[hidden]{display:none!important}
* {box-sizing:border-box}
html,body {height:100%}
body {margin:0;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans','Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';color:var(--text);background:linear-gradient(135deg,var(--bg1),var(--bg2)) fixed}
.bg {position:fixed;inset:0;z-index:-1}
.bg-overlay {position:absolute;inset:0;background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.6),transparent 40%),radial-gradient(circle at 80% 30%,rgba(255,255,255,.5),transparent 45%)}
.floating-hearts {position:absolute;inset:0;overflow:hidden}
.floating-hearts::before,.floating-hearts::after {content:"";position:absolute;left:0;top:0;width:200%;height:200%;background-image:radial-gradient(var(--soft) 8px,transparent 9px),radial-gradient(var(--soft) 6px,transparent 7px),radial-gradient(var(--soft) 10px,transparent 11px);background-size:60px 60px,80px 80px,100px 100px;opacity:.25;animation:drift 35s linear infinite}
.floating-hearts::after {opacity:.18;animation-duration:55s;transform:rotate(15deg)}
@keyframes drift {0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-10%, -10%, 0)}}

.page {max-width:980px;margin:0 auto;padding:32px}
.hero {text-align:center;padding:48px 16px}
.title {font-family:'Great Vibes',cursive;font-size:64px;line-height:1.05;margin:0;color:var(--hot);text-shadow:0 6px 24px var(--shadow)}
.subtitle {margin:8px 0 24px;font-weight:600;color:var(--text)}
.typewriter {min-height:72px;font-size:18px;background:var(--white);padding:16px 20px;border-radius:16px;box-shadow:0 10px 30px var(--shadow);border:2px solid var(--soft)}
.typewriter::after {content:"|";margin-left:6px;animation:blink 1s steps(2,end) infinite;color:var(--hot)}
@keyframes blink {0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.actions {margin-top:18px}
.cta {appearance:none;border:0;border-radius:999px;padding:12px 20px;background:linear-gradient(135deg,var(--pink),var(--hot));color:#fff;font-weight:700;letter-spacing:.3px;box-shadow:0 12px 24px var(--shadow);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.cta:hover {transform:translateY(-2px);box-shadow:0 18px 36px var(--shadow)}
.cta.alt {background:linear-gradient(135deg,#ff9cc8,#ff69b4)}
.cta.small {padding:10px 16px;font-weight:600}

.section-title {text-align:center;margin:24px 0 12px;color:var(--text)}
.hearts-section {padding:8px 0 32px}
.hearts-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:16px;margin:0 auto;max-width:820px}
.heart {position:relative;display:flex;align-items:center;justify-content:center;height:90px;border-radius:16px;background:linear-gradient(135deg,#ff9cc8,var(--pink));box-shadow:0 8px 18px var(--shadow);cursor:pointer;user-select:none;transition:transform .12s ease,filter .12s ease}
.heart:active {transform:scale(.97)}
.heart-shape {width:46px;height:46px;transform:rotate(-45deg);position:relative}
.heart-shape::before,.heart-shape::after {content:"";position:absolute;width:46px;height:46px;background:var(--white);border-radius:50%}
.heart-shape::before {left:0;top:-23px}
.heart-shape::after {left:23px;top:0}
.heart-shape {background:var(--white)}

.toast {position:fixed;left:50%;top:24px;transform:translateX(-50%) translateY(-24px);background:var(--white);color:var(--text);padding:14px 18px;border-radius:14px;box-shadow:0 12px 28px var(--shadow);border:2px solid var(--soft);opacity:0;pointer-events:none;max-width:680px;text-align:center;font-weight:600}
.toast.show {opacity:1;transform:translateX(-50%) translateY(0)}

.footer-note {text-align:center;padding:22px 0;color:var(--text);opacity:.9}

.burst {position:fixed;pointer-events:none;inset:0}
.burst .spark {position:absolute;width:9px;height:9px;background:var(--hot);border-radius:2px;transform:rotate(45deg)}
@keyframes pop {from{transform:translate3d(var(--x),var(--y),0) scale(.7);opacity:.9}to{transform:translate3d(calc(var(--x) * 3),calc(var(--y) * 3),0) scale(0);opacity:0}}

.progress-section {padding:6px 0 22px}
.progress {position:relative;height:16px;background:var(--soft);border-radius:999px;box-shadow:inset 0 2px 6px rgba(0,0,0,.04);max-width:600px;margin:0 auto}
.progress .bar {height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--hot));border-radius:999px;transition:width .2s ease}
.progress .label {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:12px;font-weight:700;color:var(--text)}

.overlay {position:fixed;inset:0;background:rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;padding:20px}
.modal {max-width:640px;width:100%;background:var(--white);border-radius:18px;box-shadow:0 16px 36px var(--shadow);border:2px solid var(--soft);padding:22px;text-align:center}
.modal h3 {margin-top:0;color:var(--hot);font-family:'Great Vibes',cursive;font-size:40px}
.modal p {margin:8px 0;color:var(--text)}
.lock-row {display:flex;gap:10px;justify-content:center;margin:12px 0}
.lock-row input {flex:1;max-width:280px;padding:10px 12px;border-radius:12px;border:2px solid var(--soft);outline:none;font-size:14px}
.lock-row input:focus {border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,105,180,.15)}
.hint {font-size:12px;opacity:.8}

.trail-heart {position:fixed;width:10px;height:10px;background:var(--hot);transform:rotate(45deg);border-radius:2px;opacity:.8;pointer-events:none}
.trail-heart::before,.trail-heart::after {content:"";position:absolute;width:10px;height:10px;background:var(--hot);border-radius:50%}
.trail-heart::before {left:0;top:-5px}
.trail-heart::after {left:5px;top:0}

.scratch-section {padding:8px 0 28px}
.scratch {position:relative;max-width:640px;margin:0 auto;height:220px}
#scratchCanvas {position:absolute;left:0;top:0;width:100%;height:220px;border-radius:18px;box-shadow:0 12px 28px var(--shadow);border:2px solid var(--soft);display:block;z-index:2}
.hidden-message {position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;font-weight:700;color:var(--hot);font-size:20px;pointer-events:none;z-index:1;opacity:0;transition:opacity 400ms ease}

.envelope-section {padding:8px 0 40px}
.envelope {position:relative;width:420px;height:260px;margin:0 auto;perspective:1000px}
.envelope .body {position:absolute;left:0;bottom:0;width:100%;height:180px;background:linear-gradient(135deg,#ff9cc8,var(--pink));border:2px solid var(--soft);border-bottom-left-radius:18px;border-bottom-right-radius:18px;box-shadow:0 12px 28px var(--shadow)}
.envelope .flap {position:absolute;left:0;top:0;width:100%;height:160px;background:linear-gradient(135deg,var(--pink),#ff2e86);border:2px solid var(--soft);border-top-left-radius:18px;border-top-right-radius:18px;transform-origin:top center;transform:rotateX(0);transition:transform 600ms ease;z-index:2;backface-visibility:hidden}
.envelope .seal {position:absolute;left:50%;top:130px;transform:translateX(-50%);width:42px;height:42px;background:var(--hot);border-radius:50%;box-shadow:0 8px 18px var(--shadow)}
.envelope .letter {position:absolute;left:16px;right:16px;bottom:10px;transform:translateY(70%);opacity:0;transition:transform 700ms ease,opacity 700ms ease;z-index:3}
.envelope .letter-inner {background:var(--white);border:2px solid var(--soft);border-radius:12px;box-shadow:0 12px 24px var(--shadow);padding:18px;min-height:180px}
.envelope .letter-text {color:var(--text)}
.envelope .letter-text p {margin:8px 0}
.envelope.open .flap {transform:rotateX(180deg);z-index:0;pointer-events:none}
.envelope.open .seal {opacity:0}
.envelope.open .letter {transform:translateY(-40%);opacity:1}

.letter-overlay {position:fixed;inset:0;background:rgba(0,0,0,.38);display:flex;align-items:center;justify-content:center;padding:20px;z-index:1000}
.letter-modal {position:relative;background:var(--white);border:2px solid var(--soft);border-radius:16px;box-shadow:0 20px 44px var(--shadow);max-width:760px;width:100%;transform:scale(.9);opacity:0;transition:transform .25s ease, opacity .25s ease}
.letter-overlay.show .letter-modal {transform:scale(1);opacity:1}
.close-letter {position:absolute;right:12px;top:12px;background:transparent;border:0;color:var(--hot);font-size:24px;line-height:1;cursor:pointer}
.letter-modal .letter-text {padding:22px;color:var(--text)}