npm - @cirthcss/cirth - Versions diffs - 0.14.1 → 0.15.0-beta.2 - Mend

@cirthcss/cirth 0.14.1 → 0.15.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/NOTICE.md +9 -0
package/README.md +19 -14
package/dist/cirth.classless.css +481 -335
package/dist/cirth.classless.min.css +1 -1
package/dist/cirth.classless.scoped.css +481 -335
package/dist/cirth.classless.scoped.min.css +1 -1
package/dist/cirth.css +571 -355
package/dist/cirth.min.css +1 -1
package/dist/cirth.print.classless.css +10 -7
package/dist/cirth.print.classless.min.css +1 -1
package/dist/cirth.print.classless.scoped.css +10 -7
package/dist/cirth.print.classless.scoped.min.css +1 -1
package/dist/cirth.print.css +10 -7
package/dist/cirth.print.min.css +1 -1
package/dist/cirth.print.scoped.css +10 -7
package/dist/cirth.print.scoped.min.css +1 -1
package/dist/cirth.scoped.css +571 -355
package/dist/cirth.scoped.min.css +1 -1
package/dist/presets/plain.css +2 -2
package/dist/presets/plain.min.css +1 -1
package/dist/presets/playroom.css +5 -10
package/dist/presets/playroom.min.css +1 -1
package/package.json +20 -5

package/dist/cirth.css CHANGED Viewed

@@ -44,21 +44,28 @@ section {
   margin-bottom: var(--cirth-block-spacing-vertical);
 }
+main > section + section {
+  margin-block-start: var(--cirth-space-8);
+}
 .container, .container-fluid {
-  grid-template-columns: minmax(var(--cirth-spacing), 1fr) minmax(0, 1fr) minmax(var(--cirth-spacing), 1fr);
   display: grid;
 }
 .container > *, .container-fluid > * {
-  grid-column: 2;
+  grid-column: content;
 }
 .container {
-  grid-template-columns: minmax(var(--cirth-spacing), 1fr) minmax(0, var(--cirth-container-max-width)) minmax(var(--cirth-spacing), 1fr);
+  grid-template-columns: [full-start] minmax(var(--cirth-container-gutter), 1fr) [content-start] minmax(0, var(--cirth-container-max-width)) [content-end] minmax(var(--cirth-container-gutter), 1fr) [full-end];
+}
+.container-fluid {
+  grid-template-columns: [full-start] var(--cirth-container-gutter) [content-start] minmax(0, 1fr) [content-end] var(--cirth-container-gutter) [full-end];
 }
-.breakout {
-  grid-column: 1 / -1;
+.container > .breakout {
+  grid-column: full;
 }
 .row {
@@ -99,6 +106,10 @@ section {
   overflow: auto;
 }
+.overflow-auto:focus-visible {
+  outline: var(--cirth-outline-width) solid var(--cirth-primary-focus);
+}
 b, strong {
   font-weight: bolder;
 }
@@ -119,11 +130,9 @@ sup {
 }
 address, blockquote, dl, ol, p, pre, table, ul {
-  margin-top: 0;
-  margin-bottom: var(--cirth-typography-spacing-vertical);
+  margin-block: 0 var(--cirth-typography-spacing-vertical);
   color: var(--cirth-color);
   font-style: normal;
-  font-weight: var(--cirth-font-weight);
 }
 p {
@@ -131,8 +140,7 @@ p {
 }
 h1, h2, h3, h4, h5, h6 {
-  margin-top: 0;
-  margin-bottom: var(--cirth-typography-spacing-vertical);
+  margin-block: 0 calc(var(--cirth-typography-spacing-vertical) * .5);
   color: var(--cirth-color);
   font-weight: var(--cirth-font-weight);
   font-size: var(--cirth-font-size);
@@ -170,13 +178,12 @@ h6 {
   margin-top: var(--cirth-typography-spacing-top);
 }
-p, hgroup {
+hgroup {
   margin-bottom: var(--cirth-typography-spacing-vertical);
 }
 hgroup > * {
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-block: 0;
 }
 hgroup > :not(:first-child):last-child {
@@ -198,11 +205,32 @@ ul li {
   list-style: square;
 }
+dt {
+  font-weight: var(--cirth-font-weight-semibold);
+}
+dd {
+  margin-inline-start: 0;
+}
+dl > dd + dt {
+  margin-top: calc(var(--cirth-typography-spacing-vertical) * .5);
+}
 mark {
   padding: 0 var(--cirth-space-1);
   background-color: var(--cirth-mark-background-color);
   color: var(--cirth-mark-color);
   vertical-align: baseline;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+@media (forced-colors: active) {
+  mark {
+    color: marktext;
+    background-color: mark;
+  }
 }
 blockquote {
@@ -210,7 +238,10 @@ blockquote {
   padding: var(--cirth-spacing);
   border-inline-start: var(--cirth-border-width-4) solid var(--cirth-blockquote-border-color);
   border-inline-end: none;
-  display: block;
+}
+blockquote > :last-child, blockquote > :has( + footer) {
+  margin-bottom: 0;
 }
 blockquote footer {
@@ -282,10 +313,14 @@ del {
   --cirth-underline: var(--cirth-contrast-hover-underline);
 }
-:where(a:not([role="button"])):visited:not(.secondary, .contrast, details.dropdown a, [aria-current]:not([aria-current="false"]), :hover, :active, :focus, nav a) {
+:where(a:not([role="button"])):visited:not(.secondary, .contrast, details.dropdown a, [aria-current]:not([aria-current="false"]), :hover, :active, :focus, nav a, :has(article)) {
   color: var(--cirth-link-visited-color);
 }
+:where(a:not([role="button"])):has(article) {
+  --cirth-color: inherit;
+}
 a[role="button"] {
   display: inline-block;
 }
@@ -306,7 +341,7 @@ button, [type="submit"], [type="reset"], [type="button"], [role="button"] {
   --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);
+  min-block-size: max(2.75rem, 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);
@@ -331,7 +366,7 @@ button, [type="submit"], [type="reset"], [type="button"], [role="button"] {
   --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);
+  min-block-size: max(2.75rem, 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);
@@ -372,11 +407,11 @@ button[aria-current]:not([aria-current="false"]), button:is(:hover, :active, :fo
 }
 button:active, [type="submit"]:active, [type="reset"]:active, [type="button"]:active, [role="button"]:active {
-  transform: translateY(.0625rem);
+  background-image: linear-gradient(#0000001f 0 0);
 }
 [type="file"]::file-selector-button:active {
-  transform: translateY(.0625rem);
+  background-image: linear-gradient(#0000001f 0 0);
 }
 button:focus-visible, button[aria-current]:not([aria-current="false"]):focus-visible, [type="submit"]:focus-visible, [type="submit"][aria-current]:not([aria-current="false"]):focus-visible, [type="reset"]:focus-visible, [type="reset"][aria-current]:not([aria-current="false"]):focus-visible, [type="button"]:focus-visible, [type="button"][aria-current]:not([aria-current="false"]):focus-visible, [role="button"]:focus-visible, [role="button"][aria-current]:not([aria-current="false"]):focus-visible {
@@ -385,18 +420,6 @@ button:focus-visible, button[aria-current]:not([aria-current="false"]):focus-vis
   outline: var(--cirth-outline-width) solid transparent;
 }
-[type="file"]::file-selector-button:focus-visible {
-  --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
-    0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
-  outline: var(--cirth-outline-width) solid transparent;
-}
-[type="file"]::file-selector-button:is():focus-visible {
-  --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
-    0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
-  outline: var(--cirth-outline-width) solid transparent;
-}
 [type="submit"], [type="reset"], [type="button"] {
   margin-bottom: var(--cirth-spacing);
 }
@@ -432,16 +455,6 @@ button:focus-visible, button[aria-current]:not([aria-current="false"]):focus-vis
     0 0 0 var(--cirth-outline-width) var(--cirth-secondary-focus);
 }
-[type="file"]::file-selector-button:focus-visible {
-  --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
-    0 0 0 var(--cirth-outline-width) var(--cirth-secondary-focus);
-}
-[type="file"]::file-selector-button:is():focus-visible {
-  --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
-    0 0 0 var(--cirth-outline-width) var(--cirth-secondary-focus);
-}
 :is(button, [type="submit"], [type="button"], [role="button"]).contrast {
   --cirth-background-color: var(--cirth-contrast-background);
   --cirth-border-color: var(--cirth-contrast-border);
@@ -459,13 +472,33 @@ button:focus-visible, button[aria-current]:not([aria-current="false"]):focus-vis
     0 0 0 var(--cirth-outline-width) var(--cirth-contrast-focus);
 }
+:is(button, [type="submit"], [type="button"], [role="button"]).danger {
+  --cirth-background-color: light-dark(var(--cirth-error), color-mix(in oklch, var(--cirth-error) 55%, black));
+  --cirth-border-color: var(--cirth-background-color);
+  --cirth-color: var(--cirth-primary-inverse);
+}
+:is(button, [type="submit"], [type="button"], [role="button"]).danger:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+  --cirth-background-color: light-dark(color-mix(in oklch, var(--cirth-error) 85%, black), color-mix(in oklch, var(--cirth-error) 50%, black));
+  --cirth-border-color: var(--cirth-background-color);
+  --cirth-color: var(--cirth-primary-inverse);
+}
+:is(button, [type="submit"], [type="button"], [role="button"]).danger:focus-visible, :is(button, [type="submit"], [type="button"], [role="button"]).danger[aria-current]:not([aria-current="false"]):focus-visible {
+  --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
+    0
+      0
+      0
+      var(--cirth-outline-width)
+      var(--cirth-form-element-invalid-focus-color);
+}
 :is(button, [type="submit"], [type="button"], [role="button"]).outline, [type="reset"].outline {
-  --cirth-background-color: var(--cirth-canvas);
+  --cirth-background-color: var(--cirth-form-element-background-color);
 }
 :is(button, [type="submit"], [type="button"], [role="button"]).ghost, [type="reset"].ghost {
   --cirth-background-color: transparent;
-  --cirth-box-shadow: none;
 }
 :is(button, [type="submit"], [type="button"], [role="button"]).outline, [type="reset"].outline {
@@ -476,7 +509,7 @@ button:focus-visible, button[aria-current]:not([aria-current="false"]):focus-vis
 :is(button, [type="submit"], [type="button"], [role="button"]).outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
   --cirth-background-color: color-mix(in oklch,
     var(--cirth-primary) 12%,
-    var(--cirth-canvas));
+    var(--cirth-form-element-background-color));
   --cirth-color: var(--cirth-primary-hover);
   --cirth-border-color: var(--cirth-primary-hover);
 }
@@ -489,7 +522,7 @@ button:focus-visible, button[aria-current]:not([aria-current="false"]):focus-vis
 :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [type="reset"].outline.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
   --cirth-background-color: color-mix(in oklch,
     var(--cirth-secondary) 12%,
-    var(--cirth-canvas));
+    var(--cirth-form-element-background-color));
   --cirth-color: var(--cirth-secondary-hover);
   --cirth-border-color: var(--cirth-secondary-hover);
 }
@@ -502,7 +535,7 @@ button:focus-visible, button[aria-current]:not([aria-current="false"]):focus-vis
 :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [type="reset"].outline.contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
   --cirth-background-color: color-mix(in oklch,
     var(--cirth-contrast) 12%,
-    var(--cirth-canvas));
+    var(--cirth-form-element-background-color));
   --cirth-color: var(--cirth-contrast-hover);
   --cirth-border-color: var(--cirth-contrast-hover);
 }
@@ -546,27 +579,59 @@ button:focus-visible, button[aria-current]:not([aria-current="false"]):focus-vis
   --cirth-border-color: transparent;
 }
+:is(button, [type="submit"], [type="button"], [role="button"]).outline.danger {
+  --cirth-background-color: var(--cirth-form-element-background-color);
+  --cirth-color: var(--cirth-error-text);
+  --cirth-border-color: var(--cirth-error-border);
+}
+:is(button, [type="submit"], [type="button"], [role="button"]).outline.danger:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+  --cirth-background-color: var(--cirth-error-surface);
+  --cirth-color: var(--cirth-error-text);
+  --cirth-border-color: var(--cirth-error-active);
+}
+:is(button, [type="submit"], [type="button"], [role="button"]).ghost.danger {
+  --cirth-background-color: transparent;
+  --cirth-color: var(--cirth-error-text);
+  --cirth-border-color: transparent;
+}
+:is(button, [type="submit"], [type="button"], [role="button"]).ghost.danger:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+  --cirth-background-color: color-mix(in oklch,
+    var(--cirth-error) 12%,
+    transparent);
+  --cirth-color: var(--cirth-error-text);
+  --cirth-border-color: transparent;
+}
 :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled], :where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
   opacity: var(--cirth-opacity-disabled);
   pointer-events: none;
 }
