/*
 * FLOWERSHOW THEME: LESSFLOWERY
 * 
 * Inspired by the visual style of LessWrong
 * https://www.lesswrong.com/
 *
 * No LessWrong source code has been reused;
 * this stylesheet is an original work authored from scratch.
 */

/* =======================
    IMPORTS
========================== */

/* Cormorant Garamond */
@import url(https://fonts.bunny.net/css?family=cormorant-garamond:600,600i,700,700i);

/*
font-family: 'Cormorant Garamond', serif;
*/

/* Wittgenstein */
@import url(https://fonts.bunny.net/css?family=wittgenstein:400,400i,700,700i);

/*
font-family: 'Wittgenstein', serif;
*/

/* =======================
    ROOT STYLES
========================== */

:root {
    color-scheme: light dark;
    scroll-behavior: smooth;
}

:root[data-theme="light"] {
    color-scheme: light;
}

:root[data-theme="dark"] {
    color-scheme: dark;
}

/* =======================
    VARIABLES
========================== */

/* UTILITY TYPOGRAPHY VARIABLES 
================================= */

:root {
    
    /* FONT WEIGHTS */
    --font-weight-thin: 100;
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    
    /* FONT SIZE SCALES */
    --scale-minor-second: 1.067;
    --scale-major-second: 1.125;
    --scale-minor-third: 1.200;
    --scale-major-third: 1.250;
    --scale-perfect-fourth: 1.333;
    --scale-augmented-fourth: 1.414;
    --scale-perfect-fifth: 1.500;
    --scale-golden-ratio: 1.618;
    
    /* FONT SIZES */
    --font-size-xx-small: calc(var(--font-size-x-small) / var(--font-size-scale));
    --font-size-x-small: calc(var(--font-size-small) / var(--font-size-scale));
    --font-size-small: calc(var(--font-size-base) / var(--font-size-scale));
    --font-size-medium: var(--font-size-base);
    --font-size-large: calc(var(--font-size-base) * var(--font-size-scale));
    --font-size-x-large: calc(var(--font-size-large) * var(--font-size-scale));
    --font-size-xx-large: calc(var(--font-size-x-large) * var(--font-size-scale));
    --font-size-xxx-large: calc(var(--font-size-xx-large) * var(--font-size-scale));
    --font-size-huge: calc(var(--font-size-xxx-large) * var(--font-size-scale));
    --font-size-gigantic: calc(var(--font-size-huge) * var(--font-size-scale));
    
    /* FONT LINE HEIGHTS */
    --line-height-none: 1;
    --line-height-tight: 1.2;
    --line-height-snug: 1.4;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;
    --line-height-loose: 2;
    
}

/* THEME VARS 
=================== */
/* OVERRIDE THESE VARS TO CUSTOMIZE YOUR THEME */

/* TYPOGRAPHY VARS */
:root {
    /* FONT FACES */
    --font-heading: 'Cormorant Garamond', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
    --font-body: 'Wittgenstein', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
    --font-sans-serif: GreekFallback,Calibri,gill-sans-nova,"Gill Sans","Gill Sans MT",Myriad Pro,Myriad,"Liberation Sans","Nimbus Sans L",Tahoma,Geneva,"Helvetica Neue",Helvetica,Arial,sans-serif;
    
    /* FONT WEIGHTS */
    --font-weight-body: var(--font-weight-normal);
    --font-weight-bold-body: var(--font-weight-bold);
    --font-weight-headings: var(--font-weight-semibold);
    --font-weight-bold-headings: var(--font-weight-bold);
    
    /* FONT SIZES */
    --font-size-base: 1rem; /* VALUE IN REM RECOMMENDED */
    --font-size-scale: var(--scale-major-third);
    
    --font-size-body: var(--font-size-medium);
    --font-size-h1: var(--font-size-huge);
    --font-size-h2: var(--font-size-xxx-large);
    --font-size-h3: var(--font-size-xx-large);
    --font-size-h4: var(--font-size-x-large);
    --font-size-h5: var(--font-size-large);
    --font-size-caption: var(--font-size-small);
    --font-size-smaller: var(--font-size-x-small);
    --font-size-smallest: var(--font-size-xx-small);
    
    /* FONT LINE HEIGHTS */
    --font-line-height-body: var(--line-height-normal);
    --font-line-height-headings: var(--line-height-tight);
}

/*  COLOR VARS - BASE
    OVERRIDE THESE VARIABLES
    TO CUSTOMIZE YOUR THEME COLORS */

:root {
    /*  LIGHT THEME */
    --color-l-background: #f8f4ee;  /* BACKGROUND */
    --color-l-foreground: #252113;  /* TEXT */
    --color-l-accent: #327e09;      /* ACCENT */
    
    /*  DARK THEME FALLBACK
        SWITCH BACKGROUND AND FOREGROUND IF YOU WON'T SPICIFY DARK THEME COLORS */
    --color-d-background: var(--color-l-foreground);   /* BACKGROUND */
    --color-d-foreground: var(--color-l-background);   /* TEXT */
    --color-d-accent: var(--color-l-accent);           /* ACCENT */
    
    /*  DARK THEME */
    --color-d-background: #171717;  /* BACKGROUND */
    --color-d-foreground: #f8f4ee;  /* TEXT */
    --color-d-accent: #327e09;      /* ACCENT */
}

/*  COLOR VARS - GENERATED FROM BASE COLORS 
    YOU DON'T HAVE TO OVERRIDE THESE 
    UNLESS YOU REALLY WANT TO! */

/* BACKWARD COMPATIBILITY FOR OLDER BROWSERS THAT DON'T SUPPORT light-dark() */

:root,
:root[data-theme="light"] {
    --color-background: var(--color-l-background);
    --color-background-surface: oklch(from var(--color-background) calc(l - 0.03) c h);
    
    --color-foreground: var(--color-l-foreground);
    /*--color-foreground-strong: oklch(from var(--color-foreground) calc(l - 0.1684) c h); 
    --color-foreground-emphasis: oklch(from var(--color-foreground) calc(l - 0.1018) c h);
    --color-foreground-subtle: oklch(from var(--color-foreground) calc(l + 0.2118) c h);
    --color-foreground-muted: oklch(from var(--color-foreground) calc(l + 0.3722) c h);
    --color-foreground-faint: oklch(from var(--color-foreground) calc(l + 0.5881) c h);*/
    --color-foreground-50: oklch(from var(--color-foreground) 0.975 c h);
    --color-foreground-100: oklch(from var(--color-foreground) 0.925 c h);
    --color-foreground-200: oklch(from var(--color-foreground) 0.825 c h);
    --color-foreground-300: oklch(from var(--color-foreground) 0.725 c h);
    --color-foreground-400: oklch(from var(--color-foreground) 0.625 c h);
    --color-foreground-500: oklch(from var(--color-foreground) 0.525 c h);
    --color-foreground-600: oklch(from var(--color-foreground) 0.425 c h);
    --color-foreground-700: oklch(from var(--color-foreground) 0.325 c h);
    --color-foreground-800: oklch(from var(--color-foreground) 0.225 c h);
    --color-foreground-900: oklch(from var(--color-foreground) 0.125 c h);
    
    --color-accent: var(--color-l-accent);
    --color-accent-lighter: oklch(from var(--color-accent) calc(l + 0.15) c h);
    --color-accent-darker: oklch(from var(--color-accent) calc(l - 0.1) c h);
}

:root[data-theme="dark"] {
    --color-background: var(--color-d-background);
    --color-background-surface: oklch(from var(--color-background) calc(l + 0.05) c h);
    
    --color-foreground: var(--color-d-foreground);
    /*--color-foreground-strong: oklch(from var(--color-foreground) calc(l + 0.1684) c h); 
    --color-foreground-emphasis: oklch(from var(--color-foreground) calc(l + 0.1018) c h);
    --color-foreground-subtle: oklch(from var(--color-foreground) calc(l - 0.2118) c h);
    --color-foreground-muted: oklch(from var(--color-foreground) calc(l - 0.3722) c h);
    --color-foreground-faint: oklch(from var(--color-foreground) calc(l - 0.5881) c h);*/
    --color-foreground-50: oklch(from var(--color-foreground) 0.210 c h);
    --color-foreground-100: oklch(from var(--color-foreground) 0.255 c h);
    --color-foreground-200: oklch(from var(--color-foreground) 0.345 c h);
    --color-foreground-300: oklch(from var(--color-foreground) 0.435 c h);
    --color-foreground-400: oklch(from var(--color-foreground) 0.525 c h);
    --color-foreground-500: oklch(from var(--color-foreground) 0.615 c h);
    --color-foreground-600: oklch(from var(--color-foreground) 0.705 c h);
    --color-foreground-700: oklch(from var(--color-foreground) 0.795 c h);
    --color-foreground-800: oklch(from var(--color-foreground) 0.885 c h);
    --color-foreground-900: oklch(from var(--color-foreground) 0.975 c h);
    
    --color-accent: var(--color-d-accent);
    --color-accent-lighter: oklch(from var(--color-accent) calc(l + 0.15) c h);
    --color-accent-darker: oklch(from var(--color-accent) calc(l - 0.1) c h);
}

/* WIDTH VARIABLES 
============================================== */

:root {
    --width-content: 42.5rem; /* 680px */
    --width-content-toc: 62.5rem; /* 1000px*/
    --width-content-toc-sidebar: 82.5rem; /* 1320px */
    --width-sidebar: 14rem;
    --width-toc: 14rem;
    --width-hero-no-img: 42.5rem;
    --width-hero-img: 62.5rem;
    --width-list-component: 48rem; /* 768px */
    /*--width-navbar: 82.5rem;
    --width-footer: 82.5rem;*/
    --width-navbar: auto;
    --width-footer: auto;
}

/* USE OUR COLOR VARS FOR TAILWIND PROSE VARS 
============================================== */

.rendered-mdx:not(.is-plain) {
    --tw-prose-body: var(--color-foreground-700);
    --tw-prose-headings: var(--color-foreground-700);
    --tw-prose-lead: var(--color-foreground-700);
    --tw-prose-links: var(--color-foreground-700);
    --tw-prose-bold: var(--color-foreground-700);
    
    --tw-prose-counters: var(--color-foreground-500);
    --tw-prose-bullets: var(--color-foreground-300);
    --tw-prose-hr: var(--color-foreground-100);
    
    --tw-prose-quotes: var(--color-foreground-900);
    --tw-prose-quote-borders: var(--color-accent-lighter);
    --tw-prose-quote-borders: light-dark(var(--color-accent-lighter), var(--color-accent-darker));
    
    --tw-prose-captions: var(--color-foreground-500);
    
    --tw-prose-kbd: var(--color-foreground-900);
    --tw-prose-kbd-shadows: var(--color-foreground-900);
    
    --tw-prose-code: var(--color-foreground-900);
    --tw-prose-pre-code: var(--color-foreground-100);
    --tw-prose-pre-bg: var(--color-background-surface);
    
    --tw-prose-th-borders: var(--color-foreground-100);
    --tw-prose-td-borders: var(--color-foreground-100);
    
    --tw-prose-invert-body: var(--color-background);
    --tw-prose-invert-headings: var(--color-background);
    --tw-prose-invert-lead: var(--color-background);
    --tw-prose-invert-links: var(--color-background);
    --tw-prose-invert-bold: var(--color-background);
    
    --tw-prose-invert-counters: var(--color-foreground-500);
    --tw-prose-invert-bullets: var(--color-foreground-700);
    --tw-prose-invert-hr: var(--color-foreground-800);
    
    --tw-prose-invert-quotes: var(--color-background);
    --tw-prose-invert-quote-borders: var(--color-accent-darker);
    --tw-prose-invert-quote-borders: light-dark(var(--color-accent-darker), var(--color-accent-lighter));
    
    --tw-prose-invert-captions: var(--color-foreground-500);
    
    --tw-prose-invert-kbd: var(--color-background);
    --tw-prose-invert-kbd-shadows: var(--color-background);
    
    --tw-prose-invert-code: var(--color-background);
    --tw-prose-invert-pre-code: var(--color-foreground-900);
    --tw-prose-invert-pre-bg: var(--color-background-surface);
    
    --tw-prose-invert-th-borders: var(--color-foreground-800);
    --tw-prose-invert-td-borders: var(--color-foreground-800);
}

.text-primary {
    color: var(--color-foreground-700)
}

.text-primary-emphasis {
    color: var(--color-foreground-800)
}

.text-primary-muted {
    color: var(--color-foreground-300)
}

.text-primary-strong {
    color: var(--color-foreground-900)
}

.text-primary-subtle {
    color: var(--color-foreground-500)
}

.text-primary-faint {
    color: var(--color-foreground-100)
}

/* =======================
    TYPOGRAPHY
========================== */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
    -webkit-appearance: optimizelegibility;
    -moz-appearance: optimizelegibility;
    appearance: optimizelegibility;
    font-kerning: auto;
}

body,
.rendered-mdx:not(.is-plain) {
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-body);
    line-height: var(--font-line-height-body);
}

