:root{--bg:#fbfbfa;--panel:#fff;--text:#1d1d1f;--muted:#6e6e73;--border:#dcdcdf;--check-a:#fff;--check-b:#e2e2e6;--accent:#2f6fdb;--accent-soft:#2f6fdb29;--hover-soft:#2f6fdb14;--danger:#c4372b;--shadow:0 6px 24px #00000014,0 1px 3px #00000014;--bar-shadow:0 2px 10px #00000014,0 1px 2px #0000000f;--below-toolbar:64px;--above-toolbar:70px;--tooltip-bg:#1d1d1f;--tooltip-fg:#fff;--buncss-light:initial;--buncss-dark: ;color-scheme:light dark;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:14px;line-height:1.4}@media (prefers-color-scheme:dark){:root{--buncss-light: ;--buncss-dark:initial;--bg:#18181a;--panel:#232326;--text:#ececef;--muted:#9a9aa2;--border:#3a3a3f;--accent:#6b9cff;--accent-soft:#6b9cff38;--hover-soft:#6b9cff1a;--danger:#ff6b5e;--shadow:0 6px 24px #0006;--bar-shadow:0 2px 12px #00000059;--tooltip-bg:#ececef;--tooltip-fg:#18181a}}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);overflow:hidden}button,select,input{font:inherit;color:inherit}button,select{background:var(--panel);border:1px solid var(--border);cursor:pointer;border-radius:6px;min-height:28px;padding:3px 9px}button:hover:not(:disabled),select:hover{border-color:var(--muted)}button:disabled{opacity:.4;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:#fff}button.danger{color:var(--danger)}:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.muted{color:var(--muted)}.app,.workspace{position:relative;height:100%}.toolbar{position:absolute;z-index:3;display:flex;background:var(--panel);border:1px solid var(--border);box-shadow:var(--bar-shadow);border-radius:10px;align-items: center;gap:2px;padding:4px;top:12px;right:12px}.toolbar .icon-button{background:0 0;border-color:#0000;width:32px;height:32px;padding:0}.toolbar .icon-button:hover:not(:disabled){background:var(--hover-soft);border-color:#0000}.toolbar .icon-button[aria-expanded=true]{background:var(--accent-soft);color:var(--accent)}.toolbar .divider{background:var(--border);width:1px;height:20px;margin:0 3px}.tool-icon{stroke-width:1.8}.title{position:absolute;z-index:3;display:flex;color:var(--text);background:var(--panel);border:1px solid var(--border);box-shadow:var(--bar-shadow);pointer-events:none;user-select:none;border-radius:10px;flex-direction:column;align-items: flex-start;gap:4px;margin:0;padding:5px 12px;top:12px;left:12px}@media (hover:hover){.toolbar [data-tooltip]{position:relative}.toolbar [data-tooltip]:after{content:attr(data-tooltip);position:absolute;z-index:4;background:var(--tooltip-bg);color:var(--tooltip-fg);white-space:nowrap;pointer-events:none;opacity:0;border-radius:6px;padding:3px 8px;transition:opacity .12s;font-size:12px;font-weight:500;top:calc(100% + 8px);left:50%;transform:translate(-50%)}.toolbar [data-tooltip]:hover:after{opacity:1;transition-delay:.25s}.toolbar [data-tooltip]:focus-visible:after{opacity:1;transition-delay:.25s}.toolbar:has([aria-expanded=true]) [data-tooltip]:after{display:none}}.popover-anchor{position:relative}.popover{position:absolute;z-index:3;background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:10px;padding:12px 14px;top:calc(100% + 8px);right:0}.help{width:max-content;max-width:min(520px,100vw - 28px)}.help table{border-collapse:collapse}.help th{text-align:left;white-space:nowrap;vertical-align:top;padding:3px 16px 3px 0;font-weight:500}.help td{color:var(--muted);padding:3px 0}.help p{margin:10px 0 0}.canvas{position:absolute;display:block;touch-action:none;user-select:none;-webkit-user-select:none;width:100%;height:100%;inset:0}.grid-line{fill:none;stroke-width:1;stroke-opacity:.14}.cell-hover rect{fill:var(--hover-soft)}.cell-armed rect{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1;stroke-dasharray:4 3}.cell-armed path{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round}.point-marker{fill:none;stroke-width:1;stroke-dasharray:2 2;stroke-opacity:.5}.hl-selected rect,.hl-selected circle,rect.hl-selected,circle.hl-selected{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1}rect.hl-hover,circle.hl-hover{fill:var(--hover-soft);stroke:none}.hl-band{fill:none;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}.hl-selected .hl-band{stroke:var(--accent-soft)}.hl-hover .hl-band{stroke:var(--hover-soft)}.hl-label{stroke:none}.hl-selected .hl-label{fill:var(--accent-soft)}.hl-hover .hl-label{fill:var(--hover-soft)}.hl-guide{fill:none;stroke:var(--accent);stroke-width:1;stroke-dasharray:3 4;opacity:.6}.hl-hover .hl-guide{opacity:.3}.connect-preview{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:5 4}.marquee{fill:var(--hover-soft);stroke:var(--accent);stroke-width:1}.empty-hint{position:absolute;top:var(--below-toolbar);text-align:center;color:var(--muted);background:var(--panel);border:1px solid var(--border);pointer-events:none;border-radius:999px;width:max-content;max-width:min(520px,100% - 24px);margin:0;padding:6px 12px;left:12px}.panel{display:flex;flex-direction:column;gap:10px}.inspector{position:absolute;top:var(--below-toolbar);max-height:calc(100% - var(--below-toolbar) - 12px);overflow-y:auto;background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:10px;width:300px;padding:12px 14px;right:12px}.inspector header{font-weight:600}.panel .field{display:flex;flex-direction:column;gap:4px}.panel .field>span{color:var(--muted);font-size:12px}.panel .field .field-hint{opacity:.75}.panel .field input,.panel .field textarea{border:1px solid var(--border);background:var(--bg);border-radius:6px;padding:6px 8px;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:13px}.panel .field textarea{display:block;resize:vertical;field-sizing:content;tab-size:2;width:100%;min-height:calc(3lh + 14px);max-height:calc(12lh + 14px);margin:0;line-height:1.45}.panel .field input.invalid,.panel .field textarea.invalid{border-color:var(--danger)}.panel .error,.panel .warning{color:var(--danger);margin:0;font-size:12px}.panel .row{display:flex;align-items: center;gap:8px}.panel .row-label{color:var(--muted);flex-shrink:0;width:72px;font-size:12px}.segmented{display:flex;border:1px solid var(--border);overflow:hidden;border-radius:6px;flex-wrap:wrap}.segmented button{background:0 0;border:none;border-radius:0;min-width:30px;padding:2px 7px}.segmented button+button{border-left:1px solid var(--border)}.segmented button.active{background:var(--accent-soft);color:var(--accent);font-weight:600}.slider{display:flex;flex:1;align-items: center;gap:8px}.slider input{flex:1;min-width:0}.slider output{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);width:40px}.switch{appearance:none;-webkit-appearance:none;position:relative;background:var(--border);cursor:pointer;border-radius:999px;flex-shrink:0;width:32px;height:18px;margin:0;transition:background .15s}.switch:before{content:"";position:absolute;background:#fff;border-radius:50%;width:14px;height:14px;transition:transform .15s;top:2px;left:2px;box-shadow:0 1px 2px #0000004d}.switch:checked{background:var(--accent)}.switch:checked:before{transform:translate(14px)}@media (prefers-reduced-motion:reduce){.switch,.switch:before{transition:none}}label.row{cursor:pointer}.panel .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:2px}.toasts{position:absolute;display:flex;pointer-events:none;flex-direction:column;align-items: center;gap:8px;width:max-content;max-width:calc(100vw - 32px);bottom:16px;left:50%;transform:translate(-50%)}.toast{background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:8px;padding:8px 14px}.toast.error{border-color:var(--danger)}.export-panel{width:340px;max-width:calc(100vw - 28px)}.export-panel .preview{display:grid;border:1px solid var(--border);overflow:hidden;border-radius:8px;place-items: center;height:160px;padding:10px}.export-panel .preview img{max-width:100%;max-height:100%}.export-panel .actions{align-items: center}.export-panel .size{font-variant-numeric:tabular-nums;margin-right:auto;font-size:12px}.checkerboard{background:repeating-conic-gradient(var(--check-a)0 25%,var(--check-b)0 50%)0 0/14px 14px}.paint{display:flex;flex:1;align-items: center;gap:8px;min-width:0}.swatch{position:relative;border:1px solid var(--border);overflow:hidden;cursor:pointer;background:linear-gradient(var(--swatch),var(--swatch)),repeating-conic-gradient(var(--check-a)0 25%,var(--check-b)0 50%)0 0/8px 8px;border-radius:6px;flex-shrink:0;width:28px;height:28px}.swatch input{position:absolute;opacity:0;cursor:pointer;border:0;width:100%;height:100%;padding:0;inset:0}.icon-button{display:inline-grid;place-items: center}.color-wheel{display:block;background:radial-gradient(circle closest-side,#fff,#fff0),conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:50%;width:18px;height:18px;box-shadow:inset 0 0 0 1px #00000026}.colors-panel,.layout-panel{width:320px;max-width:calc(100vw - 28px)}.notice{position:absolute;top:var(--below-toolbar);background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow);pointer-events:none;animation:notice 3.5s ease forwards;border-radius:8px;padding:8px 12px;right:12px}.notice kbd{font:inherit;font-weight:600}@keyframes notice{0%{opacity:0}4%,86%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.notice{animation:none}}.icon{display:block;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.icon .icon-box{fill:currentColor;fill-opacity:.25;stroke-width:1.2}.segmented button:has(>.icon){display:grid;place-items: center;padding:3px 6px}.direction-pad{display:grid;grid-template-columns:repeat(3,28px);grid-auto-rows:28px;gap:3px}.direction-pad button{display:grid;border-radius:5px;place-items: center;min-height:0;padding:0}.direction-pad button.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.direction-middle{border:1px dashed var(--border);border-radius:5px}@media (max-width:700px){.toolbar{inset:auto auto 16px 50%;transform:translate(-50%)}.toolbar .popover-anchor{position:static}.toolbar .popover{max-height:calc(100vh - var(--above-toolbar) - 24px);overflow-y:auto;max-width:calc(100vw - 24px);inset:auto auto calc(100% + 8px) 50%;transform:translate(-50%)}.toolbar [data-tooltip]:after{top:auto;bottom:calc(100% + 8px)}.notice{top:12px}.inspector{top:auto;bottom:var(--above-toolbar);max-height:min(45%,calc(100% - var(--above-toolbar) - var(--below-toolbar)));width:auto;left:12px;right:12px}.toasts{bottom:var(--above-toolbar)}}