1/* Theme roles from the reference dataviz palette; dark mode is its own
2 selected set of steps, not an automatic flip. */
3:root {
4 color-scheme: light;
5 --page: #f9f9f7;
6 --surface: #fcfcfb;
7 --ink: #0b0b0b;
8 --ink-2: #52514e;
9 --muted: #898781;
10 --grid: #e1e0d9;
11 --baseline: #c3c2b7;
12 --border: rgba(11, 11, 11, 0.1);
13 --series-1: #2a78d6;
14 --series-2: #eb6834;
15 --series-3: #1baf7a;
16 --series-4: #8a5cd6;
17}
18@media (prefers-color-scheme: dark) {
19 :root {
20 color-scheme: dark;
21 --page: #0d0d0d;
22 --surface: #1a1a19;
23 --ink: #ffffff;
24 --ink-2: #c3c2b7;
25 --muted: #898781;
26 --grid: #2c2c2a;
27 --baseline: #383835;
28 --border: rgba(255, 255, 255, 0.1);
29 --series-1: #3987e5;
30 --series-2: #d95926;
31 --series-3: #199e70;
32 --series-4: #9a6fe8;
33 }
34}
36* {
37 box-sizing: border-box;
38}
40body {
41 margin: 0;
42 background: var(--page);
43 color: var(--ink);
44 font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
45 font-size: 14px;
46 line-height: 1.5;
47}
49.app {
50 max-width: 1080px;
51 margin: 0 auto;
52 padding: 0 20px 64px;
53 display: flex;
54 flex-direction: column;
55 gap: 16px;
56}
58.app-header {
59 padding-top: 16px;
60}
62/* Pinned parameter bar: the controls follow the reader down the page, so the
63 numbers they move are never a scroll away. */
64.control-bar {
65 position: sticky;
66 top: 0;
67 z-index: 20;
68 padding: 12px 20px;
69 border-radius: 0 0 10px 10px;
70 border-top: none;
71 box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
72}
74.control-bar .controls {
75 gap: 10px 22px;
76}
78.control-bar .control {
79 min-width: 0;
80}
82.control-bar input[type='range'],
83.control-bar select {
84 width: 148px;
85}
87@media (prefers-color-scheme: dark) {
88 .control-bar {
89 box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
90 }
91}
93.app-header h1 {
94 font-size: 22px;
95 font-weight: 650;
96 margin: 0;
97}
99.app-header p {
100 margin: 3px 0 0;
101 color: var(--ink-2);
102 max-width: 100ch;
103}
105.card {
106 background: var(--surface);
107 border: 1px solid var(--border);
108 border-radius: 10px;
109 padding: 16px 20px;
110}
112.card > h2 {
113 font-size: 13px;
114 font-weight: 650;
115 text-transform: uppercase;
116 letter-spacing: 0.05em;
117 color: var(--ink-2);
118 margin: 0 0 12px;
119}
121.card-note {
122 color: var(--muted);
123 font-size: 12px;
124 margin: 10px 0 0;
125}
127/* ---- controls ---- */
129.controls {
130 display: flex;
131 flex-wrap: wrap;
132 gap: 16px 28px;
133 align-items: flex-end;
134}
136.control {
137 display: flex;
138 flex-direction: column;
139 gap: 4px;
140 min-width: 150px;
141}
143.control > label {
144 font-size: 12px;
145 color: var(--ink-2);
146}
148.control .value {
149 color: var(--ink);
150 font-weight: 600;
151}
153.control input[type='range'] {
154 accent-color: var(--series-1);
155 width: 170px;
156 margin: 0;
157}
159.control select,
160.control input[type='number'] {
161 background: var(--surface);
162 color: var(--ink);
163 border: 1px solid var(--baseline);
164 border-radius: 6px;
165 padding: 4px 8px;
166 font: inherit;
167 width: 170px;
168}
170/* ---- plots ---- */
172.filter-panels {
173 display: grid;
174 grid-template-columns: 1fr 1fr;
175 gap: 20px;
176}
178@media (max-width: 760px) {
179 .filter-panels {
180 grid-template-columns: 1fr;
181 }
182}
184.panel h3 {
185 font-size: 12px;
186 font-weight: 600;
187 color: var(--ink-2);
188 margin: 0 0 6px;
189}
191.panel {
192 position: relative;
193}
195.panel svg {
196 display: block;
197 width: 100%;
198 height: auto;
199}
201.scroll-wrap {
202 position: relative;
203}
205.scroll-canvas {
206 display: block;
207 width: 100%;
208 height: 130px;
209}
211.play-btn {
212 position: absolute;
213 top: 8px;
214 right: 8px;
215 background: var(--surface);
216 color: var(--ink-2);
217 border: 1px solid var(--baseline);
218 border-radius: 7px;
219 padding: 4px 12px;
220 font: inherit;
221 font-size: 12px;
222 cursor: pointer;
223}
225.play-btn:hover {
226 color: var(--ink);
227}
229.viz-tooltip {
230 position: absolute;
231 pointer-events: none;
232 background: var(--surface);
233 border: 1px solid var(--border);
234 border-radius: 6px;
235 padding: 4px 8px;
236 font-size: 12px;
237 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
238 white-space: nowrap;
239 z-index: 10;
240}
242.viz-tooltip .tip-value {
243 font-weight: 650;
244 color: var(--ink);
245}
247.viz-tooltip .tip-label {
248 color: var(--ink-2);
249}
251/* ---- stat tiles ---- */
253.stat-row {
254 display: flex;
255 flex-wrap: wrap;
256 gap: 10px 32px;
257 margin-bottom: 12px;
258}
260.stat {
261 display: flex;
262 flex-direction: column;
263}
265.stat .label {
266 font-size: 12px;
267 color: var(--ink-2);
268}
270.stat .value {
271 font-size: 20px;
272 font-weight: 600;
273}
275.stat .value small {
276 font-size: 12px;
277 font-weight: 400;
278 color: var(--muted);
279}
281.stat-action {
282 display: flex;
283 align-items: center;
284 gap: 8px;
285 margin-top: 5px;
286 font-size: 12px;
287}
289.stat-action button {
290 background: var(--surface);
291 color: var(--ink);
292 border: 1px solid var(--baseline);
293 border-radius: 6px;
294 padding: 1px 10px;
295 font: inherit;
296 font-size: 12px;
297 font-weight: 600;
298 cursor: pointer;
299}
301.stat-action button:hover {
302 border-color: var(--series-1);
303}
305.estimate-status {
306 color: var(--muted);
307 font-variant-numeric: tabular-nums;
308 white-space: nowrap;
309}
311.measure-row {
312 display: flex;
313 flex-wrap: wrap;
314 gap: 8px 20px;
315 margin-bottom: 12px;
316 font-size: 12px;
317 color: var(--ink-2);
318}
320.measure-row label {
321 display: inline-flex;
322 align-items: center;
323 gap: 6px;
324}
326.measure-row select {
327 background: var(--surface);
328 color: var(--ink);
329 border: 1px solid var(--baseline);
330 border-radius: 6px;
331 padding: 2px 6px;
332 font: inherit;
333}
335/* ---- compression chart ---- */
337.chart-header {
338 display: flex;
339 align-items: center;
340 justify-content: space-between;
341 gap: 12px;
342 flex-wrap: wrap;
343 margin-bottom: 6px;
344}
346.metric-hint {
347 margin-left: 10px;
348 font-size: 12px;
349 color: var(--muted);
350}
352.segmented {
353 display: inline-flex;
354 border: 1px solid var(--baseline);
355 border-radius: 7px;
356 overflow: hidden;
357}
359.segmented button {
360 border: none;
361 background: transparent;
362 color: var(--ink-2);
363 font: inherit;
364 font-size: 12px;
365 padding: 4px 10px;
366 cursor: pointer;
367}
369.segmented button.active {
370 background: var(--series-1);
371 color: #fff;
372}
374.legend {
375 display: flex;
376 gap: 14px;
377 font-size: 12px;
378 color: var(--ink-2);
379}
381.legend .swatch {
382 display: inline-block;
383 width: 10px;
384 height: 10px;
385 border-radius: 2px;
386 margin-right: 5px;
387 vertical-align: -1px;
388}
390.chart-body {
391 position: relative;
392 transition: opacity 0.15s;
393}
395.chart-body.computing {
396 opacity: 0.55;
397}
399.computing-badge {
400 position: absolute;
401 top: -2px;
402 right: 0;
403 font-size: 12px;
404 color: var(--muted);
405}
407.bar-row-label {
408 fill: var(--ink);
409 font-size: 12px;
410}
412.bar-group-label {
413 fill: var(--muted);
414 font-size: 11px;
415 text-transform: uppercase;
416 letter-spacing: 0.06em;
417}
419.bar-value {
420 fill: var(--ink-2);
421 font-size: 11.5px;
422 font-variant-numeric: tabular-nums;
423}
425/* Coder overhead: a quiet strip under the chart, one entry per coder that
426 has an explicit model to be scored against. */
427.coder-efficiency {
428 display: flex;
429 flex-wrap: wrap;
430 align-items: baseline;
431 gap: 4px 18px;
432 margin-top: 10px;
433 font-size: 12px;
434 color: var(--ink-2);
435}
437.coder-efficiency-title {
438 flex-basis: 100%;
439 color: var(--muted);
440}
442.coder-efficiency-item {
443 display: inline-flex;
444 align-items: baseline;
445 gap: 6px;
446 font-variant-numeric: tabular-nums;
447}
449.coder-efficiency-bits {
450 color: var(--muted);
451}
453.coder-efficiency-pct {
454 font-weight: 600;
455}
457.axis-tick {
458 fill: var(--muted);
459 font-size: 11px;
460 font-variant-numeric: tabular-nums;
461}
463.chart-table {
464 margin-top: 10px;
465 color: var(--ink-2);
466 font-size: 12.5px;
467}
469.chart-table summary {
470 cursor: pointer;
471 color: var(--muted);
472}
474.chart-table table {
475 margin-top: 8px;
476 border-collapse: collapse;
477 font-variant-numeric: tabular-nums;
478}
480.chart-table th,
481.chart-table td {
482 text-align: right;
483 padding: 3px 14px 3px 0;
484 border-bottom: 1px solid var(--grid);
485}
487.chart-table th:first-child,
488.chart-table td:first-child {
489 text-align: left;
490}
492.chart-table th {
493 color: var(--muted);
494 font-weight: 500;
495}
497.command-row {
498 display: flex;
499 flex-wrap: wrap;
500 align-items: center;
501 gap: 6px 10px;
502 margin-top: 10px;
503 font-size: 12px;
504 color: var(--muted);
505}
507.command-row code {
508 background: var(--page);
509 border: 1px solid var(--border);
510 border-radius: 6px;
511 padding: 3px 8px;
512 font-size: 11.5px;
513 color: var(--ink-2);
514 overflow-x: auto;
515 white-space: nowrap;
516 max-width: 100%;
517}
519.command-row button {
520 background: var(--surface);
521 color: var(--ink-2);
522 border: 1px solid var(--baseline);
523 border-radius: 6px;
524 padding: 2px 10px;
525 font: inherit;
526 font-size: 11.5px;
527 cursor: pointer;
528}
530.command-row button:hover {
531 color: var(--ink);
532}
534/* ---- math ---- */
536.math-section p {
537 color: var(--ink-2);
538 max-width: 76ch;
539}
541.math-section .katex-display {
542 margin: 14px 0;
543}