:root{--bg:#14170f;--panel:#1d2117;--line:#343a2a;--ink:#f3f4ea;--dim:#a5ab94;--accent:#c2b280;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);margin:0;font:14px/1.5 Hiragino Sans,Zen Kaku Gothic New,system-ui,sans-serif}main{grid-template-columns:minmax(0,1fr) 320px;align-items:start;gap:16px;padding:16px;display:grid}.stage{flex-direction:column;gap:8px;min-width:0;height:calc(100vh - 32px);min-height:320px;display:flex;position:sticky;top:16px}.viewport{background:var(--panel);border:1px solid var(--line);touch-action:none;-webkit-user-select:none;user-select:none;border-radius:6px;flex:1;min-height:0;position:relative;overflow:hidden}.viewport.pannable{cursor:grab}.viewport.dragging{cursor:grabbing}.viewport canvas{transform-origin:0 0;display:block;position:absolute;top:0;left:0}.viewbar{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.zoom{align-items:center;gap:4px;display:flex}.zoom button{width:auto;min-width:32px;padding:4px 8px}.zoom output{text-align:center;min-width:48px;color:var(--dim);font-variant-numeric:tabular-nums;font-size:12px}.viewbar .stats{text-align:right;flex:1;margin:0}.stats{color:var(--dim);text-align:center;min-height:1.5em;margin:8px 0 0;font-size:12px}.sheet{gap:12px;display:grid}h1{letter-spacing:.04em;margin:0;font-size:20px}h1 small{color:var(--dim);margin-left:6px;font-size:12px;font-weight:400}fieldset{border:1px solid var(--line);border-radius:6px;gap:8px;min-width:0;margin:0;padding:10px 12px 12px;display:grid}legend{color:var(--accent);padding:0 6px;font-size:12px}.row{gap:2px;display:grid}.row label{color:var(--dim);justify-content:space-between;font-size:12px;display:flex}input[type=range]{width:100%;accent-color:var(--accent)}input:disabled,select:disabled{opacity:.35}select,button{font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:4px;width:100%;padding:6px 8px}button{cursor:pointer}button[aria-pressed=true]{background:var(--accent);color:var(--bg);border-color:var(--accent)}button.primary{background:var(--ink);color:var(--bg);padding:10px;font-weight:700}.chips{flex-wrap:wrap;gap:6px;display:flex}.chips button{border-radius:999px;width:auto;padding:4px 10px;font-size:13px}.chips small{opacity:.7;margin-left:4px}.check{align-items:center;gap:6px;font-size:13px;display:flex}.check input{accent-color:var(--accent)}@media (width<=760px){main{grid-template-columns:1fr}.stage{height:70vh;position:static}}.note{color:var(--dim);margin:0;font-size:12px;line-height:1.6}.file{color:var(--dim);font-size:12px;line-height:1.6;display:block}.file input{max-width:100%;color:inherit;margin-top:4px;display:block}.own{gap:6px;display:grid}.file input[type=text]{box-sizing:border-box;border:1px solid var(--line,#3a3d33);width:100%;font:inherit;background:0 0;border-radius:6px;padding:6px 8px}.own{border-top:1px solid var(--line);padding-top:8px}.own-title{margin:0;font-size:13px;font-weight:700}.steps{counter-reset:step;gap:10px;margin:0;padding:0;list-style:none;display:grid}.steps>li{counter-increment:step;gap:4px;min-width:0;padding-left:28px;display:grid;position:relative}.steps>li:before{content:counter(step);background:var(--accent);width:20px;height:20px;color:var(--bg);border-radius:50%;place-items:center;font-size:12px;font-weight:700;display:grid;position:absolute;top:0;left:0}.steps label{font-size:13px}.steps input[type=file]{max-width:100%;color:var(--dim);font-size:12px}.steps input[type=text]{box-sizing:border-box;background:var(--panel);width:100%;color:var(--ink);border:1px solid var(--line);font:inherit;border-radius:4px;padding:6px 8px}button:disabled{opacity:.45;cursor:default}.stage-box>legend{color:var(--ink);align-items:center;gap:8px;padding:0 6px;font-size:14px;font-weight:700;display:flex}.num{background:var(--accent);width:22px;height:22px;color:var(--bg);border-radius:50%;flex:none;place-items:center;font-size:13px;font-weight:700;display:inline-grid}.more{border-top:1px solid var(--line);padding-top:8px}.more>summary{cursor:pointer;color:var(--dim);font-size:13px;list-style-position:inside}.more[open]>summary{color:var(--ink);margin-bottom:8px}.more[open]{gap:8px;display:grid}.pair{grid-template-columns:1fr 1fr;gap:8px;display:grid}.row>select{margin-top:4px}.viewport.working canvas{filter:brightness(.45)saturate(.6);transition:filter .15s}.busy{pointer-events:none;text-align:center;place-content:center;justify-items:center;gap:12px;padding:16px;display:grid;position:absolute;inset:0}.busy[hidden]{display:none}.busy #busy-text{color:var(--ink);border:1px solid var(--line);background:#14170fd1;border-radius:999px;max-width:100%;padding:8px 16px;font-size:15px;font-weight:700}.spin{border:4px solid #f3f4ea40;border-top-color:var(--accent);border-radius:50%;width:44px;height:44px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.spin{animation-duration:2.4s}}.work-tag{border:1px solid var(--line);max-width:calc(100% - 24px);color:var(--ink);pointer-events:none;white-space:nowrap;background:#14170fe0;border-radius:999px;align-items:center;gap:10px;padding:7px 14px 7px 10px;font-size:13px;font-weight:700;display:flex;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.work-tag[hidden]{display:none}.work-tag .spin{border-width:3px;flex:none;width:18px;height:18px}.work-tag .bar{background:#f3f4ea33;border-radius:999px;flex:none;width:72px;height:5px;overflow:hidden}.work-tag .bar>span{background:var(--accent);width:0;height:100%;display:block}.viewport.working .work-tag{display:none}.size-pair{color:var(--dim);align-items:center;gap:8px;font-size:12px;display:flex}.size-pair[hidden]{display:none}.size-pair label{align-items:center;gap:4px;display:flex}.size-pair input{background:var(--panel);width:76px;color:var(--ink);border:1px solid var(--line);font:inherit;border-radius:4px;padding:6px 8px}.stepper{color:var(--dim);align-items:center;gap:6px;margin-top:4px;font-size:12px;display:flex}.stepper button{flex:none;width:36px;padding:6px 0}.stepper input{background:var(--panel);min-width:0;color:var(--ink);border:1px solid var(--line);font:inherit;font-variant-numeric:tabular-nums;border-radius:4px;flex:1;padding:6px 8px}.note[hidden],.switch[hidden]{display:none}.note.warn{color:var(--accent)}.swatches{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.swatch{border:1px solid var(--line);border-radius:4px;align-items:center;display:inline-flex;overflow:hidden}.swatch input[type=color]{cursor:pointer;background:0 0;border:0;width:34px;height:30px;padding:0}.swatch button{border:0;border-left:1px solid var(--line);width:22px;height:30px;color:var(--dim);border-radius:0;padding:0}.swatches>button{width:auto;padding:4px 10px;font-size:12px}.row>input[type=text]{background:var(--panel);width:100%;color:var(--ink);border:1px solid var(--line);font:inherit;border-radius:4px;margin-top:4px;padding:6px 8px}#backdrop{z-index:-1;opacity:.5;filter:saturate(.75)brightness(.7);pointer-events:none;width:100vw;height:100vh;position:fixed;inset:0}.viewport canvas[hidden]{display:none}.viewport canvas#view,.viewport canvas#motion-view{outline:3px solid var(--ink);box-shadow:0 0 0 7px #14170feb,0 10px 36px #000000b3}.switch{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;padding:6px 4px;font-size:13px;display:flex}.switch input{opacity:0;width:1px;height:1px;position:absolute}.switch .knob{background:var(--line);border-radius:999px;flex:none;width:34px;height:20px;transition:background .15s;position:relative}.switch .knob:after{content:"";background:var(--ink);border-radius:50%;width:16px;height:16px;transition:transform .15s;position:absolute;top:2px;left:2px}.switch input:checked+.knob{background:var(--accent)}.switch input:checked+.knob:after{transform:translate(14px)}.switch input:focus-visible+.knob{outline:2px solid var(--ink);outline-offset:2px}#before.on{background:var(--accent);color:var(--bg);border-color:var(--accent)}.before-tag{background:var(--accent);color:var(--bg);pointer-events:none;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:700;display:none;position:absolute;top:12px;left:12px}.viewport.before .before-tag{display:block}.viewport{background:0 0}fieldset{background:#14170fe6}.head{border:1px solid var(--line);background:#14170fe6;border-radius:6px;flex:none;align-self:flex-start;align-items:center;gap:12px;padding:8px 12px;display:flex}.head select{width:auto;padding:4px 6px;font-size:12px}.viewbar{border:1px solid var(--line);background:#14170fe6;border-radius:6px;padding:6px 8px}button.danger{color:#fff;background:#b3261e;border-color:#e0563b;font-weight:700}.head h1{margin-right:4px}.gh{color:var(--dim);border-radius:4px;align-items:center;gap:5px;padding:4px 6px;font-size:12px;text-decoration:none;display:inline-flex}.gh:hover,.gh:focus-visible{color:var(--ink);background:var(--panel)}.jog{color:var(--dim);grid-template-columns:auto 1fr auto;align-items:center;gap:6px;margin:2px 0 4px;font-size:11px;display:grid}.jog input{background:linear-gradient(var(--dim), var(--dim)) center / 1px 12px no-repeat}.switch:has(input:disabled){opacity:.45;cursor:not-allowed}