:root{--accent:#0736ff;--accent-hover:#0029d6;--bg:#f3f4f1;--ink:#1a1a1a;--line:#cfd0cc;--line-strong:#1a1a1a;--muted:#8a8b87;--panel-w:380px;color:var(--ink);-webkit-font-smoothing:antialiased;font-family:Quicksand,-apple-system,BlinkMacSystemFont,PingFang TC,Noto Sans TC,Microsoft JhengHei,sans-serif;font-size:13px}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;margin:0}body{flex-direction:column;display:flex;overflow:hidden}button,input,select{font:inherit;color:inherit}a{color:var(--accent);text-decoration:none}a:hover{text-underline-offset:3px;text-decoration:underline}.topbar{border-bottom:1px solid var(--line-strong);flex:none;justify-content:space-between;align-items:center;height:56px;margin:0 20px;display:flex}.brand{align-items:baseline;gap:14px;display:flex}.title{letter-spacing:-.01em;font-size:20px;font-weight:700}.tagline{color:var(--muted);letter-spacing:.06em;font-size:12px}.top-actions{align-items:center;gap:4px;display:flex}.btn{border:1px solid var(--line-strong);cursor:pointer;white-space:nowrap;background:0 0;border-radius:99px;height:32px;padding:0 16px;transition:background .15s,color .15s,border-color .15s}.btn:hover{background:var(--ink);color:var(--bg)}.btn:disabled{opacity:.35;pointer-events:none}.btn.ghost{border-color:#0000;padding:0 12px}.btn.ghost:hover{color:var(--accent);background:0 0}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.btn.small{height:26px;padding:0 12px;font-size:12px}.btn.block{width:100%}.btn.icon{width:24px;height:24px;color:var(--muted);border-color:#0000;place-items:center;padding:0;font-size:12px;display:inline-grid}.btn.icon:hover{color:var(--ink);background:0 0}.layout{flex:1;min-height:0;padding:0 20px;display:flex}.stage{flex:1;min-width:0;position:relative}#viewport{position:absolute;inset:0}#viewport canvas{touch-action:none;outline:none;display:block}.status{color:var(--muted);letter-spacing:.04em;font-size:12px;position:absolute;top:16px;left:0}.status:before{content:"";background:var(--accent);vertical-align:middle;border-radius:50%;width:6px;height:6px;margin-right:8px;animation:1s infinite alternate pulse;display:inline-block}@keyframes pulse{to{opacity:.2}}.toolbar{border-top:1px solid var(--line-strong);background:var(--bg);flex-wrap:wrap;align-items:center;gap:8px 2px;padding:12px 0 14px;display:flex;position:absolute;bottom:0;left:0;right:0}.toolbar .sep{background:var(--line);flex:none;width:1px;height:14px;margin:0 10px}.toolbar .tb{cursor:pointer;white-space:nowrap;height:26px;color:var(--ink);background:0 0;border:0;padding:0 10px;position:relative}.toolbar .tb:hover,.toolbar .tb.on{color:var(--accent)}.toolbar .tb.on:after{content:"";background:var(--accent);height:2px;position:absolute;bottom:-2px;left:10px;right:10px}.toolbar label{white-space:nowrap;flex:0 190px;align-items:center;gap:10px;min-width:140px;padding:0 10px;display:flex}.toolbar input[type=range]{flex:1;width:auto;min-width:60px}.panel{width:var(--panel-w);border-left:1px solid var(--line-strong);scrollbar-width:none;flex:none;margin-left:24px;padding:0 4px 0 24px;overflow-y:auto}.panel::-webkit-scrollbar{display:none}.dlg-body::-webkit-scrollbar{display:none}.dlg-body{scrollbar-width:none}.section{border-bottom:1px solid var(--line-strong)}.section>summary{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:10px;padding:18px 0;list-style:none;display:flex}.section>summary::-webkit-details-marker{display:none}.sec-title{letter-spacing:.01em;font-size:18px;font-weight:600}.sec-note{color:var(--muted);letter-spacing:.04em;font-variant-numeric:tabular-nums;font-size:11px}.section .count{background:var(--accent);color:#fff;border-radius:99px;place-items:center;min-width:20px;height:20px;padding:0 6px;font-size:11px;font-weight:600;display:grid}.chev{border:1px solid var(--line-strong);border-radius:50%;flex:none;width:22px;height:22px;margin-left:auto;transition:transform .2s;position:relative}.chev:after{content:"";border-right:1.3px solid var(--ink);border-bottom:1.3px solid var(--ink);width:5px;height:5px;position:absolute;top:45%;left:50%;transform:translate(-50%,-50%)rotate(45deg)}.section[open] .chev{transform:rotate(180deg)}.section-body{gap:16px;padding:0 0 22px;display:grid}.field{gap:6px;display:grid}.field>span,.label{color:var(--muted);font-size:12px}.row{align-items:center;gap:14px;display:flex}.row>*{flex:1;min-width:0}.row>.auto{flex:none}.hint{color:var(--muted);margin:0;font-size:12px;line-height:1.7}input[type=number],input[type=text],select{border:0;border-bottom:1px solid var(--line-strong);background:0 0;border-radius:0;outline:none;width:100%;height:30px;padding:0}select{appearance:none;cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231A1A1A' stroke-width='1.2'/%3E%3C/svg%3E") right 2px center no-repeat;padding-right:18px}input[type=number]:focus,input[type=text]:focus,select:focus{border-bottom-color:var(--accent);box-shadow:0 1px 0 var(--accent)}input[type=number]::-webkit-inner-spin-button{opacity:.4}.unit{position:relative}.unit input{font-variant-numeric:tabular-nums;padding-right:30px}.unit:after{content:attr(data-unit);color:var(--muted);pointer-events:none;font-size:12px;position:absolute;top:50%;right:0;transform:translateY(-50%)}input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;height:14px;margin:0}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{background:var(--line-strong);height:1px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);border:0;border-radius:50%;width:11px;height:11px;margin-top:-5px;transition:transform .15s}input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.3)}input[type=range]:focus-visible::-webkit-slider-thumb{transform:scale(1.3)}input[type=range]::-moz-range-track{background:var(--line-strong);height:1px}input[type=range]::-moz-range-thumb{background:var(--accent);border:0;border-radius:50%;width:11px;height:11px}input[type=checkbox]{appearance:none;border:1px solid var(--line-strong);cursor:pointer;background:0 0;border-radius:50%;flex:none;width:16px;height:16px;margin:0;position:relative}input[type=checkbox]:checked{border-color:var(--accent)}input[type=checkbox]:checked:after{content:"";background:var(--accent);border-radius:50%;position:absolute;inset:3px}input[type=color]{border:1px solid var(--line-strong);cursor:pointer;background:0 0;border-radius:50%;flex:none;width:26px;height:26px;padding:0;overflow:hidden}input[type=color]::-webkit-color-swatch-wrapper{padding:2px}input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}input[type=color]::-moz-color-swatch{border:0;border-radius:50%}.slider{grid-template-columns:1fr auto;align-items:center;gap:6px 8px;display:grid}.slider span{color:var(--muted);font-size:12px}.slider output{font-variant-numeric:tabular-nums;font-size:12px}.slider input{grid-column:1/-1}.swatches{flex-wrap:wrap;gap:8px;display:flex}.swatch{cursor:pointer;border:0;border-radius:50%;width:22px;height:22px;padding:0;box-shadow:inset 0 0 0 1px #0000001a}.swatch.on{box-shadow:0 0 0 2px var(--bg), 0 0 0 3px var(--ink)}.seg{flex-wrap:wrap;gap:6px;display:flex}.seg button{border:1px solid var(--line-strong);cursor:pointer;white-space:nowrap;background:0 0;border-radius:99px;height:26px;padding:0 12px;font-size:12px}.seg button:hover{border-color:var(--accent);color:var(--accent)}.seg button.on{background:var(--accent);border-color:var(--accent);color:#fff}.layer{border-bottom:1px solid var(--line);grid-template-columns:minmax(0,1fr);gap:12px;padding-bottom:16px;display:grid}.section-body>*,.layer>*,.finish-body>*{min-width:0}.layer-info{flex:1;gap:4px;min-width:0;display:grid}.layer-info .name{text-overflow:ellipsis;white-space:nowrap;font-weight:500;overflow:hidden}.links{gap:14px;display:flex}.link{cursor:pointer;height:auto;color:var(--muted);text-underline-offset:3px;background:0 0;border:0;padding:0;font-size:12px;-webkit-text-decoration:underline #0000;text-decoration:underline #0000;transition:color .15s,text-decoration-color .15s}.link:hover{color:var(--accent);text-decoration-color:currentColor}.link.danger:hover{color:#e4002b}.toast{opacity:0;pointer-events:none;background:var(--ink);color:var(--bg);z-index:50;border-radius:99px;align-items:center;gap:18px;padding:12px 18px;font-size:13px;transition:opacity .2s,transform .2s;display:flex;position:fixed;bottom:28px;left:50%;transform:translate(-50%,12px)}.toast.show{opacity:1;pointer-events:auto;transform:translate(-50%)}.toast .link{color:#9db2ff;font-size:13px;font-weight:600}.toast .link:hover{color:#fff}.card-head{align-items:center;gap:12px;display:flex}.card-head .name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-weight:500;overflow:hidden}.thumb{border:1px solid var(--line-strong);background-color:#fff;background-image:linear-gradient(45deg,#eee 25%,#0000 25% 75%,#eee 75%),linear-gradient(45deg,#eee 25%,#0000 25% 75%,#eee 75%);background-position:0 0,4px 4px;background-size:8px 8px;border-radius:6px;flex:none;place-items:center;width:40px;height:40px;display:grid;overflow:hidden}.thumb img{max-width:100%;max-height:100%}.thumb.dark{background:var(--ink)}.thumb.replace{cursor:pointer;position:relative}.thumb.replace:after{content:"更換";color:#fff;opacity:0;background:#0736ffd1;place-items:center;font-size:11px;transition:opacity .15s;display:grid;position:absolute;inset:0}.thumb.replace:hover:after,.thumb.replace.over:after,.thumb.replace:focus-visible:after{opacity:1}.thumb.replace.empty:after{content:"上傳"}.thumb.empty{color:var(--muted);background:0 0;border-style:dashed;font-size:16px}.thumb.over{border-color:var(--accent);color:var(--accent)}.finish{border-bottom:1px solid var(--line)}.finish:last-of-type{border-bottom:0}.finish-head{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:12px;padding:11px 0;display:flex}.finish-head:hover .name{color:var(--accent)}.finish-head .dot{border-radius:50%;flex:none;width:12px;height:12px;box-shadow:inset 0 0 0 1px #00000026}.finish-head .name{flex:1;font-size:14px}.finish.on .finish-head .name{font-weight:600}.finish-head .state{color:var(--accent);font-size:11px}.finish-body{gap:12px;padding:2px 0 16px 28px;display:grid}.finish-body .add-layer{justify-self:start}.finish.extra .finish-head{padding-left:14px}.finish.extra .finish-body{padding-left:42px}.mask-slot{align-items:flex-start;gap:12px;display:flex}.mask-slot .actions{flex:1;gap:10px;min-width:0;display:grid}.mask-slot .actions .row{gap:6px}.mask-slot .actions .row>.btn{flex:none}.mask-slot .file{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.drop{color:var(--ink);cursor:pointer;justify-items:start;gap:2px;padding:4px 0;font-weight:500;display:grid}.drop small{color:var(--muted);font-size:11px;font-weight:400}.drop:hover,.drop.over{color:var(--accent)}.panel-foot{color:var(--muted);padding:20px 0 28px;font-size:11px;line-height:1.8}.panel-foot .credit{border-top:1px solid var(--line);color:var(--ink);margin-top:10px;padding-top:10px;font-size:12px}.dialog{border:1px solid var(--line-strong);background:var(--bg);width:min(440px,100vw - 32px);color:var(--ink);border-radius:20px;padding:0 24px;box-shadow:0 24px 60px #0000001f}.dialog.wide{width:min(900px,100vw - 32px)}.dialog::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#f3f4f1b3}.dlg-head{border-bottom:1px solid var(--line-strong);justify-content:space-between;align-items:center;padding:20px 0 14px;font-size:18px;font-weight:600;display:flex}.dlg-body{gap:16px;max-height:70vh;padding:20px 0;display:grid;overflow:auto}.dlg-foot{border-top:1px solid var(--line);justify-content:flex-end;gap:8px;padding:14px 0 20px;display:flex}.picker{grid-template-columns:1fr 230px;gap:24px;display:grid}.picker-canvas{border:1px solid var(--line);border-radius:12px;place-items:center;min-height:320px;padding:12px;display:grid;overflow:hidden}.picker-canvas canvas{cursor:crosshair;max-width:100%;max-height:56vh;display:block}.samples{flex-wrap:wrap;gap:6px;min-height:22px;display:flex}.help{gap:6px}.help h3{border-top:1px solid var(--line);margin:14px 0 2px;padding-top:18px;font-size:16px}.help h3:first-child{border-top:0;margin-top:0;padding-top:0}.help h4{margin:10px 0 0;font-size:14px}.help p,.help li{margin:0;line-height:1.85}.help ol,.help ul{gap:4px;margin:2px 0;padding-left:20px;display:grid}.help .em{color:var(--accent);font-weight:700}.help-table{border-collapse:collapse;width:100%;margin:4px 0;font-size:12px}.help-table th,.help-table td{text-align:left;border-bottom:1px solid var(--line);padding:8px 10px 8px 0}.help-table th{color:var(--muted);border-bottom-color:var(--line-strong);font-weight:500}.help code{font-family:ui-monospace,Menlo,monospace;font-size:12px}.dl-grid{grid-template-columns:minmax(0,1fr) 330px;align-items:start;gap:24px;display:grid}.dl-stage{border:1px solid var(--line);background:var(--bg);border-radius:12px;place-items:center;padding:8px;display:grid}.dl-canvas{cursor:pointer;max-width:100%;display:block}.dl-legend{color:var(--muted);flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:11px;display:flex}.dl-key{align-items:center;gap:6px;display:inline-flex}.dl-side{align-content:start;gap:16px;display:grid}.dl-list{scrollbar-width:none;max-height:230px;display:grid;overflow:auto}.dl-list::-webkit-scrollbar{display:none}.dl-row{border-bottom:1px solid var(--line);align-items:center;gap:8px;padding:8px 0;display:flex}.dl-row .seg{flex-wrap:nowrap;flex:1;gap:4px}.dl-row .seg button{padding:0 9px}.dl-row .label{white-space:nowrap}.dl-row .unit{flex:none;width:64px}.dl-row .unit input{padding-right:14px}.fold-angles{gap:10px;display:grid}.dl-row .name{flex:1}.dl-row.on{box-shadow:inset 2px 0 0 var(--accent);padding-left:8px}.dl-num{border:1px solid var(--line-strong);border-radius:50%;flex:none;place-items:center;width:20px;height:20px;font-size:10px;font-weight:600;display:grid}.dl-alert{color:#e4002b;margin:0;font-size:12px;font-weight:600;line-height:1.7}.dl-all{flex-wrap:wrap;align-items:center;gap:6px;padding:2px 0 8px;display:flex}.dl-all .label{margin-right:2px}.dl-warn{color:var(--accent);margin:0;padding-left:18px;font-size:12px;line-height:1.7}.dl-static{border-bottom:1px solid var(--line);height:30px;color:var(--muted);align-items:center;display:flex}@media (width<=760px){.layout{flex-direction:column;padding:0 16px}.topbar{margin:0 16px}.stage{flex:none;height:50vh}.panel{border-left:0;border-top:1px solid var(--line-strong);flex:1;width:100%;margin-left:0;padding:0 4px 0 0}.top-actions .ghost{display:none}.title{font-size:17px}.tagline{display:none}.picker,.dl-grid{grid-template-columns:1fr}.toolbar .sep{display:none}}