:root{color-scheme:light;--paper:#f5f1e8;--white:#fffdf8;--ink:#183c34;--muted:#6f776c;--line:#ddd9cc;--red:#b44d36;--green:#205b49;--gold:#a98b51;font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink)}button,input,select{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer}a{color:inherit}.topbar{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 4vw;background:var(--white)}.brand{text-decoration:none;display:flex;gap:13px;align-items:center;font-size:18px;font-weight:800}.brand-icon{width:32px;height:32px;border-radius:50% 50% 8px 50%;background:var(--green);display:grid;place-items:center;color:#e6d2a3;font-family:serif;font-size:21px}.brand small{font-size:10px;font-weight:500;letter-spacing:1.7px;display:block;color:var(--muted);margin-top:3px}.home-link{font-size:13px;text-decoration:none;border-bottom:1px solid #a5b0a2;padding-bottom:3px}.studio{max-width:1500px;padding:38px 4vw 32px;margin:0 auto}.intro{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:27px}.eyebrow{color:var(--red);font-size:11px;letter-spacing:1.7px;font-weight:800;margin:0 0 10px}.intro h1{font-family:"Noto Serif SC","Songti SC",SimSun,serif;font-size:clamp(29px,3.3vw,47px);font-weight:500;margin:0 0 12px;letter-spacing:1px}.intro p{max-width:680px;font-size:14px;line-height:1.9;color:#647165;margin:0}.sample-label{font-size:11px;border:1px solid #cabda7;border-radius:4px;color:#7b684b;padding:8px 11px;white-space:nowrap}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 282px;gap:24px;align-items:start}.canvas-card{background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 14px 38px #243a2810}.canvas-top{min-height:55px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line)}.canvas-title{font-size:13px;font-weight:700}.subtle{color:var(--muted);font-size:11px;line-height:1.6}.mode-tabs{display:flex;background:#eeece3;border-radius:6px;padding:3px;gap:3px}.mode-tabs button{border:0;background:transparent;border-radius:4px;padding:6px 11px;color:#74776b;font-size:12px}.mode-tabs button[aria-selected=true]{color:var(--ink);background:var(--white);box-shadow:0 1px 4px #0000000e}.art-surround{padding:27px;background:#e8e3d5;position:relative}.art-stage{position:relative;aspect-ratio:8/5;width:100%;background:#d0bc90;overflow:hidden;box-shadow:0 8px 22px #15292127;isolation:isolate}.art-stage canvas{position:absolute;width:100%;height:100%;left:0;top:0;display:block}.art-stage canvas#maskCanvas{touch-action:none;cursor:crosshair;z-index:3}.art-stage canvas#resultCanvas{z-index:1;pointer-events:none}.art-stage canvas#maskCanvas[hidden]{display:none}.compare-line{position:absolute;top:0;bottom:0;width:2px;background:#fffef8;box-shadow:0 0 0 1px #153c3440;z-index:4;pointer-events:none}.compare-line:after{content:'↔';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;width:34px;height:34px;background:var(--white);display:grid;place-items:center;box-shadow:0 2px 8px #0003;font-size:18px}.image-labels{position:absolute;inset:12px 12px auto;display:flex;justify-content:space-between;pointer-events:none;z-index:5}.image-labels span{background:#12362cd4;color:#fffdf1;font-size:10px;padding:5px 8px;border-radius:3px;backdrop-filter:blur(4px)}.canvas-bottom{padding:16px 20px}.slider-row{display:flex;align-items:center;gap:14px;font-size:11px;color:var(--muted)}.slider-row input{flex:1;min-width:0;accent-color:var(--green)}.source-caption{display:flex;gap:10px;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:13px}.source-caption p{margin:0}.copyright-dot{width:6px;height:6px;display:inline-block;background:#af9261;border-radius:50%;margin-right:6px}.panel{display:flex;flex-direction:column;gap:17px}.panel-box{border-radius:10px;background:var(--white);border:1px solid var(--line);padding:20px}.panel h2{font-size:14px;margin:0 0 16px;display:flex;gap:10px;align-items:center}.step{color:var(--red);font:italic 17px Georgia,serif}.button{border:1px solid var(--line);background:var(--white);color:var(--ink);border-radius:6px;padding:11px 12px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px}.button:hover{background:#f1eee3;border-color:#a9b4a1}.button:focus-visible,.mode-tabs button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #d3aa60;outline-offset:3px}.button:disabled{opacity:.45;cursor:not-allowed}.button.primary{background:var(--green);color:#fffdf5;border-color:var(--green)}.button.primary:hover{background:#174738}.button.red{background:var(--red);border-color:var(--red);color:white}.button.red:hover{background:#973e2c}.wide{width:100%}.button-row{display:flex;gap:8px;margin-top:9px}.button-row>*{flex:1}.control{display:block;margin:16px 0}.control-label{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin:0 0 8px}.control output{font-size:11px;color:var(--muted)}.control input[type=range]{display:block;width:100%;accent-color:var(--green)}.control small{display:block;font-size:10px;line-height:1.7;color:var(--muted);margin-top:7px}.stats{display:flex;align-items:center;justify-content:space-between;padding:12px 0 0;margin-top:14px;border-top:1px solid #e9e4d8;font-size:10px;color:var(--muted)}.stats strong{font-size:13px;font-weight:600;color:var(--ink)}.tiny-note{font-size:11px;line-height:1.8;color:var(--muted);margin:12px 0 0}.status{margin:17px 0 0;padding:10px 13px;border:1px solid #cfdbca;border-radius:6px;background:#edf2e7;min-height:39px;font-size:12px;line-height:1.65;color:#3f6044}.status[data-level=error]{background:#fff0e9;border-color:#ebc2b2;color:#914a36}.learn{margin-top:25px;display:grid;grid-template-columns:1fr 1fr;gap:24px}.learn details{border-top:1px solid #cfcbbb;padding:16px 0;font-size:12px;line-height:1.9}.learn summary{cursor:pointer;font-weight:600}.learn p{color:#697264;margin:13px 0 0;max-width:650px}.learn code{font-size:11px;background:#e9e7dc;padding:2px 5px;border-radius:3px}.bottom-line{font-size:10px;color:#888c7e;margin-top:14px;display:flex;justify-content:space-between;gap:18px}.offscreen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}@media(max-width:1080px){.workspace{grid-template-columns:minmax(0,1fr) 250px;gap:16px}.panel-box{padding:16px}.art-surround{padding:18px}.studio{padding-left:25px;padding-right:25px}.intro p{font-size:13px}}@media(max-width:800px){.workspace{grid-template-columns:1fr}.panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.intro{align-items:start}.sample-label{display:none}.studio{padding:27px 18px}.topbar{height:63px;padding:0 20px}.art-surround{padding:13px}.canvas-top{padding:12px}.canvas-bottom{padding:13px}.learn{gap:18px}.bottom-line{flex-direction:column;gap:4px}}@media(max-width:520px){.panel{grid-template-columns:1fr}.intro h1{font-size:32px}.intro p{font-size:12px}.canvas-top{align-items:start;flex-direction:column}.mode-tabs{width:100%}.mode-tabs button{flex:1}.canvas-title .subtle{font-size:10px}.source-caption{align-items:start}.source-caption p{max-width:80%}.learn{grid-template-columns:1fr;gap:0}.image-labels{inset:8px 8px auto}.image-labels span{font-size:9px}.art-surround{padding:9px}}