/* ==========================================================================
   Stygian - a modern docs theme for Jekyll & GitHub Pages
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root,
html[data-theme='dark'] {
  color-scheme: dark;
  --color-bg: 0 0 0;
  --color-surface: 13 13 13;
  --color-card: 8 8 8;
  --color-border: 26 26 26;
  --color-border-hover: 68 68 68;
  --color-muted: 136 136 136;
  --color-muted-dark: 68 68 68;
  --color-fg: 255 255 255;
  --color-fg-dim: 204 204 204;
  --color-code: 5 5 5;
  --theme-nav: 0 0 0;
  --theme-glow: 255 255 255;
  --sidebar-width: 280px;
  --header-height: 60px;
  --content-max: 56rem;
}

html[data-theme='light'] {
  color-scheme: light;
  --color-bg: 246 247 249;
  --color-surface: 238 240 243;
  --color-card: 255 255 255;
  --color-border: 211 214 220;
  --color-border-hover: 107 114 128;
  --color-muted: 79 86 99;
  --color-muted-dark: 156 163 175;
  --color-fg: 17 24 39;
  --color-fg-dim: 55 65 81;
  --color-code: 246 248 250;
  --theme-nav: 246 247 249;
  --theme-glow: 17 24 39;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

html,
body {
  background: rgb(var(--color-bg));
  color: rgb(var(--color-fg));
}

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
main,
header,
nav,
article,
aside,
footer {
  transition:
    background-color 240ms ease,
    color 240ms ease,
    border-color 240ms ease;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; }
img, video, svg { display: block; max-width: 100%; }

::selection {
  background: rgb(var(--color-fg));
  color: rgb(var(--color-bg));
}

.mono, .mono-xs, code, pre, kbd, samp {
  font-family: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
.mono-xs {
  font-size: 0.75rem;
  color: rgb(var(--color-muted));
}

.text-fg { color: rgb(var(--color-fg)); }
.text-muted { color: rgb(var(--color-muted)); }
.bg-bg { background-color: rgb(var(--color-bg)); }
.bg-surface { background-color: rgb(var(--color-surface)); }
.bg-card { background-color: rgb(var(--color-card)); }

a:focus-visible,
button:focus-visible {
  outline: 2px solid rgb(var(--color-fg) / 0.6);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -100px; left: 1rem;
  z-index: 20000;
  background: rgb(var(--color-fg));
  color: rgb(var(--color-bg));
  padding: 0.5rem 1rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  text-decoration: none;
  transition: top 200ms ease;
}
.skip-link:focus { top: 1rem; }

/* The View Transition is the color boundary: the new theme expands outward
   from the toggle while the old theme stays static ahead of the wave. */
html:active-view-transition body,
html:active-view-transition main,
html:active-view-transition header,
html:active-view-transition nav,
html:active-view-transition article,
html:active-view-transition aside,
html:active-view-transition footer {
  transition: none;
}

/* --------------------------------------------------------------------------
   3. Theme transition: circular reveal (no post-transition ripple)
   -------------------------------------------------------------------------- */

@keyframes theme-reveal-wave {
  0%   { clip-path: circle(0px at var(--theme-origin-x) var(--theme-origin-y)); }
  100% { clip-path: circle(var(--theme-reveal-radius) at var(--theme-origin-x) var(--theme-origin-y)); }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--theme-transition-duration, 700ms);
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  mix-blend-mode: normal;
}
::view-transition-old(root) { animation-name: none; }
::view-transition-new(root) { animation-name: theme-reveal-wave; }

/* --------------------------------------------------------------------------
   4. Header bar
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgb(var(--theme-nav) / 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgb(var(--color-border));
}
.site-header__inner {
  height: var(--header-height);
  max-width: 92rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.site-header__left,
.site-header__right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
/* The left cluster absorbs spare width so an over-long site title
   truncates instead of shoving the right cluster; the right cluster
   (icon buttons + aux links) never shrinks below its content. */
.site-header__left { flex: 1 1 auto; }
.site-header__right { flex: none; }
.site-header__title {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  min-width: 0;
}
/* long titles ellipsize instead of overflowing the header on small screens */
.site-header__title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-header__glyph {
  flex: none;
  font-family: 'Space Mono', monospace;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.3rem 0.35rem;
  border: 1px solid rgb(var(--color-border-hover) / 0.6);
  border-radius: 0.375rem;
  color: rgb(var(--color-fg));
  background: rgb(var(--color-surface));
}

.aux-link {
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  color: rgb(var(--color-muted));
  text-decoration: none;
  white-space: nowrap;
}
.aux-link:hover { color: rgb(var(--color-fg)); }

/* Text aux links leave the header on phones (moved into the off-canvas
   drawer as .docs__aux) so the header can never be squeezed by them. */
@media (max-width: 767px) {
  .site-header__right .aux-link { display: none; }
}

.theme-toggle {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: 9999px;
  border: 1px solid rgb(var(--color-border));
  background: rgb(var(--color-surface));
  color: rgb(var(--color-fg));
  cursor: pointer;
  transition: border-color 200ms ease;
}
.theme-toggle:hover { border-color: rgb(var(--color-border-hover)); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle.animate-flicker-glow {
  animation: flicker-glow 7s infinite alternate;
}

.nav-toggle {
  display: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border: 1px solid rgb(var(--color-border));
  border-radius: 0.375rem;
  background: transparent;
  color: rgb(var(--color-fg));
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   5. Docs layout: sidebar + content
   -------------------------------------------------------------------------- */

.docs {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  max-width: 92rem;
  margin: 0 auto;
  min-height: calc(100vh - var(--header-height));
}

.docs__sidebar {
  position: sticky;
  top: var(--header-height);
  align-self: start;
  height: calc(100vh - var(--header-height));
  overflow-y: auto;
  padding: 1.25rem 1rem 3rem;
  border-right: 1px solid rgb(var(--color-border));
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--color-muted-dark)) transparent;
}
.docs__sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.25rem 0.75rem;
}
.docs__sidebar-title {
  font-family: 'Space Mono', monospace;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgb(var(--color-muted));
}
.docs__close {
  display: none;
  background: none;
  border: 0;
  color: rgb(var(--color-muted));
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0 0.25rem;
}
.docs__close:hover { color: rgb(var(--color-fg)); }

.docs__scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgb(var(--color-bg) / 0.6);
  backdrop-filter: blur(2px);
}

/* navigation list */
.docs__nav-list {
  list-style: none;
}
.docs__nav-list--child {
  margin: 0.15rem 0 0.4rem 0.9rem;
  padding-left: 0.85rem;
  border-left: 1px solid rgb(var(--color-border));
}
.docs__nav-list a {
  display: block;
  padding: 0.35rem 0.55rem;
  font-size: 0.875rem;
  color: rgb(var(--color-muted));
  text-decoration: none;
  border-radius: 0.375rem;
  transition: color 160ms ease, background-color 160ms ease;
}
.docs__nav-list a:hover {
  color: rgb(var(--color-fg));
  background: rgb(var(--color-surface));
}
.docs__nav-list li.active > a {
  color: rgb(var(--color-fg));
  background: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-border));
  border-left: 2px solid rgb(var(--color-fg));
  padding-left: calc(0.55rem - 1px);
}

