/* Generated by roots. Theme, base styles, utilities, component styles. */
:root { color-scheme: light dark; --roots-primary: #8a5200; --roots-accent: #2c6a47; --roots-muted: #55605a; --roots-surface: #efeadb; --roots-border: #d9d2bf; --roots-focus: #8a5200; --roots-success: #2c6a47; --roots-warning: #d97706; --roots-error: #a8402a; --roots-info: #1f5f9f; --roots-text: #141c1a; --roots-bg: #f7f4ea; --roots-warning-text: #b45309; --roots-control-border: #878e99; --roots-on-primary: #ffffff; --roots-on-success: #ffffff; --roots-on-error: #ffffff; --roots-on-info: #ffffff; }
:root[data-theme="light"] { color-scheme: light; }
:root:where([data-theme="dark"]) { color-scheme: dark; --roots-primary: #f0a640; --roots-accent: #93c3a0; --roots-muted: #a9b1a8; --roots-surface: #15201e; --roots-border: #2a3a36; --roots-focus: #f0a640; --roots-success: #93c3a0; --roots-error: #e07a5f; --roots-info: #7fb2e5; --roots-text: #ebe6d8; --roots-bg: #0f1716; --roots-warning-text: #d97706; --roots-control-border: #6b7280; --roots-on-primary: #111827; --roots-on-success: #111827; --roots-on-error: #111827; --roots-on-info: #111827; }
@media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) { --roots-primary: #f0a640; --roots-accent: #93c3a0; --roots-muted: #a9b1a8; --roots-surface: #15201e; --roots-border: #2a3a36; --roots-focus: #f0a640; --roots-success: #93c3a0; --roots-error: #e07a5f; --roots-info: #7fb2e5; --roots-text: #ebe6d8; --roots-bg: #0f1716; --roots-warning-text: #d97706; --roots-control-border: #6b7280; --roots-on-primary: #111827; --roots-on-success: #111827; --roots-on-error: #111827; --roots-on-info: #111827; } }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 1rem; line-height: 1.5;
  color: var(--roots-text); background: var(--roots-bg); -webkit-font-smoothing: antialiased; }
#app { min-height: 100vh; display: flex; flex-direction: column; }
.r-box, .r-spacer { display: flex; flex-direction: column; min-width: 0; }
.r-spacer { flex: 1 1 auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; padding: 0.25rem 0.75rem; border: 1px solid var(--roots-control-border); border-radius: 0.375rem;
  background: var(--roots-surface); }
button:disabled { cursor: default; opacity: 0.6; }
input:not([type=checkbox]):not([type=radio]) { padding: 0.25rem 0.5rem; border: 1px solid var(--roots-control-border);
  border-radius: 0.375rem; background: var(--roots-bg); }
input[type=checkbox] { accent-color: var(--roots-primary); width: 1rem; height: 1rem; }
:focus-visible { outline: 2px solid var(--roots-focus); outline-offset: 2px; }
a { color: var(--roots-primary); }
img { max-width: 100%; }
/* skin.dom.css: the Roots UI kit on the DOM. Colours are the theme tokens (--roots-*,
   with dark-mode values from the theme); r-BLOCK is a component's root, r-BLOCK__PART a
   part, r-BLOCK--MOD a modifier. prefers-reduced-motion turns animations off. */
:root { --r-radius: 0.5rem; --r-radius-sm: 0.375rem; --r-on-accent: #ffffff;
  --r-shadow: 0 10px 30px rgb(0 0 0 / 0.18), 0 2px 6px rgb(0 0 0 / 0.12);
  --r-hover: color-mix(in srgb, var(--roots-text) 8%, transparent);
  --r-ease: 150ms ease; }
.r-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* icons */
.r-icon { width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -0.2em; }
.r-icon--sm { width: 0.95em; height: 0.95em; }
.r-icon--lg { width: 1.5em; height: 1.5em; }

/* buttons */
.r-button, .r-icon-button { display: inline-flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 0.5rem; width: fit-content; font-weight: 600; line-height: 1.25; border-radius: var(--r-radius-sm);
  border: 1px solid transparent; padding: 0.5rem 1rem; transition: background-color var(--r-ease), border-color var(--r-ease), color var(--r-ease);
  user-select: none; white-space: nowrap; }
.r-button:focus-visible, .r-icon-button:focus-visible { outline: 2px solid var(--roots-focus); outline-offset: 2px; }
/* a loading button is aria-disabled, not disabled (it keeps the focus): it looks the same */
.r-button:disabled, .r-icon-button:disabled, .r-button[aria-disabled=true] { opacity: 0.55; cursor: not-allowed; }
.r-button--primary { background: var(--roots-primary); color: var(--roots-on-primary, var(--r-on-accent)); }
.r-button--primary:hover:not(:disabled):not([aria-disabled=true]) { background: color-mix(in srgb, var(--roots-primary) 85%, black); }
.r-button--secondary { background: var(--roots-surface); border-color: var(--roots-control-border, var(--roots-border)); color: var(--roots-text); }
.r-button--secondary:hover:not(:disabled):not([aria-disabled=true]) { background: color-mix(in srgb, var(--roots-surface) 80%, var(--roots-text)); }
.r-button--ghost { background: transparent; color: var(--roots-text); }
.r-button--ghost:hover:not(:disabled):not([aria-disabled=true]) { background: var(--r-hover); }
.r-button--danger { background: var(--roots-error); color: var(--roots-on-error, var(--r-on-accent)); }
.r-button--danger:hover:not(:disabled):not([aria-disabled=true]) { background: color-mix(in srgb, var(--roots-error) 85%, black); }
.r-button--sm { padding: 0.25rem 0.625rem; font-size: 0.875rem; }
.r-button--lg { padding: 0.75rem 1.5rem; font-size: 1.125rem; }
.r-button--block { width: 100%; }
.r-button.r-button--loading { cursor: progress; }
.r-icon-button { padding: 0.5rem; background: transparent; color: var(--roots-text); }
.r-icon-button:hover:not(:disabled) { background: var(--r-hover); }
.r-icon-button--primary { color: var(--roots-primary); }
.r-icon-button--danger { color: var(--roots-error); }
.r-icon-button--sm { padding: 0.25rem; }
.r-icon-button--lg { padding: 0.75rem; }

/* spinner (also inside a loading button) */
.r-spinner, .r-button__spinner { display: inline-block; width: 1.25rem; height: 1.25rem; flex-shrink: 0; border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor;
  animation: r-spin 0.8s linear infinite; }
.r-spinner { color: var(--roots-primary); }
.r-spinner--sm, .r-button__spinner { width: 1em; height: 1em; }
.r-spinner--lg { width: 2rem; height: 2rem; border-width: 3px; }
@keyframes r-spin { to { transform: rotate(360deg); } }

/* badge, tag, avatar */
.r-badge { display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-width: 1.4rem;
  padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; line-height: 1.25rem;
  background: var(--roots-surface); color: var(--roots-text); }
.r-badge--primary { background: var(--roots-primary); color: var(--roots-on-primary, var(--r-on-accent)); }
.r-badge--success { background: var(--roots-success); color: var(--roots-on-success, var(--r-on-accent)); }
.r-badge--warning { background: var(--roots-warning); color: #111827; }
.r-badge--error { background: var(--roots-error); color: var(--roots-on-error, var(--r-on-accent)); }
.r-badge--info { background: var(--roots-info); color: var(--roots-on-info, var(--r-on-accent)); }
.r-badge--dot { min-width: 0.6rem; width: 0.6rem; height: 0.6rem; padding: 0; }
.r-tag { display: inline-flex; flex-direction: row; align-items: center; width: fit-content; gap: 0.35rem;
  padding: 0.125rem 0.6rem; border-radius: 999px; font-size: 0.875rem; border: 1px solid var(--roots-border);
  background: var(--roots-surface); color: var(--roots-text); }
.r-tag--removable { padding-right: 0.2rem; }
.r-tag--primary { border-color: var(--roots-primary); color: var(--roots-primary); background: color-mix(in srgb, var(--roots-primary) 10%, transparent); }
.r-tag--success { border-color: var(--roots-success); color: var(--roots-success); background: color-mix(in srgb, var(--roots-success) 10%, transparent); }
.r-tag--warning { border-color: var(--roots-warning-text, var(--roots-warning)); color: var(--roots-warning-text, var(--roots-warning)); background: color-mix(in srgb, var(--roots-warning) 10%, transparent); }
.r-tag--error { border-color: var(--roots-error); color: var(--roots-error); background: color-mix(in srgb, var(--roots-error) 10%, transparent); }
.r-tag--info { border-color: var(--roots-info); color: var(--roots-info); background: color-mix(in srgb, var(--roots-info) 10%, transparent); }
/* 24 CSS px: the smallest pointer target (WCAG 2.5.8) */
.r-tag__remove { padding: 0.1rem; border-radius: 999px; color: inherit; min-width: 24px; min-height: 24px; }
.r-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2.5rem; height: 2.5rem; overflow: hidden; border-radius: 50%; background: var(--roots-primary); color: var(--roots-on-primary, var(--r-on-accent));
  font-weight: 700; }
.r-avatar--sm { width: 1.75rem; height: 1.75rem; font-size: 0.75rem; }
.r-avatar--lg { width: 3.5rem; height: 3.5rem; font-size: 1.25rem; }
.r-avatar--square { border-radius: var(--r-radius-sm); }
.r-avatar__image { width: 100%; height: 100%; object-fit: cover; }

/* card, divider */
.r-card { display: flex; flex-direction: column; border-radius: var(--r-radius); background: var(--roots-bg);
  border: 1px solid var(--roots-border); overflow: hidden; }
.r-card--elevated { border-color: transparent; box-shadow: var(--r-shadow); }
.r-card--filled { background: var(--roots-surface); border-color: transparent; }
.r-card__header { padding: 1rem 1rem 0; gap: 0.125rem; }
.r-card__title { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.4; }
.r-card__subtitle { color: var(--roots-muted); font-size: 0.875rem; }
.r-card__body { padding: 1rem; gap: 0.5rem; }
.r-card__footer { flex-direction: row; justify-content: flex-end; gap: 0.5rem; padding: 0.75rem 1rem;
  border-top: 1px solid var(--roots-border); }
.r-divider { flex-direction: row; align-items: center; gap: 0.75rem; align-self: stretch; color: var(--roots-muted); font-size: 0.875rem; }
.r-divider__line { flex: 1 1 0%; border-top: 1px solid var(--roots-border); }
.r-divider--vertical { flex-direction: column; align-self: stretch; }
.r-divider--vertical .r-divider__line { border-top: 0; border-left: 1px solid var(--roots-border); min-height: 1.5rem; }

/* progress, skeleton */
.r-progress { gap: 0.375rem; align-self: stretch; }
.r-progress__header { flex-direction: row; justify-content: space-between; font-size: 0.875rem; }
.r-progress__value { color: var(--roots-muted); font-variant-numeric: tabular-nums; }
.r-progress__track { display: block; position: relative; height: 0.5rem; border-radius: 999px; background: var(--roots-surface); overflow: hidden; }
.r-progress__fill { display: block; height: 100%; border-radius: inherit; background: var(--roots-primary); transition: width 200ms ease; }
.r-progress--success .r-progress__fill { background: var(--roots-success); }
.r-progress--warning .r-progress__fill { background: var(--roots-warning); }
.r-progress--error .r-progress__fill { background: var(--roots-error); }
.r-progress--indeterminate .r-progress__fill { width: 35%; position: absolute; animation: r-indeterminate 1.2s ease-in-out infinite; }
@keyframes r-indeterminate { from { left: -35%; } to { left: 100%; } }
.r-skeleton { display: flex; flex-direction: column; gap: 0.5rem; align-self: stretch; }
.r-skeleton__line, .r-skeleton--rect, .r-skeleton--circle { display: block; height: 0.875rem; border-radius: var(--r-radius-sm);
  background: linear-gradient(90deg, var(--roots-surface) 25%, color-mix(in srgb, var(--roots-surface) 70%, var(--roots-bg)) 37%, var(--roots-surface) 63%);
  background-size: 400% 100%; animation: r-shimmer 1.4s ease infinite; }
.r-skeleton__line:last-child:not(:first-child) { width: 70%; }
.r-skeleton--rect, .r-skeleton--circle { min-height: 2rem; }
.r-skeleton--circle { border-radius: 50%; aspect-ratio: 1; align-self: flex-start; width: 3rem; }
@keyframes r-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* label, field, input */
.r-label { font-weight: 600; font-size: 0.875rem; }
.r-label__required { color: var(--roots-error); }
.r-field { gap: 0.3rem; }
.r-field__hint { color: var(--roots-muted); font-size: 0.8125rem; }
.r-field__error { color: var(--roots-error); font-size: 0.8125rem; min-height: 0; }
.r-field__error:empty { display: none; }
/* input.r-input:not(…) has the specificity of the base input style, and comes later */
input.r-input:not([type=checkbox]):not([type=radio]), .r-input { padding: 0.5rem 0.75rem; border-radius: var(--r-radius-sm); border: 1px solid var(--roots-control-border, var(--roots-border));
  background: var(--roots-bg); color: var(--roots-text); transition: border-color var(--r-ease), box-shadow var(--r-ease); min-width: 0; }
.r-input::placeholder { color: var(--roots-muted); }
/* the states are written in the shape of the base rule above, or it would win over them. The
   focus indicator is a solid outline in the focus colour (a faint ring is not one: WCAG 1.4.11) */
input.r-input:not([type=checkbox]):not([type=radio]):focus, .r-input:focus { outline: 2px solid var(--roots-focus); outline-offset: 1px;
  border-color: var(--roots-focus); }
input.r-input:not([type=checkbox]):not([type=radio]):disabled, .r-input:disabled { opacity: 0.55; cursor: not-allowed; }
input.r-input.r-input--invalid:not([type=checkbox]):not([type=radio]), input.r-input[aria-invalid=true]:not([type=checkbox]):not([type=radio]),
.r-input--invalid, .r-input[aria-invalid=true] { border-color: var(--roots-error); }
input.r-input--sm:not([type=checkbox]):not([type=radio]) { padding: 0.25rem 0.5rem; font-size: 0.875rem; }
input.r-input--lg:not([type=checkbox]):not([type=radio]) { padding: 0.75rem 1rem; font-size: 1.125rem; }

/* checkbox, radio, switch */
.r-checkbox, .r-radio { display: inline-flex; flex-direction: row; align-items: center; gap: 0.5rem; width: fit-content; cursor: pointer; }
.r-checkbox input, .r-radio input { margin: 0; width: 1.05rem; height: 1.05rem; accent-color: var(--roots-primary); cursor: inherit; }
.r-checkbox--disabled, .r-radio--disabled { opacity: 0.55; cursor: not-allowed; }
.r-checkbox input:focus-visible, .r-radio input:focus-visible { outline: 2px solid var(--roots-focus); outline-offset: 2px; }
.r-radio-group { gap: 0.5rem; }
.r-radio-group--horizontal { flex-direction: row; flex-wrap: wrap; gap: 1rem; }
.r-switch { display: inline-flex; flex-direction: row; align-items: center; gap: 0.6rem; width: fit-content;
  padding: 0.125rem; border: 0; background: transparent; color: var(--roots-text); border-radius: var(--r-radius-sm); }
.r-switch:focus-visible { outline: 2px solid var(--roots-focus); outline-offset: 2px; }
.r-switch:disabled { opacity: 0.55; cursor: not-allowed; }
.r-switch__track { position: relative; display: inline-block; width: 2.4rem; height: 1.4rem; border-radius: 999px;
  background: var(--roots-border); transition: background-color var(--r-ease); flex-shrink: 0; }
.r-switch__track--checked { background: var(--roots-primary); }
.r-switch__thumb { position: absolute; top: 0.15rem; left: 0.15rem; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: #ffffff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.3); transition: transform var(--r-ease); }
.r-switch__track--checked .r-switch__thumb { transform: translateX(1rem); }

/* the kit's own boxes are flex boxes: [hidden] must still hide them */
[class^="r-"][hidden], [class*=" r-"][hidden] { display: none !important; }

/* textarea, form */
textarea.r-textarea { padding: 0.5rem 0.75rem; border-radius: var(--r-radius-sm); border: 1px solid var(--roots-control-border, var(--roots-border));
  background: var(--roots-bg); color: var(--roots-text); resize: vertical; min-height: 4.5rem; line-height: 1.5; }
textarea.r-textarea:focus { outline: 2px solid var(--roots-focus); outline-offset: 1px; border-color: var(--roots-focus); }
textarea.r-textarea.r-textarea--invalid, textarea.r-textarea[aria-invalid=true] { border-color: var(--roots-error); }
/* a <form> is no flex box by itself: without display the gap would do nothing */
.r-form { display: flex; flex-direction: column; gap: 1rem; }

/* number input: a field between its two buttons, in one border */
.r-number-input { display: inline-flex; flex-direction: row; align-items: stretch; width: fit-content; border-radius: var(--r-radius-sm);
  border: 1px solid var(--roots-control-border, var(--roots-border)); background: var(--roots-bg); color: var(--roots-text); }
.r-number-input:focus-within { outline: 2px solid var(--roots-focus); outline-offset: 1px; border-color: var(--roots-focus); }
.r-number-input.r-number-input--invalid { border-color: var(--roots-error); }
.r-number-input--disabled { opacity: 0.55; }
input.r-number-input__input:not([type=checkbox]):not([type=radio]) { width: 4.5rem; min-width: 0; padding: 0.5rem 0.25rem; border: 0; border-radius: 0;
  background: transparent; color: inherit; text-align: center; font-variant-numeric: tabular-nums; }
input.r-number-input__input:not([type=checkbox]):not([type=radio]):focus { outline: none; }
.r-number-input__decrement, .r-number-input__increment { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem;
  min-height: 24px; padding: 0 0.5rem; border: 0; border-radius: 0; background: transparent; color: inherit; }
.r-number-input__decrement { border-right: 1px solid var(--roots-border); }
.r-number-input__increment { border-left: 1px solid var(--roots-border); }
.r-number-input__decrement:hover:not([aria-disabled=true]), .r-number-input__increment:hover:not([aria-disabled=true]) { background: var(--r-hover); }
.r-number-input__decrement[aria-disabled=true], .r-number-input__increment[aria-disabled=true] { opacity: 0.45; cursor: not-allowed; }
.r-number-input--sm input.r-number-input__input:not([type=checkbox]):not([type=radio]) { padding: 0.25rem; font-size: 0.875rem; width: 3.5rem; }
.r-number-input--lg input.r-number-input__input:not([type=checkbox]):not([type=radio]) { padding: 0.75rem 0.5rem; font-size: 1.125rem; }

/* slider */
.r-slider { flex-direction: row; align-items: center; gap: 0.75rem; }
.r-slider__control { position: relative; flex: 1 1 auto; min-width: 8rem; height: 1.5rem; justify-content: center; cursor: pointer;
  border-radius: var(--r-radius-sm); touch-action: none; }
.r-slider__control:focus-visible { outline: none; }
.r-slider__control:focus-visible .r-slider__thumb { box-shadow: 0 0 0 3px var(--roots-bg), 0 0 0 5px var(--roots-focus); }
.r-slider__track { position: relative; display: block; height: 0.375rem; border-radius: 999px; background: var(--roots-border); }
.r-slider__range { position: absolute; left: 0; top: 0; display: block; height: 100%; border-radius: inherit; background: var(--roots-primary); }
.r-slider__thumb { position: absolute; top: 50%; display: block; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: #ffffff; border: 2px solid var(--roots-primary); transform: translate(-50%, -50%); box-shadow: 0 1px 3px rgb(0 0 0 / 0.25); }
.r-slider__value { min-width: 3rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--roots-muted); }
.r-slider--disabled { opacity: 0.55; }
.r-slider--disabled .r-slider__control { cursor: not-allowed; }

/* select and menu: a trigger and a popup list */
.r-select, .r-menu, .r-popover, .r-tooltip { width: fit-content; }
.r-select__trigger { display: inline-flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0.5rem;
  min-width: 12rem; padding: 0.5rem 0.75rem; border-radius: var(--r-radius-sm); border: 1px solid var(--roots-control-border, var(--roots-border));
  background: var(--roots-bg); color: var(--roots-text); font-weight: 400; text-align: left; }
.r-select__trigger:focus-visible { outline: 2px solid var(--roots-focus); outline-offset: 1px; border-color: var(--roots-focus); }
.r-select__trigger.r-select__trigger--invalid, .r-select__trigger[aria-invalid=true] { border-color: var(--roots-error); }
.r-select--sm .r-select__trigger { padding: 0.25rem 0.5rem; font-size: 0.875rem; min-width: 8rem; }
.r-select--lg .r-select__trigger { padding: 0.75rem 1rem; font-size: 1.125rem; }
.r-select__value--placeholder { color: var(--roots-muted); }
/* layers, bottom to top: pop-ups that were open when a dialog opened (1000, the --under modifier: a
   dialog opened from a Popover covers it), dialogs and drawers (1100), pop-ups (1150: one opened inside a
   dialog is above it), tooltips (1200), toasts (1300) */
.r-select__dismiss, .r-menu__dismiss, .r-popover__dismiss { position: fixed; inset: 0; z-index: 1150; }
.r-select__list, .r-menu__list, .r-popover__panel { position: fixed; z-index: 1151; overflow: auto; padding: 0.25rem;
  border-radius: var(--r-radius); border: 1px solid var(--roots-border); background: var(--roots-bg); color: var(--roots-text);
  box-shadow: var(--r-shadow); animation: r-pop 120ms ease-out; }
.r-select__dismiss--under, .r-menu__dismiss--under, .r-popover__dismiss--under { z-index: 1000; }
.r-select__list--under, .r-menu__list--under, .r-popover__panel--under { z-index: 1001; }
.r-select__option { flex-direction: row; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; border-radius: var(--r-radius-sm); cursor: pointer; }
.r-select__option:hover, .r-select__option:focus { background: var(--r-hover); outline: none; }
.r-select__option:focus-visible { box-shadow: inset 0 0 0 2px var(--roots-focus); }
.r-select__option--selected { color: var(--roots-primary); font-weight: 600; }
.r-select__option--disabled { opacity: 0.5; cursor: not-allowed; }
.r-select__check { display: inline-flex; width: 1rem; flex-shrink: 0; }
.r-menu__list { min-width: 11rem; }
.r-menu__item { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; width: 100%; padding: 0.4rem 0.6rem;
  border: 0; border-radius: var(--r-radius-sm); background: transparent; color: inherit; font-weight: 400; text-align: left; }
.r-menu__item:hover:not(:disabled), .r-menu__item:focus { background: var(--r-hover); outline: none; }
.r-menu__item:focus-visible { box-shadow: inset 0 0 0 2px var(--roots-focus); }
.r-menu__item--danger { color: var(--roots-error); }
.r-menu__check { display: inline-flex; width: 1rem; flex-shrink: 0; }
.r-menu__item:disabled { opacity: 0.5; cursor: not-allowed; }
.r-menu__separator { height: 1px; margin: 0.25rem 0; background: var(--roots-border); }
.r-popover__panel { padding: 0.75rem; min-width: 12rem; }
.r-popover__panel:focus { outline: none; }
@keyframes r-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* tooltip */
.r-tooltip__content { position: fixed; z-index: 1200; padding: 0.3rem 0.55rem; border-radius: var(--r-radius-sm); pointer-events: none;
  background: var(--roots-text); color: var(--roots-bg); font-size: 0.8125rem; line-height: 1.3; max-width: 18rem; }

/* dialog and drawer */
.r-dialog__backdrop, .r-drawer__backdrop { position: fixed; inset: 0; z-index: 1100; display: flex;
  background: rgb(0 0 0 / 0.45); animation: r-fade 150ms ease-out; }
.r-dialog__backdrop { align-items: center; justify-content: center; padding: 1rem; }
.r-dialog__backdrop--plain, .r-drawer__backdrop--plain { background: transparent; }
.r-dialog__panel, .r-drawer__panel { display: flex; flex-direction: column; gap: 0.75rem; background: var(--roots-bg); color: var(--roots-text);
  box-shadow: var(--r-shadow); overflow: auto; }
.r-dialog__panel { width: 32rem; max-width: 100%; max-height: 100%; padding: 1.25rem; border-radius: calc(var(--r-radius) * 1.5);
  animation: r-zoom 150ms ease-out; }
.r-dialog__panel--sm { width: 22rem; } .r-dialog__panel--lg { width: 48rem; }
.r-dialog__panel--full { width: 100%; height: 100%; border-radius: 0; }
.r-dialog__panel:focus, .r-drawer__panel:focus { outline: none; }
.r-dialog__header, .r-drawer__header { flex-direction: row; align-items: center; gap: 0.5rem; }
.r-dialog__title, .r-drawer__title { flex: 1 1 auto; margin: 0; font-size: 1.125rem; line-height: 1.4; }
.r-dialog__description, .r-drawer__description { margin-top: -0.5rem; color: var(--roots-muted); font-size: 0.9375rem; }
.r-dialog__body, .r-drawer__body { gap: 0.75rem; }
.r-dialog__footer, .r-drawer__footer { flex-direction: row; justify-content: flex-end; gap: 0.5rem; padding-top: 0.5rem; }
.r-drawer__backdrop { flex-direction: row; justify-content: flex-end; }
.r-drawer__backdrop--left { justify-content: flex-start; }
.r-drawer__backdrop--top { flex-direction: column; justify-content: flex-start; }
.r-drawer__backdrop--bottom { flex-direction: column; justify-content: flex-end; }
.r-drawer__panel { width: 22rem; max-width: 100%; height: 100%; padding: 1.25rem; animation: r-slide-left 180ms ease-out; }
.r-drawer__panel--left { animation-name: r-slide-right; }
.r-drawer__panel--top, .r-drawer__panel--bottom { width: 100%; height: auto; max-height: 80%; animation-name: r-fade; }
.r-drawer__body { flex: 1 1 auto; }
@keyframes r-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes r-zoom { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes r-slide-left { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes r-slide-right { from { transform: translateX(-30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* toasts */
.r-toaster { position: fixed; z-index: 1300; display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; pointer-events: none;
  width: min(24rem, 100vw); }
.r-toaster--bottom-end { bottom: 0; right: 0; } .r-toaster--bottom-start { bottom: 0; left: 0; }
.r-toaster--top-end { top: 0; right: 0; } .r-toaster--top-start { top: 0; left: 0; }
.r-toaster__toast { pointer-events: auto; flex-direction: row; align-items: flex-start; gap: 0.6rem; padding: 0.75rem 0.75rem 0.75rem 1rem;
  border-radius: var(--r-radius); border: 1px solid var(--roots-border); border-left: 4px solid var(--roots-info);
  background: var(--roots-bg); color: var(--roots-text); box-shadow: var(--r-shadow); animation: r-pop 150ms ease-out; }
.r-toaster__toast:focus-visible { outline: 2px solid var(--roots-focus); outline-offset: 2px; }
.r-toaster__toast--success { border-left-color: var(--roots-success); } .r-toaster__toast--error { border-left-color: var(--roots-error); }
.r-toaster__toast--warning { border-left-color: var(--roots-warning); }
.r-toaster__icon { margin-top: 0.15rem; color: var(--roots-info); }
.r-toaster__icon--success { color: var(--roots-success); } .r-toaster__icon--error { color: var(--roots-error); }
.r-toaster__icon--warning { color: var(--roots-warning-text, var(--roots-warning)); }
.r-toaster__content { flex: 1 1 auto; min-width: 0; gap: 0.125rem; }
.r-toaster__title { font-weight: 600; }
.r-toaster__description { color: var(--roots-muted); font-size: 0.875rem; }

/* tabs and accordion */
.r-tabs { gap: 0.75rem; }
.r-tabs--vertical { flex-direction: row; }
.r-tabs__list { flex-direction: row; gap: 0.25rem; border-bottom: 1px solid var(--roots-border); }
.r-tabs__list--vertical { flex-direction: column; border-bottom: 0; border-right: 1px solid var(--roots-border); }
.r-tabs__tab { padding: 0.5rem 0.9rem; border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px;
  background: transparent; color: var(--roots-muted); font-weight: 600; }
.r-tabs__tab--vertical { border-bottom: 0; border-right: 2px solid transparent; margin: 0 -1px 0 0; text-align: left; }
.r-tabs__tab:hover:not(:disabled) { color: var(--roots-text); }
.r-tabs__tab--selected { color: var(--roots-primary); border-color: var(--roots-primary); }
.r-tabs__tab:focus-visible { outline: 2px solid var(--roots-focus); outline-offset: -2px; border-radius: var(--r-radius-sm); }
.r-tabs__tab:disabled { opacity: 0.45; cursor: not-allowed; }
.r-tabs__panel:focus-visible { outline: 2px solid var(--roots-focus); outline-offset: 2px; border-radius: var(--r-radius-sm); }
.r-accordion { border-top: 1px solid var(--roots-border); }
.r-accordion__item { border-bottom: 1px solid var(--roots-border); }
.r-accordion__heading { margin: 0; font-size: 1rem; }
.r-accordion__trigger { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; width: 100%; padding: 0.75rem 0.25rem;
  border: 0; border-radius: 0; background: transparent; color: inherit; font-weight: 600; text-align: left; }
.r-accordion__trigger:hover:not(:disabled) { background: var(--r-hover); }
.r-accordion__trigger:focus-visible { outline: 2px solid var(--roots-focus); outline-offset: -2px; }
.r-accordion__icon { color: var(--roots-muted); }
.r-accordion__panel { padding: 0 0.25rem 0.85rem 1.85rem; }

/* list, table, tree */
ul.r-list { list-style: none; margin: 0; padding: 0; gap: 0.25rem; }
.r-list--selectable { padding: 0.25rem; border-radius: var(--r-radius); border: 1px solid var(--roots-border); gap: 0.125rem; }
.r-list__item { flex-direction: row; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; border-radius: var(--r-radius-sm); }
.r-list--selectable .r-list__item { cursor: pointer; }
.r-list--selectable .r-list__item:hover { background: var(--r-hover); }
.r-list__item:focus { outline: none; } .r-list__item:focus-visible { box-shadow: inset 0 0 0 2px var(--roots-focus); }
.r-list__item--selected { color: var(--roots-primary); font-weight: 600; background: color-mix(in srgb, var(--roots-primary) 10%, transparent); }
.r-list__item--disabled { opacity: 0.5; cursor: not-allowed; }
.r-list__check { display: inline-flex; width: 1rem; flex-shrink: 0; }
.r-table { gap: 0.75rem; overflow-x: auto; }
.r-table__table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.r-table__header, .r-table__cell, .r-table__select-cell, .r-table__empty { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--roots-border); text-align: left; }
.r-table__header { font-weight: 600; color: var(--roots-muted); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.03em; }
.r-table__header--right, .r-table__cell--right { text-align: right; }
.r-table__header--center, .r-table__cell--center { text-align: center; }
.r-table__select-cell { width: 2.75rem; }
.r-table__sort { display: inline-flex; flex-direction: row; align-items: center; gap: 0.35rem; padding: 0; border: 0; background: transparent;
  color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; min-height: 24px; }
.r-table__sort:focus-visible { outline: 2px solid var(--roots-focus); outline-offset: 2px; border-radius: 2px; }
.r-table__sort--ascending, .r-table__sort--descending { color: var(--roots-primary); }
.r-table__row--selected { background: color-mix(in srgb, var(--roots-primary) 8%, transparent); }
.r-table__empty { color: var(--roots-muted); text-align: center; }
.r-table__pagination { flex-direction: row; align-items: center; justify-content: flex-end; gap: 0.75rem; }
.r-table__page { color: var(--roots-muted); font-size: 0.875rem; }
.r-pagination { position: relative; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.25rem; width: fit-content; }
.r-pagination__page, .r-pagination__prev, .r-pagination__next { display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.25rem; min-height: 2.25rem; padding: 0 0.5rem; border: 1px solid transparent; border-radius: var(--r-radius-sm);
  background: transparent; color: var(--roots-text); font-variant-numeric: tabular-nums; }
.r-pagination__page:hover:not([aria-disabled=true]), .r-pagination__prev:hover:not([aria-disabled=true]),
.r-pagination__next:hover:not([aria-disabled=true]) { background: var(--r-hover); }
.r-pagination__page:focus-visible, .r-pagination__prev:focus-visible, .r-pagination__next:focus-visible { outline: 2px solid var(--roots-focus); outline-offset: 2px; }
.r-pagination__page--current { background: var(--roots-primary); color: var(--roots-on-primary, var(--r-on-accent)); font-weight: 600; }
.r-pagination__page--current:hover:not([aria-disabled=true]) { background: var(--roots-primary); }
.r-pagination__page[aria-disabled=true], .r-pagination__prev[aria-disabled=true], .r-pagination__next[aria-disabled=true] { opacity: 0.45; cursor: not-allowed; }
.r-pagination__gap { min-width: 1.5rem; text-align: center; color: var(--roots-muted); }
.r-pagination__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.r-tree { gap: 0.0625rem; }
.r-tree__item { flex-direction: row; align-items: center; gap: 0.25rem; padding: 0.3rem 0.5rem; border-radius: var(--r-radius-sm); cursor: pointer; }
.r-tree__item:hover { background: var(--r-hover); }
.r-tree__item:focus { outline: none; } .r-tree__item:focus-visible { box-shadow: inset 0 0 0 2px var(--roots-focus); }
.r-tree__item--selected { color: var(--roots-primary); font-weight: 600; background: color-mix(in srgb, var(--roots-primary) 10%, transparent); }
.r-tree__item--disabled { opacity: 0.5; cursor: not-allowed; }
.r-tree__toggle { display: inline-flex; width: 1rem; flex-shrink: 0; color: var(--roots-muted); }

/* scroll area, splitter */
.r-scroll-area { overflow: auto; border-radius: var(--r-radius); scrollbar-width: thin; scrollbar-color: var(--roots-border) transparent; }
.r-scroll-area:focus-visible { outline: 2px solid var(--roots-focus); outline-offset: 2px; }
.r-scroll-area--fill { min-height: 0; }
.r-splitter { align-self: stretch; min-height: 6rem; border: 1px solid var(--roots-border); border-radius: var(--r-radius); overflow: hidden; }
.r-splitter__separator { flex: 0 0 auto; background: var(--roots-border); transition: background-color var(--r-ease); }
.r-splitter__separator--horizontal { width: 4px; cursor: col-resize; }
.r-splitter__separator--vertical { height: 4px; cursor: row-resize; }
.r-splitter__separator:hover, .r-splitter__separator:focus-visible { background: var(--roots-primary); outline: none; }

@media (prefers-reduced-motion: reduce) {
  .r-spinner, .r-button__spinner { animation-duration: 2.4s; }
  .r-progress--indeterminate .r-progress__fill { animation: none; left: 0; width: 100%; opacity: 0.6; }
  .r-skeleton__line, .r-skeleton--rect, .r-skeleton--circle { animation: none; }
  .r-button, .r-icon-button, .r-input, input.r-input:not([type=checkbox]):not([type=radio]), .r-switch__track, .r-switch__thumb, .r-progress__fill, .r-splitter__separator { transition: none; }
  .r-select__list, .r-menu__list, .r-popover__panel, .r-dialog__backdrop, .r-drawer__backdrop, .r-dialog__panel,
  .r-drawer__panel, .r-toaster__toast { animation: none; }
}

.flex-row { display: flex; flex-direction: row }
.flex-col { display: flex; flex-direction: column }
.flex-1 { flex: 1 1 0%; min-width: 0 }
.grow { flex-grow: 1 }
.shrink-0 { flex-shrink: 0 }
.wrap { flex-wrap: wrap }
.items-center { align-items: center }
.items-end { align-items: flex-end }
.self-start { align-self: flex-start }
.self-auto { align-self: auto }
.w-full { width: 100% }
.h-full { height: 100% }
.w-1\/2 { width: 50% }
.absolute { position: absolute }
.relative { position: relative }
.overflow-hidden { overflow: hidden }
.border { border: 1px solid var(--roots-border) }
.border-round { border: 1px solid var(--roots-border); border-radius: 0.5rem }
.border-double { border: 3px double var(--roots-border) }
.bold { font-weight: 700 }
.italic { font-style: italic }
.underline { text-decoration-line: underline }
.strike { text-decoration-line: line-through }
.dim { opacity: 0.6 }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.text-sm { font-size: 0.875rem; line-height: 1.25rem }
.text-lg { font-size: 1.125rem; line-height: 1.75rem }
.rounded { border-radius: 0.375rem }
.shadow { box-shadow: 0 1px 3px rgb(0 0 0 / 0.12), 0 1px 2px rgb(0 0 0 / 0.08) }
.hidden { display: none }
.gap-1 { gap: 0.25rem }
.gap-2 { gap: 0.5rem }
.gap-3 { gap: 0.75rem }
.p-4 { padding: 1rem }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem }
.bg-accent { background-color: var(--roots-accent) }
.bg-primary { background-color: var(--roots-primary) }
.bg-surface { background-color: var(--roots-surface) }
.bg-text { background-color: var(--roots-text) }
.text-accent { color: var(--roots-accent) }
.text-muted { color: var(--roots-muted) }
.text-warning { color: var(--roots-warning-text) }
.border-error { border-color: var(--roots-error) }
.w-24 { width: 6rem }
.min-w-0 { min-width: 0 }
@media (min-width: 768px) { :where(:root[data-theme="dark"]) .dark\:md\:hover\:bg-surface:hover { background-color: var(--roots-surface) } }
@media (prefers-color-scheme: dark) and (min-width: 768px) { :where(:root:not([data-theme="light"])) .dark\:md\:hover\:bg-surface:hover { background-color: var(--roots-surface) } }
/* ------------------------------------------------------------------ tokens */
:root {
  --doc-display: "Archivo", "Helvetica Neue", "Arial Nova", Arial, sans-serif;
  --doc-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --doc-code: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --doc-header: 56px;
  --doc-row: 34px;
  --doc-control: #8a8672;
  --doc-raise: rgba(20, 28, 26, 0.045);
  --t-k: #8a5200; --t-s: #2c6a47; --t-c: #5f6a63; --t-n: #7a4f1d; --t-f: #5a4a12; --t-t: #5b4a8a; --t-p: #5f6862;
  --doc-note: #1f5f9f; --doc-tip: #2c6a47; --doc-warn: #8a5a00; --doc-danger: #a8402a;
  /* the kit's warning text on this theme's paper (its default is measured on white) */
  --roots-warning-text: #9a4607;
  color-scheme: light;
}
:root:where([data-theme="dark"]) {
  --doc-control: #5d746d; --roots-warning-text: #d97706; --doc-raise: rgba(235, 230, 216, 0.06);
  --t-k: #f0a640; --t-s: #93c3a0; --t-c: #8f9a92; --t-n: #d9b38c; --t-f: #e6d3a3; --t-t: #b7a8d6; --t-p: #a9b1a8;
  --doc-note: #7fb2e5; --doc-tip: #93c3a0; --doc-warn: #e0b060; --doc-danger: #e07a5f;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --doc-control: #5d746d; --roots-warning-text: #d97706; --doc-raise: rgba(235, 230, 216, 0.06);
    --t-k: #f0a640; --t-s: #93c3a0; --t-c: #8f9a92; --t-n: #d9b38c; --t-f: #e6d3a3; --t-t: #b7a8d6; --t-p: #a9b1a8;
    --doc-note: #7fb2e5; --doc-tip: #93c3a0; --doc-warn: #e0b060; --doc-danger: #e07a5f;
    color-scheme: dark;
  }
}

/* ------------------------------------------------------------------ page */
html { scroll-padding-top: calc(var(--doc-header) + var(--doc-row) + 12px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--roots-bg); color: var(--roots-text); font-family: var(--doc-body); font-size: 17px; line-height: 1.65; }
[hidden] { display: none !important; }
.doc-styles { display: none; }
.doc-app { min-height: 100vh; display: flex; flex-direction: column; }
.doc-fill { flex: 1 1 auto; }
.doc-app a { color: var(--roots-primary); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.doc-app a:focus-visible, .doc-app button:focus-visible, .doc-app summary:focus-visible, .md-table:focus-visible {
  outline: 2px solid var(--roots-focus); outline-offset: 2px; border-radius: 3px;
}
.doc-skip { position: absolute; left: 8px; top: -64px; z-index: 60; padding: 8px 12px; border-radius: 6px;
  background: var(--roots-primary); color: var(--roots-on-primary) !important; font-weight: 600; text-decoration: none; }
.doc-skip:focus { top: 8px; }
.doc-noscript { margin: 0; padding: 6px max(16px, calc((100vw - 1480px) / 2)); font-size: 13.5px; line-height: 1.4; color: var(--roots-muted);
  background: var(--roots-surface); border-bottom: 1px solid var(--roots-border); }
#nav { scroll-margin-top: var(--doc-header); }

/* ------------------------------------------------------------------ header */
.doc-header { position: sticky; top: 0; z-index: 30; height: var(--doc-header); box-sizing: border-box; display: flex; align-items: center;
  gap: 4px; padding: 0 max(16px, calc((100vw - 1480px) / 2)); background: var(--roots-bg); border-bottom: 1px solid var(--roots-border); }
.doc-brand { display: inline-flex; align-items: center; gap: 8px; margin-right: 20px; color: var(--roots-text) !important; text-decoration: none;
  font-family: var(--doc-display); font-weight: 800; font-stretch: 118%; font-size: 20px; letter-spacing: -0.01em; }
.doc-mark { flex: none; }
.doc-mark-root { stroke: var(--roots-accent); }
.doc-mark-node { fill: var(--roots-primary); }
.doc-sections { display: flex; align-items: stretch; gap: 2px; height: 100%; overflow-x: auto; scrollbar-width: none; }
.doc-section-link { display: inline-flex; align-items: center; padding: 0 12px; white-space: nowrap; font-size: 15px; font-weight: 500;
  color: var(--roots-muted) !important; text-decoration: none; border-bottom: 2px solid transparent; border-top: 2px solid transparent; }
.doc-section-link:hover { color: var(--roots-text) !important; }
.doc-section-link.is-current { color: var(--roots-text) !important; border-bottom-color: var(--roots-primary); }
.doc-search-open, .doc-menu-open { display: none; align-items: center; gap: 8px; height: 36px; padding: 0 10px; margin-left: 4px; font: inherit; font-size: 14px;
  color: var(--roots-muted); background: var(--roots-surface); border: 1px solid var(--doc-control); border-radius: 6px; cursor: pointer; }
.is-live .doc-search-open { display: inline-flex; }
.doc-search-open kbd { font-family: var(--doc-code); font-size: 12px; padding: 0 5px; border: 1px solid var(--doc-control); border-radius: 4px; }
.doc-search-open:hover, .doc-menu-open:hover { color: var(--roots-text); }
.doc-repo { margin-left: 8px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.doc-menu-link { display: none; }

/* ------------------------------------------------------------------ version row */
/* The row wraps and never cuts: on an old version its link to the newest one is the
   reader's way out. (--doc-row is the row's height for the scroll margins: 34px, or what
   VersionRow.vue measures when the row is stuck.) */
.doc-version-row { min-height: 34px; box-sizing: border-box; display: flex; align-items: center; gap: 2px 12px; flex-wrap: nowrap;
  padding: 4px max(16px, calc((100vw - 1480px) / 2)); font-size: 13.5px; line-height: 1.35; color: var(--roots-muted);
  background: var(--roots-surface); border-bottom: 1px solid var(--roots-border); }
.doc-version-text { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.doc-version-row strong { color: var(--roots-text); font-weight: 600; }
.doc-version-missing { flex: 1 1 0; min-width: 0; color: var(--roots-text); }
.doc-version-missing code { font-family: var(--doc-code); font-size: 0.92em; }
/* on an old version the row stays in view: a reader who arrives at a heading must see it */
.doc-version-row.is-old { position: sticky; top: var(--doc-header); z-index: 29; color: var(--roots-text); border-bottom-color: var(--doc-warn); box-shadow: inset 3px 0 0 var(--doc-warn); }
html[data-channel="current"] .doc-newest { display: none; }
.doc-versions-link { flex: none; white-space: nowrap; }
.doc-version-row .doc-fill { display: none; }
.doc-version-row .r-menu { flex: none; }
.doc-version-row .r-button { flex: none; min-height: 0; height: 26px; font-size: 13px; white-space: nowrap; }

/* ------------------------------------------------------------------ columns */
.doc-body { flex: 1 1 auto; display: grid; grid-template-columns: 280px minmax(0, 1fr); grid-template-areas: "nav page";
  width: 100%; max-width: 1480px; margin: 0 auto; box-sizing: border-box; }
.doc-sidebar { grid-area: nav; position: sticky; top: var(--doc-header); align-self: start; max-height: calc(100vh - var(--doc-header));
  overflow-y: auto; box-sizing: border-box; padding: 24px 16px 48px 24px; border-right: 1px solid var(--roots-border); scrollbar-width: thin; }
.doc-page { grid-area: page; display: grid; grid-template-columns: minmax(0, 1fr) 232px; min-width: 0; }
.doc-page.doc-wide { grid-template-columns: minmax(0, 1fr); }
.doc-main { min-width: 0; padding: 28px 40px 72px; box-sizing: border-box; }
.doc-main:focus { outline: none; }
.doc-toc { position: sticky; top: var(--doc-header); align-self: start; max-height: calc(100vh - var(--doc-header)); overflow-y: auto;
  box-sizing: border-box; padding: 32px 20px 48px 0; scrollbar-width: thin; }
.doc-toc-inline { display: none; }

/* ------------------------------------------------------------------ sidebar */
.doc-nav-group + .doc-nav-group { margin-top: 22px; }
.doc-nav-title { margin: 0 0 6px; font-family: var(--doc-code); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--roots-muted); }
.doc-nav ul { list-style: none; margin: 0; padding: 0; }
.doc-nav li a { display: block; padding: 5px 10px; margin: 1px 0; border-radius: 6px; font-size: 15px; line-height: 1.35;
  color: var(--roots-text) !important; text-decoration: none; border-left: 2px solid transparent; }
.doc-nav li a:hover { background: var(--doc-raise); }
.doc-nav li a[aria-current="page"] { color: var(--roots-primary) !important; font-weight: 600; background: var(--doc-raise);
  border-left-color: var(--roots-primary); border-radius: 0 6px 6px 0; }
.doc-drawer-sections { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 18px; }
.doc-drawer-sections .doc-section-link { height: 34px; border: 1px solid var(--roots-border); border-radius: 6px; }
.doc-drawer-sections .doc-section-link.is-current { border-color: var(--roots-primary); }
.doc-sidebar-sections { display: none; }

/* ------------------------------------------------------------------ on this page: a root with a node at each heading */
.doc-toc-title { margin: 0 0 10px 18px; font-family: var(--doc-code); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--roots-muted); }
.doc-toc-nav ul { list-style: none; margin: 0; padding: 0; border-left: 1.5px solid var(--roots-accent); }
.doc-toc-nav li { position: relative; margin: 0; }
.doc-toc-nav li::before { content: ""; position: absolute; left: -4.25px; top: 0.72em; width: 7px; height: 7px; border-radius: 50%;
  background: var(--roots-bg); border: 1.5px solid var(--roots-accent); box-sizing: border-box; }
.doc-toc-nav li.doc-toc-3::before { width: 5px; height: 5px; left: -3.25px; top: 0.8em; }
.doc-toc-nav li.is-active::before { background: var(--roots-primary); border-color: var(--roots-primary); }
.doc-toc-nav a { display: block; padding: 3px 0 3px 16px; font-size: 13.5px; line-height: 1.4; color: var(--roots-muted) !important; text-decoration: none; }
.doc-toc-nav li.doc-toc-3 a { padding-left: 28px; font-size: 13px; }
.doc-toc-nav a:hover, .doc-toc-nav li.is-active a { color: var(--roots-text) !important; }

/* ------------------------------------------------------------------ around the article */
.doc-crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; font-size: 13.5px; color: var(--roots-muted); }
.doc-crumbs a { color: var(--roots-muted) !important; }
.doc-since { display: inline-block; margin: 0 0 8px; padding: 1px 8px; border: 1px solid var(--roots-accent); border-radius: 999px; font-size: 13px; color: var(--roots-accent); }
.doc-foot { max-width: 46rem; margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--roots-border); }
.doc-wide .doc-foot { max-width: none; }
.doc-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin: 0 0 20px; font-size: 14px; color: var(--roots-muted); }
.doc-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.doc-pager a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--roots-border); border-radius: 8px; text-decoration: none; }
.doc-pager a:hover { border-color: var(--roots-primary); }
.doc-pager small { font-family: var(--doc-code); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--roots-muted); }
.doc-pager span { font-weight: 600; }
.doc-prev { text-align: left; }
.doc-next { text-align: right; grid-column: 2; }
.doc-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
.doc-notfound { max-width: 46rem; }
.doc-notfound h1 { font-family: var(--doc-display); font-stretch: 120%; font-weight: 800; font-size: 2.3rem; line-height: 1.1; margin: 20px 0 12px; }
.doc-band { display: block; width: min(100%, 420px); height: auto; opacity: 0.9; }

