@layer cirth {
  *, :before, :after {
    box-sizing: border-box;
    background-repeat: no-repeat;
  }

  :before, :after {
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
    vertical-align: inherit;
  }

  :where(:root), :where(:host) {
    scrollbar-gutter: stable;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background-color: var(--cirth-background-color);
    color: var(--cirth-color);
    font-weight: var(--cirth-font-weight);
    font-size: var(--cirth-font-size);
    line-height: var(--cirth-line-height);
    font-family: var(--cirth-font-family);
    text-underline-offset: var(--cirth-text-underline-offset);
    text-rendering: optimizelegibility;
    overflow-wrap: break-word;
    tab-size: 4;
  }

  body {
    width: 100%;
    margin: 0;
  }

  main {
    display: block;
  }

  body > header, body > main, body > footer {
    padding-block: var(--cirth-block-spacing-vertical);
  }

  section {
    margin-bottom: var(--cirth-block-spacing-vertical);
  }

  main > section + section {
    margin-block-start: var(--cirth-space-8);
  }

  .container, .container-fluid {
    display: grid;
  }

  .container > *, .container-fluid > * {
    grid-column: content;
  }

  .container {
    grid-template-columns: [full-start] minmax(var(--cirth-container-gutter), 1fr) [content-start] minmax(0, var(--cirth-container-max-width)) [content-end] minmax(var(--cirth-container-gutter), 1fr) [full-end];
  }

  .container-fluid {
    grid-template-columns: [full-start] var(--cirth-container-gutter) [content-start] minmax(0, 1fr) [content-end] var(--cirth-container-gutter) [full-end];
  }

  .container > .breakout {
    grid-column: full;
  }

  .row {
    gap: var(--cirth-grid-row-gap) var(--cirth-grid-column-gap);
    grid-template-columns: 1fr;
    display: grid;
  }

  @media (width >= 768px) {
    .row {
      grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
    }
  }

  .row > * {
    min-width: 0;
  }

  .row > :where(button, [type="submit"], [type="reset"], [role="button"], input:not([type="checkbox"], [type="radio"]), select, textarea) {
    margin-bottom: 0;
  }

  .grid {
    gap: var(--cirth-grid-row-gap) var(--cirth-grid-column-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cirth-grid-min-column)), 1fr));
    display: grid;
  }

  .grid > * {
    min-width: 0;
  }

  .grid > :where(button, [type="submit"], [type="reset"], [role="button"], input:not([type="checkbox"], [type="radio"]), select, textarea) {
    margin-bottom: 0;
  }

  .overflow-auto {
    position: relative;
    overflow: auto;
  }

  .overflow-auto:focus-visible {
    outline: var(--cirth-outline-width) solid var(--cirth-primary-focus);
  }

  b, strong {
    font-weight: bolder;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: .75em;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  address:where(:not(.no-cirth, .no-cirth *)), blockquote:where(:not(.no-cirth, .no-cirth *)), dl:where(:not(.no-cirth, .no-cirth *)), ol:where(:not(.no-cirth, .no-cirth *)), p:where(:not(.no-cirth, .no-cirth *)), pre:where(:not(.no-cirth, .no-cirth *)), table:where(:not(.no-cirth, .no-cirth *)), ul:where(:not(.no-cirth, .no-cirth *)) {
    margin-block: 0 var(--cirth-typography-spacing-vertical);
    color: var(--cirth-color);
    font-style: normal;
  }

  p:where(:not(.no-cirth, .no-cirth *)) {
    text-wrap: pretty;
  }

  h1:where(:not(.no-cirth, .no-cirth *)), h2:where(:not(.no-cirth, .no-cirth *)), h3:where(:not(.no-cirth, .no-cirth *)), h4:where(:not(.no-cirth, .no-cirth *)), h5:where(:not(.no-cirth, .no-cirth *)), h6:where(:not(.no-cirth, .no-cirth *)) {
    margin-block: 0 calc(var(--cirth-typography-spacing-vertical) * .5);
    color: var(--cirth-color);
    font-weight: var(--cirth-font-weight);
    font-size: var(--cirth-font-size);
    line-height: var(--cirth-line-height);
    font-family: var(--cirth-font-family-display);
    letter-spacing: var(--cirth-letter-spacing, normal);
    text-wrap: balance;
  }

  h1:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-color: var(--cirth-h1-color);
  }

  h2:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-color: var(--cirth-h2-color);
  }

  h3:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-color: var(--cirth-h3-color);
  }

  h4:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-color: var(--cirth-h4-color);
  }

  h5:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-color: var(--cirth-h5-color);
  }

  h6:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-color: var(--cirth-h6-color);
  }

  :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6):where(:not(.no-cirth, .no-cirth *)) {
    margin-top: var(--cirth-typography-spacing-top);
  }

  hgroup:where(:not(.no-cirth, .no-cirth *)) {
    margin-bottom: var(--cirth-typography-spacing-vertical);
  }

  hgroup > :where(:not(.no-cirth, .no-cirth *)) {
    margin-block: 0;
  }

  hgroup > :not(:first-child):last-child:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-color: var(--cirth-muted-color);
    --cirth-font-weight: unset;
    font-size: var(--cirth-font-size-md);
  }

  :where(ol, ul) li:where(:not(.no-cirth, .no-cirth *)) {
    margin-bottom: calc(var(--cirth-typography-spacing-vertical) * .25);
  }

  :is(dl, ol, ul) :is(dl, ol, ul):where(:not(.no-cirth, .no-cirth *)) {
    margin: 0;
    margin-top: calc(var(--cirth-typography-spacing-vertical) * .25);
  }

  ul li:where(:not(.no-cirth, .no-cirth *)) {
    list-style: square;
  }

  dt:where(:not(.no-cirth, .no-cirth *)) {
    font-weight: var(--cirth-font-weight-semibold);
  }

  dd:where(:not(.no-cirth, .no-cirth *)) {
    margin-inline-start: 0;
  }

  dl > dd + dt:where(:not(.no-cirth, .no-cirth *)) {
    margin-top: calc(var(--cirth-typography-spacing-vertical) * .5);
  }

  mark:where(:not(.no-cirth, .no-cirth *)) {
    padding: 0 var(--cirth-space-1);
    background-color: var(--cirth-mark-background-color);
    color: var(--cirth-mark-color);
    vertical-align: baseline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  @media (forced-colors: active) {
    mark:where(:not(.no-cirth, .no-cirth *)) {
      color: marktext;
      background-color: mark;
    }
  }

  blockquote:where(:not(.no-cirth, .no-cirth *)) {
    margin: var(--cirth-typography-spacing-vertical) 0;
    padding: var(--cirth-spacing);
    border-inline-start: var(--cirth-border-width-4) solid var(--cirth-blockquote-border-color);
    border-inline-end: none;
  }

  blockquote > :last-child:where(:not(.no-cirth, .no-cirth *)), blockquote > :has( + footer):where(:not(.no-cirth, .no-cirth *)) {
    margin-bottom: 0;
  }

  blockquote footer:where(:not(.no-cirth, .no-cirth *)) {
    margin-top: calc(var(--cirth-typography-spacing-vertical) * .5);
    color: var(--cirth-blockquote-footer-color);
  }

  abbr[title]:where(:not(.no-cirth, .no-cirth *)) {
    border-bottom: var(--cirth-border-width-1) dotted;
    cursor: help;
    text-decoration: none;
  }

  ins:where(:not(.no-cirth, .no-cirth *)) {
    color: var(--cirth-ins-color);
    text-decoration: none;
  }

  del:where(:not(.no-cirth, .no-cirth *)) {
    color: var(--cirth-del-color);
  }

  :where(:not(.no-cirth, .no-cirth *))::selection {
    background-color: var(--cirth-text-selection-color);
  }

  :where(a:not([role="button"])):where(:not(.no-cirth, .no-cirth *)), [role="link"]:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-color: var(--cirth-primary-text);
    --cirth-background-color: transparent;
    --cirth-underline: var(--cirth-primary-underline);
    background-color: var(--cirth-background-color);
    color: var(--cirth-color);
    -webkit-text-decoration: var(--cirth-text-decoration);
    text-decoration: var(--cirth-text-decoration);
    -webkit-text-decoration-color: var(--cirth-underline);
    text-decoration-color: var(--cirth-underline);
    transition: background-color var(--cirth-transition), color var(--cirth-transition), text-decoration var(--cirth-transition), box-shadow var(--cirth-transition);
    outline: none;
  }

  :where(a:not([role="button"])):is([aria-current]:not([aria-current="false"]), :hover, :active, :focus):where(:not(.no-cirth, .no-cirth *)), [role="link"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-color: var(--cirth-primary-active);
    --cirth-underline: var(--cirth-primary-underline-active);
    --cirth-text-decoration: underline;
  }

  :where(a:not([role="button"])):focus-visible:where(:not(.no-cirth, .no-cirth *)), [role="link"]:focus-visible:where(:not(.no-cirth, .no-cirth *)) {
    box-shadow: 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
    outline: var(--cirth-outline-width) solid transparent;
  }

  :where(a:not([role="button"])).secondary:where(:not(.no-cirth, .no-cirth *)), [role="link"].secondary:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-color: var(--cirth-secondary-text);
    --cirth-underline: var(--cirth-secondary-underline);
  }

  :where(a:not([role="button"])).secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus):where(:not(.no-cirth, .no-cirth *)), [role="link"].secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-color: var(--cirth-secondary-active);
    --cirth-underline: var(--cirth-secondary-underline-active);
  }

  :where(a:not([role="button"])).contrast:where(:not(.no-cirth, .no-cirth *)), [role="link"].contrast:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-color: var(--cirth-contrast-text);
    --cirth-underline: var(--cirth-contrast-underline);
  }

  :where(a:not([role="button"])).contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus):where(:not(.no-cirth, .no-cirth *)), [role="link"].contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-color: var(--cirth-contrast-active);
    --cirth-underline: var(--cirth-contrast-underline-active);
  }

  :where(a:not([role="button"])):visited:not(.secondary, .contrast, details.dropdown a, [aria-current]:not([aria-current="false"]), :hover, :active, :focus, nav a, :has(article)):where(:not(.no-cirth, .no-cirth *)) {
    color: var(--cirth-link-visited-color);
  }

  :where(a:not([role="button"])):has(article):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-color: inherit;
  }

  a[role="button"]:where(:not(.no-cirth, .no-cirth *)) {
    display: inline-block;
  }

  button {
    text-transform: none;
    margin: 0;
    font-family: inherit;
  }

  button, [type="submit"], [type="reset"], [type="button"] {
    appearance: auto;
  }

  button:where(:not(.no-cirth, .no-cirth *)), [type="submit"]:where(:not(.no-cirth, .no-cirth *)), [type="reset"]:where(:not(.no-cirth, .no-cirth *)), [type="button"]:where(:not(.no-cirth, .no-cirth *)), [role="button"]:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-background-color: var(--cirth-primary-surface);
    --cirth-border-color: var(--cirth-primary-border);
    --cirth-color: var(--cirth-primary-on-surface);
    --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
    max-width: 100%;
    min-block-size: max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
    padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
    border: var(--cirth-border-width) solid var(--cirth-border-color);
    border-radius: var(--cirth-border-radius);
    background-color: var(--cirth-background-color);
    box-shadow: var(--cirth-box-shadow);
    color: var(--cirth-color);
    font-weight: var(--cirth-font-weight);
    font-size: var(--cirth-font-size-md);
    line-height: var(--cirth-line-height);
    text-align: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color var(--cirth-transition), border-color var(--cirth-transition), color var(--cirth-transition), box-shadow var(--cirth-transition);
    outline: none;
    text-decoration: none;
  }

  [type="file"]:where(:not(.no-cirth, .no-cirth *))::file-selector-button {
    --cirth-background-color: var(--cirth-primary-surface);
    --cirth-border-color: var(--cirth-primary-border);
    --cirth-color: var(--cirth-primary-on-surface);
    --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
    max-width: 100%;
    min-block-size: max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
    padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
    border: var(--cirth-border-width) solid var(--cirth-border-color);
    border-radius: var(--cirth-border-radius);
    background-color: var(--cirth-background-color);
    box-shadow: var(--cirth-box-shadow);
    color: var(--cirth-color);
    font-weight: var(--cirth-font-weight);
    font-size: var(--cirth-font-size-md);
    line-height: var(--cirth-line-height);
    text-align: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color var(--cirth-transition), border-color var(--cirth-transition), color var(--cirth-transition), box-shadow var(--cirth-transition);
    outline: none;
    text-decoration: none;
  }

  button[aria-current]:not([aria-current="false"]):where(:not(.no-cirth, .no-cirth *)), button:is(:hover, :active, :focus):where(:not(.no-cirth, .no-cirth *)), [type="submit"][aria-current]:not([aria-current="false"]):where(:not(.no-cirth, .no-cirth *)), [type="submit"]:is(:hover, :active, :focus):where(:not(.no-cirth, .no-cirth *)), [type="reset"][aria-current]:not([aria-current="false"]):where(:not(.no-cirth, .no-cirth *)), [type="reset"]:is(:hover, :active, :focus):where(:not(.no-cirth, .no-cirth *)), [type="button"][aria-current]:not([aria-current="false"]):where(:not(.no-cirth, .no-cirth *)), [type="button"]:is(:hover, :active, :focus):where(:not(.no-cirth, .no-cirth *)), [role="button"][aria-current]:not([aria-current="false"]):where(:not(.no-cirth, .no-cirth *)), [role="button"]:is(:hover, :active, :focus):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-background-color: var(--cirth-primary-surface-active);
    --cirth-border-color: var(--cirth-primary-border-active);
    --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
    --cirth-color: var(--cirth-primary-on-surface);
  }

  [type="file"]:where(:not(.no-cirth, .no-cirth *))::file-selector-button:is() {
    --cirth-background-color: var(--cirth-primary-surface-active);
    --cirth-border-color: var(--cirth-primary-border-active);
    --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
    --cirth-color: var(--cirth-primary-on-surface);
  }

  [type="file"]:where(:not(.no-cirth, .no-cirth *))::file-selector-button:is(:hover, :active, :focus) {
    --cirth-background-color: var(--cirth-primary-surface-active);
    --cirth-border-color: var(--cirth-primary-border-active);
    --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
    --cirth-color: var(--cirth-primary-on-surface);
  }

  button:active:where(:not(.no-cirth, .no-cirth *)), [type="submit"]:active:where(:not(.no-cirth, .no-cirth *)), [type="reset"]:active:where(:not(.no-cirth, .no-cirth *)), [type="button"]:active:where(:not(.no-cirth, .no-cirth *)), [role="button"]:active:where(:not(.no-cirth, .no-cirth *)) {
    background-image: linear-gradient(#0000001f 0 0);
  }

  [type="file"]:where(:not(.no-cirth, .no-cirth *))::file-selector-button:active {
    background-image: linear-gradient(#0000001f 0 0);
  }

  button:focus-visible:where(:not(.no-cirth, .no-cirth *)), button[aria-current]:not([aria-current="false"]):focus-visible:where(:not(.no-cirth, .no-cirth *)), [type="submit"]:focus-visible:where(:not(.no-cirth, .no-cirth *)), [type="submit"][aria-current]:not([aria-current="false"]):focus-visible:where(:not(.no-cirth, .no-cirth *)), [type="reset"]:focus-visible:where(:not(.no-cirth, .no-cirth *)), [type="reset"][aria-current]:not([aria-current="false"]):focus-visible:where(:not(.no-cirth, .no-cirth *)), [type="button"]:focus-visible:where(:not(.no-cirth, .no-cirth *)), [type="button"][aria-current]:not([aria-current="false"]):focus-visible:where(:not(.no-cirth, .no-cirth *)), [role="button"]:focus-visible:where(:not(.no-cirth, .no-cirth *)), [role="button"][aria-current]:not([aria-current="false"]):focus-visible:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
      0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
    outline: var(--cirth-outline-width) solid transparent;
  }

  [type="submit"]:where(:not(.no-cirth, .no-cirth *)), [type="reset"]:where(:not(.no-cirth, .no-cirth *)), [type="button"]:where(:not(.no-cirth, .no-cirth *)) {
    margin-bottom: var(--cirth-spacing);
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).secondary:where(:not(.no-cirth, .no-cirth *)), [type="reset"]:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-background-color: var(--cirth-secondary-surface);
    --cirth-border-color: var(--cirth-secondary-border);
    --cirth-color: var(--cirth-secondary-on-surface);
    cursor: pointer;
  }

  [type="file"]:where(:not(.no-cirth, .no-cirth *))::file-selector-button {
    --cirth-background-color: var(--cirth-secondary-surface);
    --cirth-border-color: var(--cirth-secondary-border);
    --cirth-color: var(--cirth-secondary-on-surface);
    cursor: pointer;
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus):where(:not(.no-cirth, .no-cirth *)), [type="reset"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-background-color: var(--cirth-secondary-surface-active);
    --cirth-border-color: var(--cirth-secondary-border-active);
    --cirth-color: var(--cirth-secondary-on-surface);
  }

  [type="file"]:where(:not(.no-cirth, .no-cirth *))::file-selector-button:is(:hover, :active, :focus) {
    --cirth-background-color: var(--cirth-secondary-surface-active);
    --cirth-border-color: var(--cirth-secondary-border-active);
    --cirth-color: var(--cirth-secondary-on-surface);
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).secondary:focus-visible:where(:not(.no-cirth, .no-cirth *)), :is(button, [type="submit"], [type="button"], [role="button"]).secondary[aria-current]:not([aria-current="false"]):focus-visible:where(:not(.no-cirth, .no-cirth *)), [type="reset"]:focus-visible:where(:not(.no-cirth, .no-cirth *)), [type="reset"][aria-current]:not([aria-current="false"]):focus-visible:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
      0 0 0 var(--cirth-outline-width) var(--cirth-secondary-focus);
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).contrast:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-background-color: var(--cirth-contrast-surface);
    --cirth-border-color: var(--cirth-contrast-border);
    --cirth-color: var(--cirth-contrast-on-surface);
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-background-color: var(--cirth-contrast-surface-active);
    --cirth-border-color: var(--cirth-contrast-border-active);
    --cirth-color: var(--cirth-contrast-on-surface);
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).contrast:focus-visible:where(:not(.no-cirth, .no-cirth *)), :is(button, [type="submit"], [type="button"], [role="button"]).contrast[aria-current]:not([aria-current="false"]):focus-visible:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
      0 0 0 var(--cirth-outline-width) var(--cirth-contrast-focus);
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).danger:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-background-color: light-dark(var(--cirth-error), color-mix(in oklch, var(--cirth-error) 55%, black));
    --cirth-border-color: var(--cirth-background-color);
    --cirth-color: var(--cirth-primary-on-surface);
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).danger:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-background-color: light-dark(color-mix(in oklch, var(--cirth-error) 85%, black), color-mix(in oklch, var(--cirth-error) 50%, black));
    --cirth-border-color: var(--cirth-background-color);
    --cirth-color: var(--cirth-primary-on-surface);
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).danger:focus-visible:where(:not(.no-cirth, .no-cirth *)), :is(button, [type="submit"], [type="button"], [role="button"]).danger[aria-current]:not([aria-current="false"]):focus-visible:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
      0
        0
        0
        var(--cirth-outline-width)
        var(--cirth-form-element-invalid-focus-color);
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).outline:where(:not(.no-cirth, .no-cirth *)), [type="reset"].outline:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-background-color: var(--cirth-form-element-background-color);
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).ghost:where(:not(.no-cirth, .no-cirth *)), [type="reset"].ghost:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-background-color: transparent;
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).outline:where(:not(.no-cirth, .no-cirth *)), [type="reset"].outline:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-color: var(--cirth-primary-text);
    --cirth-border-color: var(--cirth-primary-text);
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus):where(:not(.no-cirth, .no-cirth *)), [type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-background-color: color-mix(in oklch,
      var(--cirth-primary-text) 12%,
      var(--cirth-form-element-background-color));
    --cirth-color: var(--cirth-primary-active);
    --cirth-border-color: var(--cirth-primary-active);
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary:where(:not(.no-cirth, .no-cirth *)), [type="reset"].outline.secondary:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-color: var(--cirth-secondary-text);
    --cirth-border-color: var(--cirth-secondary-text);
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus):where(:not(.no-cirth, .no-cirth *)), [type="reset"].outline.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-background-color: color-mix(in oklch,
      var(--cirth-secondary-text) 12%,
      var(--cirth-form-element-background-color));
    --cirth-color: var(--cirth-secondary-active);
    --cirth-border-color: var(--cirth-secondary-active);
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast:where(:not(.no-cirth, .no-cirth *)), [type="reset"].outline.contrast:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-color: var(--cirth-contrast-text);
    --cirth-border-color: var(--cirth-contrast-text);
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus):where(:not(.no-cirth, .no-cirth *)), [type="reset"].outline.contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-background-color: color-mix(in oklch,
      var(--cirth-contrast-text) 12%,
      var(--cirth-form-element-background-color));
    --cirth-color: var(--cirth-contrast-active);
    --cirth-border-color: var(--cirth-contrast-active);
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).ghost:where(:not(.no-cirth, .no-cirth *)), [type="reset"].ghost:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-color: var(--cirth-primary-text);
    --cirth-border-color: transparent;
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).ghost:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus):where(:not(.no-cirth, .no-cirth *)), [type="reset"].ghost:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-background-color: color-mix(in oklch,
      var(--cirth-primary-text) 12%,
      transparent);
    --cirth-color: var(--cirth-primary-active);
    --cirth-border-color: transparent;
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).ghost.secondary:where(:not(.no-cirth, .no-cirth *)), [type="reset"].ghost.secondary:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-color: var(--cirth-secondary-text);
    --cirth-border-color: transparent;
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).ghost.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus):where(:not(.no-cirth, .no-cirth *)), [type="reset"].ghost.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-background-color: color-mix(in oklch,
      var(--cirth-secondary-text) 12%,
      transparent);
    --cirth-color: var(--cirth-secondary-active);
    --cirth-border-color: transparent;
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).ghost.contrast:where(:not(.no-cirth, .no-cirth *)), [type="reset"].ghost.contrast:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-color: var(--cirth-contrast-text);
    --cirth-border-color: transparent;
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).ghost.contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus):where(:not(.no-cirth, .no-cirth *)), [type="reset"].ghost.contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-background-color: color-mix(in oklch,
      var(--cirth-contrast-text) 12%,
      transparent);
    --cirth-color: var(--cirth-contrast-active);
    --cirth-border-color: transparent;
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).outline.danger:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-background-color: var(--cirth-form-element-background-color);
    --cirth-color: var(--cirth-error-text);
    --cirth-border-color: var(--cirth-error-border);
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).outline.danger:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-background-color: var(--cirth-error-surface);
    --cirth-color: var(--cirth-error-text);
    --cirth-border-color: var(--cirth-error-active);
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).ghost.danger:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-background-color: transparent;
    --cirth-color: var(--cirth-error-text);
    --cirth-border-color: transparent;
  }

  :is(button, [type="submit"], [type="button"], [role="button"]).ghost.danger:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-background-color: color-mix(in oklch,
      var(--cirth-error) 12%,
      transparent);
    --cirth-color: var(--cirth-error-text);
    --cirth-border-color: transparent;
  }

  :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled]:where(:not(.no-cirth, .no-cirth *)), :where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):where(:not(.no-cirth, .no-cirth *)) {
    opacity: var(--cirth-opacity-disabled);
    pointer-events: none;
  }

  form:has(:user-invalid) :is(button:not([type="button"], [type="reset"]), [type="submit"]):where(:not(.no-cirth, .no-cirth *)) {
    filter: grayscale();
  }

  :where(table) {
    border-collapse: collapse;
    text-indent: 0;
    border-color: currentColor;
    width: 100%;
  }

  caption:where(:not(.no-cirth, .no-cirth *)) {
    color: var(--cirth-muted-color);
    font-size: var(--cirth-font-size-sm);
    line-height: var(--cirth-line-height-normal);
    text-align: start;
    padding-block-end: calc(var(--cirth-spacing) * .5);
  }

  th:where(:not(.no-cirth, .no-cirth *)), td:where(:not(.no-cirth, .no-cirth *)) {
    padding: calc(var(--cirth-spacing) / 2) var(--cirth-spacing);
    border-bottom: var(--cirth-border-width) solid var(--cirth-table-border-color);
    font-weight: var(--cirth-font-weight);
    font-variant-numeric: tabular-nums;
    text-align: start;
  }

  tfoot th:where(:not(.no-cirth, .no-cirth *)), tfoot td:where(:not(.no-cirth, .no-cirth *)) {
    border-top: var(--cirth-border-width) solid var(--cirth-table-border-color);
    border-bottom: 0;
  }

  table.controls :is(th, td):has( > :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea, button)):where(:not(.no-cirth, .no-cirth *)) {
    padding: calc(var(--cirth-spacing) * .25);
  }

  table.controls :is(th, td) > :is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea, button):where(:not(.no-cirth, .no-cirth *)) {
    margin: 0;
  }

  table.controls :is(th, td) > select:where(:not(.no-cirth, .no-cirth *)) {
    min-inline-size: max-content;
  }

  table.striped tbody tr:nth-child(odd) th:where(:not(.no-cirth, .no-cirth *)), table.striped tbody tr:nth-child(odd) td:where(:not(.no-cirth, .no-cirth *)) {
    background-color: var(--cirth-table-row-stripped-background-color);
  }

  :where(audio, canvas, iframe, img, svg, video) {
    vertical-align: middle;
  }

  :where(iframe) {
    border-style: none;
  }

  img:where(:not(.no-cirth, .no-cirth *)) {
    max-width: 100%;
  }

  img:where(:not([height]), [width][height]):where(:not(.no-cirth, .no-cirth *)) {
    height: auto;
  }

  :where(svg:not([fill])):where(:not(.no-cirth, .no-cirth *)) {
    fill: currentColor;
  }

  pre, code, kbd, samp {
    font-size: .875em;
    font-family: var(--cirth-font-family);
  }

  pre code, pre samp {
    font-size: inherit;
    font-family: inherit;
  }

  pre {
    overflow: auto;
  }

  pre:where(:not(.no-cirth, .no-cirth *)), code:where(:not(.no-cirth, .no-cirth *)), kbd:where(:not(.no-cirth, .no-cirth *)), samp:where(:not(.no-cirth, .no-cirth *)) {
    border-radius: var(--cirth-border-radius);
    background: var(--cirth-code-background-color);
    color: var(--cirth-code-color);
    font-weight: var(--cirth-font-weight);
    line-height: initial;
  }

  code:where(:not(.no-cirth, .no-cirth *)), kbd:where(:not(.no-cirth, .no-cirth *)), samp:where(:not(.no-cirth, .no-cirth *)) {
    max-inline-size: 100%;
    padding: var(--cirth-space-1) var(--cirth-space-2);
    overflow-wrap: anywhere;
    display: inline-block;
  }

  pre:where(:not(.no-cirth, .no-cirth *)) {
    margin-bottom: var(--cirth-spacing);
    border: var(--cirth-border-width) solid var(--cirth-card-border-color);
    display: block;
    overflow-x: auto;
  }

  pre:focus-visible:where(:not(.no-cirth, .no-cirth *)) {
    outline: var(--cirth-outline-width) solid var(--cirth-primary-focus);
  }

  pre > code:where(:not(.no-cirth, .no-cirth *)), pre > samp:where(:not(.no-cirth, .no-cirth *)) {
    padding: var(--cirth-spacing);
    line-height: var(--cirth-line-height);
    background: none;
    display: block;
  }

  kbd:where(:not(.no-cirth, .no-cirth *)) {
    background-color: var(--cirth-code-kbd-background-color);
    color: var(--cirth-code-kbd-color);
    vertical-align: baseline;
  }

  var:where(:not(.no-cirth, .no-cirth *)) {
    color: var(--cirth-code-color);
    font-size: .875em;
    font-style: italic;
    font-family: var(--cirth-font-family);
  }

  figure:where(:not(.no-cirth, .no-cirth *)) {
    margin: 0;
    padding: 0;
    display: block;
  }

  figure figcaption:where(:not(.no-cirth, .no-cirth *)) {
    padding: calc(var(--cirth-spacing) * .5) 0;
    color: var(--cirth-muted-color);
    font-size: var(--cirth-font-size-sm);
    line-height: var(--cirth-line-height-normal);
  }

  hr:where(:not(.no-cirth, .no-cirth *)) {
    height: 0;
    margin: var(--cirth-typography-spacing-vertical) 0;
    border: 0;
    border-top: var(--cirth-border-width-1) solid var(--cirth-muted-border-color);
    color: inherit;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none;
  }

  input, optgroup, select, textarea {
    font-size: var(--cirth-font-size-md);
    line-height: var(--cirth-line-height);
    letter-spacing: inherit;
    margin: 0;
    font-family: inherit;
  }

  legend {
    padding: 0;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [type="search"] {
    appearance: textfield;
    outline-offset: -2px;
  }

  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::file-selector-button {
    appearance: auto;
    font: inherit;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  [type="file"], [type="range"] {
    border-width: 0;
    padding: 0;
  }

  input:not([type="checkbox"], [type="radio"], [type="range"]):where(:not(.no-cirth, .no-cirth *)) {
    height: max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
  }

  select:where(:not(.no-cirth, .no-cirth *)), textarea:where(:not(.no-cirth, .no-cirth *)) {
    min-block-size: max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
  }

  fieldset:where(:not(.no-cirth, .no-cirth *)) {
    width: 100%;
    margin: 0;
    margin-bottom: var(--cirth-spacing);
    border: 0;
    padding: 0;
  }

  label:where(:not(.no-cirth, .no-cirth *)), fieldset legend:where(:not(.no-cirth, .no-cirth *)) {
    margin-bottom: calc(var(--cirth-spacing) * .5);
    color: var(--cirth-color);
    font-weight: var(--cirth-form-label-font-weight, var(--cirth-font-weight));
    display: block;
  }

  input:not([type="checkbox"], [type="radio"], [size]):where(:not(.no-cirth, .no-cirth *)), button[type="submit"]:where(:not(.no-cirth, .no-cirth *)), select:where(:not(.no-cirth, .no-cirth *)), textarea:where(:not(.no-cirth, .no-cirth *)) {
    width: 100%;
  }

  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):where(:not(.no-cirth, .no-cirth *)), select:where(:not(.no-cirth, .no-cirth *)), textarea:where(:not(.no-cirth, .no-cirth *)) {
    appearance: none;
    padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
  }

  input:where(:not(.no-cirth, .no-cirth *)), select:where(:not(.no-cirth, .no-cirth *)), textarea:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-background-color: var(--cirth-form-element-background-color);
    --cirth-border-color: var(--cirth-form-element-border-color);
    --cirth-color: var(--cirth-form-element-color);
    --cirth-box-shadow: none;
    border: var(--cirth-border-width) solid var(--cirth-border-color);
    border-radius: var(--cirth-border-radius);
    background-color: var(--cirth-background-color);
    box-shadow: var(--cirth-box-shadow);
    color: var(--cirth-color);
    font-weight: var(--cirth-font-weight);
    transition: background-color var(--cirth-transition), border-color var(--cirth-transition), color var(--cirth-transition), box-shadow var(--cirth-transition);
    outline: none;
  }

  :where(input, textarea)[readonly]:where(:not(.no-cirth, .no-cirth *)) {
    background-color: var(--cirth-card-sectioning-background-color);
    border-style: dashed;
  }

  input[type="number"][readonly]:where(:not(.no-cirth, .no-cirth *)) {
    appearance: textfield;
  }

  input[type="number"][readonly]:where(:not(.no-cirth, .no-cirth *))::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type="number"][readonly]:where(:not(.no-cirth, .no-cirth *))::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]):is(:active, :focus):where(:not(.no-cirth, .no-cirth *)), :where(select, textarea):not([readonly]):is(:active, :focus):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-background-color: var(--cirth-form-element-active-background-color);
  }

  input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]):is(:active, :focus):where(:not(.no-cirth, .no-cirth *)), :where(select, textarea):not([readonly]):is(:active, :focus):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-border-color: var(--cirth-form-element-active-border-color);
  }

  @media (hover: hover) and (pointer: fine) {
    input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="file"], [readonly]):hover:not(:active, :focus, :disabled, [aria-invalid], :user-invalid):where(:not(.no-cirth, .no-cirth *)) {
      --cirth-border-color: color-mix(in oklch,
        var(--cirth-form-element-border-color) 65%,
        var(--cirth-color));
    }

    :where(select, textarea):not([readonly]):hover:not(:active, :focus, :disabled, [aria-invalid], :user-invalid):where(:not(.no-cirth, .no-cirth *)) {
      --cirth-border-color: color-mix(in oklch,
        var(--cirth-form-element-border-color) 65%,
        var(--cirth-color));
    }
  }

  input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus:where(:not(.no-cirth, .no-cirth *)), :where(select, textarea):not([readonly]):focus:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
      var(--cirth-form-element-focus-color);
    outline: var(--cirth-outline-width) solid transparent;
  }

  input:not([type="submit"], [type="button"], [type="reset"])[disabled]:where(:not(.no-cirth, .no-cirth *)), select[disabled]:where(:not(.no-cirth, .no-cirth *)), textarea[disabled]:where(:not(.no-cirth, .no-cirth *)), label[aria-disabled="true"]:where(:not(.no-cirth, .no-cirth *)), :where(fieldset[disabled]) :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea):where(:not(.no-cirth, .no-cirth *)) {
    opacity: var(--cirth-form-element-disabled-opacity);
    pointer-events: none;
  }

  label[aria-disabled="true"] input[disabled]:where(:not(.no-cirth, .no-cirth *)) {
    opacity: 1;
  }

  :where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"]):is([aria-invalid], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)):where(:not(.no-cirth, .no-cirth *)) {
    padding-inline: var(--cirth-form-element-spacing-horizontal) calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
    background-position: center right var(--cirth-space-3);
    background-size: var(--cirth-font-size-md) auto;
    background-repeat: no-repeat;
  }

  :where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid="false"]:not(select):where(:not(.no-cirth, .no-cirth *)) {
    background-image: var(--cirth-icon-valid);
  }

  :where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"]):is([aria-invalid="true"], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)):not(select):where(:not(.no-cirth, .no-cirth *)) {
    background-image: var(--cirth-icon-invalid);
  }

  :where(input, select, textarea)[aria-invalid="false"]:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-border-color: var(--cirth-form-element-valid-border-color);
  }

  :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-border-color: var(--cirth-form-element-valid-active-border-color);
  }

  :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not([type="checkbox"], [type="radio"]):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
      var(--cirth-form-element-valid-focus-color);
  }

  :where(input, select, textarea):is([aria-invalid="true"], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-border-color: var(--cirth-form-element-invalid-border-color);
  }

  :where(input, select, textarea):is([aria-invalid="true"], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)):is(:active, :focus):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-border-color: var(--cirth-form-element-invalid-active-border-color);
  }

  :where(input, select, textarea):is([aria-invalid="true"], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)):is(:active, :focus):not([type="checkbox"], [type="radio"]):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
      var(--cirth-form-element-invalid-focus-color);
  }

  [dir="rtl"] :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is([aria-invalid], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)):where(:not(.no-cirth, .no-cirth *)) {
    background-position: center left var(--cirth-space-3);
  }

  [dir="rtl"] textarea:is([aria-invalid], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)):where(:not(.no-cirth, .no-cirth *)) {
    background-position: top left var(--cirth-space-3);
  }

  input:where(:not(.no-cirth, .no-cirth *))::placeholder, textarea:where(:not(.no-cirth, .no-cirth *))::placeholder, select:invalid:where(:not(.no-cirth, .no-cirth *)) {
    color: var(--cirth-form-element-placeholder-color);
    opacity: 1;
  }

  input:not([type="checkbox"], [type="radio"]):where(:not(.no-cirth, .no-cirth *)), select:where(:not(.no-cirth, .no-cirth *)), textarea:where(:not(.no-cirth, .no-cirth *)) {
    margin-bottom: var(--cirth-spacing);
  }

  select:not([multiple], [size]):where(:not(.no-cirth, .no-cirth *)) {
    padding-inline: var(--cirth-form-element-spacing-horizontal) calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
    background-image: var(--cirth-icon-chevron);
    background-position: center right var(--cirth-space-3);
    background-size: var(--cirth-font-size-md) auto;
    background-repeat: no-repeat;
  }

  select[multiple] option:checked:where(:not(.no-cirth, .no-cirth *)) {
    background: var(--cirth-form-element-selected-background-color);
    color: var(--cirth-form-element-color);
  }

  [dir="rtl"] select:not([multiple], [size]):where(:not(.no-cirth, .no-cirth *)) {
    background-position: center left var(--cirth-space-3);
  }

  textarea:where(:not(.no-cirth, .no-cirth *)) {
    resize: vertical;
    display: block;
  }

  textarea:not([rows]):where(:not(.no-cirth, .no-cirth *)) {
    min-block-size: calc(4lh + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
  }

  textarea:is([aria-invalid], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-icon-height: calc(var(--cirth-font-size-md) * var(--cirth-line-height) +
        var(--cirth-form-element-spacing-vertical) * 2 +
        (var(--cirth-border-width) * 2));
    background-position: top right var(--cirth-space-3);
    background-size: var(--cirth-font-size-md) var(--cirth-icon-height);
  }

  :where(input, select, textarea, fieldset, .row) + small:where(:not(.no-cirth, .no-cirth *)) {
    width: 100%;
    margin-top: calc(var(--cirth-spacing) * -.75);
    margin-bottom: var(--cirth-spacing);
    color: var(--cirth-muted-color);
    display: block;
  }

  :where(input, select, textarea, fieldset, .row)[aria-invalid="false"] + small:where(:not(.no-cirth, .no-cirth *)) {
    color: var(--cirth-ins-color);
  }

  :where(input, select, textarea, fieldset, .row):is([aria-invalid="true"], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)) + small:where(:not(.no-cirth, .no-cirth *)) {
    color: var(--cirth-del-color);
  }

  label > :where(input, select, textarea):where(:not(.no-cirth, .no-cirth *)) {
    margin-top: calc(var(--cirth-spacing) * .25);
  }

  label:has([type="checkbox"], [type="radio"]):where(:not(.no-cirth, .no-cirth *)) {
    cursor: pointer;
    width: fit-content;
  }

  [type="checkbox"]:where(:not(.no-cirth, .no-cirth *)), [type="radio"]:where(:not(.no-cirth, .no-cirth *)) {
    appearance: none;
    margin-top: -.125em;
    border-width: var(--cirth-border-width);
    vertical-align: middle;
    cursor: pointer;
    width: 1.5em;
    height: 1.5em;
    margin-inline-end: .5em;
  }

  [type="checkbox"]:checked:where(:not(.no-cirth, .no-cirth *)), [type="checkbox"]:checked:active:where(:not(.no-cirth, .no-cirth *)), [type="checkbox"]:checked:focus:where(:not(.no-cirth, .no-cirth *)), [type="radio"]:checked:where(:not(.no-cirth, .no-cirth *)), [type="radio"]:checked:active:where(:not(.no-cirth, .no-cirth *)), [type="radio"]:checked:focus:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-background-color: var(--cirth-primary-surface);
    --cirth-border-color: var(--cirth-primary-border);
  }

  [type="checkbox"] ~ label:where(:not(.no-cirth, .no-cirth *)), [type="radio"] ~ label:where(:not(.no-cirth, .no-cirth *)) {
    cursor: pointer;
    margin-bottom: 0;
    display: inline-block;
  }

  [type="checkbox"] ~ label:not(:last-of-type):where(:not(.no-cirth, .no-cirth *)), [type="radio"] ~ label:not(:last-of-type):where(:not(.no-cirth, .no-cirth *)) {
    margin-inline-end: 1em;
  }

  [type="checkbox"]:not([role="switch"]):checked:where(:not(.no-cirth, .no-cirth *)):before, [type="checkbox"]:not([role="switch"]):indeterminate:where(:not(.no-cirth, .no-cirth *)):before {
    background-color: var(--cirth-primary-on-surface);
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    mask-position: center;
    mask-size: .9em;
    mask-repeat: no-repeat;
  }

  @media (forced-colors: active) {
    [type="checkbox"]:not([role="switch"]):checked:where(:not(.no-cirth, .no-cirth *)):before, [type="checkbox"]:not([role="switch"]):indeterminate:where(:not(.no-cirth, .no-cirth *)):before {
      background-color: canvastext;
    }
  }

  [type="checkbox"]:not([role="switch"]):checked:where(:not(.no-cirth, .no-cirth *)):before {
    mask-image: var(--cirth-icon-checkbox);
  }

  [type="checkbox"]:not([role="switch"]):indeterminate:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-background-color: var(--cirth-primary-surface);
    --cirth-border-color: var(--cirth-primary-border);
  }

  [type="checkbox"]:not([role="switch"]):indeterminate:where(:not(.no-cirth, .no-cirth *)):before {
    mask-image: var(--cirth-icon-minus);
  }

  [type="radio"]:where(:not(.no-cirth, .no-cirth *)) {
    border-radius: 50%;
  }

  [type="radio"]:checked:where(:not(.no-cirth, .no-cirth *)), [type="radio"]:checked:active:where(:not(.no-cirth, .no-cirth *)), [type="radio"]:checked:focus:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-background-color: var(--cirth-primary-on-surface);
    border-width: .42em;
  }

  [type="checkbox"][role="switch"]:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-background-color: var(--cirth-switch-background-color);
    --cirth-color: var(--cirth-switch-color);
    border: var(--cirth-border-width) solid var(--cirth-border-color);
    background-color: var(--cirth-background-color);
    border-radius: 1.5em;
    width: 2.7em;
    height: 1.5em;
    line-height: 1.5em;
  }

  [type="checkbox"][role="switch"]:not([aria-invalid]):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-border-color: var(--cirth-switch-background-color);
  }

  [type="checkbox"][role="switch"]:where(:not(.no-cirth, .no-cirth *)):before {
    aspect-ratio: 1;
    background-color: var(--cirth-color);
    height: 100%;
    box-shadow: var(--cirth-switch-thumb-box-shadow);
    content: "";
    transition: margin var(--cirth-duration-fast) var(--cirth-ease-in-out);
    border-radius: 50%;
    display: block;
  }

  [type="checkbox"][role="switch"]:focus:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-background-color: var(--cirth-switch-background-color);
    --cirth-border-color: var(--cirth-switch-background-color);
  }

  [type="checkbox"][role="switch"]:checked:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-background-color: var(--cirth-switch-checked-background-color);
    --cirth-border-color: var(--cirth-switch-checked-background-color);
  }

  [type="checkbox"][role="switch"]:checked:where(:not(.no-cirth, .no-cirth *)):before {
    margin-inline-start: 1.2em;
  }

  [type="checkbox"][role="switch"][disabled]:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-background-color: var(--cirth-border-color);
  }

  [type="checkbox"][aria-invalid="false"]:checked:where(:not(.no-cirth, .no-cirth *)), [type="checkbox"][aria-invalid="false"]:checked:active:where(:not(.no-cirth, .no-cirth *)), [type="checkbox"][aria-invalid="false"]:checked:focus:where(:not(.no-cirth, .no-cirth *)), [type="checkbox"][role="switch"][aria-invalid="false"]:checked:where(:not(.no-cirth, .no-cirth *)), [type="checkbox"][role="switch"][aria-invalid="false"]:checked:active:where(:not(.no-cirth, .no-cirth *)), [type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-background-color: var(--cirth-form-element-valid-border-color);
  }

  [type="checkbox"]:checked[aria-invalid="true"]:where(:not(.no-cirth, .no-cirth *)), [type="checkbox"]:checked:active[aria-invalid="true"]:where(:not(.no-cirth, .no-cirth *)), [type="checkbox"]:checked:focus[aria-invalid="true"]:where(:not(.no-cirth, .no-cirth *)), [type="checkbox"][role="switch"]:checked[aria-invalid="true"]:where(:not(.no-cirth, .no-cirth *)), [type="checkbox"][role="switch"]:checked:active[aria-invalid="true"]:where(:not(.no-cirth, .no-cirth *)), [type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"]:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-background-color: var(--cirth-form-element-invalid-border-color);
  }

  [type="checkbox"][aria-invalid="false"]:checked:where(:not(.no-cirth, .no-cirth *)), [type="checkbox"][aria-invalid="false"]:checked:active:where(:not(.no-cirth, .no-cirth *)), [type="checkbox"][aria-invalid="false"]:checked:focus:where(:not(.no-cirth, .no-cirth *)), [type="radio"][aria-invalid="false"]:checked:where(:not(.no-cirth, .no-cirth *)), [type="radio"][aria-invalid="false"]:checked:active:where(:not(.no-cirth, .no-cirth *)), [type="radio"][aria-invalid="false"]:checked:focus:where(:not(.no-cirth, .no-cirth *)), [type="checkbox"][role="switch"][aria-invalid="false"]:checked:where(:not(.no-cirth, .no-cirth *)), [type="checkbox"][role="switch"][aria-invalid="false"]:checked:active:where(:not(.no-cirth, .no-cirth *)), [type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-border-color: var(--cirth-form-element-valid-border-color);
  }

  [type="checkbox"]:checked[aria-invalid="true"]:where(:not(.no-cirth, .no-cirth *)), [type="checkbox"]:checked:active[aria-invalid="true"]:where(:not(.no-cirth, .no-cirth *)), [type="checkbox"]:checked:focus[aria-invalid="true"]:where(:not(.no-cirth, .no-cirth *)), [type="radio"]:checked[aria-invalid="true"]:where(:not(.no-cirth, .no-cirth *)), [type="radio"]:checked:active[aria-invalid="true"]:where(:not(.no-cirth, .no-cirth *)), [type="radio"]:checked:focus[aria-invalid="true"]:where(:not(.no-cirth, .no-cirth *)), [type="checkbox"][role="switch"]:checked[aria-invalid="true"]:where(:not(.no-cirth, .no-cirth *)), [type="checkbox"][role="switch"]:checked:active[aria-invalid="true"]:where(:not(.no-cirth, .no-cirth *)), [type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"]:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-border-color: var(--cirth-form-element-invalid-border-color);
  }

  [type="color"]:where(:not(.no-cirth, .no-cirth *))::-webkit-color-swatch-wrapper {
    padding: 0;
  }

  [type="color"]:where(:not(.no-cirth, .no-cirth *))::-moz-focus-inner {
    padding: 0;
  }

  [type="color"]:where(:not(.no-cirth, .no-cirth *))::-webkit-color-swatch {
    border-radius: calc(var(--cirth-border-radius) * .5);
    border: 0;
  }

  [type="color"]:where(:not(.no-cirth, .no-cirth *))::-moz-color-swatch {
    border-radius: calc(var(--cirth-border-radius) * .5);
    border: 0;
  }

  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-icon-position: var(--cirth-space-3);
    --cirth-icon-width: var(--cirth-font-size-md);
    min-width: 0;
    background-image: var(--cirth-icon-date);
    background-position: center right var(--cirth-icon-position);
    background-size: var(--cirth-icon-width) auto;
    background-repeat: no-repeat;
    padding-inline-end: calc(var(--cirth-icon-width) + var(--cirth-icon-position));
  }

  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="time"]:where(:not(.no-cirth, .no-cirth *)) {
    background-image: var(--cirth-icon-time);
  }

  :where(:not(.no-cirth, .no-cirth *))::-webkit-date-and-time-value {
    text-align: inherit;
  }

  :where(:not(.no-cirth, .no-cirth *))::-webkit-datetime-edit {
    padding-block: 0;
  }

  [type="date"]:where(:not(.no-cirth, .no-cirth *))::-webkit-calendar-picker-indicator {
    width: var(--cirth-icon-width);
    margin-inline: var(--cirth-icon-position) calc(var(--cirth-icon-width) * -1);
    opacity: 0;
  }

  [type="datetime-local"]:where(:not(.no-cirth, .no-cirth *))::-webkit-calendar-picker-indicator {
    width: var(--cirth-icon-width);
    margin-inline: var(--cirth-icon-position) calc(var(--cirth-icon-width) * -1);
    opacity: 0;
  }

  [type="month"]:where(:not(.no-cirth, .no-cirth *))::-webkit-calendar-picker-indicator {
    width: var(--cirth-icon-width);
    margin-inline: var(--cirth-icon-position) calc(var(--cirth-icon-width) * -1);
    opacity: 0;
  }

  [type="time"]:where(:not(.no-cirth, .no-cirth *))::-webkit-calendar-picker-indicator {
    width: var(--cirth-icon-width);
    margin-inline: var(--cirth-icon-position) calc(var(--cirth-icon-width) * -1);
    opacity: 0;
  }

  [type="week"]:where(:not(.no-cirth, .no-cirth *))::-webkit-calendar-picker-indicator {
    width: var(--cirth-icon-width);
    margin-inline: var(--cirth-icon-position) calc(var(--cirth-icon-width) * -1);
    opacity: 0;
  }

  @supports not selector(::-webkit-calendar-picker-indicator) {
    input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):is([type="date"], [type="datetime-local"]):where(:not(.no-cirth, .no-cirth *)) {
      color: #0000;
      -webkit-text-fill-color: var(--cirth-form-element-color);
    }
  }

  [dir="rtl"] :is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]):where(:not(.no-cirth, .no-cirth *)) {
    background-position: center left var(--cirth-icon-position);
    text-align: right;
  }

  [type="file"]:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-color: var(--cirth-muted-color);
    padding: calc(var(--cirth-form-element-spacing-vertical) * .5) 0;
    background: none;
    border: 0;
    border-radius: 0;
    margin-inline-start: calc(var(--cirth-outline-width) * -1);
    padding-inline-start: var(--cirth-outline-width);
  }

  [type="file"]:where(:not(.no-cirth, .no-cirth *))::file-selector-button {
    min-block-size: 0;
    padding: calc(var(--cirth-form-element-spacing-vertical) * .5) var(--cirth-form-element-spacing-horizontal);
    margin-inline-end: calc(var(--cirth-spacing) / 2);
  }

  [type="file"]:is(:hover, :active, :focus):where(:not(.no-cirth, .no-cirth *))::file-selector-button {
    --cirth-background-color: var(--cirth-secondary-surface-active);
    --cirth-border-color: var(--cirth-secondary-border-active);
  }

  [type="file"]:focus:where(:not(.no-cirth, .no-cirth *))::file-selector-button {
    --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
      0 0 0 var(--cirth-outline-width) var(--cirth-secondary-focus);
  }

  [type="range"]:where(:not(.no-cirth, .no-cirth *)) {
    appearance: none;
    width: 100%;
    height: max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
    background: none;
  }

  [type="range"]:where(:not(.no-cirth, .no-cirth *))::-webkit-slider-runnable-track {
    border-radius: var(--cirth-border-radius);
    background-color: var(--cirth-range-border-color);
    width: 100%;
    height: .375rem;
    transition: background-color var(--cirth-transition), box-shadow var(--cirth-transition);
  }

  [type="range"]:where(:not(.no-cirth, .no-cirth *))::-moz-range-track {
    border-radius: var(--cirth-border-radius);
    background-color: var(--cirth-range-border-color);
    width: 100%;
    height: .375rem;
    transition: background-color var(--cirth-transition), box-shadow var(--cirth-transition);
  }

  [type="range"]:where(:not(.no-cirth, .no-cirth *))::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: var(--cirth-border-width-2) solid var(--cirth-range-thumb-border-color);
    background-color: var(--cirth-range-thumb-color);
    cursor: pointer;
    width: 1.25rem;
    height: 1.25rem;
    transition: background-color var(--cirth-transition), transform var(--cirth-transition);
    border-radius: 50%;
    margin-top: -.4375rem;
  }

  [type="range"]:where(:not(.no-cirth, .no-cirth *))::-moz-range-thumb {
    border: var(--cirth-border-width-2) solid var(--cirth-range-thumb-border-color);
    background-color: var(--cirth-range-thumb-color);
    cursor: pointer;
    width: 1.25rem;
    height: 1.25rem;
    transition: background-color var(--cirth-transition), transform var(--cirth-transition);
    border-radius: 50%;
    margin-top: -.4375rem;
  }

  [type="range"]:active:where(:not(.no-cirth, .no-cirth *)), [type="range"]:focus-within:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-range-border-color: var(--cirth-range-active-border-color);
    --cirth-range-thumb-color: var(--cirth-range-thumb-active-color);
  }

  @media (hover: hover) and (pointer: fine) {
    [type="range"]:hover:not(:active, :focus, :disabled):where(:not(.no-cirth, .no-cirth *)) {
      --cirth-range-border-color: var(--cirth-range-active-border-color);
      --cirth-range-thumb-color: var(--cirth-secondary-active);
    }
  }

  [type="range"]:focus-visible:where(:not(.no-cirth, .no-cirth *)) {
    outline: var(--cirth-outline-width) solid var(--cirth-primary-focus);
    outline-offset: var(--cirth-space-1);
  }

  [type="range"]:active:where(:not(.no-cirth, .no-cirth *))::-webkit-slider-thumb {
    transform: scale(1.25);
  }

  [type="range"]:active:where(:not(.no-cirth, .no-cirth *))::-moz-range-thumb {
    transform: scale(1.25);
  }

  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"]:where(:not(.no-cirth, .no-cirth *)) {
    background-image: var(--cirth-icon-search);
    background-position: center left var(--cirth-form-element-spacing-horizontal);
    background-repeat: no-repeat;
    background-size: 1rem;
    padding-inline-start: calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
  }

  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid]:where(:not(.no-cirth, .no-cirth *)) {
    background-position: center left var(--cirth-form-element-spacing-horizontal), center right var(--cirth-space-3);
    padding-inline-start: calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
  }

  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="false"]:where(:not(.no-cirth, .no-cirth *)) {
    background-image: var(--cirth-icon-search), var(--cirth-icon-valid);
  }

  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="true"]:where(:not(.no-cirth, .no-cirth *)) {
    background-image: var(--cirth-icon-search), var(--cirth-icon-invalid);
  }

  [dir="rtl"] :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"]:where(:not(.no-cirth, .no-cirth *)) {
    background-position: center right var(--cirth-form-element-spacing-horizontal);
  }

  [dir="rtl"] :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid]:where(:not(.no-cirth, .no-cirth *)) {
    background-position: center right var(--cirth-form-element-spacing-horizontal), center left var(--cirth-space-3);
  }

  fieldset.segmented:where(:not(.no-cirth, .no-cirth *)) {
    flex-wrap: wrap;
    width: fit-content;
    max-width: 100%;
    display: flex;
  }

  fieldset.segmented > label:where(:not(.no-cirth, .no-cirth *)) {
    width: auto;
    min-block-size: max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
    padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
    border: var(--cirth-border-width) solid var(--cirth-form-element-border-color);
    font-weight: var(--cirth-font-weight);
    align-items: center;
    margin: 0;
    display: inline-flex;
    position: relative;
  }

  fieldset.segmented > label + label:where(:not(.no-cirth, .no-cirth *)) {
    margin-inline-start: calc(var(--cirth-border-width) * -1);
  }

  fieldset.segmented > label:first-of-type:where(:not(.no-cirth, .no-cirth *)) {
    border-start-start-radius: var(--cirth-border-radius);
    border-end-start-radius: var(--cirth-border-radius);
  }

  fieldset.segmented > label:last-of-type:where(:not(.no-cirth, .no-cirth *)) {
    border-start-end-radius: var(--cirth-border-radius);
    border-end-end-radius: var(--cirth-border-radius);
  }

  fieldset.segmented > label:has(:checked):where(:not(.no-cirth, .no-cirth *)) {
    z-index: 1;
    border-color: var(--cirth-primary-border);
    background-color: var(--cirth-primary-surface);
    color: var(--cirth-primary-on-surface);
  }

  fieldset.segmented > label:has(:focus-visible):where(:not(.no-cirth, .no-cirth *)) {
    z-index: 2;
    outline: var(--cirth-outline-width) solid var(--cirth-primary-focus);
    outline-offset: var(--cirth-outline-width);
  }

  fieldset.segmented > label:has(:disabled):where(:not(.no-cirth, .no-cirth *)) {
    opacity: var(--cirth-form-element-disabled-opacity);
    cursor: not-allowed;
  }

  fieldset.segmented > label:has(:disabled) :disabled:where(:not(.no-cirth, .no-cirth *)) {
    opacity: 1;
  }

  details:where(:not(.no-cirth, .no-cirth *)) {
    margin-bottom: var(--cirth-spacing);
  }

  details summary:where(:not(.no-cirth, .no-cirth *)) {
    line-height: var(--cirth-line-height-normal);
    cursor: pointer;
    transition: color var(--cirth-transition);
    list-style-type: none;
  }

  @media (hover: hover) and (pointer: fine) {
    details summary:hover:not([role]):where(:not(.no-cirth, .no-cirth *)) {
      color: var(--cirth-accordion-active-summary-color);
    }
  }

  details summary:not([role]):where(:not(.no-cirth, .no-cirth *)) {
    color: var(--cirth-accordion-close-summary-color);
  }

  details summary:where(:not(.no-cirth, .no-cirth *))::-webkit-details-marker {
    display: none;
  }

  details summary:where(:not(.no-cirth, .no-cirth *))::marker {
    display: none;
  }

  details summary:where(:not(.no-cirth, .no-cirth *)):after {
    width: 1em;
    height: 1lh;
    float: right;
    mask-image: var(--cirth-icon-chevron);
    background-color: currentColor;
    margin-inline-start: calc(var(--cirth-spacing, var(--cirth-space-4)) * .5);
    display: block;
    transform: rotate(0);
    mask-position: 100%;
    mask-size: 1em;
    mask-repeat: no-repeat;
  }

  @media (forced-colors: active) {
    details summary:where(:not(.no-cirth, .no-cirth *)):after {
      background-color: canvastext;
    }
  }

  details summary:where(:not(.no-cirth, .no-cirth *)):after {
    content: "";
    transition: transform var(--cirth-transition);
  }

  details summary:focus:where(:not(.no-cirth, .no-cirth *)) {
    outline: none;
  }

  details summary:focus:not([role]):where(:not(.no-cirth, .no-cirth *)) {
    color: var(--cirth-accordion-active-summary-color);
  }

  details summary:focus-visible:not([role]):where(:not(.no-cirth, .no-cirth *)) {
    outline: var(--cirth-outline-width) solid var(--cirth-primary-focus);
    outline-offset: var(--cirth-space-1);
    color: var(--cirth-accordion-active-summary-color);
  }

  details summary[role="button"]:where(:not(.no-cirth, .no-cirth *)) {
    text-align: start;
    width: 100%;
  }

  details[open] > summary:where(:not(.no-cirth, .no-cirth *)) {
    margin-bottom: var(--cirth-space-2);
  }

  details[open] > summary:not([role]):not(:focus, :hover):where(:not(.no-cirth, .no-cirth *)) {
    color: var(--cirth-accordion-open-summary-color);
  }

  details[open] > summary:where(:not(.no-cirth, .no-cirth *)):after {
    transform: rotate(180deg);
  }

  details:not(.dropdown):where(:not(.no-cirth, .no-cirth *)) {
    border-block-end: var(--cirth-border-width) solid var(--cirth-muted-border-color);
  }

  details:not(.dropdown) > summary:where(:not(.no-cirth, .no-cirth *)) {
    min-block-size: 2.75rem;
    padding-block: var(--cirth-space-2);
    font-weight: var(--cirth-font-weight-semibold);
  }

  details:not(.dropdown)[open]:where(:not(.no-cirth, .no-cirth *)) {
    padding-block-end: var(--cirth-space-4);
  }

  details:not(.dropdown) > :last-child:not(summary):where(:not(.no-cirth, .no-cirth *)) {
    margin-bottom: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    @supports selector(::details-content) {
      details:not(.dropdown):where(:not(.no-cirth, .no-cirth *))::details-content {
        block-size: 0;
        transition: block-size var(--cirth-transition), content-visibility var(--cirth-transition) allow-discrete;
        interpolate-size: allow-keywords;
        overflow: hidden;
      }

      details:not(.dropdown)[open]:where(:not(.no-cirth, .no-cirth *))::details-content {
        block-size: auto;
      }
    }
  }

  [dir="rtl"] details summary:where(:not(.no-cirth, .no-cirth *)):after {
    float: left;
  }

  article:where(:not(.no-cirth, .no-cirth *)) {
    margin-bottom: var(--cirth-block-spacing-vertical);
    padding: var(--cirth-block-spacing-vertical) var(--cirth-block-spacing-horizontal);
    border: var(--cirth-border-width) solid var(--cirth-card-border-color);
    border-radius: var(--cirth-card-border-radius);
    background: var(--cirth-card-background-color);
    box-shadow: var(--cirth-card-box-shadow);
  }

  article > :last-child:not(header, footer):where(:not(.no-cirth, .no-cirth *)), article > :is(header, footer) > :last-child:where(:not(.no-cirth, .no-cirth *)) {
    margin-bottom: 0;
  }

  article > :is(header, footer) :is(h1, h2, h3, h4, h5, h6):where(:not(.no-cirth, .no-cirth *)) {
    margin-top: 0;
  }

  article > header:where(:not(.no-cirth, .no-cirth *)), article > footer:where(:not(.no-cirth, .no-cirth *)) {
    margin-inline: calc(var(--cirth-block-spacing-horizontal) * -1);
    padding: calc(var(--cirth-block-spacing-vertical) - var(--cirth-space-2)) var(--cirth-block-spacing-horizontal);
    background-color: var(--cirth-card-sectioning-background-color);
  }

  article > header:where(:not(.no-cirth, .no-cirth *)) {
    margin-top: calc(var(--cirth-block-spacing-vertical) * -1);
    margin-bottom: var(--cirth-block-spacing-vertical);
    border-bottom: var(--cirth-border-width) solid var(--cirth-card-border-color);
    border-top-right-radius: var(--cirth-card-border-radius);
    border-top-left-radius: var(--cirth-card-border-radius);
  }

  article > footer:where(:not(.no-cirth, .no-cirth *)) {
    margin-top: var(--cirth-block-spacing-vertical);
    margin-bottom: calc(var(--cirth-block-spacing-vertical) * -1);
    border-top: var(--cirth-border-width) solid var(--cirth-card-border-color);
    border-bottom-right-radius: var(--cirth-card-border-radius);
    border-bottom-left-radius: var(--cirth-card-border-radius);
  }

  details.dropdown:where(:not(.no-cirth, .no-cirth *)) {
    border-bottom: none;
    position: relative;
  }

  details.dropdown > summary:where(:not(.no-cirth, .no-cirth *)):after, details.dropdown > button:where(:not(.no-cirth, .no-cirth *)):after, details.dropdown > a:where(:not(.no-cirth, .no-cirth *)):after {
    width: var(--cirth-font-size-md);
    height: calc(var(--cirth-font-size-md) * var(--cirth-line-height, var(--cirth-line-height-normal)));
    float: right;
    transform: rotate(0deg) translateX(calc(var(--cirth-form-element-spacing-horizontal) - var(--cirth-space-3)));
    background-color: var(--cirth-muted-color);
    mask-image: var(--cirth-icon-chevron);
    mask-position: 100%;
    mask-size: var(--cirth-font-size-md) auto;
    margin-inline-start: var(--cirth-space-1);
    display: block;
    mask-repeat: no-repeat;
  }

  @media (forced-colors: active) {
    details.dropdown > summary:where(:not(.no-cirth, .no-cirth *)):after, details.dropdown > button:where(:not(.no-cirth, .no-cirth *)):after, details.dropdown > a:where(:not(.no-cirth, .no-cirth *)):after {
      background-color: canvastext;
    }
  }

  details.dropdown > summary:where(:not(.no-cirth, .no-cirth *)):after, details.dropdown > button:where(:not(.no-cirth, .no-cirth *)):after, details.dropdown > a:where(:not(.no-cirth, .no-cirth *)):after {
    content: "";
  }

  nav details.dropdown:where(:not(.no-cirth, .no-cirth *)) {
    margin-bottom: 0;
  }

  details.dropdown > summary:not([role]):where(:not(.no-cirth, .no-cirth *)) {
    height: max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
    padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
    border: var(--cirth-border-width) solid var(--cirth-form-element-border-color);
    border-radius: var(--cirth-border-radius);
    background-color: var(--cirth-form-element-background-color);
    color: var(--cirth-form-element-placeholder-color);
    line-height: inherit;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color var(--cirth-transition), border-color var(--cirth-transition), color var(--cirth-transition), box-shadow var(--cirth-transition);
  }

  @media (hover: hover) and (pointer: fine) {
    details.dropdown > summary:not([role]):hover:not(:active, :focus, [aria-invalid]):where(:not(.no-cirth, .no-cirth *)) {
      border-color: color-mix(in oklch, var(--cirth-form-element-border-color) 65%, var(--cirth-form-element-color));
    }
  }

  details.dropdown > summary:not([role]):active:where(:not(.no-cirth, .no-cirth *)), details.dropdown > summary:not([role]):focus:where(:not(.no-cirth, .no-cirth *)) {
    border-color: var(--cirth-form-element-active-border-color);
    background-color: var(--cirth-form-element-active-background-color);
  }

  details.dropdown > summary:not([role]):focus:where(:not(.no-cirth, .no-cirth *)) {
    box-shadow: 0 0 0 var(--cirth-outline-width) var(--cirth-form-element-focus-color);
  }

  details.dropdown > summary:not([role]):focus-visible:where(:not(.no-cirth, .no-cirth *)) {
    outline: var(--cirth-outline-width) solid transparent;
    outline-offset: 0;
  }

  details.dropdown > summary:not([role])[aria-invalid="false"]:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-form-element-border-color: var(--cirth-form-element-valid-border-color);
    --cirth-form-element-active-border-color: var(--cirth-form-element-valid-focus-color);
    --cirth-form-element-focus-color: var(--cirth-form-element-valid-focus-color);
  }

  details.dropdown > summary:not([role])[aria-invalid="true"]:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-form-element-border-color: var(--cirth-form-element-invalid-border-color);
    --cirth-form-element-active-border-color: var(--cirth-form-element-invalid-focus-color);
    --cirth-form-element-focus-color: var(--cirth-form-element-invalid-focus-color);
  }

  nav details.dropdown:where(:not(.no-cirth, .no-cirth *)) {
    margin: calc(var(--cirth-nav-element-spacing-vertical) * -1) 0;
    display: inline-block;
  }

  nav details.dropdown > summary:where(:not(.no-cirth, .no-cirth *)):after {
    transform: rotate(0) translateX(0);
  }

  nav details.dropdown > summary:not([role]):where(:not(.no-cirth, .no-cirth *)) {
    height: calc(var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-nav-link-spacing-vertical) * 2);
    padding: calc(var(--cirth-nav-link-spacing-vertical) - var(--cirth-border-width) * 2) var(--cirth-nav-link-spacing-horizontal);
  }

  nav details.dropdown > summary:not([role]):focus-visible:where(:not(.no-cirth, .no-cirth *)) {
    box-shadow: 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
  }

  details.dropdown > summary + ul:where(:not(.no-cirth, .no-cirth *)) {
    z-index: var(--cirth-z-index-dropdown);
    width: 100%;
    min-width: fit-content;
    margin: 0;
    margin-top: var(--cirth-outline-width);
    border: var(--cirth-border-width) solid var(--cirth-dropdown-border-color);
    border-radius: var(--cirth-border-radius);
    background-color: var(--cirth-dropdown-background-color);
    box-shadow: var(--cirth-dropdown-box-shadow);
    color: var(--cirth-dropdown-color);
    white-space: nowrap;
    opacity: 0;
    transition: opacity var(--cirth-transition), transform var(--cirth-duration-instant) var(--cirth-ease-in-out) 1s;
    flex-direction: column;
    padding: 0;
    display: flex;
    position: absolute;
    inset-inline-start: 0;
  }

  details.dropdown > summary + ul li:where(:not(.no-cirth, .no-cirth *)) {
    width: 100%;
    padding: calc(var(--cirth-form-element-spacing-vertical) * .5) var(--cirth-form-element-spacing-horizontal);
    margin-bottom: 0;
    list-style: none;
  }

  details.dropdown > summary + ul li:first-of-type:where(:not(.no-cirth, .no-cirth *)) {
    margin-top: calc(var(--cirth-form-element-spacing-vertical) * .5);
  }

  details.dropdown > summary + ul li:last-of-type:where(:not(.no-cirth, .no-cirth *)) {
    margin-bottom: calc(var(--cirth-form-element-spacing-vertical) * .5);
  }

  details.dropdown > summary + ul li a:where(:not(.no-cirth, .no-cirth *)) {
    margin: calc(var(--cirth-form-element-spacing-vertical) * -.5) calc(var(--cirth-form-element-spacing-horizontal) * -1);
    padding: calc(var(--cirth-form-element-spacing-vertical) * .5) var(--cirth-form-element-spacing-horizontal);
    color: var(--cirth-dropdown-color);
    border-radius: 0;
    text-decoration: none;
    display: block;
  }

  details.dropdown > summary + ul li a:hover:where(:not(.no-cirth, .no-cirth *)), details.dropdown > summary + ul li a:focus:where(:not(.no-cirth, .no-cirth *)), details.dropdown > summary + ul li a:active:where(:not(.no-cirth, .no-cirth *)), details.dropdown > summary + ul li a:focus-visible:where(:not(.no-cirth, .no-cirth *)), details.dropdown > summary + ul li a[aria-current]:not([aria-current="false"]):where(:not(.no-cirth, .no-cirth *)) {
    background-color: var(--cirth-dropdown-hover-background-color);
  }

  details.dropdown > summary + ul li label:where(:not(.no-cirth, .no-cirth *)) {
    margin: calc(var(--cirth-form-element-spacing-vertical) * -.5) calc(var(--cirth-form-element-spacing-horizontal) * -1);
    padding: calc(var(--cirth-form-element-spacing-vertical) * .5) var(--cirth-form-element-spacing-horizontal);
    display: block;
  }

  details.dropdown > summary + ul li:has(label):hover:where(:not(.no-cirth, .no-cirth *)) {
    background-color: var(--cirth-dropdown-hover-background-color);
  }

  details.dropdown[open] > summary:where(:not(.no-cirth, .no-cirth *)) {
    margin-bottom: 0;
  }

  details.dropdown[open] > summary + ul:where(:not(.no-cirth, .no-cirth *)) {
    opacity: 1;
    transition: opacity var(--cirth-transition), transform var(--cirth-duration-instant) var(--cirth-ease-in-out) var(--cirth-duration-instant);
    transform: scaleY(1);
  }

  details.dropdown[open] > summary:where(:not(.no-cirth, .no-cirth *)):before {
    z-index: 1;
    content: "";
    cursor: default;
    background: none;
    width: 100vw;
    height: 100vh;
    display: block;
    position: fixed;
    inset: 0;
  }

  details.dropdown[open] details.dropdown[open] > summary:where(:not(.no-cirth, .no-cirth *)):before {
    content: none;
  }

  label > details.dropdown:where(:not(.no-cirth, .no-cirth *)) {
    margin-top: calc(var(--cirth-spacing) * .25);
  }

  [dir="rtl"] details.dropdown > summary:where(:not(.no-cirth, .no-cirth *)):after, [dir="rtl"] details.dropdown > button:where(:not(.no-cirth, .no-cirth *)):after, [dir="rtl"] details.dropdown > a:where(:not(.no-cirth, .no-cirth *)):after {
    float: left;
    transform: rotate(0deg) translateX(calc((var(--cirth-form-element-spacing-horizontal) - var(--cirth-space-3)) * -1));
    background-position: 0;
  }

  [dir="rtl"] nav details.dropdown > summary:where(:not(.no-cirth, .no-cirth *)):after {
    transform: rotate(0) translateX(0);
  }

  [role="search"]:where(:not(.no-cirth, .no-cirth *)), .group:where(:not(.no-cirth, .no-cirth *)) {
    width: 100%;
    margin-bottom: var(--cirth-spacing);
    border-radius: var(--cirth-border-radius);
    box-shadow: var(--cirth-group-box-shadow, 0 0 0 #0000);
    vertical-align: middle;
    transition: box-shadow var(--cirth-transition);
    flex-wrap: wrap;
    display: inline-flex;
    position: relative;
  }

  [role="search"] > small:where(:not(.no-cirth, .no-cirth *)), .group > small:where(:not(.no-cirth, .no-cirth *)) {
    margin-top: calc(var(--cirth-spacing) * .25);
    flex: 0 0 100%;
    order: 1;
    margin-bottom: 0;
  }

  [role="search"] > :not([hidden], input[type="hidden"]):where(:not(.no-cirth, .no-cirth *)), [role="search"] input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):where(:not(.no-cirth, .no-cirth *)), [role="search"] select:not([hidden]):where(:not(.no-cirth, .no-cirth *)), .group > :not([hidden], input[type="hidden"]):where(:not(.no-cirth, .no-cirth *)), .group input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):where(:not(.no-cirth, .no-cirth *)), .group select:not([hidden]):where(:not(.no-cirth, .no-cirth *)) {
    flex: auto;
    margin-bottom: 0;
    position: relative;
  }

  [role="search"] > :not([hidden], input[type="hidden"]):is(input, select, textarea):where(:not(.no-cirth, .no-cirth *)), [role="search"] input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):is(input, select, textarea):where(:not(.no-cirth, .no-cirth *)), [role="search"] select:not([hidden]):is(input, select, textarea):where(:not(.no-cirth, .no-cirth *)), .group > :not([hidden], input[type="hidden"]):is(input, select, textarea):where(:not(.no-cirth, .no-cirth *)), .group input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):is(input, select, textarea):where(:not(.no-cirth, .no-cirth *)), .group select:not([hidden]):is(input, select, textarea):where(:not(.no-cirth, .no-cirth *)) {
    flex: 99;
  }

  [role="search"] > :not([hidden], input[type="hidden"]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))):where(:not(.no-cirth, .no-cirth *)), [role="search"] input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))):where(:not(.no-cirth, .no-cirth *)), [role="search"] select:not([hidden]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))):where(:not(.no-cirth, .no-cirth *)), .group > :not([hidden], input[type="hidden"]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))):where(:not(.no-cirth, .no-cirth *)), .group input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))):where(:not(.no-cirth, .no-cirth *)), .group select:not([hidden]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))):where(:not(.no-cirth, .no-cirth *)) {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    margin-inline-start: 0;
  }

  [role="search"] > :not([hidden], input[type="hidden"]):not(:nth-last-child(1 of :not([hidden], input[type="hidden"]))):where(:not(.no-cirth, .no-cirth *)), [role="search"] input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):not(:nth-last-child(1 of :not([hidden], input[type="hidden"]))):where(:not(.no-cirth, .no-cirth *)), [role="search"] select:not([hidden]):not(:nth-last-child(1 of :not([hidden], input[type="hidden"]))):where(:not(.no-cirth, .no-cirth *)), .group > :not([hidden], input[type="hidden"]):not(:nth-last-child(1 of :not([hidden], input[type="hidden"]))):where(:not(.no-cirth, .no-cirth *)), .group input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):not(:nth-last-child(1 of :not([hidden], input[type="hidden"]))):where(:not(.no-cirth, .no-cirth *)), .group select:not([hidden]):not(:nth-last-child(1 of :not([hidden], input[type="hidden"]))):where(:not(.no-cirth, .no-cirth *)) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }

  [role="search"] > :not([hidden], input[type="hidden"]):focus:where(:not(.no-cirth, .no-cirth *)), [role="search"] input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):focus:where(:not(.no-cirth, .no-cirth *)), [role="search"] select:not([hidden]):focus:where(:not(.no-cirth, .no-cirth *)), .group > :not([hidden], input[type="hidden"]):focus:where(:not(.no-cirth, .no-cirth *)), .group input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):focus:where(:not(.no-cirth, .no-cirth *)), .group select:not([hidden]):focus:where(:not(.no-cirth, .no-cirth *)) {
    z-index: 2;
  }

  [role="search"] > :has( + small:last-child):where(:not(.no-cirth, .no-cirth *)), .group > :has( + small:last-child):where(:not(.no-cirth, .no-cirth *)) {
    border-start-end-radius: var(--cirth-border-radius);
    border-end-end-radius: var(--cirth-border-radius);
  }

  [role="search"] button:not(:nth-child(1 of :not([hidden], input[type="hidden"]))):where(:not(.no-cirth, .no-cirth *)), [role="search"] [type="submit"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))):where(:not(.no-cirth, .no-cirth *)), [role="search"] [type="reset"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))):where(:not(.no-cirth, .no-cirth *)), [role="search"] [type="button"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))):where(:not(.no-cirth, .no-cirth *)), [role="search"] [role="button"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))):where(:not(.no-cirth, .no-cirth *)), [role="search"] input:not([type="checkbox"], [type="radio"]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))):where(:not(.no-cirth, .no-cirth *)), [role="search"] select:not(:nth-child(1 of :not([hidden], input[type="hidden"]))):where(:not(.no-cirth, .no-cirth *)), .group button:not(:nth-child(1 of :not([hidden], input[type="hidden"]))):where(:not(.no-cirth, .no-cirth *)), .group [type="submit"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))):where(:not(.no-cirth, .no-cirth *)), .group [type="reset"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))):where(:not(.no-cirth, .no-cirth *)), .group [type="button"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))):where(:not(.no-cirth, .no-cirth *)), .group [role="button"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))):where(:not(.no-cirth, .no-cirth *)), .group input:not([type="checkbox"], [type="radio"]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))):where(:not(.no-cirth, .no-cirth *)), .group select:not(:nth-child(1 of :not([hidden], input[type="hidden"]))):where(:not(.no-cirth, .no-cirth *)) {
    margin-inline-start: calc(var(--cirth-border-width) * -1);
  }

  [role="search"] button:where(:not(.no-cirth, .no-cirth *)), [role="search"] [type="submit"]:where(:not(.no-cirth, .no-cirth *)), [role="search"] [type="reset"]:where(:not(.no-cirth, .no-cirth *)), [role="search"] [type="button"]:where(:not(.no-cirth, .no-cirth *)), [role="search"] [role="button"]:where(:not(.no-cirth, .no-cirth *)), .group button:where(:not(.no-cirth, .no-cirth *)), .group [type="submit"]:where(:not(.no-cirth, .no-cirth *)), .group [type="reset"]:where(:not(.no-cirth, .no-cirth *)), .group [type="button"]:where(:not(.no-cirth, .no-cirth *)), .group [role="button"]:where(:not(.no-cirth, .no-cirth *)) {
    width: auto;
  }

  [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus):where(:not(.no-cirth, .no-cirth *)), .group:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-button);
  }

  [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"], [aria-invalid]):where(:not(.no-cirth, .no-cirth *)), [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select:not([aria-invalid]):where(:not(.no-cirth, .no-cirth *)), .group:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"], [aria-invalid]):where(:not(.no-cirth, .no-cirth *)), .group:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select:not([aria-invalid]):where(:not(.no-cirth, .no-cirth *)) {
    border-color: #0000;
  }

  [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus):where(:not(.no-cirth, .no-cirth *)), .group:has(input:not([type="submit"], [type="button"]):focus, select:focus):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-input);
  }

  [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button:where(:not(.no-cirth, .no-cirth *)), [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"]:where(:not(.no-cirth, .no-cirth *)), [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"]:where(:not(.no-cirth, .no-cirth *)), [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"]:where(:not(.no-cirth, .no-cirth *)), .group:has(input:not([type="submit"], [type="button"]):focus, select:focus) button:where(:not(.no-cirth, .no-cirth *)), .group:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"]:where(:not(.no-cirth, .no-cirth *)), .group:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"]:where(:not(.no-cirth, .no-cirth *)), .group:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"]:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
      var(--cirth-primary-border);
    --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
      var(--cirth-primary-border-active);
  }

  [role="search"] button:focus:where(:not(.no-cirth, .no-cirth *)), [role="search"] [type="submit"]:focus:where(:not(.no-cirth, .no-cirth *)), [role="search"] [type="reset"]:focus:where(:not(.no-cirth, .no-cirth *)), [role="search"] [type="button"]:focus:where(:not(.no-cirth, .no-cirth *)), [role="search"] [role="button"]:focus:where(:not(.no-cirth, .no-cirth *)), .group button:focus:where(:not(.no-cirth, .no-cirth *)), .group [type="submit"]:focus:where(:not(.no-cirth, .no-cirth *)), .group [type="reset"]:focus:where(:not(.no-cirth, .no-cirth *)), .group [type="button"]:focus:where(:not(.no-cirth, .no-cirth *)), .group [role="button"]:focus:where(:not(.no-cirth, .no-cirth *)) {
    box-shadow: none;
  }

  [role="search"] > :not([hidden], input[type="hidden"]):nth-child(1 of :not([hidden], input[type="hidden"])):where(:not(.no-cirth, .no-cirth *)) {
    border-start-start-radius: var(--cirth-radius-pill);
    border-end-start-radius: var(--cirth-radius-pill);
  }

  [role="search"] > :not([hidden], input[type="hidden"]):nth-last-child(1 of :not([hidden], input[type="hidden"])):where(:not(.no-cirth, .no-cirth *)), [role="search"] > :has( + small:last-child):where(:not(.no-cirth, .no-cirth *)) {
    border-start-end-radius: var(--cirth-radius-pill);
    border-end-end-radius: var(--cirth-radius-pill);
  }

  [aria-busy="true"]:not(input, select, textarea, html, form):where(:not(.no-cirth, .no-cirth *)):before {
    content: "";
    vertical-align: -.125em;
    width: 1em;
    height: 1em;
    mask-image: var(--cirth-icon-loading);
    background-color: currentColor;
    display: inline-block;
    mask-size: 1em;
    mask-repeat: no-repeat;
  }

  @media (forced-colors: active) {
    [aria-busy="true"]:not(input, select, textarea, html, form):where(:not(.no-cirth, .no-cirth *)):before {
      background-color: canvastext;
    }
  }

  [aria-busy="true"]:not(input, select, textarea, html, form):not(:empty):where(:not(.no-cirth, .no-cirth *)):before {
    margin-inline-end: calc(var(--cirth-spacing) * .5);
  }

  [aria-busy="true"]:not(input, select, textarea, html, form):empty:where(:not(.no-cirth, .no-cirth *)) {
    text-align: center;
  }

  input:is([type="submit"], [type="button"], [type="reset"])[aria-busy="true"]:where(:not(.no-cirth, .no-cirth *)) {
    background-image: var(--cirth-icon-loading);
    background-position: center left var(--cirth-form-element-spacing-horizontal);
    background-repeat: no-repeat;
    background-size: 1em;
    padding-inline-start: calc(var(--cirth-form-element-spacing-horizontal) + 1em + var(--cirth-spacing) * .5);
  }

  [dir="rtl"] input:is([type="submit"], [type="button"], [type="reset"])[aria-busy="true"]:where(:not(.no-cirth, .no-cirth *)) {
    background-position: center right var(--cirth-form-element-spacing-horizontal);
  }

  meter:where(:not(.no-cirth, .no-cirth *)) {
    appearance: none;
    width: 100%;
    height: var(--cirth-space-2);
    margin-bottom: calc(var(--cirth-spacing) * .5);
    border: var(--cirth-border-width-1) solid var(--cirth-meter-border-color);
    border-radius: var(--cirth-border-radius);
    background: var(--cirth-meter-background-color);
    display: inline-block;
    overflow: hidden;
  }

  meter:where(:not(.no-cirth, .no-cirth *))::-webkit-meter-bar {
    background: none;
  }

  meter:where(:not(.no-cirth, .no-cirth *))::-webkit-meter-inner-element {
    display: flex;
  }

  meter:where(:not(.no-cirth, .no-cirth *))::-webkit-meter-optimum-value {
    background: var(--cirth-meter-optimum-color);
  }

  meter:where(:not(.no-cirth, .no-cirth *))::-webkit-meter-suboptimum-value {
    background: var(--cirth-meter-suboptimum-color);
  }

  meter:where(:not(.no-cirth, .no-cirth *))::-webkit-meter-even-less-good-value {
    background: var(--cirth-meter-even-less-good-color);
  }

  meter:where(:not(.no-cirth, .no-cirth *))::-moz-meter-bar {
    background: var(--cirth-meter-optimum-color);
  }

  meter:-moz-meter-sub-optimum:where(:not(.no-cirth, .no-cirth *))::-moz-meter-bar {
    background: var(--cirth-meter-suboptimum-color);
  }

  meter:-moz-meter-sub-sub-optimum:where(:not(.no-cirth, .no-cirth *))::-moz-meter-bar {
    background: var(--cirth-meter-even-less-good-color);
  }

  dialog:where(:not(.no-cirth, .no-cirth *)) {
    opacity: 0;
    transition: opacity var(--cirth-transition), display var(--cirth-transition) allow-discrete, overlay var(--cirth-transition) allow-discrete;
    z-index: var(--cirth-z-index-modal);
    width: inherit;
    min-width: 100%;
    height: inherit;
    min-height: 100%;
    backdrop-filter: var(--cirth-modal-overlay-backdrop-filter);
    background-color: var(--cirth-modal-overlay-background-color);
    color: var(--cirth-color);
    border: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    display: flex;
    position: fixed;
    inset: 0;
  }

  dialog[open]:where(:not(.no-cirth, .no-cirth *)) {
    opacity: 1;
  }

  @starting-style {
    dialog[open]:where(:not(.no-cirth, .no-cirth *)) {
      opacity: 0;
    }
  }

  @starting-style {
    dialog[open] > article:where(:not(.no-cirth, .no-cirth *)) {
      opacity: 0;
      transform: translateY(-.5rem);
    }
  }

  dialog > article:where(:not(.no-cirth, .no-cirth *)) {
    transition: opacity var(--cirth-transition), transform var(--cirth-transition);
    width: min(100% - var(--cirth-spacing) * 2, var(--cirth-modal-max-width));
    max-height: calc(100vh - var(--cirth-spacing) * 2);
    max-height: calc(100dvh - var(--cirth-spacing) * 2);
    margin: var(--cirth-spacing);
    overflow: auto;
  }

  dialog > article > header > :where(:not(.no-cirth, .no-cirth *)) {
    margin-bottom: 0;
  }

  dialog > article > header .close:where(:not(.no-cirth, .no-cirth *)), dialog > article > header :is(a, button)[rel="prev"]:where(:not(.no-cirth, .no-cirth *)) {
    margin: calc(calc((max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2) - var(--cirth-font-size-md)) / 2) * -1);
    float: right;
    margin-inline-start: var(--cirth-spacing);
    padding: 0;
  }

  dialog > article > footer:where(:not(.no-cirth, .no-cirth *)) {
    text-align: end;
  }

  dialog > article > footer button:where(:not(.no-cirth, .no-cirth *)), dialog > article > footer [role="button"]:where(:not(.no-cirth, .no-cirth *)) {
    margin-bottom: 0;
  }

  dialog > article > footer button:not(:first-of-type):where(:not(.no-cirth, .no-cirth *)), dialog > article > footer [role="button"]:not(:first-of-type):where(:not(.no-cirth, .no-cirth *)) {
    margin-inline-start: calc(var(--cirth-spacing) * .5);
  }

  dialog > article .close:where(:not(.no-cirth, .no-cirth *)), dialog > article :is(a, button)[rel="prev"]:where(:not(.no-cirth, .no-cirth *)) {
    width: calc(var(--cirth-font-size-md) + calc((max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2) - var(--cirth-font-size-md)) / 2) * 2);
    height: calc(var(--cirth-font-size-md) + calc((max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2) - var(--cirth-font-size-md)) / 2) * 2);
    margin-top: calc(var(--cirth-spacing) * -1 - calc((max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2) - var(--cirth-font-size-md)) / 2));
    margin-right: calc(calc((max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2) - var(--cirth-font-size-md)) / 2) * -1);
    margin-bottom: calc(var(--cirth-spacing) - calc((max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2) - var(--cirth-font-size-md)) / 2));
    opacity: .5;
    transition: opacity var(--cirth-transition);
    background-color: #0000;
    border: none;
    margin-inline-start: auto;
    display: block;
  }

  dialog > article .close:where(:not(.no-cirth, .no-cirth *)):before, dialog > article :is(a, button)[rel="prev"]:where(:not(.no-cirth, .no-cirth *)):before {
    background-color: var(--cirth-muted-color);
    content: "";
    width: 100%;
    height: 100%;
    mask-image: var(--cirth-icon-close);
    mask-position: center;
    mask-size: auto var(--cirth-font-size-md);
    display: block;
    mask-repeat: no-repeat;
  }

  @media (forced-colors: active) {
    dialog > article .close:where(:not(.no-cirth, .no-cirth *)):before, dialog > article :is(a, button)[rel="prev"]:where(:not(.no-cirth, .no-cirth *)):before {
      background-color: canvastext;
    }
  }

  dialog > article .close:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus):where(:not(.no-cirth, .no-cirth *)), dialog > article :is(a, button)[rel="prev"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus):where(:not(.no-cirth, .no-cirth *)) {
    opacity: 1;
  }

  dialog:not([open]):where(:not(.no-cirth, .no-cirth *)), dialog[open="false"]:where(:not(.no-cirth, .no-cirth *)) {
    display: none;
  }

  [dir="rtl"] dialog > article > header :is(a, button)[rel="prev"]:where(:not(.no-cirth, .no-cirth *)), [dir="rtl"] dialog > article > header .close:where(:not(.no-cirth, .no-cirth *)) {
    float: left;
  }

  html:has(dialog:modal):where(:not(.no-cirth, .no-cirth *)) {
    overflow: hidden;
  }

  :where(nav li):before {
    content: "​";
    position: absolute;
  }

  nav:where(:not(.no-cirth, .no-cirth *)), nav :is(ol, ul):where(:not(.no-cirth, .no-cirth *)) {
    display: flex;
  }

  nav:where(:not(.no-cirth, .no-cirth *)) {
    justify-content: space-between;
    overflow: visible;
  }

  nav ol:where(:not(.no-cirth, .no-cirth *)), nav ul:where(:not(.no-cirth, .no-cirth *)) {
    align-items: center;
    margin-bottom: 0;
    padding: 0;
    list-style: none;
  }

  nav ol:first-of-type:where(:not(.no-cirth, .no-cirth *)), nav ul:first-of-type:where(:not(.no-cirth, .no-cirth *)) {
    margin-inline-start: calc(var(--cirth-nav-element-spacing-horizontal) * -1);
  }

  nav ol:last-of-type:where(:not(.no-cirth, .no-cirth *)), nav ul:last-of-type:where(:not(.no-cirth, .no-cirth *)) {
    margin-inline-end: calc(var(--cirth-nav-element-spacing-horizontal) * -1);
  }

  nav li:where(:not(.no-cirth, .no-cirth *)) {
    padding: var(--cirth-nav-element-spacing-vertical) var(--cirth-nav-element-spacing-horizontal);
    margin: 0;
    display: inline-block;
  }

  nav li :where(a:not([role="button"]), [role="link"]):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-color: inherit;
    margin-block: calc(var(--cirth-nav-link-spacing-vertical) * -1);
    margin-inline: calc(var(--cirth-nav-element-spacing-horizontal) * -1);
    padding: var(--cirth-nav-link-spacing-vertical) var(--cirth-nav-link-spacing-horizontal);
    border-block-end: var(--cirth-border-width-2) solid transparent;
    border-radius: var(--cirth-border-radius);
    display: inline-block;
  }

  nav li :where(a:not([role="button"]), [role="link"]):not(:hover):where(:not(.no-cirth, .no-cirth *)) {
    text-decoration: none;
  }

  nav li :where(a:not([role="button"]), [role="link"]):is([aria-current]:not([aria-current="false"]), [aria-selected="true"]):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-color: inherit;
    --cirth-text-decoration: none;
    border-block-end-color: var(--cirth-primary-border);
    border-radius: 0;
  }

  nav li .group:where(:not(.no-cirth, .no-cirth *)), nav li [role="search"]:where(:not(.no-cirth, .no-cirth *)) {
    width: auto;
    margin-bottom: 0;
  }

  nav li button:where(:not(.no-cirth, .no-cirth *)), nav li [role="button"]:where(:not(.no-cirth, .no-cirth *)), nav li [type="button"]:where(:not(.no-cirth, .no-cirth *)), nav li input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):where(:not(.no-cirth, .no-cirth *)), nav li select:where(:not(.no-cirth, .no-cirth *)) {
    height: auto;
    min-block-size: var(--cirth-space-10);
    margin-inline: inherit;
    padding: calc(var(--cirth-nav-link-spacing-vertical) - var(--cirth-border-width) * 2) var(--cirth-nav-link-spacing-horizontal);
    margin-bottom: 0;
  }

  nav[aria-label="breadcrumb"]:where(:not(.no-cirth, .no-cirth *)) {
    justify-content: start;
    align-items: center;
  }

  nav[aria-label="breadcrumb"] :is(ol, ul) li:not(:first-child):where(:not(.no-cirth, .no-cirth *)) {
    margin-inline-start: var(--cirth-nav-link-spacing-horizontal);
  }

  nav[aria-label="breadcrumb"] :is(ol, ul) li a:where(:not(.no-cirth, .no-cirth *)) {
    margin: calc(var(--cirth-nav-link-spacing-vertical) * -1) 0;
    margin-inline-start: calc(var(--cirth-nav-element-spacing-horizontal) * -1);
  }

  nav[aria-label="breadcrumb"] :is(ol, ul) li:not(:last-child):where(:not(.no-cirth, .no-cirth *)):after {
    width: calc(var(--cirth-nav-link-spacing-horizontal) * 4);
    margin: 0 calc(var(--cirth-nav-link-spacing-horizontal) * -1);
    content: var(--cirth-nav-breadcrumb-divider);
    color: var(--cirth-muted-color);
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
    position: absolute;
  }

  nav[aria-label="breadcrumb"] a[aria-current]:not([aria-current="false"]):where(:not(.no-cirth, .no-cirth *)) {
    color: inherit;
    pointer-events: none;
    background-color: #0000;
    border-block-end-color: #0000;
    text-decoration: none;
  }

  header:not(:is(article, aside, dialog, figure, li, nav, section, td) *) > nav:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-nav-element-spacing-vertical: var(--cirth-space-2);
    flex-wrap: wrap;
    align-items: center;
  }

  header:not(:is(article, aside, dialog, figure, li, nav, section, td) *) > nav li :where(a:not([role="button"]), [role="link"]):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-color: var(--cirth-muted-color);
    --cirth-text-decoration: none;
    border-block-end: 0;
    border-radius: 0;
  }

  header:not(:is(article, aside, dialog, figure, li, nav, section, td) *) > nav li :where(a:not([role="button"]), [role="link"]):is(:hover, :focus, :active):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-color: color-mix(in oklch,
      var(--cirth-muted-color),
      var(--cirth-contrast-text));
  }

  header:not(:is(article, aside, dialog, figure, li, nav, section, td) *) > nav li :where(a:not([role="button"]), [role="link"]):is([aria-current]:not([aria-current="false"]), [aria-selected="true"]):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-color: var(--cirth-contrast-text);
    font-weight: var(--cirth-font-weight-semibold);
  }

  header:not(:is(article, aside, dialog, figure, li, nav, section, td) *) > nav li :where(a:not([role="button"]), [role="link"])[aria-disabled="true"]:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-color: color-mix(in oklch,
      var(--cirth-muted-color) 55%,
      transparent);
    pointer-events: none;
  }

  header:not(:is(article, aside, dialog, figure, li, nav, section, td) *) > nav details.dropdown > summary:not([role]):where(:not(.no-cirth, .no-cirth *)) {
    border-color: var(--cirth-muted-border-color);
    background-color: #0000;
  }

  aside nav:where(:not(.no-cirth, .no-cirth *)) {
    --cirth-nav-element-spacing-horizontal: 0;
    display: block;
  }

  aside nav ol:where(:not(.no-cirth, .no-cirth *)), aside nav ul:where(:not(.no-cirth, .no-cirth *)), aside nav li:where(:not(.no-cirth, .no-cirth *)) {
    display: block;
  }

  aside nav li:where(:not(.no-cirth, .no-cirth *)) {
    padding: calc(var(--cirth-nav-element-spacing-vertical) * .5) 0;
  }

  aside nav li a:where(:not(.no-cirth, .no-cirth *)) {
    border-inline-start: var(--cirth-border-width-2) solid transparent;
    display: block;
  }

  aside nav li a:is([aria-current]:not([aria-current="false"]), [aria-selected="true"]):where(:not(.no-cirth, .no-cirth *)) {
    border-block-end-color: #0000;
    border-inline-start-color: var(--cirth-primary-border);
  }

  aside nav li [role="button"]:where(:not(.no-cirth, .no-cirth *)) {
    margin: inherit;
  }

  :is([popover=""], [popover="auto"], [popover="hint"]):not(dialog):where(:not(.no-cirth, .no-cirth *)) {
    --cirth-popover-display: block;
    display: none;
  }

  :is([popover=""], [popover="auto"], [popover="hint"]):not(dialog):popover-open:where(:not(.no-cirth, .no-cirth *)) {
    display: var(--cirth-popover-display);
    max-width: var(--cirth-popover-max-width);
    padding: var(--cirth-space-2) var(--cirth-space-3);
    border: var(--cirth-border-width) solid var(--cirth-popover-border-color);
    border-radius: var(--cirth-border-radius);
    background-color: var(--cirth-popover-background-color);
    box-shadow: var(--cirth-popover-box-shadow);
    color: var(--cirth-popover-color);
    margin: auto;
    inset: 0;
  }

  :is([popover=""], [popover="auto"], [popover="hint"]):not(dialog):popover-open > :last-child:where(:not(.no-cirth, .no-cirth *)) {
    margin-bottom: 0;
  }

  :is([popover=""], [popover="auto"], [popover="hint"]):not(dialog):popover-open:where(:not(.no-cirth, .no-cirth *)) {
    transition: opacity var(--cirth-transition), display var(--cirth-transition) allow-discrete, overlay var(--cirth-transition) allow-discrete;
  }

  @starting-style {
    :is([popover=""], [popover="auto"], [popover="hint"]):not(dialog):popover-open:where(:not(.no-cirth, .no-cirth *)) {
      opacity: 0;
    }
  }

  :is([popover=""], [popover="auto"], [popover="hint"]):not(dialog):not(:popover-open):where(:not(.no-cirth, .no-cirth *)) {
    opacity: 0;
  }

  progress {
    vertical-align: baseline;
  }

  progress:where(:not(.no-cirth, .no-cirth *)) {
    appearance: none;
    width: 100%;
    height: var(--cirth-space-2);
    margin-bottom: calc(var(--cirth-spacing) * .5);
    border: var(--cirth-border-width-1) solid var(--cirth-progress-border-color);
    border-radius: var(--cirth-border-radius);
    background-color: var(--cirth-progress-background-color);
    display: inline-block;
    overflow: hidden;
  }

  progress:where(:not(.no-cirth, .no-cirth *))::-webkit-progress-bar {
    border-radius: var(--cirth-border-radius);
    background: none;
  }

  progress[value]:where(:not(.no-cirth, .no-cirth *))::-webkit-progress-value {
    background-color: var(--cirth-progress-color);
    transition: inline-size var(--cirth-transition);
  }

  progress:where(:not(.no-cirth, .no-cirth *))::-moz-progress-bar {
    background-color: var(--cirth-progress-color);
  }

  @media (prefers-reduced-motion: no-preference) {
    progress:indeterminate:where(:not(.no-cirth, .no-cirth *)) {
      background: var(--cirth-progress-background-color) linear-gradient(to right, var(--cirth-progress-color) 30%, var(--cirth-progress-background-color) 30%) top left/150% 150% no-repeat;
      animation: 1s linear infinite progress-indeterminate;
    }

    progress:indeterminate[value]:where(:not(.no-cirth, .no-cirth *))::-webkit-progress-value {
      background-color: #0000;
    }

    progress:indeterminate:where(:not(.no-cirth, .no-cirth *))::-moz-progress-bar {
      background-color: #0000;
    }

    [dir="rtl"] progress:indeterminate:where(:not(.no-cirth, .no-cirth *)) {
      animation-direction: reverse;
    }
  }

  @keyframes progress-indeterminate {
    0% {
      background-position: 200% 0;
    }

    100% {
      background-position: -200% 0;
    }
  }

  [aria-controls] {
    cursor: pointer;
  }

  [aria-disabled="true"], [disabled] {
    cursor: not-allowed;
  }

  [aria-hidden="false"][hidden] {
    display: initial;
  }

  [aria-hidden="false"][hidden]:not(:focus) {
    clip-path: inset(50%);
    position: absolute;
  }

  [dir="rtl"] {
    direction: rtl;
  }

  @media (prefers-reduced-motion: reduce) {
    :not([aria-busy="true"]), :not([aria-busy="true"]):before, :not([aria-busy="true"]):after {
      background-attachment: initial;
      scroll-behavior: auto;
      transition-delay: var(--cirth-duration-instant);
      transition-duration: var(--cirth-duration-instant);
      --cirth-transition: var(--cirth-duration-instant) var(--cirth-ease-out);
      animation-duration: 1ms;
      animation-iteration-count: 1;
      animation-delay: -1ms;
    }
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .sr-only-focusable:focus, .sr-only-focusable:focus-within {
    width: auto;
    height: auto;
    padding: var(--cirth-space-2) var(--cirth-space-4);
    clip-path: none;
    white-space: normal;
    z-index: var(--cirth-z-index-fixed);
    border-radius: var(--cirth-border-radius);
    background-color: var(--cirth-canvas);
    color: var(--cirth-ink);
    margin: 0;
    overflow: visible;
  }

  .truncate {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  :root, :host {
    --cirth-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --cirth-font-family-sans: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial,
      "Helvetica Neue", sans-serif, var(--cirth-font-family-emoji);
    --cirth-font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
    --cirth-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
      monospace, var(--cirth-font-family-emoji);
    --cirth-font-size-xs: .75rem;
    --cirth-font-size-sm: .875rem;
    --cirth-font-size-md: 1rem;
    --cirth-font-size-lg: 1.125rem;
    --cirth-font-size-xl: 1.25rem;
    --cirth-font-size-2xl: 1.5rem;
    --cirth-font-size-3xl: 1.75rem;
    --cirth-font-size-4xl: 2rem;
    --cirth-font-size-5xl: 2.25rem;
    --cirth-font-size-6xl: 2.75rem;
    --cirth-font-size-7xl: 3.5rem;
    --cirth-font-weight-light: 300;
    --cirth-font-weight-regular: 400;
    --cirth-font-weight-medium: 500;
    --cirth-font-weight-semibold: 600;
    --cirth-font-weight-bold: 700;
    --cirth-letter-spacing-tight: -.03em;
    --cirth-letter-spacing-snug: -.01em;
    --cirth-line-height-none: 1;
    --cirth-line-height-tight: 1.125;
    --cirth-line-height-snug: 1.25;
    --cirth-line-height-normal: 1.5;
    --cirth-line-height-relaxed: 1.625;
    --cirth-line-height-loose: 2;
    --cirth-space-0: 0;
    --cirth-space-1: .25rem;
    --cirth-space-2: .5rem;
    --cirth-space-3: .75rem;
    --cirth-space-4: 1rem;
    --cirth-space-5: 1.25rem;
    --cirth-space-6: 1.5rem;
    --cirth-space-8: 2rem;
    --cirth-space-10: 2.5rem;
    --cirth-space-12: 3rem;
    --cirth-space-16: 4rem;
    --cirth-space-20: 5rem;
    --cirth-space-24: 6rem;
    --cirth-radius-none: 0;
    --cirth-radius-xs: .125rem;
    --cirth-radius-sm: .25rem;
    --cirth-radius-md: .375rem;
    --cirth-radius-lg: .5rem;
    --cirth-radius-xl: .75rem;
    --cirth-radius-2xl: 1rem;
    --cirth-radius-pill: 9999px;
    --cirth-border-width-0: 0;
    --cirth-border-width-1: .0625rem;
    --cirth-border-width-2: .125rem;
    --cirth-border-width-4: .25rem;
    --cirth-duration-instant: 0s;
    --cirth-duration-fast: .1s;
    --cirth-duration-normal: .2s;
    --cirth-duration-slow: .3s;
    --cirth-duration-slower: .5s;
    --cirth-ease-linear: linear;
    --cirth-ease-in: cubic-bezier(.4, 0, 1, 1);
    --cirth-ease-out: cubic-bezier(0, 0, .2, 1);
    --cirth-ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --cirth-opacity-disabled: .5;
    --cirth-opacity-overlay: .75;
    --cirth-z-index-dropdown: 1000;
    --cirth-z-index-sticky: 1020;
    --cirth-z-index-fixed: 1030;
    --cirth-z-index-modal-backdrop: 1040;
    --cirth-z-index-modal: 1050;
    --cirth-font-family: var(--cirth-font-family-sans);
    --cirth-font-family-display: var(--cirth-font-family-sans);
    --cirth-line-height: var(--cirth-line-height-normal);
    --cirth-font-weight: var(--cirth-font-weight-regular);
    --cirth-font-size: 100%;
    --cirth-text-underline-offset: .15em;
    --cirth-border-radius: var(--cirth-radius-sm);
    --cirth-card-border-radius: calc(var(--cirth-border-radius) * 1.5);
    --cirth-checkbox-border-radius: min(var(--cirth-border-radius),
      var(--cirth-radius-sm));
    --cirth-code-border-radius: min(var(--cirth-border-radius),
      var(--cirth-radius-sm));
    --cirth-border-width: var(--cirth-border-width-1);
    --cirth-outline-width: var(--cirth-border-width-2);
    --cirth-background-color: var(--cirth-canvas);
    --cirth-transition: var(--cirth-duration-normal) var(--cirth-ease-out);
    --cirth-spacing: var(--cirth-space-4);
    --cirth-typography-spacing-vertical: var(--cirth-spacing);
    --cirth-block-spacing-vertical: var(--cirth-spacing);
    --cirth-block-spacing-horizontal: var(--cirth-spacing);
    --cirth-container-gutter: clamp(var(--cirth-space-4),
      4%,
      var(--cirth-space-12));
    --cirth-container-max-width: 60rem;
    --cirth-grid-column-gap: var(--cirth-spacing);
    --cirth-grid-row-gap: var(--cirth-spacing);
    --cirth-grid-min-column: 12rem;
    --cirth-form-element-spacing-vertical: var(--cirth-space-2);
    --cirth-form-element-spacing-horizontal: var(--cirth-space-4);
    --cirth-form-label-font-weight: var(--cirth-font-weight-medium);
    --cirth-group-box-shadow: 0 0 0 #0000;
    --cirth-group-box-shadow-focus-with-button: 0 0 0 var(--cirth-outline-width)
      var(--cirth-primary-focus);
    --cirth-group-box-shadow-focus-with-input: 0 0 0 var(--cirth-border-width-1)
      var(--cirth-form-element-border-color);
    --cirth-card-box-shadow: none;
    --cirth-meter-background-color: var(--cirth-progress-background-color);
    --cirth-meter-border-color: var(--cirth-progress-border-color);
    --cirth-popover-border-color: var(--cirth-muted-border-color);
    --cirth-popover-color: var(--cirth-ink);
    --cirth-popover-box-shadow: var(--cirth-box-shadow);
    --cirth-popover-max-width: min(30rem, 100% - var(--cirth-spacing) * 2);
    --cirth-modal-max-width: 43.75rem;
    --cirth-modal-overlay-backdrop-filter: blur(.375rem);
    --cirth-nav-element-spacing-vertical: var(--cirth-space-4);
    --cirth-nav-element-spacing-horizontal: var(--cirth-space-2);
    --cirth-nav-link-spacing-vertical: var(--cirth-space-2);
    --cirth-nav-link-spacing-horizontal: var(--cirth-space-2);
    --cirth-nav-breadcrumb-divider: ">";
    --cirth-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    --cirth-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
    --cirth-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
    --cirth-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(142, 144, 161)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
  }

  :focus-visible {
    transition-duration: var(--cirth-duration-instant);
  }

  a, a.secondary, a.contrast {
    --cirth-text-decoration: underline;
  }

  small {
    --cirth-font-size: .875em;
    font-size: var(--cirth-font-size);
  }

  h1, h2, h3 {
    --cirth-font-weight: var(--cirth-font-weight-bold);
  }

  h4, h5, h6 {
    --cirth-font-weight: var(--cirth-font-weight-semibold);
  }

  h1, h2 {
    --cirth-letter-spacing: var(--cirth-letter-spacing-tight);
  }

  h3, h4 {
    --cirth-letter-spacing: var(--cirth-letter-spacing-snug);
  }

  h1 {
    --cirth-font-size: clamp(var(--cirth-font-size-3xl),
      1.31rem + 1.8vw,
      var(--cirth-font-size-6xl));
    --cirth-line-height: var(--cirth-line-height-tight);
    --cirth-typography-spacing-top: var(--cirth-space-12);
  }

  h2 {
    --cirth-font-size: clamp(var(--cirth-font-size-2xl),
      1.28rem + .9vw,
      var(--cirth-font-size-4xl));
    --cirth-line-height: var(--cirth-line-height-snug);
    --cirth-typography-spacing-top: var(--cirth-space-12);
  }

  h3 {
    --cirth-font-size: clamp(var(--cirth-font-size-xl),
      1.14rem + .45vw,
      var(--cirth-font-size-2xl));
    --cirth-line-height: var(--cirth-line-height-snug);
    --cirth-typography-spacing-top: var(--cirth-space-10);
  }

  h4 {
    --cirth-font-size: var(--cirth-font-size-xl);
    --cirth-line-height: var(--cirth-line-height-snug);
    --cirth-typography-spacing-top: var(--cirth-space-8);
  }

  h5 {
    --cirth-font-size: var(--cirth-font-size-lg);
    --cirth-line-height: var(--cirth-line-height-snug);
    --cirth-typography-spacing-top: var(--cirth-space-8);
  }

  h6 {
    --cirth-font-size: var(--cirth-font-size-md);
    --cirth-line-height: var(--cirth-line-height-snug);
    --cirth-typography-spacing-top: var(--cirth-space-8);
  }

  article {
    --cirth-block-spacing-vertical: var(--cirth-space-5);
    --cirth-block-spacing-horizontal: var(--cirth-space-5);
  }

  thead th, thead td, tfoot th, tfoot td {
    --cirth-font-weight: var(--cirth-font-weight-semibold);
  }

  pre, code, kbd, samp, var {
    --cirth-font-family: var(--cirth-font-family-mono);
  }

  code, kbd, samp {
    --cirth-border-radius: var(--cirth-code-border-radius);
  }

  kbd {
    --cirth-font-weight: bolder;
  }

  [type="search"] {
    --cirth-border-radius: var(--cirth-radius-pill);
  }

  .group [type="search"] {
    --cirth-border-radius: inherit;
  }

  button, [type="submit"], [type="reset"], [type="button"], [role="button"] {
    --cirth-font-weight: var(--cirth-font-weight-semibold);
    --cirth-form-element-spacing-horizontal: var(--cirth-space-4);
  }

  [type="checkbox"], [type="radio"] {
    --cirth-border-width: var(--cirth-border-width-2);
  }

  [type="checkbox"] {
    --cirth-border-radius: var(--cirth-checkbox-border-radius);
  }

  [type="checkbox"][role="switch"] {
    --cirth-border-width: .1875rem;
  }

  details.dropdown summary:not([role="button"]) {
    --cirth-outline-width: var(--cirth-border-width-1);
  }

  nav details.dropdown summary:focus-visible {
    --cirth-outline-width: var(--cirth-border-width-2);
  }

  [role="search"] {
    --cirth-border-radius: var(--cirth-radius-pill);
  }

  [role="search"]:has(button.secondary:focus, [type="submit"].secondary:focus, [type="button"].secondary:focus, [role="button"].secondary:focus), .group:has(button.secondary:focus, [type="submit"].secondary:focus, [type="button"].secondary:focus, [role="button"].secondary:focus) {
    --cirth-group-box-shadow-focus-with-button: 0
      0
      0
      var(--cirth-outline-width)
      var(--cirth-secondary-focus);
  }

  [role="search"]:has(button.contrast:focus, [type="submit"].contrast:focus, [type="button"].contrast:focus, [role="button"].contrast:focus), .group:has(button.contrast:focus, [type="submit"].contrast:focus, [type="button"].contrast:focus, [role="button"].contrast:focus) {
    --cirth-group-box-shadow-focus-with-button: 0
      0
      0
      var(--cirth-outline-width)
      var(--cirth-contrast-focus);
  }

  [role="search"] button, [role="search"] [type="submit"], [role="search"] [type="button"], [role="search"] [role="button"], .group button, .group [type="submit"], .group [type="button"], .group [role="button"] {
    --cirth-form-element-spacing-horizontal: var(--cirth-space-8);
  }

  details summary[role="button"]:not(.outline):after {
    filter: brightness(0) invert();
  }

  :root, :host {
    --cirth-canvas: light-dark(oklch(97.3% .006 44), oklch(20.15% .0225 280));
    --cirth-ink: light-dark(oklch(35.3% .027 280), oklch(83% .011 280));
    --cirth-color: var(--cirth-ink);
    --cirth-muted-color: light-dark(oklch(52.7% .031 280), oklch(65.7% .025 280));
    --cirth-muted-border-color: light-dark(oklch(93.85% .002 280), oklch(26.7% .025 280));
    --cirth-error: light-dark(oklch(44% .151 22), oklch(74.3% .133 22));
    --cirth-success: light-dark(oklch(52.7% .115 153), oklch(65.7% .144 153));
    --cirth-warning: light-dark(oklch(48.3% .084 89.5), oklch(70% .122 89.5));
    --cirth-primary: light-dark(oklch(52.7% .107 44), oklch(65.7% .134 44));
    --cirth-secondary-text: light-dark(oklch(52.7% .031 280), oklch(70% .021 280));
    --cirth-secondary-underline: light-dark(oklch(52.7% .031 280 / .5), oklch(70% .021 280 / .5));
    --cirth-secondary-active: light-dark(oklch(44% .029 280), oklch(78.7% .014 280));
    --cirth-secondary-surface-active: light-dark(oklch(44% .029 280), oklch(52.7% .031 280));
    --cirth-secondary-focus: light-dark(oklch(48.3% .03 280 / .7), oklch(70% .021 280 / .7));
    --cirth-contrast-text: light-dark(oklch(22.3% .023 280), oklch(91.7% .004 280));
    --cirth-contrast-surface: light-dark(oklch(22.3% .023 280), oklch(96% 0 280));
    --cirth-contrast-underline: light-dark(oklch(22.3% .023 280 / .5), oklch(91.7% .004 280 / .5));
    --cirth-contrast-active: light-dark(oklch(0% 0 0), oklch(100% 0 0));
    --cirth-contrast-surface-active: light-dark(oklch(0% 0 0), oklch(100% 0 0));
    --cirth-contrast-focus: light-dark(oklch(48.3% .03 280 / .7), oklch(87.3% .007 280 / .5));
    --cirth-contrast-on-surface: light-dark(oklch(100% 0 0), oklch(0% 0 0));
    --cirth-link-visited-color: light-dark(oklch(48.3% 0 280), oklch(65.7% 0 280));
    --cirth-box-shadow: .0145rem .029rem .174rem light-dark(oklch(65.7% .025 280 / .01698), oklch(9% .011 280 / .01698)), .0335rem .067rem .402rem light-dark(oklch(65.7% .025 280 / .024), oklch(9% .011 280 / .024)), .0625rem .125rem .75rem light-dark(oklch(65.7% .025 280 / .03), oklch(9% .011 280 / .03)), .1125rem .225rem 1.35rem light-dark(oklch(65.7% .025 280 / .036), oklch(9% .011 280 / .036)), .2085rem .417rem 2.502rem light-dark(oklch(65.7% .025 280 / .04302), oklch(9% .011 280 / .04302)), .5rem 1rem 6rem light-dark(oklch(65.7% .025 280 / .06), oklch(9% .011 280 / .06)), 0 0 0 .0625rem light-dark(oklch(65.7% .025 280 / .015), oklch(9% .011 280 / .015));
    --cirth-h1-color: light-dark(oklch(22.3% .023 280), oklch(96% 0 280));
    --cirth-h2-color: light-dark(oklch(26.7% .025 280), oklch(91.7% .004 280));
    --cirth-h3-color: light-dark(oklch(31% .026 280), oklch(83% .011 280));
    --cirth-h4-color: light-dark(oklch(35.3% .027 280), oklch(78.7% .014 280));
    --cirth-h5-color: light-dark(oklch(39.7% .028 280), oklch(74.3% .018 280));
    --cirth-h6-color: light-dark(oklch(44% .029 280), oklch(65.7% .025 280));
    --cirth-mark-color: light-dark(oklch(18% .022 280), oklch(100% 0 0));
    --cirth-code-color: light-dark(oklch(52.7% .031 280), oklch(65.7% .025 280));
    --cirth-form-element-selected-background-color: light-dark(oklch(91.7% .004 280), oklch(31% .026 280));
    --cirth-form-element-border-color: light-dark(oklch(61.3% .028 280), oklch(52.7% .031 280));
    --cirth-form-element-color: light-dark(oklch(26.7% .025 280), oklch(91.7% .004 280));
    --cirth-switch-background-color: light-dark(oklch(61.3% .028 280), oklch(52.7% .031 280));
    --cirth-range-border-color: light-dark(oklch(91.7% .004 280), oklch(26.7% .025 280));
    --cirth-range-active-border-color: light-dark(oklch(83% .011 280), oklch(31% .026 280));
    --cirth-progress-background-color: light-dark(oklch(91.7% .004 280), oklch(26.7% .025 280));
    --cirth-progress-border-color: light-dark(oklch(61.3% .028 280), oklch(52.7% .031 280));
  }

  :where([data-theme="light"]), :root:where(:not([data-theme="dark"])), :host(:where(:not([data-theme="dark"]))) {
    color-scheme: light;
    --cirth-error-text: color-mix(in oklch, var(--cirth-error) 80.2%, black);
    --cirth-error-border: oklch(from var(--cirth-error) calc(l * 1.493) calc(c * 1.298) h);
    --cirth-error-active: oklch(from var(--cirth-error) calc(l * 1.198) calc(c * 1.199) h);
    --cirth-error-surface: oklch(from var(--cirth-error) 93% .05 h);
    --cirth-success-text: color-mix(in oklch, var(--cirth-success) 67%, black);
    --cirth-success-border: oklch(from var(--cirth-success) calc(l * 1.163) calc(c * 1.17) h);
    --cirth-success-active: var(--cirth-success);
    --cirth-success-surface: oklch(from var(--cirth-success) 93% .05 h);
    --cirth-warning-text: color-mix(in oklch, var(--cirth-warning) 73.1%, black);
    --cirth-warning-border: oklch(from var(--cirth-warning) calc(l * 1.269) calc(c * 1.267) h);
    --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.091) calc(c * 1.081) h);
    --cirth-warning-surface: oklch(from var(--cirth-warning) 93% .05 h);
    --cirth-primary-text: var(--cirth-primary);
    --cirth-primary-surface: var(--cirth-primary);
    --cirth-primary-border: var(--cirth-primary-surface);
    --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
    --cirth-primary-active: color-mix(in oklch,
      var(--cirth-primary) 83.5%,
      black);
    --cirth-primary-surface-active: color-mix(in oklch,
      var(--cirth-primary) 91.7%,
      black);
    --cirth-primary-border-active: var(--cirth-primary-surface-active);
    --cirth-primary-underline-active: var(--cirth-primary-active);
    --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 75%);
    --cirth-primary-on-surface: oklch(100% 0 0);
    --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.247) c h / 25%);
    --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .019) c h);
    --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .009) c h);
    --cirth-form-element-background-color: oklch(from var(--cirth-canvas) calc(l - .008) c h);
    --cirth-card-background-color: oklch(from var(--cirth-canvas) calc(l + .018) c h);
    --cirth-form-element-active-background-color: var(--cirth-canvas);
    --cirth-dropdown-background-color: var(--cirth-card-background-color);
    --cirth-popover-background-color: var(--cirth-card-background-color);
    --cirth-secondary-surface: oklch(48.3% .03 280);
    --cirth-secondary-border: var(--cirth-secondary-surface);
    --cirth-secondary-border-active: var(--cirth-secondary-surface-active);
    --cirth-secondary-underline-active: var(--cirth-secondary-active);
    --cirth-secondary-on-surface: oklch(100% 0 0);
    --cirth-contrast-border: var(--cirth-contrast-surface);
    --cirth-contrast-border-active: var(--cirth-contrast-surface-active);
    --cirth-contrast-underline-active: var(--cirth-secondary-active);
    --cirth-mark-background-color: color-mix(in oklab,
      var(--cirth-primary) 18%,
      var(--cirth-canvas));
    --cirth-ins-color: var(--cirth-success-text);
    --cirth-del-color: var(--cirth-error-text);
    --cirth-blockquote-border-color: var(--cirth-muted-border-color);
    --cirth-blockquote-footer-color: var(--cirth-muted-color);
    --cirth-button-box-shadow: 0 0 0 #0000;
    --cirth-button-hover-box-shadow: 0 0 0 #0000;
    --cirth-table-border-color: var(--cirth-card-border-color);
    --cirth-table-row-stripped-background-color: oklch(57% .032 280 / .0375);
    --cirth-code-kbd-background-color: var(--cirth-ink);
    --cirth-code-kbd-color: var(--cirth-background-color);
    --cirth-form-element-placeholder-color: var(--cirth-muted-color);
    --cirth-form-element-active-border-color: var(--cirth-primary-border);
    --cirth-form-element-focus-color: var(--cirth-primary-focus);
    --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
    --cirth-form-element-invalid-border-color: var(--cirth-error-border);
    --cirth-form-element-invalid-active-border-color: var(--cirth-error-active);
    --cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
    --cirth-form-element-valid-border-color: var(--cirth-success-border);
    --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
    --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
    --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
    --cirth-switch-checked-background-color: var(--cirth-primary-surface);
    --cirth-switch-color: var(--cirth-primary-on-surface);
    --cirth-range-thumb-border-color: var(--cirth-background-color);
    --cirth-range-thumb-color: var(--cirth-secondary-text);
    --cirth-range-thumb-active-color: var(--cirth-primary-surface);
    --cirth-accordion-active-summary-color: var(--cirth-primary-active);
    --cirth-accordion-close-summary-color: var(--cirth-ink);
    --cirth-accordion-open-summary-color: var(--cirth-ink);
    --cirth-card-border-color: color-mix(in oklab,
      var(--cirth-form-element-border-color) 38%,
      oklch(from var(--cirth-card-background-color) l 0 h));
    --cirth-dropdown-box-shadow: var(--cirth-box-shadow);
    --cirth-dropdown-color: var(--cirth-ink);
    --cirth-dropdown-border-color: var(--cirth-card-border-color);
    --cirth-dropdown-hover-background-color: var(--cirth-card-sectioning-background-color);
    --cirth-modal-overlay-background-color: oklch(93.85% .002 280deg / var(--cirth-opacity-overlay));
    --cirth-meter-optimum-color: var(--cirth-success);
    --cirth-meter-suboptimum-color: var(--cirth-warning);
    --cirth-meter-even-less-good-color: var(--cirth-error);
    --cirth-progress-color: var(--cirth-primary-surface);
    --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(103, 105, 125)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(103, 105, 125)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
    --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(103, 105, 125)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
    --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(103, 105, 125)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(40, 126, 74)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(189, 44, 56)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
  }

  @media only screen and (prefers-color-scheme: dark) {
    :root:where(:not([data-theme])), :host(:where(:not([data-theme]))) {
      color-scheme: dark;
      --cirth-error-text: oklch(from var(--cirth-error) calc(l * 1.059) calc(c * .797) h);
      --cirth-error-border: oklch(from var(--cirth-error) calc(l * .942) calc(c * 1.226) h);
      --cirth-error-active: oklch(from var(--cirth-error) calc(l * 1.059) calc(c * .797) h);
      --cirth-error-surface: oklch(from var(--cirth-error) 35.3% .063 h);
      --cirth-success-text: oklch(from var(--cirth-success) calc(l * 1.198) calc(c * 1.2) h);
      --cirth-success-border: oklch(from var(--cirth-success) calc(l * 1.065) calc(c * 1.064) h);
      --cirth-success-active: oklch(from var(--cirth-success) calc(l * 1.198) calc(c * 1.2) h);
      --cirth-success-surface: oklch(from var(--cirth-success) 35.3% .063 h);
      --cirth-warning-text: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
      --cirth-warning-border: var(--cirth-warning);
      --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
      --cirth-warning-surface: oklch(from var(--cirth-warning) 35.3% .063 h);
      --cirth-primary-text: var(--cirth-primary);
      --cirth-primary-surface: color-mix(in oklch,
        var(--cirth-primary) 75.2%,
        black);
      --cirth-primary-border: var(--cirth-primary-surface);
      --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
      --cirth-primary-active: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
      --cirth-primary-surface-active: color-mix(in oklch,
        var(--cirth-primary) 72%,
        black);
      --cirth-primary-border-active: var(--cirth-primary-surface-active);
      --cirth-primary-underline-active: var(--cirth-primary-active);
      --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 80%);
      --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.065) c h / 18.75%);
      --cirth-primary-on-surface: oklch(100% 0 0);
      --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .02) c h);
      --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .025) c h);
      --cirth-form-element-background-color: oklch(from var(--cirth-canvas) calc(l - .008) c h);
      --cirth-card-background-color: oklch(from var(--cirth-canvas) calc(l + .04) c h);
      --cirth-form-element-active-background-color: var(--cirth-canvas);
      --cirth-dropdown-background-color: var(--cirth-card-background-color);
      --cirth-popover-background-color: var(--cirth-card-background-color);
      --cirth-secondary-surface: oklch(48.3% .03 280);
      --cirth-secondary-border: var(--cirth-secondary-surface);
      --cirth-secondary-border-active: var(--cirth-secondary-surface-active);
      --cirth-secondary-underline-active: var(--cirth-secondary-active);
      --cirth-secondary-on-surface: oklch(100% 0 0);
      --cirth-contrast-border: var(--cirth-contrast-surface);
      --cirth-contrast-border-active: var(--cirth-contrast-surface-active);
      --cirth-contrast-underline-active: var(--cirth-contrast-active);
      --cirth-mark-background-color: color-mix(in oklab,
        var(--cirth-primary) 24%,
        var(--cirth-canvas));
      --cirth-ins-color: var(--cirth-success-text);
      --cirth-del-color: var(--cirth-error-text);
      --cirth-blockquote-border-color: var(--cirth-muted-border-color);
      --cirth-blockquote-footer-color: var(--cirth-muted-color);
      --cirth-button-box-shadow: 0 0 0 #0000;
      --cirth-button-hover-box-shadow: 0 0 0 #0000;
      --cirth-table-border-color: var(--cirth-card-border-color);
      --cirth-table-row-stripped-background-color: oklch(57% .032 280 / .0375);
      --cirth-code-kbd-background-color: var(--cirth-ink);
      --cirth-code-kbd-color: var(--cirth-background-color);
      --cirth-form-element-placeholder-color: oklch(65.7% .025 280);
      --cirth-form-element-active-border-color: var(--cirth-primary-border);
      --cirth-form-element-focus-color: var(--cirth-primary-focus);
      --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
      --cirth-form-element-invalid-border-color: var(--cirth-error-border);
      --cirth-form-element-invalid-active-border-color: var(--cirth-error-active);
      --cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
      --cirth-form-element-valid-border-color: var(--cirth-success-border);
      --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
      --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
      --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
      --cirth-switch-checked-background-color: var(--cirth-primary-surface);
      --cirth-switch-color: var(--cirth-primary-on-surface);
      --cirth-range-thumb-border-color: var(--cirth-background-color);
      --cirth-range-thumb-color: var(--cirth-secondary-text);
      --cirth-range-thumb-active-color: var(--cirth-primary-surface);
      --cirth-accordion-active-summary-color: var(--cirth-primary-active);
      --cirth-accordion-close-summary-color: var(--cirth-ink);
      --cirth-accordion-open-summary-color: var(--cirth-ink);
      --cirth-card-border-color: color-mix(in oklab,
        var(--cirth-form-element-border-color) 46%,
        var(--cirth-card-background-color));
      --cirth-dropdown-box-shadow: var(--cirth-box-shadow);
      --cirth-dropdown-color: var(--cirth-ink);
      --cirth-dropdown-border-color: var(--cirth-card-border-color);
      --cirth-dropdown-hover-background-color: var(--cirth-card-sectioning-background-color);
      --cirth-modal-overlay-background-color: oklch(9% .011 280deg / var(--cirth-opacity-overlay));
      --cirth-meter-optimum-color: var(--cirth-success);
      --cirth-meter-suboptimum-color: var(--cirth-warning);
      --cirth-meter-even-less-good-color: var(--cirth-error);
      --cirth-progress-color: var(--cirth-primary-text);
      --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
      --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
      --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
      --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(75, 216, 131)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
      --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(246, 158, 155)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
    }

    :root:where(:not([data-theme])) details summary[role="button"].contrast:not(.outline):after, :host(:where(:not([data-theme]))) details summary[role="button"].contrast:not(.outline):after, :root:where(:not([data-theme])) [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before, :host(:where(:not([data-theme]))) [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
      filter: brightness(0);
    }
  }

  :where([data-theme="dark"]) {
    color-scheme: dark;
    --cirth-error-text: oklch(from var(--cirth-error) calc(l * 1.059) calc(c * .797) h);
    --cirth-error-border: oklch(from var(--cirth-error) calc(l * .942) calc(c * 1.226) h);
    --cirth-error-active: oklch(from var(--cirth-error) calc(l * 1.059) calc(c * .797) h);
    --cirth-error-surface: oklch(from var(--cirth-error) 35.3% .063 h);
    --cirth-success-text: oklch(from var(--cirth-success) calc(l * 1.198) calc(c * 1.2) h);
    --cirth-success-border: oklch(from var(--cirth-success) calc(l * 1.065) calc(c * 1.064) h);
    --cirth-success-active: oklch(from var(--cirth-success) calc(l * 1.198) calc(c * 1.2) h);
    --cirth-success-surface: oklch(from var(--cirth-success) 35.3% .063 h);
    --cirth-warning-text: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
    --cirth-warning-border: var(--cirth-warning);
    --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
    --cirth-warning-surface: oklch(from var(--cirth-warning) 35.3% .063 h);
    --cirth-primary-text: var(--cirth-primary);
    --cirth-primary-surface: color-mix(in oklch,
      var(--cirth-primary) 75.2%,
      black);
    --cirth-primary-border: var(--cirth-primary-surface);
    --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
    --cirth-primary-active: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
    --cirth-primary-surface-active: color-mix(in oklch,
      var(--cirth-primary) 72%,
      black);
    --cirth-primary-border-active: var(--cirth-primary-surface-active);
    --cirth-primary-underline-active: var(--cirth-primary-active);
    --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 80%);
    --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.065) c h / 18.75%);
    --cirth-primary-on-surface: oklch(100% 0 0);
    --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .02) c h);
    --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .025) c h);
    --cirth-form-element-background-color: oklch(from var(--cirth-canvas) calc(l - .008) c h);
    --cirth-card-background-color: oklch(from var(--cirth-canvas) calc(l + .04) c h);
    --cirth-form-element-active-background-color: var(--cirth-canvas);
    --cirth-dropdown-background-color: var(--cirth-card-background-color);
    --cirth-popover-background-color: var(--cirth-card-background-color);
    --cirth-secondary-surface: oklch(48.3% .03 280);
    --cirth-secondary-border: var(--cirth-secondary-surface);
    --cirth-secondary-border-active: var(--cirth-secondary-surface-active);
    --cirth-secondary-underline-active: var(--cirth-secondary-active);
    --cirth-secondary-on-surface: oklch(100% 0 0);
    --cirth-contrast-border: var(--cirth-contrast-surface);
    --cirth-contrast-border-active: var(--cirth-contrast-surface-active);
    --cirth-contrast-underline-active: var(--cirth-contrast-active);
    --cirth-mark-background-color: color-mix(in oklab,
      var(--cirth-primary) 24%,
      var(--cirth-canvas));
    --cirth-ins-color: var(--cirth-success-text);
    --cirth-del-color: var(--cirth-error-text);
    --cirth-blockquote-border-color: var(--cirth-muted-border-color);
    --cirth-blockquote-footer-color: var(--cirth-muted-color);
    --cirth-button-box-shadow: 0 0 0 #0000;
    --cirth-button-hover-box-shadow: 0 0 0 #0000;
    --cirth-table-border-color: var(--cirth-card-border-color);
    --cirth-table-row-stripped-background-color: oklch(57% .032 280 / .0375);
    --cirth-code-kbd-background-color: var(--cirth-ink);
    --cirth-code-kbd-color: var(--cirth-background-color);
    --cirth-form-element-placeholder-color: oklch(65.7% .025 280);
    --cirth-form-element-active-border-color: var(--cirth-primary-border);
    --cirth-form-element-focus-color: var(--cirth-primary-focus);
    --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
    --cirth-form-element-invalid-border-color: var(--cirth-error-border);
    --cirth-form-element-invalid-active-border-color: var(--cirth-error-active);
    --cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
    --cirth-form-element-valid-border-color: var(--cirth-success-border);
    --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
    --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
    --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
    --cirth-switch-checked-background-color: var(--cirth-primary-surface);
    --cirth-switch-color: var(--cirth-primary-on-surface);
    --cirth-range-thumb-border-color: var(--cirth-background-color);
    --cirth-range-thumb-color: var(--cirth-secondary-text);
    --cirth-range-thumb-active-color: var(--cirth-primary-surface);
    --cirth-accordion-active-summary-color: var(--cirth-primary-active);
    --cirth-accordion-close-summary-color: var(--cirth-ink);
    --cirth-accordion-open-summary-color: var(--cirth-ink);
    --cirth-card-border-color: color-mix(in oklab,
      var(--cirth-form-element-border-color) 46%,
      var(--cirth-card-background-color));
    --cirth-dropdown-box-shadow: var(--cirth-box-shadow);
    --cirth-dropdown-color: var(--cirth-ink);
    --cirth-dropdown-border-color: var(--cirth-card-border-color);
    --cirth-dropdown-hover-background-color: var(--cirth-card-sectioning-background-color);
    --cirth-modal-overlay-background-color: oklch(9% .011 280deg / var(--cirth-opacity-overlay));
    --cirth-meter-optimum-color: var(--cirth-success);
    --cirth-meter-suboptimum-color: var(--cirth-warning);
    --cirth-meter-even-less-good-color: var(--cirth-error);
    --cirth-progress-color: var(--cirth-primary-text);
    --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
    --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
    --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(75, 216, 131)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(246, 158, 155)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
  }

  :where([data-theme="dark"]) details summary[role="button"].contrast:not(.outline):after, :where([data-theme="dark"]) [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
    filter: brightness(0);
  }

  progress, [type="checkbox"], [type="radio"], [type="range"] {
    accent-color: var(--cirth-primary-text);
  }

  @media (prefers-contrast: more) {
    :where([data-theme="light"]), :root:where(:not([data-theme="dark"])), :host(:where(:not([data-theme="dark"]))) {
      --cirth-ink: oklch(22.3% .023 280);
      --cirth-h1-color: var(--cirth-color);
      --cirth-h2-color: var(--cirth-color);
      --cirth-h3-color: var(--cirth-color);
      --cirth-h4-color: var(--cirth-color);
      --cirth-h5-color: var(--cirth-color);
      --cirth-h6-color: var(--cirth-color);
      --cirth-muted-color: oklch(39.7% .028 280);
      --cirth-secondary-text: oklch(39.7% .028 280);
      --cirth-code-color: oklch(35.3% .027 280);
      --cirth-link-visited-color: oklch(35.3% .027 280);
      --cirth-muted-border-color: oklch(57% .032 280);
      --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(68, 69, 86)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(68, 69, 86)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
      --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(68, 69, 86)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
      --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(68, 69, 86)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
      --cirth-form-element-border-color: oklch(39.7% .028 280);
      --cirth-form-element-invalid-border-color: oklch(48.3% .165 22);
      --cirth-form-element-valid-border-color: oklch(48.3% .106 153);
      --cirth-primary: oklch(39.7% .081 44);
      --cirth-primary-active: oklch(31% .063 44);
      --cirth-primary-underline: var(--cirth-primary);
      --cirth-secondary-underline: var(--cirth-secondary-text);
      --cirth-contrast-underline: var(--cirth-contrast-text);
      --cirth-primary-focus: oklch(48.3% .098 44);
      --cirth-secondary-focus: oklch(48.3% .03 280);
      --cirth-contrast-focus: oklch(48.3% .03 280);
      --cirth-switch-background-color: oklch(48.3% .03 280);
      --cirth-progress-border-color: oklch(48.3% .03 280);
      --cirth-meter-optimum-color: oklch(44% .096 153);
      --cirth-meter-suboptimum-color: oklch(39.7% .069 89.5);
      --cirth-meter-even-less-good-color: oklch(35.3% .121 22);
      --cirth-dropdown-border-color: var(--cirth-muted-border-color);
    }
  }

  @media only screen and (prefers-contrast: more) and (prefers-color-scheme: dark) {
    :root:where(:not([data-theme])), :host(:where(:not([data-theme]))) {
      --cirth-ink: oklch(96% 0 280);
      --cirth-h1-color: var(--cirth-color);
      --cirth-h2-color: var(--cirth-color);
      --cirth-h3-color: var(--cirth-color);
      --cirth-h4-color: var(--cirth-color);
      --cirth-h5-color: var(--cirth-color);
      --cirth-h6-color: var(--cirth-color);
      --cirth-muted-color: oklch(78.7% .014 280);
      --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
      --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
      --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
      --cirth-secondary-text: oklch(78.7% .014 280);
      --cirth-code-color: oklch(83% .011 280);
      --cirth-link-visited-color: oklch(78.7% .014 280);
      --cirth-muted-border-color: oklch(57% .032 280);
      --cirth-card-border-color: var(--cirth-muted-border-color);
      --cirth-form-element-border-color: oklch(70% .021 280);
      --cirth-form-element-invalid-border-color: oklch(78.7% .105 22);
      --cirth-form-element-valid-border-color: oklch(78.7% .172 153);
      --cirth-primary: oklch(78.7% .092 44);
      --cirth-primary-active: oklch(87.3% .051 44);
      --cirth-primary-surface: oklch(44% .09 44);
      --cirth-primary-surface-active: oklch(39.7% .081 44);
      --cirth-primary-underline: var(--cirth-primary);
      --cirth-secondary-underline: var(--cirth-secondary-text);
      --cirth-contrast-underline: var(--cirth-contrast-text);
      --cirth-primary-focus: oklch(70% .141 44);
      --cirth-secondary-focus: oklch(70% .021 280);
      --cirth-contrast-focus: oklch(87.3% .007 280);
      --cirth-switch-background-color: oklch(65.7% .025 280);
      --cirth-progress-border-color: oklch(70% .021 280);
      --cirth-meter-optimum-color: oklch(74.3% .163 153);
      --cirth-meter-suboptimum-color: oklch(78.7% .137 89.5);
      --cirth-meter-even-less-good-color: oklch(83% .08 22);
      --cirth-dropdown-border-color: var(--cirth-muted-border-color);
    }
  }

  @media (prefers-contrast: more) {
    :where([data-theme="dark"]) {
      --cirth-ink: oklch(96% 0 280);
      --cirth-h1-color: var(--cirth-color);
      --cirth-h2-color: var(--cirth-color);
      --cirth-h3-color: var(--cirth-color);
      --cirth-h4-color: var(--cirth-color);
      --cirth-h5-color: var(--cirth-color);
      --cirth-h6-color: var(--cirth-color);
      --cirth-muted-color: oklch(78.7% .014 280);
      --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
      --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
      --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
      --cirth-secondary-text: oklch(78.7% .014 280);
      --cirth-code-color: oklch(83% .011 280);
      --cirth-link-visited-color: oklch(78.7% .014 280);
      --cirth-muted-border-color: oklch(57% .032 280);
      --cirth-card-border-color: var(--cirth-muted-border-color);
      --cirth-form-element-border-color: oklch(70% .021 280);
      --cirth-form-element-invalid-border-color: oklch(78.7% .105 22);
      --cirth-form-element-valid-border-color: oklch(78.7% .172 153);
      --cirth-primary: oklch(78.7% .092 44);
      --cirth-primary-active: oklch(87.3% .051 44);
      --cirth-primary-surface: oklch(44% .09 44);
      --cirth-primary-surface-active: oklch(39.7% .081 44);
      --cirth-primary-underline: var(--cirth-primary);
      --cirth-secondary-underline: var(--cirth-secondary-text);
      --cirth-contrast-underline: var(--cirth-contrast-text);
      --cirth-primary-focus: oklch(70% .141 44);
      --cirth-secondary-focus: oklch(70% .021 280);
      --cirth-contrast-focus: oklch(87.3% .007 280);
      --cirth-switch-background-color: oklch(65.7% .025 280);
      --cirth-progress-border-color: oklch(70% .021 280);
      --cirth-meter-optimum-color: oklch(74.3% .163 153);
      --cirth-meter-suboptimum-color: oklch(78.7% .137 89.5);
      --cirth-meter-even-less-good-color: oklch(83% .08 22);
      --cirth-dropdown-border-color: var(--cirth-muted-border-color);
    }
  }
}