@cirthcss/cirth 0.11.0 → 0.13.0

package/dist/cirth.classless.scoped.css

@@ -225,7 +225,7 @@
 }
 
 .cirth button, .cirth [type="submit"], .cirth [type="reset"], .cirth [type="button"] {
-  -webkit-appearance: button;
+  appearance: auto;
 }
 
 .cirth button, .cirth [type="submit"], .cirth [type="reset"], .cirth [type="button"], .cirth [role="button"] {
@@ -234,6 +234,7 @@
   --cirth-color: var(--cirth-primary-inverse);
   --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
   max-width: 100%;
+  min-block-size: calc(var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
   padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
   border: var(--cirth-border-width) solid var(--cirth-border-color);
   border-radius: var(--cirth-border-radius);
@@ -258,6 +259,7 @@
   --cirth-color: var(--cirth-primary-inverse);
   --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
   max-width: 100%;
+  min-block-size: calc(var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
   padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
   border: var(--cirth-border-width) solid var(--cirth-border-color);
   border-radius: var(--cirth-border-radius);
@@ -511,7 +513,7 @@
 }
 
 .cirth [type="search"] {
-  -webkit-appearance: textfield;
+  appearance: textfield;
   outline-offset: -2px;
 }
 
@@ -520,7 +522,7 @@
 }
 
 .cirth ::file-selector-button {
-  -webkit-appearance: button;
+  appearance: auto;
   font: inherit;
 }
 
@@ -534,7 +536,11 @@
 }
 
 .cirth input:not([type="checkbox"], [type="radio"], [type="range"]) {
-  height: calc(var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
+  height: calc(var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
+}
+
+.cirth select, .cirth textarea {
+  min-block-size: calc(var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
 }
 
 .cirth fieldset {
@@ -588,6 +594,12 @@
   --cirth-border-color: var(--cirth-form-element-active-border-color);
 }
 
+.cirth input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="file"], [readonly]):hover:not(:active, :focus, [disabled], [aria-invalid]), .cirth :where(select, textarea):not([readonly]):hover:not(:active, :focus, [disabled], [aria-invalid]) {
+  --cirth-border-color: color-mix(in oklch,
+    var(--cirth-form-element-border-color) 65%,
+    var(--cirth-color));
+}
+
 .cirth input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus, .cirth :where(select, textarea):not([readonly]):focus {
   --cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
     var(--cirth-form-element-focus-color);
@@ -606,7 +618,7 @@
 .cirth :where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"]):is([aria-invalid], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)) {
   padding-inline: var(--cirth-form-element-spacing-horizontal) calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
   background-position: center right var(--cirth-space-3);
-  background-size: var(--cirth-size-4) auto;
+  background-size: var(--cirth-font-size-md) auto;
   background-repeat: no-repeat;
 }
 
@@ -665,7 +677,7 @@
   padding-inline: var(--cirth-form-element-spacing-horizontal) calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
   background-image: var(--cirth-icon-chevron);
   background-position: center right var(--cirth-space-3);
-  background-size: var(--cirth-size-4) auto;
+  background-size: var(--cirth-font-size-md) auto;
   background-repeat: no-repeat;
 }
 
@@ -683,12 +695,16 @@
   display: block;
 }
 
+.cirth textarea:not([rows]) {
+  min-block-size: calc(4lh + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
+}
+
 .cirth textarea:is([aria-invalid], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)) {
-  --cirth-icon-height: calc(var(--cirth-size-4) * var(--cirth-line-height) +
+  --cirth-icon-height: calc(var(--cirth-font-size-md) * var(--cirth-line-height) +
       var(--cirth-form-element-spacing-vertical) * 2 +
       var(--cirth-border-width) * 2);
   background-position: top right var(--cirth-space-3);
-  background-size: var(--cirth-size-4) var(--cirth-icon-height);
+  background-size: var(--cirth-font-size-md) var(--cirth-icon-height);
 }
 
 .cirth :where(input, select, textarea, fieldset) + small {
@@ -730,10 +746,6 @@
 .cirth [type="checkbox"]:checked, .cirth [type="checkbox"]:checked:active, .cirth [type="checkbox"]:checked:focus, .cirth [type="radio"]:checked, .cirth [type="radio"]:checked:active, .cirth [type="radio"]:checked:focus {
   --cirth-background-color: var(--cirth-primary-background);
   --cirth-border-color: var(--cirth-primary-border);
-  background-image: var(--cirth-icon-checkbox);
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: .9em;
 }
 
 .cirth [type="checkbox"] ~ label, .cirth [type="radio"] ~ label {
@@ -746,13 +758,34 @@
   margin-inline-end: 1em;
 }
 
-.cirth [type="checkbox"]:indeterminate {
+.cirth [type="checkbox"]:not([role="switch"]):checked:before, .cirth [type="checkbox"]:not([role="switch"]):indeterminate:before {
+  background-color: var(--cirth-primary-inverse);
+  content: "";
+  width: 100%;
+  height: 100%;
+  display: block;
+  mask-position: center;
+  mask-size: .9em;
+  mask-repeat: no-repeat;
+}
+
+@media (forced-colors: active) {
+  .cirth [type="checkbox"]:not([role="switch"]):checked:before, .cirth [type="checkbox"]:not([role="switch"]):indeterminate:before {
+    background-color: canvastext;
+  }
+}
+
+.cirth [type="checkbox"]:not([role="switch"]):checked:before {
+  mask-image: var(--cirth-icon-checkbox);
+}
+
+.cirth [type="checkbox"]:not([role="switch"]):indeterminate {
   --cirth-background-color: var(--cirth-primary-background);
   --cirth-border-color: var(--cirth-primary-border);
-  background-image: var(--cirth-icon-minus);
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: .9em;
+}
+
+.cirth [type="checkbox"]:not([role="switch"]):indeterminate:before {
+  mask-image: var(--cirth-icon-minus);
 }
 
 .cirth [type="radio"] {
@@ -761,7 +794,6 @@
 
 .cirth [type="radio"]:checked, .cirth [type="radio"]:checked:active, .cirth [type="radio"]:checked:focus {
   --cirth-background-color: var(--cirth-primary-inverse);
-  background-image: none;
   border-width: .42em;
 }
 
@@ -799,7 +831,6 @@
 .cirth [type="checkbox"][role="switch"]:checked {
   --cirth-background-color: var(--cirth-switch-checked-background-color);
   --cirth-border-color: var(--cirth-switch-checked-background-color);
-  background-image: none;
 }
 
 .cirth [type="checkbox"][role="switch"]:checked:before {
@@ -846,7 +877,7 @@
 
 .cirth input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
   --cirth-icon-position: var(--cirth-space-3);
-  --cirth-icon-width: var(--cirth-size-4);
+  --cirth-icon-width: var(--cirth-font-size-md);
   min-width: 0;
   background-image: var(--cirth-icon-date);
   background-position: center right var(--cirth-icon-position);
@@ -920,6 +951,7 @@
 }
 
 .cirth [type="file"]::file-selector-button {
+  min-block-size: 0;
   padding: calc(var(--cirth-form-element-spacing-vertical) * .5) var(--cirth-form-element-spacing-horizontal);
   margin-inline-end: calc(var(--cirth-spacing) / 2);
 }
@@ -1028,7 +1060,7 @@
 }
 
 .cirth details summary {
-  line-height: var(--cirth-size-4);
+  line-height: var(--cirth-font-size-md);
   cursor: pointer;
   transition: color var(--cirth-transition);
   list-style-type: none;
@@ -1047,18 +1079,28 @@
 }
 
 .cirth details summary:after {
-  width: var(--cirth-size-4);
-  height: var(--cirth-size-4);
+  width: var(--cirth-font-size-md);
+  height: var(--cirth-font-size-md);
   float: right;
-  background-image: var(--cirth-icon-chevron);
-  background-position: 100%;
-  background-size: var(--cirth-size-4) auto;
-  content: "";
-  transition: transform var(--cirth-transition);
-  background-repeat: no-repeat;
+  background-color: var(--cirth-muted-color);
+  mask-image: var(--cirth-icon-chevron);
+  mask-position: 100%;
+  mask-size: var(--cirth-font-size-md) auto;
   margin-inline-start: calc(var(--cirth-spacing, var(--cirth-space-4)) * .5);
   display: block;
   transform: rotate(-90deg);
+  mask-repeat: no-repeat;
+}
+
+@media (forced-colors: active) {
+  .cirth details summary:after {
+    background-color: canvastext;
+  }
+}
+
+.cirth details summary:after {
+  content: "";
+  transition: transform var(--cirth-transition);
 }
 
 .cirth details summary:focus {
@@ -1081,7 +1123,7 @@
 }
 
 .cirth details summary[role="button"]:after {
-  height: calc(var(--cirth-size-4) * var(--cirth-line-height, var(--cirth-line-height-normal)));
+  height: calc(var(--cirth-font-size-md) * var(--cirth-line-height, var(--cirth-line-height-normal)));
 }
 
 .cirth details[open] > summary {
@@ -1179,12 +1221,7 @@
   z-index: 2;
 }
 
-.cirth [role="search"] > :has( + small:last-child) {
-  border-start-end-radius: var(--cirth-border-radius);
-  border-end-end-radius: var(--cirth-border-radius);
-}
-
-.cirth [role="group"]:not(fieldset) > :has( + small:last-child) {
+.cirth [role="search"] > :has( + small:last-child), .cirth [role="group"]:not(fieldset) > :has( + small:last-child) {
   border-start-end-radius: var(--cirth-border-radius);
   border-end-end-radius: var(--cirth-border-radius);
 }
@@ -1197,98 +1234,27 @@
   width: auto;
 }
 
-@supports selector(:has(*)) {
-  .cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
-    --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-button);
-  }
-
-  .cirth [role="group"]:not(fieldset):has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
-    --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-button);
-  }
-
-  .cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"], [aria-invalid]) {
-    border-color: #0000;
-  }
-
-  .cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select:not([aria-invalid]) {
-    border-color: #0000;
-  }
-
-  .cirth [role="group"]:not(fieldset):has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"], [aria-invalid]) {
-    border-color: #0000;
-  }
-
-  .cirth [role="group"]:not(fieldset):has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select:not([aria-invalid]) {
-    border-color: #0000;
-  }
-
-  .cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
-    --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-input);
-  }
-
-  .cirth [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) {
-    --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-input);
-  }
-
-  .cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button {
-    --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
-      var(--cirth-primary-border);
-    --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
-      var(--cirth-primary-hover-border);
-  }
-
-  .cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"] {
-    --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
-      var(--cirth-primary-border);
-    --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
-      var(--cirth-primary-hover-border);
-  }
-
-  .cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"] {
-    --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
-      var(--cirth-primary-border);
-    --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
-      var(--cirth-primary-hover-border);
-  }
-
-  .cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] {
-    --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
-      var(--cirth-primary-border);
-    --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
-      var(--cirth-primary-hover-border);
-  }
-
-  .cirth [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) button {
-    --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
-      var(--cirth-primary-border);
-    --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
-      var(--cirth-primary-hover-border);
-  }
+.cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus), .cirth [role="group"]:not(fieldset):has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
+  --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-button);
+}
 
