@charset "UTF-8";
/*!
 * Duckquill v6.3.0 (https://duckquill.daudix.one)
 * Copyright 2024-2025 David "Daudix" Lapshin
 * Licensed under MIT (https://codeberg.org/daudix/duckquill/src/branch/main/LICENSE)
 */
:where(html) {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  line-height: 1.15;
}

:where(h1) {
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  font-size: 2em;
}

:where(dl, ol, ul) :where(dl, ol, ul) {
  margin-block-start: 0;
  margin-block-end: 0;
}

:where(hr) {
  box-sizing: content-box;
  height: 0;
  color: inherit;
}

:where(abbr[title]) {
  text-decoration: underline;
  text-decoration: underline dotted;
}

:where(b, strong) {
  font-weight: bolder;
}

:where(code, kbd, pre, samp) {
  font-size: 1em;
  font-family: monospace, monospace;
}

:where(small) {
  font-size: 80%;
}

:where(table) {
  border-color: currentColor;
  text-indent: 0;
}

:where(button, input, select) {
  margin: 0;
}

:where(button) {
  text-transform: none;
}

:where(button,
input:is([type=button i], [type=reset i], [type=submit i])) {
  -webkit-appearance: button;
}

:where(progress) {
  vertical-align: baseline;
}

:where(select) {
  text-transform: none;
}

:where(textarea) {
  margin: 0;
}

:where(input[type=search i]) {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

::-webkit-input-placeholder {
  opacity: 0.54;
  color: inherit;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

:where(button,
input:is([type=button i],
[type=color i],
[type=reset i],
[type=submit i]))::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

:where(button,
input:is([type=button i],
[type=color i],
[type=reset i],
[type=submit i]))::-moz-focusring {
  outline: 1px dotted ButtonText;
}

:where(:-moz-ui-invalid) {
  box-shadow: none;
}

:where(dialog) {
  position: absolute;
  right: 0;
  left: 0;
  margin: auto;
  border: solid;
  background-color: white;
  padding: 1em;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  color: black;
}

:where(dialog:not([open])) {
  display: none;
}

:where(summary) {
  display: list-item;
}

:root {
  --bg-color: color-mix(in srgb, var(--accent-color) 20%, white);
  --bg-overlay: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
  --fg-color: rgb(0 0 0 / 0.8);
  --fg-contrast: rgb(255 255 255);
  --fg-muted-1: rgb(0 0 0 / 0.05);
  --fg-muted-2: rgb(0 0 0 / 0.1);
  --fg-muted-3: rgb(0 0 0 / 0.2);
  --fg-muted-4: rgb(0 0 0 / 0.5);
  --fg-muted-5: rgb(0 0 0 / 0.6);
  --glass-bg: rgb(242 242 242 / 0.7);
  --accent-color-alpha: rgb(from var(--accent-color) r g b / var(--color-opacity));
  --blue-bg: rgb(from var(--blue-fg) r g b / var(--color-opacity));
  --blue-fg: rgb(53 132 228);
  --brown-bg: rgb(from var(--brown-fg) r g b / var(--color-opacity));
  --brown-fg: rgb(99 69 44);
  --green-bg: rgb(from var(--green-fg) r g b / var(--color-opacity));
  --green-fg: rgb(38 162 105);
  --purple-bg: rgb(from var(--purple-fg) r g b / var(--color-opacity));
  --purple-fg: rgb(145 65 172);
  --red-bg: rgb(from var(--red-fg) r g b / var(--color-opacity));
  --red-fg: rgb(224 27 36);
  --yellow-bg: rgb(from var(--yellow-fg) r g b / var(--color-opacity));
  --yellow-fg: rgb(156 110 3);
  --l: clamp(0, (l / 0.623 - 1) * -infinity, 1);
  --a: calc(var(--l) + (var(--dim-opacity) * (1 - var(--l))));
  --contrast-color: oklch(from var(--accent-color) var(--l) 0 h / var(--a));
  --container-width: 45rem;
  --rounded-corner: 0.75rem;
  --rounded-corner-small: 0.5rem;
  --blur: saturate(1.8) blur(0.75rem);
  --font-size-xx-small: 0.625rem;
  --font-size-x-small: 0.75rem;
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.25rem;
  --font-size-x-large: 1.5rem;
  --font-size-xx-large: 2rem;
  --font-size-xxx-large: 3rem;
  --font-size-xx-small-em: 0.625em;
  --font-size-x-small-em: 0.75em;
  --font-size-small-em: 0.875em;
  --font-size-medium-em: 1em;
  --font-size-large-em: 1.25em;
  --font-size-x-large-em: 1.5em;
  --font-size-xx-large-em: 2em;
  --font-size-xxx-large-em: 3em;
  --font-system-ui: system-ui, sans-serif;
  --font-transitional: Charter, "Bitstream Charter", "Sitka Text", Cambria,
  	serif;
  --font-old-style: "Iowan Old Style", "Palatino Linotype",
  	"URW Palladio L", P052, serif;
  --font-humanist: Seravek, "Gill Sans Nova", Ubuntu, Calibri,
  	"DejaVu Sans", source-sans-pro, sans-serif;
  --font-geometric-humanist: Avenir, Montserrat, Corbel, "URW Gothic",
  	source-sans-pro, sans-serif;
  --font-classical-humanist: Optima, Candara, "Noto Sans", source-sans-pro,
  	sans-serif;
  --font-neo-grotesque: Inter, Roboto, "Helvetica Neue", "Arial Nova",
  	"Nimbus Sans", Arial, sans-serif;
  --font-monospace-slab-serif: "Nimbus Mono PS", "Courier New", monospace;
  --font-monospace-code: ui-monospace, "Cascadia Code", "Source Code Pro",
  	Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --font-industrial: Bahnschrift, "DIN Alternate",
  	"Franklin Gothic Medium", "Nimbus Sans Narrow", sans-serif-condensed,
  	sans-serif;
  --font-rounded-sans: ui-rounded, "Hiragino Maru Gothic ProN", Quicksand,
  	Comfortaa, Manjari, "Arial Rounded MT", "Arial Rounded MT Bold",
  	Calibri, source-sans-pro, sans-serif;
  --font-slab-serif: Rockwell, "Rockwell Nova", "Roboto Slab",
  	"DejaVu Serif", "Sitka Small", serif;
  --font-antique: Superclarendon, "Bookman Old Style", "URW Bookman",
  	"URW Bookman L", "Georgia Pro", Georgia, serif;
  --font-didone: Didot, "Bodoni MT", "Noto Serif Display",
  	"URW Palladio L", P052, Sylfaen, serif;
  --font-handwritten: "Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic,
  	casual, cursive;
  --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
  	"Noto Color Emoji";
  --color-opacity: 0.1;
  --dim-opacity: 0.8;
  --disabled-opacity: 0.6;
  --edge-highlight: inset 0 0.0625rem 0 rgb(255 255 255 / 0.1);
  --shadow: 0 0 0 0.0625rem rgb(0 0 0 / 0.03),
  	0 0.0625rem 0.1875rem 0.0625rem rgb(0 0 0 / 0.07),
  	0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.03);
  --shadow-raised: 0 0 0 0.0625rem rgb(0 0 0 / 0.06),
  	0 0.125rem 0.375rem 0.125rem rgb(0 0 0 / 0.14),
  	0 0.25rem 0.75rem 0.25rem rgb(0 0 0 / 0.06);
  --shadow-glass: 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
  --shadow-glow: 0 0 0 0.0625rem var(--accent-color-alpha),
  	0 0.125rem 0.375rem 0.125rem var(--accent-color-alpha),
  	0 0.25rem 1.5rem 0.25rem var(--accent-color-alpha);
  --text-shadow-glow: var(--accent-color-alpha) 0 0 0.25rem,
  	var(--accent-color) 0 0 0.75rem;
  --hover: scale(1.1);
  --active: scale(0.9);
  --transition: 0.2s;
  --transition-longer: 0.4s;
  --transition-long: 0.8s;
}

[data-theme=dark] {
  --bg-color: color-mix(in srgb, var(--accent-color) 10%, black);
  --bg-overlay: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
  --fg-color: rgb(255 255 255);
  --fg-contrast: rgb(0 0 0 / 0.8);
  --fg-muted-1: rgb(255 255 255 / 0.05);
  --fg-muted-2: rgb(255 255 255 / 0.1);
  --fg-muted-3: rgb(255 255 255 / 0.2);
  --fg-muted-4: rgb(255 255 255 / 0.5);
  --fg-muted-5: rgb(255 255 255 / 0.6);
  --glass-bg: rgb(25 25 25 / 0.7);
  --blue-fg: rgb(153 193 241);
  --brown-fg: rgb(205 171 143);
  --green-fg: rgb(143 240 164);
  --purple-fg: rgb(220 138 221);
  --red-fg: rgb(246 97 81);
  --yellow-fg: rgb(248 228 92);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --bg-color: color-mix(in srgb, var(--accent-color) 10%, black);
    --bg-overlay: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
    --fg-color: rgb(255 255 255);
    --fg-contrast: rgb(0 0 0 / 0.8);
    --fg-muted-1: rgb(255 255 255 / 0.05);
    --fg-muted-2: rgb(255 255 255 / 0.1);
    --fg-muted-3: rgb(255 255 255 / 0.2);
    --fg-muted-4: rgb(255 255 255 / 0.5);
    --fg-muted-5: rgb(255 255 255 / 0.6);
    --glass-bg: rgb(25 25 25 / 0.7);
    --blue-fg: rgb(153 193 241);
    --brown-fg: rgb(205 171 143);
    --green-fg: rgb(143 240 164);
    --purple-fg: rgb(220 138 221);
    --red-fg: rgb(246 97 81);
    --yellow-fg: rgb(248 228 92);
    color-scheme: dark;
  }
}
[class^=markdown-alert] {
  display: flow-root;
  position: relative;
}

.markdown-alert-note {
  --accent-color: var(--blue-fg);
}

.markdown-alert-tip {
  --accent-color: var(--green-fg);
}

.markdown-alert-important {
  --accent-color: var(--purple-fg);
}

.markdown-alert-warning {
  --accent-color: var(--yellow-fg);
}

.markdown-alert-caution {
  --accent-color: var(--red-fg);
}

[class^=markdown-alert]::before {
  margin-inline-start: 1.5rem;
  color: var(--accent-color);
  font-weight: bold;
}
[class^=markdown-alert]::after {
  position: absolute;
  mask-image: var(--icon);
  mask-size: cover;
  -webkit-mask-size: cover;
  margin-inline-end: 0.25rem;
  inset-block-start: 0.25rem;
  inset-inline-start: 0.75rem;
  background-color: currentColor;
  width: 1rem;
  height: 1rem;
  color: var(--accent-color);
  line-height: 0;
  -webkit-mask-image: var(--icon);
  content: "";
}
[class^=markdown-alert] > :first-child {
  margin-block-start: 0.25rem;
}
[class^=markdown-alert] > :last-child {
  margin-block-end: 0;
}

.markdown-alert-note::before {
  content: var(--alert-note-text);
}
.markdown-alert-note::after {
  --icon: var(--icon-info);
}

.markdown-alert-tip::before {
  content: var(--alert-tip-text);
}
.markdown-alert-tip::after {
  --icon: var(--icon-lightbulb);
}

.markdown-alert-important::before {
  content: var(--alert-important-text);
}
.markdown-alert-important::after {
  --icon: var(--icon-important);
}

.markdown-alert-warning::before {
  content: var(--alert-warning-text);
}
.markdown-alert-warning::after {
  --icon: var(--icon-warning);
}

.markdown-alert-caution::before {
  content: var(--alert-caution-text);
}
.markdown-alert-caution::after {
  --icon: var(--icon-caution);
}

