/* -- Site layout styles ------------------------------------ */
/* Nav, sidebar, preview box, code blocks, swatches, etc.    */

/* Prevent horizontal overflow on mobile */
html { overflow-x: clip; }

/* -- Scroll offset for fixed header + sticky page header ----
   --anchor-pad is published at runtime by layout.js (updateAnchorPad):
   .page-header is `position: sticky` pinned right under the fixed site
   header, so the true clearance = site header + page header + breathing
   room, which only the browser can measure (content-dependent height).
   The 4rem fallback covers pre-JS and pages without a .page-header. */
html { scroll-padding-top: var(--anchor-pad, 4rem); }
/* The shipped typography .h1–.h4 carry scroll-margin-top for consumer apps;
   on the docs page the measured --anchor-pad already provides the clearance,
   so the extra scroll-margin would stack and leave a gap above the heading. */
main .h1, main .h2, main .h3, main .h4 { scroll-margin-top: 0; }

/* -- Site header ------------------------------------------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: 3.5rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 0.75rem; gap: 1rem;
  background: oklch(from var(--background) l c h / 0.88);
  backdrop-filter: blur(14px);
}

/* -- Header brand (logo + name) ---------------------------- */
.header-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
}
.header-brand-name {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--foreground);
  white-space: nowrap;
}
/* the logo with the version badge centered under it (tucked up against
   the image, small enough to stay clear of the name beside it) */
.header-brand-mark {
  display: grid;
  justify-items: center;
  flex-shrink: 0;
}
.header-brand .header-version {
  position: relative;
  margin-top: -0.3125rem;
  padding: 0.0625rem 0.3125rem;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  background: var(--background);
}
/* vertical separators in the actions nav: the component's `align-self:
   stretch` would span the whole 2.25rem row - constrain to a hairline */
.site-header .separator[data-orientation="vertical"] {
  align-self: center;
  height: 1.25rem;
  margin: 0 0.125rem;
}
.header-brand-logo {
  width: auto;
  height: 30px;
}

/* -- Site sidebar ------------------------------------------
   The docs sidebar IS the shipped `sidebar` component: markup is the
   component's (.app-sidebar + .sidebar-content + .sidebar-group +
   .sidebar-submenu + .sidebar-link - styling and the collapse state
   (⌘B via sidebar.js) come from components/sidebar.css/.js via
   all.css/all.js). Only chrome geometry is site-side: the fixed-header
   offset, dock-to-zero-width (the component's icon rail is pointless without
   icons), and the mobile drawer. site-header.tsx/layout.ts own the header's
   panel-left toggle: it docks/undoes the sidebar on desktop and drives the
   drawer below 64rem; layout.ts persists the dock choice. */
.site-sidebar {
  --sidebar-width: 14rem;
  flex-shrink: 0;
  position: sticky; /* overrides the component's sticky top:0 (fixed header) */
  top: 3.5rem;
  height: calc(100vh - 3.5rem);
  /* the visible viewport: 100vh is the viewport with the browser toolbar hidden, so with the
     toolbar shown on a tablet the sidebar's last links would sit below the screen */
  height: calc(100dvh - 3.5rem);
}
@media (prefers-reduced-motion: reduce) {
  .site-sidebar { transition: none; }
}
/* docked (data-state="collapsed", set by the header toggle or ⌘B): zero width */
.site-sidebar[data-state="collapsed"] {
  width: 0;
  min-width: 0;
  border-right: none;
}
/* drawer mode: the component hides itself below 767px (apps use the mobile
   <dialog> sheet there); the docs site instead owns the off-canvas drawer —
   display:flex beats the layered rule, and the footer trigger is inert */
@media (max-width: 64rem) {
  .site-sidebar .sidebar-footer { display: none; }
}

/* -- Header action button / link --------------------------- */
.header-action {
  display: flex; align-items: center; gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  color: var(--muted-foreground);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: color 150ms, background 150ms;
}
.header-action:hover {
  color: var(--foreground);
  background: var(--accent);
}
.theme-toggle-btn {
  width: 2.25rem; height: 2.25rem;
  padding: 0; justify-content: center;
  border: 1px solid var(--border);
  color: var(--foreground);
}

/* -- Full-width main (always) -------------------------------
   DocPage caps <main> with an inline max-width; the docs always render
   maximized instead, so wide layouts - the marketing blocks, decks -
   get the whole content area. Exception: a page with a right rail
   (Getting Started's deck aside) keeps its column cap so the rail has
   room - only where the rail is shown (>= 88rem, see .site-aside).
   Only !important can override an inline style, and this is its
   single intentional home. */
main:not(:has(~ .site-aside)) {
  max-width: none !important;
}
@media not (min-width: 88rem) {
  main {
    max-width: none !important;
    flex-grow: 1 !important; /* Getting Started's inline basis is 0 1 44rem */
  }
}

/* -- SPA view transition for main content ------------------ */
main {
  view-transition-name: main-content;
}

/* Old page fades out, new page fades in - subtle crossfade */
::view-transition-old(main-content) {
  animation: vt-fade-out 150ms ease-out both;
}
::view-transition-new(main-content) {
  animation: vt-fade-in 150ms ease-in 50ms both;
}

