:root{--bg:#0d0d1a;--bg-alt:#16162e;--red:#ff2e4d;--red-dark:#c9184a;--pink:#ff8fa3;--cream:#fff0f3;--yellow:#ffd166;--pixel-border:4px solid var(--cream)}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--cream);font-family:"Press Start 2P",monospace;line-height:1.8;overflow-x:hidden}.stars,.stars:before,.stars:after{z-index:0;pointer-events:none;background:0 0;width:3px;height:3px;position:fixed;top:0;left:0}.stars{box-shadow:12vw 8vh var(--cream), 45vw 15vh var(--pink), 78vw 5vh var(--yellow), 25vw 30vh var(--cream), 60vw 40vh var(--pink), 90vw 28vh var(--cream), 8vw 55vh var(--yellow), 35vw 62vh var(--cream), 70vw 58vh var(--pink), 15vw 80vh var(--pink), 50vw 88vh var(--yellow), 85vw 75vh var(--cream);animation:2.4s steps(2,end) infinite twinkle}.stars:before{content:"";box-shadow:20vw 12vh var(--pink), 55vw 8vh var(--cream), 88vw 18vh var(--cream), 30vw 45vh var(--yellow), 65vw 25vh var(--cream), 95vw 48vh var(--pink), 5vw 70vh var(--cream), 42vw 78vh var(--pink), 75vw 85vh var(--yellow), 28vw 92vh var(--cream), 58vw 70vh var(--cream), 92vw 92vh var(--pink);animation:3.1s steps(2,end) .7s infinite twinkle}.stars:after{content:"";box-shadow:8vw 20vh var(--yellow), 38vw 10vh var(--cream), 72vw 14vh var(--pink), 18vw 38vh var(--cream), 52vw 52vh var(--yellow), 82vw 42vh var(--cream), 12vw 66vh var(--pink), 48vw 72vh var(--cream), 88vw 64vh var(--yellow), 22vw 88vh var(--cream), 62vw 95vh var(--pink), 40vw 35vh var(--yellow);animation:2.8s steps(2,end) 1.3s infinite twinkle}@keyframes twinkle{0%,to{opacity:1}50%{opacity:.25}}.pixel-heart{width:10px;height:10px;box-shadow:-20px -20px var(--red), -10px -20px var(--red), 10px -20px var(--red), 20px -20px var(--red), -30px -10px var(--red), -20px -10px var(--red), -10px -10px var(--red), 0 -10px var(--red), 10px -10px var(--red), 20px -10px var(--red), 30px -10px var(--red), -30px 0 var(--red), -20px 0 var(--red), -10px 0 var(--red), 0 0 var(--red), 10px 0 var(--red), 20px 0 var(--red), 30px 0 var(--red), -20px 10px var(--red), -10px 10px var(--red), 0 10px var(--red), 10px 10px var(--red), 20px 10px var(--red), -10px 20px var(--red), 0 20px var(--red), 10px 20px var(--red), 0 30px var(--red);background:0 0;flex-shrink:0;animation:1.2s ease-in-out infinite heartbeat;position:relative}.pixel-heart.small{transform:scale(.4)}@keyframes heartbeat{0%,to{transform:scale(1)}25%{transform:scale(1.15)}40%{transform:scale(.95)}60%{transform:scale(1.1)}}main{z-index:1;max-width:640px;margin:0 auto;padding:0 1.25rem;position:relative}section{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:100svh;padding:4rem 0;display:flex;position:relative}.hero h1{color:var(--red);text-shadow:3px 3px 0 var(--red-dark), 6px 6px 0 #00000080;margin:2.5rem 0 1.5rem;font-size:clamp(1.1rem,5vw,1.9rem);animation:1s steps(8,end) both glitch-in}.hero p{color:var(--pink);max-width:40ch;font-size:clamp(.55rem,2.6vw,.75rem)}@keyframes glitch-in{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.scroll-hint{color:var(--yellow);font-size:.6rem;animation:1s steps(2,end) infinite bounce-hint;position:absolute;bottom:2rem}@keyframes bounce-hint{0%,to{transform:translateY(0)}50%{transform:translateY(8px)}}.card{background:var(--bg-alt);border:var(--pixel-border);box-shadow:8px 8px 0 #0009, inset 0 0 0 4px var(--bg);width:100%;max-width:480px;padding:2rem 1.5rem;position:relative}.card h2{color:var(--yellow);text-shadow:2px 2px #0009;margin-bottom:1.25rem;font-size:clamp(.75rem,3.6vw,1.05rem)}.card p{color:var(--cream);font-size:clamp(.55rem,2.7vw,.72rem)}.card .highlight{color:var(--red)}.promise{flex-direction:column;align-items:center;gap:1.75rem;display:flex}.promise .number{color:var(--bg);background:var(--yellow);padding:.4rem .8rem;font-size:.65rem;box-shadow:4px 4px #0009}.promise blockquote{color:var(--cream);text-shadow:2px 2px #000000b3;max-width:34ch;font-size:clamp(.65rem,3.2vw,.9rem)}.promise blockquote em{color:var(--red);font-style:normal}.thread-wrap{justify-content:center;align-items:center;gap:2.5rem;margin:2rem 0;display:flex}.thread-svg{width:min(80vw,320px);height:auto;overflow:visible}.thread-path{stroke:var(--red);stroke-width:3px;fill:none;stroke-linecap:round;stroke-dasharray:8 6;filter:drop-shadow(0 0 6px #ff2e4dcc);animation:1.2s linear infinite thread-flow}@keyframes thread-flow{to{stroke-dashoffset:-14px}}.pixel-person{background:0 0;width:8px;height:8px;position:relative}.pixel-person.boy{box-shadow:-8px -24px #f4a261,0 -24px #f4a261,8px -24px #f4a261,-8px -16px #f4a261,0 -16px #1d3557,8px -16px #f4a261,-8px -8px #457b9d,0 -8px #457b9d,8px -8px #457b9d,-16px -8px #f4a261,16px -8px #f4a261,-8px 0 #2a3d66,8px 0 #2a3d66,-8px 8px #2a3d66,8px 8px #2a3d66,-8px 16px #222,8px 16px #222}.pixel-person.girl{box-shadow:-8px -24px #f4a261,0 -24px #f4a261,8px -24px #f4a261,-16px -16px #6d3b14,-8px -16px #f4a261,0 -16px #1d3557,8px -16px #f4a261,16px -16px #6d3b14,-16px -8px #6d3b14,-8px -8px #ff8fa3,0 -8px #ff8fa3,8px -8px #ff8fa3,16px -8px #6d3b14,-8px 0 #ff8fa3,0 0 #ff8fa3,8px 0 #ff8fa3,-16px 8px #ff8fa3,-8px 8px #ff8fa3,0 8px #ff8fa3,8px 8px #ff8fa3,16px 8px #ff8fa3,-8px 16px #222,8px 16px #222}.person-label{color:var(--pink);margin-top:2.25rem;font-size:.5rem}.proposal-box{background:var(--bg-alt);border:4px solid var(--red);width:100%;max-width:480px;padding:2.5rem 1.5rem;box-shadow:8px 8px #c9184a66,0 0 30px #ff2e4d40}.proposal-box h2{color:var(--red);text-shadow:2px 2px #000000b3;margin-bottom:2rem;font-size:clamp(.8rem,4.2vw,1.15rem);line-height:2}.btn-zone{flex-wrap:wrap;justify-content:center;align-items:center;gap:1.25rem;min-height:120px;display:flex;position:relative}.pixel-btn{cursor:pointer;touch-action:manipulation;border:none;padding:.9rem 1.4rem;font-family:"Press Start 2P",monospace;font-size:clamp(.65rem,3vw,.85rem);transition:transform .15s}.pixel-btn:active{transform:scale(.92)}.btn-yes{background:var(--red);color:var(--cream);box-shadow:0 6px 0 var(--red-dark), 0 10px 0 #00000080}.btn-yes:active{box-shadow:0 2px 0 var(--red-dark);transform:translateY(4px)}.btn-no{color:#8a8aa3;background:#2b2b45;box-shadow:0 6px #1a1a2e}.btn-no.fleeing{z-index:50;transition:left .3s cubic-bezier(.22,1,.36,1),top .3s cubic-bezier(.22,1,.36,1);position:fixed}.answer{flex-direction:column;align-items:center;gap:2rem;display:flex}.answer h2{color:var(--yellow);animation:1.2s ease-in-out infinite heartbeat}.answer p{color:var(--pink);max-width:34ch;font-size:clamp(.55rem,2.8vw,.75rem)}.hearts-rain{pointer-events:none;z-index:40;position:fixed;inset:0;overflow:hidden}.rain-heart{font-size:1.4rem;animation:linear forwards fall;position:absolute;top:-40px}@keyframes fall{to{opacity:0;transform:translateY(110vh)rotate(360deg)}}footer{z-index:1;text-align:center;color:#55557a;padding:2.5rem 1rem;font-size:.5rem;position:relative}.music-fab{z-index:100;background:var(--red);cursor:pointer;width:56px;height:56px;box-shadow:0 6px 0 var(--red-dark), 0 10px 0 #00000080;touch-action:manipulation;border:none;justify-content:center;align-items:center;transition:transform .15s;display:flex;position:fixed;bottom:1.25rem;right:1.25rem}.music-fab:active{box-shadow:0 2px 0 var(--red-dark);transform:translateY(4px)}.music-fab svg{width:24px;height:24px;fill:var(--cream)}.music-fab.playing{background:var(--yellow);box-shadow:0 6px #c9a23e,0 10px #00000080}.music-fab.playing svg{fill:var(--bg)}.music-panel{z-index:100;background:var(--bg-alt);border:var(--pixel-border);width:min(320px,100vw - 2.5rem);padding:.75rem;display:none;position:fixed;bottom:5.5rem;right:1.25rem;box-shadow:8px 8px #0009}.music-panel.open{display:block}.music-panel iframe{border:none;border-radius:0;width:100%;height:152px}.music-panel .panel-label{color:var(--pink);text-align:center;margin-bottom:.5rem;font-size:.45rem}@media (width>=768px){.card{padding:2.5rem 2.25rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{animation-duration:10ms!important;animation-iteration-count:1!important}}
