.site-header{border-bottom:1px solid var(--border);background:#fff;height:76px}.header-inner{max-width:1160px;height:100%;padding:0 var(--space-24);justify-content:space-between;align-items:center;gap:var(--space-16);margin:auto;display:flex}.brand{align-items:center;gap:var(--space-12);color:var(--ink);letter-spacing:-1px;font-size:22px;font-weight:800;text-decoration:none;display:flex}.brand-mark{width:34px;height:34px;color:var(--accent);place-items:center;display:grid}.brand-mark img{object-fit:contain;width:100%;height:100%;display:block}.header-actions{align-items:center;gap:var(--space-24);min-width:0;display:flex}.header-tag{color:var(--muted);font-size:13px}.header-actions .language-button{border:1px solid var(--border);width:auto;max-width:180px;padding:var(--space-8) var(--space-12);border-radius:8px;font-size:13px}.menu{position:relative}.menu summary{cursor:pointer;padding:var(--space-8);font-size:22px;list-style:none}.menu summary::-webkit-details-marker{display:none}.menu nav{width:220px;max-height:calc(100dvh - 90px);padding:var(--space-8);border:1px solid var(--border);z-index:20;background:#fff;border-radius:12px;position:absolute;top:45px;right:0;overflow-y:auto;box-shadow:0 12px 40px #22332d12}.menu nav a{padding:var(--space-12);color:var(--ink);border-radius:6px;font-size:13px;text-decoration:none;display:block}.menu nav a:hover{background:var(--wash)}.field{gap:var(--space-8);min-width:0;display:grid}.field-label{color:var(--ink);font-size:13px;font-weight:650}.hint{color:var(--muted);margin:0;font-size:13px;font-weight:400;line-height:1.7}.range-row{align-items:center;gap:var(--space-12);display:flex}.range-row output{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;min-width:40px;font-size:13px}.text-button{color:var(--accent);padding:var(--space-4) 0;background:0 0;justify-self:start;font-size:13px;font-weight:650}.image-edit-actions{align-items:center;gap:var(--space-8);margin-top:var(--space-16);flex-wrap:wrap;display:flex}.image-edit-actions>.hint{flex:160px;margin:0}.image-edit-actions .eraser-button{justify-content:center;align-items:center;gap:var(--space-8);min-height:44px;color:var(--accent);border-color:var(--accent);background:var(--wash);display:inline-flex}.eraser-button:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--accent)}.eraser-button svg{flex-shrink:0;width:20px;height:20px}.image-edited-status{color:var(--accent);background:var(--wash);padding:var(--space-4) var(--space-12);border-radius:20px;font-size:13px;font-weight:650}.transparency-grid{background:repeating-conic-gradient(#e2e6de 0% 25%,#fff 0% 50%) 0 0/16px 16px}.recent-images{margin-top:var(--space-16);min-width:0}.recent-images-heading{justify-content:space-between;align-items:center;gap:var(--space-8);flex-wrap:wrap;display:flex}.recent-images-heading h3{margin:0;font-size:13px;font-weight:650}.recent-images-list{gap:var(--space-12);margin:var(--space-12) 0 0;grid-template-columns:repeat(4,minmax(0,1fr));padding:0;list-style:none;display:grid}.recent-images-list li{min-width:0;position:relative}.recent-image-select{aspect-ratio:1;border:1px solid var(--border);border-radius:8px;justify-content:center;align-items:center;width:100%;display:flex;overflow:hidden}.recent-image-select:hover:not(:disabled){border-color:var(--accent)}.recent-image-select img{object-fit:contain;max-width:100%;max-height:100%;display:block}.recent-image-remove{top:var(--space-4);right:var(--space-4);border:1px solid var(--border);width:28px;height:28px;color:var(--ink);background:#fff;border-radius:50%;place-items:center;font-size:18px;display:grid;position:absolute}.site-footer{max-width:1048px;padding:0 0 var(--space-24);border-top:1px solid var(--border);margin:auto}.footer-top{justify-content:space-between;align-items:center;gap:var(--space-16);padding:var(--space-24) 0;display:flex}.footer-brand{color:#59685a;font-size:13px;font-weight:700}.footer-brand small{margin-left:var(--space-12);color:var(--muted);font-size:13px;font-weight:400}.footer-top nav{gap:var(--space-16);display:flex}.footer-top a{color:var(--muted);font-size:13px;text-decoration:none}.mandumon-apps h2{color:var(--muted);margin:0;font-size:12px;font-weight:700}.menu .mandumon-apps h2{padding:var(--space-12) var(--space-12) var(--space-4)}.footer-apps{align-items:baseline;gap:var(--space-12) var(--space-24);padding-top:var(--space-16);border-top:1px solid var(--border);flex-wrap:wrap;display:flex}.footer-apps nav{gap:var(--space-12) var(--space-16);flex-wrap:wrap;display:flex}.footer-apps a{color:var(--muted);font-size:13px;text-decoration:none}.footer-apps a:hover{color:var(--ink);text-decoration:underline}.language-picker{display:flex;position:relative}.language-code{display:none}.share-button{border:1px solid var(--border);padding:var(--space-12);border-radius:8px;font-size:13px;font-weight:600}.menu-group{border-top:1px solid var(--border);margin-top:var(--space-4);padding-top:var(--space-4)}.menu nav a[aria-current=page]{background:var(--wash);font-weight:700}.page-shell{max-width:1104px;min-height:60vh;padding:calc(var(--space-32) + var(--space-16)) var(--space-24);margin:auto}.step{background:var(--wash);width:32px;height:32px;color:var(--accent);border-radius:8px;place-items:center;font-size:14px;display:grid}input[type=range]{width:100%;min-width:0;accent-color:var(--accent)}@media (width<=760px){.header-inner{padding:0 var(--space-16)}.header-actions{gap:var(--space-12)}.header-tag{display:none}.page-shell{padding:var(--space-24) var(--space-16)}.site-footer{margin:0 var(--space-16)}.footer-top{align-items:start;gap:var(--space-16);flex-direction:column}.footer-top nav{flex-wrap:wrap}.language-picker{border:1px solid var(--border);border-radius:8px;justify-content:center;align-items:center;width:56px;min-height:44px}.language-code{font-size:13px;font-weight:650;display:block}.header-actions .language-button{opacity:0;width:100%;max-width:none;padding:0;position:absolute;inset:0}.language-picker:focus-within{outline:3px solid var(--accent);outline-offset:3px}}.editor-section{min-width:0;padding:var(--space-24);border:1px solid var(--border);background:#fff;border-radius:18px}.editor-section h1,.section-heading h2{align-items:center;gap:var(--space-12);letter-spacing:-.5px;margin:0;font-size:22px;display:flex}.section-heading{justify-content:space-between;align-items:center;gap:var(--space-12);margin-bottom:var(--space-24);flex-wrap:wrap;display:flex}.primary-button{justify-content:center;align-items:center;gap:var(--space-8);min-height:46px;padding:var(--space-12) var(--space-24);background:var(--accent);color:#fff;border-radius:9px;font-weight:650;text-decoration:none;display:inline-flex}.primary-button:hover{background:#2d5984}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.upload-zone{margin-top:var(--space-24);padding:var(--space-32) var(--space-24);border:2px dashed var(--border);text-align:center;background:#f9fbfd;border-radius:12px}.upload-symbol{background:var(--wash);width:52px;height:52px;color:var(--accent);border-radius:16px;place-items:center;margin:auto;font-size:34px;display:grid}.upload-lead{margin:var(--space-16) 0;font-size:19px;font-weight:650}.upload-zone .hint{margin-top:var(--space-12)}.upload-privacy{margin-top:var(--space-16);text-align:center}.upload-section.is-dragging{border-color:var(--accent);box-shadow:0 0 0 3px var(--wash)}.is-dragging .upload-zone{border-color:var(--accent);background:var(--wash)}.upload-zone.has-image{align-items:center;gap:var(--space-12) var(--space-16);padding:var(--space-16);text-align:left;flex-wrap:wrap;display:flex}.has-image>.hint{flex-basis:100%;margin:0}.source-card{align-items:center;gap:var(--space-16);flex:1;min-width:160px;display:flex}.source-card img{object-fit:contain;border-radius:8px;width:64px;height:64px}.source-card>div{min-width:0}.source-card strong{overflow-wrap:anywhere;font-size:14px;display:block}.source-card .hint{margin-top:var(--space-4)}.recent-images-list{grid-template-columns:repeat(8,minmax(0,1fr))}.tool-workspace{align-items:start;gap:var(--space-24);margin-top:var(--space-24);grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);display:grid}.tool-workspace .editor-section>.field{margin-top:var(--space-24)}.tool-workspace .editor-section>.hint{margin-top:var(--space-12)}.mode-buttons{gap:var(--space-8);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.mode-buttons button{min-width:0;min-height:112px;padding:var(--space-16) var(--space-12);border:1px solid var(--border);text-align:left;overflow-wrap:anywhere;border-radius:10px}.mode-buttons strong{font-size:14px;line-height:1.5;display:block}.mode-buttons span{margin-top:var(--space-8);color:var(--muted);font-size:12px;line-height:1.6;display:block}.mode-buttons button[aria-pressed=true],.choice-buttons button[aria-pressed=true]{border-color:var(--accent);background:var(--wash);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.mode-buttons button:hover,.choice-buttons button:hover{border-color:var(--accent)}.choice-buttons{gap:var(--space-8);flex-wrap:wrap;display:flex}.choice-buttons button{min-height:40px;padding:var(--space-8) var(--space-12);border:1px solid var(--border);border-radius:8px;font-size:13px;line-height:1.4}.preset-field .choice-buttons button{border-radius:24px}.unit-input{align-items:center;gap:var(--space-12);display:flex}.unit-input>span{min-width:24px;color:var(--muted);font-size:13px}.dimension-fields{gap:var(--space-16);margin-top:var(--space-16);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.checkbox-field{align-items:center;gap:var(--space-8);margin-top:var(--space-16);font-size:13px;display:flex}.checkbox-field input{accent-color:var(--accent);width:18px;height:18px}.result-column{min-width:0;top:var(--space-24);position:sticky}.format-badge,.quality-badge{background:var(--wash);color:var(--accent);padding:var(--space-8) var(--space-12);border-radius:20px;font-size:12px}.comparison{border:1px solid var(--border);border-radius:10px;height:clamp(240px,32vw,420px);position:relative;overflow:hidden}.comparison>img,.comparison-after,.comparison-after img{object-fit:contain;width:100%;height:100%;display:block;position:absolute;inset:0}.comparison-after{clip-path:inset(0 0 0 var(--split));background:repeating-conic-gradient(#e2e6de 0% 25%,#fff 0% 50%) 0 0/16px 16px}.comparison-label{top:var(--space-12);padding:var(--space-4) var(--space-8);pointer-events:none;background:#ffffffeb;border-radius:6px;font-size:12px;position:absolute}.comparison-label.before{left:var(--space-12)}.comparison-label.after{right:var(--space-12)}.comparison-line{left:var(--split);pointer-events:none;background:#fff;width:2px;position:absolute;inset-block:0;box-shadow:0 0 3px #24364b80}.comparison-line span{border:1px solid var(--border);width:34px;height:34px;color:var(--accent);background:#fff;border-radius:50%;place-items:center;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.comparison input[type=range]{opacity:0;cursor:ew-resize;touch-action:pan-y;width:100%;height:100%;margin:0;position:absolute;inset:0}.comparison:focus-within{outline:3px solid var(--accent);outline-offset:3px}.comparison-hint{margin-top:var(--space-8);font-size:12px}.result-summary{justify-content:space-between;align-items:baseline;gap:var(--space-8);margin-top:var(--space-16);flex-wrap:wrap;display:flex}.result-bytes{gap:var(--space-8);color:var(--muted);flex-wrap:wrap;align-items:baseline;margin:0;font-size:14px;display:flex}.result-bytes strong{color:var(--ink);font-size:22px}.saving{color:var(--accent);font-size:14px}.increase{color:#9d6330;font-size:14px}.result-dimensions{margin-block:var(--space-12);color:var(--muted);font-size:13px}.quality-badge{margin:var(--space-4) 0 0;line-height:1.7;display:inline-block}.result-note{margin-block:var(--space-16);padding:var(--space-12);background:var(--wash);border-radius:8px;font-size:13px;line-height:1.7}.lossless-result{padding-block:var(--space-12);margin-top:var(--space-12);border-block:1px solid var(--border)}.lossless-result p{margin:0 0 var(--space-12);font-size:13px;line-height:1.7}.metadata-note{margin-block:var(--space-16)}.download-button{width:100%}.avif-button{width:100%;margin-top:var(--space-12);line-height:1.6}.processing-elapsed{font-variant-numeric:tabular-nums}.result-pending{justify-content:center;align-items:center;gap:var(--space-16);text-align:center;flex-direction:column;min-height:340px;display:flex}.result-pending h2{margin:0;font-size:22px}.result-pending p{margin:0;line-height:1.7}.processing-ring{border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:36px;height:36px;animation:1s linear infinite processing}@keyframes processing{to{transform:rotate(360deg)}}.load-status{align-items:center;gap:var(--space-16);margin-top:var(--space-16);display:flex}.error-message{padding:var(--space-16);color:#9b4141;background:#fff6f6;border:1px solid #e7cccc;border-radius:10px;line-height:1.7}@media (width<=900px){.tool-workspace{grid-template-columns:1fr}.result-column{position:static}.comparison{height:clamp(260px,65vw,500px)}}@media (width<=760px){.editor-section{padding:var(--space-16)}.recent-images-list{grid-template-columns:repeat(4,minmax(0,1fr))}.mode-buttons button{padding:var(--space-12) var(--space-8)}.upload-zone{padding:var(--space-24) var(--space-16)}}@media (prefers-reduced-motion:reduce){.processing-ring{animation:none}}.batch-list{margin-top:var(--space-24);border-top:1px solid var(--border);padding-top:var(--space-24)}.batch-heading,.batch-footer{justify-content:space-between;align-items:center;gap:var(--space-8);flex-wrap:wrap;display:flex}.batch-heading{margin-bottom:var(--space-12)}.batch-heading h2{margin:0;font-size:18px}.batch-progress{background:var(--wash);height:6px;margin-top:var(--space-16);border-radius:4px;overflow:hidden}.batch-progress>span{background:var(--accent);height:100%;display:block}.batch-images{margin:var(--space-16) 0;max-height:440px;padding:0;list-style:none;overflow-y:auto}.batch-row{border:1px solid var(--border);margin:var(--space-8) var(--space-4);padding:var(--space-8);align-items:center;gap:var(--space-8);border-radius:10px;flex-wrap:wrap;display:flex}.batch-row.is-selected{border-color:var(--accent);background:var(--wash)}.batch-select{align-items:center;gap:var(--space-12);text-align:left;min-width:0;padding:var(--space-4);flex:1;display:flex}.batch-select img,.batch-thumbnail{object-fit:contain;border-radius:5px;flex-shrink:0;width:48px;height:48px}.batch-thumbnail{background:var(--wash);color:var(--muted);place-items:center;display:grid}.batch-details{min-width:0;color:var(--muted);flex:1;font-size:12px}.batch-details strong{margin-bottom:var(--space-8);overflow-wrap:anywhere;color:var(--ink);font-size:14px;display:block}.batch-status{color:var(--muted);overflow-wrap:anywhere;max-width:100px;font-size:12px}.status-done,.status-kept{color:var(--accent)}.status-error,.batch-error{color:#9b4141}.batch-actions{gap:var(--space-8);flex-wrap:wrap;display:flex}.batch-actions .share-button{min-width:40px;min-height:44px;padding:var(--space-8)}.batch-error{margin:0 var(--space-4) var(--space-4);flex-basis:100%;font-size:12px;line-height:1.6}.batch-summary p{margin-block:var(--space-12)}.batch-summary{font-size:14px;line-height:1.7}.batch-footer{margin-top:var(--space-16);justify-content:flex-start}.primary-button:disabled,.share-button:disabled{opacity:.5;cursor:default}@media (width<=500px){.batch-select{gap:var(--space-8);flex-wrap:wrap}.batch-status{flex-basis:100%;max-width:none}.batch-footer .primary-button{width:100%}}.tool-workspace .editor-section>.preset-field{margin-top:0;margin-bottom:var(--space-24)}.mobile-result-space{display:none}@media (width<=720px){.mode-buttons{grid-template-columns:1fr}.mode-buttons button{min-height:0;padding:var(--space-12) var(--space-16);white-space:normal}.mode-buttons span{margin-top:var(--space-4)}.mobile-result-space{display:block}body:has(.mobile-result-bar){padding-bottom:var(--mobile-result-height,calc(2 * var(--space-32) + var(--space-16) + env(safe-area-inset-bottom,0px)))}.mobile-result-bar{z-index:15;align-items:center;gap:var(--space-8);padding:var(--space-12) max(var(--space-16), env(safe-area-inset-right,0px)) calc(var(--space-12) + env(safe-area-inset-bottom,0px)) max(var(--space-16), env(safe-area-inset-left,0px));border-top:1px solid var(--border);background:#fff;flex-wrap:wrap;display:flex;position:fixed;inset:auto 0 0;box-shadow:0 -4px 24px #24364b14}.mobile-result-summary{flex:140px;min-width:0}.mobile-result-name{white-space:nowrap;text-overflow:ellipsis;color:var(--muted);margin-bottom:var(--space-4);font-size:12px;display:block;overflow:hidden}.mobile-result-summary>div{align-items:baseline;gap:var(--space-8);font-variant-numeric:tabular-nums;flex-wrap:wrap;display:flex}.mobile-result-summary strong{font-size:18px}.mobile-result-summary .saving,.mobile-result-summary .increase{font-size:12px}.mobile-result-bar .primary-button{max-width:100%;min-height:44px;padding:var(--space-12) var(--space-16);overflow-wrap:anywhere;flex:0 auto}.mobile-result-error{color:#9b4141;flex-basis:100%;margin:0;font-size:12px}}