/* Keep header/sidebar stable - instant swap, no animation */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}

@keyframes vt-fade-out {
  to { opacity: 0; }
}
@keyframes vt-fade-in {
  from { opacity: 0; }
}

/* -- Nav link ----------------------------------------------
   The docs sidebar's links ARE the sidebar component's .sidebar-link
   (all.css styles them; aria-current="page" renders the active state).
   .nav-link itself is the router's JS hook only (SPA intercept, active
   class toggle, prefetch, scroll persistence) - no competing look here;
   anything declared unlayered would override the layered component CSS. */
.nav-link { cursor: pointer; }
.nav-link.disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}

/* Submenu rows (Guides → Sizing/Layout): the summary is a row wrapper, the
   .sidebar-link inside it is the label + hit area - the component's summary
   padding would double the link's, so the row defers to the link. */
.site-sidebar .sidebar-submenu > summary { padding: 0; }
.site-sidebar .sidebar-submenu > summary:hover { background: transparent; }
.site-sidebar .sidebar-submenu > summary > .sidebar-link { flex: 1; }
/* the group's uppercase section label is a <summary><span>; the component
   already styles it - keep the sidebar's scroll padding roomy like before */
.site-sidebar .sidebar-content { padding: 0.75rem 0.5rem 1.25rem; gap: 0.25rem; }
/* nested pages of a submenu align under the parent label (component uses 1.5rem) */
.site-sidebar .sidebar-submenu > .sidebar-nav { padding-left: 0.875rem; }
/* the component's icon-rail rules would hide the label spans at 3.5rem —
   the docs dock collapses to zero width instead; neutralize the rail
   (desktop only - in drawer mode a stale collapsed state must still show
   the nav, since the drawer owns open/close there) */
@media (min-width: 64rem) {
  .site-sidebar[data-state="collapsed"] .sidebar-content { display: none; }
}

/* -- Header search (nav filter) ----------------------------- */
/* The sidebar's filter input lives in the header next to the version badge;
   its filtering logic binds in <site-nav>. */
.header-search {
  flex: 0 1 16rem;
  min-width: 0;
  position: relative;
  container-type: inline-size;
}
/* squeezed down to its icon (phones): no half-cut placeholder beside it */
@container (max-width: 4.5rem) {
  .header-search .header-search-input::placeholder { color: transparent; }
}
/* the magnifier in front of the placeholder - decorative, clicks pass to the input */
.header-search-icon {
  position: absolute;
  inset-inline-start: 0.625rem;
  top: 50%;
  translate: 0 -50%;
  color: var(--muted-foreground);
  pointer-events: none;
}
.header-search .header-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.375rem 0.625rem 0.375rem 1.875rem;
  font-size: 0.8125rem;
  font-family: var(--font-sans);
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius-md);
  background: var(--sidebar);
  color: var(--foreground);
  outline: none;
  /* trigger, not a field: it opens the command palette on focus/click */
  cursor: text;
  text-overflow: ellipsis;
}
.header-search-input:hover {
  border-color: var(--muted-foreground);
}
.header-search-input:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 2px oklch(from var(--ring) l c h / 0.18);
}
.header-search-input::placeholder {
  color: var(--muted-foreground);
  opacity: 0.65;
}

/* -- Component type badges ---------------------------------
   Atomic-design taxonomy (ATM/MOL/ORG/BLK/TPL) shown in the sidebar
   (replacing the old generic PREVIEW marker) and on each component doc
   page. Colors follow the taxonomy spec: one identity per type, dark
   variant for the dark scheme (forced-colors falls back to system ink). */
/* .type-badge base + taxonomy colors ship with the type-badge component (all.css);
   the positional composition rules below stay layout-side. */
/* Doc page title badge: sits right after the component name, on the heading's
   baseline (baseline-aligned inline-block keeps its border box on the text line). */
.page-header h1 .type-badge {
  display: inline-block;
  margin-inline-start: 0.5rem;
  vertical-align: baseline;
}
/* Sidebar keeps the right-aligned slot the old PREVIEW marker had. */
.nav-link .type-badge { margin-left: auto; }
/* a "new page" dot sits right after the label; the type badge keeps the right edge */
.nav-link > .sidebar-dot { margin-left: 0; }
/* Palette rows use flex space-between already; nudge badge off the label. */
.command-item .type-badge { margin-inline-start: auto; }

