:root{color-scheme:dark;--bg: #fff;--panel: #22252b;--panel2: #2a2d34;--btn2: #3a3f56;--line: #33373f;--btnbd: transparent;--text: #d7dae0;--dim: #8b909a;--accent: #639bff}*{box-sizing:border-box;margin:0;padding:0}body{font:13px/1.45 -apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg);color:var(--text);overflow:hidden}#app{display:flex;height:100vh}#side{position:relative;width:276px;flex:none;background:var(--panel);border-right:1px solid var(--line)}#sidebar{height:100%;padding:12px 0 0;-webkit-user-select:none;user-select:none;display:flex;flex-direction:column}#sidebar .head{flex:none;padding:0 16px 12px;border-bottom:1px solid var(--line)}.side-scroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;padding:0 16px 16px}.side-scroll>.section,.side-scroll>.hint-text{flex:none}.side-scroll .spacer{flex:1;min-height:8px}.head{display:flex;align-items:center;gap:8px;margin-bottom:12px}.head h1{flex:1;font-size:14px;font-weight:600}.head .burger{font-size:15px}.hbtns{display:flex}.section{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:14px}.section.sec-cell-types{flex:1;min-height:150px;display:flex;flex-direction:column}.section>*{grid-column:1 / -1}.section .row{margin:0}.section .btn-group{grid-column:span 2}.section .scrub-field{grid-column:span 2;min-width:0}.section .scrub-field.span3,.section .color-field,.section.sec-export .seg{grid-column:span 3}.section .icon-btn,.section .btn.toggle{grid-column:span 1}.section .seg{grid-column:1 / -1}.section .seg.with-btn{grid-column:span 4}.section h3{grid-column:1 / -1;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin:0}.ctl-row{display:contents}.sec-head{grid-column:1 / -1;display:flex;align-items:baseline;justify-content:space-between;gap:8px}.sec-head h3{margin:0}.sec-head-hint{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}.row{display:flex;align-items:center;gap:8px;margin:6px 0 2px}.row label{flex:1;color:var(--text)}.row .val{color:var(--dim);font-variant-numeric:tabular-nums;font-size:12px}.row.check{cursor:pointer;margin:5px 0}.row.check span{flex:1}.row.btns{flex-wrap:wrap;margin-top:8px}.field-label{grid-column:span 2;display:flex;align-items:center;color:var(--dim);font-size:12px}.mini-check{display:flex;align-items:center;gap:5px;color:var(--dim);font-size:12px;cursor:pointer}.dot{width:10px;height:10px;border-radius:50%;flex:none}.scrub-field{display:flex;align-items:center;gap:2px;height:26px;padding:0 4px;background:var(--panel2);border:1px solid var(--btnbd);border-radius:6px;touch-action:none}.scrub-field.focus,.scrub-field.scrubbing{border-color:var(--accent)}.scrub-field.scrubbing .scrub-handle{color:var(--accent)}.scrub-handle{flex:0 0 auto;width:16px;text-align:center;color:var(--dim);cursor:ew-resize;-webkit-user-select:none;user-select:none;font-size:12px}.scrub-val{flex:1 1 0;min-width:0;text-align:left;background:none;border:none;padding:0;color:var(--text);font:inherit;font-variant-numeric:tabular-nums}.scrub-val.ro{cursor:ew-resize;-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}input.scrub-val:focus{outline:none}.field-btn{flex:0 0 auto;margin-left:auto;background:none;border:none;color:var(--dim);font-size:12px;line-height:1;cursor:pointer;padding:0 2px;display:flex;align-items:center}.field-btn:hover{color:var(--text)}.field-btn svg{width:20px;height:20px;margin:-4px}.scrub-reset{color:var(--dim)}body.alt-scrub .scrub-field,body.alt-scrub .scrub-val,body.alt-scrub .scrub-handle{cursor:ew-resize}.cp-swatch{flex:0 0 auto;width:16px;height:16px;border-radius:3px;border:1px solid rgba(255,255,255,.2);cursor:pointer;padding:0}.cp-swatch.transparent{background:linear-gradient(45deg,#888 25%,transparent 25%,transparent 75%,#888 75%),linear-gradient(45deg,#888 25%,#fff 25%,#fff 75%,#888 75%);background-size:8px 8px;background-position:0 0,4px 4px}.cp-pop{position:fixed;z-index:40;width:200px;padding:8px;background:#262932;border:1px solid #3d424d;border-radius:8px;box-shadow:0 8px 28px #00000080}body.cp-sampling,body.cp-sampling #canvas{cursor:none}.cp-loupe{position:fixed;z-index:60;width:132px;height:132px;transform:translate(-50%,-50%);border:3px solid #fff;border-radius:50%;box-shadow:0 2px 10px #0009;overflow:hidden;pointer-events:none}.cp-loupe canvas{display:block;image-rendering:pixelated}.cp-loupe-hex{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:11px;font-variant-numeric:tabular-nums;color:#fff;background:#0009;padding:1px 0}.cp-sv{position:relative;width:100%;height:130px;border-radius:5px;cursor:crosshair;touch-action:none}.cp-bottom{display:flex;align-items:center;gap:8px;margin-top:10px}.cp-hue{position:relative;flex:1;height:12px;border-radius:6px;cursor:ew-resize;touch-action:none;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.cp-thumb{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #00000080;transform:translate(-50%,-50%);pointer-events:none}.cp-eye{flex:0 0 auto;width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:var(--panel2);border:1px solid var(--btnbd);border-radius:6px;color:var(--dim);cursor:pointer;padding:0}.cp-eye:hover{border-color:var(--accent);color:var(--text)}.cp-eye.active{background:color-mix(in srgb,var(--panel) 85%,var(--accent));border-color:var(--accent);color:var(--accent)}.cp-eye svg{width:16px;height:16px}input[type=checkbox]{accent-color:var(--accent)}input.text,select.text{width:100%;height:26px;margin:0;padding:0 8px;background:var(--panel2);border:1px solid var(--btnbd);border-radius:6px;color:var(--text);font:inherit}input.text:focus,select.text:focus{outline:none;border-color:var(--accent)}.btn{height:26px;padding:0 11px;background:var(--panel2);border:1px solid var(--btnbd);border-radius:6px;color:var(--text);font:inherit;font-size:12px;cursor:pointer;margin:0;display:inline-flex;align-items:center;justify-content:center}.btn:hover:not(:disabled){border-color:var(--accent)}.btn:disabled{opacity:.4;cursor:default}.btn.icon-btn{flex:0 0 auto;width:26px;height:26px;padding:0;font-size:14px;display:flex;align-items:center;justify-content:center}.btn.icon-btn svg{width:20px;height:20px;margin:-4px}.btn.primary{background:#33508a;border-color:#4a6cb3;width:100%}.btn.primary:hover{background:#3c5da0}.btn.toggle{background:transparent;flex:none}.btn.toggle.bold{font-weight:700}.btn.toggle.italic{font-style:italic;font-family:Georgia,serif}.btn.toggle.active{background:color-mix(in srgb,var(--panel) 85%,var(--accent));color:var(--accent)}.btn.toggle.mixed{background:var(--btn2);border-color:color-mix(in srgb,var(--accent) 45%,transparent);color:var(--dim)}.btn.danger-sm{color:#e08585}.btn.danger-sm:hover{border-color:#a05050}.btn-group{display:inline-flex;gap:1px}.seg{display:flex;height:26px;background:var(--panel2);border:1px solid var(--btnbd);border-radius:6px;margin:0}.seg button{position:relative;flex:1;padding:0 4px;background:none;border:none;border-radius:6px;color:var(--dim);font:inherit;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center}.seg button svg{width:15px;height:15px}.seg button+button{border-left:1px solid var(--btnbd)}.seg button.marked:not(.active):after{content:"";position:absolute;top:5px;right:5px;width:4px;height:4px;border-radius:50%;background:var(--accent)}.seg button.active{background:var(--panel);color:var(--text);border:1px solid var(--line);margin:-1px}.shape-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.shape-btn{aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:6px;background:var(--panel2);border:1px solid var(--btnbd);border-radius:6px;color:var(--dim);cursor:pointer}.shape-btn:hover{border-color:var(--accent);color:var(--text)}.shape-btn.active{background:var(--btn2);border-color:var(--accent);color:var(--accent)}.shape-btn svg{width:100%;height:100%;fill:currentColor}.shape-btn svg *{fill:currentColor}.row.chips{flex-wrap:wrap}.chip{width:20px;height:20px;border-radius:50%;border:2px solid transparent;cursor:pointer;flex:none}.chip.current{border-color:#fff}.hint-text{color:var(--dim);font-size:11.5px;margin:4px 0}.hint-text.foot{margin-top:12px;border-top:1px solid var(--line);padding-top:10px;line-height:1.6}.type-list{display:flex;flex-direction:column;gap:3px;overflow-y:auto;padding-left:16px;margin-left:-16px}.type-row{position:relative;display:flex;align-items:center;gap:7px;padding:4px 7px 4px 10px;background:none;border:1px solid transparent;border-radius:6px;color:var(--text);font:inherit;font-size:12px;cursor:pointer;text-align:left}.type-row:before{content:"";position:absolute;left:2px;top:5px;bottom:5px;width:3px;border-radius:2px;background:var(--type-color, transparent)}.type-row:hover{background:var(--panel2)}.type-row:hover .type-handle{opacity:1}.type-row.open{border-color:var(--accent);background:var(--panel2)}.type-row.dragging{opacity:.4}.type-row.drop-before{box-shadow:inset 0 2px 0 var(--accent)}.type-row.drop-after{box-shadow:inset 0 -2px 0 var(--accent)}.type-row .thumb{width:22px;height:22px;flex:none;border-radius:4px;background:repeating-conic-gradient(#26282e,#26282e 25%,#33363e 0%,#33363e 50%) 0 0 / 8px 8px}.type-row .tname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.type-row .tcount{color:var(--dim);font-size:11px}.type-handle{position:absolute;left:-14px;top:50%;transform:translateY(-50%);width:14px;height:16px;color:var(--dim);cursor:grab;opacity:0;display:flex;align-items:center}.type-handle svg{width:16px;height:16px}#panel[hidden]{display:none}#panel{position:absolute;top:46px;left:7px;right:7px;bottom:7px;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 28px #00000080,0 2px 8px #00000059;-webkit-user-select:none;user-select:none;z-index:5}.panel-head{position:relative;flex:none;display:flex;align-items:center;gap:4px;padding:9px 10px 9px 13px;border-bottom:1px solid var(--line)}.panel-head:before{content:"";position:absolute;left:4px;top:10px;bottom:10px;width:3px;border-radius:2px;background:var(--type-color, transparent)}.panel-name{flex:1;min-width:0;height:22px;padding:0 4px;background:none;border:1px solid transparent;border-radius:5px;color:var(--text);font:inherit;font-size:12.5px;font-weight:600;cursor:default;caret-color:transparent;-webkit-user-select:none;user-select:none;text-overflow:ellipsis}.panel-name.editing{background:var(--panel2);border-color:var(--accent);cursor:text;caret-color:auto;-webkit-user-select:text;user-select:text}.panel-name:focus{outline:none}.panel-caret{flex:none;width:20px;height:22px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--dim);cursor:pointer;padding:0}.panel-caret:hover{color:var(--text)}.panel-caret svg{width:16px;height:16px}.panel-sub{color:var(--dim);font-size:11.5px;flex:none;margin-left:2px}.panel-close{background:none;border:none;color:var(--dim);font-size:17px;line-height:1;cursor:pointer;padding:0 3px}.panel-close:hover{color:var(--text)}.panel-body{flex:1;overflow-y:auto;padding:10px 12px 14px}.panel-foot{flex:none;padding:10px 12px 12px;border-top:1px solid var(--line)}.ctx-menu{position:fixed;z-index:50;min-width:190px;padding:5px;background:#262932;border-radius:9px;box-shadow:0 10px 32px #0000008c,0 2px 8px #00000059;-webkit-user-select:none;user-select:none}.ctx-dot{width:9px;height:9px;border-radius:2px;flex:none}.ctx-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ctx-hint{flex:none;color:var(--dim);font-size:11px;margin-left:12px}.ctx-sub-caret{flex:none;margin-left:8px;color:var(--dim);font-size:15px;line-height:1}.ctx-item.has-sub:hover .ctx-sub-caret{color:var(--text)}.ctx-menu.ctx-sub{z-index:51;margin-top:.25em}.ctx-header{padding:4px 10px 3px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);-webkit-user-select:none;user-select:none}.ctx-item{display:flex;align-items:center;gap:8px;width:100%;padding:5px 10px;background:none;border:none;border-radius:5px;color:var(--text);font:inherit;font-size:12.5px;text-align:left;cursor:pointer}.ctx-item.current{color:var(--accent)}.ctx-item.disabled{opacity:.4;cursor:default}.ctx-item:hover{background:var(--btn2)}.ctx-sep{height:1px;margin:4px 6px;background:var(--line)}.ctx-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:5px 10px}.ctx-chips span{color:var(--dim);font-size:12px;margin-right:2px}.help-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:24px;background:#0c0d1099}.help-dialog{display:flex;flex-direction:column;width:min(720px,100%);max-height:100%;background:#262932;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 60px #0009;-webkit-user-select:none;user-select:none}.help-head{flex:none;display:flex;align-items:center;gap:8px;padding:11px 12px 11px 18px;border-bottom:1px solid var(--line)}.help-head h2{flex:1;font-size:14px;font-weight:600}.help-body{flex:1;overflow-y:auto;padding:4px 18px 16px;display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 28px}.help-col{flex:1 1 260px;min-width:0}.help-group{margin-top:14px}.help-group h3{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin-bottom:3px}.help-row{display:grid;grid-template-columns:45% 1fr;gap:10px;align-items:baseline;padding:2px 0;font-size:12px}.help-keys{text-align:right;color:var(--text)}.help-what{color:var(--dim)}.help-about{flex:1 0 100%;margin-top:18px;padding-top:12px;border-top:1px solid var(--line)}.help-about h3{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin-bottom:5px}.about-row{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:3px 0;font-size:12px}.about-term{text-align:right;color:var(--text)}.about-text{color:var(--dim);max-width:62ch}.help-foot{flex:none;padding:9px 18px 11px;border-top:1px solid var(--line);color:var(--dim);font-size:11.5px}body.ui-hidden #side{display:none}.img-row .thumb{width:26px;height:26px;flex:none;border-radius:5px;background:repeating-conic-gradient(#26282e,#26282e 25%,#33363e 0%,#33363e 50%) 0 0 / 8px 8px}.tile-badge{position:fixed;z-index:90;pointer-events:none;padding:3px 7px;background:#b28fff;color:#1b1d22;border-radius:5px;font:600 12px/1.3 -apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-variant-numeric:tabular-nums;box-shadow:0 2px 10px #0006}.notice-bar{position:fixed;z-index:200;left:50%;top:14px;transform:translate(-50%);display:flex;align-items:center;gap:10px;max-width:min(680px,calc(100vw - 28px));padding:10px 10px 10px 16px;background:#3a2224;border:1px solid #7d4247;border-radius:10px;box-shadow:0 12px 40px #0000008c;color:#f2dcdc;font-size:12.5px}.notice-bar .notice-text{flex:1;min-width:0}.notice-bar .btn{flex:none;background:#4d2c2f}.notice-close{flex:none;background:none;border:none;color:#c7a3a3;font-size:17px;line-height:1;padding:0 4px;cursor:pointer}.notice-close:hover{color:#f2dcdc}.small-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:150;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--panel)}.small-screen[hidden]{display:none}.small-screen-card{max-width:400px;text-align:center}.small-screen-card h2{font-size:17px;margin-bottom:10px}.small-screen-card p{color:var(--dim);font-size:13px;margin-bottom:10px}.small-screen-card .small-screen-sub{font-size:12px}.small-screen-card .btn{margin-top:6px}#stage{position:relative;flex:1;overflow:hidden;background:repeating-conic-gradient(#26282e,#26282e 25%,#2c2f36 0%,#2c2f36 50%) 0 0 / 20px 20px}#canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}#hint[hidden]{display:none}#hint{position:absolute;left:50%;top:50%;transform:translate(-50%,max(-335px,-50dvh));pointer-events:none;display:flex;flex-direction:column;width:100%;max-width:min(286px,calc(100% - 32px));height:190px;align-items:center;justify-content:center;gap:6px;text-align:center;background:color-mix(in srgb,var(--bg) 1%,transparent);color:contrast-color(var(--bg));padding:.5em;font-size:13px;line-height:1.5;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}#hint kbd{font:inherit;background:color-mix(in srgb,var(--accent) 20%,transparent);border-radius:3px;padding:0 4px}#hint strong{font-size:14px;font-weight:600}#hint .hint-quiet{margin-top:4px;font-size:12px;opacity:.7}#hint .hint-quiet em{font-style:normal;font-weight:600;opacity:1}