@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,600;0,700;0,900;1,700&display=swap');

:root { --ink:#4b2542; --berry:#c63d74; --cream:#fffaf2; --yellow:#ffd96a; }
* { box-sizing:border-box; }
html, body { min-height:100%; }
body { margin:0; color:var(--ink); background:#f7c9dc; font-family:'Montserrat',Arial,Helvetica,sans-serif; }
button { font:inherit; }
.page-shell { min-height:100svh; display:grid; place-items:center; padding:38px 22px; position:relative; overflow:hidden; background:radial-gradient(circle at 12% 15%,#fff7c9 0 3px,transparent 4px),radial-gradient(circle at 88% 78%,#fff 0 4px,transparent 5px),linear-gradient(135deg,#ffdce9 0%,#f8bfd8 46%,#dca8d8 100%); }
.card { width:min(1050px,100%); min-height:650px; display:grid; grid-template-columns:.88fr 1.12fr; background:rgba(255,250,242,.96); border:3px solid rgba(255,255,255,.85); border-radius:34px; box-shadow:0 28px 80px rgba(95,42,78,.24),0 4px 0 rgba(119,39,78,.08); overflow:hidden; position:relative; z-index:2; }
.photo-side { margin:22px; min-height:480px; position:relative; border-radius:23px; overflow:hidden; transform:rotate(-1deg); box-shadow:0 14px 35px rgba(75,37,66,.2); background:#e7b4ca; }
.photo-side img { width:100%; height:100%; object-fit:cover; object-position:52% center; display:block; }
.photo-side::after { content:''; position:absolute; inset:0; box-shadow:inset 0 0 0 7px rgba(255,255,255,.8); border-radius:23px; pointer-events:none; }
.tape { position:absolute; z-index:2; width:120px; height:32px; background:rgba(255,226,126,.82); top:14px; left:50%; transform:translateX(-50%) rotate(2deg); }
.photo-note { position:absolute; z-index:3; bottom:18px; left:18px; right:18px; margin:0; padding:11px 14px; text-align:center; border-radius:14px; background:rgba(255,250,242,.92); font-weight:700; font-style:italic; }
.content-side { padding:48px 48px 30px 24px; display:flex; flex-direction:column; justify-content:center; }
.eyebrow { margin:0 0 10px; color:var(--berry); font-size:12px; font-weight:900; letter-spacing:.14em; }
h1 { margin:0; max-width:570px; font-family:'Montserrat',Arial,sans-serif; font-size:clamp(38px,5vw,62px); line-height:.95; letter-spacing:-.04em; font-weight:900; }
h1 em { color:var(--berry); text-decoration:underline wavy var(--yellow) 4px; text-underline-offset:7px; }
.intro { margin:17px 0 24px; max-width:500px; color:#79536e; line-height:1.5; }
.machine { border:2px solid #e5a4bd; border-radius:22px; background:#ffd8e6; box-shadow:6px 7px 0 #b94b76; overflow:hidden; }
.machine-top { height:44px; display:flex; align-items:center; gap:7px; padding:0 14px; border-bottom:2px solid #e5a4bd; }
.light { width:11px; height:11px; border-radius:50%; box-shadow:inset 0 -2px 2px rgba(0,0,0,.12); }
.red { background:#ff6481; } .yellow { background:#ffd96a; } .green { background:#81d49a; }
.machine-label { margin-left:auto; font-size:10px; font-weight:900; letter-spacing:.12em; color:#9e3e67; }
.screen { margin:16px 16px 10px; min-height:115px; display:grid; place-items:center; position:relative; padding:22px 28px; border:2px solid #e9d3d7; border-radius:15px; background:var(--cream); animation:pop .34s ease; }
.screen p { margin:0; font-family:'Montserrat',Arial,sans-serif; font-size:clamp(18px,2vw,23px); line-height:1.35; text-align:center; font-weight:700; }
.quote { position:absolute; top:2px; left:10px; color:#efa7bf; font-family:'Montserrat',Arial,sans-serif; font-size:54px; line-height:1; }
.counter { min-height:22px; margin:0 18px 12px; text-align:center; color:#804862; font-size:13px; font-weight:700; }
.machine button { width:calc(100% - 32px); margin:0 16px 17px; padding:15px 20px; display:flex; justify-content:center; gap:10px; border:0; border-radius:14px; color:white; background:linear-gradient(180deg,#df568d,#bd396d); box-shadow:0 5px 0 #8f2854; font-weight:900; cursor:pointer; transition:transform .15s,box-shadow .15s; }
.machine button:hover { transform:translateY(-2px); box-shadow:0 7px 0 #8f2854; }
.machine button:active { transform:translateY(4px); box-shadow:0 1px 0 #8f2854; }
.machine button:focus-visible { outline:4px solid #f2b800; outline-offset:3px; }
.final-message { margin-top:18px; padding:16px 18px; display:grid; grid-template-columns:auto 1fr; gap:5px 10px; border:2px dashed #db6b94; border-radius:16px; background:#fff5b8; animation:pop .5s ease; }
.final-message span { font-size:25px; grid-row:1/3; } .final-message p { margin:0; line-height:1.4; font-size:14px; } .final-message strong { color:var(--berry); font-family:'Montserrat',Arial,sans-serif; }
.signature { margin:22px auto 0; max-width:450px; text-align:center; color:#8b5d79; font-size:12px; line-height:1.5; font-weight:600; }
.floating-things span { position:absolute; z-index:1; left:calc((var(--i) * 13%) + 2%); top:calc((var(--i) * 11%) + 2%); font-size:calc(18px + (var(--i) % 3) * 8px); color:white; opacity:.8; animation:float calc(4s + var(--i) * .3s) ease-in-out infinite alternate; }
.confetti { position:fixed; inset:0; pointer-events:none; z-index:10; }
.confetti i { position:absolute; width:9px; height:14px; left:50%; top:52%; background:hsl(calc(var(--n) * 37deg),82%,62%); animation:confetti .75s ease-out forwards; transform:rotate(calc(var(--n) * 29deg)); }
@keyframes pop { from { opacity:0; transform:scale(.94); } 70% { transform:scale(1.02); } to { opacity:1; transform:scale(1); } }
@keyframes float { to { transform:translateY(-18px) rotate(8deg); } }
@keyframes confetti { to { opacity:0; transform:translate(calc((var(--n) - 9) * 24px),calc(-160px + (var(--n) % 5) * 65px)) rotate(280deg); } }
@media (max-width:760px) { .page-shell { padding:16px; place-items:start center; } .card { grid-template-columns:1fr; border-radius:25px; } .photo-side { height:min(58vh,480px); min-height:360px; margin:14px 14px 0; } .content-side { padding:30px 20px 28px; } h1 { font-size:clamp(38px,12vw,54px); } .screen { min-height:130px; padding:24px 20px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; } }