/* ------------------------------------------------------------------ Markdown content */
.md { overflow-wrap: break-word; }
/* A long page is laid out section by section, as the reader gets there: the browser skips the
   sections that are far from the window (their size is remembered once they were shown).
   Chromium only, for now: this is what the browser pass can verify (a heading that a link
   names must land in place although the sections above it have no size yet). Firefox and
   Safari are left out by the two properties only they know. */
@supports (not (-moz-appearance: none)) and (not (font: -apple-system-body)) {
  .md > .md-section { content-visibility: auto; contain-intrinsic-size: auto 900px; }
}
.md > *, .md > .md-section > * { max-width: 46rem; }
.doc-wide .md > *, .doc-wide .md > .md-section > * { max-width: none; }
.md > .md-section, .md > .md-code, .md > .md-table, .md > .md-example, .md > .md-tabs,
.md > .md-section > .md-code, .md > .md-section > .md-table, .md > .md-section > .md-example, .md > .md-section > .md-tabs { max-width: none; }
.md h1, .md h2, .md h3, .md h4 { font-family: var(--doc-display); font-stretch: 112%; letter-spacing: -0.01em; line-height: 1.15; text-wrap: balance;
  scroll-margin-top: calc(var(--doc-header) + var(--doc-row) + 12px); }
