@import url("https://unpkg.com/open-props");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@400;500;600&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght,MONO@0,300..800,1;1,300..800,1&display=swap');
@import url("https://iosevka-webfonts.github.io/iosevka/Iosevka.css");

@font-face {
    font-family: "iA Writer Quattro S";
    src: url("https://raw.githubusercontent.com/iaolo/iA-Fonts/master/iA%20Writer%20Quattro/Webfonts/iAWriterQuattroS-Regular.woff2") format("woff2"),
        url("https://raw.githubusercontent.com/iaolo/iA-Fonts/master/iA%20Writer%20Quattro/Webfonts/iAWriterQuattroS-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "iA Writer Quattro S";
    src: url("https://raw.githubusercontent.com/iaolo/iA-Fonts/master/iA%20Writer%20Quattro/Webfonts/iAWriterQuattroS-Italic.woff2") format("woff2"),
        url("https://raw.githubusercontent.com/iaolo/iA-Fonts/master/iA%20Writer%20Quattro/Webfonts/iAWriterQuattroS-Italic.woff") format("woff");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "iA Writer Quattro S";
    src: url("https://raw.githubusercontent.com/iaolo/iA-Fonts/master/iA%20Writer%20Quattro/Webfonts/iAWriterQuattroS-Bold.woff2") format("woff2"),
        url("https://raw.githubusercontent.com/iaolo/iA-Fonts/master/iA%20Writer%20Quattro/Webfonts/iAWriterQuattroS-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "iA Writer Quattro S";
    src: url("https://raw.githubusercontent.com/iaolo/iA-Fonts/master/iA%20Writer%20Quattro/Webfonts/iAWriterQuattroS-BoldItalic.woff2") format("woff2"),
        url("https://raw.githubusercontent.com/iaolo/iA-Fonts/master/iA%20Writer%20Quattro/Webfonts/iAWriterQuattroS-BoldItalic.woff") format("woff");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

:root {
    --md-code-font: "Google Sans Code", system-ui, -apple-system, BlinkMacSystemFont,
        'Segoe UI', sans-serif;
}

.md-typeset,
.md-typeset p,
.md-typeset li,
.md-typeset dd,
.md-typeset td {
    font-family: "Iosevka Web", monospace !important;
    line-height: var(--font-lineheight-3) !important;
    font-weight: var(--font-weight-5);
    letter-spacing: var(--font-letterspacing-0-5);
    text-rendering: geometricPrecision !important;
}

/* Description elements: closer to headers, serif styling */
.md-typeset description {
    font-family: "Iosevka Web", monospace !important;
    font-size: 01em !important;
    letter-spacing: var(--font-letterspacing-0-5);
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
    font-family: 'iA Writer Quattro S', serif !important;
    margin-bottom: 0.35em !important;
    font-weight: var(--font-weight-4) !important;
    border-bottom: var(--border-size-1) dashed;
    padding-bottom: 0.8rem;
    border-color: #21252B;
}

/* Index hero ASCII title (injected by hero.js) */
.md-content__inner:has(.page-index) .zyx-hero-wrapper {
    display: block;
}

/* Hide duplicate markdown h1 — the ASCII hero is the visual title */
.md-content__inner:has(.page-index) h1:first-of-type {
    display: none;
}

/* Index tagline alignment */
.md-content__inner:has(.page-index) .hero-tagline {
    text-align: center;
    margin-top: 0.75rem;
}

/*
  !!! LIGHT THEME COLORS !!!
*/
[data-md-color-scheme="default"] {
    --md-default-bg-color: #F4F4ED;
    --md-primary-bg-color: #F4F4ED;

    --md-accent-fg-color: #102044;
    --md-accent-bg-color: #124ECF;

    --md-footer-bg-color: #F3F1EB;
    --md-footer-bg-color--dark: #F3F1EB;
}

/*
  !!! LIGHT THEME COLOR OVERRIDES !!!
*/
[data-md-color-scheme="default"] .md-header {
    background-color: #F4F4ED;
}

[data-md-color-scheme="default"] .md-footer-meta {
    background-color: #F4F4ED;
}

/* H1 Coloring */
[data-md-color-scheme="default"] .md-typeset h1 {
    color: #124ECF;
}

/* Banner Announcement over Header */
[data-md-color-scheme="default"] .md-banner {
    background-color: transparent;
}

/* Code Blocks Override */
[data-md-color-scheme="default"] .highlight {
    border-radius: var(--radius-2);
    border: var(--border-size-1) solid #124ECF;
    box-shadow: #124ECF33 4px 4px 0px 0px;
    position: relative;
    overflow: hidden; /* cleanly clips the header and code body rounded corners */
}

/*
  !!! DARK THEME COLORS !!!
*/
[data-md-color-scheme="slate"] {
    --md-default-bg-color: #141519;
    --md-primary-bg-color: #141519;

    --md-primary-fg-color: #DEDCD1;

    --md-accent-bg-color: #102044;
    --md-accent-fg-color: #85ACFA;

    --md-footer-bg-color: #0E1014;
    --md-footer-bg-color--dark: #0E1014;
}

/*
  !!! DARK THEME COLOR OVERRIDES !!!
*/
[data-md-color-scheme="slate"] .md-header {
    background-color: #141519;
}

[data-md-color-scheme="slate"] .md-footer-meta {
    background-color: #141519;
}

/* H1 Coloring */
[data-md-color-scheme="slate"] .md-typeset h1 {
    color: #8EC6FF;
}

/* Banner Announcement over Header */
[data-md-color-scheme="slate"] .md-banner {
    background-color: transparent;
}

/* Code Blocks Override */
[data-md-color-scheme="slate"] .highlight {
    border-radius: var(--radius-2);
    border: var(--border-size-1) solid #2A3856;
    box-shadow: #2A385633 4px 4px 0px 0px;
    position: relative;
    overflow: hidden; /* cleanly clips the header and code body rounded corners */
}

/* Strip default borders/shadows/radius from the child pre tag so they sit perfectly in the wrapper */
.highlight pre {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

/* Beautiful seamless integrated filename header bar */
.highlight > span.filename {
    display: flex;
    align-items: baseline;
    gap: var(--size-3);
    margin-top: 0; /* override theme .highlight span.filename { margin-top: 1em } */
    padding: var(--size-2) 1.1764705882em; /* match .md-typeset pre > code horizontal padding */
    font-family: var(--md-code-font), monospace;
    font-size: 0.78em;
    font-weight: var(--font-weight-6);
    letter-spacing: var(--font-letterspacing-2);
    text-transform: uppercase;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom: var(--border-size-1) solid;
}

.highlight > span.filename .code-lang {
    margin-left: auto;
    flex-shrink: 0;
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-7);
    letter-spacing: var(--font-letterspacing-2);
    text-transform: uppercase;
}

/* Keep the code body flush with the wrapper border */
.highlight:has(> span.filename) > pre > code {
    border-radius: 0;
}

[data-md-color-scheme="default"] .highlight > span.filename {
    background-color: #e9e7dc;
    color: #102044;
    border-color: #85ACFA;
}

[data-md-color-scheme="default"] .highlight > span.filename .code-lang {
    color: #124ecf;
    opacity: 0.85;
}

[data-md-color-scheme="slate"] .highlight > span.filename {
    background-color: #0e1014;
    color: #dedcd1;
    border-color: #2A3856;
}

[data-md-color-scheme="slate"] .highlight > span.filename .code-lang {
    color: #85acfa;
    opacity: 0.85;
}