@cirthcss/cirth 0.8.4 → 0.9.0

package/README.md

@@ -9,13 +9,14 @@
 <h1 align="center">Cirth</h1>
 
 <p align="center">
-  <strong>Write HTML. It's already styled.</strong>
+  <strong>Production-ready UI from semantic HTML.</strong>
 </p>
 
 <p align="center">
-  Semantic-first CSS where standard elements carry the styling: nav,
-  article, button, table. Classes exist only for the few things HTML can't
-  say.
+  Cirth turns native HTML elements into accessible, themeable interfaces.
+  Load one stylesheet, customize it with runtime design tokens, and ship
+  with zero JavaScript and no required build step. Under 14KB gzipped ·
+  0 JavaScript · WCAG 2.2 AA baseline.
 </p>
 
 <p align="center">
@@ -33,7 +34,7 @@
   ·
   <a href="#browser-support">Browser support</a>
   ·
-  <a href="#philosophy">Philosophy</a>
+  <a href="#design-principles">Design principles</a>
 </p>
 
 <p align="center">
@@ -52,7 +53,11 @@
 Include one stylesheet and write ordinary semantic HTML.
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@cirthcss/cirth@0.8.4/dist/cirth.min.css">
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@cirthcss/cirth@0.9.0/dist/cirth.min.css"
+  integrity="sha384-GcsDrZOEcXva08eOmuqAN405xtTxYjeaLGAJWQwIDzwHLPGiAngOnCO0PK8xs/MR"
+  crossorigin="anonymous">
 ```
 
 ```html
