···

       
9
       
 
       
feed_filenames = ["rss.xml", "atom.xml"]

     

       
10
       
 
       
default_language = "en"

     

       
11
       
 
       


     

       
12
       
-
       
taxonomies = [

     

       
13
       
-
       
    {name = "tags", feed = true},

     

       
14
       
-
       
]

     

       
15
       
 
       


     

       
16
       
 
       
[markdown]

     

       
17
       
 
       
render_emoji = true

     
···

       
41
       
 
       
twitter_card = true

     

       
42
       
 
       


     

       
43
       
 
       
header_nav = [

     

       
44
       
-
       
  { url = "/", name = "/root" },

     

       
45
       
-
       
  { url = "/verify", name = "/verify" },

     

       
46
       
-
       
  { url = "/blog", name = "/blog" }

     

       
47
       
 
       
]

     

···

       
9
       
 
       
feed_filenames = ["rss.xml", "atom.xml"]

     

       
10
       
 
       
default_language = "en"

     

       
11
       
 
       


     

       
12
       
+
       
taxonomies = [{ name = "tags", feed = true }]

     

       
0
       
 
       

     

       
0
       
 
       

     

       
13
       
 
       


     

       
14
       
 
       
[markdown]

     

       
15
       
 
       
render_emoji = true

     
···

       
39
       
 
       
twitter_card = true

     

       
40
       
 
       


     

       
41
       
 
       
header_nav = [

     

       
42
       
+
       
    { url = "/", name = "/root" },

     

       
43
       
+
       
    { url = "/verify", name = "/verify" },

     

       
44
       
+
       
    { url = "/blog", name = "/blog" },

     

       
45
       
 
       
]

     

···

       
1
       
 
       
#nav-bar {

     

       
2
       
-
       
	padding: 0.625rem 0 0 0;

     

       
3
       
-
       
	display: flex;

     

       
4
       
-
       
	flex-direction: row;

     

       
5
       
-
       
	gap: 0.25rem;

     

       
6
       
-
       
	flex-wrap: wrap;

     

       
7
       
-
       
	justify-content: flex-end;

     

       
8
       
-
       
	align-items: center;

     

       
9
       
-
       
	align-content: flex-end;

     

       
10
       
 
       
}

     

       
11
       
 
       


     

       
12
       
 
       
#footer-container {

     

       
13
       
-
       
	display: flex;

     

       
14
       
-
       
	flex-direction: column;

     

       
15
       
-
       
	justify-content: center;

     

       
16
       
-
       
	align-items: center;

     

       
17
       
-
       
	text-align: center;

     

       
18
       
-
       
	padding-bottom: 0.5rem;

     

       
19
       
 
       
}

     

       
20
       
 
       


     

       
21
       
 
       
#footer-container p {

     

       
22
       
-
       
	margin: 0;

     

       
23
       
 
       
}

     

       
24
       
 
       


     

       
25
       
 
       
.accent-data {

     

       
26
       
-
       
	color: var(--accent-dark);

     

       
27
       
 
       
}

     

       
28
       
 
       


     

       
29
       
 
       
.tags-data {

     

       
30
       
-
       
	display: flex;

     

       
31
       
-
       
	flex-direction: row;

     

       
32
       
-
       
	flex-wrap: wrap;

     

       
33
       
-
       
	justify-content: flex-end;

     

       
34
       
-
       
	align-items: flex-start;

     

       
35
       
-
       
	align-content: flex-end;

     

       
36
       
-
       
	gap: 0.25rem;

     

       
37
       
 
       
}

     

       
38
       
 
       


     

       
39
       
 
       
.title-list li {

     

       
40
       
-
       
	margin-bottom: 0.375rem;

     

       
41
       
 
       
}

     

       
42
       
 
       


     

       
43
       
 
       
/* icons settings */

     

       
44
       
 
       
.icons {

     

       
45
       
-
       
	width: 1.3rem;

     

       
46
       
-
       
	height: 1.3rem;

     

       
47
       
-
       
	aspect-ratio: 1 / 1;

     

       
48
       
-
       
	display: inline-block;

     

       
49
       
-
       
	vertical-align: middle;

     

       
50
       
-
       
	color: var(--text);

     

       
51
       
-
       
	fill: var(--text);

     

       
52
       
-
       
	background-color: transparent;

     

       
53
       
-
       
	cursor: pointer;

     

       
54
       
 
       
}

     

       
55
       
 
       


     

       
56
       
 
       
.icons:hover {

     

       
57
       
-
       
	background-color: transparent;

     

       
58
       
-
       
	color: var(--accent);

     

       
59
       
 
       
}

     

       
60
       
 
       


     

       
61
       
 
       
/* footnotes */

     

       
62
       
 
       
.footnote-definition {

     

       
63
       
-
       
	margin: 0 0 0 0.125rem;

     

       
64
       
 
       
}

     

       
65
       
 
       


     

       
66
       
 
       
.footnote-definition-label {

     

       
67
       
-
       
	color: var(--accent);

     

       
68
       
 
       
}

     

       
69
       
 
       


     

       
70
       
 
       
.footnote-definition p {

     

       
71
       
-
       
	display: inline;

     

       
72
       
-
       
	margin: 0.625rem 0 0 0.625rem;

     

       
73
       
 
       
}

     

       
74
       
 
       


     

       
75
       
 
       
/* general classes */

     

       
76
       
 
       
.no-style {

     

       
77
       
-
       
	padding: 0;

     

       
78
       
-
       
	margin: 0;

     

       
79
       
-
       
	border: none;

     

       
80
       
-
       
	border-radius: 0;

     

       
81
       
 
       
}

     

       
82
       
 
       


     

       
83
       
 
       
.no-style:hover {

     

       
84
       
-
       
	background-color: transparent;

     

       
85
       
-
       
	color: var(--accent);

     

       
86
       
 
       
}

     

       
87
       
 
       


     

       
88
       
 
       
.center {

     

       
89
       
-
       
	text-align: center;

     

       
90
       
 
       
}

     

       
91
       
 
       


     

       
92
       
 
       
.center img {

     

       
93
       
-
       
	display: block;

     

       
94
       
-
       
	margin: 1rem auto;

     

       
95
       
 
       
}

     

       
96
       
 
       


     

       
97
       
 
       
.center figcaption {

     

       
98
       
-
       
	text-align: center;

     

       
99
       
 
       
}

     

       
100
       
 
       


     

       
101
       
 
       
.float-right {

     

       
102
       
-
       
	float: right;

     

       
103
       
 
       
}

     

       
104
       
 
       


     

       
105
       
 
       
.float-left {

     

       
106
       
-
       
	float: left;

     

       
107
       
 
       
}

     

       
108
       
 
       


     

       
109
       
 
       
div > code,

     

       
110
       
 
       
li code,

     

       
111
       
 
       
p code {

     

       
112
       
-
       
	padding: 0.1em 0.3em 0.1em 0.3em;

     

       
113
       
-
       
	color: var(--text-dark);

     

       
114
       
-
       
	background-color: var(--bg-light);

     

       
115
       
 
       
}

     

       
116
       
 
       


     

       
117
       
 
       
pre {

     

       
118
       
-
       
	border-top-left-radius: 0;

     

       
119
       
 
       
}

     

       
120
       
 
       


     

       
121
       
 
       
blockquote {

     

       
122
       
-
       
	padding-top: 0.2rem;

     

       
123
       
-
       
	padding-bottom: 0.2rem;

     

       
124
       
 
       
}

     

       
125
       
 
       


     

       
126
       
 
       
blockquote:has(+ pre) {

     

       
127
       
-
       
	display: inline-block;

     

       
128
       
-
       
	border: none;

     

       
129
       
-
       
	font-family: "code", monospace !important;

     

       
130
       
-
       
	font-size: 0.8rem;

     

       
131
       
-
       
	font-weight: 600;

     

       
132
       
-
       
	margin: 0;

     

       
133
       
-
       
	margin-bottom: 0.2rem;

     

       
134
       
-
       
	margin-block: 0 0;

     

       
135
       
-
       
	border-top-left-radius: 0.2em;

     

       
136
       
-
       
	border-top-right-radius: 0.2em;

     

       
137
       
-
       
	padding-left: 0.75rem;

     

       
138
       
-
       
	padding-right: 0.75rem;

     

       
139
       
-
       
	padding-top: 0.25rem;

     

       
140
       
-
       
	padding-bottom: 0.25rem;

     

       
141
       
-
       
	position: relative;

     

       
142
       
-
       
	background-color: var(--accent);

     

       
143
       
 
       
}

     

       
144
       
 
       


     

       
145
       
 
       
blockquote:has(+ pre) p {

     

       
146
       
-
       
	margin: 0;

     

       
147
       
-
       
	color: var(--accent-text);

     

       
148
       
 
       
}

     

       
149
       
 
       


     

       
150
       
 
       
blockquote:has(+ pre) p::selection {

     

       
151
       
-
       
	background: var(--pink-puree);

     

       
152
       
 
       
}

     

       
153
       
 
       


     

       
154
       
 
       
.yt-embed {

     

       
155
       
-
       
	width: 100%;

     

       
156
       
-
       
	display: flex;

     

       
157
       
-
       
	flex-direction: column;

     

       
158
       
-
       
	justify-content: center;

     

       
159
       
-
       
	align-content: center;

     

       
160
       
-
       
	text-align: center;

     

       
161
       
 
       
}

     

       
162
       
 
       


     

       
163
       
 
       
.yt-embed iframe {

     

       
164
       
-
       
	width: 100%;

     

       
165
       
-
       
	aspect-ratio: 16 / 9;

     

       
166
       
-
       
	align-self: center;

     

       
167
       
 
       
}

     

       
168
       
 
       


     

       
169
       
 
       
.yt-embed figcaption {

     
···

       
180
       
 
       
}

     

       
181
       
 
       


     

       
182
       
 
       
:root {

     

       
183
       
-
       
	--nightshade-violet: oklch(0.27 0.0242 287.67);

     

       
184
       
-
       
	--purple-night: oklch(27.58% 0.0203 289.13);

     

       
185
       
-
       
	--dark-crushed-grape: oklch(74.02% 0.0756 311.96);

     

       
186
       
-
       
	--light-crushed-grape: oklch(73.48% 0.1008 284.99);

     

       
187
       
-
       
	--reseda-green: oklch(62.33% 0.0475 126.94);

     

       
188
       
-
       
	--earth-yellow: oklch(86.49% 0.018 73.05);

     

       
189
       
-
       
	--sunset: oklch(0.86 0.0213 73.05);

     

       
190
       
-
       
	--ultra-violet: oklch(42.21% 0.0676 297.45);

     

       
191
       
-
       
	--rose-quartz: oklch(65.32% 0.0585 311.96);

     

       
192
       
-
       
	--pink-puree: oklch(75.65% 0.0555 290.76);

     

       
193
       
-
       
	--lavendar-breeze: oklch(91.06% 0.0223 290.76);

     

       
194
       
-
       
	--purple-gray: oklch(25.63% 0.0002 290.76);

     

       
195
       
-
       
	--alice-blue: oklch(95.38% 0.0118 239.91);

     

       
196
       
-
       
}

     

       
197
       
-
       


     

       
198
       
-
       
body::after {

     

       
199
       
-
       
	content: "";

     

       
200
       
-
       
	position: absolute;

     

       
201
       
-
       
	top: 0;

     

       
202
       
-
       
	left: 0;

     

       
203
       
-
       
	width: 100%;

     

       
204
       
-
       
	height: 100%;

     

       
205
       
-
       
	pointer-events: none;

     

       
206
       
 
       
}

     

···

       
1
       
 
       
#nav-bar {

     

       
2
       
+
       
    padding: 0.625rem 0 0 0;

     

       
3
       
+
       
    display: flex;

     

       
4
       
+
       
    flex-direction: row;

     

       
5
       
+
       
    gap: 0.25rem;

     

       
6
       
+
       
    flex-wrap: wrap;

     

       
7
       
+
       
    justify-content: flex-end;

     

       
8
       
+
       
    align-items: center;

     

       
9
       
+
       
    align-content: flex-end;

     

       
10
       
 
       
}

     

       
11
       
 
       


     

       
12
       
 
       
#footer-container {

     

       
13
       
