@cirthcss/cirth 0.8.5 → 0.10.0

package/dist/cirth.classless.scoped.css

@@ -136,7 +136,7 @@
   margin-bottom: calc(var(--cirth-typography-spacing-vertical) * .25);
 }
 
-.cirth :where(dl, ol, ul) :where(dl, ol, ul) {
+.cirth :is(dl, ol, ul) :is(dl, ol, ul) {
   margin: 0;
   margin-top: calc(var(--cirth-typography-spacing-vertical) * .25);
 }
@@ -209,6 +209,10 @@
   outline: var(--cirth-outline-width) solid transparent;
 }
 
+.cirth :where(a:not([role="button"])):visited:not([aria-current]:not([aria-current="false"]), :hover, :active, :focus, nav a) {
+  color: var(--cirth-link-visited-color);
+}
+
 .cirth a[role="button"] {
   display: inline-block;
 }
@@ -228,6 +232,7 @@
   --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);
@@ -251,6 +256,7 @@
   --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);
@@ -1369,6 +1375,10 @@
   text-align: center;
 }
 
+.cirth :is(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[aria-busy="true"] {
+  white-space: normal;
+}
+
 .cirth 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);
@@ -1385,6 +1395,50 @@
   pointer-events: none;
 }
 
+.cirth 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;
+}
+
+.cirth meter::-webkit-meter-bar {
+  background: none;
+}
+
+.cirth meter::-webkit-meter-inner-element {
+  display: flex;
+}
+
+.cirth meter::-webkit-meter-optimum-value {
+  background: var(--cirth-meter-optimum-color);
+}
+
+.cirth meter::-webkit-meter-suboptimum-value {
+  background: var(--cirth-meter-suboptimum-color);
+}
+
+.cirth meter::-webkit-meter-even-less-good-value {
+  background: var(--cirth-meter-even-less-good-color);
+}
+
+.cirth meter::-moz-meter-bar {
+  background: var(--cirth-meter-optimum-color);
+}
+
+.cirth meter:-moz-meter-sub-optimum::-moz-meter-bar {
+  background: var(--cirth-meter-suboptimum-color);
+}
+
+.cirth meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+  background: var(--cirth-meter-even-less-good-color);
+}
+
 .cirth {
   --cirth-scrollbar-width: 0px;
 }
@@ -1952,6 +2006,8 @@
     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);
@@ -2056,6 +2112,10 @@
   --cirth-border-radius: var(--cirth-radius-pill);
 }
 
+.cirth [role="group"]:not(fieldset) [type="search"] {
+  --cirth-border-radius: inherit;
+}
+
 .cirth button, .cirth [type="submit"], .cirth [type="reset"], .cirth [type="button"], .cirth [role="button"] {
   --cirth-font-weight: var(--cirth-font-weight-semibold);
   --cirth-line-height: var(--cirth-line-height-relaxed);
@@ -2090,11 +2150,11 @@
   filter: brightness(0) invert();
 }
 
-.cirth[data-theme="light"], .cirth [data-theme="light"], .cirth:not([data-theme="dark"]) {
+.cirth:where([data-theme="light"]), .cirth :where([data-theme="light"]), .cirth:where(:not([data-theme="dark"])) {
   --lightningcss-light: initial;
   --lightningcss-dark: ;
   color-scheme: light;
-  --cirth-background-color: oklch(97.4% .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);
@@ -2129,13 +2189,14 @@
   --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);
@@ -2184,6 +2245,9 @@
   --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);
@@ -2193,12 +2257,12 @@
   --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");
 }
 
-.cirth[data-theme="light"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), .cirth [data-theme="light"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), .cirth:not([data-theme="dark"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
+.cirth:where([data-theme="light"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), .cirth :where([data-theme="light"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), .cirth: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) {
-  .cirth:not([data-theme]) {
+  .cirth:where(:not([data-theme])) {
     --lightningcss-light: ;
     --lightningcss-dark: initial;
     color-scheme: dark;
@@ -2237,6 +2301,7 @@
     --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);
@@ -2292,6 +2357,9 @@
     --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);
@@ -2301,12 +2369,12 @@
     --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");
   }
 
-  .cirth:not([data-theme]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
+  .cirth: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[data-theme="dark"], .cirth [data-theme="dark"] {
+.cirth:where([data-theme="dark"]), .cirth :where([data-theme="dark"]) {
   --lightningcss-light: ;
   --lightningcss-dark: initial;
   color-scheme: dark;
@@ -2345,6 +2413,7 @@
   --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);
@@ -2400,6 +2469,9 @@
   --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);
@@ -2409,10 +2481,236 @@
   --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");
 }
 
-.cirth[data-theme="dark"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), .cirth [data-theme="dark"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
+.cirth:where([data-theme="dark"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), .cirth :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, .cirth [type="checkbox"], .cirth [type="radio"], .cirth [type="range"] {
   accent-color: var(--cirth-primary);
 }
+
+@media (prefers-contrast: more) {
+  .cirth:where([data-theme="light"]), .cirth :where([data-theme="light"]), .cirth: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) {
+  .cirth: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) {
+  .cirth:where([data-theme="dark"]), .cirth :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 {
+  .cirth {
+    --cirth-print-color: oklch(0% 0 0);
+    --cirth-print-muted-color: oklch(48.3% .03 264);
+    --cirth-print-border-color: oklch(61.3% .032 264);
+    color: var(--cirth-print-color);
+    --lightningcss-light: initial;
+    --lightningcss-dark: ;
+    --lightningcss-light: initial;
+    --lightningcss-dark: ;
+    color-scheme: light;
+    --cirth-color: var(--cirth-print-color);
+    --cirth-h1-color: var(--cirth-print-color);
+    --cirth-h2-color: var(--cirth-print-color);
+    --cirth-h3-color: var(--cirth-print-color);
+    --cirth-h4-color: var(--cirth-print-color);
+    --cirth-h5-color: var(--cirth-print-color);
+    --cirth-h6-color: var(--cirth-print-color);
+    --cirth-code-color: var(--cirth-print-color);
+    --cirth-code-kbd-color: var(--cirth-print-color);
+    --cirth-form-element-color: var(--cirth-print-color);
+    --cirth-muted-color: var(--cirth-print-muted-color);
+    --cirth-form-element-placeholder-color: var(--cirth-print-muted-color);
+    --cirth-primary: var(--cirth-print-color);
+    --cirth-primary-hover: var(--cirth-print-color);
+    --cirth-primary-underline: var(--cirth-print-color);
+    --cirth-secondary: var(--cirth-print-color);
+    --cirth-secondary-underline: var(--cirth-print-color);
+    --cirth-contrast: var(--cirth-print-color);
+    --cirth-contrast-underline: var(--cirth-print-color);
+    --cirth-link-visited-color: var(--cirth-print-color);
+    --cirth-muted-border-color: var(--cirth-print-border-color);
+    --cirth-form-element-border-color: var(--cirth-print-border-color);
+    --cirth-box-shadow: none;
+    --cirth-card-box-shadow: none;
+    --cirth-card-background-color: transparent;
+    --cirth-card-sectioning-background-color: transparent;
+    --cirth-code-background-color: transparent;
+    --cirth-code-kbd-background-color: transparent;
+    --cirth-form-element-background-color: transparent;
+    --cirth-form-element-active-background-color: transparent;
+    --cirth-table-row-stripped-background-color: transparent;
+    --cirth-modal-overlay-background-color: transparent;
+    --cirth-ins-color: oklch(35.3% .067 160.59);
+    --cirth-del-color: oklch(35.3% .122 29.73);
+    --cirth-meter-optimum-color: oklch(52.7% .1 160.59);
+    --cirth-meter-suboptimum-color: oklch(48.3% .086 78);
+    --cirth-meter-even-less-good-color: oklch(44% .151 29.73);
+    background: none;
+  }
+
+  .cirth kbd {
+    border: var(--cirth-border-width) solid var(--cirth-print-border-color);
+  }
+
+  .cirth :is(button, [type="submit"], [type="reset"], [type="button"], [role="button"]) {
+    border-color: var(--cirth-print-border-color);
+    box-shadow: none;
+    color: var(--cirth-print-color);
+    background: none;
+  }
+
+  .cirth [type="file"]::file-selector-button {
+    border-color: var(--cirth-print-border-color);
+    box-shadow: none;
+    color: var(--cirth-print-color);
+    background: none;
+  }
+
+  .cirth :is(mark, meter, progress, [type="checkbox"], [type="radio"]) {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+
+  .cirth a[href^="http"]:not([role="button"], nav a):after {
+    content: " (" attr(href) ")";
+    color: var(--cirth-print-muted-color);
+    font-size: var(--cirth-font-size-sm);
+    word-break: break-all;
+  }
+
+  .cirth thead {
+    display: table-header-group;
+  }
+
+  .cirth tfoot {
+    display: table-footer-group;
+  }
+
+  .cirth tr {
+    break-inside: avoid;
+  }
+
+  .cirth pre {
+    white-space: pre-wrap;
+    overflow: visible;
+  }
+
+  .cirth dialog {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    min-width: 0;
+    min-height: 0;
+    position: static;
+  }
+
+  .cirth dialog > article {
+    max-height: none;
+    overflow: visible;
+  }
+
+  .cirth :is(h1, h2, h3, h4, h5, h6) {
+    break-after: avoid;
+  }
+
+  .cirth :is(figure, img) {
+    break-inside: avoid;
+  }
+
+  .cirth :is(blockquote, li, p) {
+    orphans: 3;
+    widows: 3;
+  }
+}