#article-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block-start: 2rem;
}
#article-list article {
  --bg-overlay: var(--accent-color-alpha);
  position: relative;
  transition: var(--transition);
  box-shadow: var(--edge-highlight), var(--shadow-glass);
  border-radius: var(--rounded-corner);
  border-start-end-radius: 2.125rem;
  border-end-end-radius: 1.8125rem;
  background-image: linear-gradient(var(--bg-overlay), var(--bg-overlay)), linear-gradient(var(--glass-bg), var(--glass-bg)), var(--blurnail);
  background-position: center;
  background-size: cover;
  background-color: var(--bg-overlay);
  padding: 1rem;
  overflow: hidden;
}
#article-list article:hover h3::after {
  transform: none;
  opacity: 1;
}
:root[dir*=rtl] #article-list article:hover h3::after {
  transform: scaleX(-1);
}
#article-list article:active:not(:has(.tag:active)) {
  transform: var(--active);
}
#article-list article:has(> a:focus-visible) {
  animation: focus-in var(--transition);
  outline: 0.125rem solid var(--accent-color);
  outline-offset: 0.125rem;
}
@supports not selector(:focus-visible) {
  #article-list article:has(> a:focus) {
    animation: focus-in var(--transition);
    outline: 0.125rem solid var(--accent-color);
    outline-offset: 0.125rem;
  }
}
#article-list article > a {
  position: absolute;
  inset: 0;
  border-radius: var(--rounded-corner);
  border-start-end-radius: 2.125rem;
  border-end-end-radius: 1.8125rem;
}
#article-list article h3 {
  margin: 0;
  color: var(--accent-color);
  font-weight: bold;
  line-height: 1;
  font-family: var(--font-system-ui);
}
#article-list article h3 a {
  color: inherit;
  text-decoration: none;
}
#article-list article h3::after {
  -webkit-mask-image: var(--icon-right);
  display: inline-block;
  position: relative;
  transform: translateX(-0.25rem);
  opacity: 0;
  mask-image: var(--icon-right);
  transition: var(--transition);
  margin-inline-start: 0.25rem;
  background-color: currentColor;
  width: 1rem;
  height: 1rem;
  pointer-events: none;
  content: "";
}
:root[dir*=rtl] #article-list article h3::after {
  transform: scaleX(-1) translateX(-0.25rem);
}
#article-list article .tags {
  position: relative;
  justify-content: flex-end;
  z-index: 1;
  margin: 0;
}
#article-list article .tags a {
  background-color: var(--accent-color-alpha);
  color: var(--accent-color);
}
#article-list article .tags a:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}
#article-list article.draft::before, #article-list article.archive::before, #article-list article.featured::before, #article-list article.hot::before, #article-list article.poor::before {
  position: absolute;
  transform: translateY(-50%);
  opacity: var(--disabled-opacity);
  mask-size: cover;
  -webkit-mask-size: cover;
  transition: var(--transition-longer);
  inset-block-start: 50%;
  inset-inline-end: -3rem;
  width: 12rem;
  height: 12rem;
  content: "";
}
#article-list article.draft:hover::before, #article-list article.archive:hover::before, #article-list article.featured:hover::before, #article-list article.hot:hover::before, #article-list article.poor:hover::before {
  transform: translateY(-50%) rotate(-10deg) scale(1.5);
}
:root[dir*=rtl] #article-list article.draft:hover::before, :root[dir*=rtl] #article-list article.archive:hover::before, :root[dir*=rtl] #article-list article.featured:hover::before, :root[dir*=rtl] #article-list article.hot:hover::before, :root[dir*=rtl] #article-list article.poor:hover::before {
  transform: translateY(-50%) rotate(10deg) scale(1.5);
}
#article-list article.draft {
  --bg-overlay: var(--fg-muted-1);
}
#article-list article.draft::before {
  -webkit-mask-image: var(--icon-pencil);
  mask-image: var(--icon-pencil);
  background-color: var(--fg-muted-1);
}
#article-list article.draft h3 {
  color: var(--fg-muted-4);
}
#article-list article.draft .badge {
  background-color: var(--fg-muted-1);
  color: var(--fg-muted-5);
}
#article-list article.draft .badge .icon {
  -webkit-mask-image: var(--icon-pencil);
  mask-image: var(--icon-pencil);
}
#article-list article.draft .tags a {
  background-color: var(--fg-muted-1);
  color: var(--fg-muted-5);
}
#article-list article.draft .tags a:hover {
  background-color: var(--fg-muted-5);
  color: var(--fg-contrast);
}
#article-list article.archive {
  --bg-overlay: var(--purple-bg);
}
#article-list article.archive::before {
  -webkit-mask-image: var(--icon-archive);
  mask-image: var(--icon-archive);
  background-color: var(--purple-bg);
}
#article-list article.archive h3 {
  color: var(--purple-fg);
}
#article-list article.archive .badge {
  background-color: var(--purple-bg);
  color: var(--purple-fg);
}
#article-list article.archive .badge .icon {
  -webkit-mask-image: var(--icon-archive);
  mask-image: var(--icon-archive);
}
#article-list article.archive .tags a {
  background-color: var(--purple-bg);
  color: var(--purple-fg);
}
#article-list article.archive .tags a:hover {
  background-color: var(--purple-fg);
  color: var(--fg-contrast);
}
#article-list article.featured {
  --bg-overlay: var(--yellow-bg);
}
#article-list article.featured::before {
  -webkit-mask-image: var(--icon-star);
  mask-image: var(--icon-star);
  background-color: var(--yellow-bg);
}
#article-list article.featured:hover::before {
  transform: translateY(-50%) rotate(62deg) scale(1.5);
}
:root[dir*=rtl] #article-list article.featured:hover::before {
  transform: translateY(-50%) rotate(-62deg) scale(1.5);
}
#article-list article.featured h3 {
  color: var(--yellow-fg);
}
#article-list article.featured .badge {
  background-color: var(--yellow-bg);
  color: var(--yellow-fg);
}
#article-list article.featured .badge .icon {
  -webkit-mask-image: var(--icon-star);
  mask-image: var(--icon-star);
}
#article-list article.featured .tags a {
  background-color: var(--yellow-bg);
  color: var(--yellow-fg);
}
#article-list article.featured .tags a:hover {
  background-color: var(--yellow-fg);
  color: var(--fg-contrast);
}
#article-list article.hot {
  --bg-overlay: var(--red-bg);
}
#article-list article.hot::before {
  -webkit-mask-image: var(--icon-fire);
  mask-image: var(--icon-fire);
  background-color: var(--red-bg);
}
#article-list article.hot h3 {
  color: var(--red-fg);
}
#article-list article.hot .badge {
  background-color: var(--red-bg);
  color: var(--red-fg);
}
#article-list article.hot .badge .icon {
  -webkit-mask-image: var(--icon-fire);
  mask-image: var(--icon-fire);
}
#article-list article.hot .tags a {
  background-color: var(--red-bg);
  color: var(--red-fg);
}
#article-list article.hot .tags a:hover {
  background-color: var(--red-fg);
  color: var(--fg-contrast);
}
#article-list article.poor {
  --bg-overlay: var(--brown-bg);
}
#article-list article.poor::before {
  -webkit-mask-image: var(--icon-poop);
  mask-image: var(--icon-poop);
  background-color: var(--brown-bg);
}
#article-list article.poor h3 {
  color: var(--brown-fg);
}
#article-list article.poor .badge {
  background-color: var(--brown-bg);
  color: var(--brown-fg);
}
#article-list article.poor .badge .icon {
  -webkit-mask-image: var(--icon-poop);
  mask-image: var(--icon-poop);
}
#article-list article.poor .tags a {
  background-color: var(--brown-bg);
  color: var(--brown-fg);
}
#article-list article.poor .tags a:hover {
  background-color: var(--brown-fg);
  color: var(--fg-contrast);
}
#article-list article .badge {
  float: inline-end;
  box-shadow: var(--edge-highlight);
  border-radius: 999px;
  padding: 0.375rem 0.75rem;
  height: fit-content;
  font-weight: bold;
  white-space: nowrap;
}
#article-list article .badge .icon {
  vertical-align: -0.125em;
  margin-inline-end: 0.25rem;
}
#article-list article .details {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.25rem;
  margin-block-start: 1rem;
  border-block-start: max(1px, 0.0625rem) solid var(--fg-muted-2);
  padding-block-start: 0.5rem;
}

#paginator {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  margin-block-start: 4rem;
}
#paginator #paginator-first,
#paginator #paginator-previous,
#paginator #paginator-next,
#paginator #paginator-last {
  display: inline-block;
  transition: var(--transition);
  box-shadow: var(--edge-highlight);
  border-radius: 1rem;
  background-color: var(--fg-muted-1);
  padding: 0.5rem;
  color: var(--fg-muted-4);
  line-height: 0;
}
#paginator #paginator-first .icon,
#paginator #paginator-previous .icon,
#paginator #paginator-next .icon,
#paginator #paginator-last .icon {
  transition: var(--transition);
}
:root[dir*=rtl] #paginator #paginator-first .icon,
:root[dir*=rtl] #paginator #paginator-previous .icon,
:root[dir*=rtl] #paginator #paginator-next .icon,
:root[dir*=rtl] #paginator #paginator-last .icon {
  transform: scaleX(-1);
}
#paginator a#paginator-first:hover,
#paginator a#paginator-previous:hover,
#paginator a#paginator-next:hover,
#paginator a#paginator-last:hover {
  background-color: var(--fg-muted-2);
  color: var(--fg-muted-5);
}
#paginator a#paginator-first:active,
#paginator a#paginator-previous:active,
#paginator a#paginator-next:active,
#paginator a#paginator-last:active {
  transform: var(--active);
  border-radius: 1rem;
}
#paginator span#paginator-first,
#paginator span#paginator-previous,
#paginator span#paginator-next,
#paginator span#paginator-last {
  opacity: var(--disabled-opacity);
  cursor: not-allowed;
}
#paginator #paginator-previous {
  border-start-end-radius: var(--rounded-corner-small);
  border-end-end-radius: var(--rounded-corner-small);
}
#paginator #paginator-next {
  border-start-start-radius: var(--rounded-corner-small);
  border-end-start-radius: var(--rounded-corner-small);
}
#paginator #paginator-first .icon {
  -webkit-mask-image: var(--icon-first);
  mask-image: var(--icon-first);
}
#paginator #paginator-previous .icon {
  -webkit-mask-image: var(--icon-previous);
  mask-image: var(--icon-previous);
}
#paginator #paginator-next .icon {
  -webkit-mask-image: var(--icon-next);
  mask-image: var(--icon-next);
}
#paginator #paginator-last .icon {
  -webkit-mask-image: var(--icon-last);
  mask-image: var(--icon-last);
}
#paginator #paginator-counter {
  display: inline-block;
  transition: var(--transition);
  box-shadow: var(--edge-highlight);
  border-radius: var(--rounded-corner-small);
  background-color: var(--accent-color-alpha);
  padding: 0.5rem 0.625rem;
  color: var(--accent-color);
  font-weight: bold;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
#paginator:has(a#paginator-previous:active) #paginator-counter {
  border-start-start-radius: 1rem;
  border-end-start-radius: 1rem;
}
#paginator:has(a#paginator-next:active) #paginator-counter {
  border-start-end-radius: 1rem;
  border-end-end-radius: 1rem;
}

