Antonio Mika
·
2026-10-10
1*,
2::before,
3::after {
4 box-sizing: border-box;
5}
6
7::-moz-focus-inner {
8 border-style: none;
9 padding: 0;
10}
11:-moz-focusring {
12 outline: 1px dotted ButtonText;
13}
14:-moz-ui-invalid {
15 box-shadow: none;
16}
17
18:root {
19 --line-height: 1.3rem;
20 --grid-height: 0.65rem;
21 --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
22}
23
24@media (prefers-color-scheme: light) {
25 :root {
26 --white: #2e3f53;
27 --white-light: #cfe0f4;
28 --white-dark: #6c6a6a;
29 --code: #52576f;
30 --pre: #e1e7ee;
31 --bg-color: #f4f4f4;
32 --text-color: #24292f;
33 --link-color: #005cc5;
34 --visited: #6f42c1;
35 --blockquote: #005cc5;
36 --blockquote-bg: #cfe0f4;
37 --hover: #c11e7a;
38 --grey: #ccc;
39 --grey-light: #6a708e;
40 --green: #1a7f37;
41 }
42}
43
44@media (prefers-color-scheme: dark) {
45 :root {
46 --white: #f2f2f2;
47 --white-light: #f2f2f2;
48 --white-dark: #e8e8e8;
49 --code: #414558;
50 --pre: #252525;
51 --bg-color: #282a36;
52 --text-color: #f2f2f2;
53 --link-color: #8be9fd;
54 --visited: #bd93f9;
55 --blockquote: #bd93f9;
56 --blockquote-bg: #353548;
57 --hover: #ff80bf;
58 --grey: #414558;
59 --grey-light: #6a708e;
60 --green: #50fa7b;
61 }
62}
63
64html {
65 background-color: var(--bg-color);
66 color: var(--text-color);
67 line-height: var(--line-height);
68 font-family:
69 -apple-system,
70 BlinkMacSystemFont,
71 "Segoe UI",
72 Roboto,
73 Oxygen,
74 Ubuntu,
75 Cantarell,
76 "Fira Sans",
77 "Droid Sans",
78 "Helvetica Neue",
79 Arial,
80 sans-serif,
81 "Apple Color Emoji",
82 "Segoe UI Emoji",
83 "Segoe UI Symbol";
84 -webkit-text-size-adjust: 100%;
85 -moz-tab-size: 4;
86 -o-tab-size: 4;
87 tab-size: 4;
88}
89
90body {
91 margin: 0 auto;
92}
93
94img {
95 max-width: 100%;
96 height: auto;
97}
98
99b,
100strong {
101 font-weight: bold;
102}
103
104code,
105kbd,
106samp,
107pre {
108 font-family: var(--font-mono);
109 font-variant-numeric: tabular-nums;
110}
111
112code,
113kbd,
114samp {
115 border: 2px solid var(--code);
116}
117
118pre > code {
119 background-color: inherit;
120 padding: 0;
121 border: none;
122 border-radius: 0;
123}
124
125code {
126 border-radius: 0.3rem;
127 padding: 0.025rem 0.3rem;
128}
129
130pre {
131 border-radius: 1px;
132 padding: var(--line-height);
133 overflow-x: auto;
134 background-color: var(--pre) !important;
135}
136
137small {
138 font-size: 0.8rem;
139}
140
141details {
142 border: 2px solid var(--grey-light);
143 padding: calc(var(--grid-height) - 2px) 1ch;
144 margin-bottom: var(--grid-height);
145}
146
147details[open] summary {
148 margin-bottom: var(--grid-height);
149}
150
151summary {
152 display: list-item;
153 cursor: pointer;
154}
155
156h1,
157h2,
158h3,
159h4,
160h5,
161h6 {
162 margin: 0;
163 padding: 0;
164 border: 0;
165 font-family: var(--font-mono);
166 font-weight: bold;
167}
168
169h1 {
170 font-size: 1.6rem;
171 line-height: calc(var(--line-height) * 1.5);
172 margin-top: calc(var(--line-height) * 2.5);
173 margin-bottom: var(--grid-height);
174}
175
176h2 {
177 font-size: 1.3rem;
178 line-height: var(--line-height);
179 margin-top: calc(var(--line-height) * 2);
180 margin-bottom: var(--grid-height);
181}
182
183h3 {
184 font-size: 1.1rem;
185 line-height: var(--line-height);
186 margin-top: calc(var(--line-height) * 1.5);
187 margin-bottom: var(--grid-height);
188}
189
190h4,
191h5,
192h6 {
193 font-size: 1rem;
194 line-height: var(--line-height);
195 margin-top: var(--line-height);
196 margin-bottom: var(--grid-height);
197 color: var(--white-dark);
198}
199
200
201path {
202 fill: var(--text-color);
203 stroke: var(--text-color);
204}
205
206hr {
207 color: inherit;
208 border: 0;
209 height: 1px;
210 background: var(--grey-light);
211 margin: calc(var(--grid-height) - 1px) auto;
212}
213
214hr.dashed {
215 border: none;
216 border-top: 1px dashed var(--grey-light);
217 background: none;
218 height: 0;
219 margin: calc(var(--grid-height) - 1px) auto;
220}
221
222a {
223 color: var(--link-color);
224 text-decoration: underline;
225 text-decoration-thickness: 1px;
226 text-underline-offset: 2px;
227 padding: 0 2px;
228 border-radius: 1px;
229 transition: background-color 0.1s ease, color 0.1s ease;
230}
231
232a:hover {
233 background-color: var(--link-color);
234 color: var(--bg-color);
235 text-decoration: none;
236}
237
238a:visited {
239 color: var(--visited);
240}
241
242a:visited:hover {
243 background-color: var(--visited);
244 color: var(--bg-color);
245 text-decoration: none;
246}
247
248section {
249 margin-bottom: 1.4rem;
250}
251
252section:last-child {
253 margin-bottom: 0;
254}
255
256header {
257 margin: 1rem auto;
258}
259
260p {
261 margin-top: var(--line-height);
262 margin-bottom: var(--line-height);
263}
264
265article {
266 overflow-wrap: break-word;
267}
268
269blockquote {
270 border-left: 5px solid var(--blockquote);
271 background-color: var(--blockquote-bg);
272 padding: var(--grid-height);
273 margin: var(--line-height) 0;
274}
275
276blockquote > p {
277 margin: 0;
278}
279
280blockquote code {
281 border: 1px solid var(--blockquote);
282}
283
284ul,
285ol {
286 padding: 0 15px;
287 list-style-position: inside;
288 list-style-type: square;
289 margin: var(--grid-height) 0;
290}
291
292ul[style*="list-style-type: none;"] {
293 padding: 0;
294}
295
296ol ul, ol ol, ul ol, ul ul {
297 padding: 0 0 0 var(--line-height);
298 margin: 0;
299}
300
301li {
302 margin: var(--grid-height) 0;
303 padding: 0;
304}
305
306li::marker {
307 line-height: 0;
308 color: var(--grey-light);
309}
310
311li blockquote,
312li pre {
313 display: inline-block;
314 margin: 0;
315 width: 100%;
316}
317
318li pre {
319 padding: var(--grid-height);
320}
321
322[role="list"] {
323 display: flex;
324 flex-direction: column;
325 gap: var(--grid-height);
326}
327
328[role="list"] [role="list"] {
329 margin-left: 1.3rem;
330}
331
332[role="listitem"] {
333 display: flex;
334 align-items: flex-start;
335 gap: 5px;
336}
337
338[role="listitem"]:has(pre, img, blockquote) {
339 align-items: center;
340}
341
342table {
343 border-collapse: collapse;
344 margin: var(--line-height) 0;
345}
346
347th,
348td {
349 border: 1px solid var(--white);
350 padding: var(--grid-height);
351}
352
353footer {
354 text-align: center;
355 margin-bottom: calc(var(--line-height) * 3);
356}
357
358dt {
359 font-weight: bold;
360}
361
362dd {
363 margin-left: 0;
364}
365
366dd:not(:last-child) {
367 margin-bottom: 0.5rem;
368}
369
370figure {
371 margin: 0;
372}
373
374sup {
375 line-height: 0;
376}
377
378#toc {
379 margin-top: var(--line-height);
380}
381
382.container {
383 max-width: 50em;
384 width: 100%;
385}
386
387.container-sm {
388 max-width: 40em;
389 width: 100%;
390}
391
392.mono,
393time,
394nav {
395 font-family: var(--font-mono);
396 font-variant-numeric: tabular-nums;
397}
398
399.link-alt-hover,
400.link-alt-hover:visited,
401.link-alt-hover:visited:hover,
402.link-alt-hover:hover {
403 color: var(--hover);
404 text-decoration: none;
405}
406
407.link-alt-hover:visited:hover,
408.link-alt-hover:hover {
409 background-color: transparent;
410 text-decoration: underline;
411}
412
413.link-alt,
414.link-alt:visited,
415.link-alt:visited:hover,
416.link-alt:hover {
417 color: var(--white);
418 text-decoration: none;
419}
420
421.link-alt:visited:hover,
422.link-alt:hover {
423 background-color: transparent;
424 text-decoration: underline;
425}
426
427.link-grey,
428.link-grey:visited {
429 color: var(--grey-light);
430 text-decoration: none;
431}
432
433.link-grey:hover,
434.link-grey:visited:hover {
435 background-color: transparent;
436 color: var(--text-color);
437 text-decoration: underline;
438}
439
440.text-2xl code, .text-xl code, .text-lg code, .text-md code {
441 text-transform: none;
442}
443
444.text-2xl {
445 font-size: 1.6rem;
446 font-weight: bold;
447 line-height: calc(var(--line-height) * 1.5);
448 margin-bottom: var(--grid-height);
449}
450
451.text-xl {
452 font-size: 1.3rem;
453 font-weight: bold;
454 line-height: var(--line-height);
455 margin-bottom: var(--grid-height);
456}
457
458.text-lg {
459 font-size: 1.1rem;
460 font-weight: bold;
461 line-height: var(--line-height);
462 margin-bottom: var(--grid-height);
463}
464
465.text-md {
466 font-size: 1rem;
467 font-weight: bold;
468 line-height: var(--line-height);
469 margin-bottom: var(--grid-height);
470}
471
472.text-right {
473 text-align: right;
474}
475
476.text-sm {
477 font-size: 0.8rem;
478}
479
480.w-full {
481 width: 100%;
482}
483
484.border {
485 border: 2px solid var(--grey-light);
486}
487
488.text-left {
489 text-align: left;
490}
491
492.text-center {
493 text-align: center;
494}
495
496.text-underline {
497 text-decoration: underline;
498 text-decoration-thickness: 2px;
499}
500
501.text-hdr {
502 color: var(--hover);
503}
504
505.font-bold {
506 font-weight: bold;
507}
508
509.font-italic {
510 font-style: italic;
511}
512
513.inline {
514 display: inline;
515}
516
517.inline-block {
518 display: inline-block;
519}
520
521.max-w-half {
522 max-width: 50%;
523}
524
525.flex {
526 display: flex;
527}
528
529.flex-col {
530 flex-direction: column;
531}
532
533.flex-wrap {
534 flex-wrap: wrap;
535}
536
537.items-center {
538 align-items: center;
539}
540
541.m-0 {
542 margin: 0;
543}
544
545.mt-0 {
546 margin-top: 0;
547}
548
549.mt {
550 margin-top: var(--grid-height);
551}
552
553.mt-2 {
554 margin-top: var(--line-height);
555}
556
557.mt-4 {
558 margin-top: calc(var(--line-height) * 2);
559}
560
561.mb {
562 margin-bottom: var(--grid-height);
563}
564
565.mb-2 {
566 margin-bottom: var(--line-height);
567}
568
569.mb-4 {
570 margin-bottom: calc(var(--line-height) * 2);
571}
572
573.mr {
574 margin-right: 0.5rem;
575}
576
577.ml {
578 margin-left: 0.5rem;
579}
580
581.my {
582 margin-top: var(--grid-height);
583 margin-bottom: var(--grid-height);
584}
585
586.my-2 {
587 margin-top: var(--line-height);
588 margin-bottom: var(--line-height);
589}
590
591.my-4 {
592 margin-top: calc(var(--line-height) * 2);
593 margin-bottom: calc(var(--line-height) * 2);
594}
595
596.p-0 {
597 padding: 0;
598}
599
600.px {
601 padding-left: 0.5rem;
602 padding-right: 0.5rem;
603}
604
605.px-4 {
606 padding-left: 2rem;
607 padding-right: 2rem;
608}
609
610.py {
611 padding-top: var(--grid-height);
612 padding-bottom: var(--grid-height);
613}
614
615.py-4 {
616 padding-top: calc(var(--line-height) * 2);
617 padding-bottom: calc(var(--line-height) * 2);
618}
619
620.justify-between {
621 justify-content: space-between;
622}
623
624.justify-center {
625 justify-content: center;
626}
627
628.gap {
629 gap: var(--grid-height);
630}
631
632.gap-2 {
633 gap: var(--line-height);
634}
635
636.group {
637 display: flex;
638 flex-direction: column;
639 gap: var(--grid-height);
640}
641
642.group-2 {
643 display: flex;
644 flex-direction: column;
645 gap: var(--line-height);
646}
647
648.group-h {
649 display: flex;
650 gap: var(--grid-height);
651 align-items: center;
652}
653
654.flex-1 {
655 flex: 1;
656}
657
658.items-end {
659 align-items: end;
660}
661
662.items-start {
663 align-items: start;
664}
665
666.justify-end {
667 justify-content: end;
668}
669
670.font-grey-light {
671 color: var(--grey-light);
672}
673
674.hidden {
675 display: none;
676}
677
678.align-right {
679 text-align: right;
680}
681
682.text-transform-none {
683 text-transform: none;
684}
685
686/* ==== MARKDOWN ==== */
687
688.md > :first-child {
689 margin-top: 0 !important;
690}
691
692.md h1,
693.md h2,
694.md h3,
695.md h4 {
696 padding: 0;
697 font-weight: bold;
698}
699
700.md h1 a,
701.md h2 a,
702.md h3 a,
703.md h4 a {
704 color: var(--grey-light);
705 text-decoration: none;
706}
707
708.md h1 a:hover,
709.md h2 a:hover,
710.md h3 a:hover,
711.md h4 a:hover {
712 background-color: transparent;
713 color: var(--hover);
714 text-decoration: underline;
715}
716
717h1 code, h2 code, h3 code, h4 code {
718 text-transform: none;
719}
720
721/* ==== HELPERS ==== */
722
723.logo-header {
724 line-height: 1;
725 display: inline-block;
726 background-color: #ff79c6;
727 background-image: linear-gradient(to right, #ff5555, #ff79c6, #f8f859);
728 color: transparent;
729 background-clip: text;
730 border: 3px solid #ff79c6;
731 padding: 8px 10px 10px 10px;
732 border-radius: 10px;
733 background-size: 100%;
734 margin: 0;
735 -webkit-background-clip: text;
736 -moz-background-clip: text;
737 -webkit-text-fill-color: transparent;
738 -moz-text-fill-color: transparent;
739}
740
741.btn {
742 border: 2px solid var(--link-color);
743 color: var(--link-color);
744 padding: 0.4rem 1rem;
745 font-weight: bold;
746 display: inline-block;
747}
748
749.btn:hover {
750 background-color: var(--link-color);
751 color: var(--bg-color);
752}
753
754.btn-link,
755.btn-link:visited {
756 border: 2px solid var(--link-color);
757 color: var(--link-color);
758 padding: var(--grid-height);
759 text-decoration: none;
760 font-weight: bold;
761 display: inline-block;
762}
763
764.btn-link:hover,
765.btn-link:visited:hover {
766 background-color: var(--link-color);
767 color: var(--bg-color);
768 text-decoration: none;
769}
770
771.box {
772 border: 1px solid var(--grey-light);
773 padding: var(--grid-height);
774 background-color: var(--pre);
775}
776
777.box-sm {
778 border: 1px solid var(--grey-light);
779 padding: var(--grid-height);
780 background-color: var(--pre);
781}
782
783.box-dashed {
784 border: 1px dashed var(--grey-light);
785 padding: var(--grid-height);
786}
787
788.box-alert {
789 border: 1px solid var(--hover);
790 padding: var(--line-height);
791}
792
793.box-sm-alert {
794 border: 1px solid var(--hover);
795 padding: var(--grid-height);
796}
797
798.text-green {
799 color: var(--green);
800}
801
802.prompt,
803pre.cmd::before {
804 content: "$ ";
805 color: var(--green);
806 font-weight: bold;
807}
808
809.list-none {
810 list-style-type: none;
811}
812
813.list-square {
814 list-style-type: square;
815}
816
817.list-disc {
818 list-style-type: disc;
819}
820
821.list-decimal {
822 list-style-type: decimal;
823}
824
825.pill {
826 border: 1px solid var(--link-color);
827 color: var(--link-color);
828}
829
830.pill-alert {
831 border: 1px solid var(--hover);
832 color: var(--hover);
833}
834
835.pill-info {
836 border: 1px solid var(--visited);
837 color: var(--visited);
838}
839
840@media only screen and (max-width: 40em) {
841 body {
842 padding: 0 var(--grid-height);
843 }
844
845 header {
846 margin: 0;
847 }
848
849 .flex-collapse {
850 flex-direction: column;
851 }
852}
853
854body {
855 position: relative;
856}
857
858/*
859.debug-grid {
860 width: 100%;
861 height: 100%;
862 position: absolute;
863 top: 0;
864 left: 0;
865 right: 0;
866 bottom: 0;
867 z-index: 1000;
868 pointer-events: none;
869 background-image:
870 repeating-linear-gradient(rgba(255, 121, 198, 0.18) 0 1px, transparent 1px 100%),
871 repeating-linear-gradient(90deg, rgba(139, 233, 253, 0.10) 0 1px, transparent 1px 100%);
872 background-size: 1ch var(--grid-height);
873 margin: 0;
874}
875*/