:root{--pink-50: #fff4ec;--pink-100: #ffdfd4;--pink-200: #ffc8b7;--pink-300: #ffaa97;--pink-400: #f98da3;--pink-500: #e9648a;--rose: #ffa6bd;--plum: #6f3b44;--plum-soft: #8d554e;--cream: #fff8f0;--apricot: #ffc68d;--ginger: #f4a771;--honey: #f0d391;--shadow: 0 18px 40px -18px rgba(180, 104, 82, .45);--radius: 32px;font-family:Quicksand,ui-rounded,system-ui,sans-serif;color-scheme:light}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;min-height:100%}body{background:linear-gradient(170deg,var(--pink-100) 0%,var(--pink-50) 38%,var(--apricot) 100%);color:var(--plum);overflow-x:hidden}#root{min-height:100dvh}.app{position:relative;display:flex;flex-direction:column;min-height:100dvh;padding:max(env(safe-area-inset-top),18px) 16px max(env(safe-area-inset-bottom),18px);overflow-x:clip;isolation:isolate}.decor{position:fixed;inset:0;z-index:-1;pointer-events:none}.blob{position:absolute;border-radius:50%;filter:blur(44px);opacity:.78;animation:drift 22s ease-in-out infinite}.blob-1{width:62vw;height:62vw;top:-14vw;left:-18vw;background:var(--pink-300)}.blob-2{width:54vw;height:54vw;top:28vh;right:-20vw;background:var(--ginger);animation-delay:-6s}.blob-3{width:70vw;height:70vw;bottom:-26vw;left:-10vw;background:var(--apricot);animation-delay:-12s}.blob-4{width:40vw;height:40vw;bottom:12vh;right:-6vw;background:var(--honey);animation-delay:-18s}.decor-active .blob{animation-duration:9s;opacity:.85}.floaters{position:absolute;inset:0}.floater{position:absolute;bottom:-10%;animation-name:float-up;animation-timing-function:linear;animation-iteration-count:infinite;opacity:.5}@keyframes drift{0%,to{transform:translateZ(0) scale(1)}33%{transform:translate3d(6vw,-4vh,0) scale(1.08)}66%{transform:translate3d(-5vw,5vh,0) scale(.94)}}@keyframes float-up{0%{transform:translateZ(0) rotate(0);opacity:0}12%{opacity:.55}88%{opacity:.4}to{transform:translate3d(14px,-112dvh,0) rotate(240deg);opacity:0}}.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:8px 0 12px;width:100%;max-width:480px;margin:0 auto;text-align:center}.titles{animation:slide-down .7s cubic-bezier(.22,1.4,.36,1) both}.kicker{margin:0 0 2px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--plum-soft);opacity:.75;animation:breathe 3.6s ease-in-out infinite}.title{margin:0;font-family:"Baloo 2",Quicksand,sans-serif;font-size:clamp(30px,10vw,44px);font-weight:800;line-height:1.05;letter-spacing:-.01em}.title .word{display:inline-block;margin:0 .18em;animation:pop-in .6s cubic-bezier(.18,1.5,.4,1) both,wobble 5s ease-in-out infinite;animation-delay:calc(var(--i) * .11s),calc(1s + var(--i) * .3s)}.title .cries{color:var(--pink-500);text-shadow:0 2px 0 var(--cream)}.face{width:min(58vw,230px);filter:drop-shadow(0 16px 26px rgba(198,118,96,.28));animation:face-in .8s cubic-bezier(.2,1.5,.4,1) both}.face svg{width:100%;height:auto;display:block;overflow:visible}.face-bob{transform-origin:100px 170px;animation:bob 3.4s ease-in-out infinite}.face-skin{fill:#ffe0ce;transform-box:fill-box;transform-origin:center;animation:breathe-scale 3.2s ease-in-out infinite}.face-shadow{fill:#b4685229;animation:shadow-pulse 3.4s ease-in-out infinite}.face-hair{fill:#c98a63}.face-bow{fill:var(--pink-400);transform-box:fill-box;transform-origin:10% 90%;animation:bow-flap 1.6s ease-in-out infinite}.cheek{fill:var(--pink-300);opacity:.8;animation:blush 4s ease-in-out infinite}.cheek-r{animation-delay:-2s}.eye-ball{fill:#58334a;transform-box:fill-box;transform-origin:center;animation:blink 5.2s ease-in-out infinite}.eye-shut{fill:none;stroke:#58334a;stroke-width:4;stroke-linecap:round;opacity:0}.mouth-smile{fill:none;stroke:#d8607f;stroke-width:6;stroke-linecap:round;transform-box:fill-box;transform-origin:center;opacity:0}.mouth{fill:#d8607f;transform-box:fill-box;transform-origin:center;transition:all .3s ease}.tears,.zzz{opacity:0}.z{font-family:"Baloo 2",sans-serif;font-size:22px;font-weight:800;fill:var(--plum-soft)}.face-happy .mouth{opacity:0}.face-happy .mouth-smile{opacity:1;animation:smile 2.8s ease-in-out infinite}.face-curious .face-bob{animation:tilt 1.8s ease-in-out infinite}.face-curious .eyes{animation:dart 1.4s ease-in-out infinite}.face-curious .mouth{opacity:0}.face-curious .mouth-smile{opacity:1;animation:smile 1.2s ease-in-out infinite}.face-crying .face-bob{animation:shake .42s ease-in-out infinite}.face-crying .mouth{animation:wail .55s ease-in-out infinite}.face-crying .eye-ball{opacity:0;animation:none}.face-crying .eye-shut,.face-crying .tears{opacity:1}.face-crying .tear{fill:#7fc7f5;animation:teardrop 1.05s linear infinite}.face-crying .tear-2{animation-delay:-.5s}.face-crying .cheek{fill:var(--pink-400);opacity:1}.face-sleeping .eye-ball{opacity:0;animation:none}.face-sleeping .eye-shut{opacity:1}.face-sleeping .mouth{ry:5;rx:9;animation:snore 3.2s ease-in-out infinite}.face-sleeping .zzz{opacity:1}.face-sleeping .z{animation:zzz-rise 2.6s ease-in-out infinite}.face-sleeping .z-2{animation-delay:.35s}.face-sleeping .z-3{animation-delay:.7s}.panel{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px;animation:panel-in .55s cubic-bezier(.2,1.35,.4,1) both}.listening-panel{padding:20px 18px 18px;border-radius:var(--radius);background:#ffffff8c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow);border:2px solid rgba(255,255,255,.8)}.result-panel{padding:22px 20px 24px;border-radius:var(--radius);background:#ffffffb8;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--shadow);border:2px solid rgba(255,255,255,.9)}.result-label{margin:0;font-family:"Baloo 2",sans-serif;font-size:clamp(22px,7vw,30px);font-weight:800;line-height:1.15}.says .result-label{color:var(--pink-500);animation:pop-in .5s cubic-bezier(.18,1.6,.4,1) both,glow 2.4s ease-in-out infinite .5s}.quiet .result-label,.oops .result-label{color:var(--plum)}.phrase{margin:0;font-family:DM Mono,ui-monospace,SF Mono,Menlo,monospace;font-size:14px;font-weight:400;line-height:1.65;letter-spacing:-.01em;color:var(--plum)}.scramble{display:grid;white-space:pre-line}.scramble>*{grid-area:1 / 1}.scramble-sizer{visibility:hidden}.scramble-live{display:block;transition:filter .45s ease,opacity .45s ease}.scramble-scrambling .scramble-live{color:var(--plum-soft);opacity:.85;animation:decode-flicker .28s steps(2,end) infinite}.scramble-revealing .scramble-live{color:var(--plum)}.scramble-done .scramble-live{animation:settle .45s cubic-bezier(.2,1.5,.4,1) both}.scramble-obscured.scramble-done .scramble-live{animation:blur-in .6s cubic-bezier(.32,.9,.3,1) both}.phrase-wrap{position:relative;width:100%}.reveal-gate{position:absolute;inset:-6px;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border-radius:24px;background:radial-gradient(circle at 50% 40%,#ffffffd1,#fff7f28c 70%,#fff7f200);animation:gate-in .55s cubic-bezier(.2,1.4,.4,1) .18s both}.reveal-gate-title{margin:0;font-family:"Baloo 2",sans-serif;font-size:clamp(19px,6vw,25px);font-weight:800;color:var(--pink-500);text-shadow:0 2px 10px rgba(255,255,255,.9);animation:pop-in .5s cubic-bezier(.18,1.6,.4,1) .3s both,glow 2.4s ease-in-out infinite .9s}.reveal-gate-button{padding:12px 34px;animation:pop-in .5s cubic-bezier(.18,1.6,.4,1) .42s both,heartbeat 2.1s ease-in-out infinite 1s}.face-clickable{cursor:pointer}.face-clickable:active{transform:scale(.96)}.dev-note{margin:-8px 0 0;padding:4px 12px;border-radius:999px;background:#ffffffbf;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--plum-soft);animation:pop-in .3s ease both}.scramble-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.voice-button{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--pink-200);border-radius:999px;padding:8px 16px;background:#ffffffb3;color:var(--plum-soft);font-family:Quicksand,sans-serif;font-size:13px;font-weight:700;cursor:pointer;animation:rise-in .5s ease .1s both;transition:transform .14s ease,border-color .2s ease}.voice-button[aria-pressed=true]{border-color:var(--pink-400);color:var(--pink-500)}.voice-button:active{transform:scale(.95)}.voice-button[aria-pressed=true] .voice-icon{animation:speaker-pulse 1.1s ease-in-out infinite}.sticky-note{margin:2px 0 0;max-width:30ch;font-size:11px;font-weight:600;line-height:1.4;color:var(--plum-soft);opacity:.7;animation:rise-in .6s ease .4s both}.subtle{margin:0;font-size:15px;font-weight:600;color:var(--plum-soft);animation:rise-in .6s ease .15s both}.hint{margin:0;font-size:13px;font-weight:600;color:var(--plum-soft);opacity:.85;max-width:28ch;animation:breathe 3.2s ease-in-out infinite}.status{margin:0;font-family:"Baloo 2",sans-serif;font-size:20px;font-weight:700;animation:breathe 1.6s ease-in-out infinite}.actions{display:flex;flex-direction:column;align-items:center;gap:8px}.cry-button{position:relative;width:min(74vw,250px);aspect-ratio:1;border:none;border-radius:50%;background:radial-gradient(circle at 32% 28%,#ffffff 0%,var(--rose) 34%,var(--pink-500) 100%);color:#fff;font-family:"Baloo 2",sans-serif;font-size:clamp(20px,6.4vw,27px);font-weight:800;line-height:1.15;cursor:pointer;box-shadow:0 22px 44px -16px #e8767ab3,inset 0 -8px 18px #c44e5c59,inset 0 8px 16px #fff9;animation:heartbeat 2.1s ease-in-out infinite;transition:transform .14s ease}.cry-button:active{transform:scale(.94)}.cry-button-label{position:relative;z-index:2;display:block;padding:0 14%;text-shadow:0 2px 6px rgba(158,68,70,.35)}.ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--pink-400);animation:ripple 2.6s ease-out infinite;pointer-events:none}.ring-2{animation-delay:.85s}.ring-3{animation-delay:1.7s}.sparkle{position:absolute;font-size:22px;animation:twinkle 2.2s ease-in-out infinite}.sparkle-a{top:6%;right:10%}.sparkle-b{bottom:9%;left:8%;animation-delay:1.1s}.pill-button{border:none;border-radius:999px;padding:14px 26px;background:linear-gradient(135deg,var(--pink-400),var(--pink-500));color:#fff;font-family:"Baloo 2",sans-serif;font-size:17px;font-weight:700;cursor:pointer;box-shadow:0 12px 24px -10px #e8707ccc;animation:rise-in .5s ease .25s both;transition:transform .14s ease}.pill-button:active{transform:scale(.95)}.ghost-button{border:none;background:none;padding:8px 12px;color:var(--plum-soft);font-family:Quicksand,sans-serif;font-size:14px;font-weight:700;text-decoration:underline;text-decoration-style:dotted;cursor:pointer}.viz{display:flex;align-items:center;gap:3px;height:84px;width:100%;padding:0 4px}.viz-bar{flex:1;min-height:6px;border-radius:999px;background:linear-gradient(to top,var(--pink-500),var(--pink-200));transition:height 90ms linear,opacity 90ms linear;animation:bar-idle 1.4s ease-in-out infinite}.progress{width:100%;height:12px;border-radius:999px;background:#ffffffb3;overflow:hidden;box-shadow:inset 0 2px 5px #b4685233}.progress-fill{height:100%;width:100%;transform-origin:left center;border-radius:999px;background:linear-gradient(90deg,var(--pink-300),var(--pink-500));transition:transform .11s linear}.burst{position:fixed;left:50%;top:62%;z-index:5;pointer-events:none}.burst-piece{position:absolute;animation:burst-fly 1.5s cubic-bezier(.2,.8,.3,1) both}@keyframes pop-in{0%{opacity:0;transform:translateY(18px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:translateY(0)}}@keyframes rise-in{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes panel-in{0%{opacity:0;transform:translateY(26px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes face-in{0%{opacity:0;transform:scale(.6) rotate(-8deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes wobble{0%,to{transform:rotate(0)}25%{transform:rotate(-2.5deg)}75%{transform:rotate(2.5deg)}}@keyframes breathe{0%,to{opacity:.6}50%{opacity:1}}@keyframes breathe-scale{0%,to{transform:scale(1)}50%{transform:scale(var(--breathe, 1.03))}}@keyframes shadow-pulse{0%,to{transform:scaleX(1);opacity:.5}50%{transform:scaleX(.86);opacity:.3}}@keyframes bob{0%,to{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-8px) rotate(1.5deg)}}@keyframes tilt{0%,to{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}@keyframes dart{0%,to{transform:translate(-3px)}50%{transform:translate(3px)}}@keyframes shake{0%,to{transform:translate(0) rotate(0)}25%{transform:translate(-3px,1px) rotate(-2deg)}75%{transform:translate(3px,-1px) rotate(2deg)}}@keyframes blink{0%,92%,to{transform:scaleY(1)}95%{transform:scaleY(.1)}}@keyframes blush{0%,to{opacity:.55;transform:scale(1)}50%{opacity:.95;transform:scale(1.12)}}@keyframes smile{0%,to{transform:scale(1)}50%{transform:scale(1.12,.9)}}@keyframes wail{0%,to{transform:scale(1)}50%{transform:scale(1.25,1.55)}}@keyframes snore{0%,to{transform:scale(1)}50%{transform:scale(1.3,1.15)}}@keyframes teardrop{0%{transform:translateY(0) scale(.5);opacity:0}20%{opacity:1;transform:translateY(6px) scale(1)}to{transform:translateY(54px) scale(.7);opacity:0}}@keyframes zzz-rise{0%{opacity:0;transform:translateY(6px) scale(.7)}35%{opacity:1}to{opacity:0;transform:translate(10px,-16px) scale(1.15)}}@keyframes heartbeat{0%,to{transform:scale(1)}14%{transform:scale(1.06)}28%{transform:scale(.99)}42%{transform:scale(1.04)}}@keyframes ripple{0%{transform:scale(1);opacity:.65}to{transform:scale(1.65);opacity:0}}@keyframes twinkle{0%,to{transform:scale(.7) rotate(-12deg);opacity:.4}50%{transform:scale(1.15) rotate(12deg);opacity:1}}@keyframes glow{0%,to{text-shadow:0 0 0 rgba(245,107,168,0)}50%{text-shadow:0 0 18px rgba(238,107,143,.55)}}@keyframes decode-flicker{0%,to{opacity:.7}50%{opacity:1}}@keyframes settle{0%{transform:scale(1.04);filter:blur(1.5px)}to{transform:scale(1);filter:blur(0)}}@keyframes speaker-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.25)}}@keyframes gate-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes blur-in{0%{filter:blur(0);opacity:1}to{filter:blur(6px);opacity:.75}}@keyframes bar-idle{0%,to{transform:scaleY(1)}50%{transform:scaleY(.82)}}@keyframes burst-fly{0%{transform:translate(0) rotate(0) scale(.4);opacity:0}15%{opacity:1}to{transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1);opacity:0}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