#banner-container {
  --mask: linear-gradient(black, transparent);
  -webkit-user-select: none;
  -webkit-mask-image: var(--mask);
  position: absolute;
  z-index: -1;
  mask-image: var(--mask);
  inset-block-start: 0;
  inset-inline-start: 0;
  aspect-ratio: 2/1;
  width: 100%;
  user-select: none;
}
#banner-container #banner {
  position: fixed;
  transition: none;
  margin: 0;
  inset-block-start: 0;
  inset-inline-start: 0;
}
#banner-container + #heading {
  margin-block-start: calc(50vw - 7rem);
}
@media only screen and (max-width: 480px) {
  body:has(#banner-container) #site-nav:not(#handle + #site-nav) {
    margin-block-start: calc(50vw + 1rem);
  }
}

#heading {
  margin: 2rem 0 1rem;
  text-align: center;
}
#heading h1 {
  -webkit-background-clip: text;
  margin: 0;
  background-image: linear-gradient(to right, var(--fg-muted-4), var(--fg-color), var(--fg-muted-4));
  background-clip: text;
  color: transparent;
}
#heading h1 + p {
  display: inline;
}
#heading .tags {
  display: inline-flex;
  justify-content: center;
  margin-block-start: 1rem;
}

#buttons-container {
  display: flex;
  position: fixed;
  flex-direction: column;
  gap: 0.5rem;
  inset-block-end: 1rem;
  inset-inline-end: 1rem;
}
@media only screen and (max-width: 720px) {
  #buttons-container {
    position: static;
    flex-direction: row-reverse;
    margin-block-start: 2rem;
  }
}
#buttons-container summary,
#buttons-container #go-to-top,
#buttons-container #share,
#buttons-container #issue {
  display: inline-block;
  transition: var(--transition);
  box-shadow: var(--edge-highlight);
  border-radius: 999px;
  background-color: var(--fg-muted-1);
  padding: 0.5rem;
  color: var(--fg-muted-4);
  line-height: 0;
}
#buttons-container summary:hover,
#buttons-container #go-to-top:hover,
#buttons-container #share:hover,
#buttons-container #issue:hover {
  background-color: var(--fg-muted-2);
  color: var(--fg-muted-5);
}
#buttons-container summary:active,
#buttons-container #go-to-top:active,
#buttons-container #share:active,
#buttons-container #issue:active {
  transform: var(--active);
}
#buttons-container summary .icon,
#buttons-container #go-to-top .icon,
#buttons-container #share .icon,
#buttons-container #issue .icon {
  transition: var(--transition);
}
#buttons-container details {
  position: relative;
  box-shadow: none;
  border-radius: 0;
  background-color: transparent;
  padding: 0;
}
#buttons-container details[open] summary ~ * {
  transform-origin: bottom right;
  animation: button-dropdown-open var(--transition);
}
:root[dir*=rtl] #buttons-container details[open] summary ~ * {
  transform-origin: bottom left;
  animation: button-dropdown-open-rtl var(--transition);
}
@keyframes button-dropdown-open {
  from {
    transform: scale(0.5) translate(1rem, 1rem);
    opacity: 0;
  }
}
@keyframes button-dropdown-open-rtl {
  from {
    transform: scale(0.5) translate(-1rem, 1rem);
    opacity: 0;
  }
}
#buttons-container details summary::before {
  display: none;
}
#buttons-container summary + div {
  -webkit-backdrop-filter: var(--blur);
  display: flex;
  position: absolute;
  flex-direction: column;
  z-index: 1;
  backdrop-filter: var(--blur);
  inset-block-end: 0;
  inset-inline-end: 3rem;
  box-shadow: var(--edge-highlight), var(--shadow-glass);
  border-radius: var(--rounded-corner);
  background-color: var(--glass-bg);
  padding: 1rem;
  width: min(var(--container-width) / 3, 90vw - 3rem);
  max-height: 50vh;
}
@media only screen and (max-width: 720px) {
  #buttons-container summary + div {
    inset-inline-end: 2.5rem;
    width: min(var(--container-width) / 3, 90vw - 2.5rem);
  }
}
#buttons-container summary + div strong.title {
  color: var(--fg-muted-4);
}
#buttons-container summary + div div {
  --mask: linear-gradient(
  	to bottom,
  	transparent,
  	black 1rem,
  	black calc(100% - 1rem),
  	transparent
  );
  -webkit-mask-image: var(--mask);
  flex: 1;
  mask-image: var(--mask);
  margin: 0 -1rem -1rem;
  padding: 1rem;
  padding-block-start: 0;
  overflow: auto;
}
#buttons-container summary + div ol,
#buttons-container summary + div ul {
  margin: 0;
  padding-inline-start: 0.75rem;
  font-size: var(--font-size-small);
}
#buttons-container summary + div ol:first-child,
#buttons-container summary + div ul:first-child {
  margin-block-start: 0.75rem;
}
#buttons-container summary + div ol li::marker,
#buttons-container summary + div ul li::marker {
  color: var(--fg-muted-5);
}
#buttons-container summary + div ol a,
#buttons-container summary + div ul a {
  color: var(--fg-muted-5);
}
#buttons-container #toc .icon {
  -webkit-mask-image: var(--icon-toc);
  mask-image: var(--icon-toc);
}
:root[dir*=rtl] #buttons-container #toc .icon {
  transform: scaleX(-1);
}
#buttons-container #backlinks .icon {
  -webkit-mask-image: var(--icon-backlink);
  mask-image: var(--icon-backlink);
}
:root[dir*=rtl] #buttons-container #backlinks .icon {
  transform: scaleX(-1);
}
#buttons-container #backlinks summary + div {
  width: min(var(--container-width) / 3, 90vw - 5rem);
}
@media only screen and (max-width: 720px) {
  #buttons-container #go-to-top {
    display: none;
  }
}
#buttons-container #go-to-top .icon {
  -webkit-mask-image: var(--icon-top);
  mask-image: var(--icon-top);
}
#buttons-container #share .icon {
  -webkit-mask-image: var(--icon-share);
  mask-image: var(--icon-share);
}
#buttons-container #issue .icon {
  -webkit-mask-image: var(--icon-bug);
  mask-image: var(--icon-bug);
}

.buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-block-start: 4rem;
}
.buttons.centered {
  justify-content: space-around;
}
.buttons a {
  text-decoration: none;
}
.buttons button {
  appearance: none;
  cursor: pointer;
  border: none;
  font-family: inherit;
}
.buttons button:disabled {
  cursor: not-allowed;
}
.buttons button:disabled:hover {
  background-color: var(--fg-muted-1);
  color: var(--fg-muted-5);
}
.buttons button:disabled:active {
  transform: none;
}
.buttons a,
.buttons button {
  transition: var(--transition);
  box-shadow: var(--edge-highlight);
  border-radius: var(--rounded-corner);
  background-color: var(--fg-muted-1);
  padding: 0.75rem 1rem;
  color: var(--fg-muted-5);
  font-weight: bold;
  font-size: var(--font-size-small);
  line-height: 1;
}
.buttons a:hover,
.buttons button:hover {
  background-color: var(--fg-muted-2);
  color: var(--fg-color);
}
.buttons a:active,
.buttons button:active {
  transform: var(--active);
}
.buttons a.colored,
.buttons button.colored {
  box-shadow: none;
  background-color: transparent;
  color: var(--accent-color);
}
.buttons a.colored:hover,
.buttons button.colored:hover {
  box-shadow: var(--edge-highlight);
  background-color: var(--accent-color-alpha);
}
.buttons a.big,
.buttons button.big {
  border-radius: 999px;
  padding: 1rem 1.5rem;
}

pre,
code,
kbd,
samp {
  font-family: var(--font-monospace-code);
}

code:not(pre code) {
  box-shadow: var(--edge-highlight);
  border-radius: var(--rounded-corner-small);
  background-color: var(--fg-muted-1);
  padding: 0.125rem 0.375rem;
  color: var(--red-fg);
  font-size: var(--font-size-small-em);
}

pre {
  margin: 1rem 0 1rem;
  box-shadow: var(--edge-highlight), var(--shadow);
  border-radius: var(--rounded-corner);
  background-color: var(--fg-muted-1);
  padding: 1rem;
  max-width: 100vw;
  overflow: auto;
  line-height: normal;
}
pre table {
  box-shadow: none;
  border-radius: 0;
  background-color: transparent;
  table-layout: auto;
  overflow: hidden;
}
pre table tr:nth-child(even) {
  background-color: transparent;
}
pre table tr th,
pre table tr td {
  padding: 0;
}
pre table tr th {
  background-color: transparent;
  font-weight: normal;
}
pre table td:nth-of-type(1) {
  -webkit-user-select: none;
  user-select: none;
  text-align: center;
}
pre mark {
  display: block;
  box-shadow: none;
  border-radius: 0;
  background-color: var(--fg-muted-1);
  padding: 0;
  color: var(--fg-color);
}
pre[data-linenos] {
  padding: 1rem 0;
}

.giallo-l {
  display: inline-block;
  min-height: 1lh;
  width: 100%;
}

.giallo-ln {
  display: inline-block;
  -webkit-user-select: none;
  user-select: none;
  margin-right: 0.4em;
  padding: 0.4em;
  min-width: 3ch;
  text-align: right;
  opacity: 0.8;
}

