@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Gabarito:wght@400..900&family=Gafata&family=Galdeano&family=Gantari:ital,wght@0,100..900;1,100..900&family=Gayathri:wght@100;400;700&family=Geologica:wght@100..900&family=Georama:ital,wght@0,100..900;1,100..900&family=Gurajada&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');/* Design System Custom Properties Implementation *//*
 * Contains logic for Light/Dark themes and semantic custom properties.
 * Replaces hardcoded tailwind colors with semantic tokens.
 */:root,
html.light {
  /* ── Typography Subsystem ────────────────────────────────────── */
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Roboto Mono', monospace;
  --font-ui: var(--font-body);
  /* Used for small UI elements, buttons, nav */

  /* Type Scale (Fluid / Base) - 17px base */
  --text-xs: 0.75rem;
  /* 12.75px */
  --text-sm: 0.875rem;
  /* ~15px */
  --text-base: 1rem;
  /* 17px */
  --text-lg: 1.125rem;
  /* 19px */
  --text-xl: 1.25rem;
  /* 21.25px */
  --text-2xl: 1.5rem;
  /* 25.5px */
  --text-3xl: 1.875rem;
  /* ~32px */
  --text-4xl: 2.25rem;
  /* ~38px */
  --text-5xl: 3rem;
  /* 51px */

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 1.7;
  --leading-code: 1.4;

  /* Icon Sizing Scale */
  --icon-sm: 1rem;
  /* 16px */
  --icon-base: 1.25rem;
  /* 20px */
  --icon-md: 1.5rem;
  /* 24px */
  --icon-lg: 2rem;
  /* 32px */

  /* ── Spacing Subsystem (Multiples of 4px relative) ───────────── */
  --space-1: 0.25rem;
  /* 4px */
  --space-2: 0.5rem;
  /* 8px */
  --space-3: 0.75rem;
  /* 12px */
  --space-4: 1rem;
  /* 16px */
  --space-5: 1.25rem;
  /* 20px */
  --space-6: 1.5rem;
  /* 24px */
  --space-7: 2rem;
  /* 32px */
  --space-8: 3rem;
  /* 48px */
  --space-9: 4rem;
  /* 64px */
  --space-10: 6rem;
  /* 96px */
  --space-11: 8rem;
  /* 128px */
  --space-12: 10rem;
  /* 160px */

  /* Layout Spacing Logic */
  --page-padding-x: var(--space-6);
  --gap-section: var(--space-8);
  --gap-page: var(--space-10);
  --gap-inline: var(--space-4);

  /* ── Theme Semantic Mapping (Catppuccin Latte - Style Guide Compliant) ── */
  --color-bg: #eff1f5; /* Base: Background Pane */
  --color-text: #4c4f69; /* Text: Body Copy */
  --color-text-2: #5c5f77; /* Subtext 1: Secondary text */
  --color-surface: #e6e9ef; /* Mantle: Secondary Panes */
  --color-surface-2: #acb0be; /* Surface 2: Elevated Surfaces / Hover */
  --color-border: #bcc0cc; /* Surface 1: Inactive borders */
  --color-border-strong: #9ca0b0; /* Overlay 0: Strong borders */
  --color-muted: #5c5f77; /* Subtext 1: Sub-Headlines, Labels */
  --color-accent: #1e66f5; /* Blue: Primary accent for links */
  --color-accent-dim: #7287fd; /* Lavender: Secondary accent */
  --color-accent-text: #eff1f5; /* Base: Text on accent background */
  --color-heading: #4c4f69; /* Text: Main Headline */
  --color-code-bg: #e6e9ef; /* Mantle: Secondary Pane */
  --color-code-text: #4c4f69; /* Text */

  /* Light mode shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 9999px;

  /* Timing */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.17, 0.67, 0.54, 1);

  /* Touch targets */
  --min-tap-height: 44px;
}@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    /* Dark Theme (Catppuccin Mocha) via System */
    --color-bg: #1e1e2e;
    --color-text: #cdd6f4;
    --color-text-2: #bac2de;
    --color-surface: #181825;
    --color-surface-2: #585b70;
    --color-border: #313244;
    --color-border-strong: #585b70;
    --color-muted: #6c7086;
    --color-accent: #89dceb;
    --color-accent-dim: #cba6f7;
    --color-accent-text: #1e1e2e;
    --color-heading: #89b4fa;
    --color-code-bg: #181825;
    --color-code-text: #cdd6f4;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.7);
  }
}html.dark {
  /* Dark Theme (Catppuccin Mocha) via JS Toggle */
  --color-bg: #1e1e2e;
  --color-text: #cdd6f4;
  --color-text-2: #bac2de;
  --color-surface: #181825;
  --color-surface-2: #585b70;
  --color-border: #313244;
  --color-border-strong: #585b70;
  --color-muted: #6c7086;
  --color-accent: #89dceb;
  --color-accent-dim: #cba6f7;
  --color-accent-text: #1e1e2e;
  --color-heading: #89b4fa;
  --color-code-bg: #181825;
  --color-code-text: #cdd6f4;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.7);
}/* Breadcrumb styles */.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    padding-right: var(--space-4);
    color: var(--color-muted);
    overflow: hidden;
    white-space: nowrap;
    min-width: 0;
}.breadcrumb-separator {
    color: var(--color-muted);
    opacity: 0.5;
}.breadcrumb-link {
    color: var(--color-accent);
    transition: color var(--duration-base) ease;
}.breadcrumb-link:hover {
    color: var(--color-text);
    text-decoration: none;
}.breadcrumb-current {
    font-weight: 500;
    color: var(--color-text);
}/* Header styles */.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--page-padding-x);
    z-index: 10;
    background-color: var(--color-bg);
    background-color: color-mix(in srgb, var(--color-bg) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}/* Keep left side from overflowing into search area */.header > div:first-child {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: var(--space-6);
}.header > div:last-child {
    flex-shrink: 0;
}.header-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.02em;
    transition: color var(--duration-base) ease;
}.header-title:hover {
    color: var(--color-accent);
    text-decoration: none;
}/* Search styles */.search-container {
    position: relative;
}.search-icon {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--text-sm);
    color: var(--color-muted);
    pointer-events: none;
}.search-input {
    padding-left: 2.25rem;
    padding-right: var(--space-4);
    padding-block: var(--space-2);
    width: 16rem;
    background-color: var(--color-code-bg);
    border: 1px solid var(--color-border);
    border-radius: 9999px;
    color: var(--color-text);
    min-height: var(--min-tap-height);
    touch-action: manipulation;
    transition: border-color var(--duration-base) ease, box-shadow var(--duration-base) ease, width var(--duration-base) ease;
    font-size: var(--text-sm);
}.search-input::-moz-placeholder {
    color: var(--color-muted);
    opacity: 0.7;
}.search-input::placeholder {
    color: var(--color-muted);
    opacity: 0.7;
}.search-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
    width: 20rem;
}.search-results {
    position: fixed;
    left: 50%;
    top: 4rem;
    transform: translateX(-50%);
    width: 100%;
    max-width: 40rem;
    max-height: 60vh;
    overflow-y: auto;
    background: color-mix(in srgb, var(--color-code-bg) 95%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    padding: var(--space-2) 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-slow) ease, visibility var(--duration-slow) ease, transform var(--duration-slow) ease;
    transform: translateX(-50%) translateY(-10px);
}.search-results.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}.search-results.loading::before {
    content: 'Searching...';
    display: block;
    padding: var(--space-4) var(--space-5);
    color: var(--color-muted);
    text-align: center;
    font-style: italic;
}.search-results a {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-5);
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border);
    transition: background var(--duration-base) ease;
    min-height: 44px;
    touch-action: manipulation;
}.search-results a:last-child {
    border-bottom: none;
}.search-results a:hover {
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    color: var(--color-accent);
}.search-results .font-medium {
    font-weight: 600;
    color: var(--color-text);
}.search-results .text-theme-comment {
    color: var(--color-muted);
}.search-results mark {
    background: color-mix(in srgb, var(--color-accent) 30%, transparent);
    color: var(--color-text);
    padding: 0 2px;
    border-radius: 2px;
}/* Theme toggle styles */.theme-toggle {
    padding: var(--space-2);
    border-radius: var(--radius-md);
    color: var(--color-muted);
    min-height: var(--min-tap-height);
    min-width: var(--min-tap-height);
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    border: 1px solid var(--color-border);
    background-color: var(--color-code-bg);
    transition: all var(--duration-base) ease;
    cursor: pointer;
}.theme-toggle:hover {
    color: var(--color-text);
    border-color: var(--color-accent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--color-accent) 30%, transparent);
}/* Focus states */.search-input:focus {
    outline: none;
}.theme-toggle:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}.search-results a:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--color-surface-2) 50%, transparent);
}.theme-icon {
    display: block;
    line-height: 1;
    font-style: normal;
    font-size: 1.1rem;
}@media (prefers-color-scheme: dark) {
    .search-results {
        color: var(--color-text) !important;
    }

    .search-results .font-medium {
        color: var(--color-text) !important;
    }

    .search-results .text-theme-comment {
        color: var(--color-muted) !important;
    }
}@media (max-width: 768px) {
    /* Hide breadcrumb on mobile — too narrow to display cleanly */
    .breadcrumb {
        display: none;
    }

    .search-input {
        width: 8rem;
    }

    /* Don't expand the search box on mobile — no room */
    .search-input:focus {
        width: 8rem;
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 25%, transparent);
    }

    .search-results {
        width: calc(100vw - 2rem);
        max-width: none;
    }
}/* ============================================================
   NAVIGATION STYLES — Following Josh W. Comeau Design System
   Includes sliding accent bar micro-interaction
============================================================ *//* ============================================================
   NAVIGATION LIST — Reset semantics
============================================================ */.nav-list,
.nav-children {
  list-style: none;
  margin: 0;
  padding: 0;
}.nav-toggle,
.nav-link {
  cursor: pointer;
}.nav-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text);
  min-height: var(--min-tap-height);
  touch-action: manipulation;
  transition:
    background-color var(--duration-base) ease,
    color var(--duration-base) ease;
}.nav-toggle:hover {
  background-color: var(--color-surface-2);
  color: var(--color-text);
}.nav-arrow {
  display: inline-block;
  transition: transform var(--duration-base) var(--ease-out);
  font-size: var(--text-sm);
  width: var(--icon-xs);
  flex-shrink: 0;
  color: var(--color-muted);
}.nav-toggle[aria-expanded="true"] .nav-arrow {
  transform: rotate(90deg);
  /* color: var(--color-accent-text); */
}/* ============================================================
   NAVIGATION LINKS — Sliding accent bar
============================================================ */.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-2);
  text-decoration: none;
  min-height: var(--min-tap-height);
  transition:
    background-color var(--duration-base) ease,
    color var(--duration-base) ease;
}/* The sliding accent bar */.nav-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25%;
  bottom: 25%;
  width: 3px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background-color: var(--color-accent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--duration-base) var(--ease-spring);
}.nav-link:hover {
  background-color: var(--color-surface-2);
  color: var(--color-text);
}.nav-link:hover::before {
  transform: scaleY(1);
}/* Active page state */.nav-link[aria-current="page"],
.nav-link.nav-link-active {
  background-color: color-mix(in srgb, var(--color-accent-dim) 25%, transparent);
  color: var(--color-accent-dim);
  font-weight: 600;
}.nav-link[aria-current="page"]::before,
.nav-link.nav-link-active::before {
  transform: scaleY(1);
}/* Icon in nav link inherits colour transition */.nav-link .icon {
  color: var(--color-muted);
  width: var(--icon-sm);
  height: var(--icon-sm);
  display: block;
  transition: color var(--duration-base) ease;
}.nav-link:hover .icon,
.nav-link[aria-current="page"] .icon {
  color: var(--color-accent-text);
}/* ============================================================
   CHILDREN LIST — Nested navigation
============================================================ */.nav-children {
  padding-left: calc(var(--space-6) + var(--space-2));
  margin-top: var(--space-1);
  margin-bottom: var(--space-1);
  border-left: 1px solid var(--color-border);
}.nav-children[hidden] {
  display: none;
}/* ============================================================
   SIDEBAR — Sticky navigation panel
============================================================ */.sidebar {
  position: fixed;
  top: 4rem;
  left: 0;
  z-index: 20;
  height: calc(100vh - 4rem - 3rem);
  width: clamp(250px, 25vw, 350px);
  overflow-y: auto;
  padding: var(--space-4) var(--space-3);
  background-color: var(--color-code-bg);
  border-right: 1px solid var(--color-border);
  contain: layout style;
}.sidebar::-webkit-scrollbar {
  width: 4px;
}.sidebar::-webkit-scrollbar-track {
  background: transparent;
}.sidebar::-webkit-scrollbar-thumb {
  background-color: var(--color-border-strong);
  border-radius: 2px;
}/* ============================================================
   TAGS — Pop animation on hover
============================================================ */.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline);
  padding: 3px 10px;
  min-height: 24px;
  border-radius: var(--radius-pill);
  background-color: var(--color-accent-dim);
  color: var(--color-accent-text);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.03em;
  transition:
    background-color var(--duration-base) ease,
    color var(--duration-base) ease,
    transform var(--duration-base) var(--ease-spring),
    box-shadow var(--duration-base) ease;
}.tag:hover {
  background-color: var(--color-accent);
  color: hsl(0, 0%, 100%);
  transform: scale(1.06);
  box-shadow: 0 2px 8px hsl(var(--shadow-color) / 0.15);
}.tag:active {
  transform: scale(0.97);
  transition-duration: var(--duration-fast);
}/* ============================================================
   METADATA — Timestamps, captions
============================================================ */.article-meta,
.card-meta {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-muted);
}/* ============================================================
   FOCUS STATES
============================================================ */.nav-toggle:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}/* ============================================================
   RESPONSIVE — Mobile drawer
============================================================ */@media (max-width: 1023px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: min(280px, 80vw);
    height: 100vh;
    z-index: 50;
    background-color: var(--color-bg);
    border-right: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    transition: transform var(--duration-slow) var(--ease-in-out);
  }

  .sidebar[data-open="true"] {
    transform: translateX(0);
  }
}@media (max-width: 768px) {
  .site-header {
    height: 48px;
  }

  .header-title {
    display: none;
  }

  .content-area {
    padding: var(--space-6) var(--page-padding-x);
  }
}/* Code block header styles - only for standalone strong elements */.prose :where(p > strong:only-child) {
    display: block;
    font-size: var(--text-sm);
    margin-bottom: var(--space-1);
    color: var(--color-muted);
}/* Reduce spacing between code header and code block */.prose :where(p + pre),
.prose :where(p + .code),
.prose :where(p:has(> strong) + pre),
.prose :where(p:has(> strong) + .code) {
    margin-top: 0;
}/* Remove bottom margin on paragraph if followed by code */.prose :where(p:has(> strong)) {
    margin-bottom: 0;
}/* Base prose styles */.prose {
    color: var(--color-text);
    line-height: 1.7;
    word-spacing: 0.05em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}/* Reset margin for first and last child to prevent double spacing with containers */.prose> :first-child {
    margin-top: 0 !important;
}.prose> :last-child {
    margin-bottom: 0 !important;
}/* Headings */.prose :where(h1, h2, h3, h4, h5, h6) {
    scroll-margin-top: 5rem;
}.prose :where(h2 + h3, h3 + h4) {
    margin-top: 0.75em;
}/* Paragraphs */.prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    margin-top: 0;
    margin-bottom: var(--leading-loose);
    margin-bottom: 1.5em;
    hyphens: auto;
    word-break: break-word;
    text-wrap: pretty;
    overflow-wrap: break-word;
}/* Tighter grouping for paragraphs introducing lists, tables, or codeblocks */.prose :where(p):has(+ ul),
.prose :where(p):has(+ ol),
.prose :where(p):has(+ table),
.prose :where(p):has(+ .markdown-table),
.prose :where(p):has(+ .dataTables_wrapper) {
    margin-bottom: var(--space-2) !important;
}/* Better text selection */.prose ::-moz-selection {
    background-color: color-mix(in srgb, var(--color-accent) 25%, transparent);
    color: var(--color-text);
}.prose ::selection {
    background-color: color-mix(in srgb, var(--color-accent) 25%, transparent);
    color: var(--color-text);
}/* Links — box-shadow underline (Josh Comeau style):
 * The underline is a 1.5px box-shadow that fades out on hover.
 * This works across line-breaks with box-decoration-break: clone. */.prose :where(a) {
    color: var(--color-accent);
    text-decoration: none;
    box-shadow: 0 1.5px 0 var(--color-accent);
    transition: box-shadow 0.2s, color 0.2s;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    touch-action: manipulation;
}.prose :where(a:hover) {
    color: var(--color-accent);
    box-shadow: 0 0 0 transparent;
}.prose :where(a:focus-visible) {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
    box-shadow: none;
}/* Inline code — Josh Comeau style:
 * mix-blend-mode: darken/lighten makes it integrate cleanly on tinted backgrounds
 * (e.g. inside callouts). No border needed — the bg contrast does the work. */.prose :where(code) {
    position: relative;
    display: inline;
    font-family: var(--font-mono);
    font-size: 0.9375em;
    letter-spacing: -0.5px;
    padding: 2px 6px;
    margin: 1px -1px;
    background-color: var(--color-code-bg);
    color: var(--color-accent);
    border-radius: 3px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}html.light .prose :where(code) {
    mix-blend-mode: darken;
}html.dark .prose :where(code) {
    mix-blend-mode: lighten;
}/* Blockquotes */.prose :where(blockquote) {
    padding-left: var(--space-4);
    font-style: italic;
    margin-block: var(--space-5);
    padding-block: var(--space-1);
    border-left: 3px solid var(--color-accent);
    color: var(--color-muted);
    background: color-mix(in srgb, var(--color-accent) 6%, transparent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}/* Strong/emphasis */.prose :where(strong) {
    font-weight: 600;
    color: var(--color-text);
}.prose :where(em) {
    font-style: italic;
    color: var(--color-text);
}/* Lists */.prose :where(ul, ol) {
    margin-top: 0.5em;
    margin-bottom: 1.5em;
    padding-left: 1.75em;
    line-height: var(--leading-loose);
}.prose :where(ul > li, ol > li) {
    margin-bottom: 0.4em;
    padding-left: 0;
}.prose :where(ul) {
    list-style-type: disc;
}.prose :where(ul ul) {
    list-style-type: circle;
}.prose :where(ol) {
    list-style-type: decimal;
}.prose :where(li)::marker {
    color: var(--color-accent);
}/* Horizontal rules */.prose :where(hr) {
    border: none;
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            var(--color-surface-2) 30%,
            var(--color-surface-2) 70%,
            transparent);
    margin: 2.5em 0;
}/* Tables */.prose :where(.dataTables_wrapper) {
    margin-bottom: var(--space-4);
}.prose :where(table) {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-4);
    border-radius: var(--radius-md);
    overflow: hidden;
}.prose :where(th) {
    padding: var(--space-2) var(--space-4);
    text-align: left;
    border-bottom: 2px solid var(--color-accent);
    background-color: color-mix(in srgb, var(--color-surface-2) 90%, black);
    color: var(--color-text);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}.prose :where(td) {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}.prose :where(tr:nth-child(even) td) {
    background-color: color-mix(in srgb, var(--color-code-bg) 50%, transparent);
}.prose :where(table p) {
    margin: 0;
}/* Images */.prose :where(img) {
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5em 0;
    box-shadow: var(--shadow-md);
}/* ── Heading anchor links ─────────────────────────────────────── *//* Headings need position: relative so the anchor can be absolutely placed */.prose :where(h1, h2, h3, h4, h5, h6) {
    position: relative;
}/*
 * Hidden by default and on touch/narrow screens.
 * There's no room to the left for the slide-out icon on small screens,
 * and hover doesn't exist on coarse (touch) pointers.
 */.heading-anchor {
    display: none;
    box-shadow: none;
}/* Only show on mouse (fine pointer) + wide screen */@media (pointer: fine) and (min-width: 48rem) {
    .heading-anchor {
        --in-curve: cubic-bezier(0.17, 0.67, 0.47, 1);
        --out-curve: cubic-bezier(0.61, 0.55, 0.24, 0.97);

        /*
         * Size in em so the button and icon scale with each heading level.
         * top:50% + translateY(-50%) gives exact vertical centering regardless
         * of heading height — more reliable than the top/bottom/margin:auto trick.
         */
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 50%;
        left: calc(var(--space-6) * -1);
        width: var(--space-6);
        height: var(--space-6);
        border-radius: var(--radius-sm);

        color: var(--color-muted);
        text-decoration: none;
        box-shadow: none;

        transform: translate(25%, -50%);
        opacity: 0;
        transition: opacity 400ms, transform 400ms var(--out-curve);
        transition-delay: 250ms;
        will-change: transform;
    }

    /* In-animation on heading hover: fast + springy, no delay */
    .prose :where(h1, h2, h3, h4, h5, h6):hover .heading-anchor,
    .heading-anchor:focus-visible {
        opacity: 1;
        transform: translate(0, -50%);
        transition: opacity 250ms, transform 250ms var(--in-curve);
        transition-delay: 0ms;
    }

    .heading-anchor:hover {
        color: var(--color-accent);
    }
}/* Fixed icon size so it fits perfectly in the margin gap regardless of heading level */.heading-anchor-icon {
    width: 1.1rem;
    height: 1.1rem;
    display: block;
}/* Footer styles */.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--space-4);
    z-index: 30;
    background-color: var(--color-bg); /* fallback */
    background-color: color-mix(in srgb, var(--color-bg) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--color-border);
}.footer-content {
    display: flex;
    align-items: center;
    gap: var(--gap-inline);
    font-size: var(--text-xs);
    color: var(--color-muted);
    opacity: 0.8;
}.footer-icon {
    width: var(--icon-sm);
    height: var(--icon-sm);
    color: var(--color-muted);
}/* Syntax highlighting styles */pre {
    padding: var(--space-4);
    overflow-x: auto;
    background-color: var(--color-code-bg);
    color: var(--color-code-text);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: var(--leading-code);
    margin-top: 0.5em;
    margin-bottom: 1.5em;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}pre[class*="language-"] {
    margin: 0;
}pre code {
    display: block;
    background-color: transparent !important;
}/* Code blocks */.code {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    white-space: pre;
    padding: var(--space-2) var(--space-4);
    background-color: var(--color-code-bg) !important;
    border: 1px solid var(--color-border);
    line-height: inherit;
    text-wrap: wrap;
    isolation: isolate;
    container-type: inline-size;
    min-height: 2.5em;
    /* Ensure minimum height for button positioning */
    margin-bottom: var(--space-6);
}/* 
 * Recreated Tailwind Safelist Classes for Syntax Highlighting 
 * (Because we removed Tailwind, these must exist statically) 
 *//* Catppuccin Dark */.text-theme-catppuccin-dark-foreground {
    color: #cdd6f4;
}.text-theme-catppuccin-dark-comment {
    color: #6c7086;
}.text-theme-catppuccin-dark-red {
    color: #f38ba8;
}.text-theme-catppuccin-dark-orange {
    color: #fab387;
}.text-theme-catppuccin-dark-yellow {
    color: #f9e2af;
}.text-theme-catppuccin-dark-green {
    color: #a6e3a1;
}.text-theme-catppuccin-dark-purple {
    color: #cba6f7;
}.text-theme-catppuccin-dark-cyan {
    color: #89dceb;
}.text-theme-catppuccin-dark-pink {
    color: #f5c2e7;
}.text-theme-catppuccin-dark-link {
    color: #7aa2f7;
}.bg-theme-catppuccin-dark-background {
    background-color: #1e1e2e;
}.bg-theme-catppuccin-dark-selection {
    background-color: #585b70;
}.bg-theme-catppuccin-dark-code-bg {
    background-color: #181825;
}.border-theme-catppuccin-dark-selection {
    border-color: #585b70;
}.border-theme-catppuccin-dark-code-border {
    border-color: #313244;
}/* Catppuccin Light */.text-theme-catppuccin-light-foreground {
    color: #4c4f69;
}.text-theme-catppuccin-light-comment {
    color: #9ca0b0;
}.text-theme-catppuccin-light-red {
    color: #d20f39;
}.text-theme-catppuccin-light-orange {
    color: #fe640b;
}.text-theme-catppuccin-light-yellow {
    color: #df8e1d;
}.text-theme-catppuccin-light-green {
    color: #40a02b;
}.text-theme-catppuccin-light-purple {
    color: #8839ef;
}.text-theme-catppuccin-light-cyan {
    color: #179299;
}.text-theme-catppuccin-light-pink {
    color: #ea76cb;
}.text-theme-catppuccin-light-link {
    color: #7aa2f7;
}.bg-theme-catppuccin-light-background {
    background-color: #eff1f5;
}.bg-theme-catppuccin-light-selection {
    background-color: #ccd0da;
}.bg-theme-catppuccin-light-code-bg {
    background-color: #e6e9ef;
}.border-theme-catppuccin-light-selection {
    border-color: #ccd0da;
}.border-theme-catppuccin-light-code-border {
    border-color: #dce0e8;
}/* Dracula Dark */.text-theme-dracula-dark-foreground {
    color: #f8f8f2;
}.text-theme-dracula-dark-comment {
    color: #6272a4;
}.text-theme-dracula-dark-red {
    color: #ff5555;
}.text-theme-dracula-dark-orange {
    color: #ffb86c;
}.text-theme-dracula-dark-yellow {
    color: #f1fa8c;
}.text-theme-dracula-dark-green {
    color: #50fa7b;
}.text-theme-dracula-dark-purple {
    color: #bd93f9;
}.text-theme-dracula-dark-cyan {
    color: #8be9fd;
}.text-theme-dracula-dark-pink {
    color: #ff79c6;
}.text-theme-dracula-dark-link {
    color: #7aa2f7;
}.bg-theme-dracula-dark-background {
    background-color: #282a36;
}.bg-theme-dracula-dark-selection {
    background-color: #44475a;
}.bg-theme-dracula-dark-code-bg {
    background-color: #1e1f29;
}.border-theme-dracula-dark-selection {
    border-color: #44475a;
}.border-theme-dracula-dark-code-border {
    border-color: #44475a;
}/* Dracula Light */.text-theme-dracula-light-foreground {
    color: #1e1e1e;
}.text-theme-dracula-light-comment {
    color: #5b47bf;
}.text-theme-dracula-light-red {
    color: #bf322c;
}.text-theme-dracula-light-orange {
    color: #cc423b;
}.text-theme-dracula-light-yellow {
    color: #786420;
}.text-theme-dracula-light-green {
    color: #226719;
}.text-theme-dracula-light-purple {
    color: #6d5cc7;
}.text-theme-dracula-light-cyan {
    color: #1b628b;
}.text-theme-dracula-light-pink {
    color: #951245;
}.text-theme-dracula-light-link {
    color: #2077aa;
}.bg-theme-dracula-light-background {
    background-color: #f4f4f4;
}.bg-theme-dracula-light-selection {
    background-color: #5a568c;
}.bg-theme-dracula-light-code-bg {
    background-color: #f4f4f4;
}.border-theme-dracula-light-selection {
    border-color: #5a568c;
}.border-theme-dracula-light-code-border {
    border-color: #cc423b;
}.markdown-table {
    width: 100%;
    overflow-x: auto;
    margin-top: 0;
    margin-bottom: 0;
}.markdown-table table {
    width: 100%;
    border-collapse: collapse;
}.markdown-table th {
    padding: var(--space-2) var(--space-3);
    text-align: left;
    border-bottom: 2px solid var(--color-accent);
    background-color: color-mix(in srgb, var(--color-surface-2) 90%, black);
    color: var(--color-text);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}.markdown-table td {
    padding: var(--space-1) var(--space-3);
    border-bottom: 1px solid var(--color-surface-2);
    color: var(--color-text);
}.markdown-code {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-top: var(--space-4);
    margin-bottom: var(--space-6);
    background-color: var(--color-code-bg);
    border: 1px solid var(--color-border);
    contain: layout style;
    isolation: isolate;
    container-type: inline-size;
}/* Subtle outline in dark mode (Josh Comeau: visible border only when bg is dark) */html.dark .code,
html.dark .markdown-code {
    outline: 1px solid var(--color-border);
    outline-offset: -1px;
}.markdown-code pre {
    padding: var(--space-4);
    overflow-x: auto;
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    background-color: transparent;
}.svgbob-diagram {
    background-color: var(--svgbob-bg, var(--color-bg));
    border: 1px solid var(--color-surface-2);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    overflow-x: auto;
    display: inline-block;
    min-width: -moz-min-content;
    min-width: min-content;
}.svgbob-diagram svg {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}.svgbob-diagram svg path {
    stroke: var(--svgbob-fg, var(--color-text));
    fill: var(--svgbob-fg, var(--color-text));
}canvas.glslCanvas {
    width: 100%;
    max-width: 500px;
    height: auto;
    aspect-ratio: 5 / 3;
}figure.markmap-diagram {
    width: 100%;
    height: 500px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--theme-background);
    color: var(--theme-foreground);
    /* override the generic diagram flex centering */
    display: block;
}figure.markmap-diagram svg {
    width: 100% !important;
    height: 100% !important;
    /* must be explicit, not auto */
    max-width: 100%;
    max-height: 100%;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}/* Block pan/zoom interactions on the SVG background */figure.markmap-diagram svg>g {
    pointer-events: none;
}/* But re-enable on links inside foreignObject */figure.markmap-diagram svg foreignObject a {
    pointer-events: all;
    cursor: pointer;
}html.dark figure.markmap-diagram,
html.dark figure.markmap-diagram svg {
    background: var(--theme-background) !important;
    color: var(--theme-foreground) !important;
}html.light figure.markmap-diagram,
html.light figure.markmap-diagram svg {
    background: var(--theme-background) !important;
    color: var(--theme-foreground) !important;
}strudel-repl {
    display: block;
    position: relative;
    margin-bottom: var(--space-12);
    font-size: 0;
    /* Hide naked text nodes */
    color: transparent;
}strudel-repl::before {
    content: none;
}strudel-repl>*:not(iframe) {
    display: none;
}strudel-repl iframe {
    font-size: initial;
    color: initial;
}div.code span.block {
    display: inline !important;
}div.code>span {
    text-wrap-mode: wrap;
}/* Tighter grouping for paragraphs acting as code block headers */p:has(+ .code),
p:has(+ .markdown-code),
p:has(+ pre) {
    margin-bottom: var(--space-2) !important;
}p+.code,
p+.markdown-code,
p+pre {
    margin-top: var(--space-2) !important;
}.copy-button {
    position: absolute;
    right: var(--space-2);
    fill: currentColor;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    opacity: 0.5;
    transition: opacity var(--duration-base) ease, transform var(--duration-base) ease;
    color: var(--color-muted);
    background-color: var(--color-code-bg);
    min-height: 32px;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    will-change: opacity, transform;
    top: min(0.5rem, 10%);
}.copy-button:hover {
    opacity: 1;
    background-color: var(--color-surface-2);
    transform: scale(1.05);
}.copy-button:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    opacity: 1;
}.copy-button.copied {
    color: hsl(145, 60%, 45%);
    transform: scale(1.1);
}/* On touch devices, keep the copy button visible since hover never fires */@media (pointer: coarse) {
    .copy-button {
        opacity: 0.75;
        min-height: 40px;
        min-width: 40px;
    }
}.copy-feedback {
    position: absolute;
    top: 0.75rem;
    right: 2.5rem;
    animation: fadeOut 1.5s forwards;
}/* Command line styles */.command-line {
    font-size: var(--text-sm);
    color: var(--color-text);
    background-color: var(--color-code-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin: var(--space-4) 0;
    font-family: var(--font-mono);
}.command-line pre {
    margin: 0;
    padding: 0;
    background-color: transparent !important;
}/* Response line styles */.response-line {
    font-size: var(--text-sm);
    color: var(--color-muted);
    background-color: var(--color-code-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin: var(--space-4) 0;
    font-family: var(--font-mono);
}.response-line pre {
    margin: 0;
    padding: 0;
    background-color: transparent !important;
}/* Inline code */.inline-code {
    padding-inline: var(--space-1);
    padding-block: 2px;
    border-radius: var(--radius-sm);
    background-color: var(--color-code-bg);
    color: var(--color-text);
}/* Server-Side Diagram Styling */.d2-diagram,
.mermaid-diagram,
.plantuml-diagram,
.vega-diagram,
.vega-lite-diagram,
/* .markmap-diagram, */
.svgbob-diagram {
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
    overflow-x: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}.d2-diagram svg,
.mermaid-diagram svg,
.plantuml-diagram svg,
.vega-diagram svg,
.vega-lite-diagram svg,
/* .markmap-diagram svg, */
.svgbob-diagram svg {
    max-width: 100%;
    height: auto;
}/* GL Shader Rendering */.glshader {
    position: relative;
    margin: var(--space-6) 0;
    border-radius: var(--radius-lg);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    overflow: hidden;
    min-height: 200px;
    box-shadow: var(--shadow-sm);
}.shader-play-button {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 10;
}.shader-play-button:hover {
    transform: scale(1.1) rotate(5deg);
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}.shader-play-button:active {
    transform: scale(0.95);
}.shader-icon {
    width: 20px;
    height: 20px;
    fill: white;
    filter: drop-shadow(0 0 4px rgba(0, 255, 136, 0.5));
    transition: transform 0.3s ease;
}.shader-code-content {
    padding: var(--space-6);
    font-family: var(--font-mono);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.6;
    background: transparent;
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
}.glshader canvas {
    display: block;
    width: 100%;
    height: 400px;
    background: black;
}/* Dark mode overrides for shader */html.dark .glshader {
    border-color: var(--color-surface-3);
    background: var(--color-surface-1);
}html.dark .shader-code-content {
    color: var(--color-text-muted);
}/* TOC styles *//* Reset list semantics — no bullets, no spacing */.toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}.toc-list > li {
    list-style: none;
    padding: 0;
    margin: 0;
}/* ── Title ───────────────────────────────────────────────────── */.toc-title {
    font-size: var(--text-base);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: var(--space-4);
    color: var(--color-text);
}/* ── Links ───────────────────────────────────────────────────── *//*
 * Default state: slightly faded.
 * Hover: snaps to full opacity instantly (transition: 0ms).
 */.toc-link {
    display: block;
    color: var(--color-muted);
    text-decoration: none;
    line-height: var(--leading-normal);
    transition: color 200ms;
    touch-action: manipulation;
}.toc-link:hover,
.toc-link:focus {
    color: var(--color-text);
    text-decoration: none;
    outline: none;
}/* Keyboard focus gets a visible ring instead */.toc-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}/* Active: full opacity + accent colour — no border */.toc-link-active {
    color: var(--color-accent);
}/* ── Per-level sizing and spacing ────────────────────────────── *//*
 * Josh Comeau's pattern:
 *   top-level (h2)  → font-size: 1rem,       margin-top: 12px
 *   nested (h3+)    → font-size: 0.875rem,    margin-top: 4px, padding-left: 12px
 */.toc-link[data-level="1"],
