/* Standalone Diagram Canvas & Card System */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans, 'Jost', sans-serif);
  background: transparent;
  color: var(--brand-navy, #0A1128);
  -webkit-font-smoothing: antialiased;
}

[data-theme="dark"] body,
body[data-theme="dark"] {
  background: var(--grn-navy, #081324);
  color: #FFFFFF;
}

.canvas {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  background: var(--brand-white, #ffffff);
  border-radius: 12px;
}

[data-theme="dark"] .canvas,
.canvas[data-theme="dark"] {
  background: var(--grn-navy, #081324);
  color: #FFFFFF;
}

.canvas[data-size="diagram"] {
  max-width: 640px;
  min-height: 0;
  padding: 18px 20px;
}

.canvas[data-size="scene"] {
  max-width: 720px;
  min-height: 0;
  padding: 18px 20px;
}

.canvas__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.canvas__edge {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--grn-green, #62CE00) 0%, var(--brand-emerald, #10B981) 40%, transparent 100%);
}