@@ -195,7 +200,7 @@ detail.
 
 The full documentation is published at
 [cirthcss.github.io/cirth](https://cirthcss.github.io/cirth/), built from
-[`docs/`](docs/) as an [Astro](https://astro.build) site with live
+[`docs/`](docs/) as an [Eleventy](https://11ty.dev) site with live
 examples. The site itself is styled with Cirth's own default build — the
 header, sidebar, prose, and every demo are ordinary semantic HTML dogfooding
 the framework.
@@ -293,18 +298,20 @@ against this Browserslist target:
 
 No version of Internet Explorer is supported.
 
-## Philosophy
+## Design principles
 
-Cirth is a semantic-first CSS framework. Standard HTML elements should carry
-most of the structure, meaning, and styling burden before a class is needed.
+Cirth is an HTML-native CSS framework: standard HTML elements carry most of
+the structure, meaning, and styling burden before a class is needed.
 
-Core principles:
-
-- Style semantic HTML by default.
-- Use classes only where HTML semantics are not enough.
-- Keep layout primitives small and structural.
-- Avoid utility-first class soup and broad component catalogs.
-- Keep customization based on CSS custom properties.
+- Style semantic HTML by default; add classes only where HTML semantics run
+  out.
+- Keep layout primitives small and structural, not a broad component
+  catalog.
+- Customize through runtime CSS custom properties, not a build step.
+- Ship zero JavaScript; interactive patterns use native element behavior.
+- Hold the default stylesheet to a 14KB gzipped size budget, checked on
+  every build. See [About Cirth](docs/src/pages/about.md#the-14kb-size-budget)
+  for why 14KB specifically.
 
 ## License
 

package/dist/cirth.classless.css

@@ -139,7 +139,7 @@ hgroup > :not(:first-child):last-child {
   margin-bottom: calc(var(--cirth-typography-spacing-vertical) * .25);
 }
 
-:where(dl, ol, ul) :where(dl, ol, ul) {
+:is(dl, ol, ul) :is(dl, ol, ul) {
   margin: 0;
   margin-top: calc(var(--cirth-typography-spacing-vertical) * .25);
 }
@@ -212,6 +212,10 @@ del {
   outline: var(--cirth-outline-width) solid transparent;
 }
 
+:where(a:not([role="button"])):visited:not([aria-current]:not([aria-current="false"]), :hover, :active, :focus, nav a) {
+  color: var(--cirth-link-visited-color);
+}
+
 a[role="button"] {
   display: inline-block;
 }
@@ -231,6 +235,7 @@ button, [type="submit"], [type="reset"], [type="button"], [role="button"] {
   --cirth-border-color: var(--cirth-primary-border);
   --cirth-color: var(--cirth-primary-inverse);
   --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
+  max-width: 100%;
   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);
@@ -254,6 +259,7 @@ button, [type="submit"], [type="reset"], [type="button"], [role="button"] {
   --cirth-border-color: var(--cirth-primary-border);
   --cirth-color: var(--cirth-primary-inverse);
   --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
+  max-width: 100%;
   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);
@@ -599,52 +605,52 @@ label[aria-disabled="true"] input[disabled] {
   opacity: 1;
 }
 
-:where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"]):is([aria-invalid], :user-invalid:not([aria-invalid]), :user-valid:not([aria-invalid])) {
+:where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"]):is([aria-invalid], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)) {
   padding-inline: var(--cirth-form-element-spacing-horizontal) calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
   background-position: center right var(--cirth-space-3);
   background-size: var(--cirth-size-4) auto;
   background-repeat: no-repeat;
 }
 
-:where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"]):is([aria-invalid="false"], :user-valid:not([aria-invalid])):not(select) {
+:where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid="false"]:not(select) {
   background-image: var(--cirth-icon-valid);
 }
 
-:where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"]):is([aria-invalid="true"], :user-invalid:not([aria-invalid])):not(select) {
+:where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"]):is([aria-invalid="true"], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)):not(select) {
   background-image: var(--cirth-icon-invalid);
 }
 
-:where(input, select, textarea):is([aria-invalid="false"], :user-valid:not([aria-invalid])) {
+:where(input, select, textarea)[aria-invalid="false"] {
   --cirth-border-color: var(--cirth-form-element-valid-border-color);
 }
 
-:where(input, select, textarea):is([aria-invalid="false"], :user-valid:not([aria-invalid])):is(:active, :focus) {
+:where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus) {
   --cirth-border-color: var(--cirth-form-element-valid-active-border-color);
 }
 
-:where(input, select, textarea):is([aria-invalid="false"], :user-valid:not([aria-invalid])):is(:active, :focus):not([type="checkbox"], [type="radio"]) {
+:where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) {
   --cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
     var(--cirth-form-element-valid-focus-color);
 }
 
-:where(input, select, textarea):is([aria-invalid="true"], :user-invalid:not([aria-invalid])) {
+:where(input, select, textarea):is([aria-invalid="true"], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)) {
   --cirth-border-color: var(--cirth-form-element-invalid-border-color);
 }
 
-:where(input, select, textarea):is([aria-invalid="true"], :user-invalid:not([aria-invalid])):is(:active, :focus) {
+:where(input, select, textarea):is([aria-invalid="true"], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)):is(:active, :focus) {
   --cirth-border-color: var(--cirth-form-element-invalid-active-border-color);
 }
 
-:where(input, select, textarea):is([aria-invalid="true"], :user-invalid:not([aria-invalid])):is(:active, :focus):not([type="checkbox"], [type="radio"]) {
+:where(input, select, textarea):is([aria-invalid="true"], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)):is(:active, :focus):not([type="checkbox"], [type="radio"]) {
   --cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
     var(--cirth-form-element-invalid-focus-color);
 }
 
-[dir="rtl"] :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is([aria-invalid], :user-invalid:not([aria-invalid]), :user-valid:not([aria-invalid])) {
+[dir="rtl"] :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is([aria-invalid], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)) {
   background-position: center left var(--cirth-space-3);
 }
 
-[dir="rtl"] textarea:is([aria-invalid], :user-invalid:not([aria-invalid]), :user-valid:not([aria-invalid])) {
+[dir="rtl"] textarea:is([aria-invalid], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)) {
   background-position: top left var(--cirth-space-3);
 }
 
@@ -679,7 +685,7 @@ textarea {
   display: block;
 }
 
-textarea:is([aria-invalid], :user-invalid:not([aria-invalid]), :user-valid:not([aria-invalid])) {
+textarea:is([aria-invalid], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)) {
   --cirth-icon-height: calc(var(--cirth-size-4) * var(--cirth-line-height) +
       var(--cirth-form-element-spacing-vertical) * 2 +
       var(--cirth-border-width) * 2);
@@ -695,11 +701,11 @@ textarea:is([aria-invalid], :user-invalid:not([aria-invalid]), :user-valid:not([
   display: block;
 }
 
-:where(input, select, textarea, fieldset):is([aria-invalid="false"], :user-valid:not([aria-invalid])) + small {
+:where(input, select, textarea, fieldset)[aria-invalid="false"] + small {
   color: var(--cirth-ins-color);
 }
 
-:where(input, select, textarea, fieldset):is([aria-invalid="true"], :user-invalid:not([aria-invalid])) + small {
+:where(input, select, textarea, fieldset):is([aria-invalid="true"], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)) + small {
   color: var(--cirth-del-color);
 }
 
@@ -851,6 +857,7 @@ label:has([type="checkbox"], [type="radio"]) {
 input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
   --cirth-icon-position: var(--cirth-space-3);
   --cirth-icon-width: var(--cirth-size-4);
+  min-width: 0;
   background-image: var(--cirth-icon-date);
   background-position: center right var(--cirth-icon-position);
   background-size: var(--cirth-icon-width) auto;
@@ -1186,28 +1193,28 @@ article > footer {
   margin-bottom: 0;
 }
 
-[role="search"] > *, [role="search"] input:not([type="checkbox"], [type="radio"]), [role="search"] select, [role="group"]:not(fieldset) > *, [role="group"]:not(fieldset) input:not([type="checkbox"], [type="radio"]), [role="group"]:not(fieldset) select {
+[role="search"] > :not([hidden], input[type="hidden"]), [role="search"] input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]), [role="search"] select:not([hidden]), [role="group"]:not(fieldset) > :not([hidden], input[type="hidden"]), [role="group"]:not(fieldset) input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]), [role="group"]:not(fieldset) select:not([hidden]) {
   flex: auto;
   margin-bottom: 0;
   position: relative;
 }
 
-[role="search"] > :is(input, select, textarea), [role="search"] input:not([type="checkbox"], [type="radio"]):is(input, select, textarea), [role="search"] select:is(input, select, textarea), [role="group"]:not(fieldset) > :is(input, select, textarea), [role="group"]:not(fieldset) input:not([type="checkbox"], [type="radio"]):is(input, select, textarea), [role="group"]:not(fieldset) select:is(input, select, textarea) {
+[role="search"] > :not([hidden], input[type="hidden"]):is(input, select, textarea), [role="search"] input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):is(input, select, textarea), [role="search"] select:not([hidden]):is(input, select, textarea), [role="group"]:not(fieldset) > :not([hidden], input[type="hidden"]):is(input, select, textarea), [role="group"]:not(fieldset) input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):is(input, select, textarea), [role="group"]:not(fieldset) select:not([hidden]):is(input, select, textarea) {
   flex: 99;
 }
 
-[role="search"] > :not(:first-child), [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child), [role="search"] select:not(:first-child), [role="group"]:not(fieldset) > :not(:first-child), [role="group"]:not(fieldset) input:not([type="checkbox"], [type="radio"]):not(:first-child), [role="group"]:not(fieldset) select:not(:first-child) {
+[role="search"] > :not([hidden], input[type="hidden"]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))), [role="search"] input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))), [role="search"] select:not([hidden]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))), [role="group"]:not(fieldset) > :not([hidden], input[type="hidden"]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))), [role="group"]:not(fieldset) input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))), [role="group"]:not(fieldset) select:not([hidden]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))) {
   border-start-start-radius: 0;
   border-end-start-radius: 0;
   margin-inline-start: 0;
 }
 
