.viewport {
  position: fixed;
  inset: var(--topbar-h) 0 0 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% -20%, rgba(255, 113, 91, .04), transparent 38%),
    var(--canvas);
  touch-action: none;
}

.viewport::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 100px rgba(0, 0, 0, .28);
}

.world { position: absolute; z-index: 2; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.grid { position: absolute; inset: -10000px; width: 20000px; height: 20000px; pointer-events: none; background-image: radial-gradient(circle, rgba(203, 210, 208, .18) .8px, transparent 1px); background-size: 22px 22px; }
.axes-layer, .groups-layer, .nodes-layer, .edges-layer { position: absolute; inset: 0; }
.edges-layer { width: 1px; height: 1px; pointer-events: none; overflow: visible; }

.edge { fill: none; stroke: #9fa9a5; stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: stroke; cursor: pointer; }
.edge-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
.edge.selected { stroke: var(--accent); stroke-width: 2.5; filter: drop-shadow(0 0 4px rgba(255, 113, 91, .45)); }
.edge.preview-edge { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 7 5; filter: drop-shadow(0 0 3px rgba(255, 113, 91, .45)); animation: connection-flow .55s linear infinite; }
.edge-label { fill: var(--ink); font-family: "Segoe UI Variable Display", Inter, sans-serif; font-size: 11px; font-weight: 620; paint-order: stroke; stroke: var(--canvas); stroke-width: 5px; stroke-linejoin: round; }
@keyframes connection-flow { to { stroke-dashoffset: -12; } }

.group-box { position: absolute; border: 1px dashed color-mix(in srgb, var(--group-color) 62%, white); background: color-mix(in srgb, var(--group-color) 5%, transparent); pointer-events: auto; }
.group-box.selected { border-style: solid; box-shadow: 0 0 0 1px var(--accent), inset 0 0 24px rgba(255, 113, 91, .04); }
.group-heading { position: absolute; left: 0; top: -23px; display: flex; align-items: center; gap: 6px; min-height: 20px; padding: 0 5px; border-left: 2px solid var(--group-color); color: color-mix(in srgb, var(--group-color) 48%, white); background: rgba(32, 38, 35, .88); font-size: 10px; font-weight: 760; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.group-dot { width: 5px; height: 5px; background: var(--group-color); }

.board-node {
  position: absolute;
  left: 0;
  top: 0;
  width: 260px;
  min-height: 120px;
  overflow: visible;
  border: 1px solid #505b56;
  background: #343c38;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .02);
  transform-origin: center;
  user-select: none;
  transition: border-color .12s ease, box-shadow .12s ease;
  contain: layout style;
}

.board-node::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: -1px;
  top: -1px;
  width: 20px;
  height: 2px;
  background: #8b2635;
}

.board-node:hover { border-color: #7b8782; }
.board-node:hover::before { background: var(--accent); }
.board-node.selected { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(255, 113, 91, .28), 0 15px 35px rgba(0, 0, 0, .52), 0 0 18px rgba(255, 113, 91, .1); }
.board-node.selected::before { width: 100%; background: var(--accent); }
.board-node.connection-target { border-color: #fff; box-shadow: 0 0 0 2px var(--accent), 0 15px 35px rgba(0, 0, 0, .52); }
.board-node.is-dragging { z-index: 3; will-change: transform; transition: none; backface-visibility: hidden; }
.board-node.is-dragging .node-text { pointer-events: none; }

.node-bar { height: 29px; display: flex; align-items: center; gap: 7px; padding: 0 8px; border-bottom: 1px solid #505b56; background: #2e3532; cursor: grab; }
.node-bar:active { cursor: grabbing; }
.node-kind { color: var(--accent); font-family: "SFMono-Regular", Consolas, monospace; font-size: 8px; font-weight: 760; letter-spacing: .09em; text-transform: uppercase; }
.node-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); font-size: 11px; font-weight: 660; letter-spacing: -.01em; }
.node-body { height: calc(100% - 29px); overflow: hidden; }
.node-image { display: block; width: 100%; height: 100%; object-fit: cover; background: #202623; }
.node-text { height: 100%; padding: 11px; color: #fffdfd; font-size: 12px; line-height: 1.48; white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; user-select: text; }
.node-markdown h1, .node-markdown h2, .node-markdown h3 { margin: 0 0 7px; color: #fffdfd; line-height: 1.18; letter-spacing: -.025em; }
.node-markdown h1 { font-size: 18px; }
.node-markdown h2 { font-size: 15px; }
.node-markdown h3 { font-size: 13px; }
.node-markdown p { margin: 0 0 7px; }
.node-markdown p:last-child { margin-bottom: 0; }
.node-markdown ul { margin: 4px 0 8px; padding-left: 17px; }
.node-markdown a { color: var(--accent); }
.node-markdown code { padding: 1px 3px; color: var(--accent); background: #252b28; font-family: "SFMono-Regular", Consolas, monospace; font-size: .9em; }
.node-tags { display: flex; flex-wrap: wrap; gap: 3px; padding: 0 10px 9px; }
.node-tags span { padding: 2px 5px; border: 1px solid #68736e; color: #cbd2d0; background: #3b4540; font-family: "SFMono-Regular", Consolas, monospace; font-size: 8px; text-transform: uppercase; }

.anchor { position: absolute; z-index: 4; width: 11px; height: 11px; padding: 0; border: 2px solid #2e3532; border-radius: 50%; background: var(--accent); opacity: 0; pointer-events: none; transform: translate(-50%, -50%); transition: width .1s ease, height .1s ease, box-shadow .1s ease; }
.connect-mode .anchor, .board-node.selected .anchor { opacity: 1; pointer-events: auto; }
.anchor[data-anchor="n"] { left: 50%; top: 0; }
.anchor[data-anchor="e"] { left: 100%; top: 50%; }
.anchor[data-anchor="s"] { left: 50%; top: 100%; }
.anchor[data-anchor="w"] { left: 0; top: 50%; }
.anchor:hover { width: 16px; height: 16px; box-shadow: 0 0 0 4px rgba(255, 113, 91, .2); }
.anchor.snap-target { width: 18px; height: 18px; opacity: 1; box-shadow: 0 0 0 6px rgba(255, 113, 91, .22); }

.image-transform-handle { position: absolute; z-index: 6; display: none; width: 12px; height: 12px; padding: 0; border: 2px solid #071016; background: #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, .6); }
.board-node.selected .image-transform-handle { display: block; }
.resize-handle { transform: translate(-50%, -50%); }
.resize-handle[data-resize="nw"] { left: 0; top: 0; cursor: nwse-resize; }
.resize-handle[data-resize="ne"] { left: 100%; top: 0; cursor: nesw-resize; }
.resize-handle[data-resize="se"] { left: 100%; top: 100%; cursor: nwse-resize; }
.resize-handle[data-resize="sw"] { left: 0; top: 100%; cursor: nesw-resize; }
.rotate-handle { left: 50%; top: -35px; border-radius: 50%; background: var(--accent); transform: translateX(-50%); cursor: grab; }
.rotate-handle::after { content: ""; position: absolute; left: 50%; top: 10px; width: 1px; height: 22px; background: var(--accent); transform: translateX(-50%); }
.rotate-handle:active { cursor: grabbing; }

.axis { position: absolute; color: var(--axis-color); pointer-events: auto; }
.axis.x { width: var(--axis-length); height: 68px; border-top: 1px solid currentColor; }
.axis.y { width: 145px; height: var(--axis-length); border-left: 1px solid currentColor; }
.axis-label { position: absolute; padding: 3px 6px; border: 1px solid currentColor; color: var(--ink); background: #2e3532; font-size: 9px; font-weight: 760; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.axis.x .axis-label { left: 0; top: -25px; }
.axis.y .axis-label { left: -1px; top: -27px; }
.axis-tick { position: absolute; display: flex; color: currentColor; font-family: "SFMono-Regular", Consolas, monospace; font-size: 9px; white-space: nowrap; }
.axis.x .axis-tick { top: -5px; flex-direction: column; align-items: center; transform: translateX(-50%); }
.axis.x .axis-tick::before { content: ""; width: 1px; height: 9px; background: currentColor; }
.axis.x .axis-tick span { margin-top: 5px; }
.axis.y .axis-tick { left: -5px; align-items: center; transform: translateY(-50%); }
.axis.y .axis-tick::before { content: ""; width: 9px; height: 1px; background: currentColor; }
.axis.y .axis-tick span { margin-left: 6px; }
.axis.selected { filter: drop-shadow(0 0 4px var(--accent)); }

.selection-box, .capture-box { position: absolute; z-index: 50; pointer-events: none; }
.selection-box { border: 1px solid var(--accent); background: rgba(255, 113, 91, .08); box-shadow: inset 0 0 18px rgba(255, 113, 91, .04); }
.capture-box { display: grid; place-items: center; border: 1px solid var(--accent); background: rgba(255, 113, 91, .05); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .6); }
.capture-box span { padding: 4px 6px; color: var(--accent-ink); background: var(--accent); font-size: 9px; font-weight: 760; letter-spacing: .04em; text-transform: uppercase; }
.hidden { display: none !important; }

.drop-hint { position: absolute; z-index: 60; inset: 9px; display: none; place-items: center; border: 1px dashed var(--accent); color: var(--accent); background: rgba(32, 38, 35, .92); font-size: 14px; font-weight: 680; letter-spacing: -.01em; pointer-events: none; }
.viewport.drag-over .drop-hint { display: grid; }