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 --theory: #e87ba4;
18}
19@media (prefers-color-scheme: dark) {
20 :root {
21 color-scheme: dark;
22 --page: #0d0d0d;
23 --surface: #1a1a19;
24 --ink: #ffffff;
25 --ink-2: #c3c2b7;
26 --muted: #898781;
27 --grid: #2c2c2a;
28 --baseline: #383835;
29 --border: rgba(255, 255, 255, 0.1);
30 --series-1: #3987e5;
31 --series-2: #d95926;
32 --series-3: #199e70;
33 --series-4: #9a6fe8;
34 --theory: #d55181;
35 }
36}
38* {
39 box-sizing: border-box;
40}
42body {
43 margin: 0;
44 background: var(--page);
45 color: var(--ink);
46 font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
47 font-size: 14px;
48 line-height: 1.5;
49}
51.app {
52 max-width: 1080px;
53 margin: 0 auto;
54 padding: 0 20px 64px;
55 display: flex;
56 flex-direction: column;
57 gap: 16px;
58}
60.app-header {
61 padding-top: 16px;
62}
64/* Pinned parameter bar: the controls follow the reader down the page, so the
65 numbers they move are never a scroll away. */
66.control-bar {
67 position: sticky;
68 top: 0;
69 z-index: 20;
70 padding: 12px 20px;
71 border-radius: 0 0 10px 10px;
72 border-top: none;
73 box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
74}
76.control-bar .controls {
77 gap: 10px 22px;
78}
80.control-bar .control {
81 min-width: 0;
82}
84.control-bar input[type='range'],
85.control-bar select {
86 width: 148px;
87}
89@media (prefers-color-scheme: dark) {
90 .control-bar {
91 box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
92 }
93}
95.app-header h1 {
96 font-size: 22px;
97 font-weight: 650;
98 margin: 0;
99}
101.app-header p {
102 margin: 3px 0 0;
103 color: var(--ink-2);
104 max-width: 100ch;
105}
107.card {
108 background: var(--surface);
109 border: 1px solid var(--border);
110 border-radius: 10px;
111 padding: 16px 20px;
112}
114.card > h2 {
115 font-size: 13px;
116 font-weight: 650;
117 text-transform: uppercase;
118 letter-spacing: 0.05em;
119 color: var(--ink-2);
120 margin: 0 0 12px;
121}
123.card-note {
124 color: var(--muted);
125 font-size: 12px;
126 margin: 10px 0 0;
127}
129/* ---- controls ---- */
131.controls {
132 display: flex;
133 flex-wrap: wrap;
134 gap: 16px 28px;
135 align-items: flex-end;
136}
138.control {
139 display: flex;
140 flex-direction: column;
141 gap: 4px;
142 min-width: 150px;
143}
145.control > label {
146 font-size: 12px;
147 color: var(--ink-2);
148}
150.control .value {
151 color: var(--ink);
152 font-weight: 600;
153}
155.control input[type='range'] {
156 accent-color: var(--series-1);
157 width: 170px;
158 margin: 0;
159}
161.control select,
162.control input[type='number'] {
163 background: var(--surface);
164 color: var(--ink);
165 border: 1px solid var(--baseline);
166 border-radius: 6px;
167 padding: 4px 8px;
168 font: inherit;
169 width: 170px;
170}
172/* ---- plots ---- */
174.filter-panels {
175 display: grid;
176 grid-template-columns: 1fr 1fr;
177 gap: 20px;
178}
180@media (max-width: 760px) {
181 .filter-panels {
182 grid-template-columns: 1fr;
183 }
184}
186.panel h3 {
187 font-size: 12px;
188 font-weight: 600;
189 color: var(--ink-2);
190 margin: 0 0 6px;
191}
193.panel {
194 position: relative;
195}
197.panel svg {
198 display: block;
199 width: 100%;
200 height: auto;
201}
203.scroll-wrap {
204 position: relative;
205}
207.scroll-canvas {
208 display: block;
209 width: 100%;
210 height: 130px;
211}
213.play-btn {
214 position: absolute;
215 top: 8px;
216 right: 8px;
217 background: var(--surface);
218 color: var(--ink-2);
219 border: 1px solid var(--baseline);
220 border-radius: 7px;
221 padding: 4px 12px;
222 font: inherit;
223 font-size: 12px;
224 cursor: pointer;
225}
227.play-btn:hover {
228 color: var(--ink);
229}
231.viz-tooltip {
232 position: absolute;
233 pointer-events: none;
234 background: var(--surface);
235 border: 1px solid var(--border);
236 border-radius: 6px;
237 padding: 4px 8px;
238 font-size: 12px;
239 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
240 white-space: nowrap;
241 z-index: 10;
242}
244.viz-tooltip .tip-value {
245 font-weight: 650;
246 color: var(--ink);
247}
249.viz-tooltip .tip-label {
250 color: var(--ink-2);
251}
253/* ---- stat tiles ---- */
255.stat-row {
256 display: flex;
257 flex-wrap: wrap;
258 gap: 10px 32px;
259 margin-bottom: 12px;
260}
262.stat {
263 display: flex;
264 flex-direction: column;
265}
267.stat .label {
268 font-size: 12px;
269 color: var(--ink-2);
270}
272.stat .value {
273 font-size: 20px;
274 font-weight: 600;
275}
277.stat .value small {
278 font-size: 12px;
279 font-weight: 400;
280 color: var(--muted);
281}
283/* A sample of a chart reference line's stroke, keying a stat to its line. */
284.line-swatch {
285 display: inline-block;
286 width: 18px;
287 margin: 0 6px 3px 0;
288 vertical-align: middle;
289}
291.stat-sub {
292 font-size: 12px;
293 color: var(--ink-2);
294 font-variant-numeric: tabular-nums;
295}
297.stat-action {
298 display: flex;
299 align-items: center;
300 gap: 8px;
301 margin-top: 5px;
302 font-size: 12px;
303}
305.stat-action button {
306 background: var(--surface);
307 color: var(--ink);
308 border: 1px solid var(--baseline);
309 border-radius: 6px;
310 padding: 1px 10px;
311 font: inherit;
312 font-size: 12px;
313 font-weight: 600;
314 cursor: pointer;
315}
317.stat-action button:hover {
318 border-color: var(--series-1);
319}
321.estimate-status {
322 color: var(--muted);
323 font-variant-numeric: tabular-nums;
324 white-space: nowrap;
325}
327.measure-row {
328 display: flex;
329 flex-wrap: wrap;
330 gap: 8px 20px;
331 margin-bottom: 12px;
332 font-size: 12px;
333 color: var(--ink-2);
334}
336.measure-row label {
337 display: inline-flex;
338 align-items: center;
339 gap: 6px;
340}
342.measure-row select {
343 background: var(--surface);
344 color: var(--ink);
345 border: 1px solid var(--baseline);
346 border-radius: 6px;
347 padding: 2px 6px;
348 font: inherit;
349}
351/* ---- compression chart ---- */
353.chart-header {
354 display: flex;
355 align-items: center;
356 justify-content: space-between;
357 gap: 12px;
358 flex-wrap: wrap;
359 margin-bottom: 6px;
360}
362.metric-hint {
363 margin-left: 10px;
364 font-size: 12px;
365 color: var(--muted);
366}
368.segmented {
369 display: inline-flex;
370 border: 1px solid var(--baseline);
371 border-radius: 7px;
372 overflow: hidden;
373}
375.segmented button {
376 border: none;
377 background: transparent;
378 color: var(--ink-2);
379 font: inherit;
380 font-size: 12px;
381 padding: 4px 10px;
382 cursor: pointer;
383}
385.segmented button.active {
386 background: var(--series-1);
387 color: #fff;
388}
390.legend {
391 display: flex;
392 gap: 14px;
393 font-size: 12px;
394 color: var(--ink-2);
395}
397.legend .swatch {
398 display: inline-block;
399 width: 10px;
400 height: 10px;
401 border-radius: 2px;
402 margin-right: 5px;
403 vertical-align: -1px;
404}
406.chart-body {
407 position: relative;
408 transition: opacity 0.15s;
409}
411.chart-body.computing {
412 opacity: 0.55;
413}
415.computing-badge {
416 position: absolute;
417 top: -2px;
418 right: 0;
419 font-size: 12px;
420 color: var(--muted);
421}
423.bar-row-label {
424 fill: var(--ink);
425 font-size: 12px;
426}
428.bar-group-label {
429 fill: var(--muted);
430 font-size: 11px;
431 text-transform: uppercase;
432 letter-spacing: 0.06em;
433}
435.bar-value {
436 fill: var(--ink-2);
437 font-size: 11.5px;
438 font-variant-numeric: tabular-nums;
439}
441/* Coder overhead: a quiet strip under the chart, one entry per coder that
442 has an explicit model to be scored against. */
443.coder-efficiency {
444 display: flex;
445 flex-wrap: wrap;
446 align-items: baseline;
447 gap: 4px 18px;
448 margin-top: 10px;
449 font-size: 12px;
450 color: var(--ink-2);
451}
453.coder-efficiency-title {
454 flex-basis: 100%;
455 color: var(--muted);
456}
458.coder-efficiency-item {
459 display: inline-flex;
460 align-items: baseline;
461 gap: 6px;
462 font-variant-numeric: tabular-nums;
463}
465.coder-efficiency-bits {
466 color: var(--muted);
467}
469.coder-efficiency-pct {
470 font-weight: 600;
471}
473.axis-tick {
474 fill: var(--muted);
475 font-size: 11px;
476 font-variant-numeric: tabular-nums;
477}
479.chart-table {
480 margin-top: 10px;
481 color: var(--ink-2);
482 font-size: 12.5px;
483}
485.chart-table summary {
486 cursor: pointer;
487 color: var(--muted);
488}
490.chart-table table {
491 margin-top: 8px;
492 border-collapse: collapse;
493 font-variant-numeric: tabular-nums;
494}
496.chart-table th,
497.chart-table td {
498 text-align: right;
499 padding: 3px 14px 3px 0;
500 border-bottom: 1px solid var(--grid);
501}
503.chart-table th:first-child,
504.chart-table td:first-child {
505 text-align: left;
506}
508.chart-table th {
509 color: var(--muted);
510 font-weight: 500;
511}
513.command-row {
514 display: flex;
515 flex-wrap: wrap;
516 align-items: center;
517 gap: 6px 10px;
518 margin-top: 10px;
519 font-size: 12px;
520 color: var(--muted);
521}
523.command-row code {
524 background: var(--page);
525 border: 1px solid var(--border);
526 border-radius: 6px;
527 padding: 3px 8px;
528 font-size: 11.5px;
529 color: var(--ink-2);
530 overflow-x: auto;
531 white-space: nowrap;
532 max-width: 100%;
533}
535.command-row button {
536 background: var(--surface);
537 color: var(--ink-2);
538 border: 1px solid var(--baseline);
539 border-radius: 6px;
540 padding: 2px 10px;
541 font: inherit;
542 font-size: 11.5px;
543 cursor: pointer;
544}
546.command-row button:hover {
547 color: var(--ink);
548}
550/* ---- math ---- */
552.math-section p {
553 color: var(--ink-2);
554 max-width: 76ch;
555}
557.math-section .katex-display {
558 margin: 14px 0;
559}