:root {
  /* Font Families & Syntax */
  --font-family: "IBM Plex Sans", -apple-system, system-ui, sans-serif;
  --font-family-monospace: "IBM Plex Mono", Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono,
    Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono,
    Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New,
    Courier, monospace;
  --syntax-tab-size: 2;

  --brand-orange: #f08a42;
  --social-mastodon: #8373e7;
  --tag: var(--brand-orange);

  --bg: #f8f6f2;
  --text: #301e0e;
  --accent: #c54a20;
  --border-subtle: #a7a29b;
  --border-strong: #a6593f;

  --link-visited: #5c3770;
  --link: #275d27;
  --link-active: #662512;

  --blockquote-bg: #f2efe8;
  --blockquote-text: #5d3d32;
  --table-header-bg: #f1ece2;
  --table-row-stripe-bg: #f4f1eb;

  --text-heading: #bd4d28;
  --text-muted: #5c5137;
  --text-emphasis: #3fa63f;

  --snow-fall-color: rebeccapurple;
}

/* --- Dark Theme --- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10141b;
    --text: #e9e2d7;
    --accent: #e88f63;
    --border-subtle: #4b566e;
    --border-strong: #d18661;

    --link-visited: #b990d6;
    --link: #7dcd8a;
    --link-active: #ff9b4f;

    --blockquote-bg: #191f2b;
    --blockquote-text: #dfd3c3;
    --table-header-bg: #1e2430;
    --table-row-stripe-bg: #131720;

    --text-heading: #f0a07e;
    --text-muted: #bca98f;
    --text-emphasis: #8cd899;

    --snow-fall-color: unset;
  }
}
/***
* CSS Reset
* Based on the modern CSS reset by Andy Bell
* https://piccalil.li/blog/a-modern-css-reset/
***/

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

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}
/* @link https://utopia.fyi/type/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
  --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
  --step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
  --step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
  --step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);
}

h1 {
  font-size: var(--step-4);
}
h2 {
  font-size: var(--step-3);
}
h3 {
  font-size: var(--step-2);
}
h4 {
  font-size: var(--step-1);
}
h5 {
  font-size: var(--step-0);
}
h6 {
  font-size: var(--step--1);
}
body {
  font-size: var(--step-0);
}
pre {
  /* eslint-disable-next-line css/no-important */
  font-size: var(--step--1) !important;
}
pre,
code {
  /* eslint-disable-next-line css/no-important */
  font-family: var(--font-family-monospace) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-heading);
}

blockquote {
  margin-inline: 0;
  padding: 0.5em 1em;
  border-inline-start: 4px solid var(--accent);
  background-color: var(--blockquote-bg);
  color: var(--blockquote-text);
  font-style: italic;
}

/* ibm-plex-sans-latin-400-normal */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ibm-plex-sans-latin-400-italic */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/ibm-plex-sans-latin-400-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ibm-plex-sans-latin-700-normal */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/ibm-plex-sans-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ibm-plex-mono-latin-400-normal */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Global stylesheet */
* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
  font-family: var(--font-family);
  color: var(--text);
  background-color: var(--bg);
  width: 100%;
  min-height: 100vh;
}

html {
  overflow-y: scroll;
  overflow-x: hidden;
}

/* Base table and code styles that are truly global */
table {
  width: 100%;
  margin: 2rem 0;
  border-collapse: collapse;
  text-align: left;
}

table th,
table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
}

table th {
  background-color: var(--table-header-bg);
  font-weight: bold;
}

table tbody tr:nth-child(even) {
  background-color: var(--table-row-stripe-bg);
}

pre:not([class*="language-"]) {
  margin: 0.5em 0;
  line-height: 1.375;
  -moz-tab-size: var(--syntax-tab-size);
  -o-tab-size: var(--syntax-tab-size);
  tab-size: var(--syntax-tab-size);
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  overflow-x: auto;
}