/* Aux links that left the header on phones reappear at the bottom of the
   off-canvas drawer, so external links stay reachable on mobile. */
.docs__aux { display: none; }
@media (max-width: 767px) {
  .docs__aux {
    display: block;
    margin-top: 1.75rem;
    padding-top: 1rem;
    border-top: 1px solid rgb(var(--color-border));
  }
  .docs__aux-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .docs__aux-list li + li { margin-top: 0.15rem; }
  .docs__aux-list a {
    display: block;
    padding: 0.45rem 0.55rem;
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    color: rgb(var(--color-muted));
    text-decoration: none;
    border-radius: 0.375rem;
    transition: color 160ms ease, background-color 160ms ease;
  }
  .docs__aux-list a:hover {
    color: rgb(var(--color-fg));
    background: rgb(var(--color-surface));
  }
}

/* content column */
.docs__content {
  min-width: 0;
  padding: 3rem 2rem 5rem;
}
@media (min-width: 1280px) {
  .docs__content { padding: 3.5rem 4rem 6rem; }
}
.docs__content article {
  max-width: var(--content-max);
}

.docs__title {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgb(var(--color-border));
}
.docs__title h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: rgb(var(--color-fg));
}
.docs__title .lede {
  margin-top: 0.75rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgb(var(--color-muted));
  max-width: 46rem;
}

/* mobile: sidebar becomes an off-canvas drawer */
@media (max-width: 1023px) {
  .docs { grid-template-columns: 1fr; }
  .nav-toggle { display: grid; }
  .docs__sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 70;
    width: min(19rem, 85vw);
    height: 100vh;
    margin: 0;
    background: rgb(var(--color-bg));
    transform: translateX(-105%);
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
    border-right: 1px solid rgb(var(--color-border));
    padding-top: calc(var(--header-height) * 0.4);
  }
  body.nav-open .docs__sidebar { transform: translateX(0); }
  body.nav-open { overflow: hidden; }
  .docs__close { display: block; }
}

/* --------------------------------------------------------------------------
   6. Page layout (no sidebar)
   -------------------------------------------------------------------------- */

.page-wrap {
  max-width: 48rem;
  margin: 0 auto;
  padding: 4rem 1.5rem 5rem;
}
@media (min-width: 768px) {
  .page-wrap { padding: 5rem 2rem 6rem; }
}
.page-head { margin-bottom: 2.5rem; }
.page-head h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: rgb(var(--color-fg));
}
.page-head .lede {
  margin-top: 1rem;
  font-size: 1.125rem;
  line-height: 1.7;
  color: rgb(var(--color-muted));
}
.label {
  display: inline-flex;
  border: 1px solid rgb(var(--color-border));
  padding: 0.375rem 0.75rem;
  margin-bottom: 1.5rem;
}
.label span {
  font-family: 'Space Mono', monospace;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgb(var(--color-muted));
}

/* --------------------------------------------------------------------------
   7. Buttons (landing / inline)
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0.5rem 0.25rem 0;
  padding: 0.55rem 1.35rem;
  border-radius: 9999px;
  border: 1px solid rgb(var(--color-fg) / 0.2);
  background: rgb(var(--color-fg));
  color: rgb(var(--color-bg));
  font-family: 'Space Mono', monospace;
  font-size: 0.8125rem;
  text-decoration: none;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.btn:hover { background: rgb(var(--color-fg) / 0.9); }
.btn--ghost {
  background: rgb(var(--color-fg) / 0.05);
  color: rgb(var(--color-fg));
}
.btn--ghost:hover {
  background: rgb(var(--color-fg));
  color: rgb(var(--color-bg));
}

/* Buttons sit inside .sty-prose, whose generic link rule (color = fg,
   underline) outranks the .btn class. Re-assert button colors here. */
.sty-prose a.btn,
.sty-prose a.btn--ghost {
  text-decoration: none;
}
.sty-prose a.btn {
  color: rgb(var(--color-bg));
}
.sty-prose a.btn:hover {
  color: rgb(var(--color-bg));
  background: rgb(var(--color-fg) / 0.9);
}
.sty-prose a.btn--ghost {
  color: rgb(var(--color-fg));
}
.sty-prose a.btn--ghost:hover {
  color: rgb(var(--color-bg));
  background: rgb(var(--color-fg));
}

/* --------------------------------------------------------------------------
   8. Flicker / glare effect suite
   -------------------------------------------------------------------------- */

@keyframes flicker-glow {
  0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
    opacity: 0.99;
    border-color: rgb(var(--theme-glow) / 0.25);
    box-shadow: 0 0 4px rgb(var(--theme-glow) / 0);
  }
  20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
    opacity: 0.85;
    border-color: rgb(var(--theme-glow) / 0.6);
    box-shadow: 0 0 16px rgb(var(--theme-glow) / 0.4);
  }
}

@keyframes glare-sweep {
  0%   { transform: skewX(-20deg) translateX(-150%); }
  100% { transform: skewX(-20deg) translateX(150%); }
}
.btn-glare { position: relative; overflow: hidden; }
.btn-glare::after {
  content: '';
  position: absolute;
  top: 0; left: -50%;
  width: 200%; height: 100%;
  background: linear-gradient(
    to right,
    rgb(var(--theme-glow) / 0) 0%,
    rgb(var(--theme-glow) / 0.07) 30%,
    rgb(var(--theme-glow) / 0.2) 50%,
    rgb(var(--theme-glow) / 0.07) 70%,
    rgb(var(--theme-glow) / 0) 100%
  );
  transform: skewX(-20deg) translateX(-150%);
  pointer-events: none;
}
.btn.btn-glare::after { animation: glare-sweep 4s infinite ease-in-out; }

@keyframes card-glare-sweep {
  0%   { left: -80%; opacity: 1; }
  100% { left: 140%; opacity: 1; }
}
.card-hover-glare { position: relative; overflow: hidden; }
.card-hover-glare::after {
  content: '';
  position: absolute;
  top: -10%; left: -80%;
  width: 45%; height: 120%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgb(var(--theme-glow) / 0.06) 35%,
    rgb(var(--theme-glow) / 0.16) 50%,
    rgb(var(--theme-glow) / 0.06) 65%,
    transparent 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  opacity: 0;
}
.card-hover-glare:hover::after {
  animation: card-glare-sweep 0.65s ease-out;
}

