/* User Provided Stylesheet */

/* Navigation Icon Styling */

/* GitHub Icon - Replace text with SVG (only in navigation) */
nav a[href*="github.com"],
.myst-top-nav a[href*="github.com"] {
    position: relative;
    font-size: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px !important;
    border: none !important;
    background: none !important;
}

nav a[href*="github.com"]::before,
.myst-top-nav a[href*="github.com"]::before {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    background-image: url("/github_logo.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Dark mode - use white version */
html.dark nav a[href*="github.com"]::before,
html.dark .myst-top-nav a[href*="github.com"]::before {
    background-image: url("/github_logo_w.svg");
}

/* LinkedIn Icon (only in navigation) */
nav a[href*="linkedin.com"],
.myst-top-nav a[href*="linkedin.com"] {
    position: relative;
    font-size: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px !important;
    border: none !important;
    background: none !important;
}

nav a[href*="linkedin.com"]::before,
.myst-top-nav a[href*="linkedin.com"]::before {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    background-image: url("/linkedin_icon.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

html.dark nav a[href*="linkedin.com"]::before,
html.dark .myst-top-nav a[href*="linkedin.com"]::before {
    background-image: url("/linkedin_icon_w.svg");
}

/* Substack Icon */
nav a[href*="substack.com"],
.myst-top-nav a[href*="substack.com"] {
    position: relative;
    font-size: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px !important;
    border: none !important;
    background: none !important;
}

nav a[href*="substack.com"]::before,
.myst-top-nav a[href*="substack.com"]::before {
    content: "";
    position: absolute;
    width: 24px;
    height: 24px;
    background-image: url("/substack_icon.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

html.dark nav a[href*="substack.com"]::before,
html.dark .myst-top-nav a[href*="substack.com"]::before {
    background-image: url("/substack_icon_w.svg");
}

/* Hover effects */
nav a[href*="github.com"]:hover,
.myst-top-nav a[href*="github.com"]:hover,
nav a[href*="linkedin.com"]:hover,
.myst-top-nav a[href*="linkedin.com"]:hover,
nav a[href*="substack.com"]:hover,
.myst-top-nav a[href*="substack.com"]:hover {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

/* Font Face Declarations for Obsidian Theme */

/* Adobe Caslon Pro - Body Text */
@font-face {
    font-family: "Adobe Caslon Pro";
    src: url("./_assets/fonts/adobe-caslon/Adobe Caslon Pro Regular.ttf")
        format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Adobe Caslon Pro Bold";
    src: url("./_assets/fonts/adobe-caslon/adobe-caslon-pro-bold.ttf")
        format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* CMU Sans Serif - UI and Tables */
@font-face {
    font-family: "CMU Sans Serif";
    src: url("./_assets/fonts/cmu-sans/cmunss.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "CMU Sans Serif";
    src: url("./_assets/fonts/cmu-sans/cmunsx.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "CMU Sans Serif";
    src: url("./_assets/fonts/cmu-sans/cmunsi.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "CMU Sans Serif";
    src: url("./_assets/fonts/cmu-sans/cmunso.ttf") format("truetype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Commit Mono - Monospace Code */
@font-face {
    font-family: "Commit Mono";
    src: url("./_assets/fonts/commit-mono/CommitMono-400-Regular.otf")
        format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Commit Mono";
    src: url("./_assets/fonts/commit-mono/CommitMono-400-Italic.otf")
        format("opentype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Commit Mono";
    src: url("./_assets/fonts/commit-mono/CommitMono-700-Regular.otf")
        format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Commit Mono";
    src: url("./_assets/fonts/commit-mono/CommitMono-700-Italic.otf")
        format("opentype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Typrighter - Typewriter Effect */
@font-face {
    font-family: "Typrighter";
    src: url("./_assets/fonts/typrighter/Typrighter-V1.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Typrighter";
    src: url("./_assets/fonts/typrighter/Typrighter-V2.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Biro Script Plus - Ballpoint Pen Effect */
@font-face {
    font-family: "Biro Script Plus";
    src: url("./_assets/fonts/biro-script/biro-script-plus.ttf")
        format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
/* CSS Custom Properties - Obsidian Theme Configuration */

:root {
    /* Font Families */
    --font-text: "Adobe Caslon Pro", "Austera Text", "Charter", serif;
    --font-ui: "CMU Sans Serif", "Gill Sans", "AvertaStd-Regular", sans-serif;
    --font-mono: "Commit Mono", "Paper Mono", "IBM Plex Mono", monospace;
    --font-typewriter: "Typrighter", "Courier Prime", monospace;
    --font-ballpoint: "Biro Script Plus", cursive;

    /* Font Sizes - Base: 16px (MyST default) */
    --font-size-base: 16px;
    --font-size-h1: 2em;
    --font-size-h2: 1.5em;
    --font-size-h3: 1.25em;
    --font-size-h4: 1em;
    --font-size-h5: 0.875em;
    --font-size-h6: 0.85em;

    /* Heading Margins */
    --heading-margin-h1-top: 0.3em;
    --heading-margin-h1-bottom: 0.5em;
    --heading-margin-h2-top: 1.25em;
    --heading-margin-h2-bottom: 0.5em;
    --heading-margin-h3-top: 0.5em;
    --heading-margin-h3-bottom: 0.5em;
    --heading-margin-h4-top: 1em;
    --heading-margin-h4-bottom: 0.5em;
    --heading-margin-h5-top: 1em;
    --heading-margin-h5-bottom: 0.5em;
    --heading-margin-h6-top: 1em;
    --heading-margin-h6-bottom: 0.5em;

    /* Colors - Flexoki Dark Mode */
    --accent-color: #5e99a1;
    --text-primary-dark: #9999cc;
    --text-primary-light: #2c2c2c;
    --text-heading-dark: #868580;
    --text-heading-light: #2c2c2c;
    --text-heading-minor-light: #6e6e69;
    --text-code-dark: #565653;
    --text-code-light: #6e6e69;

    /* Highlight Colors */
    --highlight-bg-dark: #443b00;
    --highlight-text-dark: #9999cc;

    /* Table Colors - Light Mode */
    --table-border-light: #a9a8a8;
    --table-bg-light: #f8f8f8;
    --table-bg-alt-light: #f0f0f0;
    --table-header-light: #c9c6c6;
    --table-hover-light: #e5dfe9;

    /* Table Colors - Dark Mode */
    --table-border-dark: #5a5959;
    --table-bg-dark: #3b3b3b;
    --table-bg-alt-dark: #343434;
    --table-header-dark: #5c5c5c;
    --table-hover-dark: #454545;

    /* Quote Block Colors */
    --quote-bg: color-mix(in srgb, var(--accent-color) 15%, transparent);
    --quote-border: var(--accent-color);

    /* Paper Texture for Typewriter/Ballpoint */
    --paper-bg-light: #fefcf7;
    --paper-bg-dark: #2c2c2c;
    --paper-noise-url: url("https://zed.dev/_next/static/media/noise.0e24d0e5.png");
}
/* MyST Book-Theme Overrides - Obsidian Style Reset */

/* Override JupyterLab CSS Variables */
:root {
    /* Font Family Overrides */
    --jp-ui-font-family: var(--font-ui);
    --jp-content-font-family: var(--font-text);
    --jp-code-font-family: var(--font-mono);
    --jp-code-font-family-default: var(--font-mono);

    /* Font Size Override */
    --jp-content-font-size1: var(--font-size-base);

    /* Line Heights */
    --jp-content-line-height: 1.6;
    --jp-code-line-height: 1.3077;
}

/* Base Document Styles */
html {
    font-size: var(--font-size-base);
}

body {
    font-family: var(--font-text);
    font-size: var(--font-size-base);
    line-height: 1.6;
}

/* Reset MyST's default font assignments */
.markdown-preview-view,
.markdown-source-view,
.cm-editor {
    font-family: var(--font-text);
}
/* Typography - Body Text and Headings */

/* Body Text Colors - Using MyST defaults (removed custom periwinkle color) */
/* Let MyST handle the default text colors */

/* Headings - Adobe Caslon Pro (same as body for content) */
h1,
h2,
h3,
h4,
h5,
h6,
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6,
article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
    font-family: var(--font-text) !important;
    font-weight: 700 !important;
}

/* Navigation, TOC, and UI Elements - CMU Sans Serif */
nav,
nav *,
.toc,
.toc *,
aside nav,
aside nav *,
[role="navigation"],
[role="navigation"] *,
.article-grid > nav,
.article-grid > nav *,
button,
.myst-card-title {
    font-family: var(--font-ui) !important;
}

/* Dark Mode Heading Colors */
.theme-dark h1,
.theme-dark h2,
.theme-dark h3 {
    color: var(--text-heading-dark);
}

.theme-dark h4,
.theme-dark h5,
.theme-dark h6 {
    color: var(--text-heading-dark);
}

/* Light Mode Heading Colors */
.theme-light h1,
.theme-light h2,
.theme-light h3 {
    color: var(--text-heading-light);
}

.theme-light h4,
.theme-light h5,
.theme-light h6 {
    color: var(--text-heading-minor-light);
}

/* Default (dark mode) heading colors */
h1,
h2,
h3 {
    color: var(--text-heading-dark);
}

h4,
h5,
h6 {
    color: var(--text-heading-dark);
}

/* Heading Sizes and Spacing */
h1 {
    font-size: var(--font-size-h1);
    margin-top: var(--heading-margin-h1-top);
    margin-bottom: var(--heading-margin-h1-bottom);
}

h2 {
    font-size: var(--font-size-h2);
    margin-top: var(--heading-margin-h2-top);
    margin-bottom: var(--heading-margin-h2-bottom);
}

h3 {
    font-size: var(--font-size-h3);
    margin-top: var(--heading-margin-h3-top);
    margin-bottom: var(--heading-margin-h3-bottom);
}

h4 {
    font-size: var(--font-size-h4);
    margin-top: var(--heading-margin-h4-top);
    margin-bottom: var(--heading-margin-h4-bottom);
}

h5 {
    font-size: var(--font-size-h5);
    margin-top: var(--heading-margin-h5-top);
    margin-bottom: var(--heading-margin-h5-bottom);
}

h6 {
    font-size: var(--font-size-h6);
    margin-top: var(--heading-margin-h6-top);
    margin-bottom: var(--heading-margin-h6-bottom);
}

/* Bold Text - Adobe Caslon Pro Bold (except in tables) */
p strong:not(table strong),
p b:not(table b),
li strong:not(table strong),
li b:not(table b),
div:not(.table-wrapper) strong:not(table strong),
div:not(.table-wrapper) b:not(table b) {
    font-family: "Adobe Caslon Pro Bold", "Adobe Caslon Pro", serif;
    font-weight: 700;
}

/* Bold in headings */
h1 strong,
h1 b,
h2 strong,
h2 b,
h3 strong,
h3 b,
h4 strong,
h4 b,
h5 strong,
h5 b,
h6 strong,
h6 b {
    font-family: "Adobe Caslon Pro Bold", "Adobe Caslon Pro", serif;
    font-weight: 700;
    color: inherit;
}

/* Quote Blocks */
blockquote {
    background-color: var(--quote-bg);
    border-left: 4px solid var(--quote-border);
    padding: 0.5em 1em;
    margin: 0.5em 0;
    border-radius: 0 6px 6px 0;
    font-style: italic;
    line-height: 1.4;
}
/* Tables - CMU Sans Serif Font */

/* Base Table Styling */
table {
    border-collapse: collapse;
    width: 100%;
    font-family: var(--font-ui);
}

/* Light Mode Table Styling (default) */
html.light table,
table {
    border: 1px solid var(--table-border-light);
}

html.light table th,
table th {
    background-color: var(--table-header-light);
    color: inherit;
    padding: 8px;
}

html.light table td,
table td {
    border: 1px solid var(--table-border-light);
    background-color: var(--table-bg-light);
    color: inherit;
    padding: 8px;
}

html.light table tr:nth-child(even) td,
table tr:nth-child(even) td {
    background-color: var(--table-bg-alt-light);
}

html.light table tr:hover td,
table tr:hover td {
    background-color: var(--table-hover-light);
}

/* Dark Mode Table Styling */
html.dark table {
    border: 1px solid var(--table-border-dark) !important;
}

html.dark table th {
    background-color: var(--table-header-dark) !important;
    color: inherit;
    padding: 8px;
}

html.dark table td {
    border: 1px solid var(--table-border-dark) !important;
    background-color: var(--table-bg-dark) !important;
    color: inherit;
    padding: 8px;
}

html.dark table tr:nth-child(even) td {
    background-color: var(--table-bg-alt-dark) !important;
}

html.dark table tr:hover td {
    background-color: var(--table-hover-dark) !important;
}

/* Tables use CMU Sans Serif for bold text */
table strong,
table b,
table th strong,
table th b,
table td strong,
table td b {
    font-family: var(--font-ui);
    font-weight: 700;
}
/* Code Blocks and Highlighting */

/* Inline Code */
code {
    font-family: var(--font-mono);
}

.theme-dark code,
code {
    color: var(--text-code-dark);
}

.theme-light code {
    color: var(--text-code-light);
}

/* Code Blocks */
pre {
    font-family: var(--font-mono);
}

pre code {
    font-family: var(--font-mono);
}

.theme-dark pre code {
    color: var(--text-code-dark);
}

.theme-light pre code {
    color: var(--text-code-light);
}

/* Highlight/Mark - Dark Yellow Background in Dark Mode */
.theme-dark mark,
mark {
    background-color: var(--highlight-bg-dark);
    color: var(--highlight-text-dark);
    padding: 0.1em 0.3em;
    border-radius: 2px;
}

.theme-light mark {
    /* Light mode uses default yellow highlighting */
    background-color: yellow;
    color: inherit;
    padding: 0.1em 0.3em;
    border-radius: 2px;
}
/* Admonitions/Callouts - MyST Native Support */

/* Base Admonition Styling */
.admonition {
    font-family: var(--font-text);
    padding: 0.5em 1em 0.5em 1em;
    margin: 1em 0;
    border-radius: 4px;
}

.admonition-title {
    font-family: var(--font-text);
    font-weight: normal;
    padding: 0;
    margin-bottom: 0.5em;
}

.admonition-content {
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Enable markdown emphasis in callout content */
.admonition-content strong,
.admonition-content b {
    font-family: "Adobe Caslon Pro Bold", "Adobe Caslon Pro", var(--font-text);
    font-weight: 700;
}

.admonition-content em,
.admonition-content i {
    font-style: italic;
}

/* Enable markdown emphasis in callout titles */
.admonition-title strong,
.admonition-title b {
    font-weight: bold;
}

.admonition-title em,
.admonition-title i {
    font-style: italic;
}

/* Override for all view modes - ensure normal weight titles */
.admonition-title {
    font-weight: normal;
    font-family: var(--font-text);
}
/* Layout - Custom styling for page structure */

/* Hide "Made with MyST" footer link */
a[href*="made-with-myst"],
a[href*="mystmd.org/made-with-myst"] {
    display: none !important;
}

/* Hide Edit This Page link */
.myst-fm-edit-link,
a[href*="/edit/master/"],
a[title="Edit This Page"] {
    display: none !important;
}

/* Hide default GitHub icon in article frontmatter to avoid overlay */
.myst-fm-github-icon {
    display: none !important;
}

/* Remove border/background from theme toggle button */
.myst-theme-button {
    border: none !important;
    background: none !important;
}

/* Add muon brain logo before home link */
.myst-home-link::before {
    content: "";
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url("/muon_brain.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 8px;
    vertical-align: middle;
}

html.dark .myst-home-link::before {
    background-image: url("/muon_brain_w.svg");
}
/* Typewriter Theme - Typrighter Font with Paper Texture */

/* Base styles for typewriter admonitions */
.myst-admonition.typewriter {
    font-family: var(--font-typewriter);
    font-size: 0.95em;
    line-height: 1.6;
    padding: 1em 1.5em;
    border-radius: 4px;
    letter-spacing: 0.02em;
    font-weight: 500;
    position: relative;
    margin: 1em 0;
    border: none !important;
    background: none !important;
    font-feature-settings:
        "calt" 1,
        "liga" 1,
        "kern" 1;
    font-variant-ligatures: contextual;
    text-rendering: optimizeLegibility;
    text-shadow:
        0.5px 0.5px 0.6px rgba(0, 0, 0, 0.4),
        -0.3px 0.3px 0.4px rgba(0, 0, 0, 0.25);
    transform: rotate(-0.08deg);
}

/* Hide the admonition header for MyST */
.myst-admonition.typewriter .myst-admonition-header {
    display: none !important;
}

/* Style the content */
.myst-admonition.typewriter .admonition-content {
    padding: 0;
    margin: 0;
    background: none;
}

/* Paragraph styling */
.myst-admonition.typewriter p {
    text-indent: 0;
    margin: 0.6em 0;
}

/* Light theme */
.myst-admonition.typewriter {
    background: var(--paper-bg-light);
    color: #2c2c2c;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.2),
        inset 0 0 40px rgba(0, 0, 0, 0.05);
    background-image:
        var(--paper-noise-url),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 27px,
            rgba(0, 0, 0, 0.05) 28px
        );
    background-size:
        200px 200px,
        100% 100%;
    background-blend-mode: multiply;
}

/* Semi-transparent overlay for light mode - REMOVED to fix text contrast */
.myst-admonition.typewriter::before {
    content: "";
    position: absolute;
    inset: 0;
    background: none;
    pointer-events: none;
    z-index: -1;
    border-radius: 4px;
    display: none;
}

/* Dark theme */
html.dark .myst-admonition.typewriter {
    background: var(--paper-bg-dark);
    color: var(--text-primary-dark);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.4),
        inset 0 0 40px rgba(0, 0, 0, 0.3);
    background-image:
        var(--paper-noise-url),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 27px,
            rgba(255, 255, 255, 0.03) 28px
        );
    background-size:
        200px 200px,
        100% 100%;
    background-blend-mode: overlay;
    opacity: 0.92;
}

/* Semi-transparent overlay for dark mode - REMOVED to fix text contrast */
html.dark .myst-admonition.typewriter::before {
    background: none;
    display: none;
}

/* Paper creases and ink bleed effects */
.myst-admonition.typewriter::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse at 12% 18%,
            rgba(0, 0, 0, 0.12) 0%,
            rgba(0, 0, 0, 0.06) 1.5%,
            transparent 4%
        ),
        radial-gradient(
            ellipse at 88% 28%,
            rgba(0, 0, 0, 0.1) 0%,
            rgba(0, 0, 0, 0.05) 2%,
            transparent 5%
        ),
        radial-gradient(
            ellipse at 38% 72%,
            rgba(0, 0, 0, 0.11) 0%,
            rgba(0, 0, 0, 0.055) 1.8%,
            transparent 4.5%
        ),
        radial-gradient(
            circle at 15% 20%,
            rgba(0, 0, 0, 0.08) 0%,
            transparent 2%
        ),
        radial-gradient(
            circle at 85% 30%,
            rgba(0, 0, 0, 0.06) 0%,
            transparent 3%
        );
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 1;
    border-radius: 4px;
}

/* Lighter ink bleeds for dark mode */
html.dark .myst-admonition.typewriter::after {
    background:
        radial-gradient(
            ellipse at 12% 18%,
            rgba(255, 255, 255, 0.06) 0%,
            rgba(255, 255, 255, 0.03) 1.5%,
            transparent 4%
        ),
        radial-gradient(
            ellipse at 88% 28%,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.025) 2%,
            transparent 5%
        ),
        radial-gradient(
            ellipse at 38% 72%,
            rgba(255, 255, 255, 0.055) 0%,
            rgba(255, 255, 255, 0.028) 1.8%,
            transparent 4.5%
        );
    mix-blend-mode: overlay;
}

/* Ensure content is above effects */
.myst-admonition.typewriter .admonition-content > * {
    position: relative;
    z-index: 3;
}

/* Bullet lists */
.myst-admonition.typewriter ul {
    list-style-type: none;
    margin-left: 1em;
    padding-left: 0.5em;
}

.myst-admonition.typewriter ul > li {
    position: relative;
    padding-left: 0.8em;
}

.myst-admonition.typewriter ul > li::before {
    content: "- ";
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--font-typewriter);
}

/* Ordered lists */
.myst-admonition.typewriter ol {
    list-style-type: decimal;
    margin-left: 2em;
    padding-left: 1em;
}

/* List items */
.myst-admonition.typewriter li {
    margin: 0.2em 0;
    text-indent: 0;
}

/* Bold emphasis */
.myst-admonition.typewriter strong,
.myst-admonition.typewriter b {
    font-weight: 900;
    font-family: var(--font-typewriter);
    text-shadow:
        0.5px 0.5px 0.8px rgba(0, 0, 0, 0.5),
        -0.4px 0.4px 0.6px rgba(0, 0, 0, 0.3),
        0.8px 0 1.2px rgba(0, 0, 0, 0.25);
    letter-spacing: 0.03em;
    filter: blur(0.2px) contrast(1.2);
}

/* Italic emphasis */
.myst-admonition.typewriter em,
.myst-admonition.typewriter i {
    font-style: italic;
    font-family: var(--font-typewriter);
}

/* Highlight */
.myst-admonition.typewriter mark {
    background-color: rgba(80, 80, 80, 0.25);
    color: inherit;
    padding: 0.1em 0.3em;
    border-radius: 2px;
}

html.dark .myst-admonition.typewriter mark {
    background-color: rgba(180, 180, 180, 0.2);
}

/* Override font everywhere in typewriter */
.myst-admonition.typewriter,
.myst-admonition.typewriter p,
.myst-admonition.typewriter li,
.myst-admonition.typewriter div,
.myst-admonition.typewriter span {
    font-family: var(--font-typewriter);
    font-weight: 500;
}

/* Force proper text colors for readability - carbon black for light mode */
.myst-admonition.typewriter,
.myst-admonition.typewriter p,
.myst-admonition.typewriter li,
.myst-admonition.typewriter div,
.myst-admonition.typewriter span {
    color: #1a1a1a !important;
}

html.dark .myst-admonition.typewriter,
html.dark .myst-admonition.typewriter p,
html.dark .myst-admonition.typewriter li,
html.dark .myst-admonition.typewriter div,
html.dark .myst-admonition.typewriter span {
    color: #e0e0e0 !important;
}
/* Ballpoint Theme - Biro Script Plus Font with Handwritten Effect */

/* Base styles for ballpoint admonitions */
.myst-admonition.ballpoint {
    font-family: var(--font-ballpoint);
    font-size: 1.1em;
    line-height: 1.8;
    padding: 1em 1.5em;
    border-radius: 4px;
    letter-spacing: 0.01em;
    font-weight: 400;
    position: relative;
    margin: 1em 0;
    border: none !important;
    background: none !important;
    color: #1e3a8a;
    text-shadow:
        0.3px 0.3px 0.4px rgba(12, 45, 107, 0.4),
        -0.2px 0.2px 0.3px rgba(12, 45, 107, 0.25);
    transform: rotate(-0.05deg);
}

/* Hide the admonition title */
.myst-admonition.ballpoint .myst-admonition-header {
    display: none;
}

/* Style the content */
.myst-admonition.ballpoint .admonition-content {
    padding: 0;
    margin: 0;
    background: none;
}

/* Paragraph styling */
.myst-admonition.ballpoint p {
    text-indent: 0;
    margin: 0.6em 0;
}

/* Light theme */
.myst-admonition.ballpoint {
    background: var(--paper-bg-light);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.2),
        inset 0 0 40px rgba(0, 0, 0, 0.05);
    background-image:
        var(--paper-noise-url),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 27px,
            rgba(0, 0, 0, 0.05) 28px
        );
    background-size:
        200px 200px,
        100% 100%;
    background-blend-mode: multiply;
}

/* Semi-transparent overlay for light mode - REMOVED to fix text contrast */
.myst-admonition.ballpoint::before {
    content: "";
    position: absolute;
    inset: 0;
    background: none;
    pointer-events: none;
    z-index: -1;
    border-radius: 4px;
    display: none;
}

/* Dark theme */
html.dark .myst-admonition.ballpoint {
    background: var(--paper-bg-dark);
    color: var(--text-primary-dark);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.4),
        inset 0 0 40px rgba(0, 0, 0, 0.3);
    background-image:
        var(--paper-noise-url),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 27px,
            rgba(255, 255, 255, 0.03) 28px
        );
    background-size:
        200px 200px,
        100% 100%;
    background-blend-mode: overlay;
    opacity: 0.92;
}

/* Semi-transparent overlay for dark mode - REMOVED to fix text contrast */
html.dark .myst-admonition.ballpoint::before {
    background: none;
    display: none;
}

/* Paper creases and ink spots */
.myst-admonition.ballpoint::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 18% 15%,
            rgba(30, 58, 138, 0.08) 0%,
            transparent 1.5%
        ),
        radial-gradient(
            circle at 82% 25%,
            rgba(30, 58, 138, 0.06) 0%,
            transparent 2%
        ),
        radial-gradient(
            circle at 35% 68%,
            rgba(30, 58, 138, 0.07) 0%,
            transparent 1.8%
        ),
        radial-gradient(
            circle at 65% 80%,
            rgba(30, 58, 138, 0.05) 0%,
            transparent 2.2%
        ),
        radial-gradient(
            circle at 28% 50%,
            rgba(30, 58, 138, 0.06) 0%,
            transparent 1.6%
        );
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 1;
    border-radius: 4px;
}

/* Lighter ink spots for dark mode */
html.dark .myst-admonition.ballpoint::after {
    background:
        radial-gradient(
            circle at 18% 15%,
            rgba(96, 165, 250, 0.05) 0%,
            transparent 1.5%
        ),
        radial-gradient(
            circle at 82% 25%,
            rgba(96, 165, 250, 0.04) 0%,
            transparent 2%
        ),
        radial-gradient(
            circle at 35% 68%,
            rgba(96, 165, 250, 0.045) 0%,
            transparent 1.8%
        );
    mix-blend-mode: overlay;
}

/* Ensure content is above effects */
.myst-admonition.ballpoint .admonition-content > * {
    position: relative;
    z-index: 3;
}

/* Bullet lists */
.myst-admonition.ballpoint ul {
    list-style-type: none;
    margin-left: 1em;
    padding-left: 0.5em;
}

.myst-admonition.ballpoint ul > li {
    position: relative;
    padding-left: 0.8em;
}

.myst-admonition.ballpoint ul > li::before {
    content: "* ";
    position: absolute;
    left: 0;
    top: 0;
    color: inherit;
}

/* Ordered lists */
.myst-admonition.ballpoint ol {
    list-style-type: decimal;
    margin-left: 2em;
    padding-left: 1em;
}

/* List items */
.myst-admonition.ballpoint li {
    margin: 0.1em 0;
    text-indent: 0;
}

/* Bold emphasis */
.myst-admonition.ballpoint strong,
.myst-admonition.ballpoint b {
    font-weight: 700;
    font-family: var(--font-ballpoint);
    letter-spacing: 0.02em;
}

/* Blue ink effect for bold in light mode */
.myst-admonition.ballpoint strong,
.myst-admonition.ballpoint b {
    text-shadow:
        0.3px 0.3px 0.4px rgba(30, 58, 138, 0.5),
        -0.2px 0.2px 0.3px rgba(30, 58, 138, 0.25),
        0.4px 0 0.6px rgba(30, 58, 138, 0.2);
}

/* Italic emphasis */
.myst-admonition.ballpoint em,
.myst-admonition.ballpoint i {
    font-style: italic;
    font-family: var(--font-ballpoint);
}

/* Highlight - handwritten underline effect */
.myst-admonition.ballpoint mark {
    background-color: transparent;
    padding: 0;
    text-decoration: underline;
    text-decoration-thickness: 1.2px;
    text-underline-offset: 2px;
    position: relative;
}

/* Light mode - blue underline */
.myst-admonition.ballpoint mark {
    color: #1e3a8a;
    text-decoration-color: rgba(30, 58, 138, 0.85);
    text-shadow:
        0 0.5px 0.8px rgba(30, 58, 138, 0.15),
        0 -0.5px 0.8px rgba(30, 58, 138, 0.1);
}

/* Dark mode - normal color underline */
html.dark .myst-admonition.ballpoint mark {
    color: var(--text-primary-dark);
    background-color: transparent;
    background: none;
    text-decoration-color: currentColor;
    text-shadow:
        0 0.5px 0.8px rgba(255, 255, 255, 0.1),
        0 -0.5px 0.8px rgba(255, 255, 255, 0.08);
}

/* Override font everywhere in ballpoint */
.myst-admonition.ballpoint,
.myst-admonition.ballpoint p,
.myst-admonition.ballpoint li,
.myst-admonition.ballpoint div,
.myst-admonition.ballpoint span {
    font-family: var(--font-ballpoint);
    font-weight: 400;
    color: #1e3a8a;
}

/* Dark theme color overrides */
html.dark .myst-admonition.ballpoint,
html.dark .myst-admonition.ballpoint p,
html.dark .myst-admonition.ballpoint li,
html.dark .myst-admonition.ballpoint div,
html.dark .myst-admonition.ballpoint span {
    color: var(--text-primary-dark);
}

/* Bold text - light mode blue */
.myst-admonition.ballpoint strong,
.myst-admonition.ballpoint b {
    color: #1e3a8a;
}

/* Bold text - dark mode normal */
html.dark .myst-admonition.ballpoint strong,
html.dark .myst-admonition.ballpoint b {
    color: var(--text-primary-dark);
}

/* Force proper text colors for readability - dark royal blue for light mode */
.myst-admonition.ballpoint,
.myst-admonition.ballpoint p,
.myst-admonition.ballpoint li,
.myst-admonition.ballpoint div,
.myst-admonition.ballpoint span {
    color: #0c2d6b !important;
}

html.dark .myst-admonition.ballpoint,
html.dark .myst-admonition.ballpoint p,
html.dark .myst-admonition.ballpoint li,
html.dark .myst-admonition.ballpoint div,
html.dark .myst-admonition.ballpoint span {
    color: #93c5fd !important;
}