+
       
    display: flex;

     

       
14
       
+
       
    flex-direction: column;

     

       
15
       
+
       
    justify-content: center;

     

       
16
       
+
       
    align-items: center;

     

       
17
       
+
       
    text-align: center;

     

       
18
       
+
       
    padding-bottom: 0.5rem;

     

       
19
       
 
       
}

     

       
20
       
 
       


     

       
21
       
 
       
#footer-container p {

     

       
22
       
+
       
    margin: 0;

     

       
23
       
 
       
}

     

       
24
       
 
       


     

       
25
       
 
       
.accent-data {

     

       
26
       
+
       
    color: var(--accent-dark);

     

       
27
       
 
       
}

     

       
28
       
 
       


     

       
29
       
 
       
.tags-data {

     

       
30
       
+
       
    display: flex;

     

       
31
       
+
       
    flex-direction: row;

     

       
32
       
+
       
    flex-wrap: wrap;

     

       
33
       
+
       
    justify-content: flex-end;

     

       
34
       
+
       
    align-items: flex-start;

     

       
35
       
+
       
    align-content: flex-end;

     

       
36
       
+
       
    gap: 0.25rem;

     

       
37
       
 
       
}

     

       
38
       
 
       


     

       
39
       
 
       
.title-list li {

     

       
40
       
+
       
    margin-bottom: 0.375rem;

     

       
41
       
 
       
}

     

       
42
       
 
       


     

       
43
       
 
       
/* icons settings */

     

       
44
       
 
       
.icons {

     

       
45
       
+
       
    width: 1.3rem;

     

       
46
       
+
       
    height: 1.3rem;

     

       
47
       
+
       
    aspect-ratio: 1 / 1;

     

       
48
       
+
       
    display: inline-block;

     

       
49
       
+
       
    vertical-align: middle;

     

       
50
       
+
       
    color: var(--text);

     

       
51
       
+
       
    fill: var(--text);

     

       
52
       
+
       
    background-color: transparent;

     

       
53
       
+
       
    cursor: pointer;

     

       
54
       
 
       
}

     

       
55
       
 
       


     

       
56
       
 
       
.icons:hover {

     

       
57
       
+
       
    background-color: transparent;

     

       
58
       
+
       
    color: var(--accent);

     

       
59
       
 
       
}

     

       
60
       
 
       


     

       
61
       
 
       
/* footnotes */

     

       
62
       
 
       
.footnote-definition {

     

       
63
       
+
       
    margin: 0 0 0 0.125rem;

     

       
64
       
 
       
}

     

       
65
       
 
       


     

       
66
       
 
       
.footnote-definition-label {

     

       
67
       
+
       
    color: var(--accent);

     

       
68
       
 
       
}

     

       
69
       
 
       


     

       
70
       
 
       
.footnote-definition p {

     

       
71
       
+
       
    display: inline;

     

       
72
       
+
       
    margin: 0.625rem 0 0 0.625rem;

     

       
73
       
 
       
}

     

       
74
       
 
       


     

       
75
       
 
       
/* general classes */

     

       
76
       
 
       
.no-style {

     

       
77
       
+
       
    padding: 0;

     

       
78
       
+
       
    margin: 0;

     

       
79
       
+
       
    border: none;

     

       
80
       
+
       
    border-radius: 0;

     

       
81
       
 
       
}

     

       
82
       
 
       


     

       
83
       
 
       
.no-style:hover {

     

       
84
       
+
       
    background-color: transparent;

     

       
85
       
+
       
    color: var(--accent);

     

       
86
       
 
       
}

     

       
87
       
 
       


     

       
88
       
 
       
.center {

     

       
89
       
+
       
    text-align: center;

     

       
90
       
 
       
}

     

       
91
       
 
       


     

       
92
       
 
       
.center img {

     

       
93
       
+
       
    display: block;

     

       
94
       
+
       
    margin: 1rem auto;

     

       
95
       
 
       
}

     

       
96
       
 
       


     

       
97
       
 
       
.center figcaption {

     

       
98
       
+
       
    text-align: center;

     

       
99
       
 
       
}

     

       
100
       
 
       


     

       
101
       
 
       
.float-right {

     

       
102
       
+
       
    float: right;

     

       
103
       
 
       
}

     

       
104
       
 
       


     

       
105
       
 
       
.float-left {

     

       
106
       
+
       
    float: left;

     

       
107
       
 
       
}

     

       
108
       
 
       


     

       
109
       
 
       
div > code,

     

       
110
       
 
       
li code,

     

       
111
       
 
       
p code {

     

       
112
       
+
       
    padding: 0.1em 0.3em 0.1em 0.3em;

     

       
113
       
+
       
    color: var(--text-dark);

     

       
114
       
+
       
    background-color: var(--bg-light);

     

       
115
       
 
       
}

     

       
116
       
 
       


     

       
117
       
 
       
pre {

     

       
118
       
+
       
    border-top-left-radius: 0;

     

       
119
       
 
       
}

     

       
120
       
 
       


     

       
121
       
 
       
blockquote {

     

       
122
       
+
       
    padding-top: 0.2rem;

     

       
123
       
+
       
    padding-bottom: 0.2rem;

     

       
124
       
 
       
}

     

       
125
       
 
       


     

       
126
       
 
       
blockquote:has(+ pre) {

     

       
127
       
+
       
    display: inline-block;

     

       
128
       
+
       
    border: none;

     

       
129
       
+
       
    font-family: "code", monospace !important;

     

       
130
       
+
       
    font-size: 0.8rem;

     

       
131
       
+
       
    font-weight: 600;

     

       
132
       
+
       
    margin: 0;

     

       
133
       
+
       
    margin-bottom: 0.2rem;

     

       
134
       
+
       
    margin-block: 0 0;

     

       
135
       
+
       
    border-top-left-radius: 0.2em;

     

       
136
       
+
       
    border-top-right-radius: 0.2em;

     

       
137
       
+
       
    padding-left: 0.75rem;

     

       
138
       
+
       
    padding-right: 0.75rem;

     

       
139
       
+
       
    padding-top: 0.25rem;

     

       
140
       
+
       
    padding-bottom: 0.25rem;

     

       
141
       
+
       
    position: relative;

     

       
142
       
+
       
    background-color: var(--accent);

     

       
143
       
 
       
}

     

       
144
       
 
       


     

       
145
       
 
       
blockquote:has(+ pre) p {

     

       
146
       
+
       
    margin: 0;

     

       
147
       
+
       
    color: var(--accent-text);

     

       
148
       
 
       
}

     

       
149
       
 
       


     

       
150
       
 
       
blockquote:has(+ pre) p::selection {

     

       
151
       
+
       
    background: var(--pink-puree);

     

       
152
       
 
       
}

     

       
153
       
 
       


     

       
154
       
 
       
.yt-embed {

     

       
155
       
+
       
    width: 100%;

     

       
156
       
+
       
    display: flex;

     

       
157
       
+
       
    flex-direction: column;

     

       
158
       
+
       
    justify-content: center;

     

       
159
       
+
       
    align-content: center;

     

       
160
       
+
       
    text-align: center;

     

       
161
       
 
       
}

     

       
162
       
 
       


     

       
163
       
 
       
.yt-embed iframe {

     

       
164
       
+
       
    width: 100%;

     

       
165
       
+
       
    aspect-ratio: 16 / 9;

     

       
166
       
+
       
    align-self: center;

     

       
167
       
 
       
}

     

       
168
       
 
       


     

       
169
       
 
       
.yt-embed figcaption {

     
···

       
180
       
 
       
}

     

       
181
       
 
       


     

       
182
       
 
       
:root {

     

       
183
       
+
       
    --nightshade-violet: oklch(0.27 0.0242 287.67);

     

       
184
       
+
       
    --purple-night: oklch(27.58% 0.0203 289.13);

     

       
185
       
+
       
    --dark-crushed-grape: oklch(74.02% 0.0756 311.96);

     

       
186
       
+
       
    --light-crushed-grape: oklch(73.48% 0.1008 284.99);

     

       
187
       
+
       
    --reseda-green: oklch(62.33% 0.0475 126.94);

     

       
188
       
+
       
    --earth-yellow: oklch(86.49% 0.018 73.05);

     

       
189
       
+
       
    --sunset: oklch(0.86 0.0213 73.05);

     

       
190
       
+
       
    --ultra-violet: oklch(42.21% 0.0676 297.45);

     

       
191
       
+
       
    --rose-quartz: oklch(65.32% 0.0585 311.96);

     

       
192
       
+
       
    --pink-puree: oklch(75.65% 0.0555 290.76);

     

       
193
       
+
       
    --lavendar-breeze: oklch(91.06% 0.0223 290.76);

     

       
194
       
+
       
    --purple-gray: oklch(25.63% 0.0002 290.76);

     

       
195
       
+
       
    --alice-blue: oklch(95.38% 0.0118 239.91);

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
196
       
 
       
}

     

···

       
2
       
 
       
*,

     

       
3
       
 
       
*::before,

     

       
4
       
 
       
*::after {

     

       
5
       
-
       
	box-sizing: border-box;

     

       
6
       
-
       
	-webkit-box-sizing: border-box;

     

       
7
       
 
       
}

     

       
8
       
 
       


     

       
9
       
 
       
* {

     

       
10
       
-
       
	margin: 0;

     

       
11
       
 
       
}

     

       
12
       
 
       


     

       
13
       
 
       
/* Prevent font size inflation */

     

       
14
       
 
       
html {

     

       
15
       
-
       
	-moz-text-size-adjust: none;

     

       
16
       
-
       
	-webkit-text-size-adjust: none;

     

       
17
       
-
       
	text-size-adjust: none;

     

       
18
       
 
       
}

     

       
19
       
 
       


     

       
20
       
 
       
/* Remove default margin in favour of better control in authored CSS */

     
···

       
28
       
 
       
blockquote,

     

       
29
       
 
       
dl,

     

       
30
       
 
       
dd {

     

       
31
       
-
       
	margin-block-end: 0;

     

       
32
       
 
       
}

     

       
33
       
 
       


     

       
34
       
 
       
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */

     
···

       
36
       
 
       
ol,

     

       
37
       
 
       
ul[role="list"],

     

       
38
       
 
       
ol[role="list"] {

     

       
39
       
-
       
	list-style: none;

     

       
40
       
 
       
}

     

       
41
       
 
       


     

       
42
       
 
       
/* Set core body defaults */

     

       
43
       
 
       
body {

     

       
44
       
-
       
	min-height: 100vh;

     

       
45
       
-
       
	line-height: 1.5;

     

       
46
       
-
       
	-webkit-font-smoothing: antialiased;

     

       
47
       
 
       
}

     

       
48
       
 
       


     

       
49
       
 
       
/* Set shorter line heights on headings and interactive elements */

     
···

       
54
       
 
       
button,

     

       
55
       
 
       
input,

     

       
56
       
 
       
label {

     

       
57
       
-
       
	line-height: 1.1;

     

       
58
       
 
       
}

     

       
59
       
 
       


     

       
60
       
 
       
/* Balance text wrapping on headings */

     
···

       
62
       
 
       
h2,

     

       
63
       
 
       
h3,

     

       
64
       
 
       
h4 {

     

       
65
       
-
       
	text-wrap: balance;

     

       
66
       
 
       
}

     

       
67
       
 
       


     

       
68
       
 
       
p,

     
···

       
72
       
 
       
h4,

     

       
73
       
 
       
h5,

     

       
74
       
 
       
h6 {

     

       
75
       
-
       
	overflow-wrap: break-word;

     

       
76
       
 
       
}

     

       
77
       
 
       


     

       
78
       
 
       
/* A elements that don't have a class get default styles */

     

       
79
       
 
       
a:not([class]) {

     

       
80
       
-
       
	text-decoration-skip-ink: auto;

     

       
81
       
 
       
}

     

       
82
       
 
       


     

       
83
       
 
       
/* Make images easier to work with */

     
···

       
86
       
 
       
video,

     

       
87
       
 
       
canvas,

     

       
88
       
 
       
svg {

     

       
89
       
-
       
	max-width: 100%;

     

       
90
       
-
       
	display: block;

     

       
91
       
 
       
}

     

       
92
       
 
       


     

       
93
       
 
       