/* -- Built-with pills -------------------------------------- */
a.built-with-pill {
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
a.built-with-pill:hover {
  background: var(--accent);
  border-color: var(--foreground);
}

/* -- Details chevron rotation ------------------------------ */
details[open] > summary svg:first-child:not(.sidebar-icon > svg) {
  transform: rotate(90deg);
}

/* -- Architecture page (ARCH.md render, see scripts/lib/arch-page.ts) ---
   Same typographic scale the spec modal uses for markdown - one prose
   style, two hosts. */
.arch-prose { font-size: 0.9375rem; line-height: 1.85; }
.arch-prose h2 { font-family: var(--font-display); font-size: 1.375rem; font-weight: 400; letter-spacing: -0.02em; margin: 2.5rem 0 0.875rem; }
.arch-prose h3 { font-size: 1.0625rem; font-weight: 600; margin: 1.75rem 0 0.5rem; }
.arch-prose p { margin: 0 0 1rem; color: var(--muted-foreground); }
.arch-prose ul { margin: 0 0 1rem; padding-left: 1.5rem; list-style: disc; color: var(--muted-foreground); }
.arch-prose ol { margin: 0 0 1rem; padding-left: 1.5rem; list-style: decimal; color: var(--muted-foreground); }
.arch-prose li { margin-bottom: 0.375rem; }
.arch-prose li > strong:first-child { color: var(--foreground); }
.arch-prose code { font-family: var(--font-mono); font-size: 0.8125em; background: var(--muted); padding: 0.125em 0.375em; border-radius: var(--radius-sm); }
.arch-prose pre { background: var(--muted); border-radius: var(--radius-lg); padding: 1rem; margin: 0.5rem 0 1.25rem; overflow-x: auto; }
.arch-prose pre code { background: none; padding: 0; font-size: 0.8125rem; }
.arch-prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.arch-prose table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1.25rem; font-size: 0.8125rem; }
.arch-prose th, .arch-prose td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); }
.arch-prose th { font-weight: 600; background: var(--muted); }

/* -- Component Skill link -----------------------------------
   The `[data-spec-href]` span lives inside the skill `<summary>` - clicking it
   (or anywhere in the summary) toggles the <details> natively. No JS, no modal. */
[data-spec-href] { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--muted-foreground); }

/* -- Preview box ------------------------------------------- */
.preview {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  min-height: 11rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.875rem;
  padding: 2.5rem 1.5rem;
  background-color: var(--background);
  background-image:
    radial-gradient(circle, var(--border) 1px, transparent 1px);
  background-size: 24px 24px;
  position: relative;
}

/* -- Code block --------------------------------------------
   Terminal lines (.mockup-code > pre) and code inside website blocks
   ([class*="mk-"] - Code Example, Docs Content, Article Body…) and the BibTeX
   component (.bibtex - its view owns its code typography) are exempt:
   this sheet is unlayered and would outrank the components' own layered
   styles. */
pre:not(.mockup-code > pre, [class*="mk-"] pre, .bibtex pre) {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.8;
}
code:not(.mockup-code code, [class*="mk-"] code, .bibtex code) {
  font-family: var(--font-mono);
  font-size: 0.8125em;
  background: var(--muted);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
pre code { background: none; padding: 0; border: none; font-size: inherit; }

/* -- Demo design system (guide pages) -------------------------
   One card per example: .demo wraps the rendered .demo-stage and
   optionally its matching code block (.demo-code). Replaces the
   ad-hoc inline-style wrappers on guide pages - see AGENTS.md
   "Demo ↔ code parity". Add data-viewport to .demo and site.js
   adds the width toolbar that resizes .demo-viewport. */
.demo {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: 1.5rem;
  background: var(--background);
}
.demo-stage {
  padding: 1.5rem;
  overflow-x: auto;
}
/* The resizable mini-viewport the toolbar sizes (inline-size set by JS). */
.demo-viewport {
  margin-inline: auto;
  inline-size: 100%;
  max-inline-size: 100%;
  transition: inline-size 160ms ease;
}
.demo > .demo-code:first-child { border-top: none; }
.demo-code { border-top: 1px solid var(--border); }
.demo-code-header {
  padding: 0.625rem 1rem;
  background: var(--muted);
  border-bottom: 1px solid var(--border);
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--muted-foreground);
}
.demo pre {
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow-x: auto;
}

/* Demo CONTENT helpers (.demo-tile/.demo-label/.demo-outline/.demo-stripes/
   .demo-box) live in css/docs-utilities.css: the CodeExample sandbox mirrors
   that sheet (STYLE_FRAGMENTS), not this one - site chrome stays site-only. */

/* Viewport-width toolbar (injected by site.js into .demo[data-viewport]). */
.vp-toolbar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  background: var(--muted);
  border-bottom: 1px solid var(--border);
}
.vp-btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}
.vp-btn:hover { color: var(--foreground); }
.vp-btn[aria-pressed="true"] {
  background: var(--background);
  border-color: var(--border);
  color: var(--foreground);
  box-shadow: var(--shadow-2xs, none);
}

@media (prefers-reduced-motion: reduce) {
  .demo-viewport { transition: none; }
}

/* -- Shiki dual-theme: light default, dark via html.dark --- */
pre.shiki {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.25rem 1.5rem;
  overflow: hidden;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.8;
}
/* Nested pre inside a card/container - remove its own border/radius/bg */
pre.shiki[style*="border-radius:0"],
div[style*="overflow:hidden"] > pre.shiki,
div[style*="overflow:hidden"] > div > pre.shiki {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}
pre.shiki code {
  white-space: pre-wrap;
  word-break: break-all;
}
pre.shiki,
pre.shiki span {
  color: var(--shiki-light) !important;
  background-color: transparent !important;
}
html.dark pre.shiki,
html.dark pre.shiki span {
  color: var(--shiki-dark) !important;
  background-color: transparent !important;
}
.dim { color: var(--muted-foreground); }

