@charset "UTF-8";
:root {
  color-scheme: light dark;
}

@font-face {
  font-family: "Linux Libertine";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/LinLibertine_Rah.woff2") format("woff2");
}
@font-face {
  font-family: "Linux Libertine";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/LinLibertine_RIah.woff2") format("woff2");
}
@font-face {
  font-family: "Linux Libertine";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/LinLibertine_RBah.woff2") format("woff2");
}
@font-face {
  font-family: "Linux Libertine";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/LinLibertine_RBIah.woff2") format("woff2");
}
@font-face {
  font-family: "Linux Biolinum";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/LinBiolinum_Rah.woff2") format("woff2");
}
@font-face {
  font-family: "Linux Biolinum";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/LinBiolinum_RIah.woff2") format("woff2");
}
@font-face {
  font-family: "Linux Biolinum";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/LinBiolinum_RBah.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Code";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/FiraCode-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Fira Code";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/FiraCode-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Upright";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/CormorantUpright-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Upright";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/CormorantUpright-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Upright";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/CormorantUpright-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Upright";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/CormorantUpright-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Cinzel-Regular.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/Cinzel-SemiBold.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}
@font-face {
  font-family: "UnifrakturMaguntia";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/UnifrakturMaguntia-Regular.woff2") 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;
}
@font-face {
  font-family: "Goudy Initialen";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/GoudyInitialen.woff2") format("woff2");
}
@font-face {
  font-family: "Ballet";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Ballet-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/Caveat-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/AtkinsonHyperlegibleNext-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/AtkinsonHyperlegibleNext-Italic-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "Alegreya";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/Alegreya-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "Alegreya";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/Alegreya-Italic-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/Lora-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/Lora-Italic-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "Mukta";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Mukta-Regular.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: "Phosphor";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/fonts/Phosphor.woff2") format("woff2");
}
:root,
[data-theme=versal] {
  --paper: #f7f4e9;
  --paper-dim: #efebdd;
  --viewer: #e3ddca;
  --sheet-shadow: 0 1px 2px rgba(40, 38, 30, 0.1), 0 8px 28px rgba(40, 38, 30, 0.14);
  --sticky-bg: #fcf3c8;
  --sticky-edge: #f3e6a3;
  --sticky-ink: #2a2410;
  --sticky-shadow: 1px 3px 5px rgba(40, 38, 30, 0.16), 3px 8px 18px rgba(40, 38, 30, 0.22);
  --sticky-tilt: -4deg;
  --ink: #1c1a15;
  --ink-muted: #5a554b;
  --rule: #d8d2c3;
  --accent: #b87333;
  --link: oklch(from var(--accent) calc(l - 0.06) c h);
  --link-hover: oklch(from var(--accent) calc(l + 0.05) c h);
  --toc-marker-bg: color-mix(in srgb, var(--accent) 15%, transparent);
  --diagram-node: #ffffff;
  --diagram-node-2: #e7dcd6;
  --diagram-accent: var(--accent);
  --code-bg: #f1ece1;
  --font-body: "Linux Libertine", "Cambria", "Source Serif Pro", Georgia, serif;
  --font-title: "Cormorant Upright", "Linux Libertine", "Cambria", Georgia, serif;
  --font-name: "Cinzel", "Trajan Pro", var(--font-title);
  --font-display: "Linux Biolinum", "Optima", "Trebuchet MS", system-ui, sans-serif;
  --font-sans: "Linux Biolinum", "Optima", "Trebuchet MS", system-ui, sans-serif;
  --font-mono: "Fira Code", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-dropcap: "Goudy Initialen", var(--font-title);
  --font-script: "Ballet", "Snell Roundhand", "Apple Chancery", cursive;
  --font-hand: "Caveat", "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
  --feature-body: "liga", "ss06", "kern";
  --type-base: 1.1875rem;
  --type-sm: 0.825rem;
  --type-md: 1rem;
  --type-lg: 1.25rem;
  --type-xl: 1.563rem;
  --type-2xl: 1.953rem;
  --type-3xl: 2.441rem;
  --type-4xl: 3.052rem;
  --leading-body: 1.6;
  --leading-tight: 1.25;
  --measure: 31.6rem;
  --measure-wide: 41.8rem;
  --measure-rem: var(--measure);
  --rhythm: 1.5rem;
  --first-indent: 1.2em;
  --gutter: 8.4rem;
  --gutter-gap: 2.5rem;
  --dropcap-weight: 400;
  --dropcap-lines: 2.95;
  --dropcap-line-height: 1;
  --dropcap-size: calc(var(--dropcap-lines) * var(--leading-body) * 1em);
  --dropcap-margin: 0 0.15em 0 0;
  --site-title-weight: 700;
  --site-title-style: normal;
  --h1-weight: 700;
  --h2-weight: 700;
  --h3-weight: 600;
  --heading-style: normal;
  --heading-color: var(--ink);
  --dinkus: "✦  ✦  ✦";
  --tailpiece: "✦";
  --status-seedling-bg: rgba(155, 194, 113, 0.22);
  --status-seedling-fg: #506d2c;
  --status-budding-bg: rgba(225, 178, 89, 0.22);
  --status-budding-fg: #7d5712;
  --status-evergreen-bg: rgba(75, 130, 95, 0.22);
  --status-evergreen-fg: #2d4a3a;
  --admon-note-fg: #34557a;
  --admon-note-bg: rgba(70, 110, 150, 0.1);
  --admon-warning-fg: #7d5712;
  --admon-warning-bg: rgba(225, 178, 89, 0.18);
  --admon-important-fg: #8c2f2f;
  --admon-important-bg: rgba(180, 60, 60, 0.1);
}

[data-theme=versal][data-mode=dark] {
  --paper: #1a1714;
  --paper-dim: #25201b;
  --diagram-node: #2c2620;
  --diagram-node-2: #383027;
  --diagram-accent: var(--accent);
  --viewer: #0d0b09;
  --sheet-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 32px rgba(0, 0, 0, 0.55);
  --sticky-bg: #d8c46a;
  --sticky-edge: #cbb756;
  --sticky-ink: #2a2410;
  --sticky-shadow: 1px 3px 6px rgba(0, 0, 0, 0.6), 3px 8px 20px rgba(0, 0, 0, 0.65);
  --sticky-tilt: -4deg;
  --ink: #ede5d4;
  --ink-muted: #a89c8a;
  --rule: #3d362e;
  --accent: #d68752;
  --link: oklch(from var(--accent) calc(l + 0.06) c h);
  --link-hover: oklch(from var(--accent) calc(l + 0.1) c h);
  --toc-marker-bg: color-mix(in srgb, var(--accent) 26%, transparent);
  --code-bg: #25201b;
  --heading-color: var(--ink);
  --status-seedling-bg: rgba(155, 194, 113, 0.18);
  --status-seedling-fg: #b6d780;
  --status-budding-bg: rgba(225, 178, 89, 0.18);
  --status-budding-fg: #f0c878;
  --status-evergreen-bg: rgba(75, 130, 95, 0.22);
  --status-evergreen-fg: #8cbca0;
  --admon-note-fg: #8fb4d4;
  --admon-note-bg: rgba(110, 160, 200, 0.14);
  --admon-warning-fg: #f0c878;
  --admon-warning-bg: rgba(225, 178, 89, 0.14);
  --admon-important-fg: #e4988a;
  --admon-important-bg: rgba(200, 80, 80, 0.14);
}

@media (prefers-color-scheme: dark) {
  [data-theme=versal]:not([data-mode=light]) {
    --paper: #1a1714;
    --paper-dim: #25201b;
    --diagram-node: #2c2620;
    --diagram-node-2: #383027;
    --diagram-accent: var(--accent);
    --viewer: #0d0b09;
    --sheet-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 32px rgba(0, 0, 0, 0.55);
    --sticky-bg: #d8c46a;
    --sticky-edge: #cbb756;
    --sticky-ink: #2a2410;
    --sticky-shadow: 1px 3px 6px rgba(0, 0, 0, 0.6), 3px 8px 20px rgba(0, 0, 0, 0.65);
    --sticky-tilt: -4deg;
    --ink: #ede5d4;
    --ink-muted: #a89c8a;
    --rule: #3d362e;
    --accent: #d68752;
    --link: oklch(from var(--accent) calc(l + 0.06) c h);
    --link-hover: oklch(from var(--accent) calc(l + 0.1) c h);
    --toc-marker-bg: color-mix(in srgb, var(--accent) 26%, transparent);
    --code-bg: #25201b;
    --heading-color: var(--ink);
    --status-seedling-bg: rgba(155, 194, 113, 0.18);
    --status-seedling-fg: #b6d780;
    --status-budding-bg: rgba(225, 178, 89, 0.18);
    --status-budding-fg: #f0c878;
    --status-evergreen-bg: rgba(75, 130, 95, 0.22);
    --status-evergreen-fg: #8cbca0;
    --admon-note-fg: #8fb4d4;
    --admon-note-bg: rgba(110, 160, 200, 0.14);
    --admon-warning-fg: #f0c878;
    --admon-warning-bg: rgba(225, 178, 89, 0.14);
    --admon-important-fg: #e4988a;
    --admon-important-bg: rgba(200, 80, 80, 0.14);
  }
  :root:not([data-theme]):not([data-mode=light]) {
    --paper: #1a1714;
    --paper-dim: #25201b;
    --diagram-node: #2c2620;
    --diagram-node-2: #383027;
    --diagram-accent: var(--accent);
    --viewer: #0d0b09;
    --sheet-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 32px rgba(0, 0, 0, 0.55);
    --sticky-bg: #d8c46a;
    --sticky-edge: #cbb756;
    --sticky-ink: #2a2410;
    --sticky-shadow: 1px 3px 6px rgba(0, 0, 0, 0.6), 3px 8px 20px rgba(0, 0, 0, 0.65);
    --sticky-tilt: -4deg;
    --ink: #ede5d4;
    --ink-muted: #a89c8a;
    --rule: #3d362e;
    --accent: #d68752;
    --link: oklch(from var(--accent) calc(l + 0.06) c h);
    --link-hover: oklch(from var(--accent) calc(l + 0.1) c h);
    --toc-marker-bg: color-mix(in srgb, var(--accent) 26%, transparent);
    --code-bg: #25201b;
    --heading-color: var(--ink);
    --status-seedling-bg: rgba(155, 194, 113, 0.18);
    --status-seedling-fg: #b6d780;
    --status-budding-bg: rgba(225, 178, 89, 0.18);
    --status-budding-fg: #f0c878;
    --status-evergreen-bg: rgba(75, 130, 95, 0.22);
    --status-evergreen-fg: #8cbca0;
    --admon-note-fg: #8fb4d4;
    --admon-note-bg: rgba(110, 160, 200, 0.14);
    --admon-warning-fg: #f0c878;
    --admon-warning-bg: rgba(225, 178, 89, 0.14);
    --admon-important-fg: #e4988a;
    --admon-important-bg: rgba(200, 80, 80, 0.14);
  }
}
[data-reading=book] {
  --font-body: "Linux Libertine", "Cambria", "Source Serif Pro", Georgia, serif;
}

[data-reading=alegreya] {
  --font-body: "Alegreya", "Cambria", "Source Serif Pro", Georgia, serif;
}

[data-reading=lora] {
  --font-body: "Lora", "Cambria", "Source Serif Pro", Georgia, serif;
}

[data-reading=legible] {
  --font-body: "Atkinson Hyperlegible Next", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-sans: "Atkinson Hyperlegible Next", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-display: "Atkinson Hyperlegible Next", system-ui, "Segoe UI", Roboto, sans-serif;
}

[data-accent=navy] {
  --accent: #10416f;
}

[data-accent=amber] {
  --accent: #8a6e00;
}

[data-accent=pink] {
  --accent: #b1457f;
}

:root {
  --accent-default: #b87333;
  --swatch-navy: #10416f;
  --swatch-amber: #8a6e00;
  --swatch-pink: #b1457f;
}

[data-theme=versal][data-mode=dark] {
  --accent-default: #d68752;
  --swatch-navy: #5e93cc;
  --swatch-amber: #e8c34a;
  --swatch-pink: #e58fb0;
}
[data-theme=versal][data-mode=dark][data-accent=navy] {
  --accent: #5e93cc;
}
[data-theme=versal][data-mode=dark][data-accent=amber] {
  --accent: #e8c34a;
}
[data-theme=versal][data-mode=dark][data-accent=pink] {
  --accent: #e58fb0;
}

@media (prefers-color-scheme: dark) {
  [data-theme=versal]:not([data-mode=light]) {
    --accent-default: #d68752;
    --swatch-navy: #5e93cc;
    --swatch-amber: #e8c34a;
    --swatch-pink: #e58fb0;
  }
  [data-theme=versal]:not([data-mode=light])[data-accent=navy] {
    --accent: #5e93cc;
  }
  [data-theme=versal]:not([data-mode=light])[data-accent=amber] {
    --accent: #e8c34a;
  }
  [data-theme=versal]:not([data-mode=light])[data-accent=pink] {
    --accent: #e58fb0;
  }
  :root:not([data-theme]):not([data-mode=light]) {
    --accent-default: #d68752;
    --swatch-navy: #5e93cc;
    --swatch-amber: #e8c34a;
    --swatch-pink: #e58fb0;
  }
  :root:not([data-theme]):not([data-mode=light])[data-accent=navy] {
    --accent: #5e93cc;
  }
  :root:not([data-theme]):not([data-mode=light])[data-accent=amber] {
    --accent: #e8c34a;
  }
  :root:not([data-theme]):not([data-mode=light])[data-accent=pink] {
    --accent: #e58fb0;
  }
}
:root {
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 400ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}
:root {
  --page-pad-x-inner: clamp(1.25rem, 4vw, 3.5rem);
  --page-pad-y: clamp(3.5rem, 7vw, 6rem);
}

body {
  --article-width: calc(var(--measure) + var(--gutter-gap) + var(--gutter));
  --sheet-full-width: calc(
    var(--article-width) + var(--gutter) + 2 * var(--gutter-gap) + 2 * var(--page-pad-x-inner)
  );
}

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

