:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--page:#f5f3ed;--text:#283329;--border:#deded3;--dot:#8c977a;--muted:#72786d;--subtle:#7b8176;--palette-border:#d6d8cc;--note:#7b8174;--panel-border:#dedfd4;--panel:#fcfbf7;--status:#848b7c;--caption:#93998c;--frame:#edece5;--frame-border:#e5e5da;--converted:#e8e9e0;--placeholder:#929985;--placeholder-border:#bdc4b1;--placeholder-icon:#a9b39b;--preview-note:#7a8370;--link:#4d6341;--divider:#e5e5db;--primary:#37482f;--primary-hover:#4a6140;--disabled:#e2e6d9;--disabled-text:#8a957e;--error-bg:#f7e8de;--error-border:#dfc4b3;--error-text:#824d36;--footer:#8b9182;--footer-divider:#b2b7a7;--input-border:#c9cebf;--input:#fffefa;--focus:#748760;--button-focus:#9b6b36;--control-note:#707a66;--range-value:#657657;--accent:#536844;--upload-hover:#e0e7d4;--upload-note:#727a69;--primary-text:#fff}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--page:#191e19;--text:#e3e7dc;--border:#3d473b;--dot:#adbc97;--muted:#a7b29e;--subtle:#a7b29e;--palette-border:#586350;--note:#a7b29e;--panel-border:#3d473b;--panel:#222922;--status:#a7b29e;--caption:#a7b29e;--frame:#2b332a;--frame-border:#465040;--converted:#30392e;--placeholder:#b0bca3;--placeholder-border:#758368;--placeholder-icon:#b0bca3;--preview-note:#a7b29e;--link:#c0d6ad;--divider:#3d473b;--primary:#bbd0a8;--primary-hover:#d0e1c1;--disabled:#333e2f;--disabled-text:#a2ae96;--error-bg:#442f26;--error-border:#8c624c;--error-text:#f4bda1;--footer:#a7b29e;--footer-divider:#758368;--input-border:#626f58;--input:#293127;--focus:#bbd0a8;--button-focus:#e5b778;--control-note:#a7b29e;--range-value:#b0c39d;--accent:#bbd0a8;--upload-hover:#3c4b33;--upload-note:#a7b29e;--primary-text:#1e2919}:root{color:var(--text);background:var(--page);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-family:Inter,Arial,sans-serif;font-weight:400}*{box-sizing:border-box}body{margin:0}button,a,input{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed}a{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid var(--button-focus);outline-offset:5px}button{border:0}.app{max-width:1440px;margin:auto;padding:0 54px}.header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:24px;min-height:99px;padding:22px 0;display:flex}.wordmark{letter-spacing:-1.4px;align-items:center;font-size:28px;font-weight:750;text-decoration:none;display:flex}.mark{margin-right:10px;font-size:34px;font-weight:400}.wordmark-light{font-weight:400}.wordmark-dot{color:var(--dot)}.tagline{color:var(--muted);margin:0;font-size:11px;line-height:1.75}.workspace{grid-template-columns:minmax(0,1fr);gap:39px;display:grid}.output-settings{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;padding:5px 0 0;display:grid}.file-input{display:none}.specs{margin:20px 0}.specs>div{justify-content:space-between;margin:13px 0;font-size:11px;display:flex}.specs dt{color:var(--subtle)}.specs dd{margin:0;font-weight:500}.palette{border:1px solid var(--palette-border);border-radius:3px;height:16px;display:flex;overflow:hidden}.palette span{flex:1}.settings-note{color:var(--note);margin-top:15px;font-size:11px;line-height:1.8}.preview-section{border:1px solid var(--panel-border);background:var(--panel);border-radius:9px;min-width:0;padding:23px}.preview-toolbar{justify-content:space-between;align-items:center;gap:10px;margin:0 0 28px;display:flex}.preview-status{color:var(--status);font-size:10px}.comparison{grid-template-columns:1fr 1fr;gap:18px;display:grid}.preview-column{min-width:0}.image-heading{justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;font-size:12px;font-weight:600;display:flex}.image-heading small{color:var(--caption);font-size:10px;font-weight:400}.image-frame{background:var(--frame);border:1px solid var(--frame-border);border-radius:4px;justify-content:center;align-items:center;height:355px;padding:14px;display:flex;overflow:hidden}.image-frame.converted{background:var(--converted)}.image-frame img{object-fit:contain;width:auto;max-width:100%;height:auto;max-height:100%;display:block;box-shadow:0 2px 9px #27302012}.placeholder{color:var(--placeholder);flex-direction:column;align-items:center;gap:20px;font-size:11px;display:flex}.placeholder-frame{border:1px solid var(--placeholder-border);width:57px;height:70px;color:var(--placeholder-icon);border-radius:2px;place-items:center;font-size:22px;font-weight:300;display:grid;transform:rotate(-6deg)}.placeholder-shades{opacity:.5;border-radius:50%;width:64px;height:64px;display:flex;overflow:hidden;transform:rotate(-25deg)}.placeholder-shades i{background:#56614b;flex:1}.placeholder-shades i:nth-child(2){background:#89927d}.placeholder-shades i:nth-child(3){background:#b5bca9}.placeholder-shades i:nth-child(4){background:#d2d8c6}.image-frame.actual-size{padding:0;display:block;overflow:auto}.image-frame.actual-size img{max-width:none;max-height:none;image-rendering:pixelated}.preview-bottom{justify-content:space-between;align-items:center;gap:12px;min-height:48px;display:flex}.preview-bottom p{color:var(--preview-note);margin:12px 0;font-size:10px;line-height:1.5}.text-button{color:var(--link);white-space:nowrap;background:0 0;padding:5px;font-size:10px;text-decoration:underline}.download-actions{border-top:1px solid var(--divider);align-items:center;padding-top:21px;display:flex}.download{background:var(--primary);color:var(--primary-text);white-space:nowrap;border-radius:4px;justify-content:center;align-items:center;gap:25px;padding:15px 18px;font-size:12px;text-decoration:none;display:flex}.download:hover{background:var(--primary-hover)}.download:disabled{background:var(--disabled);color:var(--disabled-text)}.error{background:var(--error-bg);border:1px solid var(--error-border);color:var(--error-text);border-radius:4px;margin-bottom:20px;padding:14px;font-size:13px;line-height:1.5}footer{color:var(--footer);justify-content:space-between;padding:28px 0 30px;font-size:10px;display:flex}footer span>span{color:var(--footer-divider);padding:0 12px}@media (width>=1400px){.image-frame{height:410px}}@media (width<=1050px){.app{padding:0 28px}.workspace{gap:24px}.preview-section{padding:18px}.image-frame{height:300px}.image-heading small{display:none}.download-actions{flex-direction:column;align-items:flex-start}.download{width:100%}.preview-status{display:none}}@media (width<=720px){.app{padding:0 20px}.header{flex-direction:column;align-items:flex-start;gap:12px;padding:18px 0}.wordmark{font-size:24px}.workspace{gap:24px}.specs{grid-template-columns:1fr 1fr;column-gap:20px;margin:12px 0;display:grid}.specs>div{margin:8px 0;font-size:10px}.settings-note{margin-bottom:0}.preview-section{padding:16px}.preview-toolbar{margin-bottom:22px}.comparison{gap:10px}.image-frame{height:260px;padding:8px}.placeholder{text-align:center;font-size:9px}footer{gap:16px;font-size:9px;line-height:1.7}.preview-bottom{gap:5px}}@media (prefers-reduced-motion:no-preference){.download,.original-upload,.converted[href]{transition:background .15s}}.preview-section{align-self:start}.field{margin:16px 0;font-size:11px;font-weight:600;display:block}.field select,.field input{border:1px solid var(--input-border);background:var(--input);width:100%;min-width:0;color:var(--text);font:inherit;border-radius:4px;margin-top:8px;padding:11px 9px;display:block}.field select{text-overflow:ellipsis}input:focus-visible,select:focus-visible{outline:2px solid var(--focus);outline-offset:3px}.dimension-fields{grid-template-columns:1fr 1fr;gap:12px;display:grid}.dimension-fields .field{margin-top:0}.field-error{color:var(--error-text);font-size:12px;line-height:1.6}.control-note{color:var(--control-note);font-size:11px;line-height:1.6}.range-label{margin:18px 0;font-size:12px;display:block}.range-label .range-value{float:right;color:var(--range-value);font-variant-numeric:tabular-nums}.range-label input{width:100%;accent-color:var(--accent);cursor:pointer;margin:12px 0 0;display:block}.checkbox-label{align-items:center;gap:7px;font-size:11px;line-height:1.5;display:flex}.checkbox-label input{accent-color:var(--accent);width:16px;height:16px}.reset-appearance{margin:12px 0 0;padding-left:0}.preview-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.crop-editor{border-top:1px solid var(--divider);padding:18px 0}.crop-toolbar{justify-content:space-between;align-items:center;font-size:13px;display:flex}.crop-stage{background:var(--converted);border-radius:4px;padding:12px}.crop-surface{touch-action:none;width:100%;margin:auto;position:relative;overflow:hidden}.crop-surface>img{width:100%;height:100%;display:block}.crop-selection{cursor:move;touch-action:none;border:2px solid #fff;position:absolute;box-shadow:0 0 0 1000px #17201480}.crop-grid{pointer-events:none;background:linear-gradient(90deg,#0000 33%,#ffffff60 33% 33.4%,#0000 33.4% 66.6%,#ffffff60 66.6% 67%,#0000 67%),linear-gradient(#0000 33%,#ffffff60 33% 33.4%,#0000 33.4% 66.6%,#ffffff60 66.6% 67%,#0000 67%);position:absolute;inset:0}.crop-handle{border:3px solid var(--accent);cursor:nwse-resize;touch-action:none;background:#fff;width:22px;height:22px;position:absolute;bottom:-2px;right:-2px}.crop-sliders{grid-template-columns:repeat(3,1fr);gap:18px;display:grid}@media (width<=720px){.crop-sliders{grid-template-columns:1fr;gap:0}.crop-sliders .range-label{margin:12px 0}.preview-bottom{align-items:flex-start}.preview-actions{padding-top:8px}}.original-upload{width:100%;color:inherit}.original-upload:hover,.original-upload.dragging,.converted[href]:hover{background:var(--upload-hover);border-color:var(--accent)}.original-upload>*{pointer-events:none}.upload-hint{color:var(--upload-note);margin:9px 0 0;font-size:10px;line-height:1.6}.brand{flex-direction:column;align-items:flex-start;gap:8px;min-width:0;display:flex}.workspace{margin-top:30px}.settings-pane{min-width:0}.settings-pane>:first-child{margin-top:0}.settings-pane>:last-child{margin-bottom:0}@media (width<=720px){.output-settings{grid-template-columns:minmax(0,1fr);gap:24px}}.theme-control{color:var(--muted);flex-shrink:0;align-items:center;gap:8px;font-size:12px;display:flex}.theme-control select{font:inherit;color:var(--text);background:var(--input);border:1px solid var(--input-border);cursor:pointer;border-radius:5px;padding:9px 10px}@media (width<=720px){.header{flex-direction:row;gap:14px}.theme-control{flex-direction:column;align-items:flex-end;gap:5px;font-size:11px}}
