1:root {
2 --bg: #0f1115;
3 --panel: #151a21;
4 --panel-2: #12161d;
5 --border: #262d38;
6 --text: #e6e9ef;
7 --text-dim: #8b95a5;
8 --muted: #898781;
9 --accent: #3987e5;
10 --good: #0ca30c;
11 --bad: #d03b3b;
12 color-scheme: dark;
13}
15* {
16 box-sizing: border-box;
17}
19html,
20body,
21#root {
22 height: 100%;
23 margin: 0;
24}
26body {
27 background: var(--bg);
28 color: var(--text);
29 font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
30 font-size: 14px;
31 overflow: hidden;
32}
34a {
35 color: var(--accent);
36}
38button {
39 font: inherit;
40 color: inherit;
41 background: #1d242e;
42 border: 1px solid var(--border);
43 border-radius: 6px;
44 padding: 5px 12px;
45 cursor: pointer;
46 white-space: nowrap;
47}
48button:hover:not(:disabled) {
49 background: #242d3a;
50}
51button:disabled {
52 opacity: 0.45;
53 cursor: default;
54}
55button.primary {
56 background: #1d4ed8;
57 border-color: #2563eb;
58}
59button.primary:hover:not(:disabled) {
60 background: #2158e8;
61}
62button.ghost {
63 background: transparent;
64 padding: 3px 9px;
65 font-size: 12px;
66 color: var(--text-dim);
67}
69select,
70input[type='number'],
71input.expr {
72 font: inherit;
73 color: inherit;
74 background: #1d242e;
75 border: 1px solid var(--border);
76 border-radius: 6px;
77 padding: 4px 8px;
78}
79input[type='number'] {
80 width: 66px;
81}
82input.expr {
83 width: 100%;
84 font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
85 font-size: 12.5px;
86}
87input[type='range'] {
88 width: 100%;
89 accent-color: var(--accent);
90}
92.app {
93 display: flex;
94 flex-direction: column;
95 height: 100%;
96}
98/* ── header ───────────────────────────────────────────── */
99.header {
100 display: flex;
101 align-items: flex-start;
102 justify-content: space-between;
103 gap: 16px;
104 padding: 10px 16px;
105 border-bottom: 1px solid var(--border);
106 background: var(--panel-2);
107}
108.header h1 {
109 margin: 0;
110 font-size: 16px;
111 font-weight: 650;
112 letter-spacing: 0.01em;
113}
114.header p {
115 margin: 2px 0 0;
116 font-size: 12.5px;
117 color: var(--text-dim);
118}
119.repo-link {
120 font-size: 12.5px;
121 white-space: nowrap;
122}
124/* ── the collapsed-editor strip ───────────────────────── */
125.editor-strip {
126 display: flex;
127 align-items: center;
128 gap: 9px;
129 width: 100%;
130 text-align: left;
131 background: var(--panel-2);
132 border: none;
133 border-bottom: 1px solid var(--border);
134 border-radius: 0;
135 padding: 7px 16px;
136 font-size: 12.5px;
137 color: var(--text-dim);
138}
139.editor-strip:hover:not(:disabled) {
140 background: #1a2029;
141 color: var(--text);
142}
143.strip-note {
144 color: #c98500;
145}
146.strip-alert {
147 margin-left: auto;
148 color: #ff8f8f;
149 font-weight: 600;
150}
152/* ── two columns ──────────────────────────────────────── */
153.body {
154 display: flex;
155 flex: 1;
156 min-height: 0;
157}
158.left {
159 width: 42%;
160 min-width: 340px;
161 max-width: 620px;
162 display: flex;
163 flex-direction: column;
164 min-height: 0;
165 border-right: 1px solid var(--border);
166 background: var(--panel-2);
167}
168.right {
169 flex: 1;
170 display: flex;
171 flex-direction: column;
172 min-width: 0;
173 min-height: 0;
174}
176/* ── script pane ──────────────────────────────────────── */
177.script-head {
178 display: flex;
179 align-items: flex-end;
180 justify-content: space-between;
181 gap: 10px;
182 padding: 10px 12px 6px;
183}
184.script-actions {
185 display: flex;
186 align-items: center;
187 gap: 6px;
188}
189.method-blurb {
190 margin: 0;
191 padding: 0 12px 8px;
192 font-size: 12.5px;
193 color: var(--text-dim);
194 line-height: 1.45;
195}
196.method-blurb.edited {
197 color: #c98500;
198}
199.editor-host {
200 flex: 1;
201 min-height: 0;
202 overflow: hidden;
203 border-top: 1px solid var(--border);
204 border-bottom: 1px solid var(--border);
205}
206.editor-host .cm-editor {
207 height: 100%;
208 font-size: 12.5px;
209}
210.editor-host .cm-scroller {
211 font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
212}
214.contract {
215 padding: 8px 12px;
216 font-size: 12px;
217 color: var(--text-dim);
218 display: flex;
219 flex-wrap: wrap;
220 gap: 6px 10px;
221 align-items: baseline;
222}
223.contract-head {
224 font-weight: 600;
225 color: var(--text);
226 width: 100%;
227}
228.contract code {
229 font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
230 background: #1d242e;
231 border: 1px solid var(--border);
232 border-radius: 4px;
233 padding: 1px 6px;
234 color: var(--text);
235}
236.contract code.opt {
237 opacity: 0.7;
238}
239.contract-note {
240 width: 100%;
241 font-size: 11.5px;
242}
244.error-box {
245 margin: 0 12px 12px;
246 border: 1px solid #5b2626;
247 background: #1e1416;
248 border-radius: 6px;
249 padding: 8px 10px;
250 max-height: 200px;
251 overflow: auto;
252}
253.error-head {
254 font-weight: 600;
255 color: #ff8f8f;
256 margin-bottom: 4px;
257 font-size: 12.5px;
258}
259.error-box pre {
260 margin: 0;
261 font-size: 12px;
262 white-space: pre-wrap;
263 color: #e3b7b7;
264}
265.console {
266 margin: 0 12px 12px;
267 font-size: 12px;
268 color: var(--text-dim);
269}
270.console pre {
271 margin: 4px 0 0;
272 max-height: 140px;
273 overflow: auto;
274 white-space: pre-wrap;
275}
277/* ── tabs ─────────────────────────────────────────────── */
278.tabs {
279 display: flex;
280 align-items: center;
281 gap: 2px;
282 padding: 8px 14px 0;
283 border-bottom: 1px solid var(--border);
284}
285.tab {
286 background: transparent;
287 border: 1px solid transparent;
288 border-bottom: none;
289 border-radius: 6px 6px 0 0;
290 padding: 6px 13px;
291 color: var(--text-dim);
292 margin-bottom: -1px;
293}
294.tab:hover:not(.on) {
295 background: #1a2029;
296 color: var(--text);
297}
298.tab.on {
299 background: var(--panel);
300 border-color: var(--border);
301 border-bottom-color: var(--panel);
302 color: var(--text);
303 font-weight: 600;
304}
305.run-status {
306 margin-left: auto;
307 font-size: 11.5px;
308 color: var(--muted);
309 font-variant-numeric: tabular-nums;
310 padding-bottom: 6px;
311}
313/* ── controls row ─────────────────────────────────────── */
314.controls,
315.conv-controls {
316 display: flex;
317 flex-wrap: wrap;
318 align-items: flex-end;
319 gap: 10px 18px;
320 padding: 10px 14px;
321 border-bottom: 1px solid var(--border);
322 background: var(--panel-2);
323}
324.conv-controls {
325 border-bottom: none;
326 background: transparent;
327 padding: 4px 0 12px;
328}
329.field {
330 display: flex;
331 flex-direction: column;
332 gap: 4px;
333}
334.field.grow {
335 flex: 1;
336 min-width: 160px;
337}
338.field-label {
339 font-size: 11.5px;
340 color: var(--muted);
341}
342.field-label b {
343 color: var(--text);
344 font-variant-numeric: tabular-nums;
345}
346.chips {
347 display: flex;
348 gap: 4px;
349 flex-wrap: wrap;
350}
351.chip {
352 padding: 3px 10px;
353 font-size: 12.5px;
354 color: var(--text-dim);
355 background: #1a2029;
356}
357.chip.on {
358 background: #1d4ed8;
359 border-color: #2563eb;
360 color: #fff;
361}
362/* a toggle that adds a plot series: the swatch previews the curve's colour */
363.chip.tone {
364 display: inline-flex;
365 align-items: center;
366 gap: 7px;
367}
368.chip.tone .swatch {
369 width: 14px;
370 height: 3px;
371 border-radius: 2px;
372 background: var(--tone);
373 flex: none;
374}
375.chip.tone.on {
376 background: color-mix(in srgb, var(--tone) 20%, #151a21);
377 border-color: var(--tone);
378 color: var(--text);
379}
380.more-toggle {
381 align-self: flex-end;
382 margin-bottom: 2px;
383}
384.interval {
385 display: flex;
386 align-items: center;
387 gap: 6px;
388 font-size: 12px;
389 color: var(--muted);
390}
391.check {
392 display: inline-flex;
393 align-items: center;
394 gap: 6px;
395 font-size: 12.5px;
396 color: var(--text-dim);
397 cursor: pointer;
398}
399.slider-label {
400 display: flex;
401 flex-direction: column;
402 gap: 4px;
403 flex: 1;
404 min-width: 220px;
405 font-size: 11.5px;
406 color: var(--muted);
407}
408.slider-label b {
409 color: var(--text);
410 font-variant-numeric: tabular-nums;
411}
413/* ── panels ───────────────────────────────────────────── */
414.panel-scroll {
415 flex: 1;
416 min-height: 0;
417 overflow-y: auto;
418 background: var(--panel);
419}
420.panel {
421 padding: 14px 16px 40px;
422 max-width: 1000px;
423 /* centred, so the full-width layout with the editor collapsed stays balanced */
424 margin: 0 auto;
425}
426.panel-lede {
427 margin: 0 0 12px;
428 font-size: 13px;
429 line-height: 1.55;
430 color: var(--text-dim);
431}
432.panel-note {
433 margin: 0 0 8px;
434 font-size: 12.5px;
435 line-height: 1.5;
436 color: var(--text-dim);
437}
438.panel-note.muted {
439 color: var(--muted);
440}
441/* the paper-level detail, folded away until asked for */
442.more {
443 margin: -4px 0 12px;
444 font-size: 12.5px;
445}
446.more summary {
447 cursor: pointer;
448 width: fit-content;
449 font-size: 12px;
450 color: var(--accent);
451 user-select: none;
452}
453.more summary:hover {
454 text-decoration: underline;
455}
456.more-body {
457 color: var(--text-dim);
458 line-height: 1.5;
459}
460.more-body p {
461 margin: 4px 0 0;
462}
463h4.sub {
464 margin: 22px 0 6px;
465 font-size: 13px;
466 font-weight: 650;
467 color: var(--text);
468 border-top: 1px solid var(--border);
469 padding-top: 14px;
470}
471.row-controls {
472 display: flex;
473 gap: 16px;
474 align-items: center;
475 flex-wrap: wrap;
476 margin-bottom: 8px;
477}
479.plot-host {
480 position: relative;
481 width: 100%;
482 margin-bottom: 4px;
483}
484.plot-host svg {
485 display: block;
486 overflow: visible;
487}
489.legend {
490 display: flex;
491 flex-wrap: wrap;
492 gap: 6px 16px;
493 margin: 2px 0 6px;
494 font-size: 12px;
495 color: var(--text-dim);
496}
497.legend-item {
498 display: inline-flex;
499 align-items: center;
500 gap: 5px;
501}
502.legend-value {
503 color: var(--text);
504 font-variant-numeric: tabular-nums;
505 font-size: 11.5px;
506}
508.readout {
509 display: flex;
510 gap: 6px 18px;
511 font-size: 12px;
512 font-variant-numeric: tabular-nums;
513 color: var(--text-dim);
514 padding: 4px 0 2px;
515 /* fixed height: this row must never change size on hover, or everything
516 below it jumps */
517 height: 24px;
518 overflow: hidden;
519 white-space: nowrap;
520}
521.readout b {
522 color: inherit;
523 font-weight: 600;
524}
525.readout-hint {
526 color: var(--muted);
527}
529.tooltip {
530 position: absolute;
531 top: 8px;
532 right: 8px;
533 background: #1a2029;
534 border: 1px solid var(--border);
535 border-radius: 6px;
536 padding: 4px 9px;
537 font-size: 12px;
538 font-variant-numeric: tabular-nums;
539 pointer-events: none;
540}
542.verdict {
543 display: flex;
544 gap: 10px;
545 align-items: flex-start;
546 border-radius: 8px;
547 padding: 9px 12px;
548 margin-bottom: 12px;
549 font-size: 13px;
550 line-height: 1.5;
551 border: 1px solid var(--border);
552}
553.verdict.good {
554 border-color: #1b4b1b;
555 background: #10190f;
556}
557.verdict.bad {
558 border-color: #5b2626;
559 background: #1e1416;
560}
561.verdict-mark {
562 font-size: 15px;
563 line-height: 1.3;
564}
565.verdict.good .verdict-mark {
566 color: var(--good);
567}
568.verdict.bad .verdict-mark {
569 color: var(--bad);
570}
572.weights-int {
573 font-size: 12.5px;
574 color: var(--text-dim);
575 margin-top: 4px;
576}
577.weights-int-values {
578 display: flex;
579 flex-wrap: wrap;
580 gap: 4px;
581 margin-top: 6px;
582}
583.weights-int-values span {
584 min-width: 26px;
585 text-align: center;
586 padding: 2px 5px;
587 background: #1a2029;
588 border: 1px solid var(--border);
589 border-radius: 4px;
590 font-variant-numeric: tabular-nums;
591 color: var(--text);
592}
594.stale-note {
595 font-size: 12px;
596 color: #c98500;
597 margin-bottom: 6px;
598}
600/* ── convergence table ────────────────────────────────── */
601.table-wrap {
602 overflow-x: auto;
603 margin: 6px 0 10px;
604}
605.conv-table {
606 border-collapse: collapse;
607 font-size: 12px;
608 font-variant-numeric: tabular-nums;
609 white-space: nowrap;
610}
611.conv-table th,
612.conv-table td {
613 padding: 3px 10px;
614 text-align: right;
615 border-bottom: 1px solid var(--border);
616}
617.conv-table thead th {
618 color: var(--muted);
619 font-weight: 600;
620 text-align: center;
621}
622.conv-table tr.sub-head th {
623 font-weight: 400;
624 font-size: 11px;
625}
626.conv-table td.n-cell {
627 color: var(--text);
628 font-weight: 600;
629 text-align: left;
630}
631.conv-table td.ord {
632 color: var(--muted);
633}
635/* ── narrow screens: stack the two columns ────────────── */
636@media (max-width: 900px) {
637 body {
638 overflow: auto;
639 }
640 .body {
641 flex-direction: column;
642 }
643 .left {
644 width: 100%;
645 max-width: none;
646 border-right: none;
647 border-bottom: 1px solid var(--border);
648 }
649 .editor-host {
650 height: 320px;
651 flex: none;
652 }
653 .panel-scroll {
654 overflow: visible;
655 }
656}