code {
  word-break: break-all;
}
@media (max-width: 550px) {
  pre {
    width: 100vw;
    transform: translateX(-1rem);
  }
  .callout pre {
    width: calc(100vw - 2rem);
    transform: translateX(0);
  }
  main img {
    max-width: 100vw;
    transform: translateX(-1rem);
  }
  .projectlist-description,
  .projectlist-metadata {
    font-size: var(--step--1);
  }
  footer svg:has(use) {
    width: 1.25em;
    height: 1.25em;
  }
  .desktop-only {
    display: none;
  }
  .nav {
    gap: 0.5rem;
  }
  .social-links a {
    padding: 0.25rem;
  }
  .social-links-cta {
    display: flex;
    flex-direction: column;
  }

  /* Mobile styles for navigation components */
  .links-nextprev {
    flex-direction: column;
    gap: 1em;
  }

  .links-nextprev-next {
    text-align: left;
  }

  .post-navigation {
    flex-direction: column;
    gap: 1em;
  }

  .post-navigation-next {
    text-align: left;
  }

  /* Make tables scrollable on small screens */
  table {
    display: block;
    width: 100vw;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* max-width: 100vw; */
    transform: translateX(-1rem);
    font-size: var(--step--1);
  }
  table th,
  table td {
    padding: 0.5rem;
  }
}
/* Layout Utilities */

/* Stack utilities */
.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack > * {
  margin-block: 0;
} 

.stack > * + * {
  margin-block-start: var(--space, 1.5rem);
}

/* Cluster utilities */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space, 1rem);
  justify-content: flex-start;
  align-items: center;
}
/* Spacing Utilities */

/* Padding utilities */
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-4 { padding: 1rem; }
.p-8 { padding: 2rem; }

.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }

.pb-4 { padding-bottom: 1rem; }

/* Margin utilities */
.m-0 { margin: 0; }
.m-auto { margin: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

.m-2 { margin: 0.5em; }
.m-4 { margin: 1rem; }
.m-8 { margin: 2rem; }

.my-2 { margin-top: 0.5em; margin-bottom: 0.5em; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.my-8 { margin-top: 2rem; margin-bottom: 2rem; }
/* Typography Utilities */

/* Font size utilities */
.text-xs { font-size: var(--step--1); }
.text-sm { font-size: var(--step-0); }
.text-base { font-size: var(--step-0); }
.text-lg { font-size: var(--step-1); }
.text-xl { font-size: var(--step-2); }

/* Font weight utilities */
.font-normal { font-weight: normal; }
.font-bold { font-weight: bold; }

/* Font style utilities */
.italic { font-style: italic; }
.not-italic { font-style: normal; }

/* Text alignment utilities */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Text decoration utilities */
.underline { text-decoration: underline; }
.no-underline { text-decoration: none; }

/* Line height utilities */
.leading-normal { line-height: 1.5; }
.leading-tight { line-height: 1.375; }

/* Font family utilities */
.font-sans { font-family: var(--font-family); }
.font-mono { font-family: var(--font-family-monospace); }

/* Word break utilities */
.break-all { word-break: break-all; }
.break-normal { word-break: normal; }

/* White space utilities */
.whitespace-normal { white-space: normal; }
.whitespace-pre { white-space: pre; }
.whitespace-nowrap { white-space: nowrap; }

/* Base element typography */
p {
  line-height: 1.5;
}

li {
  line-height: 1.5;
}
/* Color Utilities */

/* Text color utilities */
.text-primary { color: var(--text); }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent); }
.text-brand { color: var(--brand-orange); }
.text-link { color: var(--link); }
.text-link-visited { color: var(--link-visited); }
.text-link-active { color: var(--link-active); }

/* Background color utilities */
.bg-primary { background-color: var(--bg); }
.bg-accent { background-color: var(--accent); }
.bg-brand { background-color: var(--brand-orange); }
.bg-blockquote { background-color: var(--blockquote-bg); }
.bg-table-header { background-color: var(--table-header-bg); }
.bg-table-stripe { background-color: var(--table-row-stripe-bg); }

/* Border color utilities */
.border-subtle { border-color: var(--border-subtle); }
.border-strong { border-color: var(--border-strong); }
.border-brand { border-color: var(--brand-orange); }

/* SVG color utilities */
.svg-primary { color: var(--text); }
.svg-brand { color: var(--brand-orange); }
.svg-social-mastodon { color: var(--social-mastodon); }

/* Base link styles */
a[href] {
  color: var(--link);
}

a[href]:visited {
  color: var(--link-visited);
}

a[href]:hover,
a[href]:active {
  color: var(--link-active);
}
/* Size Utilities */

/* Width utilities */
.w-full { width: 100%; }
.w-auto { width: auto; }

/* Height utilities */
.h-auto { height: auto; }

/* Max width utilities */
.max-w-none { max-width: none; }
.max-w-full { max-width: 100%; }

