/* =====================================================================================================================
   atoms-board.css · the "Atoms" board drawing (atoms-board.js), in voltai.com's tokens (css/tokens.css)
   The drawing is all line: ink for the lines, the page's ground for the knockouts that let a near part hide a far
   one. It takes the page's light and dark from [data-theme] on <html>, with nothing redrawn.
   ===================================================================================================================== */
.atoms-board {
  --ab-ink: var(--text-primary, #EBEBEB);       /* every line */
  --ab-ground: var(--bg-primary, #000000);      /* the knockouts: the page's own background */
  --ab-accent: var(--ab-ink);                   /* the one thing (the processor): ink by default; give it a colour if the page has one for it */
  --ab-signal: var(--ab-ink);                   /* the signals that run along the lanes once it is at rest */
  --ab-glow: var(--ab-ink);                     /* the processor's light, once it powers on */
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2560 / 780;                     /* the photo's own, so nothing below it moves */
  color: var(--ab-ink);
}
[data-theme="light"] .atoms-board { --ab-glow: transparent; }   /* (paper doesn't glow) */
.atoms-board svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.atoms-board .ab-k { fill: var(--ab-ground); }
/* on a phone the slot is full-bleed, and taller: the exploded parts, seen from the higher camera atoms-board.js uses
   under 720 px, stand tall enough that 2.4:1 held the drawing to 88% of the width */
@media (max-width: 720px) { .atoms-board { aspect-ratio: 2.2 / 1; } }