:root { --navy:#102065; --yellow:#f3cb2f; --cream:#fffbea; --orange:#f36d43; --canvas:#d8eee9; }
* { box-sizing:border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; }
body { position:relative; background:var(--canvas); color:var(--navy); font-family:"Assistant",Arial,sans-serif; }
p, figure { margin:0; }
.meme-bg { position:absolute; inset:0; overflow:hidden; pointer-events:none; background:radial-gradient(circle at 22% 52%,#ffe577 0 25%,transparent 25.3%),radial-gradient(circle at 98% 0,#ffd8ce 0 30%,transparent 30.3%),linear-gradient(135deg,#d3eee8 0%,#e5eee3 56%,#f4e6d8 100%); }
.meme-bg::before { content:""; position:absolute; inset:0; background-image:linear-gradient(#10206517 1px,transparent 1px),linear-gradient(90deg,#10206517 1px,transparent 1px); background-size:42px 42px; opacity:.42; }
.meme-scribble { position:absolute; color:var(--orange); line-height:1; font-family:"Heebo",sans-serif; font-weight:900; }
.scribble-one { top:5%; left:4%; font-size:80px; transform:rotate(-20deg); }
.scribble-two { bottom:4%; right:2%; font-size:76px; transform:rotate(14deg); }
.meme-stamp { position:absolute; z-index:1; color:var(--navy); font:900 31px/.84 "Heebo",sans-serif; letter-spacing:-.06em; text-align:center; transform:rotate(-14deg); }
.meme-keren { width:142px; height:102px; top:1%; left:17%; overflow:hidden; }
.meme-keren img { position:absolute; width:154%; height:auto; left:50%; top:50%; transform:translate(-50%,-50%); }
.meme-daniel { bottom:1%; right:12%; transform:rotate(12deg); }
.toast-page { position:relative; z-index:2; direction:ltr; width:100%; height:100dvh; max-width:1660px; margin:auto; display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.65fr); gap:clamp(8px,2.4vw,34px); align-items:center; padding:clamp(12px,3vw,44px); }
.couple-art { display:grid; place-items:center; align-self:stretch; min-width:0; min-height:0; }
.art-frame { position:relative; width:min(100%,69vh); aspect-ratio:1; container-type:inline-size; }
.friends-photo { position:absolute; z-index:2; left:clamp(34px,9vw,140px); bottom:clamp(15px,2.5vh,34px); width:clamp(180px,min(22vw,32vh),300px); aspect-ratio:3260/2280; overflow:hidden; border:6px solid #fffbea; background:#fffbea; box-shadow:7px 9px 0 #102065bb; transform:rotate(-5deg); }
.friends-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.art-frame img { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(9px 16px 0 #10206533); }
.vault-callout { position:absolute; inset:0; pointer-events:none; }
.vault-callout span { position:absolute; top:48%; left:1%; transform:rotate(-10deg); color:var(--navy); font:900 clamp(10px,3.6cqw,21px)/.9 "Heebo",sans-serif; letter-spacing:-.07em; text-align:center; text-shadow:1px 2px 0 #fff9; }
.vault-callout svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; fill:none; stroke:var(--navy); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(1px 1px 0 var(--cream)); }
.art-frame figcaption { position:absolute; bottom:12.4%; left:50%; transform:translateX(-50%); width:43%; white-space:nowrap; text-align:center; font:900 6.3cqw/1 "Heebo",sans-serif; letter-spacing:-.07em; color:var(--navy); text-shadow:1px 2px 0 #fff6ce; }
.toast { direction:rtl; min-height:0; max-height:100%; display:flex; align-items:center; background:var(--cream); border:5px solid var(--navy); box-shadow:13px 14px 0 var(--navy); transform:rotate(-.5deg); padding:clamp(25px,4.4vw,68px); }
.toast-content { width:100%; }
.to { font:900 clamp(31px,3.7vw,56px)/1.18 "Heebo",sans-serif; letter-spacing:-.075em; margin-bottom:clamp(22px,3vh,35px); }
.toast-lines { display:flex; flex-direction:column; gap:clamp(13px,2.8vh,30px); }
.toast-lines p { font-size:clamp(21px,2.05vw,31px); font-weight:700; line-height:1.35; letter-spacing:-.015em; }
.toast-lines strong { font-weight:800; }
.signature { border-top:3px solid var(--navy); margin-top:clamp(22px,4vh,42px); padding-top:clamp(14px,2.5vh,25px); font:900 clamp(22px,2.3vw,33px)/1.18 "Heebo",sans-serif; letter-spacing:-.055em; }
.signature span { color:var(--orange); }
.confetti-layer { position:fixed; inset:0; overflow:hidden; z-index:3; pointer-events:none; }
.confetti-piece { position:absolute; top:-100px; display:grid; place-items:center; opacity:.92; animation:fall var(--duration) linear forwards; animation-delay:var(--delay,0s); transform:rotate(var(--rotation)); }
.confetti-piece.keren,.confetti-piece.daniel { width:44px; height:40px; border-top:4px solid var(--orange); border-bottom:4px solid var(--orange); background:#fff; color:var(--navy); font:900 10px/.88 "Heebo",sans-serif; letter-spacing:-.06em; text-align:center; }
.confetti-piece.cat { width:64px; height:64px; }
.confetti-piece.cat img { display:block; width:100%; height:100%; object-fit:contain; }
.confetti-piece.keren-sunglasses { width:58px; height:58px; }
.confetti-piece.keren-sunglasses img { display:block; width:100%; height:100%; object-fit:contain; }
@keyframes fall { from { transform:translate3d(0,-60px,0) rotate(var(--rotation)); } to { transform:translate3d(var(--drift),115vh,0) rotate(calc(var(--rotation) + 430deg)); } }
@media(max-width:900px) { .toast-page { grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr); gap:16px; padding:20px; } .toast { padding:30px; } .to { font-size:clamp(30px,4vw,40px); } .toast-lines p { font-size:clamp(18px,2.5vw,23px); } .signature { font-size:24px; } .meme-keren { left:3%; } }
@media(min-width:801px) { .art-frame { width:min(100%,55vh); transform:translateY(-7vh); } }
@media(max-width:800px) { .toast-page { grid-template-columns:1fr; grid-template-rows:minmax(0,35%) minmax(0,65%); gap:0; padding:8px 13px 18px; } .couple-art { align-items:end; } .art-frame { width:min(100%,35vh); } .friends-photo { left:9%; bottom:35px; width:clamp(170px,58vw,250px); } .toast { align-self:stretch; padding:clamp(19px,4.8vw,30px); border-width:4px; box-shadow:7px 8px 0 var(--navy); transform:none; } .to { font-size:clamp(27px,7vw,38px); margin-bottom:clamp(12px,2vh,22px); } .toast-lines { gap:clamp(10px,1.7vh,16px); } .toast-lines p { font-size:clamp(17px,4.5vw,21px); line-height:1.27; } .signature { margin-top:clamp(14px,2.3vh,22px); padding-top:clamp(10px,1.5vh,16px); border-top-width:2px; font-size:clamp(20px,5.2vw,26px); } .meme-keren { top:3%; left:2%; width:95px; height:75px; } .meme-daniel { display:none; } .scribble-one { font-size:45px; top:2%; left:30%; } .scribble-two { font-size:42px; } }
@media(max-width:390px), (max-width:800px) and (max-height:700px) { .toast-page { grid-template-rows:minmax(0,31%) minmax(0,69%); } .art-frame { width:min(100%,31vh); } .toast { padding:15px 19px; } .to { font-size:clamp(24px,6.5vw,32px); margin-bottom:11px; } .toast-lines { gap:8px; } .toast-lines p { font-size:clamp(15px,4vw,22px); line-height:1.23; } .signature { font-size:clamp(19px,3vw,25px); margin-top:11px; padding-top:9px; } }
@media(max-width:800px) and (max-height:700px) { .friends-photo { bottom:19px; width:clamp(120px,38vw,190px); } }
@media(max-width:360px) { .friends-photo { left:8%; bottom:16px; width:100px; } }
@media(min-width:801px) and (max-height:700px) { .toast-page { grid-template-rows:1fr; } .toast { padding:20px 25px; } .to { font-size:clamp(25px,3vw,39px); margin-bottom:14px; } .toast-lines { gap:10px; } .toast-lines p { font-size:clamp(16px,1.9vw,23px); line-height:1.25; } .signature { font-size:clamp(19px,2vw,25px); margin-top:14px; padding-top:11px; } }
@media(min-width:801px) and (max-height:500px) { .friends-photo { left:22px; bottom:14px; width:120px; } }
@media(prefers-reduced-motion:reduce) { .confetti-piece { display:none; animation:none; } }