:root{font-family:Inter,"Microsoft YaHei",system-ui,sans-serif;color:#172336;background:#f5f7fa;font-synthesis:none}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,a:focus-visible,.upload:focus-within{outline:3px solid #4383ec;outline-offset:4px}.topbar{height:76px;padding:0 max(28px,calc((100vw - 1240px)/2));display:flex;align-items:center;justify-content:space-between;background:white;border-bottom:1px solid #e5e9ef;font-size:14px}.brand{display:flex;gap:9px;align-items:center;font-size:25px;color:#3867df}.brand span{font-size:21px;font-weight:750;color:#172336}main{max-width:1240px;margin:auto;padding:28px 24px}.breadcrumb{display:flex;gap:13px;font-size:14px;color:#68758b}.heading{display:flex;align-items:center;justify-content:space-between;margin:30px 0}.eyebrow{font-size:14px;color:#3867df;font-weight:700;letter-spacing:2px;margin:0 0 12px}h1{font-size:36px;letter-spacing:-1px;line-height:1.3;margin:0}h1 span{color:#3867df}.subtitle{font-size:16px;color:#69778c;margin:14px 0 0}.privacy{font-size:14px;background:#eaf4ee;color:#38734d;border:1px solid #d8e8de;padding:10px 14px;border-radius:30px;white-space:nowrap}.workspace{display:grid;grid-template-columns:330px 1fr;background:white;border:1px solid #e0e6ef;border-radius:18px;overflow:hidden;box-shadow:0 12px 35px #1d345007}.controls{padding:26px;border-right:1px solid #e5e9ef}.section-title{display:flex;align-items:center;gap:9px;margin-bottom:18px}.section-title h2{font-size:16px;margin:0}.step{color:#3867df;font-size:12px;font-weight:700;background:#edf2ff;border-radius:6px;padding:5px}.upload{position:relative;display:flex;align-items:center;flex-direction:column;gap:15px;padding:25px 10px;border:1.5px dashed #b9c9e5;border-radius:10px;background:#f8faff;text-align:center;cursor:pointer;color:#3867df}.upload.dragging{background:#e7efff;border-color:#3867df}.upload strong{font-size:14px;color:#243754}.upload span{font-size:12px;color:#738096}.upload input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.file-info{font-size:12px;line-height:1.6;color:#718095;overflow-wrap:anywhere}.primary,.secondary{width:100%;border-radius:8px;padding:13px;font-size:15px;font-weight:650}.primary{border:0;background:#3867df;color:white;margin-top:8px}.primary:hover:enabled{background:#2856c9}.secondary{background:white;border:1px solid #cad4e4;color:#253c60}.status-box{min-height:65px;font-size:12px;color:#67778d;line-height:1.6}.status-box p{margin-bottom:7px}.status-box .error{color:#b42318}progress{width:100%;height:5px;accent-color:#3867df}.divider{height:1px;background:#edf0f5;margin:8px 0 22px}.swatches{display:flex;gap:12px}.swatch{width:32px;height:32px;border:1px solid #d6dce5;border-radius:50%}.swatch.selected{outline:2px solid #3867df;outline-offset:3px}.white{background:#fff}.dark{background:#172336}.blue{background:#dcecff}.hint,.model-note{font-size:12px;line-height:1.8;color:#748196}.hint{margin:14px 0 22px}.model-note{margin:16px 0 0}.preview-area{display:flex;flex-direction:column;min-width:0;padding:20px;background:#fcfdff}.preview-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.tabs{display:flex;padding:4px;border-radius:8px;background:#edf1f7}.tabs button{background:transparent;border:0;color:#6b7890;padding:8px 18px;font-size:14px;border-radius:5px}.tabs .active{background:white;box-shadow:0 2px 5px #233c5510;color:#263950;font-weight:600}.text-button{border:0;background:none;color:#61718a;font-size:14px}.checker{background-color:#fff;background-image:conic-gradient(#eef1f5 25%,transparent 0 50%,#eef1f5 0 75%,transparent 0);background-size:20px 20px}.stage{min-height:430px;flex:1;display:flex;justify-content:center;align-items:center;border:1px solid #e7ebf0;border-radius:10px;overflow:hidden;padding:20px}.stage img{max-width:100%;max-height:490px;object-fit:contain}.empty{text-align:center;padding:20px}.empty-icon{width:76px;height:76px;display:grid;place-items:center;background:white;color:#3867df;font-size:38px;border-radius:22px;margin:0 auto 25px;box-shadow:0 5px 20px #273a5010}.empty h2{font-size:20px;font-weight:600}.empty p{font-size:14px;color:#728098}.empty>span{display:inline-block;margin-top:20px;color:#8b96a8;font-size:12px}.preview-footer{display:flex;justify-content:space-between;font-size:12px;color:#8390a4;gap:10px;padding-top:16px}.tips{display:grid;grid-template-columns:repeat(3,1fr);gap:38px;margin:36px 0}.tips article>span{font-size:12px;color:#3867df;font-weight:650}.tips h3{font-size:16px;margin:12px 0 8px}.tips p{font-size:14px;color:#728096;line-height:1.8;margin:0}footer{border-top:1px solid #e0e6ef;padding:23px 0;font-size:12px;color:#8590a1;display:flex;justify-content:space-between;gap:20px}[hidden]{display:none!important}@media(max-width:850px){.heading{align-items:flex-start;gap:20px;flex-direction:column}h1{font-size:30px}.workspace{grid-template-columns:280px 1fr}.controls{padding:20px}.stage{min-height:400px}.empty h2{font-size:17px}}@media(max-width:640px){.topbar{height:62px;padding:0 20px}main{padding:22px 16px}.heading{margin:25px 0}h1{font-size:28px}.workspace{grid-template-columns:1fr}.controls{border-right:0;border-bottom:1px solid #e5e9ef}.stage{min-height:300px}.tips{grid-template-columns:1fr;gap:23px}.preview-area{padding:14px}.preview-footer,footer{flex-wrap:wrap}.privacy{font-size:12px}.subtitle{line-height:1.8}}
/* Side-by-side canvas editor. Both previews use the same fitted dimensions. */
main{max-width:1500px}
.workspace{grid-template-columns:minmax(0,1fr)}
.controls{display:grid;grid-template-columns:1.1fr 1.15fr 1fr;gap:24px;padding:22px;border-right:0;border-bottom:1px solid #e5e9ef}
.toolbar-group{min-width:0}
.toolbar-group+.toolbar-group{border-left:1px solid #e5e9ef;padding-left:24px}
.controls .section-title{margin-bottom:14px}
.controls .upload{min-height:260px;padding:24px 16px;gap:8px;display:grid;grid-template-columns:minmax(0,1fr);align-content:center;justify-items:center;text-align:center}
.controls .upload svg{width:28px;height:28px}
.controls .upload strong,.controls .upload span{grid-column:1}
.controls .file-info{margin:10px 0 6px}
.controls .primary{margin-top:4px}
.controls .status-box{min-height:36px}
.controls .status-box p{margin-top:10px}
.controls .hint{margin:8px 0 14px}
.controls .model-note{margin-top:12px}
.preview-toggles{display:flex;gap:10px 18px;flex-wrap:wrap;margin:16px 0 0}
.preview-toggles .toggle{margin:0}
.preview-area{padding:22px;gap:0}
.preview-toolbar h2{font-size:16px;margin:0}
.comparison{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:16px;overflow-x:auto;padding-bottom:6px}
.image-panel{min-width:0;display:flex;flex-direction:column}
.panel-heading{display:flex;flex:1;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;min-height:62px;padding:0 3px 12px}
.panel-heading h3{font-size:16px;margin:0}
.panel-heading span{font-size:12px;color:#748196}
.stage{height:clamp(360px,44vw,620px);min-height:0;flex:none;padding:12px}
.stage canvas{display:block}
.empty{padding:12px}
.empty h2{font-size:17px;line-height:1.6}
.empty p{font-size:14px;line-height:1.7}
.empty-icon{width:56px;height:56px;font-size:30px;border-radius:16px}
.editor-surface{position:relative;flex:none;isolation:isolate;transform-origin:center center;will-change:transform}
.editor-surface canvas{width:100%;height:100%;position:absolute;inset:0}
#original-canvas{z-index:1;touch-action:none}
#original-canvas:focus-visible{outline:2px solid #3867df;outline-offset:3px}
.editing #original-canvas{cursor:crosshair}
.editing:not(.panning):has(.brush-cursor:not([hidden])) #original-canvas{cursor:none}
.editing.panning #original-canvas{cursor:grab}
.editing.panning.dragging #original-canvas{cursor:grabbing}
#result-canvas{object-fit:contain;flex:none;transform-origin:center center;will-change:transform}
.marks-canvas{z-index:2;opacity:.4;pointer-events:none}
.editor-surface.pixel-grid::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background-image:linear-gradient(to right,rgba(24,38,58,.28) var(--grid-line),transparent var(--grid-line)),linear-gradient(to bottom,rgba(24,38,58,.28) var(--grid-line),transparent var(--grid-line));background-size:var(--pixel-x) var(--pixel-y)}
.editor-surface.pixel-grid canvas{image-rendering:pixelated}
.brush-cursor{--cursor-color:#059669;position:absolute;z-index:4;border:0;padding:0;box-shadow:inset 0 0 0 var(--cursor-line,1px) white,inset 0 0 0 calc(2 * var(--cursor-line,1px)) var(--cursor-color);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.brush-cursor.single-pixel{border-radius:0;box-shadow:none;background:var(--cursor-color);opacity:.65}
.brush-cursor.smart::after{content:"";position:absolute;left:50%;top:50%;width:calc(2px * var(--ui-scale,1));height:calc(2px * var(--ui-scale,1));background:var(--cursor-color);transform:translate(-50%,-50%)}
.smart-toggle{font-weight:600;color:#40536f}
.smart-options{display:grid;grid-template-columns:1fr;padding:12px;background:#f4f7fc;border:1px solid #e0e6ef;border-radius:8px}
.smart-options>div{min-width:0}
.smart-options .brush-label{flex-wrap:wrap;gap:4px;font-size:13px}
.smart-options input{width:100%;margin:10px 0 0;accent-color:#3867df}
.smart-help{font-size:12px;color:#718096;line-height:1.7;margin:8px 0 14px}
.brush-cursor.erasing{--cursor-color:#e23d4b}
.brush-cursor.unmarking{--cursor-color:#7352b5}
.brush-tools{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.brush-tool,.history-tools button{border:1px solid #d5dde8;background:white;border-radius:7px;padding:10px 6px;font-size:14px;color:#40536f}
.brush-tool.keep.selected{color:#047857;background:#e9f8f1;border-color:#42b88b}
.brush-tool.erase.selected{color:#b42332;background:#fff0f1;border-color:#eb7c87}
.brush-tool.unmark.selected{color:#68439e;background:#f4effc;border-color:#a38bc8}
.brush-tool.pan.selected{color:#315ec8;background:#edf2ff;border-color:#7899e8}
.zoom-tools{display:flex;align-items:center;gap:5px}
.zoom-tools button{height:30px;min-width:30px;padding:0 8px;border:1px solid #d5dde8;border-radius:6px;background:white;color:#40536f;font-size:13px}
.zoom-tools output{min-width:48px;text-align:center;font-size:12px;color:#53647d;font-variant-numeric:tabular-nums}
.edit-help{font-size:14px;line-height:1.7;color:#6a7890;margin:12px 0 18px}
.brush-label{display:flex;justify-content:space-between;font-size:14px;color:#40536f}
.brush-label output{color:#748196;font-variant-numeric:tabular-nums}
#brush-size{width:100%;accent-color:#3867df;margin:12px 0 15px}
.history-tools{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:6px;margin-bottom:16px}
.history-tools button{font-size:13px}
.toggle{display:flex;align-items:flex-start;gap:7px;font-size:14px;line-height:1.6;color:#66758b;margin:10px 0}
.toggle input{accent-color:#3867df;margin:4px 0 0;flex:none}
.toggle:last-of-type{margin-bottom:22px}
.editor-note{font-size:14px;color:#718096;line-height:1.9;padding:18px 0;margin:14px 0 0;border-top:1px solid #e5e9ef}
@media(max-width:1100px){.controls,.preview-area{padding:16px}.controls{gap:18px}.toolbar-group+.toolbar-group{padding-left:18px}.comparison{gap:12px}}
@media(max-width:850px){.controls{grid-template-columns:1fr 1fr;gap:18px}.export-group{grid-column:1/-1}.toolbar-group.export-group{border-left:0;border-top:1px solid #e5e9ef;padding:18px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.export-group .section-title{grid-column:1/-1}.export-group .swatches{align-self:center}.export-group .preview-toggles{margin:0}.export-group .model-note{grid-column:1/-1}.stage{height:380px;min-height:0}}
@media(max-width:640px){.controls{grid-template-columns:1fr;gap:18px}.toolbar-group+.toolbar-group{padding:18px 0 0;border-left:0;border-top:1px solid #e5e9ef}.toolbar-group.export-group{display:block}.export-group .preview-toggles{margin:16px 0 0}.comparison{grid-template-columns:repeat(2,minmax(220px,1fr))}.stage{height:320px;min-height:0}.panel-heading{min-height:62px;align-content:flex-start}.preview-footer{line-height:1.7}.preview-toolbar h2{font-size:16px}}