/* Layout adapted from WebGPU Fundamentals, BSD-3-Clause. See LICENSE.
   Copyright 2023, GfxFundamentals Contributors. */
:root {
  color-scheme: light;
  --background: #fff;
  --canvas: #e6e6e6;
  font-family: system-ui, -apple-system, sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #202020;
  --canvas: #4d4d4d;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; background: var(--canvas); }
[data-diagram] { position: relative; width: 100%; height: 100%; }
.diagram-stage { position: relative; width: 100%; height: 100%; background: var(--canvas); overflow: hidden; }
.viewport-grid { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.fill-container { width: 100%; height: 100%; }
.align-top-left { position: absolute; left: 0; top: 0; z-index: 2; }
.nearest-neighbor-like { position: absolute; image-rendering: pixelated; image-rendering: crisp-edges; }
svg { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; }
.vertex-handle { cursor: grab; touch-action: none; }
.vertex-handle:active { cursor: grabbing; }
.vertex-handle:focus-visible { outline: none; stroke: #2581e5; stroke-width: 3; }