html {
  font-size: var(--type-base);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

:where(h1, h2, h3, h4, section[id], .ev-sector) {
  scroll-margin-top: 2rem;
}

body {
  margin: 0;
  padding-bottom: 4rem;
  background: var(--viewer);
  color: var(--ink);
  font-family: var(--font-body);
  font-feature-settings: var(--feature-body);
  font-variant-numeric: lining-nums;
  line-height: var(--leading-body);
  hyphens: auto;
}

.ph {
  display: inline-block;
  width: 1em;
  height: 1em;
  color: currentColor;
  font-family: "Phosphor";
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  line-height: 1;
  text-transform: none;
  speak: never;
  letter-spacing: 0;
  font-feature-settings: "liga";
  font-variant-ligatures: discretionary-ligatures;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ph::before {
  display: block;
}

.ph-airplane-tilt::before {
  content: "\e5d6";
}

.ph-arrow-square-out::before {
  content: "\e5de";
}

.ph-article::before {
  content: "\e0a8";
}

.ph-book-open::before {
  content: "\e0e6";
}

.ph-buildings::before {
  content: "\e102";
}

.ph-chart-line::before {
  content: "\e154";
}

.ph-code::before {
  content: "\e1bc";
}

.ph-copy::before {
  content: "\e1ca";
}

.ph-download::before {
  content: "\e20a";
}

.ph-envelope::before {
  content: "\e214";
}

.ph-file-pdf::before {
  content: "\e702";
}

.ph-film-strip::before {
  content: "\e792";
}

.ph-gavel::before {
  content: "\ea32";
}

.ph-git-branch::before {
  content: "\e278";
}

.ph-github-logo::before {
  content: "\e576";
}

.ph-heart::before {
  content: "\e2a8";
}

.ph-link::before {
  content: "\e2e2";
}

.ph-linkedin-logo::before {
  content: "\e2ee";
}

.ph-map-pin::before {
  content: "\e316";
}

.ph-microphone-stage::before {
  content: "\e75c";
}

.ph-music-notes::before {
  content: "\e340";
}

.ph-radio::before {
  content: "\e77e";
}

.ph-scroll::before {
  content: "\eb7a";
}

.ph-seal-check::before {
  content: "\e606";
}

.ph-rss::before {
  content: "\e400";
}

.ph-soccer-ball::before {
  content: "\e716";
}

.ph-stethoscope::before {
  content: "\e7ea";
}

.ph-vinyl-record::before {
  content: "\ecac";
}

.icon-link,
.icon-button,
.icon-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
}

.icon-link .ph,
.icon-button .ph,
.icon-chip .ph {
  flex: none;
  transform: translateY(0.12em);
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

:root {
  --viewer-pad: clamp(1rem, 4vw, 3.5rem);
  --site-frame-ink: color-mix(in srgb, var(--accent) 76%, var(--ink-muted));
  --site-frame-opacity: 0.15;
  --site-frame-crown-width: min(44rem, 86vw);
  --site-frame-edge-width: 11rem;
}

.site-frame {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: var(--site-frame-crown-width);
  margin-inline: auto;
  aspect-ratio: 707/482;
  z-index: 0;
  pointer-events: none;
  background-color: var(--site-frame-ink);
  opacity: var(--site-frame-opacity);
  -webkit-mask: url(/arch-crown.svg) top center/100% auto no-repeat;
  mask: url(/arch-crown.svg) top center/100% auto no-repeat;
}
.site-frame::before, .site-frame::after {
  content: "";
  position: fixed;
  top: 0;
  width: var(--site-frame-edge-width);
  aspect-ratio: 177/1493;
  pointer-events: none;
  background-color: var(--site-frame-ink);
  -webkit-mask: url(/arch-edge-left.svg) top left/100% auto no-repeat;
  mask: url(/arch-edge-left.svg) top left/100% auto no-repeat;
}
.site-frame::before {
  left: 0;
}
.site-frame::after {
  right: 0;
  -webkit-mask-image: url(/arch-edge-right.svg);
  mask-image: url(/arch-edge-right.svg);
  -webkit-mask-position: top right;
  mask-position: top right;
}

@media (max-width: 48rem) {
  .site-frame::before, .site-frame::after {
    display: none;
  }
}
.site-header {
  position: relative;
  z-index: 1;
  padding-top: clamp(0.5rem, 3vw, 2rem);
}

.page {
  background: var(--paper);
  width: var(--sheet-full-width);
  max-width: calc(100% - 2 * var(--viewer-pad));
  margin: calc(var(--viewer-pad) - 1rem) auto var(--viewer-pad);
  padding: var(--page-pad-y) var(--page-pad-x-inner);
  box-shadow: var(--sheet-shadow);
  position: relative;
}
.page::after {
  content: "";
  position: absolute;
  inset: 10px -10px -10px 10px;
  background: var(--paper-dim);
  box-shadow: var(--sheet-shadow);
  z-index: -1;
}
.page > .page-footer-watermark {
  display: block;
  position: relative;
  z-index: 1;
  width: min(34rem, 70%);
  margin: calc(var(--rhythm) * 2) auto 0;
  aspect-ratio: 2052/412;
  pointer-events: none;
  background-color: var(--ink);
  opacity: 0.1;
  -webkit-mask: url(/page-footer-watermark.svg) center/contain no-repeat;
  mask: url(/page-footer-watermark.svg) center/contain no-repeat;
}
@media (prefers-color-scheme: dark) {
  .page > .page-footer-watermark {
    opacity: 0.14;
  }
}

[data-home] .article-header h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
[data-home] .article-header {
  margin-bottom: 0;
}

.toc-rail {
  display: none;
}

@media (min-width: 1500px) {
  body {
    --sheet-start-board: calc((100vw - var(--sheet-full-width)) / 2);
  }
  body:has(.toc-rail[data-ready]) {
    --bias-min-end: 1.5rem;
    --rail-reserve: calc(13rem + 1.5rem + 1.5rem);
    --sheet-start-board: min(
      calc(100vw - var(--sheet-full-width) - var(--bias-min-end)),
      max(calc((100vw - var(--sheet-full-width)) / 2), var(--rail-reserve))
    );
  }
  body:has(.toc-rail[data-ready]) .page {
    margin-inline-start: var(--sheet-start-board);
    margin-inline-end: auto;
  }
  .toc-rail[data-ready] {
    display: block;
    position: fixed;
    z-index: 25;
    top: 6rem;
    --toc-rail-gap: 1.5rem;
    --toc-rail-w: min(13rem, calc(var(--sheet-start-board) - var(--toc-rail-gap) - 1.5rem));
    width: var(--toc-rail-w);
    inset-inline-start: calc(var(--sheet-start-board) - var(--toc-rail-w) - var(--toc-rail-gap));
    max-height: 80vh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0.5rem 0.75rem 0.5rem 0;
    line-height: 1.3;
    overscroll-behavior: contain;
  }
  .toc-rail[data-ready] > * {
    font-family: var(--font-sans);
    font-size: var(--type-sm);
  }
  .toc-rail[data-ready] .toc-rail-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-weight: 700;
    font-size: var(--type-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 0.75rem;
  }
  .toc-rail[data-ready] ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .toc-rail[data-ready] ul ul {
    padding-left: 0.8rem;
    margin: 0.2rem 0 0.2rem 0.3rem;
    border-left: 1px solid var(--rule);
  }
  .toc-rail[data-ready] li {
    margin: 0.3rem 0;
  }
  .toc-rail[data-ready] a {
    display: block;
    position: relative;
    z-index: 1;
    color: var(--ink-muted);
    text-decoration: none;
    padding: 0.05rem 0;
    border-left: 2px solid transparent;
    padding-left: 0.6rem;
    margin-left: -0.6rem;
    transition: color 0.15s ease, border-color 0.15s ease;
  }
  .toc-rail[data-ready] a:hover {
    color: var(--link);
  }
  .toc-rail[data-ready] .is-active > a {
    color: var(--ink);
    border-left-color: var(--accent);
  }
  .toc-rail[data-ready] .toc-rail-marker {
    position: absolute;
    left: -0.6rem;
    right: 0.2rem;
    top: 0;
    height: 0;
    z-index: 0;
    border-radius: 4px;
    background: var(--toc-marker-bg);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), height 0.2s ease, opacity 0.2s ease;
  }
  .toc-rail[data-ready].has-marker .toc-rail-marker {
    opacity: 1;
  }
  .toc-rail[data-ready] .toc-rail-related {
    margin-top: 1.6rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--rule);
  }
  .toc-rail[data-ready] .toc-rail-related .toc-rail-related-head {
    font-weight: 700;
    font-size: var(--type-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 0.75rem;
  }
  .toc-rail[data-ready] .toc-rail-related ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .toc-rail[data-ready] .toc-rail-related ul ul {
    display: none;
  }
  .toc-rail[data-ready] .toc-rail-related li {
    margin: 0 0 0.45rem;
  }
  .toc-rail[data-ready] .toc-rail-related a {
    display: block;
    font-size: var(--type-sm);
    color: var(--ink-muted);
    text-decoration: none;
    line-height: 1.3;
  }
  .toc-rail[data-ready] .toc-rail-related a:hover {
    color: var(--accent);
  }
  .toc-rail[data-ready] .toc-rail-related .related-sub {
    display: none;
  }
  .toc-rail[data-ready] .toc-rail-figures {
    margin-top: 1.6rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--rule);
  }
  .toc-rail[data-ready] .toc-rail-figures .toc-rail-figures-head {
    font-weight: 700;
    font-size: var(--type-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 0.75rem;
  }
  .toc-rail[data-ready] .toc-rail-figures ol {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .toc-rail[data-ready] .toc-rail-figures li {
    margin: 0 0 0.55rem;
  }
  .toc-rail[data-ready] .toc-rail-figures a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: var(--type-sm);
    color: var(--ink-muted);
    text-decoration: none;
    line-height: 1.3;
  }
  .toc-rail[data-ready] .toc-rail-figures a:hover {
    color: var(--accent);
  }
  .toc-rail[data-ready] .toc-rail-figures a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
  }
  .toc-rail[data-ready] .toc-rail-figures .fig-thumb {
    flex: 0 0 auto;
    width: 2.6rem;
    height: 1.9rem;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--rule);
    border-radius: 2px;
    background: var(--paper);
    color: var(--ink);
  }
  .toc-rail[data-ready] .toc-rail-figures .fig-thumb svg,
  .toc-rail[data-ready] .toc-rail-figures .fig-thumb img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
  }
  .toc-rail[data-ready] .toc-rail-figures .fig-thumb-num {
    font-family: var(--font-display);
    font-variant-numeric: lining-nums tabular-nums;
    font-size: var(--type-md);
    color: var(--accent);
    background: var(--paper-dim);
  }
  .toc-rail[data-ready] .toc-rail-figures .fig-label {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .toc-rail[data-ready] .toc-rail-floats .toc-rail-floats-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem;
    margin: 0 0 0.75rem;
  }
  .toc-rail[data-ready] .toc-rail-floats .toc-rail-floats-tabs button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--ink-muted);
    font: inherit;
    font-size: var(--type-sm);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
  }
  .toc-rail[data-ready] .toc-rail-floats .toc-rail-floats-tabs button:hover {
    color: var(--ink);
    background: var(--paper-dim);
  }
  .toc-rail[data-ready] .toc-rail-floats .toc-rail-floats-tabs button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .toc-rail[data-ready] .toc-rail-floats .toc-rail-floats-tabs button[aria-selected=true] {
    color: var(--paper);
    background: var(--accent);
  }
  .toc-rail[data-ready] .toc-rail-floats [role=tabpanel][hidden] {
    display: none;
  }
  .toc-rail[data-ready] .toc-rail-float-list .fig-thumb-num {
    flex: 0 0 auto;
  }
}
.fig-preview {
  position: fixed;
  transform: translateY(-50%) scale(0.96);
  transform-origin: left center;
  --fig-preview-max-h: min(85vh, 54rem);
  width: clamp(28rem, 52vw, 58rem);
  max-width: calc(100vw - 2rem);
  max-height: var(--fig-preview-max-h);
  padding: 0.6rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: 0 6px 24px color-mix(in srgb, #000 18%, transparent);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 90;
}
.fig-preview svg,
.fig-preview img {
  display: block;
  width: 100%;
  max-height: calc(var(--fig-preview-max-h) - 1.2rem);
  height: auto;
  object-fit: contain;
}
.fig-preview.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .fig-preview {
    transition: opacity 0.12s ease;
    transform: translateY(-50%);
  }
  .fig-preview.is-shown {
    transform: translateY(-50%);
  }
}

.site-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
  font-family: var(--font-display);
  padding: max(3.75rem, var(--viewer-pad) + 2.25rem) 1rem 0;
}

.site-emblem-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  margin-bottom: -0.15rem;
}

.site-emblem {
  display: block;
  height: 6rem;
  aspect-ratio: 316/483;
  background-color: var(--ink);
  -webkit-mask: url(/emblem.svg) center/contain no-repeat;
  mask: url(/emblem.svg) center/contain no-repeat;
  transition: background-color 0.2s ease;
}
.site-emblem:hover {
  background-color: var(--accent);
}

.site-motto {
  position: relative;
  width: min(24rem, 90vw);
  height: 1.35em;
  margin: -0.1rem 0 0;
  overflow: hidden;
  color: var(--ink-muted);
  --motto-fonts:
    "Cinzel", "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans Gujarati",
    "Noto Sans Kannada", "Noto Sans Malayalam", "Noto Sans Tamil", "Noto Sans Telugu",
    "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans Ethiopic", "Noto Sans CJK JP",
    "Noto Sans CJK SC", "Mukta", "Tamil Sangam MN", "Malayalam Sangam MN", "Kohinoor Devanagari",
    "Geeza Pro", "Arial Hebrew", "Hiragino Sans", "Yu Gothic", "PingFang SC", "Nirmala UI",
    "Cambria", Georgia, system-ui, sans-serif;
  font-family: "UnifrakturMaguntia", var(--motto-fonts);
  font-size: var(--type-lg);
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  --site-motto-interval: 6s;
}

.site-motto-item[lang=cs],
.site-motto-item[lang=yo] {
  font-family: "Linux Libertine", Cambria, Georgia, serif;
}

.site-motto-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  opacity: 0;
  animation: site-motto-fade 144s ease-in-out infinite;
}
.site-motto-item:nth-child(1) {
  animation-delay: -1.5s;
}
.site-motto-item:nth-child(2) {
  animation-delay: 4.5s;
}
.site-motto-item:nth-child(3) {
  animation-delay: 10.5s;
}
.site-motto-item:nth-child(4) {
  animation-delay: 16.5s;
}
.site-motto-item:nth-child(5) {
  animation-delay: 22.5s;
}
.site-motto-item:nth-child(6) {
  animation-delay: 28.5s;
}
.site-motto-item:nth-child(7) {
  animation-delay: 34.5s;
}
.site-motto-item:nth-child(8) {
  animation-delay: 40.5s;
}
.site-motto-item:nth-child(9) {
  animation-delay: 46.5s;
}
.site-motto-item:nth-child(10) {
  animation-delay: 52.5s;
}
.site-motto-item:nth-child(11) {
  animation-delay: 58.5s;
}
.site-motto-item:nth-child(12) {
  animation-delay: 64.5s;
}
.site-motto-item:nth-child(13) {
  animation-delay: 70.5s;
}
.site-motto-item:nth-child(14) {
  animation-delay: 76.5s;
}
.site-motto-item:nth-child(15) {
  animation-delay: 82.5s;
}
.site-motto-item:nth-child(16) {
  animation-delay: 88.5s;
}
.site-motto-item:nth-child(17) {
  animation-delay: 94.5s;
}
.site-motto-item:nth-child(18) {
  animation-delay: 100.5s;
}
.site-motto-item:nth-child(19) {
  animation-delay: 106.5s;
}
.site-motto-item:nth-child(20) {
  animation-delay: 112.5s;
}
.site-motto-item:nth-child(21) {
  animation-delay: 118.5s;
}
.site-motto-item:nth-child(22) {
  animation-delay: 124.5s;
}
.site-motto-item:nth-child(23) {
  animation-delay: 130.5s;
}
.site-motto-item:nth-child(24) {
  animation-delay: 136.5s;
}

@keyframes site-motto-fade {
  0% {
    opacity: 0;
    transform: translateY(0.12em);
  }
  0.5%, 3.5% {
    opacity: 1;
    transform: translateY(0);
  }
  4.1666666667%, 100% {
    opacity: 0;
    transform: translateY(-0.12em);
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-motto-item {
    animation: none;
  }
  .site-motto-item:first-child {
    opacity: 1;
  }
}
.page-emblem {
  display: block;
  width: min(22rem, 80%);
  margin: 0 auto 2.25rem;
  background-color: var(--ink-muted);
}

figure.emblem-showcase {
  margin: 2rem auto 2.5rem;
  text-align: center;
  color: var(--ink);
}
figure.emblem-showcase > svg {
  display: block;
  width: min(16rem, 60%);
  height: auto;
  margin: 0 auto 1rem;
  cursor: zoom-in;
  transition: color 0.2s ease;
}
figure.emblem-showcase figcaption {
  font-size: var(--type-sm);
  color: var(--ink-muted);
  font-style: italic;
  max-width: 28rem;
  margin: 0 auto;
}

figure.paw-figure {
  margin: 1.5rem auto 2rem;
  text-align: center;
  color: var(--ink);
}
figure.paw-figure > svg {
  display: block;
  width: 4.5rem;
  height: auto;
  margin: 0 auto 0.6rem;
}
figure.paw-figure figcaption {
  font-size: var(--type-sm);
  color: var(--ink-muted);
  font-style: italic;
}

.josfi-emblem {
  aspect-ratio: 1627/568;
  -webkit-mask: url(/josfi-emblem.svg) center/contain no-repeat;
  mask: url(/josfi-emblem.svg) center/contain no-repeat;
}

.site-title {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  line-height: 1.08;
  color: var(--ink);
  text-decoration: none;
}
.site-title:hover {
  color: var(--ink);
}
.site-title .site-title-en {
  font-family: var(--font-name);
  font-weight: 400;
  font-size: var(--type-2xl);
  letter-spacing: 0.06em;
}

.site-nav {
  display: flex;
  gap: 1.5rem;
  font-size: var(--type-md);
}
.site-nav a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
.site-nav a:hover {
  color: var(--link-hover);
}
.site-nav a.xref {
  white-space: nowrap;
}

.toc-top {
  display: inline-flex;
  align-items: center;
  color: var(--ink-muted);
  line-height: 0;
  border-radius: 4px;
  padding: 0.1rem;
  transition: color 0.15s ease, transform 0.15s ease;
}
.toc-top:hover, .toc-top:focus-visible {
  color: var(--link);
  transform: translateY(-1px);
}

.site-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.7rem;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
.site-search-trigger .search-kbd {
  font-family: var(--font-sans);
  font-size: 0.72em;
  color: var(--ink-muted);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0 0.32em;
}
.site-search-trigger:hover, .site-search-trigger:focus-visible {
  color: var(--ink);
  border-color: var(--ink-muted);
}
@media (prefers-reduced-motion: no-preference) {
  .site-search-trigger:active {
    transform: scale(0.97);
  }
}

.search-dialog {
  width: min(40rem, 92vw);
  margin: 10vh auto auto;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: var(--sheet-shadow);
  overflow: hidden;
}
.search-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}

.search-form {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--rule);
}
.search-form .search-form-icon {
  flex: none;
  font-size: 1.1rem;
  color: var(--ink-muted);
}
.search-form .search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--type-lg);
  line-height: 1.4;
}
.search-form .search-input:focus {
  outline: none;
}
.search-form .search-input::placeholder {
  color: var(--ink-muted);
}
.search-form .search-input::-webkit-search-decoration, .search-form .search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.search-results {
  list-style: none;
  margin: 0;
  padding: 0.35rem;
  max-height: 56vh;
  overflow-y: auto;
}
.search-results li {
  margin: 0;
}

.search-result {
  display: block;
  padding: 0.55rem 0.8rem;
  border-radius: 7px;
  text-decoration: none;
  color: var(--ink);
}
.search-result.is-selected {
  background: var(--paper-dim);
}
.search-result .search-result-title {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--type-md);
}
.search-result .search-result-excerpt {
  display: block;
  margin-top: 0.1rem;
  font-size: var(--type-sm);
  line-height: 1.4;
  color: var(--ink-muted);
}
.search-result .search-result-excerpt mark {
  background: var(--toc-marker-bg);
  color: var(--ink);
  border-radius: 2px;
}

.search-empty,
.search-hint {
  margin: 0;
  padding: 0.7rem 1.1rem;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  color: var(--ink-muted);
}

.search-hint {
  border-top: 1px solid var(--rule);
}

.search-empty {
  text-align: center;
}

.search-note {
  margin: 0;
  padding: 0.55rem 1.1rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  color: var(--ink-muted);
}
.search-note em {
  font-style: normal;
  color: var(--ink);
}

.search-ai-btn {
  flex: none;
  padding: 0.25rem 0.7rem;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.search-ai-btn:hover, .search-ai-btn:focus-visible {
  border-color: var(--accent);
}

.site-ai-trigger {
  position: relative;
  overflow: hidden;
}
.site-ai-trigger .site-ai-label {
  position: relative;
  z-index: 1;
  color: var(--accent);
  white-space: nowrap;
}
.site-ai-trigger .site-ai-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  opacity: 0;
  border-radius: inherit;
  transition: width 0.2s ease, opacity 0.15s ease;
}
.site-ai-trigger.is-downloading .site-ai-bar {
  opacity: 1;
}

.search-ai-panel {
  margin: 0;
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.search-ai-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--type-md);
  line-height: var(--leading-body);
  color: var(--ink);
}

.search-ai-foot {
  margin: 0.4rem 0 0;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  color: var(--ink-muted);
}

.search-suggest {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--link);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.search-suggest:hover {
  color: var(--link-hover);
}

@media (max-width: 640px) {
  .search-dialog {
    width: 94vw;
    margin-top: 4vh;
  }
  .search-hint {
    display: none;
  }
}
.site-footer {
  margin: 2rem auto 0;
  padding: 0 var(--viewer-pad);
  max-width: 36rem;
  color: var(--ink-muted);
  font-family: var(--font-display);
  font-size: var(--type-sm);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  text-align: center;
}
.site-footer p {
  margin: 0;
}
.site-footer a {
  color: var(--ink-muted);
  text-decoration-thickness: 1px;
}
.site-footer a:hover {
  color: var(--ink);
}
.site-footer .footer-terms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.15rem 0.55rem;
  text-wrap: balance;
}
.site-footer .footer-terms .sep {
  opacity: 0.4;
}
.site-footer .footer-specimens {
  width: 100%;
  border-top: 1px solid var(--rule);
  padding-top: 1.1rem;
}
.site-footer .footer-specimens .footer-specimens-head {
  margin: 0 0 0.35rem;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.site-footer .footer-specimens .footer-specimens-note {
  margin: 0 auto 0.9rem;
  max-width: 30rem;
  font-style: italic;
  opacity: 0.85;
}
.site-footer .footer-specimens ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 30rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.4rem 1.5rem;
  text-align: start;
}
.site-footer .footer-specimens li {
  margin: 0;
}
.site-footer .footer-specimens li a {
  font-weight: 600;
}
.site-footer .footer-specimens .desc {
  opacity: 0.7;
}
.site-footer .footer-dedication {
  font-style: italic;
  opacity: 0.85;
}

.viewer-toolbar {
  position: fixed;
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
  max-width: calc(100% - 1.5rem);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.viewer-toolbar::-webkit-scrollbar {
  display: none;
}
.viewer-toolbar {
  padding: 0.3rem 0.4rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  box-shadow: var(--sheet-shadow);
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  line-height: 1.2;
}
.viewer-toolbar .toolbar-group {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}
.viewer-toolbar .toolbar-label {
  color: var(--ink-muted);
  margin: 0 0.2rem 0 0.3rem;
  white-space: nowrap;
}
.viewer-toolbar .toolbar-sep {
  width: 1px;
  margin: 0.2rem 0.15rem;
  background: var(--rule);
}
.viewer-toolbar button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  cursor: pointer;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: color 0.12s ease, background 0.12s ease, transform 0.08s ease;
}
.viewer-toolbar button:hover {
  color: var(--ink);
  background: var(--paper-dim);
}
.viewer-toolbar button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .viewer-toolbar button:active {
    transform: scale(0.94);
  }
}
.viewer-toolbar button.is-active {
  color: var(--paper);
  background: var(--ink);
}
.viewer-toolbar .accent-swatch {
  box-sizing: content-box;
  width: 1.15rem;
  height: 1.15rem;
  min-width: 1.15rem;
  padding: calc((24px - 1.15rem) / 2);
  border: 0;
  border-radius: 999px;
  background: var(--swatch, var(--accent)) content-box;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}
