@font-face{font-family:Pixelify;src:url('assets/pixelify.ttf') format('truetype');font-display:swap}
@font-face{font-family:Press;src:url('assets/press-start.ttf') format('truetype');font-display:swap}
:root{--blush:#ffe0ed;--paper:#fff4f6;--pink:#ef719c;--raspberry:#902b50;--line:#cf527b;--shadow:#efadc4;--red:#cb2449}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--blush);color:var(--raspberry);font-family:Pixelify,monospace;font-size:18px;min-height:100svh;transition:background-color .4s;background-image:linear-gradient(#ffffff25 1px,transparent 1px),linear-gradient(90deg,#ffffff25 1px,transparent 1px);background-size:24px 24px}
main{position:relative;z-index:1;max-width:440px;margin:auto;padding: max(28px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom));min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.topline{display:flex;align-items:center;justify-content:space-between;padding:0 4px 15px;font-size:12px;letter-spacing:2px}
.card{background:var(--paper);border:3px solid var(--line);box-shadow:6px 6px 0 var(--shadow);position:relative}
.card:before,.card:after{content:'';position:absolute;width:6px;height:6px;background:var(--blush);z-index:2}
.card:before{left:-3px;top:-3px}.card:after{right:-3px;bottom:-3px}
.window-bar{height:34px;padding:0 12px;background:#ffd0e1;border-bottom:3px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:1px}
.screen{padding:24px 22px 26px;text-align:center;animation:appear .3s steps(5,end)}
.photo-frame{position:relative;border:3px solid var(--line);padding:5px;background:white;box-shadow:4px 4px 0 #f2bbce;margin:0 auto 28px;transform:rotate(-2deg)}
.photo-frame img{display:block;width:100%;height:185px;object-fit:cover;object-position:center 42%}
.photo-frame.boy{width:206px;transform:rotate(2deg)}
.boy img{height:220px;object-position:center 38%}
.photo-stamp{position:absolute;bottom:-13px;right:8px;padding:5px 10px;background:#fff0a9;color:#8d503d;font-size:13px;transform:rotate(3deg);box-shadow:2px 2px 0 #cb9679}
.eyebrow{margin:0 0 12px;font-size:12px;letter-spacing:2px;overflow-wrap:anywhere}
h1{font-family:Press,monospace;font-weight:400;font-size:17px;line-height:1.65;letter-spacing:-.5px;margin:0 auto 12px;overflow-wrap:anywhere}
h1:focus{outline:none}
.subtitle{font-size:18px;line-height:1.3;margin:0 0 23px}
form{text-align:left}label{display:block;font-size:14px;margin-bottom:8px}
input{width:100%;border:2px solid var(--line);border-radius:0;background:#fffafd;color:var(--raspberry);font:20px Pixelify,monospace;padding:13px 12px;min-height:50px;box-shadow:inset 3px 3px 0 #fce0e9}
input::placeholder{color:#b76a87;opacity:1}
.error{font-size:14px;margin:6px 0;min-height:18px}
button{cursor:pointer;border:2px solid var(--raspberry);border-radius:0;font:22px Pixelify,monospace;min-height:52px;padding:12px 18px;box-shadow:0 5px 0 var(--raspberry);touch-action:manipulation;transition:transform .1s,box-shadow .1s}
button:active{transform:translateY(4px);box-shadow:0 1px 0 var(--raspberry)}
.primary{background:var(--pink);color:#4e1830;width:100%;display:flex;align-items:center;justify-content:center;gap:12px}
.secondary{background:#fff4f6;color:var(--raspberry)}
button:focus-visible,input:focus-visible{outline:3px solid #622750;outline-offset:5px}
.answers{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;margin-top:6px}
.tiny{font-size:12px;margin:23px 0 0;letter-spacing:1px}
footer{display:flex;align-items:center;justify-content:center;gap:10px;font-size:12px;margin-top:26px;letter-spacing:.5px;text-align:center}
.mini-heart,.floating-heart{display:inline-block;background:currentColor;clip-path:polygon(0 20%,20% 20%,20% 0,40% 0,40% 20%,60% 20%,60% 0,80% 0,80% 20%,100% 20%,100% 60%,80% 60%,80% 80%,60% 80%,60% 100%,40% 100%,40% 80%,20% 80%,20% 60%,0 60%);width:14px;height:14px;flex-shrink:0}
footer .mini-heart{width:8px;height:8px}
.sky{position:fixed;inset:0;overflow:hidden;pointer-events:none;color:#ed8faf}
.floating-heart{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);opacity:.3;animation:drift var(--duration) ease-in-out var(--delay) infinite alternate}
.sad{padding:70px 24px;min-height:470px;display:flex;flex-direction:column;justify-content:center}
.broken-heart{width:96px;height:96px;align-self:center;margin-bottom:32px;shape-rendering:crispEdges;animation:sigh 1.5s steps(3) infinite}
.waiting{display:flex;justify-content:center;gap:9px;margin-top:16px}.waiting span{width:8px;height:8px;background:var(--pink);animation:blink 1s steps(2) infinite}.waiting span:nth-child(2){animation-delay:.2s}.waiting span:nth-child(3){animation-delay:.4s}
body[data-screen="yes-screen"]{background-color:var(--red);color:#fff0d8;--line:#831936;--shadow:#a7183a;--blush:#cb2449}
body[data-screen="yes-screen"] .card{background:#ed4464;color:#fff4df}
body[data-screen="yes-screen"] .window-bar{background:#dc3457;color:#fff0d8}
body[data-screen="yes-screen"] .sky{color:#ffb9ca}
.happy h1{font-size:18px;margin-bottom:25px}.happy .photo-frame{margin-bottom:28px}.happy .subtitle{margin:19px 0 0;font-size:16px}
.forever{display:flex;justify-content:center;align-items:center;gap:14px}.forever p{font-size:23px;line-height:1.3;margin:0}.forever strong{font-weight:400;font-size:27px}
@keyframes appear{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes drift{to{transform:translateY(-24px) rotate(10deg)}}
@keyframes sigh{50%{transform:translateY(5px)}}
@keyframes blink{50%{opacity:.2}}
@media(min-width:700px){main{max-width:460px;padding-top:40px;padding-bottom:40px}.screen{padding:28px}.photo-frame img{height:200px}.boy img{height:230px}}
@media(max-width:350px){main{padding-left:16px;padding-right:16px}.screen{padding:22px 16px}h1{font-size:15px}.topline{font-size:10px}.window-bar{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.sound-toggle{font:12px Pixelify,monospace;min-height:48px;padding:6px 10px;border:1px solid var(--line);background:var(--paper);color:var(--raspberry);box-shadow:2px 2px 0 var(--shadow);letter-spacing:0}
.topline{padding-bottom:12px}
.love-envelope{width:122px;height:88px;margin:30px auto 36px;border:3px solid var(--line);background:linear-gradient(32deg,transparent 48%,#f1aac3 49%,#f1aac3 51%,transparent 52%),linear-gradient(-32deg,transparent 48%,#f1aac3 49%,#f1aac3 51%,transparent 52%),#ffd7e6;box-shadow:5px 5px 0 var(--shadow);display:grid;place-items:center;transform:rotate(-5deg)}
.love-envelope .mini-heart{width:30px;height:30px;color:#d43c6e;filter:drop-shadow(2px 2px 0 #fff)}
#name-screen{padding-top:30px;padding-bottom:32px}
.greeting{font:18px/1.6 Press,monospace;margin:0 0 20px;overflow-wrap:anywhere}
.welcome h1{font-size:23px;margin:12px 0 16px}.welcome .photo-frame{margin-top:25px}.welcome{padding-top:30px}
body[data-screen="yes-screen"] .sound-toggle{background:#ed4464;color:#fff4df}
.happy{padding:22px 14px 25px;overflow:hidden}
.heart-crown{width:66px;margin:0 auto 10px;animation:crown-pop .75s .2s both cubic-bezier(.2,1.5,.5,1)}
.heart-crown svg{display:block;width:100%;fill:#a90e34;stroke:#ffe1e8;stroke-width:3;filter:drop-shadow(0 4px 0 #8c1736)}
.happy .initials{font-size:38px;line-height:1.25;margin:0;letter-spacing:1px;animation:initials-in .7s .4s both}.initials span{font-size:25px;vertical-align:middle}
.heart-stage{position:relative;width:100%;max-width:360px;aspect-ratio:400/380;margin:8px auto 14px;isolation:isolate;animation:heart-rise 1.5s .15s both cubic-bezier(.16,1,.3,1)}
.heart-stage:before{content:'';position:absolute;inset:14% 10%;border-radius:50%;background:radial-gradient(circle,#ffb4cfa8,transparent 70%);filter:blur(10px);z-index:-1;animation:halo 3s 1.6s ease-in-out infinite}
.couple-heart{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 12px 10px #80123966);animation:heartbeat 2.8s 1.7s ease-in-out infinite;transform-origin:center 60%}
.couple-cutout{animation:couple-reveal 1s .8s both}
.heart-orbit{position:absolute;inset:0;pointer-events:none}.heart-orbit .mini-heart{position:absolute;color:#ffe6ef;animation:sparkle 2s ease-in-out infinite}.heart-orbit .mini-heart:nth-child(1){left:2%;top:30%;width:18px;height:18px}.heart-orbit .mini-heart:nth-child(2){right:0;top:15%;animation-delay:.6s;width:23px;height:23px}.heart-orbit .mini-heart:nth-child(3){right:8%;bottom:12%;animation-delay:1.2s}
.happy .forever{animation:initials-in .8s 1.2s both}.happy .subtitle{animation:initials-in .8s 1.4s both}
body[data-screen="yes-screen"] .floating-heart{opacity:.55;animation:heart-rain var(--duration) linear var(--delay) infinite}
@keyframes heart-rise{from{opacity:0;transform:translateY(120px) scale(.3) rotate(-12deg)}60%{opacity:1;transform:translateY(-12px) scale(1.06) rotate(3deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes heartbeat{0%,100%{transform:scale(1)}15%{transform:scale(1.045)}28%{transform:scale(1)}40%{transform:scale(1.025)}}
@keyframes couple-reveal{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes crown-pop{from{opacity:0;transform:scale(.1) rotate(-20deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes initials-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes halo{50%{transform:scale(1.2);opacity:.7}}
@keyframes sparkle{50%{transform:translateY(-14px) scale(1.3);opacity:.5}}
@keyframes heart-rain{from{transform:translateY(100vh) rotate(-15deg)}to{transform:translateY(-100vh) rotate(20deg)}}
@media(max-width:350px){.greeting{font-size:16px}.happy .initials{font-size:32px}.welcome h1{font-size:19px}.topline{letter-spacing:1px}}
@media(prefers-reduced-motion:reduce){.heart-stage,.heart-crown,.initials,.couple-cutout,.happy .forever,.happy .subtitle{opacity:1;transform:none}}
.sound-toggle,body[data-screen="yes-screen"] .sound-toggle{display:grid;place-items:center;width:48px;height:48px;padding:10px;background:none;border:0;box-shadow:none;color:inherit}
.sound-toggle svg{width:27px;height:27px;shape-rendering:crispEdges}.speaker-mute{display:none}.sound-toggle[aria-pressed="false"] .speaker-waves{display:none}.sound-toggle[aria-pressed="false"] .speaker-mute{display:block}
.happy{position:relative}.heart-crown svg{shape-rendering:crispEdges;stroke-linejoin:miter}.couple-heart use,.couple-heart>path{shape-rendering:crispEdges}
.heart-stage{animation:pixel-heart-launch 2s .1s both cubic-bezier(.16,1,.3,1)}
.couple-heart{animation:pixel-heart-beat 2.3s 2s steps(5,end) infinite}
.heart-crown{animation:pixel-crown 1.1s .3s both steps(8,end)}
.happy .initials{animation:initials-bounce 1.3s .65s both cubic-bezier(.2,1.5,.4,1)}
.couple-cutout{animation:portrait-flash 1.2s 1s both steps(8,end)}
.happy .forever{animation:initials-in 1s 1.8s both}.happy .subtitle{animation:initials-in 1s 2.1s both}
.celebration-burst{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:5}
.burst-particle{position:absolute;top:53%;left:50%;width:8px;height:8px;background:var(--confetti-color);color:var(--confetti-color);opacity:0;animation:pixel-burst 2.7s var(--burst-delay) both cubic-bezier(.1,.7,.4,1)}
.burst-particle.mini-heart{width:16px;height:16px}
.heart-orbit{animation:orbit-spin 18s 2s linear infinite}.heart-orbit .mini-heart{animation:sparkle 1.5s steps(4,end) infinite}
@keyframes pixel-heart-launch{0%{opacity:0;transform:translateY(190px) scale(.08) rotate(-25deg)}25%{opacity:1;transform:translateY(-35px) scale(.75) rotate(12deg)}50%{transform:translateY(8px) scale(1.12) rotate(-5deg)}70%{transform:translateY(-8px) scale(.97) rotate(2deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes pixel-heart-beat{0%,100%{transform:scale(1) rotate(0)}12%{transform:scale(1.07) rotate(-1deg)}24%{transform:scale(1)}36%{transform:scale(1.04) rotate(1deg)}48%{transform:scale(1)}}
@keyframes pixel-crown{0%{opacity:0;transform:translateY(-70px) scale(3) rotate(-20deg)}60%{opacity:1;transform:translateY(8px) scale(.8) rotate(6deg)}100%{opacity:1;transform:none}}
@keyframes initials-bounce{0%{opacity:0;transform:scale(.2)}65%{opacity:1;transform:scale(1.18)}100%{opacity:1;transform:scale(1)}}
@keyframes portrait-flash{0%{opacity:0;transform:translateY(50px)}40%{opacity:1}55%{opacity:.3}100%{opacity:1;transform:none}}
@keyframes pixel-burst{0%{opacity:0;transform:translate(0,0) scale(0)}10%{opacity:1}65%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--turn)) scale(.6)}}
@keyframes orbit-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.burst-particle{display:none}.heart-stage,.heart-crown,.initials,.couple-cutout,.happy .forever,.happy .subtitle{opacity:1;transform:none}}
body[data-screen="sad-screen"]{background-color:#d9d0ea;color:#65547a;--line:#9b88b5;--shadow:#bdb0d0;--blush:#d9d0ea;--pink:#b49cca;--raspberry:#65547a}
body[data-screen="sad-screen"] .card{background:#f1eaf6}body[data-screen="sad-screen"] .window-bar{background:#e5d9ef}body[data-screen="sad-screen"] .sky{color:#a28bb7;opacity:.65}
#fireworks{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}
.heart-stage{perspective:900px;animation:heart-grand-entrance 2.8s .15s both cubic-bezier(.16,1,.3,1)}
.couple-heart{animation:heart-float-3d 5s 3s ease-in-out infinite;transform-style:preserve-3d}
.couple-cutout{animation:portrait-rise 1.4s 1.25s both cubic-bezier(.16,1,.3,1)}
.heart-halo{position:absolute;inset:10% 2%;z-index:-1;opacity:0;border:3px solid #ffd8e5;clip-path:polygon(0 20%,20% 20%,20% 0,40% 0,40% 20%,60% 20%,60% 0,80% 0,80% 20%,100% 20%,100% 60%,80% 60%,80% 80%,60% 80%,60% 100%,40% 100%,40% 80%,20% 80%,20% 60%,0 60%);background:#ffd8e538;animation:heart-ripple 3.5s 1.8s ease-out infinite}
.happy .initials{animation:initials-grand 1.6s .7s both cubic-bezier(.16,1,.3,1);text-shadow:3px 3px 0 #b51b42}
.heart-crown{animation:crown-grand 1.6s .4s both cubic-bezier(.2,1.4,.4,1)}
.happy .forever{animation:initials-in 1s 2.5s both}.happy .subtitle{animation:initials-in 1s 2.8s both}
.heart-orbit{animation:orbit-spin 12s 2s linear infinite}
@keyframes heart-grand-entrance{0%{opacity:0;transform:translateY(160px) scale(.05) rotate(-35deg)}25%{opacity:1;transform:translateY(-40px) scale(.65) rotate(14deg)}50%{transform:translateY(10px) scale(1.13) rotate(-8deg)}72%{transform:translateY(-6px) scale(.98) rotate(3deg)}100%{opacity:1;transform:none}}
@keyframes heart-float-3d{0%,100%{transform:translateY(0) rotateY(-7deg) rotateZ(-1deg) scale(1)}35%{transform:translateY(-8px) rotateY(7deg) rotateZ(1deg) scale(1.035)}65%{transform:translateY(-3px) rotateY(0) scale(1.06)}}
@keyframes portrait-rise{from{opacity:0;transform:translateY(70px) scale(.88)}to{opacity:1;transform:none}}
@keyframes heart-ripple{0%{opacity:.4;transform:scale(.8)}100%{opacity:0;transform:scale(1.35)}}
@keyframes initials-grand{0%{opacity:0;transform:translateY(-25px) scale(1.7);letter-spacing:18px}70%{opacity:1;transform:scale(.95);letter-spacing:1px}100%{opacity:1;transform:none;letter-spacing:1px}}
@keyframes crown-grand{0%{opacity:0;transform:translateY(-80px) rotate(-90deg) scale(.1)}70%{opacity:1;transform:translateY(5px) rotate(12deg) scale(1.2)}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#fireworks,.heart-halo{display:none}.heart-stage,.couple-cutout,.happy .initials{opacity:1;transform:none}}

 .happy-clock{margin:30px 0 0;padding:22px 8px 5px;border-top:2px dashed #ffc5d6;color:#fff4df}
.clock-kicker{font:11px/1.8 Press,monospace;letter-spacing:0;margin:0 0 22px}
.week-hero strong{display:block;font:clamp(64px,20vw,88px)/1.05 Press,monospace;text-shadow:5px 5px 0 #ae163b;font-variant-numeric:tabular-nums}
.week-hero h2{font:22px/1.4 Pixelify,monospace;letter-spacing:2px;margin:10px 0 16px}
.clock-divider{display:flex;align-items:center;gap:13px;justify-content:center;margin:0 auto 21px;max-width:210px;color:#ffc5d6}.clock-divider>span:not(.mini-heart){height:2px;background:currentColor;flex:1}.clock-divider .mini-heart{width:12px;height:12px}
.clock-remainder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.clock-remainder strong{display:block;font:16px/1.7 Press,monospace;font-variant-numeric:tabular-nums}.clock-remainder span{display:block;font-size:14px;color:#ffd8e2}
.happy-clock .since{font-size:13px;letter-spacing:.5px;margin:22px 0 0;color:#ffd8e2}
.celebration-content{position:relative}
body[data-screen="buildup-screen"]{animation:buildup-color 7s linear both}
.buildup{min-height:470px;display:flex;align-items:center;flex-direction:column;justify-content:center;overflow:hidden;--build:.14}
.buildup h1{font-size:18px;margin-top:8px}.countdown-stage{position:relative;display:grid;place-items:center;width:100%;height:215px;isolation:isolate;margin:8px 0}
.build-heart{position:absolute;width:130px;height:130px;color:#ef9bbb;opacity:.6;transform:scale(calc(.8 + var(--build)*1.1));transition:transform .7s ease,color .7s;z-index:-1;animation:build-beat .7s ease-in-out infinite}
#countdown-number{font:88px/1 Press,monospace;color:#912249;text-shadow:4px 4px 0 #fff4f6}
#buildup-message{font-size:20px;min-height:52px;max-width:250px;line-height:1.3;margin:10px 0 12px}
.build-meter{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;width:180px}.build-meter span{height:9px;background:#f7c1d6}.build-meter .lit{background:#b72b59}
@keyframes build-beat{50%{opacity:.85}}
@keyframes buildup-color{from{background-color:#ffe0ed}to{background-color:#e782a7}}

.floating-heart{background:none;clip-path:none}.floating-heart:before{content:'';position:absolute;inset:0;background:currentColor;clip-path:polygon(0 20%,20% 20%,20% 0,40% 0,40% 20%,60% 20%,60% 0,80% 0,80% 20%,100% 20%,100% 60%,80% 60%,80% 80%,60% 80%,60% 100%,40% 100%,40% 80%,20% 80%,20% 60%,0 60%)}

body[data-screen="start-screen"]{background:#fff;color:#a25974;background-image:none}
body[data-screen="start-screen"] .sky,body[data-screen="start-screen"] .topline,body[data-screen="start-screen"] .window-bar,body[data-screen="start-screen"] footer{display:none}
body[data-screen="start-screen"] .card{border:0;background:none;box-shadow:none}body[data-screen="start-screen"] .card:before,body[data-screen="start-screen"] .card:after{display:none}
.start-screen{padding:40px 0;animation:none}.start-heart{width:20px;height:20px;color:#e8b3c7;margin-bottom:27px}.start-screen h1{font-size:15px;line-height:1.9;color:#a25974;margin-bottom:30px}
#enter{width:140px;background:#fffafb;color:#a25974;border:1px solid #e8cbd7;box-shadow:0 3px 0 #f1dfe7;font-size:20px}
.hello-heading{font:17px/1.65 Press,monospace;letter-spacing:-.5px;margin:0 0 18px;overflow-wrap:anywhere}
#replay{background:transparent;border:1px solid #ffd4de;color:#fff4df;box-shadow:0 3px 0 #76152c;font-size:17px;margin-top:21px;padding:10px 16px}
@media(max-width:350px){.hello-heading{font-size:15px}}

.floating-letter{display:none}body[data-screen="yes-screen"] .floating-letter{display:block;position:absolute;left:calc(100% + 6px);top:1px;font:12px/1.4 Press,monospace;color:#ffe2eb;animation:letter-arrival 1.2s .15s both steps(5,end)}
body[data-screen="yes-screen"] .floating-letter:nth-child(2){left:calc(100% + 21px);animation-delay:.65s}body[data-screen="yes-screen"] .floating-letter:nth-child(3){left:calc(100% + 36px);animation-delay:1.15s}
@keyframes letter-arrival{from{opacity:0;transform:translateY(12px) scale(.5)}to{opacity:1;transform:none}}

@media(max-width:350px){.clock-kicker{font-size:10px}.clock-remainder strong{font-size:14px}}