html,body,#root{width:100%;height:100%;margin:0}body{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;background:#000;font-family:Share Tech Mono,monospace;overflow:hidden}@keyframes float{0%,to{transform:translate(0)}33%{transform:translate(30px,-30px)}66%{transform:translate(-20px,20px)}}.app-container{background:#000;width:100vw;height:100vh;position:relative;overflow:hidden}.grain-overlay{opacity:.02;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='3.2' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");animation:8s steps(10,end) infinite grainMove;position:absolute;inset:0}@keyframes grainMove{0%,to{transform:translate(0)}10%{transform:translate(-5%,-5%)}20%{transform:translate(-10%,5%)}30%{transform:translate(5%,-10%)}40%{transform:translate(-5%,10%)}50%{transform:translate(10%,5%)}60%{transform:translate(-10%,-5%)}70%{transform:translate(5%,10%)}80%{transform:translate(10%,-10%)}90%{transform:translate(-5%,5%)}}.grid-overlay{pointer-events:none;position:absolute;inset:0}.grid-overlay-large{opacity:.6;background-image:linear-gradient(#ffffff05 1px,#0000 1px),linear-gradient(90deg,#ffffff05 1px,#0000 1px);background-size:100px 100px}.grid-overlay-small{opacity:.3;background-image:linear-gradient(#ffffff0a 1px,#0000 1px),linear-gradient(90deg,#ffffff0a 1px,#0000 1px);background-size:20px 20px}.ambient-glow{pointer-events:none;position:absolute}.ambient-glow-left{filter:blur(120px);background:radial-gradient(circle,#ffffff14 0%,#0000 60%);width:600px;height:600px;animation:15s ease-in-out infinite float;top:15%;left:10%}.ambient-glow-right{filter:blur(100px);background:radial-gradient(circle,#ffffff0f 0%,#0000 60%);width:500px;height:500px;animation:18s ease-in-out infinite reverse float;bottom:20%;right:10%}.scan-line{pointer-events:none;opacity:.3;background:linear-gradient(90deg,#0000 0%,#fffc 50%,#0000 100%);width:100%;height:2px;animation:6s linear infinite scanDown;position:absolute;top:0;left:0;box-shadow:0 0 20px #ffffff80}@keyframes scanDown{0%{transform:translateY(0)}to{transform:translateY(100vh)}}.corner-frame{pointer-events:none;z-index:100;width:60px;height:60px;position:fixed}.corner-frame:before,.corner-frame:after{content:"";background:#ffffff4d;transition:all .3s;position:absolute}.corner-frame:before{width:100%;height:1px}.corner-frame:after{width:1px;height:100%}.top-left,.top-left:before,.top-left:after{top:0;left:0}.top-right,.top-right:before,.top-right:after{top:0;right:0}.bottom-left,.bottom-left:before,.bottom-left:after{bottom:0;left:0}.bottom-right,.bottom-right:before,.bottom-right:after{bottom:0;right:0}.brand-text{letter-spacing:4px;color:#ffffff4d;pointer-events:none;text-shadow:0 0 20px #fff3;font-family:Share Tech Mono,monospace;font-size:10px;font-weight:700;transition:all .3s;position:fixed;bottom:30px;left:50%;transform:translate(-50%)}.brand-text:hover{color:#fff9;text-shadow:0 0 30px #fff6}.version-text{letter-spacing:2px;color:#fff3;pointer-events:none;font-family:Share Tech Mono,monospace;font-size:9px;font-weight:400;position:fixed;bottom:30px;right:30px}.status-indicator{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0006;border:1px solid #ffffff1a;border-radius:20px;align-items:center;gap:8px;padding:8px 16px;display:flex;position:fixed;bottom:30px;left:30px;box-shadow:0 4px 16px #0000004d,inset 0 0 30px #ffffff05}.status-dot{background:#fff;border-radius:50%;width:6px;height:6px;animation:2s ease-in-out infinite statusPulse;box-shadow:0 0 10px #fffc}@keyframes statusPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.status-label{letter-spacing:2px;color:#fff9;font-family:Share Tech Mono,monospace;font-size:9px;font-weight:700}.loading-overlay{z-index:9999;pointer-events:all;position:fixed;inset:0}.loading-half{will-change:transform;width:50%;height:100%;position:absolute;top:0;overflow:hidden}.loading-left{transform-origin:0;left:0}.loading-right{transform-origin:100%;right:0}.loading-half-inner{background:#0a0a0a;position:absolute;inset:0}.loading-half-grain{opacity:.03;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='3.2' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");position:absolute;inset:0}.loading-grid{background-image:linear-gradient(#ffffff06 1px,#0000 1px),linear-gradient(90deg,#ffffff06 1px,#0000 1px);background-size:40px 40px;animation:30s linear infinite gridDrift;position:absolute;inset:0}@keyframes gridDrift{0%{background-position:0 0}to{background-position:40px 40px}}.loading-seam{z-index:10;width:2px;height:100%;transition:opacity .3s;position:absolute;top:0;left:50%;transform:translate(-50%)}.loading-seam-glow{background:#fff9;width:2px;animation:2s ease-in-out infinite seamPulse;position:absolute;inset:0;box-shadow:0 0 8px #fff6,0 0 20px #fff3,0 0 40px #ffffff1a}@keyframes seamPulse{0%,to{opacity:.6}50%{opacity:1}}.loading-half.split-out{animation:1s cubic-bezier(.76,0,.24,1) forwards splitHalf}.loading-left.split-out{animation-name:splitLeft}.loading-right.split-out{animation-name:splitRight}@keyframes splitLeft{0%{transform:translate(0)}to{transform:translate(-102%)}}@keyframes splitRight{0%{transform:translate(0)}to{transform:translate(102%)}}.loading-seam.split-out{animation:.3s ease-out forwards seamFade}@keyframes seamFade{0%{opacity:1;transform:translate(-50%)scaleY(1)}to{opacity:0;transform:translate(-50%)scaleY(.5)}}.loading-center-content{z-index:20;flex-direction:column;align-items:center;gap:32px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.loading-center-content.split-out{animation:.5s cubic-bezier(.4,0,1,1) forwards contentFadeOut}@keyframes contentFadeOut{0%{opacity:1;filter:blur();transform:translate(-50%,-50%)scale(1)}to{opacity:0;filter:blur(6px);transform:translate(-50%,-50%)scale(.95)}}.loading-rings{width:160px;height:160px;position:relative}.loading-ring{border:1.5px solid #ffffff1a;border-radius:50%;position:absolute;top:50%;left:50%}.ring-1{border-top-color:#fffc;border-right-color:#ffffff4d;width:60px;height:60px;margin:-30px 0 0 -30px;animation:2s linear infinite ringRotate}.ring-2{border-bottom-color:#fff9;width:100px;height:100px;margin:-50px 0 0 -50px;animation:3s linear infinite reverse ringRotate}.ring-3{border-top-color:#ffffff26;border-left-color:#fff6;width:140px;height:140px;margin:-70px 0 0 -70px;animation:5s linear infinite ringRotate}.loading-ring-dot{background:#fff;border-radius:50%;width:6px;height:6px;margin:-3px 0 0 -3px;animation:1.5s ease-in-out infinite dotPulse;position:absolute;top:50%;left:50%;box-shadow:0 0 12px #fffc,0 0 24px #fff6}@keyframes dotPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.4)}}@keyframes ringRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-text-container{flex-direction:column;align-items:center;gap:10px;display:flex}.loading-title{letter-spacing:10px;color:#fff;font-family:Share Tech Mono,monospace;font-size:28px;font-weight:700;display:flex}.loading-char{animation:.6s ease-out both charReveal;display:inline-block}@keyframes charReveal{0%{opacity:0;filter:blur(4px);transform:translateY(10px)}to{opacity:1;filter:blur();transform:translateY(0)}}.loading-subtitle{letter-spacing:6px;color:#fff6;font-family:Share Tech Mono,monospace;font-size:11px;animation:2s ease-in-out infinite subtitleFade}@keyframes subtitleFade{0%,to{opacity:.4}50%{opacity:.7}}.loading-progress-container{flex-direction:column;align-items:center;gap:10px;width:280px;display:flex}.loading-progress-track{width:100%;height:2px;position:relative}.loading-progress-bar{background:#ffffff14;border-radius:1px;width:100%;height:2px;overflow:hidden}.loading-progress-fill{background:#fff;border-radius:1px;height:100%;transition:width .15s ease-out;box-shadow:0 0 8px #fff9}.loading-progress-glow{background:#fff;border-radius:50%;width:6px;height:6px;margin-top:-3px;margin-left:-3px;transition:left .15s ease-out;position:absolute;top:50%;box-shadow:0 0 12px #fffc,0 0 24px #fff6}.loading-progress-info{justify-content:space-between;align-items:center;width:100%;display:flex}.loading-progress-label{letter-spacing:3px;color:#ffffff4d;font-family:Share Tech Mono,monospace;font-size:9px}.loading-percentage{letter-spacing:2px;color:#fffc;font-variant-numeric:tabular-nums;font-family:Share Tech Mono,monospace;font-size:12px}.loading-bars{align-items:flex-end;gap:3px;height:24px;display:flex}.loading-bar-item{transform-origin:bottom;background:#fffc;border-radius:1px;width:3px;height:24px;transform:scaleY(.15);box-shadow:0 0 6px #ffffff4d}@keyframes textGlitch{0%,to{text-shadow:0 0 5px #ffffff4d,0 0 10px #ffffff26}10%{text-shadow:-1px 0 #fff6,1px 0 #fff6,0 0 8px #fff3;opacity:.95}20%{text-shadow:1px 0 #fff6,-1px 0 #fff6;opacity:.98}}.hologram-box{transform-origin:50%;background-image:linear-gradient(#ffffff26 50%,#0000 50%),linear-gradient(90deg,#ffffff08 50%,#0000 50%);background-size:100% 4px,4px 100%;animation:.7s cubic-bezier(.34,1.56,.64,1) expandFromDot;position:relative;box-shadow:0 0 15px #fff3,inset 0 0 15px #ffffff1a}.hologram-box.closing{animation:.5s cubic-bezier(.6,0,1,.4) forwards collapseToDot}.hologram-text{animation:4s .3s infinite textGlitch}.hologram-data{animation:5s .5s infinite textGlitch}.cyber-panel{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:1000;background:#00000080;border:1px solid #ffffff26;border-radius:8px;min-width:280px;max-width:280px;padding:20px;font-family:Share Tech Mono,monospace;position:fixed;top:180px;left:20px;box-shadow:0 8px 32px #0006,inset 0 0 30px #ffffff08}@keyframes expandFromDot{0%{opacity:1;border-radius:50%;width:4px;min-width:4px;max-width:4px;height:4px;padding:0;overflow:hidden}30%{opacity:1;border-radius:50%;width:4px;min-width:4px;max-width:4px;height:4px;padding:0;overflow:hidden}50%{opacity:1;border-radius:1px;width:280px;min-width:280px;max-width:280px;height:2px;padding:0;overflow:hidden}70%{opacity:1;border-radius:1px;width:280px;min-width:280px;max-width:280px;height:2px;padding:0;overflow:hidden}to{opacity:1;border-radius:8px;width:280px;min-width:280px;max-width:280px;height:auto;padding:20px;overflow:visible}}@keyframes collapseToDot{0%{opacity:1;border-radius:8px;width:280px;min-width:280px;max-width:280px;height:auto;padding:20px;overflow:visible}30%{opacity:1;border-radius:1px;width:280px;min-width:280px;max-width:280px;height:2px;padding:0;overflow:hidden}60%{opacity:1;border-radius:50%;width:4px;min-width:4px;max-width:4px;height:4px;padding:0;overflow:hidden}to{opacity:0;border-radius:50%;width:4px;min-width:4px;max-width:4px;height:4px;padding:0;overflow:hidden}}.cyber-panel:hover{border-color:#ffffff40;box-shadow:0 8px 32px #0006,inset 0 0 30px #ffffff0f}.cyber-panel:before{content:"";z-index:-1;opacity:.5;pointer-events:none;background:linear-gradient(135deg,#ffffff0d 0%,#0000 100%);border-radius:8px;position:absolute;inset:0}.cyber-header{border-bottom:1px solid #ffffff4d;align-items:center;gap:8px;margin-bottom:16px;padding-bottom:12px;display:flex}.cyber-bracket{color:#fff;text-shadow:0 0 10px #ffffff80;font-family:Orbitron,sans-serif;font-size:16px;font-weight:700}.cyber-title{color:#fff;letter-spacing:1px;text-shadow:0 0 10px #ffffff80;font-family:Orbitron,sans-serif;font-size:13px;font-weight:700;animation:2s ease-in-out infinite titleGlow}@keyframes titleGlow{0%,to{text-shadow:0 0 10px #ffffff80}50%{text-shadow:0 0 20px #fffc,0 0 30px #fff6}}.cyber-line{background:linear-gradient(90deg,#ffffff4d 0%,#0000 100%);flex:1;height:1px;box-shadow:0 0 5px #ffffff4d}.cyber-content{flex-direction:column;gap:8px;display:flex}.cyber-row{background:#ffffff05;border-left:2px solid #fff3;border-radius:4px;justify-content:space-between;align-items:center;margin-bottom:8px;padding:10px 14px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.cyber-row:hover{background:#ffffff0d;border-left-color:#ffffff80;transform:translate(4px);box-shadow:0 0 20px #ffffff1a}.cyber-label{color:#ffffffb3;letter-spacing:1px;text-shadow:0 0 5px #ffffff4d;font-family:Orbitron,sans-serif;font-size:10px;font-weight:700}.cyber-value{color:#fff;text-shadow:0 0 8px #ffffff80;font-family:Share Tech Mono,monospace;font-size:12px;font-weight:400}.cyber-highlight{color:#fff;text-shadow:0 0 10px #fffc;font-weight:700}.cyber-divider{background:#fff3;height:1px;margin:8px 0;box-shadow:0 0 5px #ffffff4d}.cyber-status-bar{background:#00000080;border:1px solid #ffffff4d;border-radius:3px;height:6px;margin-top:16px;overflow:hidden}.cyber-status-fill{background:linear-gradient(90deg,#fffc 0%,#c8c8c8cc 50%,#fffc 100%) 0 0/200% 100%;border-radius:2px;height:100%;animation:1.5s linear infinite statusFlow;box-shadow:0 0 15px #fff9}@keyframes statusFlow{0%{background-position:200%}to{background-position:0%}}.metrics-panel{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:1000;background:#0006;border:1px solid #ffffff1a;border-radius:8px;flex-direction:column;gap:8px;padding:16px 20px;font-family:Share Tech Mono,monospace;transition:all .3s;display:flex;position:fixed;top:20px;left:20px;box-shadow:0 8px 32px #0006,inset 0 0 30px #ffffff05}.metrics-panel:hover{border-color:#fff3;transform:translateY(-2px);box-shadow:0 8px 32px #0006,inset 0 0 30px #ffffff0d}.metric-item{justify-content:space-between;align-items:center;gap:20px;display:flex}.metric-label{letter-spacing:1.5px;color:#ffffff80;font-size:9px;font-weight:700}.metric-value{color:#fff;text-shadow:0 0 10px #ffffff4d;font-size:12px;font-weight:400}.metric-divider{background:#ffffff1a;height:1px;margin:4px 0}.audio-visualizer{z-index:1000;gap:12px;display:flex;position:fixed;top:20px;left:50%;transform:translate(-50%)}.visualizer-button{cursor:pointer;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0006;border:1px solid #ffffff1a;border-radius:8px;align-items:center;gap:14px;padding:16px 20px;transition:all .3s;display:flex;box-shadow:0 8px 32px #0006,inset 0 0 30px #ffffff05}.visualizer-button:hover{border-color:#ffffff4d;transform:translateY(-2px);box-shadow:0 8px 32px #0006,inset 0 0 30px #ffffff14}.visualizer-bars-container{align-items:flex-end;gap:3px;height:20px;display:flex;position:relative}.visualizer-glow{opacity:0;pointer-events:none;background:radial-gradient(circle,#ffffff4d 0%,#0000 70%);transition:opacity .5s ease-out;position:absolute;inset:-8px}.visualizer-bar{transform-origin:bottom;background:#fff;width:4px;height:20px;transform:scaleY(.12);box-shadow:0 0 10px #ffffff80}.controls-panel{z-index:1000;gap:8px;display:flex;position:fixed;top:20px;right:20px}.control-button{color:#fff9;cursor:pointer;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#0006;border:1px solid #ffffff1a;border-radius:8px;justify-content:center;align-items:center;padding:12px;transition:all .3s;display:flex;box-shadow:0 4px 16px #0000004d,inset 0 0 30px #ffffff05}.control-button:hover{color:#fff;border-color:#ffffff4d;transform:translateY(-2px);box-shadow:0 4px 16px #0000004d,inset 0 0 30px #ffffff14}.control-button.active{color:#fff;border-color:#ffffff4d;box-shadow:0 4px 16px #0000004d,inset 0 0 30px #ffffff1a}@media (max-width:768px){.cyber-panel{min-width:240px;max-width:240px;padding:16px;top:140px;left:10px}.metrics-panel{min-width:240px;padding:16px;top:60px;left:10px}.metric-item{font-size:11px}.controls-panel{gap:6px;top:10px;right:10px}.control-button{padding:10px}.audio-visualizer{bottom:10px;left:10px}.brand-text{letter-spacing:3px;font-size:7px}.version-text{font-size:7px}.status-indicator{bottom:10px;right:10px}}@media (max-width:480px){.cyber-panel{min-width:calc(100vw - 16px);max-width:calc(100vw - 16px);padding:12px;top:120px;left:8px}.metrics-panel{min-width:calc(100vw - 16px);padding:12px;top:50px;left:8px}.controls-panel{gap:4px;top:8px;right:8px}.control-button{padding:8px}.audio-visualizer{bottom:8px;left:8px}.brand-text{letter-spacing:2px;font-size:6px}.corner-frame{width:40px;height:40px}}@media (max-height:600px){.cyber-panel{padding:12px;top:110px}.metrics-panel{padding:12px;top:45px}.metric-item{padding:6px 0}}