1:root {
  2  /* Dark mode colors - charmtone dark palette */
  3  --bg: #201f26;
  4  --bg-secondary: #2d2c35;
  5  --text: #fffaf1;
  6  --text-muted: #858392;
  7
  8  /* Charmtone colors (global - same in both light and dark modes) */
  9  --charple: #6b50ff;
 10  --cherry: #ff388b;
 11  --julep: #00ffb2;
 12  --urchin: #c337e0;
 13  --butter: #fffaf1;
 14  --squid: #858392;
 15  --pepper: #201f26;
 16  --iron: #4d4c57;
 17  --tuna: #ff6daa;
 18  --uni: #ff937d;
 19  --coral: #ff577d;
 20  --violet: #c259ff;
 21  --malibu: #00a4ff;
 22  --hazy: #8b75ff;
 23}
 24
 25/* Light mode colors - charmtone light palette */
 26@media (prefers-color-scheme: light) {
 27  :root {
 28    --bg: #f0f0f0;
 29    --bg-secondary: #fbfbfb;
 30    --text: #201f26;
 31    --text-muted: #4d4c57;
 32  }
 33}
 34
 35* {
 36  margin: 0;
 37  padding: 0;
 38  box-sizing: border-box;
 39}
 40
 41body {
 42  font-family:
 43    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
 44    sans-serif;
 45  background: var(--bg);
 46  color: var(--text);
 47  line-height: 1.6;
 48  padding: 2rem 1rem;
 49}
 50
 51.container {
 52  max-width: 1200px;
 53  margin: 0 auto;
 54}
 55
 56.header-wrapper {
 57  max-width: 1200px;
 58  margin: 0 auto 2rem;
 59}
 60
 61.header-wrapper a {
 62  display: block;
 63  text-decoration: none;
 64}
 65
 66.header-content {
 67  display: flex;
 68  align-items: center;
 69  width: 100%;
 70}
 71
 72.header-svg {
 73  flex-grow: 1;
 74  flex-shrink: 1;
 75  min-width: 0;
 76  overflow: hidden;
 77  height: 70px;
 78  display: flex;
 79  align-items: center;
 80}
 81
 82.header-svg svg {
 83  height: 70px;
 84  width: auto;
 85  min-width: 1300px;
 86  display: block;
 87  pointer-events: none;
 88}
 89
 90.heartbit-svg {
 91  flex-shrink: 0;
 92  width: 70px;
 93  flex-basis: 70px;
 94  margin-left: 1rem;
 95}
 96
 97.heartbit-svg svg {
 98  width: 100%;
 99  height: auto;
100  display: block;
101}
102
103.header-info {
104  margin-bottom: 2rem;
105  font-size: 0.875rem;
106  color: var(--hazy);
107  font-family: "JetBrains Mono", "SF Mono", Consolas, monospace;
108}
109
110.stats-grid {
111  display: flex;
112  flex-wrap: wrap;
113  gap: 1rem;
114  margin-bottom: 2rem;
115  width: 100%;
116}
117
118.stat-card {
119  background: var(--bg-secondary);
120  border-radius: 12px;
121  padding: 1.5rem;
122  flex: 1 1 150px;
123  max-width: calc((100% - 5rem) / 6);
124}
125
126@media (prefers-color-scheme: light) {
127  .stat-card {
128    background: var(--butter);
129  }
130}
131
132@media (max-width: 1024px) {
133  .stat-card {
134    max-width: calc((100% - 2rem) / 3);
135  }
136}
137
138@media (max-width: 600px) {
139  .stat-card {
140    max-width: calc((100% - 1rem) / 2);
141  }
142}
143
144.stat-card h3 {
145  font-size: 0.75rem;
146  color: var(--text-muted);
147  text-transform: uppercase;
148  letter-spacing: 0.05em;
149  margin-bottom: 0.5rem;
150}
151
152.stat-card .value {
153  font-size: 2rem;
154  font-weight: 700;
155  color: var(--butter);
156  white-space: nowrap;
157}
158
159@media (prefers-color-scheme: light) {
160  .stat-card .value {
161    color: var(--pepper);
162  }
163}
164
165.charts-grid {
166  display: flex;
167  flex-direction: column;
168  gap: 1.5rem;
169  margin-bottom: 2rem;
170  width: 100%;
171}
172
173.chart-card {
174  background: var(--bg-secondary);
175  border-radius: 12px;
176  padding: 1.5rem;
177  width: 100%;
178  box-sizing: border-box;
179}
180
181@media (prefers-color-scheme: light) {
182  .chart-card {
183    background: var(--butter);
184  }
185}
186
187.chart-card.full-width {
188  width: 100%;
189}
190
191.chart-row {
192  display: flex;
193  flex-wrap: wrap;
194  gap: 1.5rem;
195  width: 100%;
196}
197
198.chart-row .chart-card {
199  flex: 1 1 300px;
200  max-width: calc((100% - 1.5rem) / 2);
201}
202
203.chart-card h2 {
204  font-size: 1.25rem;
205  margin-bottom: 1rem;
206  color: var(--text);
207}
208
209.chart-container {
210  position: relative;
211  height: 300px;
212}
213
214.chart-container.tall {
215  height: 400px;
216}
217
218table {
219  width: 100%;
220  border-collapse: collapse;
221  margin-top: 1rem;
222}
223
224th,
225td {
226  text-align: left;
227  padding: 0.75rem;
228  border-bottom: 1px solid var(--border);
229}
230
231th {
232  color: var(--text-muted);
233  font-weight: 500;
234  font-size: 0.875rem;
235}
236
237td {
238  font-family: "JetBrains Mono", "SF Mono", Consolas, monospace;
239}
240
241.model-tag {
242  background: var(--bg);
243  padding: 0.25rem 0.5rem;
244  border-radius: 4px;
245  font-size: 0.875rem;
246}
247
248.footer-container {
249  max-width: 1200px;
250  margin: 2rem auto 0;
251}
252
253.footer-container svg {
254  width: 100%;
255  height: auto;
256  display: block;
257}
258
259/* Override charm brand colors in footer */
260.footer-container .st2 {
261  fill: #fffaf1 !important;
262}
263
264@media (prefers-color-scheme: light) {
265
266  /* Override charm brand colors in footer */
267  .footer-container .st2 {
268    fill: #644ced !important;
269  }
270}