@media (prefers-reduced-motion: no-preference) {
  .viewer-toolbar .accent-swatch:hover {
    transform: scale(1.12);
  }
}
.viewer-toolbar .accent-swatch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.viewer-toolbar .accent-swatch.is-active {
  background: var(--swatch, var(--accent)) content-box;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3), inset 0 0 0 3px var(--paper), inset 0 0 0 4.5px var(--ink);
}
.viewer-toolbar .accent-swatch.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.32rem;
  height: 0.6rem;
  border: solid var(--paper);
  border-width: 0 2px 2px 0;
  transform: translateY(-0.04rem) rotate(45deg);
}
.viewer-toolbar .accent-swatch .swatch-name {
  position: absolute;
  bottom: calc(100% + 0.35rem);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.15rem 0.45rem;
  border-radius: 5px;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--type-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.viewer-toolbar .accent-swatch:hover .swatch-name, .viewer-toolbar .accent-swatch:focus-visible .swatch-name {
  opacity: 1;
}
.viewer-toolbar .accent-swatch {
  position: relative;
}
.viewer-toolbar .accent-swatch-default {
  --swatch: var(--accent-default);
}
.viewer-toolbar [data-set-accent=navy] {
  --swatch: var(--swatch-navy);
}
.viewer-toolbar [data-set-accent=amber] {
  --swatch: var(--swatch-amber);
}
.viewer-toolbar [data-set-accent=pink] {
  --swatch: var(--swatch-pink);
}
.viewer-toolbar .accent-swatch-custom {
  box-sizing: content-box;
  position: relative;
  display: inline-block;
  width: 1.15rem;
  height: 1.15rem;
  padding: calc((24px - 1.15rem) / 2);
  border-radius: 999px;
  overflow: hidden;
  background: conic-gradient(from 0deg, #e4574c, #e6b800, #38a169, #3182ce, #805ad5, #e4574c) content-box;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}
.viewer-toolbar .accent-swatch-custom input[type=color] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  cursor: pointer;
}
.viewer-toolbar .accent-swatch-custom:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.viewer-toolbar .accent-swatch-custom.is-active {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3), inset 0 0 0 3px var(--paper), inset 0 0 0 4.5px var(--ink);
}

.viewer-controls {
  display: contents;
}

.viewer-fab {
  display: none;
}

.viewer-sheet-head,
.viewer-sheet-backdrop {
  display: none;
}

html.controls-collapsed .viewer-fab {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  z-index: 21;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  box-shadow: var(--sheet-shadow);
  cursor: pointer;
  transition: transform 0.08s ease, background 0.12s ease;
}
html.controls-collapsed .viewer-fab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
html.controls-collapsed .viewer-fab-search {
  bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 3.5rem);
}
html.controls-collapsed .viewer-fab-settings {
  bottom: max(1rem, env(safe-area-inset-bottom));
}
html.controls-collapsed .viewer-fab-settings .viewer-fab-paw {
  display: block;
}
html.controls-collapsed .viewer-fab:active {
  transform: scale(0.94);
}
html.controls-collapsed .viewer-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 19;
  display: block;
  background: color-mix(in srgb, var(--ink) 32%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
html.controls-collapsed .viewer-sheet-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
html.controls-collapsed .viewer-toolbar {
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(110%);
  width: auto;
  max-width: none;
  flex-direction: column;
  align-items: stretch;
  gap: 0.9rem;
  overflow: visible;
  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
  border-width: 1px 0 0;
  border-radius: 1.1rem 1.1rem 0 0;
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.22s;
  visibility: hidden;
}
html.controls-collapsed .viewer-toolbar.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
}
html.controls-collapsed .viewer-toolbar .viewer-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.2rem;
}
html.controls-collapsed .viewer-toolbar .viewer-sheet-title {
  color: var(--ink);
  font-weight: 600;
  font-size: var(--type-base);
}
html.controls-collapsed .viewer-toolbar .viewer-sheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  flex: 0 0 auto;
}
html.controls-collapsed .viewer-toolbar .toolbar-group {
  flex-wrap: wrap;
  gap: 0.4rem;
}
html.controls-collapsed .viewer-toolbar .toolbar-label {
  flex: 0 0 100%;
  margin: 0 0 0.1rem;
  font-weight: 600;
  color: var(--ink);
}
html.controls-collapsed .viewer-toolbar .toolbar-sep {
  display: none;
}
html.controls-collapsed .viewer-toolbar button {
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--rule);
}
html.controls-collapsed .viewer-toolbar button.is-active {
  border-color: transparent;
}

