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}
17@media (prefers-color-scheme: dark) {
18 :root {
19 color-scheme: dark;
20 --page: #0d0d0d;
21 --surface: #1a1a19;
22 --ink: #ffffff;
23 --ink-2: #c3c2b7;
24 --muted: #898781;
25 --grid: #2c2c2a;
26 --baseline: #383835;
27 --border: rgba(255, 255, 255, 0.1);
28 --series-1: #3987e5;
29 --series-2: #d95926;
30 --series-3: #199e70;
31 }
32}
34* {
35 box-sizing: border-box;
36}
38body {
39 margin: 0;
40 background: var(--page);
41 color: var(--ink);
42 font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
43 font-size: 14px;
44 line-height: 1.5;
45}
47.app {
48 max-width: 1080px;
49 margin: 0 auto;
50 padding: 0 20px 64px;
51 display: flex;
52 flex-direction: column;
53 gap: 16px;
54}
56.app-header {
57 padding-top: 16px;
58}
60/* Pinned parameter bar: the controls follow the reader down the page, so the
61 numbers they move are never a scroll away. */
62.control-bar {
63 position: sticky;
64 top: 0;
65 z-index: 20;
66 padding: 12px 20px;
67 border-radius: 0 0 10px 10px;
68 border-top: none;
69 box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
70}
72.control-bar .controls {
73 gap: 10px 22px;
74}
76.control-bar .control {
77 min-width: 0;
78}
80.control-bar input[type='range'],
81.control-bar select {
82 width: 148px;
83}
85@media (prefers-color-scheme: dark) {
86 .control-bar {
87 box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
88 }
89}
91.app-header h1 {
92 font-size: 22px;
93 font-weight: 650;
94 margin: 0;
95}
97.app-header p {
98 margin: 3px 0 0;
99 color: var(--ink-2);
100 max-width: 100ch;
101}
103.card {
104 background: var(--surface);
105 border: 1px solid var(--border);
106 border-radius: 10px;
107 padding: 16px 20px;
108}
110.card > h2 {
111 font-size: 13px;
112 font-weight: 650;
113 text-transform: uppercase;
114 letter-spacing: 0.05em;
115 color: var(--ink-2);
116 margin: 0 0 12px;
117}
119.card-note {
120 color: var(--muted);
121 font-size: 12px;
122 margin: 10px 0 0;
123}
125/* ---- controls ---- */
127.controls {
128 display: flex;
129 flex-wrap: wrap;
130 gap: 16px 28px;
131 align-items: flex-end;
132}
134.control {
135 display: flex;
136 flex-direction: column;
137 gap: 4px;
138 min-width: 150px;
139}
141.control > label {
142 font-size: 12px;
143 color: var(--ink-2);
144}
146.control .value {
147 color: var(--ink);
148 font-weight: 600;
149}
151.control input[type='range'] {
152 accent-color: var(--series-1);
153 width: 170px;
154 margin: 0;
155}
157.control select,
158.control input[type='number'] {
159 background: var(--surface);
160 color: var(--ink);
161 border: 1px solid var(--baseline);
162 border-radius: 6px;
163 padding: 4px 8px;
164 font: inherit;
165 width: 170px;
166}
168/* ---- plots ---- */
170.filter-panels {
171 display: grid;
172 grid-template-columns: 1fr 1fr;
173 gap: 20px;
174}
176@media (max-width: 760px) {
177 .filter-panels {
178 grid-template-columns: 1fr;
179 }
180}
182.panel h3 {
183 font-size: 12px;
184 font-weight: 600;
185 color: var(--ink-2);
186 margin: 0 0 6px;
187}
189.panel {
190 position: relative;
191}
193.panel svg {
194 display: block;
195 width: 100%;
196 height: auto;
197}
199.scroll-wrap {
200 position: relative;
201}
203.scroll-canvas {
204 display: block;
205 width: 100%;
206 height: 130px;
207}
209.play-btn {
210 position: absolute;
211 top: 8px;
212 right: 8px;
213 background: var(--surface);
214 color: var(--ink-2);
215 border: 1px solid var(--baseline);
216 border-radius: 7px;
217 padding: 4px 12px;
218 font: inherit;
219 font-size: 12px;
220 cursor: pointer;
221}
223.play-btn:hover {
224 color: var(--ink);
225}
227.viz-tooltip {
228 position: absolute;
229 pointer-events: none;
230 background: var(--surface);
231 border: 1px solid var(--border);
232 border-radius: 6px;
233 padding: 4px 8px;
234 font-size: 12px;
235 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
236 white-space: nowrap;
237 z-index: 10;
238}
240.viz-tooltip .tip-value {
241 font-weight: 650;
242 color: var(--ink);
243}
245.viz-tooltip .tip-label {
246 color: var(--ink-2);
247}
249/* ---- stat tiles ---- */
251.stat-row {
252 display: flex;
253 flex-wrap: wrap;
254 gap: 10px 32px;
255 margin-bottom: 12px;
256}
258.stat {
259 display: flex;
260 flex-direction: column;
261}
263.stat .label {
264 font-size: 12px;
265 color: var(--ink-2);
266}
268.stat .value {
269 font-size: 20px;
270 font-weight: 600;
271}
273.stat .value small {
274 font-size: 12px;
275 font-weight: 400;
276 color: var(--muted);
277}
279.stat-action {
280 display: flex;
281 align-items: center;
282 gap: 8px;
283 margin-top: 5px;
284 font-size: 12px;
285}
287.stat-action button {
288 background: var(--surface);
289 color: var(--ink);
290 border: 1px solid var(--baseline);
291 border-radius: 6px;
292 padding: 1px 10px;
293 font: inherit;
294 font-size: 12px;
295 font-weight: 600;
296 cursor: pointer;
297}
299.stat-action button:hover {
300 border-color: var(--series-1);
301}
303.estimate-status {
304 color: var(--muted);
305 font-variant-numeric: tabular-nums;
306 white-space: nowrap;
307}
309.measure-row {
310 display: flex;
311 flex-wrap: wrap;
312 gap: 8px 20px;
313 margin-bottom: 12px;
314 font-size: 12px;
315 color: var(--ink-2);
316}
318.measure-row label {
319 display: inline-flex;
320 align-items: center;
321 gap: 6px;
322}
324.measure-row select {
325 background: var(--surface);
326 color: var(--ink);
327 border: 1px solid var(--baseline);
328 border-radius: 6px;
329 padding: 2px 6px;
330 font: inherit;
331}
333/* ---- compression chart ---- */
335.chart-header {
336 display: flex;
337 align-items: center;
338 justify-content: space-between;
339 gap: 12px;
340 flex-wrap: wrap;
341 margin-bottom: 6px;
342}
344.metric-hint {
345 margin-left: 10px;
346 font-size: 12px;
347 color: var(--muted);
348}
350.segmented {
351 display: inline-flex;
352 border: 1px solid var(--baseline);
353 border-radius: 7px;
354 overflow: hidden;
355}
357.segmented button {
358 border: none;
359 background: transparent;
360 color: var(--ink-2);
361 font: inherit;
362 font-size: 12px;
363 padding: 4px 10px;
364 cursor: pointer;
365}
367.segmented button.active {
368 background: var(--series-1);
369 color: #fff;
370}
372.legend {
373 display: flex;
374 gap: 14px;
375 font-size: 12px;
376 color: var(--ink-2);
377}
379.legend .swatch {
380 display: inline-block;
381 width: 10px;
382 height: 10px;
383 border-radius: 2px;
384 margin-right: 5px;
385 vertical-align: -1px;
386}
388/* Hollow: the mark for a limit, matching the outlined bars. */
389.legend .swatch.hollow {
390 background: color-mix(in srgb, var(--muted) 12%, transparent);
391 border: 1.25px solid var(--muted);
392}
394.chart-body {
395 position: relative;
396 transition: opacity 0.15s;
397}
399.chart-body.computing {
400 opacity: 0.55;
401}
403.computing-badge {
404 position: absolute;
405 top: -2px;
406 right: 0;
407 font-size: 12px;
408 color: var(--muted);
409}
411.bar-row-label {
412 fill: var(--ink);
413 font-size: 12px;
414}
416.bar-group-label {
417 fill: var(--muted);
418 font-size: 11px;
419 text-transform: uppercase;
420 letter-spacing: 0.06em;
421}
423.bar-value {
424 fill: var(--ink-2);
425 font-size: 11.5px;
426 font-variant-numeric: tabular-nums;
427}
429/* Limit rows read one step quieter than the measured ones. */
430.bar-row-label.bound,
431.bar-value.bound {
432 fill: var(--muted);
433 font-style: italic;
434}
436.axis-tick {
437 fill: var(--muted);
438 font-size: 11px;
439 font-variant-numeric: tabular-nums;
440}
442.chart-table {
443 margin-top: 10px;
444 color: var(--ink-2);
445 font-size: 12.5px;
446}
448.chart-table summary {
449 cursor: pointer;
450 color: var(--muted);
451}
453.chart-table table {
454 margin-top: 8px;
455 border-collapse: collapse;
456 font-variant-numeric: tabular-nums;
457}
459.chart-table th,
460.chart-table td {
461 text-align: right;
462 padding: 3px 14px 3px 0;
463 border-bottom: 1px solid var(--grid);
464}
466.chart-table th:first-child,
467.chart-table td:first-child {
468 text-align: left;
469}
471.chart-table th {
472 color: var(--muted);
473 font-weight: 500;
474}
476.command-row {
477 display: flex;
478 flex-wrap: wrap;
479 align-items: center;
480 gap: 6px 10px;
481 margin-top: 10px;
482 font-size: 12px;
483 color: var(--muted);
484}
486.command-row code {
487 background: var(--page);
488 border: 1px solid var(--border);
489 border-radius: 6px;
490 padding: 3px 8px;
491 font-size: 11.5px;
492 color: var(--ink-2);
493 overflow-x: auto;
494 white-space: nowrap;
495 max-width: 100%;
496}
498.command-row button {
499 background: var(--surface);
500 color: var(--ink-2);
501 border: 1px solid var(--baseline);
502 border-radius: 6px;
503 padding: 2px 10px;
504 font: inherit;
505 font-size: 11.5px;
506 cursor: pointer;
507}
509.command-row button:hover {
510 color: var(--ink);
511}
513/* ---- math ---- */
515.math-section p {
516 color: var(--ink-2);
517 max-width: 76ch;
518}
520.math-section .katex-display {
521 margin: 14px 0;
522}