:root{font-family:"Trebuchet MS","Segoe UI",sans-serif;color:#64283f;background:#f8c8d9;font-synthesis:none;color-scheme:light}
*{box-sizing:border-box}
body{margin:0;min-width:280px;background:radial-gradient(circle at 1px 1px,#b3466e19 1px,transparent 0) 0 0/22px 22px}
main{min-height:100svh;display:grid;place-items:center;padding:44px 24px;position:relative;overflow:hidden}
.card{width:min(100%,550px);min-height:610px;padding:42px 42px 22px;background:#fff9fc;border:2px solid #fff;border-radius:36px;box-shadow:0 18px 0 -9px #eaa7bf,0 30px 70px #a9346020;text-align:center;position:relative;z-index:1}
.picture-frame{width:min(100%,300px);margin:0 auto 30px;padding:10px 10px 22px;background:#fff;border:1px solid #efdee5;box-shadow:0 7px 15px #63213b12;transform:rotate(-3deg);position:relative}
.picture{height:208px;display:grid;place-items:center;overflow:hidden;background:#f8e9ef}
.picture img{width:100%;height:100%;object-fit:contain;grid-area:1/1;position:relative}
.fallback{font-size:85px;grid-area:1/1}
[hidden]{display:none!important}
.tape{position:absolute;width:86px;height:25px;background:#f4acc8b8;top:-12px;left:calc(50% - 43px);transform:rotate(5deg);z-index:2}
.photo-heart{position:absolute;bottom:-17px;right:-12px;color:#d9477a;font-size:46px;transform:rotate(17deg);text-shadow:2px 2px #fff}
h1{font-size:clamp(1.75rem,4.8vw,2.4rem);font-weight:800;letter-spacing:-.045em;line-height:1.25;margin:0 auto 28px;max-width:440px;overflow-wrap:break-word}
h1:focus{outline:none}
.card[data-step="0"] h1{font-size:clamp(1.35rem,4.1vw,1.7rem);line-height:1.38;letter-spacing:-.025em}
.card[data-step="6"] h1{font-size:clamp(1.6rem,4.5vw,2rem);line-height:1.35}
.actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
button{font:700 1.1rem/1.2 "Trebuchet MS","Segoe UI",sans-serif;border:2px solid #b52d60;border-radius:18px;padding:15px 29px;min-height:54px;min-width:130px;cursor:pointer;background:#b52d60;color:#fff;box-shadow:0 4px 0 #842144;transition:transform .15s,box-shadow .15s,background .15s;-webkit-tap-highlight-color:transparent}
button:hover{background:#a52454;transform:translateY(-2px);box-shadow:0 6px 0 #842144}
button:active{transform:translateY(3px);box-shadow:0 1px 0 #842144}
button:focus-visible{outline:3px solid #64283f;outline-offset:5px}
button.secondary{color:#823a54;background:#f9e7ee;border-color:#e8bbcb;box-shadow:0 4px 0 #e8bbcb}
button.secondary:hover{background:#f3d5e1}
.reply{font-size:1rem;line-height:1.45;min-height:2.9em;margin:20px 0 0;color:#9a2e56;font-weight:700}
.decoration{position:absolute;color:#d65c8970;font-family:Georgia,serif;user-select:none;pointer-events:none}
.decoration-one{font-size:140px;left:calc(50% - 450px);top:16%;transform:rotate(-18deg)}
.decoration-two{font-size:75px;right:calc(50% - 420px);top:24%;transform:rotate(12deg)}
.decoration-three{font-size:90px;right:calc(50% - 440px);bottom:16%;transform:rotate(18deg)}
.enter{animation:enter .32s ease-out both}
.nudge{animation:nudge .3s ease-out}
@keyframes enter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes nudge{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media(max-width:600px){main{padding:30px 17px}.card{min-height:570px;padding:34px 24px 15px;border-radius:30px}.picture-frame{width:260px;margin-bottom:28px}.picture{height:190px}.decoration-one{left:-40px;top:1%;font-size:100px}.decoration-two{right:-14px;top:auto;bottom:1%;font-size:64px}.decoration-three{display:none}}
@media(max-width:360px){.card{padding-inline:17px}.picture-frame{width:220px}.picture{height:165px}button{padding-inline:20px;min-width:110px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}