:root{--font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", system-ui, sans-serif;--font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;--ease-out: cubic-bezier(.16, 1, .3, 1);--radius: 3px;--hit: 44px;--top-h: 48px;--panel-w: 344px;--gutter: 16px;--sheet-peek: 196px;color-scheme:dark;--bg: #0c0a09;--bg-raise: #15120f;--bg-sunk: #070605;--ink: #f3eee6;--ink-2: #bdb5aa;--ink-3: #8a8277;--line: rgb(243 238 230 / .11);--line-strong: rgb(243 238 230 / .26);--accent: #3cb8ff;--on-accent: #06080f;--logo-ink-a: #f6f1ea;--logo-ink-b: #e2dbd0;--logo-ink-c: #cfc4ee;--field-bg: rgb(243 238 230 / .035);--selection: rgb(8 116 229 / .45);--ok: #4ad6a0;--danger: #ff7a7a}@media(prefers-color-scheme:light){:root{color-scheme:light;--bg: #e9eef4;--bg-raise: #f5f8fb;--bg-sunk: #dce3ec;--ink: #0c1424;--ink-2: #33405a;--ink-3: #4f5b72;--line: rgb(22 52 120 / .13);--line-strong: rgb(22 46 110 / .28);--accent: #0a57c8;--on-accent: #ffffff;--logo-ink-a: #002d54;--logo-ink-b: #011536;--logo-ink-c: #13004b;--field-bg: rgb(255 255 255 / .55);--selection: rgb(8 116 229 / .22);--ok: #0a7552;--danger: #b8262d}}*{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%;margin:0}body{font:14px/1.4 var(--font-sans);background:var(--bg);color:var(--ink);overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}.ink-a{stop-color:var(--logo-ink-a)}.ink-b{stop-color:var(--logo-ink-b)}.ink-c{stop-color:var(--logo-ink-c)}.top{height:var(--top-h);display:flex;align-items:center;gap:12px;padding:0 var(--gutter);border-bottom:1px solid var(--line);background:var(--bg)}.logo{display:block;height:20px}.logo svg{height:100%;width:auto;display:block;overflow:visible}.badge{font:11px/1 var(--font-mono);border:1px solid var(--line-strong);color:var(--ink-3);padding:3px 6px;border-radius:var(--radius)}.top-actions{margin-left:auto;display:flex;gap:8px}button{font:inherit;color:var(--ink);background:transparent;border:1px solid var(--line-strong);border-radius:var(--radius);height:32px;padding:0 12px;cursor:pointer;white-space:nowrap;transition:border-color .15s,background-color .15s,color .15s}button:hover{border-color:var(--ink-3)}button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}button.primary{background:var(--accent);color:var(--on-accent);border-color:transparent}button.on{border-color:var(--accent);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}button:disabled{opacity:.4;cursor:default}input[type=range]{width:100%;margin:6px 0 0;accent-color:var(--accent);display:block}input[type=number]{font:inherit;color:var(--ink);background:var(--field-bg);border:1px solid var(--line-strong);border-radius:var(--radius);height:32px;width:84px;padding:0 8px}input[type=number]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}output{font-family:var(--font-mono);font-size:12px;color:var(--ink-2);margin-left:6px}.main{height:calc(100% - var(--top-h));display:grid;grid-template-columns:1fr var(--panel-w)}.stage{position:relative;overflow:hidden;background:var(--bg-sunk)}.panel{border-left:1px solid var(--line);overflow:hidden auto;padding:0 var(--gutter) 24px;background:var(--bg-raise)}.grip{display:none}.ctl h2,.ctl summary{font-size:12px;font-weight:500;color:var(--ink-3);margin:16px 0 8px;letter-spacing:.02em;display:flex;align-items:baseline}.ctl summary{cursor:pointer;list-style:none}.ctl summary::-webkit-details-marker{display:none}.ctl summary:after{content:"＋";margin-left:auto}.ctl[open] summary:after{content:"－"}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.fields{align-items:flex-end}.fields label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ink-3)}.fields .x{height:32px;display:flex;align-items:center;color:var(--ink-3)}.seg{display:flex;gap:8px;flex-wrap:wrap}.swatches i{display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:6px;vertical-align:-1px;border:1px solid rgb(128 128 128 / .4)}.brush-opts{margin-top:8px;display:grid;gap:8px}.brush-opts label{font-size:12px;color:var(--ink-3)}.tiles{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:4px;scrollbar-width:thin}.tile{flex:0 0 auto;width:96px;height:auto;padding:4px;text-align:left;scroll-snap-align:start;border-color:var(--line)}.tile img{width:86px;height:86px;object-fit:cover;display:block;border-radius:2px;background:var(--bg-sunk)}.tile .n{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;font-size:12px;line-height:1.3;margin-top:6px;min-height:2.6em;overflow:hidden;overflow-wrap:anywhere}.tile .s{display:block;font:11px/1.2 var(--font-mono);color:var(--ink-3);margin-top:2px}.tile.on{box-shadow:inset 0 0 0 1px var(--accent);border-color:var(--accent)}.tile.on .n{color:var(--accent)}.drop{position:absolute;inset:var(--gutter);border:1px dashed var(--line-strong);border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;transition:border-color .15s,background-color .15s}.drop.over{border-color:var(--accent);background:var(--selection)}.drop p{margin:0;color:var(--ink-3)}.only-touch{display:none}@media(pointer:coarse){.only-touch{display:inline-block}}.frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);touch-action:none;user-select:none;-webkit-user-select:none;--cut: 50%}.frame>canvas:not(.loupe),.frame>.overlay{position:absolute;inset:0;width:100%;height:100%;display:block}.frame .gl{clip-path:inset(0 0 0 var(--cut));opacity:0;transition:opacity .2s}.frame.ready .gl{opacity:1}.frame .overlay{pointer-events:none;overflow:visible}.overlay .grid{fill:none;stroke:#ffffff8c;stroke-width:1px;vector-effect:non-scaling-stroke}.overlay .square{fill:#3cb8ff14;stroke:var(--accent);stroke-width:1.5px;vector-effect:non-scaling-stroke}.overlay .ruler{stroke:var(--accent);stroke-width:2px;vector-effect:non-scaling-stroke;stroke-linecap:round}.overlay .pt{stroke:#fff;stroke-width:1.5px;vector-effect:non-scaling-stroke}.overlay .pt.add{fill:var(--ok)}.overlay .pt.remove{fill:var(--danger)}.overlay .handle{pointer-events:all;cursor:grab;fill:#3cb8ff2e;stroke:#fff;stroke-width:2px;vector-effect:non-scaling-stroke}.overlay .handle:active{cursor:grabbing}.overlay .handle-dot{fill:#fff;stroke:var(--accent);stroke-width:1.5px;vector-effect:non-scaling-stroke}.overlay .cursor{fill:none;stroke:#fff;stroke-width:1px;vector-effect:non-scaling-stroke;mix-blend-mode:difference}.frame.mode-add,.frame.mode-remove{cursor:crosshair}.frame.mode-brush{cursor:none}.frame.mode-ruler{cursor:crosshair}.frame.mode-none{cursor:ew-resize}.progress{position:absolute;left:0;top:0;right:0;height:2px;overflow:hidden}.progress:before{content:"";position:absolute;top:0;left:-40%;width:40%;height:100%;background:var(--accent);animation:slide 1.2s linear infinite}@keyframes slide{to{left:100%}}.divider{position:absolute;top:0;bottom:0;left:var(--cut);width:0;border-left:1px solid #fff;box-shadow:0 0 0 1px #00000040;pointer-events:none}.knob{position:absolute;top:50%;left:0;width:32px;height:32px;margin:-16px 0 0 -16px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #00000059;pointer-events:all;cursor:ew-resize;touch-action:none;display:flex;align-items:center;justify-content:center;gap:4px}.knob:before,.knob:after{content:"";width:7px;height:7px;border:solid #333;border-width:0 0 1.5px 1.5px}.knob:before{transform:rotate(45deg)}.knob:after{transform:rotate(-135deg)}.frame.hide-divider .divider{display:none}.badge-time{position:absolute;left:8px;bottom:8px;font:12px/1 var(--font-mono);background:#0000008c;color:#fff;padding:5px 7px;border-radius:var(--radius);pointer-events:none}.hint{position:absolute;top:8px;left:50%;transform:translate(-50%);background:#0009;color:#fff;padding:5px 10px;border-radius:var(--radius);font-size:13px;white-space:nowrap;pointer-events:none}.loupe{position:absolute;width:96px;height:96px;border-radius:50%;border:2px solid #fff;box-shadow:0 2px 12px #0006;pointer-events:none;transform:translate(-50%,-100%);margin-top:-24px;background:#000}.errbar{position:absolute;left:var(--gutter);right:var(--gutter);bottom:12px;display:flex;gap:12px;align-items:center;padding:8px 8px 8px 12px;border:1px solid var(--danger);border-radius:var(--radius);background:var(--bg-raise);z-index:3}.errbar span{flex:1;min-width:0}@media(max-width:760px){.main{grid-template-columns:1fr}.stage{--stage-pad-b: var(--sheet-peek)}.panel{position:fixed;left:0;right:0;bottom:0;height:var(--sheet-h, 70vh);transform:translateY(var(--sheet-y, 0px));transition:transform .2s var(--ease-out);border-left:0;border-top:1px solid var(--line);border-radius:12px 12px 0 0;padding-bottom:calc(24px + env(safe-area-inset-bottom));z-index:5;box-shadow:0 -8px 24px #00000040}.panel.dragging{transition:none}.grip{display:flex;justify-content:center;padding:10px 0 2px;touch-action:none;cursor:grab;position:sticky;top:0;background:var(--bg-raise);z-index:1}.grip span{width:36px;height:4px;border-radius:2px;background:var(--line-strong)}.ctl h2,.ctl summary{margin-top:12px}.top-actions button{padding:0 10px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation-duration:.01s!important}}.seg.big button{flex:1 1 auto;height:36px;min-width:0}.seg.big.swatches button{flex:1 1 auto;min-width:max-content;padding:0 10px}.drop .tip{font-size:12px;margin-top:4px}.foot{margin:24px 0 0;font-size:11px;color:var(--ink-3)}.tile{position:relative}.tile .k{position:absolute;top:6px;left:6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:var(--on-accent);font:11px/18px var(--font-mono);text-align:center}.tiles.picking .tile{opacity:.55}.tiles.picking .tile.picked{opacity:1;box-shadow:inset 0 0 0 1px var(--accent);border-color:var(--accent)}@media(max-width:480px){.top{gap:8px}.top .badge{display:none}.logo{height:17px}.top-actions{gap:6px}.top-actions button{padding:0 9px;font-size:13px}}#ruler-len{width:72px}#btn-ruler{flex:1 1 100%}