/* #docs-shell gives layout rules precedence over the deeply nested vendor
   selectors without !important or affecting the landing page and embeds.
   Documentation chrome matches docs.cocode.im's manual. These variables are
   deliberately local to the site, so live examples retain their CoUI themes. */
.docs {
  --docs-bg: 250 251 252;
  --docs-sunken: 243 245 247;
  --docs-text: 20 22 26;
  --docs-muted: 74 80 83;
  --docs-line: 220 225 228;
  --docs-accent: 22 116 99;
  --docs-selected: 230 247 243;
  --docs-hover: 226 231 234;
  --docs-header-height: 120px;
  --docs-nav-width: clamp(220px, 17.2vw, 248px);
  --docs-toc-width: clamp(188px, 15vw, 216px);
  --docs-gap: clamp(28px, 2.8vw, 40px);
  --docs-gutter: max(40px, calc((100vw - 1360px) / 2));
  /* Durations come from the `--coui-duration-*` tokens at the use site, so the
     OS reduced-motion setting reaches this chrome the way it reaches the
     components; the curve is the same cubic ease-out docs.cocode.im uses. */
  --docs-ease: var(--easing-ease-out-cubic, cubic-bezier(.215, .61, .355, 1));
  min-height: 100vh;
  background: rgb(var(--docs-bg));
  color: rgb(var(--docs-text));
  font-family: Pretendard, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
[data-theme='dark'] .docs {
  --docs-bg: 11 13 14;
  --docs-sunken: 8 9 10;
  --docs-text: 231 234 235;
  --docs-muted: 154 161 163;
  --docs-line: 34 40 42;
  --docs-accent: 91 224 200;
  --docs-selected: 14 31 27;
  --docs-hover: 28 33 35;
}
.docs[data-condensed] { --docs-header-height: 80px; }
body .docs .header-container { background: rgb(var(--docs-sunken) / 96%); }
body .docs .header {
  position: relative;
  height: var(--docs-header-height);
  padding: 0 var(--docs-gutter);
  border: 0;
}
body .docs .header-title { gap: 16px; color: rgb(var(--docs-text)); }
body .docs .header-title img { height: 32px; }
body .docs .header-title span {
  border-left: 1px solid rgb(var(--docs-line));
  padding-left: 14px;
  font-size: 18px;
  font-weight: 600;
}
body .docs .header-items { justify-content: flex-end; gap: 12px; }
body .docs .header-items > .coui-root:has(.site-nav) { margin-inline-end: auto; }
body .docs .site-nav > nav > :is(a, button) {
  position: relative;
  color: rgb(var(--docs-muted));
  font-size: 16px;
}
body .docs .site-nav > nav > :is(a, button):hover,
body .docs .site-nav > nav > [data-current] { color: rgb(var(--docs-text)); }
body .docs .site-nav > nav > [data-current]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: rgb(var(--docs-accent));
}
body .docs .docs-search-trigger {
  height: 40px;
  border: 1px solid rgb(var(--docs-line));
  border-radius: 999px;
  gap: 10px;
  color: rgb(var(--docs-muted));
}
.docs-search-shortcut {
  padding: 1px 5px;
  border: 1px solid rgb(var(--docs-line));
  border-radius: 4px;
  background: rgb(var(--docs-hover) / 40%);
}
body .docs .surface-style-switcher [data-style-trigger] {
  height: 36px;
  border-color: rgb(var(--docs-line));
  color: rgb(var(--docs-muted));
}
body .docs .theme-toggle { width: 44px; height: 44px; color: rgb(var(--docs-text)); }
body .docs .landing-main { padding-top: 120px; }
.docs-skip-link {
  position: fixed;
  top: 8px;
  left: 16px;
  transform: translateY(-150%);
  z-index: 30;
  padding: 10px 16px;
  border-radius: 6px;
  background: rgb(var(--docs-bg));
  color: rgb(var(--docs-text));
}
.docs-skip-link:focus { transform: none; }
body #docs-shell .main-container { padding: 0 var(--docs-gutter); }
body #docs-shell .main-container main {
  padding: 160px 0 120px calc(var(--docs-nav-width) + var(--docs-gap));
}
body #docs-shell .main-container main > div {
  padding: 0;
  gap: var(--docs-gap);
  justify-content: flex-start;
}
body #docs-shell .content-container { max-width: none; padding: 0; }
body #docs-shell .sidebar-container {
  top: calc(var(--docs-header-height) + 40px);
  bottom: 24px;
  width: var(--docs-nav-width);
  margin: 0;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--docs-line)) transparent;
}
body #docs-shell .sidebar { padding: 0; font-size: 15px; line-height: 1.5; }
body #docs-shell .sidebar-group { padding: 0; margin-bottom: 28px; }
body #docs-shell .sidebar-group h3 {
  margin: 0 0 4px;
  padding: 6px 12px;
  font-size: 15px;
  font-weight: 600;
  color: rgb(var(--docs-text));
}
body #docs-shell .sidebar-group li div {
  position: relative;
  margin-bottom: 2px;
  opacity: 1;
  color: rgb(var(--docs-muted));
  font-weight: 400;
}
body #docs-shell .sidebar-group li a { padding: 6px 12px; letter-spacing: -.01em; }
body #docs-shell .sidebar-group li div:hover { background: rgb(var(--docs-hover)); }
body #docs-shell .sidebar-group li div.active {
  background: rgb(var(--docs-selected));
  color: rgb(var(--docs-text));
}
body #docs-shell .sidebar-group li div.active::before {
  content: '';
  position: absolute;
  inset: 6px auto 6px 0;
  width: 2px;
  border-radius: 2px;
  background: rgb(var(--docs-accent));
}
.docs-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: rgb(var(--docs-muted));
  font-size: 14px;
  line-height: 1.5;
}
.docs-breadcrumb a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
body #docs-shell .content-header {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgb(var(--docs-line));
  color: rgb(var(--docs-text));
}
body #docs-shell .content-header h1 {
  margin: 0;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.02em;
}
body #docs-shell .content-header p {
  margin: 12px 0 0;
  font-size: 18px;
  line-height: 1.65;
  color: rgb(var(--docs-muted));
  word-break: keep-all;
  overflow-wrap: anywhere;
}
body #docs-shell .content {
  color: rgb(var(--docs-text));
  font-size: 17px;
  line-height: 1.75;
  --tw-prose-body: rgb(var(--docs-text));
  --tw-prose-headings: rgb(var(--docs-text));
  --tw-prose-bold: rgb(var(--docs-text));
  --tw-prose-links: rgb(var(--docs-text));
  --tw-prose-code: rgb(var(--docs-text));
}
/* Respect jaspr_content's opt-out boundary: typography must never restyle
   the live component previews, source-link controls, or other UI islands. */