-[role="search"] > :not(:last-child), [role="search"] input:not([type="checkbox"], [type="radio"]):not(:last-child), [role="search"] select:not(:last-child), [role="group"]:not(fieldset) > :not(:last-child), [role="group"]:not(fieldset) input:not([type="checkbox"], [type="radio"]):not(:last-child), [role="group"]:not(fieldset) select:not(:last-child) {
+[role="search"] > :not([hidden], input[type="hidden"]):not(:nth-last-child(1 of :not([hidden], input[type="hidden"]))), [role="search"] input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):not(:nth-last-child(1 of :not([hidden], input[type="hidden"]))), [role="search"] select:not([hidden]):not(:nth-last-child(1 of :not([hidden], input[type="hidden"]))), [role="group"]:not(fieldset) > :not([hidden], input[type="hidden"]):not(:nth-last-child(1 of :not([hidden], input[type="hidden"]))), [role="group"]:not(fieldset) input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):not(:nth-last-child(1 of :not([hidden], input[type="hidden"]))), [role="group"]:not(fieldset) select:not([hidden]):not(:nth-last-child(1 of :not([hidden], input[type="hidden"]))) {
   border-start-end-radius: 0;
   border-end-end-radius: 0;
 }
 
-[role="search"] > :focus, [role="search"] input:not([type="checkbox"], [type="radio"]):focus, [role="search"] select:focus, [role="group"]:not(fieldset) > :focus, [role="group"]:not(fieldset) input:not([type="checkbox"], [type="radio"]):focus, [role="group"]:not(fieldset) select:focus {
+[role="search"] > :not([hidden], input[type="hidden"]):focus, [role="search"] input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):focus, [role="search"] select:not([hidden]):focus, [role="group"]:not(fieldset) > :not([hidden], input[type="hidden"]):focus, [role="group"]:not(fieldset) input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):focus, [role="group"]:not(fieldset) select:not([hidden]):focus {
   z-index: 2;
 }
 
