canvas{display:block}#ooghandvoet-game-container{width:100%;height:60vh;min-height:500px;max-height:800px;position:relative;overflow:hidden;background-color:#fff;border-radius:8px;display:none;margin:0 auto}.game-ui-topbar,.ui-left{display:flex;align-items:center}.game-ui-topbar{position:absolute;top:0;left:0;right:0;height:70px;justify-content:space-between;padding:0 24px;z-index:1000}.ui-left{gap:16px;flex:1}.ui-center{justify-content:center;flex:1}.ui-center,.ui-logo,.ui-right{display:flex;align-items:center}.ui-right{justify-content:flex-end;gap:16px;flex:1}.ui-logo{gap:8px;font-weight:600;color:#1e293b}.logo-icon{font-size:24px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.logo-text{font-size:18px;letter-spacing:-.025em}.game-status{background:linear-gradient(135deg,#f1f5f9 0,#e2e8f0 100%);color:#334155;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:500;border:1px solid rgba(226,232,240,.8);box-shadow:0 2px 4px rgba(0,0,0,.04)}.timer,.timer-group{display:flex;align-items:center}.timer-group{gap:12px}.timer{flex-direction:column;background:linear-gradient(135deg,#fefefe 0,#f8fafc 100%);border:1px solid rgba(226,232,240,.8);border-radius:12px;padding:8px 12px;min-width:80px;box-shadow:0 2px 8px rgba(0,0,0,.06);transition:all .2s ease}.timer:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.1)}.timer-label{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:#64748b;font-weight:600;margin-bottom:2px}.timer-value{font-size:16px;font-weight:700;font-family:"Segoe UI",monospace;color:#1e293b;line-height:1}.playtime-timer .timer-value{color:#2563eb}.game-timer .timer-value{color:#dc2626}.finish-btn{display:flex;align-items:center;gap:6px;background:linear-gradient(135deg,#ef4444 0,#dc2626 100%);color:#fff;border:0;border-radius:10px;padding:10px 16px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px rgba(239,68,68,.25)}.finish-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(239,68,68,.35);background:linear-gradient(135deg,#dc2626 0,#b91c1c 100%)}.finish-btn:active{transform:translateY(0)}.finish-btn,.finish-icon{font-size:14px}.finish-text{font-size:13px}.reset-quiz-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:linear-gradient(135deg,#f8fafc 0,#e2e8f0 100%);border:1px solid rgba(226,232,240,.8);border-radius:8px;cursor:pointer;transition:all .2s ease;color:#64748b;box-shadow:0 2px 4px rgba(0,0,0,.04)}.reset-quiz-btn:hover{transform:translateY(-1px);background:linear-gradient(135deg,#fee2e2 0,#fecaca 100%);border-color:rgba(239,68,68,.3);color:#dc2626;box-shadow:0 4px 8px rgba(239,68,68,.15)}.modal-overlay.active .modal-content,.reset-quiz-btn:active{transform:translateY(0)}.reset-quiz-btn svg{width:16px;height:16px;transition:transform .2s ease}.reset-quiz-btn:hover svg{transform:rotate(-180deg)}.finish-btn,.timer{display:none}.finish-btn.active,.timer.active{display:flex}@media (max-width:768px){.game-ui-topbar{height:60px;padding:0 16px}.logo-text{display:none}.timer-group{gap:8px}.timer{min-width:65px;padding:6px 8px}.timer-label{font-size:8px}.timer-value{font-size:14px}.finish-btn{padding:8px 12px}.finish-text{display:none}.reset-quiz-btn{width:32px;height:32px}.reset-quiz-btn svg{width:14px;height:14px}}@media (max-width:480px){.game-ui-topbar{height:50px;padding:0 12px}.ui-center{display:none}.timer{min-width:60px;padding:4px 6px}.timer-value{font-size:12px}}.score-display{background:linear-gradient(135deg,rgba(255,255,255,.95)0,rgba(248,250,252,.98) 100%);border:1px solid rgba(226,232,240,.8);border-radius:12px;padding:16px 20px;box-shadow:0 4px 12px rgba(0,0,0,.08);min-width:700px;margin-top:60px;display:none}.score-display.active{display:block}.score-content{line-height:1.6}.score-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:12px}.score-row:last-child{margin-bottom:0}.score-main{font-size:16px;font-weight:700;color:#1e293b;flex:0 0 140px;text-align:left}.score-main #score-value{color:#059669;font-size:18px}.penalty-item{flex:1;text-align:center;font-size:13px;font-weight:600;padding:6px 8px;background:rgba(255,255,255,.6);border-radius:6px;border:1px solid rgba(226,232,240,.6);transition:all .2s ease}.penalty-item:hover{background:rgba(255,255,255,.9);transform:translateY(-1px)}.penalty-item span{font-weight:700;font-size:14px}.penalty-item:not(.penalty-critical){color:#f59e0b}.penalty-item.penalty-critical{color:#dc2626}.score-spacer{flex:0 0 140px}@media (max-width:768px){.score-display{min-width:auto;max-width:100%;padding:12px 16px}.score-row{gap:8px}.score-main{font-size:14px;flex:0 0 110px}.score-main #score-value{font-size:16px}.penalty-item{font-size:11px;padding:4px 6px}.penalty-item span{font-size:12px}.score-spacer{flex:0 0 110px}}@media (max-width:480px){.score-display{padding:10px 12px;min-width:auto}.score-row{gap:4px;margin-bottom:6px}.score-main{font-size:13px;flex:0 0 80px}.score-main #score-value{font-size:14px}.penalty-item{font-size:10px;padding:4px 6px}.penalty-item span{font-size:11px}.score-spacer{flex:0 0 80px}}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);display:none;justify-content:center;align-items:center;z-index:1001;opacity:0;transition:opacity .2s ease}.modal-overlay.active{display:flex;opacity:1}.modal-content{background:#fff;border-radius:12px;width:90%;max-width:400px;transform:translateY(20px);transition:transform .3s ease;box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04)}.modal-close,.modal-header{display:flex;align-items:center}.modal-header{justify-content:space-between;padding:20px 24px;border-bottom:1px solid #e5e7eb}.modal-header h3{margin:0;font-size:1.25rem;color:#1f2937}.modal-close{background:0 0;border:0;padding:4px;cursor:pointer;color:#6b7280;border-radius:6px;transition:all .2s ease;margin-left:10px;font-size:18px}.modal-close:hover{background-color:#f3f4f6;color:#374151}.modal-body{padding:24px;color:#4b5563;line-height:1.5}.modal-footer{padding:16px 24px;display:flex;justify-content:flex-end;gap:12px;border-top:1px solid #e5e7eb}.modal-btn{padding:8px 16px;border-radius:6px;font-weight:500;cursor:pointer;transition:all .2s ease}.modal-btn.secondary{background:#fff;border:1px solid #e5e7eb;color:#6b7280}.modal-btn.secondary:hover{background:#f9fafb;border-color:#d1d5db;color:#374151}.modal-btn.primary{background:#dc2626;border:1px solid transparent;color:#fff}.modal-btn.primary:hover{background:#b91c1c}#error-message,#loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;text-align:center}#error-message{font-size:20px;max-width:80%;background-color:rgba(0,0,0,.7);padding:20px;border-radius:8px;z-index:1000}#loading{font-size:24px;z-index:100}#start-screen{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#f5f5f5;color:#333;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow-y:auto;padding:2rem 0}.start-content{width:80%;max-width:800px}.start-header{text-align:center;margin-bottom:30px}.start-header h1{color:#4caf50;margin-bottom:10px}.start-header p{opacity:.8;font-size:18px}.settings-section{background-color:#fff;border-radius:5px;padding:20px;border:1px solid #e0e0e0}.device-container,.device-list,.settings-section{margin-bottom:20px}.device-list{background-color:#f9f9f9;border-radius:5px;padding:15px;min-height:50px;border:1px solid #e0e0e0}.no-devices{font-style:italic;opacity:.7}.devices-list{margin-bottom:15px}.device-item{padding:8px 12px;margin:5px 0;background-color:#fff;border-radius:4px;border:1px solid #e0e0e0}.device-item.active{background-color:#f0f7ff;border-left:3px solid #4caf50}.device-name{font-weight:700;margin-bottom:5px;color:#2196f3}.device-info{font-size:14px;opacity:.8}.input-display{background-color:#fff;border-radius:5px;padding:20px;margin-bottom:20px;border:1px solid #e0e0e0}.input-row{display:flex;align-items:center;margin-bottom:15px}.input-label{flex:0 0 100px}.input-value{flex:0 0 60px;font-family:monospace;text-align:right}.input-bar-container{flex:1;margin:0 10px;height:20px;background-color:#e0e0e0;border-radius:10px;overflow:hidden;position:relative;border:1px solid #ccc}.input-bar{height:100%;width:50%;background-color:#4caf50;transition:width .1s ease}.input-bar.negative{background-color:#f44336}.center-marker{position:absolute;left:50%;top:0;bottom:0;width:2px;background-color:rgba(255,255,255,.5)}.controls{text-align:center;margin-top:20px;margin-bottom:50px}.settings-controls{display:flex;justify-content:space-between;margin-top:20px}.setting-label,label{display:block}label{margin-bottom:5px}.setting-control{width:100%}.setting-info{opacity:.7}.settings-tabs{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:15px;border-bottom:1px solid #333;padding-bottom:10px}.tab-btn{background-color:#333;color:#fff;border:0;padding:6px 12px;border-radius:4px;cursor:pointer}.tab-btn:hover{opacity:.8}.tab-btn.active{background-color:#027bff}.preset-section{background-color:#222;border-radius:8px;padding:20px;margin-bottom:30px;border:1px solid #333}.preset-tabs{display:flex;flex-direction:column;gap:10px}.preset-tab-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.preset-tab-btn{background-color:#333;color:#fff;border:0;padding:10px 16px;border-radius:6px;cursor:pointer;font-size:14px;transition:background-color .2s;min-width:120px}.preset-tab-btn:hover{background-color:#444}.preset-tab-btn.active{background-color:#2196f3;box-shadow:0 2px 4px rgba(33,150,243,.3)}.setting-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.keyboard-help{background-color:#f9f9f9;border-radius:5px;padding:15px;margin-top:20px;border:1px solid #e0e0e0}.key{background-color:#e0e0e0;color:#333;border-radius:4px;padding:2px 8px;margin:0 2px;font-family:monospace;box-shadow:0 2px 3px rgba(0,0,0,.1);border:1px solid #ccc}.review-content{padding:20px}.review-content h1{color:#333;margin-bottom:30px;text-align:center;border-bottom:2px solid #2196f3;padding-bottom:15px}.review-section{margin-bottom:40px}.review-section h2{color:#555;margin-bottom:20px;border-left:4px solid #2196f3;padding-left:12px}.summary-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:20px}#performance-metrics,.stat-item{background:#f8f9fa;border-radius:8px}.stat-item{padding:20px;border-left:4px solid #1565c0}.stat-label{display:block;color:#777;font-size:14px;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}.stat-value{display:block;color:#333;font-size:28px;font-weight:700}#performance-metrics{padding:30px;min-height:200px}.review-controls{text-align:center;margin-top:40px}#return-to-start-btn{background:#007bff;color:#fff;border:0;padding:15px 40px;font-size:18px;border-radius:10px;cursor:pointer;transition:transform .3s,box-shadow .3s;margin-top:30px}#return-to-start-btn:hover{transform:translateY(-2px)}#finish-session-btn:hover{background-color:#2196f3}.metrics-breakdown{display:grid;grid-template-columns:1fr 1fr;gap:30px}@media (max-width:768px){.metrics-breakdown{grid-template-columns:1fr}}.metrics-section{background:#fff;border-radius:8px;padding:20px}.metrics-section h3{margin-top:0;font-size:20px;font-weight:700;border-bottom:2px solid #eee;padding-bottom:10px}.metric-item{display:flex;flex-direction:column;margin-bottom:15px;padding:10px 0;border-bottom:1px solid #f0f0f0}.metric-item:last-child{border-bottom:none}.metric-label,.metric-value{font-weight:700;color:#333;margin-bottom:5px}.metric-value{font-size:24px;color:#4caf50}.metric-value.penalty{color:#f44336}.metric-description{font-size:12px;color:#666;font-style:italic}.settings-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(245,245,245,.9);z-index:1000;display:flex;justify-content:center;align-items:center;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}.settings-content{background-color:#fff;color:#333;padding:20px;border-radius:5px;max-width:800px;width:80%;max-height:80vh;overflow-y:auto}.settings-layout{display:flex;gap:20px}.settings-sidebar{flex:0 0 200px}.settings-main{flex:1}#performance-canvas,.device-settings{background-color:#fff;border-radius:4px}.device-settings{padding:15px;border:1px solid #e0e0e0}.axis-settings{margin-bottom:20px}.input-range{width:100%}.input-checkbox{margin-right:5px}.live-value{margin-top:5px;font-family:monospace;font-size:14px}.live-bar{height:10px;background-color:#4caf50;width:50%;transition:width .1s,background-color .1s;margin-top:5px}.settings-footer{margin-top:20px;display:flex;justify-content:flex-end;gap:10px}.reset-btn{background-color:#f44336}.reset-btn:hover{background-color:#e53935}.close-btn{background-color:#2196f3}.close-btn:hover{background-color:#1e88e5}.hid-info{font-size:12px;opacity:.7;margin-top:10px}.graph-container{position:relative;width:100%;display:flex;justify-content:center;margin-bottom:20px;border:1px solid #e0e0e0;border-radius:4px;padding:10px;background-color:#fafafa}#performance-canvas{display:block;max-width:100%;height:auto;cursor:crosshair}@media (max-width:768px){#performance-canvas{width:100%;height:300px}.graph-info{padding:0 10px}.hover-values-section{gap:20px}.hover-value-column{min-width:80px}}.graph-tooltip{position:absolute;background-color:rgba(0,0,0,.9);color:#fff;padding:8px 12px;border-radius:4px;font-size:12px;line-height:1.4;pointer-events:none;opacity:0;transition:opacity .2s;z-index:1000;white-space:nowrap}.graph-tooltip.visible{opacity:1}.graph-info{margin-top:15px}.graph-controls{margin-bottom:15px}.line-toggles{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}.toggle-item{display:flex;align-items:center;gap:8px;cursor:pointer;padding:5px 10px;border-radius:4px;transition:background-color .2s}.toggle-item:hover{background-color:rgba(0,0,0,.05)}.toggle-item input[type=checkbox]{margin:0}.toggle-color{width:16px;height:3px;border-radius:2px}.toggle-label{font-size:14px;font-weight:500;color:#333;user-select:none}.hover-info{margin-top:20px;padding:12px 0;text-align:center}.hover-time-section{font-size:16px;font-weight:700;margin-bottom:15px;color:#333}.hover-time-section span{font-family:monospace;display:inline-block;min-width:80px;text-align:center}.hover-values-section{display:flex;justify-content:center;gap:40px;margin-bottom:15px}.hover-value-column{display:flex;flex-direction:column;align-items:center;min-width:100px}.hover-label{font-size:11px;text-transform:uppercase;color:#888;font-weight:600;letter-spacing:.5px;margin-bottom:4px}.hover-value{font-size:14px;font-family:monospace;font-weight:700;display:inline-block;width:80px;text-align:center;height:20px;line-height:20px}.hover-value-column:nth-child(1) .hover-value{color:#dc143c}.hover-value-column:nth-child(2) .hover-value{color:#2196f3}.hover-value-column:nth-child(3) .hover-value{color:#4caf50}.hover-dist-value{font-size:12px;font-family:monospace;color:#666;display:inline-block;width:80px;text-align:center;height:18px;line-height:18px;margin-top:2px}.hover-dist-value::before{content:"D: ";font-size:10px;color:#999}.hover-events-section{font-size:13px;color:#666}.hover-events-label{font-weight:600;margin-right:8px}.histogram-section{margin-top:40px;padding:20px;background-color:#f9f9f9;border-radius:5px;border:1px solid #e0e0e0}.histogram-section h3{color:#555;font-size:20px;margin-bottom:20px}.histogram-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:20px}.histogram-item{background-color:#fff;padding:15px;border-radius:5px;border:1px solid #e0e0e0}.histogram-item h4{margin:0 0 15px;color:#333;font-size:16px;text-align:center}.histogram-item canvas{display:block;width:100%;height:auto;border-radius:3px;background-color:#fff}.histogram-label{text-align:center;font-size:12px;color:#666;margin-top:5px;font-weight:500}@media (max-width:768px){.histogram-container{grid-template-columns:1fr}.histogram-item canvas{width:100%;height:150px}}.mode-selection,.mode-types{margin-bottom:30px}.mode-types{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.mode-category{display:flex;flex-direction:column;gap:10px;position:relative}.mode-category:first-child::after{content:"";position:absolute;right:-10px;top:0;bottom:0;width:1px;background:#dee2e6}.mode-category h4{margin:0 0 10px;padding:8px 12px;background:#f8f9fa;border-radius:8px;font-size:14px;text-transform:uppercase;letter-spacing:1px;color:#6c757d;font-weight:600;text-align:center}.mode-category .mode-type{flex:1;min-height:80px;display:flex;flex-direction:column;justify-content:center}.mode-type{background:#fff;border:2px solid #dee2e6;border-radius:12px;padding:20px;cursor:pointer;transition:all .3s ease;text-align:center;position:relative;overflow:hidden}.mode-type:hover{transform:translateY(-2px);border-color:#2196f3}.mode-type.selected{background:linear-gradient(135deg,#e3f2fd 0,#bbdefb 100%);border-color:#2196f3}.difficulty-option.selected::before,.mode-type.selected::before,.time-option.selected::before{content:"✓";position:absolute;top:8px;right:10px;font-size:16px;color:#2196f3;font-weight:700}.mode-name{display:block;font-size:18px;font-weight:600;color:#333;margin-bottom:8px}.mode-desc{display:block;font-size:14px;color:#666;line-height:1.4}.difficulty-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px}.difficulty-option{background:#fff;border:2px solid #dee2e6;border-radius:8px;padding:15px;cursor:pointer;transition:all .3s ease;text-align:center;position:relative}.difficulty-option:hover{transform:translateY(-2px);border-color:#2196f3}.difficulty-option.selected{background:linear-gradient(135deg,#e3f2fd 0,#bbdefb 100%);border-color:#2196f3}.difficulty-name{display:block;font-size:16px;font-weight:600;color:#333;margin-bottom:5px}.difficulty-desc{display:block;font-size:12px;color:#666}.time-selection{margin-bottom:30px}.difficulty-selection h3,.time-selection h3{margin-bottom:20px;color:#333;font-size:20px;text-align:center}.time-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px}.time-option{background:#fff;border:2px solid #dee2e6;border-radius:8px;padding:15px;cursor:pointer;transition:all .3s ease;text-align:center;position:relative}.time-option:hover{transform:translateY(-2px);border-color:#2196f3}.time-option.selected{background:linear-gradient(135deg,#e3f2fd 0,#bbdefb 100%);border-color:#2196f3}.option-time{display:block;font-size:18px;font-weight:600;color:#333;margin-bottom:5px}.option-label{display:block;font-size:12px;color:#666}.game-start-section{text-align:center;padding:10px 20px}.start-game-btn{background:#28a745;color:#fff;border:0;border-radius:10px;padding:10px 60px;font-size:18px;font-weight:600;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:10px;margin-bottom:20px}.start-game-btn:hover:not(:disabled){transform:translateY(-2px);opacity:.8}.start-game-btn:disabled{background:#6c757d;cursor:not-allowed;box-shadow:none;transform:none}.start-icon{font-size:20px}.start-text{font-size:18px}.selected-settings{max-width:400px;margin:0 auto}.settings-summary{background:#fff;border-radius:8px;padding:20px;border:2px solid #28a745}.setting-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #e9ecef}.setting-item:last-child{border-bottom:none}.setting-value{font-weight:500;color:#28a745}@media (max-width:768px){.mode-types{grid-template-columns:1fr}.mode-category{width:100%}.mode-category:first-child::after{display:none}.difficulty-options,.time-options{grid-template-columns:1fr}.start-game-btn{padding:12px 30px;font-size:16px}.difficulty-selection,.mode-type{padding:15px}}@media (max-width:480px){.mode-name{font-size:16px}.mode-desc{font-size:13px}.difficulty-name{font-size:14px}.option-time{font-size:16px}.start-game-btn{padding:10px 25px;font-size:15px}}.setting-group{margin-bottom:25px;padding:20px;background:linear-gradient(135deg,#f8fafc 0,#f1f5f9 100%);border-radius:12px;border:1px solid #e2e8f0;transition:all .3s ease}.setting-group:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,.1);border-color:#cbd5e1}.setting-checkbox-group{display:flex;flex-direction:column;gap:12px}.checkbox-label{display:flex;align-items:center;cursor:pointer;padding:10px 12px;background:#fff;border-radius:8px;border:1px solid #e2e8f0;transition:all .2s ease}.checkbox-label:hover{background:#f8fafc;border-color:#cbd5e1}.checkbox-label input[type=checkbox]{margin-right:12px;cursor:pointer;width:18px;height:18px}.checkbox-label span{flex:1;color:#334155;font-size:14px;font-weight:500}.setting-label{display:flex;justify-content:space-between;align-items:center;font-weight:600;color:#334155;margin-bottom:12px;font-size:14px}.setting-label span{background:#027bff;color:#fff;padding:4px 12px;border-radius:20px;font-weight:700;font-size:12px;min-width:45px;text-align:center;box-shadow:0 2px 8px rgba(59,130,246,.3)}.setting-control[type=range]{width:100%;height:8px;border-radius:4px;background:#e2e8f0;outline:0;-webkit-appearance:none;appearance:none;cursor:pointer;transition:all .3s ease}.setting-control[type=range]:hover{background:#cbd5e1}.setting-control[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#1d4ed8);cursor:pointer;border:3px solid #fff;box-shadow:0 4px 12px rgba(59,130,246,.4);transition:all .3s ease}.setting-control[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 6px 16px rgba(59,130,246,.6)}.setting-control[type=range]::-webkit-slider-thumb:active{transform:scale(1.1)}.setting-control[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#1d4ed8);cursor:pointer;border:3px solid #fff;box-shadow:0 4px 12px rgba(59,130,246,.4);transition:all .3s ease}.setting-control[type=range]::-moz-range-thumb:hover{transform:scale(1.2);box-shadow:0 6px 16px rgba(59,130,246,.6)}.setting-control[type=range]::-moz-range-thumb:active{transform:scale(1.1)}.setting-control[type=range]::-moz-range-track{width:100%;height:8px;cursor:pointer;background:#e2e8f0;border-radius:4px;border:0}.setting-info{margin-top:8px;font-size:12px;color:#64748b;font-style:italic}.setting-control[type=range]:focus{box-shadow:0 0 0 3px rgba(59,130,246,.1)}@media (max-width:768px){.setting-group{margin-bottom:20px;padding:15px}.setting-label{font-size:13px;margin-bottom:10px}.setting-label span{padding:3px 10px;font-size:11px;min-width:40px}.setting-control[type=range]::-webkit-slider-thumb{width:18px;height:18px}.setting-control[type=range]::-moz-range-thumb{width:18px;height:18px}}@media (max-width:480px){.setting-group{margin-bottom:15px;padding:12px}.setting-label{font-size:12px;margin-bottom:8px}.setting-control[type=range]::-webkit-slider-thumb{width:16px;height:16px}.setting-control[type=range]::-moz-range-thumb{width:16px;height:16px}}.refresh-devices-btn{background:#027bff;color:#fff;border:0;border-radius:8px;padding:10px 20px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:8px}.refresh-devices-btn:hover{transform:translateY(-2px);opacity:.8}.refresh-devices-btn:active{transform:translateY(0);box-shadow:0 2px 6px rgba(16,185,129,.3)}.refresh-devices-btn:focus{outline:0;box-shadow:0 0 0 3px rgba(16,185,129,.2),0 2px 8px rgba(16,185,129,.25)}.refresh-devices-btn::before{content:"🔄";font-size:14px;margin-right:4px}@media (max-width:768px){.refresh-devices-btn{padding:8px 16px;font-size:13px}}@media (max-width:480px){.refresh-devices-btn{width:100%;justify-content:center;padding:10px}}#replay-timeline{transition:all .1s ease-out!important;cursor:pointer}#replay-timeline::-webkit-slider-thumb{transition:all .1s ease-out!important}#replay-timeline::-moz-range-thumb{transition:all .1s ease-out!important}.replay-controls{will-change:transform;transform:translateZ(0)}#replay-timeline:hover{opacity:.9;transform:scaleY(1.1);transition:all .15s ease-out}