h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-headings);
    line-height: var(--font-line-height-headings);
}

strong {
    font-weight: var(--font-weight-bold-body);
}

h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong {
    font-weight: var(--font-weight-bold-headings);
}

.rendered-mdx:not(.is-plain) :where([class~=lead]) {
    font-size: var(--font-size-body);
    line-height: var(--font-line-height-body);
}

.rendered-mdx:not(.is-plain) :where(a) {
    font-weight: var(--font-weight-body);
}

.rendered-mdx:not(.is-plain) :where(strong) {
    font-weight: var(--font-weight-bold-body);
}

.rendered-mdx:not(.is-plain) :where(ol>li)::marker {
    font-weight: var(--font-weight-body);
}

.rendered-mdx:not(.is-plain) :where(dt) {
    font-weight: var(--font-weight-bold-body);
}

.rendered-mdx:not(.is-plain) :where(blockquote) {
    font-weight: var(--font-weight-body);
    font-style: italic;
}

h1,
.page-hero-title,
.page-header-title,
.rendered-mdx:not(.is-plain) :where(h1) {
    font-weight: var(--font-weight-headings);
    font-size: var(--font-size-h1);
    line-height: var(--font-line-height-headings);
}

.rendered-mdx:not(.is-plain) :where(h1 strong) {
    font-weight: var(--font-weight-bold-headings);
}

h2,
.rendered-mdx:not(.is-plain) :where(h2) {
    font-weight: var(--font-weight-headings);
    font-size: var(--font-size-h2);
    line-height: var(--font-line-height-headings);
}

.rendered-mdx:not(.is-plain) :where(h2 strong) {
    font-weight: var(--font-weight-bold-headings);
}

h3,
.rendered-mdx:not(.is-plain) :where(h3) {
    font-weight: var(--font-weight-headings);
    font-size: var(--font-size-h3);
    line-height: var(--font-line-height-headings);
}

.rendered-mdx:not(.is-plain) :where(h3 strong) {
    font-weight: var(--font-weight-bold-headings);
}

h4,
.rendered-mdx:not(.is-plain) :where(h4) {
    font-weight: var(--font-weight-headings);
    font-size: var(--font-size-h4);
    line-height: var(--font-line-height-headings);
}

.rendered-mdx:not(.is-plain) :where(h4 strong) {
    font-weight: var(--font-weight-bold-headings);
}

.rendered-mdx:not(.is-plain) :where(kbd) {
    font-weight: var(--font-weight-body);
    font-size: var(--font-size-caption);
}

.rendered-mdx:not(.is-plain) :where(code) {
    font-weight: var(--font-weight-body);
    font-size: var(--font-size-caption) !important;
}

.rendered-mdx:not(.is-plain) :where(h2 code) {
    font-size: var(--font-size-caption);
}

.rendered-mdx:not(.is-plain) :where(h3 code) {
    font-size: var(--font-size-caption);
}

.rendered-mdx:not(.is-plain) :where(pre) {
    font-weight: var(--font-weight-body);
    font-size: var(--font-size-caption);
    line-height: var(--font-line-height-body);
}

.rendered-mdx:not(.is-plain) :where(table) {
    font-size: var(--font-size-body);
    line-height: var(--font-line-height-body);
}

.rendered-mdx:not(.is-plain) :where(thead th) {
    font-weight: var(--font-weight-bold-body);
}

.rendered-mdx:not(.is-plain) :where(figcaption) {
    font-size: var(--font-size-caption);
    line-height: var(--font-line-height-body);
}

