*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--cream: #FFF8F0;--coral: #FF6B35;--coral-dark: #E55A25;--teal: #4ECDC4;--yellow: #FFD93D;--purple: #C084FC;--pink: #FB7185;--green: #4ADE80;--blue: #60A5FA;--sky: #BAE6FD;--dark: #1C1011;--brown: #7C3A1E;--shadow: rgba(28, 16, 17, .12);--radius: 20px;--font-display: "Baloo 2", cursive;--font-body: "Nunito", sans-serif}html,body{height:100%;height:100dvh;background:var(--cream)}body{font-family:var(--font-body);color:var(--dark);overflow-x:hidden}.app-root{min-height:100vh;width:100%}@keyframes float{0%,to{transform:translateY(0) rotate(0)}33%{transform:translateY(-12px) rotate(-3deg)}66%{transform:translateY(-6px) rotate(3deg)}}@keyframes floatB{0%,to{transform:translateY(0) rotate(5deg)}50%{transform:translateY(-18px) rotate(-5deg)}}@keyframes sparkle{0%,to{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(1.4) rotate(180deg);opacity:.8}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spinSlow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes pulse-ring{0%{transform:scale(.9);box-shadow:0 0 #ff6b3580}70%{transform:scale(1);box-shadow:0 0 0 16px #ff6b3500}to{transform:scale(.9);box-shadow:0 0 #ff6b3500}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes rainbow{0%{color:var(--coral)}20%{color:var(--yellow)}40%{color:var(--green)}60%{color:var(--teal)}80%{color:var(--purple)}to{color:var(--coral)}}@keyframes starPop{0%{transform:scale(0) rotate(-20deg);opacity:0}60%{transform:scale(1.2) rotate(5deg);opacity:1}to{transform:scale(1) rotate(0);opacity:1}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}.btn-primary{display:inline-flex;align-items:center;gap:10px;padding:16px 36px;background:var(--coral);color:#fff;font-family:var(--font-display);font-size:1.25rem;font-weight:700;border:none;border-radius:50px;cursor:pointer;box-shadow:0 6px 0 var(--coral-dark),0 8px 20px var(--shadow);transition:transform .1s,box-shadow .1s;user-select:none;-webkit-user-select:none}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--coral-dark),0 12px 24px var(--shadow)}.btn-primary:active{transform:translateY(3px);box-shadow:0 3px 0 var(--coral-dark),0 4px 12px var(--shadow)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-secondary{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:#fff;color:var(--dark);font-family:var(--font-display);font-size:1rem;font-weight:600;border:3px solid var(--dark);border-radius:50px;cursor:pointer;box-shadow:3px 3px 0 var(--dark);transition:transform .1s,box-shadow .1s}.btn-secondary:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--dark)}.btn-secondary:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--dark)}input[type=color]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:50%;overflow:hidden}input[type=color]::-webkit-color-swatch-wrapper{padding:0;border:none;border-radius:50%}input[type=color]::-webkit-color-swatch{border:none;border-radius:50%}input[type=color]::-moz-color-swatch{border:none;border-radius:50%}@keyframes ttipIn{0%{opacity:0;transform:translateY(-50%) translate(-8px) scale(.95)}to{opacity:1;transform:translateY(-50%) translate(0) scale(1)}}.ttip{position:relative;display:inline-flex}.ttip-bubble{position:absolute;z-index:50;pointer-events:none;opacity:0;transform:translateY(4px) scale(.96);transition:opacity .18s ease,transform .18s ease;background:linear-gradient(135deg,#1c1011,#2a1718);color:#fff;padding:10px 14px;border-radius:14px;box-shadow:0 8px 24px #00000040,0 0 0 2px #ffc8504d;font-family:var(--font-body);white-space:nowrap;display:flex;align-items:center;gap:10px;min-width:max-content;max-width:240px}.ttip:hover .ttip-bubble,.ttip:focus-within .ttip-bubble{opacity:1;transform:translateY(0) scale(1);transition-delay:.25s}.ttip-bubble:after{content:"";position:absolute;width:10px;height:10px;background:linear-gradient(135deg,#1c1011,#2a1718);transform:rotate(45deg)}.ttip-emoji{font-size:1.35rem;line-height:1;flex-shrink:0}.ttip-text{display:flex;flex-direction:column;gap:2px;white-space:normal}.ttip-text strong{font-family:var(--font-display);font-size:.92rem;font-weight:800;color:#ffd93d;letter-spacing:.01em}.ttip-text em{font-style:normal;font-size:.78rem;color:#ffffffd9;line-height:1.35}.ttip-top .ttip-bubble{bottom:calc(100% + 10px);left:50%;transform:translate(-50%) translateY(4px) scale(.96)}.ttip-top:hover .ttip-bubble,.ttip-top:focus-within .ttip-bubble{transform:translate(-50%) translateY(0) scale(1)}.ttip-top .ttip-bubble:after{bottom:-5px;left:50%;margin-left:-5px}.ttip-right .ttip-bubble{left:calc(100% + 10px);top:50%;transform:translateY(-50%) translate(4px) scale(.96)}.ttip-right:hover .ttip-bubble,.ttip-right:focus-within .ttip-bubble{transform:translateY(-50%) translate(0) scale(1)}.ttip-right .ttip-bubble:after{left:-5px;top:50%;margin-top:-5px}.ttip-bottom .ttip-bubble{top:calc(100% + 10px);left:50%;transform:translate(-50%) translateY(-4px) scale(.96)}.ttip-bottom:hover .ttip-bubble,.ttip-bottom:focus-within .ttip-bubble{transform:translate(-50%) translateY(0) scale(1)}.ttip-bottom .ttip-bubble:after{top:-5px;left:50%;margin-left:-5px}