.canvas-hud {
  position:absolute;left:16px;top:16px;z-index:34;display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  max-width:calc(100% - var(--sws-canvas-right-inset,0px) - 208px);
}
.canvas-control-group {
  display:flex;align-items:center;gap:2px;padding:4px;border:1px solid var(--sws-line);border-radius:var(--sws-radius-control);
  background:var(--sws-surface);box-shadow:0 8px 24px #0003;
}
.canvas-control-group button,.canvas-shortcuts header button {
  position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:36px;height:36px;padding:0 8px;border:0;
  border-radius:8px;background:transparent;color:var(--sws-text-soft);font:500 15px/1 var(--sws-font);cursor:pointer;
  box-shadow:inset 0 0 0 1px transparent;
  transition:background var(--sws-motion-fast),color var(--sws-motion-fast),box-shadow var(--sws-motion-fast);
}
.canvas-control-group button::after {
  content:"";position:absolute;bottom:3px;left:calc(50% - 7px);width:14px;height:2px;border-radius:2px;
  background:var(--sws-accent);opacity:0;transition:opacity var(--sws-motion-fast);
}
.canvas-control-group button:hover,.canvas-shortcuts header button:hover {background:var(--sws-surface-raised);color:var(--sws-text);box-shadow:inset 0 0 0 1px var(--sws-line-strong);}
.canvas-control-group button:hover::after {opacity:1;}
.canvas-control-group button:focus-visible,.canvas-shortcuts button:focus-visible {outline:2px solid var(--sws-focus);outline-offset:2px;}
.canvas-control-group button:disabled {color:var(--sws-text-muted);opacity:.45;cursor:not-allowed;background:transparent;}
.canvas-control-group button:disabled::after {display:none;}
.canvas-control-group strong {width:48px;text-align:center;color:var(--sws-text-soft);font-size:11px;font-weight:500;}
.canvas-control-group .canvas-snap-toggle {gap:6px;padding-inline:10px;font-size:11px;white-space:nowrap;}
.canvas-control-group .ui-icon {width:17px;height:17px;transition:transform var(--sws-motion-fast);pointer-events:none;}
.canvas-control-group button:hover .ui-icon {transform:translateY(-2px);}
.canvas-snap-toggle svg {width:16px;height:16px;}
.canvas-snap-toggle[aria-pressed="true"] {color:var(--sws-accent);background:var(--sws-accent-soft);}
#canvasShortcutsOpen[aria-expanded="true"] {color:var(--sws-accent);background:var(--sws-accent-soft);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sws-accent) 30%,transparent);}
.canvas.is-space-panning,.canvas.is-space-panning .node {cursor:grab;}
.canvas.is-space-panning.is-panning,.canvas.is-space-panning.is-panning .node {cursor:grabbing;}
.canvas:focus-visible {outline:2px solid var(--sws-focus);outline-offset:-3px;}
.canvas-shortcuts {
  position:fixed;inset:auto;left:var(--canvas-shortcuts-x,16px);top:var(--canvas-shortcuts-y,92px);
  width:min(300px,calc(100vw - 24px));max-height:min(520px,calc(100dvh - 140px));margin:0;padding:0;border:1px solid var(--sws-line-strong);
  border-radius:16px;background:var(--sws-surface-strong);color:var(--sws-text);box-shadow:0 16px 48px #0007;
  overflow:hidden;z-index:150;
}
.canvas-shortcuts:popover-open {display:flex;}
.canvas-shortcuts::backdrop {background:transparent;pointer-events:none;}
.canvas-shortcuts-card {display:flex;flex-direction:column;min-height:0;max-height:inherit;width:100%;padding:14px;}
.canvas-shortcuts header {display:flex;align-items:center;justify-content:space-between;flex:none;gap:12px;}
.canvas-shortcuts header span {color:var(--sws-text-muted);font-size:9px;letter-spacing:1.2px;}
.canvas-shortcuts h2 {margin:5px 0 0;font-size:15px;font-weight:550;letter-spacing:.2px;}
.canvas-shortcuts p {flex:none;color:var(--sws-text-soft);font-size:11px;line-height:1.6;margin:12px 0;}
.canvas-shortcut-list {margin:0;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--sws-line-strong) transparent;}
.canvas-shortcut-list>div {display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--sws-line);}
.canvas-shortcut-list dt {color:var(--sws-text-soft);font-size:11px;line-height:1.5;}
.canvas-shortcut-list dd {display:flex;flex-direction:column;align-items:flex-end;gap:3px;margin:0;flex:none;}
.canvas-shortcut-list kbd {display:inline-block;padding:4px 6px;border:1px solid var(--sws-line-strong);border-radius:5px;background:var(--sws-surface-raised);color:var(--sws-text);font:10px/1.3 ui-monospace,monospace;white-space:nowrap;}
.canvas-shortcuts .canvas-shortcuts-limit {margin:12px 0 0;color:var(--sws-text-muted);font-size:10px;}
@media(max-width:700px) {
  .canvas-hud {left:12px;top:12px;max-width:calc(100% - 24px);gap:6px;}
  .canvas-control-group button {min-width:28px;height:32px;padding-inline:6px;}
  .canvas-control-group strong {width:38px;}
  .canvas-control-group .canvas-snap-toggle {gap:4px;padding-inline:6px;font-size:10px;}
  .canvas-snap-toggle svg {width:14px;height:14px;}
  .canvas-shortcuts {max-height:min(440px,calc(100dvh - 160px));}
}
@media(prefers-reduced-motion:reduce) {.canvas-control-group button,.canvas-control-group button::after,.canvas-control-group .ui-icon {transition:none;}.canvas-control-group button:hover .ui-icon {transform:none;}}