/* =============================================
================================================

    COMPONENTS

================================================
================================================ */

/* =======================
    PROSE / PAGE CONTENT
========================== */

.page-body {
    max-width: none;
}

.rendered-mdx {
    color: var(--color-foreground-700);
    min-height: 55vh;
    max-width: none;
}

.rendered-mdx>h1:first-child {
    display: none
}

.rendered-mdx .heading-link {
    padding: 1px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: auto 0;
    border-radius: 5px;
    background: var(--color-foreground-100);
    opacity: 0;
    transition: opacity .2s
}

.rendered-mdx :is(h1,h2,h3,h4,h5,h6) {
    margin-left: -2rem!important;
    padding-left: 2rem!important;
    scroll-margin-top: 4.5rem;
    position: relative
}

.rendered-mdx :is(h1,h2,h3,h4,h5,h6):hover .heading-link {
    opacity: 1
}

.rendered-mdx .heading-link svg {
    transform: scale(.75);
    fill: var(--color-accent);
}

@media screen and (max-width: 640px) {
    .rendered-mdx .heading-link {
        visibility:hidden
    }
}

.rendered-mdx section:first-of-type h1:first-child {
    display: none
}

.rendered-mdx ul.contains-task-list {
    list-style-type: none
}

.rendered-mdx input[type=checkbox] {
    margin: 0 .2em .25em -1.6em;
    vertical-align: middle
}

/* ELEMENTS */

.rendered-mdx:not(.is-plain) :where(p) {
    margin-top: 1em;
    margin-bottom: 1em
}

.rendered-mdx:not(.is-plain) :where([class~=lead]) {
    color: var(--color-foreground-700);
    margin-top: 1em;
    margin-bottom: 1em
}

.rendered-mdx:not(.is-plain) :where(a) {
    text-decoration: none;
    color: var(--color-accent);
    transition-duration: 0.3s;
}

.rendered-mdx:not(.is-plain) :where(a):is(:hover, :active, :focus) {
    color: var(--color-foreground-700);
    text-decoration: underline;
}

.rendered-mdx:not(.is-plain) :where(strong) {
    color: var(--color-foreground-700);
}

.rendered-mdx:not(.is-plain) :where(a strong) {
    color: inherit
}

.rendered-mdx:not(.is-plain) :where(blockquote strong) {
    color: inherit
}

.rendered-mdx:not(.is-plain) :where(thead th strong) {
    color: inherit
}

.rendered-mdx:not(.is-plain) :where(ol) {
    list-style-type: decimal;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-left: 1.625em
}

.rendered-mdx:not(.is-plain) :where(ol[type=A]) {
    list-style-type: upper-alpha
}

.rendered-mdx:not(.is-plain) :where(ol[type=a]) {
    list-style-type: lower-alpha
}

.rendered-mdx:not(.is-plain) :where(ol[type=A s]) {
    list-style-type: upper-alpha
}

.rendered-mdx:not(.is-plain) :where(ol[type=a s]) {
    list-style-type: lower-alpha
}

.rendered-mdx:not(.is-plain) :where(ol[type=I]) {
    list-style-type: upper-roman
}

.rendered-mdx:not(.is-plain) :where(ol[type=i]) {
    list-style-type: lower-roman
}

.rendered-mdx:not(.is-plain) :where(ol[type=I s]) {
    list-style-type: upper-roman
}

.rendered-mdx:not(.is-plain) :where(ol[type=i s]) {
    list-style-type: lower-roman
}

.rendered-mdx:not(.is-plain) :where(ol[type="1"]) {
    list-style-type: decimal
}

.rendered-mdx:not(.is-plain) :where(ul) {
    list-style-type: disc;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-left: 1.625em
}

.rendered-mdx:not(.is-plain) :where(ol>li)::marker {
    color: var(--color-foreground-500)
}

.rendered-mdx:not(.is-plain) :where(ul>li)::marker {
    color: var(--color-foreground-300)
}

.rendered-mdx:not(.is-plain) :where(dt) {
    color: var(--color-foreground-700);
    margin-top: 1em
}

.rendered-mdx:not(.is-plain) :where(hr) {
    border-color: var(--color-foreground-100);
    border-top-width: 1px;
    margin-top: 2em;
    margin-bottom: 2em
}

.rendered-mdx:not(.is-plain) :where(blockquote) {
    color: var(--color-foreground-900);
    border-left-width: .25rem;
    border-left-color: light-dark(var(--color-accent-lighter), var(--color-accent-darker));
    quotes: "\201C""\201D""\2018""\2019";
    margin-top: 1.2em;
    margin-bottom: 1.2em;
    padding-left: 1em
}

.rendered-mdx:not(.is-plain) :where(blockquote p:first-of-type):before {
    content: none
}

.rendered-mdx:not(.is-plain) :where(blockquote p:last-of-type):after {
    content: close-quote
}

.rendered-mdx:not(.is-plain) :where(h1) {
    color: var(--color-foreground-700);
    margin-top: 0;
    margin-bottom: .625em;
}

.rendered-mdx:not(.is-plain) :where(h1 strong) {
    color: inherit
}

.rendered-mdx:not(.is-plain) :where(h2) {
    color: var(--color-foreground-700);
    margin-top: 1em;
    margin-bottom: .625em;
}

.rendered-mdx:not(.is-plain) :where(h2 strong) {
    color: inherit
}

.rendered-mdx:not(.is-plain) :where(h3) {
    color: var(--color-foreground-700);
    margin-top: 1em;
    margin-bottom: .625em;
}

.rendered-mdx:not(.is-plain) :where(h3 strong) {
    color: inherit
}

.rendered-mdx:not(.is-plain) :where(h4) {
    color: var(--color-foreground-700);
    margin-top: 1em;
    margin-bottom: .625em;
}

.rendered-mdx:not(.is-plain) :where(h4 strong) {
    color: inherit
}

.rendered-mdx:not(.is-plain) :where(img) {
    margin-top: 1em;
    margin-bottom: 1em
}

.rendered-mdx:not(.is-plain) :where(picture) {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em
}

.rendered-mdx:not(.is-plain) :where(kbd) {
    font-family: inherit;
    color: var(--color-foreground-900);
    box-shadow: 0 0 0 1px oklch(from var(--color-foreground-900) l c h / 10%), 0 3px 0 oklch(from var(--color-foreground-900) l c h / 10%);
    border-radius: .3125rem;
    padding: .1875em .375em
}

.rendered-mdx:not(.is-plain) :where(code) {
    color: var(--color-foreground-900);
    background-color: var(--color-background-surface) !important;
}

.rendered-mdx:not(.is-plain) :where(code):before {
    content: "`"
}

.rendered-mdx:not(.is-plain) :where(code):after {
    content: "`"
}

.rendered-mdx:not(.is-plain) :where(a code) {
    color: inherit
}

.rendered-mdx:not(.is-plain) :where(h1 code) {
    color: inherit
}

.rendered-mdx:not(.is-plain) :where(h2 code) {
    color: inherit;
}

.rendered-mdx:not(.is-plain) :where(h3 code) {
    color: inherit;
}

.rendered-mdx:not(.is-plain) :where(h4 code) {
    color: inherit
}

.rendered-mdx:not(.is-plain) :where(blockquote code) {
    color: inherit
}

.rendered-mdx:not(.is-plain) :where(thead th code) {
    color: inherit
}

.rendered-mdx:not(.is-plain) :where(pre) {
    color: var(--color-foreground-100);
    background-color: var(--color-background-surface);
    overflow-x: auto;
    margin-top: 1.7142857em;
    margin-bottom: 1.7142857em;
    border-radius: .375rem;
    padding: .8571429em 1.1428571em
}

.rendered-mdx:not(.is-plain) :where(pre code) {
    background-color: transparent !important;
    border-width: 0;
    border-radius: 0;
    padding: 0;
    font-weight: inherit;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit
}

.rendered-mdx:not(.is-plain) .pre-copy-button {
    border-color: var(--color-foreground-300);
    background-color: var(--color-foreground-100);
    color: var(--color-foreground-700);
}

.rendered-mdx:not(.is-plain) .pre-copy-button svg {
    color: var(--color-foreground-700);
}

.rendered-mdx:not(.is-plain) :where(pre code):before {
    content: none
}

.rendered-mdx:not(.is-plain) :where(pre code):after {
    content: none
}