#comments #qrcode {
  float: inline-end;
  transform-origin: right;
  box-sizing: content-box;
  margin-inline-start: 1rem;
  margin-block-start: 3rem;
  margin-block-end: 0;
  background-color: white;
  padding: 0.75rem;
  width: 7.8125rem;
  height: 7.8125rem;
}
:root[dir*=rtl] #comments #qrcode {
  transform-origin: left;
}
@media only screen and (max-width: 720px) {
  #comments #qrcode {
    display: none;
  }
}
#comments .buttons {
  justify-content: start;
  gap: 0.25rem;
  margin-block-start: 2rem;
}
#comments .buttons #load-comments:disabled {
  --shimmer: rgb(
  	from var(--accent-color) r g b / calc(var(--color-opacity) * 2)
  );
  animation: loading-shimmer var(--transition-long) ease-in-out alternate infinite;
  transition: none;
  background-image: linear-gradient(to right, var(--fg-muted-1) 50%, var(--shimmer) 75%, var(--fg-muted-1) 100%);
  background-size: 200%;
  background-color: transparent;
}
#comments .buttons #load-comments:disabled:hover {
  background-color: transparent;
}
@keyframes loading-shimmer {
  to {
    background-position-x: -200%;
  }
}
#comments #comments-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-block-start: 2rem;
}
#comments #comments-wrapper #comments-status {
  color: var(--fg-muted-4);
  font-weight: bold;
  font-size: var(--font-size-x-large);
  text-align: center;
}
#comments #comments-wrapper .comment {
  display: grid;
  grid-template-columns: min-content;
  grid-template-areas: "avatar name        " "avatar time        " "avatar post        " "...... media       " "...... card         " "...... interactions";
  column-gap: 1rem;
  justify-items: start;
}
#comments #comments-wrapper .comment.comment-reply {
  position: relative;
  border-radius: 0.25rem;
  border-inline-start: 0.25rem solid var(--fg-muted-2);
  padding-inline-start: 1rem;
}
#comments #comments-wrapper .comment.comment-reply:has(+ .comment-reply) {
  border-end-start-radius: 0;
}
#comments #comments-wrapper .comment.comment-reply + .comment-reply {
  margin-block-start: -2rem;
  border-start-start-radius: 0;
  padding-block-start: 2rem;
}
#comments #comments-wrapper .comment .avatar-link {
  position: relative;
  grid-area: avatar;
  width: 4rem;
  height: 4rem;
}
#comments #comments-wrapper .comment .avatar-link .avatar {
  transition: var(--transition);
  margin: 0;
  background-size: cover;
  width: 100%;
  height: 100%;
}
#comments #comments-wrapper .comment .avatar-link .avatar:hover {
  transform: rotate(10deg) var(--hover);
  border-radius: var(--rounded-corner);
}
#comments #comments-wrapper .comment .avatar-link .avatar:active {
  transform: var(--active);
}
#comments #comments-wrapper .comment .author {
  display: flex;
  grid-area: name;
  align-items: center;
  gap: 0.25rem;
  font-weight: bold;
}
#comments #comments-wrapper .comment .author .instance {
  transition: var(--transition);
  box-shadow: var(--edge-highlight);
  border-radius: 999px;
  background-color: var(--fg-muted-1);
  padding: 0.375rem 0.75rem;
  color: var(--fg-muted-5);
  font-size: var(--font-size-small);
  line-height: 1;
  text-decoration: none;
}
#comments #comments-wrapper .comment .author .instance:hover {
  background-color: var(--fg-muted-5);
  color: var(--fg-contrast);
  text-decoration: none;
}
#comments #comments-wrapper .comment .author .instance:active {
  transform: var(--active);
}
#comments #comments-wrapper .comment .author .instance.op {
  background-color: var(--accent-color-alpha);
  padding-inline-start: 0.4375rem;
  color: var(--accent-color);
}
#comments #comments-wrapper .comment .author .instance.op:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}
#comments #comments-wrapper .comment .author .instance.op:hover::before {
  background-color: var(--contrast-color);
}
#comments #comments-wrapper .comment .author .instance.op::before {
  -webkit-mask-image: var(--icon-verified);
  display: inline-block;
  vertical-align: -0.1875rem;
  mask-image: var(--icon-verified);
  mask-size: cover;
  -webkit-mask-size: cover;
  transition: var(--transition);
  margin-inline-end: 0.25rem;
  background-color: var(--accent-color);
  width: 1rem;
  height: 1rem;
  content: "";
}
:root[dir*=rtl] #comments #comments-wrapper .comment .author .instance.op {
  padding: 0.375rem 0.5rem 0.375rem 0.75rem;
}
#comments #comments-wrapper .comment .mention {
  display: inline-block;
  transition: var(--transition);
  box-shadow: var(--edge-highlight);
  border-radius: var(--rounded-corner-small);
  background-color: var(--accent-color-alpha);
  padding: 0.25rem 0.375rem;
  line-height: 1;
  text-decoration: none;
}
#comments #comments-wrapper .comment .mention:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}
#comments #comments-wrapper .comment .mention:active {
  transform: var(--active);
}
#comments #comments-wrapper .comment .mention.hashtag {
  background-color: var(--fg-muted-1);
  color: var(--fg-muted-5);
}
#comments #comments-wrapper .comment .mention.hashtag:hover {
  background-color: var(--fg-muted-5);
  color: var(--fg-contrast);
}
#comments #comments-wrapper .comment time {
  grid-area: time;
  margin-block-start: 0.5rem;
  font-size: var(--font-size-small);
}
#comments #comments-wrapper .comment time a {
  color: var(--fg-muted-5);
}
#comments #comments-wrapper .comment time a:after {
  background-color: var(--fg-muted-5);
}
#comments #comments-wrapper .comment details[open] {
  border-radius: var(--rounded-corner-small);
  background-image: linear-gradient(to right, transparent, transparent 0.5rem, var(--fg-muted-1) 0.5rem, var(--fg-muted-1) calc(100% - 0.5rem), transparent calc(100% - 0.5rem), transparent), linear-gradient(to right, transparent, transparent 0.5rem, var(--bg-color) 0.5rem, var(--bg-color) calc(100% - 0.5rem), transparent calc(100% - 0.5rem), transparent), repeating-linear-gradient(45deg, var(--contrast-color), var(--contrast-color) 0.25rem, var(--accent-color) 0.25rem, var(--accent-color) 0.5rem);
}
#comments #comments-wrapper .comment details[open] summary {
  border-radius: 0;
  background-image: none;
}
#comments #comments-wrapper .comment details summary {
  border-radius: var(--rounded-corner-small);
  background-image: linear-gradient(to right, transparent, transparent 0.5rem, var(--fg-muted-1) 0.5rem, var(--fg-muted-1) calc(100% - 0.5rem), transparent calc(100% - 0.5rem), transparent), linear-gradient(to right, transparent, transparent 0.5rem, var(--bg-color) 0.5rem, var(--bg-color) calc(100% - 0.5rem), transparent calc(100% - 0.5rem), transparent), repeating-linear-gradient(45deg, var(--contrast-color), var(--contrast-color) 0.25rem, var(--accent-color) 0.25rem, var(--accent-color) 0.5rem);
}
#comments #comments-wrapper .comment main {
  grid-area: post;
  margin: 1rem 0 0;
  width: 100%;
}
#comments #comments-wrapper .comment main :first-child {
  margin-block-start: 0;
}
#comments #comments-wrapper .comment main :last-child {
  margin-block-end: 0;
}
#comments #comments-wrapper .comment .attachments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  grid-area: media;
  gap: 0.5rem;
  margin-block-start: 1rem;
}
#comments #comments-wrapper .comment .attachments img,
#comments #comments-wrapper .comment .attachments video {
  margin: 0;
}
#comments #comments-wrapper .comment .card {
  grid-area: card;
  transition: var(--transition);
  margin-block-start: 1rem;
  width: min(var(--container-width) / 2, 100%);
  font-weight: normal;
  text-decoration: none;
}
#comments #comments-wrapper .comment .card:hover:not(:active) img {
  transform: var(--hover);
  box-shadow: var(--edge-highlight), var(--shadow-raised);
  border-radius: var(--rounded-corner-small);
}
#comments #comments-wrapper .comment .card:hover:not(:active) figcaption {
  border-radius: var(--rounded-corner);
  background-color: var(--fg-muted-2);
}
#comments #comments-wrapper .comment .card:active {
  transform: var(--active);
}
#comments #comments-wrapper .comment .card figure {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
}
#comments #comments-wrapper .comment .card figure img {
  margin: 0;
  border-radius: var(--rounded-corner) var(--rounded-corner) var(--rounded-corner-small) var(--rounded-corner-small);
  aspect-ratio: 16/9;
  object-fit: cover;
}
#comments #comments-wrapper .comment .card figure img + figcaption {
  border-radius: var(--rounded-corner-small) var(--rounded-corner-small) var(--rounded-corner) var(--rounded-corner);
}
#comments #comments-wrapper .comment .card figure figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transition: var(--transition);
  box-shadow: var(--edge-highlight);
  border-radius: var(--rounded-corner);
  background-color: var(--fg-muted-1);
  padding: 1rem;
  color: var(--fg-color);
  font-size: var(--font-size-medium);
  text-align: start;
}
#comments #comments-wrapper .comment .card figure figcaption p {
  margin: 0;
  color: var(--fg-muted-5);
  font-size: var(--font-size-small);
}
#comments #comments-wrapper .comment footer {
  display: flex;
  grid-area: interactions;
  gap: 0.25rem;
  margin-block-start: 1rem;
}
#comments #comments-wrapper .comment footer .boosts,
#comments #comments-wrapper .comment footer .faves {
  transition: var(--transition);
  border-radius: 999px;
  background-color: transparent;
  padding: 0.5rem 0.75rem;
  padding-inline-start: 0.625rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
#comments #comments-wrapper .comment footer .boosts .icon,
#comments #comments-wrapper .comment footer .faves .icon {
  vertical-align: -0.125em;
  transition: var(--transition-longer);
  margin-inline-end: 0.25rem;
}
#comments #comments-wrapper .comment footer .boosts:hover,
#comments #comments-wrapper .comment footer .faves:hover {
  box-shadow: var(--edge-highlight);
  text-decoration: none;
}
#comments #comments-wrapper .comment footer .boosts:active,
#comments #comments-wrapper .comment footer .faves:active {
  transform: var(--active);
}
#comments #comments-wrapper .comment footer .boosts {
  color: var(--purple-fg);
}
#comments #comments-wrapper .comment footer .boosts:hover {
  background-color: var(--purple-bg);
}
#comments #comments-wrapper .comment footer .boosts:hover .icon {
  transform: rotate(180deg);
}
:root[dir*=rtl] #comments #comments-wrapper .comment footer .boosts:hover .icon {
  transform: scaleX(-1) rotate(180deg);
}
#comments #comments-wrapper .comment footer .boosts .icon {
  -webkit-mask-image: var(--icon-boosts);
  mask-image: var(--icon-boosts);
}
:root[dir*=rtl] #comments #comments-wrapper .comment footer .boosts .icon {
  transform: scaleX(-1);
}
#comments #comments-wrapper .comment footer .faves {
  color: var(--yellow-fg);
}
#comments #comments-wrapper .comment footer .faves:hover {
  background-color: var(--yellow-bg);
}
#comments #comments-wrapper .comment footer .faves:hover .icon {
  transform: rotate(72deg);
}
:root[dir*=rtl] #comments #comments-wrapper .comment footer .faves:hover .icon {
  transform: rotate(-72deg);
}
#comments #comments-wrapper .comment footer .faves .icon {
  -webkit-mask-image: var(--icon-star);
  mask-image: var(--icon-star);
}

.crt {
  margin: 1rem 0 1rem;
  box-shadow: var(--edge-highlight), var(--shadow-glow);
  border-radius: var(--rounded-corner);
  background-image: radial-gradient(color-mix(in srgb, var(--accent-color) 30%, black), color-mix(in srgb, var(--accent-color) 10%, black) 80%, color-mix(in srgb, var(--accent-color) 5%, black));
}
.crt pre {
  --text-shadow-1: hsl(from var(--accent-color) h s l / 0.5);
  --text-shadow-2: hsl(from var(--accent-color) h calc(s * 2) l);
  animation: flicker 0.25s alternate infinite;
  margin: 0;
  box-shadow: none;
  background-color: transparent !important;
  padding: 1rem 1rem;
  color: var(--accent-color) !important;
  text-shadow: var(--text-shadow-1) 0 0 0.25rem, var(--text-shadow-2) 0 0 0.75rem;
}
@keyframes flicker {
  25% {
    opacity: 0.95;
  }
  50% {
    opacity: 0.85;
  }
  75% {
    opacity: 1;
  }
  to {
    opacity: 0.9;
  }
}

.scanlines {
  position: relative;
  overflow: hidden;
}
.scanlines::before {
  display: block;
  position: absolute;
  z-index: 1;
  animation: scanlines 0.1s linear infinite;
  inset: 0;
  background-image: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 0.125rem, transparent 0.125rem, transparent 0.25rem);
  pointer-events: none;
  content: "";
}
@keyframes scanlines {
  to {
    background-position-y: 0.25rem;
  }
}
.scanlines::after {
  --scanline-color: rgb(from var(--accent-color) r g b / 0.05);
  display: block;
  position: absolute;
  animation: scanline 5s linear infinite;
  inset: 0;
  background-image: linear-gradient(to bottom, transparent, var(--scanline-color) 16rem);
  background-size: auto 16rem;
  background-repeat: no-repeat;
  background-position-y: -16rem;
  pointer-events: none;
  content: "";
}
@keyframes scanline {
  to {
    background-position-y: calc(100% + 16rem);
  }
}

.cursor {
  animation: cursor-blink 1s infinite;
}
@keyframes cursor-blink {
  50% {
    opacity: 0;
  }
}

.emoji {
  display: inline-block;
  vertical-align: bottom;
  transition: var(--transition);
  cursor: zoom-in;
  margin: 0;
  box-shadow: none;
  border-radius: 0;
  background-color: transparent;
  width: 1.5em;
  height: 1.5em;
}
.emoji:hover {
  transform: scale(2);
}