/* Aspect ratio utilities */
.aspect-16-9 { aspect-ratio: 16/9; }
/* Media Utilities */

/* Fluid images via https://www.zachleat.com/web/fluid-images/ */
.fluid-img {
  max-width: 100%;
}

.fluid-img[width][height] {
  height: auto;
}

.fluid-img[src$=".svg"] {
  width: 100%;
  height: auto;
  max-width: none;
}

/* Responsive media */
.responsive-media {
  width: 100%;
  height: auto;
}

.responsive-iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}

/* Base media elements (for when utilities aren't applied) */
img {
  max-width: 100%;
}

img[width][height] {
  height: auto;
}

img[src$=".svg"] {
  width: 100%;
  height: auto;
  max-width: none;
}

video,
iframe {
  width: 100%;
  height: auto;
}

iframe {
  aspect-ratio: 16/9;
}
/* Header Block */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 1rem;
}

.home-link {
  flex-grow: 1;
  font-size: var(--step-1);
  font-weight: bold;
  text-decoration: none;
  color: var(--text);
}

.home-link:hover {
  color: var(--link-active);
}

.atom {
  width: 1.5em;
  height: auto;
  margin-inline-end: 0.25rem;
}

.the-dot {
  color: var(--brand-orange);
}

.social-links {
  display: flex;
  gap: 1rem;
}

.social-links a {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: bold;
  color: var(--text);
}

.social-links a:hover {
  color: var(--link-active);
}

.social-links a[href="/rss.xml"] svg {
  color: var(--brand-orange);
}

.social-links a[href="https://github.com/semanticdata"] svg {
  color: var(--text);
}

.social-links a[href="https://social.lol/@database"] svg {
  color: var(--social-mastodon);
}

.social-links-cta {
  display: flex;
  gap: 1rem;
}

.social-links-cta a {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: bold;
  color: var(--text);
}

.social-links-cta a:hover {
  color: var(--link-active);
}

.social-links-cta a[href="/rss.xml"] svg {
  color: var(--brand-orange);
}

.social-links-cta a[href="https://github.com/semanticdata"] svg {
  color: var(--text);
}

.social-links-cta a[href="https://social.lol/@database"] svg {
  color: var(--social-mastodon);
}

.desktop-only {
  color: var(--text);
}

.desktop-only:hover {
  color: var(--link-active);
}

.desktop-only-cta {
  color: var(--text);
}

.desktop-only-cta:hover {
  color: var(--link-active);
}
/* Navigation Block */
.main-nav {
  width: 100%;
  border-bottom: 1px dashed var(--border-subtle);
  padding-block-end: 1rem;
}

.main-nav .nav {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  flex: 1;
}

.nav-item {
  font-size: var(--step--1);
  border: dashed 1px var(--border-strong);
  border-radius: 5px;
  padding: 0.5rem 1rem;
  flex: 1 1 0%;
  text-align: center;
  text-decoration: none;
}

.nav-item:hover {
  transform: translateY(-2px) translateX(-2px);
  box-shadow: 6px 10px rgba(0, 0, 0, 0.15);
  border-style: solid;
  transition: all 0.2s ease-out;
  text-decoration: none;
  border-color: var(--border-strong);
}

.nav-item[href][aria-current="page"] {
  transform: translateY(-2px) translateX(-2px);
  box-shadow: 6px 10px rgba(0, 0, 0, 0.15);
  border-style: solid;
  border-color: var(--brand-orange);
  color: var(--accent);
}

.nav a:visited:not(:hover) {
  color: var(--link);
}/* Footer Block */
.footer {
  border-top: 1px dashed var(--border-subtle);
  padding-block: 1em;
  margin-block-start: 2rem;
}

.footer p {
  margin-block-start: 0;
}

.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
  /* margin-block-end: 1em; */
}

.footer-links li {
  color: var(--text-muted);
}

.footer-links a {
  text-decoration: none;
  color: var(--link);
}

.footer-links a:hover {
  color: var(--link-active);
}

.footer-gifs {
  display: flex;
  justify-content: center;
  gap: 0.2em;
  flex-wrap: wrap;
}

.footer-gifs img {
  max-width: unset;
}

