@import"https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600&display=swap";:root{--bg: #090d12;--bg-accent: #0f1520;--panel: #121a26;--panel-soft: #0f1520;--border: #223045;--text: #f5f7fb;--muted: #9aa7bd;--accent: #ff7a3d;--accent-2: #2ad1ff;--success: #5ce3a2;--danger: #ff6b6b;--canvas: #090d12;--shadow: rgba(6, 12, 20, .45)}*{box-sizing:border-box}body{margin:0;font-family:Space Grotesk,Segoe UI,sans-serif;color:var(--text);background:var(--bg);min-height:100vh}.immersive-page{display:flex;flex-direction:column;min-height:100vh;background:var(--bg)}.immersive-header{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;border-bottom:1px solid rgba(34,48,69,.4);background:#090d12f2;z-index:100}.immersive-header .logo{display:flex;align-items:center;gap:8px;font-family:Sora,sans-serif;font-size:18px;font-weight:600;color:var(--text)}.immersive-header .logo-icon{font-size:20px}.immersive-header .controls-row{display:flex;align-items:center;gap:16px}.immersive-header .mode-tabs{display:flex;background:#0f1520cc;border-radius:8px;border:1px solid var(--border);overflow:hidden}.immersive-header .mode-tab{padding:8px 16px;font-size:13px;font-weight:500;color:var(--muted);background:transparent;border:none;cursor:pointer;transition:all .2s ease}.immersive-header .mode-tab.active{background:#ff7a3d33;color:var(--accent)}.immersive-header .mode-tab:hover:not(.active){color:var(--text)}.immersive-header .settings-btn{width:36px;height:36px;border-radius:8px;background:#0f1520cc;border:1px solid var(--border);color:var(--muted);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.immersive-header .settings-btn:hover{color:var(--text);border-color:var(--accent)}.immersive-header .status-indicator{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}.immersive-header .status-dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}.immersive-header .status-dot.active{background:var(--success);box-shadow:0 0 8px var(--success);animation:pulse 2s ease infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.immersive-main{flex:1;display:flex;flex-direction:column;padding:16px 24px;gap:12px;overflow:hidden}.viz-container{position:relative;flex:1;display:flex;flex-direction:column;gap:8px;min-height:0}.spectrogram-section{position:relative;height:200px;min-height:150px;border-radius:12px;overflow:hidden;background:var(--canvas);border:none;border-right:1px solid rgba(34,48,69,.5);display:flex}.spectrogram-section:before{content:"";position:absolute;left:0;top:0;bottom:0;width:120px;background:linear-gradient(to right,#090d12,#090d12cc 40%,#090d1200);pointer-events:none;z-index:10}.spectrogram-section:after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;z-index:10;background:linear-gradient(to left,#22304580,#2230454d,#22304500 40%) top / 100% 1px no-repeat,linear-gradient(to left,#22304580,#2230454d,#22304500 40%) bottom / 100% 1px no-repeat}.spectrogram-label{position:absolute;top:12px;right:12px;font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:#9aa7bd99;z-index:5}.heatmap-section{position:relative;flex:1;min-height:200px;border-radius:12px;overflow:hidden;background:var(--canvas);border:none;border-right:1px solid rgba(34,48,69,.5);display:flex}.heatmap-section:before{content:"";position:absolute;left:0;top:0;bottom:0;width:120px;background:linear-gradient(to right,#090d12,#090d12cc 40%,#090d1200);pointer-events:none;z-index:10}.heatmap-section:after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;z-index:10;background:linear-gradient(to left,#22304580,#2230454d,#22304500 40%) top / 100% 1px no-repeat,linear-gradient(to left,#22304580,#2230454d,#22304500 40%) bottom / 100% 1px no-repeat}.heatmap-canvas-wrap{flex:1;position:relative;overflow:hidden;min-width:0}.heatmap-canvas-wrap canvas{display:block;width:100%;height:100%;object-fit:fill}.spectrogram-canvas-wrap{flex:1;position:relative;overflow:hidden;min-width:0}.spectrogram-canvas-wrap canvas{display:block;width:100%;height:100%;object-fit:fill}.spectrogram-label-spacer{width:220px;flex-shrink:0;background:transparent}.dynamic-labels{width:220px;padding:0 12px 0 8px;display:flex;flex-direction:column;background:linear-gradient(to left,#090d12f2,#090d12b3 60%,#090d1200);z-index:5}.dynamic-label{display:flex;align-items:center;justify-content:flex-start;gap:8px;font-size:11px;transition:all .3s ease;flex:1;min-height:0}.dynamic-label .label-text{text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;transition:all .3s ease}.dynamic-label .label-score{font-family:Sora,monospace;font-size:10px;min-width:36px;text-align:right;opacity:.7}.heatmap-label{position:absolute;top:12px;left:140px;font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:#9aa7bd99;z-index:15}.immersive-footer{display:flex;align-items:center;gap:16px;padding:12px 24px;border-top:1px solid rgba(34,48,69,.4);background:#090d12f2;flex-wrap:wrap}.footer-section{display:flex;align-items:center;gap:12px}.footer-section.grow{flex:1}.footer-divider{width:1px;height:24px;background:#22304599}.video-player-mini{display:flex;align-items:center;gap:12px;background:#0f1520cc;border:1px solid var(--border);border-radius:8px;padding:8px 12px;max-width:500px}.video-player-mini video{width:200px;height:112px;border-radius:4px;background:#000;cursor:pointer}.video-info{display:flex;flex-direction:column;gap:4px;min-width:0}.video-title{font-size:12px;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}.video-status{font-size:11px;color:var(--success)}.preset-btn{padding:6px 12px;font-size:12px;font-weight:500;background:#0f1520cc;border:1px solid var(--border);border-radius:6px;color:var(--muted);cursor:pointer;transition:all .2s ease}.preset-btn:hover{color:var(--text);border-color:#ff7a3d80}.preset-btn.active{background:#ff7a3d33;border-color:var(--accent);color:var(--accent)}.compact-control{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}.compact-control label{white-space:nowrap}.compact-control input[type=range]{width:80px;height:4px;accent-color:var(--accent)}.compact-control .value{min-width:24px;text-align:right;color:var(--text)}.model-badge{display:flex;align-items:center;gap:6px;padding:6px 10px;background:#0f1520cc;border:1px solid var(--border);border-radius:6px;font-size:11px;color:var(--muted)}.model-badge.ready{border-color:#5ce3a266;color:var(--success)}.model-badge .badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor}.floating-video-modal{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.floating-video-modal:hover{border-color:#ffffff26}.floating-video-modal video{border:none;outline:none}.floating-video-modal video::-webkit-media-controls{background:linear-gradient(transparent,#000c)}.modal-drag-handle:active{cursor:grabbing}.collapsible-header{display:flex;align-items:center;justify-content:space-between;width:100%;background:transparent;border:none;padding:0;cursor:pointer;color:inherit}.collapsible-header:hover h2{color:var(--text)}.settings-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:1000;opacity:0;pointer-events:none;transition:opacity .3s ease}.settings-overlay.open{opacity:1;pointer-events:auto}.settings-panel{position:fixed;top:0;right:0;bottom:0;width:360px;background:var(--panel);border-left:1px solid var(--border);transform:translate(100%);transition:transform .3s ease;z-index:1001;overflow-y:auto;display:flex;flex-direction:column}.settings-overlay.open .settings-panel{transform:translate(0)}.settings-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border)}.settings-header h2{margin:0;font-size:16px;font-weight:600;color:var(--text);text-transform:none;letter-spacing:0}.settings-close{width:32px;height:32px;border-radius:6px;background:transparent;border:1px solid var(--border);color:var(--muted);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center}.settings-close:hover{color:var(--text);border-color:var(--danger)}.settings-content{flex:1;padding:20px;display:flex;flex-direction:column;gap:24px}.settings-section{display:flex;flex-direction:column;gap:12px}.settings-section h3{margin:0;font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);padding-bottom:8px;border-bottom:1px solid rgba(34,48,69,.4)}.settings-section textarea{width:100%;min-height:100px;resize:vertical;font-family:inherit;font-size:13px;padding:10px 12px;border-radius:8px;border:1px solid var(--border);background:#0a1018cc;color:var(--text)}.settings-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.settings-row label{font-size:13px;color:var(--text)}.settings-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}.settings-row input[type=range]{flex:1;max-width:120px;accent-color:var(--accent)}.settings-row .value{min-width:40px;text-align:right;font-size:12px;color:var(--muted)}.theme-selector{display:grid;grid-template-columns:1fr 1fr;gap:8px}.theme-option{padding:10px 12px;font-size:12px;font-weight:500;background:#0f1520cc;border:1px solid var(--border);border-radius:8px;color:var(--text);cursor:pointer;transition:all .2s ease;text-align:center}.theme-option:hover{border-color:#ffffff4d;transform:translateY(-1px)}.theme-option.active{border-color:var(--accent);box-shadow:0 0 12px #ff7a3d4d}.youtube-input-row{display:flex;gap:8px}.youtube-input-row input{flex:1;padding:10px 12px;font-size:13px;border-radius:8px;border:1px solid var(--border);background:#0a1018cc;color:var(--text)}.youtube-input-row button{padding:10px 16px;font-size:13px;white-space:nowrap}.mic-controls{display:flex;flex-direction:column;gap:10px}.mic-controls select{width:100%;padding:10px 12px;font-size:13px;border-radius:8px;border:1px solid var(--border);background:#0a1018cc;color:var(--text)}.mic-controls .btn-row{display:flex;gap:8px}.mic-controls button{flex:1;padding:10px;font-size:12px}.timing-grid{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:12px;padding:10px;background:#0000004d;border-radius:8px}.timing-grid .timing-label{color:var(--muted)}.timing-grid .timing-value{text-align:right;color:var(--text)}.timing-grid .timing-value.highlight{color:var(--accent);font-weight:600}.system-info-grid{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:12px}.system-info-grid span:nth-child(odd){color:var(--muted)}.system-info-grid span:nth-child(2n){text-align:right;color:var(--text)}.page{max-width:1200px;margin:0 auto;padding:32px 28px 56px}.header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:24px}.title-block{max-width:620px}.eyebrow{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--accent-2);margin:0}h1{font-family:Sora,Segoe UI,sans-serif;font-size:34px;margin:6px 0 8px;letter-spacing:-.5px}h2{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:1.8px;color:var(--muted)}.subhead{margin:0;color:var(--muted);line-height:1.5}.status{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:12px}.pill{padding:6px 12px;border-radius:999px;border:1px solid var(--border);background:#121a26b3;text-transform:uppercase;font-size:10px;letter-spacing:1px;color:var(--muted)}.pill.running{border-color:#5ce3a266;color:var(--success)}.meta{font-size:12px;color:var(--muted)}.layout{display:grid;grid-template-columns:minmax(260px,320px) 1fr;gap:24px;align-items:start}.panel{background:linear-gradient(180deg,rgba(18,26,38,.9),var(--panel));border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:0 18px 32px var(--shadow);animation:fadeUp .45s ease both}.panel.visual{background:transparent;border:none;padding:0;box-shadow:none;display:flex;flex-direction:column;gap:18px}.controls{display:flex;flex-direction:column;gap:18px}.block{display:flex;flex-direction:column;gap:14px;padding-bottom:12px;border-bottom:1px solid rgba(34,48,69,.6)}.block:last-child{border-bottom:none;padding-bottom:0}.stack{display:flex;flex-direction:column;gap:12px}.row{display:flex;flex-wrap:wrap;gap:10px}label.label{font-size:12px;letter-spacing:.6px;color:var(--muted);text-transform:uppercase}select,input{background:#0a1018cc;border:1px solid var(--border);color:var(--text);border-radius:10px;padding:10px 12px;font-size:14px}input[type=number]{width:110px}button{background:linear-gradient(135deg,var(--accent),#ff995a);color:#191013;border:none;border-radius:10px;padding:10px 14px;font-weight:600;cursor:pointer}button.ghost{background:transparent;color:var(--text);border:1px solid var(--border)}button:hover{filter:brightness(1.05)}.meter{margin-top:8px}.meter-label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:6px}.meter-track{background:#0a1018cc;border:1px solid var(--border);border-radius:999px;height:12px;overflow:hidden}.meter-fill{height:100%;background:linear-gradient(90deg,#ff7a3d,#2ad1ff);transition:width .12s linear}.info-line{display:flex;justify-content:space-between;font-size:13px;color:var(--text);gap:12px}.section-label{font-size:11px;text-transform:uppercase;letter-spacing:1.4px;color:#9aa7bdcc}.recommendation{padding:12px;border-radius:12px;border:1px solid rgba(255,122,61,.3);background:#ff7a3d1a;display:flex;flex-direction:column;gap:6px}.big{font-size:24px;margin:4px 0;font-family:Sora,Segoe UI,sans-serif}.muted{color:var(--muted);font-size:12px}.note{color:var(--muted);font-size:11px;margin:0}.error{color:var(--danger);font-size:12px}.figure{background:#0a1018d9;border:1px solid rgba(34,48,69,.9);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 18px 30px var(--shadow);animation:fadeUp .45s ease both}.figure-header{display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}.figure-title{font-weight:600}.figure-meta{font-size:11px;color:var(--muted)}.figure-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:12px;color:var(--muted)}.control-label{text-transform:uppercase;letter-spacing:1px;font-size:11px}.freq-controls{display:flex;align-items:center;gap:8px}.control-sep{font-size:12px;color:var(--muted)}.control-hint{font-size:11px;color:var(--muted)}.spectrogram-frame{display:grid;grid-template-columns:70px 1fr;gap:12px;align-items:stretch}.freq-axis{display:flex;flex-direction:column;justify-content:space-between;font-size:11px;color:var(--muted);padding-right:4px}.plot-canvas{width:100%;border-radius:12px;border:1px solid rgba(34,48,69,.9);background:var(--canvas);display:block}.heatmap-wrap{display:grid;grid-template-columns:1fr 160px;gap:12px;align-items:stretch}.heatmap-labels{display:flex;flex-direction:column;font-size:10px;color:var(--muted);padding-left:6px;text-align:left;overflow-y:hidden}.heatmap-labels span{flex:1 1 0;display:flex;align-items:center;min-height:0;line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.heatmap-scale{display:flex;flex-direction:column;align-items:center;gap:6px}.scale-gradient{width:12px;flex:1;border-radius:6px;background:linear-gradient(180deg,#fbd9a4,#f2a35d,#b56a38 40%,#5a3a20 65%,#0b0f14);border:1px solid rgba(34,48,69,.9)}.scale-labels{display:flex;flex-direction:column;justify-content:space-between;font-size:10px;color:var(--muted);height:100%}.figure-note{margin:0}@keyframes fadeUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 980px){.layout{grid-template-columns:1fr}.status{align-items:flex-start}.spectrogram-frame{grid-template-columns:1fr}.freq-axis{flex-direction:row;justify-content:space-between}.heatmap-wrap{grid-template-columns:1fr}.heatmap-labels{display:none}.heatmap-scale{flex-direction:row;justify-content:space-between}.scale-gradient{width:100%;height:10px}.scale-labels{flex-direction:row;width:100%}.immersive-footer{flex-direction:column;align-items:stretch}.footer-section{flex-wrap:wrap}.footer-divider{display:none}.dynamic-labels{width:140px}.settings-panel{width:100%}}.floating-labels-modal ::-webkit-scrollbar,.floating-stats-modal ::-webkit-scrollbar{width:6px}.floating-labels-modal ::-webkit-scrollbar-track,.floating-stats-modal ::-webkit-scrollbar-track{background:transparent}.floating-labels-modal ::-webkit-scrollbar-thumb,.floating-stats-modal ::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}.floating-labels-modal ::-webkit-scrollbar-thumb:hover,.floating-stats-modal ::-webkit-scrollbar-thumb:hover{background:#fff3}.floating-labels-modal *,.floating-stats-modal *{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}.floating-webcam-modal{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.floating-webcam-modal:hover{border-color:#ffffff26}.floating-webcam-modal video{border:none;outline:none}