1:root {
2 --bg: #0f1115;
3 --panel: #151a21;
4 --panel-2: #12161d;
5 --border: #262d38;
6 --text: #d7dde7;
7 --text-dim: #8b95a5;
8 --accent: #4da3ff;
9 --green: #51cf66;
10 --red: #ff6b6b;
11 --amber: #ffc861;
12 color-scheme: dark;
13}
15* {
16 box-sizing: border-box;
17}
19html,
20body,
21#root {
22 height: 100%;
23 margin: 0;
24}
26body {
27 background: var(--bg);
28 color: var(--text);
29 font-family:
30 system-ui,
31 -apple-system,
32 'Segoe UI',
33 Roboto,
34 sans-serif;
35 font-size: 14px;
36 overflow: hidden;
37}
39button {
40 font: inherit;
41 color: inherit;
42 background: #1d242e;
43 border: 1px solid var(--border);
44 border-radius: 6px;
45 padding: 5px 12px;
46 cursor: pointer;
47 white-space: nowrap;
48}
49button:hover:not(:disabled) {
50 background: #242d3a;
51 border-color: #33405085;
52}
53button:disabled {
54 opacity: 0.45;
55 cursor: default;
56}
57button.primary {
58 background: #1d4ed8;
59 border-color: #2563eb;
60}
61button.primary:hover:not(:disabled) {
62 background: #2158e8;
63}
64button.danger {
65 background: #7f1d1d;
66 border-color: #991b1b;
67}
68button.danger:hover:not(:disabled) {
69 background: #931f1f;
70}
72.app {
73 display: flex;
74 flex-direction: column;
75 height: 100%;
76}
78/* ── header ─────────────────────────────────────────── */
79.header {
80 display: flex;
81 align-items: center;
82 gap: 14px;
83 padding: 0 14px;
84 height: 48px;
85 background: var(--panel-2);
86 border-bottom: 1px solid var(--border);
87 flex: none;
88}
89.header .logo {
90 display: flex;
91 align-items: baseline;
92 gap: 8px;
93}
94.header .logo b {
95 font-size: 17px;
96 letter-spacing: 0.02em;
97}
98.header .logo span {
99 color: var(--text-dim);
100 font-size: 12.5px;
101}
102.header .logo .tagline a {
103 color: var(--accent);
104 text-decoration: none;
105}
106.header .logo .tagline a:hover {
107 text-decoration: underline;
108}
109.header .spacer {
110 flex: 1;
111}
113/* ── main split ─────────────────────────────────────── */
114.main {
115 display: flex;
116 flex: 1;
117 min-height: 0;
118}
119.left {
120 display: flex;
121 flex-direction: column;
122 min-width: 300px;
123 border-right: 1px solid var(--border);
124 background: var(--panel);
125}
126.divider {
127 width: 5px;
128 cursor: col-resize;
129 background: transparent;
130 flex: none;
131}
132.divider:hover {
133 background: #2a3442;
134}
135.right {
136 flex: 1;
137 min-width: 0;
138 display: flex;
139 flex-direction: column;
140 overflow-y: auto;
141 background: var(--bg);
142}
144/* ── editor pane ────────────────────────────────────── */
145.editor-toolbar {
146 display: flex;
147 align-items: center;
148 gap: 8px;
149 padding: 8px 10px;
150 border-bottom: 1px solid var(--border);
151 flex: none;
152}
153.editor-toolbar .name {
154 color: var(--text-dim);
155 font-size: 12.5px;
156 overflow: hidden;
157 text-overflow: ellipsis;
158}
159.editor-toolbar .examples-btn {
160 color: var(--accent);
161 border-color: #33547a;
162 font-weight: 500;
163}
164.editor-toolbar .examples-btn:hover:not(:disabled) {
165 background: #17263a;
166 border-color: #4177b3;
167}
168.editor-host {
169 flex: 1;
170 min-height: 0;
171 overflow: hidden;
172}
173.editor-host .cm-editor {
174 height: 100%;
175 font-size: 15px;
176}
177.editor-host .cm-scroller {
178 font-family: 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
179}
181/* ── console ────────────────────────────────────────── */
182.console {
183 flex: none;
184 height: 30%;
185 min-height: 90px;
186 display: flex;
187 flex-direction: column;
188 border-top: 1px solid var(--border);
189 background: var(--panel-2);
190}
191.console-head {
192 display: flex;
193 align-items: center;
194 gap: 8px;
195 padding: 4px 10px;
196 font-size: 11.5px;
197 color: var(--text-dim);
198 text-transform: uppercase;
199 letter-spacing: 0.06em;
200 border-bottom: 1px solid var(--border);
201}
202.console-body {
203 flex: 1;
204 overflow-y: auto;
205 padding: 6px 10px;
206 font-family: 'SF Mono', Menlo, Consolas, monospace;
207 font-size: 12px;
208 line-height: 1.5;
209 white-space: pre-wrap;
210 word-break: break-word;
211}
212.console-body .err {
213 color: var(--red);
214}
215.console-body .ok {
216 color: var(--green);
217}
219/* ── viewer ─────────────────────────────────────────── */
220.viewer-empty {
221 flex: 1;
222 display: flex;
223 flex-direction: column;
224 align-items: center;
225 justify-content: center;
226 gap: 12px;
227 color: var(--text-dim);
228 text-align: center;
229 padding: 30px;
230}
231.viewer-empty h2 {
232 color: var(--text);
233 font-weight: 600;
234 margin: 0;
235}
236.viewer-empty .hint {
237 max-width: 440px;
238 line-height: 1.55;
239}
240.drop-active::after {
241 content: 'Drop .seq file to view';
242 position: fixed;
243 inset: 0;
244 display: flex;
245 align-items: center;
246 justify-content: center;
247 font-size: 22px;
248 color: var(--accent);
249 background: #0f1115d9;
250 border: 2px dashed var(--accent);
251 z-index: 50;
252 pointer-events: none;
253}
255.seq-tabs {
256 display: flex;
257 gap: 4px;
258 padding: 8px 12px 0;
259 flex: none;
260}
261.seq-tabs button {
262 border-radius: 6px 6px 0 0;
263 border-bottom: none;
264 background: transparent;
265 color: var(--text-dim);
266}
267.seq-tabs button.active {
268 background: var(--panel);
269 color: var(--text);
270}
272.viewer-section {
273 margin: 10px 12px;
274 background: var(--panel);
275 border: 1px solid var(--border);
276 border-radius: 8px;
277 overflow: hidden;
278 flex: none;
279}
280.viewer-section > h3 {
281 margin: 0;
282 padding: 7px 12px;
283 font-size: 11.5px;
284 font-weight: 600;
285 color: var(--text-dim);
286 text-transform: uppercase;
287 letter-spacing: 0.07em;
288 border-bottom: 1px solid var(--border);
289 display: flex;
290 align-items: center;
291 gap: 10px;
292}
293.viewer-section > h3 .free {
294 flex: 1;
295}
296.viewer-section > h3 .fine {
297 text-transform: none;
298 letter-spacing: 0;
299 font-weight: 400;
300}
302.timeline-host {
303 position: relative;
304}
305.timeline-canvas {
306 display: block;
307 width: 100%;
308 cursor: crosshair;
309}
310.timeline-canvas.panning {
311 cursor: grabbing;
312}
314/* ── report ─────────────────────────────────────────── */
315.report {
316 display: flex;
317 flex-wrap: wrap;
318 gap: 8px 26px;
319 padding: 10px 14px;
320 font-size: 13px;
321}
322.report .item b {
323 display: block;
324 font-size: 11px;
325 font-weight: 600;
326 color: var(--text-dim);
327 text-transform: uppercase;
328 letter-spacing: 0.05em;
329}
330.report .item span {
331 font-family: 'SF Mono', Menlo, Consolas, monospace;
332 font-size: 12.5px;
333}
334.badge {
335 display: inline-block;
336 padding: 1px 8px;
337 border-radius: 999px;
338 font-size: 11.5px;
339 border: 1px solid;
340}
341.badge.good {
342 color: var(--green);
343 border-color: #2f9e4466;
344}
345.badge.bad {
346 color: var(--red);
347 border-color: #e0313166;
348}
349.badge.neutral {
350 color: var(--text-dim);
351 border-color: var(--border);
352}
354/* ── inspector ──────────────────────────────────────── */
355.inspector {
356 padding: 8px 12px 12px;
357 font-size: 13px;
358}
359.inspector .nav {
360 display: flex;
361 align-items: center;
362 gap: 8px;
363 margin-bottom: 8px;
364}
365.inspector .nav .where {
366 font-family: 'SF Mono', Menlo, Consolas, monospace;
367 font-size: 12.5px;
368 color: var(--text-dim);
369}
370.inspector table {
371 border-collapse: collapse;
372 width: 100%;
373}
374.inspector td,
375.inspector th {
376 text-align: left;
377 padding: 4px 10px 4px 0;
378 border-bottom: 1px solid #1d232d;
379 vertical-align: top;
380}
381.inspector th {
382 color: var(--text-dim);
383 font-weight: 600;
384 white-space: nowrap;
385 width: 1%;
386}
387.inspector td {
388 font-family: 'SF Mono', Menlo, Consolas, monospace;
389 font-size: 12.5px;
390}
391.inspector .muted {
392 color: var(--text-dim);
393}
394.inspector-hint {
395 margin: 0;
396 padding: 12px;
397 color: var(--text-dim);
398 font-size: 13px;
399}
401/* dropdown menu */
402.menu-wrap {
403 position: relative;
404}
405.menu {
406 position: absolute;
407 top: calc(100% + 4px);
408 right: 0;
409 min-width: 300px;
410 background: #1a212b;
411 border: 1px solid var(--border);
412 border-radius: 8px;
413 box-shadow: 0 8px 28px #0009;
414 z-index: 40;
415 padding: 4px;
416}
417.menu button {
418 display: block;
419 width: 100%;
420 text-align: left;
421 background: transparent;
422 border: none;
423 padding: 8px 10px;
424 border-radius: 6px;
425}
426.menu button:hover {
427 background: #232d3a;
428}
429.menu button b {
430 display: block;
431}
432.menu button span {
433 display: block;
434 color: var(--text-dim);
435 font-size: 12px;
436 margin-top: 1px;
437 white-space: normal;
438}
440/* ── examples modal ─────────────────────────────────── */
441.modal-backdrop {
442 position: fixed;
443 inset: 0;
444 background: #0a0c10cc;
445 z-index: 60;
446 display: flex;
447 align-items: center;
448 justify-content: center;
449 padding: 30px;
450}
451.modal {
452 width: min(1000px, 100%);
453 max-height: 100%;
454 background: var(--panel);
455 border: 1px solid var(--border);
456 border-radius: 12px;
457 box-shadow: 0 20px 60px #000a;
458 display: flex;
459 flex-direction: column;
460 overflow: hidden;
461}
462.modal-head {
463 display: flex;
464 align-items: baseline;
465 gap: 12px;
466 padding: 14px 18px;
467 border-bottom: 1px solid var(--border);
468 flex: none;
469}
470.modal-head h2 {
471 margin: 0;
472 font-size: 17px;
473}
474.modal-head .count {
475 color: var(--text-dim);
476 font-size: 12.5px;
477}
478.modal-body {
479 overflow-y: auto;
480 padding: 6px 18px 18px;
481}
482.modal-body section {
483 margin-top: 16px;
484}
485.modal-body section h3 {
486 margin: 0 0 8px;
487 font-size: 12px;
488 font-weight: 600;
489 color: var(--accent);
490 text-transform: uppercase;
491 letter-spacing: 0.07em;
492}
493.example-grid {
494 display: grid;
495 grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
496 gap: 8px;
497}
498.example-card {
499 text-align: left;
500 background: var(--panel-2);
501 border: 1px solid var(--border);
502 border-radius: 8px;
503 padding: 10px 12px;
504 display: flex;
505 flex-direction: column;
506 gap: 4px;
507}
508.example-card:hover {
509 border-color: #3a4d66;
510 background: #1a212b;
511}
512.example-card .ex-top {
513 display: flex;
514 align-items: baseline;
515 gap: 8px;
516}
517.example-card .ex-top b {
518 flex: 1;
519 font-size: 13.5px;
520}
521.example-card .ex-time {
522 color: var(--text-dim);
523 font-size: 11px;
524 font-family: 'SF Mono', Menlo, Consolas, monospace;
525 white-space: nowrap;
526}
527.example-card .ex-desc {
528 color: var(--text-dim);
529 font-size: 12px;
530 line-height: 1.45;
531}