-  .cirth [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"] {
-    --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
-      var(--cirth-primary-border);
-    --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
-      var(--cirth-primary-hover-border);
-  }
+.cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"], [aria-invalid]), .cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select:not([aria-invalid]), .cirth [role="group"]:not(fieldset):has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"], [aria-invalid]), .cirth [role="group"]:not(fieldset):has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select:not([aria-invalid]) {
+  border-color: #0000;
+}
 
-  .cirth [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"] {
-    --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
-      var(--cirth-primary-border);
-    --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
-      var(--cirth-primary-hover-border);
-  }
+.cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus), .cirth [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) {
+  --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-input);
+}
 
-  .cirth [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] {
-    --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
-      var(--cirth-primary-border);
-    --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
-      var(--cirth-primary-hover-border);
-  }
+.cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button, .cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"], .cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"], .cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"], .cirth [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) button, .cirth [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"], .cirth [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"], .cirth [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] {
+  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
+    var(--cirth-primary-border);
+  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
+    var(--cirth-primary-hover-border);
+}
 
-  .cirth [role="search"] button:focus, .cirth [role="search"] [type="submit"]:focus, .cirth [role="search"] [type="reset"]:focus, .cirth [role="search"] [type="button"]:focus, .cirth [role="search"] [role="button"]:focus, .cirth [role="group"]:not(fieldset) button:focus, .cirth [role="group"]:not(fieldset) [type="submit"]:focus, .cirth [role="group"]:not(fieldset) [type="reset"]:focus, .cirth [role="group"]:not(fieldset) [type="button"]:focus, .cirth [role="group"]:not(fieldset) [role="button"]:focus {
-    box-shadow: none;
-  }
+.cirth [role="search"] button:focus, .cirth [role="search"] [type="submit"]:focus, .cirth [role="search"] [type="reset"]:focus, .cirth [role="search"] [type="button"]:focus, .cirth [role="search"] [role="button"]:focus, .cirth [role="group"]:not(fieldset) button:focus, .cirth [role="group"]:not(fieldset) [type="submit"]:focus, .cirth [role="group"]:not(fieldset) [type="reset"]:focus, .cirth [role="group"]:not(fieldset) [type="button"]:focus, .cirth [role="group"]:not(fieldset) [role="button"]:focus {
+  box-shadow: none;
 }
 
 .cirth [role="search"] > :not([hidden], input[type="hidden"]):nth-child(1 of :not([hidden], input[type="hidden"])) {
@@ -1296,12 +1262,7 @@
   border-end-start-radius: var(--cirth-radius-pill);
 }
 
-.cirth [role="search"] > :not([hidden], input[type="hidden"]):nth-last-child(1 of :not([hidden], input[type="hidden"])) {
-  border-start-end-radius: var(--cirth-radius-pill);
-  border-end-end-radius: var(--cirth-radius-pill);
-}
-
-.cirth [role="search"] > :has( + small:last-child) {
+.cirth [role="search"] > :not([hidden], input[type="hidden"]):nth-last-child(1 of :not([hidden], input[type="hidden"])), .cirth [role="search"] > :has( + small:last-child) {
   border-start-end-radius: var(--cirth-radius-pill);
   border-end-end-radius: var(--cirth-radius-pill);
 }
@@ -1315,13 +1276,10 @@
   vertical-align: -.125em;
   width: 1em;
   height: 1em;
-  -webkit-mask-image: var(--cirth-icon-loading);
   mask-image: var(--cirth-icon-loading);
   background-color: currentColor;
   display: inline-block;
-  -webkit-mask-size: 1em;
   mask-size: 1em;
-  -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
 }
 
@@ -1362,7 +1320,7 @@
 .cirth meter {
   appearance: none;
   width: 100%;
-  height: var(--cirth-size-2);
+  height: var(--cirth-space-2);
   margin-bottom: calc(var(--cirth-spacing) * .5);
   border: var(--cirth-border-width-1) solid var(--cirth-meter-border-color);
   border-radius: var(--cirth-border-radius);
@@ -1466,7 +1424,7 @@
 }
 
 .cirth dialog > article > header :is(a, button)[rel="prev"] {
-  margin: 0;
+  margin: calc(calc((var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-font-size-md)) / 2) * -1);
   float: right;
   margin-inline-start: var(--cirth-spacing);
   padding: 0;
@@ -1485,22 +1443,37 @@
 }
 
 .cirth dialog > article :is(a, button)[rel="prev"] {
-  width: var(--cirth-size-4);
-  height: var(--cirth-size-4);
-  margin-top: calc(var(--cirth-spacing) * -1);
-  margin-bottom: var(--cirth-spacing);
-  background-image: var(--cirth-icon-close);
-  background-position: center;
-  background-size: auto var(--cirth-size-4);
+  width: calc(var(--cirth-font-size-md) + calc((var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-font-size-md)) / 2) * 2);
+  height: calc(var(--cirth-font-size-md) + calc((var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-font-size-md)) / 2) * 2);
+  margin-top: calc(var(--cirth-spacing) * -1 - calc((var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-font-size-md)) / 2));
+  margin-right: calc(calc((var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-font-size-md)) / 2) * -1);
+  margin-bottom: calc(var(--cirth-spacing) - calc((var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-font-size-md)) / 2));
   opacity: .5;
   transition: opacity var(--cirth-transition);
   background-color: #0000;