/* Inherit fonts for inputs and buttons */

     
···

       
96
       
 
       
textarea,

     

       
97
       
 
       
select,

     

       
98
       
 
       
progress {

     

       
99
       
-
       
	appearance: none;

     

       
100
       
-
       
	-webkit-appearance: none;

     

       
101
       
-
       
	-moz-appearance: none;

     

       
102
       
-
       
	font: inherit;

     

       
103
       
 
       
}

     

       
104
       
 
       


     

       
105
       
 
       
/* Make sure textareas without a rows attribute are not tiny */

     

       
106
       
 
       
textarea:not([rows]) {

     

       
107
       
-
       
	min-height: 10em;

     

       
108
       
 
       
}

     

       
109
       
 
       


     

       
110
       
 
       
/* Anything that has been anchored to should have extra scroll margin */

     

       
111
       
 
       
:target {

     

       
112
       
-
       
	scroll-margin-block: 5ex;

     

       
113
       
 
       
}

     

       
114
       
 
       


     

       
115
       
 
       
#root,

     

       
116
       
 
       
#__next {

     

       
117
       
-
       
	isolation: isolate;

     

       
118
       
 
       
}

     

···

       
2
       
 
       
*,

     

       
3
       
 
       
*::before,

     

       
4
       
 
       
*::after {

     

       
5
       
+
       
    box-sizing: border-box;

     

       
6
       
+
       
    -webkit-box-sizing: border-box;

     

       
7
       
 
       
}

     

       
8
       
 
       


     

       
9
       
 
       
* {

     

       
10
       
+
       
    margin: 0;

     

       
11
       
 
       
}

     

       
12
       
 
       


     

       
13
       
 
       
/* Prevent font size inflation */

     

       
14
       
 
       
html {

     

       
15
       
+
       
    -moz-text-size-adjust: none;

     

       
16
       
+
       
    -webkit-text-size-adjust: none;

     

       
17
       
+
       
    text-size-adjust: none;

     

       
18
       
 
       
}

     

       
19
       
 
       


     

       
20
       
 
       
/* Remove default margin in favour of better control in authored CSS */

     
···

       
28
       
 
       
blockquote,

     

       
29
       
 
       
dl,

     

       
30
       
 
       
dd {

     

       
31
       
+
       
    margin-block-end: 0;

     

       
32
       
 
       
}

     

       
33
       
 
       


     

       
34
       
 
       
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */

     
···

       
36
       
 
       
ol,

     

       
37
       
 
       
ul[role="list"],

     

       
38
       
 
       
ol[role="list"] {

     

       
39
       
+
       
    list-style: none;

     

       
40
       
 
       
}

     

       
41
       
 
       


     

       
42
       
 
       
/* Set core body defaults */

     

       
43
       
 
       
body {

     

       
44
       
+
       
    min-height: 100vh;

     

       
45
       
+
       
    line-height: 1.5;

     

       
46
       
+
       
    -webkit-font-smoothing: antialiased;

     

       
47
       
 
       
}

     

       
48
       
 
       


     

       
49
       
 
       
/* Set shorter line heights on headings and interactive elements */

     
···

       
54
       
 
       
button,

     

       
55
       
 
       
input,

     

       
56
       
 
       
label {

     

       
57
       
+
       
    line-height: 1.1;

     

       
58
       
 
       
}

     

       
59
       
 
       


     

       
60
       
 
       
/* Balance text wrapping on headings */

     
···

       
62
       
 
       
h2,

     

       
63
       
 
       
h3,

     

       
64
       
 
       
h4 {

     

       
65
       
+
       
    text-wrap: balance;

     

       
66
       
 
       
}

     

       
67
       
 
       


     

       
68
       
 
       
p,

     
···

       
72
       
 
       
h4,

     

       
73
       
 
       
h5,

     

       
74
       
 
       
h6 {

     

       
75
       
+
       
    overflow-wrap: break-word;

     

       
76
       
 
       
}

     

       
77
       
 
       


     

       
78
       
 
       
/* A elements that don't have a class get default styles */

     

       
79
       
 
       
a:not([class]) {

     

       
80
       
+
       
    text-decoration-skip-ink: auto;

     

       
81
       
 
       
}

     

       
82
       
 
       


     

       
83
       
 
       
/* Make images easier to work with */

     
···

       
86
       
 
       
video,

     

       
87
       
 
       
canvas,

     

       
88
       
 
       
svg {

     

       
89
       
+
       
    max-width: 100%;

     

       
90
       
+
       
    display: block;

     

       
91
       
 
       
}

     

       
92
       
 
       


     

       
93
       
 
       
/* Inherit fonts for inputs and buttons */

     
···

       
96
       
 
       
textarea,

     

       
97
       
 
       
select,

     

       
98
       
 
       
progress {

     

       
99
       
+
       
    appearance: none;

     

       
100
       
+
       
    -webkit-appearance: none;

     

       
101
       
+
       
    -moz-appearance: none;

     

       
102
       
+
       
    font: inherit;

     

       
103
       
 
       
}

     

       
104
       
 
       


     

       
105
       
 
       
/* Make sure textareas without a rows attribute are not tiny */

     

       
106
       
 
       
textarea:not([rows]) {

     

       
107
       
+
       
    min-height: 10em;

     

       
108
       
 
       
}

     

       
109
       
 
       


     

       
110
       
 
       
/* Anything that has been anchored to should have extra scroll margin */

     

       
111
       
 
       
:target {

     

       
112
       
+
       
    scroll-margin-block: 5ex;

     

       
113
       
 
       
}

     

       
114
       
 
       


     

       
115
       
 
       
#root,

     

       
116
       
 
       
#__next {

     

       
117
       
+
       
    isolation: isolate;

     

       
118
       
 
       
}

     

···

       
1
       
 
       
:root,

     

       
2
       
 
       
::backdrop {

     

       
3
       
-
       
	/* set sans-serif & mono fonts */

     

       
4
       
-
       
	--sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,

     

       
5
       
-
       
		"Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,

     

       
6
       
-
       
		"Helvetica Neue", sans-serif;

     

       
7
       
-
       
	--serif-font: Superclarendon, "Bookman Old Style", "URW Bookman",

     

       
8
       
-
       
		"URW Bookman L", "Georgia Pro", Georgia, serif;

     

       
9
       
-
       
	--mono-font: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,

     

       
10
       
-
       
		"DejaVu Sans Mono", monospace;

     

       
11
       
-
       
	--standard-border-radius: 5px;

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
12
       
 
       


     

       
13
       
-
       
	/* default colors */

     

       
14
       
-
       
	--bg: var(--earth-yellow);

     

       
15
       
-
       
	--noise-strength: 0.3;

     

       
16
       
-
       
	--bg-light: #cbcdcd;

     

       
17
       
-
       
	--text: #41474e;

     

       
18
       
-
       
	--text-light: #686764;

     

       
19
       
-
       
	--text-dark: #20252b;

     

       
20
       
-
       
	--accent: oklch(35.55% 0.0754 60.09);

     

       
21
       
-
       
	--accent-dark: #56412bc5;

     

       
22
       
-
       
	--accent-text: #dfd1bc;

     

       
23
       
-
       
	--border: #646868;

     

       
24
       
-
       
	--link: var(--accent);

     

       
25
       
-
       
	--selection: color-mix(in oklab, var(--accent), var(--earth-yellow) 50%);

     

       
26
       
 
       
}

     

       
27
       
 
       


     

       
28
       
 
       
/* theme media queries */

     

       
29
       
 
       
@media (prefers-color-scheme: dark) {

     

       
30
       
-
       
	:root,

     

       
31
       
-
       
	::backdrop {

     

       
32
       
-
       
		color-scheme: dark;

     

       
33
       
-
       
		--bg: var(--purple-night);

     

       
34
       
-
       
		--noise-strength: 0.15;

     

       
35
       
-
       
		--bg-light: var(--ultra-violet);

     

       
36
       
-
       
		--text: var(--lavendar-breeze);

     

       
37
       
-
       
		--text-light: var(--pink-puree);

     

       
38
       
-
       
		--text-dark: oklch(80.28% 0.0111 204.11);

     

       
39
       
-
       
		--accent: var(--rose-quartz);

     

       
40
       
-
       
		--accent-dark: var(--dark-crushed-grape);

     

       
41
       
-
       
		--accent-text: var(--purple-gray);

     

       
42
       
-
       
		--link: var(--light-crushed-grape);

     

       
43
       
-
       
		--border: var(--pink-puree);

     

       
44
       
-
       
		--selection: color-mix(in oklab, var(--accent), var(--purple-night) 50%);

     

       
45
       
-
       
	}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
46
       
 
       
}

     

       
47
       
 
       


     

       
48
       
 
       
[data-theme="dark"] {

     

       
49
       
-
       
	color-scheme: dark;

     

       
50
       
-
       
	--bg: var(--purple-night);

     

       
51
       
-
       
	--noise-strength: 0.15;

     

       
52
       
-
       
	--bg-light: var(--ultra-violet);

     

       
53
       
-
       
	--text: var(--lavendar-breeze);

     

       
54
       
-
       
	--text-light: var(--pink-puree);

     

       
55
       
-
       
	--text-dark: oklch(80.28% 0.0111 204.11);

     

       
56
       
-
       
	--accent: var(--rose-quartz);

     

       
57
       
-
       
	--accent-dark: var(--dark-crushed-grape);

     

       
58
       
-
       
	--accent-text: var(--purple-gray);

     

       
59
       
-
       
	--link: var(--light-crushed-grape);

     

       
60
       
-
       
	--border: var(--pink-puree);

     

       
61
       
-
       
	--selection: color-mix(in oklab, var(--accent), var(--purple-night) 50%);

     

       
62
       
 
       
}

     

       
63
       
 
       


     

       
64
       
 
       
@media (prefers-color-scheme: light) {

     

       
65
       
-
       
	:root,

     

       
66
       
-
       
	::backdrop {

     

       
67
       
-
       
		color-scheme: light;

     

       
68
       
-
       
		--bg: var(--earth-yellow);

     

       
69
       
-
       
		--noise-strength: 0.15;

     

       
70
       
-
       
		--bg-light: #cbcdcd;

     

       
71
       
-
       
		--text: #41474e;

     

       
72
       
-
       
		--text-light: #686764;

     

       
73
       
-
       
		--accent: #58310ac5;

     

       
74
       
-
       
		--accent-dark: #e08f67;

     

       
75
       
-
       
		--accent-text: #dfd1bc;

     

       
76
       
-
       
		--border: #646868;

     

       
77
       
-
       
		--link: var(--accent);

     

       
78
       
-
       
		--selection: color-mix(in oklab, var(--accent), var(--earth-yellow) 50%);

     

       
79
       
-
       
	}

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
80
       
 
       
}

     

       
81
       
 
       


     

       
82
       
 
       
[data-theme="light"] {

     

       
83
       
-
       
	/* default (light) theme */

     

       
84
       
-
       
	color-scheme: light;

     

       
85
       
-
       
	--bg: var(--earth-yellow);

     

       
86
       
-
       
	--noise-strength: 0.22;

     

       
87
       
-
       
	--bg-light: var(--reseda-green);

     

       
88
       
-
       
	--text: #41474e;

     

       
89
       
-
       
	--text-light: #686764;

     

       
90
       
-
       
	--text-dark: #20252b;

     

       
91
       
-
       
	--accent: #58310ac5;

     

       
92
       
-
       
	--accent-dark: #56412bc5;

     

       
93
       
-
       
	--accent-text: #dfd1bc;

     

       
94
       
-
       
	--border: #646868;

     

       
95
       
-
       
	--link: var(--accent);

     

       
96
       
-
       
	--selection: color-mix(in oklab, var(--accent), var(--earth-yellow) 50%);

     

       
97
       
 
       
}

     

       
98
       
 
       


     

       
99
       
 
       
::selection,

     

       
100
       
 
       
::-moz-selection {

     

       
101
       
-
       
	color: var(--bg);

     

       
102
       
-
       
	background: var(--selection);

     

       
103
       
 
       
}

     

       
104
       
 
       


     

       
105
       
 
       
/* chromium scrollbars */

     

       
106
       
 
       
