:root{--primary-color: #00f6ff;--secondary-color: #0062c4;--background-dark: #000824;--background-light: #0a1550;--text-bright: #e6fbff;--text-primary: #ffffff;--accent-color: #ff2a8d;--border-glow: 0 0 15px var(--primary-color);--input-bg: rgba(1, 22, 59, .7);--dashboard-width: 350px;--holographic-gradient: linear-gradient(135deg, rgba(0, 246, 255, .15), rgba(255, 42, 141, .08));--grid-color: rgba(0, 246, 255, .1)}@media(max-width:1300px){:root{--dashboard-width: 100%}}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Roboto,sans-serif;background-color:var(--background-dark);color:var(--text-primary);line-height:1.6;height:100dvh;overflow:hidden;font-size:16px;background-image:radial-gradient(circle at 10% 20%,rgba(0,246,255,.03) 0%,transparent 60%),radial-gradient(circle at 90% 80%,rgba(255,42,141,.03) 0%,transparent 40%)}header{background-color:#000824b3;color:#fff;padding:15px 25px;box-shadow:0 0 20px #00f6ff33;border-bottom:1px solid rgba(0,246,255,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:space-between;align-items:center;height:60px}h1{font-size:24px;font-weight:300;color:var(--text-bright);letter-spacing:2px;text-transform:uppercase;text-shadow:0 0 8px rgba(0,246,255,.6)}h2{font-size:22px;font-weight:300;color:var(--text-bright);margin-bottom:20px;padding-bottom:5px;letter-spacing:2px;text-transform:uppercase;text-shadow:0 0 10px rgba(0,246,255,.5)}.controls{display:flex;align-items:center;gap:15px}.main-container{display:flex;height:calc(100svh - 120px)}.dashboard{width:var(--dashboard-width);background:linear-gradient(120deg,#000c24b3,#0a155080);padding:25px;border-left:1px solid rgba(0,246,255,.3);overflow-y:auto;box-shadow:inset 0 0 30px #00f6ff0d;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);position:relative}.dashboard:before{content:"";position:absolute;top:0;left:0;right:0;height:100%;background-image:linear-gradient(0deg,transparent 24%,var(--grid-color) 25%,var(--grid-color) 26%,transparent 27%,transparent 74%,var(--grid-color) 75%,var(--grid-color) 76%,transparent 77%,transparent),linear-gradient(90deg,transparent 24%,var(--grid-color) 25%,var(--grid-color) 26%,transparent 27%,transparent 74%,var(--grid-color) 75%,var(--grid-color) 76%,transparent 77%,transparent);background-size:50px 50px;pointer-events:none;z-index:-1;opacity:.4}.dashboard-header{text-align:center;margin-bottom:30px;position:relative}.dashboard-header:after{content:"";position:absolute;bottom:-10px;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--primary-color) 20%,var(--accent-color) 80%,transparent)}.glow-line{height:2px;background:linear-gradient(90deg,transparent,var(--primary-color),var(--accent-color),transparent);margin:15px 0;position:relative;box-shadow:0 0 10px var(--primary-color)}.viewer-container{flex-grow:1;position:relative;display:flex;justify-content:center;align-items:center;background-color:#000414e6;overflow:hidden;border:1px solid rgba(0,246,255,.3);border-radius:6px;margin:0 15px;box-shadow:inset 0 0 50px #000824cc}.viewer-container:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 50% 100%,rgba(255,60,30,.05) 0%,transparent 70%),linear-gradient(0deg,rgba(0,0,0,.7) 0%,transparent 20%);z-index:1;pointer-events:none}.viewer-container:after{content:"";position:absolute;inset:0;background-image:linear-gradient(0deg,transparent 95%,rgba(0,246,255,.1) 96%,transparent 97%),linear-gradient(90deg,transparent 95%,rgba(0,246,255,.1) 96%,transparent 97%);background-size:40px 40px;opacity:.3;z-index:1;pointer-events:none}#svg-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;overflow:hidden;background-color:#000000d9;position:relative;z-index:2}#svg-container:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(0,246,255,.5),transparent);box-shadow:0 0 10px var(--primary-color);z-index:3}#svg-container svg{max-width:100%;max-height:100%;width:auto;height:auto;filter:drop-shadow(0 0 3px rgba(0,246,255,.3))}.param-group{margin-bottom:28px;position:relative;padding-left:12px}.param-group:before{content:"";position:absolute;left:0;top:5px;height:calc(100% - 5px);width:2px;background:linear-gradient(to bottom,var(--primary-color),transparent)}.param-group label{display:block;margin-bottom:10px;color:var(--text-bright);font-size:13px;font-weight:400;letter-spacing:.8px;text-transform:uppercase}.slider-decoration{position:absolute;top:0;right:0;width:8px;height:8px;border:1px solid var(--primary-color);border-radius:1px;opacity:.7}.param-group input,.param-group select{width:100%;padding:12px 15px;border:1px solid rgba(0,246,255,.5);border-radius:4px;background-color:#000824b3;color:var(--text-bright);font-family:Roboto,monospace;transition:all .3s;box-shadow:0 0 5px #00f6ff4d}.param-group input:focus,.param-group select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 10px var(--primary-color)}.param-group input[type=number]{text-align:center;font-weight:300;font-size:16px;letter-spacing:1px}.param-group input[type=range]{-webkit-appearance:none;height:6px;background:linear-gradient(90deg,var(--secondary-color),var(--primary-color));border-radius:3px;padding:0;margin:15px 0;border:none;box-shadow:0 0 10px #00f6ff33}.param-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--text-bright);border:2px solid var(--primary-color);box-shadow:0 0 10px var(--primary-color);cursor:pointer}.param-group select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--primary-color) 50%),linear-gradient(135deg,var(--primary-color) 50%,transparent 50%);background-position:calc(100% - 15px) center,calc(100% - 10px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:30px;text-align:center}.param-group span{display:inline-block;margin-top:10px;font-size:14px;color:var(--primary-color);text-align:right;width:100%;font-weight:500}.info-button{display:inline-flex;justify-content:center;align-items:center;width:18px;height:18px;border-radius:50%;background-color:#06c;color:#fff;font-style:italic;font-weight:700;border:none;margin-left:8px;cursor:help;box-shadow:0 0 5px #0066cc80;transition:all .2s ease}.info-button:hover{background-color:#08f;box-shadow:0 0 8px #0088ffb3;transform:scale(1.1)}.info-tooltip{position:absolute;background-color:#0a1428e6;color:#eee;padding:10px;border-radius:5px;z-index:100;max-width:250px;box-shadow:0 0 15px #0088ff80;border:1px solid rgba(0,136,255,.3);font-size:.9rem;pointer-events:none;opacity:0;transform:translateY(-5px);transition:opacity .3s,transform .3s}.info-tooltip.visible{opacity:1;transform:translateY(0)}.button-container{display:flex;gap:15px;margin-top:40px}.primary-button,.secondary-button{padding:12px 20px;border:none;border-radius:4px;cursor:pointer;font-weight:400;letter-spacing:1px;position:relative;overflow:hidden;text-transform:uppercase;font-size:14px;transition:all .3s}.primary-button{background:linear-gradient(45deg,var(--secondary-color),var(--primary-color));color:#fff;border:1px solid var(--primary-color);box-shadow:0 0 15px #00f6ff4d;flex:2}.primary-button:before{content:"";position:absolute;inset:-100%;background:conic-gradient(transparent,rgba(0,246,255,.3),rgba(255,42,141,.3),rgba(0,246,255,.3),transparent);animation:rotate-holo 4s linear infinite;opacity:0;transition:opacity .3s ease}.primary-button:hover:before{opacity:1}.primary-button:after{content:"";position:absolute;inset:2px;background:linear-gradient(45deg,var(--secondary-color),var(--primary-color));z-index:-1;border-radius:3px}.primary-button:active{transform:scale(.97);box-shadow:0 0 30px var(--primary-color)}.primary-button:active:before{animation-duration:1s;opacity:1}@keyframes rotate-holo{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.primary-button .holographic-scan{position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,246,255,.4),rgba(255,42,141,.2),transparent);z-index:2;transform:skew(-25deg);opacity:0;transition:opacity .3s}.primary-button:hover .holographic-scan{animation:scan-effect 2s infinite;opacity:1}@keyframes scan-effect{0%{left:-100%}to{left:200%}}.primary-button .button-text{position:relative;z-index:2}.primary-button .button-glow{position:absolute;inset:-10px;background:radial-gradient(circle closest-side,rgba(0,246,255,.3),transparent);z-index:1;opacity:0;transition:opacity .3s}.primary-button:hover .button-glow{opacity:1}.secondary-button{background-color:transparent;color:var(--text-bright);border:1px solid rgba(255,255,255,.2);box-shadow:none;flex:1}.secondary-button:hover{border-color:#00f6ff4d;box-shadow:0 0 10px #00f6ff1a}@keyframes button-loading-animation{0%{background-position:0% 50%;box-shadow:0 0 15px #00f6ff4d}50%{background-position:100% 50%;box-shadow:0 0 25px #00f6ff99,0 0 40px #ff2a8d4d}to{background-position:0% 50%;box-shadow:0 0 15px #00f6ff4d}}.primary-button.loading{background:linear-gradient(270deg,var(--secondary-color),var(--primary-color),var(--accent-color),var(--primary-color));background-size:300% 100%;animation:button-loading-animation 3s infinite ease-in-out;position:relative;overflow:hidden;color:#ffffffe6;cursor:wait}.primary-button.loading:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:scanning-light 1.5s infinite}@keyframes scanning-light{0%{left:-100%}to{left:100%}}.primary-button.loading .button-text:after{content:"...";animation:ellipsis-animation 1.5s infinite}@keyframes ellipsis-animation{0%{content:"."}33%{content:".."}66%{content:"..."}to{content:"."}}.primary-button:active{transform:scale(.95);box-shadow:0 0 30px var(--primary-color),0 0 50px var(--accent-color)}.primary-button:active:after{content:"";position:absolute;inset:0;background:radial-gradient(circle,var(--primary-color) 0%,transparent 70%);opacity:.3;animation:pulse-out .5s forwards}@keyframes pulse-out{0%{transform:scale(.8);opacity:.5}to{transform:scale(2);opacity:0}}.player-controls{position:absolute;bottom:15px;left:50%;transform:translate(-50%);display:flex;align-items:center;background-color:#000c24d9;padding:10px 20px;border-radius:30px;border:1px solid rgba(0,246,255,.6);z-index:10;gap:15px;box-shadow:0 0 20px #00f6ff33,inset 0 0 10px #00f6ff1a;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.player-button{background-color:#00f6ff0d;color:var(--text-bright);border:1px solid rgba(0,246,255,.3);width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;justify-content:center;align-items:center;font-size:14px;transition:all .3s;position:relative;overflow:hidden}.player-button:after{content:"";position:absolute;top:50%;left:50%;width:100%;height:100%;background:radial-gradient(circle closest-side,rgba(0,246,255,.3),transparent);transform:translate(-50%,-50%);opacity:0;transition:opacity .2s}.player-button:hover:after{opacity:1}.player-button:hover{color:#fff;box-shadow:0 0 10px #00f6ff80}#play-pause{background:linear-gradient(135deg,#0062c433,#00f6ff33);width:46px;height:46px;box-shadow:0 0 10px #00f6ff33;border:1px solid rgba(0,246,255,.6)}#play-pause.active{background:linear-gradient(135deg,#ff2a8d4d,#00f6ff4d);box-shadow:0 0 15px #00f6ff66}.speed-control-compact{display:flex;align-items:center;gap:10px;margin-left:5px;border-left:1px solid rgba(0,246,255,.3);padding:0 8px 0 15px}.speed-label{color:var(--text-bright);font-size:12px;opacity:.9;text-transform:uppercase;letter-spacing:.5px}.speed-slider{-webkit-appearance:none;width:70px;height:5px;background:linear-gradient(90deg,var(--secondary-color),var(--primary-color));border-radius:2px;outline:none;box-shadow:inset 0 0 5px #00000080}.speed-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,var(--text-bright),#ffffff);cursor:pointer;border:2px solid var(--primary-color);box-shadow:0 0 8px var(--primary-color)}#speed-value{color:var(--primary-color);font-weight:500;min-width:30px;text-align:center;font-family:Roboto,monospace;font-size:13px}.mini-progress-container{display:flex;align-items:center;gap:10px;padding-left:15px;border-left:1px solid rgba(0,246,255,.3)}.mini-progress-bar{width:80px;height:6px;background-color:#00001e80;border-radius:3px;overflow:hidden;box-shadow:inset 0 0 5px #00000080;border:1px solid rgba(0,246,255,.2)}.mini-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--secondary-color),var(--primary-color));border-radius:2px;transition:width .3s;box-shadow:0 0 10px var(--primary-color)}.progress-text{color:var(--primary-color);font-size:13px;font-family:Roboto,monospace;min-width:35px;text-align:center}.seek-container{padding:5px 15px;background-color:#000c24b3;border-top:1px solid rgba(0,246,255,.3);box-shadow:0 -5px 15px #0000004d;position:relative}.seek-container:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:repeating-linear-gradient(90deg,rgba(0,246,255,.05) 0px,rgba(0,246,255,.05) 2px,transparent 2px,transparent 15px);pointer-events:none}#seek{width:100%;height:5px;-webkit-appearance:none;background:linear-gradient(90deg,#00f6ff33,#00f6ff99);border-radius:3px;outline:none;margin:10px 0;box-shadow:0 0 8px #00f6ff4d}#seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--text-bright),#ffffff);cursor:pointer;box-shadow:0 0 8px var(--primary-color);border:2px solid var(--primary-color)}#counter{position:absolute;bottom:70px;left:50%;transform:translate(-50%);background-color:#000c24cc;color:var(--primary-color);padding:5px 15px;border-radius:15px;font-size:13px;font-family:Roboto,monospace;border:1px solid rgba(0,246,255,.6);box-shadow:0 0 10px #00f6ff33;z-index:10;letter-spacing:1px}.scanner-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,transparent 0%,rgba(0,246,255,.15) 50%,transparent 51%,transparent 100%);background-size:100% 50px;animation:scanLines 3s linear infinite;pointer-events:none;z-index:5;opacity:.7}@keyframes scanLines{0%{transform:translateY(-100%)}to{transform:translateY(100%)}}.grid-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(to right,rgba(0,246,255,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,246,255,.05) 1px,transparent 1px);background-size:50px 50px;pointer-events:none;z-index:4;opacity:.3}@keyframes pulse{0%{stroke-width:8;filter:drop-shadow(0 0 3px rgba(0,255,157,.5))}50%{stroke-width:10;filter:drop-shadow(0 0 8px rgba(0,255,157,.8))}to{stroke-width:8;filter:drop-shadow(0 0 3px rgba(0,255,157,.5))}}.hidden{display:none}.loader{position:absolute;border:3px solid rgba(0,0,30,.5);border-top:3px solid var(--primary-color);border-right:3px solid var(--accent-color);border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;box-shadow:0 0 15px #00f6ff4d}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-message{color:var(--accent-color);text-align:center;padding:10px}.dashboard-toggle{display:none;position:fixed;bottom:80px;right:20px;width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,var(--secondary-color),var(--primary-color));color:#fff;border:none;font-size:18px;box-shadow:0 0 15px #00f6ff66;z-index:100;cursor:pointer;justify-content:center;align-items:center;border:2px solid rgba(255,255,255,.3);transition:transform .3s,box-shadow .3s}.dashboard-toggle:hover{transform:scale(1.1);box-shadow:0 0 20px #00f6ff99}.dashboard-toggle .open-icon,.dashboard-toggle .close-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:opacity .3s}@media(max-width:1300px){.main-container{flex-direction:column}.viewer-container{margin:0;border-radius:0}header{background:linear-gradient(90deg,#000824e6,#000c42cc);height:50px;padding:10px 15px;position:relative;overflow:hidden}header:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--primary-color),transparent);animation:scanLine 2s linear infinite}header:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--primary-color),var(--accent-color),transparent);opacity:.6}@keyframes scanLine{0%{transform:translate(-100%)}to{transform:translate(100%)}}h1{font-size:18px;text-align:center;width:100%}.dashboard{position:fixed;top:50px;right:0;bottom:0;width:100v;max-width:350px;transform:translate(100%);transition:transform .3s ease-in-out;z-index:1000;border-left:1px solid rgba(0,246,255,.3);box-shadow:-5px 0 25px #00001ecc}.dashboard.active{transform:translate(0)}.dashboard-toggle{display:flex;position:fixed;bottom:80px;right:20px;width:50px;height:50px;z-index:100;border-radius:50%;background:radial-gradient(circle at center,#00f6ff33,#0062c4e6 70%);box-shadow:0 0 15px #00f6ff66,inset 0 0 8px #fff9;border:1px solid rgba(0,246,255,.8);animation:pulse-light 3s infinite}@keyframes pulse-light{0%{box-shadow:0 0 15px #00f6ff66,inset 0 0 8px #fff9}50%{box-shadow:0 0 25px #00f6ffb3,inset 0 0 12px #fffc}to{box-shadow:0 0 15px #00f6ff66,inset 0 0 8px #fff9}}.player-controls{padding:8px 15px;background:#000c24b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(0,246,255,.6);box-shadow:0 0 20px #00f6ff4d,inset 0 0 8px #00f6ff33;border-radius:30px}.player-controls:before{content:"";position:absolute;top:-1px;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(0,246,255,.8),transparent)}@media(max-width:480px){.speed-control-compact,.mini-progress-container{display:none}.player-controls{padding:6px 10px;gap:8px;border-radius:25px;bottom:10px}#play-pause{width:40px;height:40px;box-shadow:0 0 15px #00f6ff66}.player-button{width:32px;height:32px}.player-button:before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.2),transparent 70%);z-index:1}#counter{bottom:60px;padding:3px 12px;border-radius:12px;font-size:11px;background:#000c24cc;border:1px solid rgba(0,246,255,.5);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 0 10px #00f6ff4d}.seek-container{padding:3px 10px}#seek{height:4px;margin:6px 0}#seek::-webkit-slider-thumb{width:12px;height:12px}}.speed-control-compact,.mini-progress-container{padding-left:10px}.mini-progress-bar{width:60px}}.dashboard-section{margin-bottom:10px;padding-bottom:5px;border-bottom:1px solid rgba(77,161,255,.3)}.dashboard-section:last-child{border-bottom:none;margin-bottom:0}.dashboard-section h3{color:#4da1ff;margin-bottom:8px;font-size:1rem;text-transform:uppercase;letter-spacing:1px;text-shadow:0 0 5px rgba(77,161,255,.5);position:relative;display:inline-block}