1.app {
2 display: flex;
3 height: 100%;
4}
6.sidebar {
7 width: 340px;
8 flex-shrink: 0;
9 overflow-y: auto;
10 padding: 20px;
11 background: #1e2128;
12 border-right: 1px solid #2c313a;
13}
15.sidebar h1 {
16 margin: 0 0 4px;
17 font-size: 20px;
18 color: #fff;
19}
21.tagline {
22 margin: 0 0 10px;
23 color: #9aa1ac;
24 font-size: 13px;
25}
27.tagline a {
28 color: #7fb0e0;
29}
31.engine-status {
32 margin: 0 0 16px;
33 font-size: 12px;
34}
36.engine-status.loading {
37 color: #ecc477;
38}
40.engine-status.ready {
41 color: #8fd7ab;
42}
44.engine-status.error {
45 color: #f2a3a3;
46}
48.sidebar section {
49 margin-bottom: 22px;
50}
52.sidebar h2 {
53 font-size: 12px;
54 text-transform: uppercase;
55 letter-spacing: 0.08em;
56 color: #7f8794;
57 margin: 0 0 8px;
58}
60.load-buttons {
61 display: flex;
62 flex-direction: column;
63 gap: 8px;
64}
66.load-buttons > button {
67 width: 100%;
68}
70.button-row {
71 display: flex;
72 gap: 8px;
73}
75.button-row button {
76 flex: 1;
77}
79button {
80 font: inherit;
81 padding: 7px 12px;
82 border-radius: 6px;
83 border: 1px solid #3a4150;
84 background: #2a2f39;
85 color: #e2e5ea;
86 cursor: pointer;
87}
89button:hover {
90 background: #333947;
91}
93button.primary {
94 margin-top: 10px;
95 width: 100%;
96 background: #2f6fb3;
97 border-color: #2f6fb3;
98 color: #fff;
99 font-weight: 600;
100}
102button.primary:hover {
103 background: #3a80c9;
104}
106select {
107 font: inherit;
108 width: 100%;
109 padding: 7px 8px;
110 border-radius: 6px;
111 border: 1px solid #3a4150;
112 background: #2a2f39;
113 color: #e2e5ea;
114}
116.error {
117 margin-top: 10px;
118 padding: 8px 10px;
119 border-radius: 6px;
120 background: rgba(220, 70, 70, 0.12);
121 border: 1px solid rgba(220, 70, 70, 0.45);
122 color: #f2a3a3;
123 font-size: 13px;
124}
126.warning {
127 margin-top: 10px;
128 padding: 8px 10px;
129 border-radius: 6px;
130 background: rgba(230, 170, 50, 0.1);
131 border: 1px solid rgba(230, 170, 50, 0.45);
132 color: #ecc477;
133 font-size: 13px;
134}
136.ok {
137 margin-top: 10px;
138 padding: 8px 10px;
139 border-radius: 6px;
140 background: rgba(80, 190, 120, 0.1);
141 border: 1px solid rgba(80, 190, 120, 0.4);
142 color: #8fd7ab;
143 font-size: 13px;
144}
146.mesh-info .source {
147 color: #7f8794;
148 font-size: 12px;
149 margin-bottom: 4px;
150 overflow-wrap: anywhere;
151}
153.chips {
154 display: flex;
155 flex-wrap: wrap;
156 gap: 6px;
157 margin-top: 8px;
158}
160.chip {
161 padding: 2px 8px;
162 border-radius: 999px;
163 font-size: 12px;
164 border: 1px solid #3a4150;
165 color: #6b7280;
166 text-decoration: line-through;
167}
169.chip.on {
170 color: #a8d5b8;
171 border-color: rgba(80, 190, 120, 0.5);
172 text-decoration: none;
173}
175.format-blurb {
176 margin: 8px 0 0;
177 color: #9aa1ac;
178 font-size: 13px;
179}
181.format-table {
182 width: 100%;
183 border-collapse: collapse;
184 font-size: 13px;
185}
187.format-table th,
188.format-table td {
189 text-align: left;
190 padding: 4px 6px;
191 border-bottom: 1px solid #2c313a;
192}
194.format-table th {
195 color: #7f8794;
196 font-weight: 500;
197}
199.format-table tbody tr {
200 cursor: pointer;
201}
203.format-table tbody tr:hover {
204 background: #262b34;
205}
207.format-table tbody tr.selected {
208 background: rgba(47, 111, 179, 0.18);
209}
211.format-table tbody tr.selected td:first-child {
212 color: #9cc4ea;
213}
215.format-table th:not(:first-child),
216.format-table td:not(:first-child) {
217 text-align: center;
218}
220.ext {
221 color: #7f8794;
222 font-size: 12px;
223}
225.format-table td.size {
226 color: #9aa1ac;
227 white-space: nowrap;
228}
230button.subtle {
231 margin-top: 8px;
232 padding: 3px 8px;
233 font-size: 12px;
234 color: #9aa1ac;
235 background: transparent;
236 border-color: #2c313a;
237}
239button.subtle:hover {
240 background: #2a2f39;
241}
243button.subtle:disabled {
244 opacity: 0.5;
245 cursor: default;
246}
248input.share-url {
249 font: inherit;
250 font-size: 12px;
251 display: block;
252 width: 100%;
253 box-sizing: border-box;
254 margin-top: 8px;
255 padding: 5px 8px;
256 border-radius: 6px;
257 border: 1px solid #3a4150;
258 background: #2a2f39;
259 color: #e2e5ea;
260}
262.footnote {
263 margin: 8px 0 0;
264 color: #6b7280;
265 font-size: 12px;
266}
268.viewport {
269 flex: 1;
270 min-width: 0;
271 position: relative;
272}
274.view-toolbar {
275 position: absolute;
276 top: 12px;
277 right: 12px;
278 z-index: 1;
279 display: flex;
280 gap: 0;
281 border: 1px solid #3a4150;
282 border-radius: 6px;
283 overflow: hidden;
284 background: rgba(30, 33, 40, 0.85);
285}
287.view-toolbar button {
288 border: none;
289 border-radius: 0;
290 background: transparent;
291 padding: 5px 10px;
292 font-size: 12px;
293 color: #9aa1ac;
294}
296.view-toolbar button + button {
297 border-left: 1px solid #3a4150;
298}
300/* separates the anaglyph toggle from the mutually-exclusive mode group */
301.view-toolbar button.sep {
302 border-left: 3px double #3a4150;
303}
305.view-toolbar button:hover {
306 background: #2a2f39;
307 color: #e2e5ea;
308}
310.view-toolbar button.active {
311 background: rgba(47, 111, 179, 0.35);
312 color: #d9e8f7;
313}
315.empty-state {
316 height: 100%;
317 display: flex;
318 flex-direction: column;
319 align-items: center;
320 justify-content: center;
321 color: #6b7280;
322}
324.empty-state p {
325 margin: 4px 0;
326}