/* a heading (or a row) that a link led to holds the focus so that Tab goes on from there; it
   is not a control, and it is where the reader is looking: no ring around it */
.md :is(h1, h2, h3, h4, h5, h6, tr)[tabindex="-1"]:focus { outline: none; }
.md h1 { font-size: 2.45rem; font-weight: 800; font-stretch: 122%; margin: 0 0 20px; }
.md h2 { font-size: 1.6rem; font-weight: 700; margin: 56px 0 14px; padding-top: 22px; border-top: 1px solid var(--roots-border); }
.md h3 { font-size: 1.22rem; font-weight: 700; margin: 34px 0 10px; }
.md h4, .md h5, .md h6 { font-size: 1.02rem; font-weight: 700; margin: 26px 0 8px; }
.md h1 code, .md h2 code, .md h3 code, .md h4 code { font-size: 0.9em; }
.md p { margin: 0 0 16px; text-wrap: pretty; }
.md ul, .md ol { margin: 0 0 16px; padding-left: 1.5em; }
.md li { margin: 4px 0; }
.md li::marker { color: var(--roots-primary); }
.md li > p { margin-bottom: 8px; }
.md li > ul, .md li > ol { margin-bottom: 4px; }
.md .md-tasks { list-style: none; padding-left: 0.2em; }
.md hr { border: 0; border-top: 1px solid var(--roots-border); margin: 36px 0; }
.md strong { font-weight: 600; }
.md img { max-width: 100%; height: auto; }
.md blockquote { margin: 0 0 16px; padding: 2px 0 2px 16px; border-left: 3px solid var(--roots-border); color: var(--roots-muted); }
.md code { font-family: var(--doc-code); font-size: 0.86em; font-variant-ligatures: none; color: var(--roots-accent); background: var(--doc-raise); padding: 0.1em 0.32em; border-radius: 4px; }
.md a code { color: inherit; }
.md kbd { font-family: var(--doc-code); font-size: 0.82em; padding: 0.1em 0.4em; border: 1px solid var(--doc-control); border-bottom-width: 2px; border-radius: 4px; }
.md-file { text-decoration-style: dotted; }
.md-ext::after { content: "↗"; display: inline-block; margin-left: 2px; font-size: 0.8em; text-decoration: none; }
.md-table tr[id] { scroll-margin-top: calc(var(--doc-header) + var(--doc-row) + 12px); }
.md .md-task { list-style: none; }
.md-task input { margin: 0 6px 0 0; vertical-align: -1px; }
.md-anchor { margin-left: 6px; font-weight: 400; text-decoration: none; opacity: 0; color: var(--roots-muted) !important; }
h2:hover .md-anchor, h3:hover .md-anchor, h4:hover .md-anchor, .md-anchor:focus { opacity: 1; }
.md-alias { display: block; position: relative; top: calc(-1 * var(--doc-header) - var(--doc-row) - 12px); height: 0; }
.md-since, .md-deprecated { display: inline-block; margin: 0 8px; padding: 0 7px; vertical-align: middle; border: 1px solid var(--roots-accent); border-radius: 999px;
  font-family: var(--doc-body); font-size: 12.5px; font-weight: 500; font-stretch: 100%; letter-spacing: 0; color: var(--roots-accent); }
