:root{font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--primary-color: #2563eb;--primary-hover: #1d4ed8;--text-primary: #1A1A1A;--text-secondary: #6B6B6B;--background-primary: #ffffff;--background-secondary: #F8F9FA;--border-light: #E5E5E5;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-focus: 0 0 0 3px rgba(37, 99, 235, .2);--transition-fast: all .15s ease;--transition: all .2s ease;--transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1)}a{font-weight:500;color:var(--primary-color);text-decoration:inherit}a:hover{color:var(--primary-hover)}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;background-color:var(--background-secondary);color:var(--text-primary)}h1{font-size:3.2em;line-height:1.1}button{border-radius:var(--radius-md);border:1px solid var(--border-light);padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;cursor:pointer;background-color:var(--background-primary);transition:var(--transition)}button:hover{border-color:var(--primary-color);background-color:var(--background-secondary)}button:focus,button:focus-visible{outline:none;box-shadow:var(--shadow-focus)}.ia-panel{display:flex;flex-direction:column;gap:var(--space-3)}.form-row{display:flex;align-items:center;gap:var(--space-2);justify-content:space-between}.form-row label{flex:0 0 120px;font-weight:500;color:var(--text-primary)}.form-row input{flex:1;padding:var(--space-1) var(--space-2);border:1px solid var(--border-light);border-radius:var(--radius-sm);transition:var(--transition-fast)}.form-row input:focus{outline:none;border-color:var(--primary-color);box-shadow:var(--shadow-focus)}.readonly{font-weight:500;color:var(--text-secondary)}.timestamp-row{display:flex;gap:var(--space-2);flex:1}.set-now-button{font-size:.8rem;padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);background-color:var(--background-secondary);border:1px solid var(--border-light);cursor:pointer;white-space:nowrap;transition:var(--transition-fast)}.set-now-button:hover{border-color:var(--primary-color)}.add-ia-button{padding:var(--space-2) var(--space-3);font-size:.85rem;background-color:var(--background-secondary);border:1px solid var(--border-light);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-fast)}.add-ia-button:hover{border-color:var(--primary-color)}.ia-nav-buttons{display:flex;justify-content:space-between;margin-bottom:var(--space-4)}.section-header{font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;margin-bottom:var(--space-3)}.section-divider{height:1px;background:var(--border-light);margin:var(--space-4) 0}.checkbox-group{display:flex;flex-direction:column;gap:var(--space-1)}.checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;color:var(--text-primary);padding:6px 0;transition:var(--transition-fast)}.checkbox-label:hover{color:var(--primary-color)}.checkbox-label input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--primary-color)}.algorithm-selector{display:flex;gap:var(--space-2);margin-bottom:var(--space-4);padding:var(--space-1);background:#f1f3f5;border-radius:var(--radius-md)}.algorithm-option{display:flex;align-items:center;justify-content:center;gap:var(--space-2);flex:1;padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);cursor:pointer;background:transparent;border:1.5px solid transparent;transition:var(--transition)}.algorithm-option:hover:not(.active){background:#fff9}.algorithm-option.active{background:var(--background-primary);border-color:var(--primary-color);box-shadow:var(--shadow-sm)}.algorithm-option input[type=radio]{display:none}.algorithm-option span{font-size:13px;font-weight:500;color:var(--text-secondary)}.algorithm-option.active span{font-weight:600;color:var(--primary-color)}.record-selector-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-2)}.dropdown-wrapper{position:relative;flex:1}.dropdown-trigger{padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);border:1px solid var(--border-light);font-size:14px;cursor:pointer;background-color:var(--background-primary);display:flex;justify-content:space-between;align-items:center;font-weight:600;color:var(--text-primary);transition:var(--transition-fast)}.dropdown-trigger:hover{border-color:var(--primary-color)}.dropdown-arrow{font-size:10px;margin-left:var(--space-2);color:var(--text-secondary)}.dropdown-menu{position:absolute;top:100%;left:0;right:0;background-color:var(--background-primary);border:1px solid var(--border-light);border-radius:var(--radius-md);z-index:1000;box-shadow:var(--shadow-lg);max-height:300px;overflow-y:auto;margin-top:var(--space-1)}.dropdown-search{padding:var(--space-2)}.dropdown-search input{width:100%;padding:var(--space-2);border:1px solid var(--border-light);border-radius:var(--radius-sm);font-size:14px;box-sizing:border-box;transition:var(--transition-fast)}.dropdown-search input:focus{outline:none;border-color:var(--primary-color);box-shadow:var(--shadow-focus)}.dropdown-empty{padding:var(--space-2);color:var(--text-secondary);text-align:center;font-size:13px}.dropdown-group-header{padding:var(--space-2);font-weight:600;background-color:var(--background-secondary);border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-light);font-size:12px;color:var(--text-secondary)}.dropdown-item{padding:var(--space-2) var(--space-4);cursor:pointer;border-bottom:1px solid #f0f0f0;font-size:13px;color:var(--text-primary);transition:var(--transition-fast)}.dropdown-item:hover{background-color:var(--background-secondary)}.dropdown-item.active{background-color:#2563eb14;color:var(--primary-color)}.nav-button{padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);border:1px solid var(--border-light);background:var(--background-secondary);cursor:pointer;font-size:14px;font-weight:600;color:var(--text-primary);transition:var(--transition-fast);min-width:40px}.nav-button:hover{border-color:var(--primary-color);color:var(--primary-color)}.stats-row{display:flex;gap:var(--space-2);justify-content:space-between}.stat-item{display:flex;flex-direction:column;align-items:center;flex:1;padding:var(--space-2);background:var(--background-secondary);border-radius:var(--radius-sm)}.stat-label{font-size:11px;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.03em}.stat-value{font-size:14px;font-weight:600;color:var(--text-primary);font-variant-numeric:tabular-nums}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.dropdown-menu{animation:slideDown .15s ease-out}.dropdown-menu::-webkit-scrollbar{width:6px}.dropdown-menu::-webkit-scrollbar-track{background:var(--background-secondary);border-radius:3px}.dropdown-menu::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:3px}.dropdown-menu::-webkit-scrollbar-thumb:hover{background:#ccc}.layer-row{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) 0}.layer-label{font-size:14px;font-weight:500;color:var(--text-primary)}.layer-toggles{display:flex;gap:var(--space-1)}.toggle-btn{padding:var(--space-1) var(--space-2);font-size:12px;font-weight:500;border:1px solid var(--border-light);border-radius:var(--radius-sm);background:var(--background-secondary);color:var(--text-secondary);cursor:pointer;transition:var(--transition-fast);min-width:36px}.toggle-btn:hover{border-color:var(--primary-color);color:var(--primary-color)}.toggle-btn.active{background:var(--primary-color);border-color:var(--primary-color);color:#fff}.toggle-btn.single{min-width:44px}.inline-controls{display:flex;gap:var(--space-4)}.inline-control{display:flex;align-items:center;gap:var(--space-2);flex:1}.inline-control label{font-size:13px;font-weight:500;color:var(--text-primary);white-space:nowrap}.inline-control input[type=number]{width:60px;padding:var(--space-1) var(--space-2);border:1px solid var(--border-light);border-radius:var(--radius-sm);font-size:13px;transition:var(--transition-fast)}.inline-control input[type=number]:focus{outline:none;border-color:var(--primary-color);box-shadow:var(--shadow-focus)}.subsection{margin-left:var(--space-4);padding-left:var(--space-3);border-left:2px solid var(--border-light);display:flex;flex-direction:column;gap:var(--space-2)}.subsection-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.subsection-label{font-size:12px;font-weight:500;color:var(--text-secondary);min-width:60px}.algorithm-selector.compact{margin-bottom:0;padding:2px;gap:var(--space-1)}.algorithm-selector.compact .algorithm-option{padding:var(--space-1) var(--space-2)}.algorithm-selector.compact .algorithm-option span{font-size:11px}.inline-controls.compact{gap:var(--space-2)}.inline-controls.compact .inline-control label{font-size:11px}.inline-controls.compact .inline-control input[type=number]{width:50px;padding:2px var(--space-1);font-size:11px}.app{font-family:Inter,system-ui,-apple-system,sans-serif;min-height:100vh;padding:var(--space-8);background-color:var(--background-secondary);box-sizing:border-box}.layout{display:flex;justify-content:center;align-items:flex-start;gap:var(--space-8)}.player-container{position:relative;width:960px;height:540px;background-color:#000;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}.control-panel{background-color:var(--background-primary);padding:var(--space-4);border-radius:var(--radius-lg);width:300px;box-shadow:var(--shadow-md);border:1px solid var(--border-light);display:flex;flex-direction:column;gap:var(--space-3)}.control-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-1)}.control-row label{flex:1;font-size:14px;font-weight:500;color:var(--text-primary)}.control-row input[type=number]{width:70px;padding:var(--space-2);font-size:14px;font-family:Inter,monospace;border:1px solid var(--border-light);border-radius:var(--radius-sm);transition:var(--transition-fast)}.control-row input[type=number]:focus{outline:none;border-color:var(--primary-color);box-shadow:var(--shadow-focus)}.control-row input[type=checkbox]{transform:scale(1.1);margin-right:var(--space-2);accent-color:var(--primary-color)}.notes{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-2)}.notes label{font-size:14px;font-weight:500;color:var(--text-primary)}.notes textarea{width:100%;min-height:120px;padding:var(--space-2);font-family:Inter,monospace;font-size:14px;border:1px solid var(--border-light);border-radius:var(--radius-sm);resize:vertical;background-color:var(--background-secondary);transition:var(--transition-fast)}.notes textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:var(--shadow-focus)}.notes button{padding:var(--space-3) var(--space-4);background-color:var(--primary-color);color:#fff;border:none;border-radius:var(--radius-md);font-weight:500;font-size:14px;cursor:pointer;width:100%;text-align:center;transition:var(--transition)}.notes button:hover{background-color:var(--primary-hover)}.app-title{font-size:28px;font-weight:600;text-align:center;margin-bottom:var(--space-6);color:var(--text-primary)}@media (max-width: 800px){.app{padding:var(--space-4)}.layout{flex-direction:column;align-items:center}.player-container,.control-panel{width:100%;max-width:640px}.player-container{height:auto;aspect-ratio:16 / 9}}