body #docs-shell .content :where(h2, h3, h4, p, ul, ol, blockquote, pre, a, code, strong, table, th, td):not(:where(.not-content, .not-content *)) {
  color: inherit;
}
body #docs-shell .content :where(h2, h3, h4):not(:where(.not-content, .not-content *)) {
  font-weight: 600;
  letter-spacing: -.02em;
  scroll-margin-top: 112px;
}
body #docs-shell .content :where(h2):not(:where(.not-content, .not-content *)) { margin: 52px 0 14px; font-size: 24px; line-height: 1.4; }
body #docs-shell .content :where(h3):not(:where(.not-content, .not-content *)) { margin: 36px 0 10px; font-size: 19px; line-height: 1.5; }
body #docs-shell .content :where(p):not(:where(.not-content, .not-content *)) { margin: 0 0 16px; word-break: keep-all; overflow-wrap: anywhere; }
body #docs-shell .content :where(strong):not(:where(.not-content, .not-content *)) { font-weight: 600; }
body #docs-shell .content :where(a):not(:where(.not-content, .not-content *)) {
  text-decoration-color: rgb(var(--docs-accent));
  text-underline-offset: 3px;
  font-weight: inherit;
}
body #docs-shell .content :where(blockquote):not(:where(.not-content, .not-content *)) {
  margin: 0 0 20px;
  padding: 14px 18px;
  border-left: 2px solid rgb(var(--docs-accent));
  border-radius: 0 8px 8px 0;
  background: rgb(var(--docs-sunken));
  color: rgb(var(--docs-muted));
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.65;
}
body #docs-shell .content :where(blockquote p:last-child):not(:where(.not-content, .not-content *)) { margin-bottom: 0; }
body #docs-shell .content :where(blockquote p):not(:where(.not-content, .not-content *))::before,
body #docs-shell .content :where(blockquote p):not(:where(.not-content, .not-content *))::after { content: none; }
body #docs-shell .content :where(:not(pre) > code):not(:where(.not-content, .not-content *)) {
  padding: .1em .4em;
  border-radius: 4px;
  background: rgb(var(--docs-sunken));
  font-size: .85em;
  font-weight: 400;
  overflow-wrap: anywhere;
}
body #docs-shell .content :where(code):not(:where(.not-content, .not-content *))::before,
body #docs-shell .content :where(code):not(:where(.not-content, .not-content *))::after { content: none; }
body #docs-shell .content .code-block { margin: 0 0 20px; }
body #docs-shell .content .code-block pre {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid rgb(var(--docs-line));
  border-radius: 8px;
  background: rgb(var(--docs-sunken));
  font-size: 13px;
  line-height: 1.65;
  overflow-x: auto;
}
body #docs-shell .content .code-block pre code { font-size: inherit; line-height: inherit; }
body #docs-shell .content :where(table):not(:where(.not-content, .not-content *)) {
  display: block;
  width: 100%;
  overflow-x: auto;
  font-size: 15px;
  line-height: 1.65;
}
body #docs-shell .content :where(th, td):not(:where(.not-content, .not-content *)) { padding: 12px 14px; border-color: rgb(var(--docs-line)); }
body #docs-shell .content :where(th):not(:where(.not-content, .not-content *)) { background: rgb(var(--docs-sunken)); font-weight: 600; }
/* On this page, laid out and animated like docs.cocode.im's table of contents.
   The 1px rail has a progress line over it (how far the article has been read,
   driven by docs-toc.js through --p) and each link carries a 2px marker that
   grows while it is the section being read. Moving on grows the next marker as
   the last one shrinks, so the position change is seen rather than snapped. The
   rail sits on the inner box, not the scrolling box around it: a list taller
   than the viewport scrolls, and the rail has to scroll with it. */