.footer-gifs a {
  text-decoration: none;
}
/* Posts list */
.post-metadata {
  display: flex;
  flex-direction: column;
  border: 1px dashed var(--border-subtle);
  border-radius: 5px;
  padding: 0.5rem;
  align-items: center;
  justify-content: center;
  margin-block-start: 1rem;
}
.post-metadata time {
  color: var(--text-muted);
}
.post-metadata > p {
  margin-block: 0.5rem;
}
/* .post-tags {
  margin-block-end: 0.5rem;
} */
.postlist {
  counter-reset: start-from var(--postlist-index);
  list-style: none;
  padding: 0;
  padding-left: 1.5rem;
}
.postlist-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  counter-increment: start-from -1;
  margin-block-end: 1em;
}
.postlist-item:before {
  display: inline-block;
  pointer-events: none;
  content: "" counter(start-from, decimal-leading-zero) ". ";
  line-height: 100%;
  text-align: right;
  margin-left: -1.5rem;
}
.postlist-date,
.postlist-item:before {
  font-size: var(--step--1);
  color: var(--text-muted);
}
.postlist-date {
  word-spacing: -0.5px;
}
.postlist-link {
  font-weight: bold;
  flex-basis: calc(100% - 1.5rem);
  padding-left: 0.25em;
  padding-right: 0.5em;
  text-underline-position: from-font;
  text-underline-offset: 0;
  text-decoration-thickness: 1px;
}
.postlist-item-active .postlist-link {
  font-weight: bold;
}

.taglist {
  padding-left: 1.5rem;
}

/* Tags */
.post-tag {
  font-style: italic;
  font-size: var(--step--1);
}
/* Projects */
.project-metadata {
  display: flex;
  flex-direction: column;
  border: 1px dashed var(--border-subtle);
  border-radius: 5px;
  padding: 1rem;
  align-items: center;
  justify-content: center;
}
.project-tags {
  margin-block: 0.5rem;
}
.projectlist {
  list-style-type: none;
  padding: 0;
}
.projectlist .projectlist-item:not(:last-child) {
  margin-bottom: 1em;
  padding-block-end: 1rem;
  border-bottom: 1px dashed var(--border-subtle);
}
.projectlist-link {
  display: flex;
  align-items: center;
  gap: 1em;

  border: 1px dashed var(--border-subtle);
  border-radius: 5px;
  width: 100%;
  padding: 1em;
  text-decoration: none;
}
.projectlist-link:hover {
  transform: translateY(-2px) translateX(-2px);
  box-shadow: 6px 10px rgba(0, 0, 0, 0.15);
  border-style: solid;
  transition: all 0.2s ease-out;
}

.projectlist-title {
  color: var(--text);
}

.projectlist-description {
  color: var(--text);
}

.projectlist-icon-container {
  flex-shrink: 0;
  line-height: 1;
}
.projectlist-icon-container > svg {
  color: var(--text);
}

.projectlist-text-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}

.projectlist-tag {
  color: var(--tag);
  font-size: var(--step--1);
}
.projectlist-tag::before {
  content: "#";
}

.projectlist-item {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2rem;
}
.projectlist-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
}
.projectlist-title svg {
  font-size: var(--step-2);
  flex-shrink: 0;
}
.projectlist-title a {
  text-decoration: none;
}
.projectlist-description {
  margin-bottom: 0.75rem;
}
.projectlist-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.projectlist-links a {
  margin-right: 1rem;
}
.projectlist {
  list-style: none;
  padding-left: 0;
}
/* Exception Layer - Overrides and Specific Fixes */

/* Accessibility helpers */
.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Skip link specific positioning */
#skip-link {
  text-decoration: none;
  background: var(--bg);
  color: var(--text);
  padding: 0.5rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
}

#skip-link.visually-hidden:focus {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 999;
}

/* Selection styles */
::selection {
  background-color: var(--link-visited);
  color: var(--bg);
}

/* View transition support */
@view-transition {
  navigation: auto;
}

/* Specific element overrides */
hr {
  border: none;
  border-top: 1px dashed var(--border-subtle);
  margin: 2rem 0;
}

/* Prose specific styling */
.prose img {
  margin-inline: auto;
}

/* Font Awesome specific styling */
svg:has(use) {
  height: 1rem;
  width: 1rem;
}

/* Subtitle specific styling */
.subtitle {
  font-style: italic;
  color: var(--text-muted);
  font-family: var(--font-family-monospace);
}
/* Composition Layer - Layout Compositions */

