.webp-converter-page{--compressor-border:#dce2e9;--compressor-surface:#f7f9fc;--compressor-radius:.85rem;--compressor-gap:1.5rem;--compressor-thumbnail-size:80px;--compressor-file-columns:2;--compressor-unit-width:7rem;--webp-mode-padding:.5rem .75rem;overflow-wrap:anywhere}.webp-converter-page .hero-image img[fetchpriority=high]{opacity:1!important;visibility:visible!important;animation:none!important;transition:none!important;transform:none!important;filter:none!important}.compressor-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(19rem,25rem);gap:var(--compressor-gap);align-items:start}.compressor-files,.compressor-settings{min-width:0}.compressor-settings h2{overflow-wrap:anywhere}#compressorForm .select-wrapper{min-width:0;max-width:100%}#compressorForm .form-control{background:#fff}#compressorForm .select-wrapper .form-outline .select-input{text-overflow:ellipsis}#compressorForm .select-wrapper .select-label{max-width:calc(100% - 2rem);overflow:hidden;text-overflow:ellipsis}#compressorForm .compressor-dimension-input>.form-outline,#compressorForm .compressor-dimension-input>.select-wrapper{min-width:0;width:100%}#compressorForm .compressor-dimension-input .form-control{min-width:0}.compressor-remove:focus-visible{outline:2px solid var(--mdb-primary,#1266f1);outline-offset:2px}#compressorForm #sortArea{min-width:15rem;max-width:100%}.compressor-settings{container-type:inline-size;padding:1.5rem;border:1px solid var(--compressor-border);border-radius:var(--compressor-radius);background:var(--compressor-surface)}.compressor-dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:15rem;padding:2rem 1.25rem;text-align:center;border:2px dashed #b9c5d5;border-radius:var(--compressor-radius);background:#fff;transition:background-color .15s,border-color .15s}.compressor-dropzone>svg{width:2rem;height:2rem;margin-bottom:1rem;color:var(--mdb-primary,#1266f1)}.compressor-dropzone #files{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.compressor-dropzone.is-dragover,.compressor-dropzone:focus-within{border-color:var(--mdb-primary,#1266f1);background:#f1f6ff;outline:2px solid var(--mdb-primary,#1266f1);outline-offset:3px}.compressor-file-label{min-height:44px;margin:0;display:inline-flex;align-items:center;justify-content:center}.compressor-list-heading{display:flex;gap:1rem;align-items:center;justify-content:space-between}.compressor-list-heading>p{overflow-wrap:anywhere}.compressor-file-list{display:grid;grid-template-columns:repeat(var(--compressor-file-columns),minmax(0,1fr));column-gap:var(--compressor-gap);padding:0;list-style:none}.compressor-file{display:flex;min-width:0;align-items:center;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--compressor-border)}.compressor-thumbnail{width:var(--compressor-thumbnail-size);height:var(--compressor-thumbnail-size);flex:0 0 var(--compressor-thumbnail-size);display:grid;place-items:center;background:var(--compressor-surface);border:1px solid var(--compressor-border);border-radius:.5rem;overflow:hidden}.compressor-thumbnail img{width:100%;height:100%;object-fit:contain;grid-area:1/1}.compressor-thumbnail span{color:#556275;grid-area:1/1}.compressor-file-details{flex:1;min-width:0}.compressor-file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.compressor-remove{flex:0 0 44px;width:44px;height:44px;padding:0;color:#5c6778;text-decoration:none}.compressor-remove:hover{color:#b42318;background:#fff1f0}.compressor-dimension-input,.compressor-dimensions{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}.compressor-settings .form-check{display:flex;gap:.6rem;align-items:flex-start;padding-left:0}.compressor-settings .form-check-input{flex-shrink:0;margin:.3rem 0 0}.compressor-settings .form-check-label{min-height:44px;cursor:pointer}.compressor-actions .btn{min-height:44px;white-space:normal}.compressor-settings #resizeHint{white-space:pre-line}.compressor-settings #compressorError{overflow-wrap:anywhere}.compressor-settings .progress{height:.5rem}.compressor-settings .progress-bar{width:0}.compressor-result{padding:1.5rem;border:1px solid #b5d5ff;border-radius:var(--compressor-radius);background:#f3f8ff}.compressor-result #compressed-info{white-space:pre-line;overflow-wrap:anywhere}.compressor-result:focus{outline:2px solid var(--mdb-primary,#1266f1);outline-offset:3px}.is-busy .compressor-dropzone{opacity:.65}@media (max-width:1399.98px){.compressor-grid{grid-template-columns:minmax(0,1fr) minmax(18rem,22rem)}.compressor-settings{padding:1.25rem}.compressor-dimensions{grid-template-columns:minmax(0,1fr)}}@media (max-width:991.98px){.webp-converter-page{--compressor-file-columns:1}.compressor-grid{grid-template-columns:minmax(0,1fr)}.compressor-list-heading{flex-wrap:wrap}}@media (max-width:575.98px){.webp-converter-page{--compressor-gap:1rem;--compressor-thumbnail-size:64px}.compressor-dropzone{min-height:13rem;padding:1.25rem .75rem}.compressor-result,.compressor-settings{padding:1rem}.compressor-file{gap:.65rem}.compressor-dimensions{grid-template-columns:minmax(0,1fr)}.compressor-list-heading #sortArea,.compressor-list-heading .select-wrapper{width:100%}}@media (prefers-reduced-motion:reduce){.compressor-dropzone,.compressor-settings .progress-bar{transition:none}}@container (min-width: 17rem){.compressor-dimension-input{grid-template-columns:minmax(0,1fr) var(--compressor-unit-width);gap:.4rem}}@container (min-width: 40rem){.compressor-dimensions{grid-template-columns:repeat(2,minmax(0,1fr))}}.webp-mode-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.webp-mode-options .webp-mode-option{--webp-label-padding:calc(max(0px, 22px - .5lh));min-width:0;align-items:flex-start;padding:var(--webp-mode-padding);border:1px solid var(--compressor-border);border-radius:var(--compressor-radius)}.webp-mode-option .form-check-input{margin-block-start:calc(.5lh - .625rem + var(--webp-label-padding))}.webp-mode-option .form-check-label{flex:1;min-width:0;min-height:44px;padding-block:var(--webp-label-padding);cursor:pointer;overflow-wrap:anywhere}.webp-mode-option:has(.form-check-input:checked){border-color:var(--mdb-primary,#1266f1);background:#f1f6ff}.compressor-file.is-incompatible{border-color:#b42318}#failedFilesList{overflow-wrap:anywhere}@media (max-width:767.98px){.webp-converter-page{--webp-mode-padding:.5rem}.webp-mode-options{grid-template-columns:minmax(0,1fr)}}