*,*:before,*:after{box-sizing:border-box}*{margin:0}html{interpolate-size:allow-keywords}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p{overflow-wrap:break-word;text-wrap:pretty}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;text-wrap:balance}#root,#app{isolation:isolate}:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;color-scheme:dark}body{min-height:100dvh;background:#0a0014;background-image:radial-gradient(ellipse at 15% 80%,rgba(128,0,255,.12) 0%,transparent 50%),radial-gradient(ellipse at 85% 20%,rgba(0,255,200,.08) 0%,transparent 50%),radial-gradient(ellipse at 50% 50%,rgba(255,0,128,.06) 0%,transparent 60%);color:#e0d0ff}#app{margin-inline:auto;padding:1rem}@keyframes rainbow-shift{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}@keyframes neon-pulse{0%,to{opacity:1;text-shadow:0 0 10px currentColor,0 0 20px currentColor,0 0 40px currentColor}50%{opacity:.85;text-shadow:0 0 5px currentColor,0 0 10px currentColor,0 0 20px currentColor}}@keyframes bg-trip{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes warp-float{0%{transform:scale(1) rotate(0)}25%{transform:scale(1.02) rotate(.5deg)}50%{transform:scale(1) rotate(0)}75%{transform:scale(.98) rotate(-.5deg)}to{transform:scale(1) rotate(0)}}@keyframes border-dance{0%{border-color:#f0f;box-shadow:0 0 8px #f0f,inset 0 0 8px #ff00ff1a}25%{border-color:#0ff;box-shadow:0 0 8px #0ff,inset 0 0 8px #00ffff1a}50%{border-color:#f0a;box-shadow:0 0 8px #f0a,inset 0 0 8px #ff00aa1a}75%{border-color:#af0;box-shadow:0 0 8px #af0,inset 0 0 8px #aaff001a}to{border-color:#f0f;box-shadow:0 0 8px #f0f,inset 0 0 8px #ff00ff1a}}@keyframes glow-breathe{0%,to{box-shadow:0 0 20px #f0f6,0 0 60px #0ff3,0 0 100px #ff00801a}50%{box-shadow:0 0 30px #00ffff80,0 0 80px #ff00ff4d,0 0 120px #8000ff26}}@keyframes psychedelic-bg{0%{background-position:0% 0%}25%{background-position:100% 0%}50%{background-position:100% 100%}75%{background-position:0% 100%}to{background-position:0% 0%}}@keyframes wobble-text{0%,to{transform:skew(0)}25%{transform:skew(1deg)}75%{transform:skew(-1deg)}}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes color-cycle-text{0%{color:#f0f}16%{color:#f06}33%{color:#fa0}50%{color:#0f8}66%{color:#0cf}83%{color:#a0f}to{color:#f0f}}@keyframes face-rotate{0%{transform:perspective(600px) rotateY(-30deg) rotateX(5deg) rotate(-2deg)}50%{transform:perspective(600px) rotateY(30deg) rotateX(-5deg) rotate(2deg)}to{transform:perspective(600px) rotateY(-30deg) rotateX(5deg) rotate(-2deg)}}@keyframes float-particle{0%,to{transform:translateY(0) scale(1) rotate(0);opacity:.8}25%{transform:translateY(-18px) scale(1.3) rotate(90deg);opacity:1}50%{transform:translateY(-8px) scale(1.1) rotate(180deg);opacity:.9}75%{transform:translateY(-22px) scale(1.4) rotate(270deg);opacity:1}}@keyframes scene-glow-ring{0%,to{box-shadow:inset 0 0 30px #ff00ff26,inset 0 0 60px #00ffff1a,0 0 20px #ff00ff4d,0 0 40px #0ff3,0 0 80px #8000ff26}50%{box-shadow:inset 0 0 40px #0ff3,inset 0 0 80px #ff00801a,0 0 30px #0ff6,0 0 60px #ff00ff4d,0 0 100px #ff800026}}@keyframes shadow-pulse{0%,to{transform:translate(-50%) scaleX(1);opacity:.3;background:radial-gradient(ellipse,rgba(255,0,255,.3) 0%,transparent 70%)}50%{transform:translate(-50%) scaleX(1.2);opacity:.5;background:radial-gradient(ellipse,rgba(0,255,255,.3) 0%,transparent 70%)}}.emoji-creator{max-width:1000px;margin:0 auto;padding:.5rem 1rem 2rem;position:relative}.emoji-creator:before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at 20% 50%,rgba(255,0,255,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(0,255,255,.08) 0%,transparent 50%),radial-gradient(ellipse at 50% 80%,rgba(255,128,0,.06) 0%,transparent 50%);background-size:200% 200%;animation:psychedelic-bg 20s ease infinite;pointer-events:none;z-index:-1}.creator-header{text-align:center;margin-bottom:1.5rem;animation:warp-float 6s ease-in-out infinite}.creator-header h1{font-size:2.8rem;font-weight:900;letter-spacing:.02em;background:linear-gradient(90deg,#f0f,#0ff,#f0a,#af0,#f60,#f0f);background-size:300% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:bg-trip 4s ease infinite;text-shadow:none;filter:drop-shadow(0 0 10px rgba(255,0,255,.4))}.creator-subtitle{font-size:1.05rem;margin-top:.3rem;font-weight:600;animation:color-cycle-text 6s linear infinite;text-shadow:0 0 8px currentColor}.creator-layout{display:grid;grid-template-columns:minmax(320px,1.1fr) 1fr;gap:2rem;align-items:start}.preview-section{position:sticky;top:1rem}.emoji-scene{position:relative;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;max-width:380px;margin:0 auto;border-radius:28px;overflow:hidden;transition:background .4s ease;animation:scene-glow-ring 4s ease-in-out infinite;border:2px solid rgba(255,0,255,.3);perspective:800px}.emoji-scene:before{content:"";position:absolute;inset:-3px;border-radius:30px;background:conic-gradient(from 0deg,#f0f,#0ff,#af0,#f60,#f0a,#0ff,#f0f);z-index:-1;animation:spin-slow 8s linear infinite;filter:blur(4px)}.emoji-scene:after{content:"";position:absolute;inset:0;border-radius:28px;background:radial-gradient(circle at 30% 30%,rgba(255,0,255,.1) 0%,transparent 40%),radial-gradient(circle at 70% 70%,rgba(0,255,255,.1) 0%,transparent 40%);pointer-events:none;z-index:4;animation:psychedelic-bg 10s ease infinite;background-size:200% 200%;mix-blend-mode:screen}.scene-dark{color:#fff}.face-shadow{position:absolute;bottom:15%;left:50%;width:45%;height:16px;border-radius:50%;z-index:0;animation:shadow-pulse 3s ease-in-out infinite;transform:translate(-50%)}.emoji-stage{position:relative;width:58%;aspect-ratio:1;transform-style:preserve-3d;z-index:1;filter:drop-shadow(0 0 15px rgba(255,0,255,.25)) drop-shadow(0 0 30px rgba(0,255,255,.15))}.emoji-stage.rotating{animation:face-rotate 5s ease-in-out infinite}.face-base{position:absolute;inset:0;transform:translateZ(0);transition:background-color .3s ease,border-radius .3s ease;box-shadow:inset 0 -10px 25px #0000001f,inset 0 4px 15px #ffffff26,0 0 20px #ff00ff26}.face-circle{border-radius:50%}.face-squircle{border-radius:28%}.face-square{border-radius:14%}.face-oval{border-radius:50%;left:12%;right:12%}.face-cat{border-radius:50%}.face-cheeks{position:absolute;inset:0;pointer-events:none}.face-cheeks:before,.face-cheeks:after{content:"";position:absolute;width:20%;height:12%;background:#ff00b440;border-radius:50%;top:50%;filter:blur(2px);box-shadow:0 0 10px #ff00b44d}.face-cheeks:before{left:10%}.face-cheeks:after{right:10%}.cat-ear{position:absolute;width:0;height:0;border-left:28px solid transparent;border-right:28px solid transparent;border-bottom:45px solid;z-index:2;filter:drop-shadow(0 0 6px rgba(255,0,255,.3))}.cat-ear:before{content:"";position:absolute;top:12px;left:-14px;width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-bottom:22px solid rgba(255,255,255,.3)}.cat-ear-left{top:-32px;left:12px;transform:rotate(-12deg)}.cat-ear-right{top:-32px;right:12px;transform:rotate(12deg)}.face-layer{position:absolute;inset:0;pointer-events:none}.layer-eyebrows{transform:translateZ(12px)}.layer-eyes{transform:translateZ(18px)}.layer-glasses{transform:translateZ(24px)}.layer-mouth{transform:translateZ(14px)}.layer-hat{transform:translateZ(30px)}.eye-pos{position:absolute;top:38%;display:flex;align-items:center;justify-content:center}.eye-pos-left{left:28%;transform:translate(-50%)}.eye-pos-right{right:28%;transform:translate(50%)}.eye-round{position:relative;width:16px;height:16px;background:#2d3436;border-radius:50%;box-shadow:0 0 6px #0ff6}.eye-highlight{position:absolute;width:5px;height:5px;background:#fff;border-radius:50%;top:2px;right:3px;box-shadow:0 0 4px #fffc}.eye-arc{width:18px;height:9px;border-bottom:3px solid #2d3436;border-radius:0 0 50% 50%}.eye-emoji{font-size:18px;line-height:1;filter:drop-shadow(0 0 4px rgba(255,200,0,.5))}.eye-line{width:18px;height:3px;background:#2d3436;border-radius:2px}.eye-big-circle{width:20px;height:20px;border:3px solid #2d3436;border-radius:50%;background:#fff;box-shadow:0 0 8px #00ffff4d}.mouth{position:absolute;top:62%;left:50%;transform:translate(-50%)}.mouth-smile{width:36px;height:18px;border-bottom:3px solid #2d3436;border-radius:0 0 50% 50%}.mouth-grin{position:relative;width:46px;height:22px;background:#2d3436;border-radius:0 0 50% 50%;overflow:hidden}.mouth-teeth{position:absolute;bottom:0;left:3px;right:3px;height:7px;background:#fff;border-radius:0 0 50% 50%}.mouth-smirk{width:28px;height:14px;border-bottom:3px solid #2d3436;border-radius:0 0 70% 30%;transform:translate(-50%) rotate(5deg)}.mouth-open{width:22px;height:26px;background:#2d3436;border-radius:50%}.mouth-tongue-wrap{position:absolute;top:62%;left:50%;transform:translate(-50%)}.mouth-tongue-arc{width:36px;height:18px;border-bottom:3px solid #2d3436;border-radius:0 0 50% 50%}.mouth-tongue-bit{position:absolute;bottom:-8px;left:50%;transform:translate(-50%);width:14px;height:10px;background:#e84393;border-radius:0 0 50% 50%;box-shadow:0 0 6px #e8439380}.mouth-flat{width:28px;height:3px;background:#2d3436;border-radius:2px}.mouth-sad{width:32px;height:16px;border-top:3px solid #2d3436;border-radius:50% 50% 0 0}.eyebrow-pos{position:absolute;top:27%}.eyebrow-pos-left{left:28%;transform:translate(-50%)}.eyebrow-pos-right{right:28%;transform:translate(50%)}.eyebrow-normal{width:20px;height:8px;border-top:3px solid #2d3436;border-radius:50% 50% 0 0}.eyebrow-angry{width:20px;height:3px;background:#2d3436;border-radius:2px}.eyebrow-angry.eyebrow-side-left{transform:rotate(15deg);transform-origin:right center}.eyebrow-angry.eyebrow-side-right{transform:rotate(-15deg);transform-origin:left center}.eyebrow-worried{width:20px;height:3px;background:#2d3436;border-radius:2px}.eyebrow-worried.eyebrow-side-left{transform:rotate(-12deg);transform-origin:right center}.eyebrow-worried.eyebrow-side-right{transform:rotate(12deg);transform-origin:left center}.eyebrow-raised{width:20px;height:10px;border-top:3px solid #2d3436;border-radius:50% 50% 0 0;margin-top:-6px}.eyebrow-thick{width:22px;height:6px;background:#2d3436;border-radius:3px}.layer-hat{display:flex;justify-content:center}.hat-emoji{position:absolute;top:-8%;font-size:52px;line-height:1;filter:drop-shadow(0 2px 8px rgba(255,0,255,.3))}.layer-glasses{display:flex;justify-content:center}.glasses-emoji{position:absolute;top:32%;font-size:48px;line-height:1;transform:translateY(-50%);filter:drop-shadow(0 0 4px rgba(0,255,255,.3))}.extras-container{position:absolute;inset:-15px;pointer-events:none;z-index:5}.extra-particle{position:absolute;font-size:22px;animation:float-particle 3s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(255,200,0,.5))}.particle-0{top:6%;left:6%;animation-delay:0s}.particle-1{top:10%;right:6%;animation-delay:.5s}.particle-2{bottom:16%;left:4%;animation-delay:1s}.particle-3{bottom:8%;right:4%;animation-delay:1.5s}.particle-4{top:50%;left:0%;animation-delay:.7s}.particle-5{top:42%;right:0%;animation-delay:1.2s}.preview-actions{display:flex;justify-content:center;gap:.5rem;margin-top:1.2rem;flex-wrap:wrap}.action-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.55rem 1.1rem;border:2px solid #ff00ff;border-radius:14px;background:#14001ed9;font-size:.85rem;font-weight:700;cursor:pointer;transition:all .2s ease;color:#f8f;text-shadow:0 0 6px rgba(255,0,255,.4);box-shadow:0 0 10px #f0f3,inset 0 0 10px #ff00ff0d}.action-btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 0 20px #f0f6,0 4px 15px #0000004d;border-color:#f4f;color:#faf;background:#28003ce6}.action-btn:active{transform:translateY(0) scale(.97)}.randomize-btn{border-color:#0ff;color:#8ff;text-shadow:0 0 6px rgba(0,255,255,.4);box-shadow:0 0 10px #0ff3,inset 0 0 10px #00ffff0d}.randomize-btn:hover{box-shadow:0 0 20px #0ff6,0 4px 15px #0000004d;border-color:#4ff;color:#aff;background:#001e28e6}.reset-btn{border-color:#f60;color:#fa6;text-shadow:0 0 6px rgba(255,102,0,.4);box-shadow:0 0 10px #f603,inset 0 0 10px #ff66000d}.reset-btn:hover{box-shadow:0 0 20px #f606,0 4px 15px #0000004d;border-color:#f83;color:#fc8;background:#280f00e6}.export-btn{border-color:#af0;color:#cf6;text-shadow:0 0 6px rgba(170,255,0,.4);box-shadow:0 0 10px #af03,inset 0 0 10px #aaff000d}.export-btn:hover{box-shadow:0 0 20px #af06,0 4px 15px #0000004d;border-color:#cf4;color:#ef9;background:#141e00e6}.export-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.export-error{border-color:#f33;color:#f88;text-shadow:0 0 6px rgba(255,50,50,.4)}.controls-section{display:flex;flex-direction:column;gap:1.25rem;background:#0a001499;border-radius:20px;padding:1.25rem;border:1px solid rgba(255,0,255,.15);box-shadow:0 0 30px #8000ff14;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.control-group h2{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;margin-bottom:.5rem;animation:color-cycle-text 8s linear infinite;text-shadow:0 0 6px currentColor}.option-grid{display:flex;flex-wrap:wrap;gap:.4rem}.option-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px;border:2px solid rgba(255,0,255,.25);border-radius:12px;background:#140028b3;cursor:pointer;transition:all .2s ease;min-width:56px;color:#e0c0ff}.option-btn:hover{transform:translateY(-2px);box-shadow:0 0 12px #ff00ff40,0 4px 8px #0003;border-color:#0ff6;background:#1e003ccc}.option-btn:active{transform:translateY(0) scale(.95)}.option-btn.selected{border-color:#0ff;background:#00283cb3;box-shadow:0 0 12px #00ffff4d,inset 0 0 8px #00ffff1a;animation:none}.option-emoji{font-size:1.25rem;line-height:1.2;filter:drop-shadow(0 0 3px rgba(255,200,100,.3))}.option-label{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:#c8b4ffb3;white-space:nowrap}.option-btn.selected .option-label{color:#8ff;text-shadow:0 0 4px rgba(0,255,255,.3)}.color-btn{padding:6px;min-width:40px}.color-swatch{display:block;width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.15);transition:all .2s ease;box-shadow:0 0 6px #ffffff1a}.color-btn.selected .color-swatch{transform:scale(1.2);border-color:#0ff;box-shadow:0 0 12px #0ff6}.bg-btn{min-width:52px}.bg-preview{display:block;width:32px;height:20px;border-radius:6px;border:1px solid rgba(255,255,255,.15);box-shadow:0 0 4px #f0f3}.preset-btn{border-color:#aaff0040;background:linear-gradient(135deg,#1e0032cc,#0a001ecc)}.preset-btn:hover{border-color:#aaff0080;background:linear-gradient(135deg,#280a3ce6,#140028e6);box-shadow:0 0 12px #af03}@media(max-width:720px){.creator-layout{grid-template-columns:1fr}.preview-section{position:static}.emoji-scene{max-width:320px}.creator-header h1{font-size:2rem}}@media(max-width:400px){.emoji-creator{padding:.5rem}.emoji-scene{max-width:260px}.option-btn{min-width:48px;padding:5px 7px}.option-emoji{font-size:1.1rem}.preview-actions{flex-wrap:wrap}.controls-section{padding:.75rem}}@media(prefers-color-scheme:dark){.emoji-scene{box-shadow:0 4px 30px #0006,0 0 40px #f0f3,0 0 80px #00ffff1a}.eye-round{background:#e2e8f0;box-shadow:0 0 8px #00ffff80}.eye-arc{border-bottom-color:#e2e8f0}.eye-line{background:#e2e8f0}.eye-big-circle{border-color:#e2e8f0;box-shadow:0 0 10px #0ff6}.mouth-smile,.mouth-smirk,.mouth-sad{border-color:#e2e8f0}.mouth-grin,.mouth-open,.mouth-flat{background:#e2e8f0}.mouth-tongue-arc{border-bottom-color:#e2e8f0}.eyebrow-normal,.eyebrow-raised{border-top-color:#e2e8f0}.eyebrow-angry,.eyebrow-worried,.eyebrow-thick{background:#e2e8f0}}