a.external::after {
  -webkit-mask-image: var(--icon-external);
  display: inline-block;
  opacity: var(--dim-opacity);
  mask-image: var(--icon-external);
  mask-size: cover;
  -webkit-mask-size: cover;
  margin-inline-start: 0.25rem;
  background-color: currentColor;
  width: max(0.75rem, 0.75em);
  height: max(0.75rem, 0.75em);
  content: "";
}
:root[dir*=rtl] a.external::after {
  transform: scaleX(-1);
}

h1 a:has(.icon.feed) {
  color: currentColor;
}

h1 .icon.feed {
  -webkit-mask-image: var(--icon-feed);
  vertical-align: -0.375rem;
  mask-image: var(--icon-feed);
  margin-inline-start: 0.5rem;
  width: 1em;
  height: 1em;
}

#site-footer {
  grid-area: footer;
  margin-block-end: 2rem;
  text-align: center;
}
#site-footer nav {
  display: inline-block;
  margin: 0 auto 1rem;
  box-shadow: var(--edge-highlight);
  border-radius: 1.375rem;
  background-color: var(--fg-muted-1);
  padding: 0.25rem;
  max-width: 90%;
}
#site-footer nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
}
#site-footer nav li {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media only screen and (max-width: 480px) {
  #site-footer nav li {
    flex: 0 0 100%;
  }
}
#site-footer nav a {
  flex: 1;
  transition: var(--transition);
  border-radius: 999px;
  padding: 0.375rem 0.75rem;
  color: var(--fg-muted-4);
  text-align: center;
  text-decoration: none;
}
#site-footer nav a.active {
  box-shadow: var(--edge-highlight);
  background-color: var(--accent-color-alpha);
  color: var(--accent-color);
}
#site-footer nav a.active:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}
#site-footer nav a:hover {
  box-shadow: var(--edge-highlight);
  background-color: var(--fg-muted-1);
  color: var(--fg-muted-5);
}
#site-footer nav a:active {
  transform: var(--active);
}
#site-footer #external-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 1rem auto 0;
  padding: 0;
}
#site-footer #external-links li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#site-footer #external-links a {
  display: block;
  transition: var(--transition);
  border-radius: 999px;
  padding: 0.5rem;
  color: var(--fg-muted-4);
  line-height: 0;
}
#site-footer #external-links a:hover {
  box-shadow: var(--edge-highlight);
  background-color: var(--fg-muted-1);
  color: var(--fg-muted-5);
}
#site-footer #external-links a:active {
  transform: var(--active);
}
#site-footer #external-links a .icon {
  -webkit-mask-image: var(--icon);
  mask-image: var(--icon);
  transition: var(--transition);
  width: 1.5rem;
  height: 1.5rem;
}
#site-footer #external-links a span {
  display: none;
}
#site-footer p {
  margin: 1rem auto;
}
#site-footer .link {
  display: inline-block;
  transition: var(--transition);
  box-shadow: var(--edge-highlight);
  border-radius: var(--rounded-corner-small);
  background-color: var(--accent-color-alpha);
  padding: 0.25rem 0.375rem;
  line-height: 1;
  text-decoration: none;
}
#site-footer .link:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}
#site-footer .link:active {
  transform: var(--active);
}

.footnotes-list p {
  margin-block-start: 0;
  margin-block-end: 0;
}

* {
  box-sizing: border-box;
}

:root {
  scroll-behavior: smooth;
  scrollbar-color: var(--accent-color) transparent;
  accent-color: var(--accent-color);
}

body {
  display: grid;
  grid-template-rows: auto minmax(auto, 1fr) auto;
  grid-template-areas: "nav" "main" "footer";
  margin: 0;
  background-color: var(--bg-color);
  min-height: 100vh;
  color: var(--fg-color);
  line-height: 1.5;
  font-family: var(--font-system-ui), var(--font-emoji);
  text-wrap: pretty;
  overflow-wrap: break-word;
}
body:has(#sidebar) {
  grid-template-columns: 1fr min(var(--container-width), 90%) 1fr;
  grid-template-areas: "nav nav nav" "sidebar main ." "footer footer footer";
}
@media only screen and (max-width: 1200px) {
  body:has(#sidebar) {
    grid-template-areas: "nav nav nav" ". sidebar ." ". main ." "footer footer footer";
  }
}

::selection {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

:target:not(#main-content) {
  transition: all var(--transition), scroll-margin-block-start 0s;
  scroll-margin-block-start: 15vh;
  color: var(--accent-color);
  text-shadow: var(--text-shadow-glow);
}

:focus-visible {
  animation: focus-in var(--transition);
  outline: 0.125rem solid var(--accent-color);
  outline-offset: 0.125rem;
}

@supports not selector(:focus-visible) {
  :focus {
    animation: focus-in var(--transition);
    outline: 0.125rem solid var(--accent-color);
    outline-offset: 0.125rem;
  }
}
@keyframes focus-in {
  from {
    outline: 0.5rem solid transparent;
    outline-offset: 0.25rem;
  }
}
main {
  margin: 4.25rem auto 4rem;
  width: calc(100% - 2rem);
  max-width: var(--container-width);
}

#sidebar {
  display: flex;
  position: sticky;
  top: 0;
  grid-area: sidebar;
  opacity: 0.2;
  transition: var(--transition);
  height: 100vh;
}
#sidebar:hover {
  opacity: 1;
}
@media only screen and (max-width: 1200px) {
  #sidebar {
    position: static;
    opacity: 1;
    margin-block-start: 4.25rem;
    margin-block-end: -4.25rem;
    padding: 0;
    height: auto;
  }
}
#sidebar > div {
  --mask: linear-gradient(to bottom,
  		transparent,
  		black 1rem,
  		black calc(100% - 1rem),
  		transparent);
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
  padding: 1rem;
  overflow: auto;
}
#sidebar + main {
  grid-area: main;
  margin: 0;
  margin-block-start: 4.25rem;
  margin-block-end: 4rem;
  width: auto;
}

@media (prefers-reduced-motion) {
  *,
  *::before,
  *::after {
    animation-duration: 0s !important;
    transition-duration: 0s !important;
  }
}
.hidden {
  display: none;
  visibility: hidden;
}

i.icon {
  display: inline-block;
  mask-size: cover;
  -webkit-mask-size: cover;
  background-color: currentColor;
  width: 1rem;
  height: 1rem;
  font-style: normal;
  font-variant: normal;
  line-height: 0;
  text-rendering: auto;
}

iframe {
  display: block;
  margin: 1rem auto;
  box-shadow: var(--edge-highlight), var(--shadow);
  border: none;
  border-radius: var(--rounded-corner);
  background-color: var(--fg-muted-1);
  width: 100%;
  max-width: 100%;
}
iframe.mastodon-embed {
  aspect-ratio: 3/4;
  width: min(var(--container-width) / 2, 100%);
}
iframe.vimeo-embed, iframe.youtube-embed {
  aspect-ratio: 16/9;
}
iframe:fullscreen {
  box-shadow: none;
  border-radius: 0;
}
iframe:-webkit-full-screen {
  box-shadow: none;
  border-radius: 0;
}

input[type=radio],
input[type=checkbox],
input[type=color] {
  position: relative;
  appearance: none;
  transition: var(--transition);
  cursor: pointer;
  border: 0.15rem solid var(--fg-muted-2);
  background-color: var(--fg-muted-1);
  width: 1rem;
  height: 1rem;
}
input[type=radio]:hover,
input[type=checkbox]:hover,
input[type=color]:hover {
  background-color: var(--fg-muted-2);
}
input[type=radio]:disabled,
input[type=checkbox]:disabled,
input[type=color]:disabled {
  opacity: var(--disabled-opacity);
  cursor: not-allowed;
}
input[type=radio]:disabled:hover,
input[type=checkbox]:disabled:hover,
input[type=color]:disabled:hover {
  background-color: var(--fg-muted-1);
}
input[type=radio]:disabled:hover:checked,
input[type=checkbox]:disabled:hover:checked,
input[type=color]:disabled:hover:checked {
  background-color: var(--accent-color);
}

input[type=radio]::before,
input[type=checkbox]::before {
  display: block;
  position: absolute;
  transform: scale(0.5);
  opacity: 0;
  transition: var(--transition);
  background-color: var(--contrast-color);
  content: "";
}
input[type=radio]:checked,
input[type=checkbox]:checked {
  border: 0.15rem solid transparent;
  background-color: var(--accent-color);
}
input[type=radio]:checked::before,
input[type=checkbox]:checked::before {
  transform: scale(1);
  opacity: 1;
}

input[type=radio] {
  vertical-align: -0.1875em;
  border-radius: 50%;
}
input[type=radio]::before {
  inset-block-start: 0.125rem;
  inset-inline-start: 0.125rem;
  border-radius: 50%;
  width: 0.5rem;
  height: 0.5rem;
}

input[type=checkbox] {
  vertical-align: -0.1875em;
  border-radius: calc(var(--rounded-corner-small) / 2);
}
input[type=checkbox]::before {
  -webkit-mask-image: var(--icon-checkmark);
  transform-origin: bottom left;
  mask-image: var(--icon-checkmark);
  mask-size: cover;
  -webkit-mask-size: cover;
  inset-block-start: -0.125rem;
  inset-inline-start: -0.125rem;
  width: 1rem;
  height: 1rem;
}
input[type=checkbox].switch {
  vertical-align: -0.375rem;
  box-shadow: var(--edge-highlight);
  border: none;
  border-radius: 999px;
  width: 2.5rem;
  height: 1.5rem;
}
input[type=checkbox].switch.big {
  vertical-align: -0.625rem;
  width: 3rem;
  height: 2rem;
}
input[type=checkbox].switch.big::before {
  width: 1.5rem;
  height: 1.5rem;
}
input[type=checkbox].switch::before {
  transform: none;
  transform-origin: center;
  opacity: 1;
  mask-image: none;
  transition: var(--transition);
  inset-block-start: 0.25rem;
  inset-inline-start: 0.25rem;
  box-shadow: var(--shadow);
  border-radius: 50%;
  background-color: white;
  width: 1rem;
  height: 1rem;
}
input[type=checkbox].switch:checked {
  background-color: var(--accent-color);
}
input[type=checkbox].switch:checked::before {
  transform: translateX(1rem);
  background-color: var(--contrast-color);
}
:root[dir*=rtl] input[type=checkbox].switch:checked::before {
  transform: translateX(-1rem);
}
input[type=checkbox].switch:disabled::before {
  box-shadow: none;
}

input[type=color] {
  vertical-align: -0.375em;
  box-shadow: var(--edge-highlight);
  border: none;
  border-radius: var(--rounded-corner-small);
  padding: 0.25rem;
  width: 3rem;
  height: 2rem;
}
input[type=color]::-moz-color-swatch {
  border: none;
  border-radius: calc(var(--rounded-corner-small) - 0.25rem);
}
input[type=color]::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type=color]::-webkit-color-swatch {
  border-radius: calc(var(--rounded-corner-small) - 0.25rem);
}

input[type=range] {
  appearance: none;
  transition: var(--transition);
  cursor: pointer;
  box-shadow: var(--edge-highlight);
  border-radius: 999px;
  background: var(--accent-color);
  width: 100%;
  height: 0.5rem;
}
input[type=range]::-webkit-slider-thumb {
  appearance: none;
  filter: brightness(0.9);
  transition: var(--transition);
  cursor: grab;
  box-shadow: var(--shadow);
  border-radius: 999px;
  background-color: white;
  width: 1.5rem;
  height: 1.5rem;
}
input[type=range]::-webkit-slider-thumb:active {
  transform: var(--active);
  cursor: grabbing;
}
input[type=range]::-moz-range-thumb {
  appearance: none;
  transition: var(--transition);
  cursor: grab;
  box-shadow: var(--shadow);
  border: none;
  border-radius: 999px;
  background-color: white;
  width: 1.5rem;
  height: 1.5rem;
}
input[type=range]::-moz-range-thumb:active {
  transform: var(--active);
  cursor: grabbing;
}

