1/* ============ Matcha site styles ============ */
2:root {
3 /* Dark blue-green terminal, like the real Matcha screenshots */
4 --bg: #05080a;
5 --bg-2: #060a0d;
6 --panel: #0a1013;
7 --panel-2: #0e1619;
8 --line: #14222b;
9 --line-2: #1d3441;
10 --ink: #c8d6d8;
11 --ink-dim: #7d9099;
12 --ink-dim2: #52666e;
13
14 /* green accent — slightly darker, per request */
15 --accent: #6aa84f;
16 --accent-2: #85c26a;
17 --accent-deep: #3b6b28;
18 --green-soft: #8fb88b;
19
20 --blue: #5aa3d8;
21 --yellow: #d1b85a;
22
23 --mono: "IBM Plex Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
24 --sans:
25 "IBM Plex Sans", ui-sans-serif, -apple-system, system-ui, sans-serif;
26 --serif: "IBM Plex Serif", ui-serif, Georgia, serif;
27}
28
29* {
30 box-sizing: border-box;
31}
32html,
33body {
34 margin: 0;
35 padding: 0;
36 background: var(--bg);
37 color: var(--ink);
38 font-family: var(--sans);
39 font-size: 15px;
40 line-height: 1.55;
41 -webkit-font-smoothing: antialiased;
42 text-rendering: optimizeLegibility;
43}
44body::before {
45 content: "";
46 position: fixed;
47 inset: 0;
48 pointer-events: none;
49 z-index: 0;
50 background:
51 radial-gradient(
52 1000px 500px at 85% -10%,
53 rgba(106, 168, 79, 0.06),
54 transparent 60%
55 ),
56 radial-gradient(
57 800px 400px at -10% 30%,
58 rgba(106, 168, 79, 0.03),
59 transparent 60%
60 );
61}
62a {
63 color: inherit;
64 text-decoration: none;
65}
66code,
67kbd,
68pre {
69 font-family: var(--mono);
70}
71em {
72 font-style: italic;
73 color: var(--accent);
74 font-family: var(--serif);
75 font-weight: 500;
76}
77.dim {
78 color: var(--ink-dim);
79}
80.underline-link {
81 color: var(--accent);
82 border-bottom: 1px dashed var(--accent-deep);
83 padding-bottom: 1px;
84}
85.underline-link:hover {
86 color: var(--accent-2);
87}
88
89.site {
90 position: relative;
91 z-index: 1;
92 max-width: 1280px;
93 margin: 0 auto;
94 padding: 0 32px;
95}
96
97/* ---------- Nav ---------- */
98.nav {
99 display: flex;
100 align-items: center;
101 justify-content: space-between;
102 padding: 22px 0;
103 border-bottom: 1px solid var(--line);
104 position: sticky;
105 top: 0;
106 background: rgba(5, 8, 10, 0.82);
107 backdrop-filter: blur(12px);
108 z-index: 50;
109}
110.nav-brand {
111 display: flex;
112 align-items: center;
113}
114.wordmark {
115 display: inline-flex;
116 align-items: center;
117 gap: 8px;
118 font-family: var(--mono);
119 font-size: 15px;
120 letter-spacing: -0.01em;
121}
122.wm-bracket {
123 color: var(--accent);
124 font-size: 12px;
125 transform: translateY(-1px);
126}
127.wm-name {
128 color: var(--ink);
129 font-weight: 500;
130}
131.wm-dim {
132 color: var(--ink-dim2);
133 font-size: 12px;
134}
135
136.wm-logo {
137 display: flex;
138 align-items: center;
139 align-self: center;
140}
141
142.nav-links {
143 display: flex;
144 gap: 28px;
145 align-items: center;
146 font-family: var(--mono);
147 font-size: 13px;
148}
149.nav-links a {
150 color: var(--ink-dim);
151 transition: color 0.12s;
152}
153.nav-links a:hover {
154 color: var(--ink);
155}
156.nav-github {
157 display: inline-flex;
158 align-items: center;
159 gap: 10px;
160}
161.nav-star {
162 color: var(--accent);
163 font-size: 12px;
164}
165.nav-right .btn {
166 font-family: var(--mono);
167 font-size: 13px;
168}
169
170/* ---------- Buttons ---------- */
171.btn {
172 display: inline-flex;
173 align-items: center;
174 gap: 10px;
175 padding: 10px 16px;
176 border: 1px solid var(--line-2);
177 border-radius: 2px;
178 font-family: var(--mono);
179 font-size: 13px;
180 color: var(--ink);
181 background: transparent;
182 cursor: pointer;
183 transition: all 0.12s;
184}
185.btn:hover {
186 border-color: var(--accent);
187 color: var(--accent);
188}
189.btn-k {
190 font-size: 11px;
191 color: var(--ink-dim);
192}
193.btn:hover .btn-k {
194 color: var(--accent);
195}
196.btn-primary {
197 background: var(--accent);
198 color: #05080a;
199 border-color: var(--accent);
200 font-weight: 500;
201}
202.btn-primary:hover {
203 background: var(--accent-2);
204 border-color: var(--accent-2);
205 color: #05080a;
206}
207.btn-primary .btn-k {
208 color: #05080a;
209 opacity: 0.6;
210}
211.btn-ghost {
212 background: transparent;
213}
214.btn-lg {
215 padding: 14px 22px;
216 font-size: 14px;
217}
218
219/* ---------- Hero ---------- */
220.hero {
221 display: grid;
222 grid-template-columns: 1fr 1.35fr;
223 gap: 56px;
224 padding: 72px 0 80px;
225 align-items: start;
226}
227.hero-copy {
228 padding-top: 24px;
229}
230.hero-eyebrow {
231 display: inline-flex;
232 align-items: center;
233 gap: 10px;
234 font-family: var(--mono);
235 font-size: 12px;
236 color: var(--ink-dim);
237 padding: 6px 12px;
238 border: 1px solid var(--line);
239 border-radius: 2px;
240 margin-bottom: 28px;
241}
242.dot-live {
243 width: 7px;
244 height: 7px;
245 border-radius: 50%;
246 background: var(--accent);
247 box-shadow: 0 0 0 3px rgba(106, 168, 79, 0.2);
248 animation: pulse 2.4s ease-in-out infinite;
249}
250@keyframes pulse {
251 0%,
252 100% {
253 opacity: 1;
254 }
255 50% {
256 opacity: 0.4;
257 }
258}
259.hero-h1 {
260 font-family: var(--sans);
261 font-size: 56px;
262 font-weight: 500;
263 letter-spacing: -0.025em;
264 line-height: 1.04;
265 margin: 0 0 24px;
266 text-wrap: pretty;
267}
268.hero-sub {
269 font-size: 17px;
270 color: var(--ink-dim);
271 max-width: 46ch;
272 margin: 0 0 36px;
273 line-height: 1.55;
274}
275.hero-cta {
276 display: flex;
277 gap: 12px;
278 margin-bottom: 44px;
279}
280.hero-meta {
281 display: grid;
282 grid-template-columns: repeat(3, auto);
283 gap: 32px;
284 font-family: var(--mono);
285 font-size: 12px;
286 color: var(--ink);
287}
288.hero-meta .dim {
289 display: block;
290 color: var(--ink-dim2);
291 font-size: 11px;
292 margin-bottom: 2px;
293 text-transform: uppercase;
294 letter-spacing: 0.08em;
295}
296
297.hero-demo {
298 position: relative;
299}
300.hero-demo-chrome {
301 display: flex;
302 align-items: center;
303 justify-content: space-between;
304 padding: 0 0 10px;
305 font-family: var(--mono);
306 font-size: 12px;
307}
308.hero-demo-label {
309 display: flex;
310 align-items: center;
311 gap: 8px;
312 color: var(--ink-dim);
313}
314.demo-swap {
315 background: transparent;
316 border: 1px solid var(--line);
317 color: var(--ink-dim);
318 padding: 3px 8px;
319 font-family: var(--mono);
320 font-size: 11px;
321 border-radius: 2px;
322 cursor: pointer;
323 transition: all 0.12s;
324}
325.demo-swap:hover {
326 color: var(--ink);
327 border-color: var(--line-2);
328}
329.demo-swap.on {
330 color: var(--accent);
331 border-color: var(--accent);
332}
333.hero-demo-hint {
334 color: var(--ink-dim);
335}
336.hero-demo-hint kbd {
337 display: inline-block;
338 margin: 0 2px;
339 padding: 1px 5px;
340 border: 1px solid var(--line-2);
341 border-radius: 2px;
342 font-size: 10px;
343 color: var(--ink);
344}
345
346@media (max-width: 960px) {
347 .hero {
348 grid-template-columns: 1fr;
349 }
350 .hero-h1 {
351 font-size: 40px;
352 }
353}
354
355/* ---------- TUI — matches real Matcha layout ---------- */
356.tui-root {
357 position: relative;
358 background: var(--bg);
359 border: 1px solid var(--line-2);
360 border-radius: 6px;
361 overflow: hidden;
362 font-family: var(--mono);
363 font-size: 12px;
364 line-height: 1.5;
365 color: var(--ink);
366 outline: none;
367 box-shadow:
368 0 1px 0 rgba(255, 255, 255, 0.02) inset,
369 0 30px 80px -20px rgba(0, 0, 0, 0.7),
370 0 10px 30px -10px rgba(106, 168, 79, 0.08);
371 user-select: none;
372 transition:
373 box-shadow 0.2s,
374 border-color 0.2s;
375 min-height: 520px;
376}
377.tui-root.is-focused {
378 border-color: var(--accent);
379 box-shadow:
380 0 0 0 1px var(--accent),
381 0 30px 80px -20px rgba(0, 0, 0, 0.7),
382 0 10px 30px -10px rgba(106, 168, 79, 0.2);
383}
384
385.tui-titlebar {
386 display: flex;
387 justify-content: space-between;
388 align-items: center;
389 padding: 8px 12px;
390 background: #02050a;
391 border-bottom: 1px solid var(--line);
392 font-size: 11px;
393 color: var(--ink-dim);
394}
395.tui-titlebar-left {
396 display: flex;
397 align-items: center;
398 gap: 10px;
399}
400.tui-traffic {
401 display: inline-flex;
402 gap: 6px;
403}
404.tl {
405 width: 11px;
406 height: 11px;
407 border-radius: 50%;
408 display: inline-block;
409}
410.tl-r {
411 background: #2a1414;
412}
413.tl-y {
414 background: #2a2514;
415}
416.tl-g {
417 background: #0f2a16;
418}
419.tui-title-text {
420 color: var(--ink-dim);
421}
422.tui-titlebar-right {
423 display: flex;
424 gap: 8px;
425}
426.tui-titlebar-right .sep {
427 color: var(--ink-dim2);
428}
429
430.tui-shell {
431 display: grid;
432 grid-template-columns: 160px 1fr;
433 min-height: 460px;
434}
435
436/* Sidebar — folders */
437.tui-sidebar {
438 background: var(--bg-2);
439 padding: 10px 0;
440 border-right: 1px solid var(--line);
441 font-size: 12px;
442}
443.tui-sidebar-head {
444 padding: 2px 14px 10px;
445 color: var(--accent);
446 font-weight: 500;
447}
448.tui-folder {
449 padding: 2px 14px;
450 color: var(--ink-dim);
451 cursor: pointer;
452 white-space: nowrap;
453}
454.tui-folder:hover {
455 color: var(--ink);
456}
457.tui-folder.active {
458 background: var(--accent);
459 color: #05080a;
460 font-weight: 500;
461}
462
463/* Main pane */
464.tui-main {
465 position: relative;
466 padding: 0;
467 display: flex;
468 flex-direction: column;
469 overflow: hidden;
470}
471
472/* Account tabs row */
473.tui-acct-row {
474 display: flex;
475 gap: 22px;
476 padding: 8px 16px;
477 border-bottom: 1px solid var(--line);
478 font-size: 12px;
479}
480.tui-acct {
481 color: var(--ink-dim);
482 cursor: pointer;
483 padding: 2px 0;
484}
485.tui-acct:hover {
486 color: var(--ink);
487}
488.tui-acct.active {
489 color: var(--accent);
490 border-bottom: 1px solid var(--accent);
491 padding-bottom: 1px;
492}
493
494.tui-heading {
495 padding: 14px 16px 2px;
496 color: var(--accent);
497 font-weight: 500;
498 font-size: 12.5px;
499}
500.tui-subhead {
501 padding: 0 16px 8px;
502 color: var(--ink-dim);
503 font-size: 11.5px;
504}
505.tui-filter-chip {
506 color: var(--yellow);
507 margin-left: 10px;
508}
509
510.tui-list {
511 flex: 1;
512 padding: 2px 16px 40px;
513 position: relative;
514 z-index: 2;
515}
516
517.tui-row {
518 display: grid;
519 grid-template-columns: 18px 26px auto 14px auto 14px 1fr auto;
520 gap: 6px;
521 align-items: baseline;
522 padding: 1px 0;
523 cursor: pointer;
524 color: var(--ink-dim);
525 white-space: nowrap;
526 font-size: 12px;
527}
528.tui-row:hover {
529 color: var(--ink);
530}
531.tui-row.cur {
532 color: var(--accent);
533 background: rgba(106, 168, 79, 0.04);
534}
535.tui-row.visual.cur {
536 color: var(--yellow);
537}
538.tui-row-cursor {
539 color: var(--accent);
540 white-space: pre;
541 font-weight: 600;
542}
543.tui-row.visual .tui-row-cursor {
544 color: var(--yellow);
545}
546.tui-row-num {
547 color: var(--ink-dim2);
548}
549.tui-row-acct {
550 color: var(--blue);
551}
552.tui-row.cur .tui-row-acct {
553 color: var(--blue);
554}
555.tui-row-sep {
556 color: var(--ink-dim2);
557}
558.tui-row-from {
559 color: var(--ink);
560}
561.tui-row.cur .tui-row-from {
562 color: var(--accent);
563}
564.tui-row-subj {
565 overflow: hidden;
566 text-overflow: ellipsis;
567 color: var(--ink-dim);
568}
569.tui-row.cur .tui-row-subj {
570 color: var(--accent-2);
571}
572.tui-row-date {
573 color: var(--ink-dim2);
574 padding-left: 12px;
575}
576.tui-row.cur .tui-row-date {
577 color: var(--green-soft);
578}
579.tui-row-dots {
580 color: var(--ink-dim2);
581 padding-top: 12px;
582 letter-spacing: 4px;
583}
584.tui-row-empty {
585 color: var(--ink-dim2);
586 padding: 32px 0;
587 text-align: center;
588}
589
590/* Email view */
591.tui-email {
592 position: relative;
593 flex: 1;
594 padding: 0;
595 display: flex;
596 flex-direction: column;
597}
598.tui-email-head {
599 padding: 10px 16px;
600 color: var(--ink);
601 border-bottom: 1px solid var(--line);
602 font-size: 12px;
603}
604.tui-email-body {
605 padding: 16px;
606 flex: 1;
607 color: var(--ink);
608 position: relative;
609 z-index: 2;
610}
611.tui-email-line {
612 white-space: pre-wrap;
613}
614.tui-link {
615 color: var(--blue);
616 border-bottom: 1px solid var(--blue);
617 cursor: pointer;
618}
619
620/* Watermark */
621.tui-watermark {
622 position: absolute;
623 left: 0;
624 right: 0;
625 bottom: 30px;
626 width: 100%;
627 height: 60%;
628 color: var(--ink-dim2);
629 pointer-events: none;
630 z-index: 1;
631 opacity: 0.55;
632}
633
634/* Flash */
635.tui-flash {
636 position: absolute;
637 top: 52px;
638 right: 16px;
639 background: rgba(5, 8, 10, 0.94);
640 border: 1px solid var(--accent);
641 color: var(--accent);
642 padding: 4px 10px;
643 font-size: 11px;
644 border-radius: 2px;
645 z-index: 6;
646}
647
648/* Status / legend line — dim like the real TUI */
649.tui-status {
650 display: flex;
651 flex-wrap: wrap;
652 gap: 0 14px;
653 padding: 6px 16px;
654 border-top: 1px solid var(--line);
655 background: var(--bg-2);
656 color: var(--ink-dim2);
657 font-size: 11px;
658 min-height: 26px;
659}
660.tui-status .seg {
661 color: var(--ink-dim);
662 white-space: nowrap;
663}
664.tui-status .seg.hi {
665 color: var(--yellow);
666}
667
668/* Filter command line */
669.tui-cmdline {
670 position: absolute;
671 bottom: 26px;
672 left: 0;
673 right: 0;
674 padding: 5px 12px;
675 background: #02050a;
676 color: var(--accent);
677 border-top: 1px solid var(--accent);
678 font-size: 12px;
679 display: flex;
680 align-items: center;
681 gap: 4px;
682 z-index: 5;
683}
684.tui-cmdline-prompt {
685 color: var(--accent);
686}
687.tui-cmdline-buf {
688 color: var(--ink);
689}
690.tui-caret {
691 display: inline-block;
692 width: 7px;
693 height: 13px;
694 background: var(--accent);
695 margin-left: 2px;
696 transform: translateY(2px);
697 animation: blink 1s step-end infinite;
698}
699@keyframes blink {
700 50% {
701 opacity: 0;
702 }
703}
704
705.tui-focus-hint {
706 position: absolute;
707 top: 48px;
708 right: 16px;
709 padding: 5px 10px;
710 background: rgba(5, 8, 10, 0.9);
711 border: 1px solid var(--line-2);
712 border-radius: 2px;
713 font-size: 11px;
714 color: var(--ink-dim);
715 pointer-events: none;
716 z-index: 3;
717}
718.tui-focus-hint kbd {
719 display: inline-block;
720 margin: 0 1px;
721 padding: 0 4px;
722 border: 1px solid var(--line-2);
723 background: var(--panel);
724 border-radius: 2px;
725 color: var(--ink);
726}
727
728/* ---------- Sections ---------- */
729.section-head {
730 display: grid;
731 grid-template-columns: 1.2fr 1fr;
732 gap: 48px;
733 padding: 80px 0 40px;
734 border-top: 1px solid var(--line);
735 align-items: end;
736}
737.section-eyebrow {
738 font-family: var(--mono);
739 font-size: 12px;
740 color: var(--accent);
741 margin-bottom: 16px;
742 letter-spacing: 0.04em;
743}
744.section-h2 {
745 font-size: 44px;
746 font-weight: 500;
747 letter-spacing: -0.025em;
748 line-height: 1.08;
749 margin: 0;
750 text-wrap: pretty;
751}
752.section-h2 .dim {
753 color: var(--ink-dim);
754}
755.section-head-r {
756 color: var(--ink-dim);
757 font-size: 15px;
758 max-width: 44ch;
759 margin: 0;
760}
761.section-head-r code {
762 font-size: 13px;
763 color: var(--accent);
764 background: var(--panel);
765 padding: 1px 5px;
766 border-radius: 2px;
767}
768
769/* Features grid */
770.feature-grid {
771 display: grid;
772 grid-template-columns: repeat(3, 1fr);
773 gap: 1px;
774 background: var(--line);
775 border: 1px solid var(--line);
776 margin-top: 24px;
777}
778.feature {
779 background: var(--bg);
780 padding: 32px 28px;
781 min-height: 240px;
782 display: flex;
783 flex-direction: column;
784 transition: background 0.2s;
785}
786.feature:hover {
787 background: var(--bg-2);
788}
789.feature-head {
790 display: flex;
791 align-items: center;
792 gap: 8px;
793 margin-bottom: 24px;
794 font-family: var(--mono);
795 font-size: 12px;
796 color: var(--accent);
797}
798.feature-dash {
799 color: var(--ink-dim2);
800}
801.feature-title {
802 font-family: var(--sans);
803 font-size: 20px;
804 font-weight: 500;
805 letter-spacing: -0.01em;
806 margin: 0 0 10px;
807 line-height: 1.2;
808}
809.feature-body {
810 color: var(--ink-dim);
811 font-size: 14px;
812 margin: 0 0 20px;
813 flex: 1;
814 line-height: 1.55;
815}
816.feature-mono {
817 margin: 0;
818 background: var(--panel-2);
819 border: 1px solid var(--line-2);
820 padding: 10px 12px;
821 font-size: 11.5px;
822 color: var(--accent);
823 border-radius: 2px;
824 white-space: pre-wrap;
825}
826@media (max-width: 960px) {
827 .feature-grid {
828 grid-template-columns: 1fr;
829 }
830 .section-head {
831 grid-template-columns: 1fr;
832 gap: 20px;
833 }
834 .section-h2 {
835 font-size: 32px;
836 }
837}
838
839/* Keybinds */
840.keybinds-grid {
841 display: grid;
842 grid-template-columns: repeat(3, 1fr);
843 gap: 40px 32px;
844 margin-top: 24px;
845 padding: 32px 0 80px;
846}
847.keybinds-col-head {
848 font-family: var(--mono);
849 font-size: 12px;
850 color: var(--accent);
851 margin-bottom: 16px;
852 letter-spacing: 0.04em;
853}
854.keybind-row {
855 display: flex;
856 align-items: baseline;
857 gap: 8px;
858 margin-bottom: 8px;
859 font-family: var(--mono);
860 font-size: 12.5px;
861}
862.keybind-k kbd {
863 display: inline-block;
864 padding: 1px 8px;
865 border: 1px solid var(--line-2);
866 background: var(--panel);
867 color: var(--ink);
868 border-radius: 2px;
869 font-size: 11.5px;
870 white-space: nowrap;
871}
872.keybind-dots {
873 color: var(--line-2);
874 flex: 1;
875 overflow: hidden;
876 white-space: nowrap;
877}
878.keybind-label {
879 color: var(--ink-dim);
880}
881@media (max-width: 960px) {
882 .keybinds-grid {
883 grid-template-columns: repeat(2, 1fr);
884 }
885}
886
887/* Install */
888.install-card {
889 background: var(--bg-2);
890 border: 1px solid var(--line-2);
891 border-radius: 4px;
892 overflow: hidden;
893 margin-bottom: 80px;
894}
895.install-tabs {
896 display: flex;
897 align-items: center;
898 border-bottom: 1px solid var(--line);
899 background: var(--bg);
900 padding: 0 8px;
901 overflow-x: auto;
902}
903.install-tab {
904 background: transparent;
905 border: none;
906 padding: 12px 16px;
907 color: var(--ink-dim);
908 font-family: var(--mono);
909 font-size: 13px;
910 cursor: pointer;
911 border-bottom: 2px solid transparent;
912 transition: all 0.12s;
913 white-space: nowrap;
914}
915.install-tab:hover {
916 color: var(--ink);
917}
918.install-tab.active {
919 color: var(--accent);
920 border-bottom-color: var(--accent);
921}
922.install-tabs-spacer {
923 flex: 1;
924}
925.install-plat {
926 font-family: var(--mono);
927 font-size: 11px;
928 color: var(--ink-dim2);
929 padding-right: 12px;
930 white-space: nowrap;
931}
932.install-code {
933 margin: 0;
934 padding: 36px 28px;
935 font-size: 15px;
936 color: var(--accent);
937 background: var(--bg-2);
938 white-space: pre-wrap;
939 line-height: 1.7;
940 overflow-x: auto;
941}
942.install-foot {
943 display: flex;
944 gap: 32px;
945 flex-wrap: wrap;
946 padding: 12px 28px;
947 border-top: 1px solid var(--line);
948 background: var(--bg);
949 font-family: var(--mono);
950 font-size: 12px;
951 color: var(--ink);
952}
953.install-foot .dim {
954 color: var(--ink-dim2);
955 text-transform: uppercase;
956 letter-spacing: 0.06em;
957 font-size: 10px;
958 margin-right: 6px;
959}
960
961/* CTA */
962.cta {
963 border-top: 1px solid var(--line);
964 border-bottom: 1px solid var(--line);
965 margin-top: 20px;
966 padding: 100px 0;
967 text-align: center;
968 background: repeating-linear-gradient(
969 0deg,
970 transparent 0 26px,
971 rgba(106, 168, 79, 0.02) 26px 27px
972 );
973}
974.cta-pre {
975 font-family: var(--mono);
976 color: var(--accent);
977 font-size: 14px;
978 margin-bottom: 16px;
979}
980.cta-h2 {
981 font-size: 60px;
982 font-weight: 500;
983 letter-spacing: -0.03em;
984 line-height: 1.04;
985 margin: 0 0 36px;
986}
987.cta-row {
988 display: flex;
989 gap: 14px;
990 justify-content: center;
991 flex-wrap: wrap;
992}
993@media (max-width: 960px) {
994 .cta-h2 {
995 font-size: 36px;
996 }
997}
998
999/* Footer */
1000.footer {
1001 padding: 64px 0 32px;
1002}
1003.footer-top {
1004 display: grid;
1005 grid-template-columns: 1.2fr 3fr;
1006 gap: 48px;
1007 padding-bottom: 48px;
1008 border-bottom: 1px solid var(--line);
1009}
1010.footer-tag {
1011 color: var(--ink-dim);
1012 font-size: 13px;
1013 margin: 16px 0 0;
1014}
1015.footer-cols {
1016 display: grid;
1017 grid-template-columns: repeat(4, 1fr);
1018 gap: 32px;
1019}
1020.footer-h {
1021 font-family: var(--mono);
1022 font-size: 11px;
1023 text-transform: uppercase;
1024 letter-spacing: 0.1em;
1025 color: var(--ink-dim2);
1026 margin-bottom: 12px;
1027}
1028.footer-cols a {
1029 display: block;
1030 color: var(--ink-dim);
1031 font-size: 13px;
1032 padding: 4px 0;
1033 cursor: pointer;
1034}
1035.footer-cols a:hover {
1036 color: var(--accent);
1037}
1038.footer-bot {
1039 display: flex;
1040 justify-content: space-between;
1041 align-items: center;
1042 padding-top: 24px;
1043 font-family: var(--mono);
1044 font-size: 11px;
1045 color: var(--ink-dim2);
1046}
1047.footer-copy {
1048 display: flex;
1049 align-items: center;
1050 gap: 10px;
1051 color: var(--ink-dim);
1052}
1053.footer-meta {
1054 display: flex;
1055 gap: 8px;
1056}
1057.footer-meta .sep {
1058 color: var(--line-2);
1059}
1060@media (max-width: 960px) {
1061 .footer-top {
1062 grid-template-columns: 1fr;
1063 }
1064 .footer-cols {
1065 grid-template-columns: repeat(2, 1fr);
1066 }
1067}
1068
1069/* Tweaks */
1070.tweaks {
1071 position: fixed;
1072 bottom: 20px;
1073 right: 20px;
1074 background: var(--bg-2);
1075 border: 1px solid var(--accent);
1076 padding: 14px;
1077 border-radius: 4px;
1078 min-width: 220px;
1079 font-family: var(--mono);
1080 box-shadow:
1081 0 20px 40px -10px rgba(0, 0, 0, 0.6),
1082 0 0 0 4px rgba(106, 168, 79, 0.06);
1083 z-index: 100;
1084}
1085.tweaks-head {
1086 font-size: 11px;
1087 color: var(--accent);
1088 text-transform: uppercase;
1089 letter-spacing: 0.12em;
1090 margin-bottom: 12px;
1091 padding-bottom: 8px;
1092 border-bottom: 1px dashed var(--line-2);
1093}
1094.tweaks-sub {
1095 font-size: 10px;
1096 color: var(--ink-dim2);
1097 text-transform: uppercase;
1098 letter-spacing: 0.08em;
1099 margin-bottom: 8px;
1100}
1101.tweaks-opt {
1102 display: flex;
1103 align-items: center;
1104 gap: 8px;
1105 width: 100%;
1106 padding: 6px 8px;
1107 background: transparent;
1108 border: none;
1109 color: var(--ink-dim);
1110 font-family: var(--mono);
1111 font-size: 12px;
1112 text-align: left;
1113 cursor: pointer;
1114 border-radius: 2px;
1115}
1116.tweaks-opt:hover {
1117 background: var(--panel);
1118 color: var(--ink);
1119}
1120.tweaks-opt.on {
1121 color: var(--accent);
1122}
1123.tweaks-dot {
1124 color: var(--accent);
1125 width: 10px;
1126}