@cirthcss/cirth 0.8.5 → 0.10.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.5/dist/cirth.min.css">
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@cirthcss/cirth@0.10.0/dist/cirth.min.css"
+  integrity="sha384-eryxoPjA1vogVlspjzxHv7EDws0Ns2llZpU+nFSO6MKh58+TqPrpTxm/nBZcjAuE"
+  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.
@@ -242,13 +247,16 @@ npm run docs:dev
   [Dropdown](docs/src/pages/components/dropdown.md) ·
   [Group](docs/src/pages/components/group.md) ·
   [Loading](docs/src/pages/components/loading.md) ·
+  [Meter](docs/src/pages/components/meter.md) ·
   [Modal](docs/src/pages/components/modal.md) ·
   [Nav](docs/src/pages/components/nav.md) ·
   [Progress](docs/src/pages/components/progress.md) ·
   [Tooltip](docs/src/pages/components/tooltip.md)
 - **Utilities** —
   [Accessibility](docs/src/pages/utilities/accessibility.md) ·
-  [Reduce motion](docs/src/pages/utilities/reduce-motion.md)
+  [High contrast](docs/src/pages/utilities/high-contrast.md) ·
+  [Reduce motion](docs/src/pages/utilities/reduce-motion.md) ·
+  [Print](docs/src/pages/utilities/print.md)
 - **Project** —
   [Examples](docs/src/pages/examples.md) ·
   [Contributions](docs/src/pages/contributions.md) ·
@@ -293,18 +301,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);
@@ -1372,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);
@@ -1388,6 +1398,50 @@ button[aria-busy="true"], [type="submit"][aria-busy="true"], [type="button"][ari
   pointer-events: none;
 }
 
+meter {
+  appearance: none;
+  width: 100%;
+  height: var(--cirth-size-2);
+  margin-bottom: calc(var(--cirth-spacing) * .5);
+  border: var(--cirth-border-width-1) solid var(--cirth-meter-border-color);
+  border-radius: var(--cirth-border-radius);
+  background: var(--cirth-meter-background-color);
+  display: inline-block;
+  overflow: hidden;
+}
+
+meter::-webkit-meter-bar {
+  background: none;
+}
+
+meter::-webkit-meter-inner-element {
+  display: flex;
+}
+
+meter::-webkit-meter-optimum-value {
+  background: var(--cirth-meter-optimum-color);
+}
+
+meter::-webkit-meter-suboptimum-value {
+  background: var(--cirth-meter-suboptimum-color);
+}
+
+meter::-webkit-meter-even-less-good-value {
+  background: var(--cirth-meter-even-less-good-color);
+}
+
+meter::-moz-meter-bar {
+  background: var(--cirth-meter-optimum-color);
+}
+
+meter:-moz-meter-sub-optimum::-moz-meter-bar {
+  background: var(--cirth-meter-suboptimum-color);
+}
+
+meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+  background: var(--cirth-meter-even-less-good-color);
+}
+
 :root, :host {
   --cirth-scrollbar-width: 0px;
 }
@@ -1955,6 +2009,8 @@ progress::-moz-progress-bar {
     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-meter-background-color: var(--cirth-progress-background-color);
+  --cirth-meter-border-color: var(--cirth-progress-border-color);
   --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);
@@ -2059,6 +2115,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);
@@ -2093,11 +2153,11 @@ details summary[role="button"]:after {
   filter: brightness(0) invert();
 }
 