@@ -1221,7 +1228,7 @@ article > footer {
   border-end-end-radius: var(--cirth-border-radius);
 }
 
-[role="search"] button:not(:first-child), [role="search"] [type="submit"]:not(:first-child), [role="search"] [type="reset"]:not(:first-child), [role="search"] [type="button"]:not(:first-child), [role="search"] [role="button"]:not(:first-child), [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child), [role="search"] select:not(:first-child), [role="group"]:not(fieldset) button:not(:first-child), [role="group"]:not(fieldset) [type="submit"]:not(:first-child), [role="group"]:not(fieldset) [type="reset"]:not(:first-child), [role="group"]:not(fieldset) [type="button"]:not(:first-child), [role="group"]:not(fieldset) [role="button"]:not(:first-child), [role="group"]:not(fieldset) input:not([type="checkbox"], [type="radio"]):not(:first-child), [role="group"]:not(fieldset) select:not(:first-child) {
+[role="search"] button:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), [role="search"] [type="submit"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), [role="search"] [type="reset"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), [role="search"] [type="button"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), [role="search"] [role="button"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), [role="search"] input:not([type="checkbox"], [type="radio"]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))), [role="search"] select:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), [role="group"]:not(fieldset) button:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), [role="group"]:not(fieldset) [type="submit"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), [role="group"]:not(fieldset) [type="reset"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), [role="group"]:not(fieldset) [type="button"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), [role="group"]:not(fieldset) [role="button"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), [role="group"]:not(fieldset) input:not([type="checkbox"], [type="radio"]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))), [role="group"]:not(fieldset) select:not(:nth-child(1 of :not([hidden], input[type="hidden"]))) {
   margin-inline-start: calc(var(--cirth-border-width) * -1);
 }
 
@@ -1323,12 +1330,12 @@ article > footer {
   }
 }
 