::-webkit-scrollbar {

     

       
107
       
-
       
	width: 8px;

     

       
108
       
-
       
	height: 8px;

     

       
109
       
-
       
	overflow: visible;

     

       
110
       
 
       
}

     

       
111
       
 
       
::-webkit-scrollbar-thumb {

     

       
112
       
-
       
	background: var(--accent);

     

       
113
       
-
       
	width: 12px;

     

       
114
       
 
       
}

     

       
115
       
 
       
::-webkit-scrollbar-track {

     

       
116
       
-
       
	background: var(--bg-light);

     

       
117
       
 
       
}

     

       
118
       
 
       


     

       
119
       
 
       
/* firefox scrollbars */

     

       
120
       
 
       
* {

     

       
121
       
-
       
	scrollbar-color: var(--accent) var(--bg-light);

     

       
122
       
-
       
	scrollbar-width: auto;

     

       
123
       
 
       
}

     

       
124
       
 
       


     

       
125
       
 
       
html {

     

       
126
       
-
       
	color-scheme: light dark;

     

       
127
       
-
       
	font-family: var(--mono-font);

     

       
128
       
-
       
	scroll-behavior: smooth;

     

       
129
       
 
       
}

     

       
130
       
 
       


     

       
131
       
 
       
body {

     

       
132
       
-
       
	min-height: 100svh;

     

       
133
       
-
       
	color: var(--text);

     

       
134
       
-
       
	background: var(--bg);

     

       
135
       
-
       
	position: relative;

     

       
136
       
-
       
	font-size: 1rem;

     

       
137
       
-
       
	display: grid;

     

       
138
       
-
       
	grid-template-columns: 1fr min(45rem, 90%) 1fr;

     

       
139
       
-
       
	grid-template-rows: auto 1fr auto;

     

       
140
       
-
       
	grid-row-gap: 0.625rem;

     

       
141
       
 
       
}

     

       
142
       
 
       
body > * {

     

       
143
       
-
       
	grid-column: 2;

     

       
144
       
 
       
}

     

       
145
       
 
       


     

       
146
       
 
       
body > footer {

     

       
147
       
-
       
	color: var(--text-light);

     

       
148
       
-
       
	font-size: 0.875;

     

       
149
       
 
       
}

     

       
150
       
 
       


     

       
151
       
 
       
/* Format headers */

     

       
152
       
 
       
h1 {

     

       
153
       
-
       
	font-size: 2rem;

     

       
154
       
 
       
}

     

       
155
       
 
       
h2 {

     

       
156
       
-
       
	font-size: 1.75rem;

     

       
157
       
 
       
}

     

       
158
       
 
       
h3 {

     

       
159
       
-
       
	font-size: 1.5rem;

     

       
160
       
 
       
}

     

       
161
       
 
       
h4 {

     

       
162
       
-
       
	font-size: 1.25rem;

     

       
163
       
 
       
}

     

       
164
       
 
       
h5 {

     

       
165
       
-
       
	font-size: 1rem;

     

       
166
       
 
       
}

     

       
167
       
 
       
h6 {

     

       
168
       
-
       
	font-size: 0.75rem;

     

       
169
       
 
       
}

     

       
170
       
 
       


     

       
171
       
 
       
h1,

     
···

       
174
       
 
       
h4,

     

       
175
       
 
       
h5,

     

       
176
       
 
       
h6 {

     

       
177
       
-
       
	margin: 0.5em 0 0.5em 0;

     

       
178
       
-
       
	padding: 0.22em 0.4em 0.22em 0.4em;

     

       
179
       
-
       
	border-radius: 0.1em;

     

       
180
       
-
       
	background-color: var(--accent);

     

       
181
       
-
       
	color: var(--accent-text);

     

       
182
       
-
       
	width: fit-content;

     

       
183
       
 
       
}

     

       
184
       
 
       


     

       
185
       
 
       
/* Fix line height when title wraps */

     

       
186
       
 
       
h1,

     

       
187
       
 
       
h2,

     

       
188
       
 
       
h3 {

     

       
189
       
-
       
	line-height: 1.1;

     

       
190
       
 
       
}

     

       
191
       
 
       


     

       
192
       
 
       
@media only screen and (max-width: 720px) {

     

       
193
       
-
       
	h1 {

     

       
194
       
-
       
		font-size: 1.5rem;

     

       
195
       
-
       
	}

     

       
196
       
-
       
	h2 {

     

       
197
       
-
       
		font-size: 1.25rem;

     

       
198
       
-
       
	}

     

       
199
       
-
       
	h3 {

     

       
200
       
-
       
		font-size: 1rem;

     

       
201
       
-
       
	}

     

       
202
       
-
       
	h4 {

     

       
203
       
-
       
		font-size: 0.75rem;

     

       
204
       
-
       
	}

     

       
205
       
-
       
	h5 {

     

       
206
       
-
       
		font-size: 0.5rem;

     

       
207
       
-
       
	}

     

       
208
       
-
       
	h6 {

     

       
209
       
-
       
		font-size: 0.25rem;

     

       
210
       
-
       
	}

     

       
211
       
 
       
}

     

       
212
       
 
       


     

       
213
       
 
       
p {

     

       
214
       
-
       
	margin: 1rem 0;

     

       
215
       
 
       
}

     

       
216
       
 
       


     

       
217
       
 
       
/* format links */

     

       
218
       
 
       
a,

     

       
219
       
 
       
a:visited {

     

       
220
       
-
       
	text-decoration: none;

     

       
221
       
-
       
	font-weight: bold;

     

       
222
       
-
       
	border-radius: 0.125rem;

     

       
223
       
-
       
	color: var(--accent-dark);

     

       
224
       
 
       
}

     

       
225
       
 
       


     

       
226
       
 
       
a {

     

       
227
       
-
       
	color: var(--link);

     

       
228
       
 
       
}

     

       
229
       
 
       


     

       
230
       
 
       
a:hover {

     

       
231
       
-
       
	text-decoration: underline wavy;

     

       
232
       
 
       
}

     

       
233
       
 
       


     

       
234
       
 
       
/* format lists */

     

       
235
       
 
       
ul {

     

       
236
       
-
       
	list-style: none;

     

       
237
       
-
       
	margin-top: 0.25rem;

     

       
238
       
-
       
	margin-bottom: 0.25rem;

     

       
239
       
 
       
}

     

       
240
       
 
       


     

       
241
       
 
       
ol {

     

       
242
       
-
       
	list-style-type: decimal;

     

       
243
       
-
       
	margin-top: 0.25rem;

     

       
244
       
-
       
	margin-bottom: 0.25rem;

     

       
245
       
 
       
}

     

       
246
       
 
       


     

       
247
       
 
       
li {

     

       
248
       
-
       
	margin-bottom: 0.125rem;

     

       
249
       
 
       
}

     

       
250
       
 
       


     

       
251
       
 
       
ul li::marker {

     

       
252
       
-
       
	content: "* ";

     

       
253
       
-
       
	color: var(--accent);

     

       
254
       
-
       
	font-size: 1.1rem;

     

       
255
       
 
       
}

     

       
256
       
 
       


     

       
257
       
 
       
ol li::marker {

     

       
258
       
-
       
	color: var(--accent);

     

       
259
       
 
       
}

     

       
260
       
 
       


     

       
261
       
 
       
ol li:hover::marker {

     

       
262
       
-
       
	font-weight: 700;

     

       
263
       
-
       
	color: var(--link);

     

       
264
       
 
       
}

     

       
265
       
 
       


     

       
266
       
 
       
/* Use flexbox to allow items to wrap, as needed */

     

       
267
       
 
       
header > nav ul,

     

       
268
       
 
       
header > nav ol {

     

       
269
       
-
       
	display: flex;

     

       
270
       
-
       
	flex-direction: row;

     

       
271
       
-
       
	flex-wrap: wrap;

     

       
272
       
-
       
	align-content: space-around;

     

       
273
       
-
       
	justify-content: right;

     

       
274
       
-
       
	list-style-type: none;

     

       
275
       
-
       
	margin: 0.5rem 0 0 0;

     

       
276
       
-
       
	padding: 0;

     

       
277
       
-
       
	gap: 1rem;

     

       
278
       
 
       
}

     

       
279
       
 
       


     

       
280
       
 
       
/* List items are inline elements, make them behave more like blocks */

     

       
281
       
 
       
header > nav ul li,

     

       
282
       
 
       
header > nav ol li {

     

       
283
       
-
       
	display: inline-block;

     

       
284
       
 
       
}

     

       
285
       
 
       


     

       
286
       
 
       
/* Consolidate box styling */

     

       
287
       
 
       
aside,

     

       
288
       
 
       
details,

     

       
289
       
 
       
progress {

     

       
290
       
-
       
	background-color: var(--bg-light);

     

       
291
       
-
       
	border-radius: var(--standard-border-radius);

     

       
292
       
 
       
}

     

       
293
       
 
       


     

       
294
       
 
       
aside {

     

       
295
       
-
       
	font-size: 1rem;

     

       
296
       
-
       
	width: 35%;

     

       
297
       
-
       
	padding: 0 10px;

     

       
298
       
-
       
	margin-inline-start: 10px;

     

       
299
       
-
       
	float: right;

     

       
300
       
 
       
}

     

       
301
       
 
       
*[dir="rtl"] aside {

     

       
302
       
-
       
	float: left;

     

       
303
       
 
       
}

     

       
304
       
 
       


     

       
305
       
 
       
/* make aside full-width on mobile */

     

       
306
       
 
       
@media only screen and (max-width: 720px) {

     

       
307
       
-
       
	aside {

     

       
308
       
-
       
		width: 100%;

     

       
309
       
-
       
		float: none;

     

       
310
       
-
       
		margin-inline-start: 0;

     

       
311
       
-
       
	}

     

       
312
       
 
       
}

     

       
313
       
 
       


     

       
314
       
 
       
details {

     

       
315
       
-
       
	padding: 0.5rem;

     

       
316
       
 
       
}

     

       
317
       
 
       


     

       
318
       
 
       
summary {

     

       
319
       
-
       
	cursor: pointer;

     

       
320
       
-
       
	font-weight: bold;

     

       
321
       
-
       
	word-break: break-all;

     

       
322
       
 
       
}

     

       
323
       
 
       


     

       
324
       
 
       
details[open] > summary + * {

     

       
325
       
-
       
	margin-top: 0;

     

       
326
       
 
       
}

     

       
327
       
 
       


     

       
328
       
 
       
details[open] > summary {

     

       
329
       
-
       
	margin-bottom: 0.5rem;

     

       
330
       
 
       
}

     

       
331
       
 
       


     

       
332
       
 
       
details[open] > :last-child {

     

       
333
       
-
       
	margin-bottom: 0;

     

       
334
       
 
       
}

     

       
335
       
 
       


     

       
336
       
 
       
/* Format tables */

     

       
337
       
 
       
table {

     

       
338
       
-
       
	border-collapse: collapse;

     

       
339
       
-
       
	margin: 1.5rem 0;

     

       
340
       
-
       
	display: block;

     

       
341
       
-
       
	overflow-x: auto;

     

       
342
       
-
       
	white-space: nowrap;

     

       
343
       
 
       
}

     

       
344
       
 
       


     

       
345
       
 
       
td,

     

       
346
       
 
       
th {

     

       
347
       
-
       
	border: 1px solid var(--border);

     

       
348
       
-
       
	text-align: start;

     

       
349
       
-
       
	padding: 0.5rem;

     

       
350
       
 
       
}

     

       
351
       
 
       


     

       
352
       
 
       
th {

     

       
353
       
-
       
	background-color: var(--bg-light);

     

       
354
       
-
       
	font-weight: bold;

     

       
355
       
 
       
}

     

       
356
       
 
       


     

       
357
       
 
       
tr:nth-child(even) {

     

       
358
       
-
       
	background-color: var(--bg-light);

     

       
359
       
 
       
}

     

       
360
       
 
       


     

       
361
       
 
       
table caption {

     

       
362
       
-
       
	text-align: left;

     

       
363
       
-
       
	font-weight: bold;

     

       
364
       
-
       
	margin: 0 0 0.4rem 1rem;

     

       
365
       
 
       
}

     

       
366
       
 
       


     

       
367
       
 
       
/* format forms */

     

       
368
       
 
       
