clampography 2.0.0-beta.9 → 2.0.1

package/css/clampography.css

@@ -0,0 +1,1050 @@
+/**
+ * Clampography CSS Bundle
+ * Contains: base.js, theme.js, extra.js, forms.js, kbd.js
+ */
+
+/* --- base.js --- */
+@layer base {
+
+  :where(:root) {
+    --clampography-spacing-xs: clamp(0.25rem, 0.0833rem + 0.8333vw, 0.75rem);
+    --clampography-spacing-sm: clamp(0.375rem, 0.0833rem + 1.4583vw, 1.25rem);
+    --clampography-spacing-md: clamp(0.5rem, 0.1667rem + 1.6667vw, 1.5rem);
+    --clampography-spacing-lg: clamp(0.75rem, 0.1667rem + 2.9167vw, 2.5rem);
+    --clampography-spacing-xl: clamp(1rem, 0.3333rem + 3.3333vw, 3rem);
+    --clampography-list-indent: clamp(1.5rem, 1.3333rem + 0.8333vw, 2rem);
+    --clampography-scroll-offset: 5rem;
+    --clampography-font-base: Inter, system-ui, -apple-system, 'Segoe UI Variable Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+    --clampography-font-mono: ui-monospace, 'Cascadia Code', 'Cascadia Mono', 'Segoe UI Mono', 'Ubuntu Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+    --clampography-fluid-min: 20;
+    --clampography-fluid-max: 80;
+    --clampography-h1-min: 1.875;
+    --clampography-h1-max: 4;
+    --clampography-h1-slope: calc((var(--clampography-h1-max) - var(--clampography-h1-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));
+    --clampography-h1-base: calc(var(--clampography-h1-min) - var(--clampography-h1-slope) * var(--clampography-fluid-min));
+    --clampography-h1-size: clamp(calc(var(--clampography-h1-min) * 1rem), calc(var(--clampography-h1-base) * 1rem + var(--clampography-h1-slope) * 100vw), calc(var(--clampography-h1-max) * 1rem));
+    --clampography-h2-min: 1.25;
+    --clampography-h2-max: 3;
+    --clampography-h2-slope: calc((var(--clampography-h2-max) - var(--clampography-h2-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));
+    --clampography-h2-base: calc(var(--clampography-h2-min) - var(--clampography-h2-slope) * var(--clampography-fluid-min));
+    --clampography-h2-size: clamp(calc(var(--clampography-h2-min) * 1rem), calc(var(--clampography-h2-base) * 1rem + var(--clampography-h2-slope) * 100vw), calc(var(--clampography-h2-max) * 1rem));
+    --clampography-h3-min: 1.125;
+    --clampography-h3-max: 2.25;
+    --clampography-h3-slope: calc((var(--clampography-h3-max) - var(--clampography-h3-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));
+    --clampography-h3-base: calc(var(--clampography-h3-min) - var(--clampography-h3-slope) * var(--clampography-fluid-min));
+    --clampography-h3-size: clamp(calc(var(--clampography-h3-min) * 1rem), calc(var(--clampography-h3-base) * 1rem + var(--clampography-h3-slope) * 100vw), calc(var(--clampography-h3-max) * 1rem));
+    --clampography-h4-min: 1;
+    --clampography-h4-max: 1.5;
+    --clampography-h4-slope: calc((var(--clampography-h4-max) - var(--clampography-h4-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));
+    --clampography-h4-base: calc(var(--clampography-h4-min) - var(--clampography-h4-slope) * var(--clampography-fluid-min));
+    --clampography-h4-size: clamp(calc(var(--clampography-h4-min) * 1rem), calc(var(--clampography-h4-base) * 1rem + var(--clampography-h4-slope) * 100vw), calc(var(--clampography-h4-max) * 1rem));
+    --clampography-h5-min: 1;
+    --clampography-h5-max: 1;
+    --clampography-h5-slope: calc((var(--clampography-h5-max) - var(--clampography-h5-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));
+    --clampography-h5-base: calc(var(--clampography-h5-min) - var(--clampography-h5-slope) * var(--clampography-fluid-min));
+    --clampography-h5-size: clamp(calc(var(--clampography-h5-min) * 1rem), calc(var(--clampography-h5-base) * 1rem + var(--clampography-h5-slope) * 100vw), calc(var(--clampography-h5-max) * 1rem));
+    --clampography-h6-min: 0.875;
+    --clampography-h6-max: 0.875;
+    --clampography-h6-slope: calc((var(--clampography-h6-max) - var(--clampography-h6-min)) / (var(--clampography-fluid-max) - var(--clampography-fluid-min)));
+    --clampography-h6-base: calc(var(--clampography-h6-min) - var(--clampography-h6-slope) * var(--clampography-fluid-min));
+    --clampography-h6-size: clamp(calc(var(--clampography-h6-min) * 1rem), calc(var(--clampography-h6-base) * 1rem + var(--clampography-h6-slope) * 100vw), calc(var(--clampography-h6-max) * 1rem));
+    --clampography-heading-scale: 1;
+    --clampography-h1-scale: var(--clampography-heading-scale);
+    --clampography-h2-scale: var(--clampography-heading-scale);
+    --clampography-h3-scale: var(--clampography-heading-scale);
+    --clampography-h4-scale: var(--clampography-heading-scale);
+    --clampography-h5-scale: var(--clampography-heading-scale);
+    --clampography-h6-scale: var(--clampography-heading-scale);
+  }
+
+  body {
+    font-size: clamp(0.875rem, 0.7917rem + 0.4167vw, 1.125rem);
+    line-height: 1.75;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-wrap: pretty;
+  }
+
+  :root :where(h1, h2, h3, h4, h5, h6) {
+    font-weight: 600;
+    scroll-margin-top: var(--clampography-scroll-offset);
+  }
+
+  :root h1 {
+    font-size: calc(var(--clampography-h1-size) * var(--clampography-h1-scale));
+    line-height: 1.1111;
+    font-weight: 800;
+    margin-top: 0;
+    margin-bottom: var(--clampography-spacing-xl);
+  }
+
+  :root h2 {
+    font-size: calc(var(--clampography-h2-size) * var(--clampography-h2-scale));
+    line-height: 1.3333;
+    font-weight: 700;
+    margin-top: var(--clampography-spacing-xl);
+    margin-bottom: var(--clampography-spacing-md);
+  }
+
+  :root h3 {
+    font-size: calc(var(--clampography-h3-size) * var(--clampography-h3-scale));
+    line-height: 1.5;
+    margin-top: var(--clampography-spacing-lg);
+    margin-bottom: var(--clampography-spacing-sm);
+  }
+
+  :root h4 {
+    font-size: calc(var(--clampography-h4-size) * var(--clampography-h4-scale));
+    line-height: 1.5;
+    margin-top: var(--clampography-spacing-lg);
+    margin-bottom: var(--clampography-spacing-sm);
+  }
+
+  :root h5 {
+    font-size: calc(var(--clampography-h5-size) * var(--clampography-h5-scale));
+    line-height: 1.5;
+    margin-top: var(--clampography-spacing-md);
+    margin-bottom: var(--clampography-spacing-xs);
+  }
+
+  :root h6 {
+    font-size: calc(var(--clampography-h6-size) * var(--clampography-h6-scale));
+    line-height: 1.5;
+    margin-top: var(--clampography-spacing-md);
+    margin-bottom: var(--clampography-spacing-xs);
+  }
+
+  :root :is(h1, h2, h3, h4, h5, h6):first-child {
+    margin-top: 0;
+  }
+
+  :root a {
+    text-decoration-line: underline;
+    cursor: pointer;
+  }
+
+  :root :where(h1, h2, h3, h4, h5, h6) a {
+    text-decoration: none;
+  }
+
+  :root menu {
+    list-style: none;
+    margin-bottom: var(--clampography-spacing-md);
+    padding-inline-start: 0;
+  }
+
+  :root menu > li::before {
+    display: none;
+  }
+
+  :root hgroup {
+    margin-bottom: var(--clampography-spacing-lg);
+  }
+
+  :root hgroup :where(h1, h2, h3, h4, h5, h6) {
+    margin-bottom: var(--clampography-spacing-xs);
+  }
+
+  :root hgroup :where(p) {
+    margin-top: 0;
+    margin-bottom: 0;
+    font-size: 0.875em;
+    font-weight: 400;
+    line-height: 1.5;
+  }
+
+  :root p {
+    line-height: 1.75;
+    margin-bottom: var(--clampography-spacing-md);
+  }
+
+  :root :where(strong, b) {
+    font-weight: 700;
+  }
+
+  :root :where(em, i, cite, var) {
+    font-style: italic;
+  }
+
+  :root dfn {
+    font-style: italic;
+    font-weight: 600;
+  }
+
+  :root small {
+    font-size: 0.875em;
+    line-height: 1.5;
+  }
+
+  :root :where(code, kbd, samp) {
+    font-family: var(--clampography-font-mono);
+    font-size: 0.875em;
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+  }
+
+  :root kbd {
+    font-weight: 600;
+  }
+
+  :root data {
+    font-variant-numeric: tabular-nums;
+  }
+
+  :root :where(sub, sup) {
+    font-size: 0.75em;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  :root sup {
+    top: -0.5em;
+  }
+
+  :root sub {
+    bottom: -0.25em;
+  }
+
+  :root abbr[title] {
+    text-decoration: underline dotted;
+    text-underline-offset: 4px;
+    cursor: help;
+  }
+
+  :root del {
+    text-decoration: line-through;
+  }
+
+  :root ins {
+    text-decoration: underline;
+  }
+
+  :root s {
+    text-decoration: line-through;
+  }
+
+  :root u {
+    text-decoration: underline;
+  }
+
+  :root mark {
+    font-style: normal;
+    font-weight: inherit;
+  }
+
+  :root address {
+    font-style: italic;
+    margin-top: var(--clampography-spacing-md);
+    margin-bottom: var(--clampography-spacing-md);
+  }
+
+  :root time {
+    font-style: normal;
+    font-variant-numeric: tabular-nums;
+  }
+
+  :root blockquote {
+    margin-top: var(--clampography-spacing-lg);
+    margin-bottom: var(--clampography-spacing-lg);
+    padding-inline-start: var(--clampography-spacing-md);
+  }
+
+  :root blockquote blockquote {
+    margin-top: var(--clampography-spacing-sm);
+    margin-bottom: var(--clampography-spacing-sm);
+    padding-inline-start: var(--clampography-spacing-sm);
+  }
+
+  :root q {
+    font-style: inherit;
+  }
+
+  :root :where(ul, ol) {
+    list-style: none;
+    margin-bottom: var(--clampography-spacing-md);
+    padding-inline-start: var(--clampography-list-indent);
+  }
+
+  :root li {
+    position: relative;
+  }
+
+  :root li + li {
+    margin-top: var(--clampography-spacing-xs);
+  }
+
+  :root li > :where(p, dl, figure, table, pre) {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  :root li > blockquote {
+    margin-top: var(--clampography-spacing-sm);
+    margin-bottom: var(--clampography-spacing-sm);
+  }
+
+  :root li > :where(ul, ol) {
+    margin-top: var(--clampography-spacing-xs);
+    margin-bottom: 0;
+  }
+
+  :root ul > li::before {
+    content: '';
+    position: absolute;
+    inset-inline-end: 100%;
+    margin-inline-end: 0.75em;
+    top: 0.65em;
+    width: 0.375em;
+    height: 0.375em;
+    background-color: currentColor;
+    border-radius: 50%;
+  }
+
+  :root ol {
+    counter-reset: list-counter;
+  }
+
+  :root ol > li {
+    counter-increment: list-counter;
+  }
+
+  :root ol > li::before {
+    content: counter(list-counter) '.';
+    position: absolute;
+    inset-inline-end: 100%;
+    margin-inline-end: 0.5em;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    text-align: end;
+    color: currentColor;
+  }
+
+  :root dl {
+    margin-top: var(--clampography-spacing-md);
+    margin-bottom: var(--clampography-spacing-md);
+  }
+
+  :root dt {
+    font-weight: 600;
+    margin-top: var(--clampography-spacing-sm);
+  }
+
+  :root dt:first-child {
+    margin-top: 0;
+  }
+
+  :root dd {
+    margin-inline-start: var(--clampography-spacing-md);
+  }
+
+  :root dt + dd {
+    margin-top: var(--clampography-spacing-xs);
+  }
+
+  :root dd + dd {
+    margin-top: var(--clampography-spacing-xs);
+  }
+
+  :root dd:last-child {
+    margin-bottom: 0;
+  }
+
+  :root pre {
+    margin-top: var(--clampography-spacing-md);
+    margin-bottom: var(--clampography-spacing-md);
+    font-family: var(--clampography-font-mono);
+    line-height: 1.6;
+    overflow-x: auto;
+    -webkit-font-smoothing: auto;
+    -moz-osx-font-smoothing: auto;
+  }
+
+  :root pre code {
+    font-size: inherit;
+    padding: 0;
+    background: none;
+    border-radius: 0;
+  }
+
+  :root input, :root button, :root textarea, :root select, :root optgroup {
+    font-family: inherit;
+    font-size: 100%;
+    line-height: inherit;
+  }
+
+  :root textarea {
+    line-height: 1.5;
+  }
+
+  :root button, :root [type='button'], :root [type='reset'], :root [type='submit'] {
+    cursor: pointer;
+  }
+
+  :root fieldset {
+    margin-top: var(--clampography-spacing-md);
+    margin-bottom: var(--clampography-spacing-md);
+    padding: var(--clampography-spacing-sm);
+  }
+
+  :root legend {
+    font-weight: 600;
+    padding: 0 var(--clampography-spacing-xs);
+  }
+
+  :root label {
+    display: inline-block;
+    font-weight: 600;
+    margin-bottom: var(--clampography-spacing-xs);
+  }
+
+  :root output {
+    display: inline-block;
+    font-variant-numeric: tabular-nums;
+  }
+
+  :root :where(meter, progress) {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  :root :where(img, video, canvas, audio, iframe, svg) {
+    max-width: 100%;
+    height: auto;
+    vertical-align: middle;
+  }
+
+  :root figure {
+    margin-top: var(--clampography-spacing-lg);
+    margin-bottom: var(--clampography-spacing-lg);
+  }
+
+  :root figcaption {
+    margin-top: 0.375rem;
+    font-size: 0.875em;
+    line-height: 1.5;
+  }
+
+  :root table {
+    width: 100%;
+    margin-top: var(--clampography-spacing-md);
+    margin-bottom: var(--clampography-spacing-md);
+    border-collapse: collapse;
+    font-size: 1em;
+    line-height: 1.6;
+  }
+
+  :root caption {
+    margin-bottom: var(--clampography-spacing-xs);
+    font-size: 0.875em;
+    font-weight: 600;
+    text-align: start;
+  }
+
+  :root th, :root td {
+    padding: var(--clampography-spacing-xs) var(--clampography-spacing-sm);
+    text-align: start;
+  }
+
+  :root th {
+    font-weight: 600;
+  }
+
+  :root thead th {
+    vertical-align: bottom;
+  }
+
+  :root tbody th, :root tbody td {
+    vertical-align: top;
+  }
+
+  :root tfoot th, :root tfoot td {
+    vertical-align: top;
+  }
+
+  :root tbody + tbody {
+    border-top-width: 2px;
+  }
+
+  :root hr {
+    margin-top: var(--clampography-spacing-xl);
+    margin-bottom: var(--clampography-spacing-xl);
+    border: 0;
+    border-top: 1px solid;
+  }
+
+  :root :where(:focus, :focus-visible) {
+    outline-offset: 2px;
+  }
+
+  :root details {
+    margin-top: var(--clampography-spacing-md);
+    margin-bottom: var(--clampography-spacing-md);
+  }
+
+  :root summary {
+    cursor: pointer;
+    font-weight: 600;
+  }
+
+  :root details[open] > summary {
+    margin-bottom: var(--clampography-spacing-xs);
+  }
+
+  :root dialog {
+    font-size: inherit;
+    line-height: inherit;
+  }
+
+  :root :where(h1, h2, h3, h4, h5, h6, p, ul:not(li > ul, li > ol), ol:not(li > ul, li > ol), dl, blockquote, figure, table, pre):first-child {
+    margin-top: 0;
+  }
+
+  :root :where(p, ul, ol, dl, blockquote, figure, table, pre):last-child {
+    margin-bottom: 0;
+  }
+}
+
+/* --- theme.js --- */
+@layer base {
+
+  :where(:root) {
+    color-scheme: light;
+    --clampography-background: oklch(100.0% 0.000 89.9);
+    --clampography-border: oklch(94.6% 0.000 89.9);
+    --clampography-error: oklch(65.4% 0.229 27.0);
+    --clampography-heading: oklch(15.0% 0.021 264.3);
+    --clampography-info: oklch(68.3% 0.166 259.7);
+    --clampography-link: oklch(60.3% 0.216 259.8);
+    --clampography-muted: oklch(51.9% 0.014 259.8);
+    --clampography-primary: oklch(60.3% 0.216 259.8);
+    --clampography-secondary: oklch(54.9% 0.280 300.0);
+    --clampography-success: oklch(75.8% 0.166 161.7);
+    --clampography-surface: oklch(98.5% 0.000 89.9);
+    --clampography-text: oklch(31.1% 0.020 257.3);
+    --clampography-warning: oklch(79.9% 0.136 72.2);
+  }
+
+  @media (prefers-color-scheme: dark) {
+
+    :root {
+      color-scheme: dark;
+      --clampography-background: oklch(13.3% 0.016 284.0);
+      --clampography-border: oklch(43.4% 0.006 258.3);
+      --clampography-error: oklch(62.9% 0.220 27.0);
+      --clampography-heading: oklch(94.6% 0.000 89.9);
+      --clampography-info: oklch(71.2% 0.155 251.4);
+      --clampography-link: oklch(75.3% 0.133 248.6);
+      --clampography-muted: oklch(68.9% 0.006 264.5);
+      --clampography-primary: oklch(75.3% 0.133 248.6);
+      --clampography-secondary: oklch(62.6% 0.243 301.2);
+      --clampography-success: oklch(66.3% 0.148 160.6);
+      --clampography-surface: oklch(21.2% 0.009 255.6);
+      --clampography-text: oklch(88.8% 0.007 268.5);
+      --clampography-warning: oklch(72.1% 0.164 63.1);
+    }
+  }
+
+  [data-theme="dark"] {
+    color-scheme: dark;
+    --clampography-background: oklch(13.3% 0.016 284.0);
+    --clampography-border: oklch(43.4% 0.006 258.3);
+    --clampography-error: oklch(62.9% 0.220 27.0);
+    --clampography-heading: oklch(94.6% 0.000 89.9);
+    --clampography-info: oklch(71.2% 0.155 251.4);
+    --clampography-link: oklch(75.3% 0.133 248.6);
+    --clampography-muted: oklch(68.9% 0.006 264.5);
+    --clampography-primary: oklch(75.3% 0.133 248.6);
+    --clampography-secondary: oklch(62.6% 0.243 301.2);
+    --clampography-success: oklch(66.3% 0.148 160.6);
+    --clampography-surface: oklch(21.2% 0.009 255.6);
+    --clampography-text: oklch(88.8% 0.007 268.5);
+    --clampography-warning: oklch(72.1% 0.164 63.1);
+  }
+
+  [data-theme="light"] {
+    color-scheme: light;
+    --clampography-background: oklch(100.0% 0.000 89.9);
+    --clampography-border: oklch(94.6% 0.000 89.9);
+    --clampography-error: oklch(65.4% 0.229 27.0);
+    --clampography-heading: oklch(15.0% 0.021 264.3);
+    --clampography-info: oklch(68.3% 0.166 259.7);
+    --clampography-link: oklch(60.3% 0.216 259.8);
+    --clampography-muted: oklch(51.9% 0.014 259.8);
+    --clampography-primary: oklch(60.3% 0.216 259.8);
+    --clampography-secondary: oklch(54.9% 0.280 300.0);
+    --clampography-success: oklch(75.8% 0.166 161.7);
+    --clampography-surface: oklch(98.5% 0.000 89.9);
+    --clampography-text: oklch(31.1% 0.020 257.3);
+    --clampography-warning: oklch(79.9% 0.136 72.2);
+  }
+}
+
+/* --- extra.js --- */
+@layer base {
+
+  :where(:root) {
+    --clampography-transition-duration: 200ms;
+  }
+
+  body {
+    background-color: var(--clampography-background);
+    color: var(--clampography-text);
+    font-family: var(--font-sans, var(--clampography-font-base));
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+    transition-duration: var(--clampography-transition-duration, 200ms);
+    transition-timing-function: ease;
+  }
+
+  :root :where(h1, h2, h3, h4, h5, h6) {
+    color: var(--clampography-heading);
+  }
+
+  :root a {
+    color: var(--clampography-link);
+    font-weight: 600;
+    letter-spacing: 0.025em;
+    text-decoration-line: underline;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 4px;
+    text-decoration-color: color-mix(in oklab, var(--clampography-link) 30%, transparent);
+    transition-property: color, text-decoration-color;
+    transition-duration: 150ms;
+  }
+
+  :root a:hover {
+    text-decoration-color: var(--clampography-link);
+  }
+
+  :root ul > li::before {
+    background-color: var(--clampography-primary);
+  }
+
+  :root ol > li::before {
+    color: var(--clampography-primary);
+  }
+
+  :root :where(code:not(pre code), kbd, samp) {
+    background-color: var(--clampography-surface);
+    color: var(--clampography-heading);
+    border: 1px solid var(--clampography-border);
+    border-radius: 0.25rem;
+    padding: 0.125rem var(--clampography-spacing-xs);
+    white-space: nowrap;
+  }
+
+  :root kbd {
+    transform: translateY(-0.15em);
+  }
+
+  :root pre {
+    background-color: var(--clampography-surface);
+    border: 1px solid var(--clampography-border);
+    border-radius: 0.375rem;
+    padding: var(--clampography-spacing-md);
+  }
+
+  :root table {
+    padding: var(--clampography-spacing-sm);
+    border: 1px solid var(--clampography-border);
+  }
+
+  :root th {
+    color: var(--clampography-heading);
+  }
+
+  :root th, :root td {
+    border: 1px solid var(--clampography-border);
+  }
+
+  :root thead th {
+    border-bottom-width: 2px;
+  }
+
+  :root tbody tr:nth-child(even) {
+    background-color: var(--clampography-surface);
+  }
+
+  :root caption, :root figcaption, :root .muted {
+    color: var(--clampography-muted);
+  }
+
+  :root hr {
+    height: 1px;
+    border-width: 0;
+    margin-top: var(--clampography-spacing-xl);
+    margin-bottom: var(--clampography-spacing-xl);
+    background-color: var(--clampography-border);
+  }
+
+  :root blockquote {
+    border-inline-start-width: 4px;
+    border-inline-start-color: var(--clampography-primary);
+    background-color: var(--clampography-surface);
+    padding: var(--clampography-spacing-md);
+    border-radius: 0.25rem;
+    font-style: italic;
+    color: var(--clampography-heading);
+  }
+
+  :root mark {
+    background-color: var(--clampography-primary);
+    color: var(--clampography-background);
+    padding: 0.125rem var(--clampography-spacing-xs);
+    border-radius: 0.25rem;
+  }
+
+  :root del {
+    text-decoration-color: var(--clampography-error);
+    text-decoration-thickness: 2px;
+  }
+
+  :root details {
+    border: 1px solid var(--clampography-border);
+    border-radius: 0.375rem;
+    padding: var(--clampography-spacing-sm);
+  }
+
+  :root summary {
+    color: var(--clampography-heading);
+    border-bottom: 0px solid var(--clampography-border);
+  }
+
+  :root details[open] > summary {
+    border-bottom-width: 1px;
+    padding-bottom: var(--clampography-spacing-sm);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+
+    body {
+      transition: none;
+      --clampography-transition-duration: 0ms;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+
+    body {
+      background-color: white;
+      color: black;
+    }
+
+    :root :where(h1, h2, h3, h4, h5, h6) {
+      color: black;
+    }
+
+    :root a {
+      color: black;
+      text-decoration: underline;
+      text-decoration-thickness: 2px;
+      font-weight: 700;
+    }
+
+    :root :where(code:not(pre code), kbd, samp) {
+      background-color: #f0f0f0;
+      color: black;
+      border: 2px solid black;
+    }
+
+    :root pre {
+      background-color: #f0f0f0;
+      color: black;
+      border: 2px solid black;
+    }
+
+    :root blockquote {
+      background-color: #f0f0f0;
+      border-inline-start-color: black;
+      border-inline-start-width: 6px;
+      color: black;
+    }
+
+    :root th, :root td {
+      border: 2px solid black;
+    }
+
+    :root hr {
+      background-color: black;
+      height: 2px;
+    }
+  }
+}
+
+/* --- forms.js --- */
+@layer base {
+
+  :root :where(button, [type='button'], [type='reset'], [type='submit']) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.375em;
+    padding: var(--clampography-spacing-xs) var(--clampography-spacing-sm);
+    background-color: var(--clampography-surface);
+    color: var(--clampography-text);
+    border: 1px solid var(--clampography-border);
+    border-radius: 0.375rem;
+    font-weight: 500;
+    white-space: nowrap;
+    transition-property: background-color, border-color, color, box-shadow;
+    transition-duration: 150ms;
+  }
+
+  :root :where(button, [type='button'], [type='reset'], [type='submit']):hover {
+    background-color: var(--clampography-background);
+    border-color: var(--clampography-primary);
+  }
+
+  :root :where(button, [type='button'], [type='submit']).primary, :root [type='submit'] {
+    background-color: var(--clampography-primary);
+    color: var(--clampography-background);
+    border-color: var(--clampography-primary);
+  }
+
+  :root :where(button, [type='button'], [type='submit']).primary:hover, :root [type='submit']:hover {
+    filter: brightness(1.1);
+  }
+
+  :root :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']), textarea, select) {
+    display: block;
+    width: 100%;
+    padding: var(--clampography-spacing-xs) var(--clampography-spacing-sm);
+    background-color: var(--clampography-background);
+    color: var(--clampography-text);
+    border: 1px solid var(--clampography-border);
+    border-radius: 0.375rem;
+    transition-property: border-color, box-shadow;
+    transition-duration: 150ms;
+  }
+
+  :root :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']), textarea, select):focus {
+    outline: none;
+    border-color: var(--clampography-primary);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--clampography-primary) 20%, transparent);
+  }
+
+  :root :where(input, textarea, select):disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  :root :where(input, textarea, select)[readonly] {
+    background-color: color-mix(in oklab, var(--clampography-surface) 50%, transparent);
+    cursor: default;
+  }
+
+  :root :where(input, textarea, select):user-invalid {
+    border-color: var(--clampography-error);
+  }
+
+  :root :where(input, textarea, select):user-invalid:focus {
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--clampography-error) 20%, transparent);
+  }
+
+  :root [type='search']::-webkit-search-cancel-button, :root [type='search']::-webkit-search-decoration {
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  :root [type='number']::-webkit-inner-spin-button, :root [type='number']::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  :root :where(input, textarea, select)::placeholder {
+    color: var(--clampography-muted);
+  }
+
+  :root select {
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
+    background-position: inline-end 0.5rem center;
+    background-repeat: no-repeat;
+    background-size: 1.5em 1.5em;
+    padding-inline-end: 2.5rem;
+  }
+
+  :root [type='file'] {
+    padding: 0;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+  }
+
+  :root [type='file']::file-selector-button {
+    display: inline-flex;
+    align-items: center;
+    padding: var(--clampography-spacing-xs) var(--clampography-spacing-sm);
+    margin-inline-end: var(--clampography-spacing-sm);
+    background-color: var(--clampography-surface);
+    color: var(--clampography-text);
+    border: 1px solid var(--clampography-border);
+    border-radius: 0.375rem;
+    font-family: inherit;
+    font-size: inherit;
+    cursor: pointer;
+    transition-property: background-color, border-color;
+    transition-duration: 150ms;
+  }
+
+  :root [type='file']:hover::file-selector-button {
+    background-color: var(--clampography-background);
+    border-color: var(--clampography-primary);
+  }
+
+  :root [type='checkbox'], :root [type='radio'] {
+    width: 1em;
+    height: 1em;
+    accent-color: var(--clampography-primary);
+    vertical-align: middle;
+    cursor: pointer;
+  }
+
+  :root [type='checkbox']:focus-visible, :root [type='radio']:focus-visible {
+    outline: 2px solid var(--clampography-primary);
+    outline-offset: 2px;
+  }
+
+  :root [type='range'] {
+    accent-color: var(--clampography-primary);
+    width: 100%;
+    cursor: pointer;
+  }
+
+  :root [type='color'] {
+    padding: 0.125rem;
+    width: 2.5rem;
+    height: 2.5rem;
+    border: 1px solid var(--clampography-border);
+    border-radius: 0.375rem;
+    background-color: var(--clampography-background);
+    cursor: pointer;
+  }
+
+  :root fieldset {
+    border: 1px solid var(--clampography-border);
+    border-radius: 0.5rem;
+    background-color: var(--clampography-surface);
+  }
+
+  :root legend {
+    color: var(--clampography-heading);
+  }
+
+  :root label {
+    color: var(--clampography-text);
+  }
+
+  :root output {
+    color: var(--clampography-primary);
+    font-weight: 600;
+  }
+
+  :root progress {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    height: 1em;
+    background: transparent;
+  }
+
+  :root progress::-webkit-progress-bar {
+    background: color-mix(in oklab, var(--clampography-text) 20%, transparent);
+  }
+
+  :root progress::-webkit-progress-value {
+    background: var(--clampography-success);
+  }
+
+  :root progress::-moz-progress-bar {
+    background: var(--clampography-success);
+  }
+
+  :root meter {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    height: 1em;
+    background: transparent;
+  }
+
+  @supports (-moz-appearance: none) {
+
+    :root progress {
+      background: color-mix(in oklab, var(--clampography-text) 20%, transparent);
+    }
+
+    :root meter {
+      background: color-mix(in oklab, var(--clampography-text) 20%, transparent);
+    }
+  }
+
+  :root meter::-webkit-meter-inner-element {
+    display: flex;
+    align-items: stretch;
+    height: 1em;
+  }
+
+  :root meter::-webkit-meter-bar {
+    background: color-mix(in oklab, var(--clampography-text) 20%, transparent);
+    height: 100%;
+  }
+
+  :root meter::-webkit-meter-optimum-value {
+    background: var(--clampography-success);
+    height: 100%;
+  }
+
+  :root meter:-moz-meter-optimum::-moz-meter-bar {
+    background: var(--clampography-success);
+  }
+
+  :root meter::-webkit-meter-suboptimum-value {
+    background: var(--clampography-warning);
+    height: 100%;
+  }
+
+  :root meter:-moz-meter-sub-optimum::-moz-meter-bar {
+    background: var(--clampography-warning);
+  }
+
+  :root meter::-webkit-meter-even-less-good-value {
+    background: var(--clampography-error);
+    height: 100%;
+  }
+
+  :root meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+    background: var(--clampography-error);
+  }
+}
+
+/* --- kbd.js --- */
+@layer base {
+
+  :root kbd {
+    display: inline-block;
+    padding: 0.1em 0.45em;
+    min-width: 2em;
+    text-align: center;
+    font-size: 0.8em;
+    font-weight: 700;
+    line-height: 1.5;
+    white-space: nowrap;
+    vertical-align: 0.1em;
+    cursor: default;
+    user-select: none;
+    background-color: var(--clampography-surface, oklch(94% 0.004 264));
+    color: var(--clampography-text, oklch(18% 0.015 264));
+    border: 1px solid var(--clampography-border, oklch(76% 0.008 264));
+    border-radius: 4px;
+    box-shadow: 0 2px 0 color-mix(in oklab, var(--clampography-border, oklch(60% 0.008 264)) 100%, black 18%), 0 3px 2px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5);
+    transition-property: box-shadow, transform, border-bottom-width;
+    transition-duration: 80ms;
+  }
+
+  :root kbd:active {
+    transform: translateY(2px);
+    box-shadow: 0 0 0 color-mix(in oklab, var(--clampography-border, oklch(60% 0.008 264)) 100%, black 18%), 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
+  }
+}
+