.compressor-page{--compress-ink:#252a30;--compress-muted:#606771;--compress-line:#e2e6e9;--compress-accent:#1676bd;background:#fafbfc;color:var(--compress-ink)}
.compressor-main{max-width:1240px;margin:auto;padding:0 40px 70px;font-family:'Noto Sans SC',sans-serif;line-height:1.6}
.compressor-main [hidden]{display:none!important}.compressor-main button,.compressor-main input,.compressor-main select{font:inherit}.compressor-main button{cursor:pointer}.compressor-main button:disabled{cursor:not-allowed;opacity:.5}.compressor-main button:focus-visible,.compressor-main input:focus-visible,.compressor-main select:focus-visible{outline:3px solid #1676bd;outline-offset:3px}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.compressor-intro{padding:28px 0 28px}.compressor-intro h1{font-size:36px;line-height:1.25;font-weight:700;letter-spacing:-.035em;margin:0 0 9px;max-width:none;text-wrap:balance}.compressor-intro>p{font-size:16px;color:var(--compress-muted);margin:0 0 13px}.privacy-line{display:flex;align-items:center;gap:7px;color:#246449;font-size:12px}
.compressor-workspace{display:grid;grid-template-columns:minmax(0,1fr) 306px;border:1px solid var(--compress-line);border-radius:14px;background:white;box-shadow:0 8px 30px #24385005;overflow:clip}.image-workspace{min-width:0;display:flex;flex-direction:column;padding:23px 26px}.subtle-button{border:0;background:transparent;color:var(--compress-accent);font-size:12px!important;padding:7px 9px;border-radius:5px}.subtle-button:hover{background:#edf5fc}.drop-zone{margin-top:22px;min-height:365px;border:1.5px dashed #c8d6e0;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#f8fbfd;padding:28px 18px;transition:background .18s,border-color .18s}.drop-zone.drag-over{border-color:#1676bd;background:#eaf4fc}.upload-art{color:#4d88af;margin-bottom:17px}.drop-zone h2{font-size:21px;font-weight:600;line-height:1.3;margin:0 0 6px}.drop-zone p{font-size:13px;color:var(--compress-muted);margin:0 0 20px}.compressor-primary{display:inline-flex;align-items:center;justify-content:center;gap:18px;border:1px solid var(--compress-accent);border-radius:7px;background:var(--compress-accent);color:white;padding:11px 21px;min-height:44px;font-size:13px!important;font-weight:600!important;transition:background .16s}.compressor-primary:hover:not(:disabled){background:#0e609b}.drop-zone small{font-size:11px;color:var(--compress-muted);margin:16px 0 0}.sample-button{font-size:12px!important;border:0;background:transparent;color:#495e6d;margin-top:22px;padding:6px;text-decoration:underline;text-underline-offset:4px}
.compression-settings{padding:24px;background:#f7f9fa;border-left:1px solid var(--compress-line)}.compression-settings h2{font-size:14px;font-weight:650;margin:0 0 21px}.compression-settings fieldset{border:0;padding:0;margin:0;min-width:0}.mode-switch{display:flex;background:#e9edf0;border-radius:7px;padding:3px;gap:3px}.mode-switch button{flex:1;min-height:35px;font-size:12px;border:0;background:transparent;color:#58626b;border-radius:5px;padding:5px 9px}.mode-switch button[aria-pressed=true]{background:#fff;color:#1b506f;box-shadow:0 1px 3px #00000012;font-weight:600}.setting-block{margin-top:25px}.setting-block>label{display:flex;justify-content:space-between;font-size:12px;font-weight:550;margin-bottom:10px;color:var(--compress-ink)}.setting-block output{font-variant-numeric:tabular-nums;color:#1676bd}.setting-block input[type=range]{width:100%;accent-color:#1676bd;margin:5px 0;cursor:pointer}.setting-help{font-size:11px;color:var(--compress-muted);line-height:1.75;margin:10px 0 0}.number-unit{display:flex;align-items:center;gap:8px}.number-unit input{border:0;min-width:0;width:100%;background:transparent;font-size:14px}.number-unit span{color:var(--compress-muted);font-size:12px}.target-presets{display:flex;gap:5px;margin:10px 0 7px}.target-presets button{flex:1;border:1px solid #d8dfe5;background:white;border-radius:5px;font-size:10px;padding:5px 0}.target-presets button[aria-pressed=true]{border-color:#1676bd;color:#1269a6;background:#edf6fd}.setting-block small{font-size:10px;color:var(--compress-muted)}.setting-block .checkbox-label{display:flex;align-items:flex-start;justify-content:flex-start;gap:6px;line-height:1.6;font-weight:400;margin-top:12px;font-size:11px}.checkbox-label input{accent-color:#1676bd;margin-top:3px}.compress-button{width:100%;margin-top:23px;justify-content:space-between}.cancel-button{display:block;margin:8px auto 0}
.tool-message{font-size:12px;color:#a34521;overflow-wrap:anywhere;margin-top:12px}.tool-message:empty{display:none}.batch-summary{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px;padding-top:18px;border-top:1px solid var(--compress-line)}.batch-summary p{font-size:12px;margin:0;color:#246449}.batch-summary button{font-size:11px!important;white-space:nowrap;padding:9px 14px}
.compressor-noscript{padding:16px;background:#fff2da}.compressor-page .site-footer{border-top:1px solid var(--compress-line)}
@media(max-width:900px){.compressor-main{padding:0 22px 45px}.compressor-workspace{grid-template-columns:minmax(0,1fr) 270px}.image-workspace{padding:19px}.compression-settings{padding:20px}.batch-summary{flex-wrap:wrap}}
@media(max-width:650px){.compressor-main{padding:0 16px 35px}.compressor-intro{padding:23px 0}.compressor-intro h1{font-size:29px}.compressor-intro>p{font-size:13px}.compressor-workspace{grid-template-columns:1fr}.compression-settings{border-left:0;border-top:1px solid var(--compress-line);padding:22px}.image-workspace{padding:16px}.drop-zone{min-height:310px;padding:24px 10px}.drop-zone h2{font-size:20px}.drop-zone small{font-size:10px}.subtle-button{padding:7px 5px;font-size:11px!important}.compressor-intro .privacy-line{font-size:11px}}
@media(prefers-reduced-motion:reduce){.compressor-main *{transition:none!important}}
/* Keep the workspace quiet; explanations live below the divider. */
.compressor-intro{padding-top:36px}.compressor-intro>p{margin-bottom:10px}.drop-zone h2{margin-bottom:22px}.sample-button{margin-top:16px}.drop-zone{min-height:326px}.compression-settings{padding-bottom:26px}.compression-progress:empty,#compression-progress:empty{display:none}.compressor-primary:active:not(:disabled){background:#0b5388}
.compressor-divider{border:0;border-top:2px solid #cfd8e0;margin:64px 0 0;width:100%}.compressor-editorial{padding-top:0}.compressor-editorial h2{font-size:27px;font-weight:650;line-height:1.4;letter-spacing:-.025em;text-wrap:balance;margin:0 0 18px}.compressor-editorial p{font-size:14px;line-height:1.95;color:var(--compress-muted);text-wrap:pretty}.editorial-heading>p{max-width:60ch;margin:0}.compressor-guide{display:grid;grid-template-columns:1fr 1.25fr;gap:80px;padding:56px 0;border-bottom:1px solid var(--compress-line)}.compressor-guide ol{padding:0 0 0 22px;margin:0}.compressor-guide li{padding-left:12px;margin-bottom:24px;font-size:14px}.compressor-guide li:last-child{margin-bottom:0}.compressor-guide li::marker{color:var(--compress-accent);font-weight:600}.compressor-guide li strong{font-size:15px;font-weight:600}.compressor-guide li p{margin:6px 0 0;font-size:13px;line-height:1.85}
.compressor-story{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center;padding:60px 0;border-bottom:1px solid var(--compress-line)}.story-copy p{margin:0 0 15px;max-width:60ch}.editorial-link{display:inline-flex;margin-top:8px;align-items:center;gap:10px;font-size:13px;font-weight:550;color:var(--compress-accent)}.editorial-link:hover{text-decoration:underline;text-underline-offset:4px}.editorial-media{margin:0;padding:25px;background:#eff3f6;border-radius:10px;min-width:0}.editorial-media figcaption{font-size:11px;color:var(--compress-muted);line-height:1.8;margin-top:18px;text-align:center}.example-comparison{display:grid;grid-template-columns:1fr 1fr;gap:14px}.example-comparison img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:5px}.example-comparison>div>span{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--compress-muted);margin-top:12px;flex-wrap:wrap}.example-comparison b{font-weight:600;color:var(--compress-ink)}.story-reverse .story-copy{order:2}.story-reverse .editorial-media{order:1}.target-guide-media{text-align:center;padding:26px 36px}.target-guide-media>img{width:100%;max-width:270px;height:auto;display:block;margin:auto;border:1px solid var(--compress-line);border-radius:8px}.compressor-editorial .editorial-note{font-size:12px;color:#596777;margin-top:18px}
.compressor-formats{padding:54px 0;border-bottom:1px solid var(--compress-line)}.format-table-wrap{overflow-x:auto;margin-top:26px}.compressor-formats table{width:100%;border-collapse:collapse;text-align:left;font-size:13px}.compressor-formats th,.compressor-formats td{padding:17px 20px;border-bottom:1px solid var(--compress-line);vertical-align:top;line-height:1.85}.compressor-formats th:first-child,.compressor-formats td:first-child{padding-left:0;white-space:nowrap}.compressor-formats thead th{font-size:12px;color:var(--compress-muted);font-weight:500;padding-top:10px}.compressor-formats tbody th{font-weight:600}.compressor-formats td{color:var(--compress-muted)}.compressor-formats td:nth-child(2){white-space:nowrap;color:var(--compress-ink)}
.compressor-use-cases{padding:54px 0;border-bottom:1px solid var(--compress-line)}.use-case-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px;margin-top:26px}.use-case-columns h3{font-size:16px;font-weight:600;margin:0 0 10px}.use-case-columns p{font-size:13px;margin:0;line-height:1.9}.compressor-faq{padding:54px 0 10px;max-width:860px;margin:0 auto}.compressor-faq details{padding:19px 0}.compressor-faq summary{font-size:14px}.compressor-faq details p{font-size:13px;line-height:1.9;margin-top:14px}
@media(max-width:900px){.compressor-guide{gap:35px}.compressor-story{gap:30px}.editorial-media{padding:18px}.use-case-columns{gap:24px}.compressor-editorial h2{font-size:24px}}
@media(max-width:650px){.compressor-divider{margin-top:40px}.compressor-editorial h2{font-size:23px;margin-bottom:14px}.compressor-guide{grid-template-columns:1fr;gap:26px;padding:35px 0}.compressor-story{grid-template-columns:1fr;gap:25px;padding:36px 0}.story-reverse .story-copy,.story-reverse .editorial-media{order:initial}.compressor-editorial p{font-size:14px;line-height:1.9}.editorial-media{padding:20px}.example-comparison{gap:12px}.target-guide-media>img{max-width:245px}.compressor-formats,.compressor-use-cases,.compressor-faq{padding-top:36px;padding-bottom:36px}.format-table-wrap{margin-top:15px}.compressor-formats th,.compressor-formats td{padding:13px 10px;font-size:12px}.compressor-formats th:first-child{white-space:normal}.use-case-columns{grid-template-columns:1fr;gap:25px;margin-top:20px}.use-case-columns p,.compressor-faq details p{font-size:14px}.compressor-faq summary{font-size:14px}.editorial-link,.sample-button{min-height:44px}.compressor-intro{padding-top:26px}}
.thumbnail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));align-content:start;gap:24px 18px;padding:25px 4px 22px;max-height:430px;overflow:auto}.image-tile{position:relative;min-width:0;max-width:152px}.tile-picture{position:relative;aspect-ratio:1;display:grid;place-items:center;border:1px solid var(--compress-line);border-radius:8px;background:repeating-conic-gradient(#edf0f2 0 25%,#fff 0 50%) 0/12px 12px}.tile-picture img{width:100%;height:100%;aspect-ratio:1;object-fit:cover;object-position:center;display:block;border-radius:7px}.tile-placeholder{color:var(--compress-muted);font-size:22px}.tile-remove{position:absolute;top:-9px;right:-9px;width:25px;height:25px;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid #dce1e5;border-radius:50%;background:#fff;color:#15191e;line-height:1;box-shadow:0 1px 4px #0002;z-index:1}.tile-remove:hover:not(:disabled){background:#f2f4f6}.tile-remove svg{display:block;flex:none;pointer-events:none}.tile-status{display:block;font-size:11px;line-height:1.5;color:var(--compress-muted);margin-top:8px}.tile-status:empty{display:none}.tile-status.error{color:#a13327}.tile-download{background:transparent;border:0;color:var(--compress-accent);font-size:11px!important;padding:4px 0}.tile-download:hover{text-decoration:underline}.thumbnail-grid:empty{display:none}@media(max-width:650px){.thumbnail-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 18px;padding:25px 8px;max-height:390px}.tile-remove{width:28px;height:28px;top:-10px;right:-10px}.tile-remove::before{content:'';position:absolute;inset:-7px}.tile-download{min-height:36px}}
.thumbnail-grid{padding-left:12px;padding-right:12px}.tile-status{margin-top:0}.tile-download{position:absolute;right:7px;bottom:7px;display:grid;place-items:center;width:29px;height:29px;border:1px solid #d6e0e7;border-radius:6px;background:#fffffff2;color:#176da8;font-size:18px!important;padding:0;line-height:1;box-shadow:0 1px 4px #0001}.tile-download:hover{background:#e8f4fd;text-decoration:none}@media(max-width:650px){.thumbnail-grid{padding-left:12px;padding-right:12px}.tile-download{width:32px;height:32px;min-height:32px}.tile-download::before{content:'';position:absolute;inset:-6px}}
.upload-more-tile{display:flex;align-items:center;justify-content:center;width:100%;max-width:152px;aspect-ratio:1;padding:0;border:1.5px dashed #bdcbd6;border-radius:8px;background:#f7fafc;color:#4b7d9f}.upload-more-tile:hover:not(:disabled){background:#edf5fb;border-color:var(--compress-accent);color:var(--compress-accent)}.upload-more-tile svg{display:block;flex:none;pointer-events:none}.image-workspace>.drop-zone{margin-top:0}.thumbnail-grid{padding-top:12px}

/* Adapted from shadcn/ui Native Select: https://ui.shadcn.com/docs/components/native-select */
.format-select{position:relative;width:100%;isolation:isolate}.compression-settings .format-select select{appearance:none;width:100%;height:40px;min-height:40px;padding:8px 36px 8px 12px;border:1px solid #d5dbe1;border-radius:6px;background:#fff;color:var(--compress-ink);box-shadow:0 1px 2px #00000008;outline:none;cursor:pointer;transition:border-color .15s,box-shadow .15s}.compression-settings .format-select select:focus-visible{border-color:#8ba1b2;box-shadow:0 0 0 3px #9caab43b;outline:none}.format-select .select-chevron{position:absolute;right:12px;top:12px;color:#6c737c;pointer-events:none}.format-select select:disabled{cursor:not-allowed;opacity:.5}
@supports(appearance:base-select){.compression-settings .format-select select,.format-select select::picker(select){appearance:base-select}.format-select select::picker-icon{display:none}.format-select select::picker(select){border:1px solid #e0e4e8;border-radius:7px;background:#fff;box-shadow:0 6px 18px #1825361c;padding:4px;margin-top:5px;color:var(--compress-ink);font-family:inherit;font-size:13px}.format-select option{border-radius:4px;padding:9px 10px;gap:10px;min-height:36px;font-size:13px}.format-select option:hover,.format-select option:focus{background:#f1f3f5;outline:none}.format-select option:checked{background:#f5f6f7}.format-select option::checkmark{order:2;margin-left:auto;font-size:12px}}
.resize-settings{margin-top:25px;padding-top:22px;border-top:1px solid var(--compress-line)}.resize-settings>label{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:550;margin-bottom:10px}.resize-settings>label>span{font-size:10px;font-weight:400;color:var(--compress-muted)}.resize-settings .number-unit input{font-size:12px}.resize-settings .setting-help{margin-bottom:0}
.compressor-workspace{height:680px;min-height:680px}.image-workspace{min-height:0;overflow:hidden}.compression-settings{min-height:0;overflow-y:auto}.thumbnail-grid{max-height:485px}.image-workspace #loaded-workspace{min-height:0;overflow:auto}.batch-summary{flex-shrink:0}.image-workspace .drop-zone{flex:1;min-height:0;max-height:none}
@media(max-width:650px){.compressor-workspace{height:1020px;min-height:1020px;grid-template-rows:340px minmax(0,1fr)}.image-workspace .drop-zone{min-height:0}.image-workspace #loaded-workspace{flex:1}.thumbnail-grid{max-height:none}.image-workspace .batch-summary{margin-top:8px;padding-top:10px}.compression-settings{padding:22px}.compression-settings .format-select select{font-size:14px}.image-workspace .drop-zone .upload-art{margin-bottom:10px}.image-workspace .drop-zone .sample-button{margin-top:8px}}

.compression-settings .number-unit{width:100%;min-height:40px;padding:8px 10px;border:1px solid #ccd4dc;border-radius:6px;background:#fff}.image-workspace>#drop-zone{align-self:stretch;flex:1 1 0%;margin:0;min-height:0;max-height:none}