.toc-link[data-level="2"] {
    font-size: var(--text-sm);
    margin-top: var(--space-3); /* 12px */
}/* First item needs no top margin */.toc-list > li:first-child .toc-link {
    margin-top: 0;
}.toc-link[data-level="3"],
.toc-link[data-level="4"],
.toc-link[data-level="5"],
.toc-link[data-level="6"] {
    font-size: var(--text-xs);
    margin-top: var(--space-1); /* 4px */
    padding-left: var(--space-3); /* 12px */
}/* ── Container ───────────────────────────────────────────────── */.toc {
    position: fixed;
    top: 4rem;
    right: 0;
    overflow-y: auto;
    padding: var(--space-4);
    z-index: 20;
    height: calc(100vh - 4rem - 3rem);
    width: clamp(200px, 20vw, 280px);
    background-color: var(--color-code-bg);
    border-left: 1px solid var(--color-border);
    contain: layout style;
    scrollbar-width: thin;
    scrollbar-color: var(--color-surface-2) transparent;
}/* Slide-in animation when the TOC first appears */.toc-inner {
    animation: toc-slide-in 700ms cubic-bezier(0.17, 0.67, 0.54, 1) both;
}@keyframes toc-slide-in {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0);    }
}.toc::-webkit-scrollbar {
    width: 4px;
}.toc::-webkit-scrollbar-track {
    background: transparent;
}.toc::-webkit-scrollbar-thumb {
    background-color: var(--color-surface-2);
    border-radius: 2px;
}/* ── Mobile TOC ──────────────────────────────────────────────── */.mobile-toc-button {
    position: fixed;
    bottom: 4rem;
    right: var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-lg);
    z-index: 30;
    display: block;
    background-color: var(--color-surface-2);
    color: var(--color-text);
    min-height: 56px;
    min-width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    border: none;
    cursor: pointer;
}.mobile-toc-button:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}@media (max-width: 1100px) {
    .toc {
        position: fixed;
        top: 100%;
        right: 0;
        left: 0;
        width: 100%;
        height: 70vh;
        transform: translateY(0);
        transition: transform var(--duration-slow) var(--ease-in-out);
        border-left: none;
        border-top: 1px solid var(--color-border);
        border-radius: 1rem 1rem 0 0;
        will-change: transform;
    }

    .toc.hidden {
        transform: translateY(100%);
    }

    .toc.open {
        transform: translateY(-30vh);
    }
}.mobile-toc-open {
    position: fixed;
    top: 4rem;
    right: 0;
    width: 100%;
    height: calc(100vh - 4rem);
    overflow-y: auto;
    padding: var(--space-4);
    z-index: 20;
    background-color: var(--color-bg);
}@media (min-width: 769px) {
    .mobile-toc-open {
        display: none;
    }

    .mobile-menu-button {
        display: none;
    }
}/* Callout accent colour per type */.callout.note {
    --callout-accent: #3b82f6;
}.callout.info {
    --callout-accent: #06b6d4;
}.callout.tip {
    --callout-accent: hsl(145, 60%, 45%);
}.callout.warning {
    --callout-accent: hsl(40, 90%, 45%);
}.callout.failure,
.callout.danger,
.callout.bug {
    --callout-accent: hsl(0, 70%, 55%);
}/*
 * Base callout — matches Josh Comeau's .b1btlj5u:
 *   transparent left border (just for padding spacing)
 *   tinted background from the accent color
 *   extra left margin so the bar/icon can hang outside
 */.callout {
    --aside-border-width: 3px;
    position: relative;
    margin: 2.5em 0 2em 1.75rem;
    padding: 1.5rem 1.5rem 1.5rem calc(1.5rem - var(--aside-border-width));
    border-left: var(--aside-border-width) solid transparent;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    --callout-background: color-mix(in srgb, var(--callout-accent) 10%, var(--color-bg));
    background-color: var(--callout-background);
    overflow: visible;
}/* Reduce gap between back-to-back callouts */.callout+.callout {
    margin-top: -1rem;
}/*
 * Bar container — matches .dwkrqh8:
 *   absolute, full height, flex column, shifted left by border-width
 *   so it overlaps the transparent border area exactly.
 */.callout-bar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    transform: translateX(-3px);
    pointer-events: none;
}/*
 * Corner fold SVG — matches .sl0r50n:
 *   display: block so it sits in the flex column flow.
 *   overflow: visible so the paths can extend beyond the SVG viewBox.
 *   Slight negative margin to close the 0.5px gap between SVG bottom and bar top.
 */.callout-bar-cap {
    display: block;
    overflow: visible;
    margin-top: -0.5px;
    flex-shrink: 0;
    color: var(--color-bg);
}.callout-bar-cap path:first-child {
    fill: currentColor;
}.callout-bar-cap path:last-child {
    fill: var(--callout-accent);
}/*
 * Vertical accent line — matches .f1dj028m:
 *   flex: 1 so it fills remaining height below the cap SVG.
 *   border-radius: 0 0 100px 100px — flat top (connects to SVG), rounded bottom.
 *   margin-top: -1px closes the seam between SVG cap and the line.
 */.callout-bar-line {
    flex: 1;
    width: 3px;
    border-radius: 0 0 100px 100px;
    margin-top: -1px;
    background: var(--callout-accent);
}/*
 * Mobile fallback bar — matches .m1m3o2ch:
 *   hidden by default; shown on narrow screens when the bar container is hidden.
 *   Simple absolute rect with fully rounded ends (10px radius).
 */.callout-bar-mobile {
    display: none;
    position: absolute;
    top: 0;
    left: -3px;
    bottom: 0;
    height: 100%;
    width: 3px;
    border-radius: 10px;
    background: var(--callout-accent);
}/*
 * Icon — matches .iohjz9i:
 *   Positioned at the top-left corner of the aside's left border.
 *   translate(-50% - 1.5px, -50%) centres it on the border edge.
 *   No background circle — just the icon with padding and accent color.
 */.callout-icon {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(calc(-50% - 1.5px), -50%);
    padding: var(--space-2);
    color: var(--callout-accent);
}.callout-icon svg {
    display: block;
}/* On narrow screens: hide the outside decorations, show the mobile bar */@media (max-width: 768px) {
    .callout {
        margin-left: 0;
        margin-top: 1.5em;
    }

    .callout-bar,
    .callout-icon {
        display: none;
    }

    .callout-bar-mobile {
        display: block;
    }
}/* Type label — uppercased, accent-colored, small caps */.callout-label {
    display: block;
    margin-top: -1.5rem;
    margin-left: 0.75rem;
    font-weight: 700;
    font-size: var(--text-md);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--callout-accent);
    margin-bottom: var(--space-2);
}/* Optional custom title within a callout */.callout-title {
    font-weight: 600;
    font-size: var(--text-sm);
    margin: 0 0 var(--space-2) 0;
    color: var(--color-text);
}/* Content area — matches .c690lmu */.callout-content {
    display: grid;
    color: var(--color-text);
    opacity: 0.9;
    line-height: var(--leading-relaxed);
    font-size: var(--text-sm);
}.callout-content>*:last-child {
    margin-bottom: 0;
}/* Base styles */html {
  height: 100%;
  background-color: var(--color-bg);
  font-family: var(--font-body);
  font-size: 106.25%;
  /* 17px based on guidelines */
  scroll-behavior: smooth;
}h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  font-family: var(--font-heading);
}body {
  height: 100%;
  background-color: var(--color-bg);
  color: var(--color-text);
  max-width: none;
  margin: 0;
}/* Layout styles */.main-container {
  display: flex;
  height: 100%;
  padding-top: 4rem;
  /* Exact height of the fixed header */
  min-height: calc(100vh - 3rem);
  /* Account for footer height */
}.main-content {
  flex: 1;
  margin-left: clamp(250px, 25vw, 350px);
  margin-right: clamp(200px, 20vw, 280px);
  background-color: var(--color-bg);
  overflow-y: auto;
  height: calc(100vh - 4rem);
  scrollbar-width: thin;
  scrollbar-color: var(--color-surface-2) transparent;
}.main-content::-webkit-scrollbar {
  width: 6px;
}.main-content::-webkit-scrollbar-track {
  background: transparent;
}.main-content::-webkit-scrollbar-thumb {
  background-color: var(--color-surface-2);
  border-radius: 3px;
}@media (max-width: 1100px) {
  .main-content {
    margin-right: 0;
  }
}@media (max-width: 768px) {
  .main-content {
    margin-left: 0;
    margin-right: 0;
    /* Height: viewport minus header (4rem) minus footer (3rem) */
    height: calc(100vh - 4rem - 3rem);
  }
}/* Ensure content never hides under the fixed footer on any screen size */@media (max-width: 768px) {
  .content-container {
    padding-bottom: 5rem;
  }
}.content-container {
  padding-top: var(--space-4);
  padding-right: var(--space-6);
  padding-bottom: var(--space-8);
  padding-left: var(--space-6);
  max-width: none;
  width: 100%;
  background-color: var(--color-bg);
  container-type: inline-size;
}@media (max-width: 768px) {
  .content-container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}.search-results {
  background: var(--color-code-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}article+h2 {
  margin-top: 0.5em;
}/* Typography styles moved from tailwind.config.js */.lead {
  color: var(--color-text);
}a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}/* Josh W. Comeau–inspired button style */.btn,
.button {
  --btn-height: 2.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  gap: 0.5rem;
  min-height: var(--btn-height);
  border-radius: 0.5rem;
  border: 1px solid transparent;
  background: var(--color-accent);
  color: var(--color-bg);
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0, .67, .6, 1.24), box-shadow 0.2s ease;
  text-decoration: none;
  touch-action: manipulation;
}.btn:hover,
.button:hover {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
  transform: translateY(-1px);
}.btn:active,
.button:active {
  transform: scale(0.98);
}.btn:disabled,
.button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}strong {
  color: var(--color-text);
  font-weight: 600;
}h1 {
  color: var(--color-heading);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 1.5em;
  margin-bottom: 0.75em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--color-border);
  letter-spacing: -0.02em;
}h1 strong {
  font-weight: 900;
  color: inherit;
}h2 {
  color: var(--color-heading);
  font-weight: 700;
  font-size: 1.75em;
  margin-top: 1.5em;
  margin-bottom: 0.75em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--color-border);
  letter-spacing: -0.01em;
}h2 strong {
  font-weight: 800;
  color: inherit;
}h3 {
  color: var(--color-heading);
  font-weight: 600;
  font-size: 1.35em;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  letter-spacing: -0.01em;
}h3 strong {
  font-weight: 700;
  color: inherit;
}h4 {
  color: var(--color-heading);
  font-weight: 600;
  font-size: 1.15em;
  margin-top: 1.2em;
  margin-bottom: 0.5em;
}h4 strong {
  font-weight: 700;
  color: inherit;
}h5 {
  font-size: 0.8em;
}h6 {
  font-size: 0.7em;
}/* Container query support for responsive design */@supports (container-type: inline-size) {
  .content-container {
    container-type: inline-size;
  }
}/* Performance optimizations */.main-container {
  contain: layout style;
}/* Smooth scrolling for better UX */* {
  scroll-margin-top: 5rem;
}/* End typography styles *//* Visually hidden but accessible to screen readers */.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}/* Josh W. Comeau-inspired component utilities */.floating-action {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  border: 0 solid var(--color-text);
  border-radius: 8px;
  transform: translate(50px, -80px);
  opacity: 0.6;
  transition: opacity 0.4s ease, transform 0.4s ease;
  background: var(--color-surface-2);
  color: var(--color-text);
  pointer-events: auto;
}.floating-action:hover,
.floating-action:focus-visible {
  opacity: 1;
  border-width: 1px;
  outline: 2px solid var(--color-accent);
  transform: translate(50px, -80px) scale(1.05);
}.floating-action[data-pressed="true"] {
  border-width: 3px;
}.component-panel {
  position: relative;
  padding: 1rem;
  background: var(--color-code-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}.component-panel:focus-within {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}.range-control {
  --handle-size: 1.5rem;
  position: relative;
  width: 100%;
  height: 2.5rem;
  background: var(--color-border);
  border-radius: 999px;
  border: 1px solid var(--color-border);
  overflow: hidden;
}.range-control input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: pointer;
}.range-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--handle-size);
  height: var(--handle-size);
  border-radius: 50%;
  background: var(--color-text);
  border: 2px solid var(--color-code-bg);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.16);
  -webkit-transition: transform 0.2s ease;
  transition: transform 0.2s ease;
}.range-control input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.1);
}