:root{--bg:#d4d9e0;--surface:#fff;--inset:#eef0f3;--control:#e9ebef;--control-hover:#dfe2e7;--control-border:#b9c0ca;--border:#d9dde4;--text:#14171c;--text-secondary:#4b5563;--text-muted:#4b5563;--accent:#2f6f14;--accent-text:#fff;--selected:#3a3f48;--selected-text:#fff;--on-bg:#e6f3d6;--on-border:#7fb24a;--on-text:#234f0c;--amber:#92400e;--amber-stroke:#b45309;--warn-bg:#fdf1dc;--warn-border:#d6a24a;--warn-text:#3f2804;--error-box:#fde8e8;--error-box-border:#f2a3a3;--error-icon:#b91c1c;--error:#c2362f;--left:#2a78d6;--right:#eb6834;--middle:#8a8f9a;--joint:#2b2f36;--grid-major:#c4c8d2;--grid-minor:#e4e7ee;--scene:#fff}@media (prefers-color-scheme:dark){:root{--bg:#0d0f13;--surface:#12151b;--inset:#171a21;--control:#1c2028;--control-hover:#262b35;--control-border:#2a2f3a;--border:#22262f;--text:#e8eaee;--text-secondary:#c7cdd8;--text-muted:#a3acbb;--accent:#b6f35c;--accent-text:#10140a;--selected:#e8eaee;--selected-text:#0d0f13;--on-bg:#2a3322;--on-border:#4a6a28;--on-text:#d4ff8f;--amber:#f5a524;--amber-stroke:#f5a524;--warn-bg:#292114;--warn-border:#8f631c;--warn-text:#ffe6b8;--error-box:#dc262629;--error-box-border:#f871718c;--error-icon:#fca5a5;--error:#ec6b63;--left:#3987e5;--right:#d95926;--middle:#8a8f9a;--joint:#eef0f4;--grid-major:#2a303b;--grid-minor:#1a1e25;--scene:#12151b;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}[hidden]{display:none!important}body{padding-block:12px 20px;padding-inline:max(16px, env(safe-area-inset-left,0px)) max(16px, env(safe-area-inset-right,0px));background:var(--bg);color:var(--text);margin:0;font:15px/1.5 system-ui,sans-serif}.app-header{grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;display:grid}.brand,.mode-switch,.file-buttons{align-items:center;gap:8px;display:flex}.app-name{font:700 1.6rem/1 system-ui}.file-buttons{grid-column:3;justify-self:end}button,.mode-switch,.notice,.panel,.stage,.conditions{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:10px;padding:6px 14px}button,.mode-switch{border-color:var(--control-border);background:var(--control)}button{font:inherit;cursor:pointer;transition:background-color .15s}button:hover{background:var(--control-hover)}.mode-switch button[aria-pressed=true],.file-choice button{background:var(--selected);color:var(--selected-text)}.app-name .dot{color:var(--accent)}.badge{border:1px solid var(--control-border);color:var(--text-muted);border-radius:999px;padding:1px 8px;font-size:12px;line-height:1.4}button.primary,button.primary:hover{background:var(--accent);color:var(--accent-text);font-weight:600}:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.layout,.extracting{grid-template-columns:minmax(200px,360px) 1fr;gap:16px;display:grid}.layout>.extracting,.progress{grid-column:1/-1}.layout:has(>.video-panel[hidden])>section{grid-column:1/-1}.video-panel video,.preview-2d{aspect-ratio:9/16;background:var(--scene);width:100%}.panel{place-items:center;display:grid}.panel,.stage{min-height:60vh}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.empty-notice{place-items:center;display:grid}.preview-2d{max-width:100%;display:block}.panel:has(.drop-zone){border:2px dashed var(--border)}.stack h1{font-size:1.5rem}.file-cards{gap:16px;padding:0;display:grid}.file-card{border:1px solid var(--border);background:var(--inset);border-radius:10px;padding:14px 18px;display:grid}.file-card.chosen{border-color:var(--on-border);background:var(--on-bg)}.file-status.empty-notice{place-items:start}.layout>.pair-notice{border-color:var(--warn-border);background:var(--warn-bg);color:var(--warn-text);grid-column:1/-1;align-items:center;gap:10px;padding:8px 16px;display:flex}.pair-notice p{margin:0}.pair-notice>.icon{width:20px;height:20px;color:var(--amber-stroke)}.stage{position:relative}.stage>canvas{position:absolute;inset:0}.layout{--top:2}.layout:has(>.pair-notice[hidden]){--top:1}.layout:has(>.viewing:not([hidden]))>.video-panel{grid-column:1;grid-row:var(--top) / span 3;grid-template-rows:subgrid;display:grid}.layout>.viewing{grid-column:1/-1;grid-row:var(--top) / span 4;grid-template-columns:subgrid;grid-template-rows:subgrid;display:grid}.viewing>*{grid-column:2;margin:0}.video-panel p{margin:4px 0 0}.video-panel .video-frame>.legend{margin:0 auto}.pair-notice .close{background:0 0;border:0;margin-left:auto}.viewing>.stage{grid-row:1}.pose-badge,.stage-hint{z-index:1;pointer-events:none;grid-row:1;margin:12px;font-size:.8rem}.pose-badge{border:1px solid var(--border);background:var(--surface);border-radius:999px;place-self:start center;margin-top:6px;padding:2px 12px}.pose-badge:empty{border:0;padding:0}.stage-hint,.video-duration{color:var(--text-muted);align-self:end}.video-panel .video-name,.viewing>.pose-name{margin-top:4px;font-weight:600}.viewing>.pose-name{grid-row:2}.viewing>.controls{border:1px solid var(--border);background:var(--surface);border-radius:10px;grid-area:4/1/auto/-1;grid-template-columns:auto auto 1fr auto auto;align-items:center;gap:12px 16px;padding:12px 20px;display:grid;position:relative}.controls input[type=range]{width:100%;accent-color:var(--text)}.controls .play{background:var(--selected);width:58px;height:52px;color:var(--selected-text);border:0;border-radius:14px}.time,.frame-count{font-variant-numeric:tabular-nums;font-size:.9rem}.layout:has(>.drop-hint:not([hidden]))>section{grid-column:2}.drop-hint{border:2px dashed var(--border);min-height:60vh;color:var(--text-muted);border-radius:10px;place-content:center;justify-items:center;gap:4px;font-size:.85rem;display:grid}.drop-hint strong{color:var(--text);font-size:1rem}.icon{flex:none;width:16px;height:16px}.drop-hint .icon{width:36px;height:36px}[data-testid=idle-view] .stack,[data-testid=idle-extract] .stack{max-width:34rem}.lead{color:var(--text-secondary)}.file-choice{align-items:center;gap:12px;display:flex}.file-choice p{flex:1;margin:0;display:grid}.file-meta{color:var(--text-muted);font-size:.8rem}.file-choice button{font-weight:600}.file-choice .icon{width:22px;height:22px}:is(.file-choice:not(.chosen) svg:has(>use[href$=\#icon-check]),.file-choice.chosen svg:not(:has(>use[href$=\#icon-check]))){display:none}.file-choice.chosen button{color:var(--on-text)}.file-choice svg:has(>use[href$=\#icon-check]){color:var(--on-text)}.file-choice.chosen button{background:0 0;border:0}.conditions{background:var(--inset);margin-block:24px;padding:16px 20px;font-size:.9rem}.conditions h2{margin:0 0 8px;font-size:1rem}.conditions ul{padding:0;list-style:none}.conditions li{align-items:center;gap:10px;margin-block:6px;display:flex}.conditions .icon{width:18px;height:18px;color:var(--on-text)}[data-testid=extract-button]{padding:10px 28px;font-size:1.1rem}.extract-status{grid-area:1/2;justify-self:center;margin:0}.extract-status:before{content:"●";color:var(--amber);margin-right:10px}.preview-2d{object-fit:contain;border-radius:10px}.extracting p{margin:0}.extract-caption{color:var(--text-muted);font-size:.8rem;display:grid}.extract-caption .video-name,.extracting>.pose-name{color:var(--text);font-size:.9rem;font-weight:600}.extracting>.progress{border:1px solid var(--border);background:var(--surface);border-radius:10px;grid-template-columns:auto 1fr auto;align-items:baseline;gap:12px;padding:16px 20px;display:grid}.progress h2{margin:0;font-size:1.1rem}.progress-detail,.progress p{color:var(--text-muted);font-size:.85rem}.progress progress{width:100%;accent-color:var(--accent);grid-column:1/-1}.progress p{grid-column:1/3}.progress-detail,.progress button{justify-self:end}button.primary,.mode-switch button[aria-pressed=true],.file-choice button{border-color:#0000}.mode-switch{padding:3px}.mode-switch button{color:var(--text-secondary);background:0 0;border:0;font-size:14px}.mode-switch button[aria-pressed=true]{font-weight:600}.conditions li,.extract-status,.progress-count,.time,.frame-count,.pose-badge,.file-card:not(.chosen) .file-status{color:var(--text-secondary)}.conditions>p,[data-testid=idle-view] .stack>p:last-child{color:var(--text-muted)}.conditions>p{font-size:13px}.drop-hint,.file-card:not(.chosen),.conditions{border-color:var(--control-border)}.panel:has(.drop-zone){border-color:var(--control-border)}.drop-hint{background:var(--surface)}.conditions .icon{color:var(--accent)}.file-choice svg:has(>use[href$=\#icon-check]){color:var(--accent)}.extract-status:before{color:var(--amber-stroke);vertical-align:middle;font-size:.85em}.progress progress{appearance:none;border:0;border-radius:999px;height:10px;overflow:hidden}.progress progress::-webkit-progress-bar{background:var(--control-border)}.progress progress::-webkit-progress-value{background:var(--accent)}:root{--media-h:clamp(240px, 100dvh - 370px, 640px)}.layout,.extracting{grid-template-columns:min(360px, var(--media-h) * 9 / 16) 1fr}.panel,.drop-hint{min-height:calc(100dvh - 128px)}.extracting>.stage,.viewing>.stage{min-height:0}.panel,.stage,.layout>.extracting>.progress,.viewing>.controls{border-radius:18px}.file-card,.conditions,.drop-hint,.video-panel video,.preview-2d{border-radius:14px}button.link{color:var(--accent);background:0 0;border:0;padding:0;text-decoration:underline}.error-stack{max-width:520px;font-size:15px;line-height:1.5}.error-stack h1{margin:16px 0 8px;font-size:24px}.error-detail{color:var(--text-secondary)}.error-icon{border:1px solid var(--error-box-border);background:var(--error-box);width:48px;height:48px;color:var(--error-icon);border-radius:14px;place-items:center;display:grid}.error-icon .icon{width:24px;height:24px}[data-testid=back-button]{padding:12px 24px}@media (prefers-reduced-motion:no-preference){.extract-status:before{animation:1.2s ease-in-out infinite pulse;display:inline-block}}@keyframes pulse{50%{opacity:.3;transform:scale(.7)}}button:has(>.icon){align-items:center;gap:8px;display:inline-flex}.file-choice .icon{color:var(--text-secondary)}.file-choice.chosen button{padding-right:0;font-weight:500}.pair-notice .close{color:inherit}.stack h1{margin:0 0 8px}.stack .lead{margin:0 0 24px}.file-cards{gap:24px;margin:0 0 24px}.conditions h2{font-size:14px}.conditions ul{margin:0 0 12px}.conditions>p{margin:0}.drop-hint{min-height:0;height:var(--media-h);align-self:start}.video-panel video,.preview-2d{border:1px solid var(--control-border)}.stage{overflow:hidden}.error-stack h1{margin-top:16px}dialog.confirm{border:1px solid var(--border);background:var(--surface);max-width:520px;color:var(--text);border-radius:18px;padding:24px 28px}dialog.confirm::backdrop{background:#0d0f1373}.confirm h2{margin:0 0 8px;font-size:20px}.confirm p{color:var(--text-secondary);margin:0}.confirm .confirm-actions{justify-content:flex-end;gap:10px;margin-top:20px;display:flex}button.danger{border-color:var(--error-box-border);background:var(--error-box);color:var(--error-icon)}.confirm button[value=cancel]{background:var(--surface)}.video-frame{position:relative}.video-overlay{object-fit:contain;pointer-events:none;width:calc(100% - 2px);height:calc(100% - 2px);position:absolute;inset:1px}.video-frame.mirrored>video,.video-frame.mirrored>.video-overlay{transform:scaleX(-1)}.legend{top:6px;background:color-mix(in srgb, var(--surface) 92%, transparent);width:fit-content;max-width:calc(100% - 16px);color:var(--text);white-space:nowrap;pointer-events:none;border-radius:999px;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 9px;margin:0 auto;padding:3px 10px;font-size:.75rem;display:flex;position:absolute;inset-inline:0}.legend-item{align-items:center;gap:6px;display:inline-flex}.line{border-radius:2px;width:14px;height:4px}.line-left{background:var(--left)}.line-right{background:var(--right)}.line-middle{background:var(--middle)}.mirror-note:before{content:"· ";font-weight:400}.video-panel .video-tools{flex-wrap:wrap;align-self:start;gap:8px;margin-top:6px;display:flex}.video-tools button[aria-pressed=true]{border-color:var(--on-border);background:var(--on-bg);color:var(--on-text)}.viewing>.view-row{grid-row:3;place-self:start;margin-top:6px}.tool-group{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.segmented{border:1px solid var(--control-border);background:var(--control);border-radius:12px;flex-wrap:nowrap;gap:2px;padding:3px}.segmented button{color:var(--text-secondary);background:0 0;border:0;border-radius:9px}.segmented button:hover{background:var(--control-hover)}.segmented button[aria-pressed=true]{background:var(--selected);color:var(--selected-text);font-weight:600}.ab-group button{color:var(--amber)}.ab-note{color:var(--amber);font-size:.8rem;position:absolute;top:calc(100% + 4px);right:20px}.range-wrap{padding-top:16px;position:relative}.ab-band{border:1.5px solid var(--amber-stroke);background:color-mix(in srgb, var(--amber-stroke) 14%, transparent);pointer-events:none;border-radius:6px;height:20px;position:absolute;bottom:2px}.ab-label{color:var(--amber-stroke);font-size:.7rem;font-weight:700;position:absolute;top:0;transform:translate(-50%)}.layout:has(>.viewing:not([hidden]))>.video-panel{z-index:1;position:relative}.layout:has(>.viewing:not([hidden])){grid-template-columns:max(min(360px, var(--media-h) * 9 / 16), 240px) 1fr;--media-h:clamp(240px, 100dvh - 254px, 640px);row-gap:8px}.layout:has(>.viewing:not([hidden])) .video-panel video{height:var(--media-h);aspect-ratio:auto}.layout:has(>.pair-notice:not([hidden])){--media-h:clamp(240px, 100dvh - 372px, 640px)}.video-tools button,.view-row button,.controls .ab-group button{padding:4.5px 10.5px;font-size:.75em}.video-tools .icon{width:.9em;height:.9em}.segmented{border-radius:9px;padding:2px}.segmented button{border-radius:7px}.controls .play{border-radius:11px;width:44px;height:39px;font-size:.75em}.legend-colors{align-items:center;gap:2px 9px;display:flex}.video-panel .video-name,.viewing>.pose-name,.extracting>.pose-name{font-family:Arial Narrow,Roboto Condensed,Liberation Sans Narrow,Nimbus Sans Narrow,sans-serif;font-size:.8rem;font-weight:400;font-stretch:75%}.viewing>.view-row{flex-wrap:wrap;align-items:center;gap:8px 12px;display:flex}