-form:invalid :is(button:not([type="button"], [type="reset"]), [type="submit"]) {
+form:has(:user-invalid) :is(button:not([type="button"], [type="reset"]), [type="submit"]) {
   filter: grayscale();
 }
 :where(table) {
   border-collapse: collapse;
-  border-spacing: 0;
   text-indent: 0;
   border-color: currentColor;
   width: 100%;
 }
+caption {
+  color: var(--cirth-muted-color);
+  font-size: var(--cirth-font-size-sm);
+  line-height: var(--cirth-line-height-normal);
+  text-align: start;
+  padding-block-end: calc(var(--cirth-spacing) * .5);
+}
 th, td {
   padding: calc(var(--cirth-spacing) / 2) var(--cirth-spacing);
   border-bottom: var(--cirth-border-width) solid var(--cirth-table-border-color);
-  color: var(--cirth-color);
   font-weight: var(--cirth-font-weight);
   font-variant-numeric: tabular-nums;
   text-align: start;
@@ -632,10 +697,15 @@ code, kbd, samp {
 pre {
   margin-bottom: var(--cirth-spacing);
+  border: var(--cirth-border-width) solid var(--cirth-card-border-color);
   display: block;
   overflow-x: auto;
 }
+pre:focus-visible {
+  outline: var(--cirth-outline-width) solid var(--cirth-primary-focus);
+}
 pre > code, pre > samp {
   padding: var(--cirth-spacing);
   line-height: var(--cirth-line-height);
@@ -665,6 +735,8 @@ figure {
 figure figcaption {
   padding: calc(var(--cirth-spacing) * .5) 0;
   color: var(--cirth-muted-color);
+  font-size: var(--cirth-font-size-sm);
+  line-height: var(--cirth-line-height-normal);
 }
 hr {
@@ -723,11 +795,11 @@ legend {
 }
 input:not([type="checkbox"], [type="radio"], [type="range"]) {
-  height: calc(var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
+  height: max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
 }
 select, 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);
+  min-block-size: max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
 }
 fieldset {
@@ -745,10 +817,6 @@ label, fieldset legend {
   display: block;
 }
-fieldset legend {
-  margin-bottom: calc(var(--cirth-spacing) * .5);
-}
 input:not([type="checkbox"], [type="radio"], [size]), button[type="submit"], select, textarea {
   width: 100%;
 }
@@ -773,6 +841,11 @@ input, select, textarea {
   outline: none;
 }
+:where(input, textarea)[readonly] {
+  background-color: var(--cirth-card-sectioning-background-color);
+  border-style: dashed;
+}
 input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]):is(:active, :focus), :where(select, textarea):not([readonly]):is(:active, :focus) {
   --cirth-background-color: var(--cirth-form-element-active-background-color);
 }
@@ -781,10 +854,18 @@ input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [re
   --cirth-border-color: var(--cirth-form-element-active-border-color);
 }
-input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="file"], [readonly]):hover:not(:active, :focus, [disabled], [aria-invalid]), :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));
+@media (hover: hover) and (pointer: fine) {
+  input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="file"], [readonly]):hover:not(:active, :focus, :disabled, [aria-invalid], :user-invalid) {
+    --cirth-border-color: color-mix(in oklch,
+      var(--cirth-form-element-border-color) 65%,
+      var(--cirth-color));
+  }
+  :where(select, textarea):not([readonly]):hover:not(:active, :focus, :disabled, [aria-invalid], :user-invalid) {
+    --cirth-border-color: color-mix(in oklch,
+      var(--cirth-form-element-border-color) 65%,
+      var(--cirth-color));
+  }
 }
 input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus, :where(select, textarea):not([readonly]):focus {
@@ -889,7 +970,7 @@ textarea:not([rows]) {
 textarea:is([aria-invalid], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)) {
   --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);
+      (var(--cirth-border-width) * 2));
   background-position: top right var(--cirth-space-3);
   background-size: var(--cirth-font-size-md) var(--cirth-icon-height);
 }
@@ -1155,9 +1236,9 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
 [type="range"] {
   appearance: none;
-  background: none;
   width: 100%;
-  height: 1.25rem;
+  height: max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
+  background: none;
 }
 [type="range"]::-webkit-slider-runnable-track {
@@ -1204,6 +1285,18 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
   --cirth-range-thumb-color: var(--cirth-range-thumb-active-color);
 }