/* -- Doc tabs (preview/pattern/html switcher) --------------
   .doc-tablist, never .tab-list: this sheet is unlayered, so a .tab-list rule
   here overrode the shipped Tabs component on every docs page and in every
   example sandbox (muted fill, padding and a 1rem bottom margin on each
   variant - the attached tabs never met their card). */
.doc-tablist {
  display: inline-flex;
  background: var(--muted);
  border-radius: var(--radius-md);
  padding: 0.2rem;
  gap: 0.125rem;
  margin-bottom: 1rem;
}
.tab-btn {
  padding: 0.3rem 0.875rem;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: var(--font-sans);
  border: none;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: all 150ms;
  line-height: 1.6;
}
.tab-btn[aria-selected="true"] {
  background: var(--background);
  color: var(--foreground);
  box-shadow: 0 1px 4px oklch(0 0 0 / 0.08), 0 0 0 1px var(--border);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* -- Token swatch ------------------------------------------ */
.swatch-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.625rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  min-width: 0;
  overflow: hidden;
}

/* -- Copy button ------------------------------------------- */
.copy-btn {
  position: absolute;
  /* above a positioned block it labels (a .mockup-code terminal is
     position: relative and would paint over the button) */
  z-index: 1;
  top: 0.625rem;
  right: 0.625rem;
  height: 1.875rem;
  padding: 0 0.625rem;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  background: var(--background);
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 150ms;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.copy-btn:hover { color: var(--foreground); }

/* -- API pill links (Web Platform APIs in spec details) ---- */
.api-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.75rem;
  color: var(--foreground);
  text-decoration: none;
  transition: background 150ms;
}
.api-pill:hover { background: var(--accent); }
.api-pill code { font-size: inherit; background: none; border: none; padding: 0; }
.api-pill svg { width: 10px; height: 10px; opacity: 0.4; flex-shrink: 0; }

/* -- Code collapse toggle ---------------------------------- */
.code-toggle-btn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: fit-content;
  margin-left: auto;
  margin-top: 0.25rem;
  padding: 0 0.375rem;
  height: 1.5rem;
  font-size: 0.6875rem;
  font-family: var(--font-mono);
  background: transparent;
  color: var(--muted-foreground);
  border: none;
  cursor: pointer;
  transition: color 150ms;
}
.code-toggle-btn:hover { color: var(--foreground); }

.code-block-wrapper.code-collapsed { display: none; }

/* -- Collapse-all toolbar ---------------------------------- */
.code-collapse-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.75rem;
}
/* the page title row: h1 left, page actions (Expand all code) right, on the
   title's line - no extra row under the intro */
.page-header-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  flex-wrap: wrap;
  /* the h1's bottom margin moves to the ROW: inside a flex row it could no
     longer collapse with the intro's top margin, which made every sticky
     page header 12px taller (a search hit then landed below the fold line) */
  margin-bottom: 0.75rem;
}
.page-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.page-header-actions:empty { display: none; }
.page-header-actions .code-collapse-toolbar { margin-top: 0; }
.code-collapse-all-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0 0.625rem;
  height: 1.875rem;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  background: transparent;
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 150ms, background 150ms;
}
.code-collapse-all-btn:hover {
  color: var(--foreground);
  background: var(--accent);
}

/* -- Sticky page header ------------------------------------ */
.page-header {
  position: sticky;
  top: 3.5rem;
  z-index: 10;
  background: var(--background);
  padding: 1rem 0 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}
.page-header > details {
  margin-bottom: 0 !important;
}
.page-header > :last-child {
  margin-bottom: 0 !important;
}

/* -- Theme selector popover -------------------------------- */
.theme-popover {
  position: fixed;
  inset: unset;
  top: 3.5rem;
  right: 0.75rem;
  width: 20rem;
  max-height: calc(100vh - 4.5rem);
  overflow-y: auto;
  margin: 0;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow: var(--shadow-lg);
}
.theme-popover::backdrop {
  background: transparent;
}
.theme-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  padding: 0 0.25rem;
}
.theme-popover-title {
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--foreground);
}
.theme-reset-btn {
  font-size: 0.6875rem;
  font-family: var(--font-mono);
  color: var(--muted-foreground);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: color 150ms, background 150ms;
}
.theme-reset-btn:hover {
  color: var(--foreground);
  background: var(--accent);
}
.theme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.375rem;
}
.theme-design-btn {
  width: 100%;
  margin-bottom: 0.625rem;
}
/* "Your themes" / "Presets" - only when designed themes exist */
.theme-grid-heading {
  grid-column: 1 / -1;
  margin: 0.375rem 0.25rem 0;
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
}
.theme-grid-heading:first-child { margin-top: 0; }
/* the designer's unsaved draft: swatch on the left, its actions beside it */
.theme-draft-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  & .btn { width: 100%; }
}
/* a live draft is on: a dot on the theme menu button says so on every page */
html[data-theme-draft] #theme-selector-btn {
  position: relative;
  &::after {
    content: '';
    position: absolute;
    inset-block-start: 0.25rem;
    inset-inline-end: 0.25rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 2px var(--background);
  }
}
@media (forced-colors: active) {
  html[data-theme-draft] #theme-selector-btn::after { background: Highlight; box-shadow: none; }
}
.theme-swatch {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: left;
  transition: border-color 150ms, background 150ms;
  color: var(--foreground);
  width: 100%;
}
.theme-swatch:hover {
  border-color: var(--foreground);
}
.theme-swatch.active {
  border-color: var(--primary);
  background: var(--accent);
}
.theme-swatch-label {
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.theme-swatch-colors {
  display: flex;
  gap: 0.25rem;
}
.theme-swatch-dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 1px solid oklch(0 0 0 / 0.12);
  flex-shrink: 0;
}

