1:root {
2 --bg: #121418;
3 --panel: #1a1d23;
4 --panel-2: #22262e;
5 --border: #2e333d;
6 --text: #e6e8eb;
7 --muted: #8b929e;
8 --accent: #5b9dff;
9 --accent-2: #3d7fe0;
10 --red: #ef4444;
11 --red-2: #d53434;
12 --green: #3fb67a;
13 --amber: #e0a33a;
14 --radius: 8px;
15 color-scheme: dark;
16 font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, sans-serif;
17 font-size: 14px;
18 line-height: 1.45;
19 color: var(--text);
20 background: var(--bg);
21}
23* {
24 box-sizing: border-box;
25}
26body {
27 margin: 0;
28 background: var(--bg);
29}
30a {
31 color: var(--accent);
32 text-decoration: none;
33}
34a:hover {
35 text-decoration: underline;
36}
37code {
38 background: var(--panel-2);
39 padding: 1px 5px;
40 border-radius: 4px;
41 font-size: 0.92em;
42}
43h2 {
44 margin: 0 0 12px;
45 font-size: 18px;
46 font-weight: 600;
47}
48h3,
49h4 {
50 margin: 0 0 10px;
51 font-weight: 600;
52}
53h4 {
54 font-size: 13px;
55 text-transform: uppercase;
56 letter-spacing: 0.04em;
57 color: var(--muted);
58 margin-top: 6px;
59}
61.muted {
62 color: var(--muted);
63}
64.small {
65 font-size: 12px;
66}
67.spacer {
68 flex: 1;
69}
70.grow {
71 flex: 1;
72}
73.row {
74 display: flex;
75 align-items: center;
76 gap: 8px;
77 flex-wrap: wrap;
78}
79.error-text {
80 color: #ff8a8a;
81}
82.warn-text {
83 color: var(--amber);
84}
86input,
87textarea,
88select {
89 font: inherit;
90 color: var(--text);
91 background: var(--bg);
92 border: 1px solid var(--border);
93 border-radius: 6px;
94 padding: 6px 9px;
95}
96input:focus,
97textarea:focus,
98select:focus {
99 outline: none;
100 border-color: var(--accent);
101}
102textarea {
103 resize: vertical;
104}
105input[type='range'] {
106 padding: 0;
107 accent-color: var(--accent);
108}
109input[type='checkbox'] {
110 accent-color: var(--accent);
111}
113/* ---- buttons ---- */
114.btn {
115 display: inline-flex;
116 align-items: center;
117 gap: 6px;
118 font: inherit;
119 font-weight: 500;
120 color: var(--text);
121 background: var(--panel-2);
122 border: 1px solid var(--border);
123 border-radius: 6px;
124 padding: 6px 12px;
125 cursor: pointer;
126 white-space: nowrap;
127 text-decoration: none ;
128}
129.btn:hover:not(:disabled) {
130 background: #2a2f38;
131}
132.btn:disabled {
133 opacity: 0.45;
134 cursor: default;
135}
136.btn.primary {
137 background: var(--accent-2);
138 border-color: var(--accent-2);
139 color: white;
140}
141.btn.primary:hover:not(:disabled) {
142 background: var(--accent);
143}
144.btn.record {
145 background: var(--red-2);
146 border-color: var(--red-2);
147 color: white;
148}
149.btn.record:hover:not(:disabled) {
150 background: var(--red);
151}
152.btn.danger {
153 color: #ff8a8a;
154}
155.btn.danger:hover:not(:disabled) {
156 background: rgba(239, 68, 68, 0.15);
157}
158.btn.ghost {
159 background: transparent;
160 border-color: transparent;
161}
162.btn.ghost:hover:not(:disabled) {
163 background: var(--panel-2);
164}
165.btn.small {
166 padding: 3px 8px;
167 font-size: 12px;
168}
169.btn.big {
170 padding: 10px 20px;
171 font-size: 15px;
172}
173.icon-btn {
174 display: inline-flex;
175 align-items: center;
176 justify-content: center;
177 width: 30px;
178 height: 30px;
179 color: var(--text);
180 background: transparent;
181 border: 1px solid transparent;
182 border-radius: 6px;
183 cursor: pointer;
184}
185.icon-btn:hover:not(:disabled) {
186 background: var(--panel-2);
187 border-color: var(--border);
188}
189.icon-btn:disabled {
190 opacity: 0.35;
191 cursor: default;
192}
193.icon-btn.danger:hover:not(:disabled) {
194 color: #ff8a8a;
195}
196.icon-btn.play {
197 width: 36px;
198 height: 36px;
199 background: var(--panel-2);
200 border-color: var(--border);
201}
203/* ---- page chrome ---- */
204.page {
205 min-height: 100vh;
206 display: flex;
207 flex-direction: column;
208}
209.page.loading {
210 align-items: center;
211 justify-content: center;
212 color: var(--muted);
213}
214.topbar {
215 display: flex;
216 align-items: center;
217 gap: 10px;
218 padding: 10px 16px;
219 border-bottom: 1px solid var(--border);
220 background: var(--panel);
221 position: sticky;
222 top: 0;
223 z-index: 10;
224}
225.topbar-title {
226 font-weight: 600;
227 font-size: 15px;
228}
229.brand {
230 display: flex;
231 align-items: center;
232 gap: 8px;
233 font-weight: 700;
234 font-size: 17px;
235 margin-right: 12px;
236}
237.brand-dot {
238 width: 12px;
239 height: 12px;
240 border-radius: 50%;
241 background: var(--red);
242 box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
243}
244.search {
245 width: 260px;
246}
247.title-input {
248 font-size: 16px;
249 font-weight: 600;
250 background: transparent;
251 border-color: transparent;
252 min-width: 200px;
253 width: 40vw;
254}
255.title-input:hover {
256 border-color: var(--border);
257}
258.save-state {
259 font-size: 12px;
260 color: var(--muted);
261}
262.save-state.error {
263 color: #ff8a8a;
264}
265.banner {
266 margin: 10px 16px 0;
267 padding: 8px 12px;
268 border-radius: 6px;
269 background: var(--panel-2);
270 border: 1px solid var(--border);
271}
272.banner.error {
273 background: rgba(239, 68, 68, 0.12);
274 border-color: rgba(239, 68, 68, 0.4);
275 color: #ffb3b3;
276 cursor: pointer;
277}
278.toast {
279 position: fixed;
280 bottom: 20px;
281 left: 50%;
282 transform: translateX(-50%);
283 background: var(--panel-2);
284 border: 1px solid var(--border);
285 padding: 8px 16px;
286 border-radius: 20px;
287 z-index: 50;
288}
289.panel {
290 background: var(--panel);
291 border: 1px solid var(--border);
292 border-radius: var(--radius);
293 padding: 14px;
294 display: flex;
295 flex-direction: column;
296 gap: 10px;
297}
298.field {
299 display: flex;
300 flex-direction: column;
301 gap: 4px;
302}
303.field > span {
304 font-size: 12px;
305 color: var(--muted);
306}
307.field.grow {
308 flex: 1;
309}
310.check {
311 display: inline-flex;
312 align-items: center;
313 gap: 7px;
314 cursor: pointer;
315}
316.empty {
317 text-align: center;
318 padding: 70px 20px;
319}
320.empty p {
321 margin-bottom: 20px;
322}
324/* ---- modal ---- */
325.modal-backdrop {
326 position: fixed;
327 inset: 0;
328 background: rgba(0, 0, 0, 0.6);
329 display: flex;
330 align-items: center;
331 justify-content: center;
332 z-index: 100;
333}
334.modal {
335 background: var(--panel);
336 border: 1px solid var(--border);
337 border-radius: 10px;
338 padding: 20px;
339 width: min(440px, calc(100vw - 32px));
340 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
341}
342.modal.wide {
343 width: min(640px, calc(100vw - 32px));
344}
345.modal-body {
346 display: flex;
347 flex-direction: column;
348 gap: 12px;
349}
350.modal-body p {
351 margin: 0;
352}
353.modal-footer {
354 display: flex;
355 justify-content: flex-end;
356 gap: 8px;
357 margin-top: 18px;
358}
360/* ---- library ---- */
361.library {
362 padding: 20px 16px 40px;
363}
364.grid {
365 display: grid;
366 grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
367 gap: 16px;
368}
369.card {
370 position: relative;
371 background: var(--panel);
372 border: 1px solid var(--border);
373 border-radius: var(--radius);
374 overflow: hidden;
375 cursor: pointer;
376 transition: border-color 0.12s, transform 0.12s;
377}
378.card:hover {
379 border-color: #454c59;
380}
381.card.dragging {
382 opacity: 0.4;
383}
384.thumb {
385 position: relative;
386 aspect-ratio: 16 / 9;
387 background: #0b0c0f;
388}
389.thumb img {
390 width: 100%;
391 height: 100%;
392 object-fit: cover;
393 display: block;
394}
395.thumb-empty {
396 width: 100%;
397 height: 100%;
398 display: flex;
399 align-items: center;
400 justify-content: center;
401 color: #3a404b;
402}
403.duration {
404 position: absolute;
405 right: 6px;
406 bottom: 6px;
407 background: rgba(0, 0, 0, 0.75);
408 padding: 1px 6px;
409 border-radius: 4px;
410 font-size: 12px;
411 font-variant-numeric: tabular-nums;
412}
413.thumb .kinds {
414 position: absolute;
415 left: 6px;
416 bottom: 6px;
417 background: rgba(0, 0, 0, 0.6);
418 border-radius: 4px;
419 padding: 2px 4px;
420}
421.kinds {
422 display: inline-flex;
423 gap: 5px;
424 color: var(--muted);
425}
426.thumb .kinds {
427 color: #dfe3e8;
428}
429.card-body {
430 padding: 10px 12px 12px;
431}
432.card-title {
433 font-weight: 600;
434 margin-bottom: 3px;
435}
436.card-desc {
437 color: var(--muted);
438 font-size: 13px;
439 display: -webkit-box;
440 -webkit-line-clamp: 2;
441 -webkit-box-orient: vertical;
442 overflow: hidden;
443 margin-bottom: 6px;
444}
445.card-meta {
446 display: flex;
447 gap: 10px;
448 align-items: center;
449 font-size: 12px;
450 color: var(--muted);
451}
452.tag {
453 font-size: 11px;
454 padding: 0 6px;
455 border-radius: 10px;
456 border: 1px solid;
457}
458.tag.ok {
459 color: var(--green);
460}
461.tag.warn {
462 color: var(--amber);
463}
464.card-actions {
465 position: absolute;
466 top: 6px;
467 right: 6px;
468 display: none;
469 gap: 4px;
470}
471.card-actions .icon-btn {
472 background: rgba(15, 17, 21, 0.85);
473}
474.card-actions .icon-btn:first-child {
475 color: var(--red);
476}
477.card:hover .card-actions {
478 display: flex;
479}
480.grip {
481 position: absolute;
482 top: 8px;
483 left: 6px;
484 color: #dfe3e8;
485 background: rgba(15, 17, 21, 0.7);
486 border-radius: 4px;
487 padding: 2px;
488 display: none;
489 cursor: grab;
490}
491.card:hover .grip {
492 display: flex;
493}
495/* ---- editor ---- */
496.editor-grid {
497 display: grid;
498 grid-template-columns: minmax(0, 1fr) 400px;
499 gap: 16px;
500 padding: 16px;
501 align-items: start;
502}
503@media (max-width: 1100px) {
504 .editor-grid {
505 grid-template-columns: 1fr;
506 }
507}
508.editor-main {
509 display: flex;
510 flex-direction: column;
511 gap: 10px;
512 min-width: 0;
513}
514.editor-side {
515 position: sticky;
516 top: 70px;
517 display: flex;
518 flex-direction: column;
519 gap: 0;
520 max-height: calc(100vh - 86px);
521}
522.editor-side .panel {
523 border-top-left-radius: 0;
524 border-top-right-radius: 0;
525 overflow: auto;
526 min-height: 300px;
527 max-height: calc(100vh - 124px);
528}
529.tabs {
530 display: flex;
531 gap: 2px;
532}
533.tabs button {
534 flex: 1;
535 font: inherit;
536 color: var(--muted);
537 background: var(--bg);
538 border: 1px solid var(--border);
539 border-bottom: none;
540 border-radius: 8px 8px 0 0;
541 padding: 7px 8px;
542 cursor: pointer;
543 white-space: nowrap;
544}
545.tabs button.active {
546 color: var(--text);
547 background: var(--panel);
548}
549textarea.notes {
550 min-height: 320px;
551 flex: 1;
552 font-size: 13px;
553}
555.stage {
556 position: relative;
557 width: 100%;
558 background: #000;
559 border-radius: var(--radius);
560 overflow: hidden;
561 cursor: pointer;
562}
563.stage-inner {
564 position: absolute;
565 left: 0;
566 top: 0;
567 transform-origin: 0 0;
568}
569.stage-inner .layer {
570 position: absolute;
571 background: #000;
572}
573.stage-empty {
574 position: absolute;
575 inset: 0;
576 display: flex;
577 align-items: center;
578 justify-content: center;
579 color: var(--muted);
580}
582.transport {
583 display: flex;
584 align-items: center;
585 gap: 4px;
586 flex-wrap: wrap;
587}
588.transport .sep {
589 width: 1px;
590 height: 22px;
591 background: var(--border);
592 margin: 0 6px;
593}
594.timecode {
595 font-variant-numeric: tabular-nums;
596 font-family: ui-monospace, 'SF Mono', Menlo, monospace;
597 font-size: 13px;
598 margin-left: 6px;
599}
600.zoom {
601 display: inline-flex;
602 align-items: center;
603 gap: 6px;
604}
605.zoom input {
606 width: 100px;
607}
609.timeline-scroll {
610 overflow-x: auto;
611 background: var(--panel);
612 border: 1px solid var(--border);
613 border-radius: var(--radius);
614}
615.timeline {
616 position: relative;
617 min-width: 100%;
618 height: 104px;
619 user-select: none;
620 cursor: text;
621 touch-action: none;
622}
623.tl-ruler {
624 position: relative;
625 height: 20px;
626 border-bottom: 1px solid var(--border);
627}
628.tl-tick {
629 position: absolute;
630 top: 3px;
631 font-size: 10px;
632 color: var(--muted);
633 padding-left: 3px;
634 border-left: 1px solid var(--border);
635 line-height: 14px;
636 font-variant-numeric: tabular-nums;
637}
638.tl-track {
639 position: absolute;
640 top: 28px;
641 left: 0;
642 right: 0;
643 height: 68px;
644}
645.tl-seg {
646 position: absolute;
647 top: 0;
648 bottom: 0;
649 background: hsl(var(--hue) 45% 30%);
650 border: 1px solid hsl(var(--hue) 50% 45%);
651 border-radius: 5px;
652 overflow: hidden;
653 box-sizing: border-box;
654}
655.tl-seg.selected {
656 border: 2px solid #fff;
657}
658.tl-wave {
659 position: absolute;
660 inset: 0;
661 width: 100%;
662 height: 100%;
663}
664.tl-label {
665 position: absolute;
666 left: 5px;
667 top: 2px;
668 font-size: 10px;
669 color: rgba(255, 255, 255, 0.85);
670 pointer-events: none;
671 white-space: nowrap;
672}
673.tl-range {
674 position: absolute;
675 top: 20px;
676 bottom: 0;
677 background: rgba(239, 68, 68, 0.28);
678 border-left: 1px solid var(--red);
679 border-right: 1px solid var(--red);
680 pointer-events: none;
681}
682.tl-mark {
683 position: absolute;
684 top: 20px;
685 bottom: 0;
686 width: 0;
687 border-left: 2px dashed var(--red);
688 pointer-events: none;
689}
690.tl-playhead {
691 position: absolute;
692 top: 0;
693 bottom: 0;
694 width: 2px;
695 margin-left: -1px;
696 background: #fff;
697 pointer-events: none;
698 box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
699}
700.tl-playhead::before {
701 content: '';
702 position: absolute;
703 top: 0;
704 left: -5px;
705 border: 6px solid transparent;
706 border-top-color: #fff;
707}
708.shortcuts {
709 margin: 0;
710}
711.section-title {
712 margin-top: 10px;
713 font-size: 14px;
714}
715.takes {
716 display: grid;
717 grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
718 gap: 10px;
719}
720.take {
721 background: var(--panel);
722 border: 1px solid var(--border);
723 border-radius: var(--radius);
724 padding: 10px 12px;
725 display: flex;
726 flex-direction: column;
727 gap: 4px;
728}
729.take-head {
730 display: flex;
731 align-items: center;
732 gap: 8px;
733}
734.take-head .kinds {
735 margin-left: auto;
736}
737.take-swatch {
738 width: 10px;
739 height: 10px;
740 border-radius: 3px;
741 background: hsl(var(--hue) 50% 45%);
742}
743.take-actions {
744 display: flex;
745 align-items: center;
746 gap: 6px;
747 margin-top: 4px;
748}
749.take-actions .icon-btn {
750 margin-left: auto;
751}
753.seg-control {
754 display: flex;
755 flex-wrap: wrap;
756 gap: 0;
757 border: 1px solid var(--border);
758 border-radius: 6px;
759 overflow: hidden;
760 width: fit-content;
761}
762.seg-control button {
763 font: inherit;
764 font-size: 12px;
765 color: var(--muted);
766 background: var(--bg);
767 border: none;
768 border-right: 1px solid var(--border);
769 padding: 5px 10px;
770 cursor: pointer;
771}
772.seg-control button:last-child {
773 border-right: none;
774}
775.seg-control button.active {
776 background: var(--accent-2);
777 color: white;
778}
779.export-box {
780 margin-top: 8px;
781 padding-top: 12px;
782 border-top: 1px solid var(--border);
783 display: flex;
784 flex-direction: column;
785 gap: 8px;
786 align-items: flex-start;
787}
788.export-box p {
789 margin: 0;
790}
791.export-info {
792 display: flex;
793 flex-direction: column;
794 gap: 6px;
795 align-items: flex-start;
796}
797.progress {
798 width: 100%;
799 height: 8px;
800 background: var(--bg);
801 border-radius: 4px;
802 overflow: hidden;
803}
804.progress > div {
805 height: 100%;
806 background: var(--accent);
807 transition: width 0.3s;
808}
810/* ---- transcript ---- */
811.transcript {
812 display: flex;
813 flex-direction: column;
814 gap: 10px;
815}
816.transcript-bar {
817 display: flex;
818 align-items: center;
819 gap: 10px;
820 justify-content: space-between;
821}
822.transcript-status {
823 display: flex;
824 flex-direction: column;
825 gap: 4px;
826}
827.transcript-words {
828 line-height: 1.8;
829 font-size: 14px;
830}
831.word {
832 cursor: pointer;
833 border-radius: 3px;
834 padding: 1px 1px;
835}
836.word:hover {
837 background: var(--panel-2);
838}
839.word.current {
840 background: rgba(91, 157, 255, 0.35);
841}
842.word.selected {
843 background: rgba(239, 68, 68, 0.35);
844 text-decoration: line-through;
845 text-decoration-color: rgba(255, 255, 255, 0.5);
846}
847.seg-break {
848 display: inline-block;
849 width: 2px;
850 height: 1em;
851 vertical-align: middle;
852 background: var(--amber);
853 margin: 0 5px;
854}
856/* ---- recorder ---- */
857.recorder-grid {
858 display: grid;
859 grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
860 gap: 16px;
861 padding: 16px;
862 align-items: start;
863}
864@media (max-width: 1000px) {
865 .recorder-grid {
866 grid-template-columns: 1fr;
867 }
868}
869.source {
870 display: flex;
871 flex-direction: column;
872 gap: 6px;
873 padding-bottom: 10px;
874 border-bottom: 1px solid var(--border);
875}
876.source > .check {
877 font-weight: 500;
878}
879.source-opts {
880 display: flex;
881 gap: 8px;
882 flex-wrap: wrap;
883 align-items: center;
884 padding-left: 24px;
885}
886.source-opts select {
887 max-width: 340px;
888}
889.meter {
890 margin-left: 24px;
891 height: 6px;
892 background: var(--bg);
893 border-radius: 3px;
894 overflow: hidden;
895 max-width: 340px;
896}
897.meter-bar {
898 height: 100%;
899 width: 0;
900 background: var(--green);
901 transition: width 0.05s linear;
902}
903.meter-bar.hot {
904 background: var(--red);
905}
906.previews {
907 display: grid;
908 grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
909 gap: 10px;
910}
911.preview {
912 aspect-ratio: 16 / 9;
913 background: #000;
914 border-radius: 6px;
915 overflow: hidden;
916}
917.preview video {
918 width: 100%;
919 height: 100%;
920 object-fit: contain;
921 display: block;
922}
923.preview-empty {
924 height: 100%;
925 display: flex;
926 align-items: center;
927 justify-content: center;
928 color: var(--muted);
929 font-size: 13px;
930}
931.rec-controls {
932 display: flex;
933 align-items: center;
934 gap: 10px;
935 flex-wrap: wrap;
936 padding: 8px 0;
937}
938.rec-indicator {
939 display: inline-flex;
940 align-items: center;
941 gap: 8px;
942 font-weight: 600;
943 margin-right: 8px;
944}
945.rec-dot {
946 width: 12px;
947 height: 12px;
948 border-radius: 50%;
949 background: var(--red);
950 animation: blink 1.2s infinite;
951}
952.rec-indicator.paused .rec-dot {
953 background: var(--amber);
954 animation: none;
955}
956@keyframes blink {
957 50% {
958 opacity: 0.3;
959 }
960}
961.notes-panel {
962 position: sticky;
963 top: 70px;
964 max-height: calc(100vh - 90px);
965}
966.notes-view {
967 white-space: pre-wrap;
968 font-size: 18px;
969 line-height: 1.6;
970 overflow: auto;
971}
972.countdown-overlay {
973 position: fixed;
974 inset: 0;
975 background: rgba(0, 0, 0, 0.55);
976 display: flex;
977 align-items: center;
978 justify-content: center;
979 z-index: 200;
980 pointer-events: none;
981}
982.countdown-num {
983 font-size: 180px;
984 font-weight: 700;
985 color: white;
986 text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
987}
989/* ---- prompter ---- */
990.prompter {
991 height: 100vh;
992 display: flex;
993 flex-direction: column;
994}
995.prompter-bar {
996 display: flex;
997 align-items: center;
998 gap: 8px;
999 padding: 10px 14px;
1000 background: var(--panel);
1001 border-bottom: 1px solid var(--border);
1002}
1003.prompter-tools {
1004 display: flex;
1005 align-items: center;
1006 gap: 8px;
1007 padding: 6px 14px;
1008 border-bottom: 1px solid var(--border);
1009}
1010.prompter-body {
1011 flex: 1;
1012 overflow: auto;
1013 padding: 24px 28px;
1014 white-space: pre-wrap;
1015 line-height: 1.5;
1016}
1018/* ---- settings ---- */
1019.settings {
1020 max-width: 760px;
1021 width: 100%;
1022 margin: 0 auto;
1023 padding: 20px 16px;
1024 display: flex;
1025 flex-direction: column;
1026 gap: 16px;
1027}
1028.settings p {
1029 margin: 0;
1030}
1031.settings .row > span {
1032 min-width: 240px;
1033}
1035.ok-text {
1036 color: var(--green);
1037}
1038.matte-status {
1039 display: flex;
1040 flex-direction: column;
1041 gap: 4px;
1042}
1043.matte-status p {
1044 margin: 4px 0 0;
1045}
1046.progress.mini {
1047 width: 120px;
1048 height: 6px;
1049}