.rendered-mdx:not(.is-plain) :where(table) {
    width: 100%;
    table-layout: auto;
    text-align: left;
    margin-top: 1em;
    margin-bottom: 1em;
}

.rendered-mdx:not(.is-plain) :where(thead) {
    border-bottom-width: 1px;
    border-bottom-color: var(--color-foreground-100)
}

.rendered-mdx:not(.is-plain) :where(thead th) {
    color: var(--color-foreground-700);
    vertical-align: bottom;
    padding-right: .5714286em;
    padding-bottom: .5714286em;
    padding-left: .5714286em
}

.rendered-mdx:not(.is-plain) :where(tbody tr) {
    border-bottom-width: 1px;
    border-bottom-color: var(--color-foreground-100)
}

.rendered-mdx:not(.is-plain) :where(tbody tr:last-child) {
    border-bottom-width: 0
}

.rendered-mdx:not(.is-plain) :where(tbody td) {
    vertical-align: baseline
}

.rendered-mdx:not(.is-plain) :where(tfoot) {
    border-top-width: 1px;
    border-top-color: var(--color-foreground-100)
}

.rendered-mdx:not(.is-plain) :where(tfoot td) {
    vertical-align: top
}

.rendered-mdx:not(.is-plain) :where(figure>*) {
    margin-top: 0;
    margin-bottom: 0
}

.rendered-mdx:not(.is-plain) :where(figcaption) {
    color: var(--color-foreground-500);
    margin-top: .625em
}

.rendered-mdx:not(.is-plain) :where(picture>img) {
    margin-top: 0;
    margin-bottom: 0
}

.rendered-mdx:not(.is-plain) :where(video) {
    margin-top: 1em;
    margin-bottom: 1em
}

.rendered-mdx:not(.is-plain) :where(li) {
    margin-top: .25em;
    margin-bottom: .25em
}

.rendered-mdx:not(.is-plain) :where(ol>li) {
    padding-left: .375em
}

.rendered-mdx:not(.is-plain) :where(ul>li) {
    padding-left: .375em
}

.rendered-mdx:not(.is-plain) :where(.rendered-mdx:not(.is-plain)>ul>li p) {
    margin-top: .25em;
    margin-bottom: .25em
}

.rendered-mdx:not(.is-plain) :where(.rendered-mdx:not(.is-plain)>ul>li>:first-child) {
    margin-top: 1em
}

.rendered-mdx:not(.is-plain) :where(.rendered-mdx:not(.is-plain)>ul>li>:last-child) {
    margin-bottom: 1em
}

.rendered-mdx:not(.is-plain) :where(.rendered-mdx:not(.is-plain)>ol>li>:first-child) {
    margin-top: 1em
}

.rendered-mdx:not(.is-plain) :where(.rendered-mdx:not(.is-plain)>ol>li>:last-child) {
    margin-bottom: 1em
}

.rendered-mdx:not(.is-plain) :where(ul ul,ul ol,ol ul,ol ol) {
    margin-top: .5em;
    margin-bottom: .5em
}

.rendered-mdx:not(.is-plain) :where(dl) {
    margin-top: 1em;
    margin-bottom: 1em
}

.rendered-mdx:not(.is-plain) :where(dd) {
    margin-top: .5em;
    padding-left: 1.625em
}

.rendered-mdx:not(.is-plain) :where(hr+*) {
    margin-top: 0
}

.rendered-mdx:not(.is-plain) :where(h2+*) {
    margin-top: 0
}

.rendered-mdx:not(.is-plain) :where(h3+*) {
    margin-top: 0
}

.rendered-mdx:not(.is-plain) :where(h4+*) {
    margin-top: 0
}

.rendered-mdx:not(.is-plain) :where(thead th:first-child) {
    padding-left: 0
}

.rendered-mdx:not(.is-plain) :where(thead th:last-child) {
    padding-right: 0
}

.rendered-mdx:not(.is-plain) :where(tbody td,tfoot td) {
    padding: .5714286em
}

.rendered-mdx:not(.is-plain) :where(tbody td:first-child,tfoot td:first-child) {
    padding-left: 0
}

.rendered-mdx:not(.is-plain) :where(tbody td:last-child,tfoot td:last-child) {
    padding-right: 0
}

.rendered-mdx:not(.is-plain) :where(figure) {
    margin-top: 1em;
    margin-bottom: 1em
}

.rendered-mdx:not(.is-plain) :where(.rendered-mdx:not(.is-plain)>:first-child) {
    margin-top: 0
}

.rendered-mdx:not(.is-plain) :where(.rendered-mdx:not(.is-plain)>:last-child) {
    margin-bottom: 0
}

.rendered-mdx:not(.is-plain) :where(blockquote p:first-of-type):after {
    content: none
}

/* =======================
    ERROR CARDS
========================== */

.error-card {
    display: flex
}

.error-card>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(.75rem * var(--tw-space-x-reverse));
    margin-left: calc(.75rem * calc(1 - var(--tw-space-x-reverse)))
}

.error-card {
    overflow: scroll;
    border-radius: .375rem;
    --tw-bg-opacity: 1;
    background-color: var(--color-foreground-100);
    padding: 1rem;
    text-align: left
}

.error-card-icon {
    height: 1.25rem;
    width: 1.25rem;
    --tw-text-opacity: 1;
    color: #f87171;
}

.error-card-title {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: var(--font-weight-headings);
    color: #991b1b;
}

.error-card-message,.error-card-title {
    font-size: var(--font-size-caption);
    line-height: var(--font-line-height-headings);
}

.error-card-message {
    margin-top: .5rem;
    white-space: pre-wrap;
    font-weight: var(--font-weight-body);
    color: #b91c1c;
}

.error-card-stack {
    margin-top: .5rem;
    border-radius: .375rem;
    --tw-bg-opacity: 1;
    background-color: var(--color-background);
    padding: 1rem;
    font-size: var(--font-size-caption);
    line-height: var(--font-line-height-headings);
}

/* =======================
    LAYOUT
========================== */

body {
    background-color: var(--color-background);
}

.site-layout {
    display: flex;
    width: 100%;
    flex-direction: column
}

/* =======================
    SITE NAVBAR / HEADER
========================== */

.site-navbar {
    position: sticky;
    top: 0;
    z-index: 10;
    /*background-color: oklch(from var(--color-background) l c h / 80%);*/
    background-color: light-dark(#fffc, #000c);
    -webkit-backdrop-filter: saturate(180%) blur(5px);
    backdrop-filter: saturate(180%) blur(5px);
    font-family: var(--font-heading);
    color: var(--color-foreground-700);
    border-bottom: 1px solid var(--color-foreground-100);
}

.site-navbar.is-scrolled {
    --tw-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
    /* OVERRIDE */
    box-shadow: none;
    /*border-bottom: 1px solid var(--color-foreground-100);*/
}

.site-navbar-inner {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    height: 4rem;
    justify-content: space-between;
    max-width: var(--width-navbar);
}

.site-navbar-inner>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)))
}

.site-navbar-inner {
    padding-left: 2rem;
    padding-right: 2rem
}

@media (min-width: 640px) {
    .site-navbar-inner {
        padding-left:2.5rem;
        padding-right: 2.5rem
    }
}

@media (min-width: 1024px) {
    .site-navbar-inner {
        padding-left:3rem;
        padding-right: 3rem
    }
}

.site-navbar-site-title {
    display: flex;
    align-items: center;
    transition-duration: 0.3s;
}

.site-navbar-site-title:is(:hover) {
    opacity: 0.7;
}

.site-navbar-site-title>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(.5rem * var(--tw-space-x-reverse));
    margin-left: calc(.5rem * calc(1 - var(--tw-space-x-reverse)))
}

@media (max-width: 1024px) {
    .site-navbar-site-title {
        flex-grow: 1;
    }
}

.site-navbar-site-logo {
    width: 2rem;
    height: 2rem
}

.site-navbar-site-name {
    font-size: var(--font-size-body);
    line-height: var(--font-line-height-headings);
    font-weight: var(--font-weight-bold-headings);
    letter-spacing: normal;
    color: var(--color-foreground-700);
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .site-navbar-site-name {
        font-size: var(--font-size-h5);
        line-height: var(--font-line-height-headings);
    }
}

