/* Cover-only chrome is hidden until home-gateway.css loads. */
.home-settings-toggle, .home-language-label, .home-language-chevron { display: none; }

/* liz — a reading surface with a distinct, quieter navigation rail. */
:root {
  --reading-gutter: clamp(32px, 3vw, 56px);
  --reading-column-gap: clamp(40px, 3vw, 56px);
  --reading-toc-width: clamp(208px, calc(20vw - 64px), 248px);
  --reading-frame-width: calc(780px + 2 * var(--reading-gutter));
  --header-padding-x: 24px;
  --reading-layout-width: calc(820px + var(--reading-toc-width) + var(--reading-column-gap) + 2 * var(--reading-gutter));
  --site-sidebar-width: clamp(248px, 18vw, 272px);
  --site-body-font-size: 17px;
  --site-body-line-height: 1.85;
  --site-content-max-width: 860px;
  --site-content-padding-y: 48px;
  --site-content-padding-x: 48px;
  --site-radius: 8px;
  --site-radius-lg: 14px;
  --reading-bg: #fff;
  --reading-rail: #fbfcfe;
  --reading-surface: #f3f5f9;
  --reading-accent: #2f65b4;
  --reading-rule: #e4e9f0;
  /* Navigation and both hover previews share the reading palette. */
  --nav-hover: color-mix(in srgb, var(--reading-accent) 4%, transparent);
  --nav-active: color-mix(in srgb, var(--reading-accent) 8%, transparent);
  --nav-text: color-mix(in srgb, var(--site-default-fg-color) 82%, var(--reading-rail));
  --nav-divider: color-mix(in srgb, var(--reading-rule) 45%, transparent);
  --nav-panel-bg: color-mix(in srgb, var(--reading-surface) 18%, var(--reading-bg));
  --nav-panel-shadow: 0 12px 36px -12px #1423361f, 0 2px 6px #14233608;
  --site-nav-radius: 6px;
  /* Menu-row states are independent of the preview panel's palette. */
  --site-nav-hover-bg: color-mix(in srgb, var(--site-default-fg-color) 5%, transparent);
  --site-nav-selected-bg: color-mix(in srgb, var(--reading-accent) 8%, transparent);
  --hud-progress-wash: rgb(47 101 180 / 7%);
}
[data-theme='dark'] {
  --reading-bg: #11161e;
  --reading-rail: #121820;
  --reading-surface: #1b2432;
  --reading-accent: #a8c1ed;
  --reading-rule: #283344;
  --nav-panel-shadow: 0 14px 40px -12px #0005, 0 2px 8px #0002;
  --hud-progress-wash: rgb(168 193 237 / 7%);
}
@media (prefers-color-scheme: dark) {
  [data-theme='auto'] {
    --reading-bg: #11161e; --reading-rail: #121820;
    --reading-surface: #1b2432; --reading-accent: #a8c1ed; --reading-rule: #283344;
    --nav-panel-shadow: 0 14px 40px -12px #0005, 0 2px 8px #0002;
    --hud-progress-wash: rgb(168 193 237 / 7%);
  }
}
::selection { background: var(--site-accent-fg-color--transparent); color: var(--site-default-fg-color); }
.site-header { background: var(--reading-bg); border-bottom-color: transparent; }
.site-header__inner { padding-inline: 24px; gap: 14px; }
.site-logo { min-height: 40px; }
.site-logo .liz-wordmark { width: 43px; height: 35px; }
.site-logo .liz-wordmark path { stroke: currentColor; stroke-width: .5; stroke-linejoin: round; }
.site-logo:focus-visible { --control-focus-offset: 3px; border-radius: 3px; }
.site-header__menu-label { display: none; }
.hamburger-line { stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; transform-box: fill-box; transform-origin: center; transition: transform 180ms ease, opacity 150ms ease; }
.site-header__hamburger--open .hamburger-line--top { transform: translateY(6px) rotate(45deg); }
.site-header__hamburger--open .hamburger-line--mid { opacity: 0; }
.site-header__hamburger--open .hamburger-line--bot { transform: translateY(-6px) rotate(-45deg); }
.site-search__toggle { background: var(--reading-surface); border-color: transparent; padding-inline: 12px; border-radius: 7px; }
.site-search__toggle:hover { border-color: var(--reading-rule); }
.site-search__toggle-key { margin-left: auto; border: 0; background: transparent; }
.header-ask-link { font-weight: 500; }
body:not(.is-cover) .site-main { background: var(--reading-bg); }
.site-sidebar { background: var(--reading-rail); border-right: 1px solid var(--nav-divider); scrollbar-width: thin; }
.site-sidebar__scroll { padding: 24px 14px 20px; }
.site-nav__heading { padding: 0 12px 16px; font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--site-default-fg-color--light); }
.site-nav__area-title { color: var(--nav-text); font-size: 15px; font-weight: 500; line-height: 1.5; padding: 8px 12px; border-radius: var(--site-nav-radius); gap: 12px; }
.site-nav summary > span { flex: 1; min-width: 0; text-wrap: balance; word-break: normal; overflow-wrap: anywhere; line-break: strict; }
.site-nav summary > .site-nav__chevron { order: 1; margin: 0 0 0 auto; width: 12px; height: 12px; opacity: .4; }
.site-nav__chevron path { stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.site-nav details[open] > summary > .site-nav__chevron { opacity: .65; }
.site-nav__area + .site-nav__area { margin-top: 6px; }
.site-nav__area[open] { margin-bottom: 12px; }
.site-nav__area--active > .site-nav__area-title { color: var(--site-default-fg-color); font-weight: 600; }
.site-nav__section-title { margin-left: 10px; padding: 7px 12px; font-size: 14px; line-height: 1.5; font-weight: 400; color: var(--nav-text); gap: 12px; border-radius: var(--site-nav-radius); }
.site-nav__section--active > .site-nav__section-title { color: var(--site-default-fg-color); font-weight: 500; }
.site-nav__section-body { margin-left: 10px; border-left: 0; }
.site-nav__link { padding: 8px 12px; font-size: 14px; color: var(--nav-text); border: 0; border-radius: var(--site-nav-radius); margin: 2px 0; }
.site-nav__area-body > .site-nav__link,
.site-nav__section-body > .site-nav__link { margin-left: 10px; }
.site-nav__section-body > .site-nav__link:last-child { margin-bottom: 6px; }
.site-nav__utilities { margin-top: auto; padding-top: 12px; border-top: 0; }
.site-nav__utility { border-top: 0; margin-top: 2px; padding-inline: 12px; gap: 10px; font-size: 14px; font-weight: 400; border-radius: var(--site-nav-radius); }
.site-nav__utility--mobile { display: none; }
.site-nav__theme { width: 100%; border: 0; background: none; font-family: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
.site-nav__utility svg { width: 16px; height: 16px; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .65; }
/* One row treatment for folders, articles and utilities. Neutral hover stays
   distinct from the current page, including while its preview is open. */
.site-sidebar :is(.site-nav__area-title, .site-nav__section-title, .site-nav__link, .site-nav__utility) {
  background: transparent; box-shadow: none; animation: none;
  text-decoration: none;
  transition: color 140ms ease, background-color 140ms ease;
}
.site-sidebar .site-nav__preview-target {
  color: var(--site-default-fg-color); background: var(--site-nav-hover-bg);
}
@media (hover: hover) {
  .site-sidebar :is(.site-nav__area-title, .site-nav__section-title, .site-nav__link, .site-nav__utility):hover {
    color: var(--site-default-fg-color); background: var(--site-nav-hover-bg);
  }
}
.site-sidebar :is(.site-nav__link--active, .site-nav__utility--active),
.site-sidebar :is(.site-nav__link--active, .site-nav__utility--active):is(:hover, .site-nav__preview-target) {
  color: var(--reading-accent); background: var(--site-nav-selected-bg); font-weight: 500;
}
@media (prefers-reduced-motion: reduce) {
  .site-sidebar :is(.site-nav__area-title, .site-nav__section-title, .site-nav__link, .site-nav__utility) { transition: none; }
}
.site-nav__link:focus-visible, .site-nav summary:focus-visible, .site-nav__utility:focus-visible { --control-focus-offset: 1px; }
/* The shared surface stays behind the rows and inside the sidebar's scroll
   coordinates. Only it moves; text, hit targets and the hover preview stay put. */
.site-sidebar--selection-ready .site-sidebar__scroll { position: relative; isolation: isolate; overflow: clip; }
.site-nav__selection-surface {
  position: absolute; top: 0; left: 0; z-index: -1;
  width: 0; height: 0; opacity: 0;
  pointer-events: none; border-radius: var(--site-nav-radius);
  background: var(--site-nav-selected-bg);
  will-change: transform;
}
.site-sidebar.site-sidebar--selection-ready :is(.site-nav__link--active, .site-nav__utility--active, .site-nav__selection-target) {
  background: transparent; color: var(--reading-accent);
}
.reading-header { margin-bottom: 36px; }
.reading-header h1 { margin: 0 0 18px; font-size: 40px; font-weight: 650; line-height: 1.3; letter-spacing: -.035em; overflow-wrap: anywhere; text-wrap: pretty; }
.reading-header .site-tags { margin: 0; gap: 8px 14px; align-items: center; }
.site-tags .site-tag { border: 0; background: none; padding: 0; font-size: 12px; color: var(--site-default-fg-color--light); }
.site-meta-badge { padding: 0; border: 0; background: none; font-size: 12px; }
.reading-header .site-meta-badge { order: 1; margin-left: 4px; padding-left: 14px; border-radius: 0; border-left: 1px solid var(--reading-rule); }
.reading-article .site-body { font-size: 17px; line-height: 1.85; overflow-wrap: anywhere; }
.site-content h2 { margin-top: 2.3em; margin-bottom: .9em; border: 0; padding: 0; font-size: 25px; font-weight: 550; line-height: 1.5; letter-spacing: -.02em; text-wrap: pretty; }
.site-content h3 { margin-top: 1.9em; font-size: 20px; line-height: 1.5; }
.site-body p { margin-bottom: 1.2em; }
.reading-article .site-body a { color: var(--reading-accent); text-decoration-color: color-mix(in srgb, var(--reading-accent) 35%, transparent); text-underline-offset: .22em; }
.site-content pre { border: 1px solid var(--reading-rule); border-radius: 10px; padding: 20px 24px; background: var(--reading-surface); font-size: 14px; line-height: 1.7; }
.site-content pre.syn-highlight { background: var(--reading-surface); }
.site-content .syn-header { margin: -20px -24px 16px; padding: 10px 24px; background: transparent; border: 0; border-bottom: 1px solid var(--reading-rule); border-radius: 0; font-size: 10px; font-weight: 600; letter-spacing: .08em; color: var(--site-default-fg-color--light); }
.syn-header ~ .site-copy-btn { top: 8px; right: 12px; }
.site-content :not(pre) > code { padding: .12em .32em; border: 0; background: var(--reading-surface); border-radius: 4px; font-size: .85em; }
.reading-article .site-body blockquote:not([class*="markdown-alert"]) { padding: 4px 20px; border-left: 2px solid var(--reading-rule); border-radius: 0; background: transparent; color: var(--site-default-fg-color); }
.site-content blockquote > :first-child { margin-top: 0; }
.site-content blockquote > :last-child { margin-bottom: 0; }
.reading-article table { display: block; width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border: 0; border-radius: 0; font-size: 15px; }
.reading-article th, .reading-article td { min-width: 9em; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--reading-rule); line-height: 1.8; }
.reading-article th { background: var(--reading-surface); font-size: 14px; font-weight: 600; }
.reading-article tr:nth-child(2n) { background: transparent; }
.reading-article .img-svg { margin-block: 28px; border-radius: 10px; border-color: var(--reading-rule); }
.site-pager { margin-top: 56px; gap: 24px; border-top-color: var(--reading-rule); }
.site-pager__link { min-width: 0; padding: 16px 0; border-radius: 0; border: 0; background: none; }
.site-pager__title { display: block; }
.site-pager__link:hover { background: transparent; }
.site-pager__link:hover .site-pager__title { color: var(--reading-accent); }
.site-footer { color: var(--site-default-fg-color--light); font-size: 12px; border-top-color: var(--reading-rule); }
/* The HUD gives location the flexible column and keeps global actions together. */
.site-header__context { flex: 1 1 0; min-width: 0; }
.site-header__inner > :not(.site-header__context) { flex-shrink: 0; }
.site-header__context .site-breadcrumbs {
  display: flex; align-items: center; gap: 10px;
  min-width: 0; margin: 0; font-size: 14px; line-height: 1.5; white-space: nowrap;
}
.site-header__context .site-breadcrumbs > :is(a, [aria-current]) {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.site-header__context .site-breadcrumbs > a { flex: 0 1 auto; max-width: 12em; }
.site-header__context .site-breadcrumbs > [aria-current] { flex: 0 1 auto; color: var(--site-default-fg-color); font-weight: 500; }
.site-header__context .site-breadcrumbs__sep { flex: 0 0 auto; margin: 0; }
.site-header__context .site-breadcrumbs__home,
.site-header__context .site-breadcrumbs__home + .site-breadcrumbs__sep { display: none; }
.site-header__context a:focus-visible { --control-focus-offset: -2px; border-radius: 2px; }
@media (min-width: 1025px) {
  /* Increase reading scale gently on roomy desktops without widening the
     column or scaling the navigation and headings with the viewport. */
  .reading-article .site-body { font-size: clamp(18px, calc(13px + .3125vw), 19px); line-height: 1.8; }
  .site-nav__section-title, .site-nav__link, .site-nav__utility { font-size: 15px; }
  .site-nav__heading, .reading-layout .site-toc__heading { font-size: 13px; }
  .reading-layout .site-toc__link { font-size: 14px; }
  .reading-header .site-tag, .reading-header .site-meta-badge { font-size: 13px; }
  .reading-article pre { font-size: 15px; }
  .reading-article pre code { font-size: inherit; }
  body:not(.is-cover) .site-brand { width: calc(var(--site-sidebar-width) - 38px); }
  body:not(.is-cover) .site-logo { width: auto; }
  body:not(.is-cover) .site-header__context { padding-left: var(--reading-gutter); }
  body:not(.is-cover) .site-search__toggle { width: clamp(160px, 16vw, 220px); }
  /* Percentages resolve against the header's content box. Add its two
     gutters back to share the article's available width, scrollbar included. */
  body:has(.reading-layout) .site-header__context {
    padding-left: calc(var(--reading-gutter) + max(0px,
      (100% + 2 * var(--header-padding-x) - var(--site-sidebar-width) - var(--reading-layout-width)) / 2));
  }
  body:has(.browse-page) .site-header__context {
    padding-left: calc(48px + max(0px,
      (100% + 2 * var(--header-padding-x) - var(--site-sidebar-width) - 1040px) / 2));
  }
  body:has(.learning-main) .site-header__context {
    padding-left: calc(var(--learning-page-gutter, 36px) + max(0px,
      (100% + 2 * var(--header-padding-x) - var(--site-sidebar-width) - var(--learning-workspace-max, 1800px)) / 2));
  }
  .reading-layout {
    margin-left: max(0px, calc((100% - var(--reading-layout-width)) / 2));
    margin-right: auto;
  }
}
@media (min-width: 769px) and (max-width: 1399px) {
  :root { --site-content-padding-x: 36px; }
}

/* An explicit text column and TOC column; missing TOCs keep the reading axis. */
.reading-article .site-body > :first-child { margin-top: 0; }
.reading-article .site-body :is(h2, h3, h4) + :is(h3, h4) { margin-top: 1.2em; }
.reading-article .site-body :is(ul, ol) { padding-left: 1.5em; margin-block: .75em 1.2em; }
.reading-article .site-body li + li { margin-top: .35em; }
.reading-article .site-body li > :is(ul, ol) { margin-block: .4em; }
.reading-article .site-body li > p:last-child { margin-bottom: 0; }
.site-body details { margin: 1.15em 0; }
.site-body details > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; list-style: none; cursor: pointer;
  color: var(--site-default-fg-color); font-weight: 500;
  transition: color 180ms ease;
}
.site-body details > summary::-webkit-details-marker,
.site-body details > summary::marker { display: none; content: none; }
.site-body details > summary::before {
  content: ''; flex: none; width: 7px; height: 7px; margin-bottom: 1px;
  border-right: 1.5px solid var(--site-default-fg-color--light);
  border-bottom: 1.5px solid var(--site-default-fg-color--light);
  transform: rotate(-45deg);
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1);
}
.site-body details[data-expanded="true"] > summary::before,
.site-body details[open]:not([data-expanded="false"]) > summary::before { transform: rotate(45deg); }
.site-body details > summary:hover { color: var(--reading-accent); }
.site-body details > [data-disclosure-body] > :first-child { margin-top: .55em; }
.site-body details > [data-disclosure-body] > :last-child { margin-bottom: 0; }
.site-toc__inner { padding-left: 16px; border-left-color: var(--reading-rule); }
.site-toc__heading { margin-bottom: 12px; font-size: 12px; font-weight: 500; letter-spacing: .025em; }
.site-toc__link {
  --toc-indent: 0px;
  /* Extend the hit area around the text without moving its reading axis.
     Nested rows carry their own inset, including the hover background. */
  margin: 0 -8px 0 calc(var(--toc-indent) - 8px);
  padding: 6px 8px; border: 0; border-radius: 6px;
  transition: color 150ms ease, background-color 150ms ease;
  font-size: 13px; font-weight: 400; line-height: 1.65;
  /* Word spans keep short CJK words intact; long identifiers can still wrap. */
  word-break: normal; overflow-wrap: anywhere; line-break: strict; text-wrap: balance;
}
.site-toc__word { white-space: nowrap; }
.site-toc__link[data-level] { padding-left: 8px; }
.site-toc__link[data-level="3"] { --toc-indent: 12px; }
.site-toc__link[data-level="4"] { --toc-indent: 24px; }
.site-toc__link[data-level="5"], .site-toc__link[data-level="6"] { --toc-indent: 36px; }
.site-toc__link--active { color: var(--reading-accent); }
.site-toc__link:is(:hover, :focus-visible, .site-toc__preview-target) {
  color: var(--reading-accent);
  background: color-mix(in srgb, var(--reading-accent) 8%, transparent);
}
.site-toc__link:focus-visible { --control-focus-offset: 2px; }
.site-toc__slider { background: var(--reading-accent); border-radius: 2px; will-change: auto; transition: transform 180ms ease, height 180ms ease, opacity 120ms ease; }
.site-toc-mobile { background: transparent; border-width: 1px 0; border-radius: 0; margin-block: 16px 24px; }
.site-toc-mobile > summary { padding: 12px 0; font-weight: 500; }
.site-toc-mobile__nav { padding-inline: 0; }
.site-toc-mobile__nav a { padding-block: 8px; line-height: 1.65; word-break: normal; overflow-wrap: anywhere; line-break: strict; text-wrap: balance; }
@media (min-width: 769px) {
  .reading-layout { display: block; max-width: var(--reading-frame-width); margin-block: 0; }
  .reading-layout > .reading-article { max-width: none; margin: 0; padding: 48px var(--reading-gutter) 64px; }
}
@media (min-width: 1025px) and (max-width: 1359px) {
  .reading-layout .site-toc { display: none; }
  .reading-layout .site-toc-mobile { display: block; }
}
@media (min-width: 1360px) {
  :root { --reading-frame-width: var(--reading-layout-width); }
  .reading-layout {
    display: grid;
    grid-template-columns: minmax(0, 820px) var(--reading-toc-width);
    gap: var(--reading-column-gap);
    max-width: var(--reading-frame-width);
    padding: 48px var(--reading-gutter) 64px;
    align-items: start;
  }
  .reading-layout .site-toc-mobile { display: none; }
  .reading-layout > .reading-article { min-width: 0; max-width: none; margin: 0; padding: 0; }
  .reading-layout .site-toc {
    width: auto; padding: 2px 8px 16px 0; top: 80px;
    max-height: calc(100dvh - 104px); scrollbar-width: thin;
  }
}

