1:root {
2 --bg: #0f172a;
3 --panel: #1e293b;
4 --panel-2: #273449;
5 --text: #e2e8f0;
6 --muted: #94a3b8;
7 --border: #334155;
8 --accent: #38bdf8;
9 --accent-strong: #0ea5e9;
10 --danger: #f87171;
11 font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
12 color-scheme: dark;
13}
15* {
16 box-sizing: border-box;
17}
19body {
20 margin: 0;
21 background: var(--bg);
22 color: var(--text);
23}
25.app {
26 max-width: 1100px;
27 margin: 0 auto;
28 padding: 24px 20px 60px;
29}
31.app-header h1 {
32 margin: 0 0 4px;
33 font-size: 1.7rem;
34 letter-spacing: -0.02em;
35}
37.app-header p {
38 margin: 0 0 8px;
39 color: var(--muted);
40}
42a {
43 color: var(--accent);
44}
46.panel {
47 background: var(--panel);
48 border: 1px solid var(--border);
49 border-radius: 12px;
50 padding: 16px 18px;
51 margin-top: 18px;
52}
54.panel h2 {
55 margin: 0 0 12px;
56 font-size: 0.85rem;
57 font-weight: 600;
58 text-transform: uppercase;
59 letter-spacing: 0.06em;
60 color: var(--muted);
61}
63/* ── Sample picker ───────────────────────────────── */
64.picker-row {
65 display: flex;
66 flex-wrap: nowrap;
67 gap: 10px;
68 overflow-x: auto;
69 overflow-y: hidden;
70 padding-bottom: 6px;
71}
73.picker-divider {
74 flex: 0 0 auto;
75 align-self: stretch;
76 width: 1px;
77 background: var(--border);
78 margin: 6px 2px;
79}
81.sample-wrap {
82 position: relative;
83 flex: 0 0 auto;
84}
86.sample-delete {
87 position: absolute;
88 top: 4px;
89 right: 4px;
90 width: 18px;
91 height: 18px;
92 border-radius: 50%;
93 border: none;
94 background: rgba(8, 15, 30, 0.7);
95 color: #e2e8f0;
96 font-size: 0.85rem;
97 line-height: 1;
98 cursor: pointer;
99 display: flex;
100 align-items: center;
101 justify-content: center;
102 padding: 0;
103 opacity: 0;
104 transition: opacity 0.12s;
105}
106.sample-wrap:hover .sample-delete,
107.sample-delete:focus-visible {
108 opacity: 1;
109}
110.sample-delete:hover:not(:disabled) {
111 background: var(--danger);
112 color: #fff;
113}
115.sample {
116 display: flex;
117 flex-direction: column;
118 align-items: center;
119 gap: 6px;
120 flex: 0 0 auto;
121 width: 88px;
122 padding: 8px 6px;
123 background: var(--panel-2);
124 border: 1px solid var(--border);
125 border-radius: 10px;
126 color: var(--text);
127 cursor: pointer;
128 transition: border-color 0.12s, transform 0.12s;
129}
131.sample:hover:not(:disabled) {
132 border-color: var(--accent);
133}
135.sample:disabled {
136 opacity: 0.5;
137 cursor: default;
138}
140.sample-selected {
141 border-color: var(--accent-strong);
142 box-shadow: 0 0 0 1px var(--accent-strong);
143}
145.thumb-canvas {
146 width: 72px;
147 height: 72px;
148 object-fit: cover;
149 border-radius: 6px;
150 background: #0b1120;
151 display: block;
152}
154.sample-name {
155 font-size: 0.72rem;
156 color: var(--muted);
157 text-align: center;
158 line-height: 1.1;
159 max-width: 76px;
160 white-space: nowrap;
161 overflow: hidden;
162 text-overflow: ellipsis;
163}
165.sample-upload .upload-plus {
166 width: 72px;
167 height: 72px;
168 display: flex;
169 align-items: center;
170 justify-content: center;
171 font-size: 2rem;
172 color: var(--muted);
173 border: 1px dashed var(--border);
174 border-radius: 6px;
175}
177/* ── Script panel ────────────────────────────────── */
178.script-toolbar {
179 display: flex;
180 align-items: flex-end;
181 gap: 16px;
182 flex-wrap: wrap;
183 margin-bottom: 10px;
184}
186.field {
187 display: flex;
188 flex-direction: column;
189 gap: 4px;
190 font-size: 0.75rem;
191 color: var(--muted);
192}
194.field select {
195 background: var(--panel-2);
196 color: var(--text);
197 border: 1px solid var(--border);
198 border-radius: 6px;
199 padding: 6px 8px;
200 font-size: 0.85rem;
201}
203.run-btn {
204 margin-left: auto;
205 background: var(--accent-strong);
206 color: #04222f;
207 border: none;
208 border-radius: 8px;
209 padding: 9px 18px;
210 font-size: 0.9rem;
211 font-weight: 600;
212 cursor: pointer;
213}
215.run-btn:disabled {
216 opacity: 0.6;
217 cursor: default;
218}
220.editor {
221 width: 100%;
222 min-height: 220px;
223 resize: vertical;
224 background: #0b1120;
225 color: #d7e3f4;
226 border: 1px solid var(--border);
227 border-radius: 8px;
228 padding: 12px;
229 font-family: "SF Mono", ui-monospace, "Cascadia Code", Menlo, Consolas,
230 monospace;
231 font-size: 0.86rem;
232 line-height: 1.5;
233 tab-size: 2;
234}
236.editor:focus {
237 outline: none;
238 border-color: var(--accent);
239}
241.editor-hint {
242 margin-top: 8px;
243 font-size: 0.76rem;
244 color: var(--muted);
245}
247.editor-hint code {
248 background: var(--panel-2);
249 padding: 1px 5px;
250 border-radius: 4px;
251}
253kbd {
254 background: var(--panel-2);
255 border: 1px solid var(--border);
256 border-radius: 4px;
257 padding: 0 5px;
258 font-size: 0.72rem;
259}
261/* ── Viewers ─────────────────────────────────────── */
262.viewers {
263 display: grid;
264 grid-template-columns: 1fr 1fr;
265 gap: 16px;
266}
268@media (max-width: 720px) {
269 .viewers {
270 grid-template-columns: 1fr;
271 }
272}
274.imageview {
275 border: 1px solid var(--border);
276 border-radius: 10px;
277 overflow: hidden;
278 background: var(--panel-2);
279}
281.imageview-head {
282 display: flex;
283 justify-content: space-between;
284 align-items: baseline;
285 gap: 8px;
286 padding: 8px 10px;
287 font-size: 0.78rem;
288 border-bottom: 1px solid var(--border);
289}
291.imageview-title {
292 font-weight: 600;
293 overflow: hidden;
294 text-overflow: ellipsis;
295 white-space: nowrap;
296}
298.imageview-dims {
299 color: var(--muted);
300 white-space: nowrap;
301}
303.imageview-body {
304 position: relative;
305 display: flex;
306 align-items: center;
307 justify-content: center;
308 min-height: 200px;
309 background-image: linear-gradient(45deg, #16203360 25%, transparent 25%),
310 linear-gradient(-45deg, #16203360 25%, transparent 25%),
311 linear-gradient(45deg, transparent 75%, #16203360 75%),
312 linear-gradient(-45deg, transparent 75%, #16203360 75%);
313 background-size: 20px 20px;
314 background-position: 0 0, 0 10px, 10px -10px, -10px 0;
315}
317.imageview-canvas {
318 max-width: 100%;
319 max-height: 460px;
320 display: block;
321 image-rendering: auto;
322}
324.imageview-placeholder {
325 color: var(--muted);
326 font-size: 0.85rem;
327 padding: 40px;
328}
330.running-overlay {
331 position: absolute;
332 inset: 0;
333 display: flex;
334 align-items: center;
335 justify-content: center;
336 background: rgba(8, 15, 30, 0.55);
337 color: var(--text);
338 font-weight: 600;
339}
341/* ── Status / console ────────────────────────────── */
342.error-banner {
343 background: #7f1d1d40;
344 border: 1px solid var(--danger);
345 color: #fecaca;
346 border-radius: 8px;
347 padding: 10px 12px;
348 margin-bottom: 12px;
349 font-size: 0.85rem;
350 white-space: pre-wrap;
351}
353.status-row {
354 margin-top: 12px;
355 display: flex;
356 flex-direction: column;
357 gap: 8px;
358}
360.timing {
361 font-size: 0.78rem;
362 color: var(--muted);
363}
365.console {
366 margin: 0;
367 background: #0b1120;
368 border: 1px solid var(--border);
369 border-radius: 8px;
370 padding: 10px 12px;
371 font-family: ui-monospace, monospace;
372 font-size: 0.8rem;
373 color: #cbd5e1;
374 white-space: pre-wrap;
375 max-height: 160px;
376 overflow: auto;
377}
379.app-footer {
380 margin-top: 28px;
381 font-size: 0.76rem;
382 color: var(--muted);
383 text-align: center;
384}