.site-navbar-links-container {
    display: none;
    flex-grow: 1
}

.site-navbar-links-container>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)))
}

@media (min-width: 1024px) {
    .site-navbar-links-container {
        display:flex;
        align-items: center
    }
}

.site-navbar-link {
    font-family: var(--font-sans-serif);
    font-size: var(--font-size-body);
    /*font-size: calc(0.9 * var(--font-size-body));*/
    line-height: var(--font-line-height-headings);
    font-weight: var(--font-weight-body);
    letter-spacing: normal;
    text-transform: uppercase;
    color: var(--color-foreground-500);
    transition-duration: 0.3s;
}

.site-navbar-link:is(:hover, :active, :focus) {
    color: var(--color-accent);
}

.site-navbar-search-container {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: flex-end
}

.site-navbar-social-links-container {
    display: none
}

.site-navbar-social-links-container>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(.25rem * var(--tw-space-x-reverse));
    margin-left: calc(.25rem * calc(1 - var(--tw-space-x-reverse)))
}

@media (min-width: 1024px) {
    .site-navbar-social-links-container {
        display:flex;
        align-items: center;
        gap: 0.75rem;
    }
}

.site-navbar-social-link-icon {
    width: 1.25rem;
    height: 1.25rem;
    transition-duration: 0.3s;
}

/*:root[data-theme="dark"] .site-navbar-social-link-icon {
    filter: invert(1);
}*/

.site-navbar-social-link-icon:is(:hover, :active, :focus) {
    opacity: 0.7;
}

.site-navbar-theme-switch-container,
.theme-switch {
    display: flex;
    align-items: center
}

.theme-switch {
    justify-content: center;
    border-radius: 9999px;
    padding: .25rem;
    transition-duration: 0.3s;
    background-color: var(--color-foreground-700);
    /*background-color: light-dark(rgb(var(--color-foreground-100)),rgb(var(--color-foreground-700)))*/
}

.theme-switch:is(:hover, :active, :focus) {
    background-color: var(--color-foreground-300);
}

.theme-switch-icon {
    width: 1rem;
    height: 1rem;
    color: var(--color-background);
    /*color: light-dark(rgb(var(--color-foreground-300)),rgb(var(--color-foreground-100)))*/
}

.site-navbar-mobile-nav-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .375rem;
    color: var(--color-foreground-300);
    transition-duration: 0.3s;
}

.site-navbar-mobile-nav-button:is(:hover, :active, :focus) {
    color: var(--color-foreground-700);
}

.site-navbar-mobile-nav-button:focus {
    outline: 2px solid transparent;
    outline-offset: 2px
}

@media (min-width: 1024px) {
    .site-navbar-mobile-nav-button {
        display:none
    }
}

.site-navbar-mobile-nav-icon {
    width: 1.5rem;
    height: 1.5rem
}

/* =======================
    MOBILE NAVIGATION
========================== */

.mobile-nav {
    position: fixed;
    left: 0;
    right: 0;
    top: 4rem;
    height: calc(100svh - 4rem);
    overflow: scroll;
    overscroll-behavior: none;
    background-color: var(--color-background);
    font-family: var(--font-sans-serif);
    font-size: var(--font-size-body);
}

@media (min-width: 1024px) {
    .mobile-nav {
        display:none
    }
}

.mobile-nav-links-container>:not([hidden])~:not([hidden]),.mobile-nav-social-links-container>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.25rem * var(--tw-space-y-reverse))
}

.mobile-nav-links-container,
.mobile-nav-social-links-container {
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: var(--color-foreground-100);
    padding: .75rem 1rem
}

.mobile-nav-link,
.mobile-nav-social-link {
    display: block;
    padding-top: .25rem;
    padding-bottom: .25rem;
    font-weight: var(--font-weight-body);
}

.mobile-nav-link:is(:hover, :active, :focus),
.mobile-nav-social-link:is(:hover, :active, :focus) {
    font-weight: var(--font-weight-bold-body);
    --tw-text-opacity: 1;
    color: var(--color-foreground-800);
}

.mobile-nav-tree-container {
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: var(--color-foreground-100);
    padding: .75rem 1rem
}

.mobile-nav-tree>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.5rem * var(--tw-space-y-reverse))
}

.mobile-nav-tree {
    padding-top: .5rem;
    padding-bottom: .5rem
}

.mobile-nav-tree-item-children>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.5rem * var(--tw-space-y-reverse))
}

.mobile-nav-tree-item-children {
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1.25rem
}

.mobile-nav-tree-item-self {
    display: flex;
    width: 100%;
    align-items: center;
    text-align: left
}

.mobile-nav-tree-item-self:is(:hover, :active, :focus) {
    font-weight: var(--font-weight-bold-body);
}

.mobile-nav-tree-item-self.is-current,.mobile-nav-tree-item-self:is(:hover, :active, :focus) {
    --tw-text-opacity: 1;
    color: var(--color-foreground-800);
}

.mobile-nav-tree-item-self.is-collapsible.is-open .mobile-nav-tree-item-icon {
    --tw-rotate: 90deg;
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.mobile-nav-tree-item-icon {
    margin-right: .25rem;
    height: 1rem;
    width: 1rem
}

/* =======================
    SITE SEARCH
========================== */

.search-button {
    color: var(--color-foreground-300);
    font-size: var(--font-size-caption);
}

.search-button:is(:hover, :active, :focus) {
    color: var(--color-foreground-700);
}

.search-button:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)
}

.search-icon {
    width: 1.5rem;
    height: 1.5rem
}

.search-modal {
    position: fixed;
    inset: 0;
    z-index: 50
}

.search-modal-backdrop {
    position: absolute;
    inset: 0;
    background-color: oklch(from var(--color-foreground-100) l c h / 50%);
    --tw-backdrop-blur: blur(4px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.search-modal-card-container {
    position: relative;
    z-index: 10;
    display: flex;
    min-height: 100%;
    align-items: flex-start;
    justify-content: center;
    padding: .75rem
}

@media (min-width: 768px) {
    .search-modal-card-container {
        padding:6rem
    }
}

.search-modal-card {
    display: flex;
    width: 100%;
    max-width: 42rem;
    flex-direction: column;
    border-radius: .5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: var(--color-foreground-100);
    --tw-bg-opacity: 1;
    background-color: var(--color-background);
    padding: 1rem;
    --tw-shadow: 0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
}

.search-modal-input-container {
    display: flex;
    align-items: center
}

.search-modal-results-container {
    position: relative
}

.search-modal-input {
    border-style: none;
    background-color: transparent;
    font-size: var(--font-size-caption);
    line-height: var(--font-line-height-headings);
}

.search-modal-input,.search-modal-input:focus {
    outline: 2px solid transparent;
    outline-offset: 2px
}

.search-modal-input:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)
}

.search-modal-input::-ms-clear,.search-modal-input::-ms-reveal {
    display: none
}

.search-modal-input::-webkit-search-cancel-button,.search-modal-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none
}

.search-modal-close-button {
    padding: .25rem;
    --tw-text-opacity: 1;
    color: var(--color-foreground-300)
}

.search-modal-close-button:is(:hover, :active, :focus) {
    --tw-text-opacity: 1;
    color: var(--color-foreground-700)
}

.search-modal-close-icon {
    height: 1.25rem;
    width: 1.25rem
}

.search-modal-results {
    margin-top: .5rem;
    max-height: 60vh;
    min-height: 200px;
    width: 100%;
    overflow: auto;
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: var(--color-foreground-100);
}

.search-modal-status-container {
    display: flex;
    height: 200px;
    align-items: center;
    justify-content: center;
    --tw-text-opacity: 1;
    color: var(--color-foreground-300);
}

.search-modal-status-content {
    text-align: center
}

.search-modal-status-icon {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: .5rem;
    height: 1.5rem;
    width: 1.5rem;
    opacity: .5
}

.search-modal-status-message {
    font-size: var(--font-size-caption);
    line-height: var(--font-line-height-headings);
}

.search-modal-status-submessage {
    margin-top: .25rem;
    font-size: var(--font-size-smaller);
    line-height: var(--line-height-none);
    opacity: .75
}

.search-modal-loading-spinner {
    animation: spin 1s linear infinite;
    border-radius: 9999px;
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: var(--color-foreground-300);
    border-top-color: transparent
}

