/* Generated by hue. Syntax token colours: sparkles:syntax themes. */
.syn-root{color:#4c4f69;background-color:#eff1f5}
.syn-comment{color:#7c7f93;font-style:italic}
.syn-comment-block{color:#e64553}
.syn-comment-documentation{color:#4c4f69}
.syn-comment-line{color:#ea76cb;font-style:italic}
.syn-constant{color:#fe640b}
.syn-constant-builtin{color:#d20f39}
.syn-constant-builtin-boolean{color:#fe640b}
.syn-constant-character{color:#fe640b}
.syn-constant-character-escape{color:#ea76cb}
.syn-constant-numeric{color:#fe640b}
.syn-constant-numeric-float{color:#fe640b}
.syn-constant-numeric-integer{color:#fe640b}
.syn-diff-delta{color:#fe640b}
.syn-diff-minus{color:#d20f39}
.syn-diff-plus{color:#40a02b}
.syn-function{color:#1e66f5;font-style:italic}
.syn-function-builtin{color:#1e66f5;font-style:italic}
.syn-function-constructor{color:#1e66f5;font-style:italic}
.syn-function-macro{color:#1e66f5;font-style:italic}
.syn-function-method{color:#1e66f5;font-style:italic}
.syn-keyword{color:#8839ef}
.syn-keyword-control{color:#8839ef}
.syn-keyword-directive{color:#df8e1d}
.syn-keyword-function{color:#8839ef}
.syn-keyword-operator{color:#179299}
.syn-keyword-storage{color:#8839ef}
.syn-markup-bold{color:#d20f39;font-weight:bold}
.syn-markup-heading{color:#d20f39;font-weight:bold}
.syn-markup-italic{color:#d20f39;font-style:italic}
.syn-markup-link{color:#7287fd}
.syn-markup-link-url{color:#1e66f5}
.syn-markup-list{color:#179299}
.syn-markup-list-checked{color:#179299}
.syn-markup-list-numbered{color:#179299}
.syn-markup-list-unchecked{color:#179299}
.syn-markup-quote{color:#ea76cb}
.syn-markup-raw{color:#40a02b}
.syn-markup-raw-block{color:#40a02b}
.syn-markup-raw-inline{color:#40a02b}
.syn-markup-strikethrough{color:#6c6f85;text-decoration:line-through}
.syn-module{color:#df8e1d}
.syn-operator{color:#8839ef;font-weight:bold}
.syn-punctuation{color:#7c7f93}
.syn-punctuation-bracket{color:#7c7f93}
.syn-punctuation-delimiter{color:#7c7f93}
.syn-punctuation-special{color:#7c7f93}
.syn-string{color:#40a02b}
.syn-string-escape{color:#40a02b}
.syn-string-regexp{color:#4c4f69}
.syn-string-special{color:#40a02b}
.syn-string-special-key{color:#df8e1d}
.syn-string-special-path{color:#40a02b}
.syn-string-special-symbol{color:#e64553}
.syn-string-special-url{color:#7287fd}
.syn-tag{color:#1e66f5}
.syn-tag-attribute{color:#df8e1d;font-style:italic}
.syn-type{color:#df8e1d;font-style:italic}
.syn-type-builtin{color:#df8e1d;font-style:italic}
.syn-variable{color:#e64553;font-style:italic}
.syn-variable-builtin{color:#ea76cb}
.syn-variable-member{color:#e64553;font-style:italic}
.syn-variable-parameter{color:#e64553;font-style:italic}

/* Dark theme: same markup, scoped rules win on specificity. */
html.dark .syn-root{color:#cdd6f4;background-color:#1e1e2e}
html.dark .syn-comment{color:#9399b2;font-style:italic}
html.dark .syn-comment-block{color:#eba0ac}
html.dark .syn-comment-documentation{color:#cdd6f4}
html.dark .syn-comment-line{color:#f5c2e7;font-style:italic}
html.dark .syn-constant{color:#fab387}
html.dark .syn-constant-builtin{color:#f38ba8}
html.dark .syn-constant-builtin-boolean{color:#fab387}
html.dark .syn-constant-character{color:#fab387}
html.dark .syn-constant-character-escape{color:#f5c2e7}
html.dark .syn-constant-numeric{color:#fab387}
html.dark .syn-constant-numeric-float{color:#fab387}
html.dark .syn-constant-numeric-integer{color:#fab387}
html.dark .syn-diff-delta{color:#fab387}
html.dark .syn-diff-minus{color:#f38ba8}
html.dark .syn-diff-plus{color:#a6e3a1}
html.dark .syn-error{color:#f38ba8}
html.dark .syn-function{color:#89b4fa;font-style:italic}
html.dark .syn-function-builtin{color:#89b4fa;font-style:italic}
html.dark .syn-function-constructor{color:#89b4fa;font-style:italic}
html.dark .syn-function-macro{color:#89b4fa;font-style:italic}
html.dark .syn-function-method{color:#89b4fa;font-style:italic}
html.dark .syn-keyword{color:#cba6f7}
html.dark .syn-keyword-control{color:#cba6f7}
html.dark .syn-keyword-directive{color:#f9e2af}
html.dark .syn-keyword-function{color:#cba6f7}
html.dark .syn-keyword-operator{color:#94e2d5}
html.dark .syn-keyword-storage{color:#cba6f7}
html.dark .syn-markup-bold{color:#f38ba8;font-weight:bold}
html.dark .syn-markup-heading{color:#f38ba8;font-weight:bold}
html.dark .syn-markup-italic{color:#f38ba8;font-style:italic}
html.dark .syn-markup-link{color:#b4befe}
html.dark .syn-markup-link-url{color:#89b4fa}
html.dark .syn-markup-list{color:#94e2d5}
html.dark .syn-markup-list-checked{color:#94e2d5}
html.dark .syn-markup-list-numbered{color:#94e2d5}
html.dark .syn-markup-list-unchecked{color:#94e2d5}
html.dark .syn-markup-quote{color:#f5c2e7}
html.dark .syn-markup-raw{color:#a6e3a1}
html.dark .syn-markup-raw-block{color:#a6e3a1}
html.dark .syn-markup-raw-inline{color:#a6e3a1}
html.dark .syn-markup-strikethrough{color:#a6adc8;text-decoration:line-through}
html.dark .syn-module{color:#f9e2af}
html.dark .syn-operator{color:#cba6f7;font-weight:bold}
html.dark .syn-punctuation{color:#9399b2}
html.dark .syn-punctuation-bracket{color:#9399b2}
html.dark .syn-punctuation-delimiter{color:#9399b2}
html.dark .syn-punctuation-special{color:#9399b2}
html.dark .syn-string{color:#a6e3a1}
html.dark .syn-string-escape{color:#a6e3a1}
html.dark .syn-string-regexp{color:#cdd6f4}
html.dark .syn-string-special{color:#a6e3a1}
html.dark .syn-string-special-key{color:#f9e2af}
html.dark .syn-string-special-path{color:#a6e3a1}
html.dark .syn-string-special-symbol{color:#eba0ac}
html.dark .syn-string-special-url{color:#b4befe}
html.dark .syn-tag{color:#89b4fa}
html.dark .syn-tag-attribute{color:#f9e2af;font-style:italic}
html.dark .syn-type{color:#f9e2af;font-style:italic}
html.dark .syn-type-builtin{color:#f9e2af;font-style:italic}
html.dark .syn-variable{color:#eba0ac;font-style:italic}
html.dark .syn-variable-builtin{color:#f5c2e7}
html.dark .syn-variable-member{color:#eba0ac;font-style:italic}
html.dark .syn-variable-parameter{color:#eba0ac;font-style:italic}

pre.syn-root { padding: 1em; overflow-x: auto; }
pre.syn-root > code { display: block; counter-reset: lineno;
                      padding-left: var(--hue-gutter, 3ch); }
.syn-root .ln { position: relative; counter-increment: lineno; }
.syn-root .ln::before { content: counter(lineno); position: absolute;
                        left: calc(-1 * var(--hue-gutter, 3ch));
                        width: calc(var(--hue-gutter, 3ch) - 1ch);
                        text-align: right; opacity: 0.45;
                        -webkit-user-select: none; user-select: none; }

/* Twoslash overlay stylesheet — ported from @shikijs/twoslash `style-rich.css`.
  Styles only the `.twoslash-*` chrome; syntax token colors come from the
  sparkles:syntax theme stylesheet (`.syn-*` / `.syn-root`). Interactivity is
  100% CSS `:hover` — no JavaScript. Pair with a `.twoslash` container wrapping
  the rendered <pre><code>. */

:root {
  --twoslash-border-color: #8888;
  --twoslash-underline-color: #88888855;
  --twoslash-highlighted-border: #c37d0d50;
  --twoslash-highlighted-bg: #c37d0d20;
  --twoslash-popup-bg: #f8f8f8;
  --twoslash-popup-color: inherit;
  --twoslash-popup-shadow: rgba(0, 0, 0, 0.08) 0px 1px 4px;
  --twoslash-docs-color: #888;
  --twoslash-docs-font: sans-serif;
  --twoslash-code-font: inherit;
  --twoslash-code-font-size: 1em;
  --twoslash-matched-color: inherit;
  --twoslash-unmatched-color: #888;
  --twoslash-cursor-color: #8888;
  --twoslash-error-color: #d45656;
  --twoslash-error-bg: #d4565620;
  --twoslash-warn-color: #c37d0d;
  --twoslash-warn-bg: #c37d0d20;
  --twoslash-tag-color: #3772cf;
  --twoslash-tag-bg: #3772cf20;
  --twoslash-tag-annotate-color: #1ba673;
  --twoslash-tag-annotate-bg: #1ba67320;
}

@media (prefers-color-scheme: dark) {
  :root {
    --twoslash-popup-bg: #232323;
    --twoslash-docs-color: #a0a0a0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .twoslash * {
    transition: none !important;
  }
}

/* ===== Hover / query popups ===== */
.twoslash:hover .twoslash-hover {
  border-color: var(--twoslash-underline-color);
}

.twoslash .twoslash-hover {
  position: relative;
  border-bottom: 1px dotted transparent;
  transition-timing-function: ease;
  transition: border-color 0.3s;
}

/* All popup surfaces — the hover popup container, the below-line query popup, and
  the completion list — share ONE design language (surface + a `1ch` detach gap
  from the token or caret they annotate), so consistency is structural, not
  per-rule. Only the positioning model differs (see the individual rules below).
  The query and completion are bare block elements (direct children of the code)
  so their gap is exactly `margin-top`; the hover popup is absolutely positioned. */
.twoslash .twoslash-popup-container,
.twoslash .twoslash-query-line,
.twoslash .twoslash-completion-list {
  margin-top: 1ch;
  background: var(--twoslash-popup-bg);
  color: var(--twoslash-popup-color);
  border: 1px solid var(--twoslash-border-color);
  border-radius: 4px;
  box-shadow: var(--twoslash-popup-shadow);
}

/* Annotation surfaces are decorations, not code: keep them out of a text
  selection of the code (VSCode-like — the code copies cleanly). The hover
  popup container sets this on itself below; these are the below-line blocks
  (query/error `-meta-line`, completions, and `// @tag` lines). */
.twoslash .twoslash-meta-line,
.twoslash .twoslash-completion-list,
.twoslash .twoslash-tag-line {
  -webkit-user-select: none;
  user-select: none;
}

.twoslash .twoslash-popup-container {
  position: absolute;
  z-index: 10;
  /* Hidden with `display` (not opacity) so a hidden popup takes no layout: it
    neither widens the scroll area (stray horizontal scrollbar) nor injects
    block-boundary newlines into a copied code selection. Revealed on hover
    below. (Trades Shiki's opacity fade for a clean copy + no overflow.) */
  display: none;
  flex-direction: column;
  transform: translateY(1.1em); /* drop below the inline token it annotates */
  pointer-events: none;
  user-select: none;
  text-align: left;
}

.twoslash .twoslash-hover:hover .twoslash-popup-container {
  display: inline-flex;
  pointer-events: auto;
}

.twoslash .twoslash-popup-code {
  padding: 6px 8px;
  font-family: var(--twoslash-code-font);
  font-size: var(--twoslash-code-font-size);
  white-space: pre;
}

.twoslash .twoslash-popup-docs {
  padding: 6px 8px;
  color: var(--twoslash-docs-color);
  font-family: var(--twoslash-docs-font);
  font-size: 0.8em;
  border-top: 1px solid var(--twoslash-border-color);
}

/* Rendered markdown inside the docs (paragraphs, lists, code fences, headings):
  tame the browser's default block margins so a paragraph or list sits tight in
  the small popup — collapse the outer edges, keep a modest inner rhythm.
  (Shiki leans on the host page's prose styles; the overlay is self-contained.) */
.twoslash .twoslash-popup-docs :first-child {
  margin-top: 0;
}
.twoslash .twoslash-popup-docs :last-child {
  margin-bottom: 0;
}
.twoslash .twoslash-popup-docs p,
.twoslash .twoslash-popup-docs ul,
.twoslash .twoslash-popup-docs ol,
.twoslash .twoslash-popup-docs pre,
.twoslash .twoslash-popup-docs blockquote {
  margin: 0.5em 0;
}
/* Inline `code` in docs / tag values: a subtle surface so it reads as code,
  not prose. (The code-fence `pre code` below resets this back to flat.) */
.twoslash .twoslash-popup-docs code {
  font-family: var(--twoslash-code-font);
  padding: 0.1em 0.3em;
  border-radius: 3px;
  background: var(--twoslash-docs-code-bg, rgba(127, 127, 127, 0.14));
}
.twoslash .twoslash-popup-docs pre {
  padding: 4px 6px;
  border-radius: 3px;
  overflow-x: auto;
  background: var(--twoslash-docs-code-bg, rgba(127, 127, 127, 0.1));
}
.twoslash .twoslash-popup-docs pre code {
  padding: 0;
  background: none;
}
/* Links in docs / tag values (`[text](url)`, `<url>`) look like links. */
.twoslash .twoslash-popup-docs a {
  color: var(--twoslash-docs-link-color, #4c8dff);
  text-decoration: underline;
}

.twoslash .twoslash-popup-docs-tags {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  font-family: var(--twoslash-docs-font);
}

.twoslash .twoslash-popup-docs-tags,
.twoslash .twoslash-popup-docs-tag-name {
  margin-right: 0.5em;
}

/* Each JSDoc tag name (@param, @returns, @see) as a small chip. */
.twoslash .twoslash-popup-docs-tag-name {
  display: inline-block;
  font-family: var(--twoslash-code-font);
  font-size: 0.92em;
  padding: 0.05em 0.4em;
  border-radius: 4px;
  background: var(--twoslash-docs-tag-bg, rgba(127, 127, 127, 0.18));
}

/* Connector notch — shared by every popup (the completion list overrides `left`
  inline to point at its caret rather than the fixed token-start position). */
.twoslash .twoslash-popup-arrow {
  position: absolute;
  top: -4px;
  left: 1em;
  border-top: 1px solid var(--twoslash-border-color);
  border-right: 1px solid var(--twoslash-border-color);
  background: var(--twoslash-popup-bg);
  transform: rotate(-45deg);
  width: 6px;
  height: 6px;
  pointer-events: none;
}

/* ===== Query line ===== */
.twoslash .twoslash-query-line {
  position: relative; /* containing block for the arrow */
  /* Below a hover popup's z-index (10) so an expanded hover on the line above
    paints over this always-visible query popup, not behind it. */
  z-index: 9;
  display: flex; /* block-level flex, content-width — same as the completion */
  flex-direction: column;
  width: max-content;
  padding: 0;
  margin-bottom: 1.4em;
}

/* ===== Error line ===== */
.twoslash .twoslash-error-line {
  position: relative;
  margin: 0.2em 0;
  padding: 6px 12px;
  /* `min-width: 100%` + padding + border overflows its line unless the padding
    is counted inside the width — Shiki leans on a host `box-sizing` reset; the
    overlay is self-contained, so set it here (else a stray horizontal scrollbar). */
  box-sizing: border-box;
  min-width: 100%;
  width: max-content;
  background-color: var(--twoslash-error-bg);
  border-left: 3px solid var(--twoslash-error-color);
  color: var(--twoslash-error-color);
}

.twoslash .twoslash-error-line.twoslash-error-level-warning {
  background-color: var(--twoslash-warn-bg);
  border-left: 3px solid var(--twoslash-warn-color);
  color: var(--twoslash-warn-color);
}

/* Inline error span: wavy underline (SVG data-URI, bottom-repeat). */
.twoslash .twoslash-error {
  padding-bottom: 2px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23c94824'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
    repeat-x bottom left;
}

.twoslash .twoslash-error.twoslash-error-level-warning {
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23c37d0d'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
    repeat-x bottom left;
}

/* ===== Completions ===== */
/* Surface + top gap come from the shared popup rule above. Only the completion's
  own layout lives here. `margin-bottom` only (not the `margin` shorthand) so the
  shared `margin-top: 1ch` survives; `margin-left` is set inline per node. The
  font-size is left to inherit the code size so that inline `margin-left:Nch`
  offset tracks the monospace column grid exactly. */
.twoslash .twoslash-completion-list {
  position: relative; /* containing block for the arrow */
  width: max-content;
  margin-bottom: 3px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.twoslash .twoslash-completion-list li {
  display: flex;
  align-items: center;
  gap: 0.25em;
  line-height: 1em;
  list-style: none;
}

.twoslash .twoslash-completion-list .twoslash-completions-matched {
  color: var(--twoslash-matched-color);
}

.twoslash .twoslash-completion-list .twoslash-completions-unmatched {
  color: var(--twoslash-unmatched-color);
}

.twoslash .twoslash-completion-list .twoslash-completions-icon {
  color: var(--twoslash-unmatched-color);
  width: 1em;
  flex: none;
}

.twoslash .twoslash-completion-list .twoslash-completions-icon svg {
  width: 1em;
  height: 1em;
  display: block;
}

.twoslash .twoslash-completion-list .deprecated {
  text-decoration: line-through;
  opacity: 0.5;
}

/* ===== Highlights ===== */
.twoslash .twoslash-highlighted {
  padding: 1px 2px;
  margin: -1px -3px;
  border-radius: 4px;
  background-color: var(--twoslash-highlighted-bg);
  border: 1px solid var(--twoslash-highlighted-border);
}

/* ===== Custom tags ===== */
.twoslash .twoslash-tag-line {
  position: relative;
  margin: 0.2em 0;
  padding: 6px 10px;
  box-sizing: border-box; /* keep `min-width: 100%` + padding inside the line */
  min-width: 100%;
  width: max-content;
  display: flex;
  align-items: center;
  gap: 0.3em;
  background-color: var(--twoslash-tag-bg);
  border-left: 3px solid var(--twoslash-tag-color);
  color: var(--twoslash-tag-color);
}

.twoslash .twoslash-tag-line .twoslash-tag-icon {
  width: 1.1em;
  flex: none;
  color: inherit;
}

.twoslash .twoslash-tag-line .twoslash-tag-icon svg {
  width: 1.1em;
  height: 1.1em;
  display: block;
}

.twoslash .twoslash-tag-line.twoslash-tag-error-line {
  background-color: var(--twoslash-error-bg);
  border-left: 3px solid var(--twoslash-error-color);
  color: var(--twoslash-error-color);
}

.twoslash .twoslash-tag-line.twoslash-tag-warn-line {
  background-color: var(--twoslash-warn-bg);
  border-left: 3px solid var(--twoslash-warn-color);
  color: var(--twoslash-warn-color);
}

.twoslash .twoslash-tag-line.twoslash-tag-annotate-line {
  background-color: var(--twoslash-tag-annotate-bg);
  border-left: 3px solid var(--twoslash-tag-annotate-color);
  color: var(--twoslash-tag-annotate-color);
}