-  background-repeat: no-repeat;
   border: none;
   margin-inline-start: auto;
   display: block;
 }
 
+.cirth dialog > article :is(a, button)[rel="prev"]:before {
+  background-color: var(--cirth-muted-color);
+  content: "";
+  width: 100%;
+  height: 100%;
+  mask-image: var(--cirth-icon-close);
+  mask-position: center;
+  mask-size: auto var(--cirth-font-size-md);
+  display: block;
+  mask-repeat: no-repeat;
+}
+
+@media (forced-colors: active) {
+  .cirth dialog > article :is(a, button)[rel="prev"]:before {
+    background-color: canvastext;
+  }
+}
+
 .cirth dialog > article :is(a, button)[rel="prev"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
   opacity: 1;
 }
@@ -1566,6 +1539,7 @@
 
 .cirth nav li button, .cirth nav li [role="button"], .cirth nav li [type="button"], .cirth nav li input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), .cirth nav li select {
   height: auto;
+  min-block-size: var(--cirth-space-6);
   margin-inline: inherit;
   padding: calc(var(--cirth-nav-link-spacing-vertical) - var(--cirth-border-width) * 2) var(--cirth-nav-link-spacing-horizontal);
   margin-bottom: 0;
@@ -1635,6 +1609,8 @@
   box-shadow: var(--cirth-popover-box-shadow);
   color: var(--cirth-popover-color);
   transition: opacity var(--cirth-transition), display var(--cirth-transition) allow-discrete, overlay var(--cirth-transition) allow-discrete;
+  margin: auto;
+  inset: 0;
 }
 
 @starting-style {
@@ -1651,7 +1627,7 @@
   vertical-align: baseline;
   appearance: none;
   width: 100%;
-  height: var(--cirth-size-2);
+  height: var(--cirth-space-2);
   margin-bottom: calc(var(--cirth-spacing) * .5);
   border: var(--cirth-border-width-1) solid var(--cirth-progress-border-color);
   border-radius: var(--cirth-border-radius);
@@ -1737,27 +1713,23 @@
 }
 
 .cirth {
-  --cirth-color-black: #000;
-  --cirth-color-white: #fff;
-  --cirth-color-transparent: transparent;
-  --cirth-color-current: currentColor;
   --cirth-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --cirth-font-family-sans: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial,
     "Helvetica Neue", sans-serif, var(--cirth-font-family-emoji);
   --cirth-font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
   --cirth-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
     monospace, var(--cirth-font-family-emoji);
-  --cirth-font-family-display: var(--cirth-font-family-serif);
   --cirth-font-size-xs: .75rem;
   --cirth-font-size-sm: .875rem;
   --cirth-font-size-md: 1rem;
   --cirth-font-size-lg: 1.125rem;
   --cirth-font-size-xl: 1.25rem;
-  --cirth-font-size-2xl: 1.425rem;
-  --cirth-font-size-3xl: 1.6rem;
-  --cirth-font-size-4xl: 1.8rem;
-  --cirth-font-size-5xl: 2rem;
-  --cirth-font-size-6xl: 2.3rem;
+  --cirth-font-size-2xl: 1.5rem;
+  --cirth-font-size-3xl: 1.75rem;
+  --cirth-font-size-4xl: 2rem;
+  --cirth-font-size-5xl: 2.25rem;
+  --cirth-font-size-6xl: 2.75rem;
+  --cirth-font-size-7xl: 3.5rem;
   --cirth-font-weight-light: 300;
   --cirth-font-weight-regular: 400;
   --cirth-font-weight-medium: 500;
@@ -1784,19 +1756,6 @@
   --cirth-space-16: 4rem;
   --cirth-space-20: 5rem;
   --cirth-space-24: 6rem;
-  --cirth-size-0: 0;
-  --cirth-size-1: .25rem;
-  --cirth-size-2: .5rem;
-  --cirth-size-3: .75rem;
-  --cirth-size-4: 1rem;
-  --cirth-size-5: 1.25rem;
-  --cirth-size-6: 1.5rem;
-  --cirth-size-8: 2rem;
-  --cirth-size-10: 2.5rem;
-  --cirth-size-12: 3rem;
-  --cirth-size-16: 4rem;
-  --cirth-size-20: 5rem;
-  --cirth-size-24: 6rem;
   --cirth-radius-none: 0;
   --cirth-radius-xs: .125rem;
   --cirth-radius-sm: .25rem;
@@ -1809,9 +1768,6 @@
   --cirth-border-width-1: .0625rem;
   --cirth-border-width-2: .125rem;
   --cirth-border-width-4: .25rem;
-  --cirth-outline-width-1: .0625rem;
-  --cirth-outline-width-2: .125rem;
-  --cirth-outline-width-4: .25rem;
   --cirth-duration-instant: 0s;
   --cirth-duration-fast: .1s;
   --cirth-duration-normal: .2s;
@@ -1822,7 +1778,6 @@
   --cirth-ease-out: cubic-bezier(0, 0, .2, 1);
   --cirth-ease-in-out: cubic-bezier(.4, 0, .2, 1);
   --cirth-opacity-disabled: .5;
-  --cirth-opacity-muted: .72;
   --cirth-opacity-overlay: .75;
   --cirth-z-index-dropdown: 1000;
   --cirth-z-index-sticky: 1020;
@@ -1830,6 +1785,7 @@
   --cirth-z-index-modal-backdrop: 1040;
   --cirth-z-index-modal: 1050;
   --cirth-font-family: var(--cirth-font-family-sans);
+  --cirth-font-family-display: var(--cirth-font-family-serif);
   --cirth-line-height: var(--cirth-line-height-normal);
   --cirth-font-weight: var(--cirth-font-weight-regular);
   --cirth-font-size: 100%;
@@ -1841,7 +1797,8 @@
   --cirth-code-border-radius: min(var(--cirth-border-radius),
     var(--cirth-radius-sm));
   --cirth-border-width: var(--cirth-border-width-1);
-  --cirth-outline-width: var(--cirth-outline-width-2);
+  --cirth-outline-width: var(--cirth-border-width-2);
+  --cirth-background-color: var(--cirth-canvas);
   --cirth-transition: var(--cirth-duration-normal) var(--cirth-ease-out);
   --cirth-spacing: var(--cirth-space-4);
   --cirth-typography-spacing-vertical: var(--cirth-space-4);
@@ -1869,13 +1826,9 @@
   --cirth-nav-link-spacing-vertical: var(--cirth-space-2);
   --cirth-nav-link-spacing-horizontal: var(--cirth-space-2);
   --cirth-nav-breadcrumb-divider: ">";
-  --cirth-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
-  --cirth-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
-  --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
-  --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
-  --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
-  --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
-  --cirth-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
+  --cirth-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+  --cirth-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
+  --cirth-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
   --cirth-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 146, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
 }
 
@@ -1897,21 +1850,27 @@
 }
 
 .cirth h1 {
-  --cirth-font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.5rem);
+  --cirth-font-size: clamp(var(--cirth-font-size-5xl),
+    1.7rem + 2.2vw,
+    var(--cirth-font-size-7xl));
   --cirth-line-height: var(--cirth-line-height-tight);
   --cirth-letter-spacing: var(--cirth-letter-spacing-tight);
   --cirth-typography-spacing-top: var(--cirth-space-12);
 }
 
 .cirth h2 {
-  --cirth-font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
+  --cirth-font-size: clamp(var(--cirth-font-size-2xl),
+    1.3rem + 1vw,
+    var(--cirth-font-size-4xl));
   --cirth-line-height: 1.15;
   --cirth-letter-spacing: var(--cirth-letter-spacing-tight);
   --cirth-typography-spacing-top: var(--cirth-space-12);
 }
 
 .cirth h3 {
-  --cirth-font-size: clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
+  --cirth-font-size: clamp(var(--cirth-font-size-xl),
+    1.15rem + .5vw,
+    var(--cirth-font-size-2xl));
   --cirth-line-height: 1.2;
   --cirth-letter-spacing: var(--cirth-letter-spacing-snug);
   --cirth-typography-spacing-top: var(--cirth-space-10);
@@ -1959,7 +1918,7 @@
 }
 
 .cirth input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), .cirth :where(select, textarea) {
-  --cirth-outline-width: var(--cirth-outline-width-1);
+  --cirth-outline-width: var(--cirth-border-width-1);
   --cirth-line-height: var(--cirth-line-height-relaxed);
 }
 
@@ -2005,107 +1964,131 @@
   filter: brightness(0) invert();
 }
 
+.cirth {
+  --cirth-canvas: light-dark(oklch(97.4% .004 69.35), oklch(20.15% .003 264));
+  --cirth-color: light-dark(oklch(35.3% .021 264), oklch(83% .016 264));
+  --cirth-text-selection-color: light-dark(oklch(65.7% .121 69.35 / .25), oklch(70% .129 69.35 / .1875));
+  --cirth-muted-color: light-dark(oklch(52.7% .032 264), oklch(61.3% .032 264));
+  --cirth-muted-border-color: light-dark(oklch(93.85% .003 264), oklch(26.7% .011 264));
+  --cirth-error: light-dark(oklch(44% .151 29.73), oklch(74.3% .133 29.73));
+  --cirth-success: light-dark(oklch(52.7% .1 160.59), oklch(65.7% .125 160.59));
+  --cirth-warning: light-dark(oklch(48.3% .086 78), oklch(70% .124 78));
+  --cirth-primary: light-dark(oklch(52.7% .097 69.35), oklch(70% .129 69.35));
+  --cirth-secondary: light-dark(oklch(52.7% .032 264), oklch(70% .028 264));
+  --cirth-secondary-underline: light-dark(oklch(52.7% .032 264 / .5), oklch(70% .028 264 / .5));
+  --cirth-secondary-hover: light-dark(oklch(44% .028 264), oklch(78.7% .021 264));
+  --cirth-secondary-hover-background: light-dark(oklch(44% .028 264), oklch(52.7% .032 264));
+  --cirth-secondary-focus: light-dark(oklch(48.3% .03 264 / .7), oklch(70% .028 264 / .7));
+  --cirth-contrast: light-dark(oklch(22.3% .006 264), oklch(91.7% .006 264));
+  --cirth-contrast-background: light-dark(oklch(22.3% .006 264), oklch(96% 0 264));
+  --cirth-contrast-underline: light-dark(oklch(22.3% .006 264 / .5), oklch(91.7% .006 264 / .5));
+  --cirth-contrast-hover: light-dark(oklch(0% 0 0), oklch(100% 0 0));
+  --cirth-contrast-hover-background: light-dark(oklch(0% 0 0), oklch(100% 0 0));
+  --cirth-contrast-focus: light-dark(oklch(48.3% .03 264 / .7), oklch(87.3% .011 264 / .5));
+  --cirth-contrast-inverse: light-dark(oklch(100% 0 0), oklch(0% 0 0));
+  --cirth-link-visited-color: light-dark(oklch(48.3% .03 264), oklch(65.7% .03 264));
+  --cirth-box-shadow: light-dark(.0145rem .029rem .174rem oklch(65.7% .03 264 / .01698), .0335rem .067rem .402rem oklch(65.7% .03 264 / .024), .0625rem .125rem .75rem oklch(65.7% .03 264 / .03), .1125rem .225rem 1.35rem oklch(65.7% .03 264 / .036), .2085rem .417rem 2.502rem oklch(65.7% .03 264 / .04302), .5rem 1rem 6rem oklch(65.7% .03 264 / .06), 0 0 0 .0625rem oklch(65.7% .03 264 / .015),
+    .0145rem .029rem .174rem oklch(9% 0 312 / .01698), .0335rem .067rem .402rem oklch(9% 0 312 / .024), .0625rem .125rem .75rem oklch(9% 0 312 / .03), .1125rem .225rem 1.35rem oklch(9% 0 312 / .036), .2085rem .417rem 2.502rem oklch(9% 0 312 / .04302), .5rem 1rem 6rem oklch(9% 0 312 / .06), 0 0 0 .0625rem oklch(9% 0 312 / .015));
+  --cirth-h1-color: light-dark(oklch(22.3% .006 264), oklch(96% 0 264));
+  --cirth-h2-color: light-dark(oklch(26.7% .011 264), oklch(91.7% .006 264));
+  --cirth-h3-color: light-dark(oklch(31% .016 264), oklch(83% .016 264));
+  --cirth-h4-color: light-dark(oklch(35.3% .021 264), oklch(78.7% .021 264));
+  --cirth-h5-color: light-dark(oklch(39.7% .025 264), oklch(74.3% .025 264));
+  --cirth-h6-color: light-dark(oklch(44% .028 264), oklch(65.7% .03 264));
+  --cirth-mark-color: light-dark(oklch(18% 0 264), oklch(100% 0 0));
+  --cirth-code-background-color: light-dark(oklch(97% 0 288), oklch(23.4% .00725 264));
+  --cirth-code-color: light-dark(oklch(52.7% .032 264), oklch(65.7% .03 264));
+  --cirth-form-element-background-color: light-dark(oklch(99% 0 336), oklch(24.5% .0085 264));
+  --cirth-form-element-selected-background-color: light-dark(oklch(91.7% .006 264), oklch(31% .016 264));
+  --cirth-form-element-border-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
+  --cirth-form-element-color: light-dark(oklch(26.7% .011 264), oklch(91.7% .006 264));
+  --cirth-form-element-active-background-color: light-dark(oklch(100% 0 0), oklch(23.4% .00725 264));
+  --cirth-switch-background-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
+  --cirth-range-border-color: light-dark(oklch(91.7% .006 264), oklch(26.7% .011 264));
+  --cirth-range-active-border-color: light-dark(oklch(83% .016 264), oklch(31% .016 264));
+  --cirth-card-background-color: light-dark(oklch(100% 0 0), oklch(22.3% .006 264));
+  --cirth-card-sectioning-background-color: light-dark(oklch(99% 0 336), oklch(23.4% .00725 264));
+  --cirth-dropdown-background-color: light-dark(oklch(100% 0 0), oklch(22.3% .006 264));
+  --cirth-dropdown-border-color: light-dark(oklch(96% 0 264), oklch(26.7% .011 264));
+  --cirth-dropdown-hover-background-color: light-dark(oklch(96% 0 264), oklch(26.7% .011 264));
+  --cirth-progress-background-color: light-dark(oklch(91.7% .006 264), oklch(26.7% .011 264));
+  --cirth-progress-border-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
+}
+
 .cirth:where([data-theme="light"]), .cirth :where([data-theme="light"]), .cirth:where(:not([data-theme="dark"])) {
-  --lightningcss-light: initial;
-  --lightningcss-dark: ;
   color-scheme: light;
-  --cirth-background-color: oklch(97.4% .004 69.35);
-  --cirth-color: oklch(35.3% .021 264);
-  --cirth-text-selection-color: oklch(65.7% .121 69.35 / .25);
-  --cirth-muted-color: oklch(52.7% .032 264);
-  --cirth-muted-border-color: oklch(93.85% .003 264);
-  --cirth-primary: oklch(52.7% .097 69.35);
-  --cirth-primary-background: oklch(52.7% .097 69.35);
+  --cirth-error-text: color-mix(in oklch, var(--cirth-error) 80.2%, black);
+  --cirth-error-border: oklch(from var(--cirth-error) calc(l * 1.493) calc(c * 1.298) h);
+  --cirth-error-active: oklch(from var(--cirth-error) calc(l * 1.198) calc(c * 1.199) h);
+  --cirth-error-surface: oklch(from var(--cirth-error) 93% .05 h);
+  --cirth-success-text: color-mix(in oklch, var(--cirth-success) 67%, black);
+  --cirth-success-border: oklch(from var(--cirth-success) calc(l * 1.163) calc(c * 1.17) h);
+  --cirth-success-active: var(--cirth-success);
+  --cirth-success-surface: oklch(from var(--cirth-success) 93% .05 h);
+  --cirth-warning-text: color-mix(in oklch, var(--cirth-warning) 73.1%, black);
+  --cirth-warning-border: oklch(from var(--cirth-warning) calc(l * 1.269) calc(c * 1.267) h);
+  --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.091) calc(c * 1.081) h);
+  --cirth-warning-surface: oklch(from var(--cirth-warning) 93% .05 h);
+  --cirth-primary-background: var(--cirth-primary);
   --cirth-primary-border: var(--cirth-primary-background);
-  --cirth-primary-underline: oklch(52.7% .097 69.35 / .5);
-  --cirth-primary-hover: oklch(44% .081 69.35);
-  --cirth-primary-hover-background: oklch(48.3% .089 69.35);
+  --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
+  --cirth-primary-hover: color-mix(in oklch, var(--cirth-primary) 83.5%, black);
+  --cirth-primary-hover-background: color-mix(in oklch,
+    var(--cirth-primary) 91.7%,
+    black);
   --cirth-primary-hover-border: var(--cirth-primary-hover-background);
   --cirth-primary-hover-underline: var(--cirth-primary-hover);
-  --cirth-primary-focus: oklch(52.7% .097 69.35 / .75);
+  --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 75%);
   --cirth-primary-inverse: oklch(100% 0 0);
-  --cirth-secondary: oklch(52.7% .032 264);
   --cirth-secondary-background: oklch(48.3% .03 264);
   --cirth-secondary-border: var(--cirth-secondary-background);
-  --cirth-secondary-underline: oklch(52.7% .032 264 / .5);
-  --cirth-secondary-hover: oklch(44% .028 264);
-  --cirth-secondary-hover-background: oklch(44% .028 264);
   --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
   --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
-  --cirth-secondary-focus: oklch(48.3% .03 264 / .7);
   --cirth-secondary-inverse: oklch(100% 0 0);
-  --cirth-contrast: oklch(22.3% .006 264);
-  --cirth-contrast-background: oklch(22.3% .006 264);
   --cirth-contrast-border: var(--cirth-contrast-background);
-  --cirth-contrast-underline: oklch(22.3% .006 264 / .5);
-  --cirth-contrast-hover: oklch(0% 0 0);
-  --cirth-contrast-hover-background: oklch(0% 0 0);
   --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
   --cirth-contrast-hover-underline: var(--cirth-secondary-hover);
-  --cirth-contrast-focus: oklch(48.3% .03 264 / .7);
-  --cirth-contrast-inverse: oklch(100% 0 0);
-  --cirth-link-visited-color: oklch(48.3% .03 264);
-  --cirth-box-shadow: .0145rem .029rem .174rem oklch(65.7% .03 264 / .01698), .0335rem .067rem .402rem oklch(65.7% .03 264 / .024), .0625rem .125rem .75rem oklch(65.7% .03 264 / .03), .1125rem .225rem 1.35rem oklch(65.7% .03 264 / .036), .2085rem .417rem 2.502rem oklch(65.7% .03 264 / .04302), .5rem 1rem 6rem oklch(65.7% .03 264 / .06), 0 0 0 .0625rem oklch(65.7% .03 264 / .015);
-  --cirth-h1-color: oklch(22.3% .006 264);
-  --cirth-h2-color: oklch(26.7% .011 264);
-  --cirth-h3-color: oklch(31% .016 264);
-  --cirth-h4-color: oklch(35.3% .021 264);
-  --cirth-h5-color: oklch(39.7% .025 264);
-  --cirth-h6-color: oklch(44% .028 264);
-  --cirth-mark-background-color: oklch(93% .05 78);
-  --cirth-mark-color: oklch(18% 0 264);
-  --cirth-ins-color: oklch(35.3% .067 160.59);
-  --cirth-del-color: oklch(35.3% .122 29.73);
+  --cirth-mark-background-color: var(--cirth-warning-surface);
+  --cirth-ins-color: var(--cirth-success-text);
+  --cirth-del-color: var(--cirth-error-text);
   --cirth-blockquote-border-color: var(--cirth-muted-border-color);
   --cirth-blockquote-footer-color: var(--cirth-muted-color);
   --cirth-button-box-shadow: 0 0 0 #0000;
   --cirth-button-hover-box-shadow: 0 0 0 #0000;
   --cirth-table-border-color: var(--cirth-muted-border-color);
   --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
-  --cirth-code-background-color: oklch(97% 0 288);
-  --cirth-code-color: oklch(52.7% .032 264);
   --cirth-code-kbd-background-color: var(--cirth-color);
   --cirth-code-kbd-color: var(--cirth-background-color);
-  --cirth-form-element-background-color: oklch(99% 0 336);
-  --cirth-form-element-selected-background-color: oklch(91.7% .006 264);
-  --cirth-form-element-border-color: oklch(61.3% .032 264);
-  --cirth-form-element-color: oklch(26.7% .011 264);
   --cirth-form-element-placeholder-color: var(--cirth-muted-color);
-  --cirth-form-element-active-background-color: oklch(100% 0 0);
   --cirth-form-element-active-border-color: var(--cirth-primary-border);
   --cirth-form-element-focus-color: var(--cirth-primary-border);
   --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
-  --cirth-form-element-invalid-border-color: oklch(65.7% .196 29.73);
-  --cirth-form-element-invalid-active-border-color: oklch(52.7% .181 29.73);
+  --cirth-form-element-invalid-border-color: var(--cirth-error-border);
+  --cirth-form-element-invalid-active-border-color: var(--cirth-error-active);
   --cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
-  --cirth-form-element-valid-border-color: oklch(61.3% .117 160.59);
-  --cirth-form-element-valid-active-border-color: oklch(52.7% .1 160.59);
+  --cirth-form-element-valid-border-color: var(--cirth-success-border);
+  --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
   --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
-  --cirth-switch-background-color: oklch(61.3% .032 264);
+  --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
   --cirth-switch-checked-background-color: var(--cirth-primary-background);
   --cirth-switch-color: var(--cirth-primary-inverse);
-  --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
-  --cirth-range-border-color: oklch(91.7% .006 264);
-  --cirth-range-active-border-color: oklch(83% .016 264);
   --cirth-range-thumb-border-color: var(--cirth-background-color);
   --cirth-range-thumb-color: var(--cirth-secondary-background);
   --cirth-range-thumb-active-color: var(--cirth-primary-background);
-  --cirth-accordion-border-color: var(--cirth-muted-border-color);
   --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
   --cirth-accordion-close-summary-color: var(--cirth-color);
   --cirth-accordion-open-summary-color: var(--cirth-muted-color);
-  --cirth-card-background-color: oklch(100% 0 0);
   --cirth-card-border-color: var(--cirth-muted-border-color);
   --cirth-card-box-shadow: var(--cirth-box-shadow);
-  --cirth-card-sectioning-background-color: oklch(99% 0 336);
-  --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
   --cirth-modal-overlay-background-color: oklch(93.85% .003 264deg / var(--cirth-opacity-overlay));
-  --cirth-meter-optimum-color: oklch(52.7% .1 160.59);
-  --cirth-meter-suboptimum-color: oklch(48.3% .086 78);
-  --cirth-meter-even-less-good-color: oklch(44% .151 29.73);
-  --cirth-progress-background-color: oklch(91.7% .006 264);
-  --cirth-progress-border-color: oklch(61.3% .032 264);
+  --cirth-meter-optimum-color: var(--cirth-success);
+  --cirth-meter-suboptimum-color: var(--cirth-warning);
+  --cirth-meter-even-less-good-color: var(--cirth-error);
   --cirth-progress-color: var(--cirth-primary-background);
+  --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(98, 107, 126)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(98, 107, 126)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
+  --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(98, 107, 126)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
+  --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(98, 107, 126)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
   --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(40, 124, 87)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
   --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(189, 47, 33)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
 }
@@ -2116,106 +2099,81 @@
 
 @media only screen and (prefers-color-scheme: dark) {
   .cirth:where(:not([data-theme])) {
-    --lightningcss-light: ;
-    --lightningcss-dark: initial;
     color-scheme: dark;
-    --cirth-background-color: oklch(20.15% .003 264);
-    --cirth-color: oklch(83% .016 264);
-    --cirth-text-selection-color: oklch(70% .129 69.35 / .1875);
-    --cirth-muted-color: oklch(61.3% .032 264);
-    --cirth-muted-border-color: oklch(26.7% .011 264);
-    --cirth-primary: oklch(70% .129 69.35);
-    --cirth-primary-background: oklch(52.7% .097 69.35);
+    --cirth-error-text: oklch(from var(--cirth-error) calc(l * 1.059) calc(c * .797) h);
+    --cirth-error-border: oklch(from var(--cirth-error) calc(l * .942) calc(c * 1.226) h);
+    --cirth-error-active: oklch(from var(--cirth-error) calc(l * 1.059) calc(c * .797) h);
+    --cirth-error-surface: oklch(from var(--cirth-error) 35.3% .063 h);
+    --cirth-success-text: oklch(from var(--cirth-success) calc(l * 1.198) calc(c * 1.2) h);
+    --cirth-success-border: oklch(from var(--cirth-success) calc(l * 1.065) calc(c * 1.064) h);
+    --cirth-success-active: oklch(from var(--cirth-success) calc(l * 1.198) calc(c * 1.2) h);
+    --cirth-success-surface: oklch(from var(--cirth-success) 35.3% .063 h);
+    --cirth-warning-text: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
+    --cirth-warning-border: var(--cirth-warning);
+    --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
+    --cirth-warning-surface: oklch(from var(--cirth-warning) 35.3% .063 h);
+    --cirth-primary-background: color-mix(in oklch,
+      var(--cirth-primary) 75.2%,
+      black);
     --cirth-primary-border: var(--cirth-primary-background);
-    --cirth-primary-underline: oklch(70% .129 69.35 / .5);
-    --cirth-primary-hover: oklch(78.7% .146 69.35);
-    --cirth-primary-hover-background: oklch(57% .105 69.35);
+    --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
+    --cirth-primary-hover: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
+    --cirth-primary-hover-background: color-mix(in oklch,
+      var(--cirth-primary) 81.4%,
+      black);
     --cirth-primary-hover-border: var(--cirth-primary-hover-background);
     --cirth-primary-hover-underline: var(--cirth-primary-hover);
-    --cirth-primary-focus: oklch(70% .129 69.35 / .7);
+    --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 70%);
     --cirth-primary-inverse: oklch(100% 0 0);
-    --cirth-secondary: oklch(70% .028 264);
     --cirth-secondary-background: oklch(48.3% .03 264);
     --cirth-secondary-border: var(--cirth-secondary-background);
-    --cirth-secondary-underline: oklch(70% .028 264 / .5);
-    --cirth-secondary-hover: oklch(78.7% .021 264);
-    --cirth-secondary-hover-background: oklch(52.7% .032 264);
     --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
     --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
-    --cirth-secondary-focus: oklch(70% .028 264 / .7);
     --cirth-secondary-inverse: oklch(100% 0 0);
-    --cirth-contrast: oklch(91.7% .006 264);
-    --cirth-contrast-background: oklch(96% 0 264);
     --cirth-contrast-border: var(--cirth-contrast-background);
-    --cirth-contrast-underline: oklch(91.7% .006 264 / .5);
-    --cirth-contrast-hover: oklch(100% 0 0);
-    --cirth-contrast-hover-background: oklch(100% 0 0);
     --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
     --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
-    --cirth-contrast-focus: oklch(87.3% .011 264 / .5);
-    --cirth-contrast-inverse: oklch(0% 0 0);
-    --cirth-link-visited-color: oklch(65.7% .03 264);
-    --cirth-box-shadow: .0145rem .029rem .174rem oklch(9% 0 312 / .01698), .0335rem .067rem .402rem oklch(9% 0 312 / .024), .0625rem .125rem .75rem oklch(9% 0 312 / .03), .1125rem .225rem 1.35rem oklch(9% 0 312 / .036), .2085rem .417rem 2.502rem oklch(9% 0 312 / .04302), .5rem 1rem 6rem oklch(9% 0 312 / .06), 0 0 0 .0625rem oklch(9% 0 312 / .015);
-    --cirth-h1-color: oklch(96% 0 264);
-    --cirth-h2-color: oklch(91.7% .006 264);
-    --cirth-h3-color: oklch(83% .016 264);
-    --cirth-h4-color: oklch(78.7% .021 264);
-    --cirth-h5-color: oklch(74.3% .025 264);
-    --cirth-h6-color: oklch(65.7% .03 264);
-    --cirth-mark-background-color: oklch(35.3% .063 78);
-    --cirth-mark-color: oklch(100% 0 0);
-    --cirth-ins-color: oklch(78.7% .15 160.59);
-    --cirth-del-color: oklch(78.7% .106 29.73);
+    --cirth-mark-background-color: var(--cirth-warning-surface);
+    --cirth-ins-color: var(--cirth-success-text);
+    --cirth-del-color: var(--cirth-error-text);
     --cirth-blockquote-border-color: var(--cirth-muted-border-color);
     --cirth-blockquote-footer-color: var(--cirth-muted-color);
     --cirth-button-box-shadow: 0 0 0 #0000;
     --cirth-button-hover-box-shadow: 0 0 0 #0000;
     --cirth-table-border-color: var(--cirth-muted-border-color);
     --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
-    --cirth-code-background-color: oklch(23.4% .00725 264);
-    --cirth-code-color: oklch(65.7% .03 264);
     --cirth-code-kbd-background-color: var(--cirth-color);
     --cirth-code-kbd-color: var(--cirth-background-color);
-    --cirth-form-element-background-color: oklch(24.5% .0085 264);
-    --cirth-form-element-selected-background-color: oklch(31% .016 264);
-    --cirth-form-element-border-color: oklch(52.7% .032 264);
-    --cirth-form-element-color: oklch(91.7% .006 264);
     --cirth-form-element-placeholder-color: oklch(65.7% .03 264);
-    --cirth-form-element-active-background-color: oklch(23.4% .00725 264);
     --cirth-form-element-active-border-color: var(--cirth-primary-border);
     --cirth-form-element-focus-color: var(--cirth-primary-border);
     --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
-    --cirth-form-element-invalid-border-color: oklch(70% .163 29.73);
-    --cirth-form-element-invalid-active-border-color: oklch(78.7% .106 29.73);
+    --cirth-form-element-invalid-border-color: var(--cirth-error-border);
+    --cirth-form-element-invalid-active-border-color: var(--cirth-error-active);
     --cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
-    --cirth-form-element-valid-border-color: oklch(70% .133 160.59);
-    --cirth-form-element-valid-active-border-color: oklch(78.7% .15 160.59);
+    --cirth-form-element-valid-border-color: var(--cirth-success-border);
+    --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
     --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
-    --cirth-switch-background-color: oklch(52.7% .032 264);
+    --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
     --cirth-switch-checked-background-color: var(--cirth-primary-background);
     --cirth-switch-color: var(--cirth-primary-inverse);
-    --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
-    --cirth-range-border-color: oklch(26.7% .011 264);
-    --cirth-range-active-border-color: oklch(31% .016 264);
     --cirth-range-thumb-border-color: var(--cirth-background-color);
     --cirth-range-thumb-color: var(--cirth-secondary-background);
     --cirth-range-thumb-active-color: var(--cirth-primary-background);
-    --cirth-accordion-border-color: var(--cirth-muted-border-color);
     --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
     --cirth-accordion-close-summary-color: var(--cirth-color);
     --cirth-accordion-open-summary-color: var(--cirth-muted-color);
-    --cirth-card-background-color: oklch(22.3% .006 264);
     --cirth-card-border-color: var(--cirth-card-background-color);
     --cirth-card-box-shadow: var(--cirth-box-shadow);
-    --cirth-card-sectioning-background-color: oklch(23.4% .00725 264);
-    --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
     --cirth-modal-overlay-background-color: oklch(9% 0 312deg / var(--cirth-opacity-overlay));
-    --cirth-meter-optimum-color: oklch(65.7% .125 160.59);
-    --cirth-meter-suboptimum-color: oklch(70% .124 78);
-    --cirth-meter-even-less-good-color: oklch(74.3% .133 29.73);
-    --cirth-progress-background-color: oklch(26.7% .011 264);
-    --cirth-progress-border-color: oklch(52.7% .032 264);
+    --cirth-meter-optimum-color: var(--cirth-success);
+    --cirth-meter-suboptimum-color: var(--cirth-warning);
+    --cirth-meter-even-less-good-color: var(--cirth-error);
     --cirth-progress-color: oklch(61.3% .113 69.35);
+    --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(122, 132, 152)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(122, 132, 152)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
+    --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(122, 132, 152)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
+    --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(122, 132, 152)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
     --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(75, 215, 153)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
     --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(246, 160, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
   }
@@ -2226,106 +2184,81 @@
 }
 
 .cirth:where([data-theme="dark"]), .cirth :where([data-theme="dark"]) {
-  --lightningcss-light: ;
-  --lightningcss-dark: initial;
   color-scheme: dark;
-  --cirth-background-color: oklch(20.15% .003 264);
-  --cirth-color: oklch(83% .016 264);
-  --cirth-text-selection-color: oklch(70% .129 69.35 / .1875);
-  --cirth-muted-color: oklch(61.3% .032 264);
-  --cirth-muted-border-color: oklch(26.7% .011 264);
-  --cirth-primary: oklch(70% .129 69.35);
-  --cirth-primary-background: oklch(52.7% .097 69.35);
+  --cirth-error-text: oklch(from var(--cirth-error) calc(l * 1.059) calc(c * .797) h);
+  --cirth-error-border: oklch(from var(--cirth-error) calc(l * .942) calc(c * 1.226) h);
+  --cirth-error-active: oklch(from var(--cirth-error) calc(l * 1.059) calc(c * .797) h);
+  --cirth-error-surface: oklch(from var(--cirth-error) 35.3% .063 h);
+  --cirth-success-text: oklch(from var(--cirth-success) calc(l * 1.198) calc(c * 1.2) h);
+  --cirth-success-border: oklch(from var(--cirth-success) calc(l * 1.065) calc(c * 1.064) h);
+  --cirth-success-active: oklch(from var(--cirth-success) calc(l * 1.198) calc(c * 1.2) h);
+  --cirth-success-surface: oklch(from var(--cirth-success) 35.3% .063 h);
+  --cirth-warning-text: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
+  --cirth-warning-border: var(--cirth-warning);
+  --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
+  --cirth-warning-surface: oklch(from var(--cirth-warning) 35.3% .063 h);
+  --cirth-primary-background: color-mix(in oklch,
+    var(--cirth-primary) 75.2%,
+    black);
   --cirth-primary-border: var(--cirth-primary-background);
-  --cirth-primary-underline: oklch(70% .129 69.35 / .5);
-  --cirth-primary-hover: oklch(78.7% .146 69.35);
-  --cirth-primary-hover-background: oklch(57% .105 69.35);
+  --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
+  --cirth-primary-hover: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
+  --cirth-primary-hover-background: color-mix(in oklch,
+    var(--cirth-primary) 81.4%,
+    black);
   --cirth-primary-hover-border: var(--cirth-primary-hover-background);
   --cirth-primary-hover-underline: var(--cirth-primary-hover);
-  --cirth-primary-focus: oklch(70% .129 69.35 / .7);
+  --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 70%);
   --cirth-primary-inverse: oklch(100% 0 0);
-  --cirth-secondary: oklch(70% .028 264);
   --cirth-secondary-background: oklch(48.3% .03 264);
   --cirth-secondary-border: var(--cirth-secondary-background);
-  --cirth-secondary-underline: oklch(70% .028 264 / .5);
-  --cirth-secondary-hover: oklch(78.7% .021 264);
-  --cirth-secondary-hover-background: oklch(52.7% .032 264);
   --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
   --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
-  --cirth-secondary-focus: oklch(70% .028 264 / .7);
   --cirth-secondary-inverse: oklch(100% 0 0);
-  --cirth-contrast: oklch(91.7% .006 264);
-  --cirth-contrast-background: oklch(96% 0 264);
   --cirth-contrast-border: var(--cirth-contrast-background);
-  --cirth-contrast-underline: oklch(91.7% .006 264 / .5);
-  --cirth-contrast-hover: oklch(100% 0 0);
-  --cirth-contrast-hover-background: oklch(100% 0 0);
   --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
   --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
-  --cirth-contrast-focus: oklch(87.3% .011 264 / .5);
-  --cirth-contrast-inverse: oklch(0% 0 0);
-  --cirth-link-visited-color: oklch(65.7% .03 264);
-  --cirth-box-shadow: .0145rem .029rem .174rem oklch(9% 0 312 / .01698), .0335rem .067rem .402rem oklch(9% 0 312 / .024), .0625rem .125rem .75rem oklch(9% 0 312 / .03), .1125rem .225rem 1.35rem oklch(9% 0 312 / .036), .2085rem .417rem 2.502rem oklch(9% 0 312 / .04302), .5rem 1rem 6rem oklch(9% 0 312 / .06), 0 0 0 .0625rem oklch(9% 0 312 / .015);
-  --cirth-h1-color: oklch(96% 0 264);
-  --cirth-h2-color: oklch(91.7% .006 264);
-  --cirth-h3-color: oklch(83% .016 264);
-  --cirth-h4-color: oklch(78.7% .021 264);
-  --cirth-h5-color: oklch(74.3% .025 264);
-  --cirth-h6-color: oklch(65.7% .03 264);
-  --cirth-mark-background-color: oklch(35.3% .063 78);
-  --cirth-mark-color: oklch(100% 0 0);
-  --cirth-ins-color: oklch(78.7% .15 160.59);
-  --cirth-del-color: oklch(78.7% .106 29.73);
+  --cirth-mark-background-color: var(--cirth-warning-surface);
+  --cirth-ins-color: var(--cirth-success-text);
+  --cirth-del-color: var(--cirth-error-text);
   --cirth-blockquote-border-color: var(--cirth-muted-border-color);
   --cirth-blockquote-footer-color: var(--cirth-muted-color);
   --cirth-button-box-shadow: 0 0 0 #0000;
   --cirth-button-hover-box-shadow: 0 0 0 #0000;
   --cirth-table-border-color: var(--cirth-muted-border-color);
   --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
-  --cirth-code-background-color: oklch(23.4% .00725 264);
-  --cirth-code-color: oklch(65.7% .03 264);
   --cirth-code-kbd-background-color: var(--cirth-color);
   --cirth-code-kbd-color: var(--cirth-background-color);
-  --cirth-form-element-background-color: oklch(24.5% .0085 264);
-  --cirth-form-element-selected-background-color: oklch(31% .016 264);
-  --cirth-form-element-border-color: oklch(52.7% .032 264);
-  --cirth-form-element-color: oklch(91.7% .006 264);
   --cirth-form-element-placeholder-color: oklch(65.7% .03 264);
-  --cirth-form-element-active-background-color: oklch(23.4% .00725 264);
   --cirth-form-element-active-border-color: var(--cirth-primary-border);
   --cirth-form-element-focus-color: var(--cirth-primary-border);
   --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
-  --cirth-form-element-invalid-border-color: oklch(70% .163 29.73);
-  --cirth-form-element-invalid-active-border-color: oklch(78.7% .106 29.73);
+  --cirth-form-element-invalid-border-color: var(--cirth-error-border);
+  --cirth-form-element-invalid-active-border-color: var(--cirth-error-active);
   --cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
-  --cirth-form-element-valid-border-color: oklch(70% .133 160.59);
-  --cirth-form-element-valid-active-border-color: oklch(78.7% .15 160.59);
+  --cirth-form-element-valid-border-color: var(--cirth-success-border);
+  --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
   --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
-  --cirth-switch-background-color: oklch(52.7% .032 264);
+  --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
   --cirth-switch-checked-background-color: var(--cirth-primary-background);
   --cirth-switch-color: var(--cirth-primary-inverse);
-  --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
-  --cirth-range-border-color: oklch(26.7% .011 264);
-  --cirth-range-active-border-color: oklch(31% .016 264);
   --cirth-range-thumb-border-color: var(--cirth-background-color);
   --cirth-range-thumb-color: var(--cirth-secondary-background);
   --cirth-range-thumb-active-color: var(--cirth-primary-background);
-  --cirth-accordion-border-color: var(--cirth-muted-border-color);
   --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
   --cirth-accordion-close-summary-color: var(--cirth-color);
   --cirth-accordion-open-summary-color: var(--cirth-muted-color);
-  --cirth-card-background-color: oklch(22.3% .006 264);
   --cirth-card-border-color: var(--cirth-card-background-color);
   --cirth-card-box-shadow: var(--cirth-box-shadow);
-  --cirth-card-sectioning-background-color: oklch(23.4% .00725 264);
-  --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
   --cirth-modal-overlay-background-color: oklch(9% 0 312deg / var(--cirth-opacity-overlay));