-[role="search"] > :first-child {
+[role="search"] > :not([hidden], input[type="hidden"]):nth-child(1 of :not([hidden], input[type="hidden"])) {
   border-start-start-radius: var(--cirth-radius-pill);
   border-end-start-radius: var(--cirth-radius-pill);
 }
 
-[role="search"] > :last-child {
+[role="search"] > :not([hidden], input[type="hidden"]):nth-last-child(1 of :not([hidden], input[type="hidden"])) {
   border-start-end-radius: var(--cirth-radius-pill);
   border-end-end-radius: var(--cirth-radius-pill);
 }
@@ -1371,6 +1378,10 @@ article > footer {
   text-align: center;
 }
 
+:is(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[aria-busy="true"] {
+  white-space: normal;
+}
+
 input:is([type="submit"], [type="button"], [type="reset"])[aria-busy="true"] {
   background-image: var(--cirth-icon-loading);
   background-position: center left var(--cirth-form-element-spacing-horizontal);
@@ -2058,6 +2069,10 @@ input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [
   --cirth-border-radius: var(--cirth-radius-pill);
 }
 
+[role="group"]:not(fieldset) [type="search"] {
+  --cirth-border-radius: inherit;
+}
+
 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);
@@ -2096,7 +2111,7 @@ details summary[role="button"]:after {
   --lightningcss-light: initial;
   --lightningcss-dark: ;
   color-scheme: light;
-  --cirth-background-color: oklch(97.4% .008 69.35);
+  --cirth-background-color: oklch(97.4% .004 69.35);
   --cirth-color: oklch(35.3% .021 264);
   --cirth-text-selection-color: oklch(65.7% .121 69.35 / .25);
   --cirth-muted-color: oklch(52.7% .032 264);
@@ -2131,13 +2146,14 @@ details summary[role="button"]:after {
   --cirth-contrast-hover-underline: var(--cirth-secondary-hover);
   --cirth-contrast-focus: oklch(48.3% .03 264 / .7);
   --cirth-contrast-inverse: oklch(100% 0 0);
+  --cirth-link-visited-color: oklch(48.3% .03 264);
   --cirth-box-shadow: .0145rem .029rem .174rem oklch(65.7% .03 264 / .01698), .0335rem .067rem .402rem oklch(65.7% .03 264 / .024), .0625rem .125rem .75rem oklch(65.7% .03 264 / .03), .1125rem .225rem 1.35rem oklch(65.7% .03 264 / .036), .2085rem .417rem 2.502rem oklch(65.7% .03 264 / .04302), .5rem 1rem 6rem oklch(65.7% .03 264 / .06), 0 0 0 .0625rem oklch(65.7% .03 264 / .015);
-  --cirth-h1-color: oklch(31% .016 264);
-  --cirth-h2-color: oklch(35.3% .021 264);
-  --cirth-h3-color: oklch(39.7% .025 264);
-  --cirth-h4-color: oklch(44% .028 264);
-  --cirth-h5-color: oklch(48.3% .03 264);
-  --cirth-h6-color: oklch(52.7% .032 264);
+  --cirth-h1-color: oklch(22.3% .006 264);
+  --cirth-h2-color: oklch(26.7% .011 264);
+  --cirth-h3-color: oklch(31% .016 264);
+  --cirth-h4-color: oklch(35.3% .021 264);
+  --cirth-h5-color: oklch(39.7% .025 264);
+  --cirth-h6-color: oklch(44% .028 264);
   --cirth-mark-background-color: oklch(93% .05 78);
   --cirth-mark-color: oklch(18% 0 264);
   --cirth-ins-color: oklch(35.3% .067 160.59);
@@ -2239,6 +2255,7 @@ details summary[role="button"]:after {
     --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
     --cirth-contrast-focus: oklch(87.3% .011 264 / .5);
     --cirth-contrast-inverse: oklch(0% 0 0);
+    --cirth-link-visited-color: oklch(65.7% .03 264);
     --cirth-box-shadow: .0145rem .029rem .174rem oklch(9% 0 312 / .01698), .0335rem .067rem .402rem oklch(9% 0 312 / .024), .0625rem .125rem .75rem oklch(9% 0 312 / .03), .1125rem .225rem 1.35rem oklch(9% 0 312 / .036), .2085rem .417rem 2.502rem oklch(9% 0 312 / .04302), .5rem 1rem 6rem oklch(9% 0 312 / .06), 0 0 0 .0625rem oklch(9% 0 312 / .015);
     --cirth-h1-color: oklch(96% 0 264);
     --cirth-h2-color: oklch(91.7% .006 264);
@@ -2347,6 +2364,7 @@ details summary[role="button"]:after {
   --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
   --cirth-contrast-focus: oklch(87.3% .011 264 / .5);
   --cirth-contrast-inverse: oklch(0% 0 0);
+  --cirth-link-visited-color: oklch(65.7% .03 264);
   --cirth-box-shadow: .0145rem .029rem .174rem oklch(9% 0 312 / .01698), .0335rem .067rem .402rem oklch(9% 0 312 / .024), .0625rem .125rem .75rem oklch(9% 0 312 / .03), .1125rem .225rem 1.35rem oklch(9% 0 312 / .036), .2085rem .417rem 2.502rem oklch(9% 0 312 / .04302), .5rem 1rem 6rem oklch(9% 0 312 / .06), 0 0 0 .0625rem oklch(9% 0 312 / .015);
   --cirth-h1-color: oklch(96% 0 264);
   --cirth-h2-color: oklch(91.7% .006 264);