:root{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;font-weight:400;font-size:14px;-webkit-font-smoothing:antialiased;--page: #f8f8f6;--surface: #ffffff;--surface-soft: #fdfefa;--surface-inset: #f5f7f0;--text: #22251e;--secondary: #505946;--muted: #77816c;--subtle: #8a947e;--border: #e1e5d9;--divider: #ebeee5;--accent: #8caf52;--accent-text: #55752f;--accent-soft: #eff6e3;--accent-border: #d2e1bb;--action: #cce8a2;--action-hover: #bddf8c;--action-text: #344722;--dark-action: #2b3024;--dark-action-hover: #414a34;--dark-action-text: #ffffff;--track: #e9ecdf;--checker: #edf0e8;--warning-bg: #fff8e8;--warning-text: #8c671e;--error-bg: #fff7ef;--error-text: #9f542e;--error-border: #edcfbb;--shadow: 0 3px 7px #20271903;color-scheme:light;color:var(--text);background:var(--page)}:root[data-theme=dark]{--page: #161a14;--surface: #20251d;--surface-soft: #1d231a;--surface-inset: #252d20;--text: #edf1e8;--secondary: #cad3bd;--muted: #a6b198;--subtle: #97a38a;--border: #3a4432;--divider: #313a2b;--accent: #b3d780;--accent-text: #c2e596;--accent-soft: #2b3922;--accent-border: #4c6339;--action: #c0e48f;--action-hover: #d0efa7;--action-text: #253715;--dark-action: #c0e48f;--dark-action-hover: #d0efa7;--dark-action-text: #253715;--track: #3a462f;--checker: #2a3224;--warning-bg: #3a301e;--warning-text: #ecc888;--error-bg: #392a20;--error-text: #efb58d;--error-border: #624733;--shadow: 0 3px 12px #0000000a;color-scheme:dark}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer;transition:transform .15s}button:disabled{cursor:not-allowed;opacity:.45}button:not(:disabled):active{transform:translateY(1px)}a{color:inherit}button,input,select,a{outline-offset:4px}:focus-visible{outline:2px solid var(--accent)}button svg,a svg{flex-shrink:0}fieldset{padding:0;margin:0;border:0;min-width:0}h1,h2,h3,p{margin:0}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.topbar{height:76px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;padding:0 48px;background:var(--surface-soft)}.brand{display:flex;align-items:center;gap:11px;text-decoration:none}.brand-logo{display:block;width:174px;aspect-ratio:1292.54 / 200.63;flex-shrink:0}.brand-logo svg{display:block;width:100%;height:100%}.brand-logo-white{display:none}:root[data-theme=dark] .brand-logo-black{display:none}:root[data-theme=dark] .brand-logo-white{display:block}.brand-separator{height:21px;width:1px;background:var(--border);margin:0 7px 0 13px}.brand-section{font-size:13px;letter-spacing:0;font-weight:500;color:var(--muted)}.prototype-badge{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.2px;color:var(--muted)}.prototype-badge>span{width:6px;height:6px;background:var(--accent);border-radius:100%}main{max-width:1296px;margin:0 auto;padding:29px 48px 0}.breadcrumb{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted)}.breadcrumb span{color:var(--secondary)}.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:38px 0 31px}.eyebrow{font-size:10px;font-weight:650;letter-spacing:1.8px;color:var(--muted);margin-bottom:11px}h1{font-size:44px;line-height:1.12;letter-spacing:-2px;font-weight:650}h1>span{color:var(--accent)}.intro{font-size:13px;color:var(--muted);margin-top:13px;line-height:1.7}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 354px;gap:22px;align-items:start}.image-panel,.settings-panel{min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:11px;box-shadow:var(--shadow);overflow:hidden}.image-panel.is-dragging{outline:2px dashed var(--accent);outline-offset:4px}.panel-heading{min-height:65px;display:flex;justify-content:space-between;align-items:center;padding:10px 24px;gap:10px;border-bottom:1px solid var(--divider);color:var(--muted)}.panel-heading>div{display:flex;gap:10px;align-items:center}.step-number{font-size:9px;font-weight:650;color:var(--muted);border:1px solid var(--border);border-radius:5px;padding:4px 5px;background:var(--surface-soft)}.panel-heading h2{font-size:13px;color:var(--text);font-weight:650}.text-button{border:0;background:none;font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px;padding:7px 3px}.text-button:hover{color:var(--text)}.dropzone{min-height:361px;margin:22px;border:1.5px dashed var(--accent-border);border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--surface-soft);padding:30px 15px}.upload-symbol{display:grid;place-items:center;width:65px;height:66px;background:var(--surface);border:1px solid var(--border);border-radius:15px;color:var(--accent-text);margin-bottom:24px;position:relative;transform:rotate(-5deg);box-shadow:var(--shadow)}.upload-symbol>span{position:absolute;right:-7px;bottom:-4px;background:var(--action);color:var(--action-text);display:grid;place-items:center;width:23px;height:23px;border:3px solid var(--surface-soft);border-radius:50%;font-weight:600;font-size:17px}.dropzone h3{font-size:17px;letter-spacing:-.4px;font-weight:600}.dropzone p{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.5}.dark-button{display:flex;align-items:center;gap:17px;border:0;background:var(--dark-action);color:var(--dark-action-text);border-radius:6px;padding:12px 17px;font-size:12px;font-weight:550;margin:24px 0 17px}.dark-button:hover{background:var(--dark-action-hover)}.file-types{font-size:10px;color:var(--muted)}.file-limits{font-size:9px;color:var(--subtle);margin-top:7px;line-height:1.7}.result-area{border-top:1px solid var(--divider);padding:21px 24px;background:var(--surface-soft)}.result-placeholder{display:flex;gap:10px;align-items:center;color:var(--muted);min-height:29px}.result-placeholder>span{width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--border);border-radius:6px;background:var(--surface-inset);flex-shrink:0}.result-placeholder p{font-size:11px;line-height:1.6}.settings-panel .panel-heading{padding:10px 22px}.settings-panel fieldset{padding:0 22px 21px}.setting-group{padding:23px 0;border-bottom:1px solid var(--divider)}.setting-group label{display:block;font-size:12px;font-weight:600;color:var(--secondary)}.label-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:19px}.quality-value{font-size:17px;font-weight:700}.quality-value span{font-size:11px;color:var(--muted);font-weight:400}.quality-value .lossless-label{color:var(--accent-text);font-weight:600}.setting-group input[type=range]{appearance:none;width:100%;height:5px;border-radius:5px;background:linear-gradient(to right,var(--accent) var(--range-progress),var(--track) var(--range-progress));margin:3px 0 0;display:block;cursor:pointer}.setting-group input[type=range]::-webkit-slider-thumb{appearance:none;width:17px;height:17px;background:var(--surface);border:4px solid var(--accent);border-radius:50%;box-shadow:0 1px 3px #0002}.setting-group input[type=range]::-moz-range-thumb{width:10px;height:10px;background:var(--surface);border:4px solid var(--accent);border-radius:50%}.setting-group input[type=range]:disabled{opacity:.4;cursor:not-allowed}.range-labels{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);margin-top:13px}.setting-hint{font-size:10px;color:var(--muted);line-height:1.6;margin-top:13px}.setting-group select{width:100%;border:1px solid var(--border);border-radius:6px;background:var(--surface);color:var(--secondary);padding:11px 9px;font-size:11px;margin-top:12px;min-height:38px}.dimension-inputs{display:flex;align-items:flex-end;gap:10px;margin-top:16px}.dimension-inputs>label{width:calc(50% - 16px);flex:1;color:var(--muted);font-size:9px;font-weight:500}.dimension-inputs input{width:100%;min-width:0;border:1px solid var(--border);border-radius:6px;padding:9px 10px;font-size:12px;color:var(--secondary);margin-top:7px;background:var(--surface);min-height:36px}.dimension-inputs>svg{color:var(--subtle);margin-bottom:12px}.dimension-note{font-size:9px;line-height:1.8;color:var(--muted);display:flex;align-items:center;gap:5px;margin-top:12px;flex-wrap:wrap}.format-group{border:0;padding-bottom:20px}.optimize-button{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;border:1px solid var(--accent-border);background:var(--action);color:var(--action-text);font-size:12px;font-weight:650;padding:14px 15px;border-radius:6px;min-height:46px}.optimize-button>svg:last-child{margin-left:auto}.optimize-button>svg:first-child{margin-right:auto}.optimize-button:hover{background:var(--action-hover)}.optimize-button:disabled{opacity:.6;background:var(--surface-inset);color:var(--muted);border-color:var(--border)}.file-heading{display:flex;align-items:center;justify-content:space-between;padding:19px 24px;gap:12px}.file-heading>div{min-width:0}.file-heading strong{display:block;font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:480px}.file-heading span{display:block;font-size:10px;color:var(--muted);margin-top:7px}.file-heading i{font-style:normal;margin:0 5px;color:var(--subtle)}.preview-toolbar{display:flex;align-items:center;justify-content:space-between;padding:0 24px 12px}.segmented{display:flex;border:1px solid var(--border);border-radius:6px;padding:3px;gap:2px;background:var(--surface-inset)}.segmented button{border:0;background:none;color:var(--muted);padding:6px 12px;border-radius:4px;font-size:10px}.segmented button.selected{background:var(--surface);box-shadow:var(--shadow);color:var(--secondary)}.preview-toolbar>span{font-size:10px;color:var(--muted)}.image-preview{height:311px;margin:0 24px 22px;border:1px solid var(--divider);border-radius:7px;display:flex;align-items:center;justify-content:center;padding:15px;overflow:hidden}.checkerboard{background-color:var(--surface);background-image:linear-gradient(45deg,var(--checker) 25%,transparent 25%),linear-gradient(-45deg,var(--checker) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--checker) 75%),linear-gradient(-45deg,transparent 75%,var(--checker) 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.image-preview img{display:block;max-width:100%;max-height:100%;object-fit:contain}.result-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.result-label{display:flex;align-items:center;gap:7px;color:var(--accent-text);font-size:11px;font-weight:600}.savings{font-size:12px;font-weight:700;color:var(--accent-text);background:var(--accent-soft);padding:5px 8px;border-radius:5px}.result-stats{display:flex;gap:20px;align-items:center;margin:19px 0;color:var(--subtle)}.result-stats>div>span{display:block;font-size:9px;color:var(--muted);margin-bottom:6px}.result-stats strong{font-size:17px;letter-spacing:-.5px;color:var(--secondary);font-weight:600}.result-stats .output-dimensions{margin-left:auto;text-align:right}.output-dimensions strong{font-size:13px;letter-spacing:0}.download-button{display:flex;align-items:center;justify-content:center;gap:9px;padding:12px;border:1px solid var(--accent-border);background:var(--accent-soft);border-radius:6px;font-weight:600;font-size:11px;text-decoration:none;color:var(--accent-text)}.download-button:hover{background:var(--surface-inset)}.download-button>span{font-weight:400;font-size:10px;color:var(--muted);margin-left:auto}.download-button>svg{margin-right:auto}.original-download{display:block;width:fit-content;margin:12px auto 0;font-size:10px;color:var(--muted);text-underline-offset:3px}.size-warning{font-size:11px;line-height:1.6;background:var(--warning-bg);color:var(--warning-text);padding:10px;border-radius:5px;margin:0 0 14px}.result-note{font-size:11px;line-height:1.6;background:var(--accent-soft);color:var(--secondary);padding:11px;border-radius:5px;margin:0 0 14px}.warning-text{color:var(--warning-text);background:none}.error-message,.file-error{display:flex;align-items:center;justify-content:space-between;gap:15px;border:1px solid var(--error-border);background:var(--error-bg);color:var(--error-text);font-size:12px;line-height:1.6;padding:14px 17px;border-radius:7px;margin-top:20px}.file-error{margin:0 24px 22px}.error-message button{background:none;border:0;color:inherit;display:grid;place-items:center;padding:4px}.under-workspace{display:flex;flex-direction:column;align-items:center;gap:8px;padding:33px 0 38px}.under-workspace>span{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:550;color:var(--muted)}.under-workspace p{font-size:10px;color:var(--subtle)}footer{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:21px 0 24px;border-top:1px solid var(--border);font-size:10px;color:var(--muted)}footer strong{font-weight:600;color:var(--secondary)}.footer-dot{margin:0 7px;color:var(--subtle)}.footer-right{display:flex;align-items:center;gap:20px}.theme-toggle{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--border);background:var(--surface-inset);border-radius:7px}.theme-toggle button{border:0;background:transparent;color:var(--muted);border-radius:4px;display:grid;place-items:center;width:29px;height:27px}.theme-toggle button[aria-pressed=true]{color:var(--accent-text);background:var(--surface);box-shadow:var(--shadow)}.theme-toggle button:hover{color:var(--text)}.queue-list{max-height:263px;overflow-y:auto;border-bottom:1px solid var(--divider);padding:9px 12px}.queue-row{display:flex;align-items:center;gap:3px;border:1px solid transparent;border-radius:6px;padding:2px 6px}.queue-row.is-selected{background:var(--accent-soft);border-color:var(--accent-border)}.queue-select{flex:1;min-width:0;display:flex;align-items:center;gap:11px;padding:10px 4px;text-align:left;border:0;background:transparent;color:var(--text)}.queue-icon{width:29px;height:32px;flex-shrink:0;border-radius:5px;display:grid;place-items:center;color:var(--accent-text);background:var(--surface-inset)}.queue-icon.has-error{color:var(--error-text);background:var(--error-bg)}.queue-info{display:block;min-width:0}.queue-info strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:550}.queue-info>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:var(--muted);margin-top:5px}.icon-button{display:grid;place-items:center;flex-shrink:0;width:30px;height:32px;border:0;background:transparent;color:var(--muted);border-radius:5px;text-decoration:none}.icon-button:hover{background:var(--surface-inset);color:var(--text)}.batch-summary{padding:20px 24px;border-top:1px solid var(--border);display:flex;gap:15px;align-items:center;flex-wrap:wrap;background:var(--surface)}.batch-progress{flex:1;min-width:160px}.batch-progress strong{display:block;font-size:12px;font-weight:600}.batch-progress>span{display:block;font-size:10px;color:var(--muted);line-height:1.6;margin-top:6px}.zip-button{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;font-weight:600;border:1px solid var(--accent-border);color:var(--accent-text);background:var(--accent-soft);border-radius:6px;padding:11px 13px}.zip-button:hover{background:var(--surface-inset)}.batch-hint{width:100%;font-size:10px;line-height:1.6;color:var(--muted)}.shared-settings{color:var(--accent-text);font-size:10px;background:var(--accent-soft);border-radius:5px;padding:10px;margin-top:18px}.jpeg-background{padding:13px;margin-top:15px;border:1px solid var(--border);background:var(--surface-soft);border-radius:6px}.jpeg-background>div{display:flex;align-items:center;gap:10px;margin-top:10px}.jpeg-background input[type=color]{width:38px;height:31px;padding:2px;border:1px solid var(--border);border-radius:4px;background:var(--surface);cursor:pointer}.jpeg-background span{color:var(--secondary);font-size:11px;font-variant-numeric:tabular-nums}.jpeg-background p{margin-top:11px;font-size:10px;color:var(--muted);line-height:1.7}.cancel-button{display:block;width:calc(100% - 44px);margin:-9px 22px 18px;background:transparent;color:var(--muted);font-size:11px;padding:8px;border:1px solid var(--border);border-radius:5px}.spin{animation:spin 1.2s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:1500px){main{padding-top:40px}.page-heading{margin-top:48px}.dropzone{min-height:385px}}@media(max-width:1000px){.topbar{padding:0 28px}main{padding:25px 28px 0}.workspace{grid-template-columns:minmax(0,1fr) 320px;gap:16px}.panel-heading{padding-left:18px;padding-right:18px}.dropzone{margin:17px}.file-heading,.preview-toolbar{padding-left:18px;padding-right:18px}.image-preview{margin-left:18px;margin-right:18px}.result-stats{gap:12px}.result-stats strong{font-size:15px}.output-dimensions strong{font-size:11px}.settings-panel fieldset,.settings-panel .panel-heading{padding-left:18px;padding-right:18px}.panel-heading .panel-actions{gap:8px}.text-button{font-size:10px}}@media(max-width:760px){.topbar{height:65px;padding:0 20px}.brand-section{font-size:12px}.brand-separator{margin-left:6px;margin-right:2px}.prototype-badge{font-size:9px}main{padding:23px 20px 0}.page-heading{margin:30px 0 24px}h1{font-size:36px;letter-spacing:-1.7px}.intro{font-size:12px;max-width:320px}.eyebrow{font-size:9px;letter-spacing:1.5px}.workspace{grid-template-columns:1fr;gap:18px}.dropzone{min-height:310px}.panel-heading{min-height:58px}.panel-heading h2{font-size:12px}.panel-heading>div{gap:7px}.settings-panel fieldset{padding-left:22px;padding-right:22px}.setting-group{padding-top:21px;padding-bottom:21px}.setting-hint{font-size:11px}.range-labels,.dimension-note{font-size:10px}.image-preview{height:290px}.result-stats{gap:13px}.result-stats strong{font-size:16px}.output-dimensions strong{font-size:11px}.under-workspace{padding:28px 0}footer{font-size:9px;line-height:1.6;align-items:flex-start;flex-wrap:wrap}.footer-right{gap:10px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}.setting-group select,.dimension-inputs input{font-size:16px;min-height:43px}.dimension-inputs>svg{margin-bottom:15px}.setting-group input[type=range]{height:7px}.setting-group input[type=range]::-webkit-slider-thumb{height:23px;width:23px}.label-row{margin-bottom:23px}.optimize-button{min-height:49px}.text-button{min-height:40px}.segmented button{padding:9px 12px}.result-placeholder p{font-size:10px}.batch-summary{padding:18px}.queue-list{padding-left:8px;padding-right:8px}.file-heading strong{max-width:245px}.zip-button{width:100%}.theme-toggle button{width:31px;height:30px}}@media(max-width:370px){.brand-separator,.brand-section{display:none}.panel-heading{padding-left:13px;padding-right:13px}.panel-heading .panel-actions{gap:5px}.step-number{display:none}.result-stats{gap:10px;flex-wrap:wrap}.file-heading strong{max-width:210px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}