.image-tool{padding-bottom:4rem;container-type:inline-size}.tool-heading{justify-content:space-between;align-items:baseline;gap:1rem;display:flex}.tool-heading h2{color:var(--text);letter-spacing:-.03em;margin:0;font-size:1.1rem;font-weight:550}.tool-local{color:var(--muted);flex:none;font-size:.7rem}.tool-local span{color:var(--accent);margin-right:.4rem;font-size:.5rem}.tool-intro{max-width:70ch;color:var(--muted);margin:1rem 0 2rem;font-size:.82rem;line-height:1.8}.tool-workspace{border:1px solid var(--line);background:var(--surface);grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);display:grid}.file-drop{text-align:center;cursor:pointer;border:1px dashed var(--line-strong);flex-direction:column;justify-content:center;align-items:center;gap:1rem;min-height:300px;margin:1rem;padding:2.5rem 1.5rem;display:flex}.file-drop svg{color:var(--accent);margin-bottom:.5rem}.file-drop strong{font-size:.98rem;font-weight:550}.file-drop small{max-width:38ch;color:var(--faint);font-size:.65rem;line-height:1.8}.file-drop:hover,.file-drop[data-dragging]{border-color:var(--accent);background:var(--bg)}.file-drop:focus-within{outline:2px solid var(--accent);outline-offset:3px}.file-drop:has(input:disabled){cursor:default;opacity:.6}.file-choose{color:var(--accent);text-underline-offset:.3em;font-size:.78rem;text-decoration:underline}.conversion-settings{border-left:1px solid var(--line);flex-direction:column;justify-content:space-between;gap:1.5rem;min-width:0;padding:1.5rem;display:flex}.conversion-settings fieldset{border:0;min-width:0;margin:0;padding:0}.conversion-settings legend{margin-bottom:.85rem;padding:0;font-size:.78rem}.format-options{grid-template-columns:1fr 1fr;gap:.6rem;display:grid}.format-options label{cursor:pointer;border:1px solid var(--line-strong);align-items:center;gap:.65rem;padding:.85rem;display:flex}.format-options label:has(input:checked){border-color:var(--accent);background:var(--bg)}.format-options input{accent-color:var(--accent)}.format-options strong,.format-options small{display:block}.format-options strong{font-size:.85rem;font-weight:550}.format-options small{color:var(--faint);margin-top:.3rem;font-size:.59rem}.quality-setting{margin-top:1.5rem}.quality-setting label{justify-content:space-between;font-size:.73rem;display:flex}.quality-setting output{font-variant-numeric:tabular-nums;color:var(--accent)}.quality-setting input{width:100%;accent-color:var(--accent);cursor:pointer;min-height:30px;margin:.6rem 0 0}.quality-setting p,.format-explanation{color:var(--faint);margin:.5rem 0 0;font-size:.65rem;line-height:1.7}.conversion-actions{flex-wrap:wrap;gap:.6rem;display:flex}.image-tool button,.tool-download{font:inherit;border:1px solid var(--line-strong);cursor:pointer;justify-content:center;align-items:center;min-height:44px;padding:.7rem 1rem;font-size:.72rem;text-decoration:none;display:inline-flex}.image-tool .tool-primary{color:var(--bg);background:var(--text);border-color:var(--text);flex:1}.image-tool .tool-primary:hover:not(:disabled){background:var(--accent);border-color:var(--accent)}.tool-secondary{color:var(--muted);background:0 0}.tool-secondary:hover{color:var(--text);background:var(--bg)}.tool-download{color:var(--accent);border-color:var(--accent)}.image-tool button:disabled{cursor:default;opacity:.45}.image-tool :is(button,a,input):focus-visible{outline:2px solid var(--accent);outline-offset:3px}.image-tool [hidden]{display:none!important}.conversion-feedback{color:var(--muted);min-height:2rem;margin:1.25rem 0;font-size:.75rem}.conversion-feedback p{margin:.6rem 0;line-height:1.7}.conversion-feedback [role=alert]{border-left:2px solid var(--accent);color:var(--text);padding-left:.8rem}.conversion-feedback progress{width:100%;height:5px;accent-color:var(--accent);display:block}.conversion-results>header{border-bottom:1px solid var(--line-strong);justify-content:space-between;align-items:center;gap:1rem;padding:1rem 0;display:flex}.conversion-results h3{margin:0;font-size:.92rem;font-weight:550}.conversion-results h3 span{color:var(--faint);margin-left:.5rem;font-size:.72rem}.image-results{margin:0;padding:0;list-style:none}.image-result{border-bottom:1px solid var(--line);grid-template-columns:88px minmax(0,1fr) auto;align-items:center;gap:1.2rem;padding:1.35rem 0;display:grid}.result-preview{background:var(--surface);width:88px;height:88px;color:var(--faint);border:1px solid var(--line);place-items:center;font-size:.58rem;display:grid}.result-preview img{object-fit:contain;width:100%;height:100%}.result-copy h4{overflow-wrap:anywhere;margin:0;font-size:.82rem;font-weight:550}.result-copy p{color:var(--faint);margin:.4rem 0 0;font-size:.66rem;line-height:1.6}.result-copy .result-state{color:var(--text)}.image-result[data-state=error] .result-state{color:var(--accent)}.result-actions{align-items:center;gap:.6rem;display:flex}.tool-notes{border-top:1px solid var(--line);margin-top:2rem;padding-top:1.3rem;font-size:.75rem}.tool-notes summary{cursor:pointer;color:var(--muted);padding:.5rem 0}.tool-notes p{max-width:90ch;color:var(--muted);line-height:1.85}.tool-notes a{text-underline-offset:.2em}.tool-noscript{color:var(--text)}@container (width<=760px){.tool-workspace{grid-template-columns:1fr}.file-drop{min-height:230px}.conversion-settings{border-left:0;border-top:1px solid var(--line);padding:1.5rem}.tool-heading{flex-direction:column;align-items:start}.image-result{grid-template-columns:64px minmax(0,1fr);gap:.9rem}.result-preview{width:64px;height:64px}.result-actions{flex-wrap:wrap;grid-column:2}}