/* ---------------------------------------------------------------------------
   JetBrains Mono, self-hosted. Variable font, weight axis 100-800, so one
   file per subset covers 400/500/600. No third-party request on the critical
   path: nothing external can stall first paint or a view transition.
   Source: https://fonts.google.com/specimen/JetBrains+Mono (OFL-1.1)
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin-ext-bd4781a31b4215a1e80868802b3d0e05.woff2?vsn=d') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin-b636a65da4f00129f08c7df6e5dd75ac.woff2?vsn=d') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-accent: #9184d9;
  --color-accent-2: #a7a1db;
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);

  --color-neutral-100: #f3f5fe;
  --color-neutral-200: #e4e7f5;
  --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab;
  --color-neutral-600: #75798c;
  --color-neutral-700: #595d6c;
  --color-neutral-800: #3f424d;
  --color-neutral-900: #292b31;

  --color-accent-100: #f5f4ff;
  --color-accent-200: #e7e5fe;
  --color-accent-300: #d2cefd;
  --color-accent-400: #b5abfc;
  --color-accent-500: #968ae0;
  --color-accent-600: #796cbf;
  --color-accent-700: #5d5294;
  --color-accent-800: #423a6a;
  --color-accent-900: #2b2741;

  --color-accent-2-100: #f5f4ff;
  --color-accent-2-200: #e7e5fe;
  --color-accent-2-300: #d2cefd;
  --color-accent-2-400: #b5afe8;
  --color-accent-2-500: #9690c9;
  --color-accent-2-600: #7972a9;
  --color-accent-2-700: #5c5783;
  --color-accent-2-800: #423e5d;
  --color-accent-2-900: #2b293a;

  --color-section: #262a60;
  --color-section-glow: #353b80;
  --color-section-ghost: #4c5397;

  --font-heading: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-heading-weight: 500;
  --font-body: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --space-1: 2.8px;
  --space-2: 5.6px;
  --space-3: 8.4px;
  --space-4: 11.2px;
  --space-6: 16.8px;
  --space-8: 22.4px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --shadow-sm: 0 0 0 1px #3f424d;
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0, 0, 0, 0.65);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.lighten { mix-blend-mode: lighten; background-color: transparent; }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 16px; line-height: 1.6; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.skip-link {
  position: absolute; top: -100px; left: 8px; z-index: 1000;
  background: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--color-accent); border-radius: var(--radius-sm);
  padding: 10px 16px; font-family: var(--font-body); font-size: 14px;
  text-decoration: none; transition: top 0.15s ease;
}
.skip-link:focus { top: 8px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: linear-gradient(to right,
    transparent, var(--color-divider) 48px,
    var(--color-divider) calc(100% - 48px), transparent);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none; min-height: 44px;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 14px; line-height: 1.5; color: var(--color-neutral-300); flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
  text-decoration: none;
}
.tag-accent { background: var(--color-accent-800); color: var(--color-accent-100); }
.tag-accent-2 { background: var(--color-accent-2-800); color: var(--color-accent-2-100); }
.tag-neutral { background: var(--color-neutral-800); color: var(--color-neutral-100); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }
a.tag:hover { background: var(--color-accent-700); color: var(--color-accent-100); }

.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* homepage palette override — takes precedence over the tokens above */
body { margin: 0; background: var(--color-bg); }
a { color: var(--color-accent-300); text-decoration: none; }
a:hover { color: var(--color-accent-200); text-decoration: underline; }

.theme-toggle-btn:hover { color: var(--color-accent); border-color: var(--color-accent-700); }
.nav-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 8px; color: inherit; text-decoration: none;
}
.chip-toggle-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
.tap-link { display: inline-flex; align-items: center; min-height: 44px; }
.footer-link, .footer-link-disabled {
  display: inline-flex; align-items: center; min-height: 44px; padding: 4px 2px;
}
.footer-link-disabled { color: var(--color-neutral-600); cursor: default; }
.nav-link:hover, .btn:hover, .tap-link:hover, .footer-link:hover { text-decoration: none; }
.mission-row { transition: background 0.15s ease; }
.mission-row:hover { background: var(--color-neutral-900); text-decoration: none; }
.mission-row:active { background: var(--color-neutral-800); }