fieldset {

     

       
369
       
-
       
	border: 1px dashed var(--accent);

     

       
370
       
-
       
	border-radius: var(--standard-border-radius);

     

       
371
       
 
       
}

     

       
372
       
 
       


     

       
373
       
 
       
fieldset > legend {

     

       
374
       
-
       
	color: var(--accent);

     

       
375
       
 
       
}

     

       
376
       
 
       


     

       
377
       
 
       
textarea,

     
···

       
379
       
 
       
input,

     

       
380
       
 
       
button,

     

       
381
       
 
       
.button {

     

       
382
       
-
       
	font-size: inherit;

     

       
383
       
-
       
	font-family: inherit;

     

       
384
       
-
       
	padding: 0.25rem;

     

       
385
       
-
       
	border-radius: var(--standard-border-radius);

     

       
386
       
-
       
	box-shadow: none;

     

       
387
       
-
       
	max-width: 100%;

     

       
388
       
-
       
	display: inline-block;

     

       
389
       
 
       
}

     

       
390
       
 
       


     

       
391
       
 
       
textarea,

     

       
392
       
 
       
select,

     

       
393
       
 
       
input {

     

       
394
       
-
       
	color: var(--text);

     

       
395
       
-
       
	background-color: var(--bg);

     

       
396
       
-
       
	border: 1px dashed var(--border);

     

       
397
       
 
       
}

     

       
398
       
 
       


     

       
399
       
 
       
label {

     

       
400
       
-
       
	display: block;

     

       
401
       
 
       
}

     

       
402
       
 
       


     

       
403
       
 
       
fieldset label {

     

       
404
       
-
       
	margin: 0 0 0.3rem 0;

     

       
405
       
 
       
}

     

       
406
       
 
       


     

       
407
       
 
       
textarea {

     

       
408
       
-
       
	max-width: 43.5rem;

     

       
409
       
-
       
	resize: both;

     

       
410
       
 
       
}

     

       
411
       
 
       


     

       
412
       
 
       
textarea:not([cols]) {

     

       
413
       
-
       
	width: 100%;

     

       
414
       
 
       
}

     

       
415
       
 
       


     

       
416
       
 
       
@media only screen and (max-width: 720px) {

     

       
417
       
-
       
	textarea,

     

       
418
       
-
       
	select,

     

       
419
       
-
       
	input {

     

       
420
       
-
       
		width: 100%;

     

       
421
       
-
       
	}

     

       
422
       
 
       
}

     

       
423
       
 
       


     

       
424
       
 
       
/* format buttons */

     
···

       
429
       
 
       
input[type="reset"],

     

       
430
       
 
       
input[type="button"],

     

       
431
       
 
       
label[type="button"] {

     

       
432
       
-
       
	border: 1px solid var(--accent);

     

       
433
       
-
       
	background-color: var(--accent);

     

       
434
       
-
       
	color: var(--accent-text);

     

       
435
       
-
       
	padding: 0.5rem 0.9rem;

     

       
436
       
-
       
	text-decoration: none;

     

       
437
       
-
       
	line-height: normal;

     

       
438
       
 
       
}

     

       
439
       
 
       


     

       
440
       
 
       
.button[aria-disabled="true"],

     
···

       
442
       
 
       
textarea:disabled,

     

       
443
       
 
       
select:disabled,

     

       
444
       
 
       
button[disabled] {

     

       
445
       
-
       
	cursor: not-allowed;

     

       
446
       
-
       
	background-color: var(--bg-light);

     

       
447
       
-
       
	border-color: var(--bg-light);

     

       
448
       
-
       
	color: var(--text-light);

     

       
449
       
 
       
}

     

       
450
       
 
       


     

       
451
       
 
       
input[type="range"] {

     

       
452
       
-
       
	padding: 0;

     

       
453
       
-
       
	color: var(--accent);

     

       
454
       
 
       
}

     

       
455
       
 
       


     

       
456
       
 
       
abbr[title] {

     

       
457
       
-
       
	cursor: help;

     

       
458
       
-
       
	text-decoration-line: underline;

     

       
459
       
-
       
	text-decoration-style: dotted;

     

       
460
       
 
       
}

     

       
461
       
 
       


     

       
462
       
 
       
button:enabled:hover,

     
···

       
465
       
 
       
input[type="reset"]:enabled:hover,

     

       
466
       
 
       
input[type="button"]:enabled:hover,

     

       
467
       
 
       
label[type="button"]:hover {

     

       
468
       
-
       
	background-color: var(--accent-dark);

     

       
469
       
-
       
	border-color: var(--accent-dark);

     

       
470
       
-
       
	cursor: pointer;

     

       
471
       
 
       
}

     

       
472
       
 
       


     

       
473
       
 
       
.button:focus-visible,

     

       
474
       
 
       
button:focus-visible:where(:enabled),

     

       
475
       
 
       
input:enabled:focus-visible:where(

     

       
476
       
-
       
		[type="submit"],

     

       
477
       
-
       
		[type="reset"],

     

       
478
       
-
       
		[type="button"]

     

       
479
       
-
       
	) {

     

       
480
       
-
       
	outline: 2px solid var(--accent);

     

       
481
       
-
       
	outline-offset: 1px;

     

       
482
       
 
       
}

     

       
483
       
 
       


     

       
484
       
 
       
/* checkbox and radio button style */

     

       
485
       
 
       
input[type="checkbox"],

     

       
486
       
 
       
input[type="radio"] {

     

       
487
       
-
       
	vertical-align: middle;

     

       
488
       
-
       
	position: relative;

     

       
489
       
-
       
	width: min-content;

     

       
490
       
-
       
	width: 14px;

     

       
491
       
-
       
	height: 14px;

     

       
492
       
 
       
}

     

       
493
       
 
       


     

       
494
       
 
       
input[type="checkbox"] + label,

     

       
495
       
 
       
input[type="radio"] + label {

     

       
496
       
-
       
	display: inline-block;

     

       
497
       
 
       
}

     

       
498
       
 
       


     

       
499
       
 
       
input[type="radio"] {

     

       
500
       
-
       
	border-radius: 100%;

     

       
501
       
 
       
}

     

       
502
       
 
       


     

       
503
       
 
       
input[type="checkbox"]:checked,

     

       
504
       
 
       
input[type="radio"]:checked {

     

       
505
       
-
       
	background-color: var(--accent);

     

       
506
       
 
       
}

     

       
507
       
 
       


     

       
508
       
 
       
@media only screen and (max-width: 720px) {

     

       
509
       
-
       
	textarea,

     

       
510
       
-
       
	select,

     

       
511
       
-
       
	input {

     

       
512
       
-
       
		width: 100%;

     

       
513
       
-
       
	}

     

       
514
       
 
       
}

     

       
515
       
 
       


     

       
516
       
 
       
input[type="color"] {

     

       
517
       
-
       
	height: 2.5rem;

     

       
518
       
-
       
	padding: 0.2rem;

     

       
519
       
 
       
}

     

       
520
       
 
       


     

       
521
       
 
       
input[type="file"] {

     

       
522
       
-
       
	border: 0;

     

       
523
       
 
       
}

     

       
524
       
 
       


     

       
525
       
 
       
/* misc body elements */

     

       
526
       
 
       
hr {

     

       
527
       
-
       
	border: 1px dashed var(--accent);

     

       
528
       
-
       
	margin: 0.5rem 0 0.5rem 0;

     

       
529
       
 
       
}

     

       
530
       
 
       


     

       
531
       
 
       
mark {

     

       
532
       
-
       
	padding: 0 0.25em 0 0.25em;

     

       
533
       
-
       
	border-radius: var(--standard-border-radius);

     

       
534
       
-
       
	background-color: var(--accent);

     

       
535
       
-
       
	color: var(--bg);

     

       
536
       
 
       
}

     

       
537
       
 
       


     

       
538
       
 
       
mark a {

     

       
539
       
-
       
	color: var(--link);

     

       
540
       
 
       
}

     

       
541
       
 
       


     

       
542
       
 
       
img,

     

       
543
       
 
       
video,

     

       
544
       
 
       
iframe[src^="https://www.youtube-nocookie.com"],

     

       
545
       
-
       
iframe[src^="https://www.youtube.com"] {

     

       
546
       
-
       
	max-width: 90%;

     

       
547
       
-
       
	margin: 1rem;

     

       
548
       
-
       
	height: auto;

     

       
549
       
-
       
	border: dashed 2px var(--accent);

     

       
550
       
-
       
	border-radius: 15px;

     

       
551
       
-
       
	opacity: 0.95;

     

       
0
       
 
       

     

       
552
       
 
       
}

     

       
553
       
 
       


     

       
554
       
 
       
figure {

     

       
555
       
-
       
	margin: 0;

     

       
556
       
-
       
	display: block;

     

       
557
       
-
       
	overflow-x: auto;

     

       
558
       
 
       
}

     

       
559
       
 
       


     

       
560
       
 
       
figcaption {

     

       
561
       
-
       
	text-align: left;

     

       
562
       
-
       
	font-size: 0.875rem;

     

       
563
       
-
       
	color: var(--text-light);

     

       
564
       
-
       
	margin: 0 0 1rem 1rem;

     

       
565
       
 
       
}

     

       
566
       
 
       


     

       
567
       
 
       
blockquote {

     

       
568
       
-
       
	margin: 0 0 0 1.25rem;

     

       
569
       
-
       
	padding: 0.5rem 0 0 0.5rem;

     

       
570
       
-
       
	border-inline-start: 0.375rem solid var(--accent);

     

       
571
       
-
       
	color: var(--text-light);

     

       
572
       
-
       
	font-style: italic;

     

       
573
       
 
       
}

     

       
574
       
 
       


     

       
575
       
 
       
p:has(cite) {

     

       
576
       
-
       
	text-align: right;

     

       
577
       
-
       
	font-size: 0.875rem;

     

       
578
       
-
       
	color: var(--text-light);

     

       
579
       
-
       
	font-weight: 600;

     

       
580
       
 
       
}

     

       
581
       
 
       


     

       
582
       
 
       
cite::before {

     

       
583
       
-
       
	content: "— ";

     

       
584
       
 
       
}

     

       
585
       
 
       


     

       
586
       
 
       
dt {

     

       
587
       
-
       
	color: var(--text-light);

     

       
588
       
 
       
}

     

       
589
       
 
       


     

       
590
       
 
       
code,

     
···

       
592
       
 
       
pre span,

     

       
593
       
 
       
kbd,

     

       
594
       
 
       
samp {

     

       
595
       
-
       
	font-family: var(--mono-font);

     

       
596
       
 
       
}

     

       
597
       
 
       


     

       
598
       
 
       
pre {

     

       
599
       
-
       
	border: 1px solid var(--accent);

     

       
600
       
-
       
	max-height: 30rem;

     

       
601
       
-
       
	padding: 0.625rem;

     

       
602
       
-
       
	overflow-x: auto;

     

       
603
       
-
       
	font-style: monospace;

     

       
604
       
 
       
}

     

       
605
       
 
       


     

       
606
       
 
       
p code,

     

       
607
       
 
       
li code,

     

       
608
       
 
       
div code {

     

       
609
       
-
       
	padding: 0 0.125rem 0 0.125rem;

     

       
610
       
-
       
	border-radius: 3px;

     

       
611
       
-
       
	color: var(--bg);

     

       
612
       
-
       
	background-color: var(--text);

     

       
613
       
 
       
}

     

       
614
       
 
       


     

       
615
       
 
       
pre code {

     

       
616
       
-
       
	padding: 0;

     

       
617
       
-
       
	border-radius: 0;

     

       
618
       
-
       
	color: inherit;

     

       
619
       
-
       
	background-color: inherit;

     

       
620
       
 
       
}

     

       
621
       
 
       


     

       
622
       
 
       
iframe {

     

       
623
       
-
       
	max-width: 90%;

     

       
624
       
 
       
}

     

       
625
       
 
       


     

       
626
       
 
       
/* progress bars */

     

       
627
       
 
       
progress {

     

       
628
       
-
       
	width: 100%;

     

       
629
       
 
       
}

     

       
630
       
 
       


     

       
631
       
 
       
