/* Ops+AI Labs — brand tokens (shared across direction explorations) */
:root {
  /* Core palette — pink/magenta on deep navy, per brand */
  --bg-0: #07061B;
  --bg-1: #0C0A26;
  --bg-2: #15123A;
  --bg-3: #1E1A4F;

  --ink-0: #FFFFFF;
  --ink-1: #E8E6FF;
  --ink-2: #9C97C7;
  --ink-3: #5E5A85;
  --ink-4: #38355C;

  --pink: #FF2D8F;
  --pink-soft: #FF6BB0;
  --pink-deep: #C91F73;
  --pink-glow: rgba(255, 45, 143, 0.45);
  --pink-faint: rgba(255, 45, 143, 0.08);

  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --glass: rgba(255, 255, 255, 0.04);
  --glass-strong: rgba(255, 255, 255, 0.08);
}

@font-face { font-display: swap; }

html, body { margin: 0; padding: 0; background: var(--bg-0); color: var(--ink-0); }
*, *::before, *::after { box-sizing: border-box; }

/* Logo mark — 4-circle bloom (replicates the pasted screenshot) */
.opsai-mark { display: inline-grid; grid-template-columns: repeat(3, 8px); grid-template-rows: repeat(3, 8px); gap: 3px; }
.opsai-mark span { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 12px var(--pink-glow); }
.opsai-mark span:nth-child(2), .opsai-mark span:nth-child(4), .opsai-mark span:nth-child(6), .opsai-mark span:nth-child(8) { opacity: 1; }
.opsai-mark span:nth-child(1), .opsai-mark span:nth-child(3), .opsai-mark span:nth-child(5), .opsai-mark span:nth-child(7), .opsai-mark span:nth-child(9) { opacity: 0; }

/* helpers */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }