diff --git a/.browserslistrc b/.browserslistrc
new file mode 100644
index 0000000..51cabfd
--- /dev/null
+++ b/.browserslistrc
@@ -0,0 +1,4 @@
+> 0.1%
+last 2 versions
+not dead
+IE > 5
diff --git a/.github/workflows/notify.yml b/.github/workflows/notify.yml
deleted file mode 100644
index 5f9080e..0000000
--- a/.github/workflows/notify.yml
+++ /dev/null
@@ -1,34 +0,0 @@
-name: Notify
-
-on:
-  pull_request:
-    types: [closed]
-
-jobs:
-  notify:
-    if: github.event.pull_request.merged == true && contains(github.event.pull_request.labels.*.name, 'release')
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Determine version update type
-        id: determine_version
-        run: |
-          COMMIT_MESSAGE=$(git log -1 --pretty=format:%B)
-          if [[ "$COMMIT_MESSAGE" == *"[major]"* ]]; then
-            echo "update_type=major" >> $GITHUB_ENV
-          elif [[ "$COMMIT_MESSAGE" == *"[minor]"* ]]; then
-            echo "update_type=minor" >> $GITHUB_ENV
-          else
-            echo "update_type=patch" >> $GITHUB_ENV
-          fi
-
-      - name: Send notification to style-forge
-        run: |
-          curl -X POST \
-            -H "Accept: application/vnd.github.v3+json" \
-            -H "Authorization: token ${{ secrets.NOTIFY_GITHUB_TOKEN }}" \
-            https://api.github.com/repos/Style-Forge/hub/dispatches \
-            -d '{"event_type":"update-style-forge", "client_payload": {"update_type": "${{ env.update_type }}", "package_name": "style-forge.form"}}'
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
deleted file mode 100644
index 4a26148..0000000
--- a/.github/workflows/publish.yml
+++ /dev/null
@@ -1,28 +0,0 @@
-name: Publish
-
-on:
-  pull_request:
-    types: [closed]
-
-jobs:
-  publish:
-    if: github.event.pull_request.merged == true && contains(github.event.pull_request.labels.*.name, 'release')
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: yarn
-
-      - name: Set up NPM auth
-        run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc
-
-      - name: Publish to npm
-        run: yarn publish --non-interactive
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 12a5ad4..fcf0760 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -1,13 +1,13 @@
 name: Release
 
 on:
-  push:
-    tags:
-      - 'v*.*.*'
+  pull_request:
+    types: [closed]
+    branches:
+      - main
 
 permissions:
   contents: write
-  pull-requests: write
 
 jobs:
   release:
@@ -23,60 +23,27 @@ jobs:
           node-version: 20
           cache: yarn
 
-      - name: Install dependencies
-        run: yarn install --frozen-lockfile
-
       - name: Configure Git
         run: |
-          git config --global user.name 'github-actions'
-          git config --global user.email 'github-actions@github.com'
-
-      - name: Fetch all tags
-        run: git fetch --tags
+          git config user.name "github-actions"
+          git config user.email "github-actions@github.com"
 
-      - name: Extract version and previous tag
-        id: extract_info
+      - name: Extract version from package.json
+        id: extract_version
         run: |