progress:indeterminate {

     

       
632
       
-
       
	background-color: var(--bg-light);

     

       
633
       
 
       
}

     

       
634
       
 
       


     

       
635
       
 
       
progress::-webkit-progress-bar {

     

       
636
       
-
       
	border-radius: var(--standard-border-radius);

     

       
637
       
-
       
	background-color: var(--bg-light);

     

       
638
       
 
       
}

     

       
639
       
 
       


     

       
640
       
 
       
progress::-webkit-progress-value {

     

       
641
       
-
       
	border-radius: var(--standard-border-radius);

     

       
642
       
-
       
	background-color: var(--accent);

     

       
643
       
 
       
}

     

       
644
       
 
       


     

       
645
       
 
       
progress::-moz-progress-bar {

     

       
646
       
-
       
	border-radius: var(--standard-border-radius);

     

       
647
       
-
       
	background-color: var(--accent);

     

       
648
       
-
       
	transition-property: width;

     

       
649
       
-
       
	transition-duration: 0.3s;

     

       
650
       
 
       
}

     

       
651
       
 
       


     

       
652
       
 
       
progress:indeterminate::-moz-progress-bar {

     

       
653
       
-
       
	background-color: var(--bg-light);

     

       
654
       
 
       
}

     

       
655
       
 
       


     

       
656
       
 
       
dialog {

     

       
657
       
-
       
	max-width: 40rem;

     

       
658
       
-
       
	margin: auto;

     

       
659
       
 
       
}

     

       
660
       
 
       


     

       
661
       
 
       
dialog::backdrop {

     

       
662
       
-
       
	background-color: var(--bg);

     

       
663
       
-
       
	opacity: 0.8;

     

       
664
       
 
       
}

     

       
665
       
 
       


     

       
666
       
 
       
@media only screen and (max-width: 720px) {

     

       
667
       
-
       
	dialog {

     

       
668
       
-
       
		max-width: 100%;

     

       
669
       
-
       
		margin: auto 1em;

     

       
670
       
-
       
	}

     

       
671
       
 
       
}

     

       
672
       
 
       


     

       
673
       
 
       
/* superscript & subscript */

     

       
674
       
 
       
/* prevent scripts from affecting line-height. */

     

       
675
       
 
       
sup,

     

       
676
       
 
       
sub {

     

       
677
       
-
       
	vertical-align: baseline;

     

       
678
       
-
       
	position: relative;

     

       
679
       
 
       
}

     

       
680
       
 
       


     

       
681
       
 
       
sup {

     

       
682
       
-
       
	top: -0.4em;

     

       
683
       
 
       
}

     

       
684
       
 
       


     

       
685
       
 
       
sub {

     

       
686
       
-
       
	top: 0.3em;

     

       
687
       
 
       
}

     

···

       
1
       
 
       
:root,

     

       
2
       
 
       
::backdrop {

     

       
3
       
+
       
    /* set sans-serif & mono fonts */

     

       
4
       
+
       
    --sans-font:

     

       
5
       
+
       
        -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,

     

       
6
       
+
       
        "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,

     

       
7
       
+
       
        "Helvetica Neue", sans-serif;

     

       
8
       
+
       
    --serif-font:

     

       
9
       
+
       
        Superclarendon, "Bookman Old Style", "URW Bookman", "URW Bookman L",

     

       
10
       
+
       
        "Georgia Pro", Georgia, serif;

     

       
11
       
+
       
    --mono-font:

     

       
12
       
+
       
        ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,

     

       
13
       
+
       
        "DejaVu Sans Mono", monospace;

     

       
14
       
+
       
    --standard-border-radius: 5px;

     

       
15
       
 
       


     

       
16
       
+
       
    /* default colors */

     

       
17
       
+
       
    --bg: var(--earth-yellow);

     

       
18
       
+
       
    --noise-strength: 0.3;

     

       
19
       
+
       
    --bg-light: #cbcdcd;

     

       
20
       
+
       
    --text: #41474e;

     

       
21
       
+
       
    --text-light: #686764;

     

       
22
       
+
       
    --text-dark: #20252b;

     

       
23
       
+
       
    --accent: oklch(35.55% 0.0754 60.09);

     

       
24
       
+
       
    --accent-dark: #56412bc5;

     

       
25
       
+
       
    --accent-text: #dfd1bc;

     

       
26
       
+
       
    --border: #646868;

     

       
27
       
+
       
    --link: var(--accent);

     

       
28
       
+
       
    --selection: color-mix(in oklab, var(--accent), var(--earth-yellow) 50%);

     

       
29
       
 
       
}

     

       
30
       
 
       


     

       
31
       
 
       
/* theme media queries */

     

       
32
       
 
       
@media (prefers-color-scheme: dark) {

     

       
33
       
+
       
    :root,

     

       
34
       
+
       
    ::backdrop {

     

       
35
       
+
       
        color-scheme: dark;

     

       
36
       
+
       
        --bg: var(--purple-night);

     

       
37
       
+
       
        --noise-strength: 0.15;

     

       
38
       
+
       
        --bg-light: var(--ultra-violet);

     

       
39
       
+
       
        --text: var(--lavendar-breeze);

     

       
40
       
+
       
        --text-light: var(--pink-puree);

     

       
41
       
+
       
        --text-dark: oklch(80.28% 0.0111 204.11);

     

       
42
       
+
       
        --accent: var(--rose-quartz);

     

       
43
       
+
       
        --accent-dark: var(--dark-crushed-grape);

     

       
44
       
+
       
        --accent-text: var(--purple-gray);

     

       
45
       
+
       
        --link: var(--light-crushed-grape);

     

       
46
       
+
       
        --border: var(--pink-puree);

     

       
47
       
+
       
        --selection: color-mix(

     

       
48
       
+
       
            in oklab,

     

       
49
       
+
       
            var(--accent),

     

       
50
       
+
       
            var(--purple-night) 50%

     

       
51
       
+
       
        );

     

       
52
       
+
       
    }

     

       
53
       
 
       
}

     

       
54
       
 
       


     

       
55
       
 
       
[data-theme="dark"] {

     

       
56
       
+
       
    color-scheme: dark;

     

       
57
       
+
       
    --bg: var(--purple-night);

     

       
58
       
+
       
    --noise-strength: 0.15;

     

       
59
       
+
       
    --bg-light: var(--ultra-violet);

     

       
60
       
+
       
    --text: var(--lavendar-breeze);

     

       
61
       
+
       
    --text-light: var(--pink-puree);

     

       
62
       
+
       
    --text-dark: oklch(80.28% 0.0111 204.11);

     

       
63
       
+
       
    --accent: var(--rose-quartz);

     

       
64
       
+
       
    --accent-dark: var(--dark-crushed-grape);

     

       
65
       
+
       
    --accent-text: var(--purple-gray);

     

       
66
       
+
       
    --link: var(--light-crushed-grape);

     

       
67
       
+
       
    --border: var(--pink-puree);

     

       
68
       
+
       
    --selection: color-mix(in oklab, var(--accent), var(--purple-night) 50%);

     

       
69
       
 
       
}

     

       
70
       
 
       


     

       
71
       
 
       
@media (prefers-color-scheme: light) {

     

       
72
       
+
       
    :root,

     

       
73
       
+
       
    ::backdrop {

     

       
74
       
+
       
        color-scheme: light;

     

       
75
       
+
       
        --bg: var(--earth-yellow);

     

       
76
       
+
       
        --noise-strength: 0.15;

     

       
77
       
+
       
        --bg-light: #cbcdcd;

     

       
78
       
+
       
        --text: #41474e;

     

       
79
       
+
       
        --text-light: #686764;

     

       
80
       
+
       
        --accent: #58310ac5;

     

       
81
       
+
       
        --accent-dark: #e08f67;

     

       
82
       
+
       
        --accent-text: #dfd1bc;

     

       
83
       
+
       
        --border: #646868;

     

       
84
       
+
       
        --link: var(--accent);

     

       
85
       
+
       
        --selection: color-mix(

     

       
86
       
+
       
            in oklab,

     

       
87
       
+
       
            var(--accent),

     

       
88
       
+
       
            var(--earth-yellow) 50%

     

       
89
       
+
       
        );

     

       
90
       
+
       
    }

     

       
91
       
 
       
}

     

       
92
       
 
       


     

       
93
       
 
       
[data-theme="light"] {

     

       
94
       
+
       
    /* default (light) theme */

     

       
95
       
+
       
    color-scheme: light;

     

       
96
       
+
       
    --bg: var(--earth-yellow);

     

       
97
       
+
       
    --noise-strength: 0.22;

     

       
98
       
+
       
    --bg-light: var(--reseda-green);

     

       
99
       
+
       
    --text: #41474e;

     

       
100
       
+
       
    --text-light: #686764;

     

       
101
       
+
       
    --text-dark: #20252b;

     

       
102
       
+
       
    --accent: #58310ac5;

     

       
103
       
+
       
    --accent-dark: #56412bc5;

     

       
104
       
+
       
    --accent-text: #dfd1bc;

     

       
105
       
+
       
    --border: #646868;

     

       
106
       
+
       
    --link: var(--accent);

     

       
107
       
+
       
    --selection: color-mix(in oklab, var(--accent), var(--earth-yellow) 50%);

     

       
108
       
 
       
}

     

       
109
       
 
       


     

       
110
       
 
       
::selection,

     

       
111
       
 
       
::-moz-selection {

     

       
112
       
+
       
    color: var(--bg);

     

       
113
       
+
       
    background: var(--selection);

     

       
114
       
 
       
}

     

       
115
       
 
       


     

       
116
       
 
       
/* chromium scrollbars */

     

       
117
       
 
       
::-webkit-scrollbar {

     

       
118
       
+
       
    width: 8px;

     

       
119
       
+
       
    height: 8px;

     

       
120
       
+
       
    overflow: visible;

     

       
121
       
 
       
}

     

       
122
       
 
       
::-webkit-scrollbar-thumb {

     

       
123
       
+
       
    background: var(--accent);

     

       
124
       
+
       
    width: 12px;

     

       
125
       
 
       
}

     

       
126
       
 
       
::-webkit-scrollbar-track {

     

       
127
       
+
       
    background: var(--bg-light);

     

       
128
       
 
       
}

     

       
129
       
 
       


     

       
130
       
 
       
/* firefox scrollbars */

     

       
131
       
 
       
* {

     

       
132
       
+
       
    scrollbar-color: var(--accent) var(--bg-light);

     

       
133
       
+
       
    scrollbar-width: auto;

     

       
134
       
 
       
}

     

       
135
       
 
       


     

       
136
       
 
       
html {

     

       
137
       
+
       
    color-scheme: light dark;

     

       
138
       
+
       
    font-family: var(--mono-font);

     

       
139
       
+
       
    scroll-behavior: smooth;

     

       
140
       
 
       
}

     

       
141
       
 
       


     

       
142
       
 
       
body {

     

       
143
       
+
       
    min-height: 100svh;

     

       
144
       
+
       
    color: var(--text);

     

       
145
       
+
       
    background: var(--bg);

     

       
146
       
+
       
    position: relative;

     

       
147
       
+
       
    font-size: 1rem;

     

       
148
       
+
       
    display: grid;

     

       
149
       
+
       
    grid-template-columns: 1fr min(45rem, 90%) 1fr;

     

       
150
       
+
       
    grid-template-rows: auto 1fr auto;

     

       
151
       
+
       
    grid-row-gap: 0.625rem;

     

       
152
       
 
       
}

     

       
153
       
 
       
body > * {

     

       
154
       
+
       
    grid-column: 2;

     

       
155
       
 
       
}

     

       
156
       
 
       


     

       
157
       
 
       
body > footer {

     

       
158
       
+
       
    color: var(--text-light);

     

       
159
       
+
       
    font-size: 0.875;

     

       
160
       
 
       
}

     

       
161
       
 
       


     

       
162
       
 
       
/* Format headers */

     

       
163
       
 
       
h1 {

     

       
164
       
+
       
    font-size: 2rem;

     

       
165
       
 
       
}

     

       
166
       
 
       
h2 {

     

       
167
       
+
       
    font-size: 1.75rem;

     

       
168
       
 
       
}

     

       
169
       
 
       
h3 {

     

       
170
       
+
       
    font-size: 1.5rem;

     

       
171
       
 
       
}

     

       
172
       
 
       