/* Default page layout */
.page-layout {
  max-width: min(80ch, 100% - 2rem);
  margin: 0 auto;
}

/* Main content layout */
.content-wrapper {
  max-width: min(80ch, 100% - 4rem);
  margin: 0 auto;
}

.main-content {
  max-inline-size: 65ch;
  margin-inline: auto;
}

/* Navigation layout */
.nav-layout {
  width: 100%;
  border-bottom: 1px dashed var(--border-subtle);
  padding-block-end: 1rem;
}

/* Post navigation layout */
.post-navigation {
  display: flex;
  justify-content: space-between;
  gap: 0.5em 1em;
  list-style: none;
  padding: 0;
  font-size: var(--step--1);
}

.post-navigation > * {
  flex-grow: 1;
}

.post-navigation-next {
  text-align: right;
}

/* Links next/prev navigation */
.links-nextprev {
  display: flex;
  justify-content: space-between;
  gap: 0.5em 1em;
  list-style: none;
  padding: 0;
  font-size: var(--step--1);
}

.links-nextprev > * {
  flex-grow: 1;
}

.links-nextprev-next {
  text-align: right;
}

/* Call to action layout */
.cta-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.post-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Table layout */
.table-layout {
  width: 100%;
  margin: 2rem 0;
  border-collapse: collapse;
  text-align: left;
}

/* Code block layout */
.code-layout {
  margin: 0.5em 0;
  line-height: 1.375;
  -moz-tab-size: var(--syntax-tab-size);
  -o-tab-size: var(--syntax-tab-size);
  tab-size: var(--syntax-tab-size);
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  overflow-x: auto;
}
/**
 * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
 * Based on https://github.com/chriskempson/tomorrow-theme
 * @author Rose Pritchard
 */

code[class*="language-"],
pre[class*="language-"] {
	color: #ccc;
	background: none;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 1em;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;

}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #2d2d2d;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
	white-space: normal;
}

.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: #999;
}

.token.punctuation {
	color: #ccc;
}

.token.tag,
.token.attr-name,
.token.namespace,
.token.deleted {
	color: #e2777a;
}

.token.function-name {
	color: #6196cc;
}

.token.boolean,
.token.number,
.token.function {
	color: #f08d49;
}

.token.property,
.token.class-name,
.token.constant,
.token.symbol {
	color: #f8c555;
}

.token.selector,
.token.important,
.token.atrule,
.token.keyword,
.token.builtin {
	color: #cc99cd;
}

.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.variable {
	color: #7ec699;
}

.token.operator,
.token.entity,
.token.url {
	color: #67cdcc;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}

.token.inserted {
	color: green;
}
/*
 * New diff- syntax
 */

pre[class*="language-diff-"] {
  --eleventy-code-padding: 1.25em;
  padding-left: var(--eleventy-code-padding);
  padding-right: var(--eleventy-code-padding);
}
.token.deleted {
  background-color: hsl(0, 51%, 37%);
  color: inherit;
}
.token.inserted {
  background-color: hsl(126, 31%, 39%);
  color: inherit;
}

/* Make the + and - characters unselectable for copy/paste */
.token.prefix.unchanged,
.token.prefix.inserted,
.token.prefix.deleted {
  -webkit-user-select: none;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 2px;
  padding-bottom: 2px;
}
.token.prefix.inserted,
.token.prefix.deleted {
  width: var(--eleventy-code-padding);
  background-color: rgba(0, 0, 0, 0.2);
}

/* Optional: full-width background color */
.token.inserted:not(.prefix),
.token.deleted:not(.prefix) {
  display: block;
  margin-left: calc(-1 * var(--eleventy-code-padding));
  margin-right: calc(-1 * var(--eleventy-code-padding));
  text-decoration: none; /* override del, ins, mark defaults */
  color: inherit; /* override del, ins, mark defaults */
}
/**
 * Color about
 */
:root {
  --bold-modifier: 200;
  --line-height-tight: 1.3;
  --callout-border-width: 0px;
  --callout-border-opacity: 0.25;
  --callout-padding: 12px 12px 12px 24px;
  --callout-radius: 4px;
  --callout-title-color: inherit;
  --callout-title-padding: 0;
  --callout-title-size: inherit;
  --callout-title-weight: 600;
  --callout-content-padding: 0;
  --callout-content-background: transparent;
  --callout-blend-mode: var(darken);
  --callout-info: 8, 109, 221;
  --callout-todo: 8, 109, 221;
  --callout-default: 8, 109, 221;
  --callout-bug: 233, 49, 71;
  --callout-error: 233, 49, 71;
  --callout-fail: 233, 49, 71;
  --callout-success: 8, 185, 78;
  --callout-example: 120, 82, 238;
  --callout-important: 0, 191, 188;
  --callout-summary: 0, 191, 188;
  --callout-tip: 0, 191, 188;
  --callout-question: 236, 117, 0;
  --callout-warning: 236, 117, 0;
  --callout-quote: 158, 158, 158;
  --callout-collapse-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0ibTkgMThsNi02bC02LTYiLz48L3N2Zz4=");
}

.theme-light {
  --callout-blend-mode: var(darken);
}

.theme-dark {
  --callout-blend-mode: var(lighten);
}

html[data-theme="light"] #app {
  --callout-blend-mode: var(darken);
}