+@media (hover: hover) and (pointer: fine) {
+  [type="range"]:hover:not(:active, :focus, :disabled) {
+    --cirth-range-border-color: var(--cirth-range-active-border-color);
+    --cirth-range-thumb-color: var(--cirth-secondary-hover);
+  }
+}
+[type="range"]:focus-visible {
+  outline: var(--cirth-outline-width) solid var(--cirth-primary-focus);
+  outline-offset: var(--cirth-space-1);
+}
 [type="range"]:active::-webkit-slider-thumb {
   transform: scale(1.25);
 }
@@ -1243,16 +1336,21 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
 details {
   margin-bottom: var(--cirth-spacing);
-  display: block;
 }
 details summary {
-  line-height: var(--cirth-font-size-md);
+  line-height: var(--cirth-line-height-normal);
   cursor: pointer;
   transition: color var(--cirth-transition);
   list-style-type: none;
 }
+@media (hover: hover) and (pointer: fine) {
+  details summary:hover:not([role]) {
+    color: var(--cirth-accordion-active-summary-color);
+  }
+}
 details summary:not([role]) {
   color: var(--cirth-accordion-close-summary-color);
 }
@@ -1266,16 +1364,16 @@ details summary::marker {
 }
 details summary:after {
-  width: var(--cirth-font-size-md);
-  height: var(--cirth-font-size-md);
+  width: 1em;
+  height: 1lh;
   float: right;
-  background-color: var(--cirth-muted-color);
   mask-image: var(--cirth-icon-chevron);
-  mask-position: 100%;
-  mask-size: var(--cirth-font-size-md) auto;
+  background-color: currentColor;
   margin-inline-start: calc(var(--cirth-spacing, var(--cirth-space-4)) * .5);
   display: block;
-  transform: rotate(-90deg);
+  transform: rotate(0);
+  mask-position: 100%;
+  mask-size: 1em;
   mask-repeat: no-repeat;
 }