h4 {

     

       
173
       
+
       
    font-size: 1.25rem;

     

       
174
       
 
       
}

     

       
175
       
 
       
h5 {

     

       
176
       
+
       
    font-size: 1rem;

     

       
177
       
 
       
}

     

       
178
       
 
       
h6 {

     

       
179
       
+
       
    font-size: 0.75rem;

     

       
180
       
 
       
}

     

       
181
       
 
       


     

       
182
       
 
       
h1,

     
···

       
185
       
 
       
h4,

     

       
186
       
 
       
h5,

     

       
187
       
 
       
h6 {

     

       
188
       
+
       
    margin: 0.5em 0 0.5em 0;

     

       
189
       
+
       
    padding: 0.22em 0.4em 0.22em 0.4em;

     

       
190
       
+
       
    border-radius: 0.1em;

     

       
191
       
+
       
    background-color: var(--accent);

     

       
192
       
+
       
    color: var(--accent-text);

     

       
193
       
+
       
    width: fit-content;

     

       
194
       
 
       
}

     

       
195
       
 
       


     

       
196
       
 
       
/* Fix line height when title wraps */

     

       
197
       
 
       
h1,

     

       
198
       
 
       
h2,

     

       
199
       
 
       
h3 {

     

       
200
       
+
       
    line-height: 1.1;

     

       
201
       
 
       
}

     

       
202
       
 
       


     

       
203
       
 
       
@media only screen and (max-width: 720px) {

     

       
204
       
+
       
    h1 {

     

       
205
       
+
       
        font-size: 1.5rem;

     

       
206
       
+
       
    }

     

       
207
       
+
       
    h2 {

     

       
208
       
+
       
        font-size: 1.25rem;

     

       
209
       
+
       
    }

     

       
210
       
+
       
    h3 {

     

       
211
       
+
       
        font-size: 1rem;

     

       
212
       
+
       
    }

     

       
213
       
+
       
    h4 {

     

       
214
       
+
       
        font-size: 0.75rem;

     

       
215
       
+
       
    }

     

       
216
       
+
       
    h5 {

     

       
217
       
+
       
        font-size: 0.5rem;

     

       
218
       
+
       
    }

     

       
219
       
+
       
    h6 {

     

       
220
       
+
       
        font-size: 0.25rem;

     

       
221
       
+
       
    }

     

       
222
       
 
       
}

     

       
223
       
 
       


     

       
224
       
 
       
p {

     

       
225
       
+
       
    margin: 1rem 0;

     

       
226
       
 
       
}

     

       
227
       
 
       


     

       
228
       
 
       
/* format links */

     

       
229
       
 
       
a,

     

       
230
       
 
       
a:visited {

     

       
231
       
+
       
    text-decoration: none;

     

       
232
       
+
       
    font-weight: bold;

     

       
233
       
+
       
    border-radius: 0.125rem;

     

       
234
       
+
       
    color: var(--accent-dark);

     

       
235
       
 
       
}

     

       
236
       
 
       


     

       
237
       
 
       
a {

     

       
238
       
+
       
    color: var(--link);

     

       
239
       
 
       
}

     

       
240
       
 
       


     

       
241
       
 
       
a:hover {

     

       
242
       
+
       
    text-decoration: underline wavy;

     

       
243
       
 
       
}

     

       
244
       
 
       


     

       
245
       
 
       
/* format lists */

     

       
246
       
 
       
ul {

     

       
247
       
+
       
    list-style: none;

     

       
248
       
+
       
    margin-top: 0.25rem;

     

       
249
       
+
       
    margin-bottom: 0.25rem;

     

       
250
       
 
       
}

     

       
251
       
 
       


     

       
252
       
 
       
ol {

     

       
253
       
+
       
    list-style-type: decimal;

     

       
254
       
+
       
    margin-top: 0.25rem;

     

       
255
       
+
       
    margin-bottom: 0.25rem;

     

       
256
       
 
       
}

     

       
257
       
 
       


     

       
258
       
 
       
li {

     

       
259
       
+
       
    margin-bottom: 0.125rem;

     

       
260
       
 
       
}

     

       
261
       
 
       


     

       
262
       
 
       
ul li::marker {

     

       
263
       
+
       
    content: "* ";

     

       
264
       
+
       
    color: var(--accent);

     

       
265
       
+
       
    font-size: 1.1rem;

     

       
266
       
 
       
}

     

       
267
       
 
       


     

       
268
       
 
       
ol li::marker {

     

       
269
       
+
       
    color: var(--accent);

     

       
270
       
 
       
}

     

       
271
       
 
       


     

       
272
       
 
       
ol li:hover::marker {

     

       
273
       
+
       
    font-weight: 700;

     

       
274
       
+
       
    color: var(--link);

     

       
275
       
 
       
}

     

       
276
       
 
       


     

       
277
       
 
       
/* Use flexbox to allow items to wrap, as needed */

     

       
278
       
 
       
header > nav ul,

     

       
279
       
 
       
header > nav ol {

     

       
280
       
+
       
    display: flex;

     

       
281
       
+
       
    flex-direction: row;

     

       
282
       
+
       
    flex-wrap: wrap;

     

       
283
       
+
       
    align-content: space-around;

     

       
284
       
+
       
    justify-content: right;

     

       
285
       
+
       
    list-style-type: none;

     

       
286
       
+
       
    margin: 0.5rem 0 0 0;

     

       
287
       
+
       
    padding: 0;

     

       
288
       
+
       
    gap: 1rem;

     

       
289
       
 
       
}

     

       
290
       
 
       


     

       
291
       
 
       
/* List items are inline elements, make them behave more like blocks */

     

       
292
       
 
       
header > nav ul li,

     

       
293
       
 
       
header > nav ol li {

     

       
294
       
+
       
    display: inline-block;

     

       
295
       
 
       
}

     

       
296
       
 
       


     

       
297
       
 
       
/* Consolidate box styling */

     

       
298
       
 
       
aside,

     

       
299
       
 
       
details,

     

       
300
       
 
       
progress {

     

       
301
       
+
       
    background-color: var(--bg-light);

     

       
302
       
+
       
    border-radius: var(--standard-border-radius);

     

       
303
       
 
       
}

     

       
304
       
 
       


     

       
305
       
 
       
aside {

     

       
306
       
+
       
    font-size: 1rem;

     

       
307
       
+
       
    width: 35%;

     

       
308
       
+
       
    padding: 0 10px;

     

       
309
       
+
       
    margin-inline-start: 10px;

     

       
310
       
+
       
    float: right;

     

       
311
       
 
       
}

     

       
312
       
 
       
*[dir="rtl"] aside {

     

       
313
       
+
       
    float: left;

     

       
314
       
 
       
}

     

       
315
       
 
       


     

       
316
       
 
       
/* make aside full-width on mobile */

     

       
317
       
 
       
@media only screen and (max-width: 720px) {

     

       
318
       
+
       
    aside {

     

       
319
       
+
       
        width: 100%;

     

       
320
       
+
       
        float: none;

     

       
321
       
+
       
        margin-inline-start: 0;

     

       
322
       
+
       
    }

     

       
323
       
 
       
}

     

       
324
       
 
       


     

       
325
       
 
       
details {

     

       
326
       
+
       
    padding: 0.5rem;

     

       
327
       
 
       
}

     

       
328
       
 
       


     

       
329
       
 
       
summary {

     

       
330
       
+
       
    cursor: pointer;

     

       
331
       
+
       
    font-weight: bold;

     

       
332
       
+
       
    word-break: break-all;

     

       
333
       
 
       
}

     

       
334
       
 
       


     

       
335
       
 
       
details[open] > summary + * {

     

       
336
       
+
       
    margin-top: 0;

     

       
337
       
 
       
}

     

       
338
       
 
       


     

       
339
       
 
       
details[open] > summary {

     

       
340
       
+
       
    margin-bottom: 0.5rem;

     

       
341
       
 
       
}

     

       
342
       
 
       


     

       
343
       
 
       
details[open] > :last-child {

     

       
344
       
+
       
    margin-bottom: 0;

     

       
345
       
 
       
}

     

       
346
       
 
       


     

       
347
       
 
       
/* Format tables */

     

       
348
       
 
       
table {

     

       
349
       
+
       
    border-collapse: collapse;

     

       
350
       
+
       
    margin: 1.5rem 0;

     

       
351
       
+
       
    display: block;

     

       
352
       
+
       
    overflow-x: auto;

     

       
353
       
+
       
    white-space: nowrap;

     

       
354
       
 
       
}

     

       
355
       
 
       


     

       
356
       
 
       
td,

     

       
357
       
 
       
th {

     

       
358
       
+
       
    border: 1px solid var(--border);

     

       
359
       
+
       
    text-align: start;

     

       
360
       
+
       
    padding: 0.5rem;

     

       
361
       
 
       
}

     

       
362
       
 
       


     

       
363
       
 
       
th {

     

       
364
       
+
       
    background-color: var(--bg-light);

     

       
365
       
+
       
    font-weight: bold;

     

       
366
       
 
       
}

     

       
367
       
 
       


     

       
368
       
 
       
tr:nth-child(even) {

     

       
369
       
+
       
    background-color: var(--bg-light);

     

       
370
       
 
       
}

     

       
371
       
 
       


     

       
372
       
 
       
table caption {

     

       
373
       
+
       
    text-align: left;

     

       
374
       
+
       
    font-weight: bold;

     

       
375
       
+
       
    margin: 0 0 0.4rem 1rem;

     

       
376
       
 
       
}

     

       
377
       
 
       


     

       
378
       
 
       
/* format forms */

     

       
379
       
 
       
fieldset {

     

       
380
       
+
       
    border: 1px dashed var(--accent);

     

       
381
       
+
       
    border-radius: var(--standard-border-radius);

     

       
382
       
 
       
}

     

       
383
       
 
       


     

       
384
       
 
       
fieldset > legend {

     

       
385
       
+
       
    color: var(--accent);

     

       
386
       
 
       
}

     

       
387
       
 
       


     

       
388
       
 
       
textarea,

     
···

       
390
       
 
       
input,

     

       
391
       
 
       
button,

     

       
392
       
 
       
.button {

     

       
393
       
+
       
    font-size: inherit;

     

       
394
       
+
       
    font-family: inherit;

     

       
395
       
+
       
    padding: 0.25rem;

     

       
396
       
+
       
    border-radius: var(--standard-border-radius);

     

       
397
       
+
       
    box-shadow: none;

     

       
398
       
+
       
    max-width: 100%;

     

       
399
       
+
       
    display: inline-block;

     

       
400
       
 
       
}

     

       
401
       
 
       


     

       
402
       
 
       
textarea,

     

       
403
       
 
       
select,

     

       
404
       
 
       
input {

     

       
405
       
+
       
    color: var(--text);

     

       
406
       
+
       
    background-color: var(--bg);

     

       
407
       
+
       
    border: 1px dashed var(--border);

     

       
408
       
 
       
}

     

       
409
       
 
       


     

       
410
       
 
       
label {

     

       
411
       
+
       
    display: block;

     

       
412
       
 
       
}

     

       
413
       
 
       


     

       
414
       
 
       
fieldset label {

     

       
415
       
+
       
    margin: 0 0 0.3rem 0;

     

       
416
       
 
       
}

     

       
417
       
 
       


     

       
418
       
 
       
textarea {

     

       
419
       
+
       
    max-width: 43.5rem;

     

       
420
       
+
       
    resize: both;

     

       
421
       
 
       
}

     

       
422
       
 
       


     

       
423
       
 
       
textarea:not([cols]) {

     

       
424
       
+
       
    width: 100%;

     

       
425
       
 
       
}

     

       
426
       
 
       


     

       
427
       
 
       
@media only screen and (max-width: 720px) {

     

       
428
       
+
       
    textarea,

     

       
429
       
+
       
    select,

     

       
430
       
+
       
    input {

     

       
431
       
+
       
        width: 100%;

     

       
432
       
+
       
    }

     

       
433
       
 
       
}

     

       
434
       
 
       


     

       
435
       
 
       
/* format buttons */

     
···

       
440
       
 
       
input[type="reset"],

     

       
441
       
 
       
input[type="button"],

     

       
442
       
 
       