-[data-theme="light"], :root:not([data-theme="dark"]), :host(:not([data-theme="dark"])) {
+:where([data-theme="light"]), :root:where(:not([data-theme="dark"])), :host(:where(:not([data-theme="dark"]))) {
   --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);
@@ -2132,13 +2192,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);
@@ -2187,6 +2248,9 @@ details summary[role="button"]:after {
   --cirth-card-sectioning-background-color: oklch(99% 0 336);
   --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
   --cirth-modal-overlay-background-color: oklch(93.85% .003 264deg / var(--cirth-opacity-overlay));
+  --cirth-meter-optimum-color: oklch(52.7% .1 160.59);
+  --cirth-meter-suboptimum-color: oklch(48.3% .086 78);
+  --cirth-meter-even-less-good-color: oklch(44% .151 29.73);
   --cirth-progress-background-color: oklch(91.7% .006 264);
   --cirth-progress-border-color: oklch(61.3% .032 264);
   --cirth-progress-color: var(--cirth-primary-background);
@@ -2196,12 +2260,12 @@ details summary[role="button"]:after {
   --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' 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");
 }
 
-[data-theme="light"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), :root:not([data-theme="dark"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), :host(:not([data-theme="dark"])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
+: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);
 }
 
 @media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]), :host(:not([data-theme])) {
+  :root:where(:not([data-theme])), :host(:where(:not([data-theme]))) {
     --lightningcss-light: ;
     --lightningcss-dark: initial;
     color-scheme: dark;
@@ -2240,6 +2304,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);
@@ -2295,6 +2360,9 @@ details summary[role="button"]:after {
     --cirth-card-sectioning-background-color: oklch(23.4% .00725 264);
     --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
     --cirth-modal-overlay-background-color: oklch(9% 0 312deg / var(--cirth-opacity-overlay));
+    --cirth-meter-optimum-color: oklch(65.7% .125 160.59);
+    --cirth-meter-suboptimum-color: oklch(70% .124 78);
+    --cirth-meter-even-less-good-color: oklch(74.3% .133 29.73);
     --cirth-progress-background-color: oklch(26.7% .011 264);
     --cirth-progress-border-color: oklch(52.7% .032 264);
     --cirth-progress-color: oklch(61.3% .113 69.35);
@@ -2304,12 +2372,12 @@ details summary[role="button"]:after {
     --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' 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:not([data-theme]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), :host(:not([data-theme])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
+  :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);
   }
 }
 
