:root{--color-primary: #f4a3c1;--color-primary-dark: #b56888;--color-on-primary: #ffffff;--color-secondary: #ffc4d6;--color-accent: #fff0f5;--color-background: #ffe4ee;--color-background-soft: #fff0f5;--color-foreground: #7a3a58;--color-muted: #fff5f8;--color-muted-foreground: #b56888;--color-border: #b56888;--color-border-soft: #ffdbe7;--color-ring: #ffe8f0;--color-card-bg: #fffbfc;--color-card-dark: #4a2438;--color-cta-shadow: #b56888;--color-no-bg: #fffbfc;--radius: 0px;--radius-sm: 0px;--space-1: 8px;--space-2: 16px;--space-3: 24px;--space-4: 32px;--space-5: 48px;--pixel: 4px;--transition: .16s cubic-bezier(.22, 1, .36, 1);--font-display: "Press Start 2P", "VT323", "Courier New", monospace;--font-body: "VT323", "Press Start 2P", "Courier New", monospace;--safe-top: env(safe-area-inset-top, 0px);--safe-right: env(safe-area-inset-right, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px)}*{box-sizing:border-box}html{height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;background-color:#ffd6e5}html,body,#root{min-height:100%;min-height:100dvh}body{margin:0;font-family:var(--font-body);font-size:22px;line-height:1.35;color:var(--color-foreground);background-color:#ffd6e5;overflow-x:hidden;position:relative;overscroll-behavior:contain;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}.pixel-sky{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;background-color:#ffd6e5;background-repeat:no-repeat;background-position:center bottom;background-size:cover;image-rendering:pixelated;image-rendering:-moz-crisp-edges}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;background-image:radial-gradient(1.5px 1.5px at 12% 24%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 78% 18%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 55% 42%,#ffe0ef 50%,transparent 51%),radial-gradient(1.5px 1.5px at 30% 62%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 85% 55%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 20% 88%,#ffe0ef 50%,transparent 51%);opacity:.65;animation:twinkle 3.6s steps(6,end) infinite}@keyframes twinkle{0%,to{opacity:.65}50%{opacity:.2}}#root{display:flex;align-items:center;justify-content:center;padding:max(var(--space-3),var(--safe-top)) max(var(--space-3),var(--safe-right)) max(var(--space-3),var(--safe-bottom)) max(var(--space-3),var(--safe-left));position:relative;z-index:1;width:100%;min-height:100dvh;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.card{position:relative;z-index:2;max-width:480px;width:100%;text-align:center;background:var(--color-card-bg);border:4px solid var(--color-border);border-radius:0;padding:var(--space-4) var(--space-3);box-shadow:0 0 0 4px var(--color-card-bg),0 0 0 8px var(--color-border),12px 12px 0 8px #7a3a5838;animation:card-enter .34s steps(4,end) both}.card:after{content:"";position:absolute;top:8px;right:8px;bottom:8px;left:8px;border:2px dashed rgba(244,163,193,.4);pointer-events:none}.cat-frame{position:relative;width:min(220px,62%);aspect-ratio:1 / 1;margin:0 auto var(--space-3);background:var(--color-card-dark);border:4px solid var(--color-border);box-shadow:0 0 0 4px var(--color-secondary),0 0 0 8px var(--color-border),8px 8px 0 4px #7a3a5838;display:flex;align-items:center;justify-content:center;padding:10px;animation:rise-in .48s steps(6,end) both}.cat-frame img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 2px 0 rgba(0,0,0,.2))}.cat-frame--light{background:var(--color-card-bg)}.cat-frame--light img{filter:none}.eyebrow{margin:0 0 var(--space-2);font-family:var(--font-display);font-size:.6rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--color-primary);text-shadow:2px 2px 0 var(--color-muted);animation:rise-in .42s steps(4,end) 60ms both}h1{font-family:var(--font-display);font-size:clamp(1.4rem,6.2vw,2.2rem);font-weight:400;line-height:1.35;margin:0 0 var(--space-3);color:var(--color-primary);text-shadow:2px 2px 0 var(--color-primary-dark),4px 4px 0 rgba(122,58,88,.22);letter-spacing:.02em;animation:rise-in .42s steps(4,end) .12s both}#question-screen h1{font-size:clamp(.8rem,3.4vw,1.1rem);line-height:1.45;padding:0 var(--space-1);text-wrap:balance}.subtitle{margin:0 0 var(--space-4);font-family:var(--font-body);font-size:1.35rem;font-weight:400;color:var(--color-muted-foreground);animation:rise-in .42s steps(4,end) .18s both}.buttons{display:flex;align-items:center;justify-content:center;gap:var(--space-2);flex-wrap:wrap;min-height:64px;animation:rise-in .42s steps(4,end) .24s both}.btn{position:relative;font-family:var(--font-display);font-weight:400;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;border:4px solid var(--color-border);border-radius:0;padding:14px 28px;min-height:48px;min-width:48px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform var(--transition),box-shadow var(--transition),background-color var(--transition),color var(--transition),font-size var(--transition)}.btn:focus-visible{outline:4px dashed var(--color-ring);outline-offset:6px}.btn-yes{background:linear-gradient(180deg,var(--color-secondary) 0%,var(--color-primary) 100%);color:var(--color-on-primary);text-shadow:2px 2px 0 var(--color-cta-shadow);box-shadow:inset 0 -6px #7a3a5838,inset 0 4px #ffffff59,0 0 0 4px var(--color-card-bg),0 0 0 8px var(--color-border),8px 8px #7a3a5838;padding:16px 34px 20px}.btn-yes:before,.btn-yes:after{content:"✦";position:absolute;top:50%;transform:translateY(-50%);font-family:var(--font-display);font-size:.6em;color:#fff;opacity:.95;text-shadow:1px 1px 0 var(--color-cta-shadow)}.btn-yes:before{left:10px}.btn-yes:after{right:10px}.btn-yes:hover{transform:translate(-1px,-2px);box-shadow:inset 0 -6px #7a3a5838,inset 0 4px #fff6,0 0 0 4px var(--color-card-bg),0 0 0 8px var(--color-border),10px 10px #7a3a5847}.btn-yes:active{transform:translate(2px,3px);box-shadow:inset 0 -3px #7a3a5838,inset 0 3px #ffffff40,0 0 0 4px var(--color-card-bg),0 0 0 8px var(--color-border),3px 3px #7a3a5838}.btn-no{background:var(--color-no-bg);color:var(--color-primary);border:4px solid var(--color-primary);box-shadow:inset 0 -3px #f4a3c133,3px 3px #7a3a582e;padding:10px 20px;position:relative;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;border-radius:999px}.btn-no:hover{background:var(--color-muted)}.btn-no:active{transform:translate(1px,1px)}.btn-no.is-fleeing{position:fixed;z-index:10;transition:top .26s cubic-bezier(.22,1,.36,1),left .26s cubic-bezier(.22,1,.36,1),font-size var(--transition)}.btn-no-placeholder{visibility:hidden;pointer-events:none}#root:has(.intro-screen){height:100dvh;max-height:100dvh;overflow-x:hidden;overflow-y:auto;align-items:center;justify-content:center;padding:max(5dvh,var(--safe-top),20px) max(5vw,var(--safe-right),20px) max(5dvh,var(--safe-bottom),20px) max(5vw,var(--safe-left),20px)}.intro-screen{display:flex;flex-direction:column;align-items:center;width:min(100%,720px);max-height:90dvh;min-width:0;min-height:0;max-width:720px;height:auto;box-sizing:border-box;padding:clamp(var(--space-3),3.5vw,var(--space-4))}.intro-lead{flex-shrink:0;margin:0 0 var(--space-3);font-family:var(--font-display);font-size:clamp(.95rem,3.6vw,1.5rem);line-height:1.4;color:var(--color-primary);text-shadow:2px 2px 0 var(--color-primary-dark),4px 4px 0 rgba(122,58,88,.22);animation:rise-in .42s steps(4,end) 60ms both}.video-container{position:relative;width:min(100%,calc(52dvh * 16 / 9));aspect-ratio:16 / 9;margin-bottom:var(--space-3);overflow:hidden;background:var(--color-card-dark);border:4px solid var(--color-border);box-shadow:0 0 0 4px var(--color-secondary),0 0 0 8px var(--color-border),8px 8px 0 4px #7a3a5838;animation:rise-in .42s steps(4,end) .14s both;-webkit-transform:translateZ(0);transform:translateZ(0)}.intro-video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity .28s ease-out}.intro-video.is-ready{opacity:1}.video-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);padding:var(--space-3);color:var(--color-muted);background:var(--color-card-dark)}.video-placeholder-icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background:var(--color-secondary);color:var(--color-on-primary);border:4px solid var(--color-border);box-shadow:4px 4px #7a3a5838;animation:soft-pulse 1.6s steps(4,end) infinite}.video-placeholder-icon svg{width:22px;height:22px;margin-left:2px}.video-placeholder p{margin:0;font-family:var(--font-display);font-size:clamp(.6rem,2.6vw,.72rem);color:var(--color-muted);text-wrap:balance}.btn-continue{flex-shrink:0;width:100%;max-width:min(280px,100%);animation:rise-in .42s steps(4,end) both}.celebration h1{color:var(--color-secondary);font-size:clamp(1.8rem,8vw,2.8rem)}.celebration .eyebrow{color:var(--color-primary)}.particles{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;overflow:hidden}.particle{position:absolute;bottom:-10vh;background:#fff;border-radius:0;opacity:.9;animation:float-up linear infinite;will-change:transform,opacity;box-shadow:0 -3px #fff,0 3px #fff,-3px 0 #fff,3px 0 #fff}@keyframes float-up{0%{transform:translateY(0) scale(.9);opacity:0}12%{opacity:.9}88%{opacity:.7}to{transform:translateY(-110vh) scale(1.05);opacity:0}}@keyframes card-enter{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes rise-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes soft-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.confetti-piece{position:fixed;top:-10vh;z-index:5;pointer-events:none;border-radius:0;animation:confetti-fall linear forwards}@keyframes confetti-fall{to{transform:translateY(110vh) rotate(360deg);opacity:.2}}@media(max-width:520px){body{font-size:20px}#root{padding:max(var(--space-2),var(--safe-top)) max(var(--space-2),var(--safe-right)) max(var(--space-2),var(--safe-bottom)) max(var(--space-2),var(--safe-left));align-items:center}#root:has(.intro-screen){padding:max(4dvh,var(--safe-top),16px) max(4vw,var(--safe-left),var(--safe-right),16px) max(4dvh,var(--safe-bottom),16px) max(4vw,var(--safe-left),var(--safe-right),16px);align-items:center}.card{padding:var(--space-3) var(--space-2);box-shadow:0 0 0 4px var(--color-card-bg),0 0 0 8px var(--color-border),8px 8px 0 4px #7a3a5838}.intro-screen{width:min(100%,560px);max-width:560px;max-height:92dvh;padding:var(--space-3) var(--space-2)}.video-container{width:min(100%,calc(42dvh * 16 / 9));margin-bottom:var(--space-2)}.eyebrow{font-size:.55rem;letter-spacing:.1em}h1{font-size:clamp(1.1rem,7vw,1.7rem)}#question-screen h1{font-size:clamp(.72rem,3.1vw,.95rem)}.subtitle{margin-bottom:var(--space-3);font-size:1.15rem}.buttons{flex-direction:row;gap:14px;width:100%;justify-content:center}.btn{min-height:48px;padding:12px 20px;font-size:.8rem}.btn-yes{padding:14px 24px 18px}.btn-no{padding:8px 18px;font-size:.7rem}.btn-no.is-fleeing{width:auto;max-width:none;min-height:48px}.cat-frame{width:min(180px,55%);margin-bottom:var(--space-2)}.video-placeholder-icon{width:48px;height:48px}.video-placeholder-icon svg{width:18px;height:18px}}@media(max-height:520px){#root{padding:max(var(--space-1),var(--safe-top)) max(var(--space-2),var(--safe-right)) max(var(--space-1),var(--safe-bottom)) max(var(--space-2),var(--safe-left))}#root:has(.intro-screen){padding:max(3dvh,var(--safe-top),12px) max(5vw,var(--safe-right),16px) max(3dvh,var(--safe-bottom),12px) max(5vw,var(--safe-left),16px)}.card{padding:var(--space-3) var(--space-3)}.intro-screen{max-height:94dvh;padding:var(--space-2)}.intro-lead{font-size:clamp(.85rem,3.4vh,1.1rem);margin-bottom:var(--space-1)}.video-container{width:min(100%,calc(48dvh * 16 / 9));margin-bottom:var(--space-1)}h1{font-size:clamp(1rem,6vh,1.5rem);margin-bottom:var(--space-1)}#question-screen h1{font-size:clamp(.7rem,2.8vh,.9rem)}.subtitle{margin-bottom:var(--space-2);font-size:1.1rem}.buttons{flex-direction:row;flex-wrap:wrap;min-height:48px}.btn{min-width:100px;padding:10px 18px;font-size:.75rem}.cat-frame{width:min(120px,22vh)}}@media(min-width:1024px){.card:not(.intro-screen){padding:40px 32px}h1{font-size:2.4rem}#question-screen h1{font-size:1rem}}@media(prefers-reduced-motion:reduce){.particle,.confetti-piece,body:before{animation:none}.particle,.confetti-piece{display:none}.card,.eyebrow,h1,.subtitle,.buttons,.intro-lead,.video-container,.btn-continue,.video-placeholder-icon,.cat-frame{animation:none}.btn,.btn-no.is-fleeing,.intro-video{transition:none}}
