1:root {
  2  --bg0: #fdf6e3;
  3  --bg1: #f3ead3;
  4  --bg2: #e9dfc2;
  5  --fg: #5c6a72;
  6  --red: #e67e80;
  7  --orange: #f57d26;
  8  --yellow: #dfa000;
  9  --green: #8da101;
 10  --aqua: #35a77c;
 11  --blue: #3a94c5;
 12  --purple: #df69ba;
 13  --gray0: #a6b0a0;
 14  --gray1: #939f91;
 15  --gray2: #829181;
 16  
 17  --space-xs: 0.25rem;
 18  --space-sm: 0.5rem;
 19  --space-md: 1rem;
 20  --space-lg: 2rem;
 21  --space-xl: 4rem;
 22  
 23  --font-serif: Arial,  sans-serif;
 24  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 25  --font-mono: 'Menlo', 'Monaco', 'Consolas', 'Lucida Console', monospace;
 26  
 27  --shadow-sm: 0 2px 8px rgba(92, 106, 114, 0.08);
 28  --shadow-md: 0 4px 16px rgba(92, 106, 114, 0.12);
 29}
 30
 31@media (prefers-color-scheme: dark) {
 32  :root {
 33    --bg0: #2b3339;
 34    --bg1: #323c41;
 35    --bg2: #3a454a;
 36    --fg: #d3c6aa;
 37    --red: #e67e80;
 38    --orange: #e69875;
 39    --yellow: #dbbc7f;
 40    --green: #a7c080;
 41    --aqua: #83c092;
 42    --blue: #7fbbb3;
 43    --purple: #d699b6;
 44    --gray0: #859289;
 45    --gray1: #7a8478;
 46    --gray2: #6f7770;
 47  }
 48}
 49
 50* {
 51  box-sizing: border-box;
 52  transition: background-color 0.3s ease, color 0.3s ease;
 53}
 54
 55html {
 56  color: var(--fg);
 57  background-color: var(--bg0);
 58  font-family: var(--font-serif);
 59  line-height: 1.7;
 60  font-size: 16px;
 61}
 62
 63body {
 64  margin: 0 auto;
 65  max-width: 40em;
 66  padding: var(--space-lg) var(--space-lg);
 67  background-color: var(--bg0);
 68  hyphens: auto;
 69  overflow-wrap: break-word;
 70  text-rendering: optimizeLegibility;
 71  font-kerning: normal;
 72}
 73
 74@media (max-width: 768px) {
 75  body {
 76    font-size: 17px;
 77    padding: var(--space-md) var(--space-md);
 78  }
 79}
 80
 81@media (max-width: 600px) {
 82  body {
 83    font-size: 16px;
 84    padding: var(--space-md);
 85  }
 86}
 87
 88h1, h2, h3, h4, h5, h6 {
 89  font-family: var(--font-sans);
 90  font-weight: 600;
 91  line-height: 1.3;
 92  margin-top: 2em;
 93  margin-bottom: 0.5em;
 94  color: var(--fg);
 95}
 96
 97h1 {
 98  font-size: 1.7em;
 99  color: var(--green);
100  border-bottom: 1px solid var(--bg2);
101  padding-bottom: 0.2em;
102  margin-top: 0;
103  margin-bottom: 0.5em;
104}
105
106h2 {
107  font-size: 1.5em;
108  color: var(--aqua);
109  border-bottom: 1px solid var(--bg2);
110  padding-bottom: 0.2em;
111  margin-top: 2em;
112  padding-top: 0.5em;
113}
114
115h3 {
116  font-size: 1.3em;
117  color: var(--blue);
118}
119
120h4 {
121  font-size: 1.1em;
122  color: var(--purple);
123}
124
125h5, h6 {
126  font-size: 1em;
127  color: var(--orange);
128}
129
130h5.year {
131  color: var(--fg);
132}
133
134a {
135  color: var(--blue);
136  text-decoration: none;
137  border-bottom: 1px solid transparent;
138  padding-bottom: 1px;
139}
140
141a:hover {
142  color: var(--aqua);
143  border-bottom: 1px solid var(--aqua);
144}
145
146p {
147  margin: 1.5em 0;
148  text-align: justify;
149}
150
151ul, ol {
152  padding-left: 1.8em;
153  margin: 1.5em 0;
154}
155
156li {
157  margin: 0.5em 0;
158}
159
160li > ul, li > ol {
161  margin-top: 0.5em;
162  margin-bottom: 0.5em;
163}
164
165span.date {
166    font-size: 15px;
167    margin-right: 1.5em;
168    color: var(--gray0);
169}
170
171ul.posts {
172    margin: 0;
173}
174
175li.list-item {
176    list-style-type: none;
177    margin: 0;
178}
179
180code {
181  font-family: var(--font-mono);
182  font-size: 0.85em;
183  background-color: var(--bg1);
184  padding: 0.2em 0.4em;
185  border-radius: 4px;
186  color: var(--blue);
187}
188
189pre {
190  background-color: var(--bg1);
191  padding: 1.2em;
192  overflow-x: auto;
193  margin: 1.5em 0;
194  border-left: 2px solid var(--green);
195  box-shadow: var(--shadow-sm);
196  position: relative;
197  min-width: 100%;
198}
199
200pre code {
201  background-color: transparent;
202  padding: 0;
203  color: var(--fg);
204  font-size: 0.9em;
205  display: inline-block;
206  min-width: 100%;
207}
208
209blockquote {
210  margin: 2em 0;
211  padding: 1em 1.5em;
212  border-left: 4px solid var(--orange);
213  background-color: var(--bg1);
214  border-radius: 0 8px 8px 0;
215  color: var(--gray1);
216  font-style: italic;
217}
218
219blockquote p {
220  margin: 0.5em 0;
221}
222
223hr {
224  border: none;
225  height: 2px;
226  background: var(--bg2);
227}
228
229table {
230  width: 100%;
231  border-collapse: collapse;
232  margin: 2em 0;
233  background-color: var(--bg1);
234  border-radius: 8px;
235  overflow: hidden;
236  box-shadow: var(--shadow-sm);
237}
238
239th {
240  background-color: var(--bg2);
241  color: var(--green);
242  font-weight: 600;
243  text-align: left;
244  padding: 0.8em 1em;
245  border-bottom: 2px solid var(--bg0);
246}
247
248td {
249  padding: 0.8em 1em;
250  border-bottom: 1px solid var(--bg2);
251}
252
253tr:last-child td {
254  border-bottom: none;
255}
256
257header#title-block-header {
258  text-align: left;
259  margin-bottom: var(--space-md);
260  padding-bottom: var(--space-sm);
261  border-bottom: 1px solid var(--bg2);
262}
263
264header .title {
265  font-size: 1.6em;
266  color: var(--green);
267  margin-bottom: 0.2em;
268  border-bottom: none;
269  font-weight: 600;
270  letter-spacing: -0.02em;
271}
272
273header .author {
274  display: inline;
275  font-style: italic;
276  font-size: 0.95em;
277  color: var(--gray1);
278  margin: 0;
279}
280
281header .date {
282  display: inline;
283  font-family: var(--font-serif);
284  font-size: 0.95em;
285  color: var(--gray1);
286  margin: 0;
287  margin-left: var(--space-sm);
288}
289
290header .date::before {
291  content: "•";
292  margin-right: var(--space-sm);
293  color: var(--gray2);
294  font-size: 0.8em;
295}
296
297nav#TOC {
298  margin: 1.5em 0 2em 0;
299  padding: 0.8em 1em;
300  background-color: transparent;
301  border-left: 2px solid var(--gray1);
302  border-radius: 0;
303  font-size: 0.9em;
304}
305
306nav#TOC::before {
307  content: "Table of Contents";
308  display: block;
309  font-family: var(--font-sans);
310  font-size: 0.85em;
311  font-weight: 600;
312  color: var(--gray1);
313  margin-bottom: 0.5em;
314  text-transform: uppercase;
315  letter-spacing: 0.5px;
316}
317
318nav#TOC ul {
319  list-style: none;
320  padding-left: 0;
321  margin: 0;
322}
323
324nav#TOC > ul {
325  padding-left: 0;
326}
327
328nav#TOC li {
329  margin: 0.3em 0;
330  position: relative;
331}
332
333nav#TOC a {
334  color: var(--fg);
335  text-decoration: none;
336  display: block;
337  padding: 0.1em 0.3em;
338  border-radius: 2px;
339  line-height: 1.4;
340}
341
342nav#TOC a:hover {
343  color: var(--aqua);
344}
345
346nav#TOC ul ul {
347  padding-left: 0.8em;
348  margin: 0.2em 0;
349  border-left: 1px solid var(--bg2);
350}
351
352nav#TOC ul ul a {
353  font-size: 0.95em;
354  color: var(--gray1);
355}
356
357nav#TOC ul ul a:hover {
358  color: var(--blue);
359}
360
361ul.task-list {
362  list-style: none;
363  padding-left: 1em;
364}
365
366ul.task-list li {
367  display: flex;
368  align-items: flex-start;
369  gap: 0.5em;
370}
371
372ul.task-list li input[type="checkbox"] {
373  margin-top: 0.3em;
374  accent-color: var(--green);
375}
376
377img {
378  max-width: 100%;
379  height: auto;
380  border-radius: 8px;
381  margin: 1.5em auto;
382  display: block;
383  box-shadow: var(--shadow-md);
384}
385
386@media print {
387  html {
388    background-color: white;
389    font-size: 12pt;
390  }
391  
392  body {
393    background-color: transparent;
394    color: black;
395    max-width: none;
396    padding: 0;
397  }
398  
399  a {
400    color: black;
401    text-decoration: underline;
402  }
403  
404  pre, blockquote, table {
405    page-break-inside: avoid;
406  }
407  
408  h2, h3, h4 {
409    page-break-after: avoid;
410  }
411  
412  nav#TOC {
413    display: none;
414  }
415}