@scope (.trace-css) {
  @layer trace.foundation {
    :where(:scope) {
      --trace-bg-light: oklch(96.2441% .00418752 236.497);
      --trace-bg-dark: oklch(19.7902% .0189863 235.357);
      --trace-neutral: oklch(50% 0 0);
      --trace-neutral-lighter: oklch(from var(--trace-neutral) calc(l + .5) c h);
      --trace-neutral-light: oklch(from var(--trace-neutral) calc(l + .25) c h);
      --trace-neutral-dark: oklch(from var(--trace-neutral) calc(l - .25) c h);
      --trace-neutral-darker: oklch(from var(--trace-neutral) calc(l - .5) c h);
      --trace-text-light: oklch(9.44872% .0654731 264.052);
      --trace-text-dark: oklch(92.494% 0 0);
      --trace-primary: oklch(37.662% .0682014 228.503);
      --trace-secondary: oklch(87.9592% .170365 81.3235);
      --trace-primary-lighter: oklch(from var(--trace-primary) calc(l + (1 - l) * .6) c h);
      --trace-primary-light: oklch(from var(--trace-primary) calc(l + (1 - l) * .3) c h);
      --trace-primary-dark: oklch(from var(--trace-primary) calc(l * .7) c h);
      --trace-primary-darker: oklch(from var(--trace-primary) calc(l * .4) c h);
      --trace-secondary-lighter: oklch(from var(--trace-secondary) calc(l + (1 - l) * .6) c h);
      --trace-secondary-light: oklch(from var(--trace-secondary) calc(l + (1 - l) * .3) c h);
      --trace-secondary-dark: oklch(from var(--trace-secondary) calc(l * .7) c h);
      --trace-secondary-darker: oklch(from var(--trace-secondary) calc(l * .4) c h);
      --trace-danger: oklch(52.3358% .198564 31.9584);
      --trace-success: oklch(69.13% .14353 158.708);
      --trace-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
      --trace-font-family-sans: system-ui, sans-serif, var(--trace-font-family-emoji);
      --trace-font-family-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono",
      monospace, var(--trace-font-family-emoji);
      --trace-font-body: var(--trace-font-family-sans);
      --trace-font-heading: var(--trace-font-body);
      --trace-font-code: var(--trace-font-family-mono);
      --trace-radius-none: 0;
      --trace-radius-sm: 4px;
      --trace-radius-full: 50%;
      --trace-radius-control: var(--trace-radius-sm);
      --trace-control-padding-block: .625rem;
      --trace-control-padding-inline: 1rem;
      --trace-shadow-color: light-dark(oklch(from var(--trace-neutral-darker) l c h / 25%), oklch(from var(--trace-neutral-lighter) l c h / 25%));
      --trace-shadow: 5px 5px 0 0 var(--trace-shadow-color);
      --trace-bg: light-dark(var(--trace-bg-light), var(--trace-bg-dark));
      --trace-text: light-dark(var(--trace-text-light), var(--trace-text-dark));
      --trace-control-bg: light-dark(var(--trace-neutral-lighter), var(--trace-bg-dark));
    }

    :where(*) {
      box-sizing: border-box;
    }

    :where(:scope) {
      font-family: var(--trace-font-body);
      background-color: var(--trace-bg);
      color: var(--trace-text);
      margin: 0;
    }

    :where(button, input, select, textarea) {
      font: inherit;
    }

    :where(:scope) {
      color-scheme: light dark;
    }

    :where([data-mode="light"], [data-mode="dark"]) {
      background-color: var(--trace-bg);
      color: var(--trace-text);
    }

    :where([data-mode="light"]) {
      color-scheme: light;
    }

    :where([data-mode="dark"]) {
      color-scheme: dark;
    }
  }

  @layer trace.elements {
    :where(:scope) {
      --trace-font-size-h1: 3rem;
      --trace-font-size-h2: 2.5rem;
      --trace-font-size-h3: 2rem;
      --trace-font-size-h4: 1.5rem;
      --trace-font-size-h5: 1.25rem;
      --trace-font-size-h6: 1rem;
      --trace-typography-line-height: 1.6;
      --trace-heading-line-height: 1.25;
      --trace-heading-margin-block-end: 1rem;
      --trace-paragraph-margin-block-end: 1rem;
      --trace-divider-margin-block: 2rem;
      --trace-blockquote-margin-block: 1.5rem;
      --trace-blockquote-padding-block: .75rem;
      --trace-blockquote-padding-inline: 1.25rem;
      --trace-typography-border: light-dark(var(--trace-neutral-light), var(--trace-neutral-dark));
      --trace-code-border: light-dark(var(--trace-typography-border), var(--trace-neutral-light));
      --trace-code-bg: light-dark(oklch(from var(--trace-neutral-darker) l c h / 4%), oklch(from var(--trace-neutral-lighter) l c h / 7%));
      --trace-mark-bg: var(--trace-secondary-lighter);
      --trace-mark-text: var(--trace-neutral-darker);
      --trace-kbd-bg: light-dark(var(--trace-neutral-dark), var(--trace-neutral-lighter));
      --trace-kbd-text: light-dark(var(--trace-text-dark), var(--trace-text-light));
      --trace-kbd-border: light-dark(var(--trace-neutral-darker), var(--trace-neutral-light));
      --trace-kbd-shadow: 1px 1px 0 0
      oklch(from var(--trace-neutral-darker) l c h / 25%);
      --trace-blockquote-border: light-dark(var(--trace-primary), var(--trace-secondary));
      --trace-blockquote-bg: light-dark(color-mix(in oklch,
        var(--trace-bg-light),
        var(--trace-neutral-darker) 5%), color-mix(in oklch, var(--trace-bg-dark), var(--trace-neutral-lighter) 8%));
    }

    @media (width < 48rem) {
      :where(:scope) {
        --trace-font-size-h1: 2rem;
        --trace-font-size-h2: 1.75rem;
        --trace-font-size-h3: 1.5rem;
        --trace-font-size-h4: 1.25rem;
        --trace-font-size-h5: 1.125rem;
      }
    }

    :where(:scope) {
      line-height: var(--trace-typography-line-height);
      overflow-wrap: anywhere;
    }

    :where(h1, h2, h3, h4, h5, h6) {
      margin-block: 0 var(--trace-heading-margin-block-end);
      font-family: var(--trace-font-heading);
      font-weight: 700;
      line-height: var(--trace-heading-line-height);
      overflow-wrap: anywhere;
    }

    :where(h1) {
      font-size: var(--trace-font-size-h1);
    }

    :where(h2) {
      font-size: var(--trace-font-size-h2);
    }

    :where(h3) {
      font-size: var(--trace-font-size-h3);
    }

    :where(h4) {
      font-size: var(--trace-font-size-h4);
    }

    :where(h5) {
      font-size: var(--trace-font-size-h5);
    }

    :where(h6) {
      font-size: var(--trace-font-size-h6);
    }

    :where(code, pre, kbd, samp) {
      font-family: var(--trace-font-code);
    }

    :where(code:not(pre code)) {
      border: 1px solid var(--trace-code-border);
      border-radius: var(--trace-radius-sm);
      background-color: var(--trace-code-bg);
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
      padding-inline: .25em;
    }

    :where(pre) {
      min-inline-size: 0;
      max-inline-size: 100%;
      overflow-x: auto;
    }

    :where(p) {
      margin-block: 0 var(--trace-paragraph-margin-block-end);
      line-height: var(--trace-typography-line-height);
    }

    :where(ul, ol, dl) {
      line-height: var(--trace-typography-line-height);
    }

    :where(abbr[title]) {
      text-underline-offset: .2em;
      cursor: help;
      -webkit-text-decoration: underline dotted;
      text-decoration: underline dotted;
    }

    :where(strong, b) {
      font-weight: 700;
    }

    :where(i, em, cite) {
      font-style: italic;
    }

    :where(del, s) {
      text-decoration: line-through;
    }

    :where(ins, u) {
      text-underline-offset: .15em;
      text-decoration: underline;
    }

    :where(kbd) {
      border: 1px solid var(--trace-kbd-border);
      border-radius: var(--trace-radius-sm);
      background-color: var(--trace-kbd-bg);
      color: var(--trace-kbd-text);
      box-shadow: var(--trace-kbd-shadow);
      vertical-align: baseline;
      border-bottom-width: 2px;
      padding: .125em .375em;
      font-size: .875em;
      line-height: 1.25;
      display: inline-block;
    }

    :where(mark) {
      border-radius: var(--trace-radius-sm);
      background-color: var(--trace-mark-bg);
      color: var(--trace-mark-text);
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
      padding: .125em .25em;
    }

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

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

    :where(sub) {
      bottom: -.25em;
    }

    :where(sup) {
      top: -.5em;
    }

    :where(hr) {
      height: 0;
      margin-block: var(--trace-divider-margin-block);
      border: 0;
      border-block-start: 2px solid var(--trace-typography-border);
    }

    :where(blockquote) {
      margin-block: var(--trace-blockquote-margin-block);
      padding-block: var(--trace-blockquote-padding-block);
      padding-inline: var(--trace-blockquote-padding-inline);
      border-inline-start: .25rem solid var(--trace-blockquote-border);
      background-color: var(--trace-blockquote-bg);
      line-height: var(--trace-typography-line-height);
      margin-inline: 0;
    }

    :where(blockquote > :last-child) {
      margin-block-end: 0;
    }

    :where(:scope) {
      --trace-link-color: light-dark(var(--trace-primary), var(--trace-secondary));
      --trace-link-hover: light-dark(var(--trace-primary-light), var(--trace-secondary-light));
      --trace-link-active: light-dark(var(--trace-primary-dark), var(--trace-secondary-dark));
      --trace-link-visited: var(--trace-link-color);
      --trace-link-focus: var(--trace-link-color);
      --trace-link-underline-offset: .2em;
      --trace-link-underline-thickness: .08em;
    }

    :where(a[href]) {
      color: var(--trace-link-color);
      text-decoration-line: underline;
      text-decoration-color: currentColor;
      text-decoration-thickness: var(--trace-link-underline-thickness);
      text-underline-offset: var(--trace-link-underline-offset);
      -webkit-text-decoration-skip-ink: auto;
      text-decoration-skip-ink: auto;
      border-radius: var(--trace-radius-sm);
      transition: color .15s ease-in-out;

      &:visited {
        color: var(--trace-link-visited);
      }

      &:hover {
        color: var(--trace-link-hover);
        text-decoration-thickness: calc(var(--trace-link-underline-thickness) * 2);
      }

      &:active {
        color: var(--trace-link-active);
      }

      &:focus-visible {
        outline: 2px solid var(--trace-link-focus);
        outline-offset: 3px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      :where(a[href]) {
        transition: none;
      }
    }

    @media (forced-colors: active) {
      :where(a[href]) {
        color: linktext;

        &:visited {
          color: visitedtext;
        }

        &:active {
          color: activetext;
        }

        &:focus-visible {
          outline-color: highlight;
        }
      }
    }

    :where(:scope) {
      --trace-table-text: var(--trace-text);
      --trace-table-accent: light-dark(var(--trace-primary), var(--trace-secondary));
      --trace-table-border: color-mix(in oklch,
      var(--trace-table-accent),
      transparent 78%);
      --trace-table-header-bg: transparent;
      --trace-table-header-text: var(--trace-table-accent);
      --trace-table-row-heading: var(--trace-table-text);
      --trace-table-footer-bg: transparent;
      --trace-table-stripe-bg: color-mix(in oklch,
      var(--trace-table-accent),
      transparent 97%);
      --trace-table-hover-bg: light-dark(color-mix(in oklch, var(--trace-primary), transparent 93%), color-mix(in oklch, var(--trace-secondary), transparent 90%));
      --trace-table-radius: 0;
      --trace-table-padding-block: .75rem;
      --trace-table-padding-inline: .75rem;
      --trace-table-font-size: 1rem;
      --trace-table-line-height: 1.5;
    }

    :where(table) {
      border-collapse: separate;
      border-spacing: 0;
      inline-size: 100%;
      color: var(--trace-table-text);
      font-size: var(--trace-table-font-size);
      line-height: var(--trace-table-line-height);
      text-align: start;
    }

    :where(table > caption) {
      caption-side: top;
      text-align: start;
      padding-block: 0 1rem;
      padding-inline: 0;
      font-size: 1em;
      font-weight: 600;
      line-height: 1.4;
    }

    :where(table > :is(thead, tbody, tfoot) > tr > :is(th, td), table > tr > :is(th, td)) {
      padding: var(--trace-table-padding-block) var(--trace-table-padding-inline);
      border-block-end: 1px solid var(--trace-table-border);
      vertical-align: top;
      text-align: inherit;
    }

    :where(table > :is(thead, tbody, tfoot) > tr > th, table > tr > th) {
      font-weight: 600;
    }

    :where(table > thead > tr > :is(th, td)) {
      background-color: var(--trace-table-header-bg);
      color: var(--trace-table-header-text);
      border-block-end: 2px solid var(--trace-table-accent);
      vertical-align: middle;
      letter-spacing: normal;
      font-size: .875em;
    }

    :where(table > tbody > tr > th) {
      color: var(--trace-table-row-heading);
    }

    :where(table > thead > tr:first-child > :first-child) {
      border-start-start-radius: var(--trace-table-radius);
    }

    :where(table > thead > tr:first-child > :last-child) {
      border-start-end-radius: var(--trace-table-radius);
    }

    :where(table:has( > tfoot) > tbody:last-of-type > tr:last-child > :is(th, td)) {
      border-block-end: 0;
    }

    :where(table > tfoot > tr > :is(th, td)) {
      background-color: var(--trace-table-footer-bg);
      color: var(--trace-table-accent);
      border-block-start: 2px solid var(--trace-table-accent);
      border-block-end: 0;
      font-weight: 600;
    }

    :where(table > tfoot > tr:last-child > :first-child) {
      border-end-start-radius: var(--trace-table-radius);
    }

    :where(table > tfoot > tr:last-child > :last-child) {
      border-end-end-radius: var(--trace-table-radius);
    }

    @keyframes trace-square-rotate {
      0% {
        transform: rotateX(0) rotateY(0);
      }

      25% {
        transform: rotateX(180deg) rotateY(0);
      }

      50% {
        transform: rotateX(180deg) rotateY(180deg);
      }

      75% {
        transform: rotateX(0) rotateY(180deg);
      }

      100% {
        transform: rotateX(0) rotateY(0);
      }
    }

    :where(div, section, article, main, aside, nav, header, footer, form, fieldset, figure):where([aria-busy="true"]) {
      isolation: isolate;
      cursor: wait;
      position: relative;

      &:before {
        content: "";
        z-index: 1;
        border-radius: inherit;
        background: var(--trace-loader-overlay, color-mix(in srgb, var(--trace-bg), transparent 30%));
        position: absolute;
        inset: 0;
      }

      &:after {
        content: "";
        z-index: 2;
        inline-size: var(--trace-loader-size, 2rem);
        block-size: var(--trace-loader-size, 2rem);
        border-radius: var(--trace-loader-radius, 2px);
        background-color: var(--trace-loader-color, light-dark(var(--trace-primary), var(--trace-secondary)));
        animation: trace-square-rotate var(--trace-loader-duration, 3s)
        ease-in-out infinite;
        pointer-events: none;
        margin: auto;
        position: absolute;
        inset: 0;
      }

      @media (prefers-reduced-motion: reduce) {
        &:after {
          animation: none;
        }
      }
    }

    :where(:scope) {
      --trace-button-color: light-dark(var(--trace-primary-darker), var(--trace-secondary));
      --trace-button-contrast: light-dark(var(--trace-secondary), var(--trace-primary-dark));
      --trace-button-outline-color: var(--trace-button-color);
      --trace-button-radius: var(--trace-radius-control);
      --trace-button-font-size: 1rem;
      --trace-button-line-height: 1.5rem;
      --trace-button-padding-block: .375rem;
      --trace-button-padding-inline: .75rem;
      --trace-button-box-shadow: var(--trace-shadow);
      --trace-button-icon-gap: .5em;
    }

    :where(button[type="reset"], input[type="reset"]) {
      --trace-button-color: var(--trace-primary-light);
      --trace-button-contrast: var(--trace-secondary-lighter);
      --trace-button-outline-color: var(--trace-button-color);
    }

    :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
      justify-content: center;
      align-items: center;
      gap: var(--trace-button-icon-gap);
      box-sizing: border-box;
      padding: var(--trace-button-padding-block)
      var(--trace-button-padding-inline);
      border: 2px solid var(--trace-button-border, var(--trace-button-color));
      border-radius: var(--trace-button-radius);
      background-color: var(--trace-button-bg, var(--trace-button-color));
      color: var(--trace-button-text, var(--trace-button-contrast));
      font-size: var(--trace-button-font-size);
      font-weight: 400;
      line-height: var(--trace-button-line-height);
      text-align: center;
      cursor: pointer;
      transition: background-color .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out, transform .2s ease-in-out;
      display: inline-flex;
    }

    :where(button:hover:not(:disabled), input[type="button"]:hover:not(:disabled), input[type="submit"]:hover:not(:disabled), input[type="reset"]:hover:not(:disabled)) {
      box-shadow: var(--trace-button-box-shadow);
    }

    :where(button:active:not(:disabled), input[type="button"]:active:not(:disabled), input[type="submit"]:active:not(:disabled), input[type="reset"]:active:not(:disabled)) {
      box-shadow: var(--trace-button-box-shadow);
      transform: scale(.95);
    }

    :where(button:focus-visible, input[type="button"]:focus-visible, input[type="submit"]:focus-visible, input[type="reset"]:focus-visible) {
      outline: 2px solid var(--trace-button-outline-color);
      outline-offset: 2px;
      box-shadow: none;
    }

    :where(button:disabled, input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled) {
      opacity: .5;
      cursor: not-allowed;
    }

    :where(button[aria-busy="true"]):after {
      content: "";
      inline-size: var(--trace-loader-size, 1em);
      block-size: var(--trace-loader-size, 1em);
      border-radius: var(--trace-loader-radius, 2px);
      background-color: var(--trace-button-loader-color, var(--trace-button-text, var(--trace-button-contrast)));
      animation: trace-square-rotate var(--trace-loader-duration, 3s) ease-in-out
      infinite;
      pointer-events: none;
      margin: auto;
      position: absolute;
      inset: 0;
    }

    @media (prefers-reduced-motion: reduce) {
      :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
        transition: none;
        transform: none;
      }
    }

    @media (forced-colors: active) {
      :where(button:disabled, input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled) {
        opacity: 1;
        color: graytext;
        border-color: graytext;
      }
    }

    :where(button[aria-busy="true"]) {
      cursor: wait;
      opacity: 1;
      box-shadow: none;
      color: #0000;
      position: relative;
      transform: none;
    }

    @media (prefers-reduced-motion: reduce) {
      :where(button[aria-busy="true"]):after {
        animation: none;
      }
    }

    @media (forced-colors: active) {
      :where(button[aria-busy="true"]) {
        forced-color-adjust: none;
        background-color: buttonface;
        border-color: buttontext;
      }

      :where(button[aria-busy="true"]):after {
        background-color: buttontext;
      }
    }

    :where(button[aria-busy="true"] > *) {
      opacity: 0;
    }

    :where(:scope) {
      --trace-switch-width: 2.125rem;
      --trace-switch-height: 1.25rem;
      --trace-switch-dot-size: .75rem;
      --trace-switch-dot-active-size: .875rem;
      --trace-switch-padding: .125rem;
      --trace-switch-color: light-dark(var(--trace-primary), var(--trace-secondary));
      --trace-switch-radius: var(--trace-radius-sm);
    }

    :where(input[type="checkbox"][role="switch"]) {
      appearance: none;
      box-sizing: border-box;
      inline-size: var(--trace-switch-width);
      block-size: var(--trace-switch-height);
      padding: var(--trace-switch-padding);
      border: 2px solid var(--trace-switch-color);
      border-radius: var(--trace-switch-radius);
      background-color: var(--trace-switch-bg, var(--trace-control-bg));
      background-image: radial-gradient(ellipse at center,
      var(--trace-switch-color) 50%,
      transparent 50%);
      vertical-align: middle;
      cursor: pointer;
      background-position: right -100% top 50%;
      background-repeat: no-repeat;
      background-size: 200% 300%;
      flex-shrink: 0;
      margin: 2px;
      transition: transform .25s ease-in-out, background-position .25s ease-in-out;
      display: inline-block;
      position: relative;
      overflow: hidden;
    }

    :where(input[type="checkbox"][role="switch"]):before {
      content: "";
      inline-size: var(--trace-switch-dot-size);
      block-size: var(--trace-switch-dot-size);
      background-color: var(--trace-switch-color);
      border-radius: 2px;
      transition: inset-inline-start .2s ease-in-out, inline-size .2s ease-in-out, background-color .2s ease-in-out;
      position: absolute;
      inset-block-start: var(--trace-switch-padding);
      inset-inline-start: var(--trace-switch-padding);
    }

    :where(input[type="checkbox"][role="switch"]:checked) {
      background-position: right 40% top 50%;
    }

    :where(input[type="checkbox"][role="switch"]:checked):before {
      background-color: var(--trace-switch-dot-checked, var(--trace-switch-bg, var(--trace-control-bg)));
      inset-inline-start: calc(100% - var(--trace-switch-dot-size) - var(--trace-switch-padding));
    }

    :where(input[type="checkbox"][role="switch"]:dir(rtl)) {
      background-position: -100%;
    }

    :where(input[type="checkbox"][role="switch"]:dir(rtl):checked) {
      background-position: 40%;
    }

    :where(input[type="checkbox"][role="switch"]:focus-visible) {
      outline: 2px solid var(--trace-switch-color);
      outline-offset: 2px;
    }

    :where(label:has( > input[type="checkbox"][role="switch"])) {
      cursor: pointer;
      align-items: center;
      gap: .5rem;
      display: inline-flex;
    }

    :where(input[type="checkbox"][role="switch"]:active:not(:disabled), label:active > input[type="checkbox"][role="switch"]:not(:disabled)) {
      transform: scale(.9);
    }

    :where(input[type="checkbox"][role="switch"]:active:not(:disabled), label:active > input[type="checkbox"][role="switch"]:not(:disabled)):before {
      inline-size: var(--trace-switch-dot-active-size);
    }

    :where(input[type="checkbox"][role="switch"]:active:checked:not(:disabled), label:active > input[type="checkbox"][role="switch"]:checked:not(:disabled)):before {
      inset-inline-start: calc(100% - var(--trace-switch-dot-active-size) - var(--trace-switch-padding));
    }

    :where(input[type="checkbox"][role="switch"]:disabled) {
      opacity: .5;
      cursor: not-allowed;
    }

    :where(label:has( > input[type="checkbox"][role="switch"]:disabled)) {
      cursor: not-allowed;
    }

    :where(label > input[type="checkbox"][role="switch"]:disabled ~ span) {
      opacity: .5;
    }

    @media (prefers-reduced-motion: reduce) {
      :where(input[type="checkbox"][role="switch"]), :where(input[type="checkbox"][role="switch"]):before {
        transition: none;
        transform: none;
      }
    }

    @media (forced-colors: active) {
      :where(input[type="checkbox"][role="switch"]) {
        appearance: auto;
        background: none;
      }

      :where(input[type="checkbox"][role="switch"]):before {
        content: none;
      }
    }

    :where(input[type="checkbox"][role="switch"][aria-invalid="true"]) {
      --trace-switch-color: var(--trace-danger);
    }

    :where(:scope) {
      --trace-radio-size: 1.25rem;
      --trace-radio-color: light-dark(var(--trace-primary), var(--trace-secondary));
    }

    :where(input[type="radio"]) {
      appearance: none;
      box-sizing: border-box;
      inline-size: var(--trace-radio-size);
      block-size: var(--trace-radio-size);
      border: 2px solid var(--trace-radio-color);
      background: var(--trace-radio-bg, var(--trace-control-bg));
      vertical-align: middle;
      cursor: pointer;
      border-radius: 50%;
      flex-shrink: 0;
      margin: 2px;
      padding: 0;
      transition: transform .25s ease-in-out, border-color .25s ease-in-out;
      display: inline-block;
      position: relative;
    }

    :where(input[type="radio"]):before {
      content: "";
      box-sizing: border-box;
      border: 2px solid var(--trace-radio-color);
      background-color: #0000;
      border-radius: 50%;
      transition: border-color .25s ease-in-out, background-color .25s ease-in-out, transform .25s ease-in-out;
      position: absolute;
      inset: -2px;
    }

    :where(input[type="radio"]:checked):before {
      background-color: var(--trace-radio-color);
      transform: scale(.6);
    }

    :where(input[type="radio"]:focus-visible) {
      outline: 2px solid var(--trace-radio-color);
      outline-offset: 2px;
    }

    :where(label:has( > input[type="radio"])) {
      cursor: pointer;
      align-items: center;
      gap: .5rem;
      display: inline-flex;
    }

    :where(input[type="radio"]:active:not(:disabled), label:active > input[type="radio"]:not(:disabled)) {
      transform: scale(.9);
    }

    :where(input[type="radio"]:disabled) {
      opacity: .5;
      cursor: not-allowed;
    }

    :where(label:has( > input[type="radio"]:disabled)) {
      cursor: not-allowed;
    }

    :where(label > input[type="radio"]:disabled ~ span) {
      opacity: .5;
    }

    @media (prefers-reduced-motion: reduce) {
      :where(input[type="radio"]), :where(input[type="radio"]):before {
        transition: none;
        transform: none;
      }

      :where(input[type="radio"]:checked):before {
        transform: scale(.6);
      }
    }

    @media (forced-colors: active) {
      :where(input[type="radio"]) {
        appearance: auto;
      }

      :where(input[type="radio"]):before {
        content: none;
      }
    }

    :where(input[type="radio"][aria-invalid="true"]) {
      --trace-radio-color: var(--trace-danger);
    }

    :where(:scope) {
      --trace-input-font-size: 1rem;
      --trace-input-line-height: 1.5rem;
      --trace-input-padding-block: .375rem;
      --trace-input-padding-inline: .625rem;
      --trace-input-radius: var(--trace-radius-control);
      --trace-input-text: var(--trace-text);
      --trace-input-border: light-dark(var(--trace-primary), var(--trace-secondary));
      --trace-input-focus: light-dark(var(--trace-primary-light), var(--trace-secondary-light));
      --trace-input-placeholder: light-dark(var(--trace-neutral), var(--trace-neutral-light));
      --trace-input-error: var(--trace-danger);
      --trace-input-shadow: var(--trace-shadow);
    }

    :where(input:not([type]), input:is([type="text"], [type="search"], [type="email"], [type="url"], [type="tel"], [type="password"], [type="number"], [type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"], [type="color"], [type="file"])) {
      --_trace-input-border: var(--trace-input-border);
      box-sizing: border-box;
      inline-size: 100%;
      min-inline-size: 0;
      padding: var(--trace-input-padding-block) var(--trace-input-padding-inline);
      border: 2px solid var(--_trace-input-border);
      border-radius: var(--trace-input-radius);
      background-color: var(--trace-input-bg, var(--trace-control-bg));
      color: var(--trace-input-text);
      caret-color: var(--trace-input-focus);
      font-family: var(--trace-font-body);
      font-size: var(--trace-input-font-size);
      line-height: var(--trace-input-line-height);
      text-align: start;
      cursor: text;
      margin: 0;
      transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out;
      display: block;

      &::placeholder {
        color: var(--trace-input-placeholder);
        opacity: 1;
      }

      &:hover:not(:disabled):not([readonly]):not(:focus) {
        box-shadow: var(--trace-input-shadow);
      }

      &:focus {
        --_trace-input-border: var(--trace-input-focus);
        outline-offset: 2px;
        box-shadow: 0 0 0 4px
        color-mix(in srgb, var(--trace-input-focus), transparent 70%);
        outline: 2px solid #0000;
      }

      &[readonly] {
        cursor: default;
      }

      &[aria-invalid="true"] {
        --_trace-input-border: var(--trace-input-error);
      }

      &:user-invalid {
        --_trace-input-border: var(--trace-input-error);
      }

      &:disabled {
        opacity: .5;
        cursor: not-allowed;
        box-shadow: none;
      }

      @media (prefers-reduced-motion: reduce) {
        transition: none;
      }
    }

    :where(input[type="color"]) {
      block-size: calc(var(--trace-input-line-height) + var(--trace-input-padding-block) * 2 +
        4px);
      cursor: pointer;
      padding: .25rem;
    }

    :where(input[type="color"])::-webkit-color-swatch-wrapper {
      padding: 0;
    }

    :where(input[type="color"])::-webkit-color-swatch {
      border: 0;
      border-radius: 1px;
    }

    :where(input[type="color"])::-moz-color-swatch {
      border: 0;
      border-radius: 1px;
    }

    :where(label:has( > input:not([type]),  > input:is([type="text"], [type="search"], [type="email"], [type="url"], [type="tel"], [type="password"], [type="number"], [type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"], [type="color"], [type="file"]))) {
      cursor: pointer;
      min-inline-size: 0;
      color: var(--trace-input-text);
      gap: .25rem;
      display: grid;

      &:has( > input[aria-invalid="true"]) > small:last-child {
        color: var(--trace-input-error);
      }

      &:has( > input:user-invalid) > small:last-child {
        color: var(--trace-input-error);
      }

      &:has( > input:disabled) {
        color: color-mix(in srgb, var(--trace-input-text), transparent 50%);
        cursor: not-allowed;
      }

      & > small {
        margin: 0;
        line-height: 1.5;
      }
    }

    :where(label:has(input) + small) {
      margin-block-start: .25rem;
      line-height: 1.5;
      display: block;
    }

    :where(label:has(input[aria-invalid="true"], input:user-invalid) + small) {
      color: var(--trace-input-error);
    }

    :where(label[for]:not(:has(input))) {
      cursor: pointer;
      color: var(--trace-input-text);
      margin-block-end: .25rem;
      display: inline-block;
    }

    :where(input[aria-invalid="true"] + small, input:user-invalid + small) {
      color: var(--trace-input-error);
    }

    :where(label[for]:has( + input:disabled)) {
      opacity: .5;
      cursor: not-allowed;
    }

    :where(:scope) {
      --trace-file-button-bg: var(--trace-primary-light);
      --trace-file-button-text: var(--trace-secondary-lighter);
    }

    :where(input[type="file"]) {
      cursor: pointer;
      padding-block: 0;
      padding-inline-start: 0;
    }

    :where(input[type="file"])::file-selector-button {
      padding: var(--trace-input-padding-block) var(--trace-input-padding-inline);
      background: var(--trace-file-button-bg);
      color: var(--trace-file-button-text);
      font: inherit;
      line-height: inherit;
      cursor: pointer;
      border: 0;
      border-radius: 0;
      margin: 0;
      margin-inline-end: var(--trace-input-padding-inline);
    }

    :where(input[type="file"]:hover:not(:disabled):not([readonly]):not(:focus)) {
      box-shadow: none;
    }

    :where(input[type="file"]:disabled)::file-selector-button {
      cursor: not-allowed;
    }

    @media (forced-colors: active) {
      :where(input[type="file"])::file-selector-button {
        border-inline-end: 1px solid buttontext;
      }
    }

    :where(:scope) {
      --trace-textarea-font-size: 1rem;
      --trace-textarea-line-height: 1.5rem;
      --trace-textarea-padding-block: .375rem;
      --trace-textarea-padding-inline: .625rem;
      --trace-textarea-radius: var(--trace-radius-control);
      --trace-textarea-text: var(--trace-text);
      --trace-textarea-border: light-dark(var(--trace-primary), var(--trace-secondary));
      --trace-textarea-focus: light-dark(var(--trace-primary-light), var(--trace-secondary-light));
      --trace-textarea-placeholder: light-dark(var(--trace-neutral), var(--trace-neutral-light));
      --trace-textarea-error: var(--trace-danger);
      --trace-textarea-shadow: var(--trace-shadow);
    }

    :where(textarea) {
      --_trace-textarea-border: var(--trace-textarea-border);
      box-sizing: border-box;
      inline-size: 100%;
      min-inline-size: 0;
      padding: var(--trace-textarea-padding-block)
      var(--trace-textarea-padding-inline);
      border: 2px solid var(--_trace-textarea-border);
      border-radius: var(--trace-textarea-radius);
      background: var(--trace-textarea-bg, var(--trace-control-bg));
      color: var(--trace-textarea-text);
      caret-color: var(--trace-textarea-focus);
      font-family: var(--trace-font-body);
      font-size: var(--trace-textarea-font-size);
      line-height: var(--trace-textarea-line-height);
      text-align: start;
      resize: vertical;
      cursor: text;
      margin: 0;
      transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out;
      display: block;

      &::placeholder {
        color: var(--trace-textarea-placeholder);
        opacity: 1;
      }

      &:hover:not(:disabled):not([readonly]):not(:focus) {
        box-shadow: var(--trace-textarea-shadow);
      }

      &:focus {
        --_trace-textarea-border: var(--trace-textarea-focus);
        outline-offset: 2px;
        box-shadow: 0 0 0 4px
        color-mix(in srgb, var(--trace-textarea-focus), transparent 70%);
        outline: 2px solid #0000;
      }

      &[aria-invalid="true"] {
        --_trace-textarea-border: var(--trace-textarea-error);
      }

      &:user-invalid {
        --_trace-textarea-border: var(--trace-textarea-error);
      }

      &[readonly] {
        cursor: default;
      }

      &:disabled {
        opacity: .5;
        cursor: not-allowed;
        box-shadow: none;
      }

      @media (prefers-reduced-motion: reduce) {
        transition: none;
      }
    }

    :where(label:has( > textarea)) {
      min-inline-size: 0;
      color: var(--trace-textarea-text);
      cursor: pointer;
      gap: .25rem;
      display: grid;

      & > small {
        margin: 0;
        line-height: 1.5;
      }

      &:has( > textarea:disabled) {
        color: color-mix(in srgb, var(--trace-textarea-text), transparent 50%);
        cursor: not-allowed;
      }

      &:has( > textarea[aria-invalid="true"],  > textarea:user-invalid) > small:last-child {
        color: var(--trace-textarea-error);
      }
    }

    :where(label:has( > textarea) + small) {
      margin-block-start: .25rem;
      line-height: 1.5;
      display: block;
    }

    :where(label:has( > textarea[aria-invalid="true"],  > textarea:user-invalid) + small) {
      color: var(--trace-textarea-error);
    }

    :where(label[for]:has( + textarea:disabled)) {
      opacity: .5;
      cursor: not-allowed;
    }

    :where(textarea[aria-invalid="true"] + small, textarea:user-invalid + small) {
      color: var(--trace-textarea-error);
    }

    :where(:scope) {
      --trace-checkbox-size: 1.25rem;
      --trace-checkbox-radius: var(--trace-radius-control);
      --trace-checkbox-color: light-dark(var(--trace-primary), var(--trace-secondary));
      --trace-checkbox-mark: light-dark(var(--trace-neutral-lighter), var(--trace-primary-dark));
    }

    :where(input[type="checkbox"]:not([role="switch"])) {
      appearance: none;
      isolation: isolate;
      box-sizing: border-box;
      inline-size: var(--trace-checkbox-size);
      block-size: var(--trace-checkbox-size);
      border: 2px solid var(--trace-checkbox-color);
      border-radius: var(--trace-checkbox-radius);
      background-color: var(--trace-checkbox-bg, var(--trace-control-bg));
      vertical-align: middle;
      cursor: pointer;
      flex-shrink: 0;
      margin: 2px;
      padding: 0;
      transition: transform .2s ease-in-out, border-color .2s ease-in-out;
      display: inline-block;
      position: relative;

      &:before {
        content: "";
        z-index: 1;
        background: var(--trace-checkbox-mark);
        opacity: 0;
        transition: opacity .18s ease-in-out, transform .18s ease-in-out;
        position: absolute;
        inset: 10%;
        transform: scale(.6);
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 4 4 10-10' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
      }

      &:after {
        content: "";
        z-index: 0;
        border-radius: max(0px, calc(var(--trace-checkbox-radius) - 2px));
        background-color: var(--trace-checkbox-color);
        opacity: 0;
        transition: opacity .18s ease-in-out, transform .18s ease-in-out;
        position: absolute;
        inset: 0;
        transform: scale(.6);
      }

      &:checked:after, &:indeterminate:after, &:checked:before {
        opacity: 1;
        transform: scale(1);
      }

      &:indeterminate:before {
        opacity: 1;
        border-radius: 1px;
        block-size: 2px;
        inline-size: 60%;
        margin: auto;
        inset: 0;
        transform: scale(1);
        mask: none;
      }

      &:focus-visible {
        outline: 2px solid var(--trace-checkbox-color);
        outline-offset: 2px;
      }

      &:active:not(:disabled) {
        transform: scale(.9);
      }

      &:disabled {
        opacity: .5;
        cursor: not-allowed;
      }

      &[aria-invalid="true"] {
        --trace-checkbox-color: var(--trace-danger);
        --trace-checkbox-mark: var(--trace-neutral-lighter);
      }

      &:user-invalid {
        --trace-checkbox-color: var(--trace-danger);
        --trace-checkbox-mark: var(--trace-neutral-lighter);
      }

      @media (prefers-reduced-motion: reduce) {
        transition: none;
        transform: none;

        &:before, &:after {
          transition: none;
          transform: none;
        }
      }

      @media (forced-colors: active) {
        appearance: auto;
        background: none;

        &:before, &:after {
          content: none;
        }
      }
    }

    :where(label:has( > input[type="checkbox"]:not([role="switch"]))) {
      color: var(--trace-text);
      cursor: pointer;
      align-items: center;
      gap: .5rem;
      display: inline-flex;

      &:has( > input:disabled) {
        color: color-mix(in srgb, var(--trace-text), transparent 50%);
        cursor: not-allowed;
      }
    }

    :where(:scope) {
      --trace-select-font-size: 1rem;
      --trace-select-line-height: 1.5rem;
      --trace-select-padding-block: .375rem;
      --trace-select-padding-inline: .625rem;
      --trace-select-radius: var(--trace-radius-control);
      --trace-select-text: var(--trace-text);
      --trace-select-border: light-dark(var(--trace-primary), var(--trace-secondary));
      --trace-select-focus: light-dark(var(--trace-primary-light), var(--trace-secondary-light));
      --trace-select-error: var(--trace-danger);
      --trace-select-shadow: var(--trace-shadow);
      --trace-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646b79' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      --trace-select-arrow-offset: var(--trace-select-padding-inline);
      --trace-select-arrow-size: 1.25em;
    }

    :where(select) {
      --_trace-select-border: var(--trace-select-border);
      box-sizing: border-box;
      inline-size: 100%;
      min-inline-size: 0;
      padding: var(--trace-select-padding-block)
      var(--trace-select-padding-inline);
      border: 2px solid var(--_trace-select-border);
      border-radius: var(--trace-select-radius);
      background: var(--trace-select-bg, var(--trace-control-bg));
      color: var(--trace-select-text);
      font-family: var(--trace-font-body);
      font-size: var(--trace-select-font-size);
      line-height: var(--trace-select-line-height);
      text-align: start;
      appearance: auto;
      cursor: pointer;
      margin: 0;
      transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out;
      display: block;

      &:hover:not(:disabled):not(:focus) {
        box-shadow: var(--trace-select-shadow);
      }

      &:focus {
        --_trace-select-border: var(--trace-select-focus);
        outline-offset: 2px;
        box-shadow: 0 0 0 4px
        color-mix(in srgb, var(--trace-select-focus), transparent 70%);
        outline: 2px solid #0000;
      }

      &[aria-invalid="true"] {
        --_trace-select-border: var(--trace-select-error);
      }

      &:user-invalid {
        --_trace-select-border: var(--trace-select-error);
      }

      &:disabled {
        opacity: .5;
        cursor: not-allowed;
        box-shadow: none;
      }

      @media (prefers-reduced-motion: reduce) {
        transition: none;
      }
    }

    :where(select:not([multiple]):not([size]), select:not([multiple])[size="0"], select:not([multiple])[size="1"]) {
      appearance: none;
      background-image: var(--trace-select-arrow);
      background-repeat: no-repeat;
      background-size: var(--trace-select-arrow-size)
      var(--trace-select-arrow-size);
      background-position: right var(--trace-select-arrow-offset) center;
      padding-inline-end: calc(var(--trace-select-arrow-offset) + var(--trace-select-arrow-size) +
        var(--trace-select-padding-inline));

      &:dir(rtl) {
        background-position: left var(--trace-select-arrow-offset) center;
      }

      @media (forced-colors: active) {
        appearance: auto;
        background-image: none;
      }
    }

    :where(select option, select optgroup) {
      background-color: var(--trace-select-bg, var(--trace-control-bg));
      color: var(--trace-select-text);
    }

    :where(select[multiple], select[size]:not([size="1"])) {
      cursor: default;
    }

    :where(label:has( > select)) {
      min-inline-size: 0;
      color: var(--trace-select-text);
      cursor: pointer;
      gap: .25rem;
      display: grid;

      & > small {
        margin: 0;
        line-height: 1.5;
      }

      &:has( > select:disabled) {
        color: color-mix(in srgb, var(--trace-select-text), transparent 50%);
        cursor: not-allowed;
      }

      &:has( > select[aria-invalid="true"]) > small:last-child {
        color: var(--trace-select-error);
      }

      &:has( > select:user-invalid) > small:last-child {
        color: var(--trace-select-error);
      }
    }

    :where(label:has( > select) + small) {
      margin-block-start: .25rem;
      line-height: 1.5;
      display: block;
    }

    :where(label:has( > select[aria-invalid="true"]) + small), :where(label:has( > select:user-invalid) + small) {
      color: var(--trace-select-error);
    }

    :where(label[for]:has( + select:disabled)) {
      opacity: .5;
      cursor: not-allowed;
    }

    :where(select[aria-invalid="true"] + small, select:user-invalid + small) {
      color: var(--trace-select-error);
    }

    :where(:scope) {
      --trace-range-color: light-dark(var(--trace-primary), var(--trace-secondary));
      --trace-range-track-color: light-dark(var(--trace-primary-light), var(--trace-secondary-dark));
      --trace-range-error: var(--trace-danger);
      --trace-range-track-size: .375rem;
      --trace-range-thumb-size: 1.25rem;
      --trace-range-height: 2rem;
      --trace-range-active-scale: 1.15;
      --trace-range-duration: .15s;
    }

    :where(input[type="range"]) {
      appearance: none;
      box-sizing: border-box;
      inline-size: 100%;
      min-inline-size: 0;
      block-size: var(--trace-range-height);
      color: var(--trace-range-color);
      accent-color: var(--trace-range-color);
      cursor: pointer;
      background: none;
      border: 0;
      margin: 0;
      padding: 0;
      display: block;

      &:focus-visible {
        outline: 2px solid var(--trace-range-color);
        outline-offset: 2px;
        border-radius: var(--trace-radius-control);
      }

      &:disabled {
        opacity: .5;
        cursor: not-allowed;
      }

      &[aria-invalid="true"] {
        --trace-range-color: var(--trace-range-error);
        --trace-range-track-color: color-mix(in srgb,
        var(--trace-range-error),
        transparent 70%);
      }
    }

    :where(input[type="range"])::-webkit-slider-runnable-track {
      box-sizing: border-box;
      block-size: var(--trace-range-track-size);
      background: var(--trace-range-track-color);
      border: 0;
      border-radius: 999px;
    }

    :where(input[type="range"])::-moz-range-track {
      box-sizing: border-box;
      block-size: var(--trace-range-track-size);
      background: var(--trace-range-track-color);
      border: 0;
      border-radius: 999px;
    }

    :where(input[type="range"])::-webkit-slider-thumb {
      appearance: none;
      box-sizing: border-box;
      inline-size: var(--trace-range-thumb-size);
      block-size: var(--trace-range-thumb-size);
      border: 2px solid var(--trace-range-color);
      background: var(--trace-range-color);
      transition: transform var(--trace-range-duration) ease-out,
      box-shadow .2s ease-in-out;
      border-radius: 50%;
      margin-block-start: calc((var(--trace-range-track-size) - var(--trace-range-thumb-size)) / 2);
    }

    :where(input[type="range"])::-moz-range-thumb {
      appearance: none;
      box-sizing: border-box;
      inline-size: var(--trace-range-thumb-size);
      block-size: var(--trace-range-thumb-size);
      border: 2px solid var(--trace-range-color);
      background: var(--trace-range-color);
      transition: transform var(--trace-range-duration) ease-out,
      box-shadow .2s ease-in-out;
      border-radius: 50%;
    }

    :where(input[type="range"]:focus:not(:disabled))::-webkit-slider-thumb {
      box-shadow: 0 0 0 4px
      color-mix(in srgb, var(--trace-range-color), transparent 70%);
    }

    :where(input[type="range"]:focus:not(:disabled))::-moz-range-thumb {
      box-shadow: 0 0 0 4px
      color-mix(in srgb, var(--trace-range-color), transparent 70%);
    }

    :where(input[type="range"]:active:not(:disabled))::-webkit-slider-thumb {
      transform: scale(var(--trace-range-active-scale));
    }

    :where(input[type="range"]:active:not(:disabled))::-moz-range-thumb {
      transform: scale(var(--trace-range-active-scale));
    }

    @media (prefers-reduced-motion: reduce) {
      :where(input[type="range"])::-webkit-slider-thumb {
        transition: none;
        transform: none;
      }

      :where(input[type="range"]:active:not(:disabled))::-webkit-slider-thumb {
        transition: none;
        transform: none;
      }

      :where(input[type="range"])::-moz-range-thumb {
        transition: none;
        transform: none;
      }

      :where(input[type="range"]:active:not(:disabled))::-moz-range-thumb {
        transition: none;
        transform: none;
      }
    }

    :where(label:has( > input[type="range"])) {
      min-inline-size: 0;
      color: var(--trace-text);
      cursor: pointer;
      gap: .25rem;
      display: grid;

      & > small {
        margin: 0;
        line-height: 1.5;
      }

      &:has( > input[aria-invalid="true"]) > small:last-child {
        color: var(--trace-range-error);
      }

      &:has( > input:disabled) {
        cursor: not-allowed;
        color: color-mix(in srgb, var(--trace-text), transparent 50%);
      }
    }

    @media (forced-colors: active) {
      :where(input[type="range"]) {
        --trace-range-color: ButtonText;
        --trace-range-track-color: GrayText;
      }
    }
  }

  @layer trace.extensions {
    :where(.trace-icon) {
      inline-size: var(--trace-icon-size, 1em);
      block-size: var(--trace-icon-size, 1em);
      vertical-align: middle;
      flex-shrink: 0;
      justify-content: center;
      align-items: center;
      line-height: 1;
      display: inline-flex;
    }

    :where(.trace-icon > svg, .trace-icon > img) {
      object-fit: contain;
      block-size: 100%;
      inline-size: 100%;
      display: block;
    }

    :where(.trace-icon-directional:dir(rtl)) {
      transform: scaleX(-1);
    }

    :where(.trace-loader) {
      inline-size: var(--trace-loader-size, 1em);
      block-size: var(--trace-loader-size, 1em);
      vertical-align: middle;
      flex-shrink: 0;
      place-items: center;
      display: inline-grid;
    }

    :where(.trace-loader):before {
      content: "";
      border-radius: var(--trace-loader-radius, 2px);
      background-color: var(--trace-loader-color, var(--trace-primary));
      block-size: 100%;
      inline-size: 100%;
      animation: trace-square-rotate var(--trace-loader-duration, 3s) ease-in-out
      infinite;
    }

    @media (prefers-reduced-motion: reduce) {
      :where(.trace-loader):before {
        animation: none;
        transform: none;
      }
    }

    :where(table.trace-striped > tbody > tr:nth-child(odd) > :is(th, td)) {
      background-color: var(--trace-table-stripe-bg);
    }

    :where(table.trace-hover > tbody > tr:is(:hover, :focus-within) > :is(th, td)) {
      background-color: var(--trace-table-hover-bg);
    }

    :where(table.trace-compact) {
      --trace-table-padding-block: .375rem;
      --trace-table-padding-inline: .625rem;
      --trace-table-font-size: .875rem;
    }

    :where(table > :is(thead, tbody, tfoot) > tr > .trace-numeric, table > tr > .trace-numeric) {
      text-align: end;
      font-variant-numeric: tabular-nums;
    }

    :where(.trace-table-wrap) {
      min-inline-size: 0;
      max-inline-size: 100%;
      overflow-x: auto;

      &:focus-visible {
        outline: 2px solid var(--trace-table-border);
        outline-offset: 2px;
      }
    }

    @media (forced-colors: active) {
      :where(table.trace-hover > tbody > tr:is(:hover, :focus-within) > :is(th, td)) {
        outline-offset: -1px;
        outline: 1px solid highlight;
      }
    }

    :where(button > .trace-icon) {
      --trace-icon-size: var(--trace-button-line-height);
    }

    :where(button[aria-busy="true"] > span.trace-icon) {
      position: relative;
    }

    :where(button[aria-busy="true"] > span.trace-icon > *) {
      opacity: 0;
    }

    :where(button[aria-busy="true"] > span.trace-icon):after {
      content: "";
      inline-size: var(--trace-loader-size, 1em);
      block-size: var(--trace-loader-size, 1em);
      border-radius: var(--trace-loader-radius, 2px);
      background-color: var(--trace-button-loader-color, var(--trace-button-text, var(--trace-button-contrast)));
      animation: trace-square-rotate var(--trace-loader-duration, 3s) ease-in-out
      infinite;
      pointer-events: none;
      margin: auto;
      position: absolute;
      inset: 0;
    }

    :where(button.trace-icon-only) {
      padding-inline: var(--trace-button-padding-block);
      aspect-ratio: 1;
    }

    :where(button.trace-small, input[type="button"].trace-small, input[type="submit"].trace-small, input[type="reset"].trace-small) {
      --trace-button-font-size: .875rem;
      --trace-button-line-height: 1.25rem;
      --trace-button-padding-block: .25rem;
      --trace-button-padding-inline: .5rem;
    }

    :where(button.trace-large, input[type="button"].trace-large, input[type="submit"].trace-large, input[type="reset"].trace-large) {
      --trace-button-font-size: 1.125rem;
      --trace-button-line-height: 1.75rem;
      --trace-button-padding-block: .5rem;
      --trace-button-padding-inline: 1rem;
    }

    :where(button.trace-primary, input[type="button"].trace-primary, input[type="submit"].trace-primary, input[type="reset"].trace-primary) {
      --trace-button-color: light-dark(var(--trace-primary-darker), var(--trace-secondary));
      --trace-button-contrast: light-dark(var(--trace-secondary), var(--trace-primary-dark));
      --trace-button-outline-color: var(--trace-button-color);
    }

    :where(button.trace-secondary, input[type="button"].trace-secondary, input[type="submit"].trace-secondary, input[type="reset"].trace-secondary) {
      --trace-button-color: var(--trace-primary-light);
      --trace-button-contrast: var(--trace-secondary-lighter);
      --trace-button-outline-color: var(--trace-button-color);
    }

    :where(button.trace-danger, input[type="button"].trace-danger, input[type="submit"].trace-danger, input[type="reset"].trace-danger) {
      --trace-button-color: var(--trace-danger);
      --trace-button-contrast: var(--trace-neutral-lighter);
      --trace-button-outline-color: var(--trace-button-color);
    }

    :where(button.trace-outline, input[type="button"].trace-outline, input[type="submit"].trace-outline, input[type="reset"].trace-outline) {
      --trace-button-bg: transparent;
      --trace-button-text: var(--trace-button-outline-color);
      --trace-button-border: var(--trace-button-outline-color);
    }

    :where(button.trace-outline:hover:not(:disabled):not([aria-busy="true"]), input[type="button"].trace-outline:hover:not(:disabled), input[type="submit"].trace-outline:hover:not(:disabled), input[type="reset"].trace-outline:hover:not(:disabled), button.trace-outline:active:not(:disabled):not([aria-busy="true"]), input[type="button"].trace-outline:active:not(:disabled), input[type="submit"].trace-outline:active:not(:disabled), input[type="reset"].trace-outline:active:not(:disabled), button.trace-outline[aria-busy="true"]) {
      background-color: var(--trace-button-color);
      color: var(--trace-button-contrast);
      border-color: var(--trace-button-color);
    }

    :where(button.trace-outline[aria-busy="true"]) {
      --trace-button-text: var(--trace-button-contrast);
      --trace-button-loader-color: var(--trace-button-contrast);
    }

    @media (prefers-reduced-motion: reduce) {
      :where(button[aria-busy="true"] > span.trace-icon):after {
        animation: none;
      }
    }

    @media (forced-colors: active) {
      :where(button[aria-busy="true"] > span.trace-icon):after {
        background-color: buttontext;
      }
    }

    :where(button[aria-busy="true"]:has( > span.trace-icon)) {
      color: var(--trace-button-text, var(--trace-button-contrast));
    }

    :where(button[aria-busy="true"]:has( > span.trace-icon)):after {
      content: none;
    }

    :where(button[aria-busy="true"]:has( > span.trace-icon) > *) {
      opacity: 1;
    }

    :where(button.trace-outline[aria-busy="true"]:not(:has( > span.trace-icon))) {
      color: #0000;
    }

    @media (forced-colors: active) {
      :where(button[aria-busy="true"]:has( > span.trace-icon):disabled) {
        border-color: graytext;
      }

      :where(button[aria-busy="true"]:has( > span.trace-icon)) {
        forced-color-adjust: auto;
      }

      :where(button.trace-outline[aria-busy="true"]:not(:has( > span.trace-icon))) {
        background-color: buttonface;
        border-color: buttontext;
      }
    }

    :where(label:has( > .trace-switch > input[type="checkbox"][role="switch"])) {
      cursor: pointer;
      align-items: center;
      gap: .5rem;
      display: inline-flex;
    }

    :where(label:has( > .trace-switch > input[type="checkbox"][role="switch"]:disabled)) {
      cursor: not-allowed;
    }

    :where(.trace-switch) {
      vertical-align: middle;
      flex-shrink: 0;
      transition: transform .25s ease-in-out;
      display: inline-flex;
      position: relative;
    }

    :where(.trace-switch > .trace-icon) {
      --trace-icon-size: var(--trace-switch-icon-size, .75rem);
      color: var(--trace-switch-color);
      pointer-events: none;
      margin-block: auto;
      transition: color .2s ease-in-out;
      position: absolute;
      inset-block: 0;
      inset-inline-end: calc(4px + var(--trace-switch-padding));
    }

    :where(.trace-switch:has( > input:checked) > .trace-icon) {
      color: var(--trace-switch-dot-checked, var(--trace-switch-bg, var(--trace-control-bg)));
      inset-inline-start: calc(4px + var(--trace-switch-padding));
      inset-inline-end: auto;
    }

    :where(.trace-switch:has( > input:disabled) > .trace-icon, label > .trace-switch:has( > input:disabled) ~ span) {
      opacity: .5;
    }

    :where(.trace-switch:has( > input:disabled)) {
      cursor: not-allowed;
    }

    :where(.trace-switch > input[type="checkbox"][role="switch"]) {
      transform: none;
    }

    :where(.trace-switch:has( > input:active:not(:disabled)), label:active > .trace-switch:has( > input:not(:disabled))) {
      transform: scale(.9);
    }

    :where(label:active > .trace-switch > input[role="switch"]:not(:disabled)):before {
      inline-size: var(--trace-switch-dot-active-size);
    }

    :where(label:active > .trace-switch > input[role="switch"]:checked:not(:disabled)):before {
      inset-inline-start: calc(100% - var(--trace-switch-dot-active-size) - var(--trace-switch-padding));
    }

    @media (prefers-reduced-motion: reduce) {
      :where(.trace-switch), :where(.trace-switch > .trace-icon) {
        transition: none;
        transform: none;
      }
    }

    @media (forced-colors: active) {
      :where(.trace-switch > .trace-icon) {
        display: none;
      }
    }

    :where(.trace-switch:has( > input[aria-invalid="true"])) {
      --trace-switch-color: var(--trace-danger);
    }

    :where(.trace-switch:has( > input.trace-small) > .trace-icon) {
      display: none;
    }

    :where(.trace-switch:has( > input.trace-large)) {
      --trace-switch-icon-size: 1rem;
    }

    :where(input[type="checkbox"][role="switch"].trace-small) {
      --trace-switch-width: 1.75rem;
      --trace-switch-height: 1rem;
      --trace-switch-dot-size: .5rem;
      --trace-switch-dot-active-size: .625rem;
    }

    :where(input[type="checkbox"][role="switch"].trace-large) {
      --trace-switch-width: 2.625rem;
      --trace-switch-height: 1.5rem;
      --trace-switch-dot-size: 1rem;
      --trace-switch-dot-active-size: 1.125rem;
    }

    :where(input[type="radio"].trace-small) {
      --trace-radio-size: 1rem;
    }

    :where(input[type="radio"].trace-large) {
      --trace-radio-size: 1.5rem;
    }

    :where(label:has( > .trace-input-wrap > input)) {
      min-inline-size: 0;
      color: var(--trace-input-text);
      cursor: pointer;
      gap: .25rem;
      display: grid;

      & > small {
        margin: 0;
        line-height: 1.5;
      }

      &:has( > .trace-input-wrap > input:disabled) {
        color: color-mix(in srgb, var(--trace-input-text), transparent 50%);
        cursor: not-allowed;
      }

      &:has( > .trace-input-wrap > input[aria-invalid="true"],  > .trace-input-wrap > input:user-invalid) > small:last-child {
        color: var(--trace-input-error);
      }
    }

    :where(.trace-input-wrap) {
      --trace-input-icon-size: 1.25rem;
      grid-template-columns: auto minmax(0, 1fr) auto;
      min-inline-size: 0;
      display: grid;
      position: relative;
    }

    :where(.trace-input-wrap > input) {
      grid-area: 1 / 1 / 2 / 4;
    }

    :where(.trace-input-wrap > .trace-input-icon-start, .trace-input-wrap > .trace-input-icon-end) {
      --trace-icon-size: var(--trace-input-icon-size);
      margin-inline: calc(2px + var(--trace-input-padding-inline));
      color: var(--trace-input-border);
      pointer-events: none;
      grid-row: 1;
      align-self: center;
      position: relative;
    }

    :where(.trace-input-wrap > .trace-input-icon-start) {
      grid-column: 1;
    }

    :where(.trace-input-wrap > .trace-input-icon-end) {
      grid-column: 3;
    }

    :where(.trace-input-wrap:has( > .trace-input-icon-start) > input) {
      padding-inline-start: calc(var(--trace-input-padding-inline) + var(--trace-input-icon-size) + .5rem);
    }

    :where(.trace-input-wrap:has( > .trace-input-icon-end) > input) {
      padding-inline-end: calc(var(--trace-input-padding-inline) + var(--trace-input-icon-size) + .5rem);
    }

    :where(.trace-input-wrap:has( > input:focus) > .trace-icon) {
      color: var(--trace-input-focus);
    }

    :where(.trace-input-wrap:has( > input[aria-invalid="true"],  > input:user-invalid) > .trace-icon) {
      color: var(--trace-input-error);
    }

    :where(.trace-input-wrap:has( > input:disabled) > .trace-icon) {
      opacity: .5;
    }

    :where(.trace-input-wrap:has( > button) > input) {
      padding-inline-end: calc(var(--trace-input-padding-inline) + 2rem);
    }

    :where(.trace-input-wrap > button) {
      border-radius: var(--trace-radius-sm);
      block-size: 1.5rem;
      inline-size: 1.5rem;
      color: var(--trace-input-border);
      box-shadow: none;
      --trace-button-outline-color: var(--trace-input-focus);
      background: none;
      border: 0;
      margin-block: auto;
      padding: 0;
      position: absolute;
      inset-block: 0;
      inset-inline-end: .5rem;
    }

    :where(.trace-input-wrap > button:hover:not(:disabled)) {
      color: var(--trace-input-focus);
      box-shadow: none;
    }

    :where(.trace-input-wrap > button:active:not(:disabled)) {
      box-shadow: none;
      transform: scale(.9);
    }

    @media (prefers-reduced-motion: reduce) {
      :where(.trace-input-wrap > button) {
        transition: none;
        transform: none;
      }
    }

    :where(.trace-input-wrap > button > .trace-icon) {
      --trace-icon-size: 1.25rem;
    }

    :where(.trace-input-wrap:has( > input.trace-small)) {
      --trace-input-padding-inline: .5rem;
      --trace-input-icon-size: 1rem;
    }

    :where(.trace-input-wrap:has( > input.trace-large)) {
      --trace-input-padding-inline: .75rem;
      --trace-input-icon-size: 1.5rem;
    }

    :where(input.trace-small:not([type="checkbox"]):not([type="radio"])) {
      --trace-input-font-size: .875rem;
      --trace-input-line-height: 1.25rem;
      --trace-input-padding-block: .25rem;
      --trace-input-padding-inline: .5rem;
    }

    :where(input.trace-large:not([type="checkbox"]):not([type="radio"])) {
      --trace-input-font-size: 1.125rem;
      --trace-input-line-height: 1.75rem;
      --trace-input-padding-block: .5rem;
      --trace-input-padding-inline: .75rem;
    }

    :where(.trace-input-wrap > button[aria-busy="true"]) {
      cursor: wait;
      opacity: 1;
      box-shadow: none;
      position: absolute;
      transform: none;
    }

    :where(.trace-input-wrap > button[aria-busy="true"]:not(:has( > span.trace-icon))) {
      color: #0000;
    }

    @media (forced-colors: active) {
      :where(.trace-input-wrap > button[aria-busy="true"]:not(:has( > span.trace-icon))) {
        background-color: buttonface;
        border-color: buttontext;
      }
    }

    :where(textarea.trace-small) {
      --trace-textarea-font-size: .875rem;
      --trace-textarea-line-height: 1.25rem;
      --trace-textarea-padding-block: .25rem;
      --trace-textarea-padding-inline: .5rem;
    }

    :where(textarea.trace-large) {
      --trace-textarea-font-size: 1.125rem;
      --trace-textarea-line-height: 1.75rem;
      --trace-textarea-padding-block: .5rem;
      --trace-textarea-padding-inline: .75rem;
    }

    :where(input[type="checkbox"]:not([role="switch"]).trace-small) {
      --trace-checkbox-size: 1rem;
    }

    :where(input[type="checkbox"]:not([role="switch"]).trace-large) {
      --trace-checkbox-size: 1.5rem;
    }

    :where(label:has( > .trace-select > select)) {
      min-inline-size: 0;
      color: var(--trace-select-text);
      cursor: pointer;
      gap: .25rem;
      display: grid;

      & > small {
        margin: 0;
        line-height: 1.5;
      }

      &:has( > .trace-select > select:disabled) {
        color: color-mix(in srgb, var(--trace-select-text), transparent 50%);
        cursor: not-allowed;
      }

      &:has( > .trace-select > select[aria-invalid="true"],  > .trace-select > select:user-invalid) > small:last-child {
        color: var(--trace-select-error);
      }
    }

    :where(label:has( > .trace-select > select) + small) {
      margin-block-start: .25rem;
      line-height: 1.5;
      display: block;
    }

    :where(label:has( > .trace-select > select[aria-invalid="true"],  > .trace-select > select:user-invalid) + small) {
      color: var(--trace-select-error);
    }

    :where(.trace-select) {
      --_trace-select-arrow-color: var(--trace-select-border);
      min-inline-size: 0;
      font-size: var(--trace-select-font-size);
      display: grid;
      position: relative;

      &:has( > select.trace-small) {
        --trace-select-padding-inline: .5rem;
        font-size: .875rem;
      }

      &:has( > select.trace-large) {
        --trace-select-padding-inline: .75rem;
        font-size: 1.125rem;
      }

      &:has( > select:focus) {
        --_trace-select-arrow-color: var(--trace-select-focus);
      }

      &:has( > select[aria-invalid="true"],  > select:user-invalid) {
        --_trace-select-arrow-color: var(--trace-select-error);
      }
    }

    :where(.trace-select:has( > select:not([multiple]):not([size])), .trace-select:has( > select:not([multiple])[size="0"]), .trace-select:has( > select:not([multiple])[size="1"])):after {
      content: "";
      inline-size: var(--trace-select-arrow-size);
      block-size: var(--trace-select-arrow-size);
      background-color: var(--_trace-select-arrow-color);
      mask: var(--trace-select-arrow) center / contain no-repeat;
      pointer-events: none;
      margin-block: auto;
      position: absolute;
      inset-block: 0;
      inset-inline-end: var(--trace-select-arrow-offset);
    }

    :where(.trace-select > select) {
      background-image: none;
    }

    :where(.trace-select:has( > select:disabled)):after {
      opacity: .5;
    }

    @media (forced-colors: active) {
      :where(.trace-select):after {
        display: none;
      }
    }

    :where(select.trace-small) {
      --trace-select-font-size: .875rem;
      --trace-select-line-height: 1.25rem;
      --trace-select-padding-block: .25rem;
      --trace-select-padding-inline: .5rem;
    }

    :where(select.trace-large) {
      --trace-select-font-size: 1.125rem;
      --trace-select-line-height: 1.75rem;
      --trace-select-padding-block: .5rem;
      --trace-select-padding-inline: .75rem;
    }

    :where(input[type="range"].trace-small) {
      --trace-range-thumb-size: 1rem;
      --trace-range-track-size: .25rem;
      --trace-range-height: 1.75rem;
    }

    :where(input[type="range"].trace-large) {
      --trace-range-thumb-size: 1.5rem;
      --trace-range-track-size: .5rem;
      --trace-range-height: 2.5rem;
    }
  }
}