-  --cirth-meter-optimum-color: oklch(65.7% .125 160.59);
-  --cirth-meter-suboptimum-color: oklch(70% .124 78);
-  --cirth-meter-even-less-good-color: oklch(74.3% .133 29.73);
-  --cirth-progress-background-color: oklch(26.7% .011 264);
-  --cirth-progress-border-color: oklch(52.7% .032 264);
+  --cirth-meter-optimum-color: var(--cirth-success);
+  --cirth-meter-suboptimum-color: var(--cirth-warning);
+  --cirth-meter-even-less-good-color: var(--cirth-error);
   --cirth-progress-color: oklch(61.3% .113 69.35);
+  --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(122, 132, 152)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(122, 132, 152)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
+  --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(122, 132, 152)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
+  --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(122, 132, 152)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
   --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(75, 215, 153)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
   --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(246, 160, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
 }
@@ -2352,6 +2285,10 @@
     --cirth-code-color: oklch(35.3% .021 264);
     --cirth-link-visited-color: oklch(35.3% .021 264);
     --cirth-muted-border-color: oklch(57% .032 264);
+    --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(64, 71, 85)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(64, 71, 85)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
+    --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(64, 71, 85)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
+    --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(64, 71, 85)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
     --cirth-form-element-border-color: oklch(39.7% .025 264);
     --cirth-form-element-invalid-border-color: oklch(48.3% .166 29.73);
     --cirth-form-element-valid-border-color: oklch(48.3% .092 160.59);
@@ -2381,6 +2318,10 @@
     --cirth-h5-color: var(--cirth-color);
     --cirth-h6-color: var(--cirth-color);
     --cirth-muted-color: oklch(78.7% .021 264);
+    --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
+    --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
+    --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
     --cirth-secondary: oklch(78.7% .021 264);
     --cirth-code-color: oklch(83% .016 264);
     --cirth-link-visited-color: oklch(78.7% .021 264);
@@ -2391,6 +2332,8 @@
     --cirth-form-element-valid-border-color: oklch(78.7% .15 160.59);
     --cirth-primary: oklch(78.7% .146 69.35);
     --cirth-primary-hover: oklch(87.3% .082 69.35);
+    --cirth-primary-background: oklch(44% .081 69.35);
+    --cirth-primary-hover-background: oklch(39.7% .073 69.35);
     --cirth-primary-underline: var(--cirth-primary);
     --cirth-secondary-underline: var(--cirth-secondary);
     --cirth-contrast-underline: var(--cirth-contrast);
@@ -2415,6 +2358,10 @@
     --cirth-h5-color: var(--cirth-color);
     --cirth-h6-color: var(--cirth-color);
     --cirth-muted-color: oklch(78.7% .021 264);
+    --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+    --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
+    --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
+    --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
     --cirth-secondary: oklch(78.7% .021 264);
     --cirth-code-color: oklch(83% .016 264);
     --cirth-link-visited-color: oklch(78.7% .021 264);
@@ -2425,6 +2372,8 @@
     --cirth-form-element-valid-border-color: oklch(78.7% .15 160.59);
     --cirth-primary: oklch(78.7% .146 69.35);
     --cirth-primary-hover: oklch(87.3% .082 69.35);
+    --cirth-primary-background: oklch(44% .081 69.35);
+    --cirth-primary-hover-background: oklch(39.7% .073 69.35);
     --cirth-primary-underline: var(--cirth-primary);
     --cirth-secondary-underline: var(--cirth-secondary);
     --cirth-contrast-underline: var(--cirth-contrast);
@@ -2438,127 +2387,3 @@
     --cirth-meter-even-less-good-color: oklch(83% .081 29.73);
   }
 }
-
-@media print {
-  .cirth {
-    --cirth-print-color: oklch(0% 0 0);
-    --cirth-print-muted-color: oklch(48.3% .03 264);
-    --cirth-print-border-color: oklch(61.3% .032 264);
-    color: var(--cirth-print-color);
-    --lightningcss-light: initial;
-    --lightningcss-dark: ;
-    --lightningcss-light: initial;
-    --lightningcss-dark: ;
-    color-scheme: light;
-    --cirth-color: var(--cirth-print-color);
-    --cirth-h1-color: var(--cirth-print-color);
-    --cirth-h2-color: var(--cirth-print-color);
-    --cirth-h3-color: var(--cirth-print-color);
-    --cirth-h4-color: var(--cirth-print-color);
-    --cirth-h5-color: var(--cirth-print-color);
-    --cirth-h6-color: var(--cirth-print-color);
-    --cirth-code-color: var(--cirth-print-color);
-    --cirth-code-kbd-color: var(--cirth-print-color);
-    --cirth-form-element-color: var(--cirth-print-color);
-    --cirth-muted-color: var(--cirth-print-muted-color);
-    --cirth-form-element-placeholder-color: var(--cirth-print-muted-color);
-    --cirth-primary: var(--cirth-print-color);
-    --cirth-primary-hover: var(--cirth-print-color);
-    --cirth-primary-underline: var(--cirth-print-color);
-    --cirth-secondary: var(--cirth-print-color);
-    --cirth-secondary-underline: var(--cirth-print-color);
-    --cirth-contrast: var(--cirth-print-color);
-    --cirth-contrast-underline: var(--cirth-print-color);
-    --cirth-link-visited-color: var(--cirth-print-color);
-    --cirth-muted-border-color: var(--cirth-print-border-color);
-    --cirth-form-element-border-color: var(--cirth-print-border-color);
-    --cirth-box-shadow: none;
-    --cirth-card-box-shadow: none;
-    --cirth-card-background-color: transparent;
-    --cirth-card-sectioning-background-color: transparent;
-    --cirth-code-background-color: transparent;
-    --cirth-code-kbd-background-color: transparent;
-    --cirth-form-element-background-color: transparent;
-    --cirth-form-element-active-background-color: transparent;
-    --cirth-table-row-stripped-background-color: transparent;
-    --cirth-modal-overlay-background-color: transparent;
-    --cirth-ins-color: oklch(35.3% .067 160.59);
-    --cirth-del-color: oklch(35.3% .122 29.73);
-    --cirth-meter-optimum-color: oklch(52.7% .1 160.59);
-    --cirth-meter-suboptimum-color: oklch(48.3% .086 78);
-    --cirth-meter-even-less-good-color: oklch(44% .151 29.73);
-    background: none;
-  }
-
-  .cirth kbd {
-    border: var(--cirth-border-width) solid var(--cirth-print-border-color);
-  }
-
-  .cirth :is(button, [type="submit"], [type="reset"], [type="button"], [role="button"]) {
-    border-color: var(--cirth-print-border-color);
-    box-shadow: none;
-    color: var(--cirth-print-color);
-    background: none;
-  }
-
-  .cirth [type="file"]::file-selector-button {
-    border-color: var(--cirth-print-border-color);
-    box-shadow: none;
-    color: var(--cirth-print-color);
-    background: none;
-  }
-
-  .cirth :is(mark, meter, progress, [type="checkbox"], [type="radio"]) {
-    -webkit-print-color-adjust: exact;
-    print-color-adjust: exact;
-  }
-
-  .cirth a[href^="http"]:not([role="button"], nav a):after {
-    content: " (" attr(href) ")";
-    color: var(--cirth-print-muted-color);
-    font-size: var(--cirth-font-size-sm);
-    word-break: break-all;
-  }
-
-  .cirth thead {
-    display: table-header-group;
-  }
-
-  .cirth tfoot {
-    display: table-footer-group;
-  }
-
-  .cirth tr {
-    break-inside: avoid;
-  }
-
-  .cirth pre {
-    white-space: pre-wrap;
-    overflow: visible;
-  }
-
-  .cirth dialog {
-    backdrop-filter: none;
-    min-width: 0;
-    min-height: 0;
-    position: static;
-  }
-
-  .cirth dialog > article {
-    max-height: none;
-    overflow: visible;
-  }
-
-  .cirth :is(h1, h2, h3, h4, h5, h6) {
-    break-after: avoid;
-  }
-
-  .cirth :is(figure, img) {
-    break-inside: avoid;
-  }
-
-  .cirth :is(blockquote, li, p) {
-    orphans: 3;
-    widows: 3;
-  }
-}