.search-modal-loading-spinner,.search-modal-stalled-spinner {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: .5rem;
    height: 1.5rem;
    width: 1.5rem
}

.search-modal-stalled-spinner {
    animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite;
    border-radius: 9999px;
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: var(--color-accent);
    border-top-color: transparent
}

.search-modal-hits-list {
    padding-top: .5rem;
    padding-bottom: .5rem
}

.search-modal-hits-item {
    border-radius: .375rem;
    padding: .75rem 1rem;
    transition-duration: 0.3s;
}

.search-modal-hits-item:is(:hover, :active, :focus) {
    background-color: var(--color-foreground-100);
}

.search-modal-error-icon {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: .5rem;
    display: flex;
    height: 1.5rem;
    width: 1.5rem;
    align-items: center;
    justify-content: center;
    --tw-text-opacity: 1;
    color: rgb(202 138 4/var(--tw-text-opacity,1))
}

.search-modal-error-icon-text {
    font-size: var(--font-size-smaller);
    line-height: var(--line-height-none);
    font-weight: var(--font-weight-headings);
}

.search-modal-highlight {
    --tw-bg-opacity: 1!important;
    background-color: var(--color-foreground-100) !important;
}

.search-modal-hit-link {
    display: block;
}

.search-modal-hit-title {
    font-weight: var(--font-weight-body);
}

.search-modal-hit-content {
    margin-top: .25rem;
    font-size: var(--font-size-caption);
    line-height: var(--font-line-height-headings);
    --tw-text-opacity: 1;
    color: var(--color-foreground-300);
}

/* =======================
    SITE FOOTER
========================== */

.site-footer {
    font-family: var(--font-sans-serif);
}

.site-footer {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: var(--width-footer);
    padding-left: 2rem;
    padding-right: 2rem
}

@media (min-width: 640px) {
    .site-footer {
        padding-left:2.5rem;
        padding-right: 2.5rem
    }
}

@media (min-width: 1024px) {
    .site-footer {
        padding-left:3rem;
        padding-right: 3rem
    }
}

.site-footer-inner {
    margin-top: 3rem;
    border-top-width: 1px;
    border-color: var(--color-foreground-100);
    background-color: inherit;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    font-size: var(--font-size-caption);
    line-height: var(--font-line-height-headings);
    --tw-text-opacity: 1;
    color: var(--color-foreground-500);
}

@media (min-width: 640px) {
    .site-footer-inner {
        margin-top:4rem;
        padding-top: 2rem;
        padding-bottom: 2rem
    }
}

@media (min-width: 1024px) {
    .site-footer-inner {
        margin-top:6rem
    }
}

.site-footer-copyright {
    display: inline-block
}

.site-footer-copyright-icon {
    margin-left: .5rem;
    margin-right: .5rem;
    display: inline;
    height: .125rem;
    width: .125rem;
    fill: currentColor
}

.site-footer-built-with {
    display: inline-block
}

/* =======================
    BUILT WITH BUTTON
========================== */

/*#built-with-button {
    background-color: var(--color-background) !important;
    box-shadow: light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.08)) 0px 8px 20px 0px !important; 
}

#built-with-button,
#built-with-button span {
    color: var(--color-foreground-700) !important;
}*/

/* =======================
    LAYOUT - INNER
========================== */

.layout-inner {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4rem;
    display: grid;
    width: 100%;
    max-width: var(--width-content);
    padding-left: 2rem;
    padding-right: 2rem
}

@media (min-width: 640px) {
    .layout-inner {
        padding-left:2.5rem;
        padding-right: 2.5rem
    }
}

@media (min-width: 1024px) {
    .layout-inner {
        padding-left:3rem;
        padding-right: 3rem;
        margin-top: 8rem;
    }
}

.layout-inner.has-sidebar-and-toc {
    max-width: var(--width-content-toc-sidebar);
    grid-template-columns: minmax(0,1fr);
    -moz-column-gap: 3rem;
    column-gap: 3rem
}

@media (min-width: 1024px) {
    .layout-inner.has-sidebar-and-toc {
        grid-template-columns: var(--width-sidebar) minmax(0,1fr)
    }
}

@media (min-width: 1280px) {
    .layout-inner.has-sidebar-and-toc {
        grid-template-columns: var(--width-sidebar) minmax(0,1fr) var(--width-toc);
    }
}

.layout-inner.has-toc {
    max-width: var(--width-content-toc);
    grid-template-columns: minmax(0,1fr);
    -moz-column-gap: 4rem;
    column-gap: 4rem
}

@media (min-width: 1280px) {
    .layout-inner.has-toc {
        grid-template-columns: minmax(0,1fr) var(--width-toc);
    }
}

.layout-inner.has-sidebar {
    max-width: var(--width-content-toc);
    grid-template-columns: minmax(0,1fr);
    -moz-column-gap: 4rem;
    column-gap: 4rem
}

@media (min-width: 1280px) {
    .layout-inner.has-sidebar {
        grid-template-columns: var(--width-sidebar) minmax(0,1fr)
    }
}

.layout-inner-left {
    display: none
}

@media (min-width: 1024px) {
    .layout-inner-left {
        display:block
    }
}

.layout-inner-right {
    display: none
}

@media (min-width: 1280px) {
    .layout-inner-right {
        display:block
    }
}

/* =======================
    SITE SIDEBAR (LEFT)
========================== */

.site-sidebar {
    position: sticky;
    top: 8rem;
    height: auto;
    max-height: calc(100vh - 10rem);
    overflow-y: auto;
    padding-bottom: 2rem;
    padding-right: 1rem;
    font-family: var(--font-sans-serif);
}

/* SITE TREE NAV
================= */

.site-tree-container {
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-body);
    line-height: var(--font-line-height-headings);
    color: var(--color-foreground-500);
}

.site-tree {
    margin-bottom: 1rem;
    text-wrap: balance;
}

.site-tree-item-children {
    padding-left: 1.25rem
}

.site-tree-item {
    margin-top: .5rem;
    margin-bottom: .5rem;
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-body);
    line-height: var(--font-line-height-headings);
    color: var(--color-foreground-500);
}

.site-tree-item-self {
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s
}

.site-tree-item-self:is(:hover, :active, :focus) {
    font-weight: var(--font-weight-body);
    text-decoration: underline;
    color: var(--color-foreground-900);
}

.site-tree-item-self.is-collapsible {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: left
}

.site-tree-item-self.is-collapsible:is(:hover, :active, :focus) {
    font-weight: var(--font-weight-body);
    text-decoration: underline;
    color: var(--color-foreground-900);
}

.site-tree-item-self.is-collapsible.is-open .site-tree-item-icon {
    --tw-rotate: 90deg;
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.site-tree-item-self.is-current {
    color: var(--color-foreground-900);
}

.site-tree-item-icon {
    margin-right: .25rem;
    height: 1rem;
    width: 1rem
}

/* =======================
    PAGE TOC (RIGHT)
========================== */

.page-toc-container {
    position: sticky;
    top: 8rem;
    height: auto;
    max-height: calc(100vh - 10rem);
    overflow-y: auto;
    padding-bottom: 2rem;
    padding-left: 1rem;
    font-family: var(--font-sans-serif);
    font-size: var(--font-size-caption);
    line-height: var(--font-line-height-headings);
}

.toc-title {
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-family: var(--font-sans-serif);
    font-size: var(--font-size-body);
    color: var(--color-foreground-200);
}

.toc {
    font-weight: var(--font-weight-body);
    color: var(--color-foreground-400);
    text-wrap: balance;
}

.toc-item {
    margin-top: .5rem;
    margin-bottom: .5rem
}

.toc-item-children {
    padding-left: 1.2em;
}

.toc-item-self {
    transition-duration: 0.3s;
}

.toc-item-self:is(:hover, :active, :focus) {
    font-weight: var(--font-weight-body);
    text-decoration: underline;
    color: var(--color-foreground-700);
}

.toc-item-self[aria-current=true] {
    color: var(--color-foreground-700);
}

/* =======================
    PAGE HEADER (SINGULAR)
========================== */

.page-header {
    margin-bottom: 2rem
}

.page-header>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse))
}

.page-header {
    border-color: var(--color-foreground-100);
    border-bottom-width: 0px;
    padding-bottom: 6rem;
    font-family: var(--font-heading)
}