/* Home is a restrained personal cover; the learning map provides its overview. */
body.is-cover { height: auto; min-height: 100dvh; overflow: visible; }
body.is-cover .site-header { background: var(--site-default-bg-color); border-bottom-color: transparent; }
body.is-cover .site-header__inner { padding-inline: 40px; }
body.is-cover .site-sidebar {
  position: fixed; inset: var(--site-header-height) auto 0 0; z-index: 50;
  width: min(300px, 85vw); height: calc(100dvh - var(--site-header-height));
  background: var(--site-raised-bg-color); border-right: 1px solid var(--site-default-fg-color--lightest);
  transform: translateX(-100%);
  transition: transform 180ms cubic-bezier(.4, 0, 1, 1);
}
body.is-cover .site-sidebar--open { transform: translateX(0); transition: transform 240ms cubic-bezier(.16, 1, .3, 1); }
/* Lock the root only. Making body a scroll container detaches its sticky
   header from the viewport when a drawer opens halfway through an article. */
html:has(.site-sidebar--open) { overflow: hidden; }
body.is-cover:has(.site-sidebar--open) { overflow: visible; }
body.is-cover .site-nav__area { animation: none; }
.site-main--cover { min-height: calc(100dvh - var(--site-header-height)); padding: 0; }
.site-main--cover .site-content { padding: 0 24px 76px; }
.site-main--cover .site-error { padding: 48px 24px; }
.home-cover {
  min-height: calc(100dvh - var(--site-header-height) - 76px);
  padding: 64px 16px 48px; transform: translateY(-12px);
}
.home-cover .cover-mark { font-size: clamp(64px, 7.2vw, 104px); font-weight: 300; letter-spacing: .18em; text-indent: .18em; line-height: 1.3; animation: coverFade 400ms ease-out both; }
.home-cover .cover-tagline { margin-top: 24px; font-size: 15px; letter-spacing: .24em; text-indent: .24em; animation: coverFade 360ms 60ms ease-out both; }
.home-cover .cover-rule { width: 24px; margin: 32px auto 26px; background: var(--site-border-color); animation: none; }
.home-cover .cover-mail { font-size: 13px; letter-spacing: .035em; animation: coverFade 360ms 100ms ease-out both; }
.cover-heatmap { margin-top: 40px; min-height: 114px; animation: coverFade 360ms 140ms ease-out both; }
.cover-heatmap__grid { max-width: min(300px, 100%); height: auto; }
.cover-heatmap__caption { font-size: 11px; color: var(--site-default-fg-color--light); }
svg rect.hm-cell { animation: none; }