label[type="button"] {

     

       
443
       
+
       
    border: 1px solid var(--accent);

     

       
444
       
+
       
    background-color: var(--accent);

     

       
445
       
+
       
    color: var(--accent-text);

     

       
446
       
+
       
    padding: 0.5rem 0.9rem;

     

       
447
       
+
       
    text-decoration: none;

     

       
448
       
+
       
    line-height: normal;

     

       
449
       
 
       
}

     

       
450
       
 
       


     

       
451
       
 
       
.button[aria-disabled="true"],

     
···

       
453
       
 
       
textarea:disabled,

     

       
454
       
 
       
select:disabled,

     

       
455
       
 
       
button[disabled] {

     

       
456
       
+
       
    cursor: not-allowed;

     

       
457
       
+
       
    background-color: var(--bg-light);

     

       
458
       
+
       
    border-color: var(--bg-light);

     

       
459
       
+
       
    color: var(--text-light);

     

       
460
       
 
       
}

     

       
461
       
 
       


     

       
462
       
 
       
input[type="range"] {

     

       
463
       
+
       
    padding: 0;

     

       
464
       
+
       
    color: var(--accent);

     

       
465
       
 
       
}

     

       
466
       
 
       


     

       
467
       
 
       
abbr[title] {

     

       
468
       
+
       
    cursor: help;

     

       
469
       
+
       
    text-decoration-line: underline;

     

       
470
       
+
       
    text-decoration-style: dotted;

     

       
471
       
 
       
}

     

       
472
       
 
       


     

       
473
       
 
       
button:enabled:hover,

     
···

       
476
       
 
       
input[type="reset"]:enabled:hover,

     

       
477
       
 
       
input[type="button"]:enabled:hover,

     

       
478
       
 
       
label[type="button"]:hover {

     

       
479
       
+
       
    background-color: var(--accent-dark);

     

       
480
       
+
       
    border-color: var(--accent-dark);

     

       
481
       
+
       
    cursor: pointer;

     

       
482
       
 
       
}

     

       
483
       
 
       


     

       
484
       
 
       
.button:focus-visible,

     

       
485
       
 
       
button:focus-visible:where(:enabled),

     

       
486
       
 
       
input:enabled:focus-visible:where(

     

       
487
       
+
       
        [type="submit"],

     

       
488
       
+
       
        [type="reset"],

     

       
489
       
+
       
        [type="button"]

     

       
490
       
+
       
    ) {

     

       
491
       
+
       
    outline: 2px solid var(--accent);

     

       
492
       
+
       
    outline-offset: 1px;

     

       
493
       
 
       
}

     

       
494
       
 
       


     

       
495
       
 
       
/* checkbox and radio button style */

     

       
496
       
 
       
input[type="checkbox"],

     

       
497
       
 
       
input[type="radio"] {

     

       
498
       
+
       
    vertical-align: middle;

     

       
499
       
+
       
    position: relative;

     

       
500
       
+
       
    width: min-content;

     

       
501
       
+
       
    width: 14px;

     

       
502
       
+
       
    height: 14px;

     

       
503
       
 
       
}

     

       
504
       
 
       


     

       
505
       
 
       
input[type="checkbox"] + label,

     

       
506
       
 
       
input[type="radio"] + label {

     

       
507
       
+
       
    display: inline-block;

     

       
508
       
 
       
}

     

       
509
       
 
       


     

       
510
       
 
       
input[type="radio"] {

     

       
511
       
+
       
    border-radius: 100%;

     

       
512
       
 
       
}

     

       
513
       
 
       


     

       
514
       
 
       
input[type="checkbox"]:checked,

     

       
515
       
 
       
input[type="radio"]:checked {

     

       
516
       
+
       
    background-color: var(--accent);

     

       
517
       
 
       
}

     

       
518
       
 
       


     

       
519
       
 
       
@media only screen and (max-width: 720px) {

     

       
520
       
+
       
    textarea,

     

       
521
       
+
       
    select,

     

       
522
       
+
       
    input {

     

       
523
       
+
       
        width: 100%;

     

       
524
       
+
       
    }

     

       
525
       
 
       
}

     

       
526
       
 
       


     

       
527
       
 
       
input[type="color"] {

     

       
528
       
+
       
    height: 2.5rem;

     

       
529
       
+
       
    padding: 0.2rem;

     

       
530
       
 
       
}

     

       
531
       
 
       


     

       
532
       
 
       
input[type="file"] {

     

       
533
       
+
       
    border: 0;

     

       
534
       
 
       
}

     

       
535
       
 
       


     

       
536
       
 
       
/* misc body elements */

     

       
537
       
 
       
hr {

     

       
538
       
+
       
    border: 1px dashed var(--accent);

     

       
539
       
+
       
    margin: 0.5rem 0 0.5rem 0;

     

       
540
       
 
       
}

     

       
541
       
 
       


     

       
542
       
 
       
mark {

     

       
543
       
+
       
    padding: 0 0.25em 0 0.25em;

     

       
544
       
+
       
    border-radius: var(--standard-border-radius);

     

       
545
       
+
       
    background-color: var(--accent);

     

       
546
       
+
       
    color: var(--bg);

     

       
547
       
 
       
}

     

       
548
       
 
       


     

       
549
       
 
       
mark a {

     

       
550
       
+
       
    color: var(--link);

     

       
551
       
 
       
}

     

       
552
       
 
       


     

       
553
       
 
       
img,

     

       
554
       
 
       
video,

     

       
555
       
 
       
iframe[src^="https://www.youtube-nocookie.com"],

     

       
556
       
+
       
iframe[src^="https://www.youtube.com"]

     

       
557
       
+
       
{

     

       
558
       
+
       
    max-width: 90%;

     

       
559
       
+
       
    margin: 1rem;

     

       
560
       
+
       
    height: auto;

     

       
561
       
+
       
    border: dashed 2px var(--accent);

     

       
562
       
+
       
    border-radius: 15px;

     

       
563
       
+
       
    opacity: 0.95;

     

       
564
       
 
       
}

     

       
565
       
 
       


     

       
566
       
 
       
figure {

     

       
567
       
+
       
    margin: 0;

     

       
568
       
+
       
    display: block;

     

       
569
       
+
       
    overflow-x: auto;

     

       
570
       
 
       
}

     

       
571
       
 
       


     

       
572
       
 
       
figcaption {

     

       
573
       
+
       
    text-align: left;

     

       
574
       
+
       
    font-size: 0.875rem;

     

       
575
       
+
       
    color: var(--text-light);

     

       
576
       
+
       
    margin: 0 0 1rem 1rem;

     

       
577
       
 
       
}

     

       
578
       
 
       


     

       
579
       
 
       
blockquote {

     

       
580
       
+
       
    margin: 0 0 0 1.25rem;

     

       
581
       
+
       
    padding: 0.5rem 0 0 0.5rem;

     

       
582
       
+
       
    border-inline-start: 0.375rem solid var(--accent);

     

       
583
       
+
       
    color: var(--text-light);

     

       
584
       
+
       
    font-style: italic;

     

       
585
       
 
       
}

     

       
586
       
 
       


     

       
587
       
 
       
p:has(cite) {

     

       
588
       
+
       
    text-align: right;

     

       
589
       
+
       
    font-size: 0.875rem;

     

       
590
       
+
       
    color: var(--text-light);

     

       
591
       
+
       
    font-weight: 600;

     

       
592
       
 
       
}

     

       
593
       
 
       


     

       
594
       
 
       
cite::before {

     

       
595
       
+
       
    content: "— ";

     

       
596
       
 
       
}

     

       
597
       
 
       


     

       
598
       
 
       
dt {

     

       
599
       
+
       
    color: var(--text-light);

     

       
600
       
 
       
}

     

       
601
       
 
       


     

       
602
       
 
       
code,

     
···

       
604
       
 
       
pre span,

     

       
605
       
 
       
kbd,

     

       
606
       
 
       
samp {

     

       
607
       
+
       
    font-family: var(--mono-font);

     

       
608
       
 
       
}

     

       
609
       
 
       


     

       
610
       
 
       
pre {

     

       
611
       
+
       
    border: 1px solid var(--accent);

     

       
612
       
+
       
    max-height: 30rem;

     

       
613
       
+
       
    padding: 0.625rem;

     

       
614
       
+
       
    overflow-x: auto;

     

       
615
       
+
       
    font-style: monospace;

     

       
616
       
 
       
}

     

       
617
       
 
       


     

       
618
       
 
       
p code,

     

       
619
       
 
       
li code,

     

       
620
       
 
       
div code {

     

       
621
       
+
       
    padding: 0 0.125rem 0 0.125rem;

     

       
622
       
+
       
    border-radius: 3px;

     

       
623
       
+
       
    color: var(--bg);

     

       
624
       
+
       
    background-color: var(--text);

     

       
625
       
 
       
}

     

       
626
       
 
       


     

       
627
       
 
       
pre code {

     

       
628
       
+
       
    padding: 0;

     

       
629
       
+
       
    border-radius: 0;

     

       
630
       
+
       
    color: inherit;

     

       
631
       
+
       
    background-color: inherit;

     

       
632
       
 
       
}

     

       
633
       
 
       


     

       
634
       
 
       
iframe {

     

       
635
       
+
       
    max-width: 90%;

     

       
636
       
 
       
}

     

       
637
       
 
       


     

       
638
       
 
       
/* progress bars */

     

       
639
       
 
       
progress {

     

       
640
       
+
       
    width: 100%;

     

       
641
       
 
       
}

     

       
642
       
 
       


     

       
643
       
 
       
progress:indeterminate {

     

       
644
       
+
       
    background-color: var(--bg-light);

     

       
645
       
 
       
}

     

       
646
       
 
       


     

       
647
       
 
       
progress::-webkit-progress-bar {

     

       
648
       
+
       
    border-radius: var(--standard-border-radius);

     

       
649
       
+
       
    background-color: var(--bg-light);

     

       
650
       
 
       
}

     

       
651
       
 
       


     

       
652
       
 
       
progress::-webkit-progress-value {

     

       
653
       
+
       
    border-radius: var(--standard-border-radius);

     

       
654
       
+
       
    background-color: var(--accent);

     

       
655
       
 
       
}

     

       
656
       
 
       


     

       
657
       
 
       
progress::-moz-progress-bar {

     

       
658
       
+
       
    border-radius: var(--standard-border-radius);

     

       
659
       
+
       
    background-color: var(--accent);

     

       
660
       
+
       
    transition-property: width;

     

       
661
       
+
       
    transition-duration: 0.3s;

     

       
662
       
 
       
}

     

       
663
       
 
       


     

       
664
       
 
       
progress:indeterminate::-moz-progress-bar {

     

       
665
       
+
       
    background-color: var(--bg-light);

     

       
666
       
 
       
}

     

       
667
       
 
       


     

       
668
       
 
       
dialog {

     

       
669
       
+
       
    max-width: 40rem;

     

       
670
       
+
       
    margin: auto;

     

       
671
       
 
       
}

     

       
672
       
 
       


     

       
673
       
 
       
dialog::backdrop {

     

       
674
       
+
       
    background-color: var(--bg);

     

       
675
       
+
       
    opacity: 0.8;

     

       
676
       
 
       
}

     

       
677
       
 
       


     

       
678
       
 
       
@media only screen and (max-width: 720px) {

     

       
679
       
+
       
    dialog {

     

       
680
       
+
       
        max-width: 100%;

     

       
681
       
+
       
        margin: auto 1em;

     

       
682
       
+
       
    }

     

       
683
       
 
       
}

     

       
684
       
 
       


     

       
685
       
 
       
/* superscript & subscript */

     

       
686
       
 
       
/* prevent scripts from affecting line-height. */

     

       
687
       
 
       
sup,

     

       
688
       
 
       
sub {

     

       
689
       
+
       
    vertical-align: baseline;

     

       
690
       
+
       
    position: relative;

     

       
691
       
 
       
}

     

       
692
       
 
       


     

       
693
       
 
       
sup {

     

       
694
       
+
       
    top: -0.4em;

     

       
695
       
 
       
}

     

       
696
       
 
       


     

       
697
       
 
       
sub {

     

       
698
       
+
       
    top: 0.3em;

     

       
699
       
 
       
}