/* effortless-ui on this site. Generated by .samples/tools/eui-port.py from the library's
 * theme.css, ui.css and each component's <style>: edit the source, not this file.
 *
 * Every rule is inside .eui, and so are the tokens: a wrapper with that class is a page of
 * an Effortless app as far as the library can tell, and nothing of it reaches the site's own
 * .btn, .label, .badge or .prose. site.css and docs.css keep theirs out of .eui in turn. */
@layer components {
  .eui {
    color-scheme: light;
    --color-page: light-dark(oklch(1 0 0), oklch(0.145 0 0));
    --color-surface: light-dark(oklch(1 0 0), oklch(0.205 0 0));
    --color-ink: light-dark(oklch(0.145 0 0), oklch(0.985 0 0));
    --color-muted: light-dark(oklch(0.556 0 0), oklch(0.708 0 0));
    --color-soft: light-dark(oklch(0.97 0 0), oklch(0.269 0 0));
    --color-line: light-dark(oklch(0.922 0 0), oklch(1 0 0 / 10%));
    --color-input: light-dark(oklch(0.922 0 0), oklch(1 0 0 / 15%));
    --color-ring: light-dark(oklch(0.708 0 0), oklch(0.556 0 0));
    --color-field: light-dark(transparent, color-mix(in oklab, var(--color-input) 30%, transparent));
    --color-backdrop: oklch(0 0 0 / 10%);
    --shadow-popup: 0 4px 6px -1px oklch(0 0 0 / 10%), 0 2px 4px -2px oklch(0 0 0 / 10%);
    --shadow-raised: 0 10px 15px -3px oklch(0 0 0 / 10%), 0 4px 6px -4px oklch(0 0 0 / 10%);
    --shadow-edge: 0 0 0 1px color-mix(in oklab, var(--color-ink) 10%, transparent);
    --shadow-ring: 0 0 0 3px color-mix(in oklab, var(--color-ring) 50%, transparent);
    --shadow-ring-danger: 0 0 0 3px light-dark(color-mix(in oklab, var(--color-danger) 20%, transparent), color-mix(in oklab, var(--color-danger) 40%, transparent));
    --color-brand: light-dark(oklch(0.205 0 0), oklch(0.922 0 0));
    --color-on-brand: light-dark(oklch(0.985 0 0), oklch(0.205 0 0));
    --color-danger: light-dark(oklch(0.577 0.245 27.325), oklch(0.704 0.191 22.216));
    --color-success: light-dark(oklch(0.527 0.154 150.069), oklch(0.792 0.209 151.711));
    --color-danger-soft: light-dark(color-mix(in oklab, var(--color-danger) 10%, transparent), color-mix(in oklab, var(--color-danger) 20%, transparent));
    --color-danger-line: light-dark(var(--color-danger), color-mix(in oklab, var(--color-danger) 50%, transparent));
    --font-sans: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --radius-field: 0.625rem;
    --radius-box: 0.875rem;
    --spacing-field: 2rem;
    --radius-inner: calc(var(--radius-field) * 0.8);
    --radius-small: calc(var(--radius-field) * 0.6);
    --motion: 150ms cubic-bezier(0.4, 0, 0.2, 1);

    /* The site names its text and its faint text otherwise; the library's utilities here
       read these three. */
    --color-fg: var(--color-ink);
    --color-surface: light-dark(oklch(1 0 0), oklch(0.205 0 0));
    --color-border: var(--color-line);

    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-ink);
  }

  /* The site rounds and outlines whatever has focus. In here the library does. */
  .eui :where(*):focus-visible {
    outline: revert;
    outline-offset: revert;
    border-radius: revert;
  }

  .eui {
  /* ui.css */
  
  .btn {
    --btn-bg: var(--color-brand);
    --btn-fg: var(--color-on-brand);
    --btn-hover: color-mix(in oklab, var(--color-brand) 80%, transparent);
    --btn-icon: 1rem;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: var(--spacing-field);
    padding-inline: 0.625rem;
    border: 1px solid transparent;
    border-radius: var(--radius-field);
    background-color: var(--btn-bg);
    background-clip: padding-box;
    color: var(--btn-fg);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: all var(--motion);
  }
  .btn svg {
    flex-shrink: 0;
    width: var(--btn-icon);
    height: var(--btn-icon);
    pointer-events: none;
  }
  @media (hover: hover) {
    .btn:hover {
      background-color: var(--btn-hover);
    }
    .btn-link:hover {
      text-decoration-line: underline;
    }
  }
  .btn:active:not([aria-haspopup]) {
    translate: 0 1px;
  }
  .btn:disabled,
  .btn[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
  }
  .btn-outline {
    --btn-bg: light-dark(var(--color-page), color-mix(in oklab, var(--color-input) 30%, transparent));
    --btn-fg: var(--color-ink);
    --btn-hover: light-dark(var(--color-soft), color-mix(in oklab, var(--color-input) 50%, transparent));
    border-color: light-dark(var(--color-line), var(--color-input));
  }
  .btn-secondary {
    --btn-bg: var(--color-soft);
    --btn-fg: var(--color-ink);
    --btn-hover: color-mix(in oklch, var(--color-soft), var(--color-ink) 5%);
  }
  .btn-ghost {
    --btn-bg: transparent;
    --btn-fg: var(--color-ink);
    --btn-hover: light-dark(var(--color-soft), color-mix(in oklab, var(--color-soft) 50%, transparent));
  }
  .btn-outline[aria-expanded="true"],
  .btn-ghost[aria-expanded="true"] {
    background-color: var(--color-soft);
  }
  .btn-danger {
    --btn-bg: var(--color-danger-soft);
    --btn-fg: var(--color-danger);
    --btn-hover: light-dark(color-mix(in oklab, var(--color-danger) 20%, transparent), color-mix(in oklab, var(--color-danger) 30%, transparent));
  }
  .btn-link {
    --btn-bg: transparent;
    --btn-fg: var(--color-brand);
    --btn-hover: transparent;
    text-underline-offset: 4px;
  }
  .btn-xs {
    --btn-icon: 0.75rem;
    gap: 0.25rem;
    height: calc(var(--spacing-field) - 0.5rem);
    padding-inline: 0.5rem;
    border-radius: min(var(--radius-inner), 0.625rem);
    font-size: 0.75rem;
    line-height: 1rem;
  }
  .btn-sm {
    --btn-icon: 0.875rem;
    gap: 0.25rem;
    height: calc(var(--spacing-field) - 0.25rem);
    border-radius: min(var(--radius-inner), 0.75rem);
    font-size: 0.8rem;
  }
  .btn-lg {
    height: calc(var(--spacing-field) + 0.25rem);
  }
  .btn-icon {
    aspect-ratio: 1;
    padding-inline: 0;
  }
  .btn-icon.btn-sm {
    --btn-icon: 1rem;
  }

  
  .input {
    display: block;
    width: 100%;
    min-width: 0;
    height: var(--spacing-field);
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--color-input);
    border-radius: var(--radius-field);
    background-color: var(--color-field);
    color: var(--color-ink);
    font-size: 1rem;
    line-height: 1.5rem;
    transition: color var(--motion), background-color var(--motion), border-color var(--motion);
  }
  
  @media (min-width: 48rem) {
    .input {
      font-size: 0.875rem;
      line-height: 1.25rem;
    }
  }
  .input::placeholder {
    color: var(--color-muted);
  }
  .input:disabled {
    background-color: light-dark(color-mix(in oklab, var(--color-input) 50%, transparent), color-mix(in oklab, var(--color-input) 80%, transparent));
    opacity: 0.5;
    cursor: not-allowed;
  }
  textarea.input {
    height: auto;
    min-height: 4rem;
    padding-block: 0.5rem;
    field-sizing: content;
  }
  select.input {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  
  .input[type="file"] {
    color: var(--color-muted);
    font-size: 0.875rem;
    line-height: 1.5rem;
  }
  .input::file-selector-button {
    height: 1.5rem;
    margin-right: 0.5rem;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: var(--color-ink);
    font: inherit;
    font-weight: 500;
  }

  
  .popup {
    --popup-area: block-end span-inline-end;
    --popup-anchor: auto;
    --popup-width: auto;
    inset: auto;
    position-anchor: var(--popup-anchor);
    position-area: var(--popup-area);
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
    width: var(--popup-width);
    height: auto;
    margin: 0.25rem 0;
    overflow: visible;
    border: 0;
    border-radius: var(--radius-field);
    background-color: var(--color-surface);
    color: var(--color-ink);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
    box-shadow: var(--shadow-edge), var(--shadow-popup);
    transition: opacity 100ms, scale 100ms;
  }
  @starting-style {
    .popup:popover-open {
      opacity: 0;
      scale: 0.95;
    }
  }

  .popup-end {
    --popup-area: block-end span-inline-start;
  }

  
  .popover {
    width: 18rem;
    max-width: calc(100vw - 1rem);
    padding: 0.625rem;
  }
  .menu {
    min-width: 8rem;
    max-width: calc(100vw - 1rem);
    padding: 0.25rem;
  }
  .menu :is(a, button) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.375rem 0.5rem;
    border-radius: var(--radius-small);
    text-align: left;
    white-space: nowrap;
    cursor: default;
    user-select: none;
  }
  .menu :is(a, button):is(:hover, :focus-visible) {
    outline: none;
    background-color: var(--color-soft);
  }
  .menu :is(a, button):disabled {
    opacity: 0.5;
    pointer-events: none;
  }
  .menu svg {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    color: var(--color-muted);
  }
  .menu .menu-danger,
  .menu .menu-danger svg {
    color: var(--color-danger);
  }
  .menu .menu-danger:is(:hover, :focus-visible) {
    background-color: var(--color-danger-soft);
  }
  .menu > p {
    padding: 0.375rem 0.5rem;
    color: var(--color-muted);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
  }
  .menu > hr {
    margin: 0.25rem -0.25rem;
    border: 0;
    border-top: 1px solid var(--color-line);
  }

  
  
  .checkbox {
    appearance: none;
    display: inline-grid;
    flex-shrink: 0;
    place-content: center;
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: 1px solid var(--color-input);
    border-radius: 4px;
    background-color: var(--color-field);
    transition: color var(--motion), background-color var(--motion), border-color var(--motion);
  }
  .checkbox:checked {
    border-color: var(--color-brand);
    background-color: var(--color-brand);
  }
  .checkbox:checked::after {
    content: "";
    width: 0.875rem;
    height: 0.875rem;
    background-color: var(--color-on-brand);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .checkbox:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  
  .radio {
    appearance: none;
    display: inline-grid;
    flex-shrink: 0;
    place-content: center;
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: 1px solid var(--color-input);
    border-radius: 9999px;
    background-color: var(--color-field);
    transition: background-color var(--motion), border-color var(--motion);
  }
  .radio:checked {
    border-color: var(--color-brand);
    background-color: var(--color-brand);
  }
  .radio:checked::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: var(--color-on-brand);
  }
  .radio:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  
  .switch {
    --switch-thumb: 1rem;
    appearance: none;
    display: inline-grid;
    flex-shrink: 0;
    align-items: center;
    width: calc(var(--switch-thumb) * 2);
    height: calc(var(--switch-thumb) + 0.15rem);
    padding: 0;
    border: 1px solid transparent;
    border-radius: 9999px;
    background-color: light-dark(var(--color-input), color-mix(in oklab, var(--color-input) 80%, transparent));
    cursor: pointer;
    transition: background-color var(--motion);
  }
  .switch::before {
    content: "";
    width: var(--switch-thumb);
    height: var(--switch-thumb);
    border-radius: 9999px;
    background-color: light-dark(var(--color-page), var(--color-ink));
    transition: translate var(--motion);
  }
  .switch:checked {
    background-color: var(--color-brand);
  }
  .switch:checked::before {
    background-color: light-dark(var(--color-page), var(--color-on-brand));
    translate: calc(100% - 2px);
  }
  .switch:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .switch-sm {
    --switch-thumb: 0.75rem;
  }

  
  .btn:focus-visible,
  .input:focus-visible,
  .switch:focus-visible,
  .radio:focus-visible,
  .tabs > :focus-visible,
  .tabs > label:has(:focus-visible),
  .accordion summary:focus-visible,
  .checkbox:focus-visible {
    outline: none;
    border-color: var(--color-ring);
    box-shadow: var(--shadow-ring);
  }
  .btn-danger:focus-visible {
    border-color: color-mix(in oklab, var(--color-danger) 40%, transparent);
    box-shadow: var(--shadow-ring-danger);
  }
  .input[aria-invalid="true"],
  [data-invalid] .input,
  .radio[aria-invalid="true"],
  .checkbox[aria-invalid="true"] {
    border-color: var(--color-danger-line);
    box-shadow: var(--shadow-ring-danger);
  }

  
  .label {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
  }

  
  .tabs {
    display: inline-flex;
    align-items: center;
    height: var(--spacing-field);
    padding: 3px;
    border-radius: var(--radius-field);
    background-color: var(--color-soft);
  }
  .tabs > :is(a, button, label) {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    height: 100%;
    padding: 0 0.375rem;
    border: 1px solid transparent;
    border-radius: var(--radius-inner);
    color: color-mix(in oklab, var(--color-ink) 60%, transparent);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--motion), background-color var(--motion);
  }
  .tabs > :is(a, button, label):hover,
  .tabs > :is([aria-current="page"], [aria-selected="true"], :has(:checked)) {
    color: var(--color-ink);
  }
  .tabs > label > input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .tabs > :is([aria-current="page"], [aria-selected="true"], :has(:checked)) {
    background-color: light-dark(var(--color-page), color-mix(in oklab, var(--color-input) 30%, transparent));
    box-shadow: 0 1px 3px 0 oklch(0 0 0 / 10%), 0 1px 2px -1px oklch(0 0 0 / 10%);
  }
  .tabs svg {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
  }
  .tabs-line {
    gap: 0.25rem;
    border-radius: 0;
    background-color: transparent;
  }
  .tabs-line > :is([aria-current="page"], [aria-selected="true"], :has(:checked)) {
    background-color: transparent;
    box-shadow: none;
  }
  .tabs-line > :is([aria-current="page"], [aria-selected="true"], :has(:checked))::after {
    content: "";
    position: absolute;
    inset: auto 0 -5px;
    height: 2px;
    background-color: var(--color-ink);
  }

  
  .tabbed:has(> .tabs > :nth-child(1) > input:not(:checked)) > :nth-child(2),
  .tabbed:has(> .tabs > :nth-child(2) > input:not(:checked)) > :nth-child(3),
  .tabbed:has(> .tabs > :nth-child(3) > input:not(:checked)) > :nth-child(4),
  .tabbed:has(> .tabs > :nth-child(4) > input:not(:checked)) > :nth-child(5),
  .tabbed:has(> .tabs > :nth-child(5) > input:not(:checked)) > :nth-child(6),
  .tabbed:has(> .tabs > :nth-child(6) > input:not(:checked)) > :nth-child(7),
  .tabbed:has(> .tabs > :nth-child(7) > input:not(:checked)) > :nth-child(8),
  .tabbed:has(> .tabs > :nth-child(8) > input:not(:checked)) > :nth-child(9) {
    display: none !important;
  }

  
  .prose {
    line-height: 1.65;
    overflow-wrap: break-word;
  }
  .prose > * + *,
  .prose blockquote > * + *,
  .prose li > p + p {
    margin-top: 0.75em;
  }
  .prose :is(h1, h2, h3, h4, h5, h6) {
    font-weight: 600;
    line-height: 1.3;
  }
  .prose > :is(h1, h2, h3) + *,
  .prose > * + :is(h1, h2, h3) {
    margin-top: 1.25em;
  }
  .prose > :is(h1, h2, h3) + * {
    margin-top: 0.5em;
  }
  .prose h1 {
    font-size: 1.5em;
  }
  .prose h2 {
    font-size: 1.25em;
  }
  .prose h3 {
    font-size: 1.1em;
  }
  .prose :is(strong, b) {
    font-weight: 600;
  }
  .prose a {
    text-decoration-line: underline;
    text-underline-offset: 3px;
  }
  .prose ul {
    padding-left: 1.5em;
    list-style: disc;
  }
  .prose ol {
    padding-left: 1.5em;
    list-style: decimal;
  }
  .prose li + li,
  .prose li > :is(ul, ol) {
    margin-top: 0.25em;
  }
  .prose blockquote {
    padding-left: 1em;
    border-left: 2px solid var(--color-line);
    color: var(--color-muted);
  }
  .prose code {
    padding: 0.125em 0.3em;
    border-radius: 4px;
    background-color: var(--color-soft);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875em;
  }
  .prose pre {
    padding: 0.75em 1em;
    overflow-x: auto;
    border-radius: var(--radius-field);
    background-color: var(--color-soft);
    line-height: 1.5;
  }
  .prose pre code {
    padding: 0;
    background-color: transparent;
  }
  .prose hr {
    margin-block: 1.5em;
    border: 0;
    border-top: 1px solid var(--color-line);
  }
  .prose img {
    max-width: 100%;
    border-radius: var(--radius-field);
  }

  
  .avatar {
    position: relative;
    display: inline-grid;
    flex-shrink: 0;
    place-items: center;
    width: 2rem;
    height: 2rem;
    overflow: hidden;
    border-radius: 9999px;
    background-color: var(--color-soft);
    color: var(--color-muted);
    font-size: 0.875rem;
    line-height: 1;
    user-select: none;
  }
  .avatar > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .avatar::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid var(--color-line);
    border-radius: inherit;
  }
  .avatar-sm {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.75rem;
  }
  .avatar-lg {
    width: 2.5rem;
    height: 2.5rem;
  }

  
  .progress {
    appearance: none;
    display: block;
    width: 100%;
    height: 0.25rem;
    overflow: hidden;
    border: 0;
    border-radius: 9999px;
    background-color: var(--color-soft);
  }
  .progress::-webkit-progress-bar {
    background-color: var(--color-soft);
  }
  .progress::-webkit-progress-value {
    background-color: var(--color-brand);
    transition: width var(--motion);
  }
  .progress::-moz-progress-bar {
    background-color: var(--color-brand);
  }
  .progress:indeterminate {
    background-image: linear-gradient(var(--color-brand), var(--color-brand));
    background-repeat: no-repeat;
    background-size: 40% 100%;
    animation: ui-progress 1.1s ease-in-out infinite;
  }
  .progress:indeterminate::-webkit-progress-bar {
    background-color: transparent;
  }
  .progress:indeterminate::-moz-progress-bar {
    background-color: transparent;
  }
  

  
  .spinner {
    width: 1rem;
    height: 1rem;
    animation: ui-spin 1s linear infinite;
  }
  

  
  .skeleton {
    border-radius: var(--radius-inner);
    background-color: var(--color-soft);
    animation: ui-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  

  
  .kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    padding-inline: 0.25rem;
    border-radius: var(--radius-small);
    background-color: var(--color-soft);
    color: var(--color-muted);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    white-space: nowrap;
    user-select: none;
  }
  .kbd svg {
    width: 0.75rem;
    height: 0.75rem;
  }

  
  .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem;
    border-radius: var(--radius-box);
    text-align: center;
    text-wrap: balance;
  }
  .empty-outline {
    border: 1px dashed var(--color-line);
  }
  .empty > svg {
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    border-radius: var(--radius-field);
    background-color: var(--color-soft);
  }
  .empty > :is(h2, h3) {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
  }
  .empty > p {
    max-width: 24rem;
    color: var(--color-muted);
    font-size: 0.875rem;
    line-height: 1.625;
  }
  .empty > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }

  
  .accordion {
    interpolate-size: allow-keywords;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  .accordion > details:not(:last-child) {
    border-bottom: 1px solid var(--color-line);
  }
  .accordion summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 0;
    border: 1px solid transparent;
    border-radius: var(--radius-field);
    font-weight: 500;
    list-style: none;
    cursor: pointer;
  }
  .accordion summary::-webkit-details-marker {
    display: none;
  }
  .accordion summary::after {
    content: "";
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: 0.125rem;
    background-color: var(--color-muted);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: rotate 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .accordion details[open] > summary::after {
    rotate: 180deg;
  }
  .accordion details > :not(summary):last-child {
    padding-bottom: 0.625rem;
  }
  .accordion details::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 200ms cubic-bezier(0.4, 0, 0.2, 1), content-visibility 200ms allow-discrete;
  }
  .accordion details[open]::details-content {
    block-size: auto;
  }

  
  .card {
    padding: 1rem;
    border-radius: var(--radius-box);
    background-color: var(--color-surface);
    color: var(--color-ink);
    font-size: 0.875rem;
    line-height: 1.25rem;
    box-shadow: var(--shadow-edge);
  }

  
  .dialog {
    margin: auto;
    width: 100%;
    max-width: min(24rem, calc(100% - 2rem));
    padding: 1rem;
    border-radius: var(--radius-box);
    background-color: var(--color-surface);
    color: var(--color-ink);
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-align: start;
    box-shadow: var(--shadow-edge);
    gap: 1rem;
    opacity: 0;
    scale: 0.95;
    transition: opacity 100ms, scale 100ms, overlay 100ms allow-discrete, display 100ms allow-discrete, position 100ms step-end allow-discrete, margin 100ms step-end allow-discrete;
  }
  .dialog[open] {
    display: grid;
    opacity: 1;
    scale: 1;
  }
  
  .dialog[open]:not(:modal) {
    position: relative;
    margin: 0;
  }
  .dialog::backdrop {
    background-color: var(--color-backdrop);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 100ms, overlay 100ms allow-discrete, display 100ms allow-discrete;
  }
  .dialog[open]::backdrop {
    opacity: 1;
  }
  @starting-style {
    .dialog[open] {
      opacity: 0;
      scale: 0.95;
    }
    .dialog[open]::backdrop {
      opacity: 0;
    }
  }
  .dialog > form {
    display: contents;
  }
  :is(.dialog, .dialog > form) > header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  :is(.dialog, .dialog > form) > header > :is(h1, h2, h3) {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
  }
  :is(.dialog, .dialog > form) > header > p {
    color: var(--color-muted);
  }
  :is(.dialog, .dialog > form) > footer {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    margin: 0 -1rem -1rem;
    padding: 1rem;
    border-top: 1px solid var(--color-line);
    border-radius: 0 0 var(--radius-box) var(--radius-box);
    background-color: color-mix(in oklab, var(--color-soft) 50%, transparent);
  }
  .dialog > .dialog-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
  }
  
  .dialog-side {
    width: 75%;
    max-width: 24rem;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0 0 0 auto;
    overflow-y: auto;
    border-radius: 0;
    box-shadow: -1px 0 0 var(--color-line), var(--shadow-raised);
    flex-direction: column;
    scale: 1;
    translate: 100%;
    transition: opacity 200ms, translate 200ms ease-in-out, overlay 200ms allow-discrete, display 200ms allow-discrete, position 200ms step-end allow-discrete, margin 200ms step-end allow-discrete;
  }
  .dialog-side[open] {
    display: flex;
    translate: 0;
  }
  @starting-style {
    .dialog-side[open] {
      scale: 1;
      translate: 100%;
    }
  }
  :is(.dialog-side, .dialog-side > form) > footer {
    margin-top: auto;
    border-radius: 0;
  }
  
  .dialog-alert {
    max-width: min(20rem, calc(100% - 2rem));
  }
  .dialog-alert > form > header {
    display: grid;
    place-items: center;
    gap: 0.375rem;
    text-align: center;
  }
  .dialog-alert > form > header > :is(h1, h2, h3) {
    line-height: 1.5rem;
  }
  .dialog-alert > form > header > p {
    text-wrap: balance;
  }
  @media (min-width: 40rem) {
    :is(.dialog, .dialog > form) > footer {
      flex-direction: row;
      justify-content: flex-end;
    }
    .dialog-alert {
      max-width: min(24rem, calc(100% - 2rem));
    }
    .dialog-alert > form > header {
      place-items: start;
      text-align: start;
    }
  }

  
  .alert {
    display: grid;
    gap: 0.125rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-field);
    background-color: var(--color-surface);
    color: var(--color-ink);
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-align: start;
  }
  .alert:has(> svg) {
    grid-template-columns: auto 1fr;
    column-gap: 0.5rem;
  }
  .alert > svg {
    grid-row: span 2;
    width: 1rem;
    height: 1rem;
    translate: 0 0.125rem;
  }
  .alert-danger {
    color: var(--color-danger);
  }
  .alert-success {
    color: var(--color-success);
  }

  
  .badge {
    --badge-bg: var(--color-brand);
    --badge-fg: var(--color-on-brand);
    --badge-hover: color-mix(in oklab, var(--color-brand) 80%, transparent);
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: fit-content;
    height: 1.25rem;
    padding: 0.125rem 0.5rem;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 9999px;
    background-color: var(--badge-bg);
    color: var(--badge-fg);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    white-space: nowrap;
    transition: all var(--motion);
  }
  .badge > svg {
    width: 0.75rem;
    height: 0.75rem;
    pointer-events: none;
  }
  .badge-secondary {
    --badge-bg: var(--color-soft);
    --badge-fg: var(--color-ink);
    --badge-hover: color-mix(in oklab, var(--color-soft) 80%, transparent);
  }
  .badge-success {
    --badge-bg: light-dark(color-mix(in oklab, var(--color-success) 10%, transparent), color-mix(in oklab, var(--color-success) 20%, transparent));
    --badge-fg: var(--color-success);
    --badge-hover: color-mix(in oklab, var(--color-success) 20%, transparent);
  }
  .badge-danger {
    --badge-bg: var(--color-danger-soft);
    --badge-fg: var(--color-danger);
    --badge-hover: color-mix(in oklab, var(--color-danger) 20%, transparent);
  }
  .badge-outline {
    --badge-bg: transparent;
    --badge-fg: var(--color-ink);
    --badge-hover: var(--color-soft);
    border-color: var(--color-line);
  }
  .badge-ghost {
    --badge-bg: transparent;
    --badge-fg: var(--color-ink);
  }
  @media (hover: hover) {
    a.badge:hover {
      background-color: var(--badge-hover);
    }
    a.badge-outline:hover {
      color: var(--color-muted);
    }
    .badge-ghost:hover {
      background-color: light-dark(var(--color-soft), color-mix(in oklab, var(--color-soft) 50%, transparent));
      color: var(--color-muted);
    }
  }

  
  .table {
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.25rem;
    caption-side: bottom;
  }
  .table th {
    height: 2.5rem;
    padding-inline: 0.5rem;
    color: var(--color-ink);
    font-weight: 500;
    text-align: start;
    vertical-align: middle;
    white-space: nowrap;
  }
  .table td {
    padding: 0.5rem;
    vertical-align: middle;
    white-space: nowrap;
  }
  .table tr {
    border-bottom: 1px solid var(--color-line);
    transition: color var(--motion), background-color var(--motion);
  }
  .table tbody tr:last-child {
    border-bottom: 0;
  }
  @media (hover: hover) {
    .table tr:hover {
      background-color: color-mix(in oklab, var(--color-soft) 50%, transparent);
    }
  }
  .table caption {
    margin-top: 1rem;
    color: var(--color-muted);
  }
  /* ui-combobox.x.html */
    .combobox {
      position: relative;
      display: block;
      anchor-name: --combobox;
      anchor-scope: --combobox;
    }
    .combobox-box {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.25rem;
      height: auto;
      min-height: var(--spacing-field);
      padding-block: 0.1875rem;
      padding-right: 2rem;
      cursor: text;
    }
    .combobox-box > input {
      flex: 1;
      min-width: 4rem;
      padding: 0;
      border: 0;
      outline: 0;
      background-color: transparent;
      color: inherit;
      font: inherit;
    }
    .combobox-box > input::placeholder {
      color: var(--color-muted);
    }
    .combobox-box:has(> input:disabled) {
      background-color: light-dark(color-mix(in oklab, var(--color-input) 50%, transparent), color-mix(in oklab, var(--color-input) 80%, transparent));
      opacity: 0.5;
      cursor: not-allowed;
    }
    
    [data-multiple] > .combobox-box {
      padding-inline: 0.625rem;
    }
    [data-multiple] > .combobox-box:has(> .combobox-chip) {
      padding-inline: 0.1875rem;
    }
    .combobox-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      height: 1.3125rem;
      padding-left: 0.375rem;
      border-radius: var(--radius-small);
      background-color: var(--color-soft);
      color: var(--color-ink);
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1rem;
      white-space: nowrap;
      order: -1;
    }
    .combobox-chip > .btn {
      margin-left: -0.25rem;
      opacity: 0.5;
    }
    .combobox-chip > .btn:hover {
      opacity: 1;
    }
    .combobox > .btn {
      --btn-icon: 1rem;
      position: absolute;
      top: 0.25rem;
      right: 0.3125rem;
      color: var(--color-muted);
    }
    .combobox-list {
      --popup-anchor: --combobox;
      --popup-area: block-end;
      --popup-width: anchor-size(width);
      position-try-fallbacks: flip-block;
      max-height: 15.75rem;
      margin: 0.375rem 0;
      padding: 0.25rem;
      overflow-y: auto;
      overscroll-behavior: contain;
      scroll-padding-block: 0.25rem;
    }
    
    .combobox-list:not(:has([role="option"], [role="status"])) {
      display: none;
    }
    .combobox-list > [role="listbox"] {
      display: grid;
    }
    .combobox-list [role="option"] {
      position: relative;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.25rem 2rem 0.25rem 0.375rem;
      
      border-left: calc(var(--indent, 0) * 1rem) solid transparent;
      border-radius: var(--radius-inner);
      cursor: default;
      user-select: none;
    }
    .combobox-list [data-active] {
      background-color: var(--color-soft);
    }
    
    .combobox-list [role="option"] > small {
      margin-left: auto;
      color: var(--color-muted);
      font-size: 0.75rem;
      white-space: nowrap;
    }
    .combobox-list [role="option"] > svg {
      flex-shrink: 0;
      width: 1rem;
      height: 1rem;
    }
    
    .combobox-list [aria-selected="true"] > svg {
      position: absolute;
      top: 0.375rem;
      right: 0.5rem;
    }
    .combobox-list > [role="status"] {
      display: block;
      padding: 0.25rem 0;
      color: var(--color-muted);
      text-align: center;
    }
    
    :where(.combobox-box):focus-within {
      outline: none;
      border-color: var(--color-ring);
      box-shadow: var(--shadow-ring);
    }
  /* ui-datepicker.x.html */
    .datepicker {
      display: flex;
      gap: 0.5rem;
      anchor-scope: --datepicker;
    }
    .datepicker-date {
      position: relative;
      flex: 1;
      min-width: 0;
      anchor-name: --datepicker;
    }
    .datepicker > .timepicker {
      width: 7rem;
    }
    .datepicker-date > .input {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.375rem;
      padding-right: 0.5rem;
      font-size: 0.875rem;
      line-height: 1.25rem;
      text-align: left;
      white-space: nowrap;
    }
    .datepicker-date > .input[data-empty] {
      color: var(--color-muted);
    }
    .datepicker-date > .input > svg {
      flex-shrink: 0;
      width: 1rem;
      height: 1rem;
      color: var(--color-muted);
    }
    .datepicker-date > .btn {
      --btn-icon: 1rem;
      position: absolute;
      top: 0.25rem;
      right: 0.3125rem;
      color: var(--color-muted);
    }
    .datepicker-panel {
      --popup-anchor: --datepicker;
      padding: 0.5rem;
    }
    .datepicker-head,
    .datepicker-head > div,
    .datepicker-pick {
      display: flex;
      align-items: center;
    }
    .datepicker-head {
      justify-content: space-between;
    }
    .datepicker-head > div {
      gap: 0.375rem;
    }
    .datepicker-head > .btn {
      border-radius: var(--radius-field);
    }
    .datepicker-pick {
      position: relative;
      gap: 0.25rem;
      border-radius: var(--radius-inner);
      font-weight: 500;
    }
    .datepicker-pick > select {
      position: absolute;
      inset: 0;
      opacity: 0;
      cursor: pointer;
    }
    .datepicker-pick > svg {
      width: 0.875rem;
      height: 0.875rem;
      color: var(--color-muted);
    }
    .datepicker-pick:has(> select:focus-visible) {
      box-shadow: var(--shadow-ring);
    }
    .datepicker-panel table {
      margin-top: 1rem;
      border-collapse: collapse;
    }
    .datepicker-panel th {
      padding: 0;
      color: var(--color-muted);
      font-size: 0.8rem;
      font-weight: 400;
      line-height: calc(1.25 / 0.875);
    }
    .datepicker-panel td {
      padding: 0.5rem 0 0;
    }
    .datepicker-panel td > button {
      display: block;
      width: 1.75rem;
      height: 1.75rem;
      border: 1px solid transparent;
      border-radius: var(--radius-field);
      cursor: pointer;
      user-select: none;
      transition: background-color var(--motion);
    }
    .datepicker-panel td > button[data-outside] {
      color: var(--color-muted);
    }
    .datepicker-panel td > button[aria-current],
    .datepicker-panel td > button:hover {
      background-color: var(--color-soft);
    }
    .datepicker-panel td:not([data-mark="between"])[data-mark] > button {
      background-color: var(--color-brand);
      color: var(--color-on-brand);
    }
    
    .datepicker-panel td[data-mark="between"] > button {
      border-radius: 0;
      background-color: var(--color-soft);
    }
    .datepicker-panel td[data-mark="start"],
    .datepicker-panel td[data-mark="end"] {
      background: linear-gradient(to right, transparent 50%, var(--color-soft) 50%) content-box;
    }
    .datepicker-panel td[data-mark="end"] {
      background-image: linear-gradient(to left, transparent 50%, var(--color-soft) 50%);
    }
    .datepicker-panel td > button:disabled {
      opacity: 0.5;
      pointer-events: none;
    }
    .datepicker-panel td > button:focus-visible {
      outline: none;
      border-color: var(--color-ring);
      box-shadow: var(--shadow-ring);
    }
  /* ui-markdown.x.html */
    .markdown {
      border: 1px solid var(--color-input);
      border-radius: var(--radius-field);
      background-color: var(--color-field);
      color: var(--color-ink);
      font-weight: 400;
    }
    .markdown[data-disabled] {
      opacity: 0.5;
      cursor: not-allowed;
    }
    .markdown > [role="toolbar"] {
      display: flex;
      min-width: 0;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.125rem;
      padding: 0.25rem;
      border-bottom: 1px solid var(--color-line);
    }
    .markdown > [role="toolbar"] > span {
      width: 1px;
      height: 1rem;
      margin-inline: 0.25rem;
      background-color: var(--color-line);
    }
    .markdown .btn[aria-pressed="true"] {
      background-color: var(--color-soft);
    }
    .markdown-text {
      min-height: 8rem;
      max-height: 24rem;
      padding: 0.5rem 0.625rem;
      overflow-y: auto;
      outline: none;
      font-size: 0.875rem;
    }
    .markdown-text[data-empty]::before {
      content: attr(data-placeholder);
      float: left;
      height: 0;
      color: var(--color-muted);
      pointer-events: none;
    }
    .markdown-link:popover-open {
      display: flex;
      gap: 0.5rem;
    }
    .markdown:has(> .markdown-text:focus) {
      outline: none;
      border-color: var(--color-ring);
      box-shadow: var(--shadow-ring);
    }
    [data-invalid] .markdown {
      border-color: var(--color-danger-line);
      box-shadow: var(--shadow-ring-danger);
    }
  /* ui-pager.x.html */
    .pager {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 0.125rem;
    }
    .pager > span {
      display: grid;
      place-items: center;
      width: var(--spacing-field);
      height: var(--spacing-field);
      color: var(--color-muted);
      font-size: 0.875rem;
    }
  /* ui-row-tools.x.html */
    .row-tools {
      display: contents;
    }
    .row-tools > .btn {
      color: var(--color-muted);
    }
    .row-tools > [data-grip] {
      order: -1;
      cursor: grab;
      touch-action: none;
    }
  /* ui-rows.x.html */
    .rows {
      display: grid;
      justify-items: start;
      gap: 0.5rem;
    }
    .rows > [data-row] {
      display: flex;
      align-items: center;
      justify-self: stretch;
      gap: 0.5rem;
      border-radius: var(--radius-field);
    }
    .rows > [data-row][data-dragging] {
      opacity: 0.35;
    }
    .rows-ghost {
      position: fixed;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      inset: auto;
      margin: 0;
      padding: 0;
      overflow: visible;
      border: 0;
      border-radius: var(--radius-field);
      background-color: var(--color-surface);
      color: var(--color-ink);
      box-shadow: 0 0 0 0.375rem var(--color-surface), 0 0 0 calc(0.375rem + 1px) color-mix(in oklab, var(--color-ink) 10%, transparent), var(--shadow-raised);
      pointer-events: none;
    }
    .rows-ghost > :is(.input, .combobox, .datepicker, .timepicker, .select) {
      flex: 1;
    }
    .rows > [data-row] > :is(.input, .combobox, .datepicker, .timepicker, .select) {
      flex: 1;
    }
    [data-dragging] [data-grip] {
      cursor: grabbing;
    }
  /* ui-select.x.html */
    .select {
      position: relative;
      display: block;
    }
    .select > select {
      appearance: none;
      padding-right: 2rem;
    }
    .select > svg {
      position: absolute;
      top: 50%;
      right: 0.625rem;
      width: 1rem;
      height: 1rem;
      translate: 0 -50%;
      color: var(--color-muted);
      pointer-events: none;
    }
    .select:has(> select:disabled) {
      opacity: 0.5;
    }
  /* ui-timepicker.x.html */
    .timepicker {
      position: relative;
      display: block;
      anchor-name: --timepicker;
      anchor-scope: --timepicker;
    }
    .timepicker-panel {
      --popup-anchor: --timepicker;
      padding: 0.25rem;
    }
    .timepicker-panel:popover-open {
      display: flex;
      gap: 0.25rem;
    }
    .timepicker-panel > span {
      display: grid;
      align-content: start;
      max-height: 12.5rem;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: none;
    }
    .timepicker-panel button {
      width: 2.25rem;
      height: 1.75rem;
      border-radius: var(--radius-inner);
      font-variant-numeric: tabular-nums;
      cursor: pointer;
      user-select: none;
    }
    .timepicker-panel button:hover {
      background-color: var(--color-soft);
    }
    .timepicker-panel button[aria-pressed="true"] {
      background-color: var(--color-brand);
      color: var(--color-on-brand);
    }
    .timepicker-panel button:disabled {
      opacity: 0.5;
      pointer-events: none;
    }
  /* ui-toaster.x.html */
    .toaster {
      position: fixed;
      inset: auto 1rem 1rem;
      flex-direction: column;
      gap: 0.75rem;
      width: auto;
      max-width: 24rem;
      height: auto;
      margin: 0 auto;
      padding: 0;
      border: 0;
      background-color: transparent;
      overflow: visible;
    }
    .toaster:popover-open {
      display: flex;
    }
    
    .toaster[data-position^="top"] {
      top: 1rem;
      bottom: auto;
      flex-direction: column-reverse;
    }
    @media (min-width: 40rem) {
      .toaster {
        width: 100%;
      }
      .toaster[data-position$="right"] {
        left: auto;
      }
      .toaster[data-position$="left"] {
        right: auto;
      }
    }
    .toast {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 1rem;
      border: 1px solid var(--color-line);
      border-radius: calc(var(--radius-box) + 0.25rem);
      background-color: var(--color-surface);
      color: var(--color-ink);
      font-size: 0.875rem;
      line-height: 1.25rem;
      box-shadow: var(--shadow-raised);
      transition: translate 500ms cubic-bezier(0.22, 1, 0.36, 1), opacity 150ms;
    }
    @starting-style {
      .toast {
        translate: 0 150%;
      }
      .toaster[data-position^="top"] > .toast {
        translate: 0 -150%;
      }
    }
    .toast[data-leaving] {
      opacity: 0;
    }
    .toast > svg {
      flex-shrink: 0;
      width: 1rem;
      height: 1rem;
    }
    .toast > div {
      display: flex;
      flex: 1;
      flex-direction: column;
      gap: 0.25rem;
      min-width: 0;
    }
    .toast > div > :first-child {
      font-weight: 500;
    }
    .toast > div > :not(:first-child) {
      color: var(--color-muted);
    }
  /* ui-tooltip.x.html */
    .tooltip {
      inset: auto;
      width: max-content;
      max-width: min(20rem, calc(100vw - 0.5rem));
      margin: 0;
      padding: 0.375rem 0.75rem;
      border: 0;
      border-radius: var(--radius-inner);
      background-color: var(--color-ink);
      color: var(--color-page);
      font-size: 0.75rem;
      line-height: 1rem;
      pointer-events: none;
      transition: opacity 100ms;
    }
    @starting-style {
      .tooltip:popover-open {
        opacity: 0;
      }
    }
  /* ui-upload.x.html */
    .upload {
      display: grid;
      gap: 0.5rem;
    }
    .upload-drop {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      padding: 1.5rem 1rem;
      border: 1px dashed var(--color-input);
      border-radius: var(--radius-field);
      color: var(--color-muted);
      font-size: 0.875rem;
      line-height: 1.25rem;
      cursor: pointer;
      transition: color var(--motion), background-color var(--motion), border-color var(--motion);
    }
    .upload-drop:hover,
    .upload-drop[data-over] {
      border-color: var(--color-ring);
      background-color: var(--color-soft);
      color: var(--color-ink);
    }
    .upload-drop:disabled {
      opacity: 0.5;
      pointer-events: none;
    }
    .upload-drop > svg {
      width: 1.25rem;
      height: 1.25rem;
    }
    .upload li {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      padding: 0.375rem;
      border: 1px solid var(--color-line);
      border-radius: var(--radius-field);
      color: var(--color-ink);
      font-size: 0.875rem;
      font-weight: 400;
      line-height: 1.25rem;
    }
    .upload li + li {
      margin-top: 0.375rem;
    }
    .upload li > :is(img, svg) {
      flex-shrink: 0;
      width: 2rem;
      height: 2rem;
      border-radius: var(--radius-small);
      object-fit: cover;
    }
    .upload li > svg {
      padding: 0.5rem;
      background-color: var(--color-soft);
      color: var(--color-muted);
    }
    .upload li > span {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .upload li > small {
      color: var(--color-muted);
      font-size: 0.75rem;
      white-space: nowrap;
    }
    .upload-drop:focus-visible {
      outline: none;
      border-color: var(--color-ring);
      box-shadow: var(--shadow-ring);
    }
    [data-invalid] .upload-drop {
      border-color: var(--color-danger-line);
      box-shadow: var(--shadow-ring-danger);
    }
  }

  @keyframes ui-progress {
    from {
      background-position-x: -66.67%;
    }
    to {
      background-position-x: 166.67%;
    }
  }
  @keyframes ui-spin {
    to {
      rotate: 360deg;
    }
  }
  @keyframes ui-pulse {
    50% {
      opacity: 0.5;
    }
  }
}