clampography 2.0.0-beta.9 → 2.0.1

package/css/clampography.min.css

@@ -0,0 +1 @@
+@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}}@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)}}@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}}}@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)}}@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)}}

package/css/extra.css

@@ -0,0 +1,189 @@
+@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;
+    }
+  }
+}

package/css/extra.min.css

@@ -0,0 +1 @@
+@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}}}

package/css/figma-tokens.json

@@ -0,0 +1,110 @@
+{
+  "dark": {
+    "background": {
+      "$value": "#07070e",
+      "$type": "color"
+    },
+    "border": {
+      "$value": "#4f5154",
+      "$type": "color"
+    },
+    "error": {
+      "$value": "#f13936",
+      "$type": "color"
+    },
+    "heading": {
+      "$value": "#ededed",
+      "$type": "color"
+    },
+    "info": {
+      "$value": "#4fa6ff",
+      "$type": "color"
+    },
+    "link": {
+      "$value": "#66b5ff",
+      "$type": "color"
+    },
+    "muted": {
+      "$value": "#999b9f",
+      "$type": "color"
+    },
+    "primary": {
+      "$value": "#66b5ff",
+      "$type": "color"
+    },
+    "secondary": {
+      "$value": "#a453ff",
+      "$type": "color"
+    },
+    "success": {
+      "$value": "#03ae74",
+      "$type": "color"
+    },
+    "surface": {
+      "$value": "#16191d",
+      "$type": "color"
+    },
+    "text": {
+      "$value": "#d8dadf",
+      "$type": "color"
+    },
+    "warning": {
+      "$value": "#eb8a02",
+      "$type": "color"
+    }
+  },
+  "light": {
+    "background": {
+      "$value": "#ffffff",
+      "$type": "color"
+    },
+    "border": {
+      "$value": "#ededed",
+      "$type": "color"
+    },
+    "error": {
+      "$value": "#fe3c39",
+      "$type": "color"
+    },
+    "heading": {
+      "$value": "#070b14",
+      "$type": "color"
+    },
+    "info": {
+      "$value": "#5897fe",
+      "$type": "color"
+    },
+    "link": {
+      "$value": "#2278ff",
+      "$type": "color"
+    },
+    "muted": {
+      "$value": "#646971",
+      "$type": "color"
+    },
+    "primary": {
+      "$value": "#2278ff",
+      "$type": "color"
+    },
+    "secondary": {
+      "$value": "#901af7",
+      "$type": "color"
+    },
+    "success": {
+      "$value": "#08d08f",
+      "$type": "color"
+    },
+    "surface": {
+      "$value": "#fafafa",
+      "$type": "color"
+    },
+    "text": {
+      "$value": "#2a313b",
+      "$type": "color"
+    },
+    "warning": {
+      "$value": "#f3ae4f",
+      "$type": "color"
+    }
+  }
+}

package/css/forms.css

@@ -0,0 +1,244 @@
+@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);
+  }
+}

package/css/forms.min.css

@@ -0,0 +1 @@
+@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)}}

package/css/kbd.css

@@ -0,0 +1,28 @@
+@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);
+  }
+}

package/css/kbd.min.css

@@ -0,0 +1 @@
+@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)}}