.canvas-workbench {
  position: relative;
  display: block;
  height: calc(100vh - 60px);
  height: calc(100dvh - 60px);
  overflow: hidden;
  overscroll-behavior: contain;
}

.canvas-workbench.is-knife-mode,
.canvas-workbench.is-knife-mode * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M5 23 20.5 7.5 24 4l-1.8 4.8L8 25z' fill='%23f8fafc' stroke='%230f172a' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M4 24l5-1.4L6.4 20z' fill='%23ef4444' stroke='%230f172a' stroke-width='1'/%3E%3C/svg%3E") 6 22, crosshair !important;
}

.canvas-sidebar {
  position: absolute;
  left: 18px;
  top: 50%;
  z-index: 70;
  width: 54px;
  max-height: calc(100% - 36px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: translateY(-50%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(17, 19, 26, 0.86);
  box-shadow: 0 18px 48px rgba(0,0,0,0.38);
  backdrop-filter: blur(16px);
  padding: 7px;
}

.canvas-workbench.is-media-preview-open .canvas-sidebar {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.canvas-workbench:has(.canvas-media-preview-window) .canvas-sidebar {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.canvas-nav-btn {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(255,255,255,0.86);
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
}

.canvas-nav-btn:hover,
.canvas-nav-btn.active {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.canvas-nav-btn span {
  line-height: 1;
}

.canvas-sidebar-tools {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.canvas-stage-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  --grid-x: 0px;
  --grid-y: 0px;
  --grid-size: 20px;
  background: #0b0d12;
  cursor: grab;
  touch-action: none;
  overscroll-behavior: none;
}

.canvas-stage-wrap :is(
  .canvas-node-panel,
  .canvas-node-menu,
  .canvas-shortcuts-dialog,
  .canvas-media-preview-window
) {
  touch-action: pan-y;
  overscroll-behavior: contain;
}

.canvas-stage-wrap:active {
  cursor: grabbing;
}

.canvas-stage-wrap[data-background="dots"] {
  background-image: none;
}

.canvas-grid-layer {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.canvas-grid-layer circle {
  fill: rgba(255, 255, 255, 0.12);
}

.canvas-stage-wrap[data-background="dots"] .canvas-grid-layer {
  display: block;
}

.canvas-stage-wrap[data-background="lines"] {
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-position: var(--grid-x) var(--grid-y);
  background-size: var(--grid-size) var(--grid-size);
}

.canvas-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 5000px;
  height: 5000px;
  transform-origin: 0 0;
}

.canvas-edge-layer,
.canvas-node-layer,
.canvas-viewport-overlay-layer {
  position: absolute;
  inset: 0;
}

.canvas-viewport-overlay-layer {
  pointer-events: none;
}

.canvas-edge-layer {
  pointer-events: auto;
  overflow: visible;
}

.canvas-edge-line {
  pointer-events: none;
  stroke: rgba(255,255,255,0.34);
  stroke-width: 1.4;
  stroke-linecap: round;
  transition: stroke 0.16s ease, stroke-width 0.16s ease;
}

.canvas-edge-line.is-hovered {
  stroke: rgba(255,255,255,0.7);
  stroke-width: 1.6;
}

.canvas-edge-line.is-bundled {
  stroke-width: 1.2;
}

.canvas-edge-flow-glow,
.canvas-edge-flow-mid,
.canvas-edge-flow {
  pointer-events: none;
  stroke-linecap: round;
}

.canvas-edge-flow-glow {
  stroke-width: 6;
  opacity: 0.5;
  filter: blur(4px);
}

.canvas-edge-flow-mid {
  stroke-width: 2.6;
  opacity: 0.5;
}

.canvas-edge-flow {
  stroke-width: 1.5;
  opacity: 0.75;
  filter: drop-shadow(0 0 2px rgba(255,255,255,0.45));
}

.canvas-edge-flow-glow.is-hovered {
  stroke-width: 7;
}

.canvas-edge-flow-mid.is-hovered {
  stroke-width: 3;
  opacity: 0.85;
}

.canvas-edge-flow.is-hovered {
  stroke-width: 1.8;
}

.canvas-edge-flow-glow.is-bundled {
  stroke-width: 5;
}

.canvas-edge-flow-mid.is-bundled {
  stroke-width: 2.2;
}

.canvas-edge-flow.is-bundled {
  stroke-width: 1.3;
}

.canvas-edge-hit {
  stroke: transparent;
  stroke-width: 8;
  pointer-events: stroke;
  cursor: pointer;
}

.canvas-edge-preview {
  stroke: rgba(255,255,255,0.6);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 6 6;
  pointer-events: none;
}