.md-deprecated { border-color: var(--doc-warn); color: var(--doc-warn); }

/* code blocks: never wrapped (the diagrams in these pages depend on columns) */
.md-code { position: relative; margin: 0 0 18px; background: var(--roots-surface); border: 1px solid var(--roots-border); border-radius: 6px; }
.md-code pre { margin: 0; padding: 14px 16px; overflow-x: auto; scrollbar-width: thin; tab-size: 2; }
.md-code pre code { display: block; width: max-content; min-width: 100%; padding: 0; background: none; border-radius: 0; color: var(--roots-text);
  font-size: 14px; line-height: 1.55; white-space: pre; }
.md-code[data-lang]::before { content: attr(data-lang); position: absolute; top: 0; right: 0; padding: 2px 8px; font-family: var(--doc-code); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--roots-muted); pointer-events: none; }
.md-code-title { padding: 6px 16px; border-bottom: 1px solid var(--roots-border); font-family: var(--doc-code); font-size: 12px; letter-spacing: 0.04em; color: var(--roots-muted); }
.md-copy { display: none; position: absolute; top: 6px; right: 6px; z-index: 1; padding: 2px 8px; font: inherit; font-size: 12px; color: var(--roots-muted);
  background: var(--roots-bg); border: 1px solid var(--doc-control); border-radius: 5px; cursor: pointer; opacity: 0; }