-[data-theme="dark"] {
+:where([data-theme="dark"]) {
   --lightningcss-light: ;
   --lightningcss-dark: initial;
   color-scheme: dark;
@@ -2348,6 +2416,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);
@@ -2403,6 +2472,9 @@ details summary[role="button"]:after {
   --cirth-card-sectioning-background-color: oklch(23.4% .00725 264);
   --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
   --cirth-modal-overlay-background-color: oklch(9% 0 312deg / var(--cirth-opacity-overlay));
+  --cirth-meter-optimum-color: oklch(65.7% .125 160.59);
+  --cirth-meter-suboptimum-color: oklch(70% .124 78);
+  --cirth-meter-even-less-good-color: oklch(74.3% .133 29.73);
   --cirth-progress-background-color: oklch(26.7% .011 264);
   --cirth-progress-border-color: oklch(52.7% .032 264);
   --cirth-progress-color: oklch(61.3% .113 69.35);
@@ -2412,10 +2484,244 @@ details summary[role="button"]:after {
   --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' 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");
 }
 
-[data-theme="dark"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
+: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);
 }
 
 progress, [type="checkbox"], [type="radio"], [type="range"] {
   accent-color: var(--cirth-primary);
 }
+
+@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-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-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-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);
+  }
+}
+
+@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-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-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-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-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);
+  }
+}
+
+@media (prefers-contrast: more) {
+  :where([data-theme="dark"]) {
+    --cirth-color: oklch(96% 0 264);
+    --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-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-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-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);
+  }
+}
+
+@media print {
+  :root, :host {
+    --cirth-print-color: oklch(0% 0 0);
+    --cirth-print-muted-color: oklch(48.3% .03 264);
+    --cirth-print-border-color: oklch(61.3% .032 264);
+  }
+
+  html {
+    --lightningcss-light: initial;
+    --lightningcss-dark: ;
+    color-scheme: light;
+    background: none;
+  }
+
+  body {
+    color: var(--cirth-print-color);
+    --lightningcss-light: initial;
+    --lightningcss-dark: ;
+    color-scheme: light;
+    --cirth-color: var(--cirth-print-color);
+    --cirth-h1-color: var(--cirth-print-color);
+    --cirth-h2-color: var(--cirth-print-color);
+    --cirth-h3-color: var(--cirth-print-color);
+    --cirth-h4-color: var(--cirth-print-color);
+    --cirth-h5-color: var(--cirth-print-color);
+    --cirth-h6-color: var(--cirth-print-color);
+    --cirth-code-color: var(--cirth-print-color);
+    --cirth-code-kbd-color: var(--cirth-print-color);
+    --cirth-form-element-color: var(--cirth-print-color);
+    --cirth-muted-color: var(--cirth-print-muted-color);
+    --cirth-form-element-placeholder-color: var(--cirth-print-muted-color);
+    --cirth-primary: var(--cirth-print-color);
+    --cirth-primary-hover: var(--cirth-print-color);
+    --cirth-primary-underline: var(--cirth-print-color);
+    --cirth-secondary: var(--cirth-print-color);
+    --cirth-secondary-underline: var(--cirth-print-color);
+    --cirth-contrast: var(--cirth-print-color);
+    --cirth-contrast-underline: var(--cirth-print-color);
+    --cirth-link-visited-color: var(--cirth-print-color);
+    --cirth-muted-border-color: var(--cirth-print-border-color);
+    --cirth-form-element-border-color: var(--cirth-print-border-color);
+    --cirth-box-shadow: none;
+    --cirth-card-box-shadow: none;
+    --cirth-card-background-color: transparent;
+    --cirth-card-sectioning-background-color: transparent;
+    --cirth-code-background-color: transparent;
+    --cirth-code-kbd-background-color: transparent;
+    --cirth-form-element-background-color: transparent;
+    --cirth-form-element-active-background-color: transparent;
+    --cirth-table-row-stripped-background-color: transparent;
+    --cirth-modal-overlay-background-color: transparent;
+    --cirth-ins-color: oklch(35.3% .067 160.59);
+    --cirth-del-color: oklch(35.3% .122 29.73);
+    --cirth-meter-optimum-color: oklch(52.7% .1 160.59);
+    --cirth-meter-suboptimum-color: oklch(48.3% .086 78);
+    --cirth-meter-even-less-good-color: oklch(44% .151 29.73);
+    background: none;
+  }
+
+  kbd {
+    border: var(--cirth-border-width) solid var(--cirth-print-border-color);
+  }
+
+  :is(button, [type="submit"], [type="reset"], [type="button"], [role="button"]) {
+    border-color: var(--cirth-print-border-color);
+    box-shadow: none;
+    color: var(--cirth-print-color);
+    background: none;
+  }
+
+  [type="file"]::file-selector-button {
+    border-color: var(--cirth-print-border-color);
+    box-shadow: none;
+    color: var(--cirth-print-color);
+    background: none;
+  }
+
+  :is(mark, meter, progress, [type="checkbox"], [type="radio"]) {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+
+  a[href^="http"]:not([role="button"], nav a):after {
+    content: " (" attr(href) ")";
+    color: var(--cirth-print-muted-color);
+    font-size: var(--cirth-font-size-sm);
+    word-break: break-all;
+  }
+
+  thead {
+    display: table-header-group;
+  }
+
+  tfoot {
+    display: table-footer-group;
+  }
+
+  tr {
+    break-inside: avoid;
+  }
+
+  pre {
+    white-space: pre-wrap;
+    overflow: visible;
+  }
+
+  dialog {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    min-width: 0;
+    min-height: 0;
+    position: static;
+  }
+
+  dialog > article {
+    max-height: none;
+    overflow: visible;
+  }
+
+  :is(h1, h2, h3, h4, h5, h6) {
+    break-after: avoid;
+  }
+
+  :is(figure, img) {
+    break-inside: avoid;
+  }
+
+  :is(blockquote, li, p) {
+    orphans: 3;
+    widows: 3;
+  }
+}