body #docs-shell aside.toc { display: block; width: var(--docs-toc-width); flex: 0 0 var(--docs-toc-width); }
body #docs-shell aside.toc > div {
  top: calc(var(--docs-header-height) + 24px);
  max-height: calc(100dvh - var(--docs-header-height) - 48px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--docs-line)) transparent;
}
body #docs-shell .toc-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 16px;
  border-left: 1px solid rgb(var(--docs-line));
}
body #docs-shell .toc-rail h3 {
  margin: 0;
  opacity: 1;
  color: rgb(var(--docs-text));
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .02em;
}
body #docs-shell :is(.toc-rail, .docs-mobile-toc) :is(.toc-list, .toc-sub) {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body #docs-shell :is(.toc-rail, .docs-mobile-toc) .toc-sub { margin-top: 2px; }
body #docs-shell :is(.toc-rail, .docs-mobile-toc) li { margin: 0; padding: 0; }
body #docs-shell .toc-link {
  position: relative;
  display: block;
  /* Depth indents the text, not the link: the marker below is positioned from
     the link's own edge, which has to stay on the rail at every depth. */
  padding: 4px 0 4px calc(var(--toc-depth, 0) * 12px);
  color: rgb(var(--docs-muted));
  font-size: 14px;
  line-height: 1.45;
  text-decoration: none;
  word-break: keep-all;
  overflow-wrap: anywhere;
  transition: color var(--coui-duration-200, 200ms) var(--docs-ease);
}
body #docs-shell .toc-link--sub { font-size: 13px; }
body #docs-shell .toc-link:is(:hover, .is-active) { color: rgb(var(--docs-text)); }
body #docs-shell .toc-link::before {
  content: '';
  position: absolute;
  inset: 5px auto 5px -17px;
  width: 2px;
  background: rgb(var(--docs-accent));
  transform: scaleY(0);
  transition: transform var(--coui-duration-250, 250ms) var(--docs-ease);
}
body #docs-shell .toc-link.is-active::before { transform: none; }
body #docs-shell .toc-progress {
  position: absolute;
  inset: 0 auto 0 -1px;
  width: 1px;
  background: rgb(var(--docs-accent));
  transform: scaleY(var(--p, 0));
  transform-origin: top;
  pointer-events: none;
}
.docs-mobile-toc { display: none; }
body .docs :is(.docs-breadcrumb a, .sidebar a, .toc a, .docs-mobile-toc a, summary, .docs-skip-link):focus-visible {
  outline: 2px solid rgb(var(--docs-accent));
  outline-offset: 2px;
}
@media (min-width: 1280px) {
  body .docs .header-items > .coui-root:has(.site-nav) { position: absolute; left: 50%; transform: translateX(-50%); }
}
@media (max-width: 1279px) {
  body .docs .site-nav > nav > :is(a, button) { font-size: 14px; }
  .docs-search-label, .docs-search-shortcut { display: none; }
}
@media (max-width: 1023px) {
  .docs, .docs[data-condensed] { --docs-header-height: 66px; }
  body .docs .header-items { gap: 6px; }
  body .docs .landing-main { padding-top: 66px; }
  body #docs-shell .main-container main { padding: 94px 0 96px; }
  body #docs-shell .main-container main > div { display: block; }
  body #docs-shell aside.toc { display: none; }
  body #docs-shell .sidebar-container {
    top: 0;
    bottom: 0;
    left: 0;
    width: min(320px, 88vw);
    padding: 48px 16px 24px;
    background: rgb(var(--docs-bg));
    border-right: 1px solid rgb(var(--docs-line));
    z-index: 20;
  }
  body #docs-shell .sidebar-barrier { position: fixed; background: #000; z-index: 19; }
  body #docs-shell .sidebar-close { position: fixed; top: 8px; right: 8px; width: 40px; height: 40px; }
  body #docs-shell .sidebar-group li a { min-height: 44px; align-items: center; }
  .docs-mobile-toc { display: block; margin-bottom: 28px; padding: 0 16px; border: 1px solid rgb(var(--docs-line)); border-radius: 8px; }
  .docs-mobile-toc summary { cursor: pointer; padding: 14px 0; font-size: 15px; font-weight: 600; }
  body #docs-shell .docs-mobile-toc .toc-list { margin-bottom: 12px; }
  body #docs-shell .docs-mobile-toc .toc-link { display: flex; align-items: center; min-height: 44px; padding-block: 6px; }
  body #docs-shell .docs-mobile-toc .toc-link::before { inset-block: 10px; left: -16px; }
}
@media (max-width: 767px) {
  .docs { --docs-gutter: 24px; }
  body .docs .header { padding-inline: 16px; gap: 10px; }
  body .docs .header-title { gap: 10px; }
  body .docs .header-title img { height: 26px; }
  body .docs .header-title span { padding-left: 10px; font-size: 16px; }
  body .docs .header-items { gap: 4px; }
  body .docs .docs-search-trigger { border: 0; padding: 8px; }
  body .docs .surface-style-switcher [data-style-trigger] { max-width: 92px; overflow: hidden; }
  body #docs-shell .content-header h1 { font-size: 28px; }
  body #docs-shell .content-header p { font-size: 17px; }
}
@media (forced-colors: active) {
  body #docs-shell .sidebar-group li div.active a,
  body #docs-shell .toc-link.is-active { text-decoration: underline; }
}
/* SafeCodeBlock emits a dark syntax palette in inline spans. Keep that
   contrast in light mode as well, including unhighlighted shell examples. */