/* -- Separator --------------------------------------------- */
.sep {
  height: 1px;
  background: var(--border);
  margin: 2rem 0;
}

/* -- GitHub star count in header --------------------------- */
.github-stars {
  font-size: 0.75rem;
  font-family: var(--font-mono);
  background: var(--muted);
  padding: 0.0625rem 0.375rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  min-width: 1.25rem;
  text-align: center;
}
.github-stars:empty { display: none; }

/* -- Site footer ------------------------------------------- */
.site-footer {
  padding: 2rem 1.5rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  border-top: 1px solid var(--border);
}
.site-footer p { margin: 0; }
.site-footer-tagline {
  font-style: italic;
  margin: 0 0 0.25rem !important;
  color: var(--foreground);
  opacity: 0.7;
}
.site-footer a {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--muted-foreground);
  transition: text-decoration-color 150ms;
}
.site-footer a:hover { text-decoration-color: var(--foreground); }
.site-footer-dot { color: var(--border); }

/* -- Table of contents (right sidebar) --------------------- */
.site-toc {
  width: 12rem;
  flex-shrink: 0;
  position: sticky;
  top: 3.5rem;
  height: calc(100vh - 3.5rem);
  overflow-y: auto;
  padding: 2rem 1rem 2rem 0;
}
/* .toc-title/.toc-link styles ship with the toc component (all.css) */
/* § permalink styles ship with the heading-anchor component (all.css) */

/* Hide TOC on narrow screens */
@media (max-width: 72rem) {
  .site-toc { display: none; }
}

/* -- Inline table of contents ------------------------------
   The same links, written by the toc plugin right after the page header
   (lib/plugins.ts). Hidden while the right-hand ToC shows; below 72rem, where
   that one is hidden, it takes over at the top of the page - open, and
   collapsible. */
.page-toc { display: none; }
@media (max-width: 72rem) {
  .page-toc {
    display: block;
    margin: 0 0 1.5rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--background);
  }
  .page-toc > summary {
    cursor: pointer;
    padding: 0.25rem 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--foreground);
  }
  .page-toc-links {
    display: grid;
    gap: 0.125rem;
    padding: 0.25rem 0 0.375rem;
  }
}

/* -- Mobile responsive ------------------------------------- */

/* Sidebar dock toggle - panel-left glyph (lucide), sits in the header right
   after the brand (where the version badge used to ride). Always visible:
   docks/undoes the sidebar on desktop, opens/closes the drawer below 64rem
   (both wired in layout.ts#initSidebarToggle). */
.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
  flex-shrink: 0;
}

/* Sidebar overlay backdrop (hidden on desktop) */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  top: 3.5rem;
  z-index: 39;
  background: oklch(0 0 0 / 0.4);
}

/* Too little horizontal space for a docked sidebar + readable prose —
   the sidebar auto-collapses into the drawer, opened/closed by the header's
   panel-left toggle (same pattern the shipped sidebar component uses on
   mobile). Applies from tablet width down, not just phones. */
@media (max-width: 64rem) {
  /* Sidebar: off-canvas drawer. `display:flex` beats the component's own
     mobile hide rule (that one assumes an app-side <dialog> sheet; the docs
     site owns the drawer). Unlayered, so it wins regardless of specificity. */
  .site-sidebar {
    display: flex;
    position: fixed;
    top: 3.5rem;
    left: 0;
    z-index: 40;
    width: 16rem;
    /* anchored to the visible viewport's bottom, never a vh height: on a phone 100vh is the
       viewport with the toolbar hidden, so while it shows, the drawer's end - and its last
       links - sat below the screen, out of the menu's scroll range */
    bottom: 0;
    height: auto;
    transform: translateX(-100%);
    transition: transform 250ms ease;
    box-shadow: var(--shadow-lg);
  }
  .site-sidebar.open {
    transform: translateX(0);
  }
  /* drawer mode - the drawer owns open/close; the component's auto-collapse
     or a stale desktop dock state must not shrink/empty the drawer */
  .site-sidebar[data-state="collapsed"] {
    width: 16rem;
    border-right: 1px solid var(--sidebar-border);
  }
}

