:root{font-family:Avenir Next,PingFang SC,Microsoft YaHei,system-ui,sans-serif;color:#0b1425;background:#f6f5f4;font-synthesis:none;-webkit-font-smoothing:antialiased;--blue:#0750ff;--muted:#85868d;--line:#e5e3e3}*{box-sizing:border-box}body{margin:0;min-width:360px}button,input,select{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer;border:0;background:transparent;transition:background-color .14s,box-shadow .14s,color .14s}button:disabled{cursor:default;opacity:.43}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #93b5ff;outline-offset:4px}button:not(:disabled):hover{background-color:#ececee}svg{flex-shrink:0}.app-shell{min-height:720px;height:100dvh;max-height:1600px;display:flex;flex-direction:column;overflow:hidden}.topbar{height:68px;min-height:68px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 32px}.brand{display:flex;align-items:center;gap:13px;color:inherit;text-decoration:none;font-weight:650;font-size:21px;letter-spacing:.02em}.brand strong{font-size:22px;font-weight:750;letter-spacing:-.02em}.brand-divider{color:#8b8c95;font-weight:400}.header-actions{display:flex;align-items:center;gap:17px}.quiet-button{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:12px;font-size:13px;color:#727682}.quiet-button.active{color:var(--blue);background:#eaf0ff}.reset-button{display:flex;align-items:center;gap:9px;border:1px solid #dddde0;background:#fbfbfb;border-radius:30px;min-height:42px;padding:8px 17px;font-size:15px;font-weight:600}.headline{flex:0 0 auto;text-align:center;padding:32px 16px 25px}h1{font-size:clamp(27px,2.85vw,40px);line-height:1.35;letter-spacing:-.04em;margin:0;font-weight:750}.comparison{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;position:relative;margin:0 32px}.canvas-panel{min-height:0;min-width:0;display:flex;flex-direction:column;align-items:center;position:relative}.canvas-panel+.canvas-panel{border-left:1px solid #e3e2e3}.panel-heading{flex:0 0 auto;z-index:1;pointer-events:none;text-align:center;padding:0 0 15px}.panel-heading h2{font-size:24px;line-height:1.35;font-weight:700;margin:0 0 6px;letter-spacing:-.02em}.panel-heading p{color:var(--muted);font-size:17px;line-height:1.45;margin:0;letter-spacing:.025em}.artboard{height:100%;max-width:100%;aspect-ratio:1;position:relative;overflow:hidden;touch-action:none;cursor:none;user-select:none;-webkit-user-select:none}.artboard.is-fill{cursor:crosshair}.artboard.is-panning{cursor:grab}.artboard.is-panning:active{cursor:grabbing}.painting-surface{width:100%;aspect-ratio:3/4;position:absolute;top:-16.5%;left:0;transform-origin:50% 50%;will-change:transform;pointer-events:none}.rendered-canvas{display:block;width:100%;height:100%;mix-blend-mode:multiply}.brush-cursor{display:block;position:absolute;aspect-ratio:1;transform:translate(-50%,-50%);border:1.5px solid #11182b;border-radius:50%;box-shadow:0 0 0 1px #fff9;background-color:color-mix(in srgb,var(--cursor-color),transparent 65%);pointer-events:none}.erase-cursor{background-color:#fff7;border-style:dashed}.canvas-footer{position:relative;margin:0 32px;min-height:45px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.sync-label{margin:0;font-size:13px;color:#929398;display:flex;align-items:center;gap:6px}.sync-label svg{display:none}.zoom-anchor{justify-self:end}.zoom-button{height:40px;border:1px solid #e2e2e3;border-radius:25px;background:#fff9;display:flex;align-items:center;gap:8px;padding:0 14px;font-size:13px}.workbench{flex:0 0 auto;margin:0 28px 27px;min-height:98px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-radius:24px;padding:12px 18px;background:#ffffffdc;box-shadow:0 4px 22px #18213405;border:1px solid #fff}.not-ready{pointer-events:none;opacity:.5}.history-group,.tools-group,.palette-group{display:flex;align-items:center}.history-group{gap:10px}.icon-button{height:54px;width:54px;border:1px solid #ededee;border-radius:15px;background:#ffffff60;display:flex;align-items:center;justify-content:center}.tools-group{gap:8px}.tool-button{width:72px;height:72px;border:1px solid #e9e9eb;border-radius:17px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#67676c}.tool-button span{font-size:12px;font-weight:550}.tool-button.selected{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 4px 9px #0750ff16}.tool-button.selected:hover{background:#0645df}.size-control{display:flex;align-items:center;gap:16px;padding:0 23px;flex:1 1 220px;max-width:305px;min-width:165px;border-left:1px solid var(--line);border-right:1px solid var(--line);font-size:13px}.size-control label{white-space:nowrap}.size-control output{width:24px;flex-shrink:0;font-variant-numeric:tabular-nums;font-size:13px}input[type=range]{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:100%;min-width:35px;height:5px;border-radius:10px;background:linear-gradient(to right,var(--blue) 0%,var(--blue) var(--range-fill),#e3e3e5 var(--range-fill),#e3e3e5 100%);cursor:pointer}input[type=range]::-webkit-slider-thumb{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:1px solid #dcdce0;box-shadow:0 1px 3px #00000009}input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:1px solid #ddd}.palette-group{gap:9px;flex-shrink:0}.swatch{background:var(--swatch);width:46px;height:46px;flex-shrink:0;border:4px solid #fff;outline:1px solid #e5e5e7;border-radius:50%;position:relative;padding:0}.swatch:not(:disabled):hover{background:var(--swatch);outline:2px solid #b3b4bc}.swatch.chosen{outline:2px solid #152037}.custom-color-button{display:flex;align-items:center;justify-content:center;width:35px;height:42px;border-radius:12px;color:#737984}.custom-color-button.is-custom{color:#0b1425;box-shadow:inset 0 -4px 0 var(--custom-color)}.lock-control{display:flex;align-items:center;gap:18px;padding-left:24px;margin-left:2px;min-height:44px;border-left:1px solid var(--line);font-size:12px;white-space:nowrap;cursor:pointer}.lock-control input{width:1px;height:1px;opacity:0;position:absolute}.toggle-track,.mini-toggle{display:block;width:53px;height:32px;border-radius:30px;background:#d4d6dc;position:relative;transition:background .15s}.toggle-track:after,.mini-toggle:after{content:"";position:absolute;width:26px;height:26px;top:3px;left:3px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0002;transition:transform .15s}.lock-control input:checked+.toggle-track,.mini-toggle.on{background:var(--blue)}.lock-control input:checked+.toggle-track:after,.mini-toggle.on:after{transform:translate(21px)}.lock-control input:focus-visible+.toggle-track{outline:3px solid #93b5ff;outline-offset:4px}.inactive-control{opacity:.4}.menu-anchor{position:relative}.popover{position:absolute;z-index:20;background:#fff;border-radius:18px;padding:10px;border:1px solid #e6e6eb;box-shadow:0 14px 40px #13234b1a}.settings-popover{right:0;top:calc(100% + 14px);width:290px}.settings-popover button{display:flex;justify-content:space-between;align-items:center;text-align:left;gap:15px;width:100%;padding:12px;border-radius:10px}.settings-popover strong{font-size:14px;font-weight:600;display:block;margin-bottom:5px}.settings-popover small{font-size:11px;color:#818591}.mini-toggle{flex-shrink:0;transform:scale(.75);transform-origin:right center}.zoom-popover{bottom:calc(100% + 9px);right:0;width:236px}.zoom-popover>button{text-align:left;width:100%;padding:9px 12px;border-radius:8px;font-size:14px}.zoom-stepper{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eee;padding-bottom:5px;margin-bottom:4px}.zoom-stepper button{display:grid;place-items:center;width:38px;height:38px;border-radius:8px}.zoom-popover small{display:block;font-size:11px;color:#858994;padding:7px 10px}.color-popover{bottom:calc(100% + 20px);right:-10px;padding:20px;width:235px}.color-popover label{display:block;font-size:15px;font-weight:600;margin-bottom:14px}input[type=color]{border:1px solid #ddd;width:100%;height:48px;background:#fff;border-radius:9px;cursor:pointer;padding:4px}.extra-colors{display:flex;gap:13px;margin:15px 0 12px}.extra-colors button{width:32px;height:32px;border:1px solid #ddd;border-radius:50%}.color-value{font-size:12px;color:#7b818c;font-variant-numeric:tabular-nums}.loading-state{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;z-index:3;background:#f6f5f4e8;color:#737887;font-size:14px}.loading-state p{max-width:550px;overflow-wrap:anywhere;text-align:center}.loading-dot{width:22px;height:22px;border:2px solid #d8e3ff;border-top-color:var(--blue);border-radius:50%;animation:loading 1s linear infinite}@keyframes loading{to{transform:rotate(360deg)}}.toast{position:fixed;z-index:30;bottom:150px;left:50%;transform:translate(-50%,8px);opacity:0;pointer-events:none;background:#172135ed;border-radius:30px;padding:12px 20px;color:#fff;font-size:13px;max-width:90vw;text-align:center;transition:opacity .18s,transform .18s}.toast.visible{opacity:1;transform:translate(-50%)}.dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#16213945;z-index:50;display:grid;place-items:center;padding:20px}.help-dialog{max-width:570px;padding:40px;border-radius:24px;background:#fff;position:relative;box-shadow:0 20px 80px #08112224}.help-dialog h2{font-size:22px;margin-top:15px;line-height:1.5}.help-dialog p{font-size:14px;line-height:1.8;color:#737987}.help-dialog dl{display:grid;grid-template-columns:1fr 1.5fr;gap:13px;font-size:13px;margin:24px 0}.help-dialog dd{margin:0;color:#6b7181}.help-dialog .help-note{font-size:12px;padding-top:15px;border-top:1px solid #e6e6e9}.close-button{position:absolute;right:15px;top:15px;width:32px;height:32px;border:0}@media(min-width:1550px){.comparison{margin-inline:max(32px,calc((100vw - 1600px)/2))}.workbench{max-width:1560px;width:calc(100% - 56px);align-self:center}}@media(max-width:1250px){.workbench{gap:11px;padding:12px 14px;margin-inline:20px}.history-group{gap:5px}.icon-button{width:44px;height:48px}.tool-button{width:59px;height:66px}.swatch{width:39px;height:39px}.palette-group{gap:7px}.size-control{padding-inline:16px;gap:10px;min-width:135px}.lock-control{padding-left:14px;gap:10px}.toggle-track{width:47px;height:28px}.toggle-track:after{width:22px;height:22px}.lock-control input:checked+.toggle-track:after{transform:translate(19px)}}@media(max-width:1020px){.workbench{display:grid;grid-template-columns:auto auto 1fr;gap:12px 20px;padding:12px 16px;min-height:140px}.history-group{grid-column:1;grid-row:1}.tools-group{grid-column:2;grid-row:1}.size-control{grid-column:3;grid-row:1;max-width:none;border-right:0}.palette-group{grid-column:1/3;grid-row:2;gap:12px}.lock-control{grid-column:3;grid-row:2;justify-content:end;border-left:0}.tool-button{height:57px;width:58px;gap:2px}.tool-button svg{width:25px;height:25px}.headline{padding:26px 15px 25px}.comparison{margin-inline:20px}.panel-heading h2{font-size:21px}.panel-heading p{font-size:14px}.canvas-footer{margin-inline:20px}.artboard{width:100%;max-height:100%;flex:0 1 auto}.toast{bottom:195px}}@media(max-width:620px){.app-shell{min-height:640px}.topbar{height:59px;min-height:59px;padding-inline:15px}.brand{font-size:14px;gap:8px}.brand strong{font-size:17px}.header-actions{gap:5px}.compare-menu{font-size:11px;padding:8px 5px;gap:2px}.reset-button{min-height:35px;padding:6px 10px;gap:5px;font-size:12px}.reset-button svg{width:16px}.headline{padding:26px 12px 24px}h1{font-size:23px}.comparison{margin-inline:8px;align-items:center}.canvas-panel{height:100%;justify-content:center}.panel-heading{padding-bottom:5px}.panel-heading h2{font-size:18px;margin-bottom:5px}.panel-heading p{font-size:11px;letter-spacing:0}.canvas-panel+.canvas-panel{border-left:0}.comparison:after{content:"";position:absolute;width:1px;height:78%;top:10%;left:50%;background:#e3e2e3;pointer-events:none}.artboard{height:auto;width:100%;flex:0 0 auto}.canvas-footer{margin-inline:12px;min-height:46px;grid-template-columns:1fr auto}.footer-spacer{display:none}.sync-label{justify-self:start;font-size:11px;gap:4px}.sync-label svg{display:block;width:13px}.zoom-button{height:33px;gap:5px;padding:0 10px;font-size:11px}.zoom-button svg{width:15px}.workbench{margin:0 10px 12px;border-radius:20px;padding:11px;grid-template-columns:auto 1fr;gap:12px 11px}.history-group{grid-column:1;grid-row:1;gap:4px}.history-group .icon-button{width:36px;height:46px;border-radius:11px}.history-group svg{width:22px}.tools-group{grid-column:2;grid-row:1;justify-content:end;gap:6px}.tool-button{height:54px;width:60px;border-radius:12px}.palette-group{grid-column:1/3;grid-row:2;gap:10px;justify-content:space-between}.swatch{width:37px;height:37px;border-width:3px}.custom-color-button{width:29px;height:37px}.size-control{grid-column:1/3;grid-row:3;min-width:0;width:56%;border:0;padding:4px 6px 4px 0;gap:8px;font-size:11px}.size-control output{font-size:11px;width:20px}.size-control input{width:75px}.size-control input::-webkit-slider-thumb{width:21px;height:21px}.lock-control{grid-column:1/3;grid-row:3;justify-self:end;justify-content:end;width:44%;padding:0;gap:8px;font-size:10px;min-height:30px}.toggle-track{width:39px;height:24px}.toggle-track:after{width:18px;height:18px}.lock-control input:checked+.toggle-track:after{transform:translate(15px)}.color-popover{right:-4px}.settings-popover{right:-62px;top:calc(100% + 15px)}.toast{bottom:215px;width:max-content}.help-dialog{padding:28px}.help-dialog h2{font-size:20px}.help-dialog dl{grid-template-columns:1fr;gap:6px}.help-dialog dd{margin-bottom:6px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation-duration:0s!important}}:root{background:#fff}.topbar{background:#fafafa}.workbench{background:#fcfcfc;box-shadow:0 3px 24px #18213409;border-color:#f3f3f5}.painting-surface{top:-18.5%}.rendered-canvas{mix-blend-mode:normal}.loading-state{background:#fffe}.zoom-controls{justify-self:end;display:flex;align-items:center;gap:8px}.pan-button{height:38px;display:flex;gap:6px;align-items:center;border:1px solid #e2e2e3;border-radius:22px;padding:0 12px;font-size:12px}.pan-button.active{background:#eaf0ff;color:var(--blue);border-color:#b9d0ff}.pan-button span{white-space:nowrap}@media(max-width:620px){.pan-button{height:33px;padding:0 9px}.pan-button span{display:none}.zoom-controls{gap:5px}}