trace-css 0.0.0-stage → 0.1.1

package/dist/trace.conditional.css

@@ -0,0 +1,2138 @@
+@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-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(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;
+    }
+  }
+}