1* {
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: #e2e5ea;
16 background: #161a22;
17}
19.app {
20 display: flex;
21 height: 100%;
22}
24.sidebar {
25 width: 340px;
26 flex-shrink: 0;
27 overflow-y: auto;
28 padding: 20px;
29 background: #1e2128;
30 border-right: 1px solid #2c313a;
31}
33.sidebar h1 {
34 margin: 0 0 4px;
35 font-size: 20px;
36 color: #fff;
37}
39.tagline {
40 margin: 0 0 10px;
41 color: #9aa1ac;
42 font-size: 13px;
43 line-height: 1.45;
44}
46.tagline a {
47 color: #9b8bff;
48}
50.engine-status {
51 margin: 0 0 16px;
52 font-size: 12px;
53 color: #9aa1ac;
54}
56.engine-status.loading {
57 color: #ecc477;
58}
59.engine-status.ready {
60 color: #8fd7ab;
61}
62.engine-status.error {
63 color: #f2a3a3;
64}
66.sidebar section {
67 margin-bottom: 22px;
68}
70.sidebar h2 {
71 font-size: 12px;
72 text-transform: uppercase;
73 letter-spacing: 0.08em;
74 color: #7f8794;
75 margin: 0 0 8px;
76}
78button {
79 font: inherit;
80 padding: 7px 12px;
81 border-radius: 6px;
82 border: 1px solid #3a4150;
83 background: #2a2f39;
84 color: #e2e5ea;
85 cursor: pointer;
86}
88button:hover:not(:disabled) {
89 background: #333947;
90}
92button:disabled {
93 opacity: 0.5;
94 cursor: default;
95}
97.primitive-grid {
98 display: grid;
99 grid-template-columns: 1fr 1fr;
100 gap: 8px;
101 margin-bottom: 10px;
102}
104.button-row {
105 display: flex;
106 gap: 8px;
107}
109.button-row button {
110 flex: 1;
111}
113button.primary {
114 margin-top: 10px;
115 width: 100%;
116 background: #6a44c8;
117 border-color: #6a44c8;
118 color: #fff;
119 font-weight: 600;
120}
122button.primary:hover:not(:disabled) {
123 background: #7a54d8;
124}
126button.subtle {
127 margin-top: 8px;
128 padding: 3px 8px;
129 font-size: 12px;
130 color: #9aa1ac;
131 background: transparent;
132 border-color: #2c313a;
133}
135select {
136 font: inherit;
137 width: 100%;
138 padding: 7px 8px;
139 border-radius: 6px;
140 border: 1px solid #3a4150;
141 background: #2a2f39;
142 color: #e2e5ea;
143}
145.error {
146 margin-top: 10px;
147 padding: 8px 10px;
148 border-radius: 6px;
149 background: rgba(220, 70, 70, 0.12);
150 border: 1px solid rgba(220, 70, 70, 0.45);
151 color: #f2a3a3;
152 font-size: 13px;
153 white-space: pre-wrap;
154}
156.busy {
157 margin-top: 10px;
158 color: #ecc477;
159 font-size: 13px;
160}
162.mesh-info {
163 font-size: 13px;
164 line-height: 1.55;
165}
167.mesh-info .source {
168 color: #7f8794;
169 font-size: 12px;
170 margin-bottom: 4px;
171 overflow-wrap: anywhere;
172}
174.chip {
175 display: inline-block;
176 margin-top: 8px;
177 padding: 2px 10px;
178 border-radius: 999px;
179 font-size: 12px;
180 border: 1px solid #3a4150;
181 color: #b3b9c2;
182}
184.chip.on {
185 color: #a8d5b8;
186 border-color: rgba(80, 190, 120, 0.5);
187}
189.view-toolbar {
190 display: flex;
191 flex-wrap: wrap;
192 gap: 0;
193 border: 1px solid #3a4150;
194 border-radius: 6px;
195 overflow: hidden;
196}
198.view-overlay {
199 position: absolute;
200 top: 12px;
201 right: 12px;
202 display: flex;
203 gap: 8px;
204}
206.view-overlay .view-toolbar {
207 flex-wrap: nowrap;
208 background: rgba(30, 33, 40, 0.88);
209}
211.view-overlay .view-toolbar button {
212 flex: 0 0 auto;
213 white-space: nowrap;
214}
216.view-toolbar button {
217 flex: 1 1 auto;
218 border: none;
219 border-radius: 0;
220 background: transparent;
221 padding: 6px 8px;
222 font-size: 12px;
223 color: #9aa1ac;
224}
226.view-toolbar button + button {
227 border-left: 1px solid #3a4150;
228}
230.view-toolbar button.active {
231 background: rgba(106, 68, 200, 0.4);
232 color: #e7ddff;
233}
235.slider {
236 display: block;
237 margin: 12px 0 0;
238}
240.slider > span {
241 display: block;
242 font-size: 12.5px;
243 color: #9aa1ac;
244 margin-bottom: 4px;
245}
247.slider input[type='range'] {
248 width: 100%;
249}
251.footnote {
252 margin: 8px 0 0;
253 color: #6b7280;
254 font-size: 12px;
255 line-height: 1.45;
256}
258.viewport {
259 flex: 1;
260 min-width: 0;
261 position: relative;
262}
264.view-placeholder {
265 position: absolute;
266 inset: 0;
267 display: flex;
268 align-items: center;
269 justify-content: center;
270 color: #6b7280;
271 font-size: 15px;
272 pointer-events: none;
273}