:root{--sky:#c8e7ff;--sky-soft:#e0f1ff;--sky-deep:#95ccd5;--butter:#ffeec1;--gingham:#e9d6a6;--ink:#3d5c7f;--key:#7099c6;--btn:#7676c4;--btn-dark:#5f5fab;--lav:#a9b4ec;--wrong:#e05338;--pink:#ffeef8;--blush:#f7b6c2;--cream:#fff5e5;--paper:#f8f4e8;--white:#fff;--f-hand:"Patrick Hand", "Comic Sans MS", cursive;--f-round:"Fredoka", system-ui, sans-serif;--f-label:"Montserrat", system-ui, sans-serif;--f-body:"Quicksand", system-ui, sans-serif;--phone:430px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;margin:0}body{color:var(--ink);font-family:var(--f-body);-webkit-font-smoothing:antialiased;overscroll-behavior:none;background:#d9ecfb}#root{justify-content:center;min-height:100%;display:flex}img{max-width:100%;display:block}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}button:focus-visible{outline:3px solid var(--btn);outline-offset:3px}.stage{width:100%;max-width:var(--phone);min-height:100dvh;position:relative;overflow-x:hidden}@media (width>=520px){body{background:radial-gradient(circle at 20% 10%,#eaf5ff,#cfe5f7 60%)}.stage{box-shadow:0 0 0 1px #3d5c7f14,0 30px 80px #3d5c7f2e}}.bg-wavy{background-color:var(--sky-soft);background-image:radial-gradient(60% 40% at 15% 20%, #c8e7ffe6, transparent 70%), radial-gradient(50% 35% at 85% 45%, #bee0fce6, transparent 70%), radial-gradient(55% 40% at 25% 80%, #c8e7ffe6, transparent 70%), repeating-conic-gradient(from 12deg at 50% 50%, #ffffff59 0 25%, transparent 0 50%);background-size:100% 100%,100% 100%,100% 100%,180px 180px}.bg-gingham{background-color:var(--butter);background-image:repeating-linear-gradient(0deg,#d6ba7859 0 14px,#0000 14px 28px),repeating-linear-gradient(90deg,#d6ba7859 0 14px,#0000 14px 28px)}.bg-hearts{background-color:var(--pink);background-image:radial-gradient(circle,#f7b6c28c 3px,#0000 3.5px);background-size:34px 34px}.hand{font-family:var(--f-hand);line-height:1.05}.round{font-family:var(--f-round)}.label{font-family:var(--f-label);text-transform:uppercase;letter-spacing:.08em}.pre{white-space:pre-line}.pill{background:var(--btn);color:#fafafa;min-width:200px;height:56px;font-family:var(--f-round);letter-spacing:.02em;box-shadow:0 5px 0 var(--btn-dark), 0 10px 20px #7676c459;-webkit-user-select:none;user-select:none;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:0 28px;font-size:22px;font-weight:600;transition:transform .12s,box-shadow .12s;display:inline-flex}.pill:active{box-shadow:0 1px 0 var(--btn-dark), 0 4px 10px #7676c44d;transform:translateY(4px)}.pill.red{background:var(--wrong);box-shadow:0 5px #b8402a,0 10px 20px #e0533859}.frame{background:var(--sky);position:relative;-webkit-mask:radial-gradient(34px at 0 0,#0000 33px,#000 34px) 0 0/51% 51% no-repeat,radial-gradient(34px at 100% 0,#0000 33px,#000 34px) 100% 0/51% 51% no-repeat,radial-gradient(34px at 0 100%,#0000 33px,#000 34px) 0 100%/51% 51% no-repeat,radial-gradient(34px at 100% 100%,#0000 33px,#000 34px) 100% 100%/51% 51% no-repeat;mask:radial-gradient(34px at 0 0,#0000 33px,#000 34px) 0 0/51% 51% no-repeat,radial-gradient(34px at 100% 0,#0000 33px,#000 34px) 100% 0/51% 51% no-repeat,radial-gradient(34px at 0 100%,#0000 33px,#000 34px) 0 100%/51% 51% no-repeat,radial-gradient(34px at 100% 100%,#0000 33px,#000 34px) 100% 100%/51% 51% no-repeat}.frame-wrap{filter:drop-shadow(0 0 #fff)drop-shadow(0 2px #ffffffe6)drop-shadow(0 6px 14px #a082462e)}.bubble{font-family:var(--f-hand);text-align:center;color:var(--ink);background:#fff;border:3px solid #1f2a37;border-radius:50%/46%;padding:14px 22px;font-size:19px;line-height:1.15;position:relative}.bubble:after{content:"";background:#fff;border-bottom:3px solid #1f2a37;border-right:3px solid #1f2a37;border-radius:0 0 4px;width:18px;height:18px;position:absolute;top:50%;right:-12px;transform:translateY(-50%)rotate(-45deg)skew(10deg,10deg)}.ph{color:#7d97b6;font-family:var(--f-label);letter-spacing:.1em;text-transform:uppercase;text-align:center;background:repeating-linear-gradient(-45deg,#e4eefb 0 10px,#d6e5f7 10px 20px);place-items:center;padding:6px;font-size:11px;display:grid}.face-ph{color:var(--ink);font-family:var(--f-round);background:radial-gradient(circle at 50% 38%,#ffe2d0 0 55%,#f6c9b2 56%);border-radius:50%;place-items:center;font-weight:600;display:grid}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.fb{transform-box:fill-box}@keyframes sway{0%,to{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes wiggle{0%,to{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}@keyframes twinkle{0%,to{opacity:1;transform:scale(1)rotate(0)}50%{opacity:.55;transform:scale(.7)rotate(18deg)}}@keyframes flutter{0%,to{transform:skewY(-4deg)scaleX(1)}50%{transform:skewY(4deg)scaleX(.95)}}@keyframes flag{0%,to{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}@keyframes blink{0%,92%,to{transform:scaleY(1)}96%{transform:scaleY(.1)}}.a-sway{animation:3.6s ease-in-out infinite sway}.a-bob{animation:3s ease-in-out infinite bob}.a-wiggle{animation:3.2s ease-in-out infinite wiggle}.a-twinkle{animation:2.4s ease-in-out infinite twinkle}.a-flutter{animation:1.8s ease-in-out infinite flutter}.a-flag{animation:2.6s ease-in-out infinite flag}.a-blink{animation:4.5s infinite blink}
