:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#0f0f1a;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}#root{width:100%;min-height:100vh}*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #000;--bg-secondary: #0a0a0a;--bg-tertiary: #141414;--border: #222;--text-primary: #fff;--text-secondary: #888;--text-muted: #555}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh}.app{display:flex;flex-direction:column;min-height:100vh}.app-header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:var(--bg-secondary);border-bottom:1px solid var(--border)}.app-title{font-size:16px;font-weight:500;color:var(--text-primary);display:flex;align-items:center;gap:8px}.error-banner{padding:12px 20px;background:var(--bg-tertiary);border-bottom:1px solid var(--border);color:var(--text-secondary);font-size:13px;display:flex;align-items:center;gap:8px}.main-content{flex:1;display:flex;flex-direction:column}.viewer-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:1px;background:var(--border);flex:1;min-height:0}.video-container{display:flex;align-items:center;justify-content:center;background:var(--bg-primary)}.hand-container{display:flex;align-items:stretch;background:var(--bg-primary)}@media(max-width:1024px){.viewer-grid{grid-template-columns:1fr;grid-template-rows:auto auto}.hand-container{min-height:300px}}.hand-viewer{position:relative;width:100%;height:100%;min-height:300px;background:#000}.hand-labels{position:absolute;top:12px;left:0;right:0;display:flex;justify-content:space-around;z-index:10;pointer-events:none}.hand-label{padding:4px 10px;background:#000000b3;border:1px solid #333;border-radius:4px;font-size:11px;font-weight:500;color:#888;display:flex;align-items:center;gap:4px}.no-data-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#444;font-size:13px;pointer-events:none}.session-loader{display:flex;align-items:center;gap:16px}.select-button{padding:8px 16px;background:#fff;color:#000;border:none;border-radius:4px;font-size:13px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:opacity .2s}.select-button:hover:not(:disabled){opacity:.8}.select-button:disabled{opacity:.5;cursor:not-allowed}.session-info{display:flex;align-items:center;gap:8px}.session-name{font-size:13px;color:#888;font-family:SF Mono,Menlo,monospace}.sync-status{padding:16px 20px;background:#0a0a0a;border-top:1px solid #222}.status-title{margin:0 0 12px;font-size:12px;font-weight:500;color:#666;text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:6px}.status-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.status-card{padding:12px;background:#111;border:1px solid #222;border-radius:4px}.status-label{font-size:10px;color:#666;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.status-value{font-size:18px;font-weight:500;color:#fff;font-family:SF Mono,Menlo,monospace}.status-value.offset-good{color:#fff}.status-value.offset-acceptable{color:#888}.status-value.offset-poor{color:#666}.status-detail{font-size:11px;color:#555;margin-top:4px;display:flex;align-items:center;gap:4px}.offset-adjuster{display:flex;align-items:center;gap:16px;padding:12px;background:#111;border:1px solid #222;border-radius:4px}.adjuster-label{font-size:12px;color:#888;white-space:nowrap}.adjuster-label strong{color:#fff;font-family:SF Mono,Menlo,monospace}.slider-container{flex:1;display:flex;align-items:center;gap:8px}.slider-label{font-size:10px;color:#555;font-family:SF Mono,Menlo,monospace}.offset-slider{flex:1;height:4px;-webkit-appearance:none;appearance:none;background:#333;border-radius:2px;cursor:pointer}.offset-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:#fff;border-radius:50%;cursor:pointer}.reset-btn{padding:6px 12px;background:transparent;border:1px solid #333;border-radius:4px;color:#888;font-size:11px;cursor:pointer;transition:all .2s}.reset-btn:hover{background:#222;color:#fff}@media(max-width:768px){.status-grid{grid-template-columns:repeat(2,1fr)}.offset-adjuster{flex-direction:column;align-items:stretch}}.timeline{padding:16px 20px;background:#0a0a0a;border-top:1px solid #222}.controls{display:flex;align-items:center;gap:4px;margin-bottom:12px}.control-btn{padding:8px;background:transparent;border:1px solid #333;border-radius:4px;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;transition:background .2s}.control-btn:hover{background:#222}.control-btn.play-btn{padding:8px 12px;background:#fff;color:#000;border:none}.control-btn.play-btn:hover{opacity:.9}.time-display{margin-left:16px;font-family:SF Mono,Menlo,monospace;font-size:13px;color:#888}.current-time{color:#fff}.separator{margin:0 6px;color:#444}.rate-selector{margin-left:auto}.rate-selector select{padding:6px 10px;background:#0a0a0a;border:1px solid #333;border-radius:4px;color:#fff;font-size:12px;cursor:pointer}.progress-bar{position:relative;height:4px;background:#222;border-radius:2px;overflow:hidden}.progress-slider{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2}.progress-fill{position:absolute;top:0;left:0;height:100%;background:#fff;border-radius:2px;pointer-events:none;transition:width .05s linear}.video-player{position:relative;width:100%;background:#000;aspect-ratio:16 / 9}.video-player video{width:100%;height:100%;object-fit:contain;cursor:pointer}.video-placeholder{display:flex;align-items:center;justify-content:center}.placeholder-content{display:flex;flex-direction:column;align-items:center;gap:12px;color:#444}.placeholder-icon{opacity:.5}.video-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.play-button{width:64px;height:64px;border-radius:50%;background:#fff;border:none;cursor:pointer;pointer-events:auto;display:flex;align-items:center;justify-content:center;transition:opacity .2s}.play-button:hover{opacity:.9}