.gif-webp{gap:var(--space-6);margin-top:var(--space-8);flex-direction:column;display:flex}.gif-webp .unsupported{gap:var(--space-2);padding:var(--space-4);border:1px solid var(--warning);border-radius:var(--radius-md);background:var(--warning-soft);color:var(--text);flex-direction:column;display:flex}.gif-webp .unsupported strong{font-size:var(--text-base)}.gif-webp .unsupported p{font-size:var(--text-sm);color:var(--text-2);max-width:65ch}.gif-webp .dropzone{align-items:center;gap:var(--space-2);padding:var(--space-12) var(--space-6);border:1.5px dashed var(--border-strong);border-radius:var(--radius-lg);background:var(--surface);color:var(--text-2);cursor:pointer;text-align:center;transition:border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);flex-direction:column;display:flex}.gif-webp .dropzone:hover,.gif-webp .dropzone.dragging{border-color:var(--accent);background:var(--accent-soft)}.gif-webp .dropzone svg{color:var(--accent)}.gif-webp .dropzone strong{color:var(--text)}.gif-webp .dropzone span{font-size:var(--text-sm)}.gif-webp .controls{align-items:flex-end;gap:var(--space-6);flex-wrap:wrap;display:flex}.gif-webp .field{gap:var(--space-2);font-size:var(--text-sm);color:var(--text-2);flex-direction:column;display:flex}.gif-webp .field.quality{flex:1;min-width:220px;max-width:360px}.gif-webp .field.quality>span{justify-content:space-between;display:flex}.gif-webp input[type=range]{accent-color:var(--accent)}.gif-webp .hint{font-size:var(--text-sm);color:var(--text-2);max-width:65ch}.gif-webp .queue{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);margin:0;padding:0;list-style:none}.gif-webp .row{justify-content:space-between;align-items:center;gap:var(--space-2) var(--space-4);padding:var(--space-3) var(--space-4);flex-wrap:wrap;display:flex}.gif-webp .row+.row{border-top:1px solid var(--border)}.gif-webp .row-main{gap:var(--space-1);flex-direction:column;flex:1;min-width:0;display:flex}.gif-webp .name{text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm);font-weight:550;overflow:hidden}.gif-webp .sizes{font-size:var(--text-xs);color:var(--text-3)}.gif-webp .note{font-size:var(--text-xs);color:var(--warning)}.gif-webp .row-side{align-items:center;gap:var(--space-3);flex-shrink:0;display:flex}.gif-webp .delta{padding:0 var(--space-2);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:600;line-height:1.8}.gif-webp .delta.down{color:var(--success);background:var(--success-soft)}.gif-webp .delta.up{color:var(--warning);background:var(--warning-soft)}.gif-webp .status{align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--text-3);display:inline-flex}.gif-webp .status.error{color:var(--danger);max-width:320px}.gif-webp .spinner{border:2px solid var(--border-strong);border-top-color:var(--accent);border-radius:var(--radius-full);width:14px;height:14px;animation:.8s linear infinite gif-webp-spin}@keyframes gif-webp-spin{to{transform:rotate(1turn)}}.gif-webp .btn-sm{padding:var(--space-1) var(--space-3);font-size:var(--text-xs)}.gif-webp .summary{align-items:center;gap:var(--space-4);font-size:var(--text-sm);color:var(--text-2);flex-wrap:wrap;display:flex}.gif-webp .summary .saved{color:var(--success);font-weight:600}.gif-webp .summary-actions{align-items:center;gap:var(--space-2);margin-left:auto;display:flex}.gif-webp .summary-actions .btn{padding:var(--space-2) var(--space-4);font-size:var(--text-xs)}.container[data-astro-cid-vn6sqpzv]{padding-block:var(--space-6) var(--space-12)}.tool-header[data-astro-cid-vn6sqpzv]{margin-top:var(--space-6)}.tool-header[data-astro-cid-vn6sqpzv] h1[data-astro-cid-vn6sqpzv]{font-size:var(--text-2xl)}.tool-header[data-astro-cid-vn6sqpzv] p[data-astro-cid-vn6sqpzv]{margin-top:var(--space-2);color:var(--text-2)}.badge-wrap[data-astro-cid-vn6sqpzv]{margin-top:var(--space-8)}.ad-wrap[data-astro-cid-vn6sqpzv]{margin-block:var(--space-12);justify-content:center;display:flex}.guide[data-astro-cid-vn6sqpzv]{margin-bottom:var(--space-12)}.guide[data-astro-cid-vn6sqpzv] h2[data-astro-cid-vn6sqpzv]{font-size:var(--text-xl);margin-bottom:var(--space-6)}.guide[data-astro-cid-vn6sqpzv] ol[data-astro-cid-vn6sqpzv]{gap:var(--space-6);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.guide[data-astro-cid-vn6sqpzv] li[data-astro-cid-vn6sqpzv]{gap:var(--space-4);display:flex}.step-number[data-astro-cid-vn6sqpzv]{border-radius:var(--radius-full);background:var(--accent-soft);width:28px;height:28px;color:var(--accent);font-size:var(--text-sm);flex-shrink:0;justify-content:center;align-items:center;font-weight:600;display:flex}.guide[data-astro-cid-vn6sqpzv] h3[data-astro-cid-vn6sqpzv]{font-size:var(--text-base);font-weight:600}.guide[data-astro-cid-vn6sqpzv] p[data-astro-cid-vn6sqpzv]{margin-top:var(--space-1);font-size:var(--text-sm);color:var(--text-2);max-width:65ch}