*{margin:0;padding:0;box-sizing:border-box}html{overflow-x:hidden}body{font-family:Inter,sans-serif;background:radial-gradient(ellipse 120% 80% at 0% 0%,#e8c0d8 0%,transparent 100%),radial-gradient(ellipse 120% 80% at 100% 0%,#e8c0d8 0%,transparent 100%),radial-gradient(ellipse 60% 50% at 50% 0%,#faf0f5 0%,transparent 100%),linear-gradient(180deg,#edd0e0,#fff);background-size:150% 150%;color:#0f172a;min-height:100vh;overflow-x:hidden;animation:gradient-shift 20s ease-in-out infinite alternate}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:9999;opacity:.035;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-repeat:repeat;background-size:256px 256px}.wrapper{max-width:900px;margin:0 auto;padding:20px 16px;position:relative;animation:fadeInUp .8s ease-out both}.canvas-doodles{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}header{display:flex;justify-content:center;align-items:center;padding:16px 0 24px}.logo-icon{width:341px;height:auto}.translator-box{position:relative;background:#f8f4ee;border-radius:4px 24px;padding:32px 28px 24px;box-shadow:6px 6px #c8aab44d,0 2px 12px #0000000a;z-index:2;transform:rotate(-.4deg);animation:float 6s ease-in-out infinite,glow-pulse 4s ease-in-out infinite;--amp: -3px;--rot: -.4deg;--glow-color: rgba(200, 170, 180, .15)}.tape{position:absolute;height:22px;z-index:3;pointer-events:none;border-radius:1px;background:repeating-linear-gradient(90deg,#d2bec859,#d2bec859 3px,#e1d2d726 3px,#e1d2d726 8px,#d2bec840 8px,#d2bec840 11px,#e6d7dc1a 11px,#e6d7dc1a 16px);box-shadow:0 1px 2px #0000000a,inset 0 1px #ffffff4d}.tape.top-left{top:-8px;left:50px;width:70px;transform:rotate(-6deg);--tape-rot: -6deg;animation:tape-flutter 5s ease-in-out infinite}.tape.top-right{top:-7px;right:60px;width:55px;transform:rotate(5deg);--tape-rot: 5deg;animation:tape-flutter 4.5s ease-in-out infinite 1s}.tape.bottom-left{bottom:-6px;left:40px;width:50px;transform:rotate(-4deg);--tape-rot: -4deg;animation:tape-flutter 5.5s ease-in-out infinite .5s}.tape.bottom-right{bottom:-7px;right:80px;width:60px;transform:rotate(7deg);--tape-rot: 7deg;animation:tape-flutter 4s ease-in-out infinite 1.5s}.zine-layout{display:grid;grid-template-columns:1.4fr 44px 1fr;gap:12px;align-items:start}.textarea-wrap{position:relative}.textarea-wrap textarea{width:100%;border-radius:12px;border:1.5px solid #e6ddd4;padding:14px 16px 34px;resize:none;font-size:16px;line-height:1.6;outline:none;background:#fefcf9;color:#2a1a2e;transition:border-color .2s,box-shadow .2s;font-family:inherit}.input-wrap textarea{height:260px;border-radius:14px 6px}.output-wrap textarea{height:200px;border-radius:6px 14px}.textarea-wrap textarea:focus{border-color:#d4b8c8;box-shadow:0 0 0 3px #b48cb41a}.textarea-wrap textarea::placeholder{color:#c8b8b8;font-family:Caveat,cursive;font-size:18px}.textarea-wrap textarea.loading{opacity:.5}.sticker-select{position:absolute;top:-8px;z-index:2}.input-wrap .sticker-select{left:12px}.output-wrap .sticker-select{right:12px}.sticker-select{animation:fadeInScale .5s ease-out both}.sticker-select select{padding:4px 10px 4px 8px;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;border:1px solid #ddd0c8;border-radius:20px;background:#fefcf9;color:#5a3a4e;outline:none;cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;transition:background .15s,box-shadow .15s;min-width:70px}.sticker-select select:hover{background:#f6f0ea;box-shadow:0 0 0 2px #c8aab433}.lang-tag{position:absolute;bottom:8px;right:14px;font-size:11px;color:#b098a0;font-family:Caveat,cursive;pointer-events:none;letter-spacing:.3px;--op-from: .5;--op-to: .9;--dur: 3s;animation:twinkle 3s ease-in-out infinite}.switch-btn{width:44px;height:44px;border-radius:50%;border:1.5px solid #e6ddd4;background:#f8f4ee;font-size:18px;cursor:pointer;transition:background .15s,transform .12s,box-shadow .2s;display:flex;align-items:center;justify-content:center;color:#7a5a6e;margin-top:80px;justify-self:center}.switch-btn:hover:not(:disabled){background:#efe8e0;box-shadow:0 0 0 3px #c8aab433;animation:spin-slow .8s ease-in-out}.switch-btn:active:not(:disabled){transform:scale(.88)}.switch-btn:disabled{opacity:.3;cursor:not-allowed;border-color:#e8ddd6}.switch-btn.spinning{animation:spin-slow .6s ease-in-out}.loading-dots{display:inline-flex;align-items:center;gap:4px}.loading-dots span{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;animation:loading-dot 1.4s ease-in-out infinite both}.loading-dots span:nth-child(1){animation-delay:-.32s}.loading-dots span:nth-child(2){animation-delay:-.16s}.loading-dots span:nth-child(3){animation-delay:0s}.translate-btn{display:block;margin:20px auto 0;min-width:170px;height:48px;border-radius:24px;background:#ffffff2e;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#3a2040;font-size:14px;font-weight:600;cursor:pointer;transition:transform .15s,box-shadow .3s,background .3s;padding:0 28px;letter-spacing:.5px;border:1px solid rgba(255,255,255,.35);position:relative;overflow:hidden;text-transform:uppercase;box-shadow:0 2px 8px #c8aab426,inset 0 1px #fff6}.translate-btn:before{content:"";position:absolute;top:-60%;left:-60%;width:220%;height:220%;background:conic-gradient(from 0deg,transparent 0deg,rgba(255,255,255,.08) 60deg,rgba(255,255,255,.2) 120deg,rgba(255,255,255,.08) 180deg,transparent 240deg,transparent 360deg);animation:liquidShimmer 4s linear infinite;pointer-events:none}@keyframes liquidShimmer{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.translate-btn:hover:not(:disabled){background:#ffffff47;box-shadow:0 4px 20px #c8aab440,0 0 30px #7c3aed1f,inset 0 1px #ffffff80;transform:translateY(-1px)}.translate-btn:not(:disabled){animation:glow-pulse 3s ease-in-out infinite;--glow-color: rgba(124, 58, 237, .08)}.translate-btn:active:not(:disabled){transform:scale(.96) translateY(0);background:#ffffff1f}.translate-btn:disabled{opacity:.25;cursor:not-allowed;background:#c8b4be1a}.error-msg{margin-top:12px;padding:8px 14px;background:#b43c3c0f;color:#a04040;border-radius:8px;font-size:13px;border:1px solid rgba(180,60,60,.1);animation:shake .45s ease-in-out}.hint{text-align:center;margin-top:10px;font-size:14px;color:#b098a0;font-family:Caveat,cursive;--op-from: .5;--op-to: .85;--dur: 3.5s;animation:twinkle 3.5s ease-in-out infinite}.sticker-scene{position:relative;z-index:1;animation:fadeInScale 1s ease-out both}.sticker{position:absolute;width:130px;height:auto;filter:drop-shadow(2px 4px 8px rgba(0,0,0,.12));pointer-events:none}.marquee{position:absolute;top:50%;left:50%;width:200vw;overflow:hidden;z-index:0;font-size:80px;font-weight:700;color:#965f87a6;white-space:nowrap;pointer-events:none;-webkit-user-select:none;user-select:none;transform:translate(-50%,-50%) rotate(-3deg);letter-spacing:3px;text-transform:uppercase;line-height:1}.marquee span{display:inline-block;animation:marqueeScroll 40s linear infinite}@keyframes marqueeScroll{0%{transform:translate(0)}to{transform:translate(-50%)}}.marquee.m2{top:calc(50% + 80px)}.marquee.m3{top:calc(50% + 160px)}.marquee.m2 span{animation-duration:25s}.marquee.m3 span{animation-duration:55s;animation-direction:reverse}.s-left-1{left:-100px;bottom:-50px;transform:rotate(-10deg);z-index:1;--rot: -10deg;--amp: -8px;--dur: 4.5s;animation:float 4.5s ease-in-out infinite}.s-left-2{left:-160px;bottom:50px;transform:rotate(10deg);z-index:2;--rot: 10deg;--amp: -10px;--dur: 5.5s;animation:float 5.5s ease-in-out infinite .5s}.s-right-1{right:-80px;bottom:-50px;transform:rotate(20deg);z-index:1;--rot: 20deg;--amp: -7px;--dur: 5s;animation:float 5s ease-in-out infinite 1s}.s-right-2{right:-150px;top:250px;transform:rotate(30deg);z-index:3;--rot: 30deg;--amp: -9px;--dur: 6s;animation:float 6s ease-in-out infinite .3s}.bts-left{width:340px;height:auto;left:-210px;top:-210px;transform:scale(1.5);z-index:-1;mask-image:linear-gradient(180deg,#000 20%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent 100%)}.bts-right{width:380px;height:auto;left:700px;top:-180px;transform:scale(2);z-index:-1;mask-image:linear-gradient(180deg,#000 40%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 100%);pointer-events:none}footer{text-align:center;margin-top:40px;color:#667085;font-size:14px;--op-from: .4;--op-to: .8;--dur: 4s;animation:twinkle 4s ease-in-out infinite}@media(max-width:768px){.zine-layout{grid-template-columns:1fr}.switch-btn{margin:0 auto}.input-wrap textarea,.output-wrap textarea{height:200px}.tape{display:none}}@keyframes float{0%{transform:translateY(0) rotate(var(--rot, 0deg))}25%{transform:translateY(var(--amp, -6px)) rotate(var(--rot, 0deg))}50%{transform:translateY(0) rotate(var(--rot, 0deg))}75%{transform:translateY(calc(var(--amp, -6px) * -.5)) rotate(var(--rot, 0deg))}to{transform:translateY(0) rotate(var(--rot, 0deg))}}@keyframes float-hero{0%{transform:translateY(0) scale(1)}33%{transform:translateY(-10px) scale(1.02)}66%{transform:translateY(-4px) scale(.98)}to{transform:translateY(0) scale(1)}}@keyframes sway{0%,to{transform:rotate(var(--rot-from, -2deg))}50%{transform:rotate(var(--rot-to, 2deg))}}@keyframes breathe{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}@keyframes glow-pulse{0%,to{box-shadow:0 0 8px var(--glow-color, rgba(124, 58, 237, .15)),0 0 20px var(--glow-color, rgba(124, 58, 237, .05))}50%{box-shadow:0 0 16px var(--glow-color, rgba(124, 58, 237, .3)),0 0 40px var(--glow-color, rgba(124, 58, 237, .1))}}@keyframes twinkle{0%,to{opacity:var(--op-from, .3)}50%{opacity:var(--op-to, 1)}}@keyframes heartbeat{0%,to{transform:scale(1)}14%{transform:scale(1.18)}28%{transform:scale(1)}42%{transform:scale(1.12)}56%{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}10%,50%,90%{transform:translate(-5px)}30%,70%{transform:translate(5px)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@keyframes tape-flutter{0%,to{transform:rotate(var(--tape-rot, -6deg)) translateY(0)}50%{transform:rotate(var(--tape-rot, -6deg)) translateY(-2px)}}@keyframes gradient-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes loading-dot{0%,80%,to{transform:scale(.4);opacity:.2}40%{transform:scale(1);opacity:1}}@keyframes drift{0%{transform:translate(0) rotate(var(--d-rot, 0deg))}25%{transform:translate(var(--dx, 4px),var(--dy, -4px)) rotate(var(--d-rot, 0deg))}50%{transform:translate(var(--dx2, -3px),var(--dy2, 3px)) rotate(var(--d-rot, 0deg))}75%{transform:translate(var(--dx3, 3px),var(--dy3, -2px)) rotate(var(--d-rot, 0deg))}to{transform:translate(0) rotate(var(--d-rot, 0deg))}}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes shimmer-text{0%{background-position:-200% center}to{background-position:200% center}}@keyframes pulse-ring{0%{transform:scale(.92);opacity:.6}50%{transform:scale(1.08);opacity:.3}to{transform:scale(.92);opacity:.6}}@keyframes slideInSticker{0%{opacity:0;transform:translateY(40px) scale(.6) rotate(0)}to{opacity:1;transform:translateY(0) scale(1) rotate(var(--rot, -10deg))}}@keyframes rainbow-border{0%{border-color:#7c3aed}20%{border-color:#a855f7}40%{border-color:#ec4899}60%{border-color:#f472b6}80%{border-color:#c084fc}to{border-color:#7c3aed}}.anim-float{animation:float var(--dur, 4s) ease-in-out infinite}.anim-float-hero{animation:float-hero var(--dur, 5s) ease-in-out infinite}.anim-sway{animation:sway var(--dur, 3s) ease-in-out infinite}.anim-breathe{animation:breathe var(--dur, 3.5s) ease-in-out infinite}.anim-glow-pulse{animation:glow-pulse var(--dur, 2.5s) ease-in-out infinite}.anim-twinkle{animation:twinkle var(--dur, 2.8s) ease-in-out infinite}.anim-heartbeat{animation:heartbeat var(--dur, 1.3s) ease-in-out infinite}.anim-shake{animation:shake .45s ease-in-out}.anim-fade-in-up{animation:fadeInUp var(--dur, .7s) ease-out both}.anim-fade-in-scale{animation:fadeInScale var(--dur, .6s) ease-out both}.anim-tape-flutter{animation:tape-flutter var(--dur, 4s) ease-in-out infinite}.anim-gradient{animation:gradient-shift var(--dur, 12s) ease infinite;background-size:200% 200%}.anim-drift{animation:drift var(--dur, 10s) ease-in-out infinite}.anim-spin-slow{animation:spin-slow var(--dur, 8s) linear infinite}.anim-shimmer-text{animation:shimmer-text 3s linear infinite;background-size:200% auto}.anim-pulse-ring{animation:pulse-ring 2s ease-in-out infinite}.anim-rainbow-border{animation:rainbow-border 4s linear infinite}.anim-sticker-entrance{animation:slideInSticker .8s cubic-bezier(.34,1.56,.64,1) both}.sticker-delay-1{animation-delay:.1s}.sticker-delay-2{animation-delay:.25s}.sticker-delay-3{animation-delay:.4s}.sticker-delay-4{animation-delay:.55s}.sticker-delay-5{animation-delay:.7s}