#compressor{position:relative;margin-block:var(--space-4);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);overflow:hidden}#compressor:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--color-accent),oklch(.7 .1 168));opacity:.9;z-index:1}.compressor__head{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);background:var(--color-bg-tint)}.compressor__title{font-size:var(--fs-400);font-weight:600}.compressor__engine{margin-left:auto;display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-mono);font-size:var(--fs-300);color:var(--color-text-muted)}.compressor__engine .dot{width:7px;height:7px;border-radius:50%;background:var(--color-success);box-shadow:0 0 0 3px var(--color-success-bg)}.compressor__body{padding:var(--space-4)}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.dropzone{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-3);padding:var(--space-6) var(--space-4);border:2px dashed var(--color-border-strong);border-radius:var(--radius-lg);background:radial-gradient(120% 100% at 50% 0%,var(--color-accent-softer),transparent 60%),var(--color-surface);transition:border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease),transform var(--dur-2) var(--ease-out)}.dropzone__icon{width:56px;height:56px;display:grid;place-items:center;border-radius:var(--radius-lg);background:var(--color-bg);border:1px solid var(--color-border);color:var(--color-accent);box-shadow:var(--shadow-sm)}.dropzone__icon svg{width:26px;height:26px}.dropzone-button{font:inherit;font-size:var(--fs-600);font-weight:600;letter-spacing:-.01em;color:var(--color-text);background:none;border:none;cursor:pointer;padding:0}.dropzone-button:hover{color:var(--color-accent)}.dropzone__hint{font-size:var(--fs-400);color:var(--color-text-muted)}.dropzone-selected{display:inline-flex;align-items:center;gap:.5rem;margin-top:var(--space-1);padding:var(--space-2) var(--space-3);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius);font-family:var(--font-mono);font-size:var(--fs-300);color:var(--color-text);max-width:100%;word-break:break-all}.dropzone.is-dragover{border-color:var(--color-accent);border-style:solid;background:radial-gradient(120% 100% at 50% 0%,var(--color-accent-soft),transparent 65%),var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-accent),var(--shadow-accent)}.dropzone.is-dragover .dropzone__icon{border-color:var(--color-accent);color:var(--color-accent);animation:dz-bob .9s var(--ease) infinite}@keyframes dz-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.controls{margin-top:var(--space-4)}.control-group{border:none;margin:0 0 var(--space-4);padding:0}.control-group legend{display:block;width:100%;padding:0;margin-bottom:var(--space-3);font-size:var(--fs-400);font-weight:600;color:var(--color-text)}.control-pills{display:flex;flex-wrap:wrap;gap:var(--space-2)}.control-hint{margin:var(--space-2) 0 0;font-size:var(--fs-300);color:var(--color-text-muted)}.control-pill{position:relative;display:inline-flex;align-items:center;gap:.35rem;isolation:isolate;font-family:var(--font-mono);font-size:var(--fs-400);font-weight:500;font-variant-numeric:tabular-nums;padding:.5rem .85rem;background:var(--color-bg);border:1px solid var(--color-border-strong);border-radius:var(--radius-pill);color:var(--color-text);cursor:pointer;transition:border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}.control-pill input[type=radio]{position:absolute;top:0;left:0;opacity:0;width:1px;height:1px;margin:0}.control-pill:hover{border-color:var(--color-accent);color:var(--color-accent)}.control-pill:has(input:checked){background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-contrast)}.control-pill:has(input:focus-visible){outline:2px solid var(--color-accent);outline-offset:2px}.control-pill--custom{padding-block:.4rem}.control-custom-input{width:4.5ch;border:none;background:transparent;color:inherit;font:inherit;font-variant-numeric:tabular-nums;text-align:right;padding:0}.control-custom-input:focus{outline:none}.controls-locked{margin:0 0 var(--space-3);font-family:var(--font-mono);font-weight:600;color:var(--color-text)}.control-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-border)}.control-foot .button-primary{margin-left:auto}.widget-notice{margin:var(--space-2) 0 0;padding:var(--space-3);font-size:var(--fs-400);background:var(--color-accent-soft);border:1px solid var(--color-accent-line);border-radius:var(--radius);color:var(--color-text)}.progress{padding-block:var(--space-2)}.progress__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3)}.progress-stage{font-size:var(--fs-500);font-weight:600;margin:0;display:inline-flex;align-items:center;gap:.5rem}.progress-stage:before{content:"";width:15px;height:15px;border-radius:50%;border:2px solid var(--color-accent-soft);border-top-color:var(--color-accent);animation:spin .7s linear infinite}.progress__pct{font-family:var(--font-mono);font-size:var(--fs-600);font-weight:600;font-variant-numeric:tabular-nums;color:var(--color-accent)}.progress-bar{position:relative;height:12px;border-radius:var(--radius-pill);background:var(--color-surface);border:1px solid var(--color-border);overflow:hidden}.progress-bar-fill{position:absolute;inset:0 auto 0 0;height:100%;width:0;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--color-accent),oklch(.68 .1 172));transition:width var(--dur-3) var(--ease)}.progress-bar-fill:after{content:"";position:absolute;inset:0;background-image:linear-gradient(110deg,transparent 0 35%,rgb(255 255 255 / .35) 50%,transparent 65% 100%);background-size:200% 100%;animation:scan 1.3s linear infinite}@keyframes scan{0%{background-position:120% 0}to{background-position:-120% 0}}@keyframes spin{to{transform:rotate(360deg)}}.progress-meta{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin-top:var(--space-3);font-family:var(--font-mono);font-size:var(--fs-300);color:var(--color-text-muted)}.progress-meta p{margin:0}.progress-engine{margin:var(--space-3) 0 0;font-family:var(--font-mono);font-size:var(--fs-300);color:var(--color-text-muted)}.progress .button-secondary{margin-top:var(--space-4)}.result__banner{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4);background:var(--color-success-bg);border:1px solid color-mix(in srgb,var(--color-success) 30%,transparent);border-radius:var(--radius)}.result__banner .check{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--color-success);color:#fff}.result__banner .check svg{width:15px;height:15px}.result-heading{margin:0;font-size:var(--fs-500)}.result-heading:focus{outline:none}.size-compare{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}.size-box{padding:var(--space-3);border-radius:var(--radius);border:1px solid var(--color-border);text-align:center;background:var(--color-surface)}.size-box.after{border-color:var(--color-accent-line);background:var(--color-accent-softer)}.size-box .k{font-family:var(--font-mono);font-size:var(--fs-300);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-faint)}.size-box .v{font-family:var(--font-mono);font-size:var(--fs-700);font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}.size-box.after .v{color:var(--color-accent)}.size-arrow{font-family:var(--font-mono);font-size:var(--fs-400);font-weight:600;color:var(--color-success);display:grid;place-items:center;gap:2px;padding:.4rem .6rem;background:var(--color-success-bg);border-radius:var(--radius-pill)}.compare{position:relative;aspect-ratio:16 / 9;border-radius:var(--radius);overflow:hidden;border:1px solid var(--color-border);background:#000;--pos: 50%;margin-bottom:var(--space-3);user-select:none;touch-action:none}.compare-pane{position:absolute;inset:0}.compare-pane video{width:100%;height:100%;object-fit:contain;display:block}.compare-pane-top{clip-path:inset(0 0 0 var(--pos))}.compare-tag{position:absolute;bottom:10px;padding:3px 9px;border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:.6875rem;font-weight:600;color:#fff;background:#0000008c;backdrop-filter:blur(4px)}.compare-tag-left{left:10px}.compare-tag-right{right:10px;background:var(--color-accent)}.compare__divider{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff;transform:translate(-1px);box-shadow:0 0 0 1px #0003;pointer-events:none}.compare__handle{position:absolute;top:50%;left:var(--pos);width:38px;height:38px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;color:var(--color-accent);display:grid;place-items:center;box-shadow:var(--shadow-md);pointer-events:none}.compare__handle svg{width:18px;height:18px}.compare-slider{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}.compare-slider:focus-visible~.compare__divider{box-shadow:0 0 0 3px var(--color-accent-ring)}.result-dims{font-family:var(--font-mono);font-size:var(--fs-300);color:var(--color-text-muted);margin:0 0 var(--space-2)}.compare-hint{font-size:var(--fs-300);color:var(--color-text-faint);margin:0 0 var(--space-3)}.result-audio{width:100%;margin:0 0 var(--space-3)}.result-gif{display:block;max-width:100%;margin:0 auto var(--space-3);border-radius:var(--radius);background:#000}.result-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}.result-download{flex:1;min-width:12rem}.widget-error.error-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-3);padding:var(--space-5) var(--space-4);border:1px solid var(--color-error-line);border-radius:var(--radius-lg);background:var(--color-error-bg)}.error-state__icon{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--color-bg);color:var(--color-error);border:1px solid var(--color-error-line)}.error-state__icon svg{width:24px;height:24px}.widget-error.error-state h3{font-size:var(--fs-600);color:var(--color-error);margin:0}.widget-error.error-state p{font-size:var(--fs-400);color:var(--color-text-muted);max-width:42ch;margin:0}.error-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;margin-top:var(--space-2)}@media(max-width:34rem){.compressor__body{padding:var(--space-3)}.size-compare{grid-template-columns:1fr}.size-arrow{flex-direction:row;justify-self:center}.result-download{min-width:100%}}