@media (max-width: 48rem) {
  /* Show backdrop when sidebar open */
  .sidebar-backdrop.open {
    display: block;
  }

  /* Reduce main padding on mobile */
  main {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Search: a compact trigger on phones (it opens the full palette) - the
     one item that gives way, down to its icon */
  .header-search {
    flex: 0 1 7rem;
    min-width: 2.25rem;
  }

  /* Reduce header padding */
  .site-header {
    padding: 0 0.5rem;
    gap: 0.375rem;
  }

  /* Brand stays one row (logo + version | name), just tighter - and never
     shrinks: a squeezed brand would push its name under the toggle */
  .header-brand {
    gap: 0.375rem;
    flex-shrink: 0;
  }
  .header-brand-logo { height: 26px; }
  .header-brand-name {
    font-size: 0.875rem;
    line-height: 1.2;
  }
  .sidebar-toggle { width: 2rem; height: 2rem; }
  .header-action:not(.theme-toggle-btn) { padding: 0.375rem; }
  /* the GitHub star count is desktop chrome - the icon stays */
  .header-action .github-stars { display: none; }
  /* the actions nav gets cramped on phones - drop the separators, keep the
     icon buttons reachable */
  .site-header .separator[data-orientation="vertical"] {
    display: none;
  }

  /* Shrink header action buttons on mobile */
  .header-action.theme-toggle-btn {
    width: 2rem;
    height: 2rem;
  }
  .header-action.theme-toggle-btn svg {
    width: 13px;
    height: 13px;
  }

  /* Preview boxes: allow wrapping, reduce padding */
  .preview {
    padding: 1.5rem 1rem;
    gap: 0.625rem;
  }

  /* Code blocks: reduce padding, smaller font */
  pre:not(.bibtex pre), pre.shiki {
    padding: 0.875rem 1rem;
    font-size: 0.75rem;
  }

  /* Page nav: single column on mobile */
  .page-nav {
    grid-template-columns: 1fr;
  }

  /* The page header scrolls away on phones - a sticky title block eats
     too much of a small screen (layout.ts then leaves it out of the anchor
     clearance, --anchor-pad) */
  .page-header {
    position: static;
    padding: 0.75rem 0;
  }

  /* Hide "GitHub" text, keep icon */
  .header-action .github-label {
    display: none;
  }

  /* Theme popover: wider on mobile */
  .theme-popover {
    right: 0.25rem;
    width: calc(100vw - 0.5rem);
    max-width: 20rem;
  }

  /* Swatch rows */
  .swatch-row {
    flex-wrap: wrap;
  }

}

@media (max-width: 48rem) and (prefers-reduced-motion: reduce) {
  .site-sidebar {
    transition: none;
  }
}

/* -- Prev / Next page navigation --------------------------- */
.page-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.page-nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  text-decoration: none;
  color: var(--foreground);
  transition: border-color 150ms, background 150ms;
}
.page-nav-link:hover {
  border-color: var(--foreground);
  background: var(--accent);
}
.page-nav-link svg {
  flex-shrink: 0;
  color: var(--muted-foreground);
}
.page-nav-prev { justify-content: flex-start; }
.page-nav-next { justify-content: flex-end; text-align: right; }
.page-nav-label {
  display: block;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--muted-foreground);
  margin-bottom: 0.125rem;
}
.page-nav-title {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
}



/* -- Right rail beside main (DocPage `aside`) ----------------------------
   Getting Started frames the flagship deck in the white space right of the
   44rem main column. Only shown where that space is real (>= 88rem); below,
   the deck stays one click away (its own page). Sticky: it stays in view
   while the intro scrolls. */
.site-aside { display: none; }
@media (min-width: 88rem) {
  /* main-column content the rail carries on wide screens (Getting Started
     statistics) - shown inline only where the rail is hidden */
  .rail-fallback { display: none; }
  .site-aside {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    max-width: 64rem;
    position: sticky;
    top: 3.5rem;
    align-self: flex-start;
    padding: 3rem 2.5rem 2rem 0.5rem;
  }
}
.deck-rail-eyebrow {
  margin: 0 0 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.deck-rail-frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  background: #0a1e4a; /* the deck's own navy - no white flash while it loads */
}
.deck-rail-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.deck-rail-caption {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted-foreground);
  text-wrap: pretty;
}
.deck-rail-extra {
  margin-top: 2.5rem;
}
.deck-rail-caption a {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* the index statistics: the shipped Statistic in the shipped Card, one box
   each - the figures count when they come into view (runtime/site.ts) */
.stats-cards {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.stats-card .statistic-value {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem;
  font-variant-numeric: tabular-nums;
}
.stats-card .stats-unit {
  font-size: 0.55em;
  font-weight: 600;
  color: var(--muted-foreground);
}
.stats-card .badge {
  align-self: center;
}

/* feedback / edit-source line under the prev/next pager */
.page-edit {
  margin: 1.5rem 0 0;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  text-wrap: balance;

  & a {
    color: var(--foreground);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in oklch, var(--foreground) 35%, transparent);

    &:hover { text-decoration-color: currentColor; }
    &:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }

    /* the GitHub mark sits ON the text baseline (an inline-flex link would
       move its baseline to the icon and lift the text off the sentence) */
    & svg { vertical-align: -0.125em; margin-inline-end: 0.375rem; }
  }
}

/* static code blocks (install commands …) are never collapsed and keep
   their Copy button: reserve its width so a long line scrolls instead of
   running under the button */
[data-code-static] > pre { padding-inline-end: 6.5rem; }

/* -- Theme Designer (theme-designer.html) -------------------------------
   The page's own layout: a toolbar, a sticky settings panel and the live
   preview - a grid of cards, one per docs section, built from the shipped
   components. Everything inside follows the theme being designed (it is
   applied to the whole page). No TOC on this page (its headings would be the preview's dialog titles; the designer needs the
   width). */