html[data-theme="dark"] #app {
  --callout-blend-mode: var(lighten);
}

/**
 * Obsidian callout about
 *
 * The following style is exactly the same as in obsidian
 */
.callout {
  overflow: hidden;
  border-style: solid;
  border-color: rgba(var(--callout-color), var(--callout-border-opacity));
  border-width: var(--callout-border-width);
  border-radius: var(--callout-radius);
  margin: 1em 0;
  mix-blend-mode: var(--callout-blend-mode);
  background-color: rgba(var(--callout-color), 0.08);
  padding: var(--callout-padding);
  --callout-color: var(--callout-default);
  --callout-icon: lucide-pencil;
}
details.callout .callout-title {
  margin: 0;
  cursor: pointer;
}
details.callout .callout-title .callout-fold {
  background-color: rgb(var(--callout-color));
  mask-image: var(--callout-collapse-icon);
  mask-size: 100%;
  -webkit-mask-image: var(--callout-collapse-icon);
  -webkit-mask-size: 100%;
  height: 24px;
  width: 24px;
  transition: 100ms ease-in-out;
}

details[close].callout > .callout-title > .callout-fold {
  transform: rotate(-90deg);
}

details[open].callout > .callout-title > .callout-fold {
  transform: rotate(90deg);
}

.callout .callout-title {
  padding: var(--callout-title-padding);
  display: flex;
  gap: 4px;
  font-size: var(--callout-title-size);
  color: rgb(var(--callout-color));
  line-height: var(--line-height-tight);
  align-items: flex-start;
}
.callout .callout-title .callout-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.callout .callout-title .callout-title-inner {
  --font-weight: var(--callout-title-weight);
  font-weight: var(--font-weight);
  color: var(--callout-title-color);
}
.callout .callout-title .callout-title-inner b,
.callout .callout-title .callout-title-inner strong {
  --font-weight: calc(var(--callout-title-weight) + var(--bold-modifier));
  font-weight: var(--font-weight);
}
.callout .callout-content {
  overflow-x: auto;
  padding: var(--callout-content-padding);
  background-color: var(--callout-content-background);
}
.callout[data-callout="todo"] {
  --callout-color: var(--callout-todo);
  --callout-icon: lucide-check-circle-2;
}
.callout[data-callout="success"],
.callout[data-callout="check"],
.callout[data-callout="done"] {
  --callout-color: var(--callout-success);
  --callout-icon: lucide-check;
}
.callout[data-callout="warning"],
.callout[data-callout="caution"],
.callout[data-callout="attention"] {
  --callout-color: var(--callout-warning);
  --callout-icon: lucide-alert-triangle;
}
.callout[data-callout="danger"],
.callout[data-callout="error"] {
  --callout-color: var(--callout-error);
  --callout-icon: lucide-zap;
}
.callout[data-callout="tip"],
.callout[data-callout="hint"] {
  --callout-color: var(--callout-tip);
  --callout-icon: lucide-flame;
}
.callout[data-callout="example"] {
  --callout-color: var(--callout-example);
  --callout-icon: lucide-list;
}
.callout[data-callout="abstract"],
.callout[data-callout="summary"],
.callout[data-callout="tldr"] {
  --callout-color: var(--callout-summary);
  --callout-icon: lucide-clipboard-list;
}
.callout[data-callout="quote"],
.callout[data-callout="cite"] {
  --callout-color: var(--callout-quote);
  --callout-icon: quote-glyph;
}

/*# sourceMappingURL=index.css.map */