.compressor-main{max-width:1080px}.back-home{font-size:12px;color:var(--green);padding:12px 0}.tool-intro{padding:45px 0 27px}.tool-intro h1{font-size:36px;letter-spacing:-1.7px;margin:17px 0 12px}.tool-intro h1 span{color:var(--green)}.tool-intro>p{color:#6d7d70;font-size:14px}.privacy{font-size:11px;color:#668258;line-height:1.7;margin-top:20px}.workspace{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:16px;background:white;overflow:hidden}.upload-box{padding:35px 25px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f5f8f0;border-right:1px solid var(--line)}.upload-box.dragging{background:#e7f1de;outline:3px dashed #759867;outline-offset:-8px}.upload-box>svg{width:35px;height:35px;color:#648258;margin-bottom:16px}.upload-box h2{font-size:17px;letter-spacing:-.5px;margin:0 0 9px}.upload-box>p{font-size:11px;color:#88977c;margin:0 0 20px}.upload-box .upload-limit{font-size:10px;margin:17px 0 0;line-height:1.8}.primary,.secondary,.text-button{border-radius:9px;min-height:44px;padding:12px 19px;font-size:12px;display:inline-flex;align-items:center;justify-content:center}.primary{background:var(--green);color:white}.secondary{border:1px solid #dbe4d2;background:#fff;color:var(--green)}.text-button{color:#7a8d6b}.primary:disabled,.secondary:disabled,.text-button:disabled{opacity:.4;cursor:not-allowed}.pick-file{position:relative;cursor:pointer}.pick-file input{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}.pick-file:focus-within{outline:3px solid #86b986;outline-offset:4px}.settings{padding:27px 29px}.setting-title{display:flex;align-items:center;justify-content:space-between}.setting-title h2{font-size:14px;margin:0}.setting-title output{font-size:30px;color:var(--green);font-weight:700;font-variant-numeric:tabular-nums}.setting-title output span{font-size:15px;margin-left:3px}input[type=range]{width:100%;accent-color:var(--green);min-height:42px;cursor:pointer;margin:5px 0}.range-labels{display:flex;justify-content:space-between;font-size:10px;color:#8c9b7e}.setting-explainer{background:#f4f7ef;border-radius:9px;padding:13px 15px;margin:18px 0 10px;line-height:1.65}.setting-explainer strong{font-size:12px;color:#59704b}.setting-explainer p{font-size:11px;color:#788a6c;margin:6px 0}.setting-explainer>span{font-size:10px;color:#7b8e6e}.honesty{font-size:10px;color:#8a957e;line-height:1.8}.actions{display:flex;gap:8px;margin-top:16px}.notice{font-size:12px;line-height:1.8;color:#8b6637;margin:18px 0;white-space:pre-line}.notice:empty{margin:0}.queue-section{margin-top:34px}.queue-header{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;margin-bottom:18px}.queue-header h2{font-size:18px;letter-spacing:-.5px;margin:0}.queue-header h2 span{font-size:12px;color:#90a181;margin-left:4px}.queue-header p{font-size:11px;color:#849476;line-height:1.7;margin:7px 0 0}.queue-actions{display:flex;gap:7px}.queue-empty{padding:38px;text-align:center;border:1px dashed #d9e3ce;border-radius:12px;color:#839773;font-size:13px;line-height:1.9}.queue-empty span{font-size:11px}.file-list{display:grid;gap:12px}.file-row{background:white;border:1px solid var(--line);border-radius:12px;padding:17px;display:grid;grid-template-columns:72px 1fr;gap:16px}.file-thumbnail{width:72px;height:72px;object-fit:contain;border-radius:8px;border:1px solid #e7ecdf;background:repeating-conic-gradient(#edf0e9 0% 25%,#fff 0% 50%) 50% / 12px 12px}.file-name{font-size:13px;font-weight:650;overflow-wrap:anywhere;margin:0 0 7px}.file-meta,.file-state{font-size:11px;color:#86977c;line-height:1.7;margin:0 0 5px}.file-state.error{color:#b65b45}.file-state.done{color:#507b45}.file-buttons{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.file-buttons button,.file-buttons a{font-size:11px;min-height:38px;padding:9px 13px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:13px}.metric{background:#f6f8f2;padding:10px;border-radius:6px}.metric span{display:block;font-size:9px;color:#8f9c82;margin-bottom:5px}.metric strong{font-size:14px;color:#4f6d41;font-variant-numeric:tabular-nums}.quality-note{font-size:10px;color:#88967b;line-height:1.7;margin:10px 0 0}.explanation{margin:35px 0 40px;padding:24px;border:1px solid #e5ebdc;border-radius:12px;background:#f3f6ee}.explanation h2{font-size:14px;margin:0 0 13px}.explanation>div{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.explanation p{font-size:10px;line-height:1.9;color:#81916f;margin:0}.explanation strong{display:block;color:#627b50;font-size:11px;margin-bottom:4px}#compare-dialog{max-width:930px;width:calc(100% - 28px);padding:28px}#compare-dialog h2{font-size:20px}.compare-help{font-size:11px;line-height:1.8;color:#809171}.compare-labels{display:flex;justify-content:space-between;color:#6a805b;font-size:11px;margin-bottom:9px}.compare-scroll{max-height:60vh;overflow:auto;background:repeating-conic-gradient(#edf0e9 0% 25%,#fff 0% 50%) 50% / 16px 16px;border:1px solid var(--line);border-radius:8px}.compare-stage{position:relative;width:100%;overflow:hidden}.compare-stage img{display:block;width:100%;height:100%;object-fit:contain}.compare-stage #compare-result{position:absolute;inset:0;clip-path:inset(0 0 0 50%)}#compare-dialog>label{font-size:11px;color:#7a8e68;display:block;margin-top:14px}.pixel-option{display:flex!important;gap:7px;align-items:center;min-height:44px}
@media(max-width:700px){.workspace{grid-template-columns:1fr}.upload-box{border-right:0;border-bottom:1px solid var(--line);padding:27px 20px}.settings{padding:23px}.tool-intro{padding-top:30px}.tool-intro h1{font-size:29px}.tool-intro>p{font-size:12px}.privacy{font-size:10px}.explanation>div{grid-template-columns:1fr;gap:14px}.file-row{grid-template-columns:50px 1fr;gap:11px;padding:13px}.file-thumbnail{width:50px;height:50px}.metrics{gap:5px}.metric{padding:8px}.metric strong{font-size:12px}.metric span{font-size:8px}.queue-actions button{padding:10px;font-size:10px}.queue-header h2{font-size:16px}.queue-header p{max-width:300px;overflow-wrap:anywhere}#compare-dialog{padding:22px 16px}.hero-badge .tool-number{font-size:8px}}

.compare-summary{font-size:12px;line-height:1.8;color:#59764b;background:#f0f5e9;padding:10px 13px;border-radius:8px}.compare-divider{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;box-shadow:0 0 0 1px #214a3480;pointer-events:none;z-index:2}.compare-handle{position:absolute;top:clamp(24px,50%,160px);left:50%;transform:translate(-50%,-50%);width:44px;height:44px;background:#285345;color:white;border:2px solid white;border-radius:50%;box-shadow:0 2px 9px #0003;pointer-events:auto;touch-action:none;cursor:ew-resize;font-size:23px;letter-spacing:1px;display:grid;place-items:center}.compare-stage img{pointer-events:none;user-select:none}