@@ -1300,8 +1398,8 @@ details summary:focus:not([role]) {
 details summary:focus-visible:not([role]) {
   outline: var(--cirth-outline-width) solid var(--cirth-primary-focus);
-  outline-offset: calc(var(--cirth-spacing, var(--cirth-space-4)) * .5);
-  color: var(--cirth-primary);
+  outline-offset: var(--cirth-space-1);
+  color: var(--cirth-accordion-active-summary-color);
 }
 details summary[role="button"] {
@@ -1309,59 +1407,92 @@ details summary[role="button"] {
   width: 100%;
 }
-details summary[role="button"]:after {
-  height: calc(var(--cirth-font-size-md) * var(--cirth-line-height, var(--cirth-line-height-normal)));
-}
 details[open] > summary {
-  margin-bottom: var(--cirth-spacing);
+  margin-bottom: var(--cirth-space-2);
 }
-details[open] > summary:not([role]):not(:focus) {
+details[open] > summary:not([role]):not(:focus, :hover) {
   color: var(--cirth-accordion-open-summary-color);
 }
 details[open] > summary:after {
-  transform: rotate(0);
+  transform: rotate(180deg);
+}
+details:not(.dropdown) {
+  border-block-end: var(--cirth-border-width) solid var(--cirth-muted-border-color);
+}
+details:not(.dropdown) > summary {
+  min-block-size: 2.75rem;
+  padding-block: var(--cirth-space-2);
+  font-weight: var(--cirth-font-weight-semibold);
+}
+details:not(.dropdown)[open] {
+  padding-block-end: var(--cirth-space-4);
+}
+details:not(.dropdown) > :last-child:not(summary) {
+  margin-bottom: 0;
+}
+@media (prefers-reduced-motion: no-preference) {
+  @supports selector(::details-content) {
+    details:not(.dropdown)::details-content {
+      block-size: 0;
+      transition: block-size var(--cirth-transition), content-visibility var(--cirth-transition) allow-discrete;
+      interpolate-size: allow-keywords;
+      overflow: hidden;
+    }
+    details:not(.dropdown)[open]::details-content {
+      block-size: auto;
+    }
+  }
 }
 [dir="rtl"] details summary:after {
   float: left;
-  background-position: 0;
 }
 article {
   margin-bottom: var(--cirth-block-spacing-vertical);
   padding: var(--cirth-block-spacing-vertical) var(--cirth-block-spacing-horizontal);
-  border-radius: var(--cirth-border-radius);
+  border: var(--cirth-border-width) solid var(--cirth-card-border-color);
+  border-radius: var(--cirth-card-border-radius);
   background: var(--cirth-card-background-color);
   box-shadow: var(--cirth-card-box-shadow);
 }
+article > :last-child:not(header, footer), article > :is(header, footer) > :last-child {
+  margin-bottom: 0;
+}
+article > :is(header, footer) :is(h1, h2, h3, h4, h5, h6) {
+  margin-top: 0;
+}
 article > header, article > footer {
   margin-inline: calc(var(--cirth-block-spacing-horizontal) * -1);
   padding: calc(var(--cirth-block-spacing-vertical) - var(--cirth-space-2)) var(--cirth-block-spacing-horizontal);
   background-color: var(--cirth-card-sectioning-background-color);
 }
-article > header > :last-child, article > footer > :last-child {
-  margin-bottom: 0;
-}
 article > header {
   margin-top: calc(var(--cirth-block-spacing-vertical) * -1);
   margin-bottom: var(--cirth-block-spacing-vertical);
   border-bottom: var(--cirth-border-width) solid var(--cirth-card-border-color);
-  border-top-right-radius: var(--cirth-border-radius);
-  border-top-left-radius: var(--cirth-border-radius);
+  border-top-right-radius: var(--cirth-card-border-radius);
+  border-top-left-radius: var(--cirth-card-border-radius);
 }
 article > footer {
   margin-top: var(--cirth-block-spacing-vertical);
   margin-bottom: calc(var(--cirth-block-spacing-vertical) * -1);
   border-top: var(--cirth-border-width) solid var(--cirth-card-border-color);
-  border-bottom-right-radius: var(--cirth-border-radius);
-  border-bottom-left-radius: var(--cirth-border-radius);
+  border-bottom-right-radius: var(--cirth-card-border-radius);
+  border-bottom-left-radius: var(--cirth-card-border-radius);
 }
 details.dropdown {
@@ -1398,7 +1529,7 @@ nav details.dropdown {
 }
 details.dropdown > summary:not([role]) {
-  height: calc(var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
+  height: max(2.75rem, 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-form-element-border-color);
   border-radius: var(--cirth-border-radius);
@@ -1411,6 +1542,12 @@ details.dropdown > summary:not([role]) {
   transition: background-color var(--cirth-transition), border-color var(--cirth-transition), color var(--cirth-transition), box-shadow var(--cirth-transition);
 }
+@media (hover: hover) and (pointer: fine) {
+  details.dropdown > summary:not([role]):hover:not(:active, :focus, [aria-invalid]) {
+    border-color: color-mix(in oklch, var(--cirth-form-element-border-color) 65%, var(--cirth-form-element-color));
+  }
+}
 details.dropdown > summary:not([role]):active, details.dropdown > summary:not([role]):focus {
   border-color: var(--cirth-form-element-active-border-color);
   background-color: var(--cirth-form-element-active-background-color);
@@ -1422,6 +1559,7 @@ details.dropdown > summary:not([role]):focus {
 details.dropdown > summary:not([role]):focus-visible {
   outline: var(--cirth-outline-width) solid transparent;
+  outline-offset: 0;
 }
 details.dropdown > summary:not([role])[aria-invalid="false"] {
@@ -1758,37 +1896,25 @@ dialog[open] {
 @starting-style {
   dialog[open] > article {
     opacity: 0;
-    transform: translateY(-100%);
+    transform: translateY(-.5rem);
   }
 }
 dialog > article {
   transition: opacity var(--cirth-transition), transform var(--cirth-transition);
-  width: 100%;
+  width: min(100% - var(--cirth-spacing) * 2, var(--cirth-modal-max-width));
   max-height: calc(100vh - var(--cirth-spacing) * 2);
   max-height: calc(100dvh - var(--cirth-spacing) * 2);
   margin: var(--cirth-spacing);
   overflow: auto;
 }
-@media (width >= 576px) {
-  dialog > article {
-    max-width: 510px;
-  }
-}
-@media (width >= 768px) {
-  dialog > article {
-    max-width: 700px;
-  }
-}
 dialog > article > header > * {
   margin-bottom: 0;
 }
 dialog > article > header .close, dialog > article > header :is(a, button)[rel="prev"] {
-  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);
+  margin: calc(calc((max(2.75rem, 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;
@@ -1807,11 +1933,11 @@ dialog > article > footer button:not(:first-of-type), dialog > article > footer
 }
 dialog > article .close, dialog > article :is(a, button)[rel="prev"] {
-  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));
+  width: calc(var(--cirth-font-size-md) + calc((max(2.75rem, 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((max(2.75rem, 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((max(2.75rem, 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((max(2.75rem, 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((max(2.75rem, 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;
@@ -1855,11 +1981,11 @@ html:has(dialog:modal) {
 }
 :where(nav li):before {
-  float: left;
   content: "";
+  position: absolute;
 }
-nav, nav ul {
+nav, nav :is(ol, ul) {
   display: flex;
 }
@@ -1890,8 +2016,11 @@ nav li {
 }
 nav li :where(a:not([role="button"]), [role="link"]) {
-  margin: calc(var(--cirth-nav-link-spacing-vertical) * -1) calc(var(--cirth-nav-link-spacing-horizontal) * -1);
+  --cirth-color: inherit;
+  margin-block: calc(var(--cirth-nav-link-spacing-vertical) * -1);
+  margin-inline: calc(var(--cirth-nav-element-spacing-horizontal) * -1);
   padding: var(--cirth-nav-link-spacing-vertical) var(--cirth-nav-link-spacing-horizontal);
+  border-block-end: var(--cirth-border-width-2) solid transparent;
   border-radius: var(--cirth-border-radius);
   display: inline-block;
 }
@@ -1900,6 +2029,13 @@ nav li :where(a:not([role="button"]), [role="link"]):not(:hover) {
   text-decoration: none;
 }
+nav li :where(a:not([role="button"]), [role="link"]):is([aria-current]:not([aria-current="false"]), [aria-selected="true"]) {
+  --cirth-color: inherit;
+  --cirth-text-decoration: none;
+  border-block-end-color: var(--cirth-primary-border);
+  border-radius: 0;
+}
 nav li .group, nav li [role="search"] {
   width: auto;
   margin-bottom: 0;
@@ -1907,7 +2043,7 @@ nav li .group, nav li [role="search"] {
 nav li button, nav li [role="button"], nav li [type="button"], nav li input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), nav li select {
   height: auto;
-  min-block-size: var(--cirth-space-6);
+  min-block-size: var(--cirth-space-10);
   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;
@@ -1918,16 +2054,16 @@ nav[aria-label="breadcrumb"] {
   align-items: center;
 }
-nav[aria-label="breadcrumb"] ul li:not(:first-child) {
+nav[aria-label="breadcrumb"] :is(ol, ul) li:not(:first-child) {
   margin-inline-start: var(--cirth-nav-link-spacing-horizontal);
 }
-nav[aria-label="breadcrumb"] ul li a {
+nav[aria-label="breadcrumb"] :is(ol, ul) li a {
   margin: calc(var(--cirth-nav-link-spacing-vertical) * -1) 0;
-  margin-inline-start: calc(var(--cirth-nav-link-spacing-horizontal) * -1);
+  margin-inline-start: calc(var(--cirth-nav-element-spacing-horizontal) * -1);
 }
-nav[aria-label="breadcrumb"] ul li:not(:last-child):after {
+nav[aria-label="breadcrumb"] :is(ol, ul) li:not(:last-child):after {
   width: calc(var(--cirth-nav-link-spacing-horizontal) * 4);
   margin: 0 calc(var(--cirth-nav-link-spacing-horizontal) * -1);
   content: var(--cirth-nav-breadcrumb-divider);
@@ -1943,22 +2079,70 @@ nav[aria-label="breadcrumb"] a[aria-current]:not([aria-current="false"]) {
   color: inherit;
   pointer-events: none;
   background-color: #0000;
+  border-block-end-color: #0000;
   text-decoration: none;
 }
-aside nav, aside ol, aside ul, aside li {
+header:not(:is(article, aside, dialog, figure, li, nav, section, td) *) > nav {
+  --cirth-nav-element-spacing-vertical: var(--cirth-space-2);
+  flex-wrap: wrap;
+  align-items: center;
+}
+header:not(:is(article, aside, dialog, figure, li, nav, section, td) *) > nav li :where(a:not([role="button"]), [role="link"]) {
+  --cirth-color: var(--cirth-muted-color);
+  --cirth-text-decoration: none;
+  border-block-end: 0;
+  border-radius: 0;
+}
+header:not(:is(article, aside, dialog, figure, li, nav, section, td) *) > nav li :where(a:not([role="button"]), [role="link"]):is(:hover, :focus, :active) {
+  --cirth-color: color-mix(in oklch,
+    var(--cirth-muted-color),
+    var(--cirth-contrast));
+}
+header:not(:is(article, aside, dialog, figure, li, nav, section, td) *) > nav li :where(a:not([role="button"]), [role="link"]):is([aria-current]:not([aria-current="false"]), [aria-selected="true"]) {
+  --cirth-color: var(--cirth-contrast);
+  font-weight: var(--cirth-font-weight-semibold);
+}
+header:not(:is(article, aside, dialog, figure, li, nav, section, td) *) > nav li :where(a:not([role="button"]), [role="link"])[aria-disabled="true"] {
+  --cirth-color: color-mix(in oklch,
+    var(--cirth-muted-color) 55%,
+    transparent);
+  pointer-events: none;
+}
+header:not(:is(article, aside, dialog, figure, li, nav, section, td) *) > nav details.dropdown > summary:not([role]) {
+  border-color: var(--cirth-muted-border-color);
+  background-color: #0000;
+}
+aside nav {
+  --cirth-nav-element-spacing-horizontal: 0;
   display: block;
 }
-aside li {
-  padding: calc(var(--cirth-nav-element-spacing-vertical) * .5) var(--cirth-nav-element-spacing-horizontal);
+aside nav ol, aside nav ul, aside nav li {
+  display: block;
+}
+aside nav li {
+  padding: calc(var(--cirth-nav-element-spacing-vertical) * .5) 0;
 }
-aside li a {
+aside nav li a {
+  border-inline-start: var(--cirth-border-width-2) solid transparent;
   display: block;
 }
-aside li [role="button"] {
+aside nav li a:is([aria-current]:not([aria-current="false"]), [aria-selected="true"]) {
+  border-block-end-color: #0000;
+  border-inline-start-color: var(--cirth-primary-border);
+}
+aside nav li [role="button"] {
   margin: inherit;
 }
@@ -1976,11 +2160,18 @@ aside li [role="button"] {
   background-color: var(--cirth-popover-background-color);
   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;
 }
+:is([popover=""], [popover="auto"], [popover="hint"]):not(dialog):popover-open > :last-child {
+  margin-bottom: 0;
+}
+:is([popover=""], [popover="auto"], [popover="hint"]):not(dialog):popover-open {
+  transition: opacity var(--cirth-transition), display var(--cirth-transition) allow-discrete, overlay var(--cirth-transition) allow-discrete;
+}
 @starting-style {
   :is([popover=""], [popover="auto"], [popover="hint"]):not(dialog):popover-open {
     opacity: 0;
@@ -2074,6 +2265,7 @@ progress::-moz-progress-bar {
     scroll-behavior: auto;
     transition-delay: var(--cirth-duration-instant);
     transition-duration: var(--cirth-duration-instant);
+    --cirth-transition: var(--cirth-duration-instant) var(--cirth-ease-out);
     animation-duration: 1ms;
     animation-iteration-count: 1;
     animation-delay: -1ms;
@@ -2093,12 +2285,16 @@ progress::-moz-progress-bar {
 }
 .sr-only-focusable:focus, .sr-only-focusable:focus-within {
-  clip-path: none;
-  white-space: normal;
   width: auto;
   height: auto;
+  padding: var(--cirth-space-2) var(--cirth-space-4);
+  clip-path: none;
+  white-space: normal;
+  z-index: var(--cirth-z-index-fixed);
+  border-radius: var(--cirth-border-radius);
+  background-color: var(--cirth-canvas);
+  color: var(--cirth-ink);
   margin: 0;
-  position: static;
   overflow: visible;
 }
@@ -2131,7 +2327,7 @@ progress::-moz-progress-bar {
   --cirth-font-weight-medium: 500;
   --cirth-font-weight-semibold: 600;
   --cirth-font-weight-bold: 700;
-  --cirth-letter-spacing-tight: -.02em;
+  --cirth-letter-spacing-tight: -.03em;
   --cirth-letter-spacing-snug: -.01em;
   --cirth-line-height-none: 1;
   --cirth-line-height-tight: 1.125;
@@ -2181,12 +2377,12 @@ progress::-moz-progress-bar {
   --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-font-family-display: var(--cirth-font-family-sans);
   --cirth-line-height: var(--cirth-line-height-normal);
   --cirth-font-weight: var(--cirth-font-weight-regular);
   --cirth-font-size: 100%;
   --cirth-text-underline-offset: .15em;
-  --cirth-border-radius: var(--cirth-radius-lg);
+  --cirth-border-radius: var(--cirth-radius-sm);
   --cirth-card-border-radius: calc(var(--cirth-border-radius) * 1.5);
   --cirth-checkbox-border-radius: min(var(--cirth-border-radius),
     var(--cirth-radius-sm));
@@ -2197,28 +2393,32 @@ progress::-moz-progress-bar {
   --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);
+  --cirth-typography-spacing-vertical: var(--cirth-spacing);
   --cirth-block-spacing-vertical: var(--cirth-spacing);
   --cirth-block-spacing-horizontal: var(--cirth-spacing);
+  --cirth-container-gutter: clamp(var(--cirth-space-4),
+    4%,
+    var(--cirth-space-12));
   --cirth-container-max-width: 60rem;
   --cirth-grid-column-gap: var(--cirth-spacing);
   --cirth-grid-row-gap: var(--cirth-spacing);
   --cirth-grid-min-column: 12rem;
   --cirth-form-element-spacing-vertical: var(--cirth-space-2);
   --cirth-form-element-spacing-horizontal: var(--cirth-space-4);
-  --cirth-form-label-font-weight: var(--cirth-font-weight);
+  --cirth-form-label-font-weight: var(--cirth-font-weight-medium);
   --cirth-group-box-shadow: 0 0 0 #0000;
   --cirth-group-box-shadow-focus-with-button: 0 0 0 var(--cirth-outline-width)
     var(--cirth-primary-focus);
   --cirth-group-box-shadow-focus-with-input: 0 0 0 var(--cirth-border-width-1)
     var(--cirth-form-element-border-color);
+  --cirth-card-box-shadow: none;
   --cirth-meter-background-color: var(--cirth-progress-background-color);
   --cirth-meter-border-color: var(--cirth-progress-border-color);
-  --cirth-popover-background-color: var(--cirth-card-background-color);
   --cirth-popover-border-color: var(--cirth-muted-border-color);
-  --cirth-popover-color: var(--cirth-color);
+  --cirth-popover-color: var(--cirth-ink);
   --cirth-popover-box-shadow: var(--cirth-box-shadow);
   --cirth-popover-max-width: min(30rem, 100% - var(--cirth-spacing) * 2);
+  --cirth-modal-max-width: 43.75rem;
   --cirth-modal-overlay-backdrop-filter: blur(.375rem);
   --cirth-nav-element-spacing-vertical: var(--cirth-space-4);
   --cirth-nav-element-spacing-horizontal: var(--cirth-space-2);
@@ -2228,7 +2428,11 @@ progress::-moz-progress-bar {
   --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");
+  --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(142, 144, 161)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
+}
+:focus-visible {
+  transition-duration: var(--cirth-duration-instant);
 }
 a, a.secondary, a.contrast {
@@ -2248,30 +2452,35 @@ h4, h5, h6 {
   --cirth-font-weight: var(--cirth-font-weight-semibold);
 }
+h1, h2 {
+  --cirth-letter-spacing: var(--cirth-letter-spacing-tight);
+}
+h3, h4 {
+  --cirth-letter-spacing: var(--cirth-letter-spacing-snug);
+}
 h1 {
-  --cirth-font-size: clamp(var(--cirth-font-size-5xl),
-    1.7rem + 2.2vw,
-    var(--cirth-font-size-7xl));
+  --cirth-font-size: clamp(var(--cirth-font-size-3xl),
+    1.31rem + 1.8vw,
+    var(--cirth-font-size-6xl));
   --cirth-line-height: var(--cirth-line-height-tight);
-  --cirth-letter-spacing: var(--cirth-letter-spacing-tight);
   --cirth-typography-spacing-top: var(--cirth-space-12);
 }
 h2 {
   --cirth-font-size: clamp(var(--cirth-font-size-2xl),
-    1.3rem + 1vw,
+    1.28rem + .9vw,
     var(--cirth-font-size-4xl));
-  --cirth-line-height: 1.15;
-  --cirth-letter-spacing: var(--cirth-letter-spacing-tight);
+  --cirth-line-height: var(--cirth-line-height-snug);
   --cirth-typography-spacing-top: var(--cirth-space-12);
 }
 h3 {
   --cirth-font-size: clamp(var(--cirth-font-size-xl),
-    1.15rem + .5vw,
+    1.14rem + .45vw,
     var(--cirth-font-size-2xl));
-  --cirth-line-height: 1.2;
-  --cirth-letter-spacing: var(--cirth-letter-spacing-snug);
+  --cirth-line-height: var(--cirth-line-height-snug);
   --cirth-typography-spacing-top: var(--cirth-space-10);
 }
@@ -2294,14 +2503,12 @@ h6 {
 }
 article {
-  --cirth-border-radius: var(--cirth-card-border-radius);
-  --cirth-block-spacing-vertical: var(--cirth-space-6);
-  --cirth-block-spacing-horizontal: var(--cirth-space-6);
+  --cirth-block-spacing-vertical: var(--cirth-space-5);
+  --cirth-block-spacing-horizontal: var(--cirth-space-5);
 }
 thead th, thead td, tfoot th, tfoot td {
   --cirth-font-weight: var(--cirth-font-weight-semibold);
-  --cirth-border-width: .1875rem;
 }
 pre, code, kbd, samp, var {
@@ -2316,11 +2523,6 @@ kbd {
   --cirth-font-weight: bolder;
 }
-input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), :where(select, textarea) {
-  --cirth-outline-width: var(--cirth-border-width-1);
-  --cirth-line-height: var(--cirth-line-height-relaxed);
-}
 [type="search"] {
   --cirth-border-radius: var(--cirth-radius-pill);
 }
@@ -2331,12 +2533,7 @@ input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [
 button, [type="submit"], [type="reset"], [type="button"], [role="button"] {
   --cirth-font-weight: var(--cirth-font-weight-semibold);
-  --cirth-line-height: var(--cirth-line-height-relaxed);
-  --cirth-form-element-spacing-horizontal: var(--cirth-space-5);
-}
-[type="file"] {
-  --cirth-line-height: var(--cirth-line-height-relaxed);
+  --cirth-form-element-spacing-horizontal: var(--cirth-space-4);
 }
 [type="checkbox"], [type="radio"] {
@@ -2388,54 +2585,46 @@ details summary[role="button"]:not(.outline):after {
 }
 :root, :host {
-  --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-canvas: light-dark(oklch(97.3% .006 44), oklch(20.15% .0225 280));
+  --cirth-ink: light-dark(oklch(35.3% .027 280), oklch(83% .011 280));
+  --cirth-color: var(--cirth-ink);
+  --cirth-muted-color: light-dark(oklch(52.7% .031 280), oklch(65.7% .025 280));
+  --cirth-muted-border-color: light-dark(oklch(93.85% .002 280), oklch(26.7% .025 280));
+  --cirth-error: light-dark(oklch(44% .151 22), oklch(74.3% .133 22));
+  --cirth-success: light-dark(oklch(52.7% .115 153), oklch(65.7% .144 153));
+  --cirth-warning: light-dark(oklch(48.3% .084 89.5), oklch(70% .122 89.5));
+  --cirth-primary: light-dark(oklch(52.7% .107 44), oklch(65.7% .134 44));
+  --cirth-secondary: light-dark(oklch(52.7% .031 280), oklch(70% .021 280));
+  --cirth-secondary-underline: light-dark(oklch(52.7% .031 280 / .5), oklch(70% .021 280 / .5));
+  --cirth-secondary-hover: light-dark(oklch(44% .029 280), oklch(78.7% .014 280));
+  --cirth-secondary-hover-background: light-dark(oklch(44% .029 280), oklch(52.7% .031 280));
+  --cirth-secondary-focus: light-dark(oklch(48.3% .03 280 / .7), oklch(70% .021 280 / .7));
+  --cirth-contrast: light-dark(oklch(22.3% .023 280), oklch(91.7% .004 280));
+  --cirth-contrast-background: light-dark(oklch(22.3% .023 280), oklch(96% 0 280));
+  --cirth-contrast-underline: light-dark(oklch(22.3% .023 280 / .5), oklch(91.7% .004 280 / .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-focus: light-dark(oklch(48.3% .03 280 / .7), oklch(87.3% .007 280 / .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-link-visited-color: light-dark(oklch(48.3% 0 280), oklch(65.7% 0 280));
+  --cirth-box-shadow: light-dark(.0145rem .029rem .174rem oklch(65.7% .025 280 / .01698), .0335rem .067rem .402rem oklch(65.7% .025 280 / .024), .0625rem .125rem .75rem oklch(65.7% .025 280 / .03), .1125rem .225rem 1.35rem oklch(65.7% .025 280 / .036), .2085rem .417rem 2.502rem oklch(65.7% .025 280 / .04302), .5rem 1rem 6rem oklch(65.7% .025 280 / .06), 0 0 0 .0625rem oklch(65.7% .025 280 / .015),
+    .0145rem .029rem .174rem oklch(9% .011 280 / .01698), .0335rem .067rem .402rem oklch(9% .011 280 / .024), .0625rem .125rem .75rem oklch(9% .011 280 / .03), .1125rem .225rem 1.35rem oklch(9% .011 280 / .036), .2085rem .417rem 2.502rem oklch(9% .011 280 / .04302), .5rem 1rem 6rem oklch(9% .011 280 / .06), 0 0 0 .0625rem oklch(9% .011 280 / .015));
+  --cirth-h1-color: light-dark(oklch(22.3% .023 280), oklch(96% 0 280));
+  --cirth-h2-color: light-dark(oklch(26.7% .025 280), oklch(91.7% .004 280));
+  --cirth-h3-color: light-dark(oklch(31% .026 280), oklch(83% .011 280));
+  --cirth-h4-color: light-dark(oklch(35.3% .027 280), oklch(78.7% .014 280));
+  --cirth-h5-color: light-dark(oklch(39.7% .028 280), oklch(74.3% .018 280));
+  --cirth-h6-color: light-dark(oklch(44% .029 280), oklch(65.7% .025 280));
+  --cirth-mark-color: light-dark(oklch(18% .022 280), oklch(100% 0 0));
+  --cirth-code-color: light-dark(oklch(52.7% .031 280), oklch(65.7% .025 280));
+  --cirth-form-element-selected-background-color: light-dark(oklch(91.7% .004 280), oklch(31% .026 280));
+  --cirth-form-element-border-color: light-dark(oklch(61.3% .028 280), oklch(52.7% .031 280));
+  --cirth-form-element-color: light-dark(oklch(26.7% .025 280), oklch(91.7% .004 280));
+  --cirth-switch-background-color: light-dark(oklch(61.3% .028 280), oklch(52.7% .031 280));
+  --cirth-range-border-color: light-dark(oklch(91.7% .004 280), oklch(26.7% .025 280));
+  --cirth-range-active-border-color: light-dark(oklch(83% .011 280), oklch(31% .026 280));
+  --cirth-progress-background-color: light-dark(oklch(91.7% .004 280), oklch(26.7% .025 280));
+  --cirth-progress-border-color: light-dark(oklch(61.3% .028 280), oklch(52.7% .031 280));
 }
 :where([data-theme="light"]), :root:where(:not([data-theme="dark"])), :host(:where(:not([data-theme="dark"]))) {
@@ -2463,7 +2652,15 @@ details summary[role="button"]:not(.outline):after {
   --cirth-primary-hover-underline: var(--cirth-primary-hover);
   --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 75%);
   --cirth-primary-inverse: oklch(100% 0 0);
-  --cirth-secondary-background: oklch(48.3% .03 264);
+  --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.247) c h / 25%);
+  --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .019) c h);
+  --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .009) c h);
+  --cirth-form-element-background-color: oklch(from var(--cirth-canvas) calc(l - .008) c h);
+  --cirth-card-background-color: oklch(from var(--cirth-canvas) calc(l + .018) c h);
+  --cirth-form-element-active-background-color: var(--cirth-canvas);
+  --cirth-dropdown-background-color: var(--cirth-card-background-color);
+  --cirth-popover-background-color: var(--cirth-card-background-color);
+  --cirth-secondary-background: oklch(48.3% .03 280);
   --cirth-secondary-border: var(--cirth-secondary-background);
   --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
   --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
@@ -2471,20 +2668,22 @@ details summary[role="button"]:not(.outline):after {
   --cirth-contrast-border: var(--cirth-contrast-background);
   --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
   --cirth-contrast-hover-underline: var(--cirth-secondary-hover);
-  --cirth-mark-background-color: var(--cirth-warning-surface);
+  --cirth-mark-background-color: color-mix(in oklab,
+    var(--cirth-primary) 18%,
+    var(--cirth-canvas));
   --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-kbd-background-color: var(--cirth-color);
+  --cirth-table-border-color: var(--cirth-card-border-color);
+  --cirth-table-row-stripped-background-color: oklch(57% .032 280 / .0375);
+  --cirth-code-kbd-background-color: var(--cirth-ink);
   --cirth-code-kbd-color: var(--cirth-background-color);
   --cirth-form-element-placeholder-color: var(--cirth-muted-color);
   --cirth-form-element-active-border-color: var(--cirth-primary-border);
-  --cirth-form-element-focus-color: var(--cirth-primary-border);
+  --cirth-form-element-focus-color: var(--cirth-primary-focus);
   --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
   --cirth-form-element-invalid-border-color: var(--cirth-error-border);
   --cirth-form-element-invalid-active-border-color: var(--cirth-error-active);
@@ -2496,30 +2695,29 @@ details summary[role="button"]:not(.outline):after {
   --cirth-switch-checked-background-color: var(--cirth-primary-background);
   --cirth-switch-color: var(--cirth-primary-inverse);
   --cirth-range-thumb-border-color: var(--cirth-background-color);
-  --cirth-range-thumb-color: var(--cirth-secondary-background);
+  --cirth-range-thumb-color: var(--cirth-secondary);
   --cirth-range-thumb-active-color: var(--cirth-primary-background);
   --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-border-color: var(--cirth-muted-border-color);
-  --cirth-card-box-shadow: var(--cirth-box-shadow);
+  --cirth-accordion-close-summary-color: var(--cirth-ink);
+  --cirth-accordion-open-summary-color: var(--cirth-ink);
+  --cirth-card-border-color: color-mix(in oklab,
+    var(--cirth-form-element-border-color) 38%,
+    oklch(from var(--cirth-card-background-color) l 0 h));
   --cirth-dropdown-box-shadow: var(--cirth-box-shadow);
-  --cirth-dropdown-color: var(--cirth-color);
-  --cirth-modal-overlay-background-color: oklch(93.85% .003 264deg / var(--cirth-opacity-overlay));
+  --cirth-dropdown-color: var(--cirth-ink);
+  --cirth-dropdown-border-color: var(--cirth-card-border-color);
+  --cirth-dropdown-hover-background-color: var(--cirth-card-sectioning-background-color);
+  --cirth-modal-overlay-background-color: oklch(93.85% .002 280deg / var(--cirth-opacity-overlay));
   --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");
-}
-:where([data-theme="light"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), :root:where(:not([data-theme="dark"])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), :host(:where(:not([data-theme="dark"]))) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
-  --cirth-form-element-focus-color: var(--cirth-primary-focus);
+  --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(103, 105, 125)' 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(103, 105, 125)' 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(103, 105, 125)' 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(103, 105, 125)' 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, 126, 74)' 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, 44, 56)' 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");
 }
 @media only screen and (prefers-color-scheme: dark) {
@@ -2544,13 +2742,21 @@ details summary[role="button"]:not(.outline):after {
     --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%,
+      var(--cirth-primary) 72%,
       black);
     --cirth-primary-hover-border: var(--cirth-primary-hover-background);
     --cirth-primary-hover-underline: var(--cirth-primary-hover);
-    --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 70%);
+    --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 80%);
+    --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.065) c h / 18.75%);
     --cirth-primary-inverse: oklch(100% 0 0);
-    --cirth-secondary-background: oklch(48.3% .03 264);
+    --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .02) c h);
+    --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .025) c h);
+    --cirth-form-element-background-color: oklch(from var(--cirth-canvas) calc(l - .008) c h);
+    --cirth-card-background-color: oklch(from var(--cirth-canvas) calc(l + .04) c h);
+    --cirth-form-element-active-background-color: var(--cirth-canvas);
+    --cirth-dropdown-background-color: var(--cirth-card-background-color);
+    --cirth-popover-background-color: var(--cirth-card-background-color);
+    --cirth-secondary-background: oklch(48.3% .03 280);
     --cirth-secondary-border: var(--cirth-secondary-background);
     --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
     --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
@@ -2558,20 +2764,22 @@ details summary[role="button"]:not(.outline):after {
     --cirth-contrast-border: var(--cirth-contrast-background);
     --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
     --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
-    --cirth-mark-background-color: var(--cirth-warning-surface);
+    --cirth-mark-background-color: color-mix(in oklab,
+      var(--cirth-primary) 24%,
+      var(--cirth-canvas));
     --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-kbd-background-color: var(--cirth-color);
+    --cirth-table-border-color: var(--cirth-card-border-color);
+    --cirth-table-row-stripped-background-color: oklch(57% .032 280 / .0375);
+    --cirth-code-kbd-background-color: var(--cirth-ink);
     --cirth-code-kbd-color: var(--cirth-background-color);
-    --cirth-form-element-placeholder-color: oklch(65.7% .03 264);
+    --cirth-form-element-placeholder-color: oklch(65.7% .025 280);
     --cirth-form-element-active-border-color: var(--cirth-primary-border);
-    --cirth-form-element-focus-color: var(--cirth-primary-border);
+    --cirth-form-element-focus-color: var(--cirth-primary-focus);
     --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
     --cirth-form-element-invalid-border-color: var(--cirth-error-border);
     --cirth-form-element-invalid-active-border-color: var(--cirth-error-active);
@@ -2583,30 +2791,29 @@ details summary[role="button"]:not(.outline):after {
     --cirth-switch-checked-background-color: var(--cirth-primary-background);
     --cirth-switch-color: var(--cirth-primary-inverse);
     --cirth-range-thumb-border-color: var(--cirth-background-color);
-    --cirth-range-thumb-color: var(--cirth-secondary-background);
+    --cirth-range-thumb-color: var(--cirth-secondary);
     --cirth-range-thumb-active-color: var(--cirth-primary-background);
     --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-border-color: var(--cirth-card-background-color);
-    --cirth-card-box-shadow: var(--cirth-box-shadow);
+    --cirth-accordion-close-summary-color: var(--cirth-ink);
+    --cirth-accordion-open-summary-color: var(--cirth-ink);
+    --cirth-card-border-color: color-mix(in oklab,
+      var(--cirth-form-element-border-color) 46%,
+      var(--cirth-card-background-color));
     --cirth-dropdown-box-shadow: var(--cirth-box-shadow);
-    --cirth-dropdown-color: var(--cirth-color);
-    --cirth-modal-overlay-background-color: oklch(9% 0 312deg / var(--cirth-opacity-overlay));
+    --cirth-dropdown-color: var(--cirth-ink);
+    --cirth-dropdown-border-color: var(--cirth-card-border-color);
+    --cirth-dropdown-hover-background-color: var(--cirth-card-sectioning-background-color);
+    --cirth-modal-overlay-background-color: oklch(9% .011 280deg / var(--cirth-opacity-overlay));
     --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");
-  }
-  :root:where(:not([data-theme])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), :host(:where(:not([data-theme]))) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
-    --cirth-form-element-focus-color: var(--cirth-primary-focus);
+    --cirth-progress-color: var(--cirth-primary);
+    --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(142, 144, 161)' 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(142, 144, 161)' 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(142, 144, 161)' 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(142, 144, 161)' 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, 216, 131)' 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, 158, 155)' 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");
   }
   :root:where(:not([data-theme])) details summary[role="button"].contrast:not(.outline):after, :host(:where(:not([data-theme]))) details summary[role="button"].contrast:not(.outline):after, :root:where(:not([data-theme])) [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before, :host(:where(:not([data-theme]))) [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
@@ -2635,13 +2842,21 @@ details summary[role="button"]:not(.outline):after {
   --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%,
+    var(--cirth-primary) 72%,
     black);
   --cirth-primary-hover-border: var(--cirth-primary-hover-background);
   --cirth-primary-hover-underline: var(--cirth-primary-hover);
-  --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 70%);
+  --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 80%);
+  --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.065) c h / 18.75%);
   --cirth-primary-inverse: oklch(100% 0 0);
-  --cirth-secondary-background: oklch(48.3% .03 264);
+  --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .02) c h);
+  --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .025) c h);
+  --cirth-form-element-background-color: oklch(from var(--cirth-canvas) calc(l - .008) c h);
+  --cirth-card-background-color: oklch(from var(--cirth-canvas) calc(l + .04) c h);
+  --cirth-form-element-active-background-color: var(--cirth-canvas);
+  --cirth-dropdown-background-color: var(--cirth-card-background-color);
+  --cirth-popover-background-color: var(--cirth-card-background-color);
+  --cirth-secondary-background: oklch(48.3% .03 280);
   --cirth-secondary-border: var(--cirth-secondary-background);
   --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
   --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
@@ -2649,20 +2864,22 @@ details summary[role="button"]:not(.outline):after {
   --cirth-contrast-border: var(--cirth-contrast-background);
   --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
   --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
-  --cirth-mark-background-color: var(--cirth-warning-surface);
+  --cirth-mark-background-color: color-mix(in oklab,
+    var(--cirth-primary) 24%,
+    var(--cirth-canvas));
   --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-kbd-background-color: var(--cirth-color);
+  --cirth-table-border-color: var(--cirth-card-border-color);
+  --cirth-table-row-stripped-background-color: oklch(57% .032 280 / .0375);
+  --cirth-code-kbd-background-color: var(--cirth-ink);
   --cirth-code-kbd-color: var(--cirth-background-color);
-  --cirth-form-element-placeholder-color: oklch(65.7% .03 264);
+  --cirth-form-element-placeholder-color: oklch(65.7% .025 280);
   --cirth-form-element-active-border-color: var(--cirth-primary-border);
-  --cirth-form-element-focus-color: var(--cirth-primary-border);
+  --cirth-form-element-focus-color: var(--cirth-primary-focus);
   --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
   --cirth-form-element-invalid-border-color: var(--cirth-error-border);
   --cirth-form-element-invalid-active-border-color: var(--cirth-error-active);
@@ -2674,30 +2891,29 @@ details summary[role="button"]:not(.outline):after {
   --cirth-switch-checked-background-color: var(--cirth-primary-background);
   --cirth-switch-color: var(--cirth-primary-inverse);
   --cirth-range-thumb-border-color: var(--cirth-background-color);
-  --cirth-range-thumb-color: var(--cirth-secondary-background);
+  --cirth-range-thumb-color: var(--cirth-secondary);
   --cirth-range-thumb-active-color: var(--cirth-primary-background);
   --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-border-color: var(--cirth-card-background-color);
-  --cirth-card-box-shadow: var(--cirth-box-shadow);
+  --cirth-accordion-close-summary-color: var(--cirth-ink);
+  --cirth-accordion-open-summary-color: var(--cirth-ink);
+  --cirth-card-border-color: color-mix(in oklab,
+    var(--cirth-form-element-border-color) 46%,
+    var(--cirth-card-background-color));
   --cirth-dropdown-box-shadow: var(--cirth-box-shadow);
-  --cirth-dropdown-color: var(--cirth-color);
-  --cirth-modal-overlay-background-color: oklch(9% 0 312deg / var(--cirth-opacity-overlay));
+  --cirth-dropdown-color: var(--cirth-ink);
+  --cirth-dropdown-border-color: var(--cirth-card-border-color);
+  --cirth-dropdown-hover-background-color: var(--cirth-card-sectioning-background-color);
+  --cirth-modal-overlay-background-color: oklch(9% .011 280deg / var(--cirth-opacity-overlay));
   --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");
-}
-:where([data-theme="dark"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
-  --cirth-form-element-focus-color: var(--cirth-primary-focus);
+  --cirth-progress-color: var(--cirth-primary);
+  --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(142, 144, 161)' 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(142, 144, 161)' 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(142, 144, 161)' 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(142, 144, 161)' 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, 216, 131)' 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, 158, 155)' 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");
 }
 :where([data-theme="dark"]) details summary[role="button"].contrast:not(.outline):after, :where([data-theme="dark"]) [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
@@ -2710,120 +2926,120 @@ progress, [type="checkbox"], [type="radio"], [type="range"] {
 @media (prefers-contrast: more) {
   :where([data-theme="light"]), :root:where(:not([data-theme="dark"])), :host(:where(:not([data-theme="dark"]))) {
-    --cirth-color: oklch(22.3% .006 264);
+    --cirth-ink: oklch(22.3% .023 280);
     --cirth-h1-color: var(--cirth-color);
     --cirth-h2-color: var(--cirth-color);
     --cirth-h3-color: var(--cirth-color);
     --cirth-h4-color: var(--cirth-color);
     --cirth-h5-color: var(--cirth-color);
     --cirth-h6-color: var(--cirth-color);
-    --cirth-muted-color: oklch(39.7% .025 264);
-    --cirth-secondary: oklch(39.7% .025 264);
-    --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);
-    --cirth-primary: oklch(39.7% .073 69.35);
-    --cirth-primary-hover: oklch(31% .057 69.35);
+    --cirth-muted-color: oklch(39.7% .028 280);
+    --cirth-secondary: oklch(39.7% .028 280);
+    --cirth-code-color: oklch(35.3% .027 280);
+    --cirth-link-visited-color: oklch(35.3% .027 280);
+    --cirth-muted-border-color: oklch(57% .032 280);
+    --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(68, 69, 86)' 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(68, 69, 86)' 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(68, 69, 86)' 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(68, 69, 86)' 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% .028 280);
+    --cirth-form-element-invalid-border-color: oklch(48.3% .165 22);
+    --cirth-form-element-valid-border-color: oklch(48.3% .106 153);
+    --cirth-primary: oklch(39.7% .081 44);
+    --cirth-primary-hover: oklch(31% .063 44);
     --cirth-primary-underline: var(--cirth-primary);
     --cirth-secondary-underline: var(--cirth-secondary);
     --cirth-contrast-underline: var(--cirth-contrast);
-    --cirth-primary-focus: oklch(48.3% .089 69.35);
-    --cirth-secondary-focus: oklch(48.3% .03 264);
-    --cirth-contrast-focus: oklch(48.3% .03 264);
-    --cirth-switch-background-color: oklch(48.3% .03 264);
-    --cirth-progress-border-color: oklch(48.3% .03 264);
-    --cirth-meter-optimum-color: oklch(44% .084 160.59);
-    --cirth-meter-suboptimum-color: oklch(39.7% .07 78);
-    --cirth-meter-even-less-good-color: oklch(35.3% .122 29.73);
+    --cirth-primary-focus: oklch(48.3% .098 44);
+    --cirth-secondary-focus: oklch(48.3% .03 280);
+    --cirth-contrast-focus: oklch(48.3% .03 280);
+    --cirth-switch-background-color: oklch(48.3% .03 280);
+    --cirth-progress-border-color: oklch(48.3% .03 280);
+    --cirth-meter-optimum-color: oklch(44% .096 153);
+    --cirth-meter-suboptimum-color: oklch(39.7% .069 89.5);
+    --cirth-meter-even-less-good-color: oklch(35.3% .121 22);
     --cirth-dropdown-border-color: var(--cirth-muted-border-color);
   }
 }
 @media only screen and (prefers-contrast: more) and (prefers-color-scheme: dark) {
   :root:where(:not([data-theme])), :host(:where(:not([data-theme]))) {
-    --cirth-color: oklch(96% 0 264);
+    --cirth-ink: oklch(96% 0 280);
     --cirth-h1-color: var(--cirth-color);
     --cirth-h2-color: var(--cirth-color);
     --cirth-h3-color: var(--cirth-color);
     --cirth-h4-color: var(--cirth-color);
     --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);
-    --cirth-muted-border-color: oklch(57% .032 264);
+    --cirth-muted-color: oklch(78.7% .014 280);
+    --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(183, 185, 195)' 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(183, 185, 195)' 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(183, 185, 195)' 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(183, 185, 195)' 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% .014 280);
+    --cirth-code-color: oklch(83% .011 280);
+    --cirth-link-visited-color: oklch(78.7% .014 280);
+    --cirth-muted-border-color: oklch(57% .032 280);
     --cirth-card-border-color: var(--cirth-muted-border-color);
-    --cirth-form-element-border-color: oklch(70% .028 264);
-    --cirth-form-element-invalid-border-color: oklch(78.7% .106 29.73);
-    --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-form-element-border-color: oklch(70% .021 280);
+    --cirth-form-element-invalid-border-color: oklch(78.7% .105 22);
+    --cirth-form-element-valid-border-color: oklch(78.7% .172 153);
+    --cirth-primary: oklch(78.7% .092 44);
+    --cirth-primary-hover: oklch(87.3% .051 44);
+    --cirth-primary-background: oklch(44% .09 44);
+    --cirth-primary-hover-background: oklch(39.7% .081 44);
     --cirth-primary-underline: var(--cirth-primary);
     --cirth-secondary-underline: var(--cirth-secondary);
     --cirth-contrast-underline: var(--cirth-contrast);
-    --cirth-primary-focus: oklch(70% .129 69.35);
-    --cirth-secondary-focus: oklch(70% .028 264);
-    --cirth-contrast-focus: oklch(87.3% .011 264);
-    --cirth-switch-background-color: oklch(65.7% .03 264);
-    --cirth-progress-border-color: oklch(70% .028 264);
-    --cirth-meter-optimum-color: oklch(74.3% .142 160.59);
-    --cirth-meter-suboptimum-color: oklch(78.7% .139 78);
-    --cirth-meter-even-less-good-color: oklch(83% .081 29.73);
+    --cirth-primary-focus: oklch(70% .141 44);
+    --cirth-secondary-focus: oklch(70% .021 280);
+    --cirth-contrast-focus: oklch(87.3% .007 280);
+    --cirth-switch-background-color: oklch(65.7% .025 280);
+    --cirth-progress-border-color: oklch(70% .021 280);
+    --cirth-meter-optimum-color: oklch(74.3% .163 153);
+    --cirth-meter-suboptimum-color: oklch(78.7% .137 89.5);
+    --cirth-meter-even-less-good-color: oklch(83% .08 22);
     --cirth-dropdown-border-color: var(--cirth-muted-border-color);
   }
 }
 @media (prefers-contrast: more) {
   :where([data-theme="dark"]) {
-    --cirth-color: oklch(96% 0 264);
+    --cirth-ink: oklch(96% 0 280);
     --cirth-h1-color: var(--cirth-color);
     --cirth-h2-color: var(--cirth-color);
     --cirth-h3-color: var(--cirth-color);
     --cirth-h4-color: var(--cirth-color);
     --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);
-    --cirth-muted-border-color: oklch(57% .032 264);
+    --cirth-muted-color: oklch(78.7% .014 280);
+    --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(183, 185, 195)' 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(183, 185, 195)' 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(183, 185, 195)' 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(183, 185, 195)' 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% .014 280);
+    --cirth-code-color: oklch(83% .011 280);
+    --cirth-link-visited-color: oklch(78.7% .014 280);
+    --cirth-muted-border-color: oklch(57% .032 280);
     --cirth-card-border-color: var(--cirth-muted-border-color);
-    --cirth-form-element-border-color: oklch(70% .028 264);
-    --cirth-form-element-invalid-border-color: oklch(78.7% .106 29.73);
-    --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-form-element-border-color: oklch(70% .021 280);
+    --cirth-form-element-invalid-border-color: oklch(78.7% .105 22);
+    --cirth-form-element-valid-border-color: oklch(78.7% .172 153);
+    --cirth-primary: oklch(78.7% .092 44);
+    --cirth-primary-hover: oklch(87.3% .051 44);
+    --cirth-primary-background: oklch(44% .09 44);
+    --cirth-primary-hover-background: oklch(39.7% .081 44);
     --cirth-primary-underline: var(--cirth-primary);
     --cirth-secondary-underline: var(--cirth-secondary);
     --cirth-contrast-underline: var(--cirth-contrast);
-    --cirth-primary-focus: oklch(70% .129 69.35);
-    --cirth-secondary-focus: oklch(70% .028 264);
-    --cirth-contrast-focus: oklch(87.3% .011 264);
-    --cirth-switch-background-color: oklch(65.7% .03 264);
-    --cirth-progress-border-color: oklch(70% .028 264);
-    --cirth-meter-optimum-color: oklch(74.3% .142 160.59);
-    --cirth-meter-suboptimum-color: oklch(78.7% .139 78);
-    --cirth-meter-even-less-good-color: oklch(83% .081 29.73);
+    --cirth-primary-focus: oklch(70% .141 44);
+    --cirth-secondary-focus: oklch(70% .021 280);
+    --cirth-contrast-focus: oklch(87.3% .007 280);
+    --cirth-switch-background-color: oklch(65.7% .025 280);
+    --cirth-progress-border-color: oklch(70% .021 280);
+    --cirth-meter-optimum-color: oklch(74.3% .163 153);
+    --cirth-meter-suboptimum-color: oklch(78.7% .137 89.5);
+    --cirth-meter-even-less-good-color: oklch(83% .08 22);
     --cirth-dropdown-border-color: var(--cirth-muted-border-color);
   }
 }