1:root {
2 --surface: #1a1a19;
3 --surface-2: #201f1e;
4 --surface-3: #262523;
5 --line: #3c3c38;
6 --line-soft: #2b2a28;
7 --text: #e8e6df;
8 --text-2: #c3c2b7;
9 --muted: #8a8880;
10 --accent: #3987e5;
11 --warn: #c98500;
12 --bad: #e66767;
13 color-scheme: dark;
14}
16* {
17 box-sizing: border-box;
18}
20html,
21body {
22 margin: 0;
23 padding: 0;
24 background: var(--surface);
25 color: var(--text);
26 font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
27 font-size: 15px;
28 line-height: 1.6;
29}
31a {
32 color: var(--accent);
33}
35code,
36pre,
37.mono {
38 font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
39}
41.app {
42 display: flex;
43 align-items: flex-start;
44 min-height: 100vh;
45}
47/* ---------- sidebar ---------- */
49.sidebar {
50 position: sticky;
51 top: 0;
52 flex: 0 0 250px;
53 height: 100vh;
54 overflow-y: auto;
55 padding: 20px 14px 24px 20px;
56 border-right: 1px solid var(--line-soft);
57 background: var(--surface-2);
58}
60.brand-title {
61 font-size: 16px;
62 font-weight: 600;
63 letter-spacing: 0.01em;
64}
66.brand-sub {
67 font-size: 12px;
68 color: var(--muted);
69 margin-bottom: 18px;
70}
72.nav-part-title {
73 font-size: 11px;
74 text-transform: uppercase;
75 letter-spacing: 0.08em;
76 color: var(--muted);
77 margin: 16px 0 4px;
78}
80.sidebar ol {
81 list-style: none;
82 margin: 0;
83 padding: 0;
84}
86.nav-item {
87 display: flex;
88 gap: 8px;
89 align-items: baseline;
90 width: 100%;
91 text-align: left;
92 background: none;
93 border: none;
94 color: var(--text-2);
95 padding: 4px 6px;
96 border-radius: 5px;
97 font: inherit;
98 font-size: 13.5px;
99 line-height: 1.35;
100 cursor: pointer;
101}
103.nav-item:hover {
104 background: var(--surface-3);
105 color: var(--text);
106}
108.nav-item.active {
109 background: var(--surface-3);
110 color: var(--text);
111 box-shadow: inset 2px 0 0 var(--accent);
112}
114.nav-num {
115 display: inline-block;
116 min-width: 14px;
117 color: var(--muted);
118 font-variant-numeric: tabular-nums;
119 font-size: 12px;
120}
122.nav-foot {
123 margin-top: 26px;
124 font-size: 11.5px;
125 line-height: 1.5;
126 color: var(--muted);
127}
129/* ---------- main column ---------- */
131.main {
132 flex: 1 1 auto;
133 min-width: 0;
134 padding: 28px 32px 80px;
135}
137.chapter {
138 max-width: 860px;
139 margin: 0 auto;
140}
142.chapter-part {
143 font-size: 11px;
144 text-transform: uppercase;
145 letter-spacing: 0.08em;
146 color: var(--muted);
147}
149.chapter-head h2 {
150 margin: 4px 0 6px;
151 font-size: 25px;
152 font-weight: 600;
153 letter-spacing: -0.01em;
154}
156.chapter-blurb {
157 margin: 0 0 8px;
158 color: var(--text-2);
159}
161.prose {
162 max-width: 720px;
163}
165.prose h3 {
166 font-size: 17px;
167 margin: 26px 0 6px;
168}
170.prose p {
171 margin: 12px 0;
172}
174.prose ul,
175.prose ol {
176 padding-left: 22px;
177}
179.prose li {
180 margin: 5px 0;
181}
183.prose code {
184 background: var(--surface-3);
185 padding: 1px 4px;
186 border-radius: 3px;
187 font-size: 13px;
188}
190.prose blockquote {
191 margin: 14px 0;
192 padding: 2px 14px;
193 border-left: 2px solid var(--line);
194 color: var(--text-2);
195}
197.prose table {
198 border-collapse: collapse;
199 font-size: 13.5px;
200 margin: 12px 0;
201}
203.prose th,
204.prose td {
205 border-bottom: 1px solid var(--line-soft);
206 padding: 4px 12px 4px 0;
207 text-align: left;
208 font-variant-numeric: tabular-nums;
209}
211.katex-display {
212 overflow-x: auto;
213 overflow-y: hidden;
214 padding: 2px 0;
215}
217/* ---------- labs ---------- */
219.lab {
220 margin: 24px 0 30px;
221 padding: 14px 16px 16px;
222 border: 1px solid var(--line-soft);
223 border-radius: 8px;
224 background: var(--surface-2);
225}
227.lab-head h3 {
228 margin: 0;
229 font-size: 15px;
230 font-weight: 600;
231}
233.lab-caption {
234 margin: 2px 0 0;
235 font-size: 13px;
236 color: var(--muted);
237}
239.controls {
240 display: flex;
241 flex-wrap: wrap;
242 gap: 10px 20px;
243 margin: 12px 0 4px;
244}
246.control {
247 display: flex;
248 flex-direction: column;
249 gap: 2px;
250 font-size: 12px;
251}
253.control-toggle {
254 flex-direction: row;
255 align-items: center;
256 gap: 6px;
257}
259.control-label {
260 color: var(--muted);
261}
263.control-value {
264 color: var(--text);
265 font-variant-numeric: tabular-nums;
266}
268.control input[type='range'] {
269 width: 150px;
270 accent-color: var(--accent);
271}
273.control select {
274 background: var(--surface-3);
275 color: var(--text);
276 border: 1px solid var(--line);
277 border-radius: 4px;
278 padding: 2px 6px;
279 font: inherit;
280 font-size: 12.5px;
281}
283.lab-bar {
284 display: flex;
285 align-items: center;
286 gap: 14px;
287 margin: 10px 0 6px;
288 flex-wrap: wrap;
289}
291.lab-bar-gap {
292 flex: 1 1 auto;
293}
295button {
296 font: inherit;
297 font-size: 12.5px;
298 padding: 3px 12px;
299 border-radius: 5px;
300 border: 1px solid var(--line);
301 background: var(--surface-3);
302 color: var(--text);
303 cursor: pointer;
304}
306button:hover:not(:disabled) {
307 border-color: var(--muted);
308}
310button:disabled {
311 opacity: 0.5;
312 cursor: default;
313}
315button.primary {
316 background: #1c5cab;
317 border-color: #256abf;
318}
320button.ghost {
321 background: none;
322 border-color: transparent;
323 color: var(--muted);
324}
326button.ghost:hover {
327 color: var(--text);
328}
330.stat {
331 display: flex;
332 flex-direction: column;
333 line-height: 1.25;
334}
336.stat-label {
337 font-size: 10.5px;
338 text-transform: uppercase;
339 letter-spacing: 0.06em;
340 color: var(--muted);
341}
343.stat-value {
344 font-size: 13px;
345 font-variant-numeric: tabular-nums;
346 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
347}
349.warn {
350 color: var(--warn);
351 font-size: 12px;
352}
354.lab-error {
355 color: var(--bad);
356 background: #2a1d1d;
357 border: 1px solid #4a2b2b;
358 border-radius: 6px;
359 padding: 8px 10px;
360 font-size: 12.5px;
361 white-space: pre-wrap;
362 overflow-x: auto;
363}
365.lab-log {
366 background: var(--surface-3);
367 border-radius: 6px;
368 padding: 8px 10px;
369 font-size: 12px;
370 max-height: 260px;
371 overflow: auto;
372 white-space: pre;
373 color: var(--text-2);
374}
376.lab-placeholder {
377 color: var(--muted);
378 font-size: 13px;
379 padding: 26px 0;
380 text-align: center;
381}
383.lab-figures {
384 display: flex;
385 flex-direction: column;
386 gap: 6px;
387}
389.figure-row {
390 display: flex;
391 flex-wrap: wrap;
392 gap: 10px;
393}
395.figure-row > * {
396 flex: 1 1 320px;
397 min-width: 300px;
398}
400.lab-editor {
401 margin-top: 10px;
402 border: 1px solid var(--line-soft);
403 border-radius: 6px;
404 overflow: hidden;
405}
407.lab-editor-bar {
408 display: flex;
409 align-items: center;
410 gap: 10px;
411 padding: 4px 8px;
412 font-size: 12px;
413 color: var(--muted);
414 background: var(--surface-3);
415}
417.editor-host .cm-editor {
418 max-height: 460px;
419 font-size: 12.5px;
420}
422/* ---------- static figures ---------- */
424.static-figure {
425 margin: 22px 0;
426 max-width: 720px;
427}
429.static-figure figcaption {
430 margin-top: 8px;
431 font-size: 12.5px;
432 line-height: 1.5;
433 color: var(--muted);
434}
436/* ---------- plots ---------- */
438.plot-host {
439 width: 100%;
440}
442.plot-title {
443 font-size: 12px;
444 color: var(--text-2);
445 margin: 6px 0 -4px;
446}
448.legend {
449 display: flex;
450 flex-wrap: wrap;
451 gap: 4px 16px;
452 font-size: 12px;
453 color: var(--text-2);
454 margin: -4px 0 6px 44px;
455}
457.legend-item {
458 display: inline-flex;
459 align-items: center;
460 gap: 5px;
461}
463.legend-value {
464 color: var(--muted);
465 font-variant-numeric: tabular-nums;
466}
468/* ---------- tables of numbers ---------- */
470.numtable {
471 border-collapse: collapse;
472 font-size: 12.5px;
473 font-variant-numeric: tabular-nums;
474 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
475 margin: 4px 0 2px;
476}
478.numtable th {
479 text-align: right;
480 color: var(--muted);
481 font-weight: 500;
482 padding: 2px 10px 2px 0;
483 border-bottom: 1px solid var(--line-soft);
484}
486.numtable td {
487 text-align: right;
488 padding: 1px 10px 1px 0;
489}
491/* ---------- library ---------- */
493.lib-file {
494 border-bottom: 1px solid var(--line-soft);
495}
497.lib-name {
498 background: none;
499 border: none;
500 color: var(--text);
501 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
502 font-size: 13px;
503 padding: 6px 0;
504 cursor: pointer;
505}
507.lib-src {
508 background: var(--surface-2);
509 border-radius: 6px;
510 padding: 10px 12px;
511 font-size: 12.5px;
512 overflow-x: auto;
513 color: var(--text-2);
514}
516.pager {
517 display: flex;
518 max-width: 860px;
519 margin: 30px auto 0;
520 padding-top: 14px;
521 border-top: 1px solid var(--line-soft);
522}
524@media (max-width: 900px) {
525 .app {
526 flex-direction: column;
527 }
529 .sidebar {
530 position: static;
531 width: 100%;
532 height: auto;
533 flex: none;
534 border-right: none;
535 border-bottom: 1px solid var(--line-soft);
536 }
538 .main {
539 padding: 18px 14px 60px;
540 }
541}