2 box-sizing: border-box;
3}
5html,
6body,
7#root {
8 height: 100%;
9 margin: 0;
10}
12body {
13 font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
14 font-size: 14px;
15 color: #1c2330;
16 background: #f5f6f8;
17}
19.app {
20 display: flex;
21 flex-direction: column;
22 height: 100%;
23}
25header {
26 padding: 10px 18px 8px;
27 border-bottom: 1px solid #dde1e7;
28 background: #fff;
29}
31header h1 {
32 margin: 0 0 2px;
33 font-size: 19px;
34}
36header p {
37 margin: 0;
38 color: #5a6472;
39}
41a {
42 color: #1667c2;
43}
45.columns {
46 display: flex;
47 flex: 1;
48 min-height: 0;
49}
51aside {
52 width: 340px;
53 flex: none;
54 overflow-y: auto;
55 padding: 8px 16px 24px;
56 background: #fff;
57 border-right: 1px solid #dde1e7;
58}
60main {
61 flex: 1;
62 min-width: 0;
63 position: relative;
64}
66section {
67 margin-top: 14px;
68}
70section + section {
71 padding-top: 12px;
72 border-top: 1px solid #e7eaee;
73}
75section h2 {
76 font-size: 13px;
77 text-transform: uppercase;
78 letter-spacing: 0.04em;
79 color: #5a6472;
80 margin: 0 0 8px;
81}
83.row {
84 display: flex;
85 flex-wrap: wrap;
86 gap: 6px;
87}
89button,
90.button {
91 font: inherit;
92 padding: 5px 12px;
93 border: 1px solid #b9c0ca;
94 border-radius: 6px;
95 background: #f2f4f7;
96 cursor: pointer;
97 display: inline-block;
98}
100button:hover:not(:disabled),
101.button:hover {
102 background: #e6eaef;
103}
105button:disabled {
106 opacity: 0.5;
107 cursor: default;
108}
110button.solve {
111 width: 100%;
112 padding: 8px;
113 font-weight: 600;
114 background: #1667c2;
115 border-color: #1257a6;
116 color: #fff;
117}
119button.solve:hover:not(:disabled) {
120 background: #1257a6;
121}
123button.linkish {
124 border: none;
125 background: none;
126 padding: 0;
127 margin-top: 6px;
128 color: #1667c2;
129 text-decoration: underline;
130}
132.hint {
133 color: #78818d;
134 font-size: 12.5px;
135 margin: 6px 0;
136}
138.status {
139 color: #4a5462;
140 font-size: 13px;
141 margin: 8px 0 0;
142}
144.error {
145 color: #b3261e;
146 font-size: 13px;
147 margin: 8px 0 0;
148 white-space: pre-wrap;
149}
151.warn {
152 color: #8a6d00;
153 font-size: 12.5px;
154 margin-top: 3px;
155}
157.meshinfo {
158 margin-top: 10px;
159 padding: 8px 10px;
160 border: 1px solid #dde1e7;
161 border-radius: 6px;
162 background: #f8f9fb;
163 font-size: 13px;
164 min-height: 74px;
165}
167.meshinfo .status,
168.meshinfo .error {
169 margin: 0;
170}
172.placeholder {
173 color: #9aa3af;
174}
176.field {
177 display: block;
178 margin: 10px 0;
179}
181.field > span {
182 display: block;
183 font-size: 12.5px;
184 color: #4a5462;
185 margin-bottom: 4px;
186}
188.field select,
189.field input[type='text'] {
190 font: inherit;
191 width: 100%;
192 padding: 5px 8px;
193 border: 1px solid #b9c0ca;
194 border-radius: 6px;
195 background: #fff;
196}
198.field select:disabled,
199.field input:disabled {
200 background: #f2f4f7;
201 border-color: #d3d8df;
202 color: #9aa3af;
203}
205.field.inactive > span {
206 color: #9aa3af;
207}
209.pde-note {
210 min-height: 4.4em;
211}
213.solve-status {
214 min-height: 42px;
215}
217.field input[type='range'] {
218 width: 100%;
219}
221.preset-row {
222 display: flex;
223 gap: 6px;
224}
226.preset-row select {
227 width: 110px;
228 flex: none;
229 color: #5a6472;
230}
232.preset-row input {
233 flex: 1;
234 font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
235 font-size: 13px;
236}
238details summary {
239 cursor: pointer;
240 font-size: 13px;
241 color: #5a6472;
242}
244.console {
245 max-height: 200px;
246 overflow-y: auto;
247 background: #14181f;
248 color: #c7d0dc;
249 font-size: 11.5px;
250 padding: 8px;
251 border-radius: 6px;
252 white-space: pre-wrap;
253 word-break: break-word;
254}
256.view-placeholder {
257 position: absolute;
258 inset: 0;
259 display: flex;
260 align-items: center;
261 justify-content: center;
262 color: #9aa3af;
263 font-size: 15px;
264}