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}.hud-vignette{pointer-events:none;z-index:1;background:radial-gradient(circle at 50% 42%,#0000 0%,#0000001f 52%,#0000009e 100%);transition:opacity .24s;position:absolute;inset:0}:root{--hud-white-02:#ffffff05;--hud-white-03:#ffffff08;--hud-white-04:#ffffff0a;--hud-white-06:#ffffff0f;--hud-white-2:#fff3;--hud-white-3:#ffffff4d;--hud-white-5:#ffffff80;--hud-white-8:#fffc;--hud-blur-strong:blur(120px);--hud-blur-mid:blur(100px);--hud-transition:.3s ease}.grain-overlay{pointer-events:none;opacity:.02;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{background-image:linear-gradient(var(--hud-white-02) 1px, transparent 1px), linear-gradient(90deg, var(--hud-white-02) 1px, transparent 1px);opacity:.6;background-size:100px 100px}.grid-overlay-small{background-image:linear-gradient(var(--hud-white-04) 1px, transparent 1px), linear-gradient(90deg, var(--hud-white-04) 1px, transparent 1px);opacity:.3;background-size:20px 20px}.ambient-glow{pointer-events:none;position:absolute}.ambient-glow-left{background:radial-gradient(circle, var(--hud-white-06) 0%, transparent 60%);width:600px;height:600px;filter:var(--hud-blur-strong);animation:15s ease-in-out infinite float;top:15%;left:10%}.ambient-glow-right{background:radial-gradient(circle, var(--hud-white-04) 0%, transparent 60%);width:500px;height:500px;filter:var(--hud-blur-mid);animation:18s ease-in-out infinite reverse float;bottom:20%;right:10%}.scan-line{background:linear-gradient(90deg, transparent 0%, var(--hud-white-8) 50%, transparent 100%);width:100%;height:2px;box-shadow:0 0 20px var(--hud-white-5);pointer-events:none;opacity:.3;animation:6s linear infinite scanDown;position:absolute;top:0;left:0}@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:var(--hud-white-3);transition:var(--hud-transition);position:absolute}.corner-frame:before{width:100%;height:1px}.corner-frame:after{width:1px;height:100%}.top-left{top:0;left:0}.top-right{top:0;right:0}.bottom-left{bottom:0;left:0}.bottom-right{bottom:0;right:0}.brand-text{letter-spacing:4px;color:var(--hud-white-3);pointer-events:none;text-shadow:0 0 20px var(--hud-white-2);transition:var(--hud-transition);font-family:Share Tech Mono,monospace;font-size:10px;font-weight:700;position:fixed;bottom:30px;left:50%;transform:translate(-50%)}.brand-text:hover{color:var(--hud-white-06);text-shadow:0 0 30px var(--hud-white-3)}.version-text{letter-spacing:2px;color:var(--hud-white-2);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);box-shadow:0 4px 16px #0000004d, inset 0 0 30px var(--hud-white-02);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}.status-dot{width:6px;height:6px;box-shadow:0 0 10px var(--hud-white-8);background:#fff;border-radius:50%;animation:2s ease-in-out infinite statusPulse}@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}@media (prefers-reduced-motion:reduce){.grain-overlay,.scan-line,.ambient-glow-left,.ambient-glow-right,.status-dot{animation:none!important}}:root{--loading-z:9999;--tri-size:162px}.loading-overlay{z-index:var(--loading-z);pointer-events:all;background:#000;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.loading-overlay.is-closing{animation:1.3s cubic-bezier(.26,.72,.22,1) forwards overlayFade}.loading-stage{width:240px;min-height:220px;transform:translateY(calc(var(--morph-progress,0) * 8px));flex-direction:column;justify-content:center;align-items:center;gap:15px;transition:transform .22s;display:flex}.loading-stage.is-closing{animation:1.35s cubic-bezier(.16,.76,.24,1) forwards triangleCollapse}.loading-triangle{width:var(--tri-size);height:var(--tri-size);filter:drop-shadow(0 0 18px #ffffff2e)}.loading-triangle-base{fill:none;stroke:#ffffff42;stroke-width:1.6px;stroke-linejoin:round;stroke-linecap:round}.loading-triangle-sweep{fill:none;stroke:#fffffffa;stroke-width:1.9px;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:15 85;animation:1.5s linear infinite triangleSweep}.loading-percent{color:#ffffffeb;letter-spacing:.11em;font-variant-numeric:tabular-nums;font-family:Share Tech Mono,monospace;font-size:clamp(14px,1.8vw,24px)}@keyframes triangleSweep{0%{stroke-dashoffset:0}to{stroke-dashoffset:-100px}}@keyframes triangleCollapse{0%{opacity:1;filter:blur();transform:translateY(0)scale(1)}50%{opacity:1;filter:blur();transform:translateY(2px)scale(1)}82%{opacity:.9;filter:blur();transform:translateY(3px)scale(.985)}to{opacity:0;filter:blur(.2px);transform:translateY(3px)scale(.98)}}@keyframes overlayFade{0%,72%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.loading-overlay.is-closing,.loading-stage.is-closing,.loading-triangle-sweep{animation:none}}:root{--cyber-panel-w:280px;--cyber-panel-pad:20px;--cyber-panel-radius:8px;--cyber-left:20px;--cyber-top:180px;--cyber-z:1000;--cyber-bg:#00000080;--cyber-border:#ffffff26;--cyber-border-hover:#ffffff40;--cyber-blur:20px;--cyber-shadow:0 8px 32px #0006, inset 0 0 30px #ffffff08;--cyber-shadow-hover:0 8px 32px #0006, inset 0 0 30px #ffffff0f;--cyber-text:#fff;--cyber-text-dim:#ffffffb3;--cyber-transition:.3s cubic-bezier(.4, 0, .2, 1)}@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{left:var(--cyber-left);top:var(--cyber-top);min-width:var(--cyber-panel-w);max-width:var(--cyber-panel-w);background:var(--cyber-bg);border:1px solid var(--cyber-border);border-radius:var(--cyber-panel-radius);box-shadow:var(--cyber-shadow);-webkit-backdrop-filter:blur(var(--cyber-blur));backdrop-filter:blur(var(--cyber-blur));padding:var(--cyber-panel-pad);z-index:var(--cyber-z);font-family:Share Tech Mono,monospace;position:fixed}@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;width:var(--cyber-panel-w);height:2px;min-width:var(--cyber-panel-w);max-width:var(--cyber-panel-w);border-radius:1px;padding:0;overflow:hidden}70%{opacity:1;width:var(--cyber-panel-w);height:2px;min-width:var(--cyber-panel-w);max-width:var(--cyber-panel-w);border-radius:1px;padding:0;overflow:hidden}to{opacity:1;width:var(--cyber-panel-w);height:auto;min-width:var(--cyber-panel-w);max-width:var(--cyber-panel-w);border-radius:var(--cyber-panel-radius);padding:var(--cyber-panel-pad);overflow:visible}}@keyframes collapseToDot{0%{opacity:1;width:var(--cyber-panel-w);height:auto;min-width:var(--cyber-panel-w);max-width:var(--cyber-panel-w);border-radius:var(--cyber-panel-radius);padding:var(--cyber-panel-pad);overflow:visible}30%{opacity:1;width:var(--cyber-panel-w);height:2px;min-width:var(--cyber-panel-w);max-width:var(--cyber-panel-w);border-radius:1px;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:var(--cyber-border-hover);box-shadow:var(--cyber-shadow-hover)}.cyber-panel:before{content:"";border-radius:var(--cyber-panel-radius);z-index:-1;opacity:.5;pointer-events:none;background:linear-gradient(135deg,#ffffff0d 0%,#0000 100%);position:absolute;inset:0}.cyber-panel:focus-visible{outline-offset:3px;outline:2px solid #ffffff59}.cyber-header{border-bottom:1px solid #ffffff4d;align-items:center;gap:8px;margin-bottom:16px;padding-bottom:12px;display:flex}.cyber-bracket{color:var(--cyber-text);text-shadow:0 0 10px #ffffff80;font-family:Orbitron,sans-serif;font-size:16px;font-weight:700}.cyber-title{color:var(--cyber-text);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{transition:transform var(--cyber-transition), background var(--cyber-transition), box-shadow var(--cyber-transition), border-color var(--cyber-transition);background:#ffffff05;border-left:2px solid #fff3;border-radius:4px;justify-content:space-between;align-items:center;margin-bottom:8px;padding:10px 14px;display:flex}.cyber-row:hover{background:#ffffff0d;border-left-color:#ffffff80;transform:translate(4px);box-shadow:0 0 20px #ffffff1a}.cyber-label{color:var(--cyber-text-dim);letter-spacing:1px;text-shadow:0 0 5px #ffffff4d;font-family:Orbitron,sans-serif;font-size:10px;font-weight:700}.cyber-value{color:var(--cyber-text);text-shadow:0 0 8px #ffffff80;font-family:Share Tech Mono,monospace;font-size:12px;font-weight:400}.cyber-highlight{color:var(--cyber-text);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%}}@media (prefers-reduced-motion:reduce){.hologram-box,.hologram-box.closing,.hologram-text,.hologram-data,.cyber-title,.cyber-status-fill{animation:none!important}.cyber-row{transition:none!important}.cyber-row:hover{transform:none!important}}@media (max-width:360px){:root{--cyber-panel-w:260px;--cyber-panel-pad:16px}}:root{--metrics-left:20px;--metrics-top:20px;--metrics-z:1000;--metrics-bg:#0006;--metrics-border:#ffffff1a;--metrics-border-hover:#fff3;--metrics-radius:8px;--metrics-pad-y:16px;--metrics-pad-x:20px;--metrics-blur:20px;--metrics-shadow:0 8px 32px #0006, inset 0 0 30px #ffffff05;--metrics-shadow-hover:0 8px 32px #0006, inset 0 0 30px #ffffff0d;--metrics-transition:all .3s ease;--metrics-font:"Share Tech Mono", monospace;--metrics-label-color:#ffffff80;--metrics-value-color:#fff;--metrics-divider:#ffffff1a}.metrics-panel{left:var(--metrics-left);top:var(--metrics-top);z-index:var(--metrics-z);background:var(--metrics-bg);-webkit-backdrop-filter:blur(var(--metrics-blur));backdrop-filter:blur(var(--metrics-blur));border:1px solid var(--metrics-border);border-radius:var(--metrics-radius);padding:var(--metrics-pad-y) var(--metrics-pad-x);font-family:var(--metrics-font);box-shadow:var(--metrics-shadow);transition:var(--metrics-transition);flex-direction:column;gap:8px;display:flex;position:fixed}.metrics-panel:hover{border-color:var(--metrics-border-hover);box-shadow:var(--metrics-shadow-hover);transform:translateY(-2px)}.metric-item{justify-content:space-between;align-items:center;gap:20px;display:flex}.metric-label{letter-spacing:1.5px;color:var(--metrics-label-color);font-size:9px;font-weight:700}.metric-value{color:var(--metrics-value-color);text-shadow:0 0 10px #ffffff4d;font-size:12px;font-weight:400}.metric-divider{background:var(--metrics-divider);height:1px;margin:4px 0}:root{--ui-bg:#080a0feb;--ui-border:#ffffff8c;--ui-border-hover:#fffffff2;--ui-text:#fff;--ui-text-strong:#fff;--ui-radius:8px;--ui-blur:20px;--ui-shadow:0 2px 10px #00000059;--ui-shadow-compact:0 2px 10px #00000059;--ui-shadow-hover:0 3px 12px #0006;--ui-shadow-compact-hover:0 3px 12px #0006;--ui-shadow-active:0 2px 10px #0006;--ui-transition:.3s ease;--ui-z:1000;--viz-bar-w:4px;--viz-bar-h:41px;--viz-bar-gap:3px}.visualizer-button,.control-button{background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:var(--ui-radius);-webkit-backdrop-filter:blur(var(--ui-blur));backdrop-filter:blur(var(--ui-blur));cursor:pointer;transition:transform var(--ui-transition), box-shadow var(--ui-transition), border-color var(--ui-transition), color var(--ui-transition);will-change:transform;justify-content:center;align-items:center;display:flex}.visualizer-button:hover,.control-button:hover{border-color:var(--ui-border-hover);transform:translateY(-2px)}.visualizer-button:focus-visible,.control-button:focus-visible{outline-offset:3px;outline:2px solid #ffffff59}.audio-visualizer{z-index:var(--ui-z);gap:12px;display:flex;position:fixed;top:20px;left:50%;transform:translate(-50%)}.visualizer-button{box-shadow:var(--ui-shadow);gap:14px;padding:10px 2px}.visualizer-button:hover{box-shadow:var(--ui-shadow-hover)}.visualizer-bars-container{width:200px;height:var(--viz-bar-h);position:relative}.visualizer-wire{pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0}.controls-panel{z-index:calc(var(--ui-z) + 20);gap:8px;display:flex;position:fixed;top:20px;right:20px}.control-button{color:var(--ui-text);min-width:46px;min-height:46px;box-shadow:var(--ui-shadow-compact);background:#0a0c12f5;padding:12px}.control-button svg{stroke:#fff;filter:none;display:block}.control-button:hover{color:var(--ui-text-strong);box-shadow:var(--ui-shadow-compact-hover)}.control-button.active{color:var(--ui-text-strong);border-color:var(--ui-border-hover);box-shadow:var(--ui-shadow-active)}@media (prefers-reduced-motion:reduce){.visualizer-button,.control-button,.visualizer-glow{transition:none!important}.visualizer-button:hover,.control-button:hover{transform:none!important}}@media (max-width:480px){.audio-visualizer{gap:8px;top:12px}.visualizer-button{gap:10px;padding:12px 14px}.controls-panel{gap:6px;top:12px;right:12px}.control-button{padding:10px}}@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}}