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.control-toggle {
169 flex-direction: row;
170 align-items: center;
171 gap: 8px;
172 min-width: 0;
173 padding-bottom: 6px;
174}
176.control-toggle input {
177 accent-color: var(--series-1);
178 width: 16px;
179 height: 16px;
180 margin: 0;
181}
183.control-toggle label {
184 font-size: 13px;
185 color: var(--ink);
186}
188/* ---- plots ---- */
190.filter-panels {
191 display: grid;
192 grid-template-columns: 1fr 1fr;
193 gap: 20px;
194}
196@media (max-width: 760px) {
197 .filter-panels {
198 grid-template-columns: 1fr;
199 }
200}
202.panel h3 {
203 font-size: 12px;
204 font-weight: 600;
205 color: var(--ink-2);
206 margin: 0 0 6px;
207}
209.panel {
210 position: relative;
211}
213.panel svg {
214 display: block;
215 width: 100%;
216 height: auto;
217}
219.scroll-wrap {
220 position: relative;
221}
223.scroll-canvas {
224 display: block;
225 width: 100%;
226 height: 130px;
227}
229.play-btn {
230 position: absolute;
231 top: 8px;
232 right: 8px;
233 background: var(--surface);
234 color: var(--ink-2);
235 border: 1px solid var(--baseline);
236 border-radius: 7px;
237 padding: 4px 12px;
238 font: inherit;
239 font-size: 12px;
240 cursor: pointer;
241}
243.play-btn:hover {
244 color: var(--ink);
245}
247.viz-tooltip {
248 position: absolute;
249 pointer-events: none;
250 background: var(--surface);
251 border: 1px solid var(--border);
252 border-radius: 6px;
253 padding: 4px 8px;
254 font-size: 12px;
255 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
256 white-space: nowrap;
257 z-index: 10;
258}
260.viz-tooltip .tip-value {
261 font-weight: 650;
262 color: var(--ink);
263}
265.viz-tooltip .tip-label {
266 color: var(--ink-2);
267}
269/* ---- stat tiles ---- */
271.stat-row {
272 display: flex;
273 flex-wrap: wrap;
274 gap: 10px 32px;
275 margin-bottom: 12px;
276}
278.stat {
279 display: flex;
280 flex-direction: column;
281}
283.stat .label {
284 font-size: 12px;
285 color: var(--ink-2);
286}
288.stat .value {
289 font-size: 20px;
290 font-weight: 600;
291}
293.stat .value small {
294 font-size: 12px;
295 font-weight: 400;
296 color: var(--muted);
297}
299/* ---- compression chart ---- */
301.chart-header {
302 display: flex;
303 align-items: center;
304 justify-content: space-between;
305 gap: 12px;
306 flex-wrap: wrap;
307 margin-bottom: 6px;
308}
310.metric-hint {
311 margin-left: 10px;
312 font-size: 12px;
313 color: var(--muted);
314}
316.segmented {
317 display: inline-flex;
318 border: 1px solid var(--baseline);
319 border-radius: 7px;
320 overflow: hidden;
321}
323.segmented button {
324 border: none;
325 background: transparent;
326 color: var(--ink-2);
327 font: inherit;
328 font-size: 12px;
329 padding: 4px 10px;
330 cursor: pointer;
331}
333.segmented button.active {
334 background: var(--series-1);
335 color: #fff;
336}
338.legend {
339 display: flex;
340 gap: 14px;
341 font-size: 12px;
342 color: var(--ink-2);
343}
345.legend .swatch {
346 display: inline-block;
347 width: 10px;
348 height: 10px;
349 border-radius: 2px;
350 margin-right: 5px;
351 vertical-align: -1px;
352}
354.chart-body {
355 position: relative;
356 transition: opacity 0.15s;
357}
359.chart-body.computing {
360 opacity: 0.55;
361}
363.computing-badge {
364 position: absolute;
365 top: -2px;
366 right: 0;
367 font-size: 12px;
368 color: var(--muted);
369}
371.bar-row-label {
372 fill: var(--ink);
373 font-size: 12px;
374}
376.bar-group-label {
377 fill: var(--muted);
378 font-size: 11px;
379 text-transform: uppercase;
380 letter-spacing: 0.06em;
381}
383.bar-value {
384 fill: var(--ink-2);
385 font-size: 11.5px;
386 font-variant-numeric: tabular-nums;
387}
389.axis-tick {
390 fill: var(--muted);
391 font-size: 11px;
392 font-variant-numeric: tabular-nums;
393}
395.chart-table {
396 margin-top: 10px;
397 color: var(--ink-2);
398 font-size: 12.5px;
399}
401.chart-table summary {
402 cursor: pointer;
403 color: var(--muted);
404}
406.chart-table table {
407 margin-top: 8px;
408 border-collapse: collapse;
409 font-variant-numeric: tabular-nums;
410}
412.chart-table th,
413.chart-table td {
414 text-align: right;
415 padding: 3px 14px 3px 0;
416 border-bottom: 1px solid var(--grid);
417}
419.chart-table th:first-child,
420.chart-table td:first-child {
421 text-align: left;
422}
424.chart-table th {
425 color: var(--muted);
426 font-weight: 500;
427}
429/* ---- math ---- */
431.math-section p {
432 color: var(--ink-2);
433 max-width: 76ch;
434}
436.math-section .katex-display {
437 margin: 12px 0;
438}