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: 24px 20px 64px;
51 display: flex;
52 flex-direction: column;
53 gap: 16px;
54}
56.app-header h1 {
57 font-size: 22px;
58 font-weight: 650;
59 margin: 0;
60}
62.app-header p {
63 margin: 4px 0 0;
64 color: var(--ink-2);
65 max-width: 72ch;
66}
68.card {
69 background: var(--surface);
70 border: 1px solid var(--border);
71 border-radius: 10px;
72 padding: 16px 20px;
73}
75.card > h2 {
76 font-size: 13px;
77 font-weight: 650;
78 text-transform: uppercase;
79 letter-spacing: 0.05em;
80 color: var(--ink-2);
81 margin: 0 0 12px;
82}
84.card-note {
85 color: var(--muted);
86 font-size: 12px;
87 margin: 10px 0 0;
88}
90/* ---- controls ---- */
92.controls {
93 display: flex;
94 flex-wrap: wrap;
95 gap: 16px 28px;
96 align-items: flex-end;
97}
99.control {
100 display: flex;
101 flex-direction: column;
102 gap: 4px;
103 min-width: 150px;
104}
106.control > label {
107 font-size: 12px;
108 color: var(--ink-2);
109}
111.control .value {
112 color: var(--ink);
113 font-weight: 600;
114}
116.control input[type='range'] {
117 accent-color: var(--series-1);
118 width: 170px;
119 margin: 0;
120}
122.control select,
123.control input[type='number'] {
124 background: var(--surface);
125 color: var(--ink);
126 border: 1px solid var(--baseline);
127 border-radius: 6px;
128 padding: 4px 8px;
129 font: inherit;
130 width: 170px;
131}
133.control-toggle {
134 flex-direction: row;
135 align-items: center;
136 gap: 8px;
137 min-width: 0;
138 padding-bottom: 6px;
139}
141.control-toggle input {
142 accent-color: var(--series-1);
143 width: 16px;
144 height: 16px;
145 margin: 0;
146}
148.control-toggle label {
149 font-size: 13px;
150 color: var(--ink);
151}
153/* ---- plots ---- */
155.filter-panels {
156 display: grid;
157 grid-template-columns: 1fr 1fr;
158 gap: 20px;
159}
161@media (max-width: 760px) {
162 .filter-panels {
163 grid-template-columns: 1fr;
164 }
165}
167.panel h3 {
168 font-size: 12px;
169 font-weight: 600;
170 color: var(--ink-2);
171 margin: 0 0 6px;
172}
174.panel {
175 position: relative;
176}
178.panel svg {
179 display: block;
180 width: 100%;
181 height: auto;
182}
184.scroll-wrap {
185 position: relative;
186}
188.scroll-canvas {
189 display: block;
190 width: 100%;
191 height: 240px;
192}
194.play-btn {
195 position: absolute;
196 top: 8px;
197 right: 8px;
198 background: var(--surface);
199 color: var(--ink-2);
200 border: 1px solid var(--baseline);
201 border-radius: 7px;
202 padding: 4px 12px;
203 font: inherit;
204 font-size: 12px;
205 cursor: pointer;
206}
208.play-btn:hover {
209 color: var(--ink);
210}
212.viz-tooltip {
213 position: absolute;
214 pointer-events: none;
215 background: var(--surface);
216 border: 1px solid var(--border);
217 border-radius: 6px;
218 padding: 4px 8px;
219 font-size: 12px;
220 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
221 white-space: nowrap;
222 z-index: 10;
223}
225.viz-tooltip .tip-value {
226 font-weight: 650;
227 color: var(--ink);
228}
230.viz-tooltip .tip-label {
231 color: var(--ink-2);
232}
234/* ---- stat tiles ---- */
236.stat-row {
237 display: flex;
238 flex-wrap: wrap;
239 gap: 12px 32px;
240 margin-bottom: 14px;
241}
243.stat {
244 display: flex;
245 flex-direction: column;
246}
248.stat .label {
249 font-size: 12px;
250 color: var(--ink-2);
251}
253.stat .value {
254 font-size: 20px;
255 font-weight: 600;
256}
258.stat .value small {
259 font-size: 12px;
260 font-weight: 400;
261 color: var(--muted);
262}
264/* ---- compression chart ---- */
266.chart-header {
267 display: flex;
268 align-items: center;
269 justify-content: space-between;
270 gap: 12px;
271 flex-wrap: wrap;
272 margin-bottom: 6px;
273}
275.metric-hint {
276 margin-left: 10px;
277 font-size: 12px;
278 color: var(--muted);
279}
281.segmented {
282 display: inline-flex;
283 border: 1px solid var(--baseline);
284 border-radius: 7px;
285 overflow: hidden;
286}
288.segmented button {
289 border: none;
290 background: transparent;
291 color: var(--ink-2);
292 font: inherit;
293 font-size: 12px;
294 padding: 4px 10px;
295 cursor: pointer;
296}
298.segmented button.active {
299 background: var(--series-1);
300 color: #fff;
301}
303.legend {
304 display: flex;
305 gap: 14px;
306 font-size: 12px;
307 color: var(--ink-2);
308}
310.legend .swatch {
311 display: inline-block;
312 width: 10px;
313 height: 10px;
314 border-radius: 2px;
315 margin-right: 5px;
316 vertical-align: -1px;
317}
319.chart-body {
320 position: relative;
321 transition: opacity 0.15s;
322}
324.chart-body.computing {
325 opacity: 0.55;
326}
328.computing-badge {
329 position: absolute;
330 top: -2px;
331 right: 0;
332 font-size: 12px;
333 color: var(--muted);
334}
336.bar-row-label {
337 fill: var(--ink);
338 font-size: 12px;
339}
341.bar-group-label {
342 fill: var(--muted);
343 font-size: 11px;
344 text-transform: uppercase;
345 letter-spacing: 0.06em;
346}
348.bar-value {
349 fill: var(--ink-2);
350 font-size: 11.5px;
351 font-variant-numeric: tabular-nums;
352}
354.axis-tick {
355 fill: var(--muted);
356 font-size: 11px;
357 font-variant-numeric: tabular-nums;
358}
360.chart-table {
361 margin-top: 10px;
362 color: var(--ink-2);
363 font-size: 12.5px;
364}
366.chart-table summary {
367 cursor: pointer;
368 color: var(--muted);
369}
371.chart-table table {
372 margin-top: 8px;
373 border-collapse: collapse;
374 font-variant-numeric: tabular-nums;
375}
377.chart-table th,
378.chart-table td {
379 text-align: right;
380 padding: 3px 14px 3px 0;
381 border-bottom: 1px solid var(--grid);
382}
384.chart-table th:first-child,
385.chart-table td:first-child {
386 text-align: left;
387}
389.chart-table th {
390 color: var(--muted);
391 font-weight: 500;
392}
394/* ---- math ---- */
396.math-section p {
397 color: var(--ink-2);
398 max-width: 76ch;
399}
401.math-section .katex-display {
402 margin: 12px 0;
403}