img,
video {
  display: block;
  margin: 1rem auto;
  box-shadow: var(--edge-highlight), var(--shadow);
  border-radius: var(--rounded-corner);
  background-color: var(--fg-muted-1);
  max-width: 100%;
}
img.full, img[src*="#full"],
video.full,
video[src*="#full"] {
  width: 100%;
}
img.full-bleed, img[src*="#full-bleed"],
video.full-bleed,
video[src*="#full-bleed"] {
  margin-inline-start: calc((-100vw + 100%) / 2);
  margin-inline-end: calc((-100vw + 100%) / 2);
  width: 100vw;
  max-width: 100vw;
}
img.start, img.end, img[src*="#start"], img[src*="#end"],
video.start,
video.end,
video[src*="#start"],
video[src*="#end"] {
  margin: 0;
  width: 30%;
}
@media only screen and (max-width: 720px) {
  img.start, img.end, img[src*="#start"], img[src*="#end"],
  video.start,
  video.end,
  video[src*="#start"],
  video[src*="#end"] {
    float: none;
    margin-inline-start: 0;
    margin-inline-end: 0;
    margin-block-start: 1rem;
    margin-block-end: 1rem;
    width: 100%;
  }
}
img.start, img[src*="#start"],
video.start,
video[src*="#start"] {
  float: inline-start;
  transform-origin: left;
  margin-inline-end: 1rem;
}
:root[dir*=rtl] img.start, :root[dir*=rtl] img[src*="#start"],
:root[dir*=rtl] video.start,
:root[dir*=rtl] video[src*="#start"] {
  transform-origin: right;
}
img.end, img[src*="#end"],
video.end,
video[src*="#end"] {
  float: inline-end;
  transform-origin: right;
  margin-inline-start: 1rem;
}
:root[dir*=rtl] img.end, :root[dir*=rtl] img[src*="#end"],
:root[dir*=rtl] video.end,
:root[dir*=rtl] video[src*="#end"] {
  transform-origin: left;
}
img.pixels, img[src*="#pixels"],
video.pixels,
video[src*="#pixels"] {
  image-rendering: pixelated;
}
img.transparent, img.full-bleed, img[src*="#transparent"], img[src*="#full-bleed"],
video.transparent,
video.full-bleed,
video[src*="#transparent"],
video[src*="#full-bleed"] {
  box-shadow: none;
  border-radius: 0;
  background-color: transparent;
}
img.spoiler, img[src*="#spoiler"],
video.spoiler,
video[src*="#spoiler"] {
  opacity: var(--dim-opacity);
  clip-path: inset(0 0 0 0 round var(--rounded-corner));
  filter: blur(1rem);
}
img.spoiler:hover, img.spoiler:active, img[src*="#spoiler"]:hover, img[src*="#spoiler"]:active,
video.spoiler:hover,
video.spoiler:active,
video[src*="#spoiler"]:hover,
video[src*="#spoiler"]:active {
  opacity: 1;
  clip-path: inset(-0.75rem -0.75rem -0.75rem -0.75rem round var(--rounded-corner-small));
  filter: none;
}
img.spoiler.solid, img.spoiler[src*="#solid"], img[src*="#spoiler"].solid, img[src*="#spoiler"][src*="#solid"],
video.spoiler.solid,
video.spoiler[src*="#solid"],
video[src*="#spoiler"].solid,
video[src*="#spoiler"][src*="#solid"] {
  clip-path: none;
  filter: brightness(0) contrast(0.5);
  box-shadow: none;
}
img.spoiler.solid:hover, img.spoiler.solid:active, img.spoiler[src*="#solid"]:hover, img.spoiler[src*="#solid"]:active, img[src*="#spoiler"].solid:hover, img[src*="#spoiler"].solid:active, img[src*="#spoiler"][src*="#solid"]:hover, img[src*="#spoiler"][src*="#solid"]:active,
video.spoiler.solid:hover,
video.spoiler.solid:active,
video.spoiler[src*="#solid"]:hover,
video.spoiler[src*="#solid"]:active,
video[src*="#spoiler"].solid:hover,
video[src*="#spoiler"].solid:active,
video[src*="#spoiler"][src*="#solid"]:hover,
video[src*="#spoiler"][src*="#solid"]:active {
  filter: none;
}

img {
  transition: var(--transition-longer);
}
img:not(.no-hover,
.full-bleed,
[src*="#no-hover"],
[src*="#full-bleed"],
.emoji) {
  cursor: zoom-in;
}
img:not(.no-hover,
.full-bleed,
[src*="#no-hover"],
[src*="#full-bleed"],
.emoji):hover {
  position: relative;
  transform: var(--hover);
  z-index: 1;
  box-shadow: var(--edge-highlight), var(--shadow-raised);
  border-radius: var(--rounded-corner-small);
}
img:not(.no-hover,
.full-bleed,
[src*="#no-hover"],
[src*="#full-bleed"],
.emoji).start:hover, img:not(.no-hover,
.full-bleed,
[src*="#no-hover"],
[src*="#full-bleed"],
.emoji).end:hover, img:not(.no-hover,
.full-bleed,
[src*="#no-hover"],
[src*="#full-bleed"],
.emoji)[src*="#start"]:hover, img:not(.no-hover,
.full-bleed,
[src*="#no-hover"],
[src*="#full-bleed"],
.emoji)[src*="#end"]:hover {
  transform: scale(2);
}
@media only screen and (max-width: 720px) {
  img:not(.no-hover,
  .full-bleed,
  [src*="#no-hover"],
  [src*="#full-bleed"],
  .emoji).start, img:not(.no-hover,
  .full-bleed,
  [src*="#no-hover"],
  [src*="#full-bleed"],
  .emoji).end, img:not(.no-hover,
  .full-bleed,
  [src*="#no-hover"],
  [src*="#full-bleed"],
  .emoji)[src*="#start"], img:not(.no-hover,
  .full-bleed,
  [src*="#no-hover"],
  [src*="#full-bleed"],
  .emoji)[src*="#end"] {
    transform-origin: center;
  }
  img:not(.no-hover,
  .full-bleed,
  [src*="#no-hover"],
  [src*="#full-bleed"],
  .emoji).start:hover, img:not(.no-hover,
  .full-bleed,
  [src*="#no-hover"],
  [src*="#full-bleed"],
  .emoji).end:hover, img:not(.no-hover,
  .full-bleed,
  [src*="#no-hover"],
  [src*="#full-bleed"],
  .emoji)[src*="#start"]:hover, img:not(.no-hover,
  .full-bleed,
  [src*="#no-hover"],
  [src*="#full-bleed"],
  .emoji)[src*="#end"]:hover {
    transform: var(--hover);
  }
}
img:not(.no-hover,
.full-bleed,
[src*="#no-hover"],
[src*="#full-bleed"],
.emoji).transparent:hover, img:not(.no-hover,
.full-bleed,
[src*="#no-hover"],
[src*="#full-bleed"],
.emoji)[src*="#transparent"]:hover {
  box-shadow: none;
}

a img:not(.no-hover, .full-bleed, [src*="#no-hover"], [src*="#full-bleed"]) {
  cursor: pointer;
}

video:fullscreen {
  box-shadow: none;
  border-radius: 0;
}

video:-webkit-full-screen {
  box-shadow: none;
  border-radius: 0;
}

#handle {
  position: fixed;
  z-index: 999;
  transition: var(--transition);
  margin: 0 auto;
  inset-block-start: 0;
  inset-inline-end: 0;
  inset-inline-start: 0;
  width: min(var(--container-width), 90%);
  height: 4.25rem;
}
#handle::before {
  position: absolute;
  transition: var(--transition);
  margin: 0 auto;
  inset-block-start: 0.5rem;
  inset-inline-end: 0;
  inset-inline-start: 0;
  box-shadow: var(--edge-highlight);
  border-radius: 999px;
  background-color: var(--accent-color);
  width: min(var(--container-width) / 4, 100%);
  height: 0.5rem;
  content: "";
}
#handle:hover::before, #handle:has(+ #site-nav:hover)::before, #handle:has(+ #site-nav *:focus-visible, + #site-nav *:focus)::before {
  transform: translateY(-1rem) scale(0.5);
  opacity: 0;
}
#handle:hover + #site-nav, #handle + #site-nav:hover, #handle + #site-nav:has(*:focus-visible, *:focus) {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
#handle:hover + #site-nav::before, #handle + #site-nav:hover::before, #handle + #site-nav:has(*:focus-visible, *:focus)::before {
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}
#handle + #site-nav {
  position: fixed;
  transform: translateY(-1rem) scale(0.5);
  transform-origin: top;
  opacity: 0;
  transition: var(--transition);
  margin: 0 auto;
  width: max-content;
  pointer-events: none;
}
#handle + #site-nav::before {
  -webkit-backdrop-filter: saturate(1) blur(0);
  backdrop-filter: saturate(1) blur(0);
  transition: var(--transition);
}

