.image-compressor-page [hidden]{display:none!important}
.image-compressor-heading{margin-bottom:26px}
.image-compressor-heading h1{margin:0 0 12px;color:#172033;font-size:2rem;line-height:1.25;letter-spacing:0}
.image-compressor-heading>p:not(.image-compressor-eyebrow):not(.image-compressor-local){max-width:720px;margin:0;color:#526175;font-size:1rem;line-height:1.75}
.image-compressor-eyebrow{margin:0 0 7px;color:#0f766e;font-size:.75rem;font-weight:900}
.image-compressor-local{display:inline-flex;margin:12px 0 0;padding:8px 11px;align-items:center;border-left:3px solid #0f766e;background:#edf8f5;color:#315e58;font-size:.78rem;line-height:1.5}
.image-compressor-tool{padding:24px;border:1px solid #d9e2eb;border-radius:8px;background:#fff}
.image-compressor-tool-header{display:flex;gap:18px;align-items:flex-start;justify-content:space-between}
.image-compressor-tool-header h2,.image-compressor-section-heading h3{margin:0 0 5px;color:#1f2c40;letter-spacing:0}
.image-compressor-tool-header h2{font-size:1.25rem}
.image-compressor-tool-header p,.image-compressor-section-heading p{margin:0;color:#6a7789;font-size:.78rem;line-height:1.55}
.image-compressor-file-input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.image-compressor-upload-button,.image-compressor-actions button,.image-compressor-download{display:inline-flex;min-height:42px;margin:0;padding:0 16px;align-items:center;justify-content:center;border:0;border-radius:6px;background:#0f766e!important;color:#fff!important;box-shadow:none;font-size:.8rem;font-weight:900;cursor:pointer;text-decoration:none}
.image-compressor-upload-button:hover,.image-compressor-actions button:hover,.image-compressor-download:hover{background:#0b5f59!important}
.image-compressor-dropzone{display:grid;min-height:150px;margin-top:18px;padding:24px;place-content:center;text-align:center;border:1px dashed #8fa8b3;border-radius:8px;background:#f7fafb;cursor:pointer;transition:border-color .15s,background-color .15s}
.image-compressor-dropzone:hover,.image-compressor-dropzone:focus,.image-compressor-dropzone.is-dragging{border-color:#0f766e;background:#eef8f6;outline:0}
.image-compressor-dropzone strong{color:#27364b;font-size:.94rem}
.image-compressor-dropzone span{margin-top:7px;color:#0f766e;font-size:.77rem;font-weight:900}
.image-compressor-dropzone small{margin-top:5px;color:#758296;font-size:.7rem}
.image-compressor-file-intro{margin:16px 0 0;padding:12px 14px;border-left:3px solid #94a3b8;background:#f8fafc;color:#5f6d80;font-size:.8rem;line-height:1.6}
.image-compressor-meta{display:grid;grid-template-columns:minmax(0,2fr) repeat(2,minmax(130px,1fr));gap:10px;margin-top:16px}
.image-compressor-meta>div,.image-compressor-result-grid>div{min-width:0;padding:12px 13px;border:1px solid #dce4ec;border-radius:6px;background:#f8fafc}
.image-compressor-meta span,.image-compressor-result-grid span{display:block;color:#708095;font-size:.68rem;font-weight:800}
.image-compressor-meta strong,.image-compressor-result-grid strong{display:block;margin-top:5px;overflow-wrap:anywhere;color:#243348;font-size:.8rem;line-height:1.45}
.image-compressor-settings,.image-compressor-preview,.image-compressor-result{margin-top:24px;padding-top:22px;border-top:1px solid #e0e7ef}
.image-compressor-section-heading{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
.image-compressor-section-heading h3{font-size:1rem}
.image-compressor-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.image-compressor-select{display:flex;min-width:0;flex-direction:column;padding:13px 14px;border:1px solid #dce4ec;border-radius:7px;background:#f8fafc}
.image-compressor-select>span,.image-compressor-quality label,.image-compressor-resize legend,.image-compressor-max-side>span:first-child{color:#405167;font-size:.76rem;font-weight:900}
.image-compressor-select select{width:100%;height:44px;margin-top:8px;padding:0 10px;border:1px solid #cfd9e4;border-radius:6px;background:#fff;color:#172033;font-size:.82rem}
.image-compressor-quality,.image-compressor-resize{min-width:0;margin:0;padding:13px 14px;border:1px solid #dce4ec;border-radius:7px;background:#f8fafc}
.image-compressor-quality>div:first-child{display:flex;align-items:center;justify-content:space-between}
.image-compressor-quality output{color:#0f766e;font-size:.82rem;font-weight:900}
.image-compressor-quality input[type="range"]{width:100%;height:28px;margin:7px 0 3px;padding:0;accent-color:#0f766e}
.image-compressor-quality small,.image-compressor-resize small{display:block;margin-top:8px;color:#778497;font-size:.7rem;line-height:1.5}
.image-compressor-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:hidden;border:1px solid #cfd9e4;border-radius:6px}
.image-compressor-presets button{min-width:0;height:34px;margin:0;padding:0 5px;border:0;border-right:1px solid #cfd9e4;border-radius:0;background:#fff;color:#526175;font-size:.69rem;font-weight:800;box-shadow:none}
.image-compressor-presets button:last-child{border-right:0}
.image-compressor-presets button[aria-pressed="true"]{background:#dff2ee;color:#0a625b}
.image-compressor-resize legend{padding:0}
.image-compressor-toggle{display:flex;margin-top:10px;align-items:center;gap:8px;color:#2f4055;font-size:.8rem;font-weight:800}
.image-compressor-toggle input{width:18px;height:18px;margin:0;accent-color:#0f766e}
.image-compressor-max-side{display:flex;margin-top:12px;align-items:center;justify-content:space-between;gap:12px}
.image-compressor-max-side>span:last-child{color:#627186;font-size:.75rem;white-space:nowrap}
.image-compressor-max-side input{width:96px;height:39px;margin:0;padding:0 9px;border:1px solid #cfd9e4;border-radius:6px;background:#fff;color:#172033;font-size:.8rem}
.image-compressor-format-note{margin:12px 0 0;padding:10px 12px;border-left:3px solid #d39a30;background:#fff8e9;color:#6e592f;font-size:.73rem;line-height:1.55}
.image-compressor-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin-top:16px}
.image-compressor-actions button{width:100%}
.image-compressor-actions .image-compressor-secondary{background:#e8edf4!important;color:#314158!important}
.image-compressor-actions button:disabled,.image-compressor-upload-button[aria-disabled="true"],.image-compressor-download:disabled{background:#dce3ec!important;color:#8491a3!important;cursor:not-allowed}
.image-compressor-stage{min-height:280px;padding:16px;border:1px solid #d8e0e9;border-radius:7px;background:#eef2f6}
.image-compressor-placeholder{display:grid;min-height:246px;padding:24px;place-content:center;text-align:center}
.image-compressor-placeholder strong{color:#34445a;font-size:.9rem}
.image-compressor-placeholder p{max-width:440px;margin:7px 0 0;color:#728095;font-size:.76rem;line-height:1.6}
.image-compressor-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%}
.image-compressor-comparison figure{display:flex;min-width:0;margin:0;flex-direction:column}
.image-compressor-comparison figcaption{margin-bottom:7px;color:#334155;font-size:.78rem;font-weight:900}
.image-compressor-comparison img{display:block;width:100%;max-width:100%;height:auto;max-height:440px;object-fit:contain;border:1px solid #d6dde7;border-radius:6px;background:#fff;box-shadow:0 8px 20px rgba(31,44,64,.1)}
.image-compressor-result-empty{display:grid;min-height:220px;padding:20px;place-content:center;border:1px dashed #aebbc9;border-radius:6px;background:#f8fafc;color:#6c798c;font-size:.75rem;line-height:1.55;text-align:center}
.image-compressor-result{padding:22px 18px 18px;border:1px solid #bed7d1;border-radius:7px;background:#f5fbf9}
.image-compressor-size-change{margin:0 0 14px;color:#153b37;font-size:1.3rem;font-weight:900;line-height:1.4;overflow-wrap:anywhere}
.image-compressor-result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.image-compressor-result-grid>div{background:#fff}
.image-compressor-download{width:100%;margin-top:14px}
.image-compressor-status{margin:16px 0 0;color:#546579;font-size:.77rem;line-height:1.6}
.image-compressor-status[data-type="error"]{color:#a53a34;font-weight:800}
.image-compressor-status[data-type="success"]{color:#0a675f;font-weight:800}
.image-compressor-guide,.image-compressor-related{margin-top:38px;padding-top:30px;border-top:1px solid #dde4ed}
.image-compressor-guide>header h2,.image-compressor-related header h2{margin:0 0 8px;color:#172033;font-size:1.35rem;letter-spacing:0}
.image-compressor-guide>header p,.image-compressor-related header p{margin:0;color:#657489;font-size:.86rem;line-height:1.65}
.image-compressor-seo-visual{margin:20px 0 0}
.image-compressor-seo-visual img{display:block;width:100%;height:auto;border:1px solid #d9e2eb;border-radius:7px;background:#fff}
.image-compressor-seo-visual figcaption{margin-top:8px;color:#6d7b8e;font-size:.73rem;line-height:1.6}
.image-compressor-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:20px 0 0;padding:0;list-style:none;counter-reset:steps}
.image-compressor-steps li{min-width:0;padding:13px;border-top:3px solid #0f766e;background:#f7fafb;counter-increment:steps}
.image-compressor-steps strong,.image-compressor-steps span{display:block}
.image-compressor-steps strong{color:#26364b;font-size:.77rem}
.image-compressor-steps strong:before{content:counter(steps) ". ";color:#0f766e}
.image-compressor-steps span{margin-top:5px;color:#6d7b8e;font-size:.69rem;line-height:1.55}
.image-compressor-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin-top:26px}
.image-compressor-guide-grid section{padding:17px 0;border-top:1px solid #e1e7ee}
.image-compressor-guide-grid h3{margin:0 0 7px;color:#243348;font-size:.95rem}
.image-compressor-guide-grid p{margin:0;color:#617084;font-size:.81rem;line-height:1.75}
.image-compressor-faq{margin-top:26px}
.image-compressor-faq h2{margin:0 0 10px;color:#172033;font-size:1.2rem;letter-spacing:0}
.image-compressor-faq details{padding:14px 0;border-top:1px solid #e1e7ee}
.image-compressor-faq details:last-child{border-bottom:1px solid #e1e7ee}
.image-compressor-faq summary{color:#2d3c50;font-size:.86rem;font-weight:800;line-height:1.55;cursor:pointer}
.image-compressor-faq p{margin:9px 0 0;color:#5f6d80;font-size:.82rem;line-height:1.75}
.image-compressor-related>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:17px}
.image-compressor-related a{display:block;min-width:0;padding:15px;border:1px solid #d9e2eb;border-radius:7px;background:#fff;text-decoration:none}
.image-compressor-related a:hover{border-color:#91bdb4;background:#f5fbf9}
.image-compressor-related strong,.image-compressor-related span{display:block}
.image-compressor-related strong{color:#243348;font-size:.84rem}
.image-compressor-related span{margin-top:5px;color:#728095;font-size:.73rem;line-height:1.55}
.image-compressor-page button:focus-visible,.image-compressor-page label[for="compressorFile"]:focus-visible,.image-compressor-page select:focus-visible,.image-compressor-page input:focus-visible,.image-compressor-related a:focus-visible{outline:3px solid rgba(15,118,110,.28);outline-offset:2px}
@media screen and (max-width:900px){
  .image-compressor-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media screen and (max-width:620px){
  .image-compressor-heading h1{font-size:1.7rem}
  .image-compressor-heading>p:not(.image-compressor-eyebrow):not(.image-compressor-local){font-size:.9rem}
  .image-compressor-tool{padding:16px}
  .image-compressor-tool-header{gap:12px;align-items:stretch;flex-direction:column}
  .image-compressor-upload-button{width:100%}
  .image-compressor-dropzone{min-height:132px;padding:18px 12px}
  .image-compressor-meta,.image-compressor-settings-grid,.image-compressor-comparison,.image-compressor-result-grid,.image-compressor-guide-grid,.image-compressor-related>div{grid-template-columns:1fr}
  .image-compressor-stage{min-height:230px;padding:11px}
  .image-compressor-placeholder{min-height:206px;padding:17px}
  .image-compressor-result-empty{min-height:180px}
  .image-compressor-actions{grid-template-columns:1fr}
  .image-compressor-size-change{font-size:1.08rem}
  .image-compressor-steps{grid-template-columns:1fr}
  .image-compressor-guide-grid{gap:0}
}
@media screen and (max-width:350px){
  .image-compressor-presets{grid-template-columns:1fr}
  .image-compressor-presets button{border-right:0;border-bottom:1px solid #cfd9e4}
  .image-compressor-presets button:last-child{border-bottom:0}
  .image-compressor-max-side{align-items:flex-start;flex-direction:column}
  .image-compressor-max-side input{width:110px}
}