@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Instrument+Sans:wght@400;500;600;700&display=swap";:root,[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:oklch(97% .008 250);--bg-wash:oklch(94.5% .012 250);--surface:oklch(99% .004 250);--surface-2:oklch(96% .01 250);--ink:oklch(18% .01 255);--ink-soft:oklch(38% .024 255);--muted:oklch(52% .02 255);--alt:oklch(46% .02 255);--line:oklch(88% .012 250);--line-strong:oklch(78% .018 250);--accent:oklch(18% .01 255);--accent-soft:oklch(92% .008 250);--accent-ink:oklch(99% .004 250);--focus:oklch(55% .14 250);--danger:oklch(52% .18 20);--danger-soft:oklch(95% .03 20);--canvas:oklch(90% .01 250);--zoom-bg:oklch(100% 0 0/.88);--shadow:none;--segmented-bg:oklch(92% .01 250)}[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:oklch(16% .018 255);--bg-wash:oklch(13% .02 255);--surface:oklch(20% .02 255);--surface-2:oklch(24% .022 255);--ink:oklch(94% .01 250);--ink-soft:oklch(82% .014 250);--muted:oklch(68% .016 250);--alt:oklch(74% .02 250);--line:oklch(30% .02 255);--line-strong:oklch(40% .024 255);--accent:oklch(94% .01 250);--accent-soft:oklch(28% .02 255);--accent-ink:oklch(16% .018 255);--focus:oklch(70% .12 250);--danger:oklch(70% .16 20);--danger-soft:oklch(28% .05 20);--canvas:oklch(12% .015 255);--zoom-bg:oklch(14% .02 255/.9);--shadow:none;--segmented-bg:oklch(14% .018 255)}:root{--font-sans:"Instrument Sans", ui-sans-serif, sans-serif;--font-mono:"IBM Plex Mono", ui-monospace, monospace;--ease-out:cubic-bezier(.23, 1, .32, 1);--text:var(--ink-soft);--text-strong:var(--ink);--text-muted:var(--muted);--text-alt:var(--alt);--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--canvas-padding:clamp(var(--space-4), 2vw, var(--space-6));--toolbar-height:2.375rem}*,:before,:after{box-sizing:border-box}html,body,#root{min-height:100%}body{font-family:var(--font-sans);color:var(--text);background:var(--bg);transition:background-color .18s var(--ease-out), color .18s var(--ease-out);margin:0;font-size:15px;line-height:1.45}button,input,select{font:inherit}button{cursor:pointer}img{max-width:100%;display:block}.switch-root{--switch-inset:2px;--switch-border:1px;--switch-thumb-size:14px;--switch-travel:calc(36px - var(--switch-border) * 2 - var(--switch-thumb-size) - var(--switch-inset) * 2);box-sizing:border-box;border:1px solid var(--line-strong);background:var(--line-strong);cursor:pointer;width:36px;height:20px;transition:background-color .18s var(--ease-out), border-color .18s var(--ease-out);flex-shrink:0;padding:0;position:relative}.switch-root.is-on{background:var(--accent);border-color:var(--accent)}.switch-thumb{width:var(--switch-thumb-size);height:var(--switch-thumb-size);background:var(--surface);transition:transform .2s var(--ease-out), background-color .2s var(--ease-out);position:absolute}.switch-root:not(.switch-root-vertical) .switch-thumb{top:calc(50% - var(--switch-thumb-size) / 2);left:var(--switch-inset);transform:translate(0)}.switch-root:not(.switch-root-vertical).is-on .switch-thumb{transform:translateX(var(--switch-travel));background:var(--accent-ink)}.switch-root-vertical{width:20px;height:36px}.switch-root-vertical .switch-thumb{left:calc(50% - var(--switch-thumb-size) / 2);top:var(--switch-inset);transform:translateY(0)}.switch-root-vertical:not(.is-on) .switch-thumb{transform:translateY(var(--switch-travel))}.switch-root-vertical.is-on .switch-thumb{background:var(--accent-ink)}.range-input{appearance:none;cursor:pointer;width:min(180px,100%);height:16px;accent-color:var(--accent);--slider-active:var(--accent);--slider-track:var(--line-strong);--range-progress:0%;background:0 0}.range-input::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--slider-active) 0%, var(--slider-active) var(--range-progress), var(--slider-track) var(--range-progress), var(--slider-track) 100%);border-radius:0;height:3px}.range-input::-webkit-slider-thumb{-webkit-appearance:none;background:var(--slider-active);width:12px;height:12px;box-shadow:none;border:none;border-radius:0;margin-top:-4.5px}.range-input::-moz-range-track{background:var(--slider-track);border:none;border-radius:0;height:3px}.range-input::-moz-range-progress{background:var(--slider-active);border-radius:0;height:3px}.range-input::-moz-range-thumb{background:var(--slider-active);width:12px;height:12px;box-shadow:none;border:none;border-radius:0}.range-input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.app{width:100%;min-height:100%;padding:0 var(--canvas-padding) var(--canvas-padding);box-sizing:border-box}.topbar{z-index:100;justify-content:space-between;align-items:center;gap:var(--space-3) var(--space-4);padding:var(--canvas-padding) 0;border-bottom:1px solid var(--line);background:var(--bg);flex-wrap:wrap;margin-bottom:0;display:flex;position:sticky;top:0}.brand{flex:auto;align-items:center;min-width:0;display:flex}.topbar-actions{align-items:center;gap:var(--space-2);flex-wrap:nowrap;flex:auto;justify-content:flex-end;min-width:min(100%,17.5rem);display:flex}.brand-mark{letter-spacing:-.035em;color:var(--text-strong);margin:0;font-size:1.75rem;font-weight:700;line-height:1}.toolbar-btn{height:var(--toolbar-height);min-height:var(--toolbar-height);padding:0 var(--space-4);transition:background-color .14s var(--ease-out), border-color .14s var(--ease-out), color .14s var(--ease-out), transform .12s var(--ease-out);border:1px solid #0000;border-radius:0;justify-content:center;align-items:center;font-weight:600;display:inline-flex}.toolbar-btn:active{transform:scale(.97)}.topbar-actions .secondary-btn{white-space:nowrap;flex-shrink:0}.theme-toggle{width:var(--toolbar-height);min-width:var(--toolbar-height);height:var(--toolbar-height);border-color:var(--line-strong);background:var(--surface);color:var(--text-strong);flex-shrink:0;padding:0}.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}.theme-toggle svg{flex-shrink:0;display:block}.layout{padding-top:var(--space-5);align-items:stretch;gap:0;display:flex}.source-panel{min-width:280px;max-width:calc(100% - var(--derivatives-min-width,360px) - 12px);background:var(--surface);border:1px solid var(--line);flex-direction:column;flex-shrink:0;display:flex}.source-panel-head{background:var(--surface);flex-shrink:0;padding:1.15rem 1.2rem 0}.source-panel-body{padding:.85rem 1.2rem 1.3rem}@media (width>=961px){.source-panel{top:var(--source-sticky-top,calc(5.75rem + var(--space-5)));max-height:calc(100vh - var(--source-sticky-top,calc(5.75rem + var(--space-5))) - var(--canvas-padding));z-index:5;align-self:flex-start;position:sticky;overflow:hidden}.source-panel-body{overscroll-behavior:contain;flex:auto;min-height:0;overflow-y:auto}}.split-handle{cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none;flex-shrink:0;align-self:stretch;width:12px;position:relative}.split-handle:before{content:"";background:var(--line);width:1px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}.split-handle:after{content:"";background:linear-gradient(var(--text-muted), var(--text-muted)) center 0 / 4px 2px no-repeat, linear-gradient(var(--text-muted), var(--text-muted)) center 50% / 4px 2px no-repeat, linear-gradient(var(--text-muted), var(--text-muted)) center 100% / 4px 2px no-repeat;opacity:.55;width:4px;height:24px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.split-handle:hover:after,.split-handle:active:after{opacity:1}.derivatives-panel{min-width:var(--derivatives-min-width,360px);background:var(--surface);border:1px solid var(--line);flex:1;min-height:0;padding:1.15rem 1.2rem 1.3rem}body.is-resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}body.is-resizing *{cursor:col-resize!important}@media (width<=960px){.layout{gap:var(--space-4);flex-direction:column}.source-panel{max-width:none;max-height:none;position:static;top:auto;overflow:visible;width:100%!important}.source-panel-body{overflow-y:visible}.split-handle{display:none}.derivatives-panel{min-width:0}.topbar{align-items:stretch;gap:var(--space-3);flex-direction:column}.brand{width:100%}.topbar-actions{flex:100%;justify-content:flex-start;width:100%}.topbar-actions .export-btn{flex:auto;width:auto;min-width:0}.column-view-row{display:none}.derivatives-header{margin-bottom:var(--space-4)}.derivatives-intro{width:100%}.derivatives-grid{grid-template-columns:1fr}.compression-row{align-items:center;gap:.85rem 1.25rem}.compression-options.is-disabled{visibility:visible;display:none}.compression-options:not(.is-disabled){display:contents}.quality{flex-direction:column;flex:8rem;align-items:stretch;gap:0;min-width:0}.quality-label{flex-shrink:1}.quality .range-input{flex:none;width:100%;min-width:0;max-width:none}}h2{letter-spacing:-.02em;color:var(--text-strong);margin:0;font-size:1.25rem;font-weight:600}.hint,.source-meta,.empty-source p,.empty-derivatives p{color:var(--text-muted);font-size:.8rem;line-height:1.45}.hint{margin:.55rem 0 0}.focal-picker .hint{margin:0}.derivative-meta .hint{margin:.3rem 0 0}.source-name-form{width:100%;margin-top:.85rem}.source-name-field{margin-top:.85rem}.source-name-label{color:var(--text-muted);margin-bottom:.35rem;font-size:.875rem;font-weight:500;display:block}.source-name-display{justify-content:space-between;align-items:center;gap:.75rem;min-width:0;display:flex}.source-name-main{flex:auto;align-items:center;gap:.35rem;min-width:0;display:flex}.source-name-value{text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--text-strong);flex:0 auto;font-size:.875rem;font-weight:500;overflow:hidden}.source-name-check-slot{flex-shrink:0;justify-content:center;align-items:center;width:14px;height:14px;display:inline-flex}.source-name-check{color:oklch(52% .16 145);animation:source-name-check-fade 5s var(--ease-out) forwards}@keyframes source-name-check-fade{0%{opacity:0;transform:scale(.85)}8%{opacity:1;transform:scale(1)}80%{opacity:1}to{opacity:0}}.source-name-edit{flex-shrink:0}.source-name-edit svg{flex-shrink:0;display:block}.source-name-form input.is-error{border-color:var(--danger);box-shadow:0 0 0 2px color-mix(in oklch, var(--danger) 20%, transparent)}.source-name-form .secondary-btn.is-error{border-color:var(--danger);color:var(--danger);box-shadow:0 0 0 2px color-mix(in oklch, var(--danger) 20%, transparent)}.source-name-form .secondary-btn.is-error:hover{border-color:var(--danger);color:var(--danger)}.field-error{color:var(--danger);margin:.25rem 0 0;font-size:.78rem}.meta-dim{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-muted);margin:0;font-size:.78rem}.focal-picker .meta-dim{margin:.15rem 0 0}.text-btn{color:var(--text-muted);text-underline-offset:2px;cursor:pointer;background:0 0;border:0;padding:0;font-size:.78rem;font-weight:500;text-decoration:underline}.text-btn:hover{color:var(--text-strong)}.derivatives-header{justify-content:space-between;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-5);flex-wrap:wrap;display:flex}.derivatives-intro{gap:var(--space-3);flex:1;min-width:0;display:grid}.derivatives-intro .compression-row{margin-top:var(--space-1)}.compression-row{flex-wrap:wrap;align-items:center;gap:.85rem 1.25rem;display:flex}.compression-options{flex-wrap:nowrap;flex:auto;align-items:center;gap:.85rem 1.25rem;min-width:0;display:flex}.compression-options.is-disabled{visibility:hidden;pointer-events:none}.source-input{gap:.95rem;margin:1rem 0 1.1rem;display:grid}.source-input-panel{gap:.75rem;display:grid}.source-input-segmented{justify-self:start;width:fit-content;max-width:100%}.upload-dropzone{border:1px dashed var(--line-strong);background:var(--surface-2);width:100%;color:var(--text-muted);text-align:center;cursor:pointer;transition:border-color .14s var(--ease-out), background-color .14s var(--ease-out), color .14s var(--ease-out);gap:.25rem;padding:1.35rem 1rem;display:grid}.upload-dropzone:hover,.upload-dropzone.is-dragging{border-color:var(--accent);background:var(--accent-soft);color:var(--text-strong)}.upload-dropzone-title{color:var(--text-strong);font-size:.875rem;font-weight:600}.upload-dropzone-sub{font-size:.82rem}@media (width<=960px){.source-input-segmented{width:100%;display:flex}.source-input-segmented button{flex:1}}.url-form{gap:.35rem;display:grid}.url-form label{color:var(--text-muted);font-size:.875rem;font-weight:500}.url-row{grid-template-columns:1fr auto;gap:.45rem;display:grid}input[type=url],input[type=number],input[type=text]{border:1px solid var(--line-strong);background:var(--surface-2);width:100%;color:var(--text-strong);transition:border-color .14s var(--ease-out), box-shadow .14s var(--ease-out);outline:none;padding:.6rem .75rem}input:focus{border-color:var(--focus);box-shadow:0 0 0 2px color-mix(in oklch, var(--focus) 25%, transparent)}.primary-btn,.secondary-btn,.export-btn,.ghost-btn{transition:background-color .14s var(--ease-out), border-color .14s var(--ease-out), color .14s var(--ease-out), transform .12s var(--ease-out);border:1px solid #0000;border-radius:0;padding:.6rem 1rem;font-weight:600}.primary-btn:active,.secondary-btn:active,.export-btn:active,.ghost-btn:active{transform:scale(.97)}.primary-btn,.export-btn{background:var(--accent);color:var(--accent-ink)}.primary-btn:hover,.export-btn:hover{filter:brightness(1.08)}.export-btn:disabled,.primary-btn:disabled,.secondary-btn:disabled{opacity:.42;cursor:not-allowed;filter:none}.secondary-btn{background:var(--surface);border-color:var(--line-strong);color:var(--text-strong)}.secondary-btn:hover{border-color:var(--accent);color:var(--accent)}.ghost-btn{border-color:var(--line);color:var(--text-muted);background:0 0;padding:.3rem .6rem;font-size:.78rem}.ghost-btn:hover{color:var(--danger);border-color:color-mix(in oklch, var(--danger) 45%, var(--line))}.error{background:var(--danger-soft);border:1px solid color-mix(in oklch, var(--danger) 35%, transparent);color:var(--danger);margin:0 0 1rem;padding:.7rem .85rem;font-size:.875rem}.empty-source,.empty-derivatives{border:1px dashed var(--line-strong);text-align:center;background:var(--surface-2);padding:1.75rem 1.1rem}.focal-picker{gap:.35rem;margin-top:.65rem;display:grid}.focal-frame{background:var(--canvas);cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;width:100%;position:relative;overflow:hidden}.focal-frame img{object-fit:contain;pointer-events:none;width:100%;height:100%}.focal-crosshair{pointer-events:none;width:28px;height:28px;position:absolute;transform:translate(-50%,-50%)}.focal-frame-controls{background:var(--zoom-bg);border:1px solid var(--line-strong);padding:.2rem;display:inline-flex;position:absolute;top:.5rem;right:.5rem}.focal-frame-controls button{width:1.6rem;height:1.6rem;color:var(--text-strong);cursor:pointer;transition:background-color .14s var(--ease-out), color .14s var(--ease-out), transform .12s var(--ease-out);background:0 0;border:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.focal-frame-controls button:hover{background:var(--accent-soft);color:var(--accent)}.focal-frame-controls button:active{transform:scale(.95)}.focal-box{background:#00000040;border:2px solid #ff1493;position:absolute;inset:0}.focal-dot{background:#ff1493;width:6px;height:6px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.source-meta{font-family:var(--font-mono);margin:0;font-size:.78rem}.derivatives-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem 1.5rem;margin-bottom:1.15rem;display:flex}.column-view-row{flex-shrink:0;align-items:center;gap:.65rem;display:flex}.column-view-label{color:var(--text-strong);font-size:.875rem;font-weight:500}.column-view-select{position:relative}.column-view-trigger{border:1px solid var(--line);background:var(--surface);min-width:3.5rem;color:var(--text-strong);cursor:pointer;transition:background-color .14s var(--ease-out), border-color .14s var(--ease-out), color .14s var(--ease-out);justify-content:space-between;align-items:center;gap:.5rem;padding:.35rem .55rem .35rem .65rem;font-size:.875rem;font-weight:500;display:inline-flex}.column-view-trigger:hover{border-color:var(--line-strong)}.column-view-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.column-view-value{text-align:left;min-width:.75rem}.column-view-trigger svg{color:var(--text-muted);flex-shrink:0}.column-view-menu{z-index:20;border:1px solid var(--line);background:var(--surface);min-width:100%;box-shadow:0 8px 24px color-mix(in oklch, var(--ink) 12%, transparent);margin:0;padding:.2rem;list-style:none;position:absolute;top:calc(100% + .25rem);right:0}.column-view-menu button{width:100%;color:var(--text-strong);text-align:left;cursor:pointer;background:0 0;border:0;padding:.35rem .65rem;font-size:.875rem;font-weight:500;display:block}.column-view-menu button:hover,.column-view-menu button.is-selected{background:var(--accent-soft)}.column-view-menu button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.toggle-field{align-items:center;gap:.65rem;display:inline-flex}.toggle-label{color:var(--text-strong);cursor:pointer;font-size:.875rem;font-weight:500}.segmented{background:var(--segmented-bg);padding:2px;display:inline-flex}.segmented button{color:var(--text-muted);transition:background-color .14s var(--ease-out), color .14s var(--ease-out), transform .12s var(--ease-out);background:0 0;border:0;padding:.35rem .75rem;font-size:.82rem;font-weight:600}.segmented button:active{transform:scale(.97)}.segmented button.active{background:var(--surface);color:var(--text-strong)}.quality{flex-direction:row;flex:auto;align-items:center;gap:.65rem;min-width:0;display:flex}.quality-label{color:var(--text-muted);white-space:nowrap;flex-shrink:0;font-size:.82rem;line-height:1.2}.quality .range-input{flex:auto;min-width:6rem;max-width:180px}.derivatives-grid{grid-template-columns:repeat(var(--grid-cols,2), minmax(12.5rem, 1fr));gap:1rem;display:grid}.derivative-card{flex-direction:column;gap:.6rem;min-width:0;display:flex}.derivative-header{justify-content:space-between;align-items:flex-start;gap:.5rem;display:flex}.derivative-actions{flex-shrink:0;align-items:center;gap:.2rem;display:inline-flex}.icon-btn{border:1px solid var(--line);background:var(--surface);width:1.65rem;height:1.65rem;color:var(--text-muted);transition:background-color .14s var(--ease-out), color .14s var(--ease-out), border-color .14s var(--ease-out), transform .12s var(--ease-out);justify-content:center;align-items:center;padding:0;display:inline-flex}.icon-btn:hover:not(:disabled){background:var(--accent-soft);border-color:var(--line-strong);color:var(--accent)}.icon-btn:active:not(:disabled){transform:scale(.95)}.icon-btn:disabled{opacity:.45;cursor:not-allowed}.icon-btn-danger:hover:not(:disabled){background:color-mix(in oklch, var(--accent) 12%, var(--surface));color:var(--text-strong)}.derivative-header h3{font-family:var(--font-mono);color:var(--text-strong);margin:0;font-size:.9rem;font-weight:500}.orientation{color:var(--text-alt);text-transform:lowercase;letter-spacing:.03em;margin:.12rem 0 0;font-size:.78rem}.derivative-viewport{background:var(--canvas);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;width:100%;position:relative;overflow:hidden}.derivative-viewport:active{cursor:grabbing}.zoom-controls{background:var(--zoom-bg);border:1px solid var(--line-strong);align-items:center;gap:.3rem;padding:.2rem;display:inline-flex;position:absolute;bottom:.5rem;right:.5rem}.zoom-controls button{width:1.6rem;height:1.6rem;color:var(--text-strong);transition:background-color .14s var(--ease-out), color .14s var(--ease-out), transform .12s var(--ease-out);background:0 0;border:0;font-size:1rem;line-height:1}.zoom-controls button:hover{background:var(--accent-soft);color:var(--accent)}.zoom-controls button:active{transform:scale(.95)}.zoom-controls span{text-align:center;min-width:2.5rem;font-family:var(--font-mono);color:var(--text-muted);font-size:.7rem}.derivative-meta{gap:.12rem;display:grid}.meta-line{color:var(--text-muted);margin:0;font-size:.8rem}.meta-sizes{flex-wrap:wrap;align-items:center;gap:.45rem .6rem;display:flex}.meta-size-divider{background:var(--line-strong);flex-shrink:0;width:1px;height:.85em}.meta-line .kb{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-strong)}.meta-size-compressed .kb{font-weight:600}.meta-line.muted{color:var(--text-muted)}.add-ratio{border-top:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:end;gap:.75rem;margin-top:1.15rem;padding-top:1.05rem;display:flex}.add-ratio-inputs{align-items:end;gap:.5rem;display:flex}.add-ratio-inputs label{color:var(--text-muted);gap:.25rem;font-size:.875rem;font-weight:500;display:grid}.add-ratio-inputs input{width:5.25rem}.add-ratio-inputs .by{color:var(--text-muted);padding-bottom:.65rem}.add-ratio-actions{flex-wrap:wrap;align-items:end;gap:.5rem;display:inline-flex}.crop-preview-overlay{z-index:1000;padding:var(--space-5);background:#000000e6;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.crop-preview-close{top:var(--space-4);right:var(--space-4);color:#fff;cursor:pointer;background:#00000073;border:1px solid #ffffff59;justify-content:center;align-items:center;width:2.25rem;height:2.25rem;padding:0;display:inline-flex;position:absolute}.crop-preview-close:hover{background:#000000a6}.crop-preview-viewport{width:min(96vw, calc(90vh * var(--preview-aspect,1)));background:#000;max-width:96vw;max-height:90vh;position:relative;overflow:hidden;box-shadow:0 0 0 1px #ffffff14}.crop-preview-viewport img{display:block}