.page-header-title {
    font-weight: var(--font-weight-headings);
    font-size: var(--font-size-h1);
    line-height: var(--font-line-height-headings);
    letter-spacing: normal;
    text-wrap: balance;
    color: var(--color-foreground-700);
}

@media (min-width: 640px) {
    .page-header-title {
        font-size: var(--font-size-h1);
        line-height: var(--font-line-height-headings);
    }
}

.page-header-description {
    font-weight: var(--font-weight-body);
    font-size: var(--font-size-h5);
    /*font-size: calc(0.9 * var(--font-size-body));*/
    line-height: var(--font-line-height-headings);
    text-wrap: balance;
    font-style: italic;
    color: var(--color-foreground-700);
}

@media (min-width: 640px) {
    .page-header-description {
        font-size: var(--font-size-h4);
        /*font-size: calc(0.9 * var(--font-size-body));*/
        line-height: var(--font-line-height-headings);
    }
}

.page-header-metadata-container {
    display: flex;
    align-items: center
}

.page-header-metadata-container>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)))
}

.page-header-metadata-container {
    font-family: var(--font-sans-serif);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-none);
    text-transform: uppercase;
    --tw-text-opacity: 1;
    color: var(--color-foreground-500);
    padding-top: 1rem;
}

.page-header-author-name {
    transition-duration: 0.3s;
    color: var(--color-foreground-500);
}

.page-header-author-name:is(:hover, :active, :focus) {
    color: var(--color-foreground-900);
    font-weight: var(--font-weight-body);
    text-decoration: underline;
}

.page-header-date {
    display: flex;
    align-items: center;
    color: var(--color-foreground-400);
    /*font-size: calc(0.9 * var(--font-size-caption));*/
}

.page-header-date-icon {
    margin-right: .25rem;
    width: 1rem;
    height: 1rem
}

.page-header-authors-container {
    display: flex;
    align-items: center
}

.page-header-authors-container>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(.5rem * var(--tw-space-x-reverse));
    margin-left: calc(.5rem * calc(1 - var(--tw-space-x-reverse)))
}

.page-header-authors-avatars-container {
    isolation: isolate;
    display: flex
}

.page-header-authors-avatars-container>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(-.25rem * var(--tw-space-x-reverse));
    margin-left: calc(-.25rem * calc(1 - var(--tw-space-x-reverse)))
}

.page-header-authors-avatars-container {
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(#fff,#000)
}

.page-header-author-avatar {
    position: relative;
    z-index: 30;
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    outline-style: solid;
    outline-width: 1px;
    outline-offset: -1px;
    outline-color: rgba(0,0,0,.05);
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: var(--color-background)
}

.page-header-author-avatar:is(.dark *) {
    outline-color: hsla(0,0%,100%,.1);
    --tw-ring-opacity: 1;
    --tw-ring-color: var(--color-background)
}

.page-header-image-container {
    width: 100%;
    padding-top: .75rem;
    padding-bottom: .75rem
}

.page-header-image {
    border-radius: 4px;
    -o-object-fit: cover;
    object-fit: cover
}

/* =======================
    PAGE EDIT BUTTON
========================== */

.page-edit-button-container {
    padding-top: .5rem;
    padding-bottom: .5rem
}

@media (min-width: 768px) {
    .page-edit-button-container {
        padding-top: 1rem;
        padding-bottom: 1rem
    }
}

.page-edit-button {
    margin-top: 1rem;
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    align-items: center;
    gap: .25rem;
    font-family: var(--font-heading);
    font-weight: var(--font-weight-body);
    text-decoration-line: none
}

.page-edit-button:is(:hover, :active, :focus) {
    text-decoration-line: underline
}

/* =======================
    PAGE COMMENTS
========================== */

.page-comments-container {
    margin-top: 2.5rem;
    width: 100%;
    border-top-width: 1px;
    padding-top: 2.5rem
}

/* =======================
    PAGE HERO SECTION
========================== */

.page-hero-container,
:root[data-theme=dark] .page-hero-container {
    position: relative;
    background-color: var(--color-background);
}

.page-hero {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--width-hero-no-img);
    text-align: center;
    font-family: var(--font-heading);
    min-height: 40svh;
    padding: 8rem 0 4rem 0;
}

.page-hero.has-image {
    max-width: var(--width-hero-img);
    text-align: left
}

@media (min-width: 1024px) {
    .page-hero.has-image {
        display:grid;
        grid-template-columns: repeat(12,minmax(0,1fr));
        -moz-column-gap: 2rem;
        column-gap: 2rem;
        align-items: center;
    }
}

.page-hero.has-image .page-hero-ctas-container {
    justify-content: flex-start
}

.page-hero-content-container {
    padding-bottom: 0;
    padding-top: 0;
}

@media (min-width: 640px) {
    .page-hero-content-container {
        padding-bottom:0;
    }
}

@media (min-width: 1024px) {
    .page-hero-content-container {
        padding: 0;
        /*grid-column-start: 7;
        grid-column-end: 13;*/
        grid-column: span 6 / span 6;
    }
}

.page-hero-content {
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem
}

@media (min-width: 640px) {
    .page-hero-content {
        padding-left:2.5rem;
        padding-right: 2.5rem
    }
}

@media (min-width: 1024px) {
    .page-hero-content {
        margin-left:0;
        margin-right: 0;
        padding: 0;
        /*padding-left: 3rem;
        padding-right: 3rem*/
    }
}

.page-hero-title {
    margin-top: 0;
    text-wrap: balance;
    letter-spacing: normal;
    color: var(--color-foreground-700);
}

@media (min-width: 640px) {
    .page-hero-title {
        margin-top:0;
    }
}

.page-hero-description {
    margin-top: 0.6rem;
    text-wrap: balance;
    font-size: var(--font-size-h5);
    /*font-size: calc(0.8 * var(--font-size-body));*/
    font-weight: var(--font-weight-body);
    line-height: var(--line-height-snug);
    color: var(--color-foreground-700);
    font-style: italic;
}

@media (min-width: 640px) {
    .page-hero-description {
        /*font-size: calc(0.8 * var(--font-size-body));*/
        font-size: var(--font-size-h5);
        line-height: var(--line-height-snug);
    }
}

.page-hero-image-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 1024px) {
    .page-hero-image-container {
        margin-right:0;
        /*grid-column-start: 1;
        grid-column-end: 7;
        grid-row-start: 1;*/
        grid-column: span 6 / span 6;
        /*padding-left: 3rem;*/
    }
}

@media (min-width: 1280px) {
    .page-hero-image-container {
        position: relative;
        inset: 0;
        left: 0;
        margin-right: 0;
    }
}

@media (max-width: 1024px) {
    .page-hero-image-container {
        padding: 2.5rem;
    }
}

@media (max-width: 640px) {
    .page-hero-image-container {
        padding: 2rem;
    }
}

.page-hero-image {
    aspect-ratio: auto;
    width: 100%;
    background-color: var(--color-foreground-100);
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 4px;
}

@media (min-width: 1024px) {
    .page-hero-image {
        position:relative;
        inset: 0;
        aspect-ratio: 3/2;
        aspect-ratio: auto;
        height: auto;
    }
}

.page-hero-ctas-container {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    -moz-column-gap: 1.5rem;
    column-gap: 1.5rem;
    font-family: var(--font-sans-serif);
}

.page-hero-cta {
    /*font-size: calc(0.9 * var(--font-size-body));*/
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-body);
    line-height: var(--font-line-height-body);
    transition-duration: 0.3s;
}

.page-hero-cta:first-of-type {
    border-radius: 8px;
    background-color: var(--color-accent);
    padding: .625rem .875rem;
    /*font-size: calc(0.9 * var(--font-size-body));*/
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-body);
    line-height: var(--font-line-height-body);
    color: var(--color-background);
    --tw-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
}

.page-hero-cta:first-of-type:is(:hover, :active, :focus) {
    background-color: light-dark(var(--color-accent-darker), var(--color-accent-lighter));
}

.page-hero-cta:nth-of-type(2),
.page-hero-cta:not(:first-of-type) {
    /*font-size: calc(0.9 * var(--font-size-body));*/
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-body);
    line-height: var(--font-line-height-body);
    color: var(--color-foreground-700);
}

.page-hero-cta:nth-of-type(2):is(:hover, :active, :focus),
.page-hero-cta:not(:first-of-type):is(:hover, :active, :focus) {
    color: var(--color-accent);
}

