body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;overflow:hidden}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#root{height:100vh;width:100vw}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#1a1a1a;font-family:Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}:root{--leva-colors-accent1:#4080ff;--leva-colors-accent2:#4080ff;--leva-colors-accent3:#4080ff;--leva-colors-elevation1:#222;--leva-colors-elevation2:#333;--leva-colors-elevation3:#444;--leva-fonts-mono:"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;--leva-sizes-rootWidth:280px}.leva__titlebar{cursor:default!important}[data-folder-name="Scene Settings"]{border-radius:8px;box-shadow:0 0 15px #4080ff4d}[data-folder-name="Scene Settings"] [data-testid=leva-control-button] button{background:#4080ff;border-radius:4px;transition:all .2s ease}[data-folder-name="Scene Settings"] [data-testid=leva-control-button] button:hover{background:#5090ff;transform:scale(1.05)}[data-folder-name=recordings] [data-testid=leva-control-button] button{background:#e53935;border-radius:4px;color:#fff;font-weight:500;letter-spacing:.5px;margin:4px 0;padding:8px 12px;transition:all .2s ease}[data-folder-name=recordings] [data-testid=leva-control-button] button:hover{background:#f44336;transform:scale(1.05)}[data-folder-name=playback] [data-testid=leva-control-button] button{align-items:center;background:#4caf50;border-radius:4px;color:#fff;display:flex;font-weight:500;justify-content:center;letter-spacing:.5px;margin:4px 0;padding:8px 12px;transition:all .2s ease}[data-folder-name=playback] [data-testid=leva-control-button] button:first-of-type:before{content:"▶";display:inline-block;font-size:12px;margin-right:8px}body.is-playing [data-folder-name=playback] [data-testid=leva-control-button] button:first-of-type:before{content:"⏸"}[data-folder-name=playback] [data-testid=leva-control-button] button:hover{background:#66bb6a;transform:scale(1.05)}[data-folder-name=playback] [data-testid=leva-control-button] button:nth-of-type(2){background:#ff9800}[data-folder-name=playback] [data-testid=leva-control-button] button:nth-of-type(2):before{content:"⟲";display:inline-block;font-size:12px;margin-right:8px}[data-folder-name=playback] [data-testid=leva-control-button] button:nth-of-type(2):hover{background:#ffa726}[data-folder-name=playback],[data-folder-name=recordings],[data-folder-name=visualization]{margin-bottom:12px}.App{min-height:100vh;text-align:center}.App-header{padding:20px}.App-header h1{font-size:2.2rem}.app-description{font-size:1rem;margin:10px 0 0;opacity:.8}main{align-items:center;display:flex;flex:1 1;flex-direction:column;padding:20px}.connection-selection{margin:0 auto;max-width:1000px;padding:20px;text-align:center}.connection-buttons{grid-gap:15px;display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:30px 0}.connection-buttons button{background-color:#4a90e2;border:none;border-radius:8px;box-shadow:0 4px 6px #0000001a;color:#fff;cursor:pointer;font-size:16px;padding:15px;transition:background-color .3s,transform .2s}.connection-buttons button:hover{background-color:#357abf;box-shadow:0 6px 8px #00000026;transform:translateY(-2px)}.connection-info{margin-top:30px}.info-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin-top:20px}.info-card{background-color:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;padding:20px;text-align:left}.info-card h4{color:#4a90e2;font-size:1.2rem;margin-top:0}.app-container{background:#1a1a1a;border-radius:0;box-shadow:none;display:flex;height:calc(100vh - 160px);margin:0 auto;overflow:hidden;position:relative;width:100%}.app-container.fullscreen{border-radius:0;height:100vh;left:0;margin:0;position:fixed;top:0;width:100vw;z-index:1000}.control-panel{box-shadow:2px 0 10px #0000001a;height:100%;overflow-y:auto;position:relative;transition:width .3s ease,transform .3s ease;width:350px;z-index:10}.control-panel.minimized{overflow:hidden;width:50px}.panel-header{background-color:#f8f9fa;border-bottom:1px solid #eee;padding:15px}.panel-header h2{font-size:1.3rem;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.header-controls{align-items:center;display:flex;gap:10px}.minimize-button{background:none;border:none;border-radius:4px;color:#555;cursor:pointer;font-size:18px;padding:5px;transition:background-color .2s}.back-button,.minimize-button:hover{background-color:#f0f0f0}.back-button{border-radius:4px;padding:8px 15px;transition:background-color .3s}.back-button:hover{background-color:#e0e0e0}.visualization-container{background-color:#121212;border:none;display:flex;flex:1 1;flex-direction:column;margin:0;overflow:hidden;padding:0;position:relative}.visualization-container canvas{display:block!important;height:100%!important;left:0!important;margin:0!important;padding:0!important;position:absolute!important;top:0!important;touch-action:none!important;width:100%!important}.canvas-container{height:100%}.fullscreen-button{background-color:#00000080;border:none;border-radius:4px;color:#fff;cursor:pointer;padding:8px 15px;position:absolute;right:15px;top:15px;transition:background-color .3s;z-index:100}.fullscreen-button:hover{background-color:#000000b3}.visualization-panel{display:flex;flex:1 1;flex-direction:column;gap:20px;height:100%}.canvas-container{background-color:#1a1a1a;border:none;border-radius:0;box-shadow:none;height:500px;overflow:hidden;position:relative;width:100%}.data-panel{background-color:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;margin-bottom:20px;padding:20px}.data-section{border-bottom:1px solid #eee;margin-bottom:20px;padding-bottom:15px}.data-section h3{color:#333;font-size:1.1rem;margin-top:0}.data-row{display:flex;justify-content:space-between;margin-bottom:8px}.data-label{color:#555;font-weight:700}.no-data-message{color:#888;font-style:italic;padding:20px;text-align:center}.imu-settings{border-top:1px solid #eee;margin-top:20px;padding-top:20px}.settings-header{cursor:pointer}.settings-header h3{color:#333;font-size:1.1rem;margin:0}.settings-controls{margin-top:15px}.setting-row{align-items:center;display:flex;flex-wrap:wrap;margin-bottom:15px}.setting-row label{align-items:center;cursor:pointer;display:flex;gap:8px;margin-right:15px}.setting-row select{background-color:#f8f9fa;border:1px solid #ddd;border-radius:4px;cursor:pointer;margin-top:5px;padding:8px}.setting-row button{background-color:#4a90e2;border:none;border-radius:4px;color:#fff;cursor:pointer;margin-right:10px;margin-top:5px;padding:8px 12px;transition:background-color .3s}.setting-row button:hover{background-color:#357abf}.debug-button{background-color:#6c757d!important}.debug-button:hover{background-color:#5a6268!important}.analysis-section{background-color:#2a2a2a;margin-top:20px}.analysis-section h3{color:#fff;font-size:1.2rem;margin-bottom:15px;margin-top:0}.scientific-container,.wave-container{background-color:#333;border-radius:8px;box-shadow:0 2px 5px #0003;margin-top:20px;padding:15px}.imu-3d-scene{display:flex;flex-direction:column;height:100%;width:100%}.control-panel{background-color:#fff;border-radius:8px 8px 0 0;box-shadow:0 2px 8px #0000001a;padding:15px}.connection-status{background-color:#f8f9fa;border-radius:4px;font-size:.9rem;margin:10px 0;padding:8px}@media (max-width:1200px){.app-container{background:#1a1a1a;border-radius:0;flex-direction:column;height:calc(100vh - 120px)}.control-panel{height:auto;max-height:40vh;width:100%}.control-panel.minimized{height:50px;max-height:50px;width:100%}.visualization-container{height:auto;min-height:60vh}.canvas-container{height:400px}}@media (max-width:768px){.connection-buttons,.info-grid{grid-template-columns:1fr}.app-container{border-radius:0;box-shadow:none}.canvas-container{height:300px}.panel-header h2{font-size:1.1rem}.App-header h1{font-size:1.8rem}.data-section h3{font-size:1rem}.data-row{align-items:flex-start;flex-direction:column;margin-bottom:12px}}.App-footer{background-color:#282c34;color:#fff;font-size:.9rem;margin-top:auto;padding:10px}.App{display:flex;flex-direction:column;height:100vh;overflow:hidden;width:100%}.App-header{align-items:center;background-color:#282c34;box-shadow:0 2px 4px #0003;color:#fff;display:flex;flex-direction:row;justify-content:space-between;min-height:60px;padding:0 20px;z-index:200}.App-header h1{color:#fff;font-size:1.5rem;margin:0}.app-main{border:none;display:flex;flex-direction:row;height:calc(100vh - 60px);overflow:hidden;width:100%}.control-section{border-right:1px solid #ccc;height:100%;max-width:450px;min-width:350px;overflow:hidden;width:35%}canvas{display:block;height:100%!important;outline:none;width:100%!important}.settings-panel{background-color:#fff;border-right:1px solid #ddd;box-shadow:2px 0 5px #0000001a;height:100%;overflow-y:scroll!important;padding:15px;scrollbar-color:#00000080 #0000001a!important;scrollbar-width:auto!important;width:100%}.settings-panel::-webkit-scrollbar{background-color:#f5f5f5;display:block!important;width:14px!important}.settings-panel::-webkit-scrollbar-track{background:#f5f5f5!important;border-left:1px solid #ddd;border-radius:0;margin:0}.settings-panel::-webkit-scrollbar-thumb{background:#999!important;border:3px solid #f5f5f5;border-radius:10px;min-height:40px}.settings-panel::-webkit-scrollbar-thumb:hover{background:#777!important}.settings-header{align-items:center;background-color:#fff;border-bottom:1px solid #eee;display:flex;justify-content:space-between;margin-bottom:15px;padding:0 0 15px;position:-webkit-sticky;position:sticky;top:0;z-index:10}.settings-header h2{font-size:1.4rem;margin:0}.connection-modes{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.connection-modes button{font-size:15px!important;margin:0;padding:10px!important}.device-bridge{margin-bottom:20px}.receive-instructions,.send-controls{margin-bottom:15px}.receiving-view,.sending-view{background-color:#e8f4fd;border-radius:6px;margin-bottom:15px;padding:15px}input[type=text]{border:1px solid #ccc;border-radius:4px;font-size:14px;padding:8px}@media (max-width:900px){.app-main{flex-direction:column}.control-section{border-bottom:1px solid #ccc;border-right:none;height:50%;max-width:100%;min-height:300px;width:100%}.visualization-container{height:50%}}button{cursor:pointer;transition:background-color .2s}button:hover{opacity:.9}.section-title{color:#333}.section-description{color:#666;margin-bottom:15px}.settings-panel>*{width:100%}@media (max-width:1024px) and (max-height:500px) and (orientation:landscape){.app-container{flex-direction:row}.control-panel{height:100%;overflow-y:auto;width:300px}.visualization-container{flex:1 1}.sending-view div{max-height:150px;max-width:150px}}.wave-container{background-color:#1a2634;border-radius:8px;box-shadow:0 4px 6px #0000001a;margin:20px 0;overflow:hidden}@media (max-width:1200px){.app-container{flex-direction:column}.control-panel,.visualization-container{max-width:none;width:100%}.visualization-container{height:60vh}canvas{height:auto!important;width:100%!important}}.analysis-section{background-color:#1a2634;border:1px solid #37474f;border-radius:8px;margin:20px 0;padding:20px}.section-title{color:#fff;font-size:20px;margin-bottom:10px;margin-top:0}.section-description{color:#ccc;font-size:14px;line-height:1.5;margin-bottom:20px}.settings-icon-button{background-image:linear-gradient(180deg,#508cff99,#3264dc99)}.settings-icon-button:hover{background-image:linear-gradient(180deg,#64a0ffb3,#4678f0b3)}.settings-icon-button svg{fill:#fff;height:24px;width:24px}.settings-dropdown{animation:slideInFromRight .3s ease-out;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:#1e1e1ed9;border:1px solid #ffffff1a;border-radius:12px;box-shadow:0 8px 32px #00000080;max-height:calc(100vh - 160px);overflow-x:hidden;overflow-y:auto;padding:20px;position:absolute;right:20px;top:70px;width:250px;z-index:1002}@keyframes slideInFromRight{0%{opacity:0;transform:translateX(30px)}70%{opacity:1;transform:translateX(-5px)}to{opacity:1;transform:translateX(0)}}.settings-dropdown-content{display:flex;flex-direction:column;gap:15px;padding-top:10px}.settings-item{align-items:center;display:flex;justify-content:space-between}.toggle-label{color:#fff;font-size:16px;font-weight:500}.toggle-switch{width:48px}.toggle-label-switch{background-color:#444;border-radius:24px;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:.4s}.toggle-label-switch:before{background-color:#fff;border-radius:50%;bottom:3px;content:"";height:18px;left:3px;position:absolute;transition:.4s;width:18px}input:checked+.toggle-label-switch{background-color:#4a90e2}input:checked+.toggle-label-switch:before{transform:translateX(24px)}.recalibrate-button-container{justify-content:center;margin-top:5px}.recalibrate-button{align-items:center;background-color:#4a90e2;border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:8px;justify-content:center;padding:8px 15px;transition:background-color .3s ease}.recalibrate-button:hover{background-color:#357abf}.recalibrate-button svg{transform:rotate(45deg)}.panel-icon-button{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:#1e233099;background-image:linear-gradient(135deg,#3c465a80,#1e2330b3);border:1px solid #ffffff26;box-shadow:0 8px 20px #0000004d;height:48px;margin-bottom:16px;width:48px}.panel-icon-button:hover{background-image:linear-gradient(135deg,#46506499,#282d3acc);border-color:#ffffff40;box-shadow:0 10px 25px #0006,0 0 15px #ffffff1a;transform:translateY(-3px) scale(1.05)}.panel-icon-button .panel-icon{color:#ffffffe6;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));transition:all .3s cubic-bezier(.2,.8,.2,1)}.panel-icon-button:hover .panel-icon{color:#fff;filter:drop-shadow(0 0 8px rgba(255,255,255,.4));transform:scale(1.1)}.panel-icon-button.active{background-image:linear-gradient(135deg,#4285f499,#2850b4cc);border-color:#ffffff4d;box-shadow:0 8px 20px #0006,0 0 15px #4285f466}.panel-icon-button.active .panel-icon{color:#fff;filter:drop-shadow(0 0 8px rgba(255,255,255,.6))}.panel-icon-button.record-icon-button.recording{animation:pulse-record 2s infinite;background-image:linear-gradient(135deg,#f4433699,#b42828cc);box-shadow:0 8px 20px #0006,0 0 15px #f4433666}@keyframes pulse-record{0%{box-shadow:0 8px 20px #0006,0 0 5px #f4433666}50%{box-shadow:0 8px 20px #0006,0 0 20px #f44336b3}to{box-shadow:0 8px 20px #0006,0 0 5px #f4433666}}.panel-container{top:20px;z-index:100}.icon-tooltip{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background-color:#1e2330d9;border:1px solid #ffffff26;box-shadow:0 4px 15px #0000004d;right:60px}@media (max-width:768px){.panel-container{right:10px;top:10px}.panel-icon-button{height:42px;margin-bottom:12px;width:42px}.panel-icon-button .panel-icon{transform:scale(.9)}.icon-tooltip{font-size:12px;padding:6px 10px;right:50px}}@media (max-width:480px){.panel-icon-button{height:38px;margin-bottom:10px;width:38px}.panel-icon-button .panel-icon{transform:scale(.85)}.icon-tooltip{display:none}}.popup-panel{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background-color:#1e1e1ee6;border-radius:8px;box-shadow:0 8px 16px #0000004d;overflow:hidden;transition:all .3s ease;z-index:1000}.popup-panel.hidden{opacity:0;transform:translateY(-20px);visibility:hidden}.popup-panel-header{align-items:center;background-color:#282828cc;border-bottom:1px solid #ffffff1a;display:flex;justify-content:space-between;padding:12px 16px}.popup-panel-header h3{color:#fff;font-size:16px;font-weight:500;margin:0}.popup-panel-close{align-items:center;background:none;border:none;border-radius:50%;color:#ffffffb3;cursor:pointer;display:flex;font-size:18px;height:24px;justify-content:center;padding:0;transition:all .2s ease;width:24px}.popup-panel-close:hover{background-color:#ffffff1a;color:#fff}.popup-panel-content{color:#fff;padding:16px}.file-manager-panel,.playback-panel,.recording-panel{right:80px;top:80px;width:320px}.file-manager-panel{max-height:500px;overflow-y:auto}@media (max-width:768px){.file-manager-panel,.playback-panel,.recording-panel{right:60px;width:280px}}.simple-pulsing-indicator{animation:blink 1s infinite;background-color:#f33;border-radius:50%;display:inline-block;vertical-align:middle}@keyframes blink{0%{opacity:1}50%{opacity:.3}to{opacity:1}}.comparison-recording-controls{background-color:#1e283cb3;border-radius:8px;box-shadow:0 4px 8px #0003;display:flex;gap:16px;justify-content:center;margin:16px 0;padding:12px}.comparison-record-button{align-items:center;background-color:#e74c3c;border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;font-weight:500;justify-content:center;padding:10px 16px;transition:all .2s ease}.comparison-record-button:hover{background-color:#c0392b;box-shadow:0 4px 8px #0000004d;transform:translateY(-2px)}.comparison-record-button:disabled{background-color:#95a5a6;box-shadow:none;cursor:not-allowed;transform:none}.comparison-record-button:before{content:"●";display:inline-block;font-size:14px;margin-right:8px}.panel-icon-button.active{background-color:#4285f44d;border:1px solid #4285f499;box-shadow:0 0 8px #4285f466}.panel-icon-button.active svg{stroke:#4285f4;fill:#4285f433}.panel-icon-button.active .icon-tooltip{opacity:1;visibility:visible}.mode-indicator{align-items:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid #ffffff1a;border-radius:20px;box-shadow:0 4px 12px #0003;color:#fff;display:flex;font-size:14px;font-weight:500;left:15px;padding:8px 16px;position:absolute;top:15px;transition:all .3s ease;z-index:10}.mode-indicator:before{border-radius:50%;content:"";display:inline-block;height:10px;margin-right:8px;transition:all .3s ease;width:10px}.mode-indicator.streaming{background-image:linear-gradient(90deg,#508cff99,#3264dc99)}.mode-indicator.streaming:before{animation:pulse 1.5s infinite;background-color:#4caf50;box-shadow:0 0 8px #4caf50cc}.mode-indicator.playback{background-image:linear-gradient(90deg,#46c84699,#28aa2899)}.mode-indicator.playback:before{background-color:#ff9800;box-shadow:0 0 8px #ff9800cc}.sample-label{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background-color:#0009;border:1px solid #ffffff1a;border-radius:20px;box-shadow:0 4px 12px #0003;color:#fff;font-size:14px;font-weight:500;left:50%;padding:6px 12px;position:absolute;top:15px;transform:translateX(-50%);z-index:10}.sample-label.sample1{background-image:linear-gradient(90deg,#4285f499,#2864c899)}.sample-label.sample2{background-image:linear-gradient(90deg,#ea433599,#c8282899)}.comparison-view-divider{background-color:#fff3;height:100%;left:50%;pointer-events:none;position:absolute;top:0;width:1px;z-index:5}.panel-container{display:flex;flex-direction:column;position:fixed;right:20px;top:80px;z-index:1000}.panel-icon-buttons{align-items:center;display:flex;flex-direction:column;gap:18px}.panel-icon-button{align-items:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#1e2024bf;background-image:linear-gradient(180deg,#3c414b80,#191c2380);border:1px solid #ffffff1f;border-radius:50%;box-shadow:0 4px 12px #0000004d,inset 0 0 0 1px #ffffff0d;cursor:pointer;display:flex;height:56px;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;justify-content:center;overflow:hidden;position:relative;transition:all .3s cubic-bezier(.2,.8,.2,1);width:56px;z-index:10}.panel-icon-button:hover{background-image:linear-gradient(180deg,#464b5599,#23262d99);border-color:#fff3;box-shadow:0 8px 20px #0006,inset 0 0 0 1px #ffffff26,0 0 15px #ffffff1a;transform:translateY(-2px) scale(1.05)}.panel-icon-button svg{shape-rendering:geometricPrecision;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3));height:28px!important;text-rendering:optimizeLegibility;transition:all .3s cubic-bezier(.2,.8,.2,1);width:28px!important}.panel-icon-button:hover svg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));transform:scale(1.1)}.panel-icon-button.active{background-image:linear-gradient(180deg,#50555fb3,#2d3037b3);border-color:#ffffff40;box-shadow:0 0 20px #ffffff26,inset 0 0 10px #ffffff1a,0 4px 15px #0006}.panel-icon-button.active svg{filter:drop-shadow(0 0 6px rgba(255,255,255,.5))}.settings-icon-button{background-image:linear-gradient(180deg,#508cff80,#3264dc80)}.settings-icon-button:hover{background-image:linear-gradient(180deg,#64a0ff99,#4678f099)}.settings-icon-button.active{background-image:linear-gradient(180deg,#64a0ffb3,#4678f0b3);box-shadow:0 0 20px #508cff66,inset 0 0 10px #78b4ff33,0 4px 15px #0006}.record-icon-button{background-image:linear-gradient(180deg,#ff464680,#dc282880)}.record-icon-button:hover{background-image:linear-gradient(180deg,#ff5a5a99,#f03c3c99)}.record-icon-button.active,.record-icon-button.recording{background-image:linear-gradient(180deg,#ff5a5ab3,#f03c3cb3);box-shadow:0 0 25px #ff464680,inset 0 0 10px #ff78784d,0 4px 15px #0006}.record-icon-button.recording{animation:recordPulse 1.5s infinite}.play-icon-button{background-image:linear-gradient(180deg,#46c84680,#28aa2880)}.play-icon-button:hover{background-image:linear-gradient(180deg,#5adc5a99,#3cbe3c99)}.play-icon-button.active{background-image:linear-gradient(180deg,#5adc5ab3,#3cbe3cb3);box-shadow:0 0 20px #46c84666,inset 0 0 10px #78e67833,0 4px 15px #0006}.file-icon-button{background-image:linear-gradient(180deg,#ffb42880,#e6961480)}.file-icon-button:hover{background-image:linear-gradient(180deg,#ffc83c99,#f0aa2899)}.file-icon-button.active{background-image:linear-gradient(180deg,#ffc83cb3,#f0aa28b3);box-shadow:0 0 20px #ffb42866,inset 0 0 10px #ffd26433,0 4px 15px #0006}.connection-icon-button{background-image:linear-gradient(180deg,#78787880,#5a5a5a80)}.connection-icon-button:hover{background-image:linear-gradient(180deg,#8c8c8c99,#6e6e6e99)}.connection-icon-button.active{background-image:linear-gradient(180deg,#8c8c8cb3,#6e6e6eb3);box-shadow:0 0 20px #96969666,inset 0 0 10px #b4b4b433,0 4px 15px #0006}.comparison-view-icon-button{background-image:linear-gradient(180deg,#8c50dc80,#6e32be80)}.comparison-view-icon-button:hover{background-image:linear-gradient(180deg,#a064f099,#8246d299)}.comparison-view-icon-button.active{background-image:linear-gradient(180deg,#a064f0b3,#8246d2b3);box-shadow:0 0 25px #a064f080,inset 0 0 10px #c896ff4d,0 4px 15px #0006}.icon-tooltip{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background-color:#141923e6;border:1px solid #ffffff1a;border-radius:8px;box-shadow:0 4px 15px #0000004d,inset 0 0 0 1px #ffffff1a;color:#fff;font-size:14px;font-weight:500;letter-spacing:.3px;opacity:0;padding:8px 14px;pointer-events:none;position:absolute;right:68px;transform:translateX(10px);transition:all .3s cubic-bezier(.2,.8,.2,1);white-space:nowrap;z-index:1000}.panel-icon-button:hover .icon-tooltip{opacity:1;transform:translateX(0)}@keyframes recordPulse{0%{box-shadow:0 0 15px #ff464666,inset 0 0 0 1px #ffffff26;opacity:.9;transform:scale(.98)}50%{box-shadow:0 0 25px #ff4646b3,inset 0 0 0 1px #ffffff40;opacity:1;transform:scale(1.06)}to{box-shadow:0 0 15px #ff464666,inset 0 0 0 1px #ffffff26;opacity:.9;transform:scale(.98)}}@media (max-width:768px){.panel-container{right:10px;top:70px}.panel-icon-button{height:48px;width:48px}.panel-icon-button svg{height:24px!important;width:24px!important}.icon-tooltip{font-size:12px;padding:6px 10px;right:58px}}.progress-bar-container{background-color:#0003;height:12px;margin-bottom:8px;width:100%}.progress-bar,.progress-bar-container{border-radius:6px;overflow:hidden;position:relative}.progress-bar{background:linear-gradient(90deg,#4285f4,#34a853);height:100%;transition:width .1s linear}.progress-bar:after{animation:progress-bar-shine 1.5s linear infinite;background:linear-gradient(90deg,#fff0,#fff6 50%,#fff0);bottom:0;content:"";left:0;position:absolute;right:0;top:0}@keyframes progress-bar-shine{0%{background-position:200% 0}to{background-position:-200% 0}}.progress-text{color:#ffffffb3;display:block;font-size:12px;margin-top:4px;text-align:center}.time-display{color:#fffc;display:flex;font-size:14px;justify-content:space-between;margin-bottom:4px}.total-time{color:#fff9}.time-slider{-webkit-appearance:none;appearance:none;background:#0000;cursor:pointer;height:100%;left:0;margin:0;opacity:0;position:absolute;top:0;width:100%}.time-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#0000;border-radius:50%;cursor:pointer;height:16px;width:16px}.time-slider::-moz-range-thumb{background:#0000;border:none;border-radius:50%;cursor:pointer;height:16px;width:16px}.speed-buttons{grid-gap:8px;display:grid;gap:8px;grid-template-columns:repeat(3,1fr)}.speed-button{font-size:13px;padding:6px 4px}.action-button.start-recording{background-color:#ea4335cc}.action-button.start-recording:hover{background-color:#ea4335e6}.action-button.stop-recording{background-color:#fbbc05cc}.action-button.stop-recording:hover{background-color:#fbbc05e6}.action-button.play-button{background-color:#34a853cc}.action-button.play-button:hover{background-color:#34a853e6}.action-button.pause-button{background-color:#fbbc05cc}.action-button.pause-button:hover{background-color:#fbbc05e6}.empty-state{color:#fff9;padding:16px 0;text-align:center}.file-select-dropdown{background-color:#323c5099;border:1px solid #fff3;border-radius:6px;color:#fff;cursor:pointer;font-size:14px;margin-bottom:8px;outline:none;padding:10px;transition:all .2s ease;width:100%}.file-select-dropdown:hover{background-color:#3c465ab3;border-color:#ffffff4d}.file-select-dropdown:focus{border-color:#4285f480;box-shadow:0 0 0 2px #4285f44d}.file-select-dropdown option{background-color:#1e2330;color:#fff;padding:8px}.file-list-container{max-height:300px;overflow-y:auto}.file-list{list-style:none;margin:0;padding:0}.file-item{align-items:center;background-color:#323c5066;border:1px solid #0000;border-radius:6px;display:flex;justify-content:space-between;margin-bottom:8px;padding:10px;transition:all .2s ease}.file-item:hover{background-color:#3c465a80}.file-item.selected{background-color:#4285f44d;border-color:#4285f480}.file-info{cursor:pointer;flex:1 1;overflow:hidden}.file-name{font-weight:500;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-meta{color:#fff9;display:flex;font-size:12px;justify-content:space-between}.file-actions{display:flex;gap:6px}.file-action-button{align-items:center;background:none;border:none;border-radius:4px;color:#fff9;cursor:pointer;display:flex;font-size:16px;height:28px;justify-content:center;padding:4px;transition:all .2s ease;width:28px}.file-action-button:hover{background-color:#ffffff1a;color:#ffffffe6}.file-action-button.delete:hover{background-color:#ea433533;color:#ea4335e6}.file-action-button.export:hover{background-color:#34a85333;color:#34a853e6}.zigSimConnector{background-color:#1a1a2e;border-radius:8px;box-shadow:0 4px 6px #0000001a;margin-bottom:20px;max-width:100%;padding:20px}.zigSimConnector h3{border-bottom:1px solid #3d3d5c;color:#fff;font-size:18px;margin-bottom:16px;margin-top:0;padding-bottom:10px}.connection-options{display:flex;flex-wrap:wrap;margin-bottom:15px}.connection-button{background-color:#4a6bff;border:none;border-radius:4px;color:#fff;cursor:pointer;font-weight:500;outline:none;padding:10px 16px;transition:background-color .2s ease}.connection-button:hover{background-color:#6281ff}.connection-button:disabled{cursor:not-allowed;opacity:.5}.connection-button.active{background-color:#4caf50;color:#fff}.disconnect-button{background-color:#1a1a2e;border:1px solid #f55;border-radius:4px;color:#f55;cursor:pointer;font-weight:500;outline:none;padding:10px 16px;transition:all .2s ease}.disconnect-button:hover{background-color:#f553}.status-container{margin-top:16px}.status-message{border-radius:6px;font-size:14px;line-height:1.4;margin-bottom:12px;padding:12px 15px}.status-message.success{background-color:#4caf5026;border:1px solid #4caf5066;color:#aaa}.status-message.error{background-color:#ff555526;border:1px solid #f556;color:#ff8585}.status-message.warning{background-color:#ffc10726;border:1px solid #ffc10766;color:#ffcc80}.status-message.info{background-color:#2196f326;border:1px solid #2196f366;color:#90caf9}.connection-status{color:#ccc;font-size:15px;font-weight:600;margin-bottom:4px}.packets-info{color:#999;font-size:14px;opacity:.9}.troubleshooting-tips{border-top:1px solid #ff55554d;margin-top:10px;padding-top:10px}.troubleshooting-tips strong{color:#fff}.troubleshooting-tips ul{margin-top:8px;padding-left:20px}.troubleshooting-tips li{color:#e0e0e0;margin-bottom:5px}.connection-panel{background:#2d3748f2;border:1px solid #4a5568;border-radius:8px;box-shadow:0 4px 12px #0006;color:#fff;left:50%;max-height:80vh;max-width:500px;overflow-y:auto;position:fixed;top:50%;transform:translate(-50%,-50%);width:90%;z-index:1000}.connection-panel-content{padding:20px}.connection-panel-header{align-items:center;border-bottom:1px solid #4a5568;display:flex;justify-content:space-between;margin-bottom:20px;padding-bottom:10px}.connection-panel-header h3{color:#e2e8f0;margin:0}.close-button{border-radius:4px;color:#a0aec0;transition:background-color .2s}.connection-options{grid-gap:10px;display:grid;gap:10px}.connection-option{align-items:center;background:#ffffff0d;border:1px solid #4a5568;border-radius:6px;cursor:pointer;display:flex;padding:15px;transition:all .2s}.connection-option:hover{background:#ffffff1a;border-color:#63b3ed}.connection-icon{font-size:24px;margin-right:15px;min-width:40px}.connection-details h5{color:#e2e8f0;margin:0 0 5px}.connection-details p{color:#a0aec0;font-size:14px;margin:0}.connection-status{padding:20px;text-align:center}.connection-status h4{color:#e2e8f0;margin:0 0 20px}.connection-success{background:#48bb781a;border:1px solid #48bb78;border-radius:6px;margin-bottom:20px;padding:20px}.connection-waiting{background:#4299e11a;border:1px solid #4299e1;border-radius:6px;margin-bottom:20px;padding:20px}.status-indicator{border-radius:50%;display:inline-block;height:12px;margin-right:8px;vertical-align:middle;width:12px}.status-indicator.connected{background-color:#48bb78;box-shadow:0 0 8px #48bb7880}.status-indicator.connecting{animation:pulse 1.5s infinite;background-color:#4299e1}@keyframes pulse{0%{box-shadow:0 0 0 0 #4299e1b3}70%{box-shadow:0 0 0 10px #4299e100}to{box-shadow:0 0 0 0 #4299e100}}.cancel-button,.disconnect-button{background:#e53e3e;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:14px;margin-top:15px;padding:8px 16px;transition:background-color .2s}.cancel-button:hover,.disconnect-button:hover{background:#c53030}.cancel-button{background:#718096}.cancel-button:hover{background:#4a5568}.connection-modes h4{color:#fff;font-size:16px;font-weight:500;margin:0 0 15px}.back-button{align-items:center;background:#0000;border:none;color:#fffc;cursor:pointer;display:flex;font-size:14px;margin-bottom:16px;padding:8px 0;transition:color .2s ease}.back-button:hover{color:#fff}.back-button svg{margin-right:8px}@media (max-width:768px){.connection-panel{right:60px;top:60px;width:280px}}.connection-panel,.settings-panel{pointer-events:auto!important;position:absolute!important;z-index:1002!important}.active-connection{background:#3c3c3c80;border:1px solid #ffffff0d;border-radius:8px;padding:15px}.active-connection h4{color:#fff;font-size:16px;font-weight:500;margin:0 0 10px}.active-connection p{color:#fff;font-size:14px;margin:0 0 15px}.hand-detection-status{background:#0000004d;border:1px solid #333;border-radius:8px;margin-top:20px;padding:15px}.hand-detection-status h4{color:#fff;font-size:14px;margin:0 0 10px}.detection-indicators{display:flex;flex-direction:column;gap:8px;margin-bottom:15px}.hand-indicator{border-radius:6px;font-size:13px;font-weight:500;padding:8px 12px;transition:all .3s ease}.hand-indicator.detected{background:#22c55e33;border:1px solid #22c55e;color:#22c55e}.hand-indicator.not-detected{background:#ef444433;border:1px solid #ef4444;color:#ef4444}.hand-tips{background:#3b82f61a;border:1px solid #3b82f6;border-radius:6px;color:#93c5fd;padding:12px}.hand-tips p{color:#dbeafe;font-size:13px;margin:0 0 8px}.hand-tips ul{font-size:12px;line-height:1.4;margin:0;padding-left:18px}.hand-tips li{margin-bottom:4px}.camera-controls{margin:15px 0}.connect-btn,.disconnect-btn{border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;padding:12px 20px;transition:all .3s ease;width:100%}.connect-btn{background:#22c55e;color:#fff}.connect-btn:hover{background:#16a34a}.disconnect-btn{background:#ef4444;color:#fff}.disconnect-btn:hover{background:#dc2626}.popup-panel{transition:opacity .25s ease,transform .25s ease}.popup-panel-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:10000}.popup-panel{animation:fadeIn .25s cubic-bezier(.2,.8,.2,1);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background-color:#1e2330f2;border:1px solid #ffffff26;border-radius:12px;box-shadow:0 10px 30px #000000b3;color:#fff;display:flex;flex-direction:column;max-height:80vh;min-height:150px;opacity:1;overflow-y:auto;padding:18px;pointer-events:auto;position:absolute;scrollbar-color:#ffffff4d #0000;scrollbar-width:thin;transform-origin:center;z-index:10001}.popup-panel::-webkit-scrollbar{width:6px}.popup-panel::-webkit-scrollbar-track{background:#0000}.popup-panel::-webkit-scrollbar-thumb{background-color:#ffffff4d;border-radius:6px}.popup-panel::-webkit-scrollbar-thumb:hover{background-color:#ffffff80}.popup-panel.position-top-right{right:20px;top:70px;transform-origin:top right}.popup-panel.position-top-left{left:20px;top:70px;transform-origin:top left}.popup-panel.position-bottom-right{bottom:20px;right:20px;transform-origin:bottom right}.popup-panel.position-bottom-left{bottom:20px;left:20px;transform-origin:bottom left}.popup-panel.position-center{left:50%;top:50%;transform:translate(-50%,-50%);transform-origin:center}.popup-panel.closing{animation:fadeOut .2s cubic-bezier(.2,.8,.2,1) forwards}@keyframes fadeIn{0%{opacity:0;transform:translateY(-12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes fadeOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-12px) scale(.98)}}.popup-panel.position-bottom-left.closing,.popup-panel.position-bottom-right.closing{animation:fadeOutBottom .2s cubic-bezier(.2,.8,.2,1) forwards}@keyframes fadeOutBottom{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(12px) scale(.98)}}.panel-header{align-items:center;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background-color:#1e2330f2;border-bottom:1px solid #ffffff26;display:flex;justify-content:space-between;margin:-18px -18px 18px;padding:18px 18px 12px;position:-webkit-sticky;position:sticky;top:0;z-index:1}.panel-header h3{color:#fffffff2;font-size:18px;font-weight:600;letter-spacing:.3px;margin:0}.close-button{align-items:center;background:none;border:none;border-radius:50%;color:#ffffffb3;cursor:pointer;display:flex;font-size:24px;height:30px;justify-content:center;padding:0;transition:all .2s ease;width:30px}.close-button:hover{background-color:#ffffff1a;color:#fff;transform:scale(1.1)}.panel-content{display:flex;flex:1 1;flex-direction:column;gap:18px;margin-right:-6px;overflow-y:auto;padding-right:6px}.panel-section{margin-bottom:20px}.panel-section:last-child{margin-bottom:0}.panel-section h4{color:#ffffffd9;font-size:14px;font-weight:600;letter-spacing:.5px;margin:0 0 14px;text-transform:uppercase}.panel-button{align-items:center;background-color:#323c5099;border:1px solid #0000;border-radius:8px;color:#fff;cursor:pointer;display:flex;font-size:14px;gap:8px;justify-content:center;padding:12px 16px;transition:all .2s ease}.panel-button:hover{background-color:#3c465ab3;box-shadow:0 4px 10px #0000004d;transform:translateY(-2px)}.panel-button.active{background-color:#4285f4cc;border-color:#fff3;box-shadow:0 0 10px #4285f466;font-weight:500}.panel-button .icon{align-items:center;display:flex;height:18px;justify-content:center;width:18px}.button-grid,.visualization-options{grid-gap:12px;display:grid;gap:12px;grid-template-columns:1fr 1fr}.viz-button{background-color:#323c5099;border:1px solid #0000;border-radius:8px;color:#fff;cursor:pointer;flex-direction:column;font-size:14px;gap:8px;min-height:70px;padding:12px 8px;pointer-events:auto}.viz-button,.viz-button .icon{align-items:center;display:flex;justify-content:center;transition:all .2s ease}.viz-button .icon{height:24px;opacity:.9;width:24px}.viz-button:hover{background-color:#3c465ab3;box-shadow:0 4px 10px #0000004d;transform:translateY(-2px)}.viz-button:hover .icon{opacity:1;transform:scale(1.1)}.viz-button.active{background-color:#4285f4cc;border-color:#fff3;box-shadow:0 0 10px #4285f466;font-weight:500;transform:scale(1.05)}.viz-button.active .icon{opacity:1}.toggle-option{align-items:center;background-color:#323c5066;border-radius:8px;display:flex;margin-bottom:12px;padding:10px 12px;transition:all .2s ease}.toggle-option:hover{background-color:#3c465a80;box-shadow:0 2px 6px #0003;transform:translateY(-1px)}.toggle-option label{align-items:center;cursor:pointer;display:flex;padding:4px;-webkit-user-select:none;user-select:none;width:100%}.toggle-option span{cursor:pointer;font-size:14px;font-weight:500}.toggle-switch{display:inline-block;height:24px;margin-right:12px;position:relative;width:44px}.toggle-switch input{height:0;opacity:0;width:0}.toggle-slider{background-color:#323c5099;border-radius:24px;bottom:0;cursor:pointer;left:0;pointer-events:none;position:absolute;right:0;top:0;transition:.3s}.toggle-slider:before{background-color:#fff;border-radius:50%;bottom:3px;content:"";height:18px;left:3px;position:absolute;transition:.3s;width:18px}input:checked+.toggle-slider{background-color:#4285f4cc}input:checked+.toggle-slider:before{transform:translateX(20px)}.toggle-option input[type=checkbox]{accent-color:#4285f4;cursor:pointer;height:18px;margin-right:10px;width:18px}.action-button{background-color:#48bb78cc;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:14px;font-weight:500;gap:8px;letter-spacing:.5px;padding:12px 16px;transition:all .2s ease;width:100%}.action-button,.action-button .icon{align-items:center;display:flex;justify-content:center}.action-button .icon{height:18px;width:18px}.action-button:hover{background-color:#48bb78e6;box-shadow:0 4px 10px #0000004d;transform:translateY(-2px)}.action-button:active{transform:translateY(1px)}@media (max-width:768px){.popup-panel{font-size:14px;max-height:75vh;padding:14px;width:240px!important}.panel-header{margin:-14px -14px 14px;padding:14px 14px 10px}.button-grid,.visualization-options{gap:8px;grid-template-columns:1fr 1fr}.panel-button,.viz-button{font-size:13px;min-height:60px;padding:8px 6px}.viz-button .icon{height:20px;width:20px}.panel-header{margin-bottom:14px;padding-bottom:10px}.panel-section{margin-bottom:16px}}@media (max-width:480px){.popup-panel{left:5%;max-height:70vh;right:5%;top:60px;width:90%!important}.popup-panel.position-center{left:50%;top:50%;transform:translate(-50%,-50%)}}@media (min-height:900px){.popup-panel{max-height:85vh}}@media (max-height:500px){.popup-panel{max-height:90vh;top:5vh}.panel-header{padding-bottom:8px;padding-top:10px}}.popup-panel.auto-height{height:auto;max-height:none}.popup-panel.auto-height .panel-content{max-height:none;overflow:visible}.scene-settings-panel{min-height:300px}.scene-settings-panel .visualization-options{grid-gap:12px;display:grid;gap:12px;grid-template-columns:1fr 1fr}.playback-panel .playback-progress,.recording-panel .duration-control{margin-bottom:16px}.file-manager-panel .file-list-container{max-height:300px;overflow-y:auto}@media (max-width:768px){.scene-settings-panel{width:240px}.file-manager-panel .file-list-container{max-height:250px}}@media (max-width:480px){.file-manager-panel,.playback-panel,.recording-panel,.scene-settings-panel{right:5%;top:60px;width:90%}}