@view-transition { navigation: auto; }
a.card:hover { box-shadow: var(--shadow-md); text-decoration: none; }

@keyframes blink { 50% { opacity: 0.15; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
  }
}

:root, [data-theme="dark"] {
  --color-bg: #1a1c19; --color-surface: #23251f; --color-text: #e5dfd3;
  --color-accent: #c85a3c; --color-accent-2: #d9a05b;
  --color-divider: color-mix(in srgb, #e5dfd3 16%, transparent);
  --color-neutral-100: #f4efe6; --color-neutral-200: #e5dfd3; --color-neutral-300: #c8c2b6;
  --color-neutral-400: #9c968b; --color-neutral-500: #888378; --color-neutral-600: #87847b;
  --color-neutral-700: #52544c; --color-neutral-800: #3a3c35; --color-neutral-900: #23251f;
  --color-accent-100: #f7ded4; --color-accent-200: #ecc0b2; --color-accent-300: #e0a291;
  --color-accent-400: #d47a5e; --color-accent-500: #c85a3c; --color-accent-600: #a8482f;
  --color-accent-700: #7f3623; --color-accent-800: #55251a; --color-accent-900: #3b201a;
  --color-accent-2-100: #f9ecd8; --color-accent-2-200: #f0d6ae; --color-accent-2-300: #e6bd85;
  --color-accent-2-400: #d9a05b; --color-accent-2-500: #c08745; --color-accent-2-600: #9a6b36;
  --color-accent-2-700: #715029; --color-accent-2-800: #4c371d; --color-accent-2-900: #322616;
  --color-section: #2b3d31; --color-section-glow: #3a5341; --color-section-ghost: #4a6b53;
  --color-chakra: #f08a3c; --color-chakra-dim: #b9662a; --color-leaf-light: #8fb89a;
  --shadow-sm: 0 0 0 1px #3a3c35;
  --shadow-md: 0 0 0 1px #52544c, 0 6px 18px rgba(0,0,0,0.55);
  --shadow-lg: 0 0 0 1px #6a675e, 0 16px 40px rgba(0,0,0,0.65);
}

[data-theme="light"] {
  /* background/borders from the user's Catppuccin Latte nvim variant; the text
     scale stays a desaturated warm charcoal (not brown) to mirror the dark
     theme's cream-on-charcoal pairing — the "Naruto" color lives in the accent
     and chakra oranges, not the base text. Muted tones nudged darker where
     needed to keep 4.5:1 text contrast on --color-bg and --color-neutral-900. */
  --color-bg: #f9f5d7; --color-surface: #f0ebce; --color-text: #1a1c19;
  --color-accent: #b64f33; --color-accent-2: #b3813e;
  --color-divider: color-mix(in srgb, #1a1c19 16%, transparent);
  --color-neutral-100: #1a1c19; --color-neutral-200: #2a2c27; --color-neutral-300: #3f423b;
  --color-neutral-400: #5f6157; --color-neutral-500: #64665d; --color-neutral-600: #64665f;
  --color-neutral-700: #d1c7a3; --color-neutral-800: #e3dec3; --color-neutral-900: #e8e3c8;
  --color-accent-100: #5a2417; --color-accent-200: #7f3623; --color-accent-300: #a04530;
  --color-accent-400: #b64f33; --color-accent-500: #c85a3c; --color-accent-600: #d47a5e;
  --color-accent-700: #ecc0b2; --color-accent-800: #f7ded4; --color-accent-900: #fbeee7;
  --color-accent-2-100: #4c371d; --color-accent-2-200: #715029; --color-accent-2-300: #8f6631;
  --color-accent-2-400: #b3813e; --color-accent-2-500: #d9a05b; --color-accent-2-600: #e6bd85;
  --color-accent-2-700: #f0d6ae; --color-accent-2-800: #f9ecd8; --color-accent-2-900: #fdf6ec;
  --color-chakra: #98531e; --color-chakra-dim: #7d4517; --color-leaf-light: #6a6730;
  --shadow-sm: 0 0 0 1px #e3dec3;
  --shadow-md: 0 0 0 1px #d1c7a3, 0 6px 18px rgba(26,28,25,0.16);
  --shadow-lg: 0 0 0 1px #bfb695, 0 16px 40px rgba(26,28,25,0.22);
}

.post-body h1, .post-body h2, .post-body h3 { color: var(--color-neutral-100); margin-top: 1.4em; }
.post-body p { margin: 0 0 1em; }
.post-body a { color: var(--color-accent-300); }
.post-body a:hover { color: var(--color-accent-200); }
.post-body ul, .post-body ol { padding-left: 1.4em; margin: 0 0 1em; }
.post-body blockquote {
  margin: 0 0 1em; padding: 4px 16px; border-left: 2px solid var(--color-accent-700);
  color: var(--color-neutral-400);
}
.post-body code {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em; background: var(--color-surface); padding: 2px 5px; border-radius: var(--radius-sm);
}
.post-body pre {
  background: var(--color-surface); border: 1px solid var(--color-neutral-800);
  border-radius: var(--radius-md); padding: 14px 16px; overflow-x: auto; margin: 0 0 1.2em;
}
.post-body pre code { background: none; padding: 0; }
.code-wrapper { position: relative; }
.code-wrapper .copy-btn {
  position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; background: var(--color-bg); color: var(--color-neutral-500);
  border: 1px solid var(--color-neutral-800); border-radius: var(--radius-sm); cursor: pointer;
  opacity: 0; transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}
.code-wrapper:hover .copy-btn, .code-wrapper .copy-btn:focus-visible { opacity: 1; }
.code-wrapper .copy-btn:hover { color: var(--color-chakra); border-color: var(--color-neutral-700); }
.code-wrapper .copy-btn.copied { opacity: 1; color: var(--color-leaf-light); border-color: var(--color-leaf-light); }

.command-menu-trigger {
  position: fixed; bottom: 20px; right: 20px; z-index: 40;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 0 12px; cursor: pointer; text-decoration: none;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  color: var(--color-neutral-400); background: var(--color-surface);
  border: 1px solid var(--color-neutral-700); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.command-menu-trigger:hover { color: var(--color-accent); border-color: var(--color-accent-700); }
.command-menu-trigger kbd {
  padding: 2px 6px; background: var(--color-neutral-900); color: var(--color-neutral-300);
  border: 1px solid var(--color-neutral-700); border-radius: var(--radius-sm); font-size: 11px;
}
@media (max-width: 640px) { .command-menu-trigger { display: none; } }

.cmd-overlay {
  position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh;
}
.cmd-overlay[hidden] { display: none; }
.cmd-panel {
  width: min(92vw, 520px); background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-neutral-700); border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--shadow-lg);
}
.cmd-input {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 16px;
  background: transparent; border: 0; border-bottom: 1px solid var(--color-neutral-800);
  color: var(--color-neutral-100);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px;
  outline: none;
}
.cmd-input::placeholder { color: var(--color-neutral-600); }
.cmd-list { list-style: none; margin: 0; padding: 6px; max-height: min(50vh, 360px); overflow-y: auto; }
.cmd-item {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 44px; padding: 0 12px; border-radius: var(--radius-sm); cursor: pointer;
  color: var(--color-neutral-200);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
}
.cmd-item.is-selected { background: var(--color-neutral-900); color: var(--color-chakra); }
.cmd-ext { color: var(--color-neutral-600); font-size: 12px; }
.cmd-empty {
  min-height: 44px; display: flex; align-items: center; justify-content: center;
  color: var(--color-neutral-600);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
}
.cmd-footer {
  display: flex; justify-content: space-between; gap: 16px; padding: 8px 14px;
  border-top: 1px solid var(--color-neutral-800); color: var(--color-neutral-600);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
}
.cmd-footer kbd {
  display: inline-block; padding: 1px 5px; margin: 0 2px;
  background: var(--color-neutral-900); border: 1px solid var(--color-neutral-800);
  border-radius: 3px; font-size: 10px;
}

/*
 * Syntax highlighting for post code blocks (Gruvbox Dark Hard, via Lumis).
 * Regenerate with:
 *   Lumis.Theme.build_css!("gruvbox_dark_hard", scope: ".post-body", container_style: [{"background-color", "transparent"}, {"border", "none"}, {"padding", "0"}])
 */
/* gruvbox_dark_hard
 * revision: 154eb5ff5b96d0641307113fa385eaf0d36d9796
 */
.post-body .lumis {
  color: #ebdbb2;
  background-color: transparent;
  border: none;
  padding: 0;
}
.post-body .l-attribute {
  color: #8ec07c;
}
.post-body .l-attribute-builtin {
  color: #fe8019;
}
.post-body .l-boolean {
  color: #d3869b;
}
.post-body .l-character {
  color: #d3869b;
}
.post-body .l-character-special {
  color: #fe8019;
}
.post-body .l-comment {
  color: #928374;
  font-style: italic;
}
.post-body .l-comment-documentation {
  color: #928374;
  font-style: italic;
}
.post-body .l-comment-error {
  color: #1d2021;
  background-color: #fb4934;
  font-weight: bold;
}
.post-body .l-comment-hint {
  color: #928374;
  font-style: italic;
}
.post-body .l-comment-note {
  color: #fe8019;
}
.post-body .l-comment-todo {
  color: #1d2021;
  background-color: #fabd2f;
  font-weight: bold;
  font-style: italic;
}
.post-body .l-comment-warning {
  color: #fb4934;
  font-weight: bold;
}
.post-body .l-constant {
  color: #d3869b;
}
.post-body .l-constant-builtin {
  color: #fe8019;
}
.post-body .l-constant-macro {
  color: #8ec07c;
}
.post-body .l-constructor {
  color: #fe8019;
}
.post-body .l-diff-delta {
  background-color: #3e4934;
}
.post-body .l-diff-minus {
  background-color: #792329;
}
.post-body .l-diff-plus {
  background-color: #5a633a;
}
.post-body .l-function {
  color: #b8bb26;
  font-weight: bold;
}
.post-body .l-function-builtin {
  color: #fe8019;
}
.post-body .l-function-call {
  color: #b8bb26;
  font-weight: bold;
}
.post-body .l-function-macro {
  color: #8ec07c;
}
.post-body .l-function-method {
  color: #b8bb26;
  font-weight: bold;
}
.post-body .l-function-method-call {
  color: #b8bb26;
  font-weight: bold;
}
.post-body .l-highlighted {
  background-color: #3c3836;
}
.post-body .l-keyword {
  color: #fb4934;
}
.post-body .l-keyword-conditional {
  color: #fb4934;
}
.post-body .l-keyword-conditional-ternary {
  color: #fb4934;
}
.post-body .l-keyword-coroutine {
  color: #fb4934;
}
.post-body .l-keyword-debug {
  color: #fe8019;
}
.post-body .l-keyword-directive {
  color: #8ec07c;
}
.post-body .l-keyword-directive-define {
  color: #8ec07c;
}
.post-body .l-keyword-exception {
  color: #fb4934;
}
.post-body .l-keyword-export {
  color: #fb4934;
}
.post-body .l-keyword-function {
  color: #fb4934;
}
.post-body .l-keyword-import {
  color: #8ec07c;
}
.post-body .l-keyword-modifier {
  color: #fb4934;
}
.post-body .l-keyword-operator {
  color: #fb4934;
}
.post-body .l-keyword-repeat {
  color: #fb4934;
}
.post-body .l-keyword-return {
  color: #fb4934;
}
.post-body .l-keyword-type {
  color: #fb4934;
}
.post-body .l-label {
  color: #fb4934;
}
.post-body .l-markup {
  color: #ebdbb2;
}
.post-body .l-markup-environment {
  color: #8ec07c;
}
.post-body .l-markup-environment-name {
  color: #fabd2f;
}
.post-body .l-markup-heading {
  color: #b8bb26;
  font-weight: bold;
}
.post-body .l-markup-heading-1 {
  color: #b8bb26;
  font-weight: bold;
}
.post-body .l-markup-heading-2 {
  color: #b8bb26;
  font-weight: bold;
}
.post-body .l-markup-heading-3 {
  color: #b8bb26;
  font-weight: bold;
}
.post-body .l-markup-heading-4 {
  color: #b8bb26;
  font-weight: bold;
}
.post-body .l-markup-heading-5 {
  color: #b8bb26;
  font-weight: bold;
}
.post-body .l-markup-heading-6 {
  color: #b8bb26;
  font-weight: bold;
}
.post-body .l-markup-italic {
  font-style: italic;
}
.post-body .l-markup-link {
  color: #83a598;
  text-decoration: underline;
}
.post-body .l-markup-link-label {
  color: #fe8019;
}
.post-body .l-markup-link-url {
  color: #83a598;
  text-decoration: underline;
}
.post-body .l-markup-list {
  color: #fe8019;
}
.post-body .l-markup-list-checked {
  color: #b8bb26;
}
.post-body .l-markup-list-unchecked {
  color: #928374;
}
.post-body .l-markup-math {
  color: #fe8019;
}
.post-body .l-markup-quote {
  color: #ebdbb2;
}
.post-body .l-markup-raw {
  color: #b8bb26;
  font-style: italic;
}
.post-body .l-markup-raw-block {
  color: #b8bb26;
  font-style: italic;
}
.post-body .l-markup-strikethrough {
  text-decoration: line-through;
}
.post-body .l-markup-strong {
  font-weight: bold;
}
.post-body .l-markup-underline {
  text-decoration: underline;
}
.post-body .l-module {
  color: #ebdbb2;
}
.post-body .l-module-builtin {
  color: #fe8019;
}
.post-body .l-namespace {
  color: #ebdbb2;
}
.post-body .l-number {
  color: #d3869b;
}
.post-body .l-number-float {
  color: #d3869b;
}
.post-body .l-operator {
  color: #fe8019;
}
.post-body .l-property {
  color: #83a598;
}
.post-body .l-punctuation-bracket {
  color: #fe8019;
}
.post-body .l-punctuation-bracket-rainbow-1 {
  color: #fb4934;
}
.post-body .l-punctuation-bracket-rainbow-2 {
  color: #fabd2f;
}
.post-body .l-punctuation-bracket-rainbow-3 {
  color: #83a598;
}
.post-body .l-punctuation-bracket-rainbow-4 {
  color: #fe8019;
}
.post-body .l-punctuation-bracket-rainbow-5 {
  color: #b8bb26;
}
.post-body .l-punctuation-bracket-rainbow-6 {
  color: #d3869b;
}
.post-body .l-punctuation-delimiter {
  color: #fe8019;
}
.post-body .l-punctuation-special {
  color: #fe8019;
}
.post-body .l-string {
  color: #b8bb26;
  font-style: italic;
}
.post-body .l-string-documentation {
  color: #b8bb26;
  font-style: italic;
}
.post-body .l-string-escape {
  color: #fe8019;
}
.post-body .l-string-regexp {
  color: #b8bb26;
  font-style: italic;
}
.post-body .l-string-special {
  color: #fe8019;
}
.post-body .l-string-special-path {
  color: #83a598;
  text-decoration: underline;
}
.post-body .l-string-special-symbol {
  color: #83a598;
}
.post-body .l-string-special-url {
  color: #83a598;
  text-decoration: underline;
}
.post-body .l-tag {
  color: #fe8019;
}
.post-body .l-tag-attribute {
  color: #83a598;
}
.post-body .l-tag-builtin {
  color: #fe8019;
}
.post-body .l-tag-delimiter {
  color: #fe8019;
}
.post-body .l-type {
  color: #fabd2f;
}
.post-body .l-type-builtin {
  color: #fabd2f;
}
.post-body .l-type-definition {
  color: #fabd2f;
}
.post-body .l-variable {
  color: #ebdbb2;
}
.post-body .l-variable-builtin {
  color: #fe8019;
}
.post-body .l-variable-member {
  color: #83a598;
}
.post-body .l-variable-parameter {
  color: #83a598;
}
.post-body .l-variable-parameter-builtin {
  color: #fe8019;
}

/* ---------------------------------------------------------------------------
   Motion: cross-document view transitions + scroll-driven reveals.
   Both are progressive enhancement. Browsers without support get the page
   exactly as before, and the prefers-reduced-motion block above neutralises
   every animation declared here.
   --------------------------------------------------------------------------- */


@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes slide-from-right { from { transform: translateX(30px); } }
@keyframes slide-to-left { to { transform: translateX(-30px); } }

@keyframes reveal {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@supports (animation-timeline: view()) {
  .reveal {
    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 26%;
  }
}