.is-live .md-copy { display: block; }
.md-code:hover .md-copy, .md-code:focus-within .md-copy, .md-copy:focus-visible { opacity: 1; }
/* nothing hovers on a touch screen: the button is simply there */
@media (hover: none) { .md-copy { opacity: 1; } }
.md-copy:hover { color: var(--roots-text); }
.t-k { color: var(--t-k); } .t-s { color: var(--t-s); } .t-c { color: var(--t-c); font-style: italic; } .t-n { color: var(--t-n); }
.t-f { color: var(--t-f); } .t-t { color: var(--t-t); } .t-p { color: var(--t-p); user-select: none; }

/* tables scroll inside their own box */
.md-table { margin: 0 0 18px; overflow-x: auto; scrollbar-width: thin; }
.md-table table { border-collapse: collapse; min-width: 100%; font-size: 15px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.md-table th, .md-table td { padding: 7px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--roots-border); }
.md-table th { font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--roots-muted); white-space: nowrap; border-bottom-color: var(--doc-control); }
.md-table td code { white-space: nowrap; }
.md-table td:first-child { min-width: 7em; }
.md-al-right { text-align: right !important; } .md-al-center { text-align: center !important; }
.md-compact table { font-size: 13.5px; } .md-wide { max-width: none !important; }