body:has([data-theme-designer]) :is(.site-toc, .page-toc) { display: none; }
/* a tool page: the title scrolls away instead of pinning over the editor */
body:has([data-theme-designer]) .page-header { position: static; }
/* Theming guide: the designer call-out wraps its button under the text when
   narrow (the shipped alert keeps its action beside the content) */
.alert.td-callout { flex-wrap: wrap; }
.td-callout .alert-content { flex: 1 1 16rem; min-width: 0; }
.td-callout .alert-action { margin-inline-start: auto; }
/* Theming guide: the two ways to design a theme */
.td-ways { display: grid; gap: 0.5rem; margin-top: 0; padding-inline-start: 1.25rem; list-style: disc; text-wrap: pretty; }
.td { container: td / inline-size; display: grid; gap: 1rem; margin-top: 1.5rem; }
.td-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.td-bar .select { width: 12rem; height: 2rem; }
.td-bar-group { display: inline-flex; align-items: center; gap: 0.25rem; }
.td-spacer { flex: 1; }
.td-mode .toggle { height: 2rem; gap: 0.375rem; }
.td-save { display: flex; gap: 0.375rem; }
.td-save .input { width: 11rem; height: 2rem; }
.td-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
@container td (min-width: 52rem) {
  .td-main { grid-template-columns: 22rem minmax(0, 1fr); }
  .td-panel { position: sticky; top: 4.5rem; max-height: calc(100vh - 5.5rem); }
}
.td-panel { display: flex; flex-direction: column; min-height: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.td-tabs { display: flex; flex-direction: column; min-height: 0; }
.td-tabs > .tab-list { flex: none; margin: 0.5rem 0.5rem 0; }
.td-tabs > .tab-content { min-height: 0; overflow-y: auto; padding: 0.5rem 0.75rem 1rem; overscroll-behavior: contain; }

/* the settings rows the script builds */
.td-group { border-bottom: 1px solid var(--border); }
.td-group:last-child { border-bottom: 0; }
.td-group > summary { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.625rem 0.25rem; font-size: 0.8125rem; font-weight: 600; cursor: pointer; list-style: none; }
.td-group > summary::-webkit-details-marker { display: none; }
.td-group > summary::after { content: "+"; color: var(--muted-foreground); font-weight: 400; }
.td-group[open] > summary::after { content: "−"; }
.td-group-swatches { display: flex; gap: 2px; margin-inline-start: auto; }
.td-group-swatches i { width: 0.75rem; height: 0.75rem; border: 1px solid var(--border); border-radius: 3px; background: var(--c); }
.td-token { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 0.5rem; align-items: center; padding: 0.375rem 0.25rem; }
.td-token-name { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted-foreground); }
.td-token .color-picker { padding: 0; border: 0; background: none; box-shadow: none; }
.td-token .color-picker input[type="color"] { width: 2rem; height: 2rem; }
.td-token .input { height: 2rem; font-family: var(--font-mono); font-size: 0.75rem; }
.td-token .input:user-invalid, .td-token .input[aria-invalid="true"] { border-color: var(--destructive); }
.td-contrast { font-family: var(--font-sans); font-size: 0.625rem; font-weight: 600; }
.td-contrast[data-level="fail"] { color: var(--destructive); }
.td-setting { display: grid; gap: 0.375rem; padding: 0.625rem 0.25rem; border-bottom: 1px solid var(--border); }
.td-setting:last-child { border-bottom: 0; }
.td-setting > .label, .td-setting-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.8125rem; font-weight: 600; }
.td-setting-head output { color: var(--muted-foreground); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400; }
.td-hint { margin: 0; color: var(--muted-foreground); font-size: 0.75rem; line-height: 1.5; }
.td-setting .combobox { width: 100%; }
.td-setting .combobox-trigger { width: 100%; justify-content: space-between; }
.td-saved-list { display: grid; gap: 0.5rem; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.td-saved-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; padding: 0.625rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-md); }
.td-saved-item[data-active] { border-color: var(--primary); }
.td-saved-item strong { display: block; overflow: hidden; font-size: 0.8125rem; text-overflow: ellipsis; white-space: nowrap; }
.td-saved-item small { color: var(--muted-foreground); font-size: 0.6875rem; }
.td-saved-actions { display: flex; gap: 0.125rem; }