@media (max-width: 640px) {
  html:not(.controls-measured) .viewer-fab {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    z-index: 21;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 999px;
    box-shadow: var(--sheet-shadow);
    cursor: pointer;
    transition: transform 0.08s ease, background 0.12s ease;
  }
  html:not(.controls-measured) .viewer-fab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  html:not(.controls-measured) .viewer-fab-search {
    bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 3.5rem);
  }
  html:not(.controls-measured) .viewer-fab-settings {
    bottom: max(1rem, env(safe-area-inset-bottom));
  }
  html:not(.controls-measured) .viewer-fab-settings .viewer-fab-paw {
    display: block;
  }
  html:not(.controls-measured) .viewer-fab:active {
    transform: scale(0.94);
  }
  html:not(.controls-measured) .viewer-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 19;
    display: block;
    background: color-mix(in srgb, var(--ink) 32%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
  }
  html:not(.controls-measured) .viewer-sheet-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  html:not(.controls-measured) .viewer-toolbar {
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(110%);
    width: auto;
    max-width: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
    overflow: visible;
    padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 1.1rem 1.1rem 0 0;
    transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.22s;
    visibility: hidden;
  }
  html:not(.controls-measured) .viewer-toolbar.is-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
  }
  html:not(.controls-measured) .viewer-toolbar .viewer-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.2rem;
  }
  html:not(.controls-measured) .viewer-toolbar .viewer-sheet-title {
    color: var(--ink);
    font-weight: 600;
    font-size: var(--type-base);
  }
  html:not(.controls-measured) .viewer-toolbar .viewer-sheet-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    flex: 0 0 auto;
  }
  html:not(.controls-measured) .viewer-toolbar .toolbar-group {
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  html:not(.controls-measured) .viewer-toolbar .toolbar-label {
    flex: 0 0 100%;
    margin: 0 0 0.1rem;
    font-weight: 600;
    color: var(--ink);
  }
  html:not(.controls-measured) .viewer-toolbar .toolbar-sep {
    display: none;
  }
  html:not(.controls-measured) .viewer-toolbar button {
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--rule);
  }
  html:not(.controls-measured) .viewer-toolbar button.is-active {
    border-color: transparent;
  }
}
@media print {
  .viewer-toolbar {
    display: none;
  }
  a.xref:not(.is-resolved)[data-ref^="fig:"]::after {
    content: " " target-counter(attr(href), figure);
  }
  a.xref:not(.is-resolved)[data-ref^="tbl:"]::after,
  a.xref:not(.is-resolved)[data-ref^="table:"]::after {
    content: " " target-counter(attr(href), table);
  }
  a.xref:not(.is-resolved)[data-ref^="algo:"]::after,
  a.xref:not(.is-resolved)[data-ref^="alg:"]::after {
    content: " " target-counter(attr(href), algo);
  }
  table,
  th,
  td,
  thead,
  tbody,
  tr,
  caption,
  .statband,
  .factsheet,
  .admonition,
  blockquote,
  pre,
  code {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  thead {
    display: table-header-group;
  }
  tr {
    break-inside: avoid;
  }
  caption {
    break-after: avoid;
  }
  figure,
  .statband,
  .factsheet,
  .admonition,
  blockquote,
  pre {
    break-inside: avoid;
  }
  h1,
  h2,
  h3,
  h4 {
    break-after: avoid;
  }
}
article {
  max-width: var(--article-width);
  margin: 0 auto;
  counter-reset: figure table algo;
}
article figure:has(figcaption):not(.track) {
  counter-increment: figure;
}
article table:has(caption) {
  counter-increment: table;
}
article {
  position: relative;
  isolation: isolate;
}
article .page-header-watermark {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  transform: translate(-50%, -4.25rem);
  width: min(34rem, (min(var(--sheet-full-width), 100vw - 2 * var(--viewer-pad)) - 2 * var(--page-pad-x-inner)) * 0.69);
  max-width: none;
  aspect-ratio: 2132/471;
  pointer-events: none;
  background-color: var(--ink);
  opacity: 0.06;
  -webkit-mask: url(/page-header-watermark.svg) center/contain no-repeat;
  mask: url(/page-header-watermark.svg) center/contain no-repeat;
}
article > header,
article > *:not(.page-header-watermark) {
  position: relative;
}
@media (prefers-color-scheme: dark) {
  article .page-header-watermark {
    opacity: 0.09;
  }
}
@media (max-width: 35rem) {
  article .page-header-watermark {
    width: min(34rem, (min(var(--sheet-full-width), 100vw - 2 * var(--viewer-pad)) - 2 * var(--page-pad-x-inner)) * 0.9);
    transform: translate(-50%, -0.5rem);
  }
}
@media (min-width: 30rem) and (max-width: 35rem) {
  article .page-header-watermark {
    transform: translate(-50%, -2rem);
  }
}
article:not(:has(.sidenote, .marginnote, .marginnote-arrow, .marginfigure, .sticky)) {
  max-width: var(--measure);
}
article > * {
  max-width: var(--measure);
}
article > section {
  max-width: none;
}
article > section > * {
  max-width: var(--measure);
}
article .article-header {
  margin: 0 0 calc(var(--rhythm) * 2);
}
article .article-header h1 {
  margin-bottom: 0.5rem;
}
article .kicker {
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.5rem;
}
article .subtitle {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-lg);
  line-height: 1.3;
  color: var(--ink-muted);
  margin: 0.5rem 0 1rem;
  text-wrap: balance;
}
article .meta {
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  color: var(--ink-muted);
  margin: 0 0 0.5rem;
  text-indent: 0;
}
article .meta .sep {
  margin: 0 0.3em;
  opacity: 0.6;
}
article .byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 0.5rem;
  row-gap: 0.3rem;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  color: var(--ink-muted);
  margin: 0 0 0.6rem;
  text-indent: 0;
}
article .byline .byline-author {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
article .byline .byline-avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--rule);
}
article .byline a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
article .byline a:hover {
  color: var(--link);
}
article .byline .sep {
  opacity: 0.6;
}
article .status {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.15em 0.7em;
  border-radius: 999px;
  margin: 0 0 0.5rem;
  background: var(--paper-dim);
  color: var(--ink-muted);
}
article .status.status-seedling {
  background: var(--status-seedling-bg);
  color: var(--status-seedling-fg);
}
article .status.status-budding {
  background: var(--status-budding-bg);
  color: var(--status-budding-fg);
}
article .status.status-evergreen {
  background: var(--status-evergreen-bg);
  color: var(--status-evergreen-fg);
}
article .lang-switch {
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  color: var(--ink-muted);
  margin: 0.4rem 0 0;
  text-indent: 0;
}
article .lang-switch a {
  color: var(--ink-muted);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
article .lang-switch a:hover {
  color: var(--link);
}
article .lang-switch::before {
  content: "⟶  ";
  color: var(--accent);
  font-weight: 700;
}
article .tags {
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  color: var(--link);
  margin: 0;
  letter-spacing: 0.02em;
  text-indent: 0;
}
article .backlinks {
  margin: 4rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-sans);
}
article .backlinks .backlinks-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--type-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.75rem;
}
article .backlinks ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
article .backlinks li {
  margin: 0.35rem 0;
}
article .backlinks a {
  font-family: var(--font-display);
  font-size: var(--type-md);
  color: var(--ink-muted);
  text-decoration: none;
}
article .backlinks a:hover {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
article .backlinks-disclosure .backlinks-summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0;
}
article .backlinks-disclosure .backlinks-summary::-webkit-details-marker {
  display: none;
}
article .backlinks-disclosure .backlinks-summary .backlinks-title {
  margin: 0;
}
article .backlinks-disclosure .backlinks-summary::after {
  content: "▸";
  font-size: 0.85em;
  color: var(--accent);
  transition: transform 0.15s ease;
}
article .backlinks-disclosure[open] .backlinks-summary::after {
  transform: rotate(90deg);
}
article .backlinks-disclosure .backlinks-count {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--accent);
}
article .backlinks-disclosure ul {
  margin-top: 0.75rem;
}
article .cite {
  max-width: var(--measure-rem);
  font-family: var(--font-sans);
}
article .cite-preamble {
  margin: 1.25rem 0 0;
}
article .cite-preamble .cite-summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: var(--type-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
article .cite-preamble .cite-summary::-webkit-details-marker {
  display: none;
}
article .cite-preamble .cite-summary::after {
  content: "▸";
  font-size: 0.85em;
  color: var(--accent);
  transition: transform 0.15s ease;
}
article .cite-preamble .cite-summary:hover {
  color: var(--ink);
}
article .cite-preamble[open] .cite-summary::after {
  transform: rotate(90deg);
}
article .cite-preamble .cite-formats {
  margin-top: 0.9rem;
}
article .cite-end {
  margin: 3rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
article .cite-end .cite-end-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--type-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
}
article .cite-formats {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
article .cite-format-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}
article .cite-format-label {
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
article .cite-copy {
  font-family: var(--font-sans);
  font-size: var(--type-xs);
  letter-spacing: 0.04em;
  color: var(--accent);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 0.3rem;
  padding: 0.15rem 0.5rem;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
article .cite-copy:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
article .cite-copy.is-copied {
  color: var(--ink);
  border-color: var(--accent);
}
article .cite-text {
  margin: 0;
  padding: 0.7rem 0.9rem;
  background: var(--paper-dim);
  border: 1px solid var(--rule);
  border-radius: 0.3rem;
  overflow-x: auto;
}
article .cite-text code {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
article .cite-format:nth-child(2) .cite-text code,
article .cite-format:nth-child(4) .cite-text code {
  white-space: pre;
}
article #references > h1 {
  margin: 3rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--type-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
article .reference-list {
  margin: 0;
  font-size: var(--type-md);
  line-height: var(--leading-body);
}
article .reference-list > li {
  margin: 0 0 0.6rem;
  counter-increment: none;
}
article .reference-list > li::before {
  content: attr(value) ".";
  font-family: var(--font-sans);
}
article .reference-list a {
  word-break: break-word;
}
article .ref-note {
  color: var(--ink-muted);
}
article .cite-ref {
  color: var(--accent);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
article .cite-ref:hover {
  text-decoration: underline;
}
article .reference-list li:target {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: 0.25rem;
}
article .webmentions {
  margin: 3rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-sans);
}
article .webmentions[hidden] {
  display: none;
}
article .webmentions .webmentions-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--type-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.75rem;
}
article .webmentions .webmentions-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
article .webmentions .wm-item {
  margin: 0.4rem 0;
  font-size: var(--type-sm);
  color: var(--ink-muted);
  line-height: 1.5;
}
article .webmentions .wm-text {
  color: var(--ink);
}
article .webmentions a {
  color: var(--ink-muted);
  text-decoration: none;
}
article .webmentions a:hover {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
article .webmentions .wm-src {
  font-size: 0.85em;
}
article .article-toc {
  background: var(--paper-dim);
  padding: 1.25rem 1.5rem;
  margin: 0 0 calc(var(--rhythm) * 2);
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
}
article .article-toc .toc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}
article .article-toc .toc-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--type-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
article .article-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
article .article-toc ul ul {
  padding-left: 1rem;
  margin-top: 0.25rem;
  border-left: 1px solid var(--rule);
  margin-left: 0.4rem;
}
article .article-toc li {
  margin: 0.25rem 0;
}
article .article-toc a {
  color: var(--ink-muted);
  text-decoration: none;
}
article .article-toc a:hover {
  color: var(--link);
  text-decoration: underline;
}
article p {
  margin: 0 0 var(--rhythm);
  text-align: start;
  text-wrap: pretty;
}
article > p:first-of-type::first-letter {
  font-family: var(--font-dropcap);
  font-weight: var(--dropcap-weight);
  font-size: var(--dropcap-size);
  line-height: var(--dropcap-line-height);
  float: left;
  margin: var(--dropcap-margin);
  padding: 0;
  color: var(--accent);
}
article > p:first-of-type::first-line {
  font-variant-caps: small-caps;
  letter-spacing: 0.04em;
}
article.no-dropcap > p:first-of-type::first-letter, article.no-dropcap > p:first-of-type::first-line {
  all: unset;
}
article > p.tailpiece:first-of-type::first-letter,
article > p.tailpiece:first-of-type::first-line {
  all: unset;
}
article > pre,
article > div.sourceCode,
article > figure,
article > blockquote,
article > table,
article > .keystone,
article > .eli5,
article > .objectives,
article > .twocol,
article > .admonition,
article > .note,
article > details {
  clear: left;
}
article p + p {
  text-indent: var(--first-indent);
}
article h1 + p,
article h2 + p,
article h3 + p,
article h4 + p,
article blockquote + p,
article ul + p,
article ol + p,
article pre + p,
article figure + p {
  text-indent: 0;
}
article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
  font-family: var(--font-display);
  font-weight: var(--h3-weight, 600);
  font-style: var(--heading-style, normal);
  line-height: var(--leading-tight);
  margin: 2.25rem 0 1rem;
  text-wrap: balance;
  color: var(--heading-color, var(--ink));
  max-width: var(--measure-rem);
}
article h1 {
  font-family: var(--font-title);
  font-size: var(--type-3xl);
  font-weight: var(--h1-weight, 700);
  color: var(--accent);
  margin-top: 0;
  letter-spacing: -0.015em;
}
article h2 {
  font-size: var(--type-2xl);
  font-weight: var(--h2-weight, 600);
}
article h3 {
  font-size: var(--type-xl);
  font-weight: var(--h3-weight, 600);
}
article h4 {
  font-size: var(--type-lg);
}
article.infographic h2,
article.infographic h3 {
  font-family: var(--font-name);
  font-weight: normal;
  text-align: center;
  margin-inline: auto;
  letter-spacing: 0.05em;
  color: var(--ink);
}
article.infographic h3 {
  letter-spacing: 0.04em;
}
article.infographic > section {
  max-width: var(--measure);
}
article.cheatsheet {
  max-width: min(74rem, 100% - 1.5rem);
  columns: 17rem;
  column-gap: 1.1rem;
}
article.cheatsheet > .article-header,
article.cheatsheet > .ct_lead,
article.cheatsheet > .tailpiece,
article.cheatsheet > .backlinks,
article.cheatsheet > details {
  column-span: all;
}
article.cheatsheet > .article-toc {
  display: none;
}
article.cheatsheet .ct_lead {
  max-width: var(--measure-rem);
  margin: 0.5rem auto 1.75rem;
  text-align: center;
  font-size: 0.92rem;
  line-height: var(--leading-tight, 1.4);
  opacity: 0.82;
}
article.cheatsheet > section.level1 {
  break-inside: avoid;
  margin: 0 0 1.1rem;
  padding: 0.85rem 1rem 0.95rem;
  border: 1px solid var(--rule);
  border-radius: 7px;
  background: color-mix(in srgb, var(--paper) 60%, transparent);
}
article.cheatsheet > section.level1 > h1 {
  margin: 0 0 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-name);
  font-size: 1.02rem;
  font-weight: normal;
  letter-spacing: 0.03em;
  color: var(--ink);
}
article.cheatsheet > section.level1 p {
  margin: 0.4rem 0;
  font-size: 0.92rem;
  line-height: var(--leading-tight, 1.42);
}
article.cheatsheet > section.level1 ul {
  margin: 0.4rem 0;
  padding-left: 1.05rem;
}
article.cheatsheet > section.level1 li {
  margin: 0.3rem 0;
  font-size: 0.92rem;
  line-height: var(--leading-tight, 1.42);
}
article.cheatsheet > section.level1 li::marker {
  color: var(--accent);
}
article.cheatsheet > section.level1:has(.ct-tree) {
  column-span: all;
  background: none;
  border: none;
  padding: 0;
}
article.cheatsheet > section.level1:has(.ct-tree) > h1 {
  font-size: 1.18rem;
  text-align: center;
  border-bottom: none;
}
article.cheatsheet .ct-tree {
  max-width: 46rem;
  margin: 0.5rem auto 0;
  font-size: 0.95rem;
}
article.cheatsheet .ct-tree ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
article.cheatsheet .ct-tree .ct-children {
  margin: 0.35rem 0 0 0.4rem;
  padding-left: 1.05rem;
  border-left: 2px solid var(--rule);
}
article.cheatsheet .ct-tree li {
  margin: 0.55rem 0;
}
article.cheatsheet .ct-tree .ct-test {
  margin: 0;
  font-weight: 600;
  line-height: 1.4;
}
article.cheatsheet .ct-tree .ct-test b {
  color: var(--accent);
  font-weight: 700;
}
article.cheatsheet .ct-tree .ct-hint {
  margin: 0.1rem 0 0;
  font-size: 0.82em;
  font-style: italic;
  opacity: 0.7;
}
article.cheatsheet .ct-tree .ct-label {
  display: inline-block;
  min-width: 2.2rem;
  margin-right: 0.4rem;
  font-family: var(--font-name);
  font-size: 0.74em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  vertical-align: 0.08em;
}
article.cheatsheet .ct-tree .ct-label::after {
  content: " →";
  opacity: 0.55;
}
article.cheatsheet .ct-tree .ct-label-yes {
  color: var(--accent);
}
article.cheatsheet .ct-tree .ct-label-no {
  color: var(--ink);
  opacity: 0.55;
}
article.cheatsheet .ct-tree .ct-q .ct-test {
  display: inline;
}
article.cheatsheet .ct-tree .ct-leaf {
  display: inline-block;
  padding: 0.12rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: color-mix(in srgb, var(--ink) 5%, var(--paper));
}
article.cheatsheet .ct-tree .ct-leaf code {
  font-size: 0.92em;
  background: none;
  padding: 0;
}
article.cheatsheet .ct-tree .ct-leaf.ct-accent {
  border-color: var(--accent);
  border-width: 2px;
  padding: 0.12rem 0.55rem;
  background: color-mix(in srgb, var(--accent) 13%, var(--paper));
  font-weight: 700;
}
article.cheatsheet .ct-tree .ct-why {
  display: block;
  margin: 0.2rem 0 0 2.6rem;
  font-size: 0.82em;
  opacity: 0.75;
}
@media print {
  article.cheatsheet {
    columns: 2;
    column-gap: 1.2rem;
    max-width: none;
  }
  article.cheatsheet > section.level1 {
    border-color: #999;
  }
  article.cheatsheet .ct-leaf.ct-accent {
    background: none;
    border-color: #000;
  }
}
article a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
article a:hover {
  color: var(--link-hover);
}
article code,
article kbd,
article samp {
  font-family: var(--font-mono);
  font-feature-settings: "calt";
  font-size: 0.92em;
}
article :not(pre) > code {
  background: var(--code-bg);
  padding: 0.1em 0.3em;
  border-radius: 3px;
}
article pre {
  background: var(--code-bg);
  padding: 1rem 1.25rem;
  border-radius: 4px;
  overflow-x: auto;
  line-height: 1.5;
  margin: 0 0 var(--rhythm);
}
article blockquote {
  margin: var(--rhythm) 0;
  padding: 0 0 0 1.5rem;
  color: var(--ink-muted);
  max-width: var(--measure-rem);
  font-family: var(--font-title);
  font-size: var(--type-lg);
  line-height: 1.4;
  font-feature-settings: "liga", "kern";
}
article blockquote p {
  text-indent: 0;
}
article blockquote p + p {
  text-indent: var(--first-indent);
}
article .note,
article .warning,
article .important {
  margin: var(--rhythm) 0;
  max-width: var(--measure-rem);
  padding: 0.85rem 1.25rem 0.85rem 1.1rem;
  border-left: 3px solid;
  border-radius: 0 3px 3px 0;
  font-family: var(--font-body);
  font-size: var(--type-md);
  line-height: var(--leading-body);
}
article .note > .title,
article .warning > .title,
article .important > .title {
  display: none;
}
article .note::before,
article .warning::before,
article .important::before {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}
article .note p,
article .warning p,
article .important p {
  text-indent: 0;
  margin: 0 0 0.5rem;
}
article .note p:last-child,
article .warning p:last-child,
article .important p:last-child {
  margin-bottom: 0;
}
article .note p + p,
article .warning p + p,
article .important p + p {
  text-indent: var(--first-indent);
}
article .note {
  background: var(--admon-note-bg);
  border-left-color: var(--admon-note-fg);
}
article .note::before {
  content: "Note";
  color: var(--admon-note-fg);
}
article .warning {
  background: var(--admon-warning-bg);
  border-left-color: var(--admon-warning-fg);
}
article .warning::before {
  content: "Warning";
  color: var(--admon-warning-fg);
}
article .important {
  background: var(--admon-important-bg);
  border-left-color: var(--admon-important-fg);
}
article .important::before {
  content: "Important";
  color: var(--admon-important-fg);
}
article .eli5 {
  margin: calc(var(--rhythm) * 1.25) 0;
  max-width: var(--measure-rem);
  padding: 1rem 1.25rem;
  background: color-mix(in srgb, var(--accent) 7%, var(--paper));
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: var(--type-md);
  line-height: var(--leading-body);
  text-indent: 0;
}
article .eli5::before {
  content: "The intuition";
  display: block;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
article .eli5 p {
  text-indent: 0;
  margin: 0 0 0.6rem;
}
article .eli5 p:last-child {
  margin-bottom: 0;
}
article .vignette {
  margin: calc(var(--rhythm) * 1.25) 0;
  max-width: var(--measure-rem);
  padding: 1rem 1.25rem 0.9rem;
  background: var(--paper-dim);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  font-family: var(--font-body);
  font-size: var(--type-md);
  line-height: var(--leading-body);
  text-indent: 0;
}
article .vignette::before {
  content: attr(data-title);
  display: block;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.55rem;
}
article .vignette:not([data-title])::before {
  content: "Vignette";
}
article .vignette p {
  text-indent: 0;
  margin: 0 0 0.6rem;
}
article .vignette p:last-child {
  margin-bottom: 0;
}
article .twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
  margin: calc(var(--rhythm) * 1.25) 0;
  max-width: var(--measure-rem);
}
article .twocol .col {
  min-width: 0;
}
article .twocol .col > :first-child {
  margin-top: 0;
}
article .twocol .col > p {
  text-indent: 0;
}
article .twocol .col pre {
  font-size: var(--type-sm);
  padding: 0.75rem 1rem;
}
article .twocol .col + .col {
  border-left: 1px solid var(--rule);
  padding-left: 2rem;
}
@media (max-width: 38rem) {
  article .twocol {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  article .twocol .col + .col {
    border-left: 0;
    padding-left: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
  }
}
article.paper {
  counter-reset: paper-section paper-def paper-thm;
}
article.paper > section.level1 {
  counter-increment: paper-section;
  counter-reset: paper-subsection;
}
article.paper > section.level1 > h1::before {
  content: counter(paper-section) ".  ";
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
}
article.paper > section.level1 section.level2 {
  counter-increment: paper-subsection;
}
article.paper > section.level1 section.level2 > h2::before {
  content: counter(paper-section) "." counter(paper-subsection) "  ";
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
  font-weight: 600;
}
article.talk {
  counter-reset: talk-slide;
}
article.talk > section.level1 {
  margin-top: calc(var(--rhythm) * 2);
  padding-top: calc(var(--rhythm) * 1.25);
  border-top: 1px solid color-mix(in oklab, var(--ink) 14%, transparent);
}
article.talk > section.level1:first-of-type {
  border-top: 0;
  margin-top: var(--rhythm);
  padding-top: 0;
}
article.talk > section.level1 > h1 {
  margin-bottom: 0.5rem;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
article.talk > section.level1 > .slidetext {
  counter-increment: talk-slide;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16/9;
  min-height: 0;
  margin: 0 0 var(--rhythm);
  padding: clamp(1.25rem, 4vw, 2.5rem) clamp(1.5rem, 6vw, 3.5rem);
  background: var(--paper-dim);
  border: 1px solid color-mix(in oklab, var(--ink) 22%, transparent);
  border-radius: 4px;
}
article.talk > section.level1 > .slidetext p {
  margin: 0;
  text-indent: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(var(--type-xl), 4.5vw, var(--type-3xl));
  line-height: 1.25;
  text-wrap: balance;
  color: var(--ink);
}
article.talk > section.level1 > .slidetext::after {
  content: counter(talk-slide);
  position: absolute;
  right: 0.9rem;
  bottom: 0.55rem;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink-muted);
}
@media print {
  article.talk > section.level1 {
    break-before: page;
    border-top: 0;
  }
  article.talk > section.level1:first-of-type {
    break-before: auto;
  }
}
article .talk-present {
  display: inline-block;
  margin: 0 0 var(--rhythm);
  padding: 0.3rem 0.9rem;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  background: none;
  border: 1px solid color-mix(in oklab, var(--ink) 25%, transparent);
  border-radius: 3px;
  cursor: pointer;
}
article .talk-present:hover {
  color: var(--accent);
  border-color: var(--accent);
}
article .talk-present[aria-pressed=true] {
  color: var(--paper);
  background: var(--accent);
  border-color: var(--accent);
}
@media print {
  article .talk-present {
    display: none;
  }
}
article .talk-watch {
  margin: 0 0 var(--rhythm);
}
article .talk-watch .talk-watch-media {
  display: block;
  width: 100%;
}
article .talkcues {
  display: none;
}
article.letter > p {
  margin-block: 0;
  text-indent: 1.6em;
}
article.letter > p:first-of-type {
  text-indent: 0;
}
article.letter .dateline {
  color: var(--ink-muted);
  font-variant-numeric: lining-nums;
}
article.letter .dateline p {
  text-align: right;
  text-indent: 0;
  margin-block: 0;
}
article.letter .addressee {
  margin-block: var(--rhythm);
  line-height: 1.45;
}
article.letter .addressee p {
  text-indent: 0;
  margin-block: 0;
}
article.letter .salutation {
  margin-block: var(--rhythm) calc(var(--rhythm) * 0.6);
}
article.letter .salutation p {
  text-indent: 0;
  margin-block: 0;
}
article.letter .valediction {
  margin-block: calc(var(--rhythm) * 1.4) 0;
}
article.letter .valediction p {
  text-indent: 0;
  margin-block: 0;
}
article.letter .signature {
  margin-block: 0.4rem var(--rhythm);
}
article.letter .signature p {
  text-indent: 0;
  margin-block: 0;
  font-family: var(--font-display);
  font-size: var(--type-xl);
  line-height: 1.2;
}
article.letter .signature p + p {
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  color: var(--ink-muted);
  margin-top: 0.2rem;
}
article.letter .postscript {
  margin-top: calc(var(--rhythm) * 1.2);
  padding-top: calc(var(--rhythm) * 0.5);
  border-top: 1px solid color-mix(in oklab, var(--ink) 14%, transparent);
  font-size: var(--type-md);
  color: var(--ink-muted);
}
article.letter .postscript p {
  text-indent: 0;
}
article .authors {
  margin: 0.4rem 0 0.2rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--type-lg);
  color: var(--ink);
}
article .authors p {
  text-indent: 0;
  margin: 0.15rem 0;
}
article .affiliation {
  margin: 0 0 var(--rhythm);
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  color: var(--ink-muted);
  line-height: 1.4;
}
article .affiliation p {
  text-indent: 0;
  margin: 0.1rem 0;
}
article .affiliation a {
  color: inherit;
}
article .paperabstract {
  margin: var(--rhythm) auto calc(var(--rhythm) * 1.4) 3ch;
  max-width: 62ch;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  line-height: 1.55;
  color: var(--ink);
}
article .paperabstract::before {
  content: "Abstract";
  display: block;
  font-family: var(--font-sans);
  font-size: var(--type-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
  margin-bottom: 0.5rem;
}
article .paperabstract p {
  text-indent: 0;
  margin: 0 0 0.5rem;
  font-size: var(--type-sm);
}
article .paperabstract p:last-child {
  margin-bottom: 0;
}
article .definition,
article .theorem,
article .lemma {
  margin: var(--rhythm) 0;
  max-width: var(--measure-rem);
  padding: 0.6rem 0 0.6rem 1.1rem;
  border-left: 3px solid var(--rule);
  text-indent: 0;
}
article .definition p,
article .theorem p,
article .lemma p {
  text-indent: 0;
  margin: 0 0 0.4rem;
}
article .definition p:last-child,
article .theorem p:last-child,
article .lemma p:last-child {
  margin-bottom: 0;
}
article .definition::before,
article .theorem::before,
article .lemma::before {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--type-sm);
  color: var(--accent);
  margin-right: 0.5em;
}
article .theorem,
article .lemma {
  font-style: italic;
}
article .theorem em,
article .lemma em {
  font-style: normal;
}
article .definition::before {
  content: "Definition " counter(paper-def) ". ";
}
article .theorem::before {
  content: "Theorem " counter(paper-thm) ". ";
}
article .lemma::before {
  content: "Lemma " counter(paper-thm) ". ";
}
article .definition {
  counter-increment: paper-def;
}
article .theorem,
article .lemma {
  counter-increment: paper-thm;
}
article .algorithm {
  margin: var(--rhythm) 0;
  max-width: var(--measure-rem);
  border: 1px solid var(--rule);
  border-radius: 3px;
  counter-increment: algo;
  overflow: hidden;
}
article .algorithm > p:first-child {
  margin: 0;
  padding: 0.5rem 0.9rem;
  background: color-mix(in srgb, var(--accent) 6%, var(--paper));
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  text-indent: 0;
}
article .algorithm > p:first-child::before {
  content: "Algorithm " counter(algo) ". ";
  font-weight: 700;
  color: var(--accent);
}
article .algorithm pre,
article .algorithm div.sourceCode {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
article .algorithm pre {
  padding: 0.7rem 0.9rem;
  overflow-x: auto;
}
article .keystone {
  position: relative;
  margin: calc(var(--rhythm) * 1.7) 0;
  max-width: var(--measure-rem);
  padding: 0.1rem 0 0.1rem 1.4rem;
  border-left: 3px solid var(--accent);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-xl);
  line-height: 1.3;
  color: var(--ink);
  text-indent: 0;
  text-wrap: balance;
}
article .keystone::before {
  content: "“";
  position: absolute;
  left: -0.05em;
  top: -0.55em;
  font-family: var(--font-title);
  font-style: normal;
  font-size: 2.6em;
  line-height: 1;
  color: var(--accent);
  opacity: 0.5;
  pointer-events: none;
}
article .keystone p {
  text-indent: 0;
  margin: 0;
}
article .keystone em {
  font-style: normal;
}
article .objectives {
  margin: calc(var(--rhythm) * 1.25) 0 calc(var(--rhythm) * 1.5);
  max-width: var(--measure-rem);
  padding: 0.9rem 0 0.9rem 1.1rem;
  border-left: 3px solid var(--accent);
  font-family: var(--font-body);
  font-size: var(--type-md);
  line-height: var(--leading-body);
}
article .objectives::before {
  content: "What you'll learn";
  display: block;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.45rem;
}
article .objectives p {
  text-indent: 0;
  margin: 0;
}
article .pullquote {
  margin: calc(var(--rhythm) * 2) 0;
  text-align: center;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.15;
  color: var(--accent);
  letter-spacing: 0;
  text-wrap: balance;
}
article .pullquote::before {
  content: open-quote;
  font-family: var(--font-title);
  font-size: 1.4em;
  color: var(--accent);
  line-height: 0;
  vertical-align: -0.15em;
  margin-right: 0.05em;
}
article .pullquote::after {
  content: close-quote;
  font-family: var(--font-title);
  font-size: 1.4em;
  color: var(--accent);
  line-height: 0;
  vertical-align: -0.15em;
  margin-left: 0.05em;
}
article .pullquote p {
  text-indent: 0;
  margin: 0;
}
article .pullquote p:last-child:not(:only-child) {
  margin-top: 1.25rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--type-sm);
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  line-height: 1.4;
}
article {
  --vitruvian-ink: var(--ink);
  --vitruvian-watermark: 0.12;
}
article .hero {
  display: grid;
  grid-template-areas: "stack";
  place-items: center;
  margin: clamp(1.5rem, 5vw, 4rem) 0 calc(var(--rhythm) * 2.5);
  text-align: center;
}
article .hero > * {
  grid-area: stack;
}
article .hero .viz {
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: auto;
}
article .hero .viz-static svg,
article .hero .vitruvian {
  width: min(34rem, 88vw);
  max-width: none;
  height: auto;
  opacity: var(--vitruvian-watermark);
}
article .hero .vitruvian path {
  fill: var(--vitruvian-ink);
}
article .hero .hero-text {
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}
article .hero .pullquote {
  margin: 0 auto;
  padding: 0 0.5rem;
  max-width: 16ch;
  font-size: clamp(2.25rem, 6.5vw, 4.25rem);
  text-shadow: 0 0 0.6em var(--paper), 0 0 0.35em var(--paper), 0 0 0.15em var(--paper);
}
article .hero .hero-attribution {
  margin: 1.5rem 0 0;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  text-shadow: 0 0 0.5em var(--paper), 0 0 0.25em var(--paper);
}
article .hero .hero-attribution .hero-attribution-it {
  font-style: italic;
}
article ul,
article ol {
  padding-left: 0;
  margin: 0 0 var(--rhythm);
  list-style: none;
}
article li {
  position: relative;
  margin-bottom: 0.35rem;
}
article li::before {
  position: absolute;
  right: calc(100% + 0.5em);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
article ul > li::before {
  content: "•";
}
article ol {
  counter-reset: list-counter;
}
article ol > li {
  counter-increment: list-counter;
}
article ol > li::before {
  content: counter(list-counter) ".";
}
article .article-toc li::before,
article .backlinks li::before {
  content: none;
}
article li > ul,
article li > ol {
  margin: 0.35rem 0 0 1.4em;
}
article li > p {
  text-indent: 0;
  margin: 0;
}
article table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-display);
  font-size: var(--type-sm);
  margin: 0 0 var(--rhythm);
}
article caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--type-sm);
  color: var(--ink-muted);
  margin-bottom: 0.5rem;
}
article caption::before {
  content: "Table " counter(table) ". ";
  font-variant-numeric: lining-nums;
  font-weight: 600;
  color: var(--ink);
}
article th,
article td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
  hyphens: manual;
}
article th {
  font-weight: 700;
}
@media (max-width: 38rem) {
  article th,
  article td {
    padding: 0.4rem 0.45rem;
  }
}
article hr {
  border: 0;
  text-align: center;
  margin: 2.5rem 0;
}
article hr::after {
  content: var(--dinkus);
  color: var(--ink-muted);
  letter-spacing: 0.5em;
  font-size: var(--type-md);
}
article .tailpiece {
  text-align: center;
  margin: calc(var(--rhythm) * 2.5) 0 0;
  line-height: 1;
}
article .tailpiece::after {
  content: var(--tailpiece);
  color: var(--accent);
  font-size: var(--type-lg);
}
article .tailpiece + .backlinks {
  margin-top: 2rem;
}
article .listing > p {
  font-family: var(--font-display);
  font-size: var(--type-sm);
  color: var(--ink-muted);
  margin-top: 0.5rem;
}
article figure {
  margin: var(--rhythm) 0;
  text-align: center;
}
article figure figcaption {
  font-family: var(--font-display);
  font-size: var(--type-sm);
  color: var(--ink-muted);
  margin-top: 0.5rem;
}
article figure figcaption::before {
  content: "Figure " counter(figure) ". ";
  font-variant-numeric: lining-nums;
  font-weight: 600;
  color: var(--ink);
}
article figure .fig-lead {
  font-weight: 600;
  color: var(--ink);
}
article figure.diagram {
  color: var(--ink);
}
article figure.diagram svg {
  max-width: 100%;
  height: auto;
}
article figure.track .track-media {
  width: 100%;
  max-width: 22rem;
  accent-color: var(--accent);
}
article figure.track .track-lines {
  list-style: none;
  max-width: 34rem;
  max-height: 17rem;
  margin: calc(var(--rhythm) * 0.75) auto 0;
  padding: 0.5rem 0.75rem;
  overflow-y: auto;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
article figure.track .track-line {
  margin: 0;
  padding: 0.4rem 0.5rem;
  color: var(--ink-muted);
  transition: color 300ms ease, opacity 300ms ease;
}
article figure.track .track-line::before {
  content: none;
}
article figure.track .track-text {
  display: block;
}
article figure.track .track-gloss {
  display: block;
  font-family: var(--font-display);
  font-size: var(--type-sm);
  font-style: italic;
  opacity: 0.75;
}
article figure.track .track-line.track-active {
  color: var(--ink);
}
article figure.track .track-line.track-active .track-text {
  color: var(--accent);
}
article figure.track.track-live .track-line {
  cursor: pointer;
}
article figure.track.track-live .track-line:hover {
  color: var(--ink);
}
article figure.track figcaption::before {
  content: none;
}
article figure.book .book-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 1rem;
  margin: 0;
  padding: 0 0 0.5rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
article figure.book .book-strip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
article figure.book .book-page {
  display: flex;
  justify-content: center;
  margin: 0;
  scroll-snap-align: center;
}
article figure.book .book-page::before {
  content: none;
}
article figure.book .book-page img {
  max-width: 100%;
  max-height: 34rem;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 1px solid var(--rule);
  background: #fff;
}
article figure.book .book-label {
  min-height: 1.5em;
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--type-sm);
  color: var(--ink-muted);
  text-align: center;
}
article figure.book .book-controls {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
  margin-top: 0.25rem;
  font-family: var(--font-display);
  font-size: var(--type-sm);
  color: var(--ink-muted);
}
article figure.book .book-controls button {
  font-family: var(--font-body);
  font-size: var(--type-sm);
  padding: 0.15rem 0.7rem;
  border: 1px solid var(--ink-muted);
  border-radius: 4px;
  background: var(--paper-dim);
  color: var(--ink);
  cursor: pointer;
}
article figure.book .book-controls button:hover {
  border-color: var(--accent);
  color: var(--accent);
}
article figure.book .book-counter {
  font-variant-numeric: tabular-nums;
}
article math {
  font-size: 1.05em;
}
article math[display=block] {
  width: fit-content;
  max-width: 100%;
  margin: var(--rhythm) auto;
  text-align: center;
}
article math .accent,
article math [mathvariant=accent] {
  color: var(--accent);
}
article .sidenote,
article .marginnote {
  float: right;
  clear: right;
  width: var(--gutter);
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 1rem;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  line-height: 1.4;
  color: var(--ink-muted);
  text-indent: 0;
  position: relative;
  z-index: 1;
}
article .sidenote p,
article .marginnote p {
  text-indent: 0;
  margin: 0 0 0.5rem;
}
article .sidenote p:last-child,
article .marginnote p:last-child {
  margin-bottom: 0;
}
article .sidenote-number {
  font-weight: 700;
  color: var(--accent);
  margin-right: 0.25em;
}
article .sidenote-ref {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.75em;
  vertical-align: super;
  line-height: 0;
  margin: 0 0.05em;
  cursor: default;
}
article .marginfigure {
  float: right;
  clear: right;
  width: var(--gutter);
  margin-right: 0;
  margin-top: 0.25rem;
  margin-bottom: 1rem;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  color: var(--ink-muted);
  text-align: left;
  position: relative;
  z-index: 1;
}
article .marginfigure figure,
article .marginfigure figure.diagram {
  margin: 0;
  color: var(--ink);
}
article .marginfigure figcaption {
  margin-top: 0.4rem;
  line-height: 1.3;
}
article .marginfigure p {
  text-indent: 0;
  margin: 0.4rem 0 0;
}
article .marginnote-arrow {
  float: right;
  clear: right;
  width: var(--gutter);
  margin-right: 0;
  margin-top: 0.1rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  line-height: 1.4;
  color: var(--ink-muted);
  text-indent: 0;
  position: relative;
  z-index: 1;
}
article .marginnote-arrow p {
  text-indent: 0;
  margin: 0 0 0.5rem;
}
article .marginnote-arrow p:last-child {
  margin-bottom: 0;
}
article .marginnote-arrow {
  --note-lead-len: calc(var(--gutter-gap) + 1.5rem);
  --note-lead-angle: -18deg;
}
article .marginnote-arrow::before {
  content: "";
  position: absolute;
  top: 0.7em;
  right: 100%;
  width: var(--note-lead-len);
  height: 0;
  border-top: 1px solid var(--accent);
  transform: rotate(var(--note-lead-angle));
  transform-origin: right center;
}
article .marginnote-arrow::after {
  content: "";
  position: absolute;
  top: 0.7em;
  right: 100%;
  width: 0;
  height: 0;
  border: 3px solid transparent;
  border-right-color: var(--accent);
  margin-right: calc(var(--note-lead-len) - 1px);
  transform: rotate(var(--note-lead-angle));
  transform-origin: right center;
}
article .note-anchor {
  color: var(--accent);
  font-size: 0.7em;
  vertical-align: super;
  line-height: 0;
  margin: 0 0.1em;
  cursor: default;
  font-family: var(--font-sans);
}
article .sticky {
  width: 16ch;
  margin-top: 0.25rem;
  margin-bottom: 1.5rem;
  padding: 0.8rem 0.85rem;
  font-family: var(--font-hand);
  font-size: var(--type-md);
  line-height: 1.3;
  color: var(--sticky-ink);
  text-indent: 0;
  text-align: left;
  background: var(--sticky-bg);
  background-image: linear-gradient(var(--sticky-edge) 0 1.4rem, transparent 1.4rem);
  box-shadow: var(--sticky-shadow);
  transform: rotate(var(--sticky-tilt));
  transform-origin: center center;
}
article .sticky p {
  text-indent: 0;
  margin: 0 0 0.5rem;
}
article .sticky p:last-child {
  margin-bottom: 0;
}
article .sticky code {
  font-family: var(--font-mono);
  font-size: 0.8em;
  color: var(--sticky-ink);
  background: rgba(0, 0, 0, 0.07);
}
article .sticky:nth-of-type(even) {
  transform: rotate(calc(-1 * var(--sticky-tilt)));
}
article .sticky {
  float: right;
  clear: right;
  margin-right: calc(-1 * (var(--gutter) + var(--gutter-gap) + var(--page-pad-x-inner) - 1rem));
}
article .fullwidth {
  max-width: none;
  width: var(--article-width);
}
article .fullwidth figure,
article .fullwidth figure.diagram {
  margin: var(--rhythm) 0;
  color: var(--ink);
}
article .fullwidth figure svg,
article .fullwidth figure.diagram svg {
  width: 100%;
}
article .dateline {
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  line-height: 1.3;
  color: var(--ink-muted);
  text-indent: 0;
  margin: 0 0 0.15rem;
}
article .dateline p {
  text-indent: 0;
  margin: 0;
}
article .dateline strong {
  color: var(--ink);
  font-weight: 600;
}
article .factsheet {
  margin: calc(var(--rhythm) * 1.25) 0 calc(var(--rhythm) * 1.75);
  padding: calc(var(--rhythm) * 0.9) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-indent: 0;
}
article .factsheet dl {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 0.45rem 1.25rem;
  margin: 0;
}
article .factsheet dt {
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-top: 0.12rem;
}
article .factsheet dd {
  margin: 0;
  font-size: var(--type-sm);
  line-height: 1.45;
  color: var(--ink);
}
article .factsheet a {
  color: var(--link);
}
@media (max-width: 38rem) {
  article .factsheet dl {
    grid-template-columns: 1fr;
    gap: 0.15rem 0;
  }
  article .factsheet dt {
    padding-top: 0.6rem;
  }
  article .factsheet dt:first-child {
    padding-top: 0;
  }
}
article .statband {
  margin: calc(var(--rhythm) * 1.25) 0 calc(var(--rhythm) * 1.5);
  padding: calc(var(--rhythm) * 0.9) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-indent: 0;
}
article .statband ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: var(--rhythm) 1.5rem;
}
article .statband li {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  line-height: 1.3;
  color: var(--ink-muted);
}
article .statband strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  line-height: 1;
  color: var(--ink);
  margin-bottom: 0.3rem;
  font-variant-numeric: tabular-nums;
}
article .statband .stat-label {
  display: block;
}
article .statband .stat-src {
  white-space: nowrap;
}
article .statband a {
  color: var(--link);
}
article .timeline {
  margin: calc(var(--rhythm) * 1.25) 0 calc(var(--rhythm) * 1.75);
  text-indent: 0;
}
article .timeline li {
  position: relative;
  margin: 0;
  padding-left: 1.4rem;
  line-height: 1.5;
  color: var(--ink);
}
article .timeline li::before {
  content: "";
  position: absolute;
  left: 0.29rem;
  top: 0.4rem;
  bottom: 0;
  width: 1px;
  background: var(--rule);
}
article .timeline li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--paper);
}
article .timeline li:last-child::before {
  display: none;
}
article .timeline li:has(.tl-icon)::before {
  left: 0.55rem;
  top: 0.7rem;
}
article .timeline li:has(.tl-icon)::after {
  display: none;
}
article .timeline li .tl-icon {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0.06rem;
  width: 1.1rem;
  height: 1.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
  box-shadow: 0 0 0 2px var(--paper);
  font-size: 0.68rem;
}
article .timeline > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
article .timeline > ul > li {
  padding-bottom: calc(var(--rhythm) * 0.85);
  font-size: var(--type-sm);
}
article .timeline > ul > li:last-child {
  padding-bottom: 0;
}
article .timeline > ul > li > strong:first-of-type,
article .timeline > ul > li p > strong:first-of-type {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}
article .timeline > ul > li p {
  margin: 0;
  text-indent: 0;
}
article .timeline > ul > li a {
  color: var(--link);
}
article .timeline.dates-aside {
  --tl-date-col: 4.25rem;
  --tl-date-gap: 0.9rem;
}
article .timeline.dates-aside > ul > li {
  padding-left: calc(var(--tl-date-col) + var(--tl-date-gap) + 1.4rem);
}
article .timeline.dates-aside > ul > li .tl-date {
  position: absolute;
  left: 0;
  top: 0.18rem;
  width: var(--tl-date-col);
  margin: 0;
  text-align: right;
  white-space: nowrap;
}
article .timeline.dates-aside > ul > li::after {
  left: calc(var(--tl-date-col) + var(--tl-date-gap));
}
article .timeline.dates-aside > ul > li::before {
  left: calc(var(--tl-date-col) + var(--tl-date-gap) + 0.29rem);
}
article .timeline.dates-aside > ul > li:has(.tl-icon)::before {
  left: calc(var(--tl-date-col) + var(--tl-date-gap) + 0.55rem);
}
article .timeline.dates-aside > ul > li .tl-icon {
  left: calc(var(--tl-date-col) + var(--tl-date-gap));
}
@media (max-width: 30rem) {
  article .timeline.dates-aside > ul > li {
    padding-left: 1.4rem;
  }
  article .timeline.dates-aside > ul > li .tl-date {
    position: static;
    width: auto;
    text-align: left;
  }
  article .timeline.dates-aside > ul > li::after {
    left: 0;
  }
  article .timeline.dates-aside > ul > li::before {
    left: 0.29rem;
  }
  article .timeline.dates-aside > ul > li:has(.tl-icon)::before {
    left: 0.55rem;
  }
  article .timeline.dates-aside > ul > li .tl-icon {
    left: 0;
  }
}
article .timeline.dates-aside-wide {
  --tl-date-col: 6.5rem;
}
article .inlinefigure-left,
article .inlinefigure-right {
  width: 40%;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-sm);
  color: var(--ink-muted);
}
article .inlinefigure-left figure,
article .inlinefigure-left figure.diagram,
article .inlinefigure-right figure,
article .inlinefigure-right figure.diagram {
  margin: 0;
  color: var(--ink);
}
article .inlinefigure-left figcaption,
article .inlinefigure-right figcaption {
  margin-top: 0.4rem;
  line-height: 1.3;
  font-style: italic;
}
article .inlinefigure-left p,
article .inlinefigure-right p {
  text-indent: 0;
  margin: 0.4rem 0 0;
  font-style: italic;
}
article .inlinefigure-left {
  float: left;
  margin-right: 1.5rem;
  clear: left;
}
article .inlinefigure-right {
  float: right;
  margin-left: 1.5rem;
  clear: right;
}
article .epigraph {
  margin: 0 0 calc(var(--rhythm) * 2);
  padding: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-md);
  color: var(--ink-muted);
  line-height: 1.5;
  max-width: calc(var(--measure) * 0.85);
}
article .epigraph p {
  text-indent: 0;
  margin: 0 0 0.5rem;
}
article .epigraph p:last-child {
  margin-top: 0.5rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--type-sm);
  letter-spacing: 0.02em;
}
@media (max-width: 1512px) {
  article {
    max-width: var(--measure);
    padding-left: 0;
  }
  article .marginnote-arrow::before,
  article .marginnote-arrow::after {
    display: none;
  }
  article .sidenote,
  article .marginnote,
  article .marginnote-arrow,
  article .marginfigure {
    float: none;
    clear: none;
    width: auto;
    margin: 0.5rem 0 1rem 1.25rem;
    padding: 0.5rem 0 0.5rem 0.75rem;
    border-left: 2px solid var(--rule);
    display: block;
    text-align: left;
  }
  article .sticky {
    width: 14ch;
    float: right;
    margin: 0.25rem 0 1rem 1.25rem;
  }
  article .fullwidth {
    width: 100%;
    margin-left: 0;
  }
  article .inlinefigure-left,
  article .inlinefigure-right {
    width: 45%;
  }
}
@media (max-width: 640px) {
  article .inlinefigure-left,
  article .inlinefigure-right {
    float: none;
    width: auto;
    margin: var(--rhythm) 0;
    text-align: center;
  }
}
article :lang(sa),
article :lang(hi),
article :lang(mr),
article :lang(ne) {
  font-family: "Mukta", "Linux Libertine", "Kohinoor Devanagari", "Hind", "Noto Sans Devanagari", "Nirmala UI", "Cambria", Georgia, system-ui, sans-serif;
}
article :lang(ta) {
  font-family: "InaiMathi", "Linux Libertine", "Tamil Sangam MN", "Latha", "Noto Serif Tamil", system-ui, serif;
}
article :lang(ml) {
  font-family: "Linux Libertine", "Malayalam Sangam MN", "Nirmala UI", "Noto Serif Malayalam", "Noto Sans Malayalam", "Rachana", system-ui, serif;
}
article :lang(ar),
article :lang(fa),
article :lang(ur) {
  font-family: "Geeza Pro", "Linux Libertine", "Amiri", "Scheherazade New", "Noto Naskh Arabic", system-ui, serif;
}
article :lang(zh) {
  font-family: "Songti SC", "Linux Libertine", "STSong", "PingFang SC", "Source Han Serif SC", "Noto Serif CJK SC", system-ui, serif;
}
article :lang(ja) {
  font-family: "Hiragino Mincho ProN", "Linux Libertine", "Yu Mincho", "Source Han Serif JP", "Noto Serif CJK JP", system-ui, serif;
}
article :lang(el),
article :lang(grc),
article :lang(ru),
article :lang(uk) {
  font-family: var(--font-body);
}
article .line-block {
  margin: var(--rhythm) auto;
  text-align: center;
  font-size: var(--type-lg);
  line-height: 1.6;
  color: var(--ink);
  max-width: calc(var(--measure) - 4rem);
}
article [dir=rtl] .line-block,
article .line-block[dir=rtl] {
  text-align: center;
  unicode-bidi: isolate;
}
article .post-list {
  list-style: none;
  padding: 0;
  margin: var(--rhythm) 0 0;
  clear: left;
}
article .post-item {
  margin: 0 0 1.75rem;
  max-width: var(--measure);
}
article .post-item::before {
  content: none;
}
article .post-item * {
  text-indent: 0;
}
article .post-title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--type-lg);
  line-height: 1.2;
  color: var(--link);
  text-decoration: none;
}
article .post-title:hover {
  text-decoration: underline;
}
article .post-date {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  margin-top: 0.2rem;
}
article .post-subtitle {
  margin: 0.3rem 0 0;
  color: var(--ink-muted);
}
article .post-empty {
  color: var(--ink-muted);
}
article .timeline:has(.tl-year) {
  clear: left;
  margin-top: calc(var(--rhythm) * 1.5);
  max-width: var(--measure-rem);
}
article .tl-year {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  column-gap: 1.25rem;
  margin: 0 0 var(--rhythm);
}
article .tl-year-label {
  font-family: var(--font-display);
  font-size: var(--type-xl);
  color: var(--ink-muted);
  margin: 0;
  padding-top: 0.1rem;
  max-width: none;
}
article .tl-year-label::before {
  content: none;
}
article .tl-entries {
  list-style: none;
  margin: 0;
  padding: 0;
}
article .tl-entry {
  padding-bottom: 1.6rem;
}
article .tl-entry:last-child {
  padding-bottom: 0.2rem;
}
article .tl-dot {
  display: none;
}
article .tl-entry.is-imported::after {
  background: var(--paper);
  border: 1.5px solid var(--ink-muted);
}
article .tl-date {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  color: var(--ink-muted);
  margin-bottom: 0.1rem;
}
article .tl-body * {
  text-indent: 0;
}
@media (max-width: 38rem) {
  article .tl-year {
    grid-template-columns: 1fr;
    row-gap: 0.5rem;
  }
}
article .tag-cloud {
  clear: left;
  margin: var(--rhythm) 0 0;
}
article .tag-cloud-summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
article .tag-cloud-summary::-webkit-details-marker {
  display: none;
}
article .tag-cloud-summary::after {
  content: "▸";
  font-size: 0.85em;
  color: var(--accent);
  transition: transform 0.15s ease;
}
article .tag-cloud-summary:hover {
  color: var(--ink);
}
article .tag-cloud[open] .tag-cloud-summary::after {
  transform: rotate(90deg);
}
article .tag-cloud-count {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--accent);
  letter-spacing: 0;
}
article .tag-list {
  clear: left;
  margin: 0.75rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
}
article .tag {
  color: var(--link);
  text-decoration: none;
}
article .tag::before {
  content: none;
}
article .tag:hover {
  text-decoration: underline;
}
article .post-tags {
  margin: 0.35rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.7rem;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  color: var(--ink-muted);
}
article .article-related {
  margin: calc(var(--rhythm) * 1.75) 0 0;
  padding-top: var(--rhythm);
  border-top: 1px solid var(--rule);
}
article .article-related .related-head {
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.6rem;
  text-indent: 0;
}
article .article-related .related-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
article .article-related .related-list li {
  margin: 0 0 0.7rem;
}
article .article-related .related-list li::before {
  content: none;
}
article .article-related .related-list a {
  font-family: var(--font-display);
  font-size: var(--type-md);
  color: var(--link);
  text-decoration: none;
}
article .article-related .related-list a:hover {
  text-decoration: underline;
}
article .article-related .related-sub {
  display: block;
  font-family: var(--font-body);
  font-size: var(--type-sm);
  color: var(--ink-muted);
  margin-top: 0.1rem;
}
article .post-nav {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin: calc(var(--rhythm) * 2) 0 0;
  padding-top: var(--rhythm);
  border-top: 1px solid var(--rule);
}
article .post-nav a {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-decoration: none;
  max-width: 48%;
}
article .post-nav a::before {
  content: none;
}
article .post-nav .post-nav-next {
  text-align: right;
  margin-left: auto;
}
article .post-nav .post-nav-dir {
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  color: var(--ink-muted);
}
article .post-nav .post-nav-title {
  font-family: var(--font-display);
  color: var(--link);
}
article .post-nav a:hover .post-nav-title {
  text-decoration: underline;
}
article.cv-page {
  --rhythm: 1rem;
}
article.cv-page > p:first-of-type::first-letter,
article.cv-page > p:first-of-type::first-line {
  all: unset;
}
article.cv-page h3 {
  font-family: var(--font-body);
  font-size: var(--type-md);
  font-weight: 700;
  margin: 0 0 0.2rem;
  letter-spacing: 0;
}
article.cv-page h3 + p {
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  color: var(--ink-muted);
  margin: 0 0 0.5rem;
  text-indent: 0;
}
article.cv-page h3 + p + ul {
  margin-top: 0.25rem;
}
article.cv-page ul li {
  margin-bottom: 0.2rem;
}
article.cv-page .contact {
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  color: var(--ink-muted);
  margin: 0 0 calc(var(--rhythm) * 1.5);
  text-indent: 0;
}
article.cv-page .contact a {
  color: var(--link);
}
article.cv-page dl {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 0.4rem 1rem;
  margin: 0 0 var(--rhythm);
}
article.cv-page dl dt {
  font-family: var(--font-title);
  font-weight: 600;
  color: var(--ink);
}
article.cv-page dl dd {
  margin: 0;
  color: var(--ink);
}
article.cv-page section.level3,
article.cv-page .cv-entry {
  display: grid;
  grid-template-columns: [date] 9rem [body] minmax(0, 1fr);
  column-gap: 1.5rem;
  align-items: start;
  margin-top: 1.4rem;
}
article.cv-page section.level3 > *,
article.cv-page .cv-entry > * {
  grid-column: body;
  min-width: 0;
}
article.cv-page section.level3 > .dateline,
article.cv-page .cv-entry > .dateline {
  grid-column: date;
  grid-row: 1;
  margin: 0;
  text-align: right;
  line-height: 1.35;
}
article.cv-page .cv-entry > p {
  margin: 0 0 0.3rem;
}
article.cv-page .dateline strong {
  color: var(--accent);
}
@media (max-width: 640px) {
  article.cv-page section.level3,
  article.cv-page .cv-entry {
    display: flex;
    flex-direction: column;
  }
  article.cv-page section.level3 > .dateline,
  article.cv-page .cv-entry > .dateline {
    order: -1;
    text-align: left;
    margin: 0 0 0.1rem;
  }
}
article pre.sourceCode,
article div.sourceCode pre {
  background: var(--code-bg);
}
article code.sourceCode .kw,
article code.sourceCode .cf,
article code.sourceCode .im {
  color: var(--accent);
  font-weight: 600;
}
article code.sourceCode .dt,
article code.sourceCode .bu {
  color: var(--accent);
}
article code.sourceCode .dv,
article code.sourceCode .bn,
article code.sourceCode .fl,
article code.sourceCode .ch,
article code.sourceCode .cn {
  color: var(--accent);
  font-style: italic;
}
article code.sourceCode .st,
article code.sourceCode .vs,
article code.sourceCode .sc {
  color: var(--accent);
}
article code.sourceCode .co,
article code.sourceCode .cv,
article code.sourceCode .do,
article code.sourceCode .an {
  color: var(--ink-muted);
  font-style: italic;
}
article code.sourceCode .fu,
article code.sourceCode .va {
  color: var(--ink);
}
article code.sourceCode .op,
article code.sourceCode .at {
  color: var(--ink-muted);
}
article code.sourceCode .pp,
article code.sourceCode .ot {
  color: var(--accent);
}
article code.sourceCode .er,
article code.sourceCode .wa {
  color: var(--accent);
  text-decoration: underline wavy;
}