/* notes */
.md-note { margin: 0 0 18px; padding: 12px 16px 2px; border-left: 3px solid var(--doc-note); background: var(--doc-raise); border-radius: 0 6px 6px 0; }
.md-note-label { margin: 0 0 4px !important; font-family: var(--doc-code); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--doc-note); }
.md-note-note { border-left-color: var(--doc-note); }
.md-note-tip { border-left-color: var(--doc-tip); } .md-note-tip .md-note-label { color: var(--doc-tip); }
.md-note-important { border-left-color: var(--roots-primary); } .md-note-important .md-note-label { color: var(--roots-primary); }
.md-note-warning { border-left-color: var(--doc-warn); } .md-note-warning .md-note-label { color: var(--doc-warn); }
.md-note-caution { border-left-color: var(--doc-danger); } .md-note-caution .md-note-label { color: var(--doc-danger); }
.md-details { margin: 0 0 18px; padding: 8px 14px; border: 1px solid var(--roots-border); border-radius: 6px; }
.md-details summary { cursor: pointer; font-weight: 600; }
.md-details[open] summary { margin-bottom: 10px; }

/* tabs: radio inputs, so they work without JavaScript */
.md-tabs { margin: 0 0 18px; }
.md-tab-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.md-tab-label { display: inline-block; padding: 6px 14px; margin-right: 2px; font-size: 14px; font-weight: 500; color: var(--roots-muted); cursor: pointer;
  border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; }