@keyframes code-copy-sweep {
  0%   { left: -60%; opacity: 0; }
  10%  { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}
.code-copy-glare {
  position: absolute;
  top: -10%; left: -60%;
  width: 40%; height: 120%;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgb(var(--theme-glow) / 0.06) 35%,
    rgb(var(--theme-glow) / 0.16) 50%,
    rgb(var(--theme-glow) / 0.06) 65%,
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: code-copy-sweep 0.7s ease-out;
}

/* --------------------------------------------------------------------------
   9. Prose (markdown rendering)
   -------------------------------------------------------------------------- */

.sty-prose {
  font-size: 1.03125rem;
  line-height: 1.8;
  color: rgb(var(--color-fg-dim));
}
.sty-prose > * + * { margin-top: 1.4rem; }

.sty-prose h2, .sty-prose h3, .sty-prose h4, .sty-prose h5, .sty-prose h6 {
  font-family: 'Space Grotesk', sans-serif;
  color: rgb(var(--color-fg));
  line-height: 1.3;
  scroll-margin-top: calc(var(--header-height) + 1rem);
  position: relative;
}
.sty-prose h2 {
  font-size: 1.65rem;
  margin-top: 3rem;
  padding-top: 0.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgb(var(--color-border));
}
.sty-prose h3 { font-size: 1.3rem; margin-top: 2.25rem; }
.sty-prose h4 { font-size: 1.1rem; margin-top: 1.8rem; }

.sty-prose h2 a, .sty-prose h3 a, .sty-prose h4 a { color: inherit; text-decoration: none; }

.sty-prose .anchor-link {
  opacity: 0;
  margin-left: 0.45em;
  font-family: 'Space Mono', monospace;
  font-weight: 400;
  font-size: 0.85em;
  color: rgb(var(--color-muted-dark));
  text-decoration: none;
  white-space: nowrap; /* never leave a dangling '#' on its own line */
}
.sty-prose h2:hover .anchor-link,
.sty-prose h3:hover .anchor-link,
.sty-prose h4:hover .anchor-link { opacity: 1; }

.sty-prose p { color: rgb(var(--color-fg-dim)); }
.sty-prose strong { color: rgb(var(--color-fg)); font-weight: 600; }
.sty-prose em { color: rgb(var(--color-fg)); }

.sty-prose a {
  color: rgb(var(--color-fg));
  text-decoration: underline;
  text-decoration-color: rgb(var(--color-muted-dark));
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s;
}
.sty-prose a:hover { text-decoration-color: rgb(var(--color-fg)); }

.sty-prose ul, .sty-prose ol { padding-left: 1.5rem; }
.sty-prose li { margin-top: 0.4rem; color: rgb(var(--color-fg-dim)); }
.sty-prose li::marker { color: rgb(var(--color-muted)); font-family: 'Space Mono', monospace; }
.sty-prose li > ul, .sty-prose li > ol { margin-top: 0.4rem; }
.sty-prose ul { list-style: disc; }
.sty-prose ul ul { list-style: circle; }
.sty-prose ul ul ul { list-style: square; }
.sty-prose ol { list-style: decimal; }

/* task lists */
.sty-prose li.task-list-item { list-style: none; margin-left: -1.25rem; }
.sty-prose li.task-list-item input[type='checkbox'] {
  accent-color: rgb(var(--color-fg));
  margin-right: 0.5rem;
}

.sty-prose blockquote {
  border-left: 3px solid rgb(var(--color-border-hover));
  padding: 0.4rem 0 0.4rem 1.25rem;
  color: rgb(var(--color-muted));
}
.sty-prose blockquote p { color: rgb(var(--color-muted)); }

/* callouts: kramdown IAL on a blockquote, e.g. {: .callout } */
.sty-prose blockquote.callout {
  border-left: 3px solid rgb(var(--theme-glow) / 0.5);
  background: rgb(var(--color-card));
  border-radius: 0.5rem;
  border: 1px solid rgb(var(--color-border));
  padding: 1rem 1.25rem;
  color: rgb(var(--color-fg-dim));
}
.sty-prose blockquote.callout p { color: rgb(var(--color-fg-dim)); }
.sty-prose blockquote.callout > p:first-child strong {
  font-family: 'Space Mono', monospace;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.sty-prose hr {
  border: 0;
  border-top: 1px solid rgb(var(--color-border));
  margin: 3rem 0;
}

.sty-prose img {
  border: 1px solid rgb(var(--color-border));
  border-radius: 0.5rem;
}

.sty-prose kbd {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  font-size: 0.75em;
  border: 1px solid rgb(var(--color-border-hover));
  border-bottom-width: 2px;
  border-radius: 0.375rem;
  background: rgb(var(--color-surface));
  color: rgb(var(--color-fg));
}

/* inline code: render as an atomic chip. It must never split mid-token -
   Chrome treats '-' as a line-break opportunity (UAX14) and chopped
   identifiers like readonly-user across lines. The chip is now a single
   unbreakable inline-block; on very narrow screens an over-long token
   scrolls inside the chip instead of overflowing the page. */
.sty-prose code {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  /* inline-block with non-visible overflow loses its text baseline (CSS
     uses the bottom margin edge instead), which floats chips above the
     line. -0.6em re-aligns the chip's glyph baseline with the text. */
  vertical-align: -0.6em;
  white-space: nowrap;
  font-family: 'Space Mono', monospace;
  font-size: 0.85em;
  background: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-border));
  padding: 0.14rem 0.4rem;
  border-radius: 0.375rem;
  color: rgb(var(--color-fg));
}

/* fenced code blocks (kramdown + rouge). NOTE: inline code spans also
   carry the `highlighter-rouge` class, so every rule here targets the
   block wrapper (div) only - never inline chips. */
