:root{--buncss-light:initial;--buncss-dark: ;color-scheme:light;font-synthesis:none;--color-canvas:#f7f9fc;--color-panel:#fff;--color-panel-muted:#f1f5f9;--color-border:#748299;--color-border-strong:#526078;--color-text:#172033;--color-text-muted:#526078;--color-primary:#1d4ed8;--color-primary-strong:#1e40af;--color-primary-soft:#dbeafe;--color-focus:#b45309;--shadow-panel:0 8px 28px #0f172a1a;--radius-sm:6px;--radius-md:10px;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{overflow:hidden;width:100%;min-width:0;height:100%;margin:0}body{color:var(--color-text);background:var(--color-canvas);font-size:14px;line-height:1.45}button,textarea{font:inherit}button,a,textarea,[tabindex]{outline:none}:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}button{border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);background:var(--color-panel);cursor:pointer;min-height:34px;padding:6px 11px;font-weight:650}button:hover{border-color:var(--color-border-strong);background:var(--color-panel-muted)}button[aria-disabled=true]{color:#59657a;background:#f8fafc}h1,h2,h3,p{margin-block-start:0}h1,h2{margin-block-end:0;font-size:1rem}.visually-hidden{position:absolute;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0}.eyebrow{color:var(--color-text-muted);letter-spacing:.09em;text-transform:uppercase;margin-block-end:2px;font-size:.68rem;font-weight:800}.app-shell{display:grid;grid-template:"header header header header" auto "pool canvas properties study" minmax(0,1fr)"status status status status" auto/218px minmax(320px,1fr)232px minmax(260px,300px);width:100vw;min-width:0;height:100vh}.app-header{z-index:10;grid-area:header;display:flex;border-bottom:1px solid var(--color-border);background:var(--color-panel);align-items: center;gap:18px;min-width:0;padding:8px 12px;box-shadow:0 1px 8px #0f172a0f}.brand{display:inline-flex;color:var(--color-text);text-decoration:none;flex:none;align-items: center;gap:8px;font-weight:800}.unsaved-marker{color:#854d0e;background:#fef3c7;border:1px solid #f59e0b;border-radius:999px;flex:none;padding:3px 8px;font-size:.72rem;font-weight:800}.header-actions{display:flex;flex:auto;align-items: center;gap:6px;min-width:0}.action-divider{background:var(--color-border);width:1px;height:24px;margin-inline-start:2px;margin-inline-end:2px}.button-secondary{color:var(--color-primary-strong);background:#eff6ff;border-color:#2563eb;margin-left:auto}.button-icon{display:inline-grid;flex:none;place-items: center;width:34px;padding:0;font-size:1rem}.object-pool,.properties-panel,.study-panel{overflow:hidden;background:var(--color-panel);min-width:0;min-height:0}.object-pool{grid-area:pool;border-right:1px solid var(--color-border)}.properties-panel{grid-area:properties;overflow-y:auto;border-left:1px solid var(--color-border)}.study-panel{grid-area:study;border-left:1px solid var(--color-border)}.study-panel[hidden]{display:none}.app-shell:has(.study-panel[hidden]){grid-template-columns:218px minmax(320px,1fr)232px 0}.panel-heading{display:flex;border-bottom:1px solid var(--color-border);justify-content:space-between;align-items: center;gap:10px;padding:14px}.count-badge{color:var(--color-primary-strong);background:var(--color-primary-soft);text-align:center;border-radius:999px;min-width:25px;padding:3px 7px;font-size:.72rem;font-weight:800}.component-list{display:flex;overflow-y:auto;flex-direction:column;gap:5px;height:calc(100% - 101px);padding:8px}.component-pool-guidance{border-bottom:1px solid var(--color-border);color:var(--color-text-muted);background:var(--color-panel-muted);text-align:center;margin:0;padding:7px 10px;font-size:.72rem;font-weight:700}.component-button{display:flex;text-align:left;flex:none;align-items: center;gap:9px;width:100%;min-width:0}.component-button>span:nth-child(2){min-width:0}.component-drag-affordance{color:var(--color-text-muted);margin-left:auto;font-size:1rem;line-height:1}.component-icon{display:inline-grid;color:var(--color-primary-strong);background:#eff6ff;border:1px solid #93c5fd;border-radius:5px;flex:0 0 28px;place-items: center;width:28px;height:28px}.component-icon-svg{display:block;overflow:visible;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px}.component-button:hover .component-icon{border-color:var(--color-primary);background:#dbeafe}.component-button:focus-visible .component-icon{border-color:var(--color-primary);background:#dbeafe}.component-button[data-dragging=true]{border-style:dashed;border-color:var(--color-primary);opacity:.72;background:#dbeafe}.canvas-workspace{grid-area:canvas;overflow:hidden;min-width:0;min-height:0}.canvas-surface{position:relative;isolation:isolate;--canvas-occlusion-inline-end:0px;overflow:hidden;background:var(--color-canvas);cursor:default;user-select:none;touch-action:none;width:100%;height:100%;min-height:260px}.canvas-surface:focus-visible{outline:3px solid var(--color-primary);outline-offset:-3px}.canvas-surface[data-component-drop-target=true]{outline:4px dashed var(--color-primary);outline-offset:-8px}.canvas-surface[data-component-drop-target=true]:before{position:absolute;z-index:5;color:#1e3a8a;content:"Drop to add component";pointer-events:none;background:#eff6ff;border:1px solid #2563eb;border-radius:999px;padding:6px 12px;font-size:.75rem;font-weight:800;top:14px;left:50%;transform:translate(-50%)}.canvas-surface[data-pan-available=true]{cursor:grab}.canvas-grid{position:absolute;z-index:0;pointer-events:none;opacity:.65;background-image:radial-gradient(circle,#a8b4c5 1px,#0000 1px);background-position:0 0;background-size:20px 20px;inset:0}.canvas-world{position:absolute;z-index:1;overflow:visible;transform-origin:0 0;width:0;height:0;top:0;left:0;transform:translate(0)scale(1)}.canvas-marquee{position:absolute;z-index:2;box-sizing:border-box;pointer-events:none;background:#3b82f62e;border:2px solid #1d4ed8;border-radius:3px;box-shadow:inset 0 0 0 1px #ffffffb3}.canvas-marquee[hidden]{display:none}.canvas-object{position:absolute;display:grid;grid-template-columns:62px minmax(0,1fr);overflow:hidden;border:2px solid var(--object-accent);color:var(--object-text);background:var(--object-tint);cursor:default;border-radius:12px;align-items:stretch;transition:box-shadow .12s,outline-color .12s,filter .12s;box-shadow:0 3px 10px #0f172a1f}.canvas-object:hover{outline:calc(2px*var(--viewport-inverse-zoom,1))solid #334155;outline-offset:calc(1px*var(--viewport-inverse-zoom,1));filter:brightness(.97);box-shadow:0 7px 17px #0f172a3d}.canvas-object[data-visual-state=selected]{z-index:1;outline:calc(3px*var(--viewport-inverse-zoom,1))solid #0f172a;outline-offset:calc(3px*var(--viewport-inverse-zoom,1));box-shadow:0 0 0 6px #ffffffe0,0 8px 20px #0f172a47}.canvas-object[data-visual-state=selected]{cursor:grab}.canvas-object[data-visual-state=moving]{z-index:1;cursor:grabbing;border-color:var(--object-accent);outline:calc(3px*var(--viewport-inverse-zoom,1))solid var(--object-accent);outline-offset:calc(3px*var(--viewport-inverse-zoom,1));box-shadow:none;transition:none}.canvas-object[data-visual-state=resizing]{z-index:1;outline:calc(3px*var(--viewport-inverse-zoom,1))solid #1d4ed8;outline-offset:calc(3px*var(--viewport-inverse-zoom,1));box-shadow:none;transition:none}.canvas-surface[data-move-group=true] .canvas-object[data-visual-state=moving]{filter:saturate(1.08)}.canvas-surface[data-move-active=true]{cursor:grabbing}.canvas-object[data-visual-state=selected]:hover{outline-color:#1d4ed8;filter:brightness(.94);box-shadow:0 0 0 6px #dbeafeeb,0 10px 24px #0f172a57}.canvas-object__icon{display:grid;border-right:1px solid color-mix(in srgb,var(--object-accent),transparent 55%);color:var(--object-accent);background:color-mix(in srgb,var(--object-accent),transparent 92%);place-items: center;min-width:0;padding:12px 8px}.canvas-object__svg{display:block;overflow:visible;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;width:min(42px,100%);min-width:24px;height:min(42px,100%);min-height:24px}.canvas-object__label{overflow:hidden;overflow-wrap:normal;text-align:center;white-space:pre;align-content: center;min-width:0;min-height:0;padding:12px 10px;font-size:14px;font-weight:750;line-height:1.25}.canvas-resize-overlay{position:absolute;z-index:3;box-sizing:border-box;border:calc(1px*var(--viewport-inverse-zoom,1))solid #1d4ed8;pointer-events:none}.canvas-resize-handle{--handle-hit:calc(20px*var(--viewport-inverse-zoom,1));--handle-grip:calc(9px*var(--viewport-inverse-zoom,1));position:absolute;width:var(--handle-hit);height:var(--handle-hit);pointer-events:none;transform:translate(-50%,-50%)}.canvas-resize-handle[data-interactive=true]{pointer-events:auto}.canvas-resize-handle:after{position:absolute;width:var(--handle-grip);height:var(--handle-grip);box-sizing:border-box;border:calc(2px*var(--viewport-inverse-zoom,1))solid #0f172a;border-radius:calc(2px*var(--viewport-inverse-zoom,1));content:"";background:#fff;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.canvas-resize-handle:hover:after,.canvas-resize-handle[data-active=true]:after{box-shadow:0 0 0 calc(2px*var(--viewport-inverse-zoom,1))#0f172a;background:#1d4ed8;border-color:#fff}.canvas-resize-handle[data-resize-handle=top]{cursor:ns-resize}.canvas-resize-handle[data-resize-handle=top-right]{cursor:nesw-resize}.canvas-resize-handle[data-resize-handle=right]{cursor:ew-resize}.canvas-resize-handle[data-resize-handle=bottom-right]{cursor:nwse-resize}.canvas-resize-handle[data-resize-handle=bottom]{cursor:ns-resize}.canvas-resize-handle[data-resize-handle=bottom-left]{cursor:nesw-resize}.canvas-resize-handle[data-resize-handle=left]{cursor:ew-resize}.canvas-resize-handle[data-resize-handle=top-left]{cursor:nwse-resize}.canvas-surface[data-resize-active=true]{cursor:default}.canvas-surface[data-resize-active=true][data-resize-handle=top],.canvas-surface[data-resize-active=true][data-resize-handle=bottom]{cursor:ns-resize}.canvas-surface[data-resize-active=true][data-resize-handle=left],.canvas-surface[data-resize-active=true][data-resize-handle=right]{cursor:ew-resize}.canvas-surface[data-resize-active=true][data-resize-handle=top-right],.canvas-surface[data-resize-active=true][data-resize-handle=bottom-left]{cursor:nesw-resize}.canvas-surface[data-resize-active=true][data-resize-handle=top-left],.canvas-surface[data-resize-active=true][data-resize-handle=bottom-right]{cursor:nwse-resize}@media (prefers-reduced-motion:reduce){.canvas-object{transition:none}}.canvas-object[data-component-type=database],.canvas-object[data-component-type=cache]{border-radius:22px/12px}.canvas-object[data-component-type=text-note]{grid-template-columns:52px minmax(0,1fr);border-style:dashed;border-radius:4px 16px 4px 4px}.canvas-object[data-component-type=text-note] .canvas-object__label{text-align:left;font-weight:650}.canvas-surface[data-interaction-kind=panning]{cursor:grabbing}.canvas-surface[data-pan-available=true]:not([data-interaction-kind=panning]):after,.canvas-surface[data-interaction-kind=panning]:after{position:absolute;z-index:4;right:calc(12px + var(--canvas-occlusion-inline-end));color:var(--color-primary-strong);pointer-events:none;background:#eff6ff;border:1px solid #93c5fd;border-radius:999px;padding:4px 8px;font-size:.72rem;font-weight:750;bottom:48px}.canvas-surface[data-pan-available=true]:not([data-interaction-kind=panning]):after{content:"Pan ready · drag"}.canvas-surface[data-interaction-kind=panning]:after{content:"Panning canvas"}.empty-state{position:absolute;top:50%;left:calc((100% - var(--canvas-occlusion-inline-end))/2);z-index:2;box-sizing:border-box;width:min(390px,calc(100% - var(--canvas-occlusion-inline-end) - 48px));border:1px solid var(--color-border);box-shadow:var(--shadow-panel);text-align:center;pointer-events:none;background:#fffffff0;border-radius:16px;padding:28px;transform:translate(-50%,-50%)}.empty-state img{margin-bottom:10px}.empty-state h2{margin-bottom:8px;font-size:1.35rem}.empty-state p:last-child{color:var(--color-text-muted);margin:0}.zoom-indicator{position:absolute;right:calc(12px + var(--canvas-occlusion-inline-end));z-index:3;border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-muted);background:var(--color-panel);text-align:center;pointer-events:none;width:58px;padding:5px 9px;font-size:.75rem;font-weight:750;bottom:12px}.neutral-state{border:1px dashed var(--color-border-strong);border-radius:var(--radius-md);color:var(--color-text-muted);text-align:center;margin:14px;padding:22px 14px}.inspector-selection{border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-panel-muted);margin:14px;padding:14px}.inspector-selection__type{margin-bottom:12px;font-size:1rem;font-weight:800}.inspector-selection dl,.inspector-selection dd{margin:0}.inspector-selection dl>div{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px}.inspector-selection dt{color:var(--color-text-muted);font-size:.76rem;font-weight:750}.inspector-selection dd{overflow-wrap:anywhere;font-weight:700}.neutral-state p{margin-bottom:6px}.neutral-state p:last-child{margin:0;font-size:.82rem}.neutral-icon{display:block;color:var(--color-primary);margin-bottom:8px;font-size:2rem}.study-fields{overflow-y:auto;height:calc(100% - 68px);padding:14px}.study-fields label{display:block;margin-bottom:6px;font-size:.78rem;font-weight:750}.study-fields textarea{display:block;resize:vertical;border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);color:var(--color-text);background:var(--color-panel);width:100%;min-height:90px;margin-bottom:15px;padding:9px}.field-note{color:var(--color-text-muted);font-size:.76rem}.status-bar{z-index:10;grid-area:status;display:flex;border-top:1px solid var(--color-border);color:var(--color-text-muted);background:var(--color-panel);justify-content:space-between;gap:16px;padding:4px 12px;font-size:.72rem}.status-bar p{margin:0}#app-status{display:flex;align-items: center;gap:6px;font-weight:650}.status-marker{background:#2563eb;border-radius:50%;width:7px;height:7px}#app-status[data-severity=success] .status-marker{background:0 0;border-bottom:2px solid #15803d;border-left:2px solid #15803d;border-radius:0;width:9px;height:5px;transform:rotate(-45deg)}#app-status[data-severity=warning] .status-marker{background:0 0;border-bottom:9px solid #a16207;border-left:5px solid #0000;border-right:5px solid #0000;border-radius:0;width:0;height:0}#app-status[data-severity=error]{color:#991b1b}#app-status[data-severity=error] .status-marker{background:#b91c1c;border-radius:1px}.status-dismiss{min-height:22px;padding:1px 6px;font-size:.68rem}#app-status[data-empty] .status-marker,#app-status[data-empty] .status-dismiss{display:none}.help-dialog{overflow:auto;border:1px solid var(--color-border);color:var(--color-text);background:var(--color-panel);border-radius:14px;width:min(620px,100vw - 36px);max-height:calc(100vh - 36px);padding:0;box-shadow:0 24px 80px #0f172a47}.help-dialog::backdrop{background:#0f172a7a}.dialog-heading{display:flex;border-bottom:1px solid var(--color-border);justify-content:space-between;align-items: center;padding:18px 20px}.help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;padding:20px}.help-grid h3{margin-bottom:10px;font-size:.88rem}.help-grid dl,.help-grid dd{margin:0}.help-grid dl>div{display:flex;border-bottom:1px solid #e2e8f0;justify-content:space-between;gap:12px;padding:8px 0}.help-grid dt{font-weight:750}.help-grid dd{color:var(--color-text-muted);text-align:right}kbd{border:1px solid var(--color-border);background:var(--color-panel-muted);border-bottom-width:2px;border-radius:4px;padding:2px 5px;font-family:inherit;font-size:.72rem}@media (max-width:1320px){.app-shell{grid-template:"header header header" auto "pool canvas properties" minmax(0,1fr)"status status status" auto/206px minmax(300px,1fr)220px}.study-panel{position:fixed;z-index:20;width:min(320px,36vw);top:61px;bottom:27px;right:0;box-shadow:-12px 0 36px #0f172a29}.app-shell:not(:has(.study-panel[hidden])) .canvas-surface{--canvas-occlusion-inline-end:max(0px,calc(min(320px,36vw) - 220px))}.app-shell:has(.study-panel[hidden]){grid-template-columns:206px minmax(300px,1fr)220px}}@media (max-width:1080px){.app-header{align-items: flex-start}.brand span{display:none}.header-actions{flex-wrap:wrap}.button-secondary{margin-left:0}.app-shell{grid-template:"header header" auto "pool canvas" minmax(0,1fr)"status status" auto/194px minmax(300px,1fr)}.properties-panel{position:fixed;z-index:15;border:1px solid var(--color-border);box-shadow:var(--shadow-panel);border-right:0;width:220px;max-height:min(280px,40vh);top:108px;right:0}.study-panel{width:min(320px,42vw);top:108px;bottom:27px}.app-shell:not(:has(.study-panel[hidden])) .canvas-surface{--canvas-occlusion-inline-end:max(220px,min(320px,42vw))}.app-shell:has(.study-panel[hidden]) .canvas-surface{--canvas-occlusion-inline-end:220px}.app-shell:has(.study-panel[hidden]){grid-template-columns:194px minmax(300px,1fr)}}@media (max-height:620px){.panel-heading{padding-block-start:9px;padding-block-end:9px}.component-list{height:calc(100% - 91px)}.study-fields{height:calc(100% - 58px)}}@media (max-width:800px){.properties-panel,.study-panel{top:150px}}