#site-nav {
  position: sticky;
  grid-area: nav;
  z-index: 999;
  margin: 1rem auto 0;
  inset-block-start: 1rem;
  inset-inline-end: 0;
  inset-inline-start: 0;
  border-radius: 1.625rem;
  max-width: min(var(--container-width), 90%);
}
@media only screen and (max-width: 480px) {
  #site-nav {
    position: relative;
    margin: 0 auto;
  }
}
#site-nav::before {
  -webkit-backdrop-filter: var(--blur);
  position: absolute;
  z-index: -1;
  backdrop-filter: var(--blur);
  inset: 0;
  box-shadow: var(--edge-highlight), var(--shadow-glass);
  border-radius: 1.625rem;
  background-color: var(--glass-bg);
  content: "";
}
#site-nav nav {
  padding: 0.5rem;
}
#site-nav nav > a {
  -webkit-backdrop-filter: var(--blur);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  z-index: 999;
  backdrop-filter: var(--blur);
  transition: var(--transition);
  inset-block-start: 0;
  box-shadow: var(--edge-highlight), var(--shadow-glass);
  border-radius: 999px;
  background-color: var(--glass-bg);
  padding: 0.625rem 0.75rem;
  pointer-events: none;
  line-height: 1;
  text-decoration: none;
}
#site-nav nav > a:focus {
  opacity: 1;
  inset-block-start: calc(100% + 0.5rem);
}
#site-nav nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
}
#site-nav nav li {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media only screen and (max-width: 480px) {
  #site-nav nav li:not(:has(.circle)) {
    flex: 0 0 100%;
  }
}
#site-nav nav a,
#site-nav nav summary {
  flex: 1;
  transition: var(--transition);
  box-shadow: none;
  border-radius: 999px;
  background-color: transparent;
  padding: 0.625rem 0.75rem;
  font-weight: bold;
  line-height: 1;
  list-style: none;
  text-align: center;
  text-decoration: none;
}
#site-nav nav a.active {
  box-shadow: var(--edge-highlight);
  background-color: var(--accent-color-alpha);
  color: var(--accent-color);
}
#site-nav nav a.active:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}
#site-nav nav #home a {
  color: var(--fg-muted-5);
  font-weight: 800;
}
#site-nav nav #home a:hover {
  color: var(--fg-color);
}
#site-nav nav #home a.active {
  color: var(--accent-color);
}
#site-nav nav #home a.active:hover {
  color: var(--contrast-color);
}
#site-nav nav #home a .icon {
  -webkit-mask-image: var(--icon-home);
  vertical-align: -0.125em;
  mask-image: var(--icon-home);
  transition: var(--transition);
  margin-inline-end: 0.25rem;
}
#site-nav nav .divider {
  align-self: stretch;
  margin: 0 0.25rem;
  background-color: var(--fg-muted-2);
  width: max(1px, 0.0625em);
}
@media only screen and (max-width: 480px) {
  #site-nav nav .divider {
    display: none;
  }
}
#site-nav nav a,
#site-nav nav #search button,
#site-nav nav #language-switcher summary,
#site-nav nav #theme-switcher summary,
#site-nav nav #theme-switcher button,
#site-nav nav summary {
  color: var(--fg-muted-4);
}
#site-nav nav a:hover,
#site-nav nav #search button:hover,
#site-nav nav #language-switcher summary:hover,
#site-nav nav #theme-switcher summary:hover,
#site-nav nav #theme-switcher button:hover,
#site-nav nav summary:hover {
  box-shadow: var(--edge-highlight);
  background-color: var(--fg-muted-1);
  color: var(--fg-muted-5);
}
#site-nav nav a:active,
#site-nav nav #search button:active,
#site-nav nav #language-switcher summary:active,
#site-nav nav #theme-switcher summary:active,
#site-nav nav #theme-switcher button:active,
#site-nav nav summary:active {
  transform: var(--active);
}
#site-nav nav .circle {
  padding: 0.625rem 0.625rem;
  line-height: 0;
}
#site-nav nav .circle::before {
  display: none;
}
#site-nav nav .circle .icon {
  vertical-align: -0.125em;
  transition: var(--transition);
}
#site-nav nav button {
  appearance: none;
  transition: var(--transition);
  cursor: pointer;
  border: none;
  border-radius: 999px;
  background-color: transparent;
  font-size: var(--font-size-medium);
}
#site-nav nav details {
  display: flex;
  position: relative;
  flex: 1;
  margin-block-end: 0;
  box-shadow: none;
  border-radius: 0;
  background-color: transparent;
  padding: 0;
}
#site-nav nav details[open] ul {
  animation: dropdown-open var(--transition);
}
@keyframes dropdown-open {
  from {
    transform: scale(0.5) translate(-50%, -1rem);
    opacity: 0;
  }
}
#site-nav nav details ul {
  -webkit-backdrop-filter: var(--blur);
  position: absolute;
  left: 50%;
  flex-direction: column;
  transform: translateX(-50%);
  transform-origin: top left;
  z-index: 1;
  backdrop-filter: var(--blur);
  inset-block-start: 3.25rem;
  box-shadow: var(--edge-highlight), var(--shadow-glass);
  border-radius: calc(var(--rounded-corner) + 0.25rem);
  background-color: var(--glass-bg);
  padding: 0.25rem;
}
#site-nav nav details ul li {
  width: 100%;
  white-space: nowrap;
}
#site-nav nav details ul li a {
  border-radius: var(--rounded-corner);
  text-align: start;
}
@media only screen and (max-width: 480px) {
  #site-nav nav details:has(summary:not(.circle)) ul {
    inset-block-start: 2.75rem;
  }
}
#site-nav nav #search .icon {
  -webkit-mask-image: var(--icon-search);
  mask-image: var(--icon-search);
}
:root[dir*=rtl] #site-nav nav #search .icon {
  transform: scaleX(-1);
}
#site-nav nav #feed .icon {
  -webkit-mask-image: var(--icon-feed);
  mask-image: var(--icon-feed);
}
:root[dir*=rtl] #site-nav nav #feed .icon {
  transform: scaleX(-1);
}
#site-nav nav #repo .icon {
  -webkit-mask-image: var(--icon-git);
  mask-image: var(--icon-git);
}
#site-nav nav #language-switcher .icon {
  -webkit-mask-image: var(--icon-languages);
  mask-image: var(--icon-languages);
}
#site-nav nav #theme-switcher ul {
  flex-direction: row;
  flex-wrap: nowrap;
  border-radius: 999px;
}
#site-nav nav #theme-switcher .active {
  box-shadow: var(--edge-highlight);
  background-color: var(--accent-color-alpha);
  color: var(--accent-color);
}
#site-nav nav #theme-switcher .active:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}
#site-nav nav #theme-switcher #theme-system .icon,
#site-nav nav #theme-switcher .icon {
  -webkit-mask-image: var(--icon-theme-system);
  mask-image: var(--icon-theme-system);
}
:root[dir*=rtl] #site-nav nav #theme-switcher #theme-system .icon,
:root[dir*=rtl] #site-nav nav #theme-switcher .icon {
  transform: scaleX(-1);
}
#site-nav nav #theme-switcher #theme-light .icon,
#site-nav nav #theme-switcher .icon.light {
  -webkit-mask-image: var(--icon-theme-light);
  mask-image: var(--icon-theme-light);
}
#site-nav nav #theme-switcher #theme-dark .icon,
#site-nav nav #theme-switcher .icon.dark {
  -webkit-mask-image: var(--icon-theme-dark);
  mask-image: var(--icon-theme-dark);
}
:root[dir*=rtl] #site-nav nav #theme-switcher #theme-dark .icon,
:root[dir*=rtl] #site-nav nav #theme-switcher .icon.dark {
  transform: scaleX(-1);
}
#site-nav #search-container {
  transform: scale(0.5) translateY(-2.75rem);
  opacity: 0;
  transition: var(--transition);
  padding: 0 0.5rem 0;
  height: 0;
  pointer-events: none;
}
#site-nav #search-container.active {
  transform: none;
  opacity: 1;
  padding: 0 0.5rem 0.5rem;
  height: 2.75rem;
  pointer-events: all;
}
#site-nav #search-bar {
  box-shadow: var(--edge-highlight);
  border: none;
  border-radius: 999px;
  background: var(--fg-muted-1);
  padding: 0 0.75rem;
  width: 100%;
  height: 2.25rem;
  color: inherit;
  font-size: var(--font-size-medium);
}
#site-nav #search-bar::placeholder {
  opacity: 1;
  color: var(--fg-muted-4);
}
#site-nav #search-results-container {
  -webkit-backdrop-filter: var(--blur);
  display: flex;
  position: absolute;
  backdrop-filter: var(--blur);
  inset-block-start: calc(100% + 0.5rem);
  inset-inline-start: 0;
  box-shadow: var(--edge-highlight), var(--shadow-glass);
  border-radius: calc(var(--rounded-corner) + 0.5rem);
  background-color: var(--glass-bg);
  width: 100%;
  max-height: 50vh;
}
#site-nav #search-results {
  --mask: linear-gradient(to bottom,
  		transparent,
  		black 1rem,
  		black calc(100% - 1rem),
  		transparent);
  -webkit-mask-image: var(--mask);
  display: none;
  flex: 1;
  flex-direction: column;
  gap: 0.5rem;
  mask-image: var(--mask);
  padding: 0.5rem;
  overflow: auto;
}
#site-nav #search-results .item {
  display: inline-flex;
  flex-direction: column;
  box-shadow: var(--edge-highlight);
  border-radius: var(--rounded-corner);
  background-color: var(--fg-muted-1);
  padding: 0.5rem;
}
#site-nav #search-results .item a {
  width: fit-content;
}
#site-nav #search-results .item a::after {
  content: " →";
}
:root[dir*=rtl] #site-nav #search-results .item a::after {
  content: " ←";
}
#site-nav #search-results .item span {
  color: var(--fg-muted-5);
}
#site-nav #search-results .item span:first-of-type, #site-nav #search-results .item span.more-matches {
  margin-block-start: 0.5rem;
  border-block-start: max(1px, 0.0625rem) solid var(--fg-muted-2);
  padding-block-start: 0.25rem;
}
#site-nav #search-results .item span.more-matches {
  font-size: var(--font-size-small);
}
#site-nav #search-results .item span strong {
  color: var(--fg-color);
}

#not-found {
  width: min(var(--container-width) / 5, 100%);
}

#post-nav {
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
}
@media only screen and (max-width: 720px) {
  #post-nav {
    flex-direction: column;
  }
}
#post-nav .post-nav-item {
  flex: 1;
  transition: var(--transition);
  border-radius: var(--rounded-corner);
  padding: 1rem;
  padding-block-end: 0.75rem;
  min-width: 0;
  text-decoration: none;
}
#post-nav .post-nav-item:hover {
  box-shadow: var(--edge-highlight);
  background-color: var(--accent-color-alpha);
}
#post-nav .post-nav-item:hover .post-title {
  color: var(--accent-color);
}
#post-nav .post-nav-item:active {
  transform: var(--active);
}
#post-nav .post-nav-item.post-nav-prev .nav-arrow::before {
  content: "← ";
}
:root[dir*=rtl] #post-nav .post-nav-item.post-nav-prev .nav-arrow::before {
  content: "→ ";
}
#post-nav .post-nav-item.post-nav-next {
  text-align: end;
}
#post-nav .post-nav-item.post-nav-next .nav-arrow::after {
  content: " →";
}
:root[dir*=rtl] #post-nav .post-nav-item.post-nav-next .nav-arrow::after {
  content: " ←";
}
#post-nav .post-nav-item .nav-arrow {
  margin-block-end: 0.75rem;
  color: var(--fg-muted-5);
  font-weight: normal;
  line-height: 1;
}
#post-nav .post-nav-item .post-title {
  display: block;
  transition: var(--transition);
  max-width: 90vw;
  overflow: hidden;
  color: var(--fg-color);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pre-container {
  margin: 1rem 0 1rem;
  box-shadow: var(--edge-highlight), var(--shadow);
  border-radius: var(--rounded-corner);
}
.pre-container .header {
  --shimmer: rgb(
  	from var(--accent-color) r g b / calc(var(--color-opacity) * 2)
  );
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--rounded-corner) var(--rounded-corner) 0 0;
  background-image: linear-gradient(to right, var(--fg-muted-1) 50%, var(--shimmer) 75%, var(--fg-muted-1) 100%);
  background-size: 200%;
  padding: 0.25rem;
  height: 2.5rem;
}
.pre-container .header span {
  margin-inline-start: 0.75rem;
  color: var(--fg-muted-5);
  font-weight: bold;
  line-height: 1;
}
.pre-container .header button {
  appearance: none;
  transition: var(--transition);
  cursor: pointer;
  border: none;
  border-radius: var(--rounded-corner-small);
  background-color: transparent;
  padding: 0.5rem;
  color: var(--fg-muted-4);
  line-height: 0;
}
.pre-container .header button:hover {
  box-shadow: var(--edge-highlight);
  background-color: var(--fg-muted-1);
  color: var(--fg-muted-5);
}
.pre-container .header button:active {
  transform: var(--active);
}
.pre-container .header button:disabled {
  cursor: not-allowed;
}
.pre-container .header button:disabled:active {
  transform: none;
}
.pre-container .header button .icon {
  -webkit-mask-image: var(--icon-copy);
  mask-image: var(--icon-copy);
  transition: var(--transition);
}
:root[dir*=rtl] .pre-container .header button .icon {
  transform: scaleX(-1);
}
.pre-container .header.active {
  animation: active-shimmer var(--transition-long);
}
.pre-container .header.active button {
  box-shadow: var(--edge-highlight);
  background-color: var(--accent-color-alpha);
  color: var(--accent-color);
}
.pre-container .header.active button .icon {
  -webkit-mask-image: var(--icon-done);
  mask-image: var(--icon-done);
}
@keyframes active-shimmer {
  to {
    background-position-x: -200%;
  }
}
.pre-container pre {
  margin: 0;
  box-shadow: none;
  border-radius: 0 0 var(--rounded-corner) var(--rounded-corner);
}

.sparkline {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  float: inline-end;
  gap: 0.25rem;
  margin: 1rem 0;
  width: 6rem;
  height: 2rem;
}
.sparkline div {
  flex: 1;
  transform-origin: bottom;
  transition: var(--transition);
  background-image: linear-gradient(to top, var(--accent-color) var(--bar-height), transparent var(--bar-height));
  height: 100%;
}
.sparkline div:hover {
  height: 200%;
}