/* Chapter indexes follow a book's hierarchy: spacious heading, efficient rows. */
.browse-page, .agent-console { width: min(1040px, 100%); padding: 48px 48px 64px; }
.browse-page h1 { font-size: 38px; margin-bottom: 28px; }
.browse-toolbar { margin-bottom: 32px; gap: 12px 18px; }
.browse-search { background: var(--site-raised-bg-color); border-color: var(--site-default-fg-color--lightest); }
.browse-group { border-color: var(--site-default-fg-color--lightest); }
.browse-group > summary { min-height: 56px; font-size: 16px; font-weight: 500; }
.browse-group > summary > .browse-group-count { margin-left: 12px; font-weight: 400; }
.browse-group-body { padding: 0 0 16px 30px; }
.browse-page .site-list__item a { padding: 10px 12px; font-size: 15px; border-radius: 6px; }
.browse-page .site-list__item a:hover { background: var(--site-surface-color); }
.browse-tag-list .site-tag { padding-block: 15px; }
.browse-actions button { padding-inline: 8px; }

/* A quiet index. Keep the established header/content axis and preview surface. */
[data-browse="directory"] h1 { margin-bottom: 16px; }
[data-browse="directory"] .browse-toolbar { margin-bottom: 24px; gap: 8px 16px; }
[data-browse="directory"] .browse-toolbar--compact { margin-top: -4px; margin-bottom: 20px; }
[data-browse="directory"] .browse-search { width: min(300px, 100%); background: transparent; }
[data-browse="directory"] .browse-search[hidden],
[data-browse="directory"] .browse-actions[hidden] { display: none; }
[data-browse="directory"] .browse-group { border: 0; }
[data-browse="directory"] .browse-group + .browse-group { margin-top: 4px; }
[data-browse="directory"] .browse-group > summary {
  min-height: 48px; padding: 10px 8px; border-radius: 6px;
  font-weight: 600; transition: color 140ms ease, background-color 140ms ease;
}
[data-browse="directory"] .browse-group > summary::before { transition: transform 220ms cubic-bezier(.22, 1, .36, 1); }
[data-browse="directory"] .browse-group[data-expanded="false"] > summary::before { transform: rotate(-45deg); }
[data-browse="directory"] .browse-group[data-expanded="true"] > summary::before { transform: rotate(45deg); }
[data-browse="directory"] .browse-group-body { padding: 0; overflow: clip; overflow-clip-margin: 4px; }
[data-browse="directory"] .browse-group-content { padding: 0 0 12px 24px; }
[data-browse="directory"] .site-list__item > a {
  min-height: 44px; padding: 10px 12px; animation: none;
  transition: color 140ms ease, background-color 140ms ease;
}
[data-browse="directory"] .site-list__title { white-space: normal; overflow-wrap: anywhere; }
[data-browse="directory"] .site-list__item > a.site-nav__preview-target {
  color: var(--site-accent-fg-color); background: var(--site-surface-color);
}
[data-browse="directory"] .site-list__item > a:is(:focus-visible, .site-nav__preview-target)::after { opacity: .6; transform: translateX(0); }
[data-browse="directory"] .site-footer { margin-top: 36px; }
@media (max-width: 768px) {
  [data-browse="directory"] .browse-search { width: 100%; }
  [data-browse="directory"] .browse-group-content { padding-left: 16px; }
  [data-browse="directory"] .browse-actions { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  [data-browse="directory"] .browse-group > summary,
  [data-browse="directory"] .browse-group > summary::before,
  [data-browse="directory"] .site-list__item > a,
  [data-browse="directory"] .site-list__item > a::after { transition: none; }
}

/* The workspace uses the same page/rail relationship as an article. */
.ask-workspace { max-width: 1160px; padding: 52px 48px 64px; }
.ask-workspace:not(.has-answer) { max-width: 920px; padding-top: clamp(56px, 10vh, 96px); }
.ask-intro { margin-bottom: 32px; }
.ask-intro__title { gap: 14px; align-items: center; }
.ask-intro__title > svg { width: 26px; height: 26px; color: var(--reading-accent); }
.ask-intro h1 { font-size: 40px; font-weight: 600; letter-spacing: -.035em; }
.ask-intro > p:last-child { font-size: 16px; margin-top: 16px; }
.ask-composer { border: 1px solid var(--reading-rule); border-radius: 12px; padding: 24px; background: var(--reading-bg); box-shadow: none; transition: border-color 180ms ease, box-shadow 180ms ease; }
.ask-composer:focus-within { background: var(--reading-bg); border-color: color-mix(in srgb, var(--reading-accent) 50%, var(--reading-rule)); box-shadow: none; }
.ask-composer textarea { min-height: 116px; font-size: 18px; line-height: 1.8; }
.ask-composer__foot { border-top: 0; margin-top: 16px; padding-top: 0; }
.ask-composer__meta, #ask-count { font-size: 12px; }
.ask-suggestions-label { margin-top: 32px; font-size: 12px; }
.ask-suggestions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ask-suggestions button { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 8px; background: transparent; border: 1px solid var(--reading-rule); font-size: 13px; line-height: 1.8; color: var(--site-default-fg-color); }
.ask-suggestions button::before { order: 1; align-self: flex-end; }
.ask-suggestions button:hover { background: var(--reading-rail); color: var(--reading-accent); }
.ask-disclosure { margin-top: 32px; padding-top: 0; border: 0; font-size: 12px; line-height: 1.8; }
.ask-disclosure > p { margin: 0; }
.ask-privacy { margin-top: 8px; }
.ask-privacy > summary { width: fit-content; cursor: pointer; }
.ask-privacy > p { max-width: 600px; margin: 8px 0 0; }
.ask-submit { background: var(--site-default-fg-color); color: var(--reading-bg); border-color: transparent; font-weight: 500; padding-inline: 18px; border-radius: 8px; }
.ask-submit:hover:not(:disabled) { background: var(--reading-accent); color: var(--reading-bg); }
.ask-workspace.has-answer .ask-intro { margin-bottom: 36px; }
.ask-workspace.has-answer .ask-intro h1 { font-size: 16px; font-weight: 500; color: var(--site-default-fg-color--light); }
.ask-workspace.has-answer .ask-intro__title > svg { width: 18px; height: 18px; }
.ask-question-row { margin: 0 0 4px; padding-bottom: 28px; border-bottom-color: var(--reading-rule); }
.ask-question-row .ask-question-echo { font-size: 30px; font-weight: 600; line-height: 1.5; letter-spacing: -.02em; }
.ask-answer { font-size: 17px; line-height: 1.9; }
.ask-answer h2 { font-size: 23px; margin-top: 36px; }
.ask-progress { font-size: 12px; margin-bottom: 24px; }
.ask-sources { border-color: var(--reading-rule); background: var(--reading-rail); border-radius: 12px; padding: 18px; }
.ask-sources__heading { border-bottom-color: var(--reading-rule); }
.ask-sources__heading h2 { font-size: 13px; }
.ask-sources li { border-bottom-color: var(--reading-rule); }
.ask-sources a { font-size: 13px; }
.ask-sources .ask-source__heading, .ask-sources p { font-size: 12px; }
@media (min-width: 1200px) {
  .ask-response { grid-template-columns: minmax(0, 1fr) 264px; column-gap: 36px; row-gap: 24px; }
  .ask-sources { position: sticky; padding: 18px; top: 76px; max-height: calc(100dvh - 104px); overflow-y: auto; scrollbar-width: thin; }
  .ask-sources ol { grid-template-columns: 1fr; }
  .ask-sources__heading { top: -18px; padding-top: 12px; background: var(--reading-rail); }
}

/* Command palette: a single input surface, then a separate results plane. */
.site-search__dropdown { width: min(780px, calc(100vw - 32px)); border: 1px solid var(--reading-rule); border-radius: 18px; background: var(--reading-bg); box-shadow: 0 32px 100px rgba(0, 0, 0, .24), 0 4px 16px var(--site-shadow-color); }
.site-search__dropdown::backdrop { background: #101b2d40; backdrop-filter: blur(3px); }
.site-search__dropdown {
  --command-safe-top: env(safe-area-inset-top);
  --command-safe-bottom: env(safe-area-inset-bottom);
  max-height: var(--command-available-height, calc(100dvh - 32px));
  overflow: hidden;
  overscroll-behavior: contain;
}
.site-search__dropdown[open] { display: flex; flex-direction: column; }
.site-search__head, .site-search__composer, .site-search__ask-foot { flex: none; }
.site-search__head { padding: 12px 24px 0; min-height: 58px; }
.site-search__tabs { background: transparent; padding: 0; gap: 0; border-radius: 0; }
.site-search__tab { min-width: 104px; min-height: 42px; font-size: 14px; font-weight: 500; border-radius: 0; }
.site-search__tab.is-active { color: var(--reading-accent); }
.site-search__tab-glider { height: 2px; width: 50%; inset: auto auto 0 0; border-radius: 2px; background: var(--reading-accent); box-shadow: none; border: 0; }
.site-search__close { border: 0; background: transparent; color: var(--site-default-fg-color--light); font-size: 12px; }
/* The command palette keeps its integrated, borderless desktop field. Its caret
   and mobile focus border identify input focus; buttons retain shared keyboard rings. */
.site-search__composer { margin: 0; padding: 6px 24px 14px; min-height: 84px; border: 0; border-radius: 0; background: transparent; }
.site-search__composer:focus-within { border: 0; box-shadow: none; }
.site-search__composer > svg { margin-left: 0; width: 22px; height: 22px; color: var(--reading-accent); }
.site-search__input { font-size: 21px; padding: 16px 14px; letter-spacing: -.01em; }
.site-search__input::placeholder { color: var(--site-default-fg-color--light); opacity: .8; }
.site-search__submit {
  position: relative;
  flex: 0 0 44px; width: 44px; height: 44px; margin-right: 0;
  border: 1px solid transparent; border-radius: 50%;
  background: var(--reading-accent); color: var(--reading-bg);
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.site-search__submit svg { width: 20px; height: 20px; stroke-width: 2; }
.site-search__dropdown[data-mode="ask"] .site-search__submit:disabled {
  opacity: 1 !important; cursor: default; background: var(--reading-surface);
  border-color: var(--reading-rule); color: var(--site-default-fg-color--light);
}
@media (hover: hover) {
  .site-search__submit:enabled:hover { filter: none; background: color-mix(in srgb, var(--reading-accent) 88%, var(--site-default-fg-color)); }
}
.site-search__submit:enabled:active { transform: scale(.94); }
.site-search__submit[aria-busy="true"] { cursor: progress; }
.site-search__submit[aria-busy="true"] svg { visibility: hidden; }
.site-search__submit[aria-busy="true"]::after {
  content: ''; position: absolute; width: 18px; height: 18px; border: 2px solid var(--reading-rule);
  border-top-color: var(--reading-accent); border-radius: 50%; animation: search-spin .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .site-search__submit { transition: none; }
  .site-search__submit[aria-busy="true"]::after { animation: none; }
}
.site-search__viewport {
  display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; max-height: none;
  border-top: 1px solid var(--reading-rule); background: var(--reading-surface);
}
.site-search__panel.is-active { flex: 0 1 auto; min-height: 0; max-height: 620px; }
.site-search__start { padding: 20px 16px; }
.site-search__key-hints { gap: 12px 24px; font-size: 12px; }
.site-search__key-hints kbd { background: var(--reading-bg); border-color: var(--reading-rule); }
.site-search__keyboard-foot { flex: none; margin-top: auto; padding: 12px 16px; border-top: 1px solid var(--reading-rule); background: var(--reading-bg); gap: 8px 16px; }
.site-search__dropdown[data-mode="ask"] [data-command-select-hint] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .site-search__dropdown[data-mode="search"][data-search-empty="true"] .site-search__viewport { display: none; }
}
.site-search__results { padding: 12px; }
.site-search__results:has(> .site-search__start) { min-height: 0; }
.site-search__result { border-radius: 9px; padding: 12px 16px; border: 1px solid transparent; }
.site-search__result-title { font-size: 17px; font-weight: 600; }
.site-search__result-excerpt { margin-block: 6px; font-size: 13px; line-height: 1.75; }
.site-search__result-footer { opacity: 1; font-size: 11px; }
.site-search__result--active, .site-search__result:hover { background: var(--reading-bg); border-color: var(--reading-rule); }
.site-search__ask-body { padding: 28px; border-top: 0; }
.site-search__ask-empty { gap: 16px; }
.site-search__ask-mark { background: var(--reading-bg); color: var(--reading-accent); border-radius: 12px; }
.site-search__ask-empty h2 { font-size: 19px; }
.site-search__ask-empty p { font-size: 14px; }
.site-search__ask-examples { padding-left: 58px; gap: 8px; }
.site-search__ask-examples button { padding: 12px 14px; border: 1px solid var(--reading-rule); border-radius: 8px; background: var(--reading-bg); font-size: 13px; }
.site-search__ask-foot { flex-wrap: wrap; background: var(--reading-bg); border-top: 1px solid var(--reading-rule); padding: 14px 24px; font-size: 12px; }
.site-search__ask-foot > span { flex: 1 1 160px; }
.site-search__ask-foot a { margin-left: auto; }
.site-search__ask-answer { font-size: 16px; }
:is(.ask-answer, .site-search__ask-answer) pre { background: var(--reading-surface); border-color: var(--reading-rule); border-radius: 10px; }
:is(.ask-answer, .site-search__ask-answer) :not(pre) > code { background: var(--reading-surface); }
.site-search__ask-sources li { background: var(--reading-bg); border-color: var(--reading-rule); }
.diagram-lightbox .diagram-lightbox__stage { background: var(--reading-bg); border: 1px solid var(--site-default-fg-color--lightest); box-shadow: 0 20px 80px rgba(0, 0, 0, .15); }
.diagram-lightbox__close { top: calc(5vh + 12px); right: calc(4vw + 12px); box-shadow: none; border-color: var(--site-default-fg-color--lightest); }
.diagram-lightbox__tools { background: var(--reading-bg); box-shadow: 0 4px 20px var(--site-shadow-color); }
/* MCP: horizontal client selection and a focused configuration editor. */
html:has(.agent-connect-page) { scrollbar-gutter: auto; }
.agent-console.agent-connect-page {
  --agent-surface: color-mix(in srgb, var(--reading-surface) 65%, var(--reading-bg));
  --agent-rule: color-mix(in srgb, var(--reading-rule) 75%, var(--site-default-fg-color--light));
  --agent-accent: var(--reading-accent); --agent-code-bg: #f7f8fa; --agent-code-bar: #f0f2f5;
  --agent-action: #2f65b4; --agent-green: #32806c;
  --agent-code-text: #748094; --agent-code-key: #555d91; --agent-code-string: #39745f;
  width: min(1040px, 100%); padding: 32px 48px 12px;
}
[data-theme='dark'] .agent-connect-page {
  --agent-accent: var(--reading-accent); --agent-code-bg: #151b26; --agent-code-bar: #1b2230;
  --agent-action: #365f9b; --agent-green: #79b7a3;
  --agent-code-text: #8997ad; --agent-code-key: #c5c6e5; --agent-code-string: #9bc7b4;
}
@media (prefers-color-scheme: dark) {
  [data-theme='auto'] .agent-connect-page {
    --agent-accent: var(--reading-accent); --agent-code-bg: #151b26; --agent-code-bar: #1b2230;
  --agent-action: #365f9b; --agent-green: #79b7a3;
    --agent-code-text: #8997ad; --agent-code-key: #c5c6e5; --agent-code-string: #9bc7b4;
  }
}
.agent-heading { margin-bottom: 40px; }
.agent-heading__title { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.agent-heading h1 { margin: 0; color: var(--site-default-fg-color); font-size: 36px; font-weight: 600; line-height: 1.25; letter-spacing: -.025em; }
.agent-heading > p { max-width: 65ch; margin: 12px 0 16px; color: var(--site-default-fg-color--light); font-size: 15px; line-height: 1.75; }
.agent-connect-page .agent-live { flex: 0 1 auto; gap: 8px; max-width: 35%; font-size: 12px; line-height: 1.5; }
.agent-connect-page .agent-live__dot { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; }
.agent-connect-page .agent-live__dot.is-ready { background: var(--agent-green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--agent-accent) 10%, transparent); }
.agent-properties { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--site-default-fg-color--light); font-size: 12px; line-height: 1.6; }
.agent-properties > span + span { padding-left: 16px; border-left: 1px solid var(--agent-rule); }
.agent-workspace, .agent-setup { min-width: 0; }
.agent-client-nav { margin-bottom: 16px; }
.agent-setup__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.agent-setup__heading h2 { margin: 0; color: var(--site-default-fg-color); font-size: 19px; font-weight: 600; line-height: 1.5; }
.agent-setup__heading p { margin: 0; color: var(--site-default-fg-color--light); font-size: 12px; line-height: 1.6; }
.agent-clients { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; border-bottom: 1px solid var(--reading-rule); }
.agent-client-indicator { position: absolute; top: 0; left: 0; height: 2px; background: var(--agent-accent); pointer-events: none; transition-property: none; }
.agent-clients.has-motion .agent-client[aria-selected='true'] { border-bottom-color: transparent; }
.agent-connect-page button { font-family: inherit; cursor: pointer; }
.agent-client { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-width: 0; min-height: 52px; padding: 14px 4px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--site-default-fg-color--light); font-size: 14px; font-weight: 500; transition: border-color .15s, color .15s; }
.agent-client > svg { flex: 0 0 18px; width: 18px; height: 18px; }
.agent-client__check { display: none; }
.agent-client[data-client='claude'] > svg { color: #bf927d; }
.agent-client[data-client='codex'] > svg { color: var(--site-default-fg-color); }
.agent-client[data-client='vscode'] > svg { color: #6499bf; }
.agent-client:hover { color: var(--site-default-fg-color); }
.agent-client[aria-selected='true'] { border-bottom-color: var(--agent-accent); color: var(--site-default-fg-color); }
.agent-client:focus-visible, .agent-primary:focus-visible, .agent-endpoint button:focus-visible, .agent-disclosure summary:focus-visible { --control-accent: var(--agent-accent); --control-focus-offset: 3px; }
/* Inactive panels share natural row sizing, keeping client changes stable. */
.agent-client-panels { display: grid; grid-template-rows: repeat(3, auto); min-width: 0; }
.agent-client-panel { display: grid; grid-area: 1 / 1 / 4 / 2; grid-template-rows: subgrid; min-width: 0; }
.agent-client-panel[aria-hidden='true'] { visibility: hidden; pointer-events: none; }
.agent-client-panel.is-exiting { visibility: visible; }
.agent-client-panel[aria-hidden='false'] { z-index: 1; }
.agent-setup__instruction { margin: 0 0 14px; color: var(--site-default-fg-color--light); font-size: 14px; line-height: 1.65; }
.agent-codebox { overflow: hidden; border: 1px solid var(--agent-rule); border-radius: 8px; background: var(--agent-code-bg); }
.agent-codebox__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 16px 6px 20px; border-bottom: 1px solid var(--agent-rule); background: var(--agent-code-bar); }
.agent-fileinfo { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--agent-code-text); font: 12px/1.6 'JetBrains Mono', ui-monospace, monospace; }
.agent-fileinfo svg { flex: none; }
.agent-fileinfo [data-config-filename] { overflow-wrap: anywhere; }
.agent-fileinfo [data-config-format] { margin-left: 6px; font-size: 10px; opacity: .8; }
.agent-codebox pre { margin: 0; padding: 16px 24px; }
.agent-codebox code { display: block; color: var(--agent-code-text); white-space: normal; counter-reset: code-line; font: 14px/1.6 'JetBrains Mono', ui-monospace, 'Noto Sans SC', monospace; }
.agent-code-line { position: relative; display: block; min-height: 1.6em; padding-left: 42px; white-space: pre-wrap; overflow-wrap: anywhere; counter-increment: code-line; }
.agent-code-line::before { content: counter(code-line, decimal-leading-zero); position: absolute; left: 0; color: var(--agent-code-text); opacity: .5; user-select: none; font-size: 12px; }
.agent-code-key { color: var(--agent-code-key); }
.agent-code-string { color: var(--agent-code-string); }
.agent-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; min-width: 120px; min-height: 36px; padding: 8px 12px; border: 0; border-radius: 6px; background: var(--agent-action); color: #fff; font-size: 12px; font-weight: 600; }
.agent-primary > svg { width: 15px; height: 15px; }
.agent-primary:hover { opacity: .85; }
.agent-setup__after { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 0; color: var(--site-default-fg-color--light); font-size: 13px; line-height: 1.65; }
.agent-setup__after::before { content: '↳'; flex: none; color: var(--agent-accent); }
.agent-endpoint { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 18px; padding: 12px 0; border-block: 1px solid var(--reading-rule); }
.agent-endpoint__label { color: var(--site-default-fg-color--light); font-size: 13px; line-height: 1.6; }
.agent-endpoint__value { display: flex; align-items: center; gap: 16px; min-width: 0; }
.agent-endpoint code { min-width: 0; color: var(--site-default-fg-color); overflow-wrap: anywhere; font: 12px/1.7 'JetBrains Mono', ui-monospace, monospace; }
.agent-endpoint button { flex: none; min-width: 48px; min-height: 36px; padding: 6px 10px; border: 1px solid var(--agent-rule); border-radius: 6px; background: transparent; color: var(--site-default-fg-color); font-size: 12px; }
.agent-endpoint button:hover { background: var(--agent-surface); }
.agent-reference { margin-top: 0; }
.agent-disclosure { border-bottom: 1px solid var(--reading-rule); }
.agent-disclosure summary { display: flex; align-items: center; gap: 20px; min-height: 64px; padding: 18px 0; list-style: none; cursor: pointer; color: var(--site-default-fg-color); font-size: 17px; font-weight: 600; line-height: 1.5; }
.agent-disclosure summary::-webkit-details-marker { display: none; }
.agent-disclosure summary::after { content: ''; flex: 0 0 7px; width: 7px; height: 7px; margin: 0 2px 4px 4px; border-right: 1.5px solid var(--site-default-fg-color--light); border-bottom: 1.5px solid var(--site-default-fg-color--light); transform: rotate(45deg); }
.agent-disclosure[open] summary::after { transform: rotate(225deg); margin-block: 4px 0; }
.agent-disclosure[data-expanded='false'] summary::after { transform: rotate(45deg); margin-block: 0 4px; }
.agent-disclosure[data-expanded='true'] summary::after { transform: rotate(225deg); margin-block: 4px 0; }
.agent-disclosure__content { display: flow-root; overflow: hidden; }
.agent-disclosure summary { transition: color 180ms ease; }
.agent-disclosure summary::after { transition: transform 220ms cubic-bezier(.22, 1, .36, 1), margin 220ms ease; }
.agent-primary, .agent-endpoint button { transition: opacity 160ms ease, background-color 160ms ease, transform 160ms cubic-bezier(.22, 1, .36, 1); }
.agent-primary:active, .agent-endpoint button:active { transform: translateY(1px) scale(.98); }
@keyframes agent-copy-feedback { from { opacity: .35; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.agent-primary[data-copy-state='copied'] > span, .agent-endpoint button[data-copy-state='copied'] { animation: agent-copy-feedback 220ms cubic-bezier(.22, 1, .36, 1); }
.agent-disclosure summary:hover { color: var(--agent-accent); }
.agent-disclosure summary > span:first-child { flex: 1; }
.agent-reference__hint { color: var(--site-default-fg-color--light); font-size: 12px; font-weight: 400; }
.agent-reference__count { display: inline-grid; place-items: center; min-width: 22px; min-height: 22px; margin-left: 10px; border: 1px solid var(--agent-rule); border-radius: 5px; color: var(--site-default-fg-color--light); font: 11px/1.6 'JetBrains Mono', ui-monospace, monospace; }
.agent-reference__body { padding: 20px 24px 24px; background: var(--agent-surface); border-top: 1px solid var(--reading-rule); color: var(--site-default-fg-color--light); font-size: 14px; line-height: 1.8; }
.agent-reference__body > p { margin: 0 0 16px; }
.agent-reference__body > :last-child { margin-bottom: 0; }
.agent-reference__body a { color: var(--site-accent-fg-color); }
.agent-reference__body--guide ol { margin: 20px 0; padding: 0; list-style: none; counter-reset: agent-step; }
.agent-reference__body--guide li { position: relative; padding: 12px 0 12px 36px; border-top: 1px solid var(--reading-rule); counter-increment: agent-step; }
.agent-reference__body--guide li::before { content: counter(agent-step, decimal-leading-zero); position: absolute; left: 0; top: 14px; color: var(--site-default-fg-color--light); font: 12px/1.8 'JetBrains Mono', ui-monospace, monospace; }
.agent-reference__body--guide > p:last-child:not(:first-child) { padding-top: 16px; border-top: 1px solid var(--reading-rule); font-size: 13px; }
.agent-tools { margin: 20px 0 0; }
.agent-tools > div { display: grid; grid-template-columns: minmax(260px, .85fr) minmax(0, 1.4fr); align-items: baseline; gap: 28px; padding: 18px 0; border-top: 1px solid var(--reading-rule); }
.agent-tools > div:last-child { padding-bottom: 0; }
.agent-tools dt { min-width: 0; color: var(--site-default-fg-color); }
.agent-tools code { padding: 0; background: transparent; color: inherit; font: 600 15px/1.65 'JetBrains Mono', ui-monospace, 'Noto Sans SC', monospace; overflow-wrap: anywhere; }
.agent-tools dd { max-width: 58ch; font-size: 14px; line-height: 1.75; }
.agent-tools dd, .agent-transports dd { margin: 0; }
.agent-transports { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; margin: 0 0 24px; }
.agent-transports dt { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; color: var(--site-default-fg-color); font-size: 15px; font-weight: 600; }
.agent-transports dt > span { font-size: 11px; font-weight: 400; color: var(--site-default-fg-color--light); }
.agent-pagefooter { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 12px; font-size: 12px; }
.agent-pagefooter a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: var(--site-default-fg-color--light); }
.agent-capabilities { margin: 0 0 40px; border: 0; background: transparent; }
.agent-capabilities > summary { min-height: 0; padding: 0 0 18px; font-size: 19px; font-weight: 600; }
.agent-capabilities .agent-reference__count { min-width: 0; min-height: 0; margin-left: 10px; padding: 0; border: 0; border-radius: 0; color: var(--site-default-fg-color--light); background: transparent; font-size: 12px; }
.agent-capabilities__body { padding: 0; border-top: 1px solid var(--agent-rule); background: transparent; }
.agent-capabilities .agent-tools { margin: 0; }
.agent-capabilities .agent-tools > div { grid-template-columns: minmax(310px, .95fr) minmax(0, 1.4fr); align-items: center; padding: 17px 0; gap: 28px; }
.agent-capabilities .agent-tools > div:first-child { border-top: 0; }
.agent-capabilities .agent-tools dt { display: flex; align-items: center; gap: 14px; }
.agent-tool-icon { display: grid; place-items: center; flex: 0 0 20px; width: 20px; height: 20px; color: var(--agent-accent); }
.agent-tool-icon svg { width: 17px; height: 17px; }
.agent-capabilities__body > .agent-capabilities__note { margin: 0; padding-top: 14px; border-top: 1px solid var(--reading-rule); font-size: 12px; line-height: 1.65; }
@media (max-width: 1100px) {
  .agent-console.agent-connect-page { padding: 32px 28px 24px; }
}
@media (max-width: 760px) {
  .agent-console.agent-connect-page { padding: 28px 20px 24px; }
  .agent-heading__title { align-items: flex-start; flex-direction: column; gap: 16px; }
  .agent-heading h1 { font-size: 36px; }
  .agent-connect-page .agent-live { max-width: 100%; }
  .agent-heading > p { font-size: 15px; }
  .agent-setup__heading p { display: none; }
  .agent-client { gap: 8px; padding-inline: 8px; font-size: 13px; }
  .agent-client > svg { width: 20px; height: 20px; flex-basis: 20px; }
  .agent-endpoint { align-items: stretch; flex-direction: column; gap: 10px; }
  .agent-endpoint__value { justify-content: space-between; }
  .agent-endpoint button { min-height: 44px; }
  .agent-reference__hint { display: none; }
  .agent-reference__body { padding: 18px; }
  .agent-tools > div, .agent-capabilities .agent-tools > div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .agent-capabilities > summary { padding: 0 0 16px; font-size: 18px; }
  .agent-capabilities__body { padding: 0; }
  .agent-capabilities .agent-tools dd { padding-left: 34px; }
  .agent-transports { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .agent-console.agent-connect-page { padding-inline: 16px; }
  .agent-clients { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; border-bottom: 0; }
  .agent-client { min-height: 50px; font-size: 14px; border-bottom-color: var(--reading-rule); }
  .agent-codebox__bar { gap: 10px; padding: 10px 12px; }
  .agent-fileinfo { gap: 6px; font-size: 11px; }
  .agent-fileinfo > svg, .agent-fileinfo [data-config-format] { display: none; }
  .agent-primary { min-width: 110px; min-height: 40px; }
  .agent-codebox pre { padding: 18px 12px; }
  .agent-codebox code { font-size: 12px; }
  .agent-code-line { padding-left: 28px; }
  .agent-code-line::before { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .agent-client, .agent-primary, .agent-endpoint button, .agent-disclosure summary, .agent-disclosure summary::after { transition: none; }
  .agent-primary[data-copy-state='copied'] > span, .agent-endpoint button[data-copy-state='copied'] { animation: none; }
}

.graph-hud__title { font-size: 26px; font-weight: 500; }
.graph-hud__meta { margin-top: 8px; }
.graph-tools .browse-search { background: var(--site-raised-bg-color); }
.graph-card { border-color: var(--site-default-fg-color--lightest); box-shadow: 0 12px 40px var(--site-shadow-color); }
.site-error { animation: coverFade 400ms ease-out both; }
.site-error__code::after { background: var(--reading-rule); }
.site-error__search {
  background: var(--reading-surface);
  border-radius: 7px;
}
.site-error__search:hover { border-color: var(--reading-rule); color: var(--reading-accent); }
.site-error__search:focus-visible,
.site-error .site-error__link:focus-visible { outline-color: var(--reading-accent); }
.site-error .site-error__link:hover { color: var(--reading-accent); }
@media (prefers-reduced-motion: reduce) {
  .site-error { animation: none; }
}

@media (max-width: 1024px) {
  :root { --site-header-height: calc(56px + env(safe-area-inset-top)); --mobile-page-gutter: 28px; --mobile-reading-gutter: var(--reading-gutter); }
  .site-header { position: sticky; padding-top: env(safe-area-inset-top); }
  .site-header__inner { height: 55px; }
  .site-header__inner :is(.site-logo, .site-search__toggle, .site-lang__toggle, .header-icon-link, .theme-toggle, .site-header__hamburger, .header-ask-link) {
    min-width: 44px; min-height: 44px;
  }
  .site-header__hamburger { display: inline-flex; }
  .site-lang__item { min-height: 44px; display: flex; align-items: center; }
  .site-sidebar {
    position: fixed; left: 0; top: var(--site-header-height); bottom: 0; z-index: 50;
    width: min(320px, 88vw); height: calc(100dvh - var(--site-header-height)); transform: translateX(-100%);
    overscroll-behavior: contain; scroll-padding-block: 16px;
    transition: transform 180ms cubic-bezier(.4, 0, 1, 1); box-shadow: none;
  }
  .site-sidebar--open { transform: translateX(0); box-shadow: var(--site-shadow-lg); transition: transform 240ms cubic-bezier(.16, 1, .3, 1); }
  body:has(.site-sidebar--open) { overflow: visible; }
  .site-nav :is(.site-nav__area-title, .site-nav__section-title, .site-nav__link, .site-nav__utility) {
    min-height: 44px; padding-block: 11px; font-size: 14px; line-height: 1.6;
  }
  .site-toc-mobile__nav a { min-height: 44px; }
  .site-content { max-width: 840px; }
  .browse-page, .agent-console { padding: 36px 28px 48px; }
  .ask-workspace { padding-inline: 28px; }
}
@media (max-width: 768px) {
  :root { --site-content-padding-x: 22px; --site-content-padding-y: 28px; --header-padding-x: 16px; --mobile-page-gutter: 22px; --mobile-reading-gutter: 22px; }
  .reading-article { padding: 28px 22px 40px; }
  .site-header__inner, body.is-cover .site-header__inner { padding-inline: 16px; gap: 8px; }
  .site-logo .liz-wordmark { width: 43px; height: 35px; }
  .site-header__menu-label { display: none; }
  .site-sidebar { background: var(--reading-rail); }
  .reading-header h1 { font-size: clamp(28px, 8vw, 32px); }
  .reading-article .site-body { font-size: 16px; line-height: 1.85; }
  .ask-intro h1, .agentic-intro h1 { font-size: 30px; }
  .reading-header { margin-bottom: 26px; }
  .reading-header .site-meta-badge { margin-left: 0; padding-left: 0; border-left: 0; }
  .reading-header .site-tags { gap: 8px 12px; }
  .site-content h2 { font-size: 22px; }
  .site-content pre { padding-inline: 16px; font-size: 13px; }
  .site-content .syn-header { margin-inline: -16px; padding-inline: 16px; }
  .site-toc-mobile { background: transparent; border-width: 1px 0; border-radius: 0; margin-block: 16px 24px; }
  .site-toc-mobile > summary { padding-inline: 0; }
  .browse-page, .agent-console { padding: 28px 22px 44px; }
  .browse-page h1 { font-size: 32px; }
  .browse-group > summary { min-height: 60px; }
  .browse-group-body { padding-left: 18px; }
  .ask-workspace, .ask-workspace:not(.has-answer) { padding: 40px 22px; }
  .ask-question-row .ask-question-echo { font-size: 24px; }
  .ask-question-row { flex-wrap: wrap; gap: 10px; padding-bottom: 20px; }
  .ask-question-row .ask-question-echo { flex-basis: 100%; }
  .ask-question-row .ask-edit { margin-left: auto; }
  .ask-suggestions { grid-template-columns: 1fr; }
  .ask-suggestions button { flex-direction: row; gap: 12px; padding: 14px 16px; }
  .ask-composer textarea { min-height: 100px; }
  .ask-sources { padding: 18px; }
  .home-cover { padding: 40px 0 24px; transform: none; }
  .home-cover .cover-mark { font-size: 72px; }
  .cover-heatmap { margin-top: 32px; }
  .site-main--cover .site-content { padding-inline: 20px; }
  .site-main--cover .site-error { padding: 36px 20px; }
  .site-pager { gap: 16px; margin-top: 40px; }
  .site-pager__link { flex: 1 1 0; max-width: none; padding: 14px 0; }
  .site-pager__title { white-space: normal; overflow-wrap: anywhere; font-size: 14px; line-height: 1.6; }
  .site-pager__label { font-size: 12px; }
  .browse-search input { font-size: 16px; }
  .site-search__dropdown { width: calc(100% - 16px); border-radius: 16px; }
  .site-search__head { gap: 12px; padding: 6px 12px; min-height: 56px; }
  .site-search__tabs { flex: 1; max-width: 280px; }
  .site-search__tab { min-width: 0; min-height: 44px; }
  .site-search__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; font-size: 24px; }
  .site-search__close { flex: 0 0 44px; }
  .site-search__close-key { display: none; }
  .site-search__composer { margin: 4px 12px 12px; padding: 4px 6px 4px 12px; min-height: 56px; border: 1px solid var(--reading-rule); border-radius: 12px; background: var(--reading-bg); }
  .site-search__composer:focus-within { border: 1px solid var(--reading-accent); }
  .site-search__composer > svg { width: 18px; height: 18px; }
  .site-search__dropdown[data-mode="ask"] .site-search__composer > svg { display: none; }
  .site-search__input { padding: 10px; font-size: 16px; line-height: 1.5; }
  .site-search__dropdown[data-mode="ask"] .site-search__input { padding-left: 2px; }
  .site-search__results { min-height: 0; padding: 8px; }
  .site-search__start { padding: 12px 8px; text-align: left; }
  .site-search__result { padding: 12px; }
  .site-search__result-title { font-size: 16px; }
  .site-search__result-footer { flex-wrap: wrap; gap: 4px 12px; }
  .site-search__facet { min-height: 44px; }
  .site-search__ask-body { min-height: 0; padding: 20px 16px; }
  .site-search__ask-empty { display: block; padding: 0 0 16px; }
  .site-search__ask-mark { display: none; }
  .site-search__ask-empty h2 { font-size: 17px; line-height: 1.5; }
  .site-search__ask-empty p { font-size: 14px; line-height: 1.65; }
  .site-search__ask-examples { padding-left: 0; }
  .site-search__ask-examples button { min-width: 0; min-height: 48px; padding: 12px; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
  .site-search__ask-examples button::after { flex: none; }
  .site-search__ask-foot { gap: 0 12px; padding: 6px 16px; line-height: 1.6; }
  .site-search__ask-foot > span { flex-basis: 140px; }
  .site-search__ask-foot a { min-height: 44px; display: inline-flex; align-items: center; }
  .site-search__ask-status button, .site-search__ask .ask-answer-actions button { min-height: 44px; }
}
@media (max-width: 480px) {
  :root { --header-padding-x: 12px; }
  .site-header__inner, body.is-cover .site-header__inner { gap: 5px; padding-inline: 12px; }
  .home-cover .cover-mark { font-size: 64px; }
  .home-cover .cover-tagline { font-size: 13px; margin-top: 20px; }
  .home-cover .cover-rule { margin-block: 26px 22px; }
  .ask-composer { padding: 16px; }
  .ask-composer textarea { font-size: 16px; }
}
@media (max-width: 600px) {
  .graph-hud__title { font-size: 22px; }
  .graph-legend { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
  .graph-legend__chip { flex: 0 0 auto; white-space: nowrap; }
  .graph-footer { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
}
@media (max-height: 650px) {
  .home-cover { min-height: 430px; padding-block: 28px; }
  .home-cover .cover-mark { font-size: 60px; }
  .home-cover .cover-tagline { margin-top: 16px; }
  .home-cover .cover-rule { margin-block: 20px; }
  .cover-heatmap { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-toc__slider, .site-toc__link { transition: none; }
  .site-sidebar, .site-sidebar--open, body.is-cover .site-sidebar, body.is-cover .site-sidebar--open { transition: none; }
  .home-cover .cover-mark, .home-cover .cover-tagline, .home-cover .cover-mail, .cover-heatmap { animation: none; }
  .site-body details > summary,
  .site-body details > summary::before { transition: none; }
}

/* Mobile keeps one toolbar; secondary actions live in the directory. */
@media (max-width: 1024px) {
  .site-header__context, .site-header__inner > :is(.header-icon-link, .theme-toggle, .header-ask-link) { display: none; }
  .site-header__inner > .site-brand { margin-right: auto; }
  .site-search__toggle-label, .site-search__toggle-key { display: none; }
  .site-search__toggle { width: 44px; padding: .4rem; border: 0; border-radius: 50%; background: none; }
  .site-search__toggle > svg { width: 20px; height: 20px; color: inherit; }
  .site-nav__utility--mobile { display: flex; }
}

/* Touch guidance replaces keyboard-only instructions without removing the
   keyboard controls on tablets with a mouse or an attached trackpad. */
.site-search__touch-hint, .graph-help__touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  :is(.site-header, .site-sidebar, .site-toc-mobile, .graph-stage) :is(button, summary, a) { -webkit-tap-highlight-color: transparent; }
  .site-search__key-hints, .graph-help__keyboard, .ask-keyboard-hint { display: none; }
  .site-search__start .site-search__touch-hint { display: block; margin: 0; font-size: 14px; line-height: 1.8; }
  .graph-help__touch { display: inline; }
  .graph-view-controls button, .graph-card__close { min-width: 44px; min-height: 44px; }
  .diagram-expand, .diagram-lightbox__close { min-width: 44px; min-height: 44px; }
}

/* Short phones keep the canvas and category strip inside the visible screen. */
@media (max-width: 1024px) and (max-height: 500px) {
  .graph-stage { min-height: 0; }
  .graph-hud { top: 12px; }
  .graph-hud__title { font-size: 20px; }
  .graph-hud__meta { margin-top: 4px; font-size: 12px; }
  .graph-tools { top: 12px; }
  .graph-view-controls { top: 64px; }
  .graph-view-controls button { min-width: 44px; min-height: 44px; }
  .graph-help { display: none; }
  .graph-footer { padding-block: 4px; }
  .graph-legend { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .graph-legend__chip { flex: 0 0 auto; min-height: 44px; white-space: nowrap; }
}

/* Share physical safe-area gutters with the page instead of overwriting them
   with the smaller phone rules above. Zoom remains enabled by the viewport. */
@media (max-width: 1024px) {
  .site-header__inner, body.is-cover .site-header__inner {
    padding-left: max(var(--header-padding-x), env(safe-area-inset-left));
    padding-right: max(var(--header-padding-x), env(safe-area-inset-right));
  }
  .site-sidebar, body.is-cover .site-sidebar { padding-left: env(safe-area-inset-left); padding-bottom: env(safe-area-inset-bottom); }
  .reading-layout > .reading-article {
    padding-left: max(var(--mobile-reading-gutter), env(safe-area-inset-left));
    padding-right: max(var(--mobile-reading-gutter), env(safe-area-inset-right));
  }
  .browse-page, .agent-console, .ask-workspace, .ask-workspace:not(.has-answer) {
    padding-left: max(var(--mobile-page-gutter), env(safe-area-inset-left));
    padding-right: max(var(--mobile-page-gutter), env(safe-area-inset-right));
  }
}

/* A shared reading vocabulary across authored pages and generated answers. */
:is(.ask-answer, .site-search__ask-answer) a:not(.ask-citation) {
  color: var(--reading-accent);
  text-decoration-color: color-mix(in srgb, var(--reading-accent) 35%, transparent);
  text-underline-offset: .22em;
}
:is(.ask-answer, .site-search__ask-answer) blockquote {
  margin-inline: 0; padding: 4px 20px; border: 0; border-left: 2px solid var(--reading-rule);
  border-radius: 0; background: transparent; color: var(--site-default-fg-color);
}
:is(.ask-answer, .site-search__ask-answer) blockquote > :last-child { margin-bottom: 0; }
.ask-table-scroll { overscroll-behavior-x: contain; }
.ask-table-scroll table { font-size: 15px; }
.ask-table-scroll :is(th, td) { min-width: 9em; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--reading-rule); line-height: 1.8; }
.ask-table-scroll th { background: var(--reading-surface); font-size: 14px; font-weight: 600; }
.site-search__result + .site-search__result { margin-top: 4px; }
/* Scroll-attached fades disappear at either end, without extra instruction text. */
.reading-article table, .ask-table-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--reading-rule) transparent;
  background:
    linear-gradient(to right, var(--reading-bg) 30%, transparent) left / 28px 100% no-repeat local,
    linear-gradient(to left, var(--reading-bg) 30%, transparent) right / 28px 100% no-repeat local,
    linear-gradient(to right, color-mix(in srgb, var(--site-default-fg-color) 12%, transparent), transparent) left / 10px 100% no-repeat scroll,
    linear-gradient(to left, color-mix(in srgb, var(--site-default-fg-color) 12%, transparent), transparent) right / 10px 100% no-repeat scroll;
}
@media (min-width: 769px) and (max-width: 1024px) {
  .reading-layout { margin-inline: auto; }
}

/* Shared motion owns the glider transform; the CSS fallback remains available. */
.site-search__tabs.has-motion .site-search__tab-glider { transition: none; }
/* The viewer reads these timings for the image and its moving crop boundary. */
.diagram-lightbox.has-origin {
  --diagram-enter-duration: 320ms;
  --diagram-exit-duration: 260ms;
  --diagram-enter-easing: cubic-bezier(.2, .7, .2, 1);
  --diagram-exit-easing: cubic-bezier(.3, 0, .2, 1);
  --diagram-flight-duration: var(--diagram-exit-duration);
  --diagram-flight-easing: var(--diagram-exit-easing);
  isolation: isolate;
  opacity: 1;
  background: transparent;
  transition: none;
}
.diagram-lightbox.has-origin.is-open {
  --diagram-flight-duration: var(--diagram-enter-duration);
  --diagram-flight-easing: var(--diagram-enter-easing);
}
.diagram-lightbox.has-origin::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(0, 0, 0, .7);
}
.diagram-lightbox.has-origin .diagram-lightbox__stage {
  position: relative;
  isolation: isolate;
  transform: none;
  transition: none;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  /* Negative clip insets can reach the source outside the settled panel. */
  overflow: visible;
  clip-path: inset(0 round var(--site-radius-lg));
}
.diagram-lightbox.has-origin .diagram-lightbox__stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: var(--reading-bg);
  border: 1px solid var(--site-default-fg-color--lightest);
  box-shadow: 0 20px 80px rgba(0, 0, 0, .15);
}
.diagram-lightbox.has-origin::before,
.diagram-lightbox.has-origin .diagram-lightbox__stage::before,
.diagram-lightbox.has-origin .diagram-lightbox__close,
.diagram-lightbox.has-origin .diagram-lightbox__tools {
  opacity: 0;
  transition: opacity var(--diagram-flight-duration) var(--diagram-flight-easing);
}
.diagram-lightbox.has-origin.is-open::before,
.diagram-lightbox.has-origin.is-open .diagram-lightbox__stage::before,
.diagram-lightbox.has-origin.is-open .diagram-lightbox__close,
.diagram-lightbox.has-origin.is-open .diagram-lightbox__tools { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .diagram-lightbox.has-origin,
  .diagram-lightbox.has-origin::before,
  .diagram-lightbox.has-origin .diagram-lightbox__stage::before,
  .diagram-lightbox.has-origin .diagram-lightbox__close,
  .diagram-lightbox.has-origin .diagram-lightbox__tools { transition: none; }
}

/* Out-of-flow hint anchored to main's left edge, below the sticky header. */
.shortcut-legend { position: fixed; top: calc(var(--site-header-height) + 2px); left: calc(var(--site-sidebar-width) + 16px); z-index: 45; display: flex; align-items: center; gap: 0; height: 32px; transition: height .26s cubic-bezier(.22,1,.36,1); box-sizing: border-box; padding: 0; border: 0; background: var(--reading-bg); color: var(--site-default-fg-color--light); border-radius: 5px; }
.shortcut-legend.is-open { height: 60px; }
.shortcut-legend[hidden] { display: none; }
.shortcut-legend__toggle { order: 2; align-self: flex-start; margin-top: 2px; display: grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; transition: color .18s, background .18s; }
.shortcut-legend__toggle:hover { color: var(--reading-accent); background: var(--reading-surface); }
.shortcut-legend__toggle:focus-visible { outline: 2px solid var(--reading-accent); outline-offset: 2px; }
.shortcut-legend__icon, .shortcut-legend__collapse { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; transition: opacity .16s, transform .24s; }
.shortcut-legend__icon { width: 22px; height: 22px; }
.shortcut-legend__icon > svg { width: 22px; height: 22px; stroke-width: 1.35; }
.shortcut-legend__collapse { width: 16px; height: 16px; opacity: 0; transform: translateX(3px); }
.shortcut-legend__collapse > svg { width: 100%; height: 100%; }
.shortcut-legend.is-open .shortcut-legend__icon { opacity: 0; transform: scale(.8); }
.shortcut-legend.is-open.is-hovered .shortcut-legend__collapse, .shortcut-legend.is-open.is-keyboard-focus .shortcut-legend__collapse, .shortcut-legend.is-open.is-link-hinting .shortcut-legend__collapse { opacity: 1; transform: translateX(0); }
.shortcut-legend__panel { display: flex; flex-direction: column; align-items: flex-start; align-self: flex-start; flex: none; gap: 0; height: 60px; padding: 0; width: 0; opacity: 0; overflow: hidden; white-space: nowrap; transform: translateX(-5px); transition: width .26s cubic-bezier(.22,1,.36,1), opacity .18s ease, transform .26s cubic-bezier(.22,1,.36,1); }
.shortcut-legend__panel > * { flex-shrink: 0; }
/* Each row reserves space for key highlights inside the clipping boundary. */
.shortcut-legend__row { display: flex; align-items: center; gap: 17px; height: 30px; width: max-content; padding: 0 8px 0 4px; }
.shortcut-legend__primary { display: contents; }
.shortcut-legend.is-open .shortcut-legend__panel { width: var(--legend-panel-width, 283px); opacity: 1; transform: translateX(0); }
.shortcut-legend__keys { display: flex; align-items: center; gap: 12px; }
.shortcut-legend__pair { display: flex; align-items: center; gap: 3px; }
.shortcut-legend__links { gap: 5px; }
.shortcut-legend__history { display: flex; align-items: center; gap: 6px; padding-left: 13px; border-left: 1px solid var(--reading-rule); }
.shortcut-legend__history > svg { width: 10px; height: 16px; }
.shortcut-legend kbd { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 19px; height: 21px; padding: 0 4px; border: 1px solid var(--reading-rule); border-radius: 4px; background: transparent; box-shadow: none; color: var(--site-default-fg-color); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; font-weight: 500; line-height: 1; transition: color .12s, background .12s, transform .12s; }
.shortcut-legend .shortcut-legend__modifier { padding: 0 5px; font-size: 11px; }
.shortcut-legend__plus { display: flex; width: 10px; height: 16px; }
.shortcut-legend__plus svg { width: 100%; height: 100%; }
.shortcut-legend__direction { display: flex; width: 15px; height: 20px; color: var(--site-default-fg-color--light); }
.shortcut-legend__direction > svg { width: 100%; height: 100%; stroke-width: 1.4; }
.shortcut-legend__direction--down { transform: rotate(180deg); }
.shortcut-legend__scope { display: flex; align-items: center; gap: 5px; padding-left: 13px; border-left: 1px solid var(--reading-rule); }
.shortcut-legend__scope kbd { padding: 0 5px; font-size: 11px; }
.shortcut-legend__scope > svg { width: 28px; height: 24px; }
.shortcut-legend__scope > svg:not(:last-child) { width: 11px; height: 18px; }
.shortcut-legend__region { fill: var(--reading-accent); fill-opacity: .5; stroke: none; }
@media (max-width: 1024px) { .shortcut-legend { display: none; } }
@media (prefers-reduced-motion: reduce) { .shortcut-legend, .shortcut-legend__panel, .shortcut-legend__toggle, .shortcut-legend__icon, .shortcut-legend__collapse { transition: none; } }

/* Press feedback changes paint only, preserving the compact key-map spacing. */
.shortcut-legend__pair.is-pressed kbd, .shortcut-legend kbd.is-pressed { color: var(--reading-accent); background: color-mix(in srgb, var(--reading-accent) 15%, var(--reading-bg)); transform: translateY(1px); }
.shortcut-legend__sequence.is-pending kbd { background: linear-gradient(to right, color-mix(in srgb, var(--reading-accent) 15%, var(--reading-bg)) 50%, transparent 50%); }
.shortcut-legend__sequence.is-pending kbd > :first-child { color: var(--reading-accent); }
.shortcut-legend__sequence.is-complete kbd { color: var(--reading-accent); background: color-mix(in srgb, var(--reading-accent) 15%, var(--reading-bg)); transform: translateY(1px); }
.shortcut-legend__sequence.is-complete .shortcut-legend__direction { color: var(--reading-accent); }
.shortcut-legend .shortcut-legend__modifier.is-pressed { background: color-mix(in srgb, var(--reading-accent) 18%, var(--reading-bg)); }
.shortcut-legend__pair.is-pressed .shortcut-legend__direction, .shortcut-legend__scope.is-pressed { color: var(--reading-accent); }
.shortcut-legend__history .shortcut-legend__pair.is-active .shortcut-legend__direction { color: var(--reading-accent); }
.shortcut-legend__scope.is-pressed kbd { color: var(--reading-accent); background: color-mix(in srgb, var(--reading-accent) 15%, var(--reading-bg)); }
.shortcut-legend__scope.is-pressed .shortcut-legend__region { fill-opacity: .95; }
/* Only idle Alt holds hint the controls. Keep key borders and geometry steady.
   JS supplies a continuous accelerating pulse; reduced motion stays static. */
.shortcut-legend.is-open.is-alt-idle .shortcut-legend__keys .shortcut-legend__pair:not(.is-pressed) kbd {
  color: color-mix(in srgb, var(--reading-accent) var(--legend-alt-strength, 75%), var(--site-default-fg-color));
  background: color-mix(in srgb, var(--reading-accent) var(--legend-alt-wash, 10%), transparent);
  transition: none;
}
@media (prefers-reduced-motion: reduce) { .shortcut-legend kbd, .shortcut-legend__pair kbd::before { transition: none; } }

/* Native link hints float above content without changing its layout. */
/* Programmatic reading/navigation targets are not actionable controls. */
#main-content[tabindex="-1"]:focus,
#main-content h1[tabindex="-1"]:focus,
.reading-article .site-body[tabindex="-1"]:focus { outline: none; }
.link-hints { position: fixed; inset: 0; z-index: 10000; pointer-events: none; }
.link-hints[popover] { margin: 0; padding: 0; border: 0; width: auto; height: auto; max-width: none; max-height: none; overflow: visible; background: transparent; color: inherit; }
.link-hints::backdrop { background: transparent; pointer-events: none; }
.link-hints__label { position: absolute; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 22px; min-width: 22px; padding: 0 6px; border: 1px solid color-mix(in srgb, var(--reading-accent) 55%, var(--reading-rule)); border-radius: 5px; background: color-mix(in srgb, var(--reading-accent) 10%, var(--reading-bg)); color: var(--site-default-fg-color); box-shadow: 0 2px 7px #0002, inset 0 1px 0 #ffffff18; font: 600 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .04em; text-transform: uppercase; animation: link-hint-arrive .12s ease-out both; }
.link-hints__label[hidden] { display: none; }
.link-hints__typed { color: var(--site-default-fg-color--light); opacity: .45; }
html.is-link-hint-focus :is(a[href], button, summary, [role="button"], [role="link"]):focus-visible { outline: none; box-shadow: none; }
@keyframes link-hint-arrive { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .link-hints__label { animation: none; } }

/* One content frame for the directory, Explorer and learning paths. */
:root{--collection-frame-width:1260px;--collection-gutter:var(--reading-gutter)}
body:has([data-browse="directory"]) .site-main{padding:0;margin:0;max-width:none;min-width:0;flex:1}
.site-content[data-browse="directory"]{box-sizing:border-box;width:100%;max-width:var(--collection-frame-width);margin-inline:auto;padding:28px max(var(--collection-gutter),env(safe-area-inset-right)) 48px max(var(--collection-gutter),env(safe-area-inset-left))}
@media(min-width:1025px){body:has([data-browse="directory"]) .site-header__context,body:has(.learning-main) .site-header__context{padding-left:calc(var(--collection-gutter) + max(0px,(100% + 2 * var(--header-padding-x) - var(--site-sidebar-width) - var(--collection-frame-width)) / 2))}}
@media(max-width:600px){:root{--collection-gutter:20px}.site-content[data-browse="directory"]{padding-top:22px}}

/* When the reading gutter is too narrow, keep the legend in the header. */
.shortcut-legend.is-docked { position:relative; top:auto; left:auto; flex:none; width:28px; height:32px; z-index:60; background:transparent; }
.shortcut-legend.is-docked .shortcut-legend__panel { position:absolute; top:calc(100% + 8px); right:0; height:76px; padding:8px; border:1px solid var(--reading-rule); border-radius:6px; background:var(--reading-bg); box-shadow:0 8px 24px rgb(0 0 0 / .1); visibility:hidden; pointer-events:none; }
.shortcut-legend.is-docked.is-open .shortcut-legend__panel { width:calc(var(--legend-panel-width) + 16px); visibility:visible; pointer-events:auto; }
.shortcut-legend.is-docked.is-open .shortcut-legend__collapse { opacity:1; transform:none; }