:root{--primary-color:#00f6ff;--secondary-color:#0062c4;--background-dark:#000512;--background-light:#050a2a;--text-bright:#e6fbff;--text-primary:#fff;--accent-color:#ff2a8d;--accent-purple:#a855f7;--accent-cyan:#06b6d4;--border-glow:0 0 15px var(--primary-color);--input-bg:#01163bb3;--dashboard-width:350px;--holographic-gradient:linear-gradient(135deg,#00f6ff26,#ff2a8d14);--grid-color:#00f6ff1a}@media (max-width:1300px){:root{--dashboard-width:100%}}*{box-sizing:border-box;margin:0;padding:0}:focus{outline:2px solid var(--primary-color);outline-offset:2px}:focus:not(:focus-visible){outline:none}:focus-visible{outline:3px solid var(--primary-color);outline-offset:2px;box-shadow:0 0 10px var(--primary-color)}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}body{background-color:var(--background-dark);color:var(--text-primary);background-image:radial-gradient(circle at 20% 30%,#00f6ff14 0%,#0000 50%),radial-gradient(circle at 80% 70%,#ff2a8d0f 0%,#0000 50%),radial-gradient(circle,#a855f70a 0%,#0000 60%);background-attachment:fixed;height:100dvh;font-family:Inter,Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px;line-height:1.6;overflow:hidden}header{color:#fff;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:linear-gradient(90deg,#000512f2,#050a2ae6);border-bottom:1px solid #00f6ff40;justify-content:space-between;align-items:center;height:60px;padding:15px 30px;display:flex;position:relative;overflow:hidden;box-shadow:0 10px 40px #00f6ff26,0 0 1px #00f6ff80,inset 0 1px #00f6ff33}header:before{content:"";opacity:.8;background:linear-gradient(90deg,#0000,#00f6ff99,#0000);height:1px;position:absolute;top:0;left:0;right:0}header:after{content:"";opacity:.6;background:linear-gradient(90deg,#0000,#a855f766,#0000);height:1px;position:absolute;bottom:0;left:0;right:0}.header-button:active{will-change:transform;transform:translateY(0)}.header-button:active:after{will-change:auto}.header-controls{align-items:center;gap:15px;display:flex}.header-button{color:var(--text-bright);cursor:pointer;text-transform:uppercase;letter-spacing:1px;background:linear-gradient(135deg,#00f6ff14,#a855f714);border:1px solid #00f6ff4d;border-radius:8px;align-items:center;gap:8px;padding:8px 18px;font-size:13px;font-weight:500;transition:all .4s cubic-bezier(.34,1.56,.64,1);display:flex;position:relative;overflow:hidden}.header-button:before{content:"";z-index:1;will-change:transform;background:linear-gradient(90deg,#0000,#00f6ff4d,#0000);width:100%;height:100%;transition:transform .5s;position:absolute;top:0;left:0;transform:translate(-100%)}.header-button:hover:before{transform:translate(100%)}.header-button:hover{background:linear-gradient(135deg,#00f6ff26,#a855f726);border-color:#00f6ff80;transform:translateY(-2px);box-shadow:0 0 20px #00f6ff66,0 0 40px #a855f733,inset 0 0 10px #00f6ff1a}.tutorial-icon{font-size:16px}.tutorial-text{font-weight:500}h1{color:var(--text-bright);letter-spacing:2px;text-transform:uppercase;text-shadow:0 0 15px #00f6ffb3;background:linear-gradient(90deg,var(--primary-color),var(--accent-purple));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:26px;font-weight:700}h2{color:var(--text-bright);letter-spacing:1.5px;text-transform:uppercase;text-shadow:0 0 12px #00f6ff99;margin-bottom:20px;padding-bottom:5px;font-size:22px;font-weight:600}.controls{align-items:center;gap:15px;display:flex}.main-container{height:calc(100svh - 120px);display:flex}.dashboard{width:var(--dashboard-width);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);content-visibility:auto;contain-intrinsic-size:900px 1400px;background:linear-gradient(135deg,#000514cc,#050a2d99);border-left:1px solid #00f6ff40;padding:30px;position:relative;overflow-y:auto;box-shadow:inset 0 0 30px #00f6ff0d,-10px 0 40px #0000004d}.dashboard:before{content:"";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);pointer-events:none;z-index:0;opacity:.2;background-size:50px 50px;height:100%;position:absolute;top:0;left:0;right:0}.dashboard-header{text-align:center;margin-bottom:30px;position:relative}.dashboard-header:after{content:"";background:linear-gradient(90deg,transparent,var(--primary-color)20%,var(--accent-color)80%,transparent);width:100%;height:1px;position:absolute;bottom:-10px;left:0}.glow-line{background:linear-gradient(90deg,transparent,var(--primary-color),var(--accent-color),transparent);height:2px;box-shadow:0 0 10px var(--primary-color);margin:15px 0;position:relative}.viewer-container{background:linear-gradient(135deg,#00030cf2,#05081ee6);border:1px solid #00f6ff33;border-radius:10px;flex-grow:1;justify-content:center;align-items:center;margin:0 15px;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 80px #00f6ff14,inset 0 0 150px #a855f70a,0 10px 50px #0006}.viewer-container:before{content:"";z-index:1;pointer-events:none;background-image:radial-gradient(circle at 50% 100%,#ff3c1e0d 0%,#0000 70%),linear-gradient(#0000 70%,#00000080 100%);position:absolute;inset:0}.viewer-container:after{content:"";opacity:.2;z-index:1;pointer-events:none;background-image:linear-gradient(#0000 3%,#00f6ff14 4%,#0000 5%),linear-gradient(90deg,#0000 95%,#00f6ff14 96%,#0000 97%);background-size:40px 40px;position:absolute;inset:0}#svg-container{z-index:2;background-color:#000000d9;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative;overflow:hidden}#svg-container:before{content:"";height:2px;box-shadow:0 0 10px var(--primary-color);z-index:3;background:linear-gradient(90deg,#0000,#00f6ff80,#0000);position:absolute;top:0;left:0;right:0}#svg-container svg{filter:drop-shadow(0 0 3px #00f6ff4d);width:auto;max-width:100%;height:auto;max-height:100%}.param-group{margin-bottom:28px;padding-left:12px;position:relative}.param-group:before{content:"";background:linear-gradient(to bottom,var(--primary-color),var(--accent-purple),transparent);opacity:.6;width:2px;height:calc(100% - 5px);position:absolute;top:5px;left:0}.param-group label{color:var(--text-bright);letter-spacing:.8px;text-transform:uppercase;margin-bottom:10px;font-size:13px;font-weight:600;display:block}.param-group input,.param-group select{width:100%;color:var(--text-bright);background:linear-gradient(135deg,#00082499,#050a2d66);border:1px solid #00f6ff4d;border-radius:8px;padding:12px 16px;font-family:Roboto,monospace;font-size:14px;transition:all .3s cubic-bezier(.34,1.56,.64,1);box-shadow:inset 0 0 10px #00f6ff1a}.param-group input:focus,.param-group select:focus{border-color:var(--primary-color);border-color:var(--primary-color);box-shadow:0 0 15px #00f6ff66,inset 0 0 10px #00f6ff1a,0 0 25px #a855f733;box-shadow:0 0 10px var(--primary-color);background:linear-gradient(135deg,#000824cc,#050a2d99);outline:none}.param-group input[type=number]{text-align:center;letter-spacing:1px;font-size:16px;font-weight:300}.param-group input[type=range]{-webkit-appearance:none;background:linear-gradient(90deg,var(--secondary-color),var(--primary-color));border:none;border-radius:3px;height:6px;margin:15px 0;padding:0;box-shadow:0 0 10px #00f6ff33}.param-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--text-bright);border:2px solid var(--primary-color);width:20px;height:20px;box-shadow:0 0 10px var(--primary-color);cursor:pointer;border-radius:50%}.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%);text-align:center;background-position:calc(100% - 15px),calc(100% - 10px);background-repeat:no-repeat;background-size:5px 5px,5px 5px;padding-right:30px}.param-group span{color:var(--primary-color);text-align:right;width:100%;margin-top:10px;font-size:14px;font-weight:500;display:inline-block}.info-button{color:#fff;cursor:help;background-color:#06c;border:none;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;margin-left:8px;font-style:italic;font-weight:700;transition:all .2s;display:inline-flex;box-shadow:0 0 5px #0066cc80}.info-button:hover{background-color:#08f;transform:scale(1.1);box-shadow:0 0 8px #0088ffb3}.info-tooltip{color:#eee;z-index:100;pointer-events:none;opacity:0;background-color:#0a1428e6;border:1px solid #0088ff4d;border-radius:5px;max-width:250px;padding:10px;font-size:.9rem;transition:opacity .3s,transform .3s;position:absolute;transform:translateY(-5px);box-shadow:0 0 15px #0088ff80}.button-container{gap:15px;margin-top:40px;display:flex}.primary-button,.secondary-button{cursor:pointer;letter-spacing:1.2px;text-transform:uppercase;border:none;border-radius:8px;padding:14px 24px;font-size:14px;font-weight:600;transition:all .4s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}.primary-button{background:linear-gradient(135deg,var(--secondary-color),var(--primary-color));color:#fff;border:1px solid #00f6ff80;flex:2;box-shadow:0 0 20px #00f6ff66,0 0 40px #a855f733,inset 0 0 20px #00f6ff1a}.primary-button:hover{border-color:#00f6ffcc;transform:translateY(-4px);box-shadow:0 0 30px #00f6ff99,0 0 60px #a855f74d,inset 0 0 20px #00f6ff33}.primary-button:active{transform:translateY(-1px);box-shadow:0 0 40px #00f6ffcc,0 0 80px #a855f766,inset 0 0 30px #00f6ff33}@keyframes rotate-holo{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.primary-button .holographic-scan{z-index:2;opacity:0;will-change:transform,opacity;background:linear-gradient(90deg,#0000,#00f6ff66,#ff2a8d33,#0000);width:50%;height:100%;transition:opacity .3s;position:absolute;top:0;left:0;transform:translate(-200%)skew(-25deg)}.primary-button:hover .holographic-scan{opacity:1;animation:2s infinite scan-effect}@keyframes scan-effect{0%{transform:translate(-200%)skew(-25deg)}to{transform:translate(400%)skew(-25deg)}}.primary-button .button-text{z-index:2;position:relative}.primary-button .button-glow{z-index:1;opacity:0;background:radial-gradient(circle closest-side,#00f6ff4d,#0000);transition:opacity .3s;position:absolute;inset:-10px}.primary-button:hover .button-glow{opacity:1}.secondary-button{color:var(--text-bright);background:linear-gradient(135deg,#00f6ff1a,#a855f714);border:1px solid #00f6ff4d;flex:1;box-shadow:inset 0 0 10px #00f6ff0d}.secondary-button:hover{background:linear-gradient(135deg,#00f6ff26,#a855f71f);border-color:#00f6ff80;box-shadow:0 0 15px #00f6ff33,inset 0 0 10px #00f6ff1a}@keyframes button-loading-animation{0%{background-position:0%;box-shadow:0 0 15px #00f6ff4d}50%{background-position:100%;box-shadow:0 0 25px #00f6ff99,0 0 40px #ff2a8d4d}to{background-position:0%;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));color:#ffffffe6;cursor:wait;will-change:background-position,box-shadow;background-size:300% 100%;animation:3s ease-in-out infinite button-loading-animation;position:relative;overflow:hidden}.primary-button.loading:after{content:"";will-change:transform;background:linear-gradient(90deg,#0000,#fff3,#0000);width:100%;height:100%;animation:1.5s infinite scanning-light;position:absolute;top:0;left:0}@keyframes scanning-light{0%{transform:translate(-100%)}to{transform:translate(100%)}}.primary-button.loading .button-text:after{content:"...";animation:1.5s infinite ellipsis-animation}@keyframes ellipsis-animation{0%{content:"."}33%{content:".."}66%{content:"..."}to{content:"."}}.primary-button:active{box-shadow:0 0 30px var(--primary-color),0 0 50px var(--accent-color);transform:scale(.95)}.primary-button:active:after{content:"";background:radial-gradient(circle,var(--primary-color)0%,transparent 70%);opacity:.3;animation:.5s forwards pulse-out;position:absolute;inset:0}@keyframes pulse-out{0%{opacity:.5;transform:scale(.8)}to{opacity:0;transform:scale(2)}}.player-controls{z-index:10;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:linear-gradient(135deg,#000514e6,#050a2dd9);border:1px solid #00f6ff66;border-radius:40px;align-items:center;gap:15px;padding:12px 24px;display:flex;position:absolute;bottom:15px;left:50%;transform:translate(-50%);box-shadow:0 0 30px #00f6ff40,0 10px 40px #0006,inset 0 0 15px #00f6ff14}.player-controls:before{content:"";-webkit-mask-composite:xor;z-index:-1;opacity:.5;background:linear-gradient(90deg,#00f6ff80,#0000,#a855f74d,#0000);border-radius:40px;padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.player-button{color:var(--text-bright);cursor:pointer;background:linear-gradient(135deg,#00f6ff14,#a855f70f);border:1px solid #00f6ff4d;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;font-size:14px;transition:all .3s cubic-bezier(.34,1.56,.64,1);display:flex;position:relative;overflow:hidden}.player-button:hover{color:#fff;background:linear-gradient(135deg,#00f6ff26,#a855f71f);border-color:#00f6ff99;transform:scale(1.1);box-shadow:0 0 15px #00f6ff80,0 0 25px #a855f733,inset 0 0 10px #00f6ff1a}#play-pause{background:linear-gradient(135deg,#0062c440,#00f6ff33);border:1px solid #00f6ff80;width:48px;height:48px;box-shadow:0 0 15px #00f6ff4d,inset 0 0 10px #00f6ff1a}#play-pause:hover{box-shadow:0 0 25px #00f6ff80,0 0 40px #a855f733,inset 0 0 15px #00f6ff26}#play-pause.active{background:linear-gradient(135deg,#ff2a8d59,#00f6ff40);box-shadow:0 0 20px #00f6ff80,0 0 40px #a855f74d}.speed-control-compact{border-left:1px solid #00f6ff33;align-items:center;gap:12px;margin-left:5px;padding:0 8px 0 15px;display:flex}.speed-label{color:var(--text-bright);opacity:.8;text-transform:uppercase;letter-spacing:.7px;font-size:11px;font-weight:600}.speed-slider{-webkit-appearance:none;background:linear-gradient(90deg,var(--secondary-color),var(--primary-color));border-radius:2px;outline:none;width:70px;height:4px;box-shadow:0 0 10px #00f6ff33}.speed-slider::-webkit-slider-thumb{-webkit-appearance:none;background:linear-gradient(135deg,var(--text-bright),#fff);cursor:pointer;border:2px solid var(--primary-color);width:16px;height:16px;box-shadow:0 0 10px var(--primary-color);border-radius:50%;transition:all .2s}.speed-slider::-webkit-slider-thumb:hover{box-shadow:0 0 15px var(--primary-color),0 0 25px #a855f74d}#speed-value{color:var(--primary-color);text-align:center;text-shadow:0 0 5px #00f6ff66;min-width:30px;font-family:Roboto Mono,monospace;font-size:12px;font-weight:600}.mini-progress-container{border-left:1px solid #00f6ff33;align-items:center;gap:10px;padding-left:15px;display:flex}.mini-progress-bar{background:linear-gradient(90deg,#00f6ff1a,#a855f70d);border:1px solid #00f6ff33;border-radius:3px;width:80px;height:5px;overflow:hidden;box-shadow:inset 0 0 5px #00000080,0 0 8px #00f6ff26}.mini-progress-fill{background:linear-gradient(90deg,var(--secondary-color),var(--primary-color),var(--accent-purple));width:0%;height:100%;box-shadow:0 0 12px var(--primary-color);border-radius:2px;transition:width .2s ease-out}.progress-text{color:var(--primary-color);text-align:center;text-shadow:0 0 5px #00f6ff66;min-width:35px;font-family:Roboto Mono,monospace;font-size:12px;font-weight:600}.seek-container{background-color:#000c24b3;border-top:1px solid #00f6ff4d;padding:5px 15px;position:relative;box-shadow:0 -5px 15px #0000004d}.seek-container:before{content:"";pointer-events:none;background-image:repeating-linear-gradient(90deg,#00f6ff0d 0 2px,#0000 2px 15px);width:100%;height:100%;position:absolute;top:0;left:0}#seek{-webkit-appearance:none;background:linear-gradient(90deg,#00f6ff33 0%,#00f6ff99 100%);border-radius:3px;outline:none;width:100%;height:5px;margin:10px 0;box-shadow:0 0 8px #00f6ff4d}#seek::-webkit-slider-thumb{-webkit-appearance:none;background:linear-gradient(135deg,var(--text-bright),#fff);cursor:pointer;width:14px;height:14px;box-shadow:0 0 8px var(--primary-color);border:2px solid var(--primary-color);border-radius:50%}#counter{color:var(--primary-color);z-index:10;letter-spacing:1px;background-color:#000c24cc;border:1px solid #00f6ff99;border-radius:15px;padding:5px 15px;font-family:Roboto,monospace;font-size:13px;position:absolute;bottom:70px;left:50%;transform:translate(-50%);box-shadow:0 0 10px #00f6ff33}.scanner-overlay{pointer-events:none;z-index:5;opacity:.7;will-change:transform;contain:strict;background:linear-gradient(#0000 0%,#00f6ff26 50%,#0000 51% 100%) 0 0/100% 50px;width:100%;height:100%;animation:3s linear infinite scanLines;position:absolute;top:0;left:0}@keyframes scanLines{0%{transform:translateY(-100%)}to{transform:translateY(100%)}}.grid-overlay{pointer-events:none;z-index:4;opacity:.3;background-image:linear-gradient(90deg,#00f6ff0d 1px,#0000 1px),linear-gradient(#00f6ff0d 1px,#0000 1px);background-size:50px 50px;width:100%;height:100%;position:absolute;top:0;left:0}@keyframes pulse{0%{stroke-width:8px;filter:drop-shadow(0 0 3px #00ff9d80)}50%{stroke-width:10px;filter:drop-shadow(0 0 8px #00ff9dcc)}to{stroke-width:8px;filter:drop-shadow(0 0 3px #00ff9d80)}}.hidden{display:none}.loader{border:3px solid #00001e80;border-top:3px solid var(--primary-color);border-right:3px solid var(--accent-color);will-change:transform;border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin;position:absolute;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{background:linear-gradient(135deg,var(--secondary-color),var(--primary-color));color:#fff;z-index:100;cursor:pointer;border:2px solid #00f6ff66;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;font-size:20px;transition:all .4s cubic-bezier(.34,1.56,.64,1);display:none;position:fixed;bottom:80px;right:20px;box-shadow:0 0 25px #00f6ff66,0 10px 30px #0000004d}.dashboard-toggle:hover{transform:scale(1.12);box-shadow:0 0 35px #00f6ff99,0 0 60px #a855f74d,0 15px 40px #0006}.dashboard-toggle .open-icon,.dashboard-toggle .close-icon{transition:opacity .3s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@media (max-width:1300px){.main-container{flex-direction:column}.viewer-container{border-radius:0;margin:0}header{background:linear-gradient(90deg,#000824e6,#000c42cc);height:50px;padding:10px 15px;position:relative;overflow:hidden}header:before{content:"";background:linear-gradient(90deg,transparent,var(--primary-color),transparent);will-change:transform;height:2px;animation:2s linear infinite scanLine;position:absolute;top:0;left:0;right:0}header:after{content:"";background:linear-gradient(90deg,transparent,var(--primary-color),var(--accent-color),transparent);opacity:.6;width:100%;height:1px;position:absolute;bottom:0;left:0}@keyframes scanLine{0%{transform:translate(-100%)}to{transform:translate(100%)}}h1{text-align:center;width:100%;font-size:18px}.dashboard{width:100v;z-index:1000;content-visibility:auto;contain-intrinsic-size:900px 1400px;border-left:1px solid #00f6ff4d;max-width:350px;transition:transform .3s ease-in-out;position:fixed;top:50px;bottom:0;right:0;transform:translate(100%);box-shadow:-5px 0 25px #00001ecc}.dashboard.active{transform:translate(0)}.dashboard-toggle{z-index:100;will-change:box-shadow;background:radial-gradient(circle,#00f6ff33 0%,#0062c4e6 70%);border:1px solid #00f6ffcc;border-radius:50%;width:50px;height:50px;animation:3s infinite pulse-light;display:flex;position:fixed;bottom:80px;right:20px;box-shadow:0 0 15px #00f6ff66,inset 0 0 8px #fff9}@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{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#000c24b3;border:1px solid #00f6ff99;border-radius:30px;padding:8px 15px;box-shadow:0 0 20px #00f6ff4d,inset 0 0 8px #00f6ff33}.player-controls:before{content:"";background:linear-gradient(90deg,#0000,#00f6ffcc,#0000);height:1px;position:absolute;top:-1px;left:10%;right:10%}@media (max-width:480px){.speed-control-compact,.mini-progress-container{display:none}.player-controls{border-radius:25px;gap:8px;padding:6px 10px;bottom:10px}#play-pause{width:40px;height:40px;box-shadow:0 0 15px #00f6ff66}.player-button{width:32px;height:32px}.player-button:before{content:"";z-index:1;background:radial-gradient(circle at 30% 30%,#fff3,#0000 70%);border-radius:50%;position:absolute;inset:0}#counter{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#000c24cc;border:1px solid #00f6ff80;border-radius:12px;padding:3px 12px;font-size:11px;bottom:60px;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{border-bottom:1px solid #4da1ff4d;margin-bottom:10px;padding-bottom:5px}.dashboard-section:last-child{border-bottom:none;margin-bottom:0}.dashboard-section h3{color:#4da1ff;text-transform:uppercase;letter-spacing:1px;text-shadow:0 0 5px #4da1ff80;margin-bottom:8px;font-size:1rem;display:inline-block;position:relative}.tutorial-modal{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:9999;opacity:0;visibility:hidden;background:linear-gradient(135deg,#00030ce6,#05081ed9);justify-content:center;align-items:center;width:100%;height:100%;transition:all .4s cubic-bezier(.34,1.56,.64,1);display:flex;position:fixed;top:0;left:0}.tutorial-modal:not(.hidden){opacity:1;visibility:visible}.tutorial-content{will-change:transform,opacity;background:linear-gradient(135deg,#000514f2,#050a2de6);border:1px solid #00f6ff4d;border-radius:16px;width:90%;max-width:1000px;max-height:90vh;animation:.5s ease-out slideUp;position:relative;overflow:hidden;box-shadow:0 0 80px #00f6ff4d,0 0 120px #a855f733,inset 0 0 40px #00f6ff14}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.tutorial-content:before{content:"";pointer-events:none;z-index:0;background-image:linear-gradient(#0000 3%,#00f6ff0d 4%,#0000 5%),linear-gradient(90deg,#0000 95%,#00f6ff0d 96%,#0000 97%);background-size:40px 40px;position:absolute;inset:0}.tutorial-header{z-index:1;background:linear-gradient(90deg,#00051499,#050a2d66);border-bottom:1px solid #00f6ff40;justify-content:space-between;align-items:center;padding:30px 40px;display:flex;position:relative}.tutorial-header:after{content:"";background:linear-gradient(90deg,#0000,#00f6ff4d,#0000);height:1px;position:absolute;bottom:0;left:0;right:0}.tutorial-header h2{color:var(--text-bright);text-shadow:0 0 12px #00f6ff99;margin:0;font-size:26px;font-weight:700}.close-button{color:var(--text-bright);cursor:pointer;background:linear-gradient(135deg,#ff2a8d26,#ff2a8d1a);border:1px solid #ff2a8d66;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:20px;transition:all .3s cubic-bezier(.34,1.56,.64,1);display:flex;position:relative;overflow:hidden}.close-button:hover{background:linear-gradient(135deg,#ff2a8d4d,#ff2a8d33);border-color:#ff2a8db3;transform:scale(1.1);box-shadow:0 0 20px #ff2a8d80,inset 0 0 10px #ff2a8d1a}.tutorial-body{z-index:1;flex-direction:column;height:calc(90vh - 140px);padding:0;display:flex;position:relative;overflow:hidden}.tutorial-nav{background:linear-gradient(90deg,#00051499,#050a2d66);border-bottom:1px solid #00f6ff40;display:flex}.tutorial-nav-btn{color:#fff9;cursor:pointer;text-transform:uppercase;letter-spacing:1px;background:0 0;border:none;border-right:1px solid #00f6ff26;flex:1;padding:16px 20px;font-size:13px;font-weight:600;transition:all .3s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}.tutorial-nav-btn:after{content:"";background:linear-gradient(90deg,var(--primary-color),var(--accent-purple));transform-origin:100%;height:2px;transition:transform .4s cubic-bezier(.34,1.56,.64,1);position:absolute;bottom:0;left:0;right:0;transform:scaleX(0)}.tutorial-nav-btn:last-child{border-right:none}.tutorial-nav-btn:hover{color:var(--text-bright);background:#00f6ff14}.tutorial-nav-btn.active{color:var(--primary-color);background:#00f6ff1f}.tutorial-nav-btn.active:after{transform-origin:0;transform:scaleX(1)}.tutorial-nav-btn.active{color:var(--primary-color);box-shadow:inset 0 -3px 0 var(--primary-color);background:#00f6ff26}.tutorial-sections{flex:1;padding:30px;overflow-y:auto}.tutorial-section{display:none}.tutorial-section.active{will-change:transform,opacity;animation:.3s fadeIn;display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.tutorial-section h3{color:var(--primary-color);text-shadow:0 0 8px #00f6ff80;margin-bottom:20px;font-size:22px}.tutorial-section p{color:var(--text-bright);margin-bottom:20px;font-size:16px;line-height:1.8}.feature-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin:30px 0;display:grid}.feature-card{text-align:center;background:#00f6ff0d;border:1px solid #00f6ff4d;border-radius:8px;padding:20px;transition:all .3s}.feature-card:hover{background:#00f6ff1a;box-shadow:0 0 20px #00f6ff33}.feature-icon{margin-bottom:15px;font-size:32px;display:block}.feature-card h4{color:var(--primary-color);margin-bottom:10px;font-size:18px}.feature-card p{opacity:.9;margin:0;font-size:14px}.algorithm-steps{margin:30px 0}.step{border-left:3px solid var(--primary-color);background:#00f6ff08;border-radius:0 8px 8px 0;flex-direction:column;gap:15px;margin-bottom:25px;padding:20px;display:flex}.step-number{background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-self:flex-start;align-items:center;width:40px;height:40px;font-size:18px;font-weight:700;display:flex;box-shadow:0 0 15px #00f6ff66}.step-illustration{background:linear-gradient(135deg,#00f6ff14,#a855f70d);border:1px solid #00f6ff33;border-radius:8px;justify-content:center;align-items:center;margin:10px 0;padding:15px;display:flex;overflow-x:auto}.step-illustration svg{max-width:100%;height:auto}.challenge-details{margin:30px 0}.challenge-item{background:#ff2a8d0d;border:1px solid #ff2a8d4d;border-radius:8px;margin-bottom:30px;padding:20px}.challenge-item h4{color:var(--accent-color);margin-bottom:15px;font-size:18px}.challenge-item ul{margin-left:20px}.challenge-item li{color:#ffffffe6;margin-bottom:8px}.visualization-guide{margin:30px 0}.guide-item{background:#00f6ff0d;border:1px solid #00f6ff33;border-radius:8px;margin-bottom:25px;padding:20px}.guide-item h4{color:var(--primary-color);margin-bottom:15px;font-size:18px}.guide-item ul{margin-left:20px}.guide-item li{color:#ffffffe6;margin-bottom:8px}.tutorial-footer{text-align:center;background:#0008244d;border-top:1px solid #00f6ff4d;padding:20px 30px}@media (max-width:768px){.tutorial-content{width:95%;max-height:95vh}.tutorial-header{padding:15px 20px}.tutorial-header h2{font-size:20px}.tutorial-nav{flex-wrap:wrap}.tutorial-nav-btn{flex:50%;padding:12px 15px;font-size:12px}.tutorial-sections{padding:20px}.feature-grid{grid-template-columns:1fr;gap:15px}.step{text-align:center;flex-direction:column}.step-number{margin:0 auto 15px}.tutorial-footer{padding:15px 20px}}.svg-explanation-overlay{z-index:10;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#000824e6;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.explanation-content{text-align:center;background:#000c24cc;border:2px solid #00f6ff4d;border-radius:12px;max-width:500px;padding:30px;box-shadow:0 0 30px #00f6ff33}.explanation-content h3{color:var(--primary-color);text-shadow:0 0 10px #00f6ff80;margin-bottom:15px;font-size:24px}.explanation-content>p{color:var(--text-bright);margin-bottom:25px;font-size:16px}.explanation-features{margin:25px 0}.explanation-item{text-align:left;border-left:3px solid var(--primary-color);background:#00f6ff0d;border-radius:8px;align-items:center;margin-bottom:15px;padding:10px;display:flex}.explanation-icon{text-align:center;width:40px;margin-right:15px;font-size:24px}.explanation-item strong{color:var(--primary-color);margin-bottom:5px;font-size:16px;display:block}.explanation-item small{color:#fffc;font-size:14px}.start-prompt{background:#ff2a8d1a;border:1px solid #ff2a8d4d;border-radius:8px;margin-top:25px;padding:15px}.start-prompt p{color:var(--text-bright);margin:0;font-size:14px}.start-prompt strong{color:var(--accent-color)}@media (max-width:768px){.explanation-content{max-width:90%;padding:20px}.explanation-content h3{font-size:20px}.explanation-item{text-align:center;flex-direction:column}.explanation-icon{margin-bottom:10px;margin-right:0}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0008244d;border-radius:10px}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--primary-color),var(--accent-purple));border-radius:10px;box-shadow:0 0 10px #00f6ff4d}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--accent-cyan),var(--primary-color));box-shadow:0 0 15px #00f6ff80}*{scrollbar-width:thin;scrollbar-color:#00f6ff80 #0008244d}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}@keyframes glow-pulse{0%,to{box-shadow:0 0 20px #00f6ff4d}50%{box-shadow:0 0 40px #00f6ff99,0 0 60px #a855f74d}}.info-button{color:#fff;cursor:help;background:linear-gradient(135deg,#06cc,#0096ffe6);border:1px solid #00f6ff66;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;margin-left:8px;font-style:italic;font-weight:700;transition:all .3s cubic-bezier(.34,1.56,.64,1);display:inline-flex;position:relative;box-shadow:0 0 10px #06c9}.info-button:hover{background:linear-gradient(135deg,#0096ff,#64c8ff);border-color:#00f6ffb3;transform:scale(1.15);box-shadow:0 0 20px #0096ffcc,0 0 40px #00f6ff66,inset 0 0 10px #fff3}.info-tooltip{color:#e6fbff;z-index:100;pointer-events:none;opacity:0;background:linear-gradient(135deg,#0a1428f2,#050f32e6);border:1px solid #0088ff80;border-radius:8px;max-width:250px;padding:12px 16px;font-size:.9rem;transition:all .3s cubic-bezier(.34,1.56,.64,1);position:absolute;transform:translateY(-8px);box-shadow:0 0 20px #08f9,0 0 40px #a855f733,inset 0 0 10px #00f6ff1a}.info-tooltip.visible{opacity:1;transform:translateY(-10px)}