1<style type="text/css">
2 :root {
3 --b-font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4 --b-font-mono: Consolas, Monaco, monospace;
5 --b-txt: #2e3440;
6 --b-bg-1: #fff;
7 --b-bg-2: #eceff4;
8 --b-line: #eceff4;
9 --b-link: #bf616a;
10 --b-btn-bg: #242933;
11 --b-btn-txt: #fff;
12 --b-focus: #88c0d0
13 }
14
15@media (prefers-color-scheme: dark) {
16 :root {
17 --b-txt: #eceff4;
18 --b-bg-1: #2e3440;
19 --b-bg-2: #3b4252;
20 --b-line: #3b4252
21 }
22}
23
24*, :after, :before {
25 box-sizing: border-box
26}
27
28html:focus-within {
29 scroll-behavior: smooth
30}
31
32body {
33 max-width: 70ch;
34 padding: 0 1rem;
35 margin: auto;
36 background: var(--b-bg-1);
37 font-family: var(--b-font-main);
38 text-rendering: optimizeSpeed;
39 line-height: 1.5;
40 color: var(--b-txt);
41 -moz-tab-size: 4;
42 tab-size: 4;
43 word-break: break-word;
44 -webkit-tap-highlight-color: transparent;
45 -webkit-text-size-adjust: 100%
46}
47
48address, audio, blockquote, dd, details, dl, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, iframe, ol, p, pre, table, ul, video {
49 margin: 0 0 1.5rem
50}
51
52h1, h2, h3, h4, h5, h6 {
53 line-height: 1.25;
54 margin-top: 2rem
55}
56
57h1 {
58 font-size: 2rem
59}
60
61h2 {
62 font-size: 1.5rem
63}
64
65h3 {
66 font-size: 1.25rem
67}
68
69h4 {
70 font-size: 1rem
71}
72
73h5 {
74 font-size: .875rem
75}
76
77h6 {
78 font-size: .75rem
79}
80
81a {
82 color: var(--b-link);
83 text-decoration: none
84}
85
86a:hover {
87 text-decoration: underline
88}
89
90img, svg, video {
91 height: auto
92}
93
94embed, iframe, img, object, svg, video {
95 max-width: 100%
96}
97
98iframe {
99 border-style: none
100}
101
102abbr[title] {
103 text-decoration: underline;
104 text-decoration: underline dotted
105}
106
107blockquote {
108 margin-left: 0;
109 padding: .5rem 0 .5rem 1.5rem;
110 border-left: .25rem solid var(--b-txt)
111}
112
113blockquote > :last-child {
114 margin-bottom: 0
115}
116
117small {
118 font-size: .875rem
119}
120
121sub, sup {
122 font-size: .75em;
123 line-height: 0;
124 position: relative;
125 vertical-align: baseline
126}
127
128sub {
129 bottom: -.25em
130}
131
132sup {
133 top: -.5em
134}
135
136hr {
137 height: 0;
138 overflow: visible;
139 border: 0;
140 border-bottom: 1px solid var(--b-line)
141}
142
143code, kbd, pre, samp, tt, var {
144 background: var(--b-bg-2);
145 border-radius: .25rem;
146 padding: .125rem .25rem;
147 font-family: var(--b-font-mono);
148 font-size: .875rem
149}
150
151pre {
152 padding: 1rem;
153 border-radius: 0;
154 overflow: auto;
155 white-space: pre
156}
157
158pre code {
159 padding: 0
160}
161
162details {
163 display: block;
164 padding: .5rem 1rem;
165 background: var(--b-bg-2);
166 border: 1px solid var(--b-line);
167 border-radius: .25rem
168}
169
170details > :last-child {
171 margin-bottom: 0
172}
173
174details[open] > summary {
175 margin-bottom: 1.5rem
176}
177
178summary {
179 display: list-item;
180 cursor: pointer;
181 font-weight: 700
182}
183
184summary:focus {
185 box-shadow: none
186}
187
188table {
189 border-collapse: collapse;
190 width: 100%;
191 text-indent: 0
192}
193
194table caption {
195 margin-bottom: .5rem
196}
197
198tr {
199 border-bottom: 1px solid var(--b-line)
200}
201
202td, th {
203 padding: .5rem 0
204}
205
206th {
207 text-align: left
208}
209
210dd, ol, ul {
211 padding-left: 2rem
212}
213
214li > ol, li > ul {
215 margin-bottom: 0
216}
217
218fieldset {
219 padding: .5rem .75rem;
220 border: 1px solid var(--b-line);
221 border-radius: .25rem
222}
223
224legend {
225 padding: 0 .25rem
226}
227
228button, input, select, textarea {
229 margin: 0;
230 padding: .5rem .75rem;
231 max-width: 100%;
232 background: var(--b-bg-2);
233 border: 0;
234 border-radius: .25rem;
235 font: inherit;
236 line-height: 1.125;
237 color: var(--b-txt)
238}
239
240input:not([size]):not([type=button i]):not([type=submit i]):not([type=reset i]):not([type=checkbox i]):not([type=radio i]), select {
241 width: 100%
242}
243
244[type=color i] {
245 min-height: 2.125rem
246}
247
248select:not([multiple]):not([size]) {
249 padding-right: 1.5rem;
250 background-repeat: no-repeat;
251 background-position: right .5rem center;
252 -moz-appearance: none;
253 -webkit-appearance: none;
254 appearance: none
255}
256
257textarea {
258 width: 100%;
259 resize: vertical
260}
261
262textarea:not([rows]) {
263 height: 8rem
264}
265
266[type=button i], [type=reset i], [type=submit i], button {
267 -webkit-appearance: button;
268 display: inline-block;
269 text-align: center;
270 white-space: nowrap;
271 background: var(--b-btn-bg);
272 color: var(--b-btn-txt);
273 border: 0;
274 cursor: pointer;
275 transition: opacity .25s
276}
277
278[type=button i]:hover, [type=reset i]:hover, [type=submit i]:hover, button:hover {
279 opacity: .75
280}
281
282[type=button i][disabled], [type=reset i][disabled], [type=submit i][disabled], button[disabled] {
283 opacity: .5
284}
285
286progress {
287 vertical-align: middle
288}
289
290[type=search i] {
291 -webkit-appearance: textfield;
292 outline-offset: -2px
293}
294
295::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
296 height: auto
297}
298
299::-webkit-input-placeholder {
300 color: inherit;
301 opacity: .5
302}
303
304::-webkit-search-decoration {
305 -webkit-appearance: none
306}
307
308::-webkit-file-upload-button {
309 -webkit-appearance: button;
310 font: inherit
311}
312
313::-moz-focus-inner {
314 border-style: none;
315 padding: 0
316}
317
318:-moz-focusring {
319 outline: 1px dotted ButtonText
320}
321
322:-moz-ui-invalid {
323 box-shadow: none
324}
325
326[aria-busy=true i] {
327 cursor: progress
328}
329
330[aria-controls] {
331 cursor: pointer
332}
333
334[aria-disabled=true i], [disabled] {
335 cursor: not-allowed
336}
337
338:focus, details:focus-within {
339 outline: none;
340 box-shadow: 0 0 0 2px var(--b-focus)
341}
342
343@media (prefers-reduced-motion: reduce) {
344 html:focus-within {
345 scroll-behavior: auto
346 }
347
348 *, :after, :before {
349 animation-delay: -1ms !important;
350 animation-duration: 1ms !important;
351 animation-iteration-count: 1 !important;
352 background-attachment: scroll !important;
353 scroll-behavior: auto !important;
354 transition-delay: 0 !important;
355 transition-duration: 0 !important
356 }
357}
358
359select:not([multiple]):not([size]) {
360 background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%232e3440'%3E%3Cpath d='M5 6l5 5 5-5 2 1-7 7-7-7 2-1z'/%3E%3C/svg%3E")
361}
362
363@media (prefers-color-scheme: dark) {
364 select:not([multiple]):not([size]) {
365 background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23eceff4'%3E%3Cpath d='M5 6l5 5 5-5 2 1-7 7-7-7 2-1z'/%3E%3C/svg%3E")
366 }
367}
368
369</style >