@layer tokens,base,components;@layer tokens{:root{color-scheme:light dark;--surface-background: light-dark(#f3f3f3, #1a1a1a);--surface-default: light-dark(#ffffff, #212121);--surface-panel: light-dark(#f7f7f7, #262626);--surface-editor: light-dark(#fafafa, #1e1e1e);--surface-elevated: light-dark(#ffffff, #2b2b2b);--surface-modal: light-dark(#ffffff, #303030);--surface-scrim: light-dark(rgb(243 243 243 / 88%), rgb(26 26 26 / 88%));--text-default: light-dark(#1f1f1f, #e4e4e4);--text-muted: light-dark(#5f5f5f, #a0a0a0);--text-hidden: light-dark(#8a8a8a, #707070);--text-disabled: light-dark(#ababab, #555555);--text-placeholder: light-dark(#999999, #6e6e6e);--text-accent: light-dark(#1f5fbf, #7aaef0);--text-selected: light-dark(#17488f, #b5d1f7);--text-on-accent: light-dark(#ffffff, #0f1a2a);--status-info: light-dark(#1f5fbf, #7aaef0);--status-success: light-dark(#2f7d32, #81c784);--status-warning: light-dark(#9a6200, #e0b050);--status-error: light-dark(#c62828, #ef8a80);--element-background: light-dark(#ffffff, #262626);--element-hover: light-dark(#f0f0f0, #2e2e2e);--element-active: light-dark(#e6e6e6, #363636);--element-selected: light-dark(#e3edfb, #1f3350);--element-disabled: light-dark(#f2f2f2, #222222);--element-ghost-background: transparent;--element-ghost-hover: light-dark(rgb(0 0 0 / 5%), rgb(255 255 255 / 6%));--element-ghost-active: light-dark(rgb(0 0 0 / 9%), rgb(255 255 255 / 10%));--element-ghost-selected: light-dark(rgb(31 95 191 / 10%), rgb(122 174 240 / 12%));--element-accent: light-dark(#1f5fbf, #7aaef0);--element-accent-hover: light-dark(#1a52a6, #8fbcf3);--element-accent-active: light-dark(#15458c, #6a9fe0);--element-accent-tint: light-dark(rgb(31 95 191 / 8%), rgb(122 174 240 / 10%));--element-accent-tint-hover: light-dark(rgb(31 95 191 / 14%), rgb(122 174 240 / 16%));--border-default: light-dark(#dcdcdc, #3a3a3a);--border-muted: light-dark(#e8e8e8, #2f2f2f);--border-hover: light-dark(#c2c2c2, #4a4a4a);--border-focused: light-dark(#1f5fbf, #7aaef0);--border-selected: light-dark(#9dbbe6, #3d5f8f);--border-disabled: light-dark(#e6e6e6, #2c2c2c);--icon-default: var(--text-default);--icon-muted: var(--text-muted);--icon-disabled: var(--text-disabled);--icon-placeholder: var(--text-placeholder);--icon-accent: var(--text-accent);--font-ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif;--font-mono: "Cascadia Mono", "SF Mono", ui-monospace, Consolas, monospace;--text-xs: 12px;--text-sm: 13px;--text-md: 14px;--text-lg: 16px;--heading-xs: 14px;--heading-sm: 16px;--heading-md: 18px;--heading-lg: 20px;--heading-xl: 22px;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--space-1: 1px;--space-2: 2px;--space-3: 3px;--space-4: 4px;--space-6: 6px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--space-40: 40px;--space-48: 48px;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--shadow-elevated: 0 2px 3px light-dark(rgb(0 0 0 / 12%), rgb(0 0 0 / 40%));--shadow-modal: 0 8px 24px light-dark(rgb(0 0 0 / 18%), rgb(0 0 0 / 50%));--ease-out: cubic-bezier(.2, .8, .2, 1);--duration-fast: .12s;--duration-base: .2s;--gap-sm: var(--space-4);--gap-md: var(--space-6);--gap-lg: var(--space-8);--row-height: 40px;--control-height: 28px;--control-height-lg: 32px}:root[data-theme=light]{color-scheme:light}:root[data-theme=dark]{color-scheme:dark}}@layer base{*{box-sizing:border-box}[hidden]{display:none!important}html{min-width:320px;background:var(--surface-background);-webkit-text-size-adjust:100%}body{margin:0;color:var(--text-default);background:var(--surface-background);font:var(--font-normal) var(--text-md)/1.4 var(--font-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}h1,h2,p{margin:0}button,input,select{color:inherit;font:inherit}button,select,label:has(>input[type=checkbox],>input[type=radio]),input[type=range]{cursor:pointer}button:disabled,select:disabled,input:disabled,label:has(>input:disabled){cursor:default}:focus-visible{outline:2px solid var(--border-focused);outline-offset:2px}::selection{background:var(--element-selected);color:var(--text-selected)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.icon{flex:none;fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round}.icon *{vector-effect:non-scaling-stroke}.icon .fill{fill:currentColor;stroke:none}.icon .track{opacity:.25}.tabular{font-variant-numeric:tabular-nums}}@layer components{.app{min-height:100vh;display:flex;flex-direction:column}.titlebar{position:sticky;top:0;z-index:20;height:40px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);padding:0 var(--space-16);border-bottom:1px solid var(--border-default);background:var(--surface-default)}.brand{display:flex;align-items:center;gap:var(--space-6);color:var(--text-default);text-decoration:none;border-radius:var(--radius-sm)}.brand .icon{color:var(--icon-muted)}.brand-name{font-size:var(--text-md);font-weight:var(--font-semibold)}.titlebar-end{display:flex;align-items:center;gap:var(--space-8)}.titlebar-divider{width:1px;height:16px;background:var(--border-default)}.engine-state{display:inline-flex;align-items:center;gap:var(--space-6);height:24px;color:var(--text-muted);font-size:var(--text-xs);white-space:nowrap}.engine-state i{width:6px;height:6px;border-radius:50%;background:var(--status-warning);flex:none}.engine-state.ready i{background:var(--status-success)}.engine-state.error{color:var(--status-error)}.engine-state.error i{background:var(--status-error)}.icon-button{position:relative;width:var(--control-height);height:var(--control-height);display:inline-grid;place-items:center;padding:0;border:0;border-radius:var(--radius-sm);color:var(--icon-muted);background:var(--element-ghost-background);transition:background var(--duration-fast),color var(--duration-fast)}.icon-button:hover{color:var(--icon-default);background:var(--element-ghost-hover)}.icon-button:active{background:var(--element-ghost-active)}.theme-icon-sun{display:none}:root[data-theme=dark] .theme-icon-sun{display:block}:root[data-theme=dark] .theme-icon-moon{display:none}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .theme-icon-sun{display:block}:root:not([data-theme=light]) .theme-icon-moon{display:none}}.layout{width:100%;max-width:1320px;flex:1;margin:0 auto;padding:var(--space-16);display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"main inspector";column-gap:var(--space-16);align-items:start}.main-col{grid-area:main;display:flex;flex-direction:column;gap:var(--space-16);min-width:0}.inspector{grid-area:inspector;position:sticky;top:calc(40px + var(--space-16))}.panel{min-width:0;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-default)}.panel-header{min-height:40px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);padding:var(--space-6) var(--space-8) var(--space-6) var(--space-12);border-bottom:1px solid var(--border-muted)}.panel-title{display:flex;align-items:baseline;gap:var(--space-8);min-width:0}.panel-title h2{font-size:var(--heading-xs);font-weight:var(--font-semibold);line-height:1.2}.count{color:var(--text-hidden);font-size:var(--text-xs);font-variant-numeric:tabular-nums}.panel-actions{display:flex;align-items:center;gap:var(--gap-sm)}.panel-footer{min-height:28px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);padding:var(--space-4) var(--space-12);border-top:1px solid var(--border-muted);color:var(--text-hidden);font-size:var(--text-xs);font-variant-numeric:tabular-nums}.button{position:relative;height:var(--control-height);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-6);padding:0 var(--space-8);border:1px solid transparent;border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:var(--font-medium);line-height:1;white-space:nowrap;text-decoration:none;transition:background var(--duration-fast),border-color var(--duration-fast),color var(--duration-fast)}.button .icon{margin-left:-2px}.button:disabled{color:var(--text-disabled)}.subtle{color:var(--text-muted);background:var(--element-ghost-background)}.subtle:hover:not(:disabled){color:var(--text-default);background:var(--element-ghost-hover)}.subtle:active:not(:disabled){background:var(--element-ghost-active)}.outlined{color:var(--text-default);background:var(--element-background);border-color:var(--border-default)}.outlined:hover:not(:disabled){border-color:var(--border-hover);background:var(--element-hover)}.outlined:active:not(:disabled){background:var(--element-active)}.outlined:disabled{background:var(--element-disabled);border-color:var(--border-disabled)}.tinted{color:var(--text-accent);background:var(--element-accent-tint)}.tinted:hover:not(:disabled){background:var(--element-accent-tint-hover)}.tinted:disabled{background:var(--element-disabled)}.tinted.danger{color:var(--status-error);background:color-mix(in srgb,var(--status-error) 9%,transparent)}.tinted.danger:hover:not(:disabled){background:color-mix(in srgb,var(--status-error) 15%,transparent)}.primary{height:var(--control-height-lg);padding:0 var(--space-12);color:var(--text-on-accent);background:var(--element-accent)}.primary:hover:not(:disabled){background:var(--element-accent-hover)}.primary:active:not(:disabled){background:var(--element-accent-active)}.primary:disabled{color:var(--text-disabled);background:var(--element-disabled);border-color:var(--border-disabled);box-shadow:none}.text-button{padding:0;border:0;border-radius:var(--radius-xs);color:var(--text-accent);background:transparent;font-weight:var(--font-medium);text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:3px;transition:text-decoration-color var(--duration-fast)}.text-button:hover{text-decoration-color:currentColor}.shortcut{display:inline-flex;gap:var(--space-2)}kbd{min-width:16px;height:16px;display:inline-grid;place-items:center;padding:0 var(--space-4);border:1px solid var(--border-default);border-radius:var(--radius-xs);color:var(--text-muted);background:var(--surface-elevated);font:var(--font-medium) var(--text-xs)/1 var(--font-ui)}.button .shortcut{margin-left:var(--space-4)}.button kbd{border-color:color-mix(in srgb,currentColor 28%,transparent);color:inherit;background:transparent;opacity:.8}.button:disabled kbd{opacity:.6}.drop-zone{min-height:280px;margin:var(--space-12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-12);padding:var(--space-32) var(--space-24);border:1px dashed var(--border-hover);border-radius:var(--radius-sm);background:var(--surface-editor);text-align:center;transition:background var(--duration-fast),border-color var(--duration-fast)}.drop-zone:hover,.drop-zone:focus-within{border-color:var(--text-hidden)}.drop-icon{color:var(--icon-muted)}.drop-copy{display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}.drop-copy strong{font-size:var(--text-md);font-weight:var(--font-semibold)}.drop-copy>span{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:var(--space-6);color:var(--text-muted);font-size:var(--text-sm)}.drop-formats{max-width:420px;color:var(--text-hidden);font-size:var(--text-xs)}.drop-limits{color:var(--text-muted);font-size:var(--text-xs);font-variant-numeric:tabular-nums}.is-dragging .drop-zone{border-color:var(--border-focused);background:var(--element-accent-tint)}.is-dragging .drop-zone .drop-icon{color:var(--icon-accent)}.drop-overlay{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:var(--space-16);background:var(--surface-scrim);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--duration-fast),visibility var(--duration-fast)}.drop-overlay-frame{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-8);border:1px dashed var(--border-focused);border-radius:var(--radius-md);color:var(--text-accent);background:var(--element-accent-tint)}.drop-overlay-frame strong{font-size:var(--heading-sm);font-weight:var(--font-semibold);color:var(--text-default)}.drop-overlay-frame span{color:var(--text-muted);font-size:var(--text-sm)}.is-dragging.has-files .drop-overlay{opacity:1;visibility:visible}.file-list-wrap{overflow-x:auto}.list-head,.file-row{min-width:680px;display:grid;grid-template-columns:minmax(200px,1fr) 72px 148px 132px 104px 28px;align-items:center;column-gap:var(--space-12)}.list-head{height:28px;padding:0 var(--space-8) 0 var(--space-16);border-bottom:1px solid var(--border-muted);color:var(--text-hidden);font-size:var(--text-xs);letter-spacing:.04em}.list-head .num{text-align:right}.file-row{position:relative;min-height:var(--row-height);padding:var(--space-4) var(--space-8) var(--space-4) var(--space-16);border-bottom:1px solid var(--border-muted);font-size:var(--text-sm);transition:background var(--duration-fast)}.file-row:last-child{border-bottom:0}.file-row:hover,.file-row:focus-within{background:var(--surface-panel)}.file-row.is-new{animation:row-in var(--duration-base) var(--ease-out) both}.file-row.is-error:before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:0 2px 2px 0;background:var(--status-error)}.file-name{display:flex;min-width:0;align-items:center;gap:var(--space-8)}.file-name-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.thumb{position:relative;flex:none;width:28px;height:28px;display:grid;place-items:center;overflow:hidden;border:1px solid var(--border-muted);border-radius:var(--radius-sm);color:var(--icon-placeholder);background-color:var(--surface-editor);background-image:conic-gradient(var(--border-muted) 25%,transparent 0 50%,var(--border-muted) 0 75%,transparent 0);background-size:8px 8px}.thumb img{width:100%;height:100%;object-fit:cover;animation:fade-in var(--duration-base) var(--ease-out)}.thumb.empty{background-image:none}.file-size{color:var(--text-muted);font:var(--text-xs)/1.2 var(--font-mono);font-variant-numeric:tabular-nums;text-align:right}.file-dimensions{display:flex;align-items:center;gap:var(--space-6);min-width:0;color:var(--text-muted);font:var(--text-xs)/1.2 var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}.fmt{flex:none;height:16px;display:inline-grid;place-items:center;padding:0 var(--space-4);border-radius:var(--radius-xs);color:var(--text-accent);background:var(--element-accent-tint);font:var(--font-medium) var(--text-xs)/1 var(--font-mono);letter-spacing:.03em}.fmt.unknown{color:var(--text-hidden);background:var(--element-ghost-hover)}.frame-control{display:flex;gap:var(--space-4);min-width:0;color:var(--text-muted);font-size:var(--text-xs)}.frame-control.single{padding-left:var(--space-2)}.range-select{width:100%;min-width:0;height:24px;padding:0 var(--space-6);border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--element-background);font-size:var(--text-xs);transition:border-color var(--duration-fast)}.range-select:hover:not(:disabled){border-color:var(--border-hover)}.range-select:focus-visible{outline:none;border-color:var(--border-focused);box-shadow:0 0 0 2px var(--element-accent-tint-hover)}.range-select[aria-invalid=true]{border-color:var(--status-error)}.status{display:inline-flex;align-items:center;gap:var(--space-6);min-width:0;color:var(--text-muted);font-size:var(--text-sm);white-space:nowrap}.status .icon{color:var(--icon-muted)}.status.busy .icon{color:var(--icon-accent);animation:spin .9s linear infinite}.status.ready .icon{color:var(--icon-accent)}.status.success{color:var(--status-success)}.status.success .icon{color:currentColor}.status.error{color:var(--status-error)}.status.error .icon{color:currentColor}.status.muted{color:var(--text-hidden)}.file-error{grid-column:1 / -1;display:flex;gap:var(--space-6);margin:0 0 var(--space-4) 36px;color:var(--status-error);font-size:var(--text-xs);line-height:1.4;overflow-wrap:anywhere}.remove-file{width:24px;height:24px;opacity:0}.file-row:hover .remove-file,.remove-file:focus-visible{opacity:1}.remove-file:hover:not(:disabled){color:var(--status-error)}.remove-file:disabled{visibility:hidden}@media(hover:none){.remove-file{opacity:1}}.settings-panel{display:flex;flex-direction:column}.settings-panel .panel-header{padding-right:var(--space-8)}.select-wrap{position:relative;display:inline-flex}.select-wrap .icon{position:absolute;right:6px;top:50%;translate:0 -50%;color:var(--icon-muted);pointer-events:none}.select{height:var(--control-height);padding:0 var(--space-24) 0 var(--space-8);border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--element-background);font-size:var(--text-sm);appearance:none;transition:border-color var(--duration-fast)}.select:hover:not(:disabled){border-color:var(--border-hover)}.select:focus-visible{outline:none;border-color:var(--border-focused);box-shadow:0 0 0 2px var(--element-accent-tint-hover)}.select:disabled{color:var(--text-disabled);background:var(--element-disabled);border-color:var(--border-disabled)}.preset-select{width:148px}.settings-body{display:flex;flex-direction:column}.field{min-width:0;margin:0;padding:var(--space-16);border:0;border-bottom:1px solid var(--border-muted);transition:opacity var(--duration-base)}.field:last-child{border-bottom:0}.field-label{display:block;margin:0 0 var(--space-8);padding:0;color:var(--text-muted);font-size:var(--text-sm);font-weight:var(--font-medium)}.field-label-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--space-8)}.field-label-row .field-label{margin:0}.field-label-row output{min-width:32px;color:var(--text-default);font:var(--font-medium) var(--text-sm)/1 var(--font-mono);font-variant-numeric:tabular-nums;text-align:center}.field-note{display:flex;gap:var(--space-4);margin-top:var(--space-8);color:var(--text-muted);font-size:var(--text-xs);line-height:1.4}.field-note.quality-warning{color:var(--status-warning)}.format-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}.format-option{position:relative;display:block}.format-option input{position:absolute;inset:0;margin:0;opacity:0;cursor:inherit}.format-option span{height:var(--control-height);display:flex;align-items:center;justify-content:center;gap:var(--space-4);border:1px solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-default);background:var(--element-background);font:var(--font-medium) var(--text-sm)/1 var(--font-mono);letter-spacing:.02em;transition:background var(--duration-fast),border-color var(--duration-fast),color var(--duration-fast)}.format-option span .icon{display:none}.format-option:hover input:not(:disabled):not(:checked)+span{border-color:var(--border-hover);background:var(--element-hover)}.format-option input:checked+span{border-color:var(--border-focused);color:var(--text-selected);background:var(--element-selected)}.format-option input:checked+span .icon{display:block}.format-option input:focus-visible+span{outline:2px solid var(--border-focused);outline-offset:2px}.format-option input:disabled+span{color:var(--text-disabled);background:transparent;border-style:dashed;border-color:var(--border-disabled);text-decoration:line-through;text-decoration-color:var(--text-disabled)}.format-option input:checked:disabled+span{color:var(--text-muted);background:var(--element-disabled);border-style:solid;border-color:var(--border-default);box-shadow:none;text-decoration:none}.range{--fill: 85%;display:block;width:100%;height:20px;margin:0;background:transparent;appearance:none}.range::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--element-accent) var(--fill),var(--border-default) var(--fill))}.range::-moz-range-track{height:4px;border-radius:2px;background:var(--border-default)}.range::-moz-range-progress{height:4px;border-radius:2px;background:var(--element-accent)}.range::-webkit-slider-thumb{width:14px;height:14px;margin-top:-5px;border:1px solid var(--border-hover);border-radius:50%;background:var(--surface-elevated);box-shadow:var(--shadow-elevated);appearance:none;transition:transform var(--duration-fast) var(--ease-out),border-color var(--duration-fast)}.range::-moz-range-thumb{width:14px;height:14px;border:1px solid var(--border-hover);border-radius:50%;background:var(--surface-elevated);box-shadow:var(--shadow-elevated)}.range:hover:not(:disabled)::-webkit-slider-thumb{border-color:var(--border-focused)}.range:focus-visible{outline:none}.range:focus-visible::-webkit-slider-thumb{border-color:var(--border-focused);box-shadow:0 0 0 3px var(--element-accent-tint-hover)}.range:focus-visible::-moz-range-thumb{border-color:var(--border-focused);box-shadow:0 0 0 3px var(--element-accent-tint-hover)}.range:disabled::-webkit-slider-runnable-track{background:var(--border-default)}.range:disabled::-moz-range-progress{background:var(--border-default)}.range-labels{display:flex;justify-content:space-between;margin-top:var(--space-2);color:var(--text-muted);font-size:var(--text-xs)}.segmented{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:var(--space-2);padding:var(--space-2);border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-editor)}.segmented label{position:relative;display:block}.segmented input{position:absolute;inset:0;margin:0;opacity:0;cursor:inherit}.segmented span{height:22px;display:grid;place-items:center;border-radius:var(--radius-sm);color:var(--text-muted);font-size:var(--text-sm);transition:background var(--duration-fast),color var(--duration-fast)}.segmented label:hover input:not(:disabled):not(:checked)+span{color:var(--text-default);background:var(--element-ghost-hover)}.segmented input:checked+span{color:var(--text-default);background:var(--surface-elevated);box-shadow:0 0 0 1px var(--border-default);font-weight:var(--font-medium)}.segmented input:focus-visible+span{outline:2px solid var(--border-focused);outline-offset:1px}.segmented input:disabled+span{color:var(--text-disabled)}.segmented input:checked:disabled+span{box-shadow:0 0 0 1px var(--border-disabled);background:var(--element-disabled)}.resize-units{width:112px;margin-bottom:var(--space-8)}.resize-mode{margin-bottom:var(--space-8)}.resolution-group .segmented span{white-space:nowrap}.resolution-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-4)}.resolution-times{color:var(--text-muted);font-size:var(--text-sm)}.dimension{height:var(--control-height);display:flex;align-items:center;gap:var(--space-6);min-width:0;padding:0 var(--space-8);border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--element-background);cursor:text;transition:border-color var(--duration-fast),box-shadow var(--duration-fast)}.dimension:hover{border-color:var(--border-hover)}.dimension:focus-within{border-color:var(--border-focused);box-shadow:0 0 0 2px var(--element-accent-tint-hover)}.dimension:has(input:disabled){background:var(--element-disabled);border-color:var(--border-disabled)}.dimension:has(input[aria-invalid=true]){border-color:var(--status-error)}.dimension>span{flex:none;color:var(--text-muted);font-size:var(--text-xs)}.dimension input{width:100%;min-width:0;padding:0;border:0;outline:0;background:transparent;font:var(--text-sm) var(--font-mono);font-variant-numeric:tabular-nums;appearance:textfield}.dimension input::-webkit-inner-spin-button,.dimension input::-webkit-outer-spin-button{appearance:none;margin:0}.dimension input::placeholder{color:var(--text-placeholder);font-family:var(--font-ui);font-size:var(--text-xs)}.dimension input:read-only{color:var(--text-muted);cursor:default}.dimension small{flex:none;color:var(--text-muted);font:var(--text-xs) var(--font-mono)}.settings-footer{display:flex;flex-direction:column;gap:var(--space-12);padding:var(--space-12) var(--space-16) var(--space-16);border-top:1px solid var(--border-muted);background:var(--surface-panel);border-radius:0 0 var(--radius-lg) var(--radius-lg)}.summary{display:grid;grid-template-columns:auto 1fr;gap:var(--space-4) var(--space-12);margin:0;font-size:var(--text-sm)}.summary dt{color:var(--text-muted)}.summary dd{min-width:0;margin:0;overflow:hidden;color:var(--text-default);font-variant-numeric:tabular-nums;text-align:right;text-overflow:ellipsis;white-space:nowrap}.summary dd b{font-weight:var(--font-semibold)}.selection-note{display:flex;align-items:flex-start;gap:var(--space-6);color:var(--text-muted);font-size:var(--text-xs);line-height:1.4}.selection-note.error{color:var(--status-error)}.selection-note .icon{margin-top:1px}.run-actions{display:flex;gap:var(--space-6)}.run-actions .primary{flex:1}.run-actions .primary .label{margin-right:auto}.progress-wrap{display:flex;flex-direction:column;gap:var(--space-6)}.progress-meta{display:flex;justify-content:space-between;gap:var(--space-8);color:var(--text-muted);font-size:var(--text-xs);font-variant-numeric:tabular-nums}.progress-meta #progress-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.progress-meta #progress-percent{color:var(--text-default);font-family:var(--font-mono)}.progress-track{position:relative;height:4px;overflow:hidden;border-radius:2px;background:var(--border-default)}.progress-track span{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:var(--element-accent);transition:width var(--duration-base) var(--ease-out)}.progress-wrap.done .progress-track span{background:var(--status-success)}.result-row{min-height:var(--row-height);display:grid;grid-template-columns:28px minmax(0,1fr) 120px 150px auto;align-items:center;column-gap:var(--space-12);padding:var(--space-4) var(--space-8) var(--space-4) var(--space-16);border-bottom:1px solid var(--border-muted);font-size:var(--text-sm);transition:background var(--duration-fast)}.result-row:last-child{border-bottom:0}.result-row:hover{background:var(--surface-panel)}.result-row.is-new{animation:row-in var(--duration-base) var(--ease-out) both}.result-file{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.result-meta{color:var(--text-muted);font:var(--text-xs)/1.2 var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}.result-size{display:flex;align-items:baseline;justify-content:flex-end;gap:var(--space-6)}.delta{min-width:44px;padding:var(--space-2) var(--space-4);border-radius:var(--radius-xs);font:var(--font-medium) var(--text-xs)/1.2 var(--font-mono);font-variant-numeric:tabular-nums;text-align:right}.delta.down{color:var(--status-success);background:color-mix(in srgb,var(--status-success) 10%,transparent)}.delta.up{color:var(--status-warning);background:color-mix(in srgb,var(--status-warning) 12%,transparent)}.delta.same{color:var(--text-hidden);background:var(--element-ghost-hover)}.result-error{display:flex;align-items:center;gap:var(--space-6);grid-column:3 / -1;min-width:0;color:var(--status-error);font-size:var(--text-xs)}.result-error span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.download{height:24px;color:var(--text-accent)}.download:hover{color:var(--text-accent)!important;background:var(--element-accent-tint)!important}.results-panel .panel-header{flex-wrap:wrap}.results-summary{display:flex;gap:var(--space-12)}.results-summary .saved{color:var(--status-success)}.app-footer{width:100%;max-width:1320px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);padding:var(--space-12) var(--space-24) var(--space-20);color:var(--text-hidden);font-size:var(--text-xs)}.app-footer>span{display:inline-flex;align-items:center;gap:var(--space-6)}.shortcut-list{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-16);margin:0;padding:0;list-style:none}.shortcut-list li{display:inline-flex;align-items:center;gap:var(--space-6)}.tooltip{position:fixed;top:0;left:0;z-index:100;display:flex;align-items:center;gap:var(--space-8);max-width:280px;padding:var(--space-4) var(--space-8);border:1px solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-default);background:var(--surface-modal);box-shadow:var(--shadow-modal);font-size:var(--text-sm);line-height:1.3;pointer-events:none;animation:tooltip-in var(--duration-fast) var(--ease-out)}.tooltip .shortcut kbd{background:var(--surface-editor)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes row-in{0%{opacity:0;transform:translateY(4px)}}@keyframes fade-in{0%{opacity:0}}@keyframes tooltip-in{0%{opacity:0}}@media(max-width:1040px){.layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "inspector";row-gap:var(--space-16)}.inspector{position:static}.settings-body{display:grid;grid-template-columns:1fr 1fr}.field{border-right:1px solid var(--border-muted)}.field:nth-child(2n){border-right:0}.field:nth-last-child(-n+2){border-bottom:0}.format-grid{grid-template-columns:repeat(5,1fr)}.settings-footer{flex-direction:row;flex-wrap:wrap;align-items:center}.settings-footer .summary{flex:1 1 280px}.settings-footer .selection-note{flex:1 1 100%;order:3}.settings-footer .progress-wrap{flex:1 1 100%;order:4}.run-actions{flex:0 1 320px}}@media(max-width:720px){.titlebar{padding:0 var(--space-12)}.layout{padding:var(--space-12)}.panel-header{padding-left:var(--space-12)}.drop-zone{min-height:240px}.drop-copy .shortcut,.drop-copy .shortcut-sep{display:none}.settings-body{display:flex}.field{border-right:0}.field:nth-last-child(2){border-bottom:1px solid var(--border-muted)}.format-grid{grid-template-columns:repeat(3,1fr)}.settings-footer{flex-direction:column;align-items:stretch;gap:var(--space-8)}.settings-footer .summary{grid-template-columns:48px 1fr;gap:var(--space-2) var(--space-8);align-content:start}.run-actions{flex:none}.list-head{display:none}.file-list-wrap{overflow:visible}.file-row{min-width:0;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"name name remove" "dims size status" "range range range" "err err err";row-gap:var(--space-4);padding:var(--space-8) var(--space-8) var(--space-8) var(--space-12)}.file-name{grid-area:name}.file-size{grid-area:size}.file-dimensions{grid-area:dims;padding-left:36px}.frame-control{grid-area:range;padding-left:36px}.frame-control.single{display:none}.status{grid-area:status;justify-self:end}.remove-file{grid-area:remove;opacity:1}.file-error{grid-area:err}.result-row{grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"thumb name dl" "thumb meta size";row-gap:var(--space-2);padding:var(--space-8) var(--space-8) var(--space-8) var(--space-12)}.result-row .thumb{grid-area:thumb;align-self:center}.result-file{grid-area:name}.result-row .result-meta{grid-area:meta}.result-size{grid-area:size}.download{grid-area:dl;justify-self:end}.result-error{grid-area:meta / meta / size / size}.app-footer{flex-direction:column;align-items:flex-start;padding:var(--space-8) var(--space-12) var(--space-16)}.shortcut-list{display:none}}@media(max-width:480px){.engine-label{display:none}}@media(max-width:420px){.panel-actions .button .label-long{display:none}.preset-select{width:128px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}}