1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64
65. 65
66. 66
67. 67
68. 68
69. 69
70. 70
71. 71
72. 72
73. 73
74. 74
75. 75
76. 76
77. 77
78. 78
79. 79
80. 80
81. 81
82. 82
83. 83
84. 84
85. 85
86. 86

:root {
  --font-size-sm: 1.4rem;
  --font-size-md: 1.6rem;
  --font-size-lg: 1.8rem;
  --font-size-xl: 2.2rem;

  --line-height-dense: 1.5;
  --line-height-normal: 1.75;
  --line-height-sparse: 2;

  --gutter-xs: 2px;
  --gutter-sm: 4px;
  --gutter-md: 8px;
  --gutter-lg: 16px;
  --gutter-xl: 24px;

  --font-family: 'Inter', sans-serif;
  --font-family-mono: Hack, monospace;

  --radius: 3px;

  --border-width: 1px;

  --color-neutral: 0, 0%, 93%;
  --color-on-neutral: 0, 0%, 5%;
  --color-primary: 100, 35%, 35%;
  --color-on-primary: 0, 0%, 95%;
  --color-panel: 100, 5%, 90%;
  --color-on-panel: 0, 0%, 5%;
  --color-danger: 20, 50%, 40%;
  --color-on-danger: 0, 0%, 5%;
  --color-border: 0, 0%, 0%, 0.25;

  --color-code-comment: 20, 0%, 30%;
  --color-code-keyword: 20, 90%, 30%;
  --color-code-string: 60, 60%, 30%;
  --color-code-operator: var(--color-code-keyword);
  --color-code-function: 200, 80%, 30%;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-neutral: 0, 0%, 15%;
    --color-on-neutral: 0, 0%, 95%;
    --color-primary: 100, 30%, 45%;
    --color-on-primary: 0, 0%, 95%;
    --color-panel: 100, 5%, 10%;
    --color-on-panel: 0, 0%, 95%;
    --color-danger: 20, 45%, 50%;
    --color-on-danger: 0, 0%, 95%;
    --color-border: 0, 0%, 95%, 0.2;

    --color-code-comment: 20, 0%, 60%;
    --color-code-keyword: 20, 80%, 65%;
    --color-code-string: 60, 40%, 55%;
    --color-code-operator: var(--color-code-keyword);
    --color-code-function: 200, 60%, 50%;
  }
}

*, *::before, *::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font: inherit;
}

html {
  font-size: 62.5%;
}

body {
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-family);
}
@supports (font-variation-settings: normal) {
  :root {
    --font-family: 'Inter var', sans-serif;
  }
}