trace-css 0.1.0 → 0.1.2

package/dist/tracecss.classless.conditional.css

@@ -1,1534 +0,0 @@
-@scope (.tracecss) {
-  @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;
-}