*{box-sizing:border-box}html{color-scheme:light}body{margin:0;background:#f6f7f3;color:#24372f;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;font-size:14px;line-height:1.6}button,input,select{font:inherit}button,a,input,select,summary{ -webkit-tap-highlight-color:transparent}button,a,summary{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-underline-offset:4px}button:disabled{cursor:not-allowed;opacity:.45}button,input,select,summary,a{outline-offset:4px}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #72985d}header{max-width:1240px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:26px 40px;border-bottom:1px solid #dfe3da}.brand{text-decoration:none;font-size:28px;letter-spacing:-1.5px;font-weight:750;display:inline-flex;align-items:center;gap:9px}.brand-icon{display:grid;place-items:center;background:#294b3e;color:#ddebba;border-radius:9px;font-size:26px;width:34px;height:34px}.brand-dot{color:#76905e;margin-left:-8px}nav{display:flex;align-items:center;gap:28px}.local-badge{font-size:12px;color:#637466}.local-badge:before{content:'●';font-size:9px;color:#738b5f;margin-right:7px}.language{font-size:13px;text-decoration:none;border:1px solid #d9ded2;border-radius:7px;padding:6px 12px}main{max-width:1160px;padding:0 24px;margin:0 auto}.intro{padding:44px 0 28px}.eyebrow{font-size:10px;font-weight:750;letter-spacing:2px;color:#718062;margin:0 0 10px}.intro h1{font-size:clamp(30px,4vw,46px);line-height:1.2;font-weight:650;letter-spacing:-1.8px;margin:0 0 14px}.intro>p:last-child{color:#758075;margin:0;font-size:15px}.upload{background:#eef2e8;border:1.5px dashed #b9c7ac;border-radius:12px;padding:22px 25px;display:flex;align-items:center;gap:17px;margin-bottom:24px;position:relative}.upload.dragover{background:#e0eccf;border-color:#294b3e}.upload-icon{font-size:30px;width:48px;height:48px;display:grid;place-items:center;border:1px solid #cbd6c0;border-radius:10px;background:#f6f8f1}.file-button{font-weight:650;text-decoration:underline;text-underline-offset:4px;cursor:pointer}.upload span,.upload p{color:#71806a}.upload p{font-size:12px;margin:5px 0 0}.file-input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}.upload:focus-within{outline:3px solid #72985d;outline-offset:3px}.source-info{margin-left:auto;color:#7a8771;font-size:11px;max-width:30%;overflow-wrap:anywhere;text-align:right}.workspace{display:grid;grid-template-columns:minmax(330px,.94fr) minmax(0,1.3fr);gap:24px;align-items:start}.panel{background:#fff;border:1px solid #dfe4d9;border-radius:12px;padding:24px;box-shadow:0 2px 4px #24372f03}.section-label{color:#7d8775;font-size:10px;font-weight:750;letter-spacing:1.5px;margin:0 0 18px}.tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;background:#f2f4ef;padding:5px;border-radius:9px;margin-bottom:25px}.tabs button{border:0;background:transparent;color:#72806b;border-radius:5px;padding:9px 5px;font-size:12px;font-weight:550}.tabs button[aria-selected=true]{background:#fff;color:#294b3e;box-shadow:0 1px 4px #24372f15}.dimensions{display:grid;grid-template-columns:minmax(60px,1fr) 10px minmax(60px,1fr) 75px;gap:10px;align-items:end}.dimensions>span{padding-bottom:10px;color:#9aa391}label{display:block;font-size:12px;font-weight:550;color:#5e6c58}input:not([type=checkbox]):not([type=range]):not([type=color]),select{display:block;width:100%;border:1px solid #d7ded0;color:#273c30;background:#fff;border-radius:7px;padding:10px;margin-top:7px;min-width:0;height:44px}input:disabled,select:disabled{background:#f5f6f2!important;color:#6e7a65}.check{display:flex;gap:8px;align-items:flex-start;font-size:12px;font-weight:400;margin-top:13px;cursor:pointer}.check input{accent-color:#294b3e;margin-top:4px;flex:none}.actual-size{font-size:12px;color:#627455;font-variant-numeric:tabular-nums}.divider{height:1px;background:#e9ece3;margin:22px 0}h2{font-size:14px;font-weight:650;margin:0 0 12px}.hint{font-size:11px;line-height:1.7;color:#7b8673;margin:12px 0}.target-row{display:grid;grid-template-columns:1fr 85px;gap:10px;margin-top:14px}.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.chips button{padding:4px 10px;background:#f9faf7;border:1px solid #e1e6da;color:#68775d;border-radius:5px;font-size:11px;min-height:30px}.chips button:hover{border-color:#8da57b}.input-unit{position:relative}.input-unit span{position:absolute;right:15px;top:11px}details{border-top:1px solid #edf0e8;margin-top:18px;padding-top:14px}summary{cursor:pointer;color:#65765a;font-size:12px}.advanced-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:15px}input[type=color]{display:block;width:100%;height:40px;margin-top:8px;border:1px solid #d7ded0;background:white;border-radius:6px}.actions{margin-top:22px;display:grid;gap:10px}.primary,.secondary{display:inline-flex;align-items:center;justify-content:space-between;border-radius:7px;padding:12px 17px;text-decoration:none;font-weight:550;font-size:13px;min-height:44px}.primary{background:#294b3e;border:1px solid #294b3e;color:#fff}.primary:hover{background:#365d4c}.secondary{border:1px solid #cbd6c1;background:#f7f9f2;color:#36503a}.secondary:hover{background:#edf2e5}.preview-column{display:grid;gap:20px}.preview-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.preview-heading .section-label{margin:0}.text-button{border:0;background:none;padding:5px 0;color:#76856b;font-size:11px}.crop-stage{min-height:240px;border:1px solid #e5e9df;border-radius:7px;background-color:#f5f6f2;background-image:linear-gradient(45deg,#e8ece3 25%,transparent 25%),linear-gradient(-45deg,#e8ece3 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e8ece3 75%),linear-gradient(-45deg,transparent 75%,#e8ece3 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;display:flex;justify-content:center;align-items:center;padding:14px;overflow:hidden}.crop-stage>p{color:#8c9783;font-size:13px;background:#f5f6f2cc;border-radius:6px;padding:10px}#crop{display:block;max-width:100%;max-height:440px;object-fit:contain;touch-action:none;cursor:grab;box-shadow:0 2px 14px #22332224}#crop:active{cursor:grabbing}.crop-tools>label{display:flex;align-items:center;gap:20px}input[type=range]{width:100%;accent-color:#527344;height:24px}.crop-tools details{margin-top:6px;padding-top:8px}.crop-tools details label{display:flex;align-items:center;gap:10px}.comparison{display:grid;grid-template-columns:1fr 25px 1fr;gap:13px}.mini-label{font-size:11px;color:#7b8870}.thumb{height:112px;border-radius:5px;background:#f2f4ee;display:flex;align-items:center;justify-content:center;margin-top:7px;overflow:hidden;border:1px solid #e8ece2}.thumb img{width:100%;height:100%;object-fit:contain}.comparison p{font-size:10px;white-space:pre-line;color:#6d7d61;overflow-wrap:anywhere}.compare-arrow{align-self:center;color:#87957b}.status{font-size:12px;margin:12px 0 0;padding:10px 12px;border-radius:6px;background:#f3f5ee;color:#65745b;overflow-wrap:anywhere}.status.error{background:#fff1e8;color:#94491d}.status.success{background:#edf5e6;color:#466936}.download{width:100%}.notice{background:#fff5e9;border:1px solid #efdbc0;padding:12px;border-radius:7px;font-size:12px;color:#8b612f}.notice p{margin:0}.preset-card{border:1px solid #e2e8db;border-radius:7px;padding:13px;margin-top:10px}.preset-card.selected{border-color:#91a582;background:#fbfcf8}.preset-card h3{font-size:12px;margin:0 0 6px}.preset-card p{font-size:11px;color:#78856b;line-height:1.65;margin:5px 0 10px}.preset-card a,.preset-card small{font-size:10px;display:block}.preset-card small{color:#87917d;margin-top:5px}.preset-card button{width:100%;margin-top:10px;min-height:36px;padding:6px 12px;font-size:11px}.reference-tag{font-size:10px;background:#f1eee4;color:#857350;padding:3px 6px;border-radius:3px}.guide{margin-top:48px;border-top:1px solid #dde3d4;padding:30px 0;display:grid;grid-template-columns:1fr 1fr;gap:30px}.guide h2{font-size:22px;letter-spacing:-.5px}.guide ol{margin:0;padding-left:22px;color:#79856e;font-size:12px}.guide li{padding:5px}.limitations{border-top:1px solid #e0e5d7;padding:24px 0;color:#7d8873;font-size:12px}.limitations>p{max-width:850px}.limitations article{padding:15px 0;max-width:850px}.limitations h3{color:#58694d}footer{max-width:1160px;margin:20px auto 0;border-top:1px solid #dfe4d5;padding:25px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#8b957f;font-size:10px}footer .brand{font-size:22px;color:#53644a}footer nav{gap:20px}footer a{text-decoration:none}.prose{max-width:760px;padding:70px 24px;min-height:65vh}.prose h1{font-size:36px;line-height:1.3;letter-spacing:-1px}.prose p{color:#697761;font-size:15px;margin-bottom:24px}.prose .primary,.prose .secondary{margin:5px}.skip{position:absolute;left:10px;top:-100px;background:white;padding:10px;z-index:10}.skip:focus{top:10px}[hidden]{display:none!important}@media(min-width:1300px){.intro{padding-top:48px}.crop-stage{min-height:300px}}@media(max-width:760px){header{padding:18px 22px}header .local-badge{display:none}.brand{font-size:25px}.brand-icon{width:30px;height:30px;font-size:23px}main{padding:0 18px}.intro{padding:30px 0 22px}.intro h1{letter-spacing:-1px;font-size:32px}.intro>p:last-child{font-size:13px}.upload{padding:18px 15px;gap:12px;flex-wrap:wrap}.upload-icon{width:40px;height:40px}.upload p{font-size:10px}.source-info{max-width:100%;width:100%;text-align:left;margin-left:52px}.workspace{grid-template-columns:1fr;gap:18px}.panel{padding:20px}.preview-column{gap:18px}.crop-stage{min-height:230px}.guide{grid-template-columns:1fr;gap:10px;margin-top:30px}.guide h2{font-size:21px}.guide ol{font-size:12px}footer{margin:10px 18px 0;padding:22px 0;flex-wrap:wrap}footer>span{order:3;width:100%;font-size:10px}footer nav{gap:16px}.prose{padding:40px 20px}.prose h1{font-size:29px}}@media(prefers-reduced-motion:no-preference){button,a{transition:background-color .15s,border-color .15s}}
.crop-tools label{min-width:0}.crop-tools label>input[type=range]{flex:1;min-width:0}.crop-tools>label{white-space:nowrap}.crop-tools details label{white-space:nowrap}.hint{font-size:12px}.comparison p{font-size:11px}@media(max-width:760px){.crop-tools>label{gap:16px}.crop-tools details label{font-size:11px}}
.workspace{grid-template-columns:minmax(330px,.94fr) minmax(0,1.3fr)}.preview-column{display:contents}.settings{grid-column:1;grid-row:1 / span 3}.crop-panel,.action-panel,.result-panel{grid-column:2}.crop-panel{grid-row:1}.action-panel{grid-row:2}.result-panel{grid-row:3;scroll-margin-top:18px}.action-panel .actions{margin-top:0}.tabs button[data-mode=percent]{grid-column:1 / -1}.tabs button[data-mode=compress]{color:#294b3e;font-weight:750}#current-purpose{font-weight:650}#use-reduction:disabled{opacity:.4}@media(max-width:760px){.workspace{display:flex;flex-direction:column}.settings,.crop-panel,.action-panel,.result-panel{width:100%}}
.background-preview-wrap{margin-top:12px;padding:12px;background:#f2f4ef;border:1px solid #d7ded0;border-radius:7px}.background-preview-wrap p{margin:0 0 10px;font-size:12px}#background-preview{display:block;max-width:100%;max-height:240px;width:auto;height:auto;margin:auto;object-fit:contain}
.faq{border-top:1px solid #e0e5d7;padding:26px 0;color:#65745b}.faq>h2{font-size:21px}.faq article{max-width:850px;margin-top:22px}.faq h3{font-size:15px;margin:0 0 8px;color:#354c3c}.faq p{font-size:13px;line-height:1.8;margin:0}footer{align-items:flex-start}.footer-meta{display:flex;flex-direction:column;gap:12px;max-width:350px}.footer-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}.footer-group h2{font-size:12px;margin:0 0 8px;color:#53644a}.footer-group nav{display:flex;flex-direction:column;align-items:flex-start;gap:5px}.footer-group a{font-size:12px;min-height:24px}.footer-meta span{font-size:10px}@media(max-width:760px){.footer-meta{max-width:100%;width:100%}.footer-groups{width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.faq h2{font-size:20px}}
.result-summary{font-size:20px;font-weight:700;color:#294b3e;font-variant-numeric:tabular-nums;margin:14px 0;line-height:1.35}.result-details{margin:12px 0 16px}.result-details .hint{margin-bottom:0}.unmet-actions{display:grid;gap:8px;margin-top:9px}.unmet-actions button{justify-content:center;text-align:center}#specific-size{margin:18px 0;padding:14px;border:1px solid #dce5d5;border-radius:8px;background:#f8faf5}#specific-size summary{font-size:13px;font-weight:650;color:#294b3e}#controls:has(#quality-section:not([hidden])) #compression-settings>h2,#controls:has(#quality-section:not([hidden])) #compression-settings>label,#controls:has(#quality-section:not([hidden])) #compression-hint{display:none}.tabs button[data-mode=compress]{grid-column:1/-1;font-size:14px;background:#e9f0e2}.tabs button[data-mode=percent]{grid-column:auto}.result-panel .comparison p{color:#71806c}
.task-reselect{margin-top:12px!important;font-size:12px!important;color:#66755e!important}.task-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:25px 0;padding:16px 0;border-top:1px solid #dfe5d7;border-bottom:1px solid #dfe5d7}.task-links h2{width:100%;margin:0}.task-links a{font-size:12px;color:#365c42}.task-explainer{max-width:850px;margin:24px 0;color:#66755e}.task-explainer h2{font-size:17px;color:#294b3e}.task-explainer p{font-size:13px}.task-explainer a{font-weight:650}.passport-warning{color:#705928!important}
.task-links h3{flex-basis:100%;font-size:12px;color:#65745b;margin:6px 0 0}.task-evidence,.print-reference{max-width:850px;margin:25px 0;color:#66755e}.task-evidence h2,.print-reference h2{font-size:17px;color:#294b3e}.task-evidence p,.print-reference p{font-size:12px}.table-scroll{max-width:100%;overflow-x:auto}.task-evidence table,.print-reference table{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}.task-evidence caption{text-align:left;font-size:11px;color:#7b8673;margin-bottom:8px}.task-evidence th,.task-evidence td,.print-reference th,.print-reference td{text-align:left;padding:9px 8px;border-bottom:1px solid #dfe5d7;white-space:nowrap}.task-evidence th,.print-reference th{color:#294b3e;background:#eef2e8}@media(max-width:760px){.task-evidence th,.task-evidence td,.print-reference th,.print-reference td{padding:8px 7px;font-size:11px}}