36e8ceaInteractive explorer for compressibility of quantized filtered Gaussian time seriesJeremy Magland 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;
8a09dfcPin the parameter bar, put compression first, shrink signal and filter panelsJeremy Magland 50 padding: 0 20px 64px;
36e8ceaInteractive explorer for compressibility of quantized filtered Gaussian time seriesJeremy Magland 51 display: flex;
52 flex-direction: column;
53 gap: 16px;
54}
8a09dfcPin the parameter bar, put compression first, shrink signal and filter panelsJeremy Magland 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}
36e8ceaInteractive explorer for compressibility of quantized filtered Gaussian time seriesJeremy Magland 91.app-header h1 {
92 font-size: 22px;
93 font-weight: 650;
94 margin: 0;
95}
97.app-header p {
8a09dfcPin the parameter bar, put compression first, shrink signal and filter panelsJeremy Magland 98 margin: 3px 0 0;
36e8ceaInteractive explorer for compressibility of quantized filtered Gaussian time seriesJeremy Magland 99 color: var(--ink-2);
8a09dfcPin the parameter bar, put compression first, shrink signal and filter panelsJeremy Magland 100 max-width: 100ch;
36e8ceaInteractive explorer for compressibility of quantized filtered Gaussian time seriesJeremy Magland 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}
eb36f3fMake the signal view stationary by default with a play toggleJeremy Magland 219.scroll-wrap {
220 position: relative;
221}
36e8ceaInteractive explorer for compressibility of quantized filtered Gaussian time seriesJeremy Magland 223.scroll-canvas {
224 display: block;
225 width: 100%;
8a09dfcPin the parameter bar, put compression first, shrink signal and filter panelsJeremy Magland 226 height: 130px;
36e8ceaInteractive explorer for compressibility of quantized filtered Gaussian time seriesJeremy Magland 227}
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}
36e8ceaInteractive explorer for compressibility of quantized filtered Gaussian time seriesJeremy Magland 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;
8a09dfcPin the parameter bar, put compression first, shrink signal and filter panelsJeremy Magland 274 gap: 10px 32px;
275 margin-bottom: 12px;
36e8ceaInteractive explorer for compressibility of quantized filtered Gaussian time seriesJeremy Magland 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}
300 display: flex;
301 flex-wrap: wrap;
302 gap: 8px 20px;
303 margin-bottom: 12px;
304 font-size: 12px;
305 color: var(--ink-2);
306}
308.measure-row label {
309 display: inline-flex;
310 align-items: center;
311 gap: 6px;
312}
314.measure-row select {
315 background: var(--surface);
316 color: var(--ink);
317 border: 1px solid var(--baseline);
318 border-radius: 6px;
319 padding: 2px 6px;
320 font: inherit;
321}
36e8ceaInteractive explorer for compressibility of quantized filtered Gaussian time seriesJeremy Magland 323/* ---- compression chart ---- */
325.chart-header {
326 display: flex;
327 align-items: center;
328 justify-content: space-between;
329 gap: 12px;
330 flex-wrap: wrap;
331 margin-bottom: 6px;
332}
334.metric-hint {
335 margin-left: 10px;
336 font-size: 12px;
337 color: var(--muted);
338}
340.segmented {
341 display: inline-flex;
342 border: 1px solid var(--baseline);
343 border-radius: 7px;
344 overflow: hidden;
345}
347.segmented button {
348 border: none;
349 background: transparent;
350 color: var(--ink-2);
351 font: inherit;
352 font-size: 12px;
353 padding: 4px 10px;
354 cursor: pointer;
355}
357.segmented button.active {
358 background: var(--series-1);
359 color: #fff;
360}
362.legend {
363 display: flex;
364 gap: 14px;
365 font-size: 12px;
366 color: var(--ink-2);
367}
369.legend .swatch {
370 display: inline-block;
371 width: 10px;
372 height: 10px;
373 border-radius: 2px;
374 margin-right: 5px;
375 vertical-align: -1px;
376}
355ddbbAdd per-group entropy limit bars to the compression chartJeremy Magland 378/* Hollow: the mark for a limit, matching the outlined bars. */
379.legend .swatch.hollow {
380 background: color-mix(in srgb, var(--muted) 12%, transparent);
381 border: 1.25px solid var(--muted);
382}
36e8ceaInteractive explorer for compressibility of quantized filtered Gaussian time seriesJeremy Magland 384.chart-body {
385 position: relative;
386 transition: opacity 0.15s;
387}
389.chart-body.computing {
390 opacity: 0.55;
391}
393.computing-badge {
394 position: absolute;
395 top: -2px;
396 right: 0;
397 font-size: 12px;
398 color: var(--muted);
399}
401.bar-row-label {
402 fill: var(--ink);
403 font-size: 12px;
404}
406.bar-group-label {
407 fill: var(--muted);
408 font-size: 11px;
409 text-transform: uppercase;
410 letter-spacing: 0.06em;
411}
413.bar-value {
414 fill: var(--ink-2);
415 font-size: 11.5px;
416 font-variant-numeric: tabular-nums;
417}
355ddbbAdd per-group entropy limit bars to the compression chartJeremy Magland 419/* Limit rows read one step quieter than the measured ones. */
420.bar-row-label.bound,
421.bar-value.bound {
422 fill: var(--muted);
423 font-style: italic;
424}
36e8ceaInteractive explorer for compressibility of quantized filtered Gaussian time seriesJeremy Magland 426.axis-tick {
427 fill: var(--muted);
428 font-size: 11px;
429 font-variant-numeric: tabular-nums;
430}
432.chart-table {
433 margin-top: 10px;
434 color: var(--ink-2);
435 font-size: 12.5px;
436}
438.chart-table summary {
439 cursor: pointer;
440 color: var(--muted);
441}
443.chart-table table {
444 margin-top: 8px;
445 border-collapse: collapse;
446 font-variant-numeric: tabular-nums;
447}
449.chart-table th,
450.chart-table td {
451 text-align: right;
452 padding: 3px 14px 3px 0;
453 border-bottom: 1px solid var(--grid);
454}
456.chart-table th:first-child,
457.chart-table td:first-child {
458 text-align: left;
459}
461.chart-table th {
462 color: var(--muted);
463 font-weight: 500;
464}
466/* ---- math ---- */
468.math-section p {
469 color: var(--ink-2);
470 max-width: 76ch;
471}
473.math-section .katex-display {
89a240bRewrite the math section as the formula actually computed, with every term definedJeremy Magland 474 margin: 14px 0;
475}
477.defs {
478 display: grid;
479 grid-template-columns: max-content 1fr;
480 gap: 8px 18px;
481 margin: 18px 0 0;
482 max-width: 76ch;
483}
485.defs dt {
486 text-align: right;
487 color: var(--ink);
488}
490.defs dd {
491 margin: 0;
492 color: var(--ink-2);