-          VERSION=${GITHUB_REF#refs/tags/v}
-          PREVIOUS_TAG=$(git describe --tags $(git rev-list --tags --skip=1 --max-count=1))
+          VERSION=$(jq -r '.version' package.json)
           echo "VERSION=$VERSION" >> $GITHUB_ENV
-          echo "PREVIOUS_TAG=$PREVIOUS_TAG" >> $GITHUB_ENV
+          echo "Extracted version: $VERSION"
 
-      - name: Determine update type
-        id: determine_update_type
+      - name: Create Git tag
         run: |
-          IFS='.' read -r -a NEW_VERSION_PARTS <<< "${VERSION}"
-          IFS='.' read -r -a OLD_VERSION_PARTS <<< "${PREVIOUS_TAG#v}"
+          git tag -a "${{ env.VERSION }}" -m "Release ${{ env.VERSION }}"
+          git push origin "${{ env.VERSION }}"
 
-          if [ "${NEW_VERSION_PARTS[0]}" != "${OLD_VERSION_PARTS[0]}" ]; then
-            UPDATE_TYPE=major
-          elif [ "${NEW_VERSION_PARTS[1]}" != "${OLD_VERSION_PARTS[1]}" ]; then
-            UPDATE_TYPE=minor
-          else
-            UPDATE_TYPE=patch
-          fi
-          echo "UPDATE_TYPE=$UPDATE_TYPE" >> $GITHUB_ENV
-
-      - name: Create and push new branch
-        run: |
-          NEW_BRANCH=release-v${VERSION}
-          git checkout -b ${NEW_BRANCH}
-          git push origin ${NEW_BRANCH}
-          echo "NEW_BRANCH=$NEW_BRANCH" >> $GITHUB_ENV
+      - name: Set up NPM auth
+        run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc
 
-      - name: Update version in package.json
-        run: jq --arg new_version "$VERSION" '.version = $new_version' package.json > temp.json && mv temp.json package.json
-
-      - name: Build the package
-        run: yarn build
-
-      - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v6
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          commit-message: "Update version to ${{ env.VERSION }} [${{ env.UPDATE_TYPE }}] and upgrade dependencies"
-          branch: ${{ env.NEW_BRANCH }}
-          base: main
-          title: "Release ${{ env.VERSION }}"
-          body: "This PR updates the version to ${{ env.VERSION }} and upgrades dependencies."
-          labels: release
+      - name: Publish to npm
+        run: yarn publish --non-interactive
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/README.md b/README.md
index 2813c84..abe3ca4 100644
--- a/README.md
+++ b/README.md
@@ -4,8 +4,7 @@
 ![npm](https://img.shields.io/npm/v/style-forge.form)
 ![license](https://img.shields.io/npm/l/style-forge.form)
 ![npm](https://img.shields.io/npm/dm/style-forge.form)
-[![Codacy Badge](https://app.codacy.com/project/badge/Grade/255f15046ef744fcac1eefd4495b4a71)](https://app.codacy.com/gh/Style-Forge/form/dashboard?utm_source=gh&utm_medium=referral&utm_content=&utm_campaign=Badge_grade)
-![build](https://github.com/Style-Forge/form/actions/workflows/publish.yml/badge.svg)
+![build](https://github.com/Style-Forge/form/actions/workflows/release.yml/badge.svg)
 
 `Style-Forge.Form` package is a versatile and easy-to-use library designed to streamline the creation and management of forms in web applications. It offers a robust set of tools to handle form validation, styling, and submission processes, enhancing user experience and developer productivity.
 
diff --git a/builder.js b/builder.js
index f677bba..0b99620 100644
--- a/builder.js
+++ b/builder.js
@@ -2,6 +2,8 @@ import fs from 'fs'
 import postcss from 'postcss'
 
 import pImport from 'postcss-import'
+import pDuplicated from 'postcss-combine-duplicated-selectors'
+import pComments from 'postcss-discard-comments'
 import pAutoprefixer from 'autoprefixer'
 import pMinify from 'postcss-minify'
 
@@ -9,12 +11,12 @@ const [from, to] = ['src/all.css', 'form.css']
 const css = fs.readFileSync(from, 'utf8')
 
 const packageFile = JSON.parse(fs.readFileSync('package.json', 'utf8'))
-const title = packageFile.name + ' v' + packageFile.version
+const title = packageFile.name + ' ' + packageFile.version
 const license = packageFile.license + ' License'
 const link = packageFile.repository.url.replace('git+', '').replace('.git', '')
 const header = '/*! ' + [title, license, link].join(' | ') + ' */'
 
-const plugins = [pImport, pAutoprefixer, pMinify]
+const plugins = [pImport, pAutoprefixer, pDuplicated({ removeDuplicatedProperties: true }), pComments, pMinify]
 
 postcss(plugins)
   .process(css, { from })
diff --git a/form.css b/form.css
index 0b90698..181ca2a 100644
--- a/form.css
+++ b/form.css
@@ -1,3 +1,3 @@
-/*! style-forge.form v4.0.4 | MIT License | https://github.com/Style-Forge/form */
+/*! style-forge.form 2025.1.6 | MIT License | https://github.com/Style-Forge/form */
 
-:root{--sf-form-ff:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';--sf-form-fz:0.95rem;--sf-form-fz-small:0.75rem;--sf-gap:0.5em;--sf-disabled:0.4;--sf-form-radius:0.5em;--sf-form-p-input-block:0.5em;--sf-form-p-input-inline:0.5em;--sf-form-switch-size:1rem;--sf-form-c-white:0 0% 100%;--sf-form-c-info:200 100% 60%;--sf-form-c-error:0 100% 60%;--sf-form-c-success:0 100% 60%;--sf-form-c-warning:39 100% 50%;--sf-form-c-bg:0 0% 100%;--sf-form-c-bd:0 0% 10%;--sf-form-c-loading:0 0% 10%;--sf-form-c-txt:0 0% 10%;--sf-form-dark-c-white:0 0% 100%;--sf-form-dark-c-info:219 79% 66%;--sf-form-dark-c-error:0 100% 65%;--sf-form-dark-c-success:0 100% 65%;--sf-form-dark-c-warning:39 100% 60%;--sf-form-dark-c-bg:0 0% 20%;--sf-form-dark-c-bd:0 0% 100%;--sf-form-dark-c-loading:0 0% 100%;--sf-form-dark-c-txt:0 0% 90%}:root:where([data-theme='dark'],.dark){color-scheme:dark;--sf-form-c-white:var(--sf-form-dark-c-white);--sf-form-c-bg:var(--sf-form-dark-c-bg);--sf-form-c-error:var(--sf-form-dark-c-error);--sf-form-c-success:var(--sf-form-dark-c-success);--sf-form-c-warning:var(--sf-form-dark-c-warning);--sf-form-c-info:var(--sf-form-dark-c-info);--sf-form-c-bd:var(--sf-form-dark-c-bd);--sf-form-c-loading:var(--sf-form-dark-c-loading);--sf-form-c-txt:var(--sf-form-dark-c-txt)}@media (prefers-color-scheme:dark){:root:where([data-theme='auto'],.auto){color-scheme:light dark;--sf-form-c-white:var(--sf-form-dark-c-white);--sf-form-c-bg:var(--sf-form-dark-c-bg);--sf-form-c-error:var(--sf-form-dark-c-error);--sf-form-c-success:var(--sf-form-dark-c-success);--sf-form-c-warning:var(--sf-form-dark-c-warning);--sf-form-c-info:var(--sf-form-dark-c-info);--sf-form-c-bd:var(--sf-form-dark-c-bd);--sf-form-c-loading:var(--sf-form-dark-c-loading);--sf-form-c-txt:var(--sf-form-dark-c-txt)}}input.sf-input:not([type='radio'],[type='checkbox'],[type='color'],[type='file'],[type='image']){box-sizing:border-box}input.sf-input:not([type='radio'],[type='checkbox'],[type='color'],[type='file'],[type='image']) *,input.sf-input:not([type='radio'],[type='checkbox'],[type='color'],[type='file'],[type='image']) *::before,input.sf-input:not([type='radio'],[type='checkbox'],[type='color'],[type='file'],[type='image']) *::after{box-sizing:inherit}input.sf-input:is([type='image'],[type='range']){cursor:pointer}input:is(.sf-input:not([type='radio'],[type='checkbox'],[type='color'],[type='file'],[type='image'],[type='range'])){cursor:text;-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;touch-action:manipulation;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-transform:none;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid;border-color:transparent transparent hsl(var(--sf-form-c-bd)/20%);border-radius:0;outline:none;width:100%;padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);transition:border 0.1s ease-out}input.sf-input:is([type='time'],[type='week'],[type='month'],[type='date'],[type='datetime-local']){-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:start;height:37px}input.sf-input:is([type='time'],[type='week'],[type='month'],[type='date'],[type='datetime-local'])::-webkit-date-and-time-value{text-align:start}input.sf-input:focus-visible::-webkit-calendar-picker-indicator{cursor:pointer;outline:none}input:is(.sf-input:not([type='radio'],[type='checkbox'],[type='color'],[type='file'],[type='image'],[type='range']))::-moz-placeholder{color:hsl(var(--sf-form-c-txt)/40%)}input:is(.sf-input:not([type='radio'],[type='checkbox'],[type='color'],[type='file'],[type='image'],[type='range']))::placeholder{color:hsl(var(--sf-form-c-txt)/40%)}input:is(.sf-input:not([type='radio'],[type='checkbox'],[type='color'],[type='file'],[type='image'],[type='range'])):-moz-placeholder-shown{border-color:hsl(var(--sf-form-c-bd)/20%);border-radius:var(--sf-form-radius)}input:is(.sf-input:not([type='radio'],[type='checkbox'],[type='color'],[type='file'],[type='image'],[type='range'])):placeholder-shown{border-color:hsl(var(--sf-form-c-bd)/20%);border-radius:var(--sf-form-radius)}input:is(.sf-input:not([type='radio'],[type='checkbox'],[type='color'],[type='file'],[type='image'],[type='range'])):focus{border-color:transparent transparent hsl(var(--sf-form-c-info));border-radius:0;outline:none}input.sf-input:is([type='color'],[type='image'],[type='range']):focus-visible{outline:2px solid hsl(var(--sf-form-c-info));outline-offset:2px;border-radius:var(--sf-form-radius)}input:is(.sf-input:not([type='radio'],[type='checkbox'],[type='color'],[type='file'])):disabled{cursor:not-allowed;-webkit-tap-highlight-color:transparent;opacity:var(--sf-disabled)}.sf-button:is(a,button,input[type='button'],input[type='submit'],input[type='reset']){box-sizing:border-box}.sf-button:is(a,button,input[type='button'],input[type='submit'],input[type='reset']) *,.sf-button:is(a,button,input[type='button'],input[type='submit'],input[type='reset']) *::before,.sf-button:is(a,button,input[type='button'],input[type='submit'],input[type='reset']) *::after{box-sizing:inherit}.sf-button:is(button,input[type='button'],input[type='submit'],input[type='reset']){-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;touch-action:manipulation}.sf-button:where(a,button,input[type='button'],input[type='submit'],input[type='reset']){cursor:pointer}.sf-button:is(a,button,input[type='button'],input[type='submit'],input[type='reset']),.sf-button:is(a,button,input[type='button'],input[type='submit'],input[type='reset']):hover{display:inline-block;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%);text-align:center;text-decoration:none;text-transform:none;border-radius:var(--sf-form-radius);padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline)}a.sf-button:not([href]){cursor:not-allowed;text-decoration:none;opacity:var(--sf-disabled);-webkit-tap-highlight-color:transparent}a.sf-button:not([href]):hover{color:inherit}.sf-button:where(button,input[type='button'],input[type='submit'],input[type='reset']):disabled{cursor:not-allowed;-webkit-tap-highlight-color:transparent;opacity:var(--sf-disabled)}.sf-button:where(a,button,input[type='button'],input[type='submit'],input[type='reset']):focus-visible{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}label.sf-radio,label.sf-checkbox{box-sizing:border-box}label.sf-radio *,label.sf-radio *::before,label.sf-radio *::after,label.sf-checkbox *,label.sf-checkbox *::before,label.sf-checkbox *::after{box-sizing:inherit}label.sf-radio,label.sf-checkbox{display:flex;flex-flow:wrap row;align-items:center;gap:var(--sf-gap);font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-transform:none}label.sf-radio input[type='radio'],label.sf-checkbox input[type='checkbox'],label.sf-radio input[type='radio']::before,label.sf-checkbox input[type='checkbox']::before{width:1em;height:1em}label.sf-radio input[type='radio']~*,label.sf-checkbox input[type='checkbox']~*{cursor:pointer}label.sf-radio input[type='radio'],label.sf-checkbox input[type='checkbox']{-webkit-appearance:none;-moz-appearance:none;appearance:none;touch-action:manipulation;position:relative;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;border:0;background:none;padding:0;margin:0}label.sf-radio input[type='radio']::before,label.sf-checkbox input[type='checkbox']::before{top:0;left:0;position:absolute;width:1em;height:1em;content:'';background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%)}label.sf-radio input[type='radio']::after,label.sf-checkbox input[type='checkbox']::after{top:3px;left:3px;right:3px;bottom:3px;position:absolute;content:''}label.sf-radio input[type='radio']:checked::before,label.sf-checkbox input[type='checkbox']:checked::before{border-color:hsl(var(--sf-form-c-info))}label.sf-radio input[type='radio']:checked::after,label.sf-checkbox input[type='checkbox']:checked::after{background:hsl(var(--sf-form-c-info))}label.sf-radio input[type='radio']::before,label.sf-radio input[type='radio']::after{border-radius:50%}label.sf-radio input[type='radio']:disabled,label.sf-radio input[type='radio']:disabled~*,label.sf-checkbox input[type='checkbox']:disabled,label.sf-checkbox input[type='checkbox']:disabled~*{cursor:not-allowed;-webkit-tap-highlight-color:transparent;opacity:var(--sf-disabled)}.sf-radio input:focus-visible,.sf-checkbox input:focus-visible{border-color:transparent;outline:2px solid hsl(var(--sf-form-c-info));outline-offset:2px}.sf-radio input:focus-visible{border-radius:50%}select.sf-select{box-sizing:border-box}select.sf-select *,select.sf-select *::before,select.sf-select *::after{box-sizing:inherit}select.sf-select,select.sf-select option{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;touch-action:manipulation;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-transform:none;padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline)}select.sf-select option{padding:calc(var(--sf-form-p-input-block) / 2) calc(var(--sf-form-p-input-inline) / 2)}select.sf-select optgroup{padding:calc(var(--sf-form-p-input-block) / 2) 0}select.sf-select{cursor:pointer;-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;touch-action:manipulation;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%);width:100%;border-radius:var(--sf-form-radius);overflow:auto}select.sf-select:focus-visible{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}select.sf-select:disabled{cursor:not-allowed;-webkit-tap-highlight-color:transparent;opacity:var(--sf-disabled)}textarea.sf-textarea{box-sizing:border-box}textarea.sf-textarea *,textarea.sf-textarea *::before,textarea.sf-textarea *::after{box-sizing:inherit}textarea.sf-textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;touch-action:manipulation;display:block;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1.499535;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%);width:100%;min-height:calc((1.499535em + 2px + var(--sf-form-p-input-block)) * 4);padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);border-radius:var(--sf-form-radius);resize:vertical;overflow:auto}textarea.sf-textarea:disabled{cursor:not-allowed;-webkit-tap-highlight-color:transparent;resize:none;opacity:var(--sf-disabled)}textarea.sf-textarea:focus-visible{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}input.sf-input[type='color']{box-sizing:border-box}input.sf-input[type='color'] *,input.sf-input[type='color'] *::before,input.sf-input[type='color'] *::after{box-sizing:inherit}input.sf-input[type='color']{cursor:pointer;-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;touch-action:manipulation;--sf-form-color-size:2.125em;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;width:var(--sf-form-color-size);height:var(--sf-form-color-size);padding:0;background:hsl(var(--sf-form-c-info));background:conic-gradient(from 0,yellow,darkorange,red,fuchsia,blue,cyan,lime,yellowgreen,yellow);border:0;border-radius:50%}input.sf-input[type='color']::-webkit-color-swatch-wrapper{padding:3px}input.sf-input[type='color']::-webkit-color-swatch{border:2px solid hsl(var(--sf-form-c-white));border-radius:50%}input.sf-input[type='color']::-moz-color-swatch{border:2px solid hsl(var(--sf-form-c-white));border-radius:50%}input.sf-input[type='color']:disabled{cursor:not-allowed;-webkit-tap-highlight-color:transparent;opacity:var(--sf-disabled)}input.sf-input[type='file']{box-sizing:border-box}input.sf-input[type='file'] *,input.sf-input[type='file'] *::before,input.sf-input[type='file'] *::after{box-sizing:inherit}input.sf-input[type='file']{cursor:pointer;-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;touch-action:manipulation;display:inline-block;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;padding:0;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}input.sf-input[type='file']::file-selector-button{cursor:pointer;display:inline-block;text-transform:none;text-align:center;text-decoration:none;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%);padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);border-radius:var(--sf-form-radius)}input.sf-input[type='file']:focus-visible{outline:none}input.sf-input[type='file']:focus-visible::file-selector-button{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}input.sf-input[type='file']:disabled{opacity:var(--sf-disabled)}input.sf-input[type='file']:disabled,input.sf-input[type='file']:disabled::file-selector-button{cursor:not-allowed;-webkit-tap-highlight-color:transparent}.sf-switch{box-sizing:border-box}.sf-switch.multiple *,.sf-switch.multiple *::before,.sf-switch.multiple *::after{box-sizing:inherit}.sf-switch{display:flex;flex-flow:wrap row;align-items:center;gap:var(--sf-gap);font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-transform:none}label.sf-switch input[type='checkbox']{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:none;padding:0;margin:0;width:calc(var(--sf-form-switch-size) * 2);height:var(--sf-form-switch-size);vertical-align:middle}label.sf-switch input[type='checkbox']::before{cursor:pointer;top:0;left:0;position:absolute;width:calc(var(--sf-form-switch-size) * 2);height:var(--sf-form-switch-size);content:'';background:hsl(var(--sf-form-c-bd)/20%);border-radius:calc(var(--sf-form-switch-size) / 2)}label.sf-switch input[type='checkbox']::after{cursor:pointer;top:2px;left:2px;position:absolute;width:calc(var(--sf-form-switch-size) - 2px * 2);height:calc(var(--sf-form-switch-size) - 2px * 2);content:'';background:hsl(var(--sf-form-c-white));border-radius:calc(var(--sf-form-switch-size) / 2);box-shadow:0 0 0 1px hsl(var(--sf-form-c-white));transition:transform 0.05s ease-in}label.sf-switch input[type='checkbox']:checked::before{background:hsl(var(--sf-form-c-info))}label.sf-switch input[type='checkbox']:checked::after{transform:translate3d(var(--sf-form-switch-size),0,0)}label.sf-switch input[type='radio']~*,label.sf-switch input[type='checkbox']~*{cursor:pointer}.sf-switch.multiple .sf-switch-toggle{display:flex;flex-flow:row;background:hsl(var(--sf-form-c-bg)/20%);box-shadow:1px 2px 8px 0 hsl(var(--sf-form-c-bd)/15%)}.sf-switch.multiple .sf-switch-toggle label{position:relative}.sf-switch.multiple .sf-switch-toggle span{display:block;font-size:var(--sf-form-fz-small);text-align:center;min-width:2rem;padding:calc(var(--sf-form-p-input-block) * 1.25) calc(var(--sf-form-p-input-inline) * 1.25);background:hsl(var(--sf-form-c-bd)/5%)}.sf-switch.multiple input:where([type='checkbox'],[type='radio']){cursor:pointer;top:0;left:0;right:0;bottom:0;position:absolute;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;padding:0;margin:0;border:0}.sf-switch.multiple input:where([type='checkbox'],[type='radio'])::before,.sf-switch.multiple input:where([type='checkbox'],[type='radio'])::after{content:none}.sf-switch.multiple input:where([type='checkbox'],[type='radio']):checked~span{color:hsl(var(--sf-form-c-white));background:hsl(var(--sf-form-c-info))}.sf-switch.multiple.vert .sf-switch-toggle{flex-flow:column}.sf-switch.multiple .sf-switch-description{font-size:var(--sf-form-fz-small);margin:0}.sf-switch input[type='checkbox']:disabled,.sf-switch input[type='checkbox']:disabled::after,.sf-switch input[type='checkbox']:disabled::before,.sf-switch input[type='checkbox']:disabled~*,.sf-switch.multiple input:where([type='checkbox'],[type='radio']):disabled,.sf-switch.multiple input:where([type='checkbox'],[type='radio']):disabled~*{cursor:not-allowed;-webkit-tap-highlight-color:transparent}.sf-switch input[type='checkbox']:disabled,.sf-switch input[type='checkbox']:disabled~*,.sf-switch.multiple input:where([type='checkbox'],[type='radio']):disabled~*{opacity:var(--sf-disabled)}.sf-switch input:where([type='checkbox'],[type='radio']):focus-visible{border-color:transparent;outline:2px solid hsl(var(--sf-form-c-info))}.sf-switch:not(.multiple) input:where([type='checkbox'],[type='radio']):focus-visible{border-radius:calc(var(--sf-form-switch-size) / 2)}@keyframes Loading{from{background-position:0 0}to{background-position:28px 0}}a.sf-loading.sf-button:not([href]),.sf-loading:disabled,.sf-loading:is(.sf-button,.sf-input:not([type='color'])):disabled{--c1:transparent;--c2:hsl(var(--sf-form-c-loading)/5%);background:hsl(var(--sf-form-c-info));background:repeating-linear-gradient(45deg,var(--c1),var(--c1) 10px,var(--c2) 10px,var(--c2) 20px);background-size:28px 100%;animation:Loading .3s linear infinite}:where(.sf-description,.sf-invalid,.sf-valid){display:none;color:hsl(var(--sf-form-c-txt)/40%);font-size:var(--sf-form-fz-small);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-transform:none;margin:0 0 var(--sf-gap)}.validates+:where(.sf-description,.sf-invalid,.sf-valid){margin:0 0 var(--sf-gap)}.sf-description{display:block}:not(.d\:f,.d\:f\:x,.d\:f\:y,.d\:g,.d\:g\:x,.d\:g\:y)>:where(.validates,.error)+.sf-description,:not(.d\:f,.d\:f\:x,.d\:f\:y,.d\:g,.d\:g\:x,.d\:g\:y)>:where(.validates,.error)+.sf-valid+.sf-description,:not(.d\:f,.d\:f\:x,.d\:f\:y,.d\:g,.d\:g\:x,.d\:g\:y)>:where(.validates,.error)+.sf-invalid+.sf-description,:not(.d\:f,.d\:f\:x,.d\:f\:y,.d\:g,.d\:g\:x,.d\:g\:y)>:where(.validates,.error)+.sf-valid+.sf-invalid+.sf-description,:not(.d\:f,.d\:f\:x,.d\:f\:y,.d\:g,.d\:g\:x,.d\:g\:y)>:where(.validates,.error)+.sf-invalid+.sf-valid+.sf-description,:not(.d\:f,.d\:f\:x,.d\:f\:y,.d\:g,.d\:g\:x,.d\:g\:y)>:where(.validates,.error)+.sf-invalid,:not(.d\:f,.d\:f\:x,.d\:f\:y,.d\:g,.d\:g\:x,.d\:g\:y)>:where(.validates,.error)+.sf-valid+.sf-invalid,:not(.d\:f,.d\:f\:x,.d\:f\:y,.d\:g,.d\:g\:x,.d\:g\:y)>:where(.validates,.error)+.sf-description+.sf-invalid,:not(.d\:f,.d\:f\:x,.d\:f\:y,.d\:g,.d\:g\:x,.d\:g\:y)>:where(.validates,.error)+.sf-valid+.sf-description+.sf-invalid,:not(.d\:f,.d\:f\:x,.d\:f\:y,.d\:g,.d\:g\:x,.d\:g\:y)>:where(.validates,.error)+.sf-description+.sf-valid+.sf-invalid,:not(.d\:f,.d\:f\:x,.d\:f\:y,.d\:g,.d\:g\:x,.d\:g\:y)>:where(.validates,.error)+.sf-valid,:not(.d\:f,.d\:f\:x,.d\:f\:y,.d\:g,.d\:g\:x,.d\:g\:y)>:where(.validates,.error)+.sf-invalid+.sf-valid,:not(.d\:f,.d\:f\:x,.d\:f\:y,.d\:g,.d\:g\:x,.d\:g\:y)>:where(.validates,.error)+.sf-description+.sf-valid,:not(.d\:f,.d\:f\:x,.d\:f\:y,.d\:g,.d\:g\:x,.d\:g\:y)>:where(.validates,.error)+.sf-invalid+.sf-description+.sf-valid,:not(.d\:f,.d\:f\:x,.d\:f\:y,.d\:g,.d\:g\:x,.d\:g\:y)>:where(.validates,.error)+.sf-description+.sf-invalid+.sf-valid{margin:var(--sf-gap) 0}.sf-invalid{color:hsl(var(--sf-form-c-error))}.sf-valid:not(.sf-description){color:hsl(var(--sf-form-c-txt))}.show:is(.sf-description,.sf-invalid,.sf-valid){display:block}.hide:is(.sf-description,.sf-invalid,.sf-valid){display:none}.error:not(:disabled)+.sf-invalid,.error:not(:disabled)+.sf-valid+.sf-invalid,.error:not(:disabled)+.sf-description+.sf-invalid,.error:not(:disabled)+.sf-valid+.sf-description+.sf-invalid,.error:not(:disabled)+.sf-description+.sf-valid+.sf-invalid{display:block}.error+.sf-valid,.error+.sf-invalid+.sf-valid,.error+.sf-description+.sf-valid,.error+.sf-invalid+.sf-description+.sf-valid,.error+.sf-description+.sf-invalid+.sf-valid,.error+.sf-description,.error+.sf-valid+.sf-description,.error+.sf-invalid+.sf-description,.error+.sf-valid+.sf-invalid+.sf-description,.error+.sf-invalid+.sf-valid+.sf-description{display:none}.validates:where(:invalid:focus,:invalid:not(:-moz-placeholder-shown))+.sf-invalid, .validates:where(:invalid:focus,:invalid:not(:-moz-placeholder-shown))+.sf-valid+.sf-invalid, .validates:where(:invalid:focus,:invalid:not(:-moz-placeholder-shown))+.sf-description+.sf-invalid, .validates:where(:invalid:focus,:invalid:not(:-moz-placeholder-shown))+.sf-valid+.sf-description+.sf-invalid, .validates:where(:invalid:focus,:invalid:not(:-moz-placeholder-shown))+.sf-description+.sf-valid+.sf-invalid, .validates:where(:valid:focus,:valid:not(:-moz-placeholder-shown))+.sf-valid, .validates:where(:valid:focus,:valid:not(:-moz-placeholder-shown))+.sf-invalid+.sf-valid, .validates:where(:valid:focus,:valid:not(:-moz-placeholder-shown))+.sf-description+.sf-valid, .validates:where(:valid:focus,:valid:not(:-moz-placeholder-shown))+.sf-invalid+.sf-description+.sf-valid, .validates:where(:valid:focus,:valid:not(:-moz-placeholder-shown))+.sf-description+.sf-invalid+.sf-valid, .validates:where(:valid:focus,:valid:not(:-moz-placeholder-shown))+.sf-description.sf-valid, .validates:where(:valid:focus,:valid:not(:-moz-placeholder-shown))+.sf-invalid+.sf-description.sf-valid{display:block}.validates:where(:invalid:focus,:invalid:not(:placeholder-shown))+.sf-invalid,.validates:where(:invalid:focus,:invalid:not(:placeholder-shown))+.sf-valid+.sf-invalid,.validates:where(:invalid:focus,:invalid:not(:placeholder-shown))+.sf-description+.sf-invalid,.validates:where(:invalid:focus,:invalid:not(:placeholder-shown))+.sf-valid+.sf-description+.sf-invalid,.validates:where(:invalid:focus,:invalid:not(:placeholder-shown))+.sf-description+.sf-valid+.sf-invalid,.validates:where(:valid:focus,:valid:not(:placeholder-shown))+.sf-valid,.validates:where(:valid:focus,:valid:not(:placeholder-shown))+.sf-invalid+.sf-valid,.validates:where(:valid:focus,:valid:not(:placeholder-shown))+.sf-description+.sf-valid,.validates:where(:valid:focus,:valid:not(:placeholder-shown))+.sf-invalid+.sf-description+.sf-valid,.validates:where(:valid:focus,:valid:not(:placeholder-shown))+.sf-description+.sf-invalid+.sf-valid,.validates:where(:valid:focus,:valid:not(:placeholder-shown))+.sf-description.sf-valid,.validates:where(:valid:focus,:valid:not(:placeholder-shown))+.sf-invalid+.sf-description.sf-valid{display:block}.validates:where(:focus,:not(:-moz-placeholder-shown))+.sf-description, .validates:where(:focus,:not(:-moz-placeholder-shown))+.sf-invalid+.sf-description, .validates:where(:focus,:not(:-moz-placeholder-shown))+.sf-valid+.sf-description, .validates:where(:focus,:not(:-moz-placeholder-shown))+.sf-invalid+.sf-valid+.sf-description, .validates:where(:focus,:not(:-moz-placeholder-shown))+.sf-valid+.sf-invalid+.sf-description{display:none}.validates:where(:focus,:not(:placeholder-shown))+.sf-description,.validates:where(:focus,:not(:placeholder-shown))+.sf-invalid+.sf-description,.validates:where(:focus,:not(:placeholder-shown))+.sf-valid+.sf-description,.validates:where(:focus,:not(:placeholder-shown))+.sf-invalid+.sf-valid+.sf-description,.validates:where(:focus,:not(:placeholder-shown))+.sf-valid+.sf-invalid+.sf-description{display:none}.validates input[type='checkbox']~.sf-description{display:none}.validates input[type='checkbox']:invalid~.sf-invalid{display:block}.validates input[type='checkbox']:valid~.sf-valid{display:block}.validates:invalid:required:not(:focus,:disabled){border-color:hsl(var(--sf-form-c-warning))}.validates input:is([type='radio'],[type='checkbox']):invalid::before{border-color:hsl(var(--sf-form-c-error))}.error:not(:disabled),.validates:invalid:focus{border-color:hsl(var(--sf-form-c-error));outline:none}input.error.sf-input:is(:focus,:not(:disabled):not(:-moz-placeholder-shown)), input.validates.sf-input:invalid:is(:-moz-placeholder-shown:focus,:not(:-moz-placeholder-shown)){border-color:transparent transparent hsl(var(--sf-form-c-error))}input.error.sf-input:is(:focus,:not(:disabled):not(:placeholder-shown)),input.validates.sf-input:invalid:is(:placeholder-shown:focus,:not(:placeholder-shown)){border-color:transparent transparent hsl(var(--sf-form-c-error))}label.validates:is(.sf-switch,.sf-checkbox) :is(.sf-description,.sf-valid,.sf-invalid){width:100%;line-height:1}form.validates:invalid .sf-button[type='submit']{cursor:not-allowed;text-decoration:none;opacity:var(--sf-disabled);-webkit-text-fill-color:hsl(var(--sf-form-c-txt))}
+:root{--sf-form-c-white:0 0% 100%;--sf-form-c-info:200 100% 60%;--sf-form-c-error:0 100% 60%;--sf-form-c-success:0 100% 60%;--sf-form-c-warning:39 100% 50%;--sf-form-c-bg:0 0% 90%;--sf-form-c-bd:0 0% 10%;--sf-form-c-loading:0 0% 10%;--sf-form-c-txt:0 0% 10%;--sf-form-dark-c-white:0 0% 100%;--sf-form-dark-c-info:219 79% 66%;--sf-form-dark-c-error:0 100% 65%;--sf-form-dark-c-success:0 100% 65%;--sf-form-dark-c-warning:39 100% 60%;--sf-form-dark-c-bg:0 0% 20%;--sf-form-dark-c-bd:0 0% 100%;--sf-form-dark-c-loading:0 0% 100%;--sf-form-dark-c-txt:0 0% 90%;--sf-form-radius:3px;--sf-form-fz:0.9375rem;--sf-form-p-input-block:0.5em;--sf-form-p-input-inline:0.5em;--sf-form-switch-size:1rem;--sf-form-ff:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';--sf-form-fz-small:0.625rem;--sf-lh-normal:1.1875;--sf-disabled:0.4}html[data-theme='dark'],html.dark{color-scheme:dark;--sf-form-c-white:var(--sf-form-dark-c-white);--sf-form-c-bg:var(--sf-form-dark-c-bg);--sf-form-c-error:var(--sf-form-dark-c-error);--sf-form-c-success:var(--sf-form-dark-c-success);--sf-form-c-warning:var(--sf-form-dark-c-warning);--sf-form-c-info:var(--sf-form-dark-c-info);--sf-form-c-bd:var(--sf-form-dark-c-bd);--sf-form-c-loading:var(--sf-form-dark-c-loading);--sf-form-c-txt:var(--sf-form-dark-c-txt)}@media (prefers-color-scheme:dark){html[data-theme='auto'],html.auto{color-scheme:light dark;--sf-form-c-white:var(--sf-form-dark-c-white);--sf-form-c-bg:var(--sf-form-dark-c-bg);--sf-form-c-error:var(--sf-form-dark-c-error);--sf-form-c-success:var(--sf-form-dark-c-success);--sf-form-c-warning:var(--sf-form-dark-c-warning);--sf-form-c-info:var(--sf-form-dark-c-info);--sf-form-c-bd:var(--sf-form-dark-c-bd);--sf-form-c-loading:var(--sf-form-dark-c-loading);--sf-form-c-txt:var(--sf-form-dark-c-txt)}}.sf-input *,.sf-input *::before,.sf-input *::after{box-sizing:inherit}.sf-input[type='image'],.sf-input[type='range']{cursor:pointer;border:0;padding:0}.sf-input{cursor:auto;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-transform:none;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border-style:solid;border-color:hsl(var(--sf-form-c-bd)/20%);border-width:0 0 1px;border-radius:0;outline:none;width:100%;height:32px;padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);box-sizing:border-box;vertical-align:top}.sf-input[type='range']{width:100%}.sf-input[type='image']{width:auto;height:auto}.sf-input[type='time'],.sf-input[type='week'],.sf-input[type='month'],.sf-input[type='date'],.sf-input[type='datetime-local']{-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:start}.sf-input::-webkit-date-and-time-value{text-align:start}.sf-input::-webkit-calendar-picker-indicator{cursor:pointer;outline:none;opacity:0.5}.sf-input:hover::-webkit-calendar-picker-indicator{opacity:1}.sf-input::-moz-placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-input:-ms-input-placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-input::placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-input:focus{border-color:transparent transparent hsl(var(--sf-form-c-info));outline:none}.sf-input[type='color']:focus-visible,.sf-input[type='image']:focus-visible,.sf-input[type='range']:focus-visible{outline:2px solid hsl(var(--sf-form-c-info));outline-offset:2px}.sf-input:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}html.var .sf-input{font-size:15px;font-family:Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';color:hsl(0,0%,10%);background:hsla(0,0%,90%,0.2);border-color:hsla(0,0%,10%,0.2);padding:8px}html.var .sf-input::-moz-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-input:-ms-input-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-input::placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-input:-moz-placeholder-shown{border-color:hsla(0,0%,10%,0.2)}html.var .sf-input:-ms-input-placeholder{border-color:hsla(0,0%,10%,0.2)}html.var .sf-input:placeholder-shown{border-color:hsla(0,0%,10%,0.2)}html.var .sf-input:focus{border-color:hsl(200,100%,60%)}html.var .sf-input[type='image'],html.var .sf-input[type='range']{background:none}html.var .sf-input[type='color']:focus-visible,html.var .sf-input[type='image']:focus-visible,html.var .sf-input[type='range']:focus-visible{outline:2px solid hsl(200,100%,60%)}html.var .sf-input:disabled{opacity:0.4}.sf-button{cursor:pointer;display:inline-block;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%);text-align:center;text-decoration:none;text-transform:none;border-radius:var(--sf-form-radius);height:32px;padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);box-sizing:border-box;vertical-align:baseline}a.sf-button:not([href]),.sf-button:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}.sf-button:focus-visible{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}html.var .sf-button{font-size:15px;font-family:Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';color:hsl(0,0%,10%);background:hsla(0,0%,100%,0.2);border:1px solid hsla(0,0%,10%,0.2);border-radius:3px;padding:8px}html.var a.sf-button:not([href]),html.var .sf-button:disabled{opacity:0.4}html.var .sf-button:focus-visible{outline:1px solid hsl(200,100%,60%)}label.sf-radio,label.sf-checkbox{box-sizing:border-box}label.sf-radio *,label.sf-radio *::before,label.sf-radio *::after,label.sf-checkbox *,label.sf-checkbox *::before,label.sf-checkbox *::after{box-sizing:inherit}label.sf-radio input,label.sf-checkbox input,label.sf-radio input::before,label.sf-checkbox input::before{width:16px;height:16px}label.sf-radio input,label.sf-radio input~*,label.sf-checkbox input,label.sf-checkbox input~*{cursor:pointer}label.sf-radio input:disabled,label.sf-radio input:disabled~*,label.sf-checkbox input:disabled,label.sf-checkbox input:disabled~*{cursor:not-allowed;opacity:var(--sf-disabled)}label.sf-radio input,label.sf-checkbox input{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;margin:0 0 -2px;padding:0;vertical-align:baseline}label.sf-radio input::before,label.sf-checkbox input::before{top:0;left:0;position:absolute;width:16px;height:16px;content:'';background-color:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%)}label.sf-radio input::after,label.sf-checkbox input::after{top:3px;left:3px;right:3px;bottom:3px;position:absolute;content:''}label.sf-radio input:checked::before,label.sf-checkbox input:checked::before{border-color:hsl(var(--sf-form-c-info))}label.sf-radio input:checked::after,label.sf-checkbox input:checked::after{background-color:hsl(var(--sf-form-c-info))}label.sf-radio input::before,label.sf-radio input::after{border-radius:50%}.sf-radio input:focus-visible,.sf-checkbox input:focus-visible{border-color:transparent;outline:2px solid hsl(var(--sf-form-c-info));outline-offset:2px}.sf-radio input:focus-visible{border-radius:50%}html.var label.sf-radio input:disabled,html.var label.sf-radio input:disabled~*,html.var label.sf-checkbox input:disabled,html.var label.sf-checkbox input:disabled~*{opacity:0.4}html.var label.sf-radio input::before,html.var label.sf-checkbox input::before{border-color:hsla(0,0%,10%,0.2)}html.var label.sf-radio input:checked::before,html.var label.sf-radio input:checked::after,html.var .sf-radio input:focus-visible,html.var label.sf-checkbox input:checked::before,html.var label.sf-checkbox input:checked::after,html.var .sf-checkbox input:focus-visible{outline-color:hsl(200,100%,60%)}.sf-select,.sf-select option{font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:var(--sf-lh-normal);text-transform:none}.sf-select{padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);cursor:pointer;background:hsl(var(--sf-form-c-bg)/20%);border-width:1px;border-style:solid;border-color:hsl(var(--sf-form-c-bd)/20%);border-radius:0;width:100%;height:auto;overflow:auto}.sf-select option{padding:calc(var(--sf-form-p-input-block) / 2) var(--sf-form-p-input-inline)}.sf-select optgroup{padding:calc(var(--sf-form-p-input-block) / 2) 0 0}.sf-select:not([multiple]){height:32px;padding:0 var(--sf-form-p-input-inline);border-width:0 0 1px}.sf-select::-ms-expand{border:0;background:none}.sf-select:focus-visible{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}.sf-select:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}html.var .sf-select,html.var .sf-select option{font-size:15px;font-family:Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'}html.var .sf-select:not([multiple]){padding:0 0 0 8px}html.var .sf-select{padding:8px 0 8px 8px;color:hsl(0,0%,10%);background:hsla(0,0%,90%,0.2);border-color:hsla(0,0%,10%,0.2)}html.var .sf-select:disabled{opacity:0.4}.sf-textarea{font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1.499535;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%);width:100%;max-width:100%;min-height:calc((1.499535em + 2px + var(--sf-form-p-input-block)) * 4);padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);border-radius:var(--sf-form-radius);resize:vertical;overflow:auto;box-sizing:border-box}.sf-textarea::-moz-placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-textarea:-ms-input-placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-textarea::placeholder{color:hsl(var(--sf-form-c-txt)/40%)}.sf-textarea:disabled{cursor:not-allowed;resize:none;opacity:var(--sf-disabled)}.sf-textarea:focus-visible{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}html.var .sf-textarea{font-size:15px;font-family:Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';color:hsl(0,0%,10%);background:hsla(0,0%,90%,0.2);border:1px solid hsla(0,0%,10%,0.2);min-height:calc((1.499535em + 2px + 0.5em) * 4);padding:8px;border-radius:3px}html.var .sf-textarea::-moz-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-textarea:-ms-input-placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-textarea::placeholder{color:hsla(0,0%,10%,0.4)}html.var .sf-textarea:disabled{opacity:0.4}html.var .sf-textarea:focus:valid{border-color:hsl(200,100%,60%)}.sf-input[type='color']{cursor:pointer;width:32px;height:32px;background:conic-gradient(from 0,yellow,darkorange,red,fuchsia,blue,cyan,lime,yellowgreen,yellow);padding:0;border:0;border-radius:50%}.sf-input[type='color']:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}.sf-input[type='color']::-webkit-color-swatch-wrapper{padding:3px}.sf-input[type='color']::-webkit-color-swatch{border:2px solid hsl(var(--sf-form-c-white));border-radius:50%}.sf-input[type='color']::-moz-color-swatch{border:2px solid hsl(var(--sf-form-c-white));border-radius:50%}.sf-input[type='color']:focus-visible{border-radius:50%}html.var .sf-input[type='color']:disabled{opacity:0.4}html.var .sf-input[type='color']::-webkit-color-swatch{border:2px solid hsl(0,0%,100%)}html.var .sf-input[type='color']::-moz-color-swatch{border:2px solid hsl(0,0%,100%)}.sf-input[type='file']{cursor:pointer;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;border:0;width:auto;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sf-input[type='file']::-webkit-file-upload-button{cursor:pointer;display:inline-block;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-align:center;text-transform:none;text-decoration:none;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%);height:32px;border-radius:var(--sf-form-radius)}.sf-input[type='file']::file-selector-button{cursor:pointer;display:inline-block;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-align:center;text-transform:none;text-decoration:none;color:hsl(var(--sf-form-c-txt));background:hsl(var(--sf-form-c-bg)/20%);border:1px solid hsl(var(--sf-form-c-bd)/20%);height:32px;border-radius:var(--sf-form-radius)}.sf-input[type='file']:focus-visible{outline:none}.sf-input[type='file']:focus-visible::-webkit-file-upload-button{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}.sf-input[type='file']:focus-visible::file-selector-button{outline:1px solid hsl(var(--sf-form-c-info));outline-offset:-1px}.sf-input[type='file']:disabled{cursor:not-allowed;opacity:var(--sf-disabled)}.sf-input[type='file']:disabled::-webkit-file-upload-button{cursor:not-allowed}.sf-input[type='file']:disabled::file-selector-button{cursor:not-allowed}html.var .sf-input[type='file']{font-size:15px;font-family:Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';padding:0}html.var .sf-input[type='file']::-webkit-file-upload-button{font-size:15px;font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';color:hsl(0,0%,10%);background:hsla(0,0%,100%,0.2);border:1px solid hsla(0,0%,10%,0.2);border-radius:3px}html.var .sf-input[type='file']::file-selector-button{font-size:15px;font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';color:hsl(0,0%,10%);background:hsla(0,0%,100%,0.2);border:1px solid hsla(0,0%,10%,0.2);border-radius:3px}html.var .sf-input[type='file']:focus-visible::-webkit-file-upload-button{outline:1px solid hsl(200,100%,60%)}html.var .sf-input[type='file']:focus-visible::file-selector-button{outline:1px solid hsl(200,100%,60%)}html.var .sf-input[type='file']:disabled{opacity:0.4}.sf-switch{box-sizing:border-box;font-size:var(--sf-form-fz);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-transform:none}.sf-switch.multiple *,.sf-switch.multiple *::before,.sf-switch.multiple *::after{box-sizing:inherit}label.sf-switch input[type='checkbox']{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:none;padding:0;margin:0;width:calc(var(--sf-form-switch-size) * 2);height:var(--sf-form-switch-size);vertical-align:text-top}label.sf-switch input[type='checkbox']::before{cursor:pointer;top:0;left:0;position:absolute;width:calc(var(--sf-form-switch-size) * 2);height:var(--sf-form-switch-size);content:'';background:hsl(var(--sf-form-c-bd)/20%);border-radius:calc(var(--sf-form-switch-size) / 2)}label.sf-switch input[type='checkbox']::after{cursor:pointer;top:2px;left:2px;position:absolute;width:calc(var(--sf-form-switch-size) - 2px * 2);height:calc(var(--sf-form-switch-size) - 2px * 2);content:'';background:hsl(var(--sf-form-c-white));border-radius:calc(var(--sf-form-switch-size) / 2);box-shadow:0 0 0 1px hsl(var(--sf-form-c-white));transition:transform 0.05s ease-in}label.sf-switch input[type='checkbox']:checked::before{background:hsl(var(--sf-form-c-info))}label.sf-switch input[type='checkbox']:checked::after{transform:translate3d(var(--sf-form-switch-size),0,0)}label.sf-switch input[type='radio']~*,label.sf-switch input[type='checkbox']~*{cursor:pointer}.sf-switch.multiple .sf-switch-toggle{display:inline-block;background:hsl(var(--sf-form-c-bg)/20%);box-shadow:1px 2px 8px 0 hsl(var(--sf-form-c-bd)/15%)}.sf-switch.multiple .sf-switch-toggle *{display:inline-block}.sf-switch.multiple .sf-switch-toggle label{position:relative}.sf-switch.multiple .sf-switch-toggle span{font-size:var(--sf-form-fz-small);text-align:center;min-width:32px;padding:var(--sf-form-p-input-block) var(--sf-form-p-input-inline);background:hsl(var(--sf-form-c-bd)/5%)}.sf-switch.multiple input[type='checkbox'],.sf-switch.multiple input[type='radio']{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;top:0;left:0;right:0;bottom:0;position:absolute;z-index:1;width:100%;height:100%;padding:0;margin:0;border:0;opacity:0}.sf-switch.multiple input[type='checkbox']::before,.sf-switch.multiple input[type='radio']::before,.sf-switch.multiple input[type='checkbox']::after,.sf-switch.multiple input[type='radio']::after{content:none}.sf-switch.multiple input[type='checkbox']:checked~span,.sf-switch.multiple input[type='radio']:checked~span{color:hsl(var(--sf-form-c-white));background:hsl(var(--sf-form-c-info))}.sf-switch.multiple.vert .sf-switch-toggle{-ms-flex-flow:column;flex-flow:column}.sf-switch.multiple .sf-switch-description{font-size:var(--sf-form-fz-small);margin:0.5em 0 0;padding:0 0 0.5em}.sf-switch input[type='checkbox']:disabled,.sf-switch input[type='checkbox']:disabled::after,.sf-switch input[type='checkbox']:disabled::before,.sf-switch input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='checkbox']:disabled,.sf-switch.multiple input[type='radio']:disabled,.sf-switch.multiple input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='radio']:disabled~*{cursor:not-allowed}.sf-switch input[type='checkbox']:disabled,.sf-switch input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='checkbox']:disabled~*,.sf-switch.multiple input[type='radio']:disabled~*{opacity:var(--sf-disabled)}.sf-switch input[type='checkbox']:focus-visible,.sf-switch input[type='radio']:focus-visible{border-color:transparent;outline:2px solid hsl(var(--sf-form-c-info))}.sf-switch:not(.multiple) input[type='checkbox']:focus-visible,.sf-switch:not(.multiple) input[type='radio']:focus-visible{border-radius:calc(var(--sf-form-switch-size) / 2)}html.var .sf-switch{font-size:15px;font-family:Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'}html.var label.sf-switch input[type='checkbox']{width:16px;height:16px}html.var label.sf-switch input[type='checkbox']::before{width:16px;height:16px;background:hsla(0,0%,10%,0.2);border-radius:8px}html.var label.sf-switch input[type='checkbox']::after{width:28px;height:28px;background:hsl(0,0%,100%);border-radius:8px;box-shadow:0 0 0 1px hsl(0,0%,100%)}html.var label.sf-switch input[type='checkbox']:checked::before{background:hsl(200,100%,60%)}html.var .sf-switch.multiple .sf-switch-toggle{background:hsla(0,0%,90%,0.2);box-shadow:1px 2px 8px 0 hsla(0,0%,10%,0.15)}html.var .sf-switch.multiple .sf-switch-toggle span{font-size:12px;padding:8px;background:hsla(0,0%,10%,0.1)}html.var .sf-switch.multiple input[type='checkbox']:checked~span,html.var .sf-switch.multiple input[type='radio']:checked~span{color:hsl(0,0%,100%);background:hsl(200,100%,60%)}html.var .sf-switch.multiple .sf-switch-description{font-size:12px}html.var .sf-switch input[type='checkbox']:disabled~*,html.var .sf-switch.multiple input[type='checkbox']:disabled~*,html.var .sf-switch.multiple input[type='radio']:disabled~*{opacity:0.4}html.var .sf-switch input[type='checkbox']:focus-visible,html.var .sf-switch input[type='radio']:focus-visible{outline:2px solid hsl(200,100%,60%)}html.var .sf-switch:not(.multiple) input[type='checkbox']:focus-visible,html.var .sf-switch:not(.multiple) input[type='radio']:focus-visible{border-radius:8px}@keyframes Loading{from{background-position:0 0}to{background-position:28px 0}}a.sf-loading.sf-button:not([href]),.sf-loading:disabled,.sf-loading.sf-button:disabled,.sf-loading.sf-input:not([type='color']):disabled{--c1:transparent;--c2:hsl(var(--sf-form-c-loading)/5%);cursor:progress;background:repeating-linear-gradient(45deg,var(--c1),var(--c1) 10px,var(--c2) 10px,var(--c2) 20px);background-size:28px 100%;animation:Loading .3s linear infinite}html.var a.sf-loading.sf-button:not([href]),html.var .sf-loading:disabled,html.var .sf-loading.sf-button:disabled,html.var .sf-loading.sf-input:not([type='color']):disabled{background:repeating-linear-gradient(45deg,transparent,transparent 10px,hsla(0,0%,10%,0.05) 10px,hsla(0,0%,10%,0.05) 20px)}.sf-description,.sf-invalid,.sf-valid{display:none;color:hsl(var(--sf-form-c-txt)/40%);font-size:var(--sf-form-fz-small);font-family:var(--sf-form-ff);font-weight:400;line-height:1;text-transform:none;margin:0.5em 0 0;padding:0 0 0.5em}.sf-description{display:block}.sf-invalid{color:hsl(var(--sf-form-c-error))}.sf-valid:not(.sf-description){color:hsl(var(--sf-form-c-txt))}.show.sf-description,.show.sf-invalid,.show.sf-valid{display:block}.hide.sf-description,.hide.sf-invalid,.hide.sf-valid{display:none}.validates:focus:invalid~.sf-invalid,.validates:focus:valid~.sf-valid,.validates:focus:valid~.sf-description.sf-valid{display:block}.validates:focus:invalid~.validates~.sf-invalid,.validates:focus:valid~.validates~.sf-valid,.validates:focus:valid~.validates~.sf-description.sf-valid{display:none}.validates:focus~.sf-description{display:none}.validates:focus~.validates~.sf-description{display:block}.error:not(:disabled)+.sf-invalid,.error:not(:disabled)+.sf-valid+.sf-invalid,.error:not(:disabled)+.sf-description+.sf-invalid{display:block !important}.error:not(:disabled)+.sf-invalid+.sf-valid,.error:not(:disabled)+.sf-invalid+.sf-description,.error:not(:disabled)+.sf-description,.error:not(:disabled)+.sf-description+.sf-valid,.error:not(:disabled)+.sf-valid,.error:not(:disabled)+.sf-valid+.sf-description{display:none !important}.validates input[type='checkbox']~.sf-description{display:none}.validates input[type='checkbox']:invalid~.sf-invalid{display:block}.validates input[type='checkbox']:valid~.sf-valid{display:block}.validates:required:not(:focus){border-bottom-color:hsl(var(--sf-form-c-warning))}.validates:required:not(:disabled){border-bottom-color:hsl(var(--sf-form-c-warning))}.validates input[type='radio']:invalid::before,.validates input[type='checkbox']:invalid::before{border-color:hsl(var(--sf-form-c-error))}.error:not(:disabled),.validates:invalid:focus{border-bottom-color:hsl(var(--sf-form-c-error));outline:none}label.validates.sf-switch .sf-description,label.validates.sf-switch .sf-valid,label.validates.sf-switch .sf-invalid,label.validates.sf-checkbox .sf-description,label.validates.sf-checkbox .sf-valid,label.validates.sf-checkbox .sf-invalid{width:100%;line-height:var(--sf-lh-normal)}form.validates:invalid .sf-button[type='submit']{cursor:not-allowed;text-decoration:none;opacity:var(--sf-disabled);-webkit-text-fill-color:hsl(var(--sf-form-c-txt))}html.var .sf-description,html.var .sf-invalid,html.var .sf-valid{color:hsla(0,0%,10%,0.4);font-size:10px;font-family:Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'}html.var label.validates.sf-switch .sf-description,html.var label.validates.sf-switch .sf-valid,html.var label.validates.sf-switch .sf-invalid,html.var label.validates.sf-checkbox .sf-description,html.var label.validates.sf-checkbox .sf-valid,html.var label.validates.sf-checkbox .sf-invalid{line-height:1.1875}html.var .sf-invalid{color:hsl(0,100%,60%)}html.var .error:not(:disabled){border-bottom-color:hsl(0,100%,60%)}html.var .validates:invalid:required{border-bottom-color:hsl(39,100%,50%)}html.var .validates:invalid:focus{border-bottom-color:hsl(0,100%,60%)}html.var[data-theme='dark'] .sf-select::-ms-expand,html.var.dark .sf-select::-ms-expand{color:hsl(0,0%,90%)}html.var[data-theme='dark'] .sf-input[type='file']::-webkit-file-upload-button, html.var.dark .sf-input[type='file']::-webkit-file-upload-button{color:hsl(0,0%,90%);background-color:hsla(0,0%,20%,0.2);border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input[type='file']::file-selector-button,html.var.dark .sf-input[type='file']::file-selector-button{color:hsl(0,0%,90%);background-color:hsla(0,0%,20%,0.2);border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input[type='file']:focus-visible::-webkit-file-upload-button, html.var.dark .sf-input[type='file']:focus-visible::-webkit-file-upload-button{outline-color:hsl(219,79%,66%)}html.var[data-theme='dark'] .sf-input[type='file']:focus-visible::file-selector-button,html.var.dark .sf-input[type='file']:focus-visible::file-selector-button{outline-color:hsl(219,79%,66%)}html.var[data-theme='dark'] .sf-button,html.var[data-theme='dark'] .sf-input,html.var[data-theme='dark'] .sf-textarea,html.var[data-theme='dark'] .sf-select,html.var[data-theme='dark'] option,html.var.dark .sf-button,html.var.dark .sf-input,html.var.dark .sf-textarea,html.var.dark .sf-select,html.var.dark option{color:hsl(0,0%,90%);background-color:hsl(0,0%,20%);border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-description,html.var[data-theme='dark'] .sf-valid,html.var.dark .sf-description,html.var.dark .sf-valid{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-invalid,html.var.dark .sf-invalid{color:hsl(0,100%,65%)}html.var[data-theme='dark'] .sf-button:focus-visible,html.var[data-theme='dark'] label.sf-radio input:checked::before,html.var label.sf-radio input:checked::after,html.var .sf-radio input:focus-visible,html.var[data-theme='dark'] label.sf-checkbox input:checked::before,html.var label.sf-checkbox input:checked::after,html.var .sf-checkbox input:focus-visible,html.var[data-theme='dark'] .sf-input:focus,html.var[data-theme='dark'] .sf-input[type='color']:focus-visible,html.var[data-theme='dark'] .sf-input[type='image']:focus-visible,html.var[data-theme='dark'] .sf-input[type='range']:focus-visible,html.var[data-theme='dark'] .sf-textarea:focus-visible,html.var[data-theme='dark'] .sf-select:focus-visible,html.var.dark .sf-button:focus-visible,html.var.dark label.sf-radio input:checked::before,html.var label.sf-radio input:checked::after,html.var .sf-radio input:focus-visible,html.var.dark label.sf-checkbox input:checked::before,html.var label.sf-checkbox input:checked::after,html.var .sf-checkbox input:focus-visible,html.var.dark .sf-input:focus,html.var.dark .sf-input[type='color']:focus-visible,html.var.dark .sf-input[type='image']:focus-visible,html.var.dark .sf-input[type='range']:focus-visible,html.var.dark .sf-textarea:focus-visible,html.var.dark .sf-select:focus-visible{outline-color:hsl(219,79%,66%)}html.var[data-theme='dark'] .sf-input[type='color']::-webkit-color-swatch,html.var.dark .sf-input[type='color']::-webkit-color-swatch{border-color:hsl(0,0%,100%)}html.var[data-theme='dark'] .sf-input[type='color']::-moz-color-swatch,html.var.dark .sf-input[type='color']::-moz-color-swatch{border-color:hsl(0,0%,100%)}html.var[data-theme='dark'] .sf-input,html.var.dark .sf-input{border-color:transparent transparent hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input::-moz-placeholder, html.var[data-theme='dark'] .sf-textarea::-moz-placeholder, html.var.dark .sf-input::-moz-placeholder, html.var.dark .sf-textarea::-moz-placeholder{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-input:-ms-input-placeholder, html.var[data-theme='dark'] .sf-textarea:-ms-input-placeholder, html.var.dark .sf-input:-ms-input-placeholder, html.var.dark .sf-textarea:-ms-input-placeholder{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-input::placeholder,html.var[data-theme='dark'] .sf-textarea::placeholder,html.var.dark .sf-input::placeholder,html.var.dark .sf-textarea::placeholder{color:hsla(0,0%,90%,0.4)}html.var[data-theme='dark'] .sf-input:-moz-placeholder-shown, html.var.dark .sf-input:-moz-placeholder-shown{border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input:-ms-input-placeholder, html.var.dark .sf-input:-ms-input-placeholder{border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input:placeholder-shown,html.var.dark .sf-input:placeholder-shown{border-color:hsla(0,0%,100%,0.2)}html.var[data-theme='dark'] .sf-input[type='image'],html.var[data-theme='dark'] .sf-input[type='range'],html.var.dark .sf-input[type='image'],html.var.dark .sf-input[type='range']{background:none}
diff --git a/package.json b/package.json
index 9c37cf9..3b1fb46 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "style-forge.form",
-  "version": "4.0.4",
+  "version": "2025.1.6",
   "description": "Style-Forge.Form: versatile library for easy form creation, validation, styling, and submission in web apps.",
   "type": "module",
   "main": "form.css",
@@ -31,8 +31,11 @@
     "build": "node builder.js"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.19",
-    "postcss": "^8.4.39",
+    "autoprefixer": "^10.4.20",
+    "caniuse-lite": "^1.0.30001690",
+    "postcss": "^8.4.49",
+    "postcss-combine-duplicated-selectors": "^10.0.3",
+    "postcss-discard-comments": "^7.0.3",
     "postcss-import": "^16.1.0",
     "postcss-minify": "^1.1.0"
   },
diff --git a/src/all.css b/src/all.css
index c43e3fb..cd4c811 100644
--- a/src/all.css
+++ b/src/all.css
@@ -10,11 +10,7 @@
 @import 'color.css';
 @import 'file.css';
 
-/* Custom inputs */
 @import 'switch.css';
-
-/* Loader */
 @import 'loading.css';
-
-/* Validation */
 @import 'validate.css';
+@import 'theme.css';
diff --git a/src/button.css b/src/button.css
index bd1fa17..fd07cbd 100644
--- a/src/button.css
+++ b/src/button.css
@@ -1,20 +1,15 @@
-.sf-button:is(a, button, input[type='button'], input[type='submit'], input[type='reset']) { box-sizing: border-box }
-
-.sf-button:is(a, button, input[type='button'], input[type='submit'], input[type='reset']) *,
-.sf-button:is(a, button, input[type='button'], input[type='submit'], input[type='reset']) *::before,
-.sf-button:is(a, button, input[type='button'], input[type='submit'], input[type='reset']) *::after
-{ box-sizing: inherit }
-
-.sf-button:is(button, input[type='button'], input[type='submit'], input[type='reset']) {
-  appearance: auto;
-  touch-action: manipulation;
+:root {
+  --sf-form-ff: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --sf-form-fz: 0.9375rem;
+  --sf-disabled: 0.4;
+  --sf-form-radius: 3px;
+  --sf-form-p-input-block: 0.5em;
+  --sf-form-p-input-inline: 0.5em;
 }
 
-.sf-button:where(a, button, input[type='button'], input[type='submit'], input[type='reset']) { cursor: pointer }
+.sf-button {
+  cursor: pointer;
 
-.sf-button:is(a, button, input[type='button'], input[type='submit'], input[type='reset']),
-.sf-button:is(a, button, input[type='button'], input[type='submit'], input[type='reset']):hover
-{
   display: inline-block;
 
   font-size: var(--sf-form-fz);
@@ -32,24 +27,46 @@
 
   border-radius: var(--sf-form-radius);
 
+  height: 32px;
+
   padding: var(--sf-form-p-input-block) var(--sf-form-p-input-inline);
-}
 
-a.sf-button:not([href]) {
-  cursor: not-allowed;
-  text-decoration: none;
-  opacity: var(--sf-disabled);
-  -webkit-tap-highlight-color: transparent;
+  box-sizing: border-box;
+
+  vertical-align: baseline;
 }
-a.sf-button:not([href]):hover { color: inherit }
 
-.sf-button:where(button, input[type='button'], input[type='submit'], input[type='reset']):disabled {
+a.sf-button:not([href]),
+.sf-button:disabled
+{
   cursor: not-allowed;
-  -webkit-tap-highlight-color: transparent;
   opacity: var(--sf-disabled);
 }
 
-.sf-button:where(a, button, input[type='button'], input[type='submit'], input[type='reset']):focus-visible {
+.sf-button:focus-visible
+{
   outline: 1px solid hsl(var(--sf-form-c-info));
   outline-offset: -1px;
 }
+
+/* /// */
+
+html.var .sf-button
+{
+  font-size: 15px;
+  font-family: Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+
+  color: hsl(0, 0%, 10%);
+  background: hsla(0, 0%, 100%, 0.2);
+  border: 1px solid hsla(0, 0%, 10%, 0.2);
+
+  border-radius: 3px;
+
+  padding: 8px;
+}
+
+html.var a.sf-button:not([href]),
+html.var .sf-button:disabled
+{ opacity: 0.4 }
+
+html.var .sf-button:focus-visible { outline: 1px solid hsl(200, 100%, 60%) }
diff --git a/src/checkbox-radio.css b/src/checkbox-radio.css
index 8b0dbfb..be5508e 100644
--- a/src/checkbox-radio.css
+++ b/src/checkbox-radio.css
@@ -1,78 +1,63 @@
+:root {
+  --sf-form-fz: 0.9375rem;
+  --sf-disabled: 0.4;
+}
+
 label.sf-radio, label.sf-checkbox { box-sizing: border-box }
 
 label.sf-radio *,
 label.sf-radio *::before,
 label.sf-radio *::after,
-
 label.sf-checkbox *,
 label.sf-checkbox *::before,
 label.sf-checkbox *::after
 { box-sizing: inherit }
 
-label.sf-radio,
-label.sf-checkbox
-{
-  display: flex;
-  flex-flow: wrap row;
-  align-items: center;
-  gap: var(--sf-gap);
-
-  font-size: var(--sf-form-fz);
-  font-family: var(--sf-form-ff);
-  font-weight: 400;
-  line-height: 1;
+label.sf-radio input,
+label.sf-checkbox input,
+label.sf-radio input::before,
+label.sf-checkbox input::before
+{ width: 16px; height: 16px }
 
-  text-transform: none;
-}
+label.sf-radio input, label.sf-radio input ~ *,
+label.sf-checkbox input, label.sf-checkbox input ~ *
+{ cursor: pointer }
 
-label.sf-radio input[type='radio'],
-label.sf-checkbox input[type='checkbox'],
-label.sf-radio input[type='radio']::before,
-label.sf-checkbox input[type='checkbox']::before
+label.sf-radio input:disabled, label.sf-radio input:disabled ~ *,
+label.sf-checkbox input:disabled, label.sf-checkbox input:disabled ~ *
 {
-  width: 1em;
-  height: 1em;
+  cursor: not-allowed;
+  opacity: var(--sf-disabled);
 }
 
-label.sf-radio input[type='radio'] ~ *,
-label.sf-checkbox input[type='checkbox'] ~ *
-{ cursor: pointer }
-
-label.sf-radio input[type='radio'],
-label.sf-checkbox input[type='checkbox']
+label.sf-radio input,
+label.sf-checkbox input
 {
   appearance: none;
-  touch-action: manipulation;
 
   position: relative;
 
-  font-size: var(--sf-form-fz);
-  font-family: var(--sf-form-ff);
-  font-weight: 400;
-  line-height: 1;
-
-  border: 0;
-  background: none;
-
+  margin: 0 0 -2px;
   padding: 0;
-  margin: 0;
+
+  vertical-align: baseline;
 }
-label.sf-radio input[type='radio']::before,
-label.sf-checkbox input[type='checkbox']::before
+label.sf-radio input::before,
+label.sf-checkbox input::before
 {
   top: 0;
   left: 0;
   position: absolute;
 
-  width: 1em;
-  height: 1em;
+  width: 16px;
+  height: 16px;
   content: '';
 
-  background: hsl(var(--sf-form-c-bg) / 20%);
+  background-color: hsl(var(--sf-form-c-bg) / 20%);
   border: 1px solid hsl(var(--sf-form-c-bd) / 20%);
 }
-label.sf-radio input[type='radio']::after,
-label.sf-checkbox input[type='checkbox']::after
+label.sf-radio input::after,
+label.sf-checkbox input::after
 {
   top: 3px;
   left: 3px;
@@ -83,28 +68,18 @@ label.sf-checkbox input[type='checkbox']::after
   content: '';
 }
 
-label.sf-radio input[type='radio']:checked::before,
-label.sf-checkbox input[type='checkbox']:checked::before
+label.sf-radio input:checked::before,
+label.sf-checkbox input:checked::before
 { border-color: hsl(var(--sf-form-c-info)) }
 
-label.sf-radio input[type='radio']:checked::after,
-label.sf-checkbox input[type='checkbox']:checked::after
-{ background: hsl(var(--sf-form-c-info)) }
+label.sf-radio input:checked::after,
+label.sf-checkbox input:checked::after
+{ background-color: hsl(var(--sf-form-c-info)) }
 
-label.sf-radio input[type='radio']::before,
-label.sf-radio input[type='radio']::after
+label.sf-radio input::before,
+label.sf-radio input::after
 { border-radius: 50% }
 
-label.sf-radio input[type='radio']:disabled,
-label.sf-radio input[type='radio']:disabled ~ *,
-label.sf-checkbox input[type='checkbox']:disabled,
-label.sf-checkbox input[type='checkbox']:disabled ~ *
-{
-  cursor: not-allowed;
-  -webkit-tap-highlight-color: transparent;
-  opacity: var(--sf-disabled);
-}
-
 .sf-radio input:focus-visible,
 .sf-checkbox input:focus-visible
 {
@@ -113,3 +88,17 @@ label.sf-checkbox input[type='checkbox']:disabled ~ *
   outline-offset: 2px;
 }
 .sf-radio input:focus-visible { border-radius: 50% }
+
+/* /// */
+
+html.var label.sf-radio input:disabled, html.var label.sf-radio input:disabled ~ *,
+html.var label.sf-checkbox input:disabled, html.var label.sf-checkbox input:disabled ~ *
+{ opacity: 0.4 }
+
+html.var label.sf-radio input::before,
+html.var label.sf-checkbox input::before
+{ border-color: hsla(0, 0%, 10%, 0.2) }
+
+html.var label.sf-radio input:checked::before, html.var label.sf-radio input:checked::after, html.var .sf-radio input:focus-visible,
+html.var label.sf-checkbox input:checked::before, html.var label.sf-checkbox input:checked::after, html.var .sf-checkbox input:focus-visible
+{ outline-color: hsl(200, 100%, 60%) }
diff --git a/src/color.css b/src/color.css
index 04b1c7e..e87f3e2 100644
--- a/src/color.css
+++ b/src/color.css
@@ -1,47 +1,42 @@
-input.sf-input[type='color'] { box-sizing: border-box }
-
-input.sf-input[type='color'] *,
-input.sf-input[type='color'] *::before,
-input.sf-input[type='color'] *::after
-{ box-sizing: inherit }
+:root {
+  --sf-form-fz: 0.9375rem;
+  --sf-disabled: 0.4;
+}
 
-input.sf-input[type='color'] {
+.sf-input[type='color'] {
   cursor: pointer;
 
-  appearance: auto;
-  touch-action: manipulation;
-
-  --sf-form-color-size: 2.125em;
-
-  font-size: var(--sf-form-fz);
-  font-family: var(--sf-form-ff);
-  font-weight: 400;
-  line-height: 1;
+  width: 32px;
+  height: 32px;
 
-  width: var(--sf-form-color-size);
-  height: var(--sf-form-color-size);
+  background: none;
+  background: conic-gradient(from 0, yellow, darkorange, red, fuchsia, blue, cyan, lime, yellowgreen, yellow);
 
   padding: 0;
 
-  background: hsl(var(--sf-form-c-info));
-  background: conic-gradient(from 0, yellow, darkorange, red, fuchsia, blue, cyan, lime, yellowgreen, yellow);
-
   border: 0;
   border-radius: 50%;
 }
 
-input.sf-input[type='color']::-webkit-color-swatch-wrapper { padding: 3px }
-input.sf-input[type='color']::-webkit-color-swatch {
+.sf-input[type='color']:disabled {
+  cursor: not-allowed;
+  opacity: var(--sf-disabled);
+}
+
+.sf-input[type='color']::-webkit-color-swatch-wrapper { padding: 3px }
+.sf-input[type='color']::-webkit-color-swatch {
   border: 2px solid hsl(var(--sf-form-c-white));
   border-radius: 50%;
 }
-input.sf-input[type='color']::-moz-color-swatch {
+.sf-input[type='color']::-moz-color-swatch {
   border: 2px solid hsl(var(--sf-form-c-white));
   border-radius: 50%;
 }
 
-input.sf-input[type='color']:disabled {
-  cursor: not-allowed;
-  -webkit-tap-highlight-color: transparent;
-  opacity: var(--sf-disabled);
-}
+.sf-input[type='color']:focus-visible { border-radius: 50% }
+
+/* /// */
+
+html.var .sf-input[type='color']:disabled { opacity: 0.4 }
+html.var .sf-input[type='color']::-webkit-color-swatch { border: 2px solid hsl(0, 0%, 100%) }
+html.var .sf-input[type='color']::-moz-color-swatch { border: 2px solid hsl(0, 0%, 100%) }
diff --git a/src/file.css b/src/file.css
index 95c1b0e..5ed0da2 100644
--- a/src/file.css
+++ b/src/file.css
@@ -1,58 +1,79 @@
-input.sf-input[type='file'] { box-sizing: border-box }
-
-input.sf-input[type='file'] *,
-input.sf-input[type='file'] *::before,
-input.sf-input[type='file'] *::after
-{ box-sizing: inherit }
+:root {
+  --sf-form-ff: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --sf-form-fz: 0.9375rem;
+  --sf-disabled: 0.4;
+  --sf-form-radius: 3px;
+}
 
-input.sf-input[type='file'] {
+.sf-input[type='file'] {
   cursor: pointer;
 
-  appearance: auto;
-  touch-action: manipulation;
-
-  display: inline-block;
-
   font-size: var(--sf-form-fz);
   font-family: var(--sf-form-ff);
   font-weight: 400;
   line-height: 1;
 
-  padding: 0;
-  margin: 0;
+  border: 0;
+
+  width: auto;
+  max-width: 100%;
 
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-input.sf-input[type='file']::file-selector-button {
+.sf-input[type='file']::file-selector-button {
   cursor: pointer;
 
   display: inline-block;
 
-  text-transform: none;
+  font-size: var(--sf-form-fz);
+  font-family: var(--sf-form-ff);
+  font-weight: 400;
+  line-height: 1;
+
   text-align: center;
+  text-transform: none;
   text-decoration: none;
 
   color: hsl(var(--sf-form-c-txt));
   background: hsl(var(--sf-form-c-bg) / 20%);
   border: 1px solid hsl(var(--sf-form-c-bd) / 20%);
 
-  padding: var(--sf-form-p-input-block) var(--sf-form-p-input-inline);
+  height: 32px;
 
   border-radius: var(--sf-form-radius);
 }
-input.sf-input[type='file']:focus-visible {
-  outline: none;
-}
-input.sf-input[type='file']:focus-visible::file-selector-button {
+.sf-input[type='file']:focus-visible { outline: none }
+.sf-input[type='file']:focus-visible::file-selector-button {
   outline: 1px solid hsl(var(--sf-form-c-info));
   outline-offset: -1px;
 }
 
-input.sf-input[type='file']:disabled { opacity: var(--sf-disabled) }
-input.sf-input[type='file']:disabled,
-input.sf-input[type='file']:disabled::file-selector-button {
+.sf-input[type='file']:disabled {
   cursor: not-allowed;
-  -webkit-tap-highlight-color: transparent;
+  opacity: var(--sf-disabled);
 }
+.sf-input[type='file']:disabled::file-selector-button {
+  cursor: not-allowed;
+}
+
+/* /// */
+
+html.var .sf-input[type='file'] {
+  font-size: 15px;
+  font-family: Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  padding: 0; /* required */
+}
+html.var .sf-input[type='file']::file-selector-button {
+  font-size: 15px;
+  font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  color: hsl(0, 0%, 10%);
+  background: hsla(0, 0%, 100%, 0.2);
+  border: 1px solid hsla(0, 0%, 10%, 0.2);
+
+  border-radius: 3px;
+}
+html.var .sf-input[type='file']:focus-visible::file-selector-button { outline: 1px solid hsl(200, 100%, 60%) }
+
+html.var .sf-input[type='file']:disabled { opacity: 0.4 }
diff --git a/src/input.css b/src/input.css
index de13720..b93ee81 100644
--- a/src/input.css
+++ b/src/input.css
@@ -1,17 +1,25 @@
-input.sf-input:not([type='radio'], [type='checkbox'], [type='color'], [type='file'], [type='image']) { box-sizing: border-box }
+:root {
+  --sf-form-ff: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 
-input.sf-input:not([type='radio'], [type='checkbox'], [type='color'], [type='file'], [type='image']) *,
-input.sf-input:not([type='radio'], [type='checkbox'], [type='color'], [type='file'], [type='image']) *::before,
-input.sf-input:not([type='radio'], [type='checkbox'], [type='color'], [type='file'], [type='image']) *::after
-{ box-sizing: inherit }
+  --sf-form-fz: 0.9375rem;
+
+  --sf-disabled: 0.4;
+
+  --sf-form-radius: 3px;
 
-input.sf-input:is([type='image'], [type='range']) { cursor: pointer }
+  --sf-form-p-input-block: 0.5em;
+  --sf-form-p-input-inline: 0.5em;
+}
+
+.sf-input *,
+.sf-input *::before,
+.sf-input *::after
+{ box-sizing: inherit }
 
-input:is(.sf-input:not([type='radio'], [type='checkbox'], [type='color'], [type='file'], [type='image'], [type='range'])) {
-  cursor: text;
+.sf-input[type='image'], .sf-input[type='range'] { cursor: pointer }
 
-  appearance: auto;
-  touch-action: manipulation;
+.sf-input {
+  cursor: auto;
 
   font-size: var(--sf-form-fz);
   font-family: var(--sf-form-ff);
@@ -23,49 +31,86 @@ input:is(.sf-input:not([type='radio'], [type='checkbox'], [type='color'], [type=
   color: hsl(var(--sf-form-c-txt));
   background: hsl(var(--sf-form-c-bg) / 20%);
 
-  border: 1px solid;
-  border-color: transparent transparent hsl(var(--sf-form-c-bd) / 20%);
+  border-style: solid;
+  border-color: hsl(var(--sf-form-c-bd) / 20%);
+  border-width: 0 0 1px;
   border-radius: 0;
 
   outline: none;
 
   width: 100%;
+  height: 32px;
 
   padding: var(--sf-form-p-input-block) var(--sf-form-p-input-inline);
 
-  transition: border 0.1s ease-out;
+  box-sizing: border-box;
+  vertical-align: top;
 }
 
-input.sf-input:is([type='time'], [type='week'], [type='month'], [type='date'], [type='datetime-local']) {
+.sf-input[type='image'], .sf-input[type='range'] { border: 0; padding: 0 }
+.sf-input[type='range'] { width: 100% }
+.sf-input[type='image'] { width: auto; height: auto }
+
+.sf-input[type='time'],
+.sf-input[type='week'],
+.sf-input[type='month'],
+.sf-input[type='date'],
+.sf-input[type='datetime-local'] {
   appearance: none;
   text-align: start;
-  height: 37px;
 }
-input.sf-input:is([type='time'], [type='week'], [type='month'], [type='date'], [type='datetime-local'])::-webkit-date-and-time-value { text-align: start }
-input.sf-input:focus-visible::-webkit-calendar-picker-indicator {
+.sf-input::-webkit-date-and-time-value { text-align: start }
+
+.sf-input::-webkit-calendar-picker-indicator {
   cursor: pointer;
   outline: none;
+  opacity: 0.5;
 }
+.sf-input:hover::-webkit-calendar-picker-indicator { opacity: 1 }
 
-input:is(.sf-input:not([type='radio'], [type='checkbox'], [type='color'], [type='file'], [type='image'], [type='range']))::placeholder { color: hsl(var(--sf-form-c-txt) / 40%) }
-input:is(.sf-input:not([type='radio'], [type='checkbox'], [type='color'], [type='file'], [type='image'], [type='range'])):placeholder-shown {
-  border-color: hsl(var(--sf-form-c-bd) / 20%);
-  border-radius: var(--sf-form-radius);
-}
+.sf-input::placeholder { color: hsl(var(--sf-form-c-txt) / 40%) }
 
-input:is(.sf-input:not([type='radio'], [type='checkbox'], [type='color'], [type='file'], [type='image'], [type='range'])):focus {
+.sf-input:focus {
   border-color: transparent transparent hsl(var(--sf-form-c-info));
-  border-radius: 0;
   outline: none;
 }
-input.sf-input:is([type='color'], [type='image'], [type='range']):focus-visible {
+
+.sf-input[type='color']:focus-visible,
+.sf-input[type='image']:focus-visible,
+.sf-input[type='range']:focus-visible {
   outline: 2px solid hsl(var(--sf-form-c-info));
   outline-offset: 2px;
-  border-radius: var(--sf-form-radius);
 }
 
-input:is(.sf-input:not([type='radio'], [type='checkbox'], [type='color'], [type='file'])):disabled {
+.sf-input:disabled {
   cursor: not-allowed;
-  -webkit-tap-highlight-color: transparent;
   opacity: var(--sf-disabled);
 }
+
+/* /// */
+
+html.var .sf-input {
+  font-size: 15px;
+  font-family: Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+
+  color: hsl(0, 0%, 10%);
+  background: hsla(0, 0%, 90%, 0.2);
+
+  border-color: hsla(0, 0%, 10%, 0.2);
+
+  padding: 8px;
+}
+
+html.var .sf-input::placeholder { color: hsla(0, 0%, 10%, 0.4) }
+html.var .sf-input:placeholder-shown { border-color: hsla(0, 0%, 10%, 0.2) }
+
+html.var .sf-input:focus { border-color: hsl(200, 100%, 60%) }
+
+html.var .sf-input[type='image'], html.var .sf-input[type='range'] { background: none }
+
+html.var .sf-input[type='color']:focus-visible,
+html.var .sf-input[type='image']:focus-visible,
+html.var .sf-input[type='range']:focus-visible
+{ outline: 2px solid hsl(200, 100%, 60%) }
+
+html.var .sf-input:disabled { opacity: 0.4 }
diff --git a/src/loading.css b/src/loading.css
index 5c31f93..5c05d48 100644
--- a/src/loading.css
+++ b/src/loading.css
@@ -5,12 +5,20 @@
 
 a.sf-loading.sf-button:not([href]),
 .sf-loading:disabled,
-.sf-loading:is(.sf-button, .sf-input:not([type='color'])):disabled
+.sf-loading.sf-button:disabled,
+.sf-loading.sf-input:not([type='color']):disabled
 {
   --c1: transparent;
   --c2: hsl(var(--sf-form-c-loading) / 5%);
-  background: hsl(var(--sf-form-c-info));
+
+  cursor: progress;
   background: repeating-linear-gradient(45deg, var(--c1), var(--c1) 10px, var(--c2) 10px, var(--c2) 20px);
   background-size: 28px 100%;
   animation: Loading .3s linear infinite;
 }
+
+html.var a.sf-loading.sf-button:not([href]),
+html.var .sf-loading:disabled,
+html.var .sf-loading.sf-button:disabled,
+html.var .sf-loading.sf-input:not([type='color']):disabled
+{ background: repeating-linear-gradient(45deg, transparent, transparent 10px, hsla(0, 0%, 10%, 0.05) 10px, hsla(0, 0%, 10%, 0.05) 20px) }
diff --git a/src/select.css b/src/select.css
index 2942ae0..956f696 100644
--- a/src/select.css
+++ b/src/select.css
@@ -1,52 +1,79 @@
-select.sf-select { box-sizing: border-box }
-
-select.sf-select *,
-select.sf-select *::before,
-select.sf-select *::after
-{ box-sizing: inherit }
+:root {
+  --sf-form-ff: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --sf-form-fz: 0.9375rem;
+  --sf-lh-normal: 1.1875;
+  --sf-disabled: 0.4;
+  --sf-form-radius: 3px;
+  --sf-form-p-input-block: 0.5em;
+  --sf-form-p-input-inline: 0.5em;
+}
 
-select.sf-select,
-select.sf-select option
+.sf-select,
+.sf-select option
 {
-  appearance: auto;
-  touch-action: manipulation;
-
   font-size: var(--sf-form-fz);
   font-family: var(--sf-form-ff);
   font-weight: 400;
-  line-height: 1;
+  line-height: var(--sf-lh-normal);
 
   text-transform: none;
-
-  padding: var(--sf-form-p-input-block) var(--sf-form-p-input-inline);
 }
-select.sf-select option { padding: calc(var(--sf-form-p-input-block) / 2) calc(var(--sf-form-p-input-inline) / 2) }
-select.sf-select optgroup { padding: calc(var(--sf-form-p-input-block) / 2) 0 }
+.sf-select { padding: var(--sf-form-p-input-block) var(--sf-form-p-input-inline) }
+.sf-select option { padding: calc(var(--sf-form-p-input-block) / 2) var(--sf-form-p-input-inline) }
+.sf-select optgroup { padding: calc(var(--sf-form-p-input-block) / 2) 0 0 }
 
-select.sf-select {
+.sf-select {
   cursor: pointer;
 
-  appearance: auto;
-  touch-action: manipulation;
-
-  color: hsl(var(--sf-form-c-txt));
   background: hsl(var(--sf-form-c-bg) / 20%);
-  border: 1px solid hsl(var(--sf-form-c-bd) / 20%);
 
-  width: 100%;
+  border-width: 1px;
+  border-style: solid;
+  border-color: hsl(var(--sf-form-c-bd) / 20%);
+  border-radius: 0;
 
-  border-radius: var(--sf-form-radius);
+  width: 100%;
+  height: auto;
 
   overflow: auto;
 }
 
-select.sf-select:focus-visible {
+.sf-select:not([multiple]) {
+  height: 32px;
+  padding: 0 var(--sf-form-p-input-inline);
+  border-width: 0 0 1px;
+}
+
+.sf-select::-ms-expand {
+  border: 0;
+  background: none;
+}
+
+.sf-select:focus-visible {
   outline: 1px solid hsl(var(--sf-form-c-info));
   outline-offset: -1px;
 }
 
-select.sf-select:disabled {
+.sf-select:disabled {
   cursor: not-allowed;
-  -webkit-tap-highlight-color: transparent;
   opacity: var(--sf-disabled);
 }
+
+/* /// */
+
+html.var .sf-select,
+html.var .sf-select option
+{
+  font-size: 15px;
+  font-family: Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
+html.var .sf-select:not([multiple]) { padding: 0 0 0 8px }
+html.var .sf-select { padding: 8px 0 8px 8px }
+
+html.var .sf-select {
+  color: hsl(0, 0%, 10%);
+  background: hsla(0, 0%, 90%, 0.2);
+  border-color: hsla(0, 0%, 10%, 0.2);
+}
+
+html.var .sf-select:disabled { opacity: 0.4 }
diff --git a/src/switch.css b/src/switch.css
index f16f6ed..01f42ca 100644
--- a/src/switch.css
+++ b/src/switch.css
@@ -1,3 +1,13 @@
+:root {
+  --sf-form-ff: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --sf-form-fz: 0.9375rem;
+  --sf-form-fz-small: 0.75rem;
+  --sf-disabled: 0.4;
+  --sf-form-p-input-block: 0.5em;
+  --sf-form-p-input-inline: 0.5em;
+  --sf-form-switch-size: 1rem;
+}
+
 .sf-switch { box-sizing: border-box }
 
 .sf-switch.multiple *,
@@ -6,11 +16,6 @@
 { box-sizing: inherit }
 
 .sf-switch {
-  display: flex;
-  flex-flow: wrap row;
-  align-items: center;
-  gap: var(--sf-gap);
-
   font-size: var(--sf-form-fz);
   font-family: var(--sf-form-ff);
   font-weight: 400;
@@ -33,7 +38,7 @@ label.sf-switch input[type='checkbox'] {
   width: calc(var(--sf-form-switch-size) * 2);
   height: var(--sf-form-switch-size);
 
-  vertical-align: middle;
+  vertical-align: text-top;
 }
 label.sf-switch input[type='checkbox']::before {
   cursor: pointer;
@@ -75,26 +80,29 @@ label.sf-switch input[type='checkbox'] ~ *
 { cursor: pointer }
 
 .sf-switch.multiple .sf-switch-toggle {
-  display: flex;
-  flex-flow: row;
+  display: inline-block;
 
   background: hsl(var(--sf-form-c-bg) / 20%);
   box-shadow: 1px 2px 8px 0 hsl(var(--sf-form-c-bd) / 15%);
 }
+.sf-switch.multiple .sf-switch-toggle * { display: inline-block }
 .sf-switch.multiple .sf-switch-toggle label { position: relative }
 .sf-switch.multiple .sf-switch-toggle span {
-  display: block;
-
   font-size: var(--sf-form-fz-small);
   text-align: center;
 
-  min-width: 2rem;
+  min-width: 32px;
 
-  padding: calc(var(--sf-form-p-input-block) * 1.25) calc(var(--sf-form-p-input-inline) * 1.25);
+  padding: var(--sf-form-p-input-block) var(--sf-form-p-input-inline);
 
   background: hsl(var(--sf-form-c-bd) / 5%);
 }
-.sf-switch.multiple input:where([type='checkbox'], [type='radio']) {
+
+.sf-switch.multiple input[type='checkbox'],
+.sf-switch.multiple input[type='radio']
+{
+  appearance: none;
+
   cursor: pointer;
 
   top: 0;
@@ -104,18 +112,24 @@ label.sf-switch input[type='checkbox'] ~ *
   position: absolute;
   z-index: 1;
 
-  appearance: none;
-  background: none;
+  width: 100%;
+  height: 100%;
 
   padding: 0;
   margin: 0;
   border: 0;
+
+  opacity: 0;
 }
-.sf-switch.multiple input:where([type='checkbox'], [type='radio'])::before,
-.sf-switch.multiple input:where([type='checkbox'], [type='radio'])::after
+.sf-switch.multiple input[type='checkbox']::before,
+.sf-switch.multiple input[type='radio']::before,
+.sf-switch.multiple input[type='checkbox']::after,
+.sf-switch.multiple input[type='radio']::after
 { content: none }
 
-.sf-switch.multiple input:where([type='checkbox'], [type='radio']):checked ~ span {
+.sf-switch.multiple input[type='checkbox']:checked ~ span,
+.sf-switch.multiple input[type='radio']:checked ~ span
+{
   color: hsl(var(--sf-form-c-white));
   background: hsl(var(--sf-form-c-info));
 }
@@ -124,29 +138,94 @@ label.sf-switch input[type='checkbox'] ~ *
 
 .sf-switch.multiple .sf-switch-description {
   font-size: var(--sf-form-fz-small);
-  margin: 0;
+  margin: 0.5em 0 0;
+  padding: 0 0 0.5em;
 }
 
 .sf-switch input[type='checkbox']:disabled,
 .sf-switch input[type='checkbox']:disabled::after,
 .sf-switch input[type='checkbox']:disabled::before,
 .sf-switch input[type='checkbox']:disabled ~ *,
-.sf-switch.multiple input:where([type='checkbox'], [type='radio']):disabled,
-.sf-switch.multiple input:where([type='checkbox'], [type='radio']):disabled ~ *
+.sf-switch.multiple input[type='checkbox']:disabled,
+.sf-switch.multiple input[type='radio']:disabled,
+.sf-switch.multiple input[type='checkbox']:disabled ~ *,
+.sf-switch.multiple input[type='radio']:disabled ~ *
 {
   cursor: not-allowed;
-  -webkit-tap-highlight-color: transparent;
 }
 
 .sf-switch input[type='checkbox']:disabled,
 .sf-switch input[type='checkbox']:disabled ~ *,
-.sf-switch.multiple input:where([type='checkbox'], [type='radio']):disabled ~ *
+.sf-switch.multiple input[type='checkbox']:disabled ~ *,
+.sf-switch.multiple input[type='radio']:disabled ~ *
 { opacity: var(--sf-disabled) }
 
-.sf-switch input:where([type='checkbox'], [type='radio']):focus-visible {
+.sf-switch input[type='checkbox']:focus-visible,
+.sf-switch input[type='radio']:focus-visible
+{
   border-color: transparent;
   outline: 2px solid hsl(var(--sf-form-c-info));
 }
-.sf-switch:not(.multiple) input:where([type='checkbox'], [type='radio']):focus-visible {
+.sf-switch:not(.multiple) input[type='checkbox']:focus-visible,
+.sf-switch:not(.multiple) input[type='radio']:focus-visible
+{
   border-radius: calc(var(--sf-form-switch-size) / 2)
 }
+
+/* /// */
+
+html.var .sf-switch {
+  font-size: 15px;
+  font-family: Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
+
+html.var label.sf-switch input[type='checkbox'] {
+  width: 16px;
+  height: 16px;
+}
+html.var label.sf-switch input[type='checkbox']::before {
+  width: 16px;
+  height: 16px;
+  background: hsla(0, 0%, 10%, 0.2);
+  border-radius: 8px;
+}
+html.var label.sf-switch input[type='checkbox']::after {
+  width: 28px;
+  height: 28px;
+  background: hsl(0, 0%, 100%);
+  border-radius: 8px;
+  box-shadow: 0 0 0 1px hsl(0, 0%, 100%);
+}
+html.var label.sf-switch input[type='checkbox']:checked::before { background: hsl(200, 100%, 60%) }
+
+html.var .sf-switch.multiple .sf-switch-toggle {
+  background: hsla(0, 0%, 90%, 0.2);
+  box-shadow: 1px 2px 8px 0 hsla(0, 0%, 10%, 0.15);
+}
+html.var .sf-switch.multiple .sf-switch-toggle span {
+  font-size: 12px;
+  padding: 8px;
+  background: hsla(0, 0%, 10%, 0.1);
+}
+
+html.var .sf-switch.multiple input[type='checkbox']:checked ~ span,
+html.var .sf-switch.multiple input[type='radio']:checked ~ span
+{
+  color: hsl(0, 0%, 100%);
+  background: hsl(200, 100%, 60%);
+}
+
+html.var .sf-switch.multiple .sf-switch-description { font-size: 12px }
+
+html.var .sf-switch input[type='checkbox']:disabled ~ *,
+html.var .sf-switch.multiple input[type='checkbox']:disabled ~ *,
+html.var .sf-switch.multiple input[type='radio']:disabled ~ *
+{ opacity: 0.4 }
+
+html.var .sf-switch input[type='checkbox']:focus-visible,
+html.var .sf-switch input[type='radio']:focus-visible
+{ outline: 2px solid hsl(200, 100%, 60%) }
+
+html.var .sf-switch:not(.multiple) input[type='checkbox']:focus-visible,
+html.var .sf-switch:not(.multiple) input[type='radio']:focus-visible
+{ border-radius: 8px }
diff --git a/src/textarea.css b/src/textarea.css
index 8f235a9..8e99d70 100644
--- a/src/textarea.css
+++ b/src/textarea.css
@@ -1,16 +1,13 @@
-textarea.sf-textarea { box-sizing: border-box }
-
-textarea.sf-textarea *,
-textarea.sf-textarea *::before,
-textarea.sf-textarea *::after
-{ box-sizing: inherit }
-
-textarea.sf-textarea {
-  appearance: none;
-  touch-action: manipulation;
-
-  display: block;
+:root {
+  --sf-form-ff: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --sf-form-fz: 0.9375rem;
+  --sf-disabled: 0.4;
+  --sf-form-radius: 3px;
+  --sf-form-p-input-block: 0.5em;
+  --sf-form-p-input-inline: 0.5em;
+}
 
+.sf-textarea {
   font-size: var(--sf-form-fz);
   font-family: var(--sf-form-ff);
   font-weight: 400;
@@ -21,6 +18,7 @@ textarea.sf-textarea {
   border: 1px solid hsl(var(--sf-form-c-bd) / 20%);
 
   width: 100%;
+  max-width: 100%;
   min-height: calc((1.499535em + 2px + var(--sf-form-p-input-block)) * 4);
 
   padding: var(--sf-form-p-input-block) var(--sf-form-p-input-inline);
@@ -30,18 +28,41 @@ textarea.sf-textarea {
   resize: vertical;
 
   overflow: auto;
+
+  box-sizing: border-box;
 }
 
-textarea.sf-textarea:disabled {
+.sf-textarea::placeholder { color: hsl(var(--sf-form-c-txt) / 40%) }
+
+.sf-textarea:disabled {
   cursor: not-allowed;
-  -webkit-tap-highlight-color: transparent;
 
   resize: none;
 
   opacity: var(--sf-disabled);
 }
 
-textarea.sf-textarea:focus-visible {
+.sf-textarea:focus-visible {
   outline: 1px solid hsl(var(--sf-form-c-info));
   outline-offset: -1px;
 }
+
+/* /// */
+
+html.var .sf-textarea {
+  font-size: 15px;
+  font-family: Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+
+  color: hsl(0, 0%, 10%);
+  background: hsla(0, 0%, 90%, 0.2);
+  border: 1px solid hsla(0, 0%, 10%, 0.2);
+
+  min-height: calc((1.499535em + 2px + 0.5em) * 4);
+
+  padding: 8px;
+
+  border-radius: 3px;
+}
+html.var .sf-textarea::placeholder { color: hsla(0, 0%, 10%, 0.4) }
+html.var .sf-textarea:disabled { opacity: 0.4 }
+html.var .sf-textarea:focus:valid { border-color: hsl(200, 100%, 60%) }
diff --git a/src/theme.css b/src/theme.css
new file mode 100644
index 0000000..ce4d0b7
--- /dev/null
+++ b/src/theme.css
@@ -0,0 +1,82 @@
+html.var[data-theme='dark'] .sf-select::-ms-expand,
+html.var.dark .sf-select::-ms-expand
+{ color: hsl(0, 0%, 90%) }
+
+html.var[data-theme='dark'] .sf-input[type='file']::file-selector-button,
+html.var.dark .sf-input[type='file']::file-selector-button {
+  color: hsl(0, 0%, 90%);
+  background-color: hsla(0, 0%, 20%, 0.2);
+  border-color: hsla(0, 0%, 100%, 0.2);
+}
+
+html.var[data-theme='dark'] .sf-input[type='file']:focus-visible::file-selector-button,
+html.var.dark .sf-input[type='file']:focus-visible::file-selector-button { outline-color: hsl(219, 79%, 66%) }
+
+html.var[data-theme='dark'] .sf-button,
+html.var[data-theme='dark'] .sf-input,
+html.var[data-theme='dark'] .sf-textarea,
+html.var[data-theme='dark'] .sf-select,
+html.var[data-theme='dark'] option,
+html.var.dark .sf-button,
+html.var.dark .sf-input,
+html.var.dark .sf-textarea,
+html.var.dark .sf-select,
+html.var.dark option
+{
+  color: hsl(0, 0%, 90%);
+  background-color: hsl(0, 0%, 20%);
+  border-color: hsla(0, 0%, 100%, 0.2);
+}
+
+html.var[data-theme='dark'] .sf-description,
+html.var[data-theme='dark'] .sf-valid,
+html.var.dark .sf-description,
+html.var.dark .sf-valid
+{ color: hsla(0, 0%, 90%, 0.4) }
+
+html.var[data-theme='dark'] .sf-invalid,
+html.var.dark .sf-invalid
+{ color: hsl(0, 100%, 65%) }
+
+html.var[data-theme='dark'] .sf-button:focus-visible,
+html.var[data-theme='dark'] label.sf-radio input:checked::before, html.var label.sf-radio input:checked::after, html.var .sf-radio input:focus-visible,
+html.var[data-theme='dark'] label.sf-checkbox input:checked::before, html.var label.sf-checkbox input:checked::after, html.var .sf-checkbox input:focus-visible,
+html.var[data-theme='dark'] .sf-input:focus,
+html.var[data-theme='dark'] .sf-input[type='color']:focus-visible,
+html.var[data-theme='dark'] .sf-input[type='image']:focus-visible,
+html.var[data-theme='dark'] .sf-input[type='range']:focus-visible,
+html.var[data-theme='dark'] .sf-textarea:focus-visible,
+html.var[data-theme='dark'] .sf-select:focus-visible,
+html.var.dark .sf-button:focus-visible,
+html.var.dark label.sf-radio input:checked::before, html.var label.sf-radio input:checked::after, html.var .sf-radio input:focus-visible,
+html.var.dark label.sf-checkbox input:checked::before, html.var label.sf-checkbox input:checked::after, html.var .sf-checkbox input:focus-visible,
+html.var.dark .sf-input:focus,
+html.var.dark .sf-input[type='color']:focus-visible,
+html.var.dark .sf-input[type='image']:focus-visible,
+html.var.dark .sf-input[type='range']:focus-visible,
+html.var.dark .sf-textarea:focus-visible,
+html.var.dark .sf-select:focus-visible
+{ outline-color: hsl(219, 79%, 66%) }
+
+html.var[data-theme='dark'] .sf-input[type='color']::-webkit-color-swatch,
+html.var.dark .sf-input[type='color']::-webkit-color-swatch
+{ border-color: hsl(0, 0%, 100%) }
+html.var[data-theme='dark'] .sf-input[type='color']::-moz-color-swatch,
+html.var.dark .sf-input[type='color']::-moz-color-swatch
+{ border-color: hsl(0, 0%, 100%) }
+
+html.var[data-theme='dark'] .sf-input, html.var.dark .sf-input { border-color: transparent transparent hsla(0, 0%, 100%, 0.2) }
+
+html.var[data-theme='dark'] .sf-input::placeholder,
+html.var[data-theme='dark'] .sf-textarea::placeholder,
+html.var.dark .sf-input::placeholder,
+html.var.dark .sf-textarea::placeholder
+{ color: hsla(0, 0%, 90%, 0.4) }
+
+html.var[data-theme='dark'] .sf-input:placeholder-shown,
+html.var.dark .sf-input:placeholder-shown
+{ border-color: hsla(0, 0%, 100%, 0.2) }
+
+html.var[data-theme='dark'] .sf-input[type='image'], html.var[data-theme='dark'] .sf-input[type='range'],
+html.var.dark .sf-input[type='image'], html.var.dark .sf-input[type='range']
+{ background: none }
diff --git a/src/validate.css b/src/validate.css
index a987b3d..73ce687 100644
--- a/src/validate.css
+++ b/src/validate.css
@@ -1,4 +1,11 @@
-:where(.sf-description, .sf-invalid, .sf-valid) {
+:root {
+  --sf-form-ff: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --sf-form-fz-small: 0.625rem;
+  --sf-lh-normal: 1.1875;
+  --sf-disabled: 0.4;
+}
+
+.sf-description, .sf-invalid, .sf-valid {
   display: none;
   color: hsl(var(--sf-form-c-txt) / 40%);
 
@@ -9,103 +16,72 @@
 
   text-transform: none;
 
-  margin: 0 0 var(--sf-gap);
+  margin: 0.5em 0 0;
+  padding: 0 0 0.5em;
 }
 
-.validates + :where(.sf-description, .sf-invalid, .sf-valid) { margin: 0 0 var(--sf-gap) }
-
 .sf-description { display: block }
 
-:not(.d\:f, .d\:f\:x, .d\:f\:y, .d\:g, .d\:g\:x, .d\:g\:y) > :where(.validates, .error) + .sf-description,
-:not(.d\:f, .d\:f\:x, .d\:f\:y, .d\:g, .d\:g\:x, .d\:g\:y) > :where(.validates, .error) + .sf-valid + .sf-description,
-:not(.d\:f, .d\:f\:x, .d\:f\:y, .d\:g, .d\:g\:x, .d\:g\:y) > :where(.validates, .error) + .sf-invalid + .sf-description,
-:not(.d\:f, .d\:f\:x, .d\:f\:y, .d\:g, .d\:g\:x, .d\:g\:y) > :where(.validates, .error) + .sf-valid + .sf-invalid + .sf-description,
-:not(.d\:f, .d\:f\:x, .d\:f\:y, .d\:g, .d\:g\:x, .d\:g\:y) > :where(.validates, .error) + .sf-invalid + .sf-valid + .sf-description,
-
-:not(.d\:f, .d\:f\:x, .d\:f\:y, .d\:g, .d\:g\:x, .d\:g\:y) > :where(.validates, .error) + .sf-invalid,
-:not(.d\:f, .d\:f\:x, .d\:f\:y, .d\:g, .d\:g\:x, .d\:g\:y) > :where(.validates, .error) + .sf-valid + .sf-invalid,
-:not(.d\:f, .d\:f\:x, .d\:f\:y, .d\:g, .d\:g\:x, .d\:g\:y) > :where(.validates, .error) + .sf-description + .sf-invalid,
-:not(.d\:f, .d\:f\:x, .d\:f\:y, .d\:g, .d\:g\:x, .d\:g\:y) > :where(.validates, .error) + .sf-valid + .sf-description + .sf-invalid,
-:not(.d\:f, .d\:f\:x, .d\:f\:y, .d\:g, .d\:g\:x, .d\:g\:y) > :where(.validates, .error) + .sf-description + .sf-valid + .sf-invalid,
-
-:not(.d\:f, .d\:f\:x, .d\:f\:y, .d\:g, .d\:g\:x, .d\:g\:y) > :where(.validates, .error) + .sf-valid,
-:not(.d\:f, .d\:f\:x, .d\:f\:y, .d\:g, .d\:g\:x, .d\:g\:y) > :where(.validates, .error) + .sf-invalid + .sf-valid,
-:not(.d\:f, .d\:f\:x, .d\:f\:y, .d\:g, .d\:g\:x, .d\:g\:y) > :where(.validates, .error) + .sf-description + .sf-valid,
-:not(.d\:f, .d\:f\:x, .d\:f\:y, .d\:g, .d\:g\:x, .d\:g\:y) > :where(.validates, .error) + .sf-invalid + .sf-description + .sf-valid,
-:not(.d\:f, .d\:f\:x, .d\:f\:y, .d\:g, .d\:g\:x, .d\:g\:y) > :where(.validates, .error) + .sf-description + .sf-invalid + .sf-valid
-{ margin: var(--sf-gap) 0 }
-
 .sf-invalid { color: hsl(var(--sf-form-c-error)) }
 .sf-valid:not(.sf-description) { color: hsl(var(--sf-form-c-txt)) }
 
-.show:is(.sf-description, .sf-invalid, .sf-valid) { display: block }
-.hide:is(.sf-description, .sf-invalid, .sf-valid) { display: none }
+.show.sf-description, .show.sf-invalid, .show.sf-valid { display: block }
+.hide.sf-description, .hide.sf-invalid, .hide.sf-valid { display: none }
 
-.error:not(:disabled) + .sf-invalid,
-.error:not(:disabled) + .sf-valid + .sf-invalid,
-.error:not(:disabled) + .sf-description + .sf-invalid,
-.error:not(:disabled) + .sf-valid + .sf-description + .sf-invalid,
-.error:not(:disabled) + .sf-description + .sf-valid + .sf-invalid
-{ display: block }
+/* validates */
 
-.error + .sf-valid,
-.error + .sf-invalid + .sf-valid,
-.error + .sf-description + .sf-valid,
-.error + .sf-invalid + .sf-description + .sf-valid,
-.error + .sf-description + .sf-invalid + .sf-valid,
-
-.error + .sf-description,
-.error + .sf-valid + .sf-description,
-.error + .sf-invalid + .sf-description,
-.error + .sf-valid + .sf-invalid + .sf-description,
-.error + .sf-invalid + .sf-valid + .sf-description
+.validates:focus:invalid ~ .sf-invalid,
+.validates:focus:valid ~ .sf-valid,
+.validates:focus:valid ~ .sf-description.sf-valid
+{ display: block }
+.validates:focus:invalid ~ .validates ~ .sf-invalid,
+.validates:focus:valid ~ .validates ~ .sf-valid,
+.validates:focus:valid ~ .validates ~ .sf-description.sf-valid
 { display: none }
 
-.validates:where(:invalid:focus, :invalid:not(:placeholder-shown)) + .sf-invalid,
-.validates:where(:invalid:focus, :invalid:not(:placeholder-shown)) + .sf-valid + .sf-invalid,
-.validates:where(:invalid:focus, :invalid:not(:placeholder-shown)) + .sf-description + .sf-invalid,
-.validates:where(:invalid:focus, :invalid:not(:placeholder-shown)) + .sf-valid + .sf-description + .sf-invalid,
-.validates:where(:invalid:focus, :invalid:not(:placeholder-shown)) + .sf-description + .sf-valid + .sf-invalid,
+.validates:focus ~ .sf-description { display: none }
+.validates:focus ~ .validates ~ .sf-description { display: block }
 
-.validates:where(:valid:focus, :valid:not(:placeholder-shown)) + .sf-valid,
-.validates:where(:valid:focus, :valid:not(:placeholder-shown)) + .sf-invalid + .sf-valid,
-.validates:where(:valid:focus, :valid:not(:placeholder-shown)) + .sf-description + .sf-valid,
-.validates:where(:valid:focus, :valid:not(:placeholder-shown)) + .sf-invalid + .sf-description + .sf-valid,
-.validates:where(:valid:focus, :valid:not(:placeholder-shown)) + .sf-description + .sf-invalid + .sf-valid,
-
-.validates:where(:valid:focus, :valid:not(:placeholder-shown)) + .sf-description.sf-valid,
-.validates:where(:valid:focus, :valid:not(:placeholder-shown)) + .sf-invalid + .sf-description.sf-valid
-{ display: block }
+/* error */
+.error:not(:disabled) + .sf-invalid,
+.error:not(:disabled) + .sf-valid + .sf-invalid,
+.error:not(:disabled) + .sf-description + .sf-invalid
+{ display: block !important }
 
-.validates:where(:focus, :not(:placeholder-shown)) + .sf-description,
-.validates:where(:focus, :not(:placeholder-shown)) + .sf-invalid + .sf-description,
-.validates:where(:focus, :not(:placeholder-shown)) + .sf-valid + .sf-description,
-.validates:where(:focus, :not(:placeholder-shown)) + .sf-invalid + .sf-valid + .sf-description,
-.validates:where(:focus, :not(:placeholder-shown)) + .sf-valid + .sf-invalid + .sf-description
-{ display: none }
+.error:not(:disabled) + .sf-invalid + .sf-valid,
+.error:not(:disabled) + .sf-invalid + .sf-description,
+.error:not(:disabled) + .sf-description,
+.error:not(:disabled) + .sf-description + .sf-valid,
+.error:not(:disabled) + .sf-valid,
+.error:not(:disabled) + .sf-valid + .sf-description
+{ display: none !important }
 
 .validates input[type='checkbox'] ~ .sf-description { display: none }
 .validates input[type='checkbox']:invalid ~ .sf-invalid { display: block }
 .validates input[type='checkbox']:valid ~ .sf-valid { display: block }
 
-.validates:invalid:required:not(:focus, :disabled) { border-color: hsl(var(--sf-form-c-warning)) }
+.validates:required:not(:focus) { border-bottom-color: hsl(var(--sf-form-c-warning)) }
+.validates:required:not(:disabled) { border-bottom-color: hsl(var(--sf-form-c-warning)) }
 
-.validates input:is([type='radio'], [type='checkbox']):invalid::before { border-color: hsl(var(--sf-form-c-error)) }
+.validates input[type='radio']:invalid::before,
+.validates input[type='checkbox']:invalid::before
+{ border-color: hsl(var(--sf-form-c-error)) }
 
 .error:not(:disabled),
 .validates:invalid:focus
 {
-  border-color: hsl(var(--sf-form-c-error));
+  border-bottom-color: hsl(var(--sf-form-c-error));
   outline: none;
 }
 
-input.error.sf-input:is(:focus, :not(:disabled):not(:placeholder-shown)),
-input.validates.sf-input:invalid:is(:placeholder-shown:focus, :not(:placeholder-shown))
-{ border-color: transparent transparent hsl(var(--sf-form-c-error)) }
-
-label.validates:is(.sf-switch, .sf-checkbox) :is(.sf-description, .sf-valid, .sf-invalid) {
+label.validates.sf-switch .sf-description,
+label.validates.sf-switch .sf-valid,
+label.validates.sf-switch .sf-invalid,
+label.validates.sf-checkbox .sf-description,
+label.validates.sf-checkbox .sf-valid,
+label.validates.sf-checkbox .sf-invalid {
   width: 100%;
-  line-height: 1;
+  line-height: var(--sf-lh-normal);
 }
 
 form.validates:invalid .sf-button[type='submit'] {
@@ -114,3 +90,27 @@ form.validates:invalid .sf-button[type='submit'] {
   opacity: var(--sf-disabled);
   -webkit-text-fill-color: hsl(var(--sf-form-c-txt));
 }
+
+/* /// */
+
+html.var .sf-description,
+html.var .sf-invalid,
+html.var .sf-valid {
+  color: hsla(0, 0%, 10%, 0.4);
+
+  font-size: 10px;
+  font-family: Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
+
+html.var label.validates.sf-switch .sf-description,
+html.var label.validates.sf-switch .sf-valid,
+html.var label.validates.sf-switch .sf-invalid,
+html.var label.validates.sf-checkbox .sf-description,
+html.var label.validates.sf-checkbox .sf-valid,
+html.var label.validates.sf-checkbox .sf-invalid
+{ line-height: 1.1875 }
+
+html.var .sf-invalid { color: hsl(0, 100%, 60%) }
+html.var .error:not(:disabled) { border-bottom-color: hsl(0, 100%, 60%) }
+html.var .validates:invalid:required { border-bottom-color: hsl(39, 100%, 50%) }
+html.var .validates:invalid:focus { border-bottom-color: hsl(0, 100%, 60%) }
diff --git a/src/var.css b/src/var.css
index f55cbe1..5b88db0 100644
--- a/src/var.css
+++ b/src/var.css
@@ -1,29 +1,11 @@
 :root {
-  --sf-form-ff: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-
-  --sf-form-fz: 0.95rem;
-  --sf-form-fz-small: 0.75rem;
-
-  --sf-gap: 0.5em;
-
-  --sf-disabled: 0.4;
-
-  --sf-form-radius: 0.5em;
-
-  --sf-form-p-input-block: 0.5em;
-  --sf-form-p-input-inline: 0.5em;
-
-  /* switch */
-  --sf-form-switch-size: 1rem;
-
-  /* global */
   --sf-form-c-white: 0 0% 100%;
   --sf-form-c-info: 200 100% 60%;
   --sf-form-c-error: 0 100% 60%;
   --sf-form-c-success: 0 100% 60%;
   --sf-form-c-warning: 39 100% 50%;
 
-  --sf-form-c-bg: 0 0% 100%;
+  --sf-form-c-bg: 0 0% 90%;
   --sf-form-c-bd: 0 0% 10%;
   --sf-form-c-loading: 0 0% 10%;
   --sf-form-c-txt: 0 0% 10%;
@@ -41,7 +23,7 @@
   --sf-form-dark-c-txt: 0 0% 90%;
 }
 
-:root:where([data-theme='dark'], .dark) {
+html[data-theme='dark'], html.dark {
   color-scheme: dark;
 
   --sf-form-c-white: var(--sf-form-dark-c-white);
@@ -57,7 +39,7 @@
 }
 
 @media (prefers-color-scheme: dark) {
-  :root:where([data-theme='auto'], .auto) {
+  html[data-theme='auto'], html.auto {
     color-scheme: light dark;
 
     --sf-form-c-white: var(--sf-form-dark-c-white);
diff --git a/yarn.lock b/yarn.lock
index 104b92f..cd79660 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,47 +2,47 @@
 # yarn lockfile v1
 
 
-autoprefixer@^10.4.19:
-  version "10.4.19"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.19.tgz#ad25a856e82ee9d7898c59583c1afeb3fa65f89f"
-  integrity sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==
+autoprefixer@^10.4.20:
+  version "10.4.20"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.20.tgz#5caec14d43976ef42e32dcb4bd62878e96be5b3b"
+  integrity sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==
   dependencies:
-    browserslist "^4.23.0"
-    caniuse-lite "^1.0.30001599"
+    browserslist "^4.23.3"
+    caniuse-lite "^1.0.30001646"
     fraction.js "^4.3.7"
     normalize-range "^0.1.2"
-    picocolors "^1.0.0"
+    picocolors "^1.0.1"
     postcss-value-parser "^4.2.0"
 
-browserslist@^4.23.0:
-  version "4.23.1"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.23.1.tgz#ce4af0534b3d37db5c1a4ca98b9080f985041e96"
-  integrity sha512-TUfofFo/KsK/bWZ9TWQ5O26tsWW4Uhmt8IYklbnUa70udB6P2wA7w7o4PY4muaEPBQaAX+CEnmmIA41NVHtPVw==
+browserslist@^4.23.3:
+  version "4.24.3"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.24.3.tgz#5fc2725ca8fb3c1432e13dac278c7cc103e026d2"
+  integrity sha512-1CPmv8iobE2fyRMV97dAcMVegvvWKxmq94hkLiAkUGwKVTyDLw33K+ZxiFrREKmmps4rIw6grcCFCnTMSZ/YiA==
   dependencies:
-    caniuse-lite "^1.0.30001629"
-    electron-to-chromium "^1.4.796"
-    node-releases "^2.0.14"
-    update-browserslist-db "^1.0.16"
+    caniuse-lite "^1.0.30001688"
+    electron-to-chromium "^1.5.73"
+    node-releases "^2.0.19"
+    update-browserslist-db "^1.1.1"
 
-caniuse-lite@^1.0.30001599, caniuse-lite@^1.0.30001629:
-  version "1.0.30001639"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001639.tgz#972b3a6adeacdd8f46af5fc7f771e9639f6c1521"
-  integrity sha512-eFHflNTBIlFwP2AIKaYuBQN/apnUoKNhBdza8ZnW/h2di4LCZ4xFqYlxUxo+LQ76KFI1PGcC1QDxMbxTZpSCAg==
+caniuse-lite@^1.0.30001646, caniuse-lite@^1.0.30001688, caniuse-lite@^1.0.30001690:
+  version "1.0.30001690"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001690.tgz#f2d15e3aaf8e18f76b2b8c1481abde063b8104c8"
+  integrity sha512-5ExiE3qQN6oF8Clf8ifIDcMRCRE/dMGcETG/XGMD8/XiXm6HXQgQTh1yZYLXXpSOsEUlJm1Xr7kGULZTuGtP/w==
 
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
-electron-to-chromium@^1.4.796:
-  version "1.4.816"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.816.tgz#3624649d1e7fde5cdbadf59d31a524245d8ee85f"
-  integrity sha512-EKH5X5oqC6hLmiS7/vYtZHZFTNdhsYG5NVPRN6Yn0kQHNBlT59+xSM8HBy66P5fxWpKgZbPqb+diC64ng295Jw==
+electron-to-chromium@^1.5.73:
+  version "1.5.77"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.77.tgz#b9e7aa2d833084aac5253d36fc85f99d7cf8ce98"
+  integrity sha512-AnJSrt5JpRVgY6dgd5yccguLc5A7oMSF0Kt3fcW+Hp5WTuFbl5upeSFZbMZYy2o7jhmIhU8Ekrd82GhyXUqUUg==
 
-escalade@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.2.tgz#54076e9ab29ea5bf3d8f1ed62acffbb88272df27"
-  integrity sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==
+escalade@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5"
+  integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==
 
 fraction.js@^4.3.7:
   version "4.3.7"
@@ -73,10 +73,10 @@ nanoid@^3.3.7:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
   integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
 
-node-releases@^2.0.14:
-  version "2.0.14"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b"
-  integrity sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==
+node-releases@^2.0.19:
+  version "2.0.19"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.19.tgz#9e445a52950951ec4d177d843af370b411caf314"
+  integrity sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==
 
 normalize-range@^0.1.2:
   version "0.1.2"
@@ -88,21 +88,35 @@ path-parse@^1.0.7:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
-picocolors@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
-  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
-
 picocolors@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1"
   integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
 
+picocolors@^1.1.0, picocolors@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
+
 pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
   integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
 
+postcss-combine-duplicated-selectors@^10.0.3:
+  version "10.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-combine-duplicated-selectors/-/postcss-combine-duplicated-selectors-10.0.3.tgz#71e8b6783e99cd560cf08ba7b896ad0db318c11c"
+  integrity sha512-IP0BmwFloCskv7DV7xqvzDXqMHpwdczJa6ZvIW8abgHdcIHs9mCJX2ltFhu3EwA51ozp13DByng30+Ke+eIExA==
+  dependencies:
+    postcss-selector-parser "^6.0.4"
+
+postcss-discard-comments@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-7.0.3.tgz#9c414e8ee99d3514ad06a3465ccc20ec1dbce780"
+  integrity sha512-q6fjd4WU4afNhWOA2WltHgCbkRhZPgQe7cXF74fuVB/ge4QbM9HEaOIzGSiMvM+g/cOsNAUGdf2JDzqA2F8iLA==
+  dependencies:
+    postcss-selector-parser "^6.1.2"
+
 postcss-import@^16.1.0:
   version "16.1.0"
   resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-16.1.0.tgz#258732175518129667fe1e2e2a05b19b5654b96a"
@@ -128,19 +142,27 @@ postcss-selector-parser@^6.0:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
+postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.1.2:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz#27ecb41fb0e3b6ba7a1ec84fff347f734c7929de"
+  integrity sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
 postcss-value-parser@^4.0.0, postcss-value-parser@^4.1, postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8.4.39:
-  version "8.4.39"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.39.tgz#aa3c94998b61d3a9c259efa51db4b392e1bde0e3"
-  integrity sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==
+postcss@^8.4.49:
+  version "8.4.49"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.49.tgz#4ea479048ab059ab3ae61d082190fabfd994fe19"
+  integrity sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==
   dependencies:
     nanoid "^3.3.7"
-    picocolors "^1.0.1"
-    source-map-js "^1.2.0"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
 
 read-cache@^1.0.0:
   version "1.0.0"
@@ -158,23 +180,23 @@ resolve@^1.1.7:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
-source-map-js@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
-  integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
+source-map-js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
 
 supports-preserve-symlinks-flag@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
-update-browserslist-db@^1.0.16:
-  version "1.0.16"
-  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.16.tgz#f6d489ed90fb2f07d67784eb3f53d7891f736356"
-  integrity sha512-KVbTxlBYlckhF5wgfyZXTWnMn7MMZjMu9XG8bPlliUOP9ThaF4QnhP8qrjrH7DRzHfSk0oQv1wToW+iA5GajEQ==
+update-browserslist-db@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz#80846fba1d79e82547fb661f8d141e0945755fe5"
+  integrity sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==
   dependencies:
-    escalade "^3.1.2"
-    picocolors "^1.0.1"
+    escalade "^3.2.0"
+    picocolors "^1.1.0"
 
 util-deprecate@^1.0.2:
   version "1.0.2"