trace-css 0.1.0 → 0.1.2

package/dist/tracecss.classless.css

@@ -1,1532 +0,0 @@
-@layer trace.foundation {
-  :where(:root) {
-    --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(body) {
-    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(:root) {
-    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(:root) {
-    --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(:root) {
-      --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(body) {
-    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(:root) {
-    --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(:root) {
-    --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(:root) {
-    --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(:root) {
-    --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(:root) {
-    --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(:root) {
-    --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(:root) {
-    --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(:root) {
-    --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(:root) {
-    --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(:root) {
-    --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(:root) {
-    --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;