span.spoiler {
  filter: blur(0.25rem);
  transition: var(--transition);
}
span.spoiler:hover, span.spoiler:active {
  filter: none;
}
span.spoiler.solid {
  filter: none;
  border-radius: var(--rounded-corner-small);
  background-color: var(--fg-muted-4);
  color: transparent;
}
span.spoiler.solid:hover, span.spoiler.solid:active {
  background-color: transparent;
  color: inherit;
}

.statement-container {
  margin: 1rem 0;
  box-shadow: var(--edge-highlight);
  border-radius: var(--rounded-corner);
  padding: 1rem;
}
.statement-container :last-child {
  margin-block-end: 0;
}
.statement-container > :nth-child(2) {
  margin-block-start: 0.5rem;
}
.statement-container li::marker {
  color: inherit;
}
.statement-container a {
  color: inherit;
}
.statement-container .title {
  color: inherit;
}
.statement-container .title .icon {
  margin-inline-end: 0.375rem;
}
.statement-container.archive {
  background-color: var(--purple-bg);
  color: var(--purple-fg);
}
.statement-container.archive .icon {
  -webkit-mask-image: var(--icon-archive);
  mask-image: var(--icon-archive);
}
.statement-container.disclaimer {
  background-color: var(--red-bg);
  color: var(--red-fg);
}
.statement-container.disclaimer .icon {
  -webkit-mask-image: var(--icon-warning);
  mask-image: var(--icon-warning);
}
.statement-container.trigger {
  background-color: var(--yellow-bg);
  color: var(--yellow-fg);
}
.statement-container.trigger .icon {
  -webkit-mask-image: var(--icon-warning);
  mask-image: var(--icon-warning);
}

table {
  box-shadow: var(--edge-highlight);
  border-radius: var(--rounded-corner);
  border-collapse: collapse;
  background-color: var(--fg-muted-1);
  width: 100%;
  overflow: hidden;
}
table tr:nth-child(even) {
  background-color: var(--fg-muted-1);
}
table tr th,
table tr td {
  padding: 0.5rem 1rem;
}
table tr th {
  background-color: var(--fg-muted-2);
  font-weight: bold;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  margin-block-start: 2rem;
  padding: 0;
  list-style: none;
}
.tags li {
  display: flex;
  transition: var(--transition);
  margin: 0;
  padding: 0;
}
.tags li:active {
  transform: var(--active);
}
.tags a {
  transition: var(--transition);
  box-shadow: var(--edge-highlight);
  border-radius: 999px;
  background-color: var(--fg-muted-1);
  padding: 0.375rem 0.75rem;
  color: var(--fg-muted-5);
  font-size: var(--font-size-small);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.tags a:hover {
  background-color: var(--accent-color-alpha);
  color: var(--accent-color);
  text-decoration: none;
}
.tags a:hover .count {
  background-color: var(--accent-color-alpha);
  color: var(--accent-color);
}
.tags a:has(.tag) {
  padding: 0;
}
.tags a .tag {
  display: inline-block;
  padding-inline-start: 0.75rem;
  padding-inline-end: 0.5rem;
  padding-block-start: 0.375rem;
  padding-block-end: 0.375rem;
}
.tags a .count {
  display: inline-block;
  transition: var(--transition);
  border-start-end-radius: 999px;
  border-end-end-radius: 999px;
  background-color: var(--fg-muted-1);
  padding-inline-start: 0.5rem;
  padding-inline-end: 0.625rem;
  padding-block-start: 0.375rem;
  padding-block-end: 0.375rem;
  font-variant-numeric: tabular-nums;
}

strong.title {
  color: var(--accent-color);
  font-size: var(--font-size-x-large);
  line-height: 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 2rem 0 1rem;
  font-weight: lighter;
  line-height: normal;
  font-family: var(--font-antique);
  letter-spacing: -0.05em;
  text-wrap: balance;
}

h1 {
  font-size: var(--font-size-xxx-large);
}

h2 {
  font-size: var(--font-size-xx-large);
}

h3 {
  font-size: var(--font-size-x-large);
}

h4 {
  font-size: var(--font-size-large);
}

h5 {
  font-size: var(--font-size-medium);
}

h6 {
  font-size: var(--font-size-small);
}

small {
  color: var(--fg-muted-5);
  font-size: var(--font-size-small-em);
}

abbr[title] {
  cursor: help;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: max(1px, 0.0625em);
}

figcaption {
  color: var(--fg-muted-4);
  font-size: var(--font-size-small-em);
  text-align: center;
}

blockquote {
  margin: 1rem 0;
  border-radius: 0.25rem;
  border-inline-start: 0.25rem solid var(--accent-color);
  padding-inline-start: 0.75rem;
  color: var(--fg-muted-5);
}

mark,
del,
ins,
samp,
q {
  box-shadow: var(--edge-highlight);
  border-radius: var(--rounded-corner-small);
  padding: 0.125rem 0.375rem;
}

mark {
  background-color: var(--accent-color-alpha);
  color: var(--accent-color);
}

del {
  background-color: var(--red-bg);
  color: var(--red-fg);
  text-decoration: line-through;
  text-decoration-thickness: max(1px, 0.0625em);
}

ins {
  background-color: var(--green-bg);
  color: var(--green-fg);
  text-decoration: underline;
  text-decoration-thickness: max(1px, 0.0625em);
}

samp {
  background-color: var(--fg-muted-1);
  color: var(--fg-muted-5);
  font-size: var(--font-size-small-em);
}

q {
  background-color: var(--fg-muted-1);
  color: var(--fg-muted-5);
  font-style: italic;
}

u {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--red-fg);
  text-decoration-thickness: max(1px, 0.0625em);
}

progress {
  appearance: none;
  box-shadow: var(--edge-highlight);
  border: none;
  border-radius: 999px;
  background-color: var(--fg-muted-1);
  width: 100%;
  height: 0.5rem;
  color: var(--accent-color);
}
progress:indeterminate {
  background-color: var(--fg-muted-1);
}
progress:indeterminate::-moz-progress-bar {
  background-color: transparent;
}
progress::-webkit-progress-bar {
  background-color: transparent;
}
progress::-moz-progress-bar {
  border-radius: 999px;
  background-color: var(--accent-color);
}
progress::-webkit-progress-value {
  border-radius: 999px;
  background-color: var(--accent-color);
}

kbd {
  display: inline-block;
  transition: var(--transition);
  cursor: pointer;
  box-shadow: var(--edge-highlight), inset 0 -0.125rem 0 var(--fg-muted-2);
  border-radius: var(--rounded-corner-small);
  background-color: var(--fg-muted-1);
  padding: 0.125rem 0.375rem;
  font-size: var(--font-size-small-em);
}
kbd:active {
  transform: translateY(0.125rem);
  box-shadow: inset 0 0.0625rem 0 var(--fg-muted-2);
  background-color: var(--fg-muted-2);
}

a {
  color: var(--accent-color);
  font-weight: bold;
  text-decoration-thickness: max(1px, 0.0625em);
}
a:hover {
  text-decoration-style: wavy;
}

hr {
  margin: 2rem auto;
  border: none;
  border-block-start: 0.1875rem double var(--fg-muted-2);
  overflow: visible;
  text-align: center;
}
hr::after {
  position: relative;
  inset-block-start: -1.25rem;
  content: "❦";
  color: var(--fg-muted-4);
  font-size: var(--font-size-x-large);
}

dt {
  font-weight: bold;
}

dd {
  margin-inline-start: 1.5rem;
  margin-block-end: 1rem;
}

aside {
  float: right;
  margin-inline-start: 1rem;
  margin-block-end: 1rem;
  box-shadow: var(--edge-highlight);
  border-radius: var(--rounded-corner);
  background-color: var(--accent-color-alpha);
  padding: 1rem;
  width: 30%;
}
:root[dir*=rtl] aside {
  float: left;
}
@media only screen and (max-width: 720px) {
  aside {
    float: none;
    margin-inline-start: 0;
    width: 100%;
  }
}
aside :first-child {
  margin-block-start: 0;
}
aside :last-child {
  margin-block-end: 0;
}

details {
  margin-block-end: 1rem;
}
details summary {
  cursor: pointer;
  box-shadow: var(--edge-highlight);
  border-radius: var(--rounded-corner);
  background-color: var(--fg-muted-1);
  padding: 1rem;
  color: var(--fg-muted-5);
  font-weight: bold;
  line-height: 1;
  list-style: none;
}
details summary::marker, details summary::-webkit-details-marker {
  display: none;
}
details summary::before {
  -webkit-mask-image: var(--icon-down);
  display: inline-block;
  vertical-align: -0.125em;
  mask-image: var(--icon-down);
  mask-size: cover;
  -webkit-mask-size: cover;
  transition: var(--transition);
  margin-inline-end: 0.25rem;
  background-color: currentColor;
  width: 1rem;
  height: 1rem;
  content: "";
}
details :last-child {
  margin-block-end: 0;
}
details[open] {
  box-shadow: var(--edge-highlight);
  border-radius: var(--rounded-corner);
  background-color: var(--fg-muted-1);
  padding: 1rem;
}
details[open] summary {
  box-shadow: none;
  border-radius: 0;
  background-color: transparent;
  padding: 0;
}
details[open] summary::before {
  transform: scaleY(-1);
}
details[open] summary ~ * {
  animation: details-open var(--transition);
}
@keyframes details-open {
  from {
    transform: translateY(-1rem);
    opacity: 0;
  }
}

figure {
  margin-inline: 0;
}

ol,
ul {
  padding-inline-start: 1.5rem;
}

li {
  margin: 0.125rem 0;
  padding-inline-start: 0.25rem;
}
li::marker {
  color: var(--accent-color);
  font-weight: bold;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  position: absolute !important;
  clip-path: inset(100%);
  width: 1px !important;
  height: 1px !important;
  overflow: hidden;
  white-space: nowrap;
}

h1:hover .zola-anchor,
h2:hover .zola-anchor,
h3:hover .zola-anchor,
h4:hover .zola-anchor,
h5:hover .zola-anchor,
h6:hover .zola-anchor {
  transform: translateY(-0.125em);
  opacity: 1;
}
:root[dir*=rtl] h1:hover .zola-anchor,
:root[dir*=rtl] h2:hover .zola-anchor,
:root[dir*=rtl] h3:hover .zola-anchor,
:root[dir*=rtl] h4:hover .zola-anchor,
:root[dir*=rtl] h5:hover .zola-anchor,
:root[dir*=rtl] h6:hover .zola-anchor {
  transform: translateY(-0.125em);
}

.zola-anchor {
  position: absolute;
  transform: translateX(0.5rem) translateY(-0.125em);
  opacity: 0;
  transition: var(--transition);
  margin-inline-start: calc(-1em - 0.5rem);
  color: var(--fg-muted-4);
  line-height: 1;
}
@media only screen and (max-width: 832px) {
  .zola-anchor {
    display: none;
  }
}
:root[dir*=rtl] .zola-anchor {
  transform: translateX(-0.5rem) translateY(-0.125em);
}
.zola-anchor:hover {
  color: var(--accent-color);
}
.zola-anchor:active {
  transform: var(--active);
}
.zola-anchor:focus-visible {
  opacity: 1;
}
.zola-anchor .icon {
  -webkit-mask-image: var(--icon-link);
  mask-image: var(--icon-link);
  mask-size: cover;
  -webkit-mask-size: cover;
  transition: var(--transition);
  width: 1em;
  height: 1em;
}
:root[dir*=rtl] .zola-anchor .icon {
  transform: scaleX(-1);
}

:target .zola-anchor {
  color: var(--accent-color-alpha);
}