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-toolbar button {
199 flex: 1 1 auto;
200 border: none;
201 border-radius: 0;
202 background: transparent;
203 padding: 6px 8px;
204 font-size: 12px;
205 color: #9aa1ac;
206}
208.view-toolbar button + button {
209 border-left: 1px solid #3a4150;
210}
212.view-toolbar button.active {
213 background: rgba(106, 68, 200, 0.4);
214 color: #e7ddff;
215}
217.slider {
218 display: block;
219 margin: 12px 0 0;
220}
222.slider > span {
223 display: block;
224 font-size: 12.5px;
225 color: #9aa1ac;
226 margin-bottom: 4px;
227}
229.slider input[type='range'] {
230 width: 100%;
231}
233.footnote {
234 margin: 8px 0 0;
235 color: #6b7280;
236 font-size: 12px;
237 line-height: 1.45;
238}
240.viewport {
241 flex: 1;
242 min-width: 0;
243 position: relative;
244}
246.view-placeholder {
247 position: absolute;
248 inset: 0;
249 display: flex;
250 align-items: center;
251 justify-content: center;
252 color: #6b7280;
253 font-size: 15px;
254 pointer-events: none;
255}