*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #050810;--surface: #0c1120;--surface2: #111827;--accent: #00e5cc;--accent-dim: #00b3a0;--accent2: #ff4d4d;--accent2-dim: #cc3333;--yellow: #ffd700;--yellow-dim: #b8a000;--text: #e2e8f0;--text-dim: #64748b;--border: #1e293b}html,body,#root{height:100%;margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:Share Tech Mono,monospace;min-height:100vh;min-height:100dvh;overflow-x:hidden}.app{display:flex;flex-direction:row;min-height:100vh;position:relative;background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(0,229,204,.07) 0%,transparent 60%),radial-gradient(ellipse 60% 40% at 50% 100%,rgba(255,77,77,.06) 0%,transparent 60%),var(--bg);overflow:hidden}.scanlines{position:fixed;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.15) 2px,rgba(0,0,0,.15) 4px);pointer-events:none;z-index:1000}.header{display:flex;align-items:center;justify-content:space-between;padding:10px 24px;border-bottom:1px solid var(--border);background:#050810e6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:relative;z-index:10}.header-left{display:flex;gap:8px;align-items:center}.header-dot{width:10px;height:10px;border-radius:50%}.header-dot.red{background:#ff4d4d;box-shadow:0 0 6px #ff4d4d}.header-dot.yellow{background:gold;box-shadow:0 0 6px gold}.header-dot.green{background:#0f8;box-shadow:0 0 6px #0f8}.header-title{font-family:Orbitron,sans-serif;font-size:28px;font-weight:700;letter-spacing:4px;color:var(--accent);text-shadow:0 0 12px rgba(0,229,204,.6)}.header-right{display:flex;align-items:center;gap:16px}.input-panel{padding:12px 24px;background:#0c112066;border-bottom:1px solid var(--border);z-index:10;position:relative}.input-form{display:flex;gap:20px;align-items:flex-end;max-width:1200px;margin:0 auto}.input-group{flex:1;display:flex;flex-direction:column;gap:6px}.input-group label{font-family:Orbitron,sans-serif;font-size:8px;letter-spacing:2px;color:var(--text-dim)}.input-group input{background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:8px 12px;font-family:Share Tech Mono,monospace;font-size:11px;outline:none;transition:border-color .3s,box-shadow .3s;border-radius:2px}.input-group input:focus{border-color:var(--accent);box-shadow:0 0 8px #00e5cc33}.generate-btn{background:var(--accent);color:var(--bg);border:none;padding:8px 20px;font-family:Orbitron,sans-serif;font-size:10px;font-weight:700;letter-spacing:2px;cursor:pointer;transition:all .3s;border-radius:2px;height:33px;white-space:nowrap}.generate-btn:hover:not(:disabled){background:#fff;box-shadow:0 0 15px var(--accent);transform:translateY(-1px)}.generate-btn:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(1)}.live-badge{background:var(--accent2);color:#fff;font-size:10px;font-weight:700;padding:2px 8px;border-radius:2px;letter-spacing:2px;animation:pulse-badge 1.5s ease-in-out infinite}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.5}}.timestamp{font-size:12px;color:var(--text-dim);letter-spacing:2px}.stage{flex:1;display:flex;align-items:center;justify-content:center;position:relative;padding:40px 20px;min-height:500px}.headline-tag{position:absolute;font-family:Orbitron,sans-serif;font-size:9px;font-weight:400;letter-spacing:2px;color:var(--accent);text-shadow:0 0 8px rgba(0,229,204,.4);white-space:nowrap;opacity:0;animation:float-in .8s ease forwards;pointer-events:none}@keyframes float-in{0%{opacity:0;transform:translateY(20px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}.headline-tag:nth-child(1){top:8%;left:50%;transform:translate(-50%);animation-delay:.1s}.headline-tag:nth-child(2){top:20%;right:4%;animation-delay:.5s}.headline-tag:nth-child(3){top:50%;right:2%;transform:translateY(-50%);animation-delay:.9s}.headline-tag:nth-child(4){bottom:20%;right:4%;animation-delay:1.3s}.headline-tag:nth-child(5){bottom:8%;left:50%;transform:translate(-50%);animation-delay:1.7s}.headline-bracket{color:var(--accent2);opacity:.7}.headline-stream{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:2;overflow:hidden}.drifting-headline{position:absolute;right:-100%;white-space:nowrap;font-family:Orbitron,sans-serif;font-size:32px;font-weight:900;letter-spacing:6px;animation:rush-left linear forwards;opacity:.15;filter:blur(1px);transform:skew(-25deg);text-transform:uppercase;-webkit-user-select:none;user-select:none}.drifting-headline.color-0{color:var(--accent);text-shadow:0 0 15px rgba(0,229,204,.4)}.drifting-headline.color-1{color:var(--accent2);text-shadow:0 0 15px rgba(255,77,77,.4)}.drifting-headline.color-2{color:var(--yellow);text-shadow:0 0 15px rgba(255,215,0,.4)}@keyframes rush-left{0%{transform:translate(0) skew(-25deg);opacity:0}10%{opacity:.15}90%{opacity:.15}to{transform:translate(-400vw) skew(-25deg);opacity:0}}.topic-banner{position:absolute;top:15%;left:50%;transform:translate(-50%,-50%);z-index:10;width:90%;max-width:600px;display:flex;justify-content:center;pointer-events:none}.topic-banner-inner{position:relative;background:var(--surface);border:1px solid var(--accent);border-radius:4px;padding:14px 40px;text-align:center;box-shadow:0 0 20px #00e5cc40,0 0 40px #00e5cc1a,inset 0 0 20px #00e5cc0a;overflow:hidden}.topic-banner-label{font-family:Orbitron,sans-serif;font-size:8px;font-weight:700;letter-spacing:4px;color:var(--accent);text-shadow:0 0 8px rgba(0,229,204,.6);margin-bottom:8px;opacity:.9}.topic-banner-text{font-family:Orbitron,sans-serif;font-size:13px;font-weight:500;letter-spacing:2px;color:var(--text);text-shadow:0 0 10px rgba(226,232,240,.3);position:relative;z-index:1}.topic-banner-glow{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent 0%,rgba(0,229,204,.06) 30%,rgba(0,229,204,.06) 70%,transparent 100%);pointer-events:none}.topic-banner-inner:before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border-radius:4px;background:linear-gradient(90deg,transparent 0%,rgba(0,229,204,.5) 50%,transparent 100%);animation:banner-shimmer 3s ease-in-out infinite;z-index:-1}@keyframes banner-shimmer{0%{opacity:0;transform:translate(-100%)}50%{opacity:1}to{opacity:0;transform:translate(100%)}}.claw-stage{position:relative;display:flex;align-items:center;justify-content:center;gap:40px;z-index:5}.claw-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.claw-left .claw-img{width:140px;height:140px;filter:drop-shadow(0 0 18px rgba(255,77,77,.55));transition:filter .3s}.claw-yellow{filter:drop-shadow(0 0 18px rgba(255,215,0,.55)) hue-rotate(50deg) saturate(1.4)!important}.claw-right .claw-img{width:140px;height:140px;filter:drop-shadow(0 0 18px rgba(255,215,0,.55));transform:scaleX(-1)}.claw-left.talking{animation:claw-talk-bob .6s ease-in-out infinite}.claw-left.talking .claw-img{filter:drop-shadow(0 0 28px rgba(255,77,77,.9))}@keyframes claw-talk-bob{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.04)}}.claw-right.talking{animation:claw-talk-bob .6s ease-in-out infinite}.claw-right.talking .claw-img{filter:drop-shadow(0 0 28px rgba(255,215,0,.9)) hue-rotate(50deg) saturate(1.4)}.claw-pulse-ring{position:absolute;border-radius:50%;border:1px solid rgba(255,77,77,.25);pointer-events:none;animation:ring-float 3s ease-in-out infinite}.claw-right .claw-pulse-ring{border-color:#ffd70040}.ring-a{width:180px;height:180px;animation-delay:0s}.ring-b{width:240px;height:240px;animation-delay:.6s}.ring-c{width:300px;height:300px;animation-delay:1.2s}@keyframes ring-float{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.08);opacity:.15}}.speech-zone{position:relative;width:400px;height:250px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;z-index:10;pointer-events:none}.speech-bubble{font-family:Share Tech Mono,monospace;font-size:13.2px;line-height:1.5;letter-spacing:1px;padding:10px 16px;border-radius:4px;white-space:pre-wrap;word-wrap:break-word;max-width:280px;animation:bubble-pop .4s ease forwards;position:relative;box-shadow:0 4px 15px #0000004d}.speech-bubble:after{content:"";position:absolute;top:20px;transform:translateY(-50%);border:6px solid transparent}.speech-left{background:#ff4d4d26;border:1px solid rgba(255,77,77,.5);color:#ff8080;text-align:left;align-self:flex-start;margin-left:-20px}.speech-left:after{left:-12px;border-right-color:#ff4d4d80}.speech-right{background:#ffd7001a;border:1px solid rgba(255,215,0,.4);color:#ffe066;text-align:right;align-self:flex-end;margin-right:-20px}.speech-right:after{right:-12px;border-left-color:#ffd70066}@keyframes bubble-pop{0%{opacity:0;transform:scale(.8) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.claw-name{position:absolute;top:-36px;font-family:Orbitron,sans-serif;font-size:11px;letter-spacing:3px;z-index:10;animation:fade-in .8s ease .2s both}.claw-name-left{color:var(--accent2);left:50%;transform:translate(-50%)}.claw-name-right{color:var(--yellow);left:50%;transform:translate(-50%)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.winner{z-index:50}.winner .claw-img{animation:winner-bounce .8s cubic-bezier(.175,.885,.32,1.275) infinite}.winner.claw-left .claw-img{filter:drop-shadow(0 0 35px var(--yellow))!important}.winner.claw-right .claw-img{filter:drop-shadow(0 0 35px var(--yellow)) hue-rotate(50deg) saturate(1.4)!important}@keyframes winner-bounce{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-30px) scale(1.1) rotate(5deg)}75%{transform:translateY(-25px) scale(1.1) rotate(-5deg)}}.winner-badge{position:absolute;top:-100px;background:linear-gradient(135deg,gold,#ff8c00,gold);background-size:200% 200%;color:#000;padding:10px 28px;font-family:Orbitron,sans-serif;font-size:22px;font-weight:950;border-radius:4px;box-shadow:0 0 30px #ffd700cc,0 0 60px #ff8c0066,inset 0 0 10px #ffffff80;animation:badge-pop .6s cubic-bezier(.175,.885,.32,1.275) both,badge-shimmer 2s linear infinite;white-space:nowrap;z-index:60;border:2px solid #fff;text-transform:uppercase;letter-spacing:4px}@keyframes badge-shimmer{0%{background-position:0% 50%}to{background-position:200% 50%}}@keyframes badge-pop{0%{transform:scale(0) rotate(-25deg) translateY(50px);opacity:0}to{transform:scale(1) rotate(0) translateY(0);opacity:1}}.victory-rays{position:absolute;width:600px;height:600px;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:-1;opacity:0;animation:rays-fade-in 1s ease forwards}@keyframes rays-fade-in{to{opacity:.6}}.ray{position:absolute;top:50%;left:50%;width:2px;height:500px;background:linear-gradient(to top,transparent,var(--yellow),transparent);transform-origin:center;animation:ray-rotate 10s linear infinite}@keyframes ray-rotate{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.winner-particles{position:absolute;top:-100px;right:-100px;bottom:-100px;left:-100px;pointer-events:none;z-index:55}.particle{position:absolute;width:6px;height:6px;background:var(--yellow);border-radius:50%;top:50%;left:50%;animation:particle-burst 2s ease-out infinite}@keyframes particle-burst{0%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0}}.exploded{z-index:40}.explosion-effect{position:absolute;width:40px;height:40px;background:radial-gradient(circle,#fff 0%,#ff4d4d 50%,transparent 100%);border-radius:50%;box-shadow:0 0 100px 50px #ff4d4d,0 0 200px 100px gold;z-index:45;animation:explosion-flash-final .8s ease-out forwards;pointer-events:none}.debris-field{position:absolute;top:-50px;right:-50px;bottom:-50px;left:-50px;pointer-events:none;z-index:44}.debris{position:absolute;width:8px;height:2px;background:#333;top:50%;left:50%;animation:debris-fly .8s ease-out forwards}@keyframes debris-fly{0%{transform:translate(-50%,-50%) rotate(0);opacity:1}to{transform:translate(var(--tx),var(--ty)) rotate(var(--tr));opacity:0}}.stage.shaking{animation:stage-shake .4s cubic-bezier(.36,.07,.19,.97) both}@keyframes stage-shake{10%,90%{transform:translate3d(-2px,0,0)}20%,80%{transform:translate3d(4px,0,0)}30%,50%,70%{transform:translate3d(-8px,0,0)}40%,60%{transform:translate3d(8px,0,0)}}.fetch-overlay{position:absolute;bottom:30px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:14px;z-index:10}.fetch-conversation{display:flex;flex-direction:column;gap:6px;min-height:80px;justify-content:flex-end;align-items:center}.fetch-bubble{font-family:Share Tech Mono,monospace;font-size:13.2px;letter-spacing:1px;padding:6px 14px;border-radius:4px;animation:fetch-bubble-pop .4s ease forwards;display:flex;flex-direction:column}.token-stats-line{font-size:9px;color:var(--text-dim);margin-top:4px;opacity:.8;letter-spacing:1px;border-top:1px solid rgba(255,255,255,.1);padding-top:4px}.fetch-left{background:#ff4d4d26;border:1px solid rgba(255,77,77,.5);color:#ff8080;align-self:flex-start;margin-left:20px}.fetch-right{background:#ffd7001a;border:1px solid rgba(255,215,0,.4);color:#ffe066;align-self:flex-end;margin-right:20px}@keyframes fetch-bubble-pop{0%{opacity:0;transform:scale(.7) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}.cyber-spinner{position:relative;width:100px;height:100px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}.spinner-core{width:30px;height:30px;background:var(--accent);border-radius:50%;box-shadow:0 0 20px var(--accent);animation:core-pulse 1.5s ease-in-out infinite}.spinner-ring{position:absolute;width:80px;height:80px;border:2px solid transparent;border-top-color:var(--accent2);border-bottom-color:var(--accent);border-radius:50%;animation:ring-spin 2s linear infinite}.spinner-dots{position:absolute;width:100px;height:100px;border:1px dashed var(--accent);border-radius:50%;opacity:.3;animation:ring-spin 4s linear infinite reverse}@keyframes core-pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.5}}@keyframes ring-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.fetch-sub{font-size:9px;color:var(--text-dim);letter-spacing:2px}.news-card{position:absolute;bottom:20px;left:50%;transform:translate(-50%);width:min(560px,90vw);background:#0c1120f2;border:1px solid var(--border);border-radius:4px;overflow:hidden;display:flex;gap:0;animation:card-enter .6s ease;z-index:10;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}@keyframes card-enter{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.news-image-placeholder{width:160px;min-width:160px;background:var(--surface2);display:flex;align-items:center;justify-content:center;border-right:1px solid var(--border)}.img-placeholder-inner{display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.5}.img-icon{width:48px;height:48px}.img-placeholder-inner span{font-size:9px;letter-spacing:2px;color:var(--accent)}.news-content{padding:16px 20px;flex:1;display:flex;flex-direction:column;gap:8px}.news-meta{display:flex;justify-content:space-between;align-items:center}.news-tag{font-size:9px;letter-spacing:3px;color:var(--accent2);border:1px solid var(--accent2-dim);padding:1px 6px;border-radius:2px}.news-index{font-size:9px;color:var(--text-dim);letter-spacing:1px}.news-title{font-family:Orbitron,sans-serif;font-size:13px;font-weight:700;color:var(--text);line-height:1.4;letter-spacing:1px}.news-summary{font-size:11px;color:var(--text-dim);line-height:1.6}.controls{padding:16px 24px;background:#050810f2;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:14px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:relative;z-index:10}.progress-section{display:flex;align-items:center;gap:12px}.time{font-size:11px;color:var(--text-dim);letter-spacing:1px;min-width:40px}.progress-bar{flex:1;height:4px;background:var(--border);border-radius:2px;position:relative;overflow:visible;cursor:pointer;transition:height .2s ease}.progress-bar:hover{height:6px}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent));border-radius:2px;transition:width .1s linear}.progress-glow{position:absolute;top:50%;left:0;transform:translateY(-50%);height:16px;width:0;background:radial-gradient(ellipse at left,rgba(0,229,204,.4),transparent);border-radius:8px;pointer-events:none;transition:width .1s linear}.control-buttons{display:flex;align-items:center;justify-content:center;gap:20px}.ctrl-btn{background:none;border:1px solid var(--border);color:var(--text);width:40px;height:40px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.ctrl-btn svg{width:18px;height:18px}.ctrl-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);box-shadow:0 0 12px #00e5cc4d}.ctrl-btn:disabled{opacity:.3;cursor:not-allowed}.ctrl-btn.play-btn{box-shadow:0 0 20px #00e5cc33}.ctrl-btn.play-btn:hover:not(:disabled){background:#00e5cc1a;box-shadow:0 0 30px #00e5cc66;transform:scale(1.05)}.ctrl-btn.play-btn svg{width:24px;height:24px}.volume-section{display:flex;align-items:center;gap:10px;justify-content:flex-end}.vol-icon{width:18px;height:18px;color:var(--text-dim)}.volume-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100px;height:4px;background:var(--border);border-radius:2px;outline:none;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 0 6px #00e5cc99}.volume-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:pointer;border:none;box-shadow:0 0 6px #00e5cc99}.vol-value{font-size:10px;color:var(--text-dim);min-width:30px;text-align:right}.ticker-wrap{display:flex;align-items:center;gap:16px;padding:8px 24px;background:var(--surface);border-top:1px solid var(--border);overflow:hidden;position:relative;z-index:10}.ticker-label{font-family:Orbitron,sans-serif;font-size:9px;letter-spacing:3px;color:var(--accent2);white-space:nowrap;border-right:1px solid var(--border);padding-right:16px}.ticker-track{overflow:hidden;flex:1}.ticker-content{display:flex;white-space:nowrap;animation:none}.ticker-content.playing{animation:ticker-scroll 20s linear infinite}@keyframes ticker-scroll{0%{transform:translate(100vw)}to{transform:translate(-100%)}}.ticker-item{font-size:11px;color:var(--text-dim);letter-spacing:1px;padding-right:40px}@media(max-width:600px){.header{padding:10px 16px}.header-title{font-size:22px;letter-spacing:2px}.header-right{gap:10px}.timestamp{display:none}.input-panel{padding:12px 16px}.input-form{flex-direction:column;align-items:stretch;gap:12px}.input-group label{font-size:8px}.generate-btn{width:100%;height:40px;font-size:11px}.stage{padding:20px 10px;min-height:400px;flex:1;overflow:hidden;display:flex;flex-direction:column;justify-content:space-around}.claw-stage{gap:10px;margin-top:40px}.claw-left .claw-img,.claw-right .claw-img{width:100px!important;height:100px!important}.claw-name{font-size:9px;top:-28px}.claw-pulse-ring{display:none}.speech-zone{width:240px;height:180px;gap:8px}.speech-bubble{align-self:center!important;margin:0!important;max-width:100%;text-align:center;font-size:12px;padding:8px 12px;box-shadow:0 2px 10px #0006}.speech-bubble:after{display:none}.topic-banner{top:10%;width:90%}.topic-banner-inner{padding:8px 16px}.topic-banner-text{font-size:10px;letter-spacing:1px}.topic-banner-label{font-size:7px;margin-bottom:4px}.headline-ring{transform:scale(.5)}.controls{padding:12px 16px;gap:10px}.progress-section{gap:8px}.time{font-size:9px;min-width:30px}.volume-section{display:none}.control-buttons{gap:16px}.ctrl-btn{width:36px;height:36px}.ctrl-btn.play-btn{width:48px;height:48px}.ticker-wrap{padding:6px 12px;gap:8px}.ticker-label{padding-right:8px;font-size:8px;letter-spacing:1px}.ticker-item{font-size:10px;padding-right:30px}}.countdown-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;background:#05081066;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none}.countdown-number{font-family:Orbitron,sans-serif;font-size:180px;font-weight:900;color:var(--yellow);text-shadow:0 0 30px rgba(255,215,0,.8),0 0 60px rgba(255,215,0,.4);z-index:101}.countdown-number.pulse{animation:num-pulse 1s ease-in-out infinite}.countdown-number.reveal{font-size:140px;color:var(--accent);text-shadow:0 0 40px var(--accent);animation:reveal-pop .5s cubic-bezier(.175,.885,.32,1.275) forwards}@keyframes num-pulse{0%{transform:scale(.8);opacity:0}20%{transform:scale(1.1);opacity:1}80%{transform:scale(1);opacity:1}to{transform:scale(1.5);opacity:0}}@keyframes reveal-pop{0%{transform:scale(0);rotate:-10deg}to{transform:scale(1.2);rotate:0deg}}.drum-roll-aura{position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(255,215,0,.15) 0%,transparent 70%);animation:aura-buzz .1s linear infinite}@keyframes aura-buzz{0%{transform:translate(0) scale(1);opacity:.3}50%{transform:translate(-5px,5px) scale(1.1);opacity:.6}to{transform:translate(5px,-5px) scale(1);opacity:.3}}.exploded .claw-img{animation:explode-and-vanish 1s cubic-bezier(.6,-.28,.735,.045) forwards}@keyframes explode-and-vanish{0%{transform:scale(1);filter:brightness(1)}20%{transform:scale(1.1) rotate(5deg);filter:brightness(2) contrast(2)}40%{transform:scale(.9) rotate(-5deg);filter:brightness(5) contrast(3)}60%{transform:scale(1.3);filter:brightness(10);opacity:1}70%{transform:scale(2);opacity:.5;filter:blur(10px)}to{transform:scale(3);opacity:0;filter:blur(20px)}}.explosion-effect{position:absolute;width:40px;height:40px;background:radial-gradient(circle,#fff 0%,#ff4d4d 50%,transparent 100%);border-radius:50%;box-shadow:0 0 100px 50px #ff4d4d,0 0 200px 100px gold;z-index:25;animation:explosion-flash-final .8s ease-out forwards}@keyframes explosion-flash-final{0%{transform:scale(0);opacity:0}10%{transform:scale(1);opacity:1}to{transform:scale(50);opacity:0}}.start-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#050810d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:100;cursor:pointer;animation:fade-in .5s ease}.start-card{background:var(--surface);border:1px solid var(--accent);padding:40px;border-radius:8px;text-align:center;max-width:400px;width:90%;box-shadow:0 0 40px #00e5cc33,inset 0 0 20px #00e5cc0d;position:relative;overflow:hidden;transition:transform .3s}.start-overlay:hover .start-card{transform:scale(1.02);border-color:#fff}.start-glitch{font-family:Orbitron,sans-serif;font-size:10px;letter-spacing:4px;color:var(--accent);margin-bottom:20px;opacity:.8;animation:glitch-text 2s infinite}.start-card h2{font-family:Orbitron,sans-serif;font-size:24px;margin-bottom:15px;color:#fff;letter-spacing:2px}.start-meta{display:flex;flex-direction:column;gap:8px;margin-bottom:30px}.meta-topic{font-size:14px;color:var(--text-dim);line-height:1.6}.meta-lang{font-size:11px;color:var(--accent);letter-spacing:2px;text-transform:uppercase;font-family:Orbitron,sans-serif;opacity:.8}.start-action-btn{background:var(--accent);color:var(--bg);border:none;padding:15px 30px;font-family:Orbitron,sans-serif;font-size:14px;font-weight:700;letter-spacing:2px;cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;transition:all .3s}.start-action-btn svg{width:20px;height:20px}.start-action-btn:hover{background:#fff;box-shadow:0 0 30px var(--accent)}@keyframes glitch-text{0%,to{transform:translate(0)}92%{transform:translate(0)}94%{transform:translate(-2px,1px)}96%{transform:translate(2px,-1px)}98%{transform:translate(-1px,2px)}}.main-content{flex:1;display:flex;flex-direction:column;height:100vh;overflow-y:auto;position:relative}.sidebar{width:260px;background:#080c18f2;border-right:1px solid var(--border);display:flex;flex-direction:column;padding:30px 0;z-index:100;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);height:100vh;flex-shrink:0}.sidebar-logo{padding:0 30px 40px;display:flex;justify-content:center}.sidebar-logo img{width:80px;filter:drop-shadow(0 0 12px var(--accent))}.nav-items{flex:1;display:flex;flex-direction:column;gap:8px;padding:0 15px}.nav-item{display:flex;align-items:center;gap:15px;padding:14px 20px;background:transparent;border:1px solid transparent;color:var(--text-dim);font-family:Orbitron,sans-serif;font-size:11px;font-weight:600;letter-spacing:1.5px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:6px;text-align:left;width:100%}.nav-item:hover{color:var(--text);background:#ffffff08}.nav-item.active{color:var(--accent);background:#00e5cc14;border-color:#00e5cc33;box-shadow:0 0 20px #00e5cc0d}.nav-icon{width:18px;height:18px;background:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}.broadcast-icon{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4L4 20h16L12 4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4L4 20h16L12 4z'/%3E%3C/svg%3E")}.generate-icon{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E")}.sidebar-footer{padding:20px 30px;border-top:1px solid rgba(255,255,255,.05)}.version-tag{font-size:9px;color:var(--text-dim);letter-spacing:1px}.generate-page{flex:1;padding:60px 80px;max-width:1200px;margin:0 auto;animation:studio-fade-in .6s ease-out;width:100%}@keyframes studio-fade-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.studio-header{margin-bottom:50px}.studio-header-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.studio-close-btn{background:transparent;border:1px solid rgba(255,255,255,.15);color:var(--text);width:40px;height:40px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0;margin-top:4px}.studio-close-btn svg{width:18px;height:18px}.studio-close-btn:hover{background:#ff4d4d26;border-color:var(--accent2);color:var(--accent2);box-shadow:0 0 15px #ff4d4d33}.studio-label{display:block;font-family:Orbitron,sans-serif;font-size:10px;color:var(--accent);letter-spacing:4px;margin-bottom:12px}.studio-title h1{font-family:Orbitron,sans-serif;font-size:42px;font-weight:800;letter-spacing:-1px;margin-bottom:16px;background:linear-gradient(to right,#fff,var(--text-dim));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-top:5px}.studio-desc{max-width:600px;color:var(--text-dim);font-size:15px;line-height:1.6}.generate-card{background:#0c112099;border:1px solid var(--border);border-radius:12px;padding:40px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 20px 50px #0000004d;margin-bottom:40px}.studio-input-group label{display:block;font-family:Orbitron,sans-serif;font-size:11px;color:var(--text-dim);letter-spacing:2px;margin-bottom:15px}.input-with-icon{position:relative}.input-with-icon input{width:100%;background:#0003;border:1px solid var(--border);color:#fff;padding:20px 24px;font-family:Share Tech Mono,monospace;font-size:18px;border-radius:8px;outline:none;transition:all .3s}.input-with-icon input:focus{border-color:var(--accent);background:#0006;box-shadow:0 0 30px #00e5cc1a}.input-glow{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:8px;pointer-events:none;opacity:0;transition:opacity .3s;box-shadow:inset 0 0 20px #00e5cc1a}.input-with-icon input:focus+.input-glow{opacity:1}.input-hint{display:block;font-size:11px;color:var(--text-dim);margin-top:12px;font-style:italic}.studio-actions{margin-top:30px;display:flex;justify-content:flex-end}.studio-generate-btn{background:var(--accent);color:var(--bg);border:none;padding:16px 36px;font-family:Orbitron,sans-serif;font-size:13px;font-weight:800;display:flex;align-items:center;gap:12px;border-radius:6px;cursor:pointer;transition:all .4s cubic-bezier(.175,.885,.32,1.275);letter-spacing:1px}.studio-generate-btn:hover:not(:disabled){transform:translateY(-3px) scale(1.02);box-shadow:0 10px 30px #00e5cc66;background:#fff}.studio-generate-btn:active:not(:disabled){transform:translateY(-1px)}.studio-generate-btn.loading{background:var(--surface2);color:var(--text-dim);cursor:wait}.btn-icon{width:20px;height:20px}.btn-spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.1);border-top-color:var(--accent);border-radius:50%;animation:studio-spin 1s linear infinite}@keyframes studio-spin{to{transform:rotate(360deg)}}.studio-stats{display:flex;gap:40px;margin-top:40px;padding-top:30px;border-top:1px solid rgba(255,255,255,.05)}.stat-card{display:flex;flex-direction:column;gap:6px}.stat-label{font-size:9px;color:var(--text-dim);letter-spacing:2px}.stat-value{font-family:Orbitron,sans-serif;font-size:12px;color:var(--text);font-weight:600}.template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:60px}.template-card{background:#ffffff08;border:1px solid var(--border);border-radius:10px;padding:24px;cursor:pointer;transition:all .3s}.template-card:hover{background:#ffffff0f;border-color:var(--accent-dim);transform:translateY(-5px)}.template-card h3{font-family:Orbitron,sans-serif;font-size:13px;margin-bottom:8px;color:var(--accent)}.template-card p{font-size:11px;color:var(--text-dim);line-height:1.5}@media(max-width:1024px){.sidebar{width:80px}.nav-item span,.sidebar-logo img,.version-tag,.sidebar-footer{display:none}.sidebar-logo{padding:20px 0}.nav-items{align-items:center;padding:0}.nav-item{justify-content:center;padding:15px}.generate-page{padding:40px}}@media(max-width:768px){.app{flex-direction:column!important}.sidebar{width:100%;height:auto;flex-direction:row;padding:10px}.sidebar-logo{display:none}.nav-items{flex-direction:row;width:100%;justify-content:center}.template-grid{grid-template-columns:1fr}}.studio-input-grid{display:flex;flex-direction:column;gap:30px;margin-top:30px;padding-top:30px;border-top:1px solid rgba(255,255,255,.05)}.studio-textarea{width:100%;background:#0003;border:1px solid var(--border);color:#fff;padding:15px 20px;font-family:Share Tech Mono,monospace;font-size:14px;border-radius:8px;outline:none;transition:all .3s;min-height:100px;resize:vertical}.studio-textarea:focus{border-color:var(--accent);background:#0006;box-shadow:0 0 30px #00e5cc1a}.voice-ids-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}.small-input{width:100%;background:#0003;border:1px solid var(--border);color:#fff;padding:12px 16px;font-family:Share Tech Mono,monospace;font-size:13px;border-radius:6px;outline:none;transition:all .3s}.small-input:focus{border-color:var(--accent);background:#0006;box-shadow:0 0 20px #00e5cc1a}.studio-select{width:100%;background:#0003;border:1px solid var(--border);color:#fff;padding:12px 16px;font-family:Share Tech Mono,monospace;font-size:13px;border-radius:6px;outline:none;transition:all .3s;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2300e5cc' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:calc(100% - 15px) center}.studio-select:focus{border-color:var(--accent);background:#0006;box-shadow:0 0 20px #00e5cc1a}.studio-select option{background:var(--surface2);color:#fff}.gen-status-banner{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;background:#00e5cc0d;border-bottom:1px solid rgba(0,229,204,.2);animation:banner-slide-down .3s ease-out;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:sticky;top:0;z-index:50}.gen-status-banner.ready{background:#ffd7001a;border-bottom-color:#ffd70066}@keyframes banner-slide-down{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.gen-status-info{display:flex;align-items:center;gap:15px}.gen-spinner-small{width:14px;height:14px;border:2px solid rgba(0,229,204,.2);border-top-color:var(--accent);border-radius:50%;animation:studio-spin 1s linear infinite}.gen-step-text{font-family:Orbitron,sans-serif;font-size:10px;letter-spacing:1px;color:var(--accent)}.gen-token-stats{font-family:Share Tech Mono,monospace;font-size:10px;color:var(--text-dim);background:#0000004d;padding:2px 8px;border-radius:4px}.gen-ready-icon{width:14px;height:14px;background:var(--yellow);clip-path:polygon(100% 0,0 0,50% 100%);animation:ready-pulse 1s infinite alternate}@keyframes ready-pulse{0%{transform:scale(.8);filter:brightness(1)}to{transform:scale(1.1);filter:brightness(1.5)}}.gen-ready-text{font-family:Orbitron,sans-serif;font-size:11px;color:var(--yellow);font-weight:700;letter-spacing:.5px}.gen-load-btn{background:var(--yellow);color:var(--bg);border:none;padding:8px 20px;font-family:Orbitron,sans-serif;font-size:10px;font-weight:800;border-radius:4px;cursor:pointer;transition:all .2s;letter-spacing:1px}.gen-load-btn:hover{background:#fff;box-shadow:0 0 15px var(--yellow);transform:translateY(-1px)}.studio-log-section{margin-bottom:40px;animation:studio-fade-in .8s ease-out}.log-header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:var(--surface2);border:1px solid var(--border);border-bottom:none;border-radius:8px 8px 0 0}.log-title{font-family:Orbitron,sans-serif;font-size:10px;letter-spacing:2px;color:var(--accent)}.log-status{font-size:9px;color:var(--text-dim);letter-spacing:1px}.studio-status-log{background:#0006;border:1px solid var(--border);border-radius:0 0 8px 8px;padding:20px;max-height:350px;overflow-y:auto;font-family:Share Tech Mono,monospace;box-shadow:inset 0 0 30px #00000080}.studio-status-log::-webkit-scrollbar{width:6px}.studio-status-log::-webkit-scrollbar-track{background:#0003}.studio-status-log::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.log-entry{font-size:13px;line-height:1.8;margin-bottom:6px;display:flex;gap:12px;animation:log-slide-in .3s ease-out}@keyframes log-slide-in{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.log-time{color:var(--text-dim);min-width:85px;opacity:.7}.log-speaker{font-weight:700;min-width:80px;text-align:right}.log-speaker.CLAWIE{color:var(--accent2);text-shadow:0 0 8px rgba(255,77,77,.4)}.log-speaker.CLAWDY{color:var(--yellow);text-shadow:0 0 8px rgba(255,215,0,.4)}.log-speaker.SYSTEM{color:var(--accent);text-shadow:0 0 8px rgba(0,229,204,.4)}.log-text{color:var(--text);opacity:.95}.log-cursor{display:inline-block;width:10px;height:14px;background:var(--accent);margin-left:4px;vertical-align:middle;animation:log-cursor-blink 1s step-end infinite;box-shadow:0 0 10px var(--accent)}@keyframes log-cursor-blink{50%{opacity:0}}.studio-generate-btn.loading{position:relative;overflow:hidden}.studio-generate-btn.loading:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);transform:translate(-100%);animation:btn-loading-shimmer 1.5s infinite}@keyframes btn-loading-shimmer{to{transform:translate(100%)}}.nav-section-label{font-family:Orbitron,sans-serif;font-size:8px;letter-spacing:2.5px;color:var(--text-dim);padding:0 16px;margin-bottom:8px;opacity:.7}.mt-4{margin-top:1.5rem}.history-item{height:auto!important;padding:12px 16px!important;align-items:flex-start!important}.history-icon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300e5cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8v4l3 3'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");width:14px!important;height:14px!important;margin-top:2px}.history-text{display:flex;flex-direction:column;gap:4px;overflow:hidden;text-align:left}.history-title{font-family:Orbitron,sans-serif;font-size:10px;letter-spacing:1px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.history-subtitle{font-size:8px;letter-spacing:1.5px;color:var(--text-dim);display:flex;align-items:center;gap:6px}.live-pill{background:var(--accent2);color:#fff;padding:1px 4px;border-radius:2px;font-size:7px;font-weight:700;animation:pulse-pill 1.5s ease-in-out infinite}@keyframes pulse-pill{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.95)}}.history-item.active .history-title{color:var(--accent)}.history-item.active .history-icon{filter:drop-shadow(0 0 4px var(--accent))}