:root{--bg-app:#080b10;--bg-surface:#0f1319;--bg-glass:#161b228c;--bg-glass-active:#ffffff12;--border-glass:#ffffff14;--border-glass-hover:#ffffff26;--text-primary:#f0f6fc;--text-muted:#8b949e;--text-bright:#fff;--accent-amber:#f59e0b;--accent-amber-glow:#f59e0b59;--accent-blue:#38bdf8;--accent-blue-glow:#38bdf84d;--accent-red:#ef4444;--accent-red-glow:#ef444466;--accent-green:#10b981;--font-sans:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", "Courier New", monospace;--shadow-premium:0 16px 40px #00000080;--shadow-glow:0 0 15px #38bdf826;--radius-lg:16px;--radius-md:10px;--radius-sm:6px;--radius-pill:9999px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font:16px var(--font-sans);color:var(--text-primary);background:var(--bg-app);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-app);background-image:radial-gradient(at 0 0,#38bdf808 0,#0000 50%),radial-gradient(at 100% 100%,#f59e0b05 0,#0000 50%);background-attachment:fixed;flex-direction:column;min-height:100vh;display:flex}#app{flex-direction:column;flex:1;min-height:100vh;display:flex}.container{flex-direction:column;flex:1;gap:24px;width:100%;max-width:1000px;margin:0 auto;padding:24px 20px;display:flex}header{text-align:center;flex-direction:column;align-items:center;gap:6px;margin-bottom:4px;display:flex}.logo-wrapper{justify-content:center;align-items:center;gap:10px;display:inline-flex}.logo-dot{background-color:var(--accent-blue);width:8px;height:8px;box-shadow:0 0 10px var(--accent-blue-glow);border-radius:50%}header h1{letter-spacing:-.02em;text-transform:uppercase;background:linear-gradient(135deg, var(--text-bright) 40%, var(--text-muted) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:24px;font-weight:700}.subtitle{color:var(--text-muted);letter-spacing:.05em;text-transform:uppercase;font-size:13px;font-weight:400}.live-badge{color:#f87171;border-radius:var(--radius-pill);text-transform:uppercase;letter-spacing:.06em;background:#ef44441f;border:1px solid #ef444440;align-items:center;gap:6px;padding:3px 10px;font-size:11px;font-weight:700;line-height:1;display:inline-flex}.live-badge:before{content:"";background-color:var(--accent-red);border-radius:50%;width:6px;height:6px;animation:1.8s cubic-bezier(.45,0,.55,1) infinite pulse-ring;display:inline-block;box-shadow:0 0 #ef444480}@keyframes pulse-ring{0%{box-shadow:0 0 #ef444480}70%{box-shadow:0 0 0 5px #ef444400}to{box-shadow:0 0 #ef444400}}.player-section{background:var(--bg-glass);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-glass);border-radius:var(--radius-lg);box-shadow:var(--shadow-premium);flex-direction:column;gap:20px;padding:24px;display:flex}.viewport-card{border-radius:var(--radius-md);background:#000;border:1px solid #ffffff0d;position:relative;overflow:hidden;box-shadow:inset 0 0 20px #000c}.image-container{aspect-ratio:4/3;background:#000;justify-content:center;align-items:center;width:100%;display:flex;position:relative}#camera-image{object-fit:contain;width:100%;height:100%;transition:opacity .15s ease-in-out}.camera-lens-overlay{pointer-events:none;opacity:.85;background:radial-gradient(circle,#0000 70%,#00000073 100%) 0 0/100% 100%,linear-gradient(#12101000 50%,#0000000d 50%) 0 0/100% 4px,linear-gradient(90deg,#ff000005,#00ff0003,#0000ff05) 0 0/6px 100%;position:absolute;inset:0}.timestamp-display{font-family:var(--font-mono);color:var(--text-primary);background:#0f1319d9;border-top:1px solid #ffffff0d;justify-content:space-between;align-items:center;padding:14px 18px;font-size:13px;display:flex}.timestamp-left{align-items:center;gap:8px;display:flex}.active-pulse-dot{background-color:var(--text-muted);border-radius:50%;width:6px;height:6px;transition:background-color .3s}.active-pulse-dot.live{background-color:var(--accent-green);box-shadow:0 0 8px var(--accent-green);animation:1.2s infinite alternate pulse-live-dot}@keyframes pulse-live-dot{0%{opacity:.5}to{opacity:1}}#timestamp{letter-spacing:.02em;font-weight:500}.frame-badge{border-radius:var(--radius-sm);color:var(--text-muted);background:#ffffff0f;border:1px solid #ffffff1a;padding:2px 8px;font-size:11px}.controls-deck{border-radius:var(--radius-md);background:#ffffff05;border:1px solid #ffffff0a;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;padding:12px 16px;display:flex}.playback-controls{align-items:center;gap:10px;display:flex}.ctrl-btn{background:var(--bg-glass-active);border:1px solid var(--border-glass);color:var(--text-primary);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:42px;height:42px;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.ctrl-btn:hover:not(:disabled){border-color:var(--border-glass-hover);background:#ffffff1f;transform:scale(1.05)}.ctrl-btn:active:not(:disabled){transform:scale(.95)}.ctrl-btn:disabled{opacity:.35;cursor:not-allowed}.btn-accent{background:var(--accent-amber);border-color:var(--accent-amber);color:#000;width:48px;height:48px;box-shadow:0 4px 12px var(--accent-amber-glow)}.btn-accent:hover:not(:disabled){color:#000;background:#fbbf24;border-color:#fbbf24;box-shadow:0 6px 16px #f59e0b80}.btn-accent svg{fill:#000}.speed-control{flex:1;align-items:center;gap:12px;min-width:220px;font-size:13px;display:flex}.speed-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;font-size:11px;font-weight:500}.slider-track-wrapper{flex:1;align-items:center;display:flex}input[type=range]{appearance:none;cursor:pointer;background:0 0;outline:none;width:100%}input[type=range]::-webkit-slider-runnable-track{border-radius:var(--radius-pill);background:#ffffff1a;border:none;width:100%;height:6px;transition:background .2s}input[type=range]:hover::-webkit-slider-runnable-track{background:#ffffff26}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--text-bright);border:2px solid var(--bg-surface);border-radius:50%;width:16px;height:16px;margin-top:-5px;transition:all .15s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 6px #00000080}input[type=range]:active::-webkit-slider-thumb{background:var(--accent-amber);box-shadow:0 0 10px var(--accent-amber-glow);transform:scale(1.2)}input[type=range]:hover::-webkit-slider-thumb{background:var(--accent-amber);box-shadow:0 0 10px var(--accent-amber-glow);transform:scale(1.2)}input[type=range]::-moz-range-track{border-radius:var(--radius-pill);background:#ffffff1a;border:none;width:100%;height:6px}input[type=range]::-moz-range-thumb{background:var(--text-bright);border:2px solid var(--bg-surface);border-radius:50%;width:16px;height:16px;transition:all .15s;box-shadow:0 2px 6px #00000080}input[type=range]:hover::-moz-range-thumb{background:var(--accent-amber);box-shadow:0 0 10px var(--accent-amber-glow)}.timeline-wrapper{margin-bottom:4px;padding:8px 0}.timeline-wrapper input[type=range]::-webkit-slider-runnable-track{background:#ffffff1f;height:8px}.timeline-wrapper input[type=range]::-webkit-slider-thumb{background:var(--accent-blue);width:20px;height:20px;box-shadow:0 0 10px var(--accent-blue-glow);margin-top:-6px}.timeline-wrapper input[type=range]:hover::-webkit-slider-thumb{background:var(--text-bright);box-shadow:0 0 15px #fff6}.speed-badge{font-family:var(--font-mono);border-radius:var(--radius-sm);color:var(--text-muted);text-align:center;background:#ffffff0d;border:1px solid #ffffff14;min-width:60px;padding:4px 10px;font-size:12px;font-weight:600}.range-selector{border-radius:var(--radius-pill);background:#ffffff08;border:1px solid #ffffff0f;gap:2px;margin:6px 0;padding:4px;display:flex}.range-selector .range-btn{font-family:var(--font-sans);color:var(--text-muted);border-radius:var(--radius-pill);cursor:pointer;white-space:nowrap;text-align:center;background:0 0;border:none;flex:1;padding:10px 14px;font-size:13px;font-weight:500;transition:all .25s cubic-bezier(.4,0,.2,1)}.range-selector .range-btn:hover{color:var(--text-primary);background:#ffffff0a}.range-selector .range-btn.active{color:var(--text-bright);background:var(--bg-glass-active);border:1px solid #ffffff14;padding-top:9px;padding-bottom:9px;box-shadow:0 2px 8px #0003,inset 0 1px #ffffff14}.export-section{flex-direction:column;align-items:center;gap:12px;margin-top:6px;display:flex}.export-btn{width:100%;max-width:280px;color:var(--text-primary);font-family:var(--font-sans);border-radius:var(--radius-pill);cursor:pointer;background:linear-gradient(#ffffff0f 0%,#ffffff05 100%);border:1px solid #ffffff1a;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-size:14px;font-weight:600;transition:all .25s cubic-bezier(.4,0,.2,1);display:inline-flex;box-shadow:0 4px 12px #00000040}.export-btn:hover:not(:disabled){background:#ffffff14;border-color:#fff3;transform:translateY(-1px);box-shadow:0 6px 16px #00000059}.export-btn:active:not(:disabled){transform:translateY(0)}.export-btn:disabled{opacity:.4;cursor:not-allowed}.export-icon{transition:transform .2s}.export-btn:hover:not(:disabled) .export-icon{transform:translateY(1px)}.progress-bar{border:1px solid var(--accent-blue-glow);border-radius:var(--radius-md);font-family:var(--font-mono);color:var(--accent-blue);background:#38bdf814;padding:10px 18px;font-size:13px;box-shadow:0 0 10px #38bdf80d}.animate-fade-in{animation:.4s cubic-bezier(.16,1,.3,1) forwards fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}dialog.bottom-sheet{background:var(--bg-surface);border:1px solid var(--border-glass);border-radius:var(--radius-lg);box-shadow:var(--shadow-premium);z-index:1000;opacity:0;outline:none;width:calc(100% - 40px);max-width:480px;margin:auto;padding:0;transition:opacity .25s cubic-bezier(.16,1,.3,1),transform .25s cubic-bezier(.16,1,.3,1);overflow:hidden;transform:scale(.95)}dialog.bottom-sheet[open]{opacity:1;transform:scale(1)}dialog.bottom-sheet::backdrop{-webkit-backdrop-filter:blur(6px);opacity:0;background:#000000b3;transition:opacity .25s ease-out}dialog.bottom-sheet[open]::backdrop{opacity:1}.bottom-sheet-drag-handle{display:none}.bottom-sheet-content{flex-direction:column;display:flex}.modal-header{border-bottom:1px solid #ffffff0f;justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.modal-header h2{color:var(--text-bright);font-size:18px;font-weight:600}.modal-close{color:var(--text-muted);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:32px;height:32px;font-size:20px;transition:color .15s;display:inline-flex}.modal-close:hover{color:var(--text-bright)}.modal-body{padding:24px}.date-range-group{flex-direction:column;gap:20px;display:flex}.date-time-input{flex-direction:column;gap:8px;display:flex}.date-time-input label{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-size:12px;font-weight:600}.input-row{grid-template-columns:1.2fr .8fr;gap:12px;display:grid}.date-time-input input[type=date],.date-time-input select{border-radius:var(--radius-md);font-family:var(--font-sans);color:var(--text-primary);background:#0003;border:1px solid #ffffff1a;outline:none;width:100%;padding:12px 14px;font-size:14px;transition:all .2s}.date-time-input input[type=date]:focus,.date-time-input select:focus{border-color:var(--accent-blue);box-shadow:0 0 0 3px var(--accent-blue-glow);background:#0000004d}.modal-footer{background:#0000001a;border-top:1px solid #ffffff0f;justify-content:flex-end;gap:12px;padding:20px 24px;display:flex}.btn-primary,.btn-secondary{border-radius:var(--radius-pill);cursor:pointer;font-size:14px;font-weight:600;font-family:var(--font-sans);padding:12px 20px;transition:all .2s}.btn-primary{background:var(--accent-blue);border:1px solid var(--accent-blue);color:#000;box-shadow:0 4px 12px var(--accent-blue-glow)}.btn-primary:hover{background:#7dd3fc;border-color:#7dd3fc;transform:translateY(-1px)}.btn-secondary{color:var(--text-primary);background:0 0;border:1px solid #ffffff26}.btn-secondary:hover{background:#ffffff0d;border-color:#ffffff40}footer{text-align:center;color:var(--text-muted);flex-direction:column;gap:6px;padding:20px 0;font-size:13px;display:flex}footer a{color:var(--accent-blue);text-decoration:none}footer a:hover{text-decoration:underline}@media (width<=768px){.container{gap:12px;padding:12px 12px 24px}header{margin-bottom:4px}header h1{font-size:20px}.subtitle{font-size:11px}.player-section{border-radius:var(--radius-md);gap:14px;padding:14px}.image-container{border-radius:var(--radius-sm)}.timestamp-display{padding:10px 12px;font-size:11px}.controls-deck{flex-direction:column;align-items:stretch;gap:16px;padding:12px}.playback-controls{justify-content:space-around}.speed-control{min-width:100%}.range-selector{scrollbar-width:none;-webkit-overflow-scrolling:touch;border-radius:var(--radius-md);overflow-x:auto}.range-selector::-webkit-scrollbar{display:none}.range-selector .range-btn{flex:none;padding:10px 16px;font-size:12px}dialog.bottom-sheet{opacity:1;border:none;border-top:1px solid #ffffff1a;border-radius:20px 20px 0 0;width:100%;max-width:100vw;margin:0;transition:transform .3s cubic-bezier(.16,1,.3,1);position:fixed;inset:auto 0 0;transform:translateY(100%)}dialog.bottom-sheet[open]{transform:translateY(0)}.bottom-sheet-drag-handle{border-radius:var(--radius-pill);background:#fff3;width:36px;height:4px;margin:12px auto 4px;display:block}.modal-header{padding:12px 20px 16px}.modal-body{padding:20px}.modal-footer{padding:16px 20px}.input-row{grid-template-columns:1fr;gap:8px}}