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/* ── two columns ──────────────────────────────────────── */
125.body {
126 display: flex;
127 flex: 1;
128 min-height: 0;
129}
130.left {
131 width: 42%;
132 min-width: 340px;
133 max-width: 620px;
134 display: flex;
135 flex-direction: column;
136 min-height: 0;
137 border-right: 1px solid var(--border);
138 background: var(--panel-2);
139}
140.right {
141 flex: 1;
142 display: flex;
143 flex-direction: column;
144 min-width: 0;
145 min-height: 0;
146}
148/* ── script pane ──────────────────────────────────────── */
149.script-head {
150 display: flex;
151 align-items: flex-end;
152 justify-content: space-between;
153 gap: 10px;
154 padding: 10px 12px 6px;
155}
156.method-blurb {
157 margin: 0;
158 padding: 0 12px 8px;
159 font-size: 12.5px;
160 color: var(--text-dim);
161 line-height: 1.45;
162}
163.method-blurb.edited {
164 color: #c98500;
165}
166.editor-host {
167 flex: 1;
168 min-height: 0;
169 overflow: hidden;
170 border-top: 1px solid var(--border);
171 border-bottom: 1px solid var(--border);
172}
173.editor-host .cm-editor {
174 height: 100%;
175 font-size: 12.5px;
176}
177.editor-host .cm-scroller {
178 font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
179}
181.contract {
182 padding: 8px 12px;
183 font-size: 12px;
184 color: var(--text-dim);
185 display: flex;
186 flex-wrap: wrap;
187 gap: 6px 10px;
188 align-items: baseline;
189}
190.contract-head {
191 font-weight: 600;
192 color: var(--text);
193 width: 100%;
194}
195.contract code {
196 font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
197 background: #1d242e;
198 border: 1px solid var(--border);
199 border-radius: 4px;
200 padding: 1px 6px;
201 color: var(--text);
202}
203.contract code.opt {
204 opacity: 0.7;
205}
206.contract-note {
207 width: 100%;
208 font-size: 11.5px;
209}
211.error-box {
212 margin: 0 12px 12px;
213 border: 1px solid #5b2626;
214 background: #1e1416;
215 border-radius: 6px;
216 padding: 8px 10px;
217 max-height: 200px;
218 overflow: auto;
219}
220.error-head {
221 font-weight: 600;
222 color: #ff8f8f;
223 margin-bottom: 4px;
224 font-size: 12.5px;
225}
226.error-box pre {
227 margin: 0;
228 font-size: 12px;
229 white-space: pre-wrap;
230 color: #e3b7b7;
231}
232.console {
233 margin: 0 12px 12px;
234 font-size: 12px;
235 color: var(--text-dim);
236}
237.console pre {
238 margin: 4px 0 0;
239 max-height: 140px;
240 overflow: auto;
241 white-space: pre-wrap;
242}
244/* ── tabs ─────────────────────────────────────────────── */
245.tabs {
246 display: flex;
247 align-items: center;
248 gap: 2px;
249 padding: 8px 14px 0;
250 border-bottom: 1px solid var(--border);
251}
252.tab {
253 background: transparent;
254 border: 1px solid transparent;
255 border-bottom: none;
256 border-radius: 6px 6px 0 0;
257 padding: 6px 13px;
258 color: var(--text-dim);
259 margin-bottom: -1px;
260}
261.tab:hover:not(.on) {
262 background: #1a2029;
263 color: var(--text);
264}
265.tab.on {
266 background: var(--panel);
267 border-color: var(--border);
268 border-bottom-color: var(--panel);
269 color: var(--text);
270 font-weight: 600;
271}
272.run-status {
273 margin-left: auto;
274 font-size: 11.5px;
275 color: var(--muted);
276 font-variant-numeric: tabular-nums;
277 padding-bottom: 6px;
278}
280/* ── controls row ─────────────────────────────────────── */
281.controls,
282.conv-controls {
283 display: flex;
284 flex-wrap: wrap;
285 align-items: flex-end;
286 gap: 10px 18px;
287 padding: 10px 14px;
288 border-bottom: 1px solid var(--border);
289 background: var(--panel-2);
290}
291.conv-controls {
292 border-bottom: none;
293 background: transparent;
294 padding: 4px 0 12px;
295}
296.field {
297 display: flex;
298 flex-direction: column;
299 gap: 4px;
300}
301.field.grow {
302 flex: 1;
303 min-width: 160px;
304}
305.field-label {
306 font-size: 11.5px;
307 color: var(--muted);
308}
309.field-label b {
310 color: var(--text);
311 font-variant-numeric: tabular-nums;
312}
313.chips {
314 display: flex;
315 gap: 4px;
316 flex-wrap: wrap;
317}
318.chip {
319 padding: 3px 10px;
320 font-size: 12.5px;
321 color: var(--text-dim);
322 background: #1a2029;
323}
324.chip.on {
325 background: #1d4ed8;
326 border-color: #2563eb;
327 color: #fff;
328}
329.interval {
330 display: flex;
331 align-items: center;
332 gap: 6px;
333 font-size: 12px;
334 color: var(--muted);
335}
336.check {
337 display: inline-flex;
338 align-items: center;
339 gap: 6px;
340 font-size: 12.5px;
341 color: var(--text-dim);
342 cursor: pointer;
343}
344.slider-label {
345 display: flex;
346 flex-direction: column;
347 gap: 4px;
348 flex: 1;
349 min-width: 220px;
350 font-size: 11.5px;
351 color: var(--muted);
352}
353.slider-label b {
354 color: var(--text);
355 font-variant-numeric: tabular-nums;
356}
358/* ── panels ───────────────────────────────────────────── */
359.panel-scroll {
360 flex: 1;
361 min-height: 0;
362 overflow-y: auto;
363 background: var(--panel);
364}
365.panel {
366 padding: 14px 16px 40px;
367 max-width: 1000px;
368}
369.panel-lede {
370 margin: 0 0 12px;
371 font-size: 13px;
372 line-height: 1.55;
373 color: var(--text-dim);
374}
375.panel-note {
376 margin: 0 0 8px;
377 font-size: 12.5px;
378 line-height: 1.5;
379 color: var(--text-dim);
380}
381.panel-note.muted {
382 color: var(--muted);
383}
384h4.sub {
385 margin: 22px 0 6px;
386 font-size: 13px;
387 font-weight: 650;
388 color: var(--text);
389 border-top: 1px solid var(--border);
390 padding-top: 14px;
391}
392.row-controls {
393 display: flex;
394 gap: 16px;
395 align-items: center;
396 flex-wrap: wrap;
397 margin-bottom: 8px;
398}
400.plot-host {
401 position: relative;
402 width: 100%;
403 margin-bottom: 4px;
404}
405.plot-host svg {
406 display: block;
407 overflow: visible;
408}
410.legend {
411 display: flex;
412 flex-wrap: wrap;
413 gap: 6px 16px;
414 margin: 2px 0 6px;
415 font-size: 12px;
416 color: var(--text-dim);
417}
418.legend-item {
419 display: inline-flex;
420 align-items: center;
421 gap: 5px;
422}
423.legend-value {
424 color: var(--text);
425 font-variant-numeric: tabular-nums;
426 font-size: 11.5px;
427}
429.readout {
430 display: flex;
431 flex-wrap: wrap;
432 gap: 6px 18px;
433 font-size: 12px;
434 font-variant-numeric: tabular-nums;
435 color: var(--text-dim);
436 padding: 4px 0 2px;
437 min-height: 22px;
438}
439.readout b {
440 color: inherit;
441 font-weight: 600;
442}
444.tooltip {
445 position: absolute;
446 top: 8px;
447 right: 8px;
448 background: #1a2029;
449 border: 1px solid var(--border);
450 border-radius: 6px;
451 padding: 4px 9px;
452 font-size: 12px;
453 font-variant-numeric: tabular-nums;
454 pointer-events: none;
455}
457.verdict {
458 display: flex;
459 gap: 10px;
460 align-items: flex-start;
461 border-radius: 8px;
462 padding: 9px 12px;
463 margin-bottom: 12px;
464 font-size: 13px;
465 line-height: 1.5;
466 border: 1px solid var(--border);
467}
468.verdict.good {
469 border-color: #1b4b1b;
470 background: #10190f;
471}
472.verdict.bad {
473 border-color: #5b2626;
474 background: #1e1416;
475}
476.verdict-mark {
477 font-size: 15px;
478 line-height: 1.3;
479}
480.verdict.good .verdict-mark {
481 color: var(--good);
482}
483.verdict.bad .verdict-mark {
484 color: var(--bad);
485}
487.weights-int {
488 font-size: 12.5px;
489 color: var(--text-dim);
490 margin-top: 4px;
491}
492.weights-int-values {
493 display: flex;
494 flex-wrap: wrap;
495 gap: 4px;
496 margin-top: 6px;
497}
498.weights-int-values span {
499 min-width: 26px;
500 text-align: center;
501 padding: 2px 5px;
502 background: #1a2029;
503 border: 1px solid var(--border);
504 border-radius: 4px;
505 font-variant-numeric: tabular-nums;
506 color: var(--text);
507}
509.stale-note {
510 font-size: 12px;
511 color: #c98500;
512 margin-bottom: 6px;
513}
515/* ── convergence table ────────────────────────────────── */
516.table-wrap {
517 overflow-x: auto;
518 margin: 6px 0 10px;
519}
520.conv-table {
521 border-collapse: collapse;
522 font-size: 12px;
523 font-variant-numeric: tabular-nums;
524 white-space: nowrap;
525}
526.conv-table th,
527.conv-table td {
528 padding: 3px 10px;
529 text-align: right;
530 border-bottom: 1px solid var(--border);
531}
532.conv-table thead th {
533 color: var(--muted);
534 font-weight: 600;
535 text-align: center;
536}
537.conv-table tr.sub-head th {
538 font-weight: 400;
539 font-size: 11px;
540}
541.conv-table td.n-cell {
542 color: var(--text);
543 font-weight: 600;
544 text-align: left;
545}
546.conv-table td.ord {
547 color: var(--muted);
548}
550/* ── narrow screens: stack the two columns ────────────── */
551@media (max-width: 900px) {
552 body {
553 overflow: auto;
554 }
555 .body {
556 flex-direction: column;
557 }
558 .left {
559 width: 100%;
560 max-width: none;
561 border-right: none;
562 border-bottom: 1px solid var(--border);
563 }
564 .editor-host {
565 height: 320px;
566 flex: none;
567 }
568 .panel-scroll {
569 overflow: visible;
570 }
571}