.ic-drop-zone.drop-zone--active,#dropZone.drop-active,.ic-drop-active{border-color:var(--color-primary);background-color:color-mix(in srgb, var(--color-primary) 6%, var(--color-background))}.preset-chip{border:1.5px solid var(--color-border);color:var(--color-text-secondary);background:var(--color-background);border-radius:999px;padding:.4rem .85rem;font-size:.75rem;font-weight:600;transition:border-color .2s,background-color .2s,color .2s}.preset-chip:hover{border-color:color-mix(in srgb, var(--color-primary) 50%, var(--color-border));color:var(--color-primary)}.preset-chip--active{border-color:var(--color-primary);background:var(--color-primary);color:#fff}.format-opt{text-align:left;border-radius:var(--radius-lg);border:1.5px solid var(--color-border);background:var(--color-background);color:var(--color-text-secondary);padding:.75rem .9rem;transition:border-color .2s,background-color .2s,color .2s}.format-opt:hover{border-color:color-mix(in srgb, var(--color-primary) 50%, var(--color-border))}.format-opt--active{border-color:var(--color-primary);background:color-mix(in srgb, var(--color-primary) 7%, var(--color-background));color:var(--color-text-primary)}#compareAfterImg,#afterImage{clip-path:inset(0 50% 0 0)}.toast--out{opacity:0}.faq-icon.rotate-180,.faqIcon.rotate-180{transform:rotate(180deg)}.faq-toggle[aria-expanded=true]{background-color:color-mix(in srgb, var(--color-primary) 4%, var(--color-background))}.faq-toggle[aria-expanded=true] .faq-icon{transform:rotate(180deg)}.faq-answer{animation:.2s ease-out faqOpen}@keyframes faqOpen{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}#dropZone:focus-visible,.ic-drop-zone:focus-visible,.format-opt:focus-visible,.preset-chip:focus-visible,#compressBtn:focus-visible,#downloadBtn:focus-visible,.faq-toggle:focus-visible,.faqButton:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}#shapeGrid button{min-height:78px}#cropCanvas{image-rendering:auto}#canvasWrapper{touch-action:none}@media (prefers-reduced-motion:reduce){.preset-chip,.faq-icon,.faq-answer{transition:none;animation:none}}