1
@import 'tailwindcss';
2
@import '@fontsource/ibm-plex-sans/400.css';
3
@import '@fontsource/ibm-plex-sans/500.css';
4
@import '@fontsource/ibm-plex-mono/400.css';
5
 
6
@theme {
7
  --font-sans: 'IBM Plex Sans', 'Segoe UI', sans-serif;
8
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
9
  --color-paper: oklch(96.4% 0.009 100);
10
  --color-ink: oklch(28% 0.025 156);
11
  --color-ink-hover: oklch(39% 0.045 155);
12
  --color-muted: oklch(49% 0.018 154);
13
  --color-line: oklch(83% 0.014 133);
14
  --color-panel: oklch(94.2% 0.012 112);
15
  --color-surface: oklch(97.5% 0.008 106);
16
  --color-leaf: oklch(98.5% 0.006 106);
17
  --color-core: oklch(91.5% 0.018 133);
18
  --color-audio: oklch(50% 0.112 246);
19
  --color-spectrum: oklch(49% 0.085 168);
20
  --color-robot: oklch(51% 0.119 44);
21
  --color-error: oklch(46% 0.15 30);
22
  --color-cloud: oklch(95% 0.033 76);
23
  --color-cloud-hover: oklch(92.5% 0.056 76);
24
  --color-cloud-line: oklch(77% 0.06 66);
25
  --color-cloud-pale: oklch(97% 0.018 86);
26
  --color-cloud-ink: oklch(62% 0.156 51);
27
  --color-cloud-dark: oklch(45% 0.082 52);
28
}
29
 
30
@layer base {
31
  body {
32
    @apply min-w-80 bg-paper font-sans text-ink antialiased;
33
  }
34
  button {
35
    @apply cursor-pointer disabled:cursor-not-allowed disabled:opacity-45 aria-disabled:cursor-not-allowed aria-disabled:opacity-45;
36
  }
37
  button,
38
  a,
39
  input {
40
    @apply focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-audio;
41
  }
42
  button svg {
43
    @apply size-[18px] shrink-0;
44
  }
45
}
46
 
47
/* SVG board markings and signal transport animation are drawing primitives. */
48
.pcb-brand {
49
  font: 10px var(--font-sans);
50
  fill: #334a3c;
51
  letter-spacing: 1px;
52
}
53
.pcb-chip {
54
  font: 500 17px var(--font-sans);
55
  fill: #2b4234;
56
}
57
.pcb-model {
58
  font: 7px var(--font-mono);
59
  fill: #506557;
60
}
61
.pcb-label {
62
  font: 7px var(--font-mono);
63
  fill: #c0d1b8;
64
}
65
.led-lit {
66
  filter: drop-shadow(0 0 5px var(--led-color));
67
}
68
.wires {
69
  @apply pointer-events-none absolute inset-0 z-0 size-full overflow-visible;
70
}
71
.wire path {
72
  fill: none;
73
  stroke: currentColor;
74
  stroke-width: 1.25px;
75
}
76
.wire-audio {
77
  color: var(--color-audio);
78
}
79
.wire-spectrum {
80
  color: var(--color-spectrum);
81
}
82
.wire-robot {
83
  color: var(--color-robot);
84
}
85
.wire-wifi {
86
  color: var(--color-muted);
87
}
88
.wire-track {
89
  opacity: 0.4;
90
}
91
.wire-dim {
92
  opacity: 0.22;
93
}
94
.wire .wire-flow {
95
  stroke-dasharray: 5 22;
96
  stroke-width: 2px;
97
  animation: signal-travel 2s linear infinite;
98
}
99
.wire .wire-return {
100
  animation-direction: reverse;
101
  stroke-dasharray: 7 12;
102
}
103
@keyframes signal-travel {
104
  to {
105
    stroke-dashoffset: -108;
106
  }
107
}
108
@media (prefers-reduced-motion: reduce) {
109
  *,
110
  *::before,
111
  *::after {
112
    animation: none !important;
113
    transition: none !important;
114
    scroll-behavior: auto !important;
115
  }
116
}