:root {
  color-scheme: light dark;
  --margo-surface: #ffffff;
  --margo-surface-alt: #f5f7fa;
  --margo-text: #17202a;
  --margo-text-strong: #0b1220;
  --margo-accent: #155eef;
  --margo-outline: #7b8794;
  --margo-gap: 1.5rem;
  --margo-reading-measure: 75ch;
}
[data-color-mode="dark"], html.dark {
  --margo-surface: #111827;
  --margo-surface-alt: #1f2937;
  --margo-text: #e5e7eb;
  --margo-text-strong: #ffffff;
  --margo-accent: #8ab4ff;
  --margo-outline: #9ca3af;
}
@media (prefers-color-scheme: dark) {
  [data-color-mode="system"], html.dark {
    --margo-surface: #111827;
    --margo-surface-alt: #1f2937;
    --margo-text: #e5e7eb;
    --margo-text-strong: #ffffff;
    --margo-accent: #8ab4ff;
    --margo-outline: #9ca3af;
  }
}
* { box-sizing: border-box; }
html { background: var(--margo-surface); color: var(--margo-text); }
body { margin: 0; min-inline-size: 0; font-family: system-ui, sans-serif; line-height: 1.6; }
:where(.margo-frame a, .margo-document a) { color: var(--margo-accent); }
.margo-skip-link { position: absolute; inset-inline-start: 0.75rem; inset-block-start: 0.75rem; transform: translateY(-200%); padding: 0.75rem 1rem; background: var(--margo-surface); color: var(--margo-text-strong); outline: 3px solid var(--margo-accent); z-index: 10; }
.margo-skip-link:focus { transform: none; }
.margo-frame { display: grid; gap: var(--margo-gap); max-inline-size: 100%; padding: 1rem; }
.margo-frame > .margo-area { min-inline-size: 0; }
.margo-area--main-content { max-inline-size: var(--margo-reading-measure); inline-size: 100%; margin-inline: auto; }
.margo-area--top-nav { grid-area: top-nav; }
.margo-area--left-nav { grid-area: left-nav; }
.margo-area--main-content { grid-area: main-content; }
.margo-area--right-nav { grid-area: right-nav; }
.margo-area--footer { grid-area: footer; }
.margo-area--left-nav, .margo-area--right-nav { overflow-inline: auto; }
.margo-area--left-nav ul, .margo-area--right-nav ul { padding-inline-start: 1.25rem; }
.margo-area--top-nav nav, .margo-area--left-nav nav, .margo-area--right-nav nav { min-block-size: 2.75rem; }
.margo-area--top-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.margo-area--top-nav > nav { flex: 1 1 auto; }
[data-margo-sticky="true"] { position: sticky; z-index: 2; }
[data-margo-sticky="true"][data-margo-sticky-edge="block-start"] { inset-block-start: var(--margo-sticky-offset, 0); }
[data-margo-sticky="true"][data-margo-sticky-edge="block-end"] { inset-block-end: var(--margo-sticky-offset, 0); }
.margo-site-brand { display: inline-flex; align-items: center; gap: 0.5rem; min-block-size: 2.75rem; font-weight: 700; color: var(--margo-text-strong); text-decoration: none; }
.margo-site-brand img { max-block-size: 2rem; max-inline-size: 10rem; }
.margo-breadcrumbs ol, .margo-pagination ul, .margo-locale-controls ul { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.margo-pagination { margin-block-start: 2rem; padding-block-start: 1rem; border-block-start: 1px solid var(--margo-outline); }
.margo-showcase-article .margo-pagination ul { justify-content: space-between; column-gap: 2rem; row-gap: 0.75rem; }
.margo-footer { margin-block-start: 1rem; padding-block-start: 1rem; border-block-start: 1px solid var(--margo-outline); }
.margo-showcase-article .margo-pagination a { color: var(--margo-accent); font-weight: 600; text-decoration: none; }
.margo-showcase-article .margo-pagination a:hover, .margo-showcase-article .margo-pagination a:focus-visible { color: var(--margo-text-strong); text-decoration: underline; }
:where(.margo-frame button, .margo-frame a) { min-block-size: 2.75rem; }
:where(.margo-frame button) { color: inherit; background: var(--margo-surface-alt); border: 1px solid var(--margo-outline); border-radius: 0.25rem; padding-inline: 0.75rem; }
:where(.margo-frame :focus-visible, .margo-document :focus-visible) { outline: 3px solid var(--margo-accent); outline-offset: 2px; }
@media (min-width: 720px) {
  .margo-frame { grid-template-columns: minmax(12rem, 16rem) minmax(0, var(--margo-reading-measure)); grid-template-areas: "top-nav top-nav" "left-nav main-content" "footer footer"; justify-content: center; }
  .margo-frame--fluid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top-nav" "main-content" "footer"; }
}
@media (min-width: 1100px) {
  .margo-frame { grid-template-columns: 16rem minmax(0, var(--margo-reading-measure)); }
}
@media (max-width: 719px) {
  .margo-frame { display: block; padding: 0.75rem; }
  .margo-frame > .margo-area { margin-block-end: var(--margo-gap); }
  .margo-area--left-nav, .margo-area--right-nav { border-block: 1px solid var(--margo-outline); padding-block: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; } }
@media print { .margo-skip-link, .margo-area--top-nav, .margo-area--left-nav, .margo-area--right-nav, .margo-area--footer { display: none !important; } .margo-frame { display: block; padding: 0; } .margo-area--main-content { max-inline-size: none; } }
.margo-showcase-article { inline-size: min(100%, 78ch); margin-inline: auto; padding-block: clamp(1.5rem, 4vw, 4rem); }
.margo-showcase-article .margo-breadcrumbs { margin-block-end: 2rem; color: var(--margo-text); font-size: 0.875rem; }
.margo-showcase-article .margo-breadcrumbs a { color: inherit; text-decoration: none; }
.margo-showcase-article .margo-document { color: var(--margo-text); }
.margo-showcase-article .margo-document h1 { color: var(--margo-text-strong); font-size: clamp(2.25rem, 6vw, 4.5rem); letter-spacing: -0.04em; line-height: 1.05; }
.margo-showcase-article .margo-document__lead { color: var(--margo-accent); font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 650; }
.margo-showcase-article .margo-document h2 { margin-block-start: 3rem; color: var(--margo-text-strong); letter-spacing: -0.02em; }
.margo-showcase-article .margo-document blockquote { margin-inline: 0; border-inline-start: 0.25rem solid var(--margo-accent); padding-inline: 1rem; color: var(--margo-text-strong); }
.margo-showcase-article .margo-document img[alt^="Margo mascot"] { display: block; inline-size: min(100%, 24rem); aspect-ratio: 4 / 3; object-fit: cover; object-position: center 62%; margin-block: 1.5rem 2rem; margin-inline: auto; border: 1px solid var(--margo-outline); border-radius: 1rem; box-shadow: 0 1rem 2.5rem rgb(11 18 32 / 18%); }
.component-doc-shell__brand-mark { display: none !important; }
.margo-shell-topnav { order: 1; display: flex; align-items: center; gap: 0.25rem; margin-inline: 0.5rem; }
.margo-shell-topnav a { min-block-size: auto; padding: 0.5rem 0.75rem; color: inherit; text-decoration: none; border-radius: 0.375rem; }
.margo-shell-topnav a:hover, .margo-shell-topnav a:focus-visible { background: var(--margo-surface-alt); color: var(--margo-text-strong); }
#componentdocshell-dark-mode { order: 2; }
.component-doc-shell__repository { order: 3; }
.component-doc-shell__main { view-transition-name: margo-main-content; transition: opacity 160ms ease, transform 160ms ease; }
.component-doc-shell__main.htmx-swapping { opacity: 0; transform: translateY(0.35rem); }
.component-doc-shell__main.htmx-settling { animation: margo-main-content-enter 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes margo-main-content-enter { from { opacity: 0; transform: translateY(0.35rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes margo-main-content-exit { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-0.2rem); } }
::view-transition-old(margo-main-content) { animation: margo-main-content-exit 160ms ease both; }
::view-transition-new(margo-main-content) { animation: margo-main-content-enter 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .component-doc-shell__main { view-transition-name: none; transition: none; }
  .component-doc-shell__main.htmx-swapping, .component-doc-shell__main.htmx-settling { opacity: 1; transform: none; animation: none; }
  ::view-transition-old(margo-main-content), ::view-transition-new(margo-main-content) { animation: none; }
}
.margo-shell-footer { margin: 0; color: var(--margo-text); font-size: 0.875rem; }

.margo-page-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  row-gap: 0.75rem;
  align-items: start;
}
.margo-page-heading__title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-inline-size: 0;
  grid-column: 1;
  grid-row: 1;
}
.margo-page-heading__title h1 {
  min-inline-size: 0;
  margin-block-end: 0 !important;
}
.margo-page-heading__anchor {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.margo-page-heading__anchor:focus-visible {
  position: static;
  inline-size: auto;
  block-size: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  color: var(--margo-accent, var(--color-primary, #155eef));
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  opacity: 1;
}
.margo-page-actions {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  justify-self: end;
  margin-block-start: 0.25rem;
  color: var(--margo-text-strong, var(--color-on-surface-strong, #0b1220));
}
.margo-page-actions [data-split-button] > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-primary, #ffffff);
  text-decoration: none;
}
.dark .margo-page-actions [data-split-button] > a { color: var(--color-on-primary-dark, #ffffff); }
.margo-page-actions [data-split-button] { max-inline-size: 100%; }
.margo-page-actions [data-popover-panel] { z-index: 40; }
.margo-page-actions__status {
  display: block;
  min-block-size: 1.1rem;
  margin-block-start: 0.15rem;
  padding: 0.15rem 0.6rem 0.3rem;
  color: var(--margo-text, var(--color-on-surface, #17202a));
  font-size: 0.75rem;
}
@media (max-width: 42rem) {
  .margo-page-heading { grid-template-columns: minmax(0, 1fr); }
  .margo-page-heading__title { grid-column: 1; grid-row: 1; }
  .margo-page-actions {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin-block-start: 0;
  }
  .margo-page-actions [data-popover-panel] { left: 0 !important; right: auto !important; }
}
@media print {
  .margo-page-actions, .margo-page-heading__anchor { display: none !important; }
  .margo-page-heading__title { display: block; }
}
/* Goshtoso owns split-button and menu visuals; Margo only owns placement. */
.margo-document .margo-page-actions {
  max-inline-size: none;
  margin-block: 0.25rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.margo-document .margo-page-heading > .margo-document__lead {
  grid-column: 1;
  grid-row: 2;
  margin-block: 0;
}
.margo-document .margo-page-actions__status {
  margin: 0;
  padding: 0.15rem 0.6rem 0.3rem;
}