.md-tab-input:checked + .md-tab-label { color: var(--roots-text); background: var(--roots-surface); border-color: var(--roots-border); box-shadow: inset 0 2px 0 var(--roots-primary); }
.md-tab-input:focus-visible + .md-tab-label { outline: 2px solid var(--roots-focus); outline-offset: 2px; }
.md-tab-panel { display: none; }
.md-tab-panel > :last-child { margin-bottom: 0; }
.md-tab-panel > .md-code, .md-tab-panel > .md-example { border-top-left-radius: 0; }
.md-tabs > .md-tab-input:nth-of-type(1):checked ~ .md-tab-panel:nth-of-type(1),
.md-tabs > .md-tab-input:nth-of-type(2):checked ~ .md-tab-panel:nth-of-type(2),
.md-tabs > .md-tab-input:nth-of-type(3):checked ~ .md-tab-panel:nth-of-type(3),
.md-tabs > .md-tab-input:nth-of-type(4):checked ~ .md-tab-panel:nth-of-type(4),
.md-tabs > .md-tab-input:nth-of-type(5):checked ~ .md-tab-panel:nth-of-type(5),
.md-tabs > .md-tab-input:nth-of-type(6):checked ~ .md-tab-panel:nth-of-type(6) { display: block; }

/* live examples: the demo on the page's ground, its source directly below, one border */
.md-example { margin: 0 0 20px; border: 1px solid var(--roots-border); border-radius: 6px; overflow: hidden; }
.md-example-cap { display: flex; align-items: center; gap: 12px; padding: 7px 14px; font-size: 13.5px; background: var(--roots-surface); border-bottom: 1px solid var(--roots-border); }
.md-example-title { font-weight: 600; }
.md-example-state { font-family: var(--doc-code); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--roots-accent); }
.md-example-cap a { margin-left: auto; font-family: var(--doc-code); font-size: 12px; color: var(--roots-muted) !important; }
.md-example-stage { padding: 20px 18px; background: var(--roots-bg); min-height: 64px; box-sizing: border-box; }
.md-example-stage input::placeholder { color: var(--roots-muted); opacity: 1; }
.md-example-sm { min-height: 160px; } .md-example-md { min-height: 240px; } .md-example-lg { min-height: 320px; } .md-example-xl { min-height: 480px; }
.md-example-error { margin: 0; color: var(--doc-danger); font-weight: 600; }
.md-example-wait { margin: 0; color: var(--roots-muted); }
.md-example-source { border-top: 1px solid var(--roots-border); }
.md-example-source > summary { padding: 7px 14px; cursor: pointer; font-size: 13.5px; font-weight: 500; background: var(--roots-surface); }
.md-example-source .md-code { margin: 0; border: 0; border-radius: 0; }
.md-example-source .md-code + .md-code { border-top: 1px solid var(--roots-border); }
.md-example-app { min-height: 40px; }

