/* Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

*:not(dialog) {
    margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

p {
    text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

#root,
#__next {
    isolation: isolate;
}

/* Variables */
:root {
    /* fonts */
    --font-body: "LXGW WenKai", serif;
    --font-mono: "Hack", monospace;

    /* catppuccin macchiato */
    --ctp-macchiato-rosewater: #f4dbd6;
    --ctp-macchiato-rosewater-rgb: 244 219 214;
    --ctp-macchiato-rosewater-hsl: 10.000 57.692% 89.804%;
    --ctp-macchiato-rosewater-oklch: 0.9105 0.0286 31.1326;
    --ctp-macchiato-flamingo: #f0c6c6;
    --ctp-macchiato-flamingo-rgb: 240 198 198;
    --ctp-macchiato-flamingo-hsl: 0.000 58.333% 85.882%;
    --ctp-macchiato-flamingo-oklch: 0.8629 0.0479 18.1203;
    --ctp-macchiato-pink: #f5bde6;
    --ctp-macchiato-pink-rgb: 245 189 230;
    --ctp-macchiato-pink-hsl: 316.071 73.684% 85.098%;
    --ctp-macchiato-pink-oklch: 0.8608 0.0830 336.1799;
    --ctp-macchiato-mauve: #c6a0f6;
    --ctp-macchiato-mauve-rgb: 198 160 246;
    --ctp-macchiato-mauve-hsl: 266.512 82.692% 79.608%;
    --ctp-macchiato-mauve-oklch: 0.7715 0.1259 303.8984;
    --ctp-macchiato-red: #ed8796;
    --ctp-macchiato-red-rgb: 237 135 150;
    --ctp-macchiato-red-hsl: 351.176 73.913% 72.941%;
    --ctp-macchiato-red-oklch: 0.7370 0.1252 11.1943;
    --ctp-macchiato-maroon: #ee99a0;
    --ctp-macchiato-maroon-rgb: 238 153 160;
    --ctp-macchiato-maroon-hsl: 355.059 71.429% 76.667%;
    --ctp-macchiato-maroon-oklch: 0.7702 0.1024 14.3707;
    --ctp-macchiato-peach: #f5a97f;
    --ctp-macchiato-peach-rgb: 245 169 127;
    --ctp-macchiato-peach-hsl: 21.356 85.507% 72.941%;
    --ctp-macchiato-peach-oklch: 0.7988 0.1061 49.6376;
    --ctp-macchiato-yellow: #eed49f;
    --ctp-macchiato-yellow-rgb: 238 212 159;
    --ctp-macchiato-yellow-hsl: 40.253 69.912% 77.843%;
    --ctp-macchiato-yellow-oklch: 0.8790 0.0744 84.7510;
    --ctp-macchiato-green: #a6da95;
    --ctp-macchiato-green-rgb: 166 218 149;
    --ctp-macchiato-green-hsl: 105.217 48.252% 71.961%;
    --ctp-macchiato-green-oklch: 0.8350 0.1079 138.1503;
    --ctp-macchiato-teal: #8bd5ca;
    --ctp-macchiato-teal-rgb: 139 213 202;
    --ctp-macchiato-teal-hsl: 171.081 46.835% 69.020%;
    --ctp-macchiato-teal-oklch: 0.8214 0.0755 184.1000;
    --ctp-macchiato-sky: #91d7e3;
    --ctp-macchiato-sky-rgb: 145 215 227;
    --ctp-macchiato-sky-hsl: 188.780 59.420% 72.941%;
    --ctp-macchiato-sky-oklch: 0.8369 0.0719 209.3658;
    --ctp-macchiato-sapphire: #7dc4e4;
    --ctp-macchiato-sapphire-rgb: 125 196 228;
    --ctp-macchiato-sapphire-hsl: 198.641 65.605% 69.216%;
    --ctp-macchiato-sapphire-oklch: 0.7851 0.0845 228.3780;
    --ctp-macchiato-blue: #8aadf4;
    --ctp-macchiato-blue-rgb: 138 173 244;
    --ctp-macchiato-blue-hsl: 220.189 82.813% 74.902%;
    --ctp-macchiato-blue-oklch: 0.7497 0.1101 263.8103;
    --ctp-macchiato-lavender: #b7bdf8;
    --ctp-macchiato-lavender-rgb: 183 189 248;
    --ctp-macchiato-lavender-hsl: 234.462 82.278% 84.510%;
    --ctp-macchiato-lavender-oklch: 0.8144 0.0834 279.8537;
    --ctp-macchiato-text: #cad3f5;
    --ctp-macchiato-text-rgb: 202 211 245;
    --ctp-macchiato-text-hsl: 227.442 68.254% 87.647%;
    --ctp-macchiato-text-oklch: 0.8708 0.0481 273.6651;
    --ctp-macchiato-subtext1: #b8c0e0;
    --ctp-macchiato-subtext1-rgb: 184 192 224;
    --ctp-macchiato-subtext1-hsl: 228.000 39.216% 80.000%;
    --ctp-macchiato-subtext1-oklch: 0.8120 0.0459 274.2672;
    --ctp-macchiato-subtext0: #a5adcb;
    --ctp-macchiato-subtext0-rgb: 165 173 203;
    --ctp-macchiato-subtext0-hsl: 227.368 26.761% 72.157%;
    --ctp-macchiato-subtext0-oklch: 0.7513 0.0441 273.5327;
    --ctp-macchiato-overlay2: #939ab7;
    --ctp-macchiato-overlay2-rgb: 147 154 183;
    --ctp-macchiato-overlay2-hsl: 228.333 20.000% 64.706%;
    --ctp-macchiato-overlay2-oklch: 0.6905 0.0433 274.5388;
    --ctp-macchiato-overlay1: #8087a2;
    --ctp-macchiato-overlay1-rgb: 128 135 162;
    --ctp-macchiato-overlay1-hsl: 227.647 15.455% 56.863%;
    --ctp-macchiato-overlay1-oklch: 0.6272 0.0415 273.7328;
    --ctp-macchiato-overlay0: #6e738d;
    --ctp-macchiato-overlay0-rgb: 110 115 141;
    --ctp-macchiato-overlay0-hsl: 230.323 12.351% 49.216%;
    --ctp-macchiato-overlay0-oklch: 0.5608 0.0407 276.4748;
    --ctp-macchiato-surface2: #5b6078;
    --ctp-macchiato-surface2-rgb: 91 96 120;
    --ctp-macchiato-surface2-hsl: 229.655 13.744% 41.373%;
    --ctp-macchiato-surface2-oklch: 0.4939 0.0389 275.6833;
    --ctp-macchiato-surface1: #494d64;
    --ctp-macchiato-surface1-rgb: 73 77 100;
    --ctp-macchiato-surface1-hsl: 231.111 15.607% 33.922%;
    --ctp-macchiato-surface1-oklch: 0.4259 0.0385 276.9477;
    --ctp-macchiato-surface0: #363a4f;
    --ctp-macchiato-surface0-rgb: 54 58 79;
    --ctp-macchiato-surface0-hsl: 230.400 18.797% 26.078%;
    --ctp-macchiato-surface0-oklch: 0.3538 0.0369 275.9851;
    --ctp-macchiato-base: #24273a;
    --ctp-macchiato-base-rgb: 36 39 58;
    --ctp-macchiato-base-hsl: 231.818 23.404% 18.431%;
    --ctp-macchiato-base-oklch: 0.2788 0.0353 276.9368;
    --ctp-macchiato-mantle: #1e2030;
    --ctp-macchiato-mantle-rgb: 30 32 48;
    --ctp-macchiato-mantle-hsl: 233.333 23.077% 15.294%;
    --ctp-macchiato-mantle-oklch: 0.2493 0.0305 278.4350;
    --ctp-macchiato-crust: #181926;
    --ctp-macchiato-crust-rgb: 24 25 38;
    --ctp-macchiato-crust-hsl: 235.714 22.581% 12.157%;
    --ctp-macchiato-crust-oklch: 0.2188 0.0255 280.6572;
}