body #docs-shell .content .code-block pre { background: #08090a; color: #e7eaeb; }
/* The `color: inherit` reset on pre/code passes the page's near-black body ink
   down to LivePreview's highlight.js panels, which only color tokens; every
   other glyph would vanish into the dark code surface. */
body #docs-shell .content .preview-code pre { color: #e7eaeb; }
body #docs-shell .content .code-block button:focus-visible { opacity: 1; outline: 2px solid rgb(var(--docs-accent)); }
body #docs-shell .content .code-block:focus-within button { opacity: 1; }
/* Code samples must scroll inside the gallery instead of widening the page. */
body #docs-shell .variant-gallery { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
body #docs-shell .variant-gallery--stacked,
body #docs-shell .preview-container--stacked { grid-template-columns: minmax(0, 1fr); }
body #docs-shell .variant-gallery-item { min-width: 0; }
body #docs-shell .component-source-links .source-link {
  color: rgb(var(--docs-muted));
  border-color: rgb(var(--docs-line));
}
body #docs-shell .content .callout > span:last-child { min-width: 0; }

/* Documentation tools use CoUI chrome; these rules arrange the controls. */
/* Hero and preview layers stay below the fixed document header. */
.docs .landing-main { isolation: isolate; }
.catalog-tools { display: grid; gap: var(--coui-space-16); margin-bottom: var(--coui-space-32); }
.catalog-categories, .site-theme-tool-actions, .site-theme-platforms { display: flex; flex-wrap: wrap; align-items: center; gap: var(--coui-space-8); }
.catalog-result-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--coui-space-12); }
.catalog-tools p { margin: 0; }
.catalog-categories [aria-pressed='true'], .site-theme-platforms [aria-pressed='true'] { outline: 2px solid rgb(var(--coui-focus-ring)); outline-offset: 2px; }
.showcase-card[hidden], .showcase-group[hidden], .catalog-empty[hidden] { display: none; }
.site-theme-tools { margin-bottom: var(--coui-space-24); }
.site-theme-tools > summary, .preview-code-summary { cursor: pointer; padding: var(--coui-space-12) 0; }
.site-theme-tools-content pre { margin: var(--coui-space-16) 0; padding: var(--coui-space-16); overflow-x: auto; background: rgb(var(--coui-surface-container)); color: rgb(var(--coui-on-surface)); border-radius: var(--coui-radius-8); font-family: 'Geist Mono', monospace; font-size: var(--coui-font-size-12, .75rem); line-height: 1.6; }
.site-theme-tools-content [data-theme-status] { margin: var(--coui-space-8) 0 0; overflow-wrap: anywhere; }
.preview-variant-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--coui-space-12); margin-bottom: var(--coui-space-16); min-width: 0; }
.preview-variant-tabs { overflow-x: auto; max-width: 100%; padding: var(--coui-space-4); }
.preview-variant-tabs > * { min-width: max-content; }
.preview-code-summary { padding-inline: var(--coui-space-16); color: rgb(var(--coui-on-surface-variant)); font-size: .875rem; }
.site-mobile-nav { display: none; }
.site-mobile-nav > summary { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; cursor: pointer; list-style: none; color: rgb(var(--docs-text)); }
.site-mobile-nav > summary::-webkit-details-marker { display: none; }
.site-mobile-nav > summary:focus-visible { outline: 2px solid rgb(var(--docs-accent)); outline-offset: 2px; }
body .docs .site-mobile-nav-panel { position: fixed; top: calc(var(--docs-header-height) + 8px); left: 16px; right: 16px; width: auto; max-height: calc(100dvh - var(--docs-header-height) - 24px); overflow-y: auto; z-index: 25; }
body .docs .site-mobile-nav-card { width: 100%; }
.site-mobile-nav-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--coui-space-4) var(--coui-space-12); }
.site-mobile-nav-links a { display: flex; align-items: center; min-height: 44px; }
.site-mobile-nav h2 { margin: var(--coui-space-20) 0 var(--coui-space-8); padding: 0; border: 0; }
@media (max-width: 1023px) { .site-mobile-nav { display: block; } .docs.manual .site-mobile-nav { display: none; } }