/* ------------------------------------------------------------------ search */
.doc-search { display: flex; flex-direction: column; gap: 10px; min-height: 320px; }
.doc-search-note { margin: 4px 2px; font-size: 14.5px; color: var(--roots-muted); }
.doc-search-results { list-style: none; margin: 0; padding: 0; max-height: min(56vh, 520px); overflow-y: auto; }
.doc-search-results li { margin: 0; border-radius: 6px; border-left: 2px solid transparent; }
.doc-search-results li.is-active { background: var(--doc-raise); border-left-color: var(--roots-primary); }
.doc-search-results a { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding: 8px 12px; text-decoration: none; color: var(--roots-text) !important; }
.doc-hit-title { font-weight: 600; }
.doc-hit-page { font-size: 13px; color: var(--roots-muted); white-space: nowrap; }
.doc-hit-excerpt { grid-column: 1 / -1; font-size: 13.5px; line-height: 1.45; color: var(--roots-muted); }

/* ------------------------------------------------------------------ narrower screens */
@media (max-width: 1180px) {
  .doc-page { grid-template-columns: minmax(0, 1fr); }
  .doc-toc { display: none; }
  .doc-toc-inline { display: block; margin: 0 0 20px; padding: 8px 14px; border: 1px solid var(--roots-border); border-radius: 6px; font-size: 15px; }
  .doc-toc-inline summary { cursor: pointer; font-weight: 600; }
  .doc-toc-inline ul { list-style: none; margin: 8px 0 4px; padding: 0; }
  .doc-toc-inline li.doc-toc-3 { padding-left: 16px; }
  .doc-toc-inline a { display: block; padding: 4px 0; }
}
@media (max-width: 860px) {
  body { font-size: 16px; }
  .doc-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "page" "nav"; }
  .doc-sections { display: none; }
  .doc-sidebar { position: static; max-height: none; border-right: 0; border-top: 1px solid var(--roots-border); padding: 24px 16px 40px; }
  .is-live .doc-sidebar { display: none; }
  .is-live .doc-menu-open { display: inline-flex; }
  .doc-main { padding: 20px 16px 56px; }
  .doc-search-text, .doc-search-open kbd, .doc-repo, .doc-menu-open span { display: none; }
    .doc-search-open, .doc-menu-open { min-width: 44px; height: 44px; justify-content: center; }
  .doc-brand { margin-right: 4px; min-height: 44px; }
  /* without JavaScript: a way to the navigation, and the sections above it */
  .doc-menu-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; margin-left: 4px; font-size: 15px; font-weight: 500; }
  .is-live .doc-menu-link { display: none; }
  .doc-sidebar-sections { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 18px; }
  .doc-sidebar-sections .doc-section-link { min-height: 44px; border: 1px solid var(--roots-border); border-radius: 6px; }
  .doc-sidebar-sections .doc-section-link.is-current { border-color: var(--roots-primary); }
  /* things a finger taps are 44px high */
    .doc-header .r-button, .doc-version-row .r-button { min-height: 44px; height: auto; }
  .doc-versions-link, .doc-newest { display: inline-flex; align-items: center; min-height: 44px; }
  .doc-version-row { padding-top: 2px; padding-bottom: 2px; }
  /* The row of an old version is stuck to the top: it stays low. Its text is the version and
     the way to the newest one; the targets are 36px there, not 44. */
  .doc-version-row.is-old .doc-version-long { display: none; }
  .doc-version-row.is-old .r-button { min-height: 36px; }
  .doc-newest-link { padding: 6px 0; }
  .doc-toc-inline summary { min-height: 44px; display: flex; align-items: center; }
  .doc-toc-inline a { min-height: 44px; display: flex; align-items: center; padding: 0; }
  .md-tab-label { padding: 12px 14px; }
  .md-copy { min-width: 48px; min-height: 44px; }
  .doc-meta a { display: inline-flex; align-items: center; min-height: 44px; }
  /* tables: prose columns keep a readable measure instead of being squeezed by code columns */
      .md-table td code { white-space: normal; overflow-wrap: break-word; }
  /* a table with long text in its cells is as wide as it needs to be read, and scrolls */
  .md-prose table { min-width: 36rem; }
  .md-prose td:last-child { min-width: 16em; }
  .md h1 { font-size: 1.9rem; } .md h2 { font-size: 1.4rem; margin-top: 40px; }
  .md-code pre code { font-size: 13px; }
  .doc-nav li a { padding: 10px 10px; }
  .doc-pager { grid-template-columns: 1fr; } .doc-next { grid-column: 1; }
    .doc-version-row { font-size: 13px; }
}
@media print {
    .doc-header, .doc-version-row, .doc-noscript, .doc-sidebar, .doc-toc, .doc-toc-inline, .doc-foot, .md-copy, .doc-skip { display: none !important; }
  .doc-body, .doc-page { display: block; }
  .doc-main { padding: 0; }
  .md > *, .md > .md-section > * { max-width: none; }
  .md > .md-section { content-visibility: visible; }
  .md-code pre { overflow: visible; } .md-code pre code { white-space: pre-wrap; width: auto; }
  .md a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}
.counter { flex-wrap: wrap; }
.counter-value { min-width: 2ch; text-align: center; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.counter-note { color: var(--roots-muted); }
.counter-lisp { flex-wrap: wrap; }
.counter-lisp-value { min-width: 2ch; text-align: center; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.counter-lisp-note { color: var(--roots-muted); }
.signup-form { display: grid; gap: 10px; max-width: 22rem; }
.signup-form label { display: grid; gap: 3px; font-size: 0.9rem; font-weight: 600; }
.signup-form input:not([type="checkbox"]), .signup-form select { font: inherit; padding: 6px 8px; border: 1px solid var(--roots-control-border);
  border-radius: 6px; background: var(--roots-bg); color: var(--roots-text); }
.signup-form .signup-form-check { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.signup-form button { justify-self: start; font: inherit; font-weight: 600; padding: 6px 14px; border: 0; border-radius: 6px;
  background: var(--roots-primary); color: var(--roots-on-primary); cursor: pointer; }
.signup-form button:disabled { opacity: 0.5; cursor: not-allowed; }
.signup-form-hint { margin: 0; color: var(--roots-muted); }
.signup-form-done { margin: 0; color: var(--roots-accent); font-weight: 600; }
.todo-list { max-width: 26rem; }
.todo-list-row { padding: 2px 0; border-bottom: 1px solid var(--roots-border); }
.todo-list-empty, .todo-list-count { color: var(--roots-muted); }
.kit-buttons { max-width: 40rem; }
.theme-switch { max-width: 30rem; }
.theme-switch-swatches { flex-wrap: wrap; }
.theme-switch-on { outline: 2px solid var(--roots-primary); outline-offset: 1px; }
.theme-switch-swatch { width: 44px; height: 28px; border-radius: 6px; border: 1px solid var(--roots-border); }
.kit-form { max-width: 24rem; }
.kit-form-out { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85rem; color: var(--roots-muted); }
.kit-dialog { flex-wrap: wrap; }
.router-app-bar { padding-bottom: 8px; border-bottom: 1px solid var(--roots-border); }
.router-app-path { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85rem; color: var(--roots-muted); }
.router-app a.r-link-exact-active { font-weight: 700; }