/* Base */
body {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ctp-macchiato-text);
    background-color: var(--ctp-macchiato-base);
}

/* Layout */
#content {
    max-width: calc(20ch + 2rem + 72ch + 2rem + 20ch);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 20ch 1fr 20ch;
    column-gap: 2rem;
}

#preamble {
    max-width: calc(20ch + 2rem + 72ch + 2rem + 20ch);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 20ch 1fr 20ch;
    column-gap: 2rem;
}

#preamble nav {
    grid-column: 2;
}

#postamble {
    max-width: 72ch;
    margin-inline: auto;
}

#content>h1 {
    grid-column: 2;
}

aside {
    grid-column: 1;
    grid-row: 2;
    position: sticky;
    top: 1rem;
    align-self: start;
}

article {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
}

#table-of-contents {
    grid-column: 3;
    grid-row: 2;
    position: sticky;
    top: 1rem;
    align-self: start;
}

aside h2,
#table-of-contents h2 {
    font-size: 1rem;
}

/* Header */
h1 {
    font-size: 1.953rem;
}

h2 {
    font-size: 1.563rem;
}

h3 {
    font-size: 1.25rem;
}

h4 {
    font-size: 1rem;
}

h1,
h2,
h3,
h4 {
    margin-block: 0.5em;
    color: var(--ctp-macchiato-text);
}