/* the live preview */
.td-preview { display: grid; gap: 1rem; min-width: 0; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--background); }
.td-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: 0.375rem; }
/* every chip edits its colour (popover) */
.td-chip { display: grid; gap: 0.25rem; min-width: 0; padding: 0.25rem; border: 1px solid transparent; border-radius: var(--radius-md); background: none; color: var(--muted-foreground); font: inherit; text-align: start; cursor: pointer; transition: border-color 150ms, background 150ms; }
.td-chip:hover { border-color: var(--border); background: var(--accent); }
.td-chip:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.td-chip[data-editing] { border-color: var(--ring); background: var(--accent); }
.td-chip span { overflow: hidden; font-family: var(--font-mono); font-size: 0.625rem; text-overflow: ellipsis; white-space: nowrap; }
.td-chip i { height: 1.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--c); }
.td-chip-pop { width: min(18rem, calc(100vw - 2rem)); }
.td-chip-pop .td-token { padding: 0; }
.td-chip-pop .td-token-name > span:first-child { display: none; } /* the popover title names the token */
/* Forms & Inputs is the rest of the editor: two columns when there is room */
.td-form-card { grid-column: 1 / -1; container: td-form / inline-size; }
.td-form { display: grid; gap: 0.5rem 1.5rem; }
@container td-form (min-width: 40rem) { .td-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.td-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.td-fieldset > legend { padding: 0 0.25rem 0.25rem; color: var(--muted-foreground); font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.td-shadow-box { min-width: 0; margin: 0; padding: 0; border: 0; }
.td-shadow-box:disabled { opacity: 0.6; }
.td-slider-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr)); column-gap: 1rem; }
.td-slider-grid .td-setting { border-bottom: 0; }
.td-form-samples { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: 0.75rem 1.5rem; padding-block-start: 0.75rem; border-block-start: 1px solid var(--border); }
.td-form-samples > :is(.td-row, textarea) { grid-column: 1 / -1; }
/* the font list's "Use “…”" row: empty = nothing to offer */
.td-any-font:empty { display: none; }
.td-any-font[aria-disabled="true"] { color: var(--muted-foreground); font-size: 0.75rem; }
/* preview tabs: every component, then each scaffold app */
.td-views { display: grid; gap: 0.75rem; min-width: 0; }
.td-views > .tab-list { grid-auto-columns: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: thin; overscroll-behavior-inline: contain; }
.td-app { display: grid; gap: 0.5rem; justify-items: end; }
.td-app-frame { width: 100%; height: min(46rem, calc(100dvh - 8rem)); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--background); }
.td-app-frame[data-loading] { visibility: hidden; }
.td-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr)); gap: 1rem; align-items: start; }
.td-card { min-width: 0; }
.td-wide { grid-column: 1 / -1; }
.td-stack { display: grid; gap: 0.75rem; }
.td-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.td-field { display: grid; gap: 0.375rem; }
.td-check { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; }
.td-kbd { display: inline-flex; gap: 0.25rem; margin-inline-start: auto; }
.td-muted { margin: 0.5rem 0 0; color: var(--muted-foreground); font-size: 0.8125rem; }
.td-avatars { display: inline-flex; margin-inline-start: auto; }
.td-avatars .avatar + .avatar { margin-inline-start: -0.5rem; box-shadow: 0 0 0 2px var(--card); }
.td-skel { display: grid; flex: 1; gap: 0.375rem; min-width: 5rem; }
.td-pop-title { margin: 0 0 0.25rem; font-weight: 600; }
.td-pop-text { margin: 0; color: var(--muted-foreground); font-size: 0.8125rem; }
.td-charts { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1rem; }
.td-bars { display: flex; align-items: flex-end; gap: 0.3125rem; height: 8rem; padding-block-end: 0.25rem; border-block-end: 1px solid var(--border); }
.td-bars i { flex: 1; height: var(--h); border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--c); }
.td-donut { width: 6.5rem; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--card) 58%, transparent 60%), conic-gradient(var(--chart-1) 0 32%, var(--chart-2) 0 54%, var(--chart-3) 0 72%, var(--chart-4) 0 88%, var(--chart-5) 0); }
.td-side { display: grid; gap: 0.25rem; padding: 0.625rem; border: 1px solid var(--sidebar-border); border-radius: var(--radius-lg); background: var(--sidebar); color: var(--sidebar-foreground); font-size: 0.8125rem; }
.td-side-head { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.375rem; font-weight: 600; }
.td-side-logo { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-sm); background: var(--sidebar-primary); color: var(--sidebar-primary-foreground); font-size: 0.75rem; }
.td-side-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem; border-radius: var(--radius-md); }
.td-side-item svg { width: 1rem; height: 1rem; }
.td-side-item[data-active] { background: var(--sidebar-primary); color: var(--sidebar-primary-foreground); }
.td-side-item[data-hover] { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); box-shadow: inset 0 0 0 1px var(--sidebar-ring); }
.td-side-badge { margin-inline-start: auto; padding: 0 0.375rem; border-radius: 999px; background: var(--sidebar-primary); color: var(--sidebar-primary-foreground); font-size: 0.6875rem; }
.td-type { display: grid; gap: 0.75rem; }
.td-type p { margin: 0; }
.td-type-h { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.td-type-serif { margin: 0; padding-inline-start: 1rem; border-inline-start: 3px solid var(--primary); font-family: var(--font-serif); font-size: 1.125rem; font-style: italic; }
.td-type-mono { margin: 0; padding: 0.75rem 1rem; border-radius: var(--radius-md); background: var(--muted); font-family: var(--font-mono); font-size: 0.8125rem; }
.td-dialog { width: min(40rem, calc(100% - 2rem)); }
.td-dialog-body { display: grid; gap: 0.5rem; }
.td-code { font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) {
  .td-group > summary::after, .td-chip { transition: none; }
}
@media (forced-colors: active) {
  .td-chip i, .td-group-swatches i, .td-bars i, .td-donut { forced-color-adjust: none; }
  .td-chip:focus-visible { outline-color: Highlight; }
}