.avif-demo:where(.astro-owk6zxnw){border:1px solid var(--sl-color-gray-5, #444);border-radius:8px;padding:1.5rem;margin:1.5rem 0;background:var(--sl-color-bg-nav, #1e1e2e)}.upload-area:where(.astro-owk6zxnw){border:2px dashed var(--sl-color-gray-4, #555);border-radius:6px;padding:2rem 1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;position:relative}.upload-area:where(.astro-owk6zxnw):hover,.upload-area:where(.astro-owk6zxnw).drag-over{border-color:var(--sl-color-accent, #6b8cff);background:var(--sl-color-accent-low, rgba(107,140,255,.08))}#file-input:where(.astro-owk6zxnw){position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}.upload-icon:where(.astro-owk6zxnw){width:2rem;height:2rem;margin-bottom:.75rem;color:var(--sl-color-gray-3, #888)}.upload-text:where(.astro-owk6zxnw){margin:0;font-weight:600}.upload-hint:where(.astro-owk6zxnw){margin:.25rem 0 0;font-size:.85rem;color:var(--sl-color-gray-3, #888)}.controls:where(.astro-owk6zxnw){margin-top:1.25rem;display:flex;flex-direction:column;gap:.75rem}.control-row:where(.astro-owk6zxnw){display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.control-label:where(.astro-owk6zxnw){min-width:5rem;font-weight:600;font-size:.9rem}#quality-slider:where(.astro-owk6zxnw){flex:1;min-width:120px;max-width:220px}.control-value:where(.astro-owk6zxnw){min-width:2rem;font-variant-numeric:tabular-nums}.radio-group:where(.astro-owk6zxnw){display:flex;gap:1.25rem;align-items:center}.radio-label:where(.astro-owk6zxnw){display:flex;align-items:center;gap:.35rem;font-size:.9rem;cursor:pointer;line-height:1;margin:0}.radio-label:where(.astro-owk6zxnw) input:where(.astro-owk6zxnw)[type=radio]{margin:0;flex-shrink:0}.convert-btn:where(.astro-owk6zxnw){margin-top:1.25rem;padding:.6rem 1.5rem;background:var(--sl-color-accent, #6b8cff);color:#fff;border:none;border-radius:5px;font-size:.95rem;font-weight:600;cursor:pointer;transition:opacity .15s}.convert-btn:where(.astro-owk6zxnw):disabled{opacity:.45;cursor:not-allowed}.convert-btn:where(.astro-owk6zxnw):not(:disabled):hover{opacity:.85}.comparison:where(.astro-owk6zxnw){margin-top:1.25rem;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto 220px auto;gap:.6rem 1.25rem}.comparison:where(.astro-owk6zxnw)[hidden],.chroma-note:where(.astro-owk6zxnw)[hidden]{display:none}.comparison:where(.astro-owk6zxnw)>:where(.astro-owk6zxnw){margin-top:0}.download-link:where(.astro-owk6zxnw)[hidden]{display:none}.cmp-z-header:where(.astro-owk6zxnw){grid-column:1;grid-row:1}.cmp-z-stats:where(.astro-owk6zxnw){grid-column:1;grid-row:2}.cmp-z-preview:where(.astro-owk6zxnw){grid-column:1;grid-row:3}.cmp-z-dl:where(.astro-owk6zxnw){grid-column:1;grid-row:4}.cmp-c-header:where(.astro-owk6zxnw){grid-column:2;grid-row:1}.cmp-c-stats:where(.astro-owk6zxnw){grid-column:2;grid-row:2}.cmp-c-preview:where(.astro-owk6zxnw){grid-column:2;grid-row:3}.cmp-c-dl:where(.astro-owk6zxnw){grid-column:2;grid-row:4}@media(max-width:600px){.upload-area:where(.astro-owk6zxnw){padding:1.5rem .5rem}.upload-hint:where(.astro-owk6zxnw){font-size:.8rem}}@media(max-width:600px){.comparison:where(.astro-owk6zxnw){grid-template-columns:1fr;grid-template-rows:none}.comparison:where(.astro-owk6zxnw)>:where(.astro-owk6zxnw){grid-column:1;grid-row:auto}.cmp-c-header:where(.astro-owk6zxnw){margin-top:1.25rem}}.col-header:where(.astro-owk6zxnw){display:flex;flex-direction:column;gap:.2rem;padding:.1rem 0}.col-title:where(.astro-owk6zxnw){font-weight:700;font-size:.9rem}.col-chroma:where(.astro-owk6zxnw){font-size:.75rem}.chroma-444:where(.astro-owk6zxnw){color:var(--sl-color-accent, #6b8cff)}.chroma-420:where(.astro-owk6zxnw){color:var(--sl-color-gray-3, #888)}.stats:where(.astro-owk6zxnw){font-size:.85rem;line-height:1.6;align-self:start}.preview-area:where(.astro-owk6zxnw){display:flex;align-items:center;justify-content:center;overflow:hidden}.preview-area:where(.astro-owk6zxnw) img:where(.astro-owk6zxnw){max-width:100%;max-height:100%;border-radius:4px;object-fit:contain}.download-link:where(.astro-owk6zxnw){display:inline-block;padding:.35rem .9rem;border:1px solid var(--sl-color-accent, #6b8cff);border-radius:5px;font-size:.8rem;color:var(--sl-color-accent, #6b8cff);text-decoration:none;align-self:start;justify-self:center}.download-link:where(.astro-owk6zxnw):hover{background:var(--sl-color-accent-low, rgba(107,140,255,.1))}.chroma-note:where(.astro-owk6zxnw){margin-top:.75rem;font-size:.8rem;color:var(--sl-color-gray-3, #888);line-height:1.5}.wasm-note:where(.astro-owk6zxnw){margin-top:.75rem;font-size:.8rem;color:var(--sl-color-gray-3, #888)}