@lupinum/ginko-docs 0.4.0-rc.9 → 0.4.0

package/app/assets/css/prose.css

@@ -1,3240 +0,0 @@
-.content-prose,
-.content-prose.content-prose,
-[data-fd-codeblock] {
-  --content-prose-foreground: color-mix(in oklab, var(--foreground) 85%, transparent);
-  --content-prose-heading-foreground: color-mix(in oklab, var(--foreground) 90%, transparent);
-  /* Inline code belongs to its surrounding surface; monospace type carries
-     the distinction without adding a nested chip background. */
-  --content-prose-inline-code-background: var(--background);
-  --content-prose-inline-code-foreground: var(--foreground);
-  --content-prose-code-highlight-border: var(--code-border);
-  /* Kept light enough that Shiki's light-plus tokens stay WCAG AA on top. */
-  --content-prose-code-highlight-background: color-mix(in oklab, var(--primary) 5%, transparent);
-  --content-prose-code-add-background: color-mix(in oklab, var(--chart-2) 22%, transparent);
-  --content-prose-code-remove-background: color-mix(in oklab, var(--destructive) 18%, transparent);
-  --content-media-bleed-md: 2rem;
-  --content-media-bleed-lg: 6rem;
-  --content-media-bleed-xl: 12rem;
-}
-
-.content-prose,
-.content-prose.content-prose {
-  color: var(--content-prose-foreground);
-  font-size: 0.9375rem;
-  line-height: 1.65;
-  text-wrap: pretty;
-}
-
-.content-prose.content-prose-docs {
-  --content-media-bleed-md: 1rem;
-  --content-media-bleed-lg: 1.5rem;
-  --content-media-bleed-xl: 2rem;
-}
-
-.content-prose :where(h1, h2, h3, h4, h5, h6) {
-  color: var(--content-prose-heading-foreground);
-}
-
-.content-prose :where(p) {
-  margin-top: 0.95em;
-  margin-bottom: 0.95em;
-}
-
-.content-prose p,
-.content-prose li {
-  font-size: inherit;
-  line-height: inherit;
-}
-
-.content-prose :where(h1) {
-  margin-top: 2em;
-  margin-bottom: 0.5em;
-}
-
-.content-prose h1 {
-  font-size: 1.25rem;
-  line-height: 1.35;
-  font-weight: 600;
-  letter-spacing: -0.02em;
-}
-
-.content-prose :where(h2) {
-  margin-top: 2em;
-  margin-bottom: 0.5em;
-}
-
-.content-prose h2 {
-  font-size: 1.25rem;
-  line-height: 1.35;
-  font-weight: 600;
-  letter-spacing: -0.02em;
-}
-
-.content-prose :where(h3) {
-  margin-top: 1.6em;
-  margin-bottom: 0.4em;
-}
-
-.content-prose h3 {
-  font-size: 1.03125rem;
-  line-height: 1.5;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-}
-
-.content-prose :where(h4, h5, h6) {
-  margin-top: 1.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.content-prose h4,
-.content-prose h5,
-.content-prose h6 {
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-  font-weight: 600;
-  letter-spacing: 0;
-}
-
-.content-prose :where(h2, h3, h4, h5, h6) + :where(p, ul, ol, blockquote, table, .not-prose) {
-  margin-top: 0;
-}
-
-.content-prose :where(ul, ol) {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  padding-left: 1.25rem;
-}
-
-.content-prose :where(ul) {
-  list-style-type: disc;
-}
-
-.content-prose :where(ol) {
-  list-style-type: decimal;
-}
-
-.content-prose :where(ul ul) {
-  list-style-type: circle;
-}
-
-.content-prose :where(ul ul ul) {
-  list-style-type: square;
-}
-
-.content-prose :where(ol ol) {
-  list-style-type: lower-alpha;
-}
-
-.content-prose :where(ol ol ol) {
-  list-style-type: lower-roman;
-}
-
-.content-prose :where(li) {
-  margin-top: 0.375rem;
-  margin-bottom: 0.375rem;
-}
-
-.content-prose :where(li > p) {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.content-prose :where(blockquote) {
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
-  border-left: 2px solid color-mix(in oklab, var(--primary) 35%, var(--border));
-  padding-left: 1rem;
-  color: color-mix(in oklab, var(--foreground) 82%, transparent);
-  font-size: 0.9375rem;
-  font-style: italic;
-  line-height: 1.75;
-}
-
-.content-prose :where(blockquote > p) {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-
-.content-prose :where(blockquote > p:first-child) {
-  margin-top: 0;
-}
-
-.content-prose :where(blockquote > p:last-child) {
-  margin-bottom: 0;
-}
-
-.content-prose :where(hr) {
-  margin-top: 2rem;
-  margin-bottom: 2rem;
-  border: 0;
-  border-top: 1px solid var(--border);
-}
-
-.content-prose :where(figure, .not-prose) {
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
-}
-
-.content-prose :where(figcaption, .content-caption) {
-  color: var(--muted-foreground);
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-}
-
-.content-layout-row {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.content-layout-row-border,
-.content-layout-row-border-dashed {
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 0.5rem;
-}
-
-.content-layout-row-border-dashed {
-  border-style: dashed;
-}
-
-.content-layout-row-outline,
-.content-layout-row-outline-dashed {
-  border-radius: var(--radius);
-  padding: 0.5rem;
-  outline: 1px solid var(--border);
-  outline-offset: 2px;
-}
-
-.content-layout-row-outline-dashed {
-  outline-style: dashed;
-}
-
-.content-layout-column {
-  width: 100%;
-  min-width: 0;
-}
-
-.content-layout-column-inner {
-  height: 100%;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
-
-.content-layout-column-divider {
-  border-bottom: 1px solid var(--border);
-}
-
-.content-layout-column-divider-dashed {
-  border-bottom-style: dashed;
-}
-
-@media (min-width: 640px) {
-  .content-layout-row {
-    gap: 1rem;
-  }
-}
-
-@media (min-width: 768px) {
-  .content-layout-row {
-    flex-direction: row;
-  }
-
-  .content-layout-column-sm {
-    width: 33.333333%;
-  }
-
-  .content-layout-column-md {
-    width: 50%;
-  }
-
-  .content-layout-column-lg {
-    width: 66.666667%;
-  }
-
-  .content-layout-column-divider {
-    border-right: 1px solid var(--border);
-    border-bottom: 0;
-  }
-
-  .content-layout-column-divider-dashed {
-    border-right-style: dashed;
-  }
-}
-
-.content-prose :where(a) {
-  color: var(--foreground);
-  font-weight: 500;
-  text-decoration-line: underline;
-  text-underline-offset: 4px;
-}
-
-.content-prose :where(a:hover) {
-  color: var(--primary);
-}
-
-.content-prose :where(a.not-prose) {
-  color: inherit;
-  font-weight: inherit;
-  text-decoration-line: none;
-}
-
-.content-prose :where(a.not-prose:hover) {
-  color: inherit;
-}
-
-.content-prose :where(h1, h2, h3, h4, h5, h6) :where(a) {
-  color: inherit;
-  text-decoration-line: none;
-}
-
-.content-prose :where(h1, h2, h3, h4, h5, h6) :where(a:hover) {
-  color: inherit;
-}
-
-.content-code,
-.content-prose :where(code):not(:where(pre code, [class~="not-prose"], [class~="not-prose"] *)) {
-  display: inline;
-  position: relative;
-  max-width: 100%;
-  border-radius: max(0.3125rem, calc(var(--radius) - 5px));
-  box-decoration-break: clone;
-  -webkit-box-decoration-break: clone;
-  border: 1px solid color-mix(in oklab, var(--foreground) 15%, transparent);
-  background-color: var(--content-prose-inline-code-background, var(--muted));
-  color: var(--content-prose-inline-code-foreground, var(--foreground));
-  /* em-based so chips scale with tables, callouts, and body text alike */
-  padding: 0.14em 0.38em;
-  font-family: var(--font-mono);
-  font-size: 0.855em !important;
-  font-weight: 400;
-  line-height: inherit;
-  outline: none;
-  overflow-wrap: anywhere;
-  white-space: normal;
-  word-break: normal;
-}
-
-.content-prose :where(code):not(:where(pre code, [class~="not-prose"], [class~="not-prose"] *)) {
-  font-size: 0.855em !important;
-}
-
-.content-code.shiki,
-.content-prose
-  :where(code.shiki):not(:where(pre code, [class~="not-prose"], [class~="not-prose"] *)) {
-  white-space: break-spaces;
-}
-
-.shiki span {
-  background-color: var(--shiki-default-bg, transparent);
-  color: var(--shiki-default, var(--shiki-light, currentColor));
-  font-style: var(--shiki-default-font-style, var(--shiki-light-font-style, inherit));
-  font-weight: var(--shiki-default-font-weight, var(--shiki-light-font-weight, inherit));
-  text-decoration: var(
-    --shiki-default-text-decoration,
-    var(--shiki-light-text-decoration, inherit)
-  );
-}
-
-.content-prose :where(pre code) {
-  border: 0;
-  background-color: transparent;
-  color: inherit;
-  padding: 0;
-  font-size: inherit;
-  font-weight: inherit;
-}
-
-.content-prose :where(strong) {
-  color: var(--foreground);
-  font-weight: 600;
-}
-
-.content-prose :where(table) {
-  width: 100%;
-  margin: 0;
-}
-
-/* Tables share the codeblock chrome: a secondary frame around a background
-   panel, so tables, codeblocks, and tabs read as one family. */
-.content-table {
-  width: 100%;
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
-  border-radius: var(--radius);
-  background-color: var(--secondary);
-  padding: 0.25rem;
-}
-
-.content-table-scroll {
-  overflow-x: auto;
-  border: 1px solid var(--code-border);
-  border-radius: calc(var(--radius) - 2px);
-  background-color: var(--background);
-}
-
-.content-table table {
-  width: 100%;
-  caption-side: bottom;
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-}
-
-.content-table th {
-  padding: 0.5rem 0.875rem;
-  text-align: left;
-  vertical-align: middle;
-  /* Matches the codeblock caption tone. */
-  color: color-mix(in oklab, var(--foreground) 80%, var(--muted-foreground));
-  font-weight: 600;
-  border-bottom: 1px solid var(--code-border);
-}
-
-.content-table td {
-  padding: 0.5625rem 0.875rem;
-  vertical-align: middle;
-  color: color-mix(in oklab, var(--foreground) 88%, transparent);
-}
-
-.content-table tbody tr + tr td {
-  border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
-}
-
-/* Keep short table code chips atomic so their cloned decoration cannot leave
-   an empty fragment on the previous line. Oversized tokens can still wrap
-   inside the chip instead of forcing unbounded horizontal overflow. */
-.content-table :where(th, td) :where(code, .content-code) {
-  display: inline-block;
-  max-width: min(100%, 48ch);
-  overflow-wrap: break-word;
-  white-space: normal;
-}
-
-html.dark .shiki span {
-  background-color: var(--shiki-dark-bg, transparent);
-  color: var(--shiki-dark) !important;
-  font-style: var(--shiki-dark-font-style, inherit) !important;
-  font-weight: var(--shiki-dark-font-weight, inherit) !important;
-  text-decoration: var(--shiki-dark-text-decoration, inherit) !important;
-}
-
-/* Code blocks default to a stable dark presentation in either page theme.
-   "adaptive" leaves these local tokens unset and follows the page tokens. */
-html[data-code-blocks="dark"] :where(.content-codeblock, .content-codegroup, .content-code-tree) {
-  --background: var(--theme-neutral-950);
-  --foreground: var(--theme-neutral-50);
-  --card: var(--theme-neutral-900);
-  --card-foreground: var(--theme-neutral-50);
-  --primary: var(--theme-primary-dark);
-  --primary-foreground: var(--theme-primary-dark-foreground);
-  --secondary: var(--theme-neutral-800);
-  --secondary-foreground: var(--theme-neutral-50);
-  --muted: var(--theme-neutral-800);
-  --muted-foreground: var(--theme-neutral-400);
-  --accent: var(--theme-neutral-800);
-  --accent-foreground: var(--theme-neutral-50);
-  --code: var(--theme-neutral-900);
-  --code-foreground: var(--theme-neutral-50);
-  --code-border: var(--theme-neutral-800);
-  --border: var(--theme-neutral-800);
-  --input: var(--theme-neutral-700);
-  --ring: var(--theme-primary-dark-ring);
-}
-
-html[data-code-blocks="dark"] .content-codeblock.shiki span {
-  background-color: var(--shiki-dark-bg, transparent);
-  color: var(--shiki-dark) !important;
-  font-style: var(--shiki-dark-font-style, inherit) !important;
-  font-weight: var(--shiki-dark-font-weight, inherit) !important;
-  text-decoration: var(--shiki-dark-text-decoration, inherit) !important;
-}
-
-[data-fd-codeblock] {
-  background-color: var(--secondary);
-  color: var(--foreground);
-}
-
-.content-codeblock {
-  min-width: 0;
-  max-width: 100%;
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
-  border-radius: var(--radius);
-  color: var(--foreground);
-  font-size: 0.8125rem;
-  line-height: 1.5;
-}
-
-/* Consecutive codeblocks read as one run of examples; tighten the seam.
-   Both sides shrink because adjacent margins collapse to the larger value. */
-.content-prose :where(.content-codeblock:has(+ .content-codeblock)) {
-  margin-bottom: 0.5rem;
-}
-
-.content-prose :where(.content-codeblock + .content-codeblock) {
-  margin-top: 0.5rem;
-}
-
-.content-codeblock-plain {
-  padding: 0.25rem;
-}
-
-.content-codeblock-with-caption {
-  padding: 0.125rem 0.25rem 0.25rem;
-}
-
-.content-codeblock [data-fd-caption] {
-  display: flex;
-  height: 1.75rem;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  padding-right: 0.25rem;
-  padding-left: 0.5rem;
-  /* Strong enough against the caption's muted background for WCAG AA. */
-  color: color-mix(in oklab, var(--foreground) 80%, var(--muted-foreground));
-  font-size: 0.8125rem;
-  font-weight: 500;
-  line-height: 1rem;
-}
-
-.content-codeblock-caption-icon {
-  width: 0.8125rem;
-  height: 0.8125rem;
-  flex-shrink: 0;
-}
-
-.content-codeblock .fd-scroll-container {
-  width: 100%;
-  max-width: 100%;
-  overflow-x: auto;
-  /* auto, not hidden: blocks taller than the max-height cap must scroll,
-     otherwise their tail is unreachable. */
-  overflow-y: auto;
-  overscroll-behavior-x: none;
-  border: 1px solid var(--code-border);
-  border-radius: calc(var(--radius) - 2px);
-  background-color: var(--background);
-}
-
-.content-codeblock-scroll-wrap {
-  position: relative;
-  min-width: 0;
-}
-
-/* Right-edge fade signals clipped horizontal content; hidden at scroll end. */
-.content-codeblock-overflow-fade {
-  position: absolute;
-  top: 1px;
-  right: 1px;
-  bottom: 1px;
-  width: 2.5rem;
-  border-radius: 0 calc(var(--radius) - 3px) calc(var(--radius) - 3px) 0;
-  background: linear-gradient(to right, transparent, var(--background));
-  pointer-events: none;
-  transition: opacity 150ms ease;
-}
-
-.content-codeblock-overflow-fade[data-hidden="true"] {
-  opacity: 0;
-}
-
-/* The `::collapse` component clips tall authored content until the reader
-   expands it; expanding removes the cap so the page owns scrolling. */
-.content-collapse {
-  position: relative;
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
-}
-
-.content-collapse-region[data-collapsed] {
-  max-height: 480px;
-  overflow: hidden;
-}
-
-.content-collapse-region > :first-child {
-  margin-top: 0 !important;
-}
-
-.content-collapse-region > :last-child {
-  margin-bottom: 0 !important;
-}
-
-/* Inside a collapse region the wrapper owns clipping; a nested codeblock
-   scroll cap would create a second scroll area. */
-.content-collapse-region .content-codeblock .fd-scroll-container {
-  max-height: none;
-}
-
-.content-collapse-fade {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  height: 5rem;
-  align-items: flex-end;
-  justify-content: center;
-  padding-bottom: 0.625rem;
-  background: linear-gradient(to bottom, transparent, var(--background) 82%);
-}
-
-.content-collapse-button {
-  appearance: none;
-  cursor: pointer;
-  border: 1px solid var(--border);
-  border-radius: 9999px;
-  background-color: var(--secondary);
-  padding: 0.2rem 0.75rem;
-  color: var(--foreground);
-  font-family: var(--font-body);
-  font-size: 0.75rem;
-  font-weight: 500;
-  line-height: 1.25rem;
-  white-space: nowrap;
-  outline: none;
-  transition: border-color 150ms ease;
-}
-
-.content-collapse-button:hover {
-  border-color: color-mix(in oklab, var(--foreground) 25%, transparent);
-}
-
-.content-collapse-button:focus-visible {
-  outline: 2px solid color-mix(in oklab, var(--ring) 50%, transparent);
-  outline-offset: 2px;
-}
-
-.content-codeblock pre {
-  min-width: 100%;
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-  color: var(--code-foreground);
-  font-size: 0.8125rem;
-  line-height: 1.5;
-  outline: none;
-}
-
-.content-codeblock pre > code {
-  display: flex;
-  width: max-content;
-  min-width: 100%;
-  flex-direction: column;
-}
-
-.content-codeblock-copy-button {
-  display: inline-flex;
-  width: 1.5rem;
-  height: 1.5rem;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  border: 0;
-  border-radius: var(--radius);
-  background-color: transparent;
-  color: var(--muted-foreground);
-  font-size: 0.875rem;
-  font-weight: 500;
-  white-space: nowrap;
-  outline: none;
-  user-select: none;
-  transition:
-    color 150ms ease,
-    background-color 150ms ease,
-    opacity 150ms ease,
-    transform 150ms ease;
-}
-
-.content-codeblock-copy-button:hover,
-.content-codeblock-copy-button:focus-visible {
-  background-color: var(--muted);
-  color: var(--foreground);
-}
-
-.content-codeblock-copy-button:focus-visible {
-  opacity: 1;
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--foreground) 25%, transparent);
-}
-
-.content-codeblock-copy-button:active {
-  transform: scale(0.9);
-}
-
-.content-codeblock-copy-button-floating {
-  opacity: 0;
-}
-
-.content-codeblock:hover .content-codeblock-copy-button-floating,
-.content-codeblock-copy-button-floating:focus,
-.content-codeblock-copy-button-floating:focus-visible {
-  opacity: 1;
-}
-
-.content-codeblock-in-group {
-  margin: 0;
-  padding: 0;
-  border-radius: 0;
-  background-color: transparent;
-}
-
-.content-codeblock-in-group .fd-scroll-container {
-  border: 0;
-  border-radius: 0;
-}
-
-.content-codegroup {
-  min-width: 0;
-  max-width: 100%;
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
-  border-radius: var(--radius);
-  background-color: var(--secondary);
-  padding: 0.125rem 0.25rem 0.25rem;
-}
-
-.content-codegroup-header {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  padding: 0.25rem 0.25rem 0.25rem 0.5rem;
-}
-
-.content-tabs {
-  min-width: 0;
-  max-width: 100%;
-  margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
-  border-radius: var(--radius);
-  background-color: var(--secondary);
-  padding: 0.125rem 0.25rem 0.25rem;
-}
-
-.content-tabs-in-stack {
-  margin-bottom: 0;
-  border-radius: 0;
-  padding: 0;
-}
-
-.content-tabs-header {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.25rem 0.25rem 0.25rem 0.5rem;
-}
-
-.content-tabs-list {
-  display: flex;
-  min-width: 0;
-  align-items: flex-end;
-  gap: 0.125rem;
-  overflow-x: auto;
-  overflow-y: hidden;
-}
-
-.content-tabs-tab {
-  display: inline-flex;
-  height: 1.75rem;
-  flex-shrink: 0;
-  appearance: none;
-  cursor: pointer;
-  align-items: center;
-  justify-content: center;
-  gap: 0.375rem;
-  border: 1px solid transparent;
-  border-radius: calc(var(--radius) - 2px);
-  background-color: transparent;
-  padding: 0 0.5rem;
-  color: var(--muted-foreground);
-  font-size: 0.875rem;
-  font-weight: 500;
-  line-height: 1rem;
-  white-space: nowrap;
-  outline: none;
-  transition:
-    color 150ms ease,
-    border-color 150ms ease;
-}
-
-.content-tabs-tab-icon {
-  width: 0.875rem;
-  height: 0.875rem;
-  flex-shrink: 0;
-}
-
-.content-tabs-tab:hover,
-.content-tabs-tab:focus-visible,
-.content-tabs-tab-active,
-.content-tabs-tab[aria-selected="true"] {
-  color: var(--foreground);
-}
-
-.content-tabs-tab-active,
-.content-tabs-tab[aria-selected="true"] {
-  border-color: color-mix(in oklab, var(--border) 80%, transparent);
-  background-color: var(--background);
-  box-shadow: var(--shadow-xs);
-}
-
-.content-tabs-tab:focus-visible {
-  outline: 2px solid color-mix(in oklab, var(--ring) 50%, transparent);
-  outline-offset: 2px;
-}
-
-.content-tabs-panels {
-  overflow: hidden;
-  border: 1px solid var(--code-border);
-  border-radius: calc(var(--radius) - 2px);
-  background-color: var(--background);
-}
-
-.content-tabs-content-area {
-  margin: 0;
-}
-
-.content-tabs[data-padded="true"] .content-tabs-content-area {
-  padding: 1rem;
-}
-
-.content-tabs[data-padded="false"] .content-tabs-content-area {
-  padding: 0;
-}
-
-.content-tabs-content-area > .content-media:only-child {
-  margin: -1rem;
-  border: 0;
-}
-
-.content-codegroup-tabs {
-  display: flex;
-  min-width: 0;
-  align-items: flex-end;
-  gap: 0.125rem;
-  overflow-x: auto;
-  overflow-y: hidden;
-}
-
-.content-codegroup-tab {
-  display: inline-flex;
-  height: 1.625rem;
-  flex-shrink: 0;
-  appearance: none;
-  cursor: pointer;
-  align-items: center;
-  justify-content: center;
-  gap: 0.375rem;
-  border: 0;
-  border-bottom: 1px solid transparent;
-  border-radius: 0;
-  background-color: transparent;
-  padding: 0 0.375rem 0.25rem;
-  color: var(--muted-foreground);
-  font-size: 0.8125rem;
-  font-weight: 500;
-  line-height: 1rem;
-  white-space: nowrap;
-  outline: none;
-  transition:
-    color 150ms ease,
-    border-color 150ms ease;
-}
-
-.content-codegroup-tab:hover,
-.content-codegroup-tab:focus-visible,
-.content-codegroup-tab-active,
-.content-codegroup-tab[aria-selected="true"] {
-  color: var(--primary);
-}
-
-.content-codegroup-tab-active,
-.content-codegroup-tab[aria-selected="true"] {
-  border-bottom-color: var(--primary);
-}
-
-.content-codegroup-tab:focus-visible {
-  outline: 2px solid color-mix(in oklab, var(--ring) 50%, transparent);
-  outline-offset: 2px;
-}
-
-.content-codegroup-tab-icon {
-  width: 0.8125rem;
-  height: 0.8125rem;
-  flex-shrink: 0;
-  filter: grayscale(1);
-  opacity: 0.7;
-  transition:
-    filter 150ms ease,
-    opacity 150ms ease;
-}
-
-.content-codegroup-tab-active .content-codegroup-tab-icon,
-.content-codegroup-tab[aria-selected="true"] .content-codegroup-tab-icon {
-  opacity: 1;
-}
-
-.content-codegroup-copy-button {
-  opacity: 1;
-}
-
-.content-codegroup-panels {
-  overflow: hidden;
-  border: 1px solid var(--code-border);
-  border-radius: calc(var(--radius) - 2px);
-  background-color: var(--background);
-}
-
-[data-fd-codeblock] pre code .line {
-  display: block;
-  min-height: 1.25rem;
-  padding-right: 0.75rem;
-  padding-left: 0.75rem;
-}
-
-[data-fd-codeblock] .language-text {
-  padding-right: 0.75rem;
-  padding-left: 0.75rem;
-}
-
-[data-fd-codeblock] .content-codeblock-inline-copy .line {
-  padding-right: 2.75rem;
-}
-
-[data-fd-codeblock] pre .line.highlight,
-[data-fd-codeblock] pre .line.highlighted {
-  border-left: 2px solid var(--content-prose-code-highlight-border);
-  background-color: var(--content-prose-code-highlight-background);
-  padding-left: calc(0.75rem - 2px);
-}
-
-[data-fd-codeblock] pre .line.diff.add,
-[data-fd-codeblock] pre .line.diff.remove {
-  position: relative;
-  display: block;
-  padding-left: 1.75rem;
-}
-
-[data-fd-codeblock] pre .line.diff.add::before,
-[data-fd-codeblock] pre .line.diff.remove::before {
-  position: absolute;
-  left: 0.75rem;
-  font-weight: 700;
-}
-
-[data-fd-codeblock] pre .line.diff.add {
-  background-color: var(--content-prose-code-add-background);
-}
-
-[data-fd-codeblock] pre .line.diff.add::before {
-  color: var(--chart-2);
-  content: "+";
-}
-
-[data-fd-codeblock] pre .line.diff.remove {
-  background-color: var(--content-prose-code-remove-background);
-}
-
-[data-fd-codeblock] pre .line.diff.remove::before {
-  color: var(--destructive);
-  content: "-";
-}
-
-.content-prose :where(.footnote-ref) {
-  font-size: 0.75em;
-  line-height: 0;
-  vertical-align: super;
-}
-
-.content-prose :where(.footnote-ref a) {
-  color: var(--primary);
-  font-weight: 600;
-  scroll-margin-top: 7rem;
-  text-decoration-line: none;
-}
-
-.content-prose :where(.footnotes) {
-  margin-top: 2rem;
-  color: var(--muted-foreground);
-  font-size: 0.875rem;
-  line-height: 1.6;
-}
-
-.content-prose :where(.footnotes > hr) {
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
-
-.content-prose :where(.footnotes-list) {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.content-prose :where(.footnotes-list li) {
-  margin-top: 0.375rem;
-  margin-bottom: 0.375rem;
-  scroll-margin-top: 7rem;
-}
-
-.content-prose :where(.footnote-backref) {
-  color: var(--primary);
-  font-weight: 600;
-  text-decoration-line: none;
-}
-
-.content-alert-title {
-  margin: 0;
-}
-
-.content-callout {
-  --content-callout-accent: var(--muted-foreground);
-  --content-callout-surface: color-mix(in oklab, var(--secondary) 90%, transparent);
-  width: 100%;
-  display: flex;
-  gap: 0.5rem;
-  border-radius: var(--radius);
-  background-color: var(--secondary);
-  padding: 0.75rem 0.75rem 0.75rem 0.4rem;
-  color: var(--foreground);
-  font-size: 0.875rem;
-  line-height: 1.625;
-}
-
-.content-callout-note {
-  --content-callout-accent: var(--muted-foreground);
-  --content-callout-surface: color-mix(in oklab, var(--secondary) 90%, transparent);
-}
-
-.content-callout-info {
-  --content-callout-accent: var(--info);
-  --content-callout-surface: color-mix(in oklab, var(--secondary) 90%, transparent);
-}
-
-.content-callout-warning {
-  --content-callout-accent: var(--warning);
-  --content-callout-surface: color-mix(in oklab, var(--secondary) 90%, transparent);
-}
-
-.content-callout-error {
-  --content-callout-accent: var(--destructive);
-  --content-callout-surface: color-mix(in oklab, var(--secondary) 90%, transparent);
-}
-
-.content-callout-success {
-  --content-callout-accent: var(--success);
-  --content-callout-surface: color-mix(in oklab, var(--secondary) 90%, transparent);
-}
-
-.content-callout-idea {
-  --content-callout-accent: var(--primary);
-  --content-callout-surface: color-mix(in oklab, var(--secondary) 90%, transparent);
-}
-
-.content-callout > .content-callout-bar {
-  width: 0.125rem;
-  flex-shrink: 0;
-  border-radius: var(--radius);
-  background-color: color-mix(in oklab, var(--content-callout-accent) 70%, transparent);
-  color: var(--content-callout-accent);
-}
-
-.content-callout > .content-callout-icon {
-  display: inline-flex;
-  width: 1.25rem;
-  height: 1.25rem;
-  margin-top: 0.25rem;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  border: 0;
-  border-radius: 0;
-  background-color: transparent;
-  color: var(--content-callout-accent);
-}
-
-.content-callout > .content-callout-icon > :where(svg, span, .iconify) {
-  width: 1.15rem;
-  height: 1.15rem;
-}
-
-.content-callout-body {
-  min-width: 0;
-  flex: 1;
-}
-
-.content-callout .content-prose {
-  font-size: 0.875rem;
-  line-height: inherit;
-}
-
-.content-callout .content-alert-title {
-  margin-bottom: 0.125rem;
-  color: var(--foreground);
-  font-size: 0.875rem;
-  font-weight: 600;
-  line-height: inherit;
-}
-
-.content-media {
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
-  overflow: hidden;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background-color: var(--card);
-  box-shadow: var(--shadow-xs);
-}
-
-.content-media img {
-  display: block;
-  width: 100%;
-}
-
-.content-media figcaption {
-  border-top: 1px solid var(--border);
-  background-color: color-mix(in oklab, var(--muted) 30%, transparent);
-  padding: 0.75rem 1rem;
-}
-
-.content-media-description {
-  display: block;
-  margin-top: 0.25rem;
-  color: var(--muted-foreground);
-}
-
-.content-media[data-bleed="true"] {
-  margin-right: 0;
-  margin-left: 0;
-}
-
-@media (min-width: 768px) {
-  .content-media[data-bleed="true"] {
-    margin-right: calc(var(--content-media-bleed-md) * -1);
-    margin-left: calc(var(--content-media-bleed-md) * -1);
-  }
-}
-
-@media (min-width: 1024px) {
-  .content-media[data-bleed="true"] {
-    margin-right: calc(var(--content-media-bleed-lg) * -1);
-    margin-left: calc(var(--content-media-bleed-lg) * -1);
-  }
-}
-
-@media (min-width: 1280px) {
-  .content-media[data-bleed="true"] {
-    margin-right: calc(var(--content-media-bleed-xl) * -1);
-    margin-left: calc(var(--content-media-bleed-xl) * -1);
-  }
-}
-
-.content-card-icon {
-  color: var(--content-card-icon-color, var(--muted-foreground));
-}
-
-.content-prose > :where(.not-prose) + :where(.not-prose) {
-  margin-top: 1rem;
-}
-
-.content-prose :where(p:has(> img:only-child)) {
-  margin: 1.5rem 0;
-}
-
-.content-prose-image,
-.content-prose :where(p > img:only-child) {
-  display: block;
-  max-width: 100%;
-  height: auto;
-  margin: 0;
-  border-radius: var(--radius);
-}
-
-.content-prose-trim > :first-child {
-  margin-top: 0 !important;
-}
-
-.content-prose-trim > :last-child {
-  margin-bottom: 0 !important;
-}
-
-.content-steps {
-  counter-reset: step;
-  position: relative;
-  margin: 1rem 0 1.5rem 0.875rem;
-  border-inline-start: 1px solid var(--border);
-  padding-inline-start: 2rem;
-}
-
-.content-step {
-  position: relative;
-  min-height: 2rem;
-  margin-block: 1.25rem;
-}
-
-.content-step:first-child {
-  margin-top: 0;
-}
-
-.content-step:last-child {
-  margin-bottom: 0;
-}
-
-.content-step-marker {
-  position: absolute;
-  inset-block-start: 0.125rem;
-  inset-inline-start: -2.875rem;
-  display: flex;
-  width: 1.75rem;
-  height: 1.75rem;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--border);
-  border-radius: calc(var(--radius) - 2px);
-  background-color: var(--secondary);
-  color: var(--secondary-foreground);
-  font-size: 0.875rem;
-  font-weight: 500;
-  line-height: 1.25rem;
-}
-
-.content-steps[data-mode="numbered"] .content-step-marker {
-  border-radius: 9999px;
-}
-
-.content-step-body {
-  padding-block-start: 0.125rem;
-}
-
-.content-step-title {
-  margin: 0 0 0.375rem !important;
-  color: var(--foreground);
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-  font-weight: 600;
-}
-
-.fd-scroll-container::-webkit-scrollbar,
-.content-table-scroll::-webkit-scrollbar {
-  width: 5px;
-  height: 5px;
-}
-
-.fd-scroll-container::-webkit-scrollbar-thumb,
-.content-table-scroll::-webkit-scrollbar-thumb {
-  border-radius: 5px;
-  background: var(--border);
-}
-
-.fd-scroll-container::-webkit-scrollbar-track,
-.content-table-scroll::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.fd-scroll-container::-webkit-scrollbar-corner,
-.content-table-scroll::-webkit-scrollbar-corner {
-  display: none;
-}
-
-/* The inline TOC (`::toc`) reuses the docs TOC component inside prose;
-   neutralize prose list and link styling for its own markup. */
-.content-inline-toc :where(ul, ol) {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.content-inline-toc :where(li) {
-  margin: 0;
-}
-
-.content-inline-toc :where(a) {
-  color: var(--muted-foreground);
-  font-weight: 400;
-  text-decoration-line: none;
-}
-
-.content-inline-toc :where(a:hover) {
-  color: var(--foreground);
-}
-
-/* Code tree (`::code-tree`) embeds full ProsePre blocks in its content pane;
-   strip their standalone chrome so they fill the pane. */
-.content-code-tree-pane .content-codeblock {
-  margin: 0;
-  border: 0;
-  border-radius: 0;
-}
-
-/* ProsePre wraps its scroll container for the overflow fade; the wrapper must
-   pass the pane's flex sizing through to the scroll container. */
-.content-code-tree-pane .content-codeblock-scroll-wrap {
-  min-width: 0;
-}
-
-.content-code-tree-pane .fd-scroll-container {
-  max-height: 28rem;
-}
-
-/* The code tree list lives inside prose; neutralize prose list styling and
-   own the structural spacing here (utilities lose to these unlayered rules). */
-.content-code-tree-list {
-  margin: 0;
-  padding: 0.375rem;
-  list-style: none;
-}
-
-.content-code-tree-list :where(ul) {
-  margin: 0;
-  margin-inline-start: 1.0625rem;
-  padding: 0;
-  padding-inline-start: 0.5rem;
-  list-style: none;
-}
-
-.content-code-tree-list :where(li) {
-  margin: 0;
-}
-
-.content-code-tree {
-  display: grid;
-  min-width: 0;
-  max-width: 100%;
-  margin-block: 1.25rem;
-  overflow: hidden;
-  border-radius: var(--radius);
-  color: var(--card-foreground);
-  font-size: 0.8125rem;
-}
-
-.content-code-tree[data-appearance="quiet"] {
-  border: 1px solid var(--border);
-  background-color: var(--card);
-  box-shadow: var(--shadow-xs);
-}
-
-.content-code-tree[data-appearance="tint"] {
-  gap: 0.25rem;
-  background-color: var(--secondary);
-  padding: 0.25rem;
-}
-
-.content-code-tree-list {
-  max-height: 15rem;
-  overflow-y: auto;
-  border-bottom: 1px solid var(--border);
-  background-color: var(--card);
-}
-
-.content-code-tree[data-appearance="tint"] .content-code-tree-list,
-.content-code-tree[data-appearance="tint"] .content-code-tree-pane {
-  overflow: hidden;
-  border: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
-  border-radius: calc(var(--radius) - 2px);
-  background-color: var(--background);
-  box-shadow: var(--shadow-xs);
-}
-
-.content-code-tree-pane,
-.content-code-tree-panel {
-  min-width: 0;
-}
-
-.content-code-tree-pane {
-  overflow: hidden;
-}
-
-.content-code-tree-row {
-  display: flex;
-  width: 100%;
-  min-height: 2rem;
-  cursor: pointer;
-  align-items: center;
-  gap: 0.5rem;
-  border: 0;
-  border-radius: calc(var(--radius) - 3px);
-  background: transparent;
-  padding: 0.375rem 0.5rem;
-  color: inherit;
-  text-align: start;
-  transition:
-    color 150ms ease,
-    background-color 150ms ease;
-}
-
-.content-code-tree-row:hover {
-  background-color: color-mix(in oklab, var(--secondary) 65%, transparent);
-}
-
-.content-code-tree-row:focus-visible {
-  outline: 2px solid color-mix(in oklab, var(--ring) 50%, transparent);
-  outline-offset: -2px;
-}
-
-.content-code-tree-row-active,
-.content-code-tree-row-active:hover {
-  background-color: color-mix(in oklab, var(--primary) 10%, transparent);
-  color: var(--primary);
-}
-
-.content-code-tree-chevron {
-  width: 0.875rem;
-  height: 0.875rem;
-  flex: none;
-  color: var(--muted-foreground);
-  transition: transform 180ms ease-out;
-}
-
-.content-code-tree-chevron[data-open="true"] {
-  transform: rotate(90deg);
-}
-
-[dir="rtl"] .content-code-tree-chevron:not([data-open="true"]) {
-  transform: rotate(180deg);
-}
-
-.content-code-tree-icon {
-  width: 1rem;
-  height: 1rem;
-  flex: none;
-  color: var(--muted-foreground);
-}
-
-.content-code-tree-row-active .content-code-tree-icon {
-  color: color-mix(in oklab, var(--primary) 80%, transparent);
-}
-
-.content-code-tree-spacer {
-  width: 0.875rem;
-  height: 0.875rem;
-  flex: none;
-}
-
-.content-code-tree-label {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.content-code-tree-branch {
-  position: relative;
-  border-inline-start: 1px solid var(--border);
-}
-
-@media (min-width: 1024px) {
-  .content-code-tree {
-    grid-template-columns: minmax(12rem, 0.85fr) minmax(0, 2fr);
-  }
-
-  .content-code-tree-list {
-    max-height: 28rem;
-    border-right: 1px solid var(--border);
-    border-bottom: 0;
-  }
-
-  [dir="rtl"] .content-code-tree-list {
-    border-right: 0;
-    border-left: 1px solid var(--border);
-  }
-
-  .content-code-tree[data-appearance="tint"] .content-code-tree-list {
-    border: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
-  }
-}
-
-/* Prose appearance system ---------------------------------------------------
-   Two appearances, one grammar (RFC-001).
-
-   quiet — the card family: var(--card) surface, 1px var(--border),
-   var(--radius), var(--shadow-xs). Structured blocks add a muted header
-   strip (the code-caption pattern generalized). Accent lives in icons and
-   text, never in fills or bars.
-
-   tint — the tint & bar family: var(--secondary) surface, no outer border.
-   Voice blocks carry an inset 2px rail; object blocks become a 0.25rem tray
-   holding raised var(--background) panels. Raised = interactive or active.
-
-   Shared primitives (identical in both appearances): eyebrow labels, mono
-   meta, one chip, marker tiles, 55%-muted affordances, content-prose bodies.
-   Families keep their own geometry on purpose — do not genericize. */
-
-/* --- Shared primitives --- */
-
-/* The p-based selectors match the specificity of `.content-prose p`
-   (0,1,1) so the eyebrow scale survives inside prose containers. */
-.content-eyebrow,
-p.content-aside-label,
-p.content-excerpt-label,
-p.content-read-more-title {
-  display: flex;
-  align-items: center;
-  gap: 0.4rem;
-  margin: 0 0 0.35rem;
-  color: var(--muted-foreground);
-  font-size: 0.6875rem;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  line-height: 1.4;
-  text-transform: uppercase;
-}
-
-.content-meta,
-.content-timeline-date,
-.content-files-annotation,
-.content-quiz-progress,
-.content-excerpt-source {
-  color: var(--muted-foreground);
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  font-weight: 400;
-}
-
-.content-chip {
-  display: inline-flex;
-  align-items: center;
-  border: 1px solid var(--border);
-  border-radius: 0.375rem;
-  background: color-mix(in oklab, var(--muted) 50%, transparent);
-  padding: 0.05rem 0.5rem;
-  color: var(--muted-foreground);
-  font-size: 0.72rem;
-  font-weight: 500;
-}
-
-/* --- Callout (voice) -------------------------------------------------------
-   Both appearances keep the canonical 2px semantic rail. Quiet changes only
-   the surface treatment, so intent remains visible without a tinted fill. */
-
-.content-callout {
-  margin-block: 1.25rem;
-}
-
-.content-callout[data-appearance="quiet"] {
-  border: 1px solid var(--border);
-  background-color: var(--card);
-  box-shadow: var(--shadow-xs);
-  padding: 0.75rem 0.9rem 0.75rem 0.4rem;
-}
-
-/* --- Aside + excerpt (voice) --- */
-
-.content-aside,
-.content-excerpt {
-  position: relative;
-  margin-block: 1.25rem;
-  border-radius: var(--radius);
-  font-size: 0.875rem;
-  line-height: 1.625;
-}
-
-.content-aside[data-appearance="quiet"],
-.content-excerpt[data-appearance="quiet"] {
-  border: 1px solid var(--border);
-  background-color: var(--card);
-  box-shadow: var(--shadow-xs);
-  padding: 0.75rem 1rem;
-}
-
-.content-aside[data-appearance="tint"],
-.content-excerpt[data-appearance="tint"] {
-  background-color: var(--secondary);
-  padding: 0.75rem 1rem 0.75rem 1.15rem;
-}
-
-/* The voice rail: an inset 2px bar, muted for asides, accent for excerpts. */
-.content-aside[data-appearance="tint"]::before,
-.content-excerpt[data-appearance="tint"]::before {
-  content: "";
-  position: absolute;
-  inset-block: 0.75rem;
-  inset-inline-start: 0.45rem;
-  width: 2px;
-  border-radius: 999px;
-  background-color: color-mix(in oklab, var(--muted-foreground) 45%, transparent);
-}
-
-.content-excerpt[data-appearance="tint"]::before {
-  background-color: color-mix(in oklab, var(--info) 70%, transparent);
-}
-
-.content-excerpt .content-excerpt-label {
-  color: var(--info);
-}
-
-.content-aside-body,
-.content-excerpt-body {
-  color: var(--muted-foreground);
-}
-
-.content-excerpt-body {
-  margin: 0;
-  border: 0;
-  padding: 0;
-  font-size: 0.875rem;
-  font-style: normal;
-  line-height: 1.625;
-}
-
-.content-excerpt-source {
-  display: block;
-  margin: 0.5rem 0 0;
-}
-
-.content-excerpt-source::before {
-  content: "— ";
-}
-
-/* --- Cards (object) --- */
-
-.content-cards {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 0.75rem;
-  margin-block: 1.25rem;
-}
-
-.content-cards > * {
-  margin: 0 !important;
-}
-
-.content-cards[data-appearance="tint"] {
-  gap: 0.25rem;
-  border-radius: var(--radius);
-  background-color: var(--secondary);
-  padding: 0.25rem;
-}
-
-@media (min-width: 640px) {
-  .content-cards[data-columns="2"],
-  .content-cards[data-columns="3"] {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@media (min-width: 900px) {
-  .content-cards[data-columns="3"] {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-
-.content-card {
-  position: relative;
-  display: block;
-  height: auto;
-  border-radius: var(--radius);
-}
-
-.content-card-standalone {
-  margin-block: 1.25rem;
-}
-
-/* A lone tint card carries its own tray so the raised panel sits on tint. */
-.content-card-standalone[data-appearance="tint"] {
-  background-color: var(--secondary);
-  padding: 0.25rem;
-}
-
-.content-card-surface {
-  position: relative;
-  overflow: hidden;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background-color: var(--card);
-  box-shadow: var(--shadow-xs);
-  color: var(--foreground);
-  transition:
-    border-color 180ms ease-out,
-    background-color 180ms ease-out;
-}
-
-.content-card[data-appearance="tint"] .content-card-surface {
-  border-color: color-mix(in oklab, var(--border) 80%, transparent);
-  border-radius: calc(var(--radius) - 2px);
-  background-color: var(--background);
-}
-
-.content-card:is(a, [href]) {
-  cursor: pointer;
-  text-decoration: none;
-}
-
-.content-card:is(a, [href]):hover .content-card-surface {
-  border-color: color-mix(in oklab, var(--foreground) 18%, var(--border));
-  background-color: color-mix(in oklab, var(--secondary) 55%, var(--card));
-}
-
-.content-card[data-appearance="tint"]:is(a, [href]):hover .content-card-surface {
-  border-color: color-mix(in oklab, var(--foreground) 14%, var(--border));
-  background-color: color-mix(in oklab, var(--secondary) 35%, var(--background));
-}
-
-.content-card-media {
-  display: block;
-  width: 100%;
-  border-bottom: 1px solid var(--border);
-  object-fit: cover;
-}
-
-.content-card-header {
-  padding: 1rem;
-}
-
-.content-card-header[data-trailing="true"] {
-  padding-bottom: 0;
-}
-
-.content-card-header[data-horizontal="true"] {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.75rem;
-}
-
-.content-card-header[data-reserve-link-icon="true"] {
-  padding-right: 2.5rem;
-}
-
-/* Marker tile: same primitive as read-more tiles and step markers. */
-.content-card-tile {
-  display: flex;
-  width: 2.5rem;
-  height: 2.5rem;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--border);
-  border-radius: calc(var(--radius) - 2px);
-  background-color: var(--muted);
-  box-shadow: var(--shadow-xs);
-  color: var(--content-card-icon-color, var(--muted-foreground));
-}
-
-.content-card-header:not([data-horizontal="true"]) .content-card-tile {
-  margin-bottom: 0.5rem;
-}
-
-.content-card-tile :where(svg, .iconify) {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
-.content-card-copy {
-  min-width: 0;
-  flex: 1;
-}
-
-.content-card-title {
-  color: var(--foreground);
-  font-size: 0.875rem;
-  font-weight: 600;
-  line-height: 1.5;
-}
-
-.content-card-description {
-  margin-top: 0.125rem;
-  color: var(--muted-foreground);
-  font-size: 0.875rem;
-  line-height: 1.4;
-  text-wrap: pretty;
-}
-
-.content-card-body {
-  padding: 1rem;
-  color: var(--muted-foreground);
-}
-
-.content-card-header + .content-card-body {
-  padding-top: 0.5rem;
-}
-
-.content-card-body[data-reserve-link-icon="true"] {
-  padding-right: 2.5rem;
-}
-
-.content-card-footer {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  border-top: 1px solid var(--border);
-  padding: 0.65rem 1rem;
-  color: var(--muted-foreground);
-  font-size: 0.75rem;
-}
-
-.content-card-footer :where(p) {
-  margin: 0;
-  line-height: 1.5;
-}
-
-.content-card-arrow {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
-  width: 1rem;
-  height: 1rem;
-  pointer-events: none;
-  color: color-mix(in oklab, var(--muted-foreground) 55%, transparent);
-  transition: color 180ms ease-out;
-}
-
-.content-card:is(a, [href]):hover .content-card-arrow {
-  color: var(--foreground);
-}
-
-/* Cards stacked flush inside another surface (tabs, code trees). */
-.content-card-in-stack .content-card-surface {
-  border-right: 0;
-  border-left: 0;
-  border-radius: 0;
-  box-shadow: none;
-}
-
-.content-card-in-stack:first-child .content-card-surface {
-  border-top-left-radius: var(--radius);
-  border-top-right-radius: var(--radius);
-}
-
-.content-card-in-stack:last-child .content-card-surface {
-  border-bottom-left-radius: var(--radius);
-  border-bottom-right-radius: var(--radius);
-}
-
-/* --- Read more (object) --- */
-
-.content-read-more {
-  margin-block: 1.25rem;
-}
-
-.content-read-more-list {
-  border-radius: var(--radius);
-}
-
-.content-read-more[data-appearance="quiet"] .content-read-more-list {
-  overflow: hidden;
-  border: 1px solid var(--border);
-  background-color: var(--card);
-  box-shadow: var(--shadow-xs);
-}
-
-.content-read-more[data-appearance="tint"] .content-read-more-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  background-color: var(--secondary);
-  padding: 0.25rem;
-}
-
-.content-read-more-link {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.65rem 0.9rem;
-  color: var(--foreground);
-  text-decoration: none;
-  transition: background-color 180ms ease-out;
-}
-
-.content-read-more[data-appearance="quiet"] .content-read-more-link + .content-read-more-link {
-  border-top: 1px solid var(--border);
-}
-
-.content-read-more[data-appearance="quiet"] .content-read-more-link:hover {
-  background-color: color-mix(in oklab, var(--secondary) 50%, transparent);
-}
-
-.content-read-more[data-appearance="tint"] .content-read-more-link {
-  border: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
-  border-radius: calc(var(--radius) - 2px);
-  background-color: var(--background);
-  box-shadow: var(--shadow-xs);
-  padding: 0.6rem 0.85rem;
-}
-
-.content-read-more[data-appearance="tint"] .content-read-more-link:hover {
-  background-color: color-mix(in oklab, var(--secondary) 35%, var(--background));
-}
-
-.content-read-more-link:focus-visible {
-  outline: 2px solid color-mix(in oklab, var(--ring) 50%, transparent);
-  outline-offset: -2px;
-}
-
-/* quiet: bordered marker tile — tint: bare inline icon on the raised panel */
-.content-read-more-icon {
-  display: flex;
-  flex: none;
-  align-items: center;
-  justify-content: center;
-  color: var(--muted-foreground);
-}
-
-.content-read-more[data-appearance="quiet"] .content-read-more-icon {
-  width: 2rem;
-  height: 2rem;
-  border: 1px solid var(--border);
-  border-radius: calc(var(--radius) - 2px);
-  background-color: var(--muted);
-  box-shadow: var(--shadow-xs);
-}
-
-.content-read-more-icon :where(svg, .iconify) {
-  width: 1rem;
-  height: 1rem;
-}
-
-.content-read-more-copy {
-  min-width: 0;
-  flex: 1;
-}
-
-.content-read-more-label,
-.content-read-more-description {
-  display: block;
-}
-
-.content-read-more-label {
-  font-size: 0.875rem;
-  font-weight: 500;
-}
-
-.content-read-more-description {
-  margin-top: 0.125rem;
-  color: var(--muted-foreground);
-  font-size: 0.8125rem;
-}
-
-.content-read-more-arrow {
-  width: 1rem;
-  height: 1rem;
-  flex: none;
-  color: color-mix(in oklab, var(--muted-foreground) 55%, transparent);
-  transition: color 150ms ease;
-}
-
-.content-read-more-link:hover .content-read-more-arrow {
-  color: var(--foreground);
-}
-
-/* --- Accordion (object) --- */
-
-.content-accordion {
-  width: 100%;
-  margin-block: 1.25rem;
-  border-radius: var(--radius);
-}
-
-.content-accordion[data-appearance="quiet"] {
-  overflow: hidden;
-  border: 1px solid var(--border);
-  background-color: var(--card);
-  box-shadow: var(--shadow-xs);
-}
-
-.content-accordion[data-appearance="quiet"] .content-accordion-item + .content-accordion-item {
-  border-top: 1px solid var(--border);
-}
-
-.content-accordion[data-appearance="tint"] {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  background-color: var(--secondary);
-  padding: 0.25rem;
-}
-
-.content-accordion[data-appearance="tint"] .content-accordion-item {
-  overflow: hidden;
-  border: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
-  border-radius: calc(var(--radius) - 2px);
-  background-color: var(--background);
-  box-shadow: var(--shadow-xs);
-}
-
-/* The header is an h3 for document structure; prose heading margins and
-   type must not leak into the trigger row (h3-prefixed to outrank
-   `.content-prose h3`). */
-h3.content-accordion-header,
-.content-accordion-header {
-  display: flex;
-  margin: 0;
-  font-size: 0.875rem;
-  line-height: 1.5;
-}
-
-.content-accordion-trigger {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 0.65rem 0.9rem;
-  color: var(--foreground);
-  font-size: 0.875rem;
-  font-weight: 600;
-  line-height: 1.5;
-  text-align: start;
-  transition: background-color 180ms ease-out;
-}
-
-.content-accordion-trigger:hover {
-  background-color: color-mix(in oklab, var(--secondary) 50%, transparent);
-}
-
-.content-accordion[data-appearance="tint"] .content-accordion-trigger:hover {
-  background-color: color-mix(in oklab, var(--secondary) 35%, var(--background));
-}
-
-.content-accordion-trigger:focus-visible {
-  outline: 2px solid color-mix(in oklab, var(--ring) 50%, transparent);
-  outline-offset: -2px;
-}
-
-.content-accordion-chevron {
-  width: 1rem;
-  height: 1rem;
-  flex: none;
-  color: color-mix(in oklab, var(--muted-foreground) 55%, transparent);
-  transition: transform 200ms ease;
-}
-
-.content-accordion-trigger:hover .content-accordion-chevron,
-.content-accordion-trigger[data-state="open"] .content-accordion-chevron {
-  color: var(--muted-foreground);
-}
-
-.content-accordion-trigger[data-state="open"] .content-accordion-chevron {
-  transform: rotate(180deg);
-}
-
-.content-accordion-content {
-  overflow: hidden;
-  font-size: 0.875rem;
-}
-
-.content-accordion-copy {
-  padding: 0 0.9rem 0.75rem;
-  color: var(--muted-foreground);
-}
-
-/* Source disclosures in the component laboratory are intentionally flatter
-   than authored accordions. Their single code block is tooling, not content. */
-.content-accordion:has(> .content-accordion-item:only-child .content-codeblock) {
-  border-color: color-mix(in oklab, var(--border) 70%, transparent);
-  background: transparent;
-  box-shadow: none;
-  padding: 0;
-}
-
-.content-accordion:has(> .content-accordion-item:only-child .content-codeblock)
-  > .content-accordion-item {
-  border: 0;
-  background: transparent;
-  box-shadow: none;
-}
-
-.content-accordion:has(> .content-accordion-item:only-child .content-codeblock)
-  .content-accordion-trigger {
-  min-height: 2.25rem;
-  padding: 0.45rem 0.75rem;
-  color: var(--muted-foreground);
-  font-size: 0.8125rem;
-  font-weight: 500;
-}
-
-.content-accordion:has(> .content-accordion-item:only-child .content-codeblock)
-  .content-accordion-copy {
-  padding: 0 0 0.25rem;
-}
-
-/* --- Tabs (object; canonical tint anatomy defined above) --- */
-
-.content-tabs[data-appearance="quiet"]:not(.content-tabs-in-stack) {
-  overflow: hidden;
-  border: 1px solid var(--border);
-  background-color: var(--card);
-  box-shadow: var(--shadow-xs);
-  padding: 0.125rem 0.25rem 0.25rem;
-}
-
-.content-tabs[data-appearance="quiet"]:not(.content-tabs-in-stack) > .content-tabs-header {
-  padding: 0.25rem;
-}
-
-.content-tabs[data-appearance="quiet"]:not(.content-tabs-in-stack) > .content-tabs-panels {
-  border-color: var(--border);
-  border-radius: calc(var(--radius) - 2px);
-}
-
-.content-tabs[data-appearance="quiet"]:not(.content-tabs-in-stack) .content-tabs-tab-active,
-.content-tabs[data-appearance="quiet"]:not(.content-tabs-in-stack)
-  .content-tabs-tab[aria-selected="true"] {
-  background-color: var(--muted);
-  box-shadow: none;
-}
-
-/* layout="line": underline tabs, same anatomy as the code group header. */
-.content-tabs[data-layout="line"] .content-tabs-tab {
-  height: 1.625rem;
-  border: 0;
-  border-bottom: 1px solid transparent;
-  border-radius: 0;
-  background-color: transparent;
-  box-shadow: none;
-  padding: 0 0.375rem 0.25rem;
-}
-
-.content-tabs[data-layout="line"] .content-tabs-tab-active,
-.content-tabs[data-layout="line"] .content-tabs-tab[aria-selected="true"] {
-  border-bottom-color: var(--primary);
-  color: var(--primary);
-}
-
-/* --- Code blocks and code groups (object) --- */
-
-.content-codeblock[data-appearance="quiet"]:not(.content-codeblock-in-group) {
-  overflow: hidden;
-  border: 1px solid var(--border);
-  background-color: var(--card);
-  box-shadow: var(--shadow-xs);
-  padding: 0;
-}
-
-.content-codeblock[data-appearance="quiet"]:not(.content-codeblock-in-group) [data-fd-caption] {
-  height: 2rem;
-  border-bottom: 1px solid var(--border);
-  background-color: color-mix(in oklab, var(--muted) 35%, transparent);
-  padding-right: 0.375rem;
-  padding-left: 0.75rem;
-}
-
-.content-codeblock[data-appearance="quiet"]:not(.content-codeblock-in-group) .fd-scroll-container {
-  border: 0;
-  border-radius: 0;
-  background-color: transparent;
-}
-
-.content-codeblock[data-appearance="quiet"]:not(.content-codeblock-in-group)
-  .content-codeblock-overflow-fade {
-  top: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: 0;
-  background: linear-gradient(to right, transparent, var(--card));
-}
-
-.content-codegroup[data-appearance="quiet"] {
-  overflow: hidden;
-  border: 1px solid var(--border);
-  background-color: var(--card);
-  box-shadow: var(--shadow-xs);
-  padding: 0;
-}
-
-.content-codegroup[data-appearance="quiet"] .content-codegroup-header {
-  min-height: 2.25rem;
-  border-bottom: 1px solid var(--border);
-  background-color: color-mix(in oklab, var(--muted) 35%, transparent);
-  padding: 0.25rem 0.375rem 0.25rem 0.75rem;
-}
-
-.content-codegroup[data-appearance="quiet"] .content-codegroup-panels {
-  border: 0;
-  border-radius: 0;
-}
-
-/* Collapse fades to the local surface of the block it clips. */
-.content-collapse:has(> .content-collapse-region [data-appearance="quiet"]) .content-collapse-fade {
-  background: linear-gradient(to bottom, transparent, var(--card) 82%);
-}
-
-/* --- Files (object) --- */
-
-.content-files {
-  margin-block: 1.25rem;
-  border-radius: var(--radius);
-  padding: 0.375rem;
-  color: var(--foreground);
-  font-size: 0.8125rem;
-}
-
-.content-files[data-appearance="quiet"] {
-  overflow: hidden;
-  border: 1px solid var(--border);
-  background-color: var(--card);
-  box-shadow: var(--shadow-xs);
-}
-
-.content-files[data-appearance="tint"] {
-  background-color: var(--secondary);
-}
-
-.content-files-list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.content-files-list .content-files-list {
-  margin-inline-start: 1rem;
-  border-inline-start: 1px solid var(--border);
-  padding-inline-start: 0.5rem;
-}
-
-.content-files[data-appearance="tint"] .content-files-list .content-files-list {
-  border-inline-start-color: color-mix(in oklab, var(--muted-foreground) 25%, transparent);
-}
-
-.content-files-item {
-  margin: 0;
-}
-
-.content-files-row {
-  display: flex;
-  min-height: 2rem;
-  align-items: center;
-  gap: 0.5rem;
-  border: 1px solid transparent;
-  border-radius: calc(var(--radius) - 2px);
-  padding: 0.3rem 0.5rem;
-}
-
-/* quiet: the active file fills with secondary — tint: it raises as a panel. */
-.content-files[data-appearance="quiet"] .content-files-row[data-active="true"] {
-  background-color: var(--secondary);
-  font-weight: 500;
-}
-
-.content-files[data-appearance="tint"] .content-files-row[data-active="true"] {
-  border-color: color-mix(in oklab, var(--border) 80%, transparent);
-  background-color: var(--background);
-  box-shadow: var(--shadow-xs);
-  font-weight: 500;
-}
-
-.content-files-icon {
-  width: 1rem;
-  height: 1rem;
-  flex: none;
-  color: var(--muted-foreground);
-}
-
-.content-files-name {
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.content-files-annotation {
-  margin-inline-start: auto;
-  padding-inline-start: 0.75rem;
-}
-
-/* --- Figure / media (object; canonical quiet anatomy defined above) --- */
-
-.content-media figcaption {
-  font-size: 0.8125rem;
-  text-align: start;
-}
-
-.content-media[data-appearance="tint"] {
-  border: 0;
-  background-color: var(--secondary);
-  box-shadow: none;
-  padding: 0.25rem;
-}
-
-.content-media[data-appearance="tint"] img {
-  border: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
-  border-radius: calc(var(--radius) - 2px);
-  box-shadow: var(--shadow-xs);
-}
-
-.content-media[data-appearance="tint"] figcaption {
-  border-top: 0;
-  background-color: transparent;
-  padding: 0.4rem 0.55rem 0.3rem;
-}
-
-/* --- API (object) — inherits the tabs shell; owns its compact data grammar. */
-
-.content-api {
-  container-type: inline-size;
-}
-
-.content-api-header {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-}
-
-.content-api[data-stacked-header="true"] .content-api-header {
-  grid-template-columns: minmax(0, 1fr);
-  align-items: stretch;
-}
-
-.content-api-identity {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  gap: 0.375rem;
-  padding-inline: 0.25rem;
-  white-space: nowrap;
-}
-
-.content-api-method {
-  display: inline-flex;
-  height: 1.25rem;
-  flex: none;
-  align-items: center;
-  border-radius: calc(var(--radius) - 4px);
-  background-color: var(--accent-blue-muted);
-  padding-inline: 0.375rem;
-  color: var(--accent-blue);
-  font-family: var(--font-mono);
-  font-size: 0.6875rem;
-  font-weight: 600;
-  line-height: 1;
-}
-
-.content-api-path {
-  min-width: 0;
-  overflow: hidden;
-  color: color-mix(in oklab, var(--foreground) 80%, transparent);
-  font-family: var(--font-mono);
-  font-size: 0.8125rem;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.content-api-title {
-  color: color-mix(in oklab, var(--foreground) 80%, transparent);
-  font-size: 0.8125rem;
-  font-weight: 500;
-}
-
-.content-api-title-icon {
-  width: 0.875rem;
-  height: 0.875rem;
-  flex: none;
-}
-
-.content-api-tabs {
-  max-width: 100%;
-}
-
-.content-api[data-stacked-header="true"] .content-api-tabs {
-  width: 100%;
-  padding-top: 0.125rem;
-}
-
-.content-api-count {
-  border-radius: 999px;
-  background-color: var(--muted);
-  padding: 1px 0.375rem;
-  color: var(--muted-foreground);
-  font-size: 0.6875rem;
-}
-
-.content-api-row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: start;
-  column-gap: 1rem;
-  row-gap: 0.125rem;
-  padding: 0.625rem 0.75rem;
-}
-
-.content-api-signature {
-  min-width: 0;
-  overflow-x: auto;
-  font-family: var(--font-mono);
-  font-size: 0.8125rem;
-  line-height: 1.4;
-  white-space: nowrap;
-}
-
-.content-api-name {
-  color: var(--accent-blue);
-  font-weight: 500;
-}
-
-.content-api-name-deprecated {
-  opacity: 0.7;
-  text-decoration: line-through;
-  text-decoration-color: color-mix(in oklab, var(--foreground) 40%, transparent);
-}
-
-.content-api-type {
-  color: var(--muted-foreground);
-}
-
-.content-api-badges {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.content-api-badge {
-  display: inline-flex;
-  height: 1.125rem;
-  align-items: center;
-  border-radius: 999px;
-  padding-inline: 0.4375rem;
-  font-size: 0.6875rem;
-  font-weight: 600;
-  letter-spacing: 0.015em;
-  line-height: 1;
-}
-
-.content-api-badge[data-state="required"] {
-  background-color: var(--accent-coral-muted);
-  color: var(--accent-coral);
-}
-
-.content-api-badge[data-state="deprecated"] {
-  background-color: var(--accent-yellow-muted);
-  color: var(--warning);
-}
-
-.content-api-badge[data-state="since"] {
-  background-color: var(--accent-mint-muted);
-  color: var(--success);
-}
-
-.content-api-description {
-  grid-column: 1 / -1;
-  color: var(--muted-foreground);
-  font-size: 0.8125rem;
-  line-height: 1.4;
-}
-
-.content-api-inline-code {
-  border-radius: calc(var(--radius) - 4px);
-  background-color: var(--muted);
-  padding: 1px 0.25rem;
-  color: var(--foreground);
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-}
-
-.content-api .content-tabs-panels [role="tabpanel"] > div + div {
-  border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
-}
-
-@container (max-width: 34rem) {
-  .content-api-header {
-    grid-template-columns: minmax(0, 1fr);
-    align-items: stretch;
-  }
-
-  .content-api-tabs {
-    width: 100%;
-    padding-top: 0.125rem;
-  }
-}
-
-@container (max-width: 24rem) {
-  .content-api-row {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
-  .content-api-badges {
-    grid-row: 2;
-  }
-}
-
-/* --- Quiz (object) --- */
-
-.content-quiz {
-  margin-block: 1.25rem;
-  border-radius: var(--radius);
-  color: var(--foreground);
-}
-
-.content-quiz[data-appearance="quiet"] {
-  overflow: hidden;
-  border: 1px solid var(--border);
-  background-color: var(--card);
-  box-shadow: var(--shadow-xs);
-}
-
-.content-quiz[data-appearance="tint"] {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  background-color: var(--secondary);
-  padding: 0.25rem;
-}
-
-.content-quiz-header {
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-  min-height: 2.25rem;
-  padding: 0.4rem 0.9rem;
-}
-
-.content-quiz[data-appearance="quiet"] .content-quiz-header {
-  border-bottom: 1px solid var(--border);
-  background-color: color-mix(in oklab, var(--muted) 35%, transparent);
-}
-
-.content-quiz[data-appearance="tint"] .content-quiz-header {
-  padding: 0.3rem 0.65rem 0.15rem;
-}
-
-.content-quiz-header-icon {
-  width: 1rem;
-  height: 1rem;
-  flex: none;
-  color: var(--muted-foreground);
-}
-
-.content-quiz-heading {
-  min-width: 0;
-  flex: 1;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  column-gap: 0.6rem;
-}
-
-.content-quiz-title {
-  color: var(--foreground);
-  font-size: 0.875rem;
-  font-weight: 600;
-  line-height: 1.5;
-}
-
-.content-quiz-description {
-  color: var(--muted-foreground);
-  font-size: 0.8125rem;
-}
-
-.content-quiz-body {
-  padding: 0.9rem;
-}
-
-.content-quiz[data-appearance="tint"] .content-quiz-body {
-  border: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
-  border-radius: calc(var(--radius) - 2px);
-  background-color: var(--background);
-  box-shadow: var(--shadow-xs);
-}
-
-.content-quiz-footer {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.6rem;
-  padding: 0.5rem 0.9rem;
-}
-
-.content-quiz[data-appearance="quiet"] .content-quiz-footer {
-  border-top: 1px solid var(--border);
-}
-
-.content-quiz[data-appearance="tint"] .content-quiz-footer {
-  padding: 0.35rem 0.65rem;
-}
-
-.content-quiz-dots {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-}
-
-.content-quiz-dot {
-  width: 0.5rem;
-  height: 0.5rem;
-  flex: none;
-  appearance: none;
-  border: 0;
-  border-radius: 999px;
-  background-color: color-mix(in oklab, var(--muted-foreground) 30%, transparent);
-  padding: 0;
-  cursor: pointer;
-  transition:
-    background-color 150ms ease,
-    transform 150ms ease,
-    box-shadow 150ms ease;
-}
-
-.content-quiz-dot[data-state="answered"] {
-  background-color: var(--primary);
-}
-
-.content-quiz-dot[data-state="active"] {
-  background-color: var(--primary);
-  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 30%, transparent);
-  transform: scale(1.15);
-}
-
-.content-quiz-dot:focus-visible {
-  outline: 2px solid color-mix(in oklab, var(--ring) 50%, transparent);
-  outline-offset: 2px;
-}
-
-.content-quiz-nav {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.content-quiz-button {
-  display: inline-flex;
-  height: 2rem;
-  align-items: center;
-  justify-content: center;
-  gap: 0.375rem;
-  appearance: none;
-  cursor: pointer;
-  border: 1px solid var(--border);
-  border-radius: 999px;
-  background-color: var(--secondary);
-  padding: 0 0.75rem;
-  color: var(--foreground);
-  font-family: var(--font-body);
-  font-size: 0.75rem;
-  font-weight: 500;
-  line-height: 1.25rem;
-  white-space: nowrap;
-  transition:
-    border-color 150ms ease,
-    background-color 150ms ease;
-}
-
-.content-quiz-button :where(svg, .iconify) {
-  width: 0.875rem;
-  height: 0.875rem;
-}
-
-.content-quiz-button:hover:not(:disabled) {
-  border-color: color-mix(in oklab, var(--foreground) 25%, transparent);
-}
-
-.content-quiz-button:disabled {
-  pointer-events: none;
-  opacity: 0.5;
-}
-
-.content-quiz-button:focus-visible {
-  outline: 2px solid color-mix(in oklab, var(--ring) 50%, transparent);
-  outline-offset: 2px;
-}
-
-.content-quiz-button-ghost {
-  border-color: transparent;
-  background-color: transparent;
-  color: var(--muted-foreground);
-}
-
-.content-quiz-button-ghost:hover:not(:disabled) {
-  border-color: transparent;
-  background-color: var(--secondary);
-  color: var(--foreground);
-}
-
-.content-quiz-question {
-  display: grid;
-  gap: 0.9rem;
-}
-
-/* A quiz-question used directly in prose, outside a ::quiz shell. */
-.content-quiz-question-standalone {
-  margin-block: 1.25rem;
-}
-
-.content-quiz-question-title {
-  margin: 0;
-  color: var(--foreground);
-  font-size: 0.875rem;
-  font-weight: 600;
-  line-height: 1.5;
-}
-
-.content-quiz-question-hint {
-  margin-inline-start: 0.5rem;
-  color: var(--muted-foreground);
-  font-size: 0.75rem;
-  font-weight: 400;
-}
-
-.content-quiz-options {
-  display: grid;
-  gap: 0.5rem;
-}
-
-.content-quiz-option {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  gap: 0.75rem;
-  appearance: none;
-  cursor: pointer;
-  border: 1px solid var(--border);
-  border-radius: calc(var(--radius) - 2px);
-  background-color: transparent;
-  padding: 0.5rem 0.75rem;
-  color: var(--foreground);
-  font-size: 0.875rem;
-  text-align: start;
-  transition:
-    border-color 180ms ease-out,
-    background-color 180ms ease-out;
-}
-
-.content-quiz-option:not(:disabled):hover {
-  background-color: color-mix(in oklab, var(--secondary) 50%, transparent);
-}
-
-.content-quiz-option:disabled {
-  cursor: default;
-}
-
-.content-quiz-option:focus-visible {
-  outline: 2px solid color-mix(in oklab, var(--ring) 50%, transparent);
-  outline-offset: 2px;
-}
-
-.content-quiz-option[data-state="selected"] {
-  border-color: color-mix(in oklab, var(--primary) 55%, var(--border));
-  background-color: color-mix(in oklab, var(--primary) 8%, transparent);
-}
-
-.content-quiz-option[data-state="correct"] {
-  border-color: color-mix(in oklab, var(--success) 55%, var(--border));
-  background-color: color-mix(in oklab, var(--success) 8%, transparent);
-}
-
-.content-quiz-option[data-state="incorrect"] {
-  border-color: color-mix(in oklab, var(--destructive) 55%, var(--border));
-  background-color: color-mix(in oklab, var(--destructive) 7%, transparent);
-}
-
-.content-quiz-option-key {
-  display: grid;
-  width: 1.5rem;
-  height: 1.5rem;
-  flex: none;
-  place-items: center;
-  border-radius: calc(var(--radius) - 4px);
-  background-color: var(--muted);
-  color: var(--muted-foreground);
-  font-size: 0.75rem;
-  font-weight: 700;
-}
-
-.content-quiz-option[data-state="selected"] .content-quiz-option-key {
-  background-color: var(--primary);
-  color: var(--primary-foreground);
-}
-
-.content-quiz-option[data-state="correct"] .content-quiz-option-key {
-  background-color: var(--success);
-  color: var(--success-foreground);
-}
-
-.content-quiz-option[data-state="incorrect"] .content-quiz-option-key {
-  background-color: var(--destructive);
-  color: var(--destructive-foreground);
-}
-
-.content-quiz-option-label {
-  min-width: 0;
-  flex: 1;
-}
-
-.content-quiz-option-result {
-  width: 1rem;
-  height: 1rem;
-  flex: none;
-}
-
-.content-quiz-option[data-state="correct"] .content-quiz-option-result {
-  color: var(--success);
-}
-
-.content-quiz-option[data-state="incorrect"] .content-quiz-option-result {
-  color: var(--destructive);
-}
-
-.content-quiz-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.content-quiz-result {
-  font-size: 0.875rem;
-  font-weight: 500;
-}
-
-.content-quiz-result[data-state="correct"] {
-  color: var(--success);
-}
-
-.content-quiz-result[data-state="incorrect"] {
-  color: var(--destructive);
-}
-
-.content-quiz-explanation {
-  display: flex;
-  gap: 0.6rem;
-  border: 1px solid color-mix(in oklab, var(--info) 25%, var(--border));
-  border-radius: calc(var(--radius) - 2px);
-  background-color: color-mix(in oklab, var(--info) 7%, transparent);
-  padding: 0.65rem 0.85rem;
-  color: var(--foreground);
-  font-size: 0.875rem;
-}
-
-.content-quiz-explanation-icon {
-  width: 1rem;
-  height: 1rem;
-  flex: none;
-  margin-top: 0.15rem;
-  color: var(--info);
-}
-
-.content-quiz-results {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-  padding: 1.75rem 0.9rem;
-  text-align: center;
-}
-
-.content-quiz-results-icon {
-  display: grid;
-  width: 3rem;
-  height: 3rem;
-  place-items: center;
-  border-radius: 999px;
-  background-color: var(--muted);
-  color: var(--muted-foreground);
-}
-
-.content-quiz-results-icon[data-state="perfect"] {
-  background-color: color-mix(in oklab, var(--success) 12%, transparent);
-  color: var(--success);
-}
-
-.content-quiz-results-icon :where(svg, .iconify) {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-.content-quiz-results-score {
-  margin: 0;
-  color: var(--foreground);
-  font-size: 1rem;
-  font-weight: 600;
-}
-
-.content-quiz-results-note {
-  margin: 0.25rem 0 0;
-  color: var(--muted-foreground);
-  font-size: 0.875rem;
-}
-
-/* --- Timeline (sequence) ---------------------------------------------------
-   quiet: the steps rail — 1px hairline, 1.75rem bordered tile markers,
-   title-first head row, accent chip for the phase.
-   tint: the RFC v2 rail — one continuous 2px bar, dot markers, tint date
-   chips, uppercase phase, and an accent segment only through the active
-   item. */
-
-.content-timeline {
-  position: relative;
-  margin: 1.5rem 0 1.75rem;
-}
-
-.content-timeline-item {
-  position: relative;
-  padding-bottom: 1.5rem;
-}
-
-.content-timeline-item:last-child {
-  padding-bottom: 0;
-}
-
-.content-timeline-head {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.5rem;
-  margin-bottom: 0.25rem;
-}
-
-.content-timeline-title {
-  order: 1;
-  margin: 0;
-  color: var(--foreground);
-  font-size: 0.875rem;
-  font-weight: 600;
-  line-height: 1.5;
-}
-
-.content-timeline-date {
-  order: 2;
-}
-
-.content-timeline-label {
-  order: 3;
-}
-
-.content-timeline-body {
-  color: var(--muted-foreground);
-  font-size: 0.875rem;
-}
-
-.content-timeline-marker {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* quiet */
-
-.content-timeline[data-appearance="quiet"] {
-  margin-inline-start: 0.875rem;
-  border-inline-start: 1px solid var(--border);
-  padding-inline-start: 2rem;
-}
-
-.content-timeline[data-appearance="quiet"] .content-timeline-marker {
-  inset-block-start: 0.125rem;
-  inset-inline-start: -2.875rem;
-  width: 1.75rem;
-  height: 1.75rem;
-  border: 1px solid var(--border);
-  border-radius: calc(var(--radius) - 2px);
-  background-color: var(--secondary);
-  color: var(--muted-foreground);
-}
-
-.content-timeline[data-appearance="quiet"] .content-timeline-marker-icon {
-  width: 0.85rem;
-  height: 0.85rem;
-}
-
-.content-timeline[data-appearance="quiet"]
-  .content-timeline-marker-icon
-  + .content-timeline-marker-dot {
-  display: none;
-}
-
-.content-timeline[data-appearance="quiet"] .content-timeline-marker-dot {
-  width: 0.375rem;
-  height: 0.375rem;
-  border-radius: 999px;
-  background-color: var(--muted-foreground);
-}
-
-.content-timeline[data-appearance="quiet"] .content-timeline-date {
-  order: 2;
-}
-
-.content-timeline[data-appearance="quiet"] .content-timeline-label {
-  display: inline-flex;
-  align-items: center;
-  border-radius: 0.375rem;
-  background-color: color-mix(in oklab, var(--info) 12%, transparent);
-  padding: 0.05rem 0.5rem;
-  color: var(--info);
-  font-size: 0.72rem;
-  font-weight: 500;
-}
-
-/* tint (RFC v2: the bar IS the timeline) */
-
-.content-timeline[data-appearance="tint"] {
-  padding-inline-start: 1.75rem;
-}
-
-.content-timeline[data-appearance="tint"]::before {
-  content: "";
-  position: absolute;
-  inset-block: 0.45rem;
-  inset-inline-start: 0.37rem;
-  width: 2px;
-  border-radius: 999px;
-  background-color: color-mix(in oklab, var(--muted-foreground) 22%, transparent);
-}
-
-.content-timeline[data-appearance="tint"] .content-timeline-marker {
-  inset-block-start: 0.3rem;
-  inset-inline-start: -1.75rem;
-  width: 0.875rem;
-  height: 0.875rem;
-  border-radius: 999px;
-  background-color: var(--secondary);
-  outline: 3px solid var(--background);
-}
-
-.content-timeline[data-appearance="tint"] .content-timeline-marker-icon {
-  display: none;
-}
-
-.content-timeline[data-appearance="tint"] .content-timeline-marker-dot {
-  width: 0.375rem;
-  height: 0.375rem;
-  border-radius: 999px;
-  background-color: var(--muted-foreground);
-}
-
-.content-timeline[data-appearance="tint"]
-  .content-timeline-item[data-active="true"]
-  .content-timeline-marker-dot {
-  background-color: var(--info);
-}
-
-/* The accent segment runs only through the active item. */
-.content-timeline[data-appearance="tint"] .content-timeline-item[data-active="true"]::before {
-  content: "";
-  position: absolute;
-  inset-block: 0.95rem 0;
-  inset-inline-start: calc(-1.75rem + 0.37rem);
-  width: 2px;
-  border-radius: 999px;
-  background-color: color-mix(in oklab, var(--info) 65%, transparent);
-}
-
-.content-timeline[data-appearance="tint"] .content-timeline-title {
-  order: 4;
-  flex-basis: 100%;
-}
-
-.content-timeline[data-appearance="tint"] .content-timeline-date {
-  border-radius: 0.375rem;
-  background-color: var(--secondary);
-  padding: 0.05rem 0.5rem;
-  font-size: 0.72rem;
-}
-
-.content-timeline[data-appearance="tint"] .content-timeline-label {
-  color: var(--muted-foreground);
-  font-size: 0.6875rem;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.content-timeline[data-appearance="tint"]
-  .content-timeline-item[data-active="true"]
-  .content-timeline-label {
-  color: var(--info);
-}
-
-/* --- Steps (sequence; canonical quiet rail defined above) --- */
-
-.content-steps {
-  margin: 1.5rem 0 1.75rem 0.875rem;
-}
-
-/* tint: no hairline rail — tint number chips with bar segments between. */
-.content-steps[data-appearance="tint"] {
-  margin-inline-start: 0;
-  border-inline-start: 0;
-  padding-inline-start: 2.35rem;
-}
-
-.content-steps[data-appearance="tint"] .content-step-marker {
-  inset-inline-start: -2.35rem;
-  width: 1.6rem;
-  height: 1.6rem;
-  border: 0;
-  border-radius: 999px;
-  background-color: var(--secondary);
-  color: var(--foreground);
-  font-size: 0.78rem;
-  font-weight: 600;
-}
-
-.content-steps[data-appearance="tint"] .content-step:not(:last-child)::after {
-  content: "";
-  position: absolute;
-  inset-block-start: 2.1rem;
-  inset-block-end: calc(-1.25rem + 0.35rem);
-  inset-inline-start: calc(-2.35rem + 0.74rem);
-  width: 2px;
-  border-radius: 999px;
-  background-color: color-mix(in oklab, var(--muted-foreground) 30%, transparent);
-}
-
-/* --- Inline TOC (structural, appearance-neutral card) --- */
-
-.content-inline-toc {
-  margin-block: 1.25rem;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background-color: var(--card);
-  box-shadow: var(--shadow-xs);
-  color: var(--foreground);
-}
-
-.content-inline-toc-trigger {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  gap: 0.5rem;
-  appearance: none;
-  cursor: pointer;
-  border: 0;
-  border-radius: inherit;
-  background-color: transparent;
-  padding: 0.65rem 0.9rem;
-  color: var(--foreground);
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  font-weight: 500;
-  text-align: start;
-  transition: background-color 180ms ease-out;
-}
-
-.content-inline-toc-trigger:hover {
-  background-color: color-mix(in oklab, var(--secondary) 50%, transparent);
-}
-
-.content-inline-toc-trigger:focus-visible {
-  outline: 2px solid color-mix(in oklab, var(--ring) 50%, transparent);
-  outline-offset: -2px;
-}
-
-.content-inline-toc-icon {
-  width: 1rem;
-  height: 1rem;
-  flex: none;
-  color: var(--muted-foreground);
-}
-
-.content-inline-toc-title {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.content-inline-toc-chevron {
-  width: 1rem;
-  height: 1rem;
-  flex: none;
-  margin-inline-start: auto;
-  color: color-mix(in oklab, var(--muted-foreground) 55%, transparent);
-  transition: transform 200ms ease;
-}
-
-.content-inline-toc-trigger[data-state="open"] .content-inline-toc-chevron {
-  transform: rotate(180deg);
-}
-
-.content-inline-toc-content {
-  padding: 0 0.9rem 0.9rem;
-}
-
-/* --- Prose bodies inside components -----------------------------------------
-   These selectors match `.content-prose.content-prose` (0,2,0) and win by
-   order: component bodies read at the component scale, and annotation
-   bodies (aside, excerpt, timeline, accordion, card) read muted. */
-
-.content-aside-body.content-prose,
-.content-excerpt-body.content-prose,
-.content-timeline-body.content-prose,
-.content-accordion-copy.content-prose,
-.content-card-body.content-prose {
-  color: var(--muted-foreground);
-  font-size: 0.875rem;
-  line-height: 1.625;
-}
-
-.content-tabs-content-area.content-prose,
-.content-quiz-explanation .content-prose {
-  font-size: 0.875rem;
-}
-
-.content-step-body.content-prose {
-  color: var(--muted-foreground);
-  font-size: 0.875rem;
-  line-height: 1.625;
-}
-
-/* Component titles rendered as p elements: match `.content-prose p` (0,1,1). */
-p.content-timeline-title,
-p.content-quiz-question-title {
-  font-size: 0.875rem;
-  line-height: 1.5;
-}
-
-p.content-quiz-results-score {
-  font-size: 1rem;
-  line-height: 1.5;
-}
-
-p.content-quiz-results-note {
-  font-size: 0.875rem;
-  line-height: 1.5;
-}
-
-/* --- Kbd (inline; a compact, lightly raised physical key) --- */
-
-.content-kbd {
-  display: inline-grid;
-  min-width: 1.625rem;
-  height: 1.625rem;
-  place-items: center;
-  border: 1px solid color-mix(in oklab, var(--foreground) 12%, var(--border));
-  border-bottom-color: color-mix(in oklab, var(--foreground) 24%, var(--border));
-  border-radius: calc(var(--radius) - 3px);
-  background: color-mix(in oklab, var(--muted) 78%, var(--background));
-  box-shadow:
-    0 1px 1px color-mix(in oklab, var(--foreground) 10%, transparent),
-    inset 0 1px 0 color-mix(in oklab, var(--background) 80%, transparent);
-  padding-inline: 0.4rem;
-  color: var(--foreground);
-  font-family: inherit;
-  font-size: 0.75rem;
-  font-weight: 600;
-  line-height: 1;
-  vertical-align: 0.08em;
-  white-space: nowrap;
-}
-
-@media (pointer: coarse) {
-  :where(
-    .content-tabs-tab,
-    .content-codegroup-tab,
-    .content-code-tree-row,
-    .content-accordion-trigger,
-    .content-inline-toc-trigger,
-    .content-collapse-button
-  ) {
-    min-height: 2.75rem;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  :where(
-    .content-card-surface,
-    .content-card-arrow,
-    .content-read-more-link,
-    .content-read-more-arrow,
-    .content-accordion-trigger,
-    .content-accordion-chevron,
-    .content-tabs-tab,
-    .content-codegroup-tab,
-    .content-code-tree-row,
-    .content-code-tree-chevron,
-    .content-inline-toc-trigger,
-    .content-inline-toc-chevron,
-    .content-quiz-option,
-    .content-quiz-button,
-    .content-quiz-dot
-  ) {
-    transition-duration: 0.01ms;
-  }
-}