/* Paragraph */
p {
    margin-block-end: 1em;
}

/* Bold */
strong,
b {
    color: var(--ctp-macchiato-teal);
}

/* Links */
a {
    color: var(--ctp-macchiato-teal);
    text-decoration-color: var(--ctp-macchiato-overlay1);
}

a:hover {
    color: var(--ctp-macchiato-sky);
}

/* Blockquote */
blockquote {
    border-inline-start: 3px solid var(--ctp-macchiato-teal);
    background-color: var(--ctp-macchiato-surface0);
    padding: 0.75em 1em;
    margin-block-end: 1em;
    color: var(--ctp-macchiato-subtext1);
}

blockquote p:last-child {
    margin-block-end: 0;
}

/* Code */
code {
    padding: 0.15em 0.35em;
    border-radius: 3px;
}

pre {
    padding: 1em;
    border-radius: 6px;
    overflow-x: auto;
    margin-block: 1em;
}

code,
pre {
    font-family: var(--font-mono);
    font-size: 0.85em;
    background-color: var(--ctp-macchiato-surface0);
}

/* Table */
.table-container {
    overflow-x: auto;
    margin-block: 1em;
    padding-bottom: 1em;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th,
td {
    padding: 0.5em 0.75em;
    border-bottom: 1px solid var(--ctp-macchiato-surface2);
    text-align: left;
}

th {
    color: var(--ctp-macchiato-subtext1);
    border-bottom-color: var(--ctp-macchiato-overlay1);
}

tr:hover td {
    background-color: var(--ctp-macchiato-surface0);
}

/* List */
ul,
ol {
    padding-inline-start: 1.5em;
    margin-block: 1em;
}

li {
    margin-block-end: 0.25em;
    overflow-wrap: break-word;
}

li:last-child {
    margin-block-end: 0;
}

ul ul,
ol ol,
ul ol,
ol ul {
    margin-block: 0.25em;
}

/* Figure */
.figure {
    margin-block: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.figure p {
    margin-block-end: 0.5em;
}

.figure p:last-child {
    margin-block-end: 0;
}

.figure-number {
    color: var(--ctp-macchiato-subtext1);
    font-size: 0.85em;
}

/* Postamble */
#postamble {
    text-align: center;
    color: var(--ctp-macchiato-subtext1);
    font-size: 0.85em;
}

#postamble p {
    margin-block-end: 0.25em;
}

/* Preamble */
#preamble nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em 1.5em;
    list-style: none;
    padding-inline-start: 0;
    margin-block-start: 1.5em;
    margin-block-end: 0;
}

/* Article Meta */
aside dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25em 0.5em;
}

/* Video */
video {
    height: auto;
}

/* Homepage Post List */
.post-summary {
    margin-block-end: 2em;
}

.post-summary h2 {
    margin-block-start: 0;
}

.post-summary h2 a,
.post-meta a {
    text-decoration: none;
}

.post-meta {
    font-size: 0.875em;
    color: var(--ctp-macchiato-subtext0);
    margin-block-end: 0.25em;
}

.read-more {
    font-size: 0.875em;
}

/* Tags */
.tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    padding: 0;
    margin: 0;
}

/* Responsive */
@media (max-width: calc(20ch + 2rem + 72ch + 2rem + 20ch)) {
    #content,
    #preamble {
        grid-template-columns: 1fr;
        padding-inline: 1rem;
    }

    #content > h1,
    #preamble nav,
    article {
        grid-column: 1;
    }

    aside,
    #table-of-contents {
        display: none;
    }
}