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-canvas {
185 display: block;
186 width: 100%;
187 height: 240px;
188}
190.viz-tooltip {
191 position: absolute;
192 pointer-events: none;
193 background: var(--surface);
194 border: 1px solid var(--border);
195 border-radius: 6px;
196 padding: 4px 8px;
197 font-size: 12px;
198 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
199 white-space: nowrap;
200 z-index: 10;
201}
203.viz-tooltip .tip-value {
204 font-weight: 650;
205 color: var(--ink);
206}
208.viz-tooltip .tip-label {
209 color: var(--ink-2);
210}
212/* ---- stat tiles ---- */
214.stat-row {
215 display: flex;
216 flex-wrap: wrap;
217 gap: 12px 32px;
218 margin-bottom: 14px;
219}
221.stat {
222 display: flex;
223 flex-direction: column;
224}
226.stat .label {
227 font-size: 12px;
228 color: var(--ink-2);
229}
231.stat .value {
232 font-size: 20px;
233 font-weight: 600;
234}
236.stat .value small {
237 font-size: 12px;
238 font-weight: 400;
239 color: var(--muted);
240}
242/* ---- compression chart ---- */
244.chart-header {
245 display: flex;
246 align-items: center;
247 justify-content: space-between;
248 gap: 12px;
249 flex-wrap: wrap;
250 margin-bottom: 6px;
251}
253.metric-hint {
254 margin-left: 10px;
255 font-size: 12px;
256 color: var(--muted);
257}
259.segmented {
260 display: inline-flex;
261 border: 1px solid var(--baseline);
262 border-radius: 7px;
263 overflow: hidden;
264}
266.segmented button {
267 border: none;
268 background: transparent;
269 color: var(--ink-2);
270 font: inherit;
271 font-size: 12px;
272 padding: 4px 10px;
273 cursor: pointer;
274}
276.segmented button.active {
277 background: var(--series-1);
278 color: #fff;
279}
281.legend {
282 display: flex;
283 gap: 14px;
284 font-size: 12px;
285 color: var(--ink-2);
286}
288.legend .swatch {
289 display: inline-block;
290 width: 10px;
291 height: 10px;
292 border-radius: 2px;
293 margin-right: 5px;
294 vertical-align: -1px;
295}
297.chart-body {
298 position: relative;
299 transition: opacity 0.15s;
300}
302.chart-body.computing {
303 opacity: 0.55;
304}
306.computing-badge {
307 position: absolute;
308 top: -2px;
309 right: 0;
310 font-size: 12px;
311 color: var(--muted);
312}
314.bar-row-label {
315 fill: var(--ink);
316 font-size: 12px;
317}
319.bar-group-label {
320 fill: var(--muted);
321 font-size: 11px;
322 text-transform: uppercase;
323 letter-spacing: 0.06em;
324}
326.bar-value {
327 fill: var(--ink-2);
328 font-size: 11.5px;
329 font-variant-numeric: tabular-nums;
330}
332.axis-tick {
333 fill: var(--muted);
334 font-size: 11px;
335 font-variant-numeric: tabular-nums;
336}
338.chart-table {
339 margin-top: 10px;
340 color: var(--ink-2);
341 font-size: 12.5px;
342}
344.chart-table summary {
345 cursor: pointer;
346 color: var(--muted);
347}
349.chart-table table {
350 margin-top: 8px;
351 border-collapse: collapse;
352 font-variant-numeric: tabular-nums;
353}
355.chart-table th,
356.chart-table td {
357 text-align: right;
358 padding: 3px 14px 3px 0;
359 border-bottom: 1px solid var(--grid);
360}
362.chart-table th:first-child,
363.chart-table td:first-child {
364 text-align: left;
365}
367.chart-table th {
368 color: var(--muted);
369 font-weight: 500;
370}
372/* ---- math ---- */
374.math-section p {
375 color: var(--ink-2);
376 max-width: 76ch;
377}
379.math-section .katex-display {
380 margin: 12px 0;
381}