@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{font-family:Space Grotesk,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#0a0b1f;background:-webkit-radial-gradient(center,ellipse,#1a1b3a 0%,#0f1027 50%,#0a0b1f 100%);background:radial-gradient(ellipse at center,#1a1b3a 0%,#0f1027 50%,#0a0b1f 100%);min-height:100vh;min-height:-webkit-fill-available;color:#fff;overflow-x:hidden;position:relative;-webkit-text-size-adjust:100%}.background-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:none}.stars{position:absolute;width:100%;height:100%;background:radial-gradient(2px 2px at 20px 30px,#fff,transparent),radial-gradient(2px 2px at 40px 70px,rgba(255,255,255,.8),transparent),radial-gradient(1px 1px at 90px 40px,#fff,transparent),radial-gradient(1px 1px at 130px 80px,rgba(255,255,255,.6),transparent),radial-gradient(2px 2px at 160px 30px,#fff,transparent);background-repeat:repeat;background-size:200px 100px;animation:twinkle 10s infinite linear}@keyframes twinkle{0%{opacity:.3}50%{opacity:1}to{opacity:.3}}.planets{position:absolute;width:100%;height:100%}.floating-planet{position:absolute;width:120px;height:120px;opacity:.7;filter:drop-shadow(0 0 20px rgba(139,92,246,.3))}.planet-1{top:10%;right:10%;animation:float 20s infinite ease-in-out}.planet-2{bottom:20%;left:5%;animation:float 25s infinite ease-in-out reverse;transform:scale(.8)}@keyframes float{0%,to{transform:translateY(0) rotate(0)}33%{transform:translateY(-20px) rotate(120deg)}66%{transform:translateY(10px) rotate(240deg)}}.mascots-bg{position:absolute;width:100%;height:100%}.floating-mascot{position:absolute;width:100px;height:100px;opacity:.6;filter:drop-shadow(0 0 15px rgba(168,85,247,.4))}.dragon-mascot{top:30%;left:2%;animation:mascotFloat 18s infinite ease-in-out}.waifu-mascot{bottom:15%;right:3%;animation:mascotFloat 22s infinite ease-in-out reverse}@keyframes mascotFloat{0%,to{transform:translateY(0) translate(0) scale(1);opacity:.6}25%{transform:translateY(-15px) translate(10px) scale(1.1);opacity:.8}50%{transform:translateY(-5px) translate(-5px) scale(.95);opacity:.5}75%{transform:translateY(10px) translate(15px) scale(1.05);opacity:.7}}.container{max-width:1000px;margin:0 auto;padding:20px;min-height:100vh;display:flex;flex-direction:column;position:relative;z-index:1}header{text-align:center;margin-bottom:30px;background:rgba(255,255,255,.05);padding:40px;border-radius:25px;box-shadow:0 8px 32px #0000004d,inset 0 1px #ffffff1a;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);position:relative;overflow:hidden;background:rgba(26,27,58,.8)}header:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);animation:shimmer 3s infinite}@keyframes shimmer{0%{left:-100%}to{left:100%}}.logo-container{position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:25px}.status-logo{height:140px;width:auto;border-radius:20px;box-shadow:0 0 30px #8b5cf680,0 8px 32px #0000004d;transition:all .4s ease;position:relative;z-index:2}.status-logo:hover{transform:scale(1.1) rotateY(10deg);box-shadow:0 0 50px #8b5cf6cc,0 15px 50px #0006}.logo-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px;background:radial-gradient(circle,rgba(139,92,246,.3) 0%,transparent 70%);border-radius:50%;animation:logoGlow 4s infinite ease-in-out;z-index:1}@keyframes logoGlow{0%,to{transform:translate(-50%,-50%) scale(1);opacity:.3}50%{transform:translate(-50%,-50%) scale(1.2);opacity:.6}}.header-content h1{font-size:3rem;margin:0 0 10px;background:linear-gradient(45deg,#8b5cf6,#a855f7,#c084fc,#e879f9);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 4s infinite ease-in-out;font-weight:700;letter-spacing:-1px;color:#8b5cf6}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.subtitle{font-size:1.3rem;color:#ffffffe6;margin-bottom:8px;font-weight:400}.tagline{font-size:1rem;color:#ffffffb3;font-weight:300;margin-bottom:25px}.status-bar{display:flex;justify-content:center;gap:25px;align-items:center;flex-wrap:wrap}.status-item{position:relative}.status{padding:12px 20px;border-radius:25px;font-weight:600;font-size:.95rem;position:relative;overflow:hidden;transition:all .3s ease}.status.connected{background:linear-gradient(45deg,#10b981,#059669);color:#fff;box-shadow:0 0 20px #10b98166}.status.disconnected{background:linear-gradient(45deg,#ef4444,#dc2626);color:#fff;box-shadow:0 0 20px #ef444466}.count{background:rgba(255,255,255,.1);padding:12px 20px;border-radius:25px;font-weight:500;color:#ffffffe6;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:rgba(26,27,58,.8)}main{flex:1;display:flex;flex-direction:column;gap:25px}.mode-selection{display:flex;gap:15px;justify-content:center;margin-bottom:20px}.mode-btn{padding:20px 35px;border:none;border-radius:20px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .4s ease;background:rgba(255,255,255,.05);color:#fffc;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,.1);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;text-align:center;background:rgba(15,16,39,.8)}.mode-btn:hover{transform:translateY(-3px);box-shadow:0 10px 25px #8b5cf64d;background:rgba(255,255,255,.1)}.mode-btn.active{background:linear-gradient(45deg,#8b5cf6,#a855f7);color:#fff;box-shadow:0 0 30px #8b5cf680}.btn-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0;background:radial-gradient(circle,rgba(255,255,255,.3) 0%,transparent 70%);border-radius:50%;transition:all .4s ease}.mode-btn:hover .btn-glow{width:200px;height:200px}.btn-mascot{width:24px;height:24px;filter:drop-shadow(0 0 5px rgba(139,92,246,.5));transition:all .3s ease}.btn-mascot-small{width:20px;height:20px;filter:drop-shadow(0 0 5px rgba(139,92,246,.5))}.btn-text{font-weight:600}.auth-section,.publisher-controls,.translation-section{background:rgba(255,255,255,.05);padding:30px;border-radius:25px;box-shadow:0 8px 32px #0000004d,inset 0 1px #ffffff1a;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);position:relative;background:rgba(26,27,58,.8)}.section-header{display:flex;align-items:center;gap:15px;margin-bottom:25px}.section-mascot{width:50px;height:50px;filter:drop-shadow(0 0 10px rgba(139,92,246,.5));animation:mascotBounce 3s infinite ease-in-out}@keyframes mascotBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.section-header h3{margin:0;color:#fff;font-size:1.4rem;font-weight:600}.cosmic-btn{padding:15px 30px;border:none;border-radius:15px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .4s ease;background:linear-gradient(45deg,#8b5cf6,#a855f7);color:#fff;position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;justify-content:center;font-family:Space Grotesk,sans-serif}.cosmic-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px #8b5cf666;background:linear-gradient(45deg,#7c3aed,#8b5cf6)}.cosmic-btn:disabled{background:rgba(255,255,255,.1);color:#ffffff80;cursor:not-allowed;transform:none;box-shadow:none}.btn-particles{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0;background:radial-gradient(circle,rgba(255,255,255,.6) 0%,transparent 70%);border-radius:50%;transition:all .3s ease}.cosmic-btn:hover .btn-particles{width:150px;height:150px}.auth-form{display:flex;gap:15px;margin-bottom:20px;align-items:flex-end}.input-container{flex:1;position:relative}.input-container input{width:100%;padding:15px 20px;border:2px solid rgba(255,255,255,.2);border-radius:15px;font-size:1rem;transition:all .3s ease;background:rgba(255,255,255,.05);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-family:Space Grotesk,sans-serif;background:rgba(15,16,39,.9)}.input-container input::placeholder{color:#fff9}.input-container input:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 20px #8b5cf64d}.input-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0;background:radial-gradient(circle,rgba(139,92,246,.2) 0%,transparent 70%);border-radius:50%;transition:all .3s ease;pointer-events:none}.input-container input:focus+.input-glow{width:200px;height:200px}.auth-status{padding:12px 20px;border-radius:12px;font-weight:500;text-align:center;transition:all .3s ease}.auth-status.success{background:rgba(16,185,129,.2);color:#10b981;border:1px solid rgba(16,185,129,.3)}.auth-status.error{background:rgba(239,68,68,.2);color:#ef4444;border:1px solid rgba(239,68,68,.3)}.mic-controls{display:flex;gap:20px;margin-bottom:25px;justify-content:center;flex-wrap:wrap}.speech-status{text-align:center}.recording-status{font-weight:600;margin-bottom:20px;padding:15px;border-radius:15px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#ffffffe6}.recording-status.recording{background:rgba(239,68,68,.2);color:#ef4444;border-color:#ef44444d;animation:pulse 1.5s infinite}.recording-status.processing{background:rgba(251,191,36,.2);color:#fbbf24;border-color:#fbbf244d}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.02)}}.cosmic-display{background:rgba(255,255,255,.03);padding:20px;border-radius:15px;min-height:80px;font-style:italic;color:#fffc;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:rgba(10,11,31,.8)}.dual-translation-container{display:flex;gap:25px;min-height:500px}.language-blob{flex:1;background:rgba(255,255,255,.03);border:2px solid rgba(255,255,255,.1);border-radius:20px;display:flex;flex-direction:column;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;background:rgba(10,11,31,.9)}.korean-blob{border-color:#ef444466;box-shadow:0 0 20px #ef44441a}.english-blob{border-color:#3b82f666;box-shadow:0 0 20px #3b82f61a}.blob-header{background:linear-gradient(135deg,rgba(139,92,246,.8),rgba(168,85,247,.8));color:#fff;padding:20px;position:relative;overflow:hidden}.korean-blob .blob-header{background:linear-gradient(135deg,rgba(239,68,68,.8),rgba(220,38,38,.8))}.english-blob .blob-header{background:linear-gradient(135deg,rgba(59,130,246,.8),rgba(37,99,235,.8))}.blob-header-content{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:2}.blob-header h4{margin:0;font-size:1.2rem;font-weight:600}.live-indicator{background:rgba(255,255,255,.2);padding:6px 15px;border-radius:20px;font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:8px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:rgba(0,0,0,.5)}.pulse-dot{width:8px;height:8px;background:#ef4444;border-radius:50%;animation:dotPulse 1s infinite}@keyframes dotPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}.header-decoration{position:absolute;top:0;left:0;right:0;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);animation:decorationShimmer 3s infinite}@keyframes decorationShimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.blob-content{flex:1;padding:25px;overflow-y:auto;font-size:1.1rem;line-height:1.7;word-wrap:break-word;color:#ffffffe6}.blob-footer{height:4px;background:linear-gradient(90deg,transparent,rgba(139,92,246,.5),transparent)}.korean-blob .blob-footer{background:linear-gradient(90deg,transparent,rgba(239,68,68,.5),transparent)}.english-blob .blob-footer{background:linear-gradient(90deg,transparent,rgba(59,130,246,.5),transparent)}.placeholder-text{color:#ffffff80;font-style:italic;text-align:center;margin-top:50px;font-weight:300}.interim-text{background:rgba(251,191,36,.2)!important;padding:4px 8px!important;border-radius:8px!important;border:1px solid rgba(251,191,36,.4)!important;animation:pulse 1.5s infinite!important}footer{text-align:center;margin-top:40px;position:relative}.footer-content{display:flex;flex-direction:column;align-items:center;gap:15px}.footer-mascots{display:flex;justify-content:center}.footer-mascot{width:40px;height:40px;filter:drop-shadow(0 0 10px rgba(139,92,246,.4));animation:mascotBounce 4s infinite ease-in-out}.footer-content p{color:#ffffffb3;font-size:.95rem;margin:0}.footer-decoration{display:flex;justify-content:center}.footer-planet{width:30px;height:30px;filter:drop-shadow(0 0 8px rgba(139,92,246,.4));animation:float 4s infinite ease-in-out}.hidden{display:none!important}@media (max-width: 767px){.container{padding:10px;max-width:100%}.floating-planet,.floating-mascot{display:none}header{padding:20px 15px;margin-bottom:20px}.status-logo{height:80px}.header-content h1{font-size:1.8rem;line-height:1.2}.subtitle{font-size:1rem;margin-bottom:6px}.tagline{font-size:.9rem;margin-bottom:20px}.status-bar{flex-direction:column;gap:15px;align-items:center;width:100%}.status-item{width:100%;max-width:280px;display:flex;justify-content:center}.status,.count{padding:12px 20px;font-size:.9rem;width:100%;text-align:center;display:block;border-radius:20px}.mode-selection{flex-direction:column;gap:12px;margin-bottom:15px}.mode-btn{width:100%;max-width:none;padding:16px 20px;font-size:1rem}.btn-mascot{width:20px;height:20px}.section-header{flex-direction:row;align-items:center;justify-content:center;text-align:center;gap:12px;margin-bottom:20px}.section-mascot{width:35px;height:35px}.section-header h3{font-size:1.2rem}.auth-form{flex-direction:column;gap:12px}.input-container input{padding:14px 16px;font-size:.95rem}.mic-controls{flex-direction:column;gap:12px;align-items:stretch}.cosmic-btn{width:100%;padding:14px 20px;font-size:1rem}.btn-mascot-small{width:18px;height:18px}.dual-translation-container{flex-direction:column;min-height:auto;gap:15px}.language-blob{min-height:250px;height:auto}.blob-header{padding:15px}.blob-header h4{font-size:1rem}.live-indicator{padding:4px 10px;font-size:.75rem}.blob-content{padding:15px;font-size:.95rem;line-height:1.5}.placeholder-text{margin-top:30px;font-size:.9rem}.recording-status{font-size:.9rem;padding:12px}.cosmic-display{padding:15px;font-size:.95rem;min-height:60px}.footer-mascot{width:30px;height:30px}.footer-planet{width:25px;height:25px}.footer-content p{font-size:.85rem}}@media (min-width: 768px) and (max-width: 1023px){.container{padding:15px;max-width:90%}.status-logo{height:100px}.header-content h1{font-size:2.2rem}.subtitle{font-size:1.1rem}.mode-selection{gap:12px}.mode-btn{padding:18px 30px;max-width:280px}.dual-translation-container{gap:20px;min-height:450px}.language-blob{min-height:350px}.floating-planet{width:100px;height:100px}.floating-mascot{width:80px;height:80px}}@media (max-width: 480px){.container{padding:8px}header{padding:15px 10px;margin-bottom:15px}.status-logo{height:70px}.header-content h1{font-size:1.6rem}.subtitle{font-size:.9rem}.tagline{font-size:.8rem}.status-bar{gap:12px}.status-item{max-width:260px}.status,.count{padding:10px 16px;font-size:.85rem}.section-mascot{width:30px;height:30px}.section-header h3{font-size:1.1rem}.mode-btn{padding:14px 16px;font-size:.95rem}.btn-mascot{width:18px;height:18px}.cosmic-btn{padding:12px 16px;font-size:.95rem}.input-container input{padding:12px 14px;font-size:.9rem}.blob-content{padding:12px;font-size:.9rem}.blob-header{padding:12px}.blob-header h4{font-size:.95rem}.live-indicator{padding:3px 8px;font-size:.7rem}.language-blob{min-height:200px}.recording-status{font-size:.85rem;padding:10px}.cosmic-display{padding:12px;font-size:.9rem;min-height:50px}}@supports (-webkit-touch-callout: none){html{height:-webkit-fill-available}body{min-height:-webkit-fill-available;-webkit-text-size-adjust:100%;-webkit-overflow-scrolling:touch}.auth-section,.publisher-controls,.translation-section,header,.mode-btn,.input-container input,.count,.language-blob,.live-indicator,.cosmic-display{-webkit-transform:translateZ(0);transform:translateZ(0);will-change:transform}input,select,textarea{font-size:16px!important}.container{padding-bottom:env(safe-area-inset-bottom)}}