:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;color:#272727;background:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--accent: #1765c1;--accent-soft: #eaf2fc;--muted: #737373;--border: #ddd}*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #1765c1;outline-offset:3px}svg{flex-shrink:0}a{color:inherit;text-decoration:none}.app-header{height:56px;display:flex;align-items:center;padding:0 22px;gap:24px;border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600}.pixel-mark{width:22px;height:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:2px}.pixel-mark i{background:#303030}.pixel-mark i:nth-child(2),.pixel-mark i:nth-child(6){background:#929292}.pixel-mark i:nth-child(3){background:#ccc}.app-header h1{font-size:14px;font-weight:400;margin:0;padding-left:24px;border-left:1px solid var(--border)}.app-header nav{display:flex;align-items:center;gap:25px;margin-left:auto;font-size:12px;color:#696969}.app-header nav>span{display:flex;align-items:center;gap:6px}.app-header nav a:hover{color:var(--accent);text-decoration:underline}main{width:100%}.editor-actions{display:flex;align-items:center;justify-content:space-between;height:50px;padding:0 16px;border-bottom:1px solid var(--border);background:#fafafa}.action-group{display:flex;align-items:center;gap:3px}.action-separator{width:1px;height:20px;background:#d5d5d5;margin:0 9px}.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;border-radius:3px;padding:8px 12px;min-height:34px;font-size:12px;font-weight:400;line-height:1.3;white-space:nowrap}.button.primary{background:var(--accent);border-color:var(--accent);color:#fff}.button.primary:hover:not(:disabled){background:#1154a2}.button.primary:disabled{background:#eee;color:#aaa;border-color:#dedede}.button.white{background:#fff;border-color:#ccc;color:#333}.button.white:hover:not(:disabled){border-color:#888}.button.text{color:#555;background:transparent}.button.text:hover:not(:disabled),.button.subtle:hover{background:#e9e9e9;color:#222}.button.text:disabled{color:#aaa}.button.white:disabled{color:#aaa}.button.subtle{background:#f4f4f4;border-color:#ddd;color:#444}.compare-button.is-active{background:var(--accent-soft);color:var(--accent)}.editor-layout{display:grid;grid-template-columns:minmax(0,1fr) 276px;border-bottom:1px solid var(--border)}.workbench{min-width:0;background:#f1f1f1}.workbench-toolbar{display:flex;justify-content:space-between;align-items:center;height:37px;padding:0 16px;background:#eee;border-bottom:1px solid #d9d9d9;gap:14px}.toolbar-title{display:flex;align-items:center;gap:7px;color:#555;min-width:0;font-size:12px}.toolbar-title span{max-width:450px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.toolbar-right{display:flex;align-items:center;gap:9px;flex-shrink:0}.muted{color:var(--muted)}.small,.image-dimensions{font-size:11px;font-variant-numeric:tabular-nums;color:#737373}.canvas-viewport{height:max(440px,calc(100dvh - 220px));overflow:auto;position:relative;background:#e4e4e4;overscroll-behavior:contain}.canvas-viewport.drop-active{outline:2px solid var(--accent);outline-offset:-2px}.upload-state{height:100%;min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px}.upload-icon{color:#848484;margin-bottom:17px}.upload-state h2{margin:0 0 10px;font-size:19px;font-weight:500}.upload-state p{margin:0 0 22px;font-size:13px;color:#666}.upload-button{padding:10px 24px}.file-hint{margin-top:14px;font-size:11px;color:#777}.canvas-center{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:24px}.canvas-frame{position:relative;flex-shrink:0;line-height:0;box-shadow:0 1px 7px #0003;background-color:#fff;background-image:conic-gradient(#e8e8e8 25%,transparent 0 50%,#e8e8e8 0 75%,transparent 0);background-size:16px 16px}.canvas-frame canvas{display:block;touch-action:none;cursor:crosshair}.canvas-frame canvas.comparing{cursor:default}.selection-box{position:absolute;border:1px solid #1268d3;pointer-events:none;box-shadow:0 0 0 1px #fff9}.selection-size{position:absolute;bottom:calc(100% + 6px);left:-1px;background:var(--accent);color:#fff;padding:3px 5px;font-size:10px;line-height:1.5;white-space:nowrap}.handle{position:absolute;width:6px;height:6px;border:1px solid var(--accent);background:#fff}.handle-0{top:-3px;left:-3px}.handle-1{top:-3px;right:-3px}.handle-2{bottom:-3px;left:-3px}.handle-3{bottom:-3px;right:-3px}.original-label{position:absolute;top:10px;left:10px;background:#222c;color:#fff;padding:5px 8px;line-height:1.4;font-size:11px;pointer-events:none}.workbench-bottom{height:36px;padding:0 10px 0 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #d6d6d6;background:#eee}.canvas-hint{display:flex;align-items:center;gap:6px;color:#666;font-size:11px}.zoom-controls{display:flex;align-items:center;gap:3px;flex-shrink:0}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;padding:4px;border:0;border-radius:2px;color:#666;background:transparent;flex-shrink:0}.icon-button:hover:not(:disabled){background:#dcdcdc;color:#111}.icon-button:disabled{color:#b4b4b4}.zoom-value{border:1px solid transparent;background:transparent;color:#555;padding:4px 5px;min-width:47px;font-size:11px;font-variant-numeric:tabular-nums}.zoom-value:hover:not(:disabled){border-color:#ccc;background:#fff}.fit-button{margin-left:6px;border-left:1px solid #ccc;border-radius:0}.selection-actions{display:flex;justify-content:space-between;align-items:center;padding:9px 15px;gap:10px;border-top:1px solid #ccc;background:#f9f9f9}.selection-actions>span{font-size:11px;color:#777}.selection-actions strong{font-weight:400;margin-left:8px;color:#444}.selection-actions>div{display:flex;gap:7px}.settings{min-width:0;background:#fff;border-left:1px solid var(--border);display:flex;flex-direction:column}.settings-section{padding:21px 19px;border-bottom:1px solid var(--border)}.section-heading{display:flex;align-items:center;gap:8px;margin-bottom:23px}.section-heading svg{color:#777}.section-heading h2{margin:0;font-size:12px;font-weight:600}.field-label{display:flex;justify-content:space-between;font-size:12px;color:#555;margin-bottom:13px}.field-label>span{font-size:11px;color:#777}.field-label strong{font-weight:500;color:#222;font-size:12px;margin-right:3px}input[type=range]{width:100%;height:16px;margin:0;accent-color:var(--accent);cursor:pointer}.range-labels{display:flex;justify-content:space-between;font-size:11px;color:#777;margin-top:7px}.size-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:18px 0 20px}.size-presets button{border:1px solid #d8d8d8;border-radius:2px;background:#fff;color:#666;padding:7px 0;font-size:11px}.size-presets button:hover{border-color:#999}.size-presets button.selected{border-color:var(--accent);color:var(--accent);background:#edf4fc}.confirm-button{width:100%;justify-content:flex-start;padding-left:12px}.keycap{margin-left:auto;font-size:10px;opacity:.7}.confirm-hint{font-size:11px;color:#777;margin:11px 0 0;line-height:1.6}.history-section{min-height:165px}.history-section .section-heading{margin-bottom:15px}.count-badge{margin-left:auto;font-size:11px;color:#777}.history-empty{padding:15px 0 12px}.history-empty p{margin:0 0 7px;font-size:12px;color:#666}.history-empty>span{font-size:11px;color:#888}.region-list{list-style:none;margin:0;padding:0;max-height:280px;overflow:auto}.region-list li{display:flex;align-items:center;gap:9px;padding:10px 0;border-bottom:1px solid #eee}.region-list li:last-child{border-bottom:0}.region-icon{width:27px;height:27px;color:#777;background:#f0f0f0;display:grid;place-items:center}.region-list li>div{flex:1;display:flex;flex-direction:column;gap:5px}.region-list strong{font-size:12px;font-weight:400}.region-list li>div>span{font-size:11px;color:#777}.export-section{margin-top:auto;padding:21px 19px}.export-info{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#777;margin-bottom:14px}.export-info strong{font-size:11px;font-weight:400;color:#333}.export-info strong span{color:#777}.download-button{width:100%;background:#333;border-color:#333;color:#fff}.download-button:hover:not(:disabled){background:#111}.download-button:disabled{background:#f1f1f1;border-color:#ddd;color:#aaa}.export-hint{margin:11px 0 0;font-size:11px;color:#777;line-height:1.6}.workspace-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 17px;height:31px;font-size:10px;color:#777;border-bottom:1px solid var(--border);background:#fafafa}.workspace-footer>span:last-child{display:flex;align-items:center;gap:6px}kbd{font-family:inherit;font-size:10px}.instructions{max-width:1040px;margin:0 auto;color:#666;font-size:12px;scroll-margin-top:20px}.instructions summary{cursor:pointer;padding:22px 24px;width:fit-content}.instructions-body{display:grid;grid-template-columns:1fr 1fr;padding:0 24px 25px;gap:22px 40px}.instructions-body h2{font-size:13px;font-weight:500;color:#333;margin:0 0 9px}.instructions-body p{font-size:12px;line-height:1.9;margin:0}.app-footer{display:flex;justify-content:space-between;padding:18px 24px;border-top:1px solid #eee;font-size:11px;color:#888}.file-input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}.error-banner{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#fff0f0;color:#a33;border-bottom:1px solid #ecc;font-size:12px}.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%);background:#303030;color:#fff;padding:11px 16px;border-radius:3px;font-size:12px;display:flex;align-items:center;gap:8px;opacity:0;pointer-events:none;z-index:10;white-space:nowrap}.toast.visible{opacity:1}.toast svg{color:#afccad}.modal-backdrop{position:fixed;inset:0;display:grid;place-items:center;padding:20px;background:#0005;z-index:20}.reset-dialog{background:#fff;border:1px solid #ccc;border-radius:5px;padding:26px;max-width:400px;box-shadow:0 5px 35px #0003}.reset-dialog h2{font-size:17px;font-weight:500;margin:0 0 14px}.reset-dialog p{font-size:12px;line-height:1.8;color:#666;margin:0 0 23px}.reset-dialog>div{display:flex;justify-content:flex-end;gap:8px}@media(max-width:800px){.app-header{padding:0 16px;gap:17px;height:52px}.app-header h1{padding-left:17px;font-size:12px}.app-header nav{gap:0}.app-header nav>span{display:none}.editor-layout{grid-template-columns:minmax(0,1fr) 240px}.toolbar-title span{max-width:160px}.settings-section,.export-section{padding:18px 16px}.selection-actions>span{display:none}.selection-actions{justify-content:flex-end}}@media(max-width:620px){.app-header{gap:12px;padding:0 12px}.brand{font-size:14px;gap:7px}.app-header h1{padding-left:12px}.app-header nav{font-size:11px}.editor-actions{padding:0 8px;height:47px}.action-separator{margin:0 4px}.button{font-size:11px;padding:8px 9px;gap:5px}.action-group .button.text>span{display:none}.editor-layout{grid-template-columns:minmax(0,1fr)}.workbench-toolbar{padding:0 12px}.canvas-viewport{height:390px}.canvas-hint{font-size:10px}.canvas-hint svg{display:none}.workbench-bottom{padding:0 8px 0 12px}.zoom-controls{gap:0}.settings{border-left:0;border-top:1px solid var(--border)}.settings-section{padding:18px 16px}.section-heading{margin-bottom:18px}.history-section{min-height:120px}.history-empty{padding:2px 0}.export-section{padding:18px 16px}.confirm-button,.download-button{min-height:39px;font-size:12px}.workspace-footer{padding:8px 12px;min-height:33px;height:auto}.workspace-footer>span:first-child{display:none}.workspace-footer>span:last-child{width:100%;justify-content:space-between;font-size:11px}.instructions-body{grid-template-columns:1fr;padding-left:16px;padding-right:16px}.instructions summary{padding:20px 16px}.app-footer{padding:18px 16px;font-size:10px}.toast{max-width:calc(100vw - 20px);font-size:11px}}[hidden]{display:none!important}.app-header h1{font-size:12px}.app-header nav{gap:17px}.locale-links{display:flex;align-items:center;gap:9px}.locale-links a{color:#777;font-size:11px;padding:4px 0}.locale-links a[aria-current]{color:#222;font-weight:600}.tool-navigation{display:flex;padding:0 16px;gap:18px;height:44px;align-items:stretch;background:#fff;border-bottom:1px solid #d8d8d8}.tool-navigation button{display:inline-flex;align-items:center;gap:7px;padding:0 5px;border:0;border-bottom:2px solid transparent;background:none;color:#666;font-size:12px}.tool-navigation button[aria-selected=true]{color:#1765c1;border-bottom-color:#1765c1}.canvas-viewport{height:max(400px,calc(100dvh - 264px))}.queue-count{color:#737373;font-size:11px}.compression-workspace{min-width:0;min-height:max(540px,calc(100dvh - 220px));background:#f4f4f4}.compression-workspace.drop-active{outline:2px solid #1765c1;outline-offset:-2px}.compression-upload{min-height:max(540px,calc(100dvh - 220px));background:#e4e4e4}.compression-table-wrap{width:100%;overflow:auto;max-height:330px;border-bottom:1px solid #ccc;background:#fff}.compression-table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap;font-size:11px}.compression-table th{font-weight:400;color:#777;background:#eee;padding:12px 13px;position:sticky;top:0;z-index:1}.compression-table td{padding:12px 13px;border-top:1px solid #e6e6e6;color:#666;font-variant-numeric:tabular-nums}.compression-table th:first-child{width:40%}.compression-table th:last-child{width:70px}.compression-table .active-row td{background:#f1f6fc}.file-row-select{display:flex;align-items:center;gap:8px;background:none;padding:2px 0;border:0;color:#333;text-align:left;font-size:12px;max-width:285px}.file-row-select span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-error{display:block;color:#b44;font-size:10px;white-space:normal;max-width:320px;margin-top:6px}.kept-note{display:block;font-size:10px;color:#777;margin-top:5px}.compression-table .size-reduced{color:#317744}.compression-table .size-increased{color:#a26627}.file-status{display:inline-flex;align-items:center;gap:5px;font-size:10px}.status-done{color:#317744}.status-error{color:#a33}.status-processing{color:#1765c1}.row-actions{display:flex;justify-content:flex-end;gap:2px}.comparison-section{padding:0 22px 18px}.comparison-header{display:flex;justify-content:space-between;gap:15px;font-size:11px;color:#777;padding:19px 0 14px}.comparison-header>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.comparison-header>span:last-child{flex-shrink:0}.comparison-viewport{--preview-height: 330px;height:var(--preview-height);display:flex;align-items:center;justify-content:center}.comparison-frame{position:relative;width:min(100%,calc(var(--preview-height) * var(--preview-ratio)));max-width:100%;max-height:100%;height:auto;box-shadow:0 1px 5px #0002;background:conic-gradient(#eee 25%,#fff 0 50%,#eee 0 75%,#fff 0);background-size:16px 16px}.comparison-frame img{display:block;width:100%;height:100%;object-fit:contain}.comparison-frame .compressed-preview{position:absolute;inset:0;background:conic-gradient(#eee 25%,#fff 0 50%,#eee 0 75%,#fff 0);background-size:16px 16px}.comparison-line{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 0 1px #3335;pointer-events:none}.compare-tag{position:absolute;top:8px;padding:4px 7px;background:#222b;color:#fff;font-size:10px;pointer-events:none}.tag-before{left:8px}.tag-after{right:8px}.comparison-slider{max-width:480px;margin:17px auto 0;display:flex;align-items:center;gap:12px;font-size:11px;color:#777}.comparison-slider span{flex-shrink:0}.preview-instruction{text-align:center;font-size:11px;color:#888;margin:15px 0 0}.select-field{display:flex;flex-direction:column;gap:9px;font-size:12px;color:#555}.select-field select{font:inherit;font-size:12px;color:#333;background:#fff;border:1px solid #ccc;padding:8px;border-radius:2px;width:100%}.select-field select:disabled{color:#999;background:#fafafa}.codec-info{font-size:10px;color:#888;margin:8px 0 21px}.resize-field{margin-top:20px}.checkbox-field{display:flex;align-items:flex-start;gap:7px;margin-top:20px;font-size:11px;line-height:1.6;color:#666}.checkbox-field input{margin:3px 0 0;accent-color:#1765c1}.compression-note{color:#888;font-size:10px;line-height:1.8;margin:10px 0 0}.compress-start{width:100%;margin-top:20px;min-height:37px}.compression-summary>div{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:#777;margin-bottom:13px}.compression-summary strong{font-weight:500;color:#444}.compression-summary p{font-size:11px;color:#888;margin:17px 0 0}.compression-instructions a{color:#1765c1;text-decoration:underline}.spinning{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:1100px){.app-header .local-processing{display:none}.file-row-select{max-width:190px}}@media(max-width:800px){.app-header h1{display:none}.compression-table td,.compression-table th{padding:11px 9px}.comparison-section{padding:0 16px 17px}}@media(max-width:620px){.app-header{padding:0 12px}.app-header nav{gap:10px}.locale-links{gap:7px}.locale-links a{font-size:10px}.tool-navigation{padding:0 10px;height:42px}.canvas-viewport{height:350px}.compression-upload{min-height:370px;padding:25px 16px}.compression-upload h2{font-size:17px;text-align:center}.compression-upload p{font-size:12px;text-align:center}.compression-workspace{min-height:370px}.file-row-select{max-width:150px}.compression-table th,.compression-table td{font-size:10px;padding:10px 8px}.compression-table th:nth-child(4),.compression-table td:nth-child(4){display:none}.comparison-viewport{--preview-height: 245px}.comparison-header{font-size:10px}.comparison-header>span:last-child{max-width:140px;white-space:normal}.compression-note{font-size:11px}.compression-settings .export-section{margin-top:0}}@media(prefers-reduced-motion:reduce){.spinning{animation:none}}.mobile-source-size{display:none}@media(max-width:620px){.compression-table th:nth-child(2),.compression-table td:nth-child(2){display:none}.mobile-source-size{display:block;font-size:10px;color:#888;margin-top:5px}.compression-table th:nth-child(3){white-space:normal}}