.sty-prose div.highlighter-rouge {
  position: relative;
  margin: 0;
  border: 1px solid rgb(var(--color-border));
  border-radius: 0.5rem;
  overflow: hidden;
  background: rgb(var(--color-code));
}
.sty-prose div.highlight {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.sty-prose pre.highlight {
  padding: 1.15rem 1.25rem;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.75;
}
.sty-prose pre code {
  display: inline;
  white-space: pre;
  background: transparent;
  border: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
}
/* mermaid fences are code blocks too, until JS renders them */
.sty-prose code.language-mermaid { white-space: pre; }

/* rouge token palette: dim comments, keep the rest in fg hierarchy */
.highlight .c, .highlight .c1, .highlight .cm, .highlight .cs,
.highlight .gd, .highlight .gh, .highlight .gi { color: rgb(var(--color-muted)); }
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr,
.highlight .kt, .highlight .nc, .highlight .nf, .highlight .nb { color: rgb(var(--color-fg)); font-weight: 500; }
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sb, .highlight .sa,
.highlight .dl, .highlight .se, .highlight .sh { color: rgb(var(--color-fg-dim)); }
.highlight .o, .highlight .p, .highlight .mi, .highlight .mf, .highlight .mh,
.highlight .nl, .highlight .na, .highlight .nv { color: rgb(var(--color-muted)); }

/* --------------------------------------------------------------------------
   Syntax highlighting palette. Applied only when the site opts in via
   `stygian.syntax_highlighting.enabled: true` (html[data-highlighting='on']);
   the monochrome token treatment above stays the default. Two palettes,
   dark and light, on a Space Mono friendly hue set.
   -------------------------------------------------------------------------- */
html[data-highlighting='on'] .highlight .c,
html[data-highlighting='on'] .highlight .c1,
html[data-highlighting='on'] .highlight .cm,
html[data-highlighting='on'] .highlight .cs { color: #565f89; }
html[data-highlighting='on'] .highlight .gd { color: #f7768e; }
html[data-highlighting='on'] .highlight .gi { color: #9ece6a; }
html[data-highlighting='on'] .highlight .gh { color: #c0caf5; font-weight: 500; }
html[data-highlighting='on'] .highlight .k,
html[data-highlighting='on'] .highlight .kd,
html[data-highlighting='on'] .highlight .kn,
html[data-highlighting='on'] .highlight .kp,
html[data-highlighting='on'] .highlight .kr,
html[data-highlighting='on'] .highlight .kt { color: #7aa2f7; font-weight: 500; }
html[data-highlighting='on'] .highlight .nc,
html[data-highlighting='on'] .highlight .nf { color: #7dcfff; }
html[data-highlighting='on'] .highlight .nb { color: #bb9af7; }
html[data-highlighting='on'] .highlight .na { color: #ffc777; }
html[data-highlighting='on'] .highlight .nv { color: #c0caf5; }
html[data-highlighting='on'] .highlight .nl { color: #bb9af7; }
html[data-highlighting='on'] .highlight .s,
html[data-highlighting='on'] .highlight .s1,
html[data-highlighting='on'] .highlight .s2,
html[data-highlighting='on'] .highlight .sb,
html[data-highlighting='on'] .highlight .sa,
html[data-highlighting='on'] .highlight .dl,
html[data-highlighting='on'] .highlight .se,
html[data-highlighting='on'] .highlight .sh { color: #9ece6a; }
html[data-highlighting='on'] .highlight .o { color: #89ddff; }
html[data-highlighting='on'] .highlight .p { color: #8896b4; }
html[data-highlighting='on'] .highlight .mi,
html[data-highlighting='on'] .highlight .mf,
html[data-highlighting='on'] .highlight .mh { color: #ff9e64; }

html[data-highlighting='on'][data-theme='light'] .highlight .c,
html[data-highlighting='on'][data-theme='light'] .highlight .c1,
html[data-highlighting='on'][data-theme='light'] .highlight .cm,
html[data-highlighting='on'][data-theme='light'] .highlight .cs { color: #6e7781; }
html[data-highlighting='on'][data-theme='light'] .highlight .gd { color: #cf222e; }
html[data-highlighting='on'][data-theme='light'] .highlight .gi { color: #116329; }
html[data-highlighting='on'][data-theme='light'] .highlight .gh { color: #0550ae; font-weight: 500; }
html[data-highlighting='on'][data-theme='light'] .highlight .k,
html[data-highlighting='on'][data-theme='light'] .highlight .kd,
html[data-highlighting='on'][data-theme='light'] .highlight .kn,
html[data-highlighting='on'][data-theme='light'] .highlight .kp,
html[data-highlighting='on'][data-theme='light'] .highlight .kr,
html[data-highlighting='on'][data-theme='light'] .highlight .kt { color: #8250df; font-weight: 500; }
html[data-highlighting='on'][data-theme='light'] .highlight .nc,
html[data-highlighting='on'][data-theme='light'] .highlight .nf { color: #0550ae; }
html[data-highlighting='on'][data-theme='light'] .highlight .nb { color: #953800; }
html[data-highlighting='on'][data-theme='light'] .highlight .na { color: #1a7f37; }
html[data-highlighting='on'][data-theme='light'] .highlight .nv { color: #24292f; }
html[data-highlighting='on'][data-theme='light'] .highlight .nl { color: #953800; }
html[data-highlighting='on'][data-theme='light'] .highlight .s,
html[data-highlighting='on'][data-theme='light'] .highlight .s1,
html[data-highlighting='on'][data-theme='light'] .highlight .s2,
html[data-highlighting='on'][data-theme='light'] .highlight .sb,
html[data-highlighting='on'][data-theme='light'] .highlight .sa,
html[data-highlighting='on'][data-theme='light'] .highlight .dl,
html[data-highlighting='on'][data-theme='light'] .highlight .se,
html[data-highlighting='on'][data-theme='light'] .highlight .sh { color: #0a3069; }
html[data-highlighting='on'][data-theme='light'] .highlight .o { color: #0550ae; }
html[data-highlighting='on'][data-theme='light'] .highlight .p { color: #57606a; }
html[data-highlighting='on'][data-theme='light'] .highlight .mi,
html[data-highlighting='on'][data-theme='light'] .highlight .mf,
html[data-highlighting='on'][data-theme='light'] .highlight .mh { color: #b35900; }

/* code block scrollbars */
.highlight::-webkit-scrollbar { height: 10px; }
.highlight::-webkit-scrollbar-track { background: rgb(var(--color-surface)); }
.highlight::-webkit-scrollbar-thumb { background: rgb(var(--color-muted-dark)); border-radius: 999px; }

/* copy button */
.code-block { position: relative; overflow: hidden; }
.sty-prose .code-block > .highlighter-rouge { border-radius: 0.5rem; }
.copy-btn {
  position: absolute;
  top: 0.5rem; right: 0.5rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid rgb(var(--color-border));
  background: rgb(var(--color-card));
  color: rgb(var(--color-fg) / 0.7);
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  line-height: 1;
  padding: 0.3rem 0.55rem;
  border-radius: 0.375rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 200ms ease, color 200ms ease, border-color 200ms ease;
}
.code-block:hover .copy-btn, .copy-btn:focus-visible { opacity: 1; }
.copy-btn:hover { color: rgb(var(--color-fg)); border-color: rgb(var(--color-fg) / 0.4); }
.copy-btn.is-copied {
  border-color: rgb(var(--color-fg) / 0.4);
  color: rgb(var(--color-fg));
  background: rgb(var(--color-fg) / 0.05);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   10. Tables
   -------------------------------------------------------------------------- */

.sty-prose .table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgb(var(--color-border));
  border-radius: 0.5rem;
}
.sty-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
}
.sty-prose .table-scroll > table { margin: 0; min-width: 36rem; }
.sty-prose th, .sty-prose td {
  border: 1px solid rgb(var(--color-border));
  padding: 0.6rem 0.95rem;
  text-align: left;
  vertical-align: top;
}
.sty-prose th {
  background: rgb(var(--color-surface));
  color: rgb(var(--color-fg));
  font-weight: 600;
  font-family: 'Space Grotesk', sans-serif;
}
.sty-prose td { color: rgb(var(--color-fg-dim)); }
.sty-prose th code, .sty-prose td code { white-space: nowrap; }

/* --------------------------------------------------------------------------
   11. Mermaid
   -------------------------------------------------------------------------- */

.mermaid-viewport {
  border: 1px solid rgb(var(--color-border));
  border-radius: 0.5rem;
  background: rgb(var(--color-card));
  overflow: hidden;
}
.mermaid-diagram { overflow: auto; padding: 1rem; }
.mermaid-diagram svg { max-width: 100%; height: auto; display: block; }
.mermaid-viewport text { font-family: 'Space Mono', monospace; }

/* --------------------------------------------------------------------------
   12. Prev / next
   -------------------------------------------------------------------------- */

.prev-next {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgb(var(--color-border));
}
.prev-next__item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgb(var(--color-border));
  border-radius: 0.5rem;
  text-decoration: none;
  color: rgb(var(--color-fg));
  transition: border-color 200ms ease;
}
.prev-next__item:hover { border-color: rgb(var(--color-border-hover)); }
.prev-next__item--next { text-align: right; }
.prev-next__dir {
  font-family: 'Space Mono', monospace;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgb(var(--color-muted));
}
.prev-next__title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   13. Site footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid rgb(var(--color-border));
  background: rgb(var(--color-bg));
}
.site-footer__inner {
  max-width: 92rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding: 1.25rem;
}
.site-footer__top {
  color: rgb(var(--color-muted));
  text-decoration: none;
}
.site-footer__top:hover { color: rgb(var(--color-fg)); }

/* --------------------------------------------------------------------------
   14. Reduced motion & no-JS
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body, main, header, nav, article, aside, footer { transition-duration: 0.01ms; }
  .theme-toggle.animate-flicker-glow { animation: none; }
  .btn.btn-glare::after, .card-hover-glare::after { animation: none; }
}

/* --------------------------------------------------------------------------
   15. Breadcrumbs + Edit this page
   -------------------------------------------------------------------------- */

.docs__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.9rem;
}
.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.crumbs__item {
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
  color: rgb(var(--color-muted-dark));
}
.crumbs__item:not(:last-child)::after {
  content: '/';
  margin-left: 0.5rem;
  opacity: 0.55;
}
.crumbs__item a {
  color: rgb(var(--color-muted-dark));
  text-decoration: none;
}
.crumbs__item a:hover { color: rgb(var(--color-fg)); text-decoration: underline; }
.crumbs__item[aria-current='page'] { color: rgb(var(--color-fg-dim)); }
.edit-link {
  display: inline-block;
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  color: rgb(var(--color-muted));
  text-decoration: none;
  border: 1px solid rgb(var(--color-border));
  padding: 0.22rem 0.6rem;
  border-radius: 0.4rem;
  white-space: nowrap;
}
.edit-link:hover {
  color: rgb(var(--color-fg));
  border-color: rgb(var(--color-border-hover));
}

/* --------------------------------------------------------------------------
   16. Search overlay
   -------------------------------------------------------------------------- */

body.modal-open { overflow: hidden; }

.search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  margin-right: 0.3rem;
  border: 1px solid rgb(var(--color-border));
  background: transparent;
  color: rgb(var(--color-muted));
  border-radius: 0.5rem;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.search-toggle:hover {
  color: rgb(var(--color-fg));
  border-color: rgb(var(--color-border-hover));
  background: rgb(var(--color-surface));
}

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 11vh 1rem 1rem;
  background: rgb(var(--color-bg) / 0.68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.search-overlay[hidden] { display: none; }
.search-overlay__panel {
  width: min(92vw, 46rem);
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  background: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-border));
  border-radius: 0.75rem;
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.35);
  overflow: hidden;
}
.search-overlay__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 1rem;
  border-bottom: 1px solid rgb(var(--color-border));
  color: rgb(var(--color-muted-dark));
}
.search-overlay__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: rgb(var(--color-fg));
  font: inherit;
  font-size: 1.05rem;
  padding: 1rem 0;
}
.search-overlay__input::placeholder { color: rgb(var(--color-muted)); }
.search-overlay__close {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  color: rgb(var(--color-muted-dark));
  background: transparent;
  border: 1px solid rgb(var(--color-border));
  border-radius: 0.375rem;
  padding: 0.2rem 0.55rem;
  cursor: pointer;
}
.search-overlay__close:hover { color: rgb(var(--color-fg)); border-color: rgb(var(--color-border-hover)); }
.search-overlay__meta {
  margin: 0;
  padding: 0.55rem 1rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  color: rgb(var(--color-muted-dark));
  border-bottom: 1px solid rgb(var(--color-border));
}
.search-overlay__results {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* grouped results: doc header + up to N section previews (JTD parity) */
.search-overlay__result {
  padding: 0.7rem 1rem 0.5rem;
  border-bottom: 1px solid rgb(var(--color-border));
}
.search-overlay__result-doc {
  display: inline-block;
  font-weight: 600;
  color: rgb(var(--color-fg));
  text-decoration: none;
  padding: 0.15rem 0.4rem;
  border-radius: 0.375rem;
}
.search-overlay__result-doc:hover,
.search-overlay__result-doc.is-active { background: rgb(var(--color-card)); }
.search-overlay__result-url {
  display: block;
  margin: 0.1rem 0.4rem 0.2rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.68rem;
  color: rgb(var(--color-muted-dark));
}
.search-overlay__previews {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
}
.search-overlay__preview { padding: 0.15rem 0.4rem; }
.search-overlay__result-section {
  display: inline-block;
  color: rgb(var(--color-fg-dim));
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.15rem 0.4rem;
  margin-left: -0.4rem;
  border-radius: 0.375rem;
}
.search-overlay__result-section:hover,
.search-overlay__result-section.is-active { background: rgb(var(--color-card)); color: rgb(var(--color-fg)); }
.search-overlay__result-snippet {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgb(var(--color-muted-dark));
}
.search-overlay__result mark {
  background: rgb(var(--theme-glow) / 0.28);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

/* floating search trigger (`search.button`, JTD parity) */
.search-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 5.25rem;
  z-index: 85;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(var(--color-border));
  border-radius: 999px;
  background: rgb(var(--color-surface) / 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgb(var(--color-fg));
  cursor: pointer;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.25);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.search-fab:hover { border-color: rgb(var(--color-border-hover)); transform: translateY(-2px); }
@media (max-width: 480px) {
  .search-fab { right: 0.9rem; bottom: 4.9rem; }
}

/* --------------------------------------------------------------------------
   17. Floating back-to-top button
   -------------------------------------------------------------------------- */

.back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 90;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(var(--color-border));
  border-radius: 999px;
  background: rgb(var(--color-surface) / 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgb(var(--color-fg));
  cursor: pointer;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.25);
  opacity: 1;
  transition: opacity 0.25s ease, border-color 0.2s ease, transform 0.2s ease;
}
.back-to-top:hover { border-color: rgb(var(--color-border-hover)); transform: translateY(-2px); }
.back-to-top[hidden] { display: none; }

@media (max-width: 480px) {
  .site-header__inner { padding: 0 0.75rem; gap: 0.5rem; }
  .site-header__left,
  .site-header__right { gap: 0.5rem; }
  .back-to-top { right: 0.9rem; bottom: 0.9rem; }
}
/* --------------------------------------------------------------------------
   JTD-compatible utilities (labels, buttons, callouts, line numbers,
   typography scale, color utilities). Gaps closed against just-the-docs.
   -------------------------------------------------------------------------- */

/* header logo image (JTD `logo`) */
.site-header__logo { height: 2rem; width: auto; max-width: 100%; }

/* docs grid when the sidebar is disabled (nav_enabled: false) */
.docs--no-nav { grid-template-columns: 1fr; }
.docs--no-nav .docs__content { padding: 3rem 1.5rem 5rem; }

/* external links at the bottom of the sidebar nav (nav_external_links) */
.docs__nav-external { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgb(var(--color-border)); }

/* automatic child page list on parent pages (has_toc) */
.docs__children { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgb(var(--color-border)); }
.docs__children-title {
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgb(var(--color-muted));
  margin: 0 0 0.75rem;
}
.docs__children-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.docs__children-list a {
  display: inline-block; padding: 0.3rem 0.55rem;
  color: rgb(var(--color-fg-dim)); text-decoration: none;
  border-radius: 0.375rem; font-size: 0.9rem;
  transition: color 160ms ease, background-color 160ms ease;
}
.docs__children-list a:hover { color: rgb(var(--color-fg)); background: rgb(var(--color-surface)); }

/* footer edit/last-modified line (gh_edit_link, last_edit_timestamp) */
.site-footer__meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.4rem 1.25rem; padding: 0.4rem 1rem 0.9rem;
  border-top: 1px solid rgb(var(--color-border));
  background: rgb(var(--color-surface));
}
.site-footer__meta .mono-xs { font-size: 0.6875rem; color: rgb(var(--color-muted)); }
.site-footer__meta a.mono-xs { text-decoration: none; }
.site-footer__meta a.mono-xs:hover { color: rgb(var(--color-fg)); text-decoration: underline; }

/* labels: JTD-compatible color variants. !important so they also win on
   kramdown code spans (`x`{: .label .label-blue }), whose inline-chip
   chrome is neutralized below. */
.label {
  display: inline-block; padding: 0.12rem 0.55rem; margin: 0 0.25rem 0.15rem 0;
  border-radius: 0.375rem; font-family: 'Space Mono', monospace;
  font-size: 0.7rem; font-weight: 700; line-height: 1.6;
  color: rgb(var(--color-fg)); background: rgb(var(--color-muted-dark) / 0.45);
  vertical-align: baseline;
}
.sty-prose code.label {
  display: inline-block; border: 0; border-radius: 0.375rem;
  padding: 0.12rem 0.55rem; margin: 0 0.25rem 0.15rem 0;
  font-family: 'Space Mono', monospace; font-size: 0.7rem; font-weight: 700;
  line-height: 1.6; vertical-align: baseline; white-space: normal;
  max-width: none; overflow: visible;
  color: rgb(var(--color-fg)); background: rgb(var(--color-muted-dark) / 0.45);
}
.label-blue { color: #27262b !important; background: #2c84fa !important; }
.label-green { color: #27262b !important; background: #41d693 !important; }
.label-purple { color: #ffffff !important; background: #7253ed !important; }
.label-yellow { color: #27262b !important; background: #e7af06 !important; }
.label-red { color: #27262b !important; background: #f77e7e !important; }
.label-grey { color: #27262b !important; background: #959396 !important; }

/* buttons: JTD-compatible color variants + sizes. Every variant lists
   the prose-scoped selector too: .sty-prose a.btn (color: bg) would
   otherwise override the variant text color, black-on-black in dark
   mode. Text colors are picked by background luminance (WCAG-ish). */
.btn-primary, .sty-prose a.btn-primary { background: rgb(var(--color-fg)); color: rgb(var(--color-bg)); border-color: transparent; }
.btn-purple, .sty-prose a.btn-purple { background: #7253ed; color: #ffffff; border-color: transparent; }
.btn-blue, .sty-prose a.btn-blue { background: #2c84fa; color: #27262b; border-color: transparent; }
.btn-green, .sty-prose a.btn-green { background: #11b584; color: #27262b; border-color: transparent; }
.btn-red, .sty-prose a.btn-red { background: #f77e7e; color: #27262b; border-color: transparent; }
.btn-yellow, .sty-prose a.btn-yellow { background: #f7d12e; color: #27262b; border-color: transparent; }
.btn-outline, .sty-prose a.btn-outline { background: transparent; color: rgb(var(--color-fg)); border-color: rgb(var(--color-fg) / 0.4); }
.btn-outline:hover, .sty-prose a.btn-outline:hover { border-color: rgb(var(--color-fg)); }
.btn-sm { padding: 0.35rem 0.9rem; font-size: 0.75rem; }
.btn-xs { padding: 0.25rem 0.65rem; font-size: 0.6875rem; }

/* callouts: JTD-compatible classes (.note/.tip/.warning/.important) */
.sty-prose .note, .sty-prose .tip, .sty-prose .warning, .sty-prose .important {
  border-left: 4px solid rgb(var(--color-border-hover));
  border-radius: 0.375rem; padding: 0.85rem 1.1rem; margin: 1.5rem 0;
  background: rgb(var(--color-surface));
  box-shadow: inset 0 0 0 1px rgb(var(--color-border));
}
.sty-prose .note { border-left-color: #2c84fa; background: rgba(44, 132, 250, 0.08); }
.sty-prose .tip { border-left-color: #11b584; background: rgba(17, 181, 132, 0.08); }
.sty-prose .warning { border-left-color: #f7d12e; background: rgba(247, 209, 46, 0.08); }
.sty-prose .important { border-left-color: #f96e65; background: rgba(249, 110, 101, 0.08); }
.sty-prose .note-title, .sty-prose .tip-title, .sty-prose .warning-title, .sty-prose .important-title {
  display: block; margin-bottom: 0.35rem;
  font-family: 'Space Mono', monospace; font-size: 0.75rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
}
.sty-prose .note-title { color: #2c84fa; }
.sty-prose .tip-title { color: #11b584; }
.sty-prose .warning-title { color: #f7d12e; }
.sty-prose .important-title { color: #f96e65; }

/* code line numbers (kramdown line_numbers: true / linenos) */
.highlight .lineno {
  display: inline-block; min-width: 1.9rem; margin-right: 1rem;
  padding-right: 0.85rem; text-align: right;
  color: rgb(var(--color-muted-dark));
  border-right: 1px solid rgb(var(--color-border));
  -webkit-user-select: none; user-select: none;
}
.highlight table.rouge-table, .highlight table.rouge-table tbody, .highlight table.rouge-table tr, .highlight table.rouge-table td { display: block; }
.highlight table.rouge-table td.gutter { padding-right: 0; }

/* type scale: .fs-1 .. .fs-10 (mobile / >=768px) */
.fs-1 { font-size: 9px !important; line-height: 1.5; }
.fs-2 { font-size: 11px !important; line-height: 1.5; }
.fs-3 { font-size: 12px !important; line-height: 1.5; }
.fs-4 { font-size: 14px !important; line-height: 1.5; }
.fs-5 { font-size: 16px !important; line-height: 1.5; }
.fs-6 { font-size: 18px !important; line-height: 1.5; }
.fs-7 { font-size: 24px !important; line-height: 1.5; }
.fs-8 { font-size: 32px !important; line-height: 1.5; }
.fs-9 { font-size: 38px !important; line-height: 1.5; }
.fs-10 { font-size: 42px !important; line-height: 1.5; }
@media (min-width: 768px) {
  .fs-1 { font-size: 10px !important; }
  .fs-2 { font-size: 12px !important; }
  .fs-3 { font-size: 14px !important; }
  .fs-4 { font-size: 16px !important; }
  .fs-5 { font-size: 18px !important; }
  .fs-6 { font-size: 24px !important; }
  .fs-7 { font-size: 32px !important; }
  .fs-8 { font-size: 38px !important; }
  .fs-9 { font-size: 42px !important; }
  .fs-10 { font-size: 48px !important; }
}
.fw-300 { font-weight: 300 !important; }
.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-700 { font-weight: 700 !important; }
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-mono { font-family: 'Space Mono', monospace !important; }
.text-delta {
  font-family: 'Space Mono', monospace; font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: 0.2em; color: rgb(var(--color-muted));
}
.d-inline-block { display: inline-block !important; }

/* color utilities: .text-<name>-<level> and .bg-<name>-<level> */
.text-grey-dk-000 { color: #959396 !important; }
.bg-grey-dk-000 { background-color: #959396 !important; }
.text-grey-dk-100 { color: #5c5962 !important; }
.bg-grey-dk-100 { background-color: #5c5962 !important; }
.text-grey-dk-200 { color: #44434d !important; }
.bg-grey-dk-200 { background-color: #44434d !important; }
.text-grey-dk-250 { color: #302d36 !important; }
.bg-grey-dk-250 { background-color: #302d36 !important; }
.text-grey-dk-300 { color: #27262b !important; }
.bg-grey-dk-300 { background-color: #27262b !important; }
.text-grey-lt-000 { color: #f5f6fa !important; }
.bg-grey-lt-000 { background-color: #f5f6fa !important; }
.text-grey-lt-100 { color: #eeebee !important; }
.bg-grey-lt-100 { background-color: #eeebee !important; }
.text-grey-lt-200 { color: #ecebed !important; }
.bg-grey-lt-200 { background-color: #ecebed !important; }
.text-grey-lt-300 { color: #e6e1e8 !important; }
.bg-grey-lt-300 { background-color: #e6e1e8 !important; }
.text-purple-000 { color: #7253ed !important; }
.bg-purple-000 { background-color: #7253ed !important; }
.text-purple-100 { color: #5e41d0 !important; }
.bg-purple-100 { background-color: #5e41d0 !important; }
.text-purple-200 { color: #4e26af !important; }
.bg-purple-200 { background-color: #4e26af !important; }
.text-purple-300 { color: #381885 !important; }
.bg-purple-300 { background-color: #381885 !important; }
.text-blue-000 { color: #2c84fa !important; }
.bg-blue-000 { background-color: #2c84fa !important; }
.text-blue-100 { color: #2869e6 !important; }
.bg-blue-100 { background-color: #2869e6 !important; }
.text-blue-200 { color: #264caf !important; }
.bg-blue-200 { background-color: #264caf !important; }
.text-blue-300 { color: #183385 !important; }
.bg-blue-300 { background-color: #183385 !important; }
.text-green-000 { color: #41d693 !important; }
.bg-green-000 { background-color: #41d693 !important; }
.text-green-100 { color: #11b584 !important; }
.bg-green-100 { background-color: #11b584 !important; }
.text-green-200 { color: #009c7b !important; }
.bg-green-200 { background-color: #009c7b !important; }
.text-green-300 { color: #026e57 !important; }
.bg-green-300 { background-color: #026e57 !important; }
.text-yellow-000 { color: #ffeb82 !important; }
.bg-yellow-000 { background-color: #ffeb82 !important; }
.text-yellow-100 { color: #fadf50 !important; }
.bg-yellow-100 { background-color: #fadf50 !important; }
.text-yellow-200 { color: #f7d12e !important; }
.bg-yellow-200 { background-color: #f7d12e !important; }
.text-yellow-300 { color: #e7af06 !important; }
.bg-yellow-300 { background-color: #e7af06 !important; }
.text-red-000 { color: #f77e7e !important; }
.bg-red-000 { background-color: #f77e7e !important; }
.text-red-100 { color: #f96e65 !important; }
.bg-red-100 { background-color: #f96e65 !important; }
.text-red-200 { color: #e94c4c !important; }
.bg-red-200 { background-color: #e94c4c !important; }
.text-red-300 { color: #dd2e2e !important; }
.bg-red-300 { background-color: #dd2e2e !important; }

/* re-assert JTD button color variants inside prose, where the generic
   link rule (.sty-prose a.btn:hover) would otherwise win */
.sty-prose a.btn-primary:hover { background: rgb(var(--color-fg)); color: rgb(var(--color-bg)); }
.sty-prose a.btn-purple:hover { background: #7f5ff0; color: #ffffff; }
.sty-prose a.btn-blue:hover { background: #4c94fa; color: #27262b; }
.sty-prose a.btn-green:hover { background: #2fc292; color: #27262b; }
.sty-prose a.btn-red:hover { background: #f88f8f; color: #27262b; }
.sty-prose a.btn-yellow:hover { background: #f8da5c; color: #27262b; }
.sty-prose a.btn-outline:hover { background: rgb(var(--color-fg) / 0.08); color: rgb(var(--color-fg)); }

/* multi-collection navigation (just_the_docs.collections) */
.docs__nav-category {
  margin: 1.25rem 0 0.35rem;
  padding: 0 0.55rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgb(var(--color-muted));
}
.docs__nav-category:first-child { margin-top: 0; }
.docs__nav-fold { margin-top: 1rem; }
.docs__nav-fold-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.3rem 0.35rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: 'Space Mono', monospace;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgb(var(--color-muted));
  text-align: left;
}
.docs__nav-fold-btn:hover { color: rgb(var(--color-fg)); }
.docs__nav-fold-btn svg { flex: none; transition: transform 160ms ease; }
.docs__nav-fold-btn[aria-expanded='true'] svg { transform: rotate(90deg); }
.docs__nav-fold .docs__nav-list { margin-top: 0.25rem; }
/* --------------------------------------------------------------------------
   JTD-compatible spacing, layout and alignment utilities (v0.2.0)
   -------------------------------------------------------------------------- */

.m-0 { margin: 0 !important; }
.m-1 { margin: 0.25rem !important; }
.m-2 { margin: 0.5rem !important; }
.m-3 { margin: 0.75rem !important; }
.m-4 { margin: 1rem !important; }
.m-5 { margin: 1.5rem !important; }
.m-6 { margin: 2rem !important; }
.m-7 { margin: 3rem !important; }
.m-8 { margin: 4rem !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 0.75rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-5 { margin-top: 1.5rem !important; }
.mt-6 { margin-top: 2rem !important; }
.mt-7 { margin-top: 3rem !important; }
.mt-8 { margin-top: 4rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-5 { margin-bottom: 1.5rem !important; }
.mb-6 { margin-bottom: 2rem !important; }
.mb-7 { margin-bottom: 3rem !important; }
.mb-8 { margin-bottom: 4rem !important; }
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 0.75rem !important; }
.ml-4 { margin-left: 1rem !important; }
.ml-5 { margin-left: 1.5rem !important; }
.ml-6 { margin-left: 2rem !important; }
.ml-7 { margin-left: 3rem !important; }
.ml-8 { margin-left: 4rem !important; }
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 0.75rem !important; }
.mr-4 { margin-right: 1rem !important; }
.mr-5 { margin-right: 1.5rem !important; }
.mr-6 { margin-right: 2rem !important; }
.mr-7 { margin-right: 3rem !important; }
.mr-8 { margin-right: 4rem !important; }
.mx-0 { margin-inline: 0 !important; }
.mx-1 { margin-inline: 0.25rem !important; }
.mx-2 { margin-inline: 0.5rem !important; }
.mx-3 { margin-inline: 0.75rem !important; }
.mx-4 { margin-inline: 1rem !important; }
.mx-5 { margin-inline: 1.5rem !important; }
.mx-6 { margin-inline: 2rem !important; }
.mx-7 { margin-inline: 3rem !important; }
.mx-8 { margin-inline: 4rem !important; }
.my-0 { margin-block: 0 !important; }
.my-1 { margin-block: 0.25rem !important; }
.my-2 { margin-block: 0.5rem !important; }
.my-3 { margin-block: 0.75rem !important; }
.my-4 { margin-block: 1rem !important; }
.my-5 { margin-block: 1.5rem !important; }
.my-6 { margin-block: 2rem !important; }
.my-7 { margin-block: 3rem !important; }
.my-8 { margin-block: 4rem !important; }
.m-auto { margin: auto !important; }
.mx-auto { margin-inline: auto !important; }
.my-auto { margin-block: auto !important; }
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 0.75rem !important; }
.p-4 { padding: 1rem !important; }
.p-5 { padding: 1.5rem !important; }
.p-6 { padding: 2rem !important; }
.p-7 { padding: 3rem !important; }
.p-8 { padding: 4rem !important; }
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 0.75rem !important; }
.pt-4 { padding-top: 1rem !important; }
.pt-5 { padding-top: 1.5rem !important; }
.pt-6 { padding-top: 2rem !important; }
.pt-7 { padding-top: 3rem !important; }
.pt-8 { padding-top: 4rem !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 0.75rem !important; }
.pb-4 { padding-bottom: 1rem !important; }
.pb-5 { padding-bottom: 1.5rem !important; }
.pb-6 { padding-bottom: 2rem !important; }
.pb-7 { padding-bottom: 3rem !important; }
.pb-8 { padding-bottom: 4rem !important; }
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 0.25rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.pl-3 { padding-left: 0.75rem !important; }
.pl-4 { padding-left: 1rem !important; }
.pl-5 { padding-left: 1.5rem !important; }
.pl-6 { padding-left: 2rem !important; }
.pl-7 { padding-left: 3rem !important; }
.pl-8 { padding-left: 4rem !important; }
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pr-3 { padding-right: 0.75rem !important; }
.pr-4 { padding-right: 1rem !important; }
.pr-5 { padding-right: 1.5rem !important; }
.pr-6 { padding-right: 2rem !important; }
.pr-7 { padding-right: 3rem !important; }
.pr-8 { padding-right: 4rem !important; }
.px-0 { padding-inline: 0 !important; }
.px-1 { padding-inline: 0.25rem !important; }
.px-2 { padding-inline: 0.5rem !important; }
.px-3 { padding-inline: 0.75rem !important; }
.px-4 { padding-inline: 1rem !important; }
.px-5 { padding-inline: 1.5rem !important; }
.px-6 { padding-inline: 2rem !important; }
.px-7 { padding-inline: 3rem !important; }
.px-8 { padding-inline: 4rem !important; }
.py-0 { padding-block: 0 !important; }
.py-1 { padding-block: 0.25rem !important; }
.py-2 { padding-block: 0.5rem !important; }
.py-3 { padding-block: 0.75rem !important; }
.py-4 { padding-block: 1rem !important; }
.py-5 { padding-block: 1.5rem !important; }
.py-6 { padding-block: 2rem !important; }
.py-7 { padding-block: 3rem !important; }
.py-8 { padding-block: 4rem !important; }

/* display and flex */
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-none { display: none !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-justify-start { justify-content: flex-start !important; }
.flex-justify-end { justify-content: flex-end !important; }
.flex-justify-center { justify-content: center !important; }
.flex-justify-between { justify-content: space-between !important; }
.flex-justify-around { justify-content: space-around !important; }
.flex-items-start { align-items: flex-start !important; }
.flex-items-end { align-items: flex-end !important; }
.flex-items-center { align-items: center !important; }
.flex-items-baseline { align-items: baseline !important; }
.flex-items-stretch { align-items: stretch !important; }
.flex-1 { flex: 1 1 0% !important; }
.flex-auto { flex: 1 1 auto !important; }
.flex-none { flex: none !important; }
.flex-grow-1 { flex-grow: 1 !important; }

/* vertical alignment */
.v-align-baseline { vertical-align: baseline !important; }
.v-align-top { vertical-align: top !important; }
.v-align-middle { vertical-align: middle !important; }
.v-align-bottom { vertical-align: bottom !important; }

/* definition lists (JTD parity) */
.sty-prose dl { margin: 1.5rem 0; }
.sty-prose dt {
  font-weight: 600;
  color: rgb(var(--color-fg));
  margin-top: 0.9rem;
}
.sty-prose dt:first-child { margin-top: 0; }
.sty-prose dd {
  margin: 0.2rem 0 0 1.1rem;
  color: rgb(var(--color-fg-dim));
}

/* print stylesheet */
@media print {
  .site-header, .site-footer, .docs__sidebar, .docs__scrim,
  .back-to-top, .search-fab, .search-overlay, .copy-btn,
  .prev-next, .edit-link, .nav-toggle, .search-toggle, .theme-toggle { display: none !important; }
  .docs { display: block; }
  .docs__content { padding: 0; }
  body { background: #ffffff; color: #000000; }
  .sty-prose a { color: #000000; text-decoration: underline; }
  .sty-prose code, .sty-prose pre, .highlight { background: #f6f8fa; border-color: #d0d7de; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}

/* --------------------------------------------------------------------------
   27. Blog posts
   Post meta (date, reading time), tag chips, and the tags index page.
   Scoped to the same containers the docs shell uses, so posts and docs
   share one visual language.
   -------------------------------------------------------------------------- */

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: rgb(var(--color-muted));
  text-transform: uppercase;
}
.post-meta__date { color: rgb(var(--color-muted)); }
.post-meta__sep { color: rgb(var(--color-muted-dark)); }
.post-meta__rt { color: rgb(var(--color-muted)); }

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.85rem;
}
.post-tag {
  display: inline-block;
  padding: 0.12rem 0.55rem;
  border: 1px solid rgb(var(--color-border));
  border-radius: 0.375rem;
  font-family: 'Space Mono', monospace;
  font-size: 0.6875rem;
  line-height: 1.6;
  color: rgb(var(--color-muted));
  background: rgb(var(--color-muted-dark) / 0.35);
}

/* blog listing card: title + lede + meta, used by the posts index page */
.post-list { list-style: none; margin: 0; padding: 0; }
.post-list__item {
  padding: 1.5rem 0;
  border-bottom: 1px solid rgb(var(--color-border));
}
.post-list__item:last-child { border-bottom: none; }
.post-list__title {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  line-height: 1.35;
}
.post-list__title a { color: rgb(var(--color-fg)); text-decoration: none; }
.post-list__title a:hover { text-decoration: underline; }
.post-list__excerpt {
  margin: 0 0 0.6rem;
  color: rgb(var(--color-muted));
  line-height: 1.65;
}
.post-list__meta {
  font-family: 'Space Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: rgb(var(--color-muted-dark));
  text-transform: uppercase;
}
.post-list__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.55rem;
}