*{box-sizing:border-box}html,body,main,#designer{height:100%;margin:0;overflow:hidden}body{font:13px Inter,Segoe UI,sans-serif;color:var(--text);background:var(--page)}.shell{display:grid;grid-template-rows:58px 1fr;height:100%}.toolbar{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--surface);border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;height:40px;margin-right:16px}.brand img{display:block;width:176px;height:auto;max-height:40px;object-fit:contain}.spacer{flex:1}.btn{border:1px solid var(--border);border-radius:6px;background:var(--surface-raised);color:var(--text);padding:7px 10px;cursor:pointer}.btn:hover{background:var(--surface-hover)}.primary{background:var(--accent);border-color:var(--border-strong)}.layout{display:grid;grid-template-columns:240px 1fr 280px;min-height:0}.panel{background:var(--surface);border-right:1px solid var(--border);overflow:auto;padding:12px}.right{border-left:1px solid var(--border);border-right:0}.panel h3{font-size:11px;letter-spacing:.1em;color:var(--text-muted);margin:16px 0 8px}.search,input,textarea{width:100%;background:var(--page);border:1px solid var(--border);color:var(--text);border-radius:5px;padding:8px}.resource{display:flex;width:100%;gap:8px;align-items:center;padding:7px;border:0;border-radius:5px;background:transparent;color:var(--text);cursor:grab;text-align:left}.resource:hover{background:var(--surface-hover)}.resource-icon{width:24px;height:24px;padding:3px;object-fit:contain;flex:0 0 24px;background:linear-gradient(145deg,#fff,#cbd8e8);border:1px solid var(--focus);border-radius:5px}.resource small{display:block;color:var(--text-muted)}.canvas-wrap{position:relative;overflow:hidden;background-color:var(--page);background-image:radial-gradient(var(--surface-hover) 1px,transparent 1px);background-size:20px 20px}.world{position:absolute;transform-origin:0 0;width:6000px;height:4000px}.node{position:absolute;min-width:130px;min-height:65px;background:var(--surface-raised);border:1px solid var(--border-strong);border-radius:8px;padding:8px;box-shadow:0 3px 10px #0005;cursor:move;user-select:none}.node.selected{outline:2px solid var(--focus)}.node .icon{display:grid;place-items:center;float:left;width:28px;height:28px;margin:0 8px 6px 0;padding:3px;background:linear-gradient(145deg,#fff,#cbd8e8);border:1px solid var(--focus);border-radius:6px}.node .icon img{width:100%;height:100%;object-fit:contain}.node small{display:block;color:var(--text-muted);margin-top:3px}.node-meta{display:block;clear:both;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary);font-size:11px;font-style:normal;margin-top:6px}.node .resize{position:absolute;right:2px;bottom:2px;width:10px;height:10px;border-right:2px solid var(--focus);border-bottom:2px solid var(--focus);cursor:nwse-resize}.container-node{background:var(--surface-glass);border:2px dashed var(--border-strong);border-radius:10px;color:var(--text)}.connections{position:absolute;inset:0;pointer-events:none}.prop label{font-size:11px;color:var(--text-muted);display:block;margin-top:10px}.chat{border-top:1px solid var(--border);margin-top:20px;padding-top:10px}.messages{height:170px;overflow:auto;margin:8px 0}.message{padding:5px 0;border-bottom:1px solid var(--border)}.status{color:var(--text-muted);font-size:12px}.outline{border-top:1px solid var(--border);margin-top:16px;padding-top:2px}.toast{position:fixed;bottom:15px;left:50%;transform:translateX(-50%);background:var(--surface-hover);padding:10px 15px;border-radius:6px;z-index:20}.cursor{position:absolute;color:var(--on-accent);font-size:11px;pointer-events:none}.hidden{display:none}
/* Native scrolling, styled to match the designer without replacing wheel/touch behavior. */
.resource-help, .containment-help { color:var(--resource-help-color); font-size:11px; line-height:1.5; }
.containment-help { margin:6px 0 10px; overflow-wrap:anywhere; }
.containment-help summary { cursor:pointer; color:var(--text-secondary); }
.containment-help p { margin:5px 0; }
* {
  scrollbar-width:thin;
  scrollbar-color:var(--scroll-thumb) transparent;
}
*:hover {
  scrollbar-color:var(--scroll-thumb-hover) transparent;
}
.panel, .tree, .messages, .connection-list, .connect-targets, .projects-popover, textarea {
  scrollbar-gutter:stable;
}
.panel, .tree, .messages, .connection-list, .connect-targets, .projects-popover {
  overscroll-behavior:contain;
}
/* Use the richer native scrollbar states on Chromium/WebKit. */
@supports selector(::-webkit-scrollbar) {
  *, *:hover { scrollbar-width:auto; scrollbar-color:auto; }
  *::-webkit-scrollbar { width:10px; height:10px; }
  *::-webkit-scrollbar-track { background:transparent; }
  *::-webkit-scrollbar-thumb {
    min-height:36px;
    border:3px solid transparent;
    border-radius:999px;
    background:var(--scroll-thumb);
    background-clip:padding-box;
  }
  *::-webkit-scrollbar-thumb:hover {
    border-width:2px;
    background-color:var(--scroll-thumb-hover);
  }
  *::-webkit-scrollbar-thumb:active { background-color:var(--scroll-thumb-active); }
  *::-webkit-scrollbar-corner { background:transparent; }
  *::-webkit-scrollbar-button { display:none; width:0; height:0; }
}
/* Respect Windows high-contrast settings rather than forcing low-contrast colors. */
@media (forced-colors: active) {
  *, *:hover { scrollbar-width:auto; scrollbar-color:auto; }
  *::-webkit-scrollbar-thumb { background-color:ButtonText; }
  *::-webkit-scrollbar-thumb:hover, *::-webkit-scrollbar-thumb:active { background-color:Highlight; }
  *::-webkit-scrollbar-track { background-color:Canvas; }
}