.tl-zoom {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 var(--rhythm);
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  color: var(--ink-muted);
}
.tl-zoom .tl-zoom-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--type-xs);
  font-weight: 700;
  margin-inline-end: 0.2rem;
}
.tl-zoom button {
  appearance: none;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  cursor: pointer;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  transition: color 0.12s ease, background 0.12s ease;
}
.tl-zoom button:hover {
  color: var(--ink);
}
.tl-zoom button.is-active {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}

.timeline.zoom-compact .post-subtitle,
.timeline.zoom-compact .post-tags {
  display: none;
}
.timeline.zoom-compact .tl-entry {
  padding-bottom: 0.55rem;
}

.timeline.zoom-years .tl-entries {
  display: none;
}
.timeline.zoom-years .tl-year {
  margin-bottom: 0.7rem;
}

.tl-year-count {
  display: none;
  font-family: var(--font-sans);
  font-size: var(--type-xs);
  letter-spacing: 0.02em;
  color: var(--ink-muted);
  margin-inline-start: 0.6rem;
}

.timeline.zoom-years .tl-year-count {
  display: inline;
}

.tl-scrubber {
  position: fixed;
  top: 6rem;
  bottom: 3rem;
  right: 0.6rem;
  width: 3.25rem;
  z-index: 30;
  font-family: var(--font-sans);
  opacity: 0.45;
  transition: opacity 0.15s ease;
}
.tl-scrubber:hover, .tl-scrubber.is-active {
  opacity: 1;
}
.tl-scrubber .tl-scrub-track {
  position: relative;
  height: 100%;
  cursor: pointer;
}
.tl-scrubber .tl-scrub-track::after {
  content: "";
  position: absolute;
  right: 0.5rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule);
}
.tl-scrubber .tl-scrub-dot {
  position: absolute;
  right: 0.5rem;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink-muted);
  opacity: 0.55;
  transform: translate(50%, -50%);
}
.tl-scrubber .tl-scrub-year {
  position: absolute;
  right: 1rem;
  transform: translateY(-50%);
  font-size: var(--type-xs);
  color: var(--ink-muted);
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.tl-scrubber .tl-scrub-thumb {
  position: absolute;
  right: 0.5rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--paper);
  box-shadow: 0 1px 4px color-mix(in srgb, #000 22%, transparent);
  transform: translate(50%, -50%);
}
.tl-scrubber .tl-scrub-bubble {
  position: absolute;
  right: 1.6rem;
  transform: translateY(-50%);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--type-xs);
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.tl-scrubber:hover .tl-scrub-bubble, .tl-scrubber.is-active .tl-scrub-bubble {
  opacity: 1;
}

@media (max-width: 60rem) {
  .tl-scrubber {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tl-scrubber,
  .tl-zoom button {
    transition: none;
  }
}
.catband {
  text-align: center;
  max-width: var(--measure);
  margin: calc(var(--rhythm) * 2.2) auto var(--rhythm);
}
.catband p {
  margin: 0;
  text-indent: 0;
  text-align: center;
}
.catband p:first-of-type {
  font-family: var(--font-name);
  font-weight: normal;
  font-size: var(--type-xl);
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.catband p:first-of-type strong {
  font-weight: inherit;
}
.catband p:nth-of-type(2) {
  margin-top: 0.25rem;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.photo-grid {
  max-width: var(--article-width);
  margin: calc(var(--rhythm) * 1.5) 0;
  columns: 2;
  column-gap: 1rem;
}
@media (min-width: 60rem) {
  .photo-grid {
    columns: 3;
  }
}
@media (max-width: 30rem) {
  .photo-grid {
    columns: 1;
  }
}

.photo-item {
  display: block;
  break-inside: avoid;
  margin: 0 0 1rem;
  text-decoration: none;
  color: inherit;
  border: 0;
}
.photo-item .photo-figure {
  margin: 0;
}
.photo-item .photo-thumb {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper-dim);
  box-shadow: var(--sheet-shadow);
  transition: filter 0.25s ease, transform 0.25s ease;
}
.photo-item:hover .photo-thumb, .photo-item:focus-visible .photo-thumb {
  filter: brightness(1.05);
  transform: translateY(-2px);
}
.photo-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: no-preference) {
  .photo-item:active .photo-thumb {
    transform: translateY(0) scale(0.99);
  }
}
.photo-item .photo-caption {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  line-height: 1.35;
}
.photo-item .photo-title {
  display: block;
  font-weight: 700;
  color: var(--ink);
}
.photo-item .photo-desc {
  display: block;
  color: var(--ink-muted);
}

.photo-empty {
  color: var(--ink-muted);
  font-style: italic;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--viewer) 55%, #000 45%);
  backdrop-filter: blur(3px);
}
.lightbox.is-open {
  display: flex;
}
.lightbox .lightbox-figure {
  margin: 0;
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: center;
  max-width: min(96vw, 1500px);
  max-height: 90vh;
  flex-direction: column;
  opacity: 1;
  transition: opacity 0.2s ease;
  will-change: opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.lightbox.is-changing .lightbox-figure {
  opacity: 0;
}
.lightbox .lightbox-figure[data-orientation=portrait] {
  flex-direction: row;
  align-items: stretch;
}
.lightbox .lightbox-stage {
  position: relative;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
  width: min(92vw, 1400px);
  height: 64vh;
  cursor: grab;
  touch-action: none;
}
.lightbox.is-panning .lightbox-stage {
  cursor: grabbing;
}
.lightbox .lightbox-media {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
  max-width: none;
  max-height: none;
  user-select: none;
  -webkit-user-select: none;
  color: var(--ink, currentColor);
}
.lightbox img.lightbox-media.lightbox-photo {
  --print-edge: clamp(6px, 0.8vw, 11px);
  --print-paper: #f5f5f5;
  box-sizing: border-box;
  border: var(--print-edge) solid var(--print-paper);
  outline: 1px solid rgba(40, 38, 30, 0.18);
  outline-offset: calc(-1 * var(--print-edge));
  background: var(--print-paper);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.lightbox .lightbox-media:not(.lightbox-photo) {
  box-sizing: border-box;
  padding: clamp(1rem, 3vw, 2.25rem);
  background: var(--paper);
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.lightbox .lightbox-media.lightbox-widget {
  text-align: center;
  user-select: text;
  -webkit-user-select: text;
}
.lightbox .lightbox-media.lightbox-widget button,
.lightbox .lightbox-media.lightbox-widget a,
.lightbox .lightbox-media.lightbox-widget input,
.lightbox .lightbox-media.lightbox-widget select {
  cursor: pointer;
}
.lightbox .lightbox-figure[data-orientation=portrait] .lightbox-stage {
  width: clamp(18rem, 52vw, 40rem);
  height: 86vh;
}
.lightbox .lightbox-panel {
  font-family: var(--font-sans);
  color: var(--ink);
  flex: 0 0 auto;
  align-self: center;
  text-align: center;
}
.lightbox .lightbox-panel > * {
  margin: 0;
}
.lightbox .lightbox-panel > * + * {
  margin-top: 0.6rem;
}
.lightbox .lightbox-figure[data-orientation=portrait] .lightbox-panel {
  width: clamp(14rem, 24vw, 20rem);
  align-self: center;
  text-align: left;
}
.lightbox .lightbox-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-lg);
  line-height: 1.15;
}
.lightbox .lightbox-desc {
  font-size: var(--type-sm);
  line-height: 1.5;
  color: var(--ink);
  max-width: 60ch;
  margin-inline: auto;
}
.lightbox .lightbox-where {
  font-size: var(--type-sm);
  color: var(--ink-muted);
}
.lightbox .lightbox-exif {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
}
.lightbox > button,
.lightbox .lightbox-zoom-controls button {
  position: absolute;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s ease, transform 0.15s ease;
}
.lightbox > button:hover,
.lightbox .lightbox-zoom-controls button:hover {
  background: var(--paper);
}
.lightbox > button:focus-visible,
.lightbox .lightbox-zoom-controls button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.lightbox .lightbox-prev,
.lightbox .lightbox-next {
  top: 50%;
  transform: translateY(-50%);
}
.lightbox .lightbox-prev {
  left: clamp(0.5rem, 3vw, 2rem);
}
.lightbox .lightbox-next {
  right: clamp(0.5rem, 3vw, 2rem);
}
.lightbox .lightbox-prev:hover,
.lightbox .lightbox-next:hover {
  transform: translateY(-50%) scale(1.06);
}
.lightbox .lightbox-fs,
.lightbox .lightbox-close {
  top: clamp(0.5rem, 3vw, 1.5rem);
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.25rem;
}
.lightbox .lightbox-fs:hover,
.lightbox .lightbox-close:hover {
  transform: scale(1.06);
}
@media (prefers-reduced-motion: no-preference) {
  .lightbox .lightbox-prev:active,
  .lightbox .lightbox-next:active {
    transform: translateY(-50%) scale(0.92);
  }
  .lightbox .lightbox-fs:active,
  .lightbox .lightbox-close:active {
    transform: scale(0.92);
  }
}
.lightbox .lightbox-close {
  right: clamp(0.5rem, 3vw, 1.5rem);
}
.lightbox .lightbox-fs {
  right: clamp(3.5rem, 3vw + 3rem, 4.75rem);
}
.lightbox.is-fullscreen {
  padding: 0;
  background: #000;
}
.lightbox.is-fullscreen .lightbox-figure {
  max-width: 100vw;
  max-height: 100vh;
}
.lightbox.is-fullscreen .lightbox-stage {
  width: 100vw;
  height: 100vh;
}
.lightbox.is-fullscreen img.lightbox-media.lightbox-photo {
  box-shadow: none;
  border: 0;
  outline: 0;
}
.lightbox.is-fullscreen .lightbox-panel {
  display: none;
}
@media (max-width: 40rem) {
  .lightbox .lightbox-figure,
  .lightbox .lightbox-figure[data-orientation=portrait] {
    flex-direction: column;
    align-items: center;
  }
  .lightbox .lightbox-figure[data-orientation=portrait] .lightbox-panel {
    width: auto;
    text-align: center;
  }
  .lightbox .lightbox-stage,
  .lightbox .lightbox-figure[data-orientation=portrait] .lightbox-stage {
    width: 92vw;
    height: 60vh;
  }
}
.lightbox .lightbox-zoom-controls {
  position: absolute;
  top: clamp(0.5rem, 3vw, 1.5rem);
  left: clamp(0.5rem, 3vw, 1.5rem);
  display: flex;
  gap: 0.4rem;
  z-index: 2;
}
.lightbox .lightbox-zoom-in,
.lightbox .lightbox-zoom-out,
.lightbox .lightbox-zoom-reset {
  position: static;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.3rem;
}
.lightbox .lightbox-zoom-in:hover,
.lightbox .lightbox-zoom-out:hover,
.lightbox .lightbox-zoom-reset:hover {
  transform: scale(1.06);
}
@media (prefers-reduced-motion: no-preference) {
  .lightbox .lightbox-zoom-in:active,
  .lightbox .lightbox-zoom-out:active,
  .lightbox .lightbox-zoom-reset:active {
    transform: scale(0.92);
  }
}

figure.is-zoomable:not(.is-zoomable-interactive) {
  cursor: zoom-in;
  position: relative;
}
figure.is-zoomable:not(.is-zoomable-interactive)::after {
  content: "⤢";
  position: absolute;
  right: 0.35rem;
  bottom: 0.35rem;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0.2rem 0.3rem;
  border-radius: 0.3rem;
  color: var(--ink-muted);
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
  z-index: 1;
}
figure.is-zoomable:not(.is-zoomable-interactive):hover::after, figure.is-zoomable:not(.is-zoomable-interactive):focus-visible::after {
  opacity: 0.7;
}
figure.is-zoomable:not(.is-zoomable-interactive):focus-visible {
  outline: 2px solid var(--accent, currentColor);
  outline-offset: 3px;
}

figure.is-zoomable-interactive {
  position: relative;
}
figure.is-zoomable-interactive .figure-expand {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 2;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  font-size: 1rem;
  line-height: 1;
  color: var(--ink-muted);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  border: 1px solid var(--rule);
  border-radius: 0.35rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
}
figure.is-zoomable-interactive .figure-expand:hover {
  background: var(--paper);
  color: var(--ink);
}
figure.is-zoomable-interactive .figure-expand:focus-visible {
  opacity: 1;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
figure.is-zoomable-interactive:hover .figure-expand, figure.is-zoomable-interactive:focus-within .figure-expand {
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  .lightbox .lightbox-media {
    will-change: auto;
  }
}
@media (max-width: 640px) {
  :root {
    --type-base: 1.0625rem;
    --page-pad-x-inner: 1rem;
    --page-pad-y: 1.5rem;
    --viewer-pad: 0px;
  }
  body {
    background: var(--paper);
  }
  .page {
    box-shadow: none;
    margin: 0 auto;
  }
  .page::after {
    display: none;
  }
  .site-header {
    gap: 0.75rem;
  }
}
@media print {
  :root {
    color-scheme: light !important;
    --paper: #ffffff;
    --paper-dim: #f5f3ee;
    --ink: #000000;
    --ink-muted: #4a4a4a;
    --rule: #999999;
    --link: #000000;
    --link-hover: #000000;
    --accent: #000000;
    --code-bg: #f0ecd6;
  }
  @page {
    size: A4;
    margin: 2cm 1.8cm;
  }
  body {
    background: #fff;
    color: #000;
  }
  .site-header,
  .site-footer {
    display: none;
  }
  .page {
    padding: 0;
    width: auto;
    max-width: none;
    margin: 0;
    box-shadow: none;
  }
  .page::after {
    display: none;
  }
  article {
    max-width: none;
    padding-left: 0;
    margin: 0;
  }
  article > *,
  article > section {
    margin-left: 0;
  }
  article .marginnote-arrow::before,
  article .marginnote-arrow::after {
    display: none;
  }
  article .sidenote,
  article .marginnote,
  article .marginnote-arrow,
  article .marginfigure {
    float: none;
    clear: none;
    width: auto;
    margin: 0.4rem 0 0.6rem 1rem;
    padding: 0.3rem 0 0.3rem 0.75rem;
    border-left: 1px solid var(--rule);
    display: block;
    text-align: left;
    break-inside: avoid;
  }
  article .sticky {
    float: none;
    width: auto;
    margin: 0.4rem 0 0.6rem 1rem;
    padding: 0.3rem 0 0.3rem 0.75rem;
    border-left: 1px solid var(--rule);
    background: none;
    box-shadow: none;
    transform: none;
    break-inside: avoid;
  }
  article .sticky:nth-of-type(even) {
    transform: none;
  }
  article .fullwidth {
    width: 100%;
    margin-left: 0;
  }
  article .inlinefigure-left,
  article .inlinefigure-right {
    float: none;
    width: auto;
    margin: var(--rhythm) auto;
    text-align: center;
  }
  article.cv-page {
    padding-left: 0;
  }
  a[href]:not([href^="#"])::after {
    content: " ⟨" attr(href) "⟩";
    font-family: var(--font-mono);
    font-size: 0.78em;
    color: var(--ink-muted);
    word-break: break-all;
    text-decoration: none;
  }
  .article-toc a::after,
  .backlinks a::after,
  .site-nav a::after,
  .contact a[href^="mailto:"]::after {
    content: none;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    break-after: avoid-page;
    page-break-after: avoid;
  }
  figure,
  table,
  blockquote,
  pre,
  .pullquote,
  .epigraph,
  .note,
  .warning,
  .important {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  p,
  li {
    orphans: 3;
    widows: 3;
  }
  pre {
    border: 1px solid var(--rule);
    background: #fafafa;
  }
}
.ev-switch {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: calc(var(--rhythm) * 1.6) 0 var(--rhythm);
}
.ev-switch button {
  appearance: none;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  cursor: pointer;
  padding: 0.25rem 0.95rem;
  border-radius: 999px;
  transition: color 0.12s ease, background 0.12s ease;
}
.ev-switch button:hover {
  color: var(--ink);
}
.ev-switch button.is-active {
  color: var(--paper);
  background: var(--ink);
  border-color: var(--ink);
}

.ev-views.is-enhanced > .ev-view {
  display: none;
}

.ev-views.is-enhanced[data-active=timeline] > [data-view=timeline],
.ev-views.is-enhanced[data-active=table] > [data-view=table] {
  display: block;
}

.ev-views.is-enhanced[data-active=sectors] [data-view=table],
.ev-views.is-enhanced[data-active=table] [data-view=sectors] {
  display: none;
}

.ev-view:not([data-view=table]) * {
  text-indent: 0;
}

.ev-view[data-view=timeline] {
  position: relative;
}

.ev-tl-stream {
  max-width: var(--measure);
  border-left: 1px solid var(--rule);
}

.ev-tl-yhead {
  font-family: var(--font-name);
  font-size: var(--type-lg);
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  margin: calc(var(--rhythm) * 1.2) 0 0.5rem;
  padding-left: 1.4rem;
}
.ev-tl-yhead:first-child {
  margin-top: 0;
}

.ev-tl-card {
  display: grid;
  grid-template-columns: 1.2rem minmax(0, 1fr);
  column-gap: 0.65rem;
  text-decoration: none;
  color: var(--ink);
  padding: 0.12rem 0 0.7rem 0.95rem;
  margin-left: -1px;
  border-left: 3px solid var(--accent);
}
.ev-tl-card:hover .ev-tl-title {
  color: var(--accent);
}

.ev-tl-icon {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.16rem;
  color: var(--ink-muted);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ev-tl-body {
  display: block;
  min-width: 0;
}

.ev-tl-type {
  font-family: var(--font-sans);
  font-size: var(--type-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.ev-tl-title {
  display: block;
  font-size: var(--type-md);
  line-height: 1.3;
}

.ev-tl-meta {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  color: var(--ink-muted);
}

.ev-t-book {
  border-left-color: #b06a33;
}
.ev-t-book .ev-tl-icon {
  color: #b06a33;
}

.ev-t-paper {
  border-left-color: #4f7a6a;
}
.ev-t-paper .ev-tl-icon {
  color: #4f7a6a;
}

.ev-t-media {
  border-left-color: #5d7596;
}
.ev-t-media .ev-tl-icon {
  color: #5d7596;
}

.ev-t-benchmark {
  border-left-color: #8a6d97;
}
.ev-t-benchmark .ev-tl-icon {
  color: #8a6d97;
}

.ev-sectors {
  display: grid;
  gap: calc(var(--rhythm) * 1.4);
}

.ev-sector-head {
  text-align: center;
  margin-bottom: 0.9rem;
}
.ev-sector-head .ev-sector-title {
  display: block;
  font-family: var(--font-name);
  font-size: var(--type-lg);
  letter-spacing: 0.05em;
  color: var(--ink);
}
.ev-sector-head .ev-sector-sub {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 0.15rem;
}

.ev-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.7rem;
}

.ev-tile {
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  background: var(--paper-dim);
}

.ev-tile-name {
  display: block;
  font-weight: 600;
}

.ev-tile-full {
  font-weight: 400;
  color: var(--ink-muted);
  font-size: var(--type-sm);
}

.ev-tile-uses {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  color: var(--ink-muted);
  margin-top: 0.25rem;
}

.icon-specimen {
  margin: calc(var(--rhythm) * 1.2) 0;
  padding: 0.9rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.icon-specimen-grid {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.45rem 0.9rem;
}

.icon-specimen-grid li {
  margin: 0;
  color: var(--ink-muted);
  font-family: var(--font-sans);
  font-size: var(--type-sm);
}

.icon-chip {
  color: var(--ink);
  font-weight: 600;
}

.ev-matrix th {
  font-family: var(--font-sans);
  font-size: var(--type-sm);
}

html.talk-staging {
  overflow: hidden;
}
html.talk-staging body {
  visibility: hidden;
}
html.talk-staging article.talk > section.level1.is-current-slide {
  visibility: visible;
  position: fixed;
  inset: 0;
  z-index: 60;
  margin: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vh, 2rem);
  padding: clamp(2rem, 8vh, 5rem) clamp(1.5rem, 8vw, 6rem);
  background: var(--paper);
  overflow: hidden;
}
html.talk-staging article.talk > section.level1.is-current-slide > * {
  display: none;
}
html.talk-staging article.talk > section.level1.is-current-slide > h1 {
  display: block;
  position: absolute;
  top: clamp(0.8rem, 3vh, 1.6rem);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
}
html.talk-staging article.talk > section.level1.is-current-slide > .slidetext {
  display: flex;
  aspect-ratio: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}
html.talk-staging article.talk > section.level1.is-current-slide > .slidetext p {
  font-size: clamp(var(--type-2xl), 6vw, var(--type-4xl));
}
html.talk-staging article.talk > section.level1.is-current-slide > .slidetext::after {
  content: none;
}
html.talk-staging article.talk > section.level1.is-current-slide > figure,
html.talk-staging article.talk > section.level1.is-current-slide > .viz {
  display: block;
  width: min(80vw, 46rem);
  max-height: 60vh;
  margin: 0;
}

.talk-progress {
  position: fixed;
  inset: auto 0 0;
  z-index: 61;
  visibility: visible;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem clamp(1rem, 4vw, 2.5rem);
  border-top: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
  background: var(--paper);
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  color: var(--ink-muted);
  font-variant-numeric: lining-nums tabular-nums;
}
.talk-progress .talk-progress-venue {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.talk-progress .talk-progress-count {
  margin-left: auto;
}

html.talk-presenting body {
  visibility: hidden;
}
html.talk-presenting .talk-presenter {
  visibility: visible;
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 1.5rem;
  padding: 1.5rem;
  background: var(--paper);
  overflow: hidden;
}
html.talk-presenting .talk-presenter .talk-presenter-notes {
  overflow-y: auto;
  font-size: var(--type-md);
}
html.talk-presenting .talk-presenter .talk-presenter-notes p {
  text-indent: 0;
}
html.talk-presenting .talk-presenter .talk-presenter-aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-left: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
  padding-left: 1.5rem;
}
html.talk-presenting .talk-presenter .talk-presenter-next {
  font-family: var(--font-display);
  font-size: var(--type-xl);
  line-height: 1.3;
  color: var(--ink-muted);
}
html.talk-presenting .talk-presenter .talk-presenter-next::before {
  content: "Next";
  display: block;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
html.talk-presenting .talk-presenter .talk-presenter-clock {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: var(--type-3xl);
  color: var(--ink);
}

figure.diagram [fill="#ffffff"],
.lightbox-media[fill="#ffffff"],
.lightbox-media [fill="#ffffff"] {
  fill: var(--diagram-node);
}

figure.diagram [stroke="#ffffff"],
.lightbox-media[stroke="#ffffff"],
.lightbox-media [stroke="#ffffff"] {
  stroke: var(--diagram-node);
}

figure.diagram [fill="#e7dcd6"],
.lightbox-media[fill="#e7dcd6"],
.lightbox-media [fill="#e7dcd6"] {
  fill: var(--diagram-node-2);
}

figure.diagram [stroke="#e7dcd6"],
.lightbox-media[stroke="#e7dcd6"],
.lightbox-media [stroke="#e7dcd6"] {
  stroke: var(--diagram-node-2);
}

figure.diagram [fill="#7a3b1a"],
.lightbox-media[fill="#7a3b1a"],
.lightbox-media [fill="#7a3b1a"] {
  fill: var(--diagram-accent);
}

figure.diagram [stroke="#7a3b1a"],
.lightbox-media[stroke="#7a3b1a"],
.lightbox-media [stroke="#7a3b1a"] {
  stroke: var(--diagram-accent);
}

figure.diagram svg:not([class]) path:not([fill]),
.lightbox-media:not([class*=diagram-]) path:not([fill]) {
  fill: currentColor;
}

.diagram svg.diagram-railroad {
  max-width: 22rem;
}

.diagram-railroad rect,
.diagram-railroad line,
.diagram-railroad path {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5px;
  stroke-linecap: square;
  stroke-linejoin: round;
}
.diagram-railroad .arrow {
  fill: currentColor;
  stroke: none;
}
.diagram-railroad text {
  fill: currentColor;
}
.diagram-railroad .literal {
  font-family: var(--font-mono);
}
.diagram-railroad .ellipsis {
  stroke-dasharray: 1 3.5;
}

.diagram-automaton text {
  font-family: var(--font-body);
  fill: currentColor;
}

.viz {
  margin: 2rem 0;
  text-align: center;
}

.viz-static svg {
  max-width: 22rem;
  height: auto;
  color: var(--ink);
}

.viz-automaton {
  max-width: 22rem;
  height: auto;
  color: var(--ink);
}
.viz-automaton .viz-edge {
  stroke: currentColor;
  stroke-width: 1.4px;
  fill: none;
}
.viz-automaton .viz-label {
  fill: currentColor;
  font-family: var(--font-mono);
  font-size: 12px;
}
.viz-automaton .viz-node {
  fill: var(--paper-dim);
  stroke: currentColor;
  stroke-width: 1.5px;
  transition: fill 0.2s ease, stroke 0.2s ease;
}
.viz-automaton .viz-node.is-current {
  fill: var(--accent);
  stroke: var(--accent);
}
.viz-automaton .viz-node-ring {
  stroke: currentColor;
  stroke-width: 1.2px;
}
.viz-automaton .viz-node-label {
  fill: currentColor;
  font-family: var(--font-mono);
  font-size: 13px;
}

.viz-dag {
  max-width: 26rem;
  height: auto;
  color: var(--ink);
}
.viz-dag .viz-edge {
  stroke: currentColor;
  stroke-width: 1.3px;
  fill: none;
  opacity: 0.55;
}
.viz-dag .viz-node {
  fill: var(--paper-dim);
  stroke: currentColor;
  stroke-width: 1.5px;
  cursor: pointer;
  transition: fill 0.25s ease, stroke 0.25s ease;
}
.viz-dag .viz-node-artifact {
  stroke-width: 2px;
}
.viz-dag .viz-node:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.viz-dag .viz-node.is-dirty {
  fill: var(--accent);
  stroke: var(--accent);
}
.viz-dag .viz-node.is-pulse {
  animation: viz-dag-pulse 0.42s ease;
}
.viz-dag .viz-node-label {
  fill: currentColor;
  font-family: var(--font-mono);
  font-size: 12px;
  pointer-events: none;
}
.viz-dag.viz-repo .viz-node.is-fixed {
  fill: #2e8b57;
  stroke: #15522f;
}
.viz-dag.viz-repo .viz-node.is-broken {
  fill: #c0392b;
  stroke: #7a1f1f;
}
.viz-dag.viz-repo .viz-node.is-fixed + .viz-node-label,
.viz-dag.viz-repo .viz-node.is-broken + .viz-node-label,
.viz-dag.viz-repo .viz-node.is-dirty + .viz-node-label {
  fill: var(--paper);
}
.viz-dag.viz-skew {
  max-width: min(31rem, 100%);
}
.viz-dag.viz-skew .viz-edge.is-loose {
  stroke-dasharray: 4 3;
  opacity: 0.8;
}
.viz-dag.viz-skew .viz-edge.is-broken {
  stroke: #c0392b;
  stroke-dasharray: 4 3;
  opacity: 1;
}

.viz-dag.viz-prune .viz-node {
  cursor: default;
}
.viz-dag.viz-prune .viz-node.is-dirty {
  fill: var(--paper-dim);
  stroke: var(--accent);
  stroke-dasharray: 4 3;
}
.viz-dag.viz-prune .viz-node.is-recomputing {
  fill: color-mix(in srgb, var(--accent) 25%, var(--paper-dim));
  stroke: var(--accent);
  stroke-dasharray: 4 3;
}
.viz-dag.viz-prune .viz-node.is-changed {
  fill: var(--accent);
  stroke: var(--accent);
}
.viz-dag.viz-prune .viz-node.is-equal {
  fill: var(--paper-dim);
  stroke: #2e8b57;
  stroke-width: 2.5px;
}
.viz-dag.viz-prune .viz-node.is-pruned {
  fill: #2e8b57;
  stroke: #15522f;
}
.viz-dag.viz-prune .viz-node.is-changed + .viz-node-label,
.viz-dag.viz-prune .viz-node.is-pruned + .viz-node-label {
  fill: var(--paper);
}

@keyframes viz-dag-pulse {
  0% {
    stroke-width: 1.5px;
  }
  45% {
    stroke-width: 5px;
  }
  100% {
    stroke-width: 2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .viz-dag .viz-node.is-pulse {
    animation: none;
  }
}
.viz-chart {
  max-width: 26rem;
  height: auto;
  color: var(--ink);
}
.viz-chart .viz-axis-line,
.viz-chart .viz-tick {
  stroke: currentColor;
  stroke-width: 1px;
  opacity: 0.5;
}
.viz-chart .viz-tick-label {
  fill: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 9px;
}
.viz-chart .viz-cat {
  fill: var(--ink-muted);
  font-family: var(--font-sans);
  font-size: 10px;
}
.viz-chart .viz-val {
  fill: currentColor;
  font-family: var(--font-mono);
  font-size: 10px;
}

.viz-chart .viz-bar {
  fill: var(--paper-dim);
  stroke: currentColor;
  stroke-width: 1px;
}
.viz-chart .viz-bar.is-accent {
  fill: var(--accent);
  stroke: var(--accent);
}

.viz-area .viz-area-fill {
  fill: var(--accent);
  opacity: 0.12;
}
.viz-area .viz-area-line {
  stroke: var(--accent);
  stroke-width: 1.5px;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.viz-slope .viz-slope-line {
  stroke: var(--ink-muted);
  stroke-width: 1.2px;
}
.viz-slope .viz-slope-line.is-down {
  stroke: var(--accent);
  stroke-width: 1.6px;
}
.viz-slope .viz-dot {
  fill: currentColor;
}

.viz-timeline .viz-span {
  fill: var(--paper-dim);
  stroke: currentColor;
  stroke-width: 1px;
  transition: fill 0.15s ease;
}
.viz-timeline .viz-span:hover {
  fill: color-mix(in srgb, var(--accent) 22%, var(--paper-dim));
}
.viz-timeline .viz-span.is-critical {
  fill: var(--accent);
  stroke: var(--accent);
}
.viz-timeline .viz-span-label {
  fill: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  pointer-events: none;
}
.viz-timeline .viz-span-label.is-inside {
  fill: var(--ink);
}

.viz-flame .viz-frame {
  fill: var(--paper-dim);
  stroke: currentColor;
  stroke-width: 0.8px;
  cursor: pointer;
  transition: fill 0.15s ease;
}
.viz-flame .viz-frame:hover,
.viz-flame .viz-frame.is-hot {
  fill: color-mix(in srgb, var(--accent) 30%, var(--paper-dim));
}
.viz-flame .viz-frame.is-crumb {
  fill: color-mix(in srgb, var(--ink) 8%, var(--paper));
  opacity: 0.75;
}
.viz-flame .viz-frame:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.viz-flame .viz-frame-label {
  fill: var(--ink);
  font-family: var(--font-mono);
  font-size: 9px;
  pointer-events: none;
}

.viz-restart {
  max-width: 24rem;
  height: auto;
  color: var(--ink);
}
.viz-restart .viz-rc-box {
  fill: var(--paper-dim);
  stroke: currentColor;
  stroke-width: 1.5px;
  transition: fill 0.25s ease, stroke 0.25s ease, opacity 0.25s ease;
}
.viz-restart .viz-rc-box.is-running {
  fill: color-mix(in srgb, var(--accent) 22%, var(--paper-dim));
}
.viz-restart .viz-rc-box.is-gaveup {
  opacity: 0.4;
  stroke-dasharray: 4 3;
}
.viz-restart .viz-rc-box.is-done,
.viz-restart .viz-rc-box.is-ready {
  fill: var(--accent);
  stroke: var(--accent);
}
.viz-restart .viz-rc-box.is-computing {
  fill: color-mix(in srgb, var(--accent) 22%, var(--paper-dim));
  stroke-dasharray: 4 3;
}
.viz-restart .viz-rc-box.is-missing {
  fill: var(--paper-dim);
}
.viz-restart .viz-rc-label {
  fill: currentColor;
  font-family: var(--font-mono);
  font-size: 11px;
  pointer-events: none;
  transition: fill 0.25s ease;
}
.viz-restart .viz-rc-label.is-onfill {
  fill: var(--paper);
}
.viz-restart .viz-rc-arrow {
  stroke: currentColor;
  stroke-width: 1.4px;
  opacity: 0.5;
}
.viz-restart .viz-rc-arrow.is-asking {
  opacity: 1;
  stroke: var(--accent);
  stroke-dasharray: 5 3;
}

.viz-fuel {
  max-width: 24rem;
  height: auto;
  color: var(--ink);
}
.viz-fuel .viz-fuel-code {
  fill: currentColor;
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: pre;
}
.viz-fuel .viz-fuel-well,
.viz-fuel .viz-fuel-tank {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2px;
  opacity: 0.55;
  transition: opacity 0.25s ease;
}
.viz-fuel .viz-fuel-tank.is-dim,
.viz-fuel .viz-fuel-level.is-dim {
  opacity: 0.18;
}
.viz-fuel .viz-fuel-tank.is-empty {
  stroke: var(--accent);
  stroke-dasharray: 4 3;
  opacity: 1;
}
.viz-fuel .viz-fuel-frame {
  fill: color-mix(in srgb, currentColor 55%, transparent);
}
.viz-fuel .viz-fuel-frame.is-attempt {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.2px;
  stroke-dasharray: 4 3;
}
.viz-fuel .viz-fuel-level {
  fill: color-mix(in srgb, currentColor 30%, transparent);
  transition: opacity 0.25s ease;
}
.viz-fuel .viz-fuel-label {
  fill: currentColor;
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: 0.75;
}
.viz-fuel .viz-fuel-x {
  fill: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
}

.viz-explosion {
  max-width: 24rem;
  height: auto;
  color: var(--ink);
}
.viz-explosion .viz-x-cell {
  fill: color-mix(in srgb, currentColor 30%, transparent);
}
.viz-explosion .viz-x-cell.is-one {
  fill: var(--accent);
}

.viz-x-controls {
  flex-wrap: wrap;
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}
.viz-x-controls button {
  font-size: 0.78rem;
}

.viz-lab {
  max-width: 24rem;
  height: auto;
  color: var(--ink);
}
.viz-lab .viz-lab-dim {
  fill: color-mix(in srgb, currentColor 28%, transparent);
}
.viz-lab .viz-lab-outline {
  fill: none;
  stroke: currentColor;
  stroke-width: 1px;
  opacity: 0.45;
}
.viz-lab .viz-lab-accent {
  fill: var(--accent);
}
.viz-lab .viz-lab-onfill {
  fill: var(--paper);
  font-family: var(--font-mono);
  font-size: 10px;
  pointer-events: none;
}
.viz-lab .viz-lab-line {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.4px;
  opacity: 0.8;
}
.viz-lab .viz-lab-dash {
  stroke: currentColor;
  stroke-dasharray: 4 3;
  stroke-width: 1px;
  opacity: 0.5;
}
.viz-lab .viz-lab-node {
  fill: var(--paper-dim);
  stroke: currentColor;
  stroke-width: 1.3px;
}
.viz-lab .viz-lab-label {
  fill: currentColor;
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: 0.75;
}

.viz-lab-controls {
  flex-wrap: wrap;
  max-width: 30rem;
  margin: 0.4rem auto 0;
}
.viz-lab-controls .viz-slider {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  color: var(--ink-muted);
}
.viz-lab-controls .viz-slider input[type=range] {
  width: 7rem;
  accent-color: var(--accent);
}

.viz-hashtag {
  max-width: 24rem;
  height: auto;
  color: var(--ink);
}
.viz-hashtag .viz-ht-bytes,
.viz-hashtag .viz-ht-step,
.viz-hashtag .viz-ht-verdict {
  fill: var(--paper-dim);
  stroke: currentColor;
  stroke-width: 1.5px;
  transition: fill 0.25s ease, stroke 0.25s ease, opacity 0.25s ease;
}
.viz-hashtag .viz-ht-bytes.is-tampered {
  fill: color-mix(in srgb, var(--accent) 22%, var(--paper-dim));
  stroke-dasharray: 4 3;
}
.viz-hashtag .viz-ht-verdict.is-ok {
  fill: var(--paper-dim);
}
.viz-hashtag .viz-ht-verdict.is-blocked {
  fill: var(--accent);
  stroke: var(--accent);
}
.viz-hashtag .viz-ht-verdict.is-fooled {
  opacity: 0.45;
  stroke-dasharray: 4 3;
}
.viz-hashtag .viz-ht-label {
  fill: currentColor;
  font-family: var(--font-mono);
  font-size: 10px;
  pointer-events: none;
  transition: fill 0.25s ease;
}
.viz-hashtag .viz-ht-label.is-blocked-label {
  fill: var(--paper);
}
.viz-hashtag .viz-ht-rowtitle {
  fill: currentColor;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  opacity: 0.75;
  pointer-events: none;
}
.viz-hashtag .viz-ht-edge {
  stroke: currentColor;
  stroke-width: 1.3px;
  opacity: 0.45;
}

.viz-tape {
  font-family: var(--font-mono);
  letter-spacing: 0.25em;
  font-size: 1.05rem;
  margin: 0.5rem 0 0.1rem;
}
.viz-tape span {
  padding: 0 0.05em;
}
.viz-tape span.consumed {
  color: var(--ink-muted);
}
.viz-tape span.next {
  background: var(--accent);
  color: var(--paper);
  border-radius: 2px;
}

.viz-status {
  font-family: var(--font-body);
  font-size: var(--type-sm);
  color: var(--ink-muted);
  margin: 0.1rem 0 0.6rem;
}
.viz-status.is-accept {
  color: var(--ink);
  font-weight: 600;
}
.viz-status.is-reject {
  color: var(--accent);
}

.viz-csp {
  max-width: 30rem;
  margin: 0 auto;
  text-align: left;
}
.viz-csp .viz-csp-policy {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-muted);
  overflow-wrap: anywhere;
  text-align: center;
  margin: 0.2rem 0 0.7rem;
}
.viz-csp .viz-csp-controls {
  flex-wrap: wrap;
  margin-bottom: 0.45rem;
}
.viz-csp .viz-csp-controls .viz-csp-chip {
  font-family: var(--font-mono);
}
.viz-csp .viz-csp-grouplabel {
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  color: var(--ink-muted);
  min-width: 4.2rem;
  text-align: right;
}
.viz-csp .viz-csp-rows {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.9rem 0 0.3rem;
}
.viz-csp .viz-csp-row {
  display: grid;
  grid-template-columns: 5.4rem 1fr;
  column-gap: 0.6rem;
  row-gap: 0.1rem;
  align-items: baseline;
  padding: 0.35rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 6px;
}
.viz-csp .viz-csp-verdict {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  white-space: nowrap;
}
.viz-csp .viz-csp-verdict.is-blocked {
  color: var(--accent);
  font-weight: 600;
}
.viz-csp .viz-csp-load {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}
.viz-csp .viz-csp-reason {
  grid-column: 1/-1;
  font-family: var(--font-body);
  font-size: var(--type-sm);
  color: var(--ink-muted);
}

.viz-bloom {
  max-width: 24rem;
  height: auto;
  color: var(--ink);
}
.viz-bloom .viz-bit {
  fill: var(--paper-dim);
  stroke: currentColor;
  stroke-width: 1px;
  transition: fill 0.2s ease, stroke 0.2s ease;
}
.viz-bloom .viz-bit.is-set {
  fill: color-mix(in srgb, var(--ink) 65%, var(--paper));
}
.viz-bloom .viz-bit.is-probe {
  stroke: var(--accent);
  stroke-width: 2px;
}
.viz-bloom .viz-bit.is-probe.is-set {
  fill: var(--accent);
}
.viz-bloom .viz-bit-idx {
  fill: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 8px;
}

.viz-bloom-readout {
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  font-variant-numeric: tabular-nums;
}

.viz-controls {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
}
.viz-controls .viz-input {
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--ink-muted);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  width: 8rem;
}
.viz-controls button {
  font-family: var(--font-body);
  font-size: var(--type-sm);
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--ink-muted);
  border-radius: 4px;
  background: var(--paper-dim);
  color: var(--ink);
  cursor: pointer;
}
.viz-controls button:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.viz-controls button.viz-toggle[aria-pressed=true] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--paper);
}
.viz-controls button.viz-toggle[aria-pressed=true]:hover {
  color: var(--paper);
}
.viz-controls button.viz-toggle.is-moot {
  text-decoration: line-through;
  opacity: 0.55;
}

.viz-cvd {
  max-width: 30rem;
  margin: 0 auto;
  text-align: left;
}
.viz-cvd .viz-cvd-scheme {
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  color: var(--ink-muted);
  margin: 0.9rem 0 0.35rem;
}
.viz-cvd .viz-cvd-scheme:first-child {
  margin-top: 0;
}
.viz-cvd .viz-cvd-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  margin-bottom: 0.3rem;
}
.viz-cvd .viz-cvd-view {
  flex: 0 0 6.5rem;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  opacity: 0.9;
}
.viz-cvd .viz-cvd-chips {
  display: flex;
  gap: 0.4rem;
}
.viz-cvd .viz-cvd-chip {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.viz-cvd .viz-cvd-de {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  font-variant-numeric: tabular-nums;
  padding: 0.1rem 0.45rem;
  border-radius: 5px;
}
.viz-cvd .viz-cvd-de.is-ok {
  background: rgba(38, 110, 68, 0.22);
  color: #15522f;
}
.viz-cvd .viz-cvd-de.is-risk {
  background: rgba(170, 45, 45, 0.24);
  color: #7a1f1f;
}

.viz-cvd-controls {
  margin-top: 0.6rem;
}
.viz-cvd-controls .viz-cvd-label {
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  color: var(--ink-muted);
}
.viz-cvd-controls button[aria-pressed=true] {
  border-color: var(--accent);
  color: var(--paper);
  background: var(--accent);
}

.viz-matrix {
  max-width: 18rem;
  height: auto;
}
.viz-matrix .viz-axis {
  stroke: var(--ink-muted);
  stroke-width: 0.75px;
}
.viz-matrix .viz-cell {
  fill: color-mix(in oklab, var(--accent) 22%, transparent);
  stroke: var(--accent);
  stroke-width: 1px;
}
.viz-matrix .viz-ihat {
  stroke: var(--accent);
  stroke-width: 2px;
}
.viz-matrix .viz-jhat {
  stroke: var(--link);
  stroke-width: 2px;
}

.viz-matrix-controls {
  flex-wrap: wrap;
  max-width: 18rem;
  margin: 0.4rem auto 0;
}
.viz-matrix-controls .viz-slider {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: var(--type-sm);
  color: var(--ink-muted);
}
.viz-matrix-controls .viz-slider input[type=range] {
  width: 5rem;
  accent-color: var(--accent);
}

.annotated .annotate-stage {
  position: relative;
  container-type: inline-size;
  line-height: 0;
}
.annotated .annotate-base {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.annotated .annotate-callout {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 1;
  line-height: normal;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.annotated.is-ready .annotate-callout {
  opacity: 1;
}
.annotated .annotate-callout:hover,
.annotated .annotate-callout:focus-within {
  z-index: 3;
}
.annotated .annotate-lens {
  --lens: clamp(56px, 12.5cqw, 104px);
  position: relative;
  display: block;
  width: var(--lens);
  height: var(--lens);
  overflow: hidden;
  border-radius: 50%;
  background: var(--surface, #fff);
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.annotated .annotate-lens img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--zoom) * 100cqw);
  max-width: none;
  height: auto;
  transform: translate(calc(var(--fxf) * var(--zoom) * -100cqw), calc(var(--fyf) * var(--zoom) * var(--ar, 0.75) * -100cqw));
}
.annotated .annotate-label {
  position: absolute;
  top: calc(100% + calc(5px + 4px));
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 2;
  padding: 0.12em 0.5em;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
  background: rgba(20, 20, 20, 0.82);
  border-radius: 3px;
}
.annotated .annotate-label a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.annotated .annotate-label::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: rgba(20, 20, 20, 0.82);
}
.annotated .annotate-callout[data-place=above] .annotate-label {
  top: auto;
  bottom: calc(100% + calc(5px + 4px));
}
.annotated .annotate-callout[data-place=above] .annotate-label::after {
  bottom: auto;
  top: 100%;
  border-bottom-color: transparent;
  border-top-color: rgba(20, 20, 20, 0.82);
}
.annotated .annotate-callout[data-place=left] .annotate-label {
  top: 50%;
  left: auto;
  right: calc(100% + calc(5px + 4px));
  transform: translateY(-50%);
}
.annotated .annotate-callout[data-place=left] .annotate-label::after {
  top: 50%;
  left: 100%;
  bottom: auto;
  transform: translateY(-50%);
  border-bottom-color: transparent;
  border-left-color: rgba(20, 20, 20, 0.82);
}
.annotated .annotate-callout[data-place=right] .annotate-label {
  top: 50%;
  left: calc(100% + calc(5px + 4px));
  transform: translateY(-50%);
}
.annotated .annotate-callout[data-place=right] .annotate-label::after {
  top: 50%;
  right: 100%;
  left: auto;
  bottom: auto;
  transform: translateY(-50%);
  border-bottom-color: transparent;
  border-right-color: rgba(20, 20, 20, 0.82);
}
@media print {
  .annotated .annotate-callout {
    display: none;
  }
}

::highlight(samhita-annotation) {
  text-decoration: underline dotted;
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.annotation-popover {
  max-width: 22rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.75rem 0.9rem;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  line-height: 1.5;
}
.annotation-popover .annotation-popover-note {
  margin: 0 0 0.5rem;
}
.annotation-popover .annotation-popover-note:last-child {
  margin-bottom: 0;
}
.annotation-popover .annotation-meta {
  color: var(--ink-muted);
  font-size: 0.85em;
}

.annotation-composer {
  min-width: 18rem;
}
.annotation-composer .annotation-composer-lead {
  margin: 0 0 0.5rem;
  color: var(--ink-muted);
  font-size: 0.85em;
  font-style: italic;
}
.annotation-composer textarea {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  color: var(--ink);
  background: var(--paper-dim);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.5rem 0.6rem;
  resize: vertical;
  margin: 0 0 0.5rem;
}
.annotation-composer textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.annotation-composer .annotation-submit {
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
}
.annotation-composer .annotation-submit:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.annotation-composer .annotation-submit:disabled {
  opacity: 0.5;
  cursor: default;
}
.annotation-composer .annotation-composer-signin a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  margin-right: 0.75rem;
}
.annotation-composer .annotation-composer-message {
  margin: 0;
  color: var(--ink);
}

.annotation-para-glyph {
  z-index: 29;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  line-height: 1;
  color: var(--accent);
  background: transparent;
  border: none;
  padding: 0.2rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.annotation-para-glyph.is-visible {
  opacity: 0.35;
  pointer-events: auto;
}
.annotation-para-glyph.is-visible:hover, .annotation-para-glyph.is-visible:focus-visible {
  opacity: 0.9;
}

.annotation-affordance {
  z-index: 30;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  color: var(--paper);
  background: var(--accent);
  border: none;
  border-radius: 4px;
  padding: 0.25rem 0.7rem;
  cursor: pointer;
}
.annotation-affordance[hidden] {
  display: none;
}

article .annotations {
  margin: 3rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-sans);
}
article .annotations .annotations-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--type-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.75rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
article .annotations .annotation-marks-toggle {
  font-family: var(--font-sans);
  font-size: 0.8em;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.15rem 0.6rem;
  cursor: pointer;
}
article .annotations .annotation-marks-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
}
article .annotations .annotation-earlier-head {
  color: var(--ink-muted);
  font-size: 0.85em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 1rem;
}
article .annotations .annotation-anchor-clear {
  font: inherit;
  color: var(--link);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
article .annotations .annotation-signout {
  display: inline;
}
article .annotations .annotation-signout button {
  font: inherit;
  color: var(--ink-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
article .annotations .annotation-signout button:hover {
  color: var(--link);
}
article .annotations .annotation-flash {
  display: none;
  margin: 0.75rem 0;
  font-size: var(--type-sm);
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
}
article .annotations .annotation-flash:target {
  display: block;
}
article .annotations .annotations-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
article .annotations .annotations-list[hidden] {
  display: none;
}
article .annotations .annotation-item {
  margin: 0.6rem 0;
  font-size: var(--type-sm);
  color: var(--ink);
  line-height: 1.5;
}
article .annotations .annotation-meta {
  color: var(--ink-muted);
  font-size: 0.85em;
}
article .annotations .annotation-quote {
  color: var(--ink-muted);
  font-style: italic;
}
article .annotations .annotation-quote::before {
  content: "“";
}
article .annotations .annotation-quote::after {
  content: "” — ";
}
article .annotations .annotations-noscript {
  font-size: var(--type-sm);
  color: var(--ink-muted);
}
article .annotations .annotation-form {
  margin: 1rem 0 0.75rem;
}
article .annotations .annotation-form .annotation-form-label {
  display: block;
  font-size: var(--type-sm);
  color: var(--ink-muted);
  margin: 0 0 0.4rem;
}
article .annotations .annotation-form textarea {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  color: var(--ink);
  background: var(--paper-dim);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.6rem 0.75rem;
  resize: vertical;
}
article .annotations .annotation-form textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
article .annotations .annotation-form .annotation-anchor-note {
  font-size: 0.85em;
  color: var(--ink-muted);
  margin: 0.4rem 0 0;
}
article .annotations .annotation-form .annotation-anchor-note[hidden] {
  display: none;
}
article .annotations .annotation-form .annotation-submit {
  margin-top: 0.6rem;
  font-family: var(--font-sans);
  font-size: var(--type-sm);
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
}
article .annotations .annotation-form .annotation-submit:hover {
  border-color: var(--accent);
  color: var(--accent);
}
article .annotations .annotation-auth {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  align-items: baseline;
  font-size: var(--type-sm);
  color: var(--ink-muted);
}
article .annotations .annotation-auth a {
  color: var(--ink-muted);
  text-decoration: none;
}
article .annotations .annotation-auth a:hover {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.site-tools {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.site-keys-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.5rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.site-keys-trigger .search-kbd {
  font-family: var(--font-sans);
  font-size: 0.78em;
  color: inherit;
  border: 0;
  padding: 0;
}
.site-keys-trigger:hover, .site-keys-trigger:focus-visible {
  color: var(--ink);
  border-color: var(--ink-muted);
}

.whichkey {
  position: fixed;
  z-index: 1000;
  left: 50%;
  bottom: clamp(1rem, 4vh, 3rem);
  transform: translateX(-50%);
  width: min(52rem, 94vw);
  box-sizing: border-box;
  padding: 0.9rem 1.1rem 0.75rem;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: var(--sheet-shadow);
}
.whichkey[hidden] {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .whichkey.is-open {
    animation: whichkey-rise 0.16s ease-out;
  }
  .whichkey.is-flash {
    animation: whichkey-shake 0.2s ease-in-out;
  }
}

.whichkey-header {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}

.whichkey-title {
  font-size: var(--type-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}

.whichkey-crumb {
  font-size: var(--type-sm);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.whichkey-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.3rem 0.8rem;
}

.whichkey-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.3rem 0.4rem;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.1s ease, color 0.1s ease;
}
.whichkey-item:hover, .whichkey-item:focus-visible {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.whichkey-item.is-group .whichkey-label {
  color: var(--accent);
  font-weight: 600;
}

.whichkey-key {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.82em;
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  border: 1px solid var(--rule);
  border-radius: 5px;
}

.whichkey-label {
  font-size: var(--type-sm);
  line-height: 1.2;
}

.whichkey-hint {
  margin-top: 0.7rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.78rem;
  color: var(--ink-muted);
}
.whichkey-hint kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0 0.3em;
  border: 1px solid var(--rule);
  border-radius: 4px;
}

@keyframes whichkey-rise {
  from {
    opacity: 0;
    transform: translate(-50%, 0.6rem);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@keyframes whichkey-shake {
  0%, 100% {
    transform: translateX(-50%);
  }
  25% {
    transform: translateX(calc(-50% - 5px));
  }
  75% {
    transform: translateX(calc(-50% + 5px));
  }
}