diff --git a/CHANGELOG.md b/CHANGELOG.md
index 23b0949e..21a63854 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,8 @@
 - [add] `switch--s` for an 18px-tall switch.
 - [breaking] Remove `switch--s-label`. Switches now center on their label.
 - [add] Respect `prefers-reduced-motion: reduce` by making transitions instant.
+- [style change] Toggle groups are restyled as segmented controls. `toggle` is now 24px tall.
+- [add] `toggle--l` (36px).
 - [internal] Assembly utilities are UnoCSS rules in `src/preset/`. Reset and component CSS live in `src/preset/base.css`. The package build is `src/build-*.js`. The documentation site is VitePress under `docs/`.
 - [add] `building`, `clip`, `truck` icons
 
diff --git a/docs/.vitepress/theme/catalog/Toggles.vue b/docs/.vitepress/theme/catalog/Toggles.vue
index 61ad2038..451656da 100644
--- a/docs/.vitepress/theme/catalog/Toggles.vue
+++ b/docs/.vitepress/theme/catalog/Toggles.vue
@@ -9,19 +9,18 @@ const colors = [null].concat(formColors.filter(color => !isLight(color)));
 const lightenColors = formColors.filter(isLight);
 const animals = ['cow', 'horse', 'pig'];
 
-function toggleClass(color, activeColor) {
+function toggleClass(color, activeColor, size) {
   return [
     'toggle',
     color ? `toggle--${color}` : '',
-    activeColor ? `toggle--active-${activeColor}` : ''
+    activeColor ? `toggle--active-${activeColor}` : '',
+    size ? `toggle--${size}` : ''
   ]
     .filter(Boolean)
     .join(' ');
 }
 
-function groupClass(small) {
-  return small ? 'mb12 mr12 toggle-group toggle-group--s txt-s' : 'mb12 mr12 toggle-group';
-}
+const groupClass = 'mb12 mr12 toggle-group';
 
 function groupName(prefix, color, extra) {
   return `${prefix}-${color || 'default'}-${extra || 'on'}`;
@@ -41,7 +40,7 @@ function groupName(prefix, color, extra) {
         <div
           v-for="color in colors"
           :key="`a-${active}-${color}`"
-          :class="groupClass(false)"
+          :class="groupClass"
         >
           <label v-for="(label, index) in animals" :key="label" class="toggle-container">
             <input
@@ -57,7 +56,7 @@ function groupName(prefix, color, extra) {
     </div>
     <div class="mb12 txt-bold color-darken50 txt-uppercase txt-s">Disabled</div>
     <div class="mb24">
-      <div v-for="color in colors" :key="`d-${color}`" :class="groupClass(false)">
+      <div v-for="color in colors" :key="`d-${color}`" :class="groupClass">
         <label v-for="(label, index) in animals" :key="label" class="toggle-container">
           <input
             disabled
@@ -69,10 +68,22 @@ function groupName(prefix, color, extra) {
           <div :class="toggleClass(color)">{{ label }}</div>
         </label>
       </div>
+      <div :class="groupClass">
+        <label v-for="(label, index) in animals" :key="label" class="toggle-container">
+          <input
+            disabled
+            :name="groupName('disabled', 'active', 'blue')"
+            :value="label"
+            :checked="index === 1"
+            type="radio"
+          />
+          <div :class="toggleClass(null, 'blue')">{{ label }}</div>
+        </label>
+      </div>
     </div>
     <div class="mb12 txt-bold color-darken50 txt-uppercase txt-s">Small</div>
     <div class="mb24">
-      <div v-for="color in colors" :key="`s-${color}`" :class="groupClass(true)">
+      <div v-for="color in colors" :key="`s-${color}`" :class="groupClass">
         <label v-for="(label, index) in animals" :key="label" class="toggle-container">
           <input
             :name="groupName('small', color)"
@@ -80,13 +91,27 @@ function groupName(prefix, color, extra) {
             :checked="index === 1"
             type="radio"
           />
-          <div :class="toggleClass(color)">{{ label }}</div>
+          <div :class="toggleClass(color, null, 's')">{{ label }}</div>
+        </label>
+      </div>
+    </div>
+    <div class="mb12 txt-bold color-darken50 txt-uppercase txt-s">Large</div>
+    <div class="mb24">
+      <div v-for="color in colors" :key="`lg-${color}`" :class="groupClass">
+        <label v-for="(label, index) in animals" :key="label" class="toggle-container">
+          <input
+            :name="groupName('large', color)"
+            :value="label"
+            :checked="index === 1"
+            type="radio"
+          />
+          <div :class="toggleClass(color, null, 'l')">{{ label }}</div>
         </label>
       </div>
     </div>
     <div class="mb12 txt-bold color-darken50 txt-uppercase txt-s">Light variations</div>
     <div class="bg-gray round px12 py12 mt12">
-      <div v-for="color in lightenColors" :key="`l-${color}`" :class="groupClass(false)">
+      <div v-for="color in lightenColors" :key="`l-${color}`" :class="groupClass">
         <label v-for="(label, index) in animals" :key="label" class="toggle-container">
           <input
             :name="groupName('light', color)"
@@ -102,7 +127,7 @@ function groupName(prefix, color, extra) {
       Disabled and light
     </div>
     <div class="bg-gray round px12 py12 mt12">
-      <div v-for="color in lightenColors" :key="`ld-${color}`" :class="groupClass(false)">
+      <div v-for="color in lightenColors" :key="`ld-${color}`" :class="groupClass">
         <label v-for="(label, index) in animals" :key="label" class="toggle-container">
           <input
             disabled
diff --git a/docs/documentation/forms.md b/docs/documentation/forms.md
index dd85f357..9346628b 100644
--- a/docs/documentation/forms.md
+++ b/docs/documentation/forms.md
@@ -418,10 +418,10 @@ The toggle group component styles a set of `<input type=radio'>` elements. The m
 .toggle
 ```
 
-Style a toggle group.
+Style a toggle group. Toggles within a group share an equal width, set by the widest toggle.
 Change the inactive toggle text color and the active toggle background color with a `toggle--{color}` modifier (`*-dark` colors are not available).
 Change the active label color with a `toggle--active-{color}` modifier (`*-dark` colors are not available).
-Change the border radiuses of toggle groups inside small text with `toggle-group--s` on the `toggle-container` element.
+Change the group background color by adding a `bg-{color}` class to the `toggle-group` element.
 
 ```example
 <div class='toggle-group mr18'>
@@ -434,16 +434,27 @@ Change the border radiuses of toggle groups inside small text with `toggle-group
     <div class='toggle'>dog</div>
   </label>
 </div>
+<div class='toggle-group bg-blue-faint'>
+  <label class='toggle-container'>
+    <input checked name='toggle-2' type='radio' />
+    <div class='toggle toggle--blue'>cat</div>
+  </label>
+  <label class='toggle-container'>
+    <input name='toggle-2' type='radio' />
+    <div class='toggle toggle--blue'>dog</div>
+  </label>
+</div>
 ```
 
 ```selectors
 .toggle--s
+.toggle--l
 ```
 
-Make a toggle small.
+Change the toggle height. `toggle--s` is 18px tall, the default `toggle` is 24px to match `input--s`, and `toggle--l` is 36px to match `input`.
 
 ```example
-<div class='toggle-group'>
+<div class='toggle-group mr18'>
   <label class='toggle-container'>
     <input checked name='toggle-small' type='radio' />
     <div class='toggle toggle--s'>mouse</div>
@@ -453,6 +464,16 @@ Make a toggle small.
     <div class='toggle toggle--s'>cricket</div>
   </label>
 </div>
+<div class='toggle-group'>
+  <label class='toggle-container'>
+    <input checked name='toggle-large' type='radio' />
+    <div class='toggle toggle--l'>horse</div>
+  </label>
+  <label class='toggle-container'>
+    <input name='toggle-large' type='radio' />
+    <div class='toggle toggle--l'>ox</div>
+  </label>
+</div>
 ```
 
 ```selectors
diff --git a/src/preset/base.css b/src/preset/base.css
index 45dbc8a6..82220b8d 100644
--- a/src/preset/base.css
+++ b/src/preset/base.css
@@ -797,17 +797,15 @@ input:checked + .checkbox {
   translate: 18px;
 }
 input:checked + .toggle {
-  background: var(--gray);
+  background: var(--gray-deep);
   color: var(--white);
 }
 input:disabled + .toggle {
   pointer-events: none;
   color: var(--darken25);
-  border-color: var(--transparent);
 }
 input:checked:disabled + .toggle {
   background-color: var(--disabled25);
-  color: var(--darken25);
 }
 body,
 input,
diff --git a/src/preset/colors.js b/src/preset/colors.js
index 65dff913..28f97034 100644
--- a/src/preset/colors.js
+++ b/src/preset/colors.js
@@ -111,12 +111,30 @@ function colorRules(config) {
       [s => s, { color: `var(--${color})` }],
       [s => `input:checked + ${s}`, { background: `var(--${color})` }]
     ]);
+    if (color === 'white' || color.startsWith('lighten')) {
+      append(`toggle--${color}`, [
+        [
+          s => `.toggle-group:has(${s})`,
+          { 'background-color': 'var(--lighten10)' }
+        ],
+        [s => `input:checked + ${s}`, { color: 'var(--gray-dark)' }],
+        // `.toggle` outranks the checked color above for checked + disabled.
+        [s => `input:disabled + .toggle${s}`, { color: 'var(--lighten25)' }]
+      ]);
+    } else if (color.startsWith('darken')) {
+      append(`toggle--${color}`, [
+        [
+          s => `.toggle-group:has(${s})`,
+          { 'background-color': 'var(--darken5)' }
+        ]
+      ]);
+    }
   });
 
   colorsFor(resolved, 'toggleActive').forEach(color => {
     if (isNotAccessibleForForms(color)) return;
     append(`toggle--active-${color}`, [
-      [s => `input:checked + ${s}`, { color: `var(--${color})` }]
+      [s => `input:checked:enabled + ${s}`, { color: `var(--${color})` }]
     ]);
   });
 
diff --git a/src/preset/utilities.js b/src/preset/utilities.js
index cb797b30..1e6afff9 100644
--- a/src/preset/utilities.js
+++ b/src/preset/utilities.js
@@ -145,18 +145,28 @@ const UTILITY_RULES = [
   ['switch--s', { width: '30px', height: '18px' }],
   [
     'toggle-group',
-    { display: 'inline-flex', 'text-align': 'center', 'border-radius': '18px' }
+    {
+      display: 'inline-grid',
+      'grid-auto-flow': 'column',
+      'grid-auto-columns': '1fr',
+      'background-color': 'var(--gray-faint)',
+      'border-radius': 'var(--border-radius)'
+    }
   ],
-  ['toggle-container', { 'max-width': '100%' }],
   [
     'toggle',
     {
-      'flex-shrink': '0',
+      display: 'flex',
+      'align-items': 'center',
+      'justify-content': 'center',
+      height: '24px',
+      padding: '0 18px',
       cursor: 'pointer',
-      color: 'var(--gray)',
+      color: 'var(--gray-deep)',
       'font-size': 'var(--font-size-s)',
-      padding: '3px 18px',
-      'border-radius': '15px',
+      'line-height': 'var(--line-height-s)',
+      'white-space': 'nowrap',
+      'border-radius': 'var(--border-radius)',
       'background-color': 'var(--transparent)',
       transition:
         'color var(--transition),\n    background-color var(--transition)'
@@ -165,9 +175,19 @@ const UTILITY_RULES = [
   [
     'toggle--s',
     {
+      height: '18px',
+      padding: '0 12px',
       'font-size': 'var(--font-size-xs)',
-      'line-height': 'var(--line-height-s)',
-      padding: '0 12px'
+      'line-height': 'var(--line-height-xs)'
+    }
+  ],
+  [
+    'toggle--l',
+    {
+      height: '36px',
+      padding: '0 24px',
+      'font-size': 'var(--font-size-m)',
+      'line-height': 'var(--line-height-m)'
     }
   ],
   ['txt-mono', { 'font-family': 'var(--font-stack-mono)', 'font-size': '90%' }],
diff --git a/test/__snapshots__/build-css.jest.js.snap b/test/__snapshots__/build-css.jest.js.snap
index e260f972..e876d0c1 100644
--- a/test/__snapshots__/build-css.jest.js.snap
+++ b/test/__snapshots__/build-css.jest.js.snap
@@ -788,17 +788,15 @@ input:checked + .checkbox{
   translate:18px;
 }
 input:checked + .toggle{
-  background:#757D82;
+  background:#4D5255;
   color:#fff;
 }
 input:disabled + .toggle{
   pointer-events:none;
   color:rgba(26, 34, 36, 0.25);
-  border-color:transparent;
 }
 input:checked:disabled + .toggle{
   background-color:rgba(158, 163, 167, 0.25);
-  color:rgba(26, 34, 36, 0.25);
 }
 body,
 input,
@@ -1176,10 +1174,10 @@ textarea{
 .switch{cursor:pointer;flex-shrink:0;position:relative;width:36px;height:24px;border-radius:9999px;background-color:#C7CACC;transition:background-color 0.125s;}
 .switch--l{width:54px;height:36px;}
 .switch--s{width:30px;height:18px;}
-.toggle-group{display:inline-flex;text-align:center;border-radius:18px;}
-.toggle-container{max-width:100%;}
-.toggle{flex-shrink:0;cursor:pointer;color:#757D82;font-size:12px;padding:3px 18px;border-radius:15px;background-color:transparent;transition:color 0.125s, background-color 0.125s;}
-.toggle--s{font-size:10px;line-height:18px;padding:0 12px;}
+.toggle-group{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;background-color:#F7F8F8;border-radius:4px;}
+.toggle{display:flex;align-items:center;justify-content:center;height:24px;padding:0 18px;cursor:pointer;color:#4D5255;font-size:12px;line-height:18px;white-space:nowrap;border-radius:4px;background-color:transparent;transition:color 0.125s, background-color 0.125s;}
+.toggle--s{height:18px;padding:0 12px;font-size:10px;line-height:15px;}
+.toggle--l{height:36px;padding:0 24px;font-size:16px;line-height:24px;}
 .txt-mono{font-family:'Menlo', 'Bitstream Vera Sans Mono', 'Monaco', 'Consolas', monospace;font-size:90%;}
 .txt-bold{font-weight:bold !important;}
 .txt-h1{font-size:36px;line-height:45px;}
@@ -3465,7 +3463,7 @@ input:checked + .checkbox--gray{background-color:#757D82;}
 .radio--gray, input:checked + .radio--gray,
 .select--gray,
 .toggle--gray,
-input:checked + .toggle--active-gray{color:#757D82;}
+input:checked:enabled + .toggle--active-gray{color:#757D82;}
 .btn--stroke.btn--gray:hover, .btn--stroke.btn--gray.is-active,
 .link--gray:hover, .link--gray.is-active,
 .select--gray:focus,
@@ -3482,7 +3480,7 @@ input:checked + .checkbox--pink{background-color:#FA428F;}
 .radio--pink, input:checked + .radio--pink,
 .select--pink,
 .toggle--pink,
-input:checked + .toggle--active-pink{color:#FA428F;}
+input:checked:enabled + .toggle--active-pink{color:#FA428F;}
 .btn--stroke.btn--pink:hover, .btn--stroke.btn--pink.is-active,
 .link--pink:hover, .link--pink.is-active,
 .select--pink:focus,
@@ -3499,7 +3497,7 @@ input:checked + .checkbox--red{background-color:#EB3814;}
 .radio--red, input:checked + .radio--red,
 .select--red,
 .toggle--red,
-input:checked + .toggle--active-red{color:#EB3814;}
+input:checked:enabled + .toggle--active-red{color:#EB3814;}
 .btn--stroke.btn--red:hover, .btn--stroke.btn--red.is-active,
 .link--red:hover, .link--red.is-active,
 .select--red:focus,
@@ -3516,7 +3514,7 @@ input:checked + .checkbox--orange{background-color:#E46707;}
 .radio--orange, input:checked + .radio--orange,
 .select--orange,
 .toggle--orange,
-input:checked + .toggle--active-orange{color:#E46707;}
+input:checked:enabled + .toggle--active-orange{color:#E46707;}
 .btn--stroke.btn--orange:hover, .btn--stroke.btn--orange.is-active,
 .link--orange:hover, .link--orange.is-active,
 .select--orange:focus,
@@ -3527,7 +3525,7 @@ input:checked + .toggle--active-orange{color:#E46707;}
 .radio--yellow, input:checked + .radio--yellow,
 .select--yellow,
 .toggle--yellow,
-input:checked + .toggle--active-yellow{color:#F3E444;}
+input:checked:enabled + .toggle--active-yellow{color:#F3E444;}
 .btn--stroke.btn--yellow:hover, .btn--stroke.btn--yellow.is-active,
 .link--yellow:hover, .link--yellow.is-active,
 .select--yellow:focus,
@@ -3550,7 +3548,7 @@ input:checked + .checkbox--green{background-color:#2AA75C;}
 .radio--green, input:checked + .radio--green,
 .select--green,
 .toggle--green,
-input:checked + .toggle--active-green{color:#2AA75C;}
+input:checked:enabled + .toggle--active-green{color:#2AA75C;}
 .btn--stroke.btn--green:hover, .btn--stroke.btn--green.is-active,
 .link--green:hover, .link--green.is-active,
 .select--green:focus,
@@ -3567,7 +3565,7 @@ input:checked + .checkbox--blue{background-color:#3887BE;}
 .radio--blue, input:checked + .radio--blue,
 .select--blue,
 .toggle--blue,
-input:checked + .toggle--active-blue{color:#3887BE;}
+input:checked:enabled + .toggle--active-blue{color:#3887BE;}
 .btn--stroke.btn--blue:hover, .btn--stroke.btn--blue.is-active,
 .link--blue:hover, .link--blue.is-active,
 .select--blue:focus,
@@ -3584,7 +3582,7 @@ input:checked + .checkbox--purple{background-color:#9669D5;}
 .radio--purple, input:checked + .radio--purple,
 .select--purple,
 .toggle--purple,
-input:checked + .toggle--active-purple{color:#9669D5;}
+input:checked:enabled + .toggle--active-purple{color:#9669D5;}
 .btn--stroke.btn--purple:hover, .btn--stroke.btn--purple.is-active,
 .link--purple:hover, .link--purple.is-active,
 .select--purple:focus,
@@ -3607,7 +3605,7 @@ input:checked + .checkbox--darken50{background-color:rgba(26, 34, 36, 0.5);}
 .radio--darken25, input:checked + .radio--darken25,
 .select--darken25,
 .toggle--darken25,
-input:checked + .toggle--active-darken25{color:rgba(26, 34, 36, 0.25);}
+input:checked:enabled + .toggle--active-darken25{color:rgba(26, 34, 36, 0.25);}
 .btn--stroke.btn--darken25:hover, .btn--stroke.btn--darken25.is-active,
 .btn--stroke.btn--darken50,
 .link--darken25:hover, .link--darken25.is-active,
@@ -3617,7 +3615,7 @@ input:checked + .toggle--active-darken25{color:rgba(26, 34, 36, 0.25);}
 .select--darken25:hover,
 .select--darken50,
 .toggle--darken50,
-input:checked + .toggle--active-darken50{color:rgba(26, 34, 36, 0.5);}
+input:checked:enabled + .toggle--active-darken50{color:rgba(26, 34, 36, 0.5);}
 .btn--darken50:hover, .btn--darken50.is-active,
 .btn--darken75,
 .switch-container:has(> input:checked) .switch--darken75,
@@ -3632,13 +3630,17 @@ input:checked + .checkbox--darken75{background-color:rgba(26, 34, 36, 0.75);}
 .select--darken50:hover,
 .select--darken75,
 .toggle--darken75,
-input:checked + .toggle--active-darken75{color:rgba(26, 34, 36, 0.75);}
+input:checked:enabled + .toggle--active-darken75{color:rgba(26, 34, 36, 0.75);}
 .btn--darken75:hover, .btn--darken75.is-active{background-color:#000;}
 .btn--stroke.btn--darken75:hover, .btn--stroke.btn--darken75.is-active,
 .link--darken75:hover, .link--darken75.is-active,
 .select--darken75:focus,
 .select--darken75:hover{color:#000;}
-.btn--lighten10{background-color:rgba(255, 255, 255, 0.1);}
+.btn--lighten10,
+.toggle-group:has(.toggle--lighten25),
+.toggle-group:has(.toggle--lighten50),
+.toggle-group:has(.toggle--lighten75),
+.toggle-group:has(.toggle--white){background-color:rgba(255, 255, 255, 0.1);}
 .btn--lighten10:hover, .btn--lighten10.is-active,
 .btn--lighten25,
 .switch-container:has(> input:checked) .switch--dot-lighten25::after,
@@ -3654,7 +3656,11 @@ input:checked + .checkbox--lighten50{background-color:rgba(255, 255, 255, 0.5);}
 .radio--lighten25, input:checked + .radio--lighten25,
 .select--lighten25,
 .toggle--lighten25,
-input:checked + .toggle--active-lighten25{color:rgba(255, 255, 255, 0.25);}
+input:checked:enabled + .toggle--active-lighten25,
+input:disabled + .toggle.toggle--lighten25,
+input:disabled + .toggle.toggle--lighten50,
+input:disabled + .toggle.toggle--lighten75,
+input:disabled + .toggle.toggle--white{color:rgba(255, 255, 255, 0.25);}
 .btn--stroke.btn--lighten25:hover, .btn--stroke.btn--lighten25.is-active,
 .btn--stroke.btn--lighten50,
 .link--lighten25:hover, .link--lighten25.is-active,
@@ -3664,7 +3670,7 @@ input:checked + .toggle--active-lighten25{color:rgba(255, 255, 255, 0.25);}
 .select--lighten25:hover,
 .select--lighten50,
 .toggle--lighten50,
-input:checked + .toggle--active-lighten50{color:rgba(255, 255, 255, 0.5);}
+input:checked:enabled + .toggle--active-lighten50{color:rgba(255, 255, 255, 0.5);}
 .btn--lighten50:hover, .btn--lighten50.is-active,
 .btn--lighten75,
 .btn--white:hover, .btn--white.is-active,
@@ -3684,7 +3690,7 @@ input:checked + .checkbox--lighten75{background-color:rgba(255, 255, 255, 0.75);
 .select--white:focus,
 .select--white:hover,
 .toggle--lighten75,
-input:checked + .toggle--active-lighten75{color:rgba(255, 255, 255, 0.75);}
+input:checked:enabled + .toggle--active-lighten75{color:rgba(255, 255, 255, 0.75);}
 .btn--lighten75:hover, .btn--lighten75.is-active,
 .btn--white,
 .switch-container:has(> input:checked) .switch--dot-white::after,
@@ -3699,13 +3705,13 @@ input:checked + .checkbox--white{background-color:#fff;}
 .select--lighten75:hover,
 .select--white,
 .toggle--white,
-input:checked + .toggle--active-white{color:#fff;}
+input:checked:enabled + .toggle--active-white{color:#fff;}
 .btn--stroke.btn--transparent,
 .link--transparent,
 .radio--transparent, input:checked + .radio--transparent,
 .select--transparent,
 .toggle--transparent,
-input:checked + .toggle--active-transparent{color:transparent;}
+input:checked:enabled + .toggle--active-transparent{color:transparent;}
 .btn--stroke.btn--transparent:hover, .btn--stroke.btn--transparent.is-active,
 .link--transparent:hover, .link--transparent.is-active,
 .select--transparent:focus,
@@ -3866,10 +3872,17 @@ input:checked + .toggle--yellow{background:#F3E444;}
 input:checked + .toggle--green{background:#2AA75C;}
 input:checked + .toggle--blue{background:#3887BE;}
 input:checked + .toggle--purple{background:#9669D5;}
+.toggle-group:has(.toggle--darken25),
+.toggle-group:has(.toggle--darken50),
+.toggle-group:has(.toggle--darken75){background-color:rgba(26, 34, 36, 0.05);}
 input:checked + .toggle--darken25{background:rgba(26, 34, 36, 0.25);}
 input:checked + .toggle--darken50{background:rgba(26, 34, 36, 0.5);}
 input:checked + .toggle--darken75{background:rgba(26, 34, 36, 0.75);}
 input:checked + .toggle--lighten25{background:rgba(255, 255, 255, 0.25);}
+input:checked + .toggle--lighten25,
+input:checked + .toggle--lighten50,
+input:checked + .toggle--lighten75,
+input:checked + .toggle--white{color:#1a2224;}
 input:checked + .toggle--lighten50{background:rgba(255, 255, 255, 0.5);}
 input:checked + .toggle--lighten75{background:rgba(255, 255, 255, 0.75);}
 input:checked + .toggle--white{background:#fff;}
@@ -5263,17 +5276,15 @@ input:checked + .checkbox{
   translate:18px;
 }
 input:checked + .toggle{
-  background:#757D82;
+  background:#4D5255;
   color:#fff;
 }
 input:disabled + .toggle{
   pointer-events:none;
   color:rgba(26, 34, 36, 0.25);
-  border-color:transparent;
 }
 input:checked:disabled + .toggle{
   background-color:rgba(158, 163, 167, 0.25);
-  color:rgba(26, 34, 36, 0.25);
 }
 body,
 input,
@@ -5651,10 +5662,10 @@ textarea{
 .switch{cursor:pointer;flex-shrink:0;position:relative;width:36px;height:24px;border-radius:9999px;background-color:#C7CACC;transition:background-color 0.125s;}
 .switch--l{width:54px;height:36px;}
 .switch--s{width:30px;height:18px;}
-.toggle-group{display:inline-flex;text-align:center;border-radius:18px;}
-.toggle-container{max-width:100%;}
-.toggle{flex-shrink:0;cursor:pointer;color:#757D82;font-size:12px;padding:3px 18px;border-radius:15px;background-color:transparent;transition:color 0.125s, background-color 0.125s;}
-.toggle--s{font-size:10px;line-height:18px;padding:0 12px;}
+.toggle-group{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;background-color:#F7F8F8;border-radius:4px;}
+.toggle{display:flex;align-items:center;justify-content:center;height:24px;padding:0 18px;cursor:pointer;color:#4D5255;font-size:12px;line-height:18px;white-space:nowrap;border-radius:4px;background-color:transparent;transition:color 0.125s, background-color 0.125s;}
+.toggle--s{height:18px;padding:0 12px;font-size:10px;line-height:15px;}
+.toggle--l{height:36px;padding:0 24px;font-size:16px;line-height:24px;}
 .txt-mono{font-family:'Menlo', 'Bitstream Vera Sans Mono', 'Monaco', 'Consolas', monospace;font-size:90%;}
 .txt-bold{font-weight:bold !important;}
 .txt-h1{font-size:36px;line-height:45px;}
@@ -7941,7 +7952,7 @@ input:checked + .checkbox--gray{background-color:#757D82;}
 .range--gray > input,
 .select--gray,
 .toggle--gray,
-input:checked + .toggle--active-gray{color:#757D82;}
+input:checked:enabled + .toggle--active-gray{color:#757D82;}
 .btn--stroke.btn--gray:hover, .btn--stroke.btn--gray.is-active,
 .link--gray:hover, .link--gray.is-active,
 .select--gray:focus,
@@ -7959,7 +7970,7 @@ input:checked + .checkbox--pink{background-color:#FA428F;}
 .range--pink > input,
 .select--pink,
 .toggle--pink,
-input:checked + .toggle--active-pink{color:#FA428F;}
+input:checked:enabled + .toggle--active-pink{color:#FA428F;}
 .btn--stroke.btn--pink:hover, .btn--stroke.btn--pink.is-active,
 .link--pink:hover, .link--pink.is-active,
 .select--pink:focus,
@@ -7977,7 +7988,7 @@ input:checked + .checkbox--red{background-color:#EB3814;}
 .range--red > input,
 .select--red,
 .toggle--red,
-input:checked + .toggle--active-red{color:#EB3814;}
+input:checked:enabled + .toggle--active-red{color:#EB3814;}
 .btn--stroke.btn--red:hover, .btn--stroke.btn--red.is-active,
 .link--red:hover, .link--red.is-active,
 .select--red:focus,
@@ -7995,7 +8006,7 @@ input:checked + .checkbox--orange{background-color:#E46707;}
 .range--orange > input,
 .select--orange,
 .toggle--orange,
-input:checked + .toggle--active-orange{color:#E46707;}
+input:checked:enabled + .toggle--active-orange{color:#E46707;}
 .btn--stroke.btn--orange:hover, .btn--stroke.btn--orange.is-active,
 .link--orange:hover, .link--orange.is-active,
 .select--orange:focus,
@@ -8007,7 +8018,7 @@ input:checked + .toggle--active-orange{color:#E46707;}
 .range--yellow > input,
 .select--yellow,
 .toggle--yellow,
-input:checked + .toggle--active-yellow{color:#F3E444;}
+input:checked:enabled + .toggle--active-yellow{color:#F3E444;}
 .btn--stroke.btn--yellow:hover, .btn--stroke.btn--yellow.is-active,
 .link--yellow:hover, .link--yellow.is-active,
 .select--yellow:focus,
@@ -8031,7 +8042,7 @@ input:checked + .checkbox--green{background-color:#2AA75C;}
 .range--green > input,
 .select--green,
 .toggle--green,
-input:checked + .toggle--active-green{color:#2AA75C;}
+input:checked:enabled + .toggle--active-green{color:#2AA75C;}
 .btn--stroke.btn--green:hover, .btn--stroke.btn--green.is-active,
 .link--green:hover, .link--green.is-active,
 .select--green:focus,
@@ -8049,7 +8060,7 @@ input:checked + .checkbox--blue{background-color:#0F71FA;}
 .range--blue > input,
 .select--blue,
 .toggle--blue,
-input:checked + .toggle--active-blue{color:#0F71FA;}
+input:checked:enabled + .toggle--active-blue{color:#0F71FA;}
 .btn--stroke.btn--blue:hover, .btn--stroke.btn--blue.is-active,
 .link--blue:hover, .link--blue.is-active,
 .select--blue:focus,
@@ -8067,7 +8078,7 @@ input:checked + .checkbox--purple{background-color:#9669D5;}
 .range--purple > input,
 .select--purple,
 .toggle--purple,
-input:checked + .toggle--active-purple{color:#9669D5;}
+input:checked:enabled + .toggle--active-purple{color:#9669D5;}
 .btn--stroke.btn--purple:hover, .btn--stroke.btn--purple.is-active,
 .link--purple:hover, .link--purple.is-active,
 .select--purple:focus,
@@ -8091,7 +8102,7 @@ input:checked + .checkbox--darken50{background-color:rgba(26, 34, 36, 0.5);}
 .range--darken25 > input,
 .select--darken25,
 .toggle--darken25,
-input:checked + .toggle--active-darken25{color:rgba(26, 34, 36, 0.25);}
+input:checked:enabled + .toggle--active-darken25{color:rgba(26, 34, 36, 0.25);}
 .btn--stroke.btn--darken25:hover, .btn--stroke.btn--darken25.is-active,
 .btn--stroke.btn--darken50,
 .link--darken25:hover, .link--darken25.is-active,
@@ -8102,7 +8113,7 @@ input:checked + .toggle--active-darken25{color:rgba(26, 34, 36, 0.25);}
 .select--darken25:hover,
 .select--darken50,
 .toggle--darken50,
-input:checked + .toggle--active-darken50{color:rgba(26, 34, 36, 0.5);}
+input:checked:enabled + .toggle--active-darken50{color:rgba(26, 34, 36, 0.5);}
 .btn--darken50:hover, .btn--darken50.is-active,
 .btn--darken75,
 .switch-container:has(> input:checked) .switch--darken75,
@@ -8118,13 +8129,17 @@ input:checked + .checkbox--darken75{background-color:rgba(26, 34, 36, 0.75);}
 .select--darken50:hover,
 .select--darken75,
 .toggle--darken75,
-input:checked + .toggle--active-darken75{color:rgba(26, 34, 36, 0.75);}
+input:checked:enabled + .toggle--active-darken75{color:rgba(26, 34, 36, 0.75);}
 .btn--darken75:hover, .btn--darken75.is-active{background-color:#000;}
 .btn--stroke.btn--darken75:hover, .btn--stroke.btn--darken75.is-active,
 .link--darken75:hover, .link--darken75.is-active,
 .select--darken75:focus,
 .select--darken75:hover{color:#000;}
-.btn--lighten10{background-color:rgba(255, 255, 255, 0.1);}
+.btn--lighten10,
+.toggle-group:has(.toggle--lighten25),
+.toggle-group:has(.toggle--lighten50),
+.toggle-group:has(.toggle--lighten75),
+.toggle-group:has(.toggle--white){background-color:rgba(255, 255, 255, 0.1);}
 .btn--lighten10:hover, .btn--lighten10.is-active,
 .btn--lighten25,
 .switch-container:has(> input:checked) .switch--dot-lighten25::after,
@@ -8141,7 +8156,11 @@ input:checked + .checkbox--lighten50{background-color:rgba(255, 255, 255, 0.5);}
 .range--lighten25 > input,
 .select--lighten25,
 .toggle--lighten25,
-input:checked + .toggle--active-lighten25{color:rgba(255, 255, 255, 0.25);}
+input:checked:enabled + .toggle--active-lighten25,
+input:disabled + .toggle.toggle--lighten25,
+input:disabled + .toggle.toggle--lighten50,
+input:disabled + .toggle.toggle--lighten75,
+input:disabled + .toggle.toggle--white{color:rgba(255, 255, 255, 0.25);}
 .btn--stroke.btn--lighten25:hover, .btn--stroke.btn--lighten25.is-active,
 .btn--stroke.btn--lighten50,
 .link--lighten25:hover, .link--lighten25.is-active,
@@ -8152,7 +8171,7 @@ input:checked + .toggle--active-lighten25{color:rgba(255, 255, 255, 0.25);}
 .select--lighten25:hover,
 .select--lighten50,
 .toggle--lighten50,
-input:checked + .toggle--active-lighten50{color:rgba(255, 255, 255, 0.5);}
+input:checked:enabled + .toggle--active-lighten50{color:rgba(255, 255, 255, 0.5);}
 .btn--lighten50:hover, .btn--lighten50.is-active,
 .btn--lighten75,
 .btn--white:hover, .btn--white.is-active,
@@ -8173,7 +8192,7 @@ input:checked + .checkbox--lighten75{background-color:rgba(255, 255, 255, 0.75);
 .select--white:focus,
 .select--white:hover,
 .toggle--lighten75,
-input:checked + .toggle--active-lighten75{color:rgba(255, 255, 255, 0.75);}
+input:checked:enabled + .toggle--active-lighten75{color:rgba(255, 255, 255, 0.75);}
 .btn--lighten75:hover, .btn--lighten75.is-active,
 .btn--white,
 .switch-container:has(> input:checked) .switch--dot-white::after,
@@ -8189,14 +8208,14 @@ input:checked + .checkbox--white{background-color:#fff;}
 .select--lighten75:hover,
 .select--white,
 .toggle--white,
-input:checked + .toggle--active-white{color:#fff;}
+input:checked:enabled + .toggle--active-white{color:#fff;}
 .btn--stroke.btn--transparent,
 .link--transparent,
 .radio--transparent, input:checked + .radio--transparent,
 .range--transparent > input,
 .select--transparent,
 .toggle--transparent,
-input:checked + .toggle--active-transparent{color:transparent;}
+input:checked:enabled + .toggle--active-transparent{color:transparent;}
 .btn--stroke.btn--transparent:hover, .btn--stroke.btn--transparent.is-active,
 .link--transparent:hover, .link--transparent.is-active,
 .select--transparent:focus,
@@ -8357,10 +8376,17 @@ input:checked + .toggle--yellow{background:#F3E444;}
 input:checked + .toggle--green{background:#2AA75C;}
 input:checked + .toggle--blue{background:#0F71FA;}
 input:checked + .toggle--purple{background:#9669D5;}
+.toggle-group:has(.toggle--darken25),
+.toggle-group:has(.toggle--darken50),
+.toggle-group:has(.toggle--darken75){background-color:rgba(26, 34, 36, 0.05);}
 input:checked + .toggle--darken25{background:rgba(26, 34, 36, 0.25);}
 input:checked + .toggle--darken50{background:rgba(26, 34, 36, 0.5);}
 input:checked + .toggle--darken75{background:rgba(26, 34, 36, 0.75);}
 input:checked + .toggle--lighten25{background:rgba(255, 255, 255, 0.25);}
+input:checked + .toggle--lighten25,
+input:checked + .toggle--lighten50,
+input:checked + .toggle--lighten75,
+input:checked + .toggle--white{color:#1a2224;}
 input:checked + .toggle--lighten50{background:rgba(255, 255, 255, 0.5);}
 input:checked + .toggle--lighten75{background:rgba(255, 255, 255, 0.75);}
 input:checked + .toggle--white{background:#fff;}