/* =======================
    LIST COMPONENT (POSTS)
========================== */

.list-component {
    display: flex;
    flex-direction: column;
    /*row-gap: 1rem;*/
    row-gap: 1rem;
    font-family: var(--font-heading);
    max-width: var(--width-list-component);
    margin: auto;
}

/*.layout-inner:not(.has-sidebar-and-toc, .has-sidebar, .has-toc) .list-component {
    margin-left: -2rem;
    margin-right: -2rem;
}

@media (min-width: 640px) {
    .layout-inner:not(.has-sidebar-and-toc, .has-sidebar, .has-toc) .list-component {
        margin-left: -2.5rem;
        margin-right: -2.5rem;
    }
}*/

@media (min-width: 1024px) {
    .layout-inner:not(.has-sidebar-and-toc, .has-sidebar, .has-toc) .list-component {
        margin-left: -3rem;
        margin-right: -3rem;
        margin-top: -4rem;
    }
}

.list-component-item {
    position: relative;
    isolation: isolate;
    display: flex;
    /*flex-direction: column;*/
    flex-direction:row;
    justify-content: space-between;
    gap: 1rem;
    border-color: var(--color-foreground-100);
    border-bottom-width: 0px;
    /*padding-top: 1rem;
    padding-bottom: 1rem;*/
    padding: 0.5rem;
    color: var(--color-foreground-700);
    align-items: center;
    background-color: light-dark(#fff, #000);
    border-radius: 4px;
}

@media (min-width: 1024px) {
    .list-component-item {
        flex-direction:row;
        justify-content: space-between;
        /*padding-top: 1.5rem;
        padding-bottom: 1.5rem;*/
        padding: 0.75rem;
    }
}

.list-component-item-media {
    position: relative;
    aspect-ratio: 1/1;
    width: 20%;
    flex-shrink: 0;
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(#fff,#000)
}

@media (min-width: 1024px) {
    .list-component-item-media {
        /*aspect-ratio:2/1;
        width: 16rem;*/
        aspect-ratio: 3/2;
        width: 30%;
        flex-shrink: 0
    }
}

@media (max-width: 499px) {
    .list-component-item-media {
        /*aspect-ratio: 1/1;
        width: 20%;*/
        display: none;
    }
}

.list-component-item-media .list-component-item-media-img {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    border-radius: 4px;
    background-color: var(--color-foreground-100);
    -o-object-fit: cover;
    object-fit: cover;
    margin: 0;
}

.list-component-item-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
}

.list-component-item-eyebrow {
    display: flex;
    align-items: center;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
    font-family: var(--font-sans-serif);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-none);
    color: var(--color-foreground-300);
    order: 2;
    margin-bottom: 0;
}

.list-component-item-content .list-component-item-headline {
    margin-top: 0;
    margin-bottom: 0;
    max-width: var(--width-list-component);
    font-size: var(--font-size-h4);
    line-height: var(--font-line-height-headings);
    font-weight: var(--font-weight-headings);
    color: var(--color-foreground-700);
    order: 1;
}

.list-component-item-content .list-component-item-headline a {
    transition-duration: 0.3s;
    color: inherit;
    text-decoration: inherit;
    font-weight: inherit;
}

.list-component-item-content .list-component-item-headline a:is(:hover, :active, :focus) {
    color: var(--color-accent);
}

.list-component-item-content .list-component-item-summary {
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--color-foreground-700);
    font-size: var(--font-size-body);
    line-height: var(--font-line-height-headings);
    order: 3;
}

.list-component-item-content .list-component-item-footnote {
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    border-top-width: 0px;
    border-color: var(--color-foreground-100);
    padding-top: 0;
    font-family: var(--font-sans-serif);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-none);
    font-weight: var(--font-weight-body);
    color: var(--color-foreground-500);
    text-transform: capitalize;
    order: 4;
}

/* PAGINATION
================== */

.list-component-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top-width: 1px;
    border-color: var(--color-foreground-100);
    padding-left: 1rem;
    padding-right: 1rem;
    font-family: var(--font-sans-serif);
}

@media (min-width: 640px) {
    .list-component-pagination {
        padding-left:0;
        padding-right: 0
    }
}

.list-component-pagination-nav {
    margin-top: -1px;
    display: flex;
    width: 0;
    flex: 1 1 0%
}

.list-component-pagination-nav--end {
    justify-content: flex-end
}

.list-component-pagination-button {
    display: inline-flex;
    align-items: center;
    border-top-width: 2px;
    border-color: transparent;
    padding-top: 1rem;
    font-size: var(--font-size-caption);
    line-height: var(--font-line-height-headings);
    font-weight: var(--font-weight-body);
    color: var(--color-foreground-500);
}

.list-component-pagination-button:is(:hover, :active, :focus):not(:disabled) {
    border-color: var(--color-foreground-100);
    color: var(--color-foreground-700);
}

.list-component-pagination-button:disabled {
    cursor: not-allowed;
    opacity: .5
}

.list-component-pagination-button--prev {
    padding-right: .25rem
}

.list-component-pagination-button--next {
    padding-left: .25rem
}

.list-component-pagination-button-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-foreground-300);
}

.list-component-pagination-button-icon--prev {
    margin-right: .75rem
}

.list-component-pagination-button-icon--next {
    margin-left: .75rem
}

.list-component-pagination-pages {
    display: none
}

@media (min-width: 768px) {
    .list-component-pagination-pages {
        margin-top:-1px;
        display: flex
    }
}

.list-component-pagination-page-button {
    display: inline-flex;
    align-items: center;
    border-top-width: 2px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    font-size: var(--font-size-caption);
    line-height: var(--font-line-height-headings);
    font-weight: var(--font-weight-body);
}

.list-component-pagination-page-button--current {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.list-component-pagination-page-button--other {
    border-color: transparent;
    color: var(--color-foreground-500);
}

.list-component-pagination-page-button--other:is(:hover, :active, :focus) {
    border-color: var(--color-foreground-100);
    color: var(--color-foreground-700);
}

.list-component-pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    border-top-width: 2px;
    border-color: transparent;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    font-size: var(--font-size-caption);
    line-height: var(--font-line-height-headings);
    font-weight: var(--font-weight-body);
    color: var(--color-foreground-500);
}

/* =======================
    NOT FOUND (404)
========================== */

.not-found {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    --tw-bg-opacity: 1;
    background-color: var(--color-foreground-100);
}

.not-found-inner {
    text-align: center
}

.not-found-title {
    margin-bottom: 1rem;
    font-size: calc(2 * var(--font-size-h1));
    line-height: var(--line-height-none);
    font-weight: var(--font-weight-bold-headings);
    --tw-text-opacity: 1;
    color: var(--color-foreground-800);
}

.not-found-subtitle {
    margin-bottom: 2rem;
    font-size: var(--font-size-h4);
    line-height: var(--font-line-height-body);
    font-weight: var(--font-weight-headings);
    --tw-text-opacity: 1;
    color: var(--color-foreground-700);
}

.not-found-description {
    --tw-text-opacity: 1;
    color: var(--color-foreground-500);
}

.not-found-hint {
    margin-top: 1rem;
    font-size: var(--font-size-caption);
    line-height: var(--font-line-height-headings);
    --tw-text-opacity: 1;
    color: var(--color-foreground-300);
}

.not-found-hint a {
    text-decoration-line: underline
}

/* =======================
    ERROR PAGE (500)
========================== */

.error-page {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    --tw-bg-opacity: 1;
    background-color: var(--color-foreground-100);
}

.error-page-inner {
    max-width: var(--width-content);
    text-align: center
}

.error-page-title {
    margin-bottom: 1rem;
    font-size: calc(2 * var(--font-size-h1));
    line-height: var(--line-height-none);
    font-weight: var(--font-weight-bold-headings);
    --tw-text-opacity: 1;
    color: var(--color-foreground-800);
}

.error-page-subtitle {
    margin-bottom: 2rem;
    font-size: var(--font-size-h4);
    line-height: var(--font-line-height-body);
    font-weight: var(--font-weight-headings);
    --tw-text-opacity: 1;
    color: var(--color-foreground-700);
}

.error-page-description {
    --tw-text-opacity: 1;
    color: var(--color-foreground-500);
}