:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.video-annotator{background:var(--bg-secondary);border-radius:8px;box-shadow:0 2px 8px var(--shadow-primary);padding:1.5rem;max-width:1200px;margin:2rem auto;transition:background-color .3s ease,box-shadow .3s ease}.video-area{margin-top:1rem;display:flex;justify-content:center;align-items:center}.toolbar{margin-bottom:1rem;display:flex;gap:1rem}.media-container{width:100%;max-width:1200px;margin:0 auto 2rem}.settings-header{display:flex;justify-content:flex-end;margin-bottom:12px;gap:8px}.media-area-wrapper{display:flex;justify-content:flex-start;align-items:flex-start;min-height:700px;width:100%;box-sizing:border-box;gap:16px}.media-area{position:relative;background:var(--bg-secondary);border:2px solid var(--border-primary);border-radius:10px;box-shadow:0 2px 8px var(--shadow-secondary);width:900px;height:700px;max-width:100vw;max-height:80vh;display:flex;justify-content:center;align-items:center;overflow:hidden;box-sizing:border-box;transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}.keypoint-indicator{position:absolute;top:12px;left:12px;background:#ffffffeb;color:#111;padding:6px 18px;border-radius:6px;font-weight:600;font-size:1.1rem;z-index:10;box-shadow:0 1px 4px var(--shadow-quaternary);transition:box-shadow .3s ease}.dark-theme .keypoint-indicator{background:#2d2d2df2;color:var(--text-primary)}.toolbar{width:100%;max-width:900px;margin:0 auto;display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;align-items:center;box-sizing:border-box}.toolbar>div{width:100%;display:flex;flex-direction:column;align-items:center}.toolbar input[type=range]{max-width:100%}.sidebar-compact{width:280px;max-height:700px;background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:8px;box-shadow:0 1px 4px var(--shadow-tertiary);overflow-y:auto;font-size:.85rem;transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}.sidebar-toggle-compact{padding:10px 12px;background:var(--bg-tertiary);border-bottom:1px solid var(--border-primary);cursor:pointer;color:var(--text-primary);-webkit-user-select:none;user-select:none;transition:background-color .2s ease,color .3s ease}.sidebar-toggle-compact:hover{background:var(--bg-accent)}.sidebar-content-compact{background:var(--bg-secondary);transition:background-color .3s ease}.keypoint-item{display:flex;align-items:center;padding:6px 12px;border-bottom:1px solid var(--border-tertiary);transition:background-color .15s ease}.keypoint-item:last-child{border-bottom:none}.keypoint-item:hover{background:var(--bg-quaternary)}.keypoint-index{width:20px;height:20px;background:var(--border-primary);color:var(--text-secondary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:500;margin-right:10px;flex-shrink:0;transition:background-color .3s ease,color .3s ease}.keypoint-item[style*="background: rgb(227, 242, 253)"] .keypoint-index{background:#2196f3;color:#fff}.keypoint-label{font-size:.8rem;color:var(--text-primary);transition:color .3s ease}:root{--bg-primary: #f7f7f7;--bg-secondary: #fff;--bg-tertiary: #f8f9fa;--bg-quaternary: #f5f5f5;--bg-accent: #e9ecef;--text-primary: #111;--text-secondary: #666;--text-tertiary: #888;--border-primary: #e0e0e0;--border-secondary: #ccc;--border-tertiary: #f0f0f0;--shadow-primary: rgba(0,0,0,.08);--shadow-secondary: rgba(0,0,0,.06);--shadow-tertiary: rgba(0,0,0,.1);--shadow-quaternary: rgba(0,0,0,.04)}.dark-theme{--bg-primary: #1a1a1a;--bg-secondary: #2d2d2d;--bg-tertiary: #3a3a3a;--bg-quaternary: #404040;--bg-accent: #4a4a4a;--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-tertiary: #888;--border-primary: #555;--border-secondary: #666;--border-tertiary: #444;--shadow-primary: rgba(0,0,0,.3);--shadow-secondary: rgba(0,0,0,.25);--shadow-tertiary: rgba(0,0,0,.4);--shadow-quaternary: rgba(0,0,0,.2)}.app-container{background:var(--bg-primary);min-height:100vh;transition:background-color .3s ease}.App{font-family:Arial,sans-serif;padding:2rem;color:var(--text-primary);transition:color .3s ease}.App h1{font-size:2.5rem;font-weight:700;line-height:1.2;margin:0 0 1rem}body,h1,h2,h3,h4,h5,h6,label,span,p,button,input{color:var(--text-primary);transition:color .3s ease}