clampography 2.0.0-beta.2 → 2.0.0-beta.21

package/src/convert.js

@@ -0,0 +1,264 @@
+#!/usr/bin/env bun
+
+/**
+ * JS to CSS Converter for Bun.sh
+ * Converts multiple .js files to .css and .css.min
+ */
+
+import { existsSync, mkdirSync, statSync, writeFileSync } from "fs";
+import { basename, resolve } from "path";
+
+// Configuration
+const FILES_TO_CONVERT = ["base.js", "extra.js"];
+const OUTPUT_DIR = "css";
+
+// Options passed to the JS functions (simulating plugin config)
+const DEFAULT_OPTIONS = {
+  root: ":root",
+  prefix: "clampography",
+};
+
+/**
+ * Import the JS module dynamically
+ */
+async function loadJSModule(filePath) {
+  const module = await import(`./${filePath}`);
+  const exported = module.default;
+
+  // Check if it's a function (new structure) or object (old structure)
+  if (typeof exported === "function") {
+    // Invoke the function with default options
+    return exported(DEFAULT_OPTIONS);
+  }
+
+  return exported;
+}
+
+/**
+ * Convert JS object to CSS string
+ */
+function toCSSString(obj, indent = 0) {
+  const spaces = " ".repeat(indent);
+  const lines = [];
+
+  for (const [key, value] of Object.entries(obj)) {
+    if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+      // It's a selector or nested object
+
+      // Special handling for @layer base wrapper if present in object
+      if (key === "@layer base") {
+        lines.push(`${spaces}@layer base {`);
+        lines.push(toCSSString(value, indent + 1));
+        lines.push(`${spaces}}`);
+      } else {
+        lines.push("");
+        lines.push(`${spaces}${key} {`);
+
+        // Recursive call for nested properties or media queries
+        // But first, separate properties from nested objects
+        const properties = [];
+        const nestedObjects = {};
+
+        for (const [prop, val] of Object.entries(value)) {
+          if (typeof val === "object" && val !== null) {
+            nestedObjects[prop] = val;
+          } else {
+            properties.push(`${spaces}  ${prop}: ${val};`);
+          }
+        }
+
+        // Add properties first
+        lines.push(...properties);
+
+        // Then process nested objects (like pseudo-elements or media queries inside)
+        if (Object.keys(nestedObjects).length > 0) {
+          // This handles nesting if the JS structure supports it (like SCSS nesting)
+          // Standard CSS doesn't support nesting without post-processing,
+          // but we'll output it as nested blocks for clarity if present.
+          lines.push(toCSSString(nestedObjects, indent + 1));
+        }
+
+        lines.push(`${spaces}}`);
+      }
+    }
+  }
+  return lines.join("\n");
+}
+
+/**
+ * Convert JS object to minified CSS string
+ */
+function toMinifiedCSS(obj) {
+  const parts = [];
+
+  for (const [key, value] of Object.entries(obj)) {
+    if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+      if (key === "@layer base") {
+        parts.push(`@layer base{${toMinifiedCSS(value)}}`);
+      } else {
+        const properties = [];
+        const nestedParts = [];
+
+        for (const [prop, val] of Object.entries(value)) {
+          if (typeof val === "object" && val !== null) {
+            nestedParts.push(toMinifiedCSS({ [prop]: val }));
+          } else {
+            properties.push(`${prop}:${val}`);
+          }
+        }
+
+        let blockContent = properties.join(";");
+        if (nestedParts.length > 0) {
+          blockContent += nestedParts.join("");
+        }
+
+        if (blockContent.length > 0) {
+          parts.push(`${key}{${blockContent}}`);
+        }
+      }
+    }
+  }
+  return parts.join("");
+}
+
+/**
+ * Get output file names from input file name
+ */
+function getOutputFileNames(inputFile) {
+  const baseNameWithoutExt = basename(inputFile, ".js");
+  return {
+    css: `${baseNameWithoutExt}.css`,
+    min: `${baseNameWithoutExt}.css.min`,
+  };
+}
+
+/**
+ * Convert single JS file to CSS
+ */
+async function convertFile(inputFile) {
+  const outputNames = getOutputFileNames(inputFile);
+  const outputCSS = resolve(OUTPUT_DIR, outputNames.css);
+  const outputMin = resolve(OUTPUT_DIR, outputNames.min);
+
+  try {
+    console.log(`\n📖 Loading ${inputFile}...`);
+    const jsObject = await loadJSModule(inputFile);
+
+    console.log(`⚙️ Converting to CSS...`);
+    let cssContent = toCSSString(jsObject, 0);
+
+    // Explicitly wrap in @layer base for the final file
+    // (Assuming the JS object is just the rules, without @layer wrapper)
+    cssContent = `@layer base {\n${cssContent}\n}\n`;
+
+    console.log(`💾 Writing ${outputNames.css}...`);
+    writeFileSync(outputCSS, cssContent, "utf-8");
+
+    // Generate minified version
+    console.log(`⚙️ Generating minified version...`);
+    let minifiedContent = toMinifiedCSS(jsObject);
+    minifiedContent = `@layer base{${minifiedContent}}`;
+
+    console.log(`💾 Writing ${outputNames.min}...`);
+    writeFileSync(outputMin, minifiedContent, "utf-8");
+
+    // Show file sizes
+    const cssSize = statSync(outputCSS).size;
+    const minSize = statSync(outputMin).size;
+    const reduction = ((1 - minSize / cssSize) * 100).toFixed(1);
+
+    console.log(`✅ ${inputFile} converted successfully!`);
+    console.log(`   📄 ${outputNames.css}: ${(cssSize / 1024).toFixed(2)} KB`);
+    console.log(
+      `   📄 ${outputNames.min}: ${
+        (minSize / 1024).toFixed(2)
+      } KB (${reduction}% smaller)`,
+    );
+
+    return {
+      input: inputFile,
+      output: outputNames.css,
+      outputMin: outputNames.min,
+      cssSize,
+      minSize,
+      reduction,
+    };
+  } catch (error) {
+    console.error(`❌ Error converting ${inputFile}:`, error.message);
+    return null;
+  }
+}
+
+/**
+ * Main conversion function
+ */
+async function convertAllFiles() {
+  console.log("🚀 Starting CSS conversion...");
+  console.log(`📁 Output directory: ${OUTPUT_DIR}`);
+  console.log(`📝 Files to convert: ${FILES_TO_CONVERT.length}`);
+
+  // Create output directory if it doesn't exist
+  if (!existsSync(OUTPUT_DIR)) {
+    console.log(`📁 Creating output directory: ${OUTPUT_DIR}`);
+    mkdirSync(OUTPUT_DIR, { recursive: true });
+  }
+
+  const results = [];
+
+  // Convert all files
+  for (const file of FILES_TO_CONVERT) {
+    const result = await convertFile(file);
+    if (result) {
+      results.push(result);
+    }
+  }
+
+  // Summary
+  console.log("\n" + "=".repeat(60));
+  console.log("📊 CONVERSION SUMMARY");
+  console.log("=".repeat(60));
+
+  if (results.length === 0) {
+    console.log("❌ No files were converted successfully.");
+    process.exit(1);
+  }
+
+  console.log(
+    `✅ Successfully converted: ${results.length}/${FILES_TO_CONVERT.length} files\n`,
+  );
+
+  let totalCSSSize = 0;
+  let totalMinSize = 0;
+
+  results.forEach((result) => {
+    console.log(`📄 ${result.input}`);
+    console.log(
+      `   → ${OUTPUT_DIR}/${result.output} (${
+        (result.cssSize / 1024).toFixed(2)
+      } KB)`,
+    );
+    console.log(
+      `   → ${OUTPUT_DIR}/${result.outputMin} (${
+        (result.minSize / 1024).toFixed(2)
+      } KB, ${result.reduction}% smaller)`,
+    );
+    totalCSSSize += result.cssSize;
+    totalMinSize += result.minSize;
+  });
+
+  const totalReduction = ((1 - totalMinSize / totalCSSSize) * 100).toFixed(1);
+
+  console.log("\n" + "-".repeat(60));
+  console.log(`📊 Total CSS size: ${(totalCSSSize / 1024).toFixed(2)} KB`);
+  console.log(`📊 Total Minified size: ${(totalMinSize / 1024).toFixed(2)} KB`);
+  console.log(`📊 Total reduction: ${totalReduction}%`);
+  console.log("=".repeat(60));
+  console.log("🎉 All conversions completed!");
+}
+
+// Run conversion
+convertAllFiles().catch((error) => {
+  console.error("❌ Fatal error:", error.message);
+  console.error(error.stack);
+  process.exit(1);
+});

package/src/css/base.css

@@ -0,0 +1,444 @@
+@layer base {
+
+:root {
+  --spacing-xs: clamp(0.5rem, 0.375rem + 0.625vw, 0.75rem);
+  --spacing-sm: clamp(0.75rem, 0.5625rem + 0.9375vw, 1.25rem);
+  --spacing-md: clamp(1rem, 0.75rem + 1.25vw, 1.5rem);
+  --spacing-lg: clamp(1.5rem, 1.125rem + 1.875vw, 2.5rem);
+  --spacing-xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
+  --scroll-offset: 5rem;
+  --font-family-base: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  font-family: var(--font-family-base);
+  font-size: clamp(1rem, 0.95rem + 0.25vw, 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(--scroll-offset);
+}
+
+:root h1 {
+  font-size: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);
+  line-height: 1.1111;
+  font-weight: 800;
+  margin-top: 0;
+  margin-bottom: var(--spacing-xl);
+}
+
+:root h2 {
+  font-size: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
+  line-height: 1.3333;
+  font-weight: 700;
+  margin-top: var(--spacing-xl);
+  margin-bottom: var(--spacing-md);
+}
+
+:root h3 {
+  font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
+  line-height: 1.5;
+  margin-top: var(--spacing-lg);
+  margin-bottom: var(--spacing-sm);
+}
+
+:root h4 {
+  font-size: clamp(1rem, 0.975rem + 0.125vw, 1.125rem);
+  line-height: 1.5;
+  margin-top: var(--spacing-lg);
+  margin-bottom: var(--spacing-sm);
+}
+
+:root h5 {
+  font-size: 1rem;
+  line-height: 1.5;
+  margin-top: var(--spacing-md);
+  margin-bottom: var(--spacing-xs);
+}
+
+:root h6 {
+  font-size: 0.875rem;
+  line-height: 1.5;
+  margin-top: var(--spacing-md);
+  margin-bottom: var(--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(--spacing-md);
+  padding-left: 0;
+}
+
+:root menu > li::before {
+  display: none;
+}
+
+:root hgroup {
+  margin-bottom: var(--spacing-lg);
+}
+
+:root hgroup :where(h1, h2, h3, h4, h5, h6) {
+  margin-bottom: var(--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(--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(--font-family-mono);
+  font-size: 0.875em;
+}
+
+: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;
+  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(--spacing-md);
+  margin-bottom: var(--spacing-md);
+}
+
+:root time {
+  font-style: normal;
+  font-variant-numeric: tabular-nums;
+}
+
+:root blockquote {
+  margin-top: var(--spacing-lg);
+  margin-bottom: var(--spacing-lg);
+  padding-left: var(--spacing-md);
+}
+
+:root blockquote blockquote {
+  margin-top: var(--spacing-sm);
+  margin-bottom: var(--spacing-sm);
+  padding-left: var(--spacing-sm);
+}
+
+:root q {
+  font-style: inherit;
+}
+
+:root :where(ul, ol) {
+  list-style: none;
+  margin-bottom: var(--spacing-md);
+  padding-left: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
+}
+
+:root li {
+  position: relative;
+  padding-left: 0.375em;
+}
+
+:root li + li {
+  margin-top: var(--spacing-xs);
+}
+
+:root li > ul, :root li > ol {
+  margin-top: var(--spacing-xs);
+  margin-bottom: var(--spacing-sm);
+  padding-left: var(--spacing-md);
+}
+
+:root ul > li::before {
+  content: '';
+  position: absolute;
+  left: -1.125em;
+  top: calc(0.875em - 0.1875em);
+  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;
+  left: -2.5em;
+  width: 1.75em;
+  text-align: right;
+  font-weight: 600;
+  color: currentColor;
+}
+
+:root dl {
+  margin-top: var(--spacing-md);
+  margin-bottom: var(--spacing-md);
+}
+
+:root dt {
+  font-weight: 600;
+  margin-top: var(--spacing-sm);
+}
+
+:root dt:first-child {
+  margin-top: 0;
+}
+
+:root dd {
+  margin-left: var(--spacing-md);
+}
+
+:root dt + dd {
+  margin-top: var(--spacing-xs);
+}
+
+:root dd + dd {
+  margin-top: var(--spacing-xs);
+}
+
+:root dd:last-child {
+  margin-bottom: 0;
+}
+
+:root pre {
+  margin-top: var(--spacing-md);
+  margin-bottom: var(--spacing-md);
+  font-family: var(--font-family-mono);
+  line-height: 1.6;
+  overflow-x: auto;
+}
+
+:root pre code {
+  font-size: inherit;
+  padding: 0;
+  background: none;
+  border-radius: 0;
+}
+
+:root fieldset {
+  margin-top: var(--spacing-md);
+  margin-bottom: var(--spacing-md);
+  padding: var(--spacing-md);
+}
+
+:root legend {
+  font-weight: 600;
+  padding: 0 var(--spacing-xs);
+}
+
+:root label {
+  display: inline-block;
+  font-weight: 600;
+  margin-bottom: var(--spacing-xs);
+}
+
+:root output {
+  display: inline-block;
+  font-variant-numeric: tabular-nums;
+}
+
+:root :where(meter, progress) {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+: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 :where(img, video, canvas, audio, iframe, svg) {
+  max-width: 100%;
+  height: auto;
+  vertical-align: middle;
+}
+
+:root figure {
+  margin-top: var(--spacing-lg);
+  margin-bottom: var(--spacing-lg);
+}
+
+:root figcaption {
+  margin-top: 0.375rem;
+  font-size: 0.875em;
+  line-height: 1.5;
+}
+
+:root table {
+  width: 100%;
+  margin-top: var(--spacing-md);
+  margin-bottom: var(--spacing-md);
+  border-collapse: collapse;
+  font-size: 1em;
+  line-height: 1.6;
+}
+
+:root caption {
+  margin-bottom: var(--spacing-xs);
+  font-size: 0.875em;
+  font-weight: 600;
+  text-align: left;
+}
+
+:root th, :root td {
+  padding: var(--spacing-xs) var(--spacing-sm);
+  text-align: left;
+}
+
+: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(--spacing-xl);
+  margin-bottom: var(--spacing-xl);
+  border: 0;
+  border-top: 1px solid;
+}
+
+:root :where(:focus, :focus-visible) {
+  outline-offset: 2px;
+}
+
+:root details {
+  margin-top: var(--spacing-md);
+  margin-bottom: var(--spacing-md);
+}
+
+:root summary {
+  cursor: pointer;
+  font-weight: 600;
+}
+
+:root details[open] > summary {
+  margin-bottom: var(--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;
+}
+}

package/src/css/base.css.min

@@ -0,0 +1 @@
+@layer base{:root{--spacing-xs:clamp(0.5rem, 0.375rem + 0.625vw, 0.75rem);--spacing-sm:clamp(0.75rem, 0.5625rem + 0.9375vw, 1.25rem);--spacing-md:clamp(1rem, 0.75rem + 1.25vw, 1.5rem);--spacing-lg:clamp(1.5rem, 1.125rem + 1.875vw, 2.5rem);--spacing-xl:clamp(2rem, 1.5rem + 2.5vw, 3rem);--scroll-offset:5rem;--font-family-base:system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--font-family-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;font-family:var(--font-family-base);font-size:clamp(1rem, 0.95rem + 0.25vw, 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(--scroll-offset)}:root h1{font-size:clamp(2.25rem, 1.95rem + 1.5vw, 3rem);line-height:1.1111;font-weight:800;margin-top:0;margin-bottom:var(--spacing-xl)}:root h2{font-size:clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);line-height:1.3333;font-weight:700;margin-top:var(--spacing-xl);margin-bottom:var(--spacing-md)}:root h3{font-size:clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);line-height:1.5;margin-top:var(--spacing-lg);margin-bottom:var(--spacing-sm)}:root h4{font-size:clamp(1rem, 0.975rem + 0.125vw, 1.125rem);line-height:1.5;margin-top:var(--spacing-lg);margin-bottom:var(--spacing-sm)}:root h5{font-size:1rem;line-height:1.5;margin-top:var(--spacing-md);margin-bottom:var(--spacing-xs)}:root h6{font-size:0.875rem;line-height:1.5;margin-top:var(--spacing-md);margin-bottom:var(--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(--spacing-md);padding-left:0}:root menu > li::before{display:none}:root hgroup{margin-bottom:var(--spacing-lg)}:root hgroup :where(h1, h2, h3, h4, h5, h6){margin-bottom:var(--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(--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(--font-family-mono);font-size:0.875em}: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;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(--spacing-md);margin-bottom:var(--spacing-md)}:root time{font-style:normal;font-variant-numeric:tabular-nums}:root blockquote{margin-top:var(--spacing-lg);margin-bottom:var(--spacing-lg);padding-left:var(--spacing-md)}:root blockquote blockquote{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);padding-left:var(--spacing-sm)}:root q{font-style:inherit}:root :where(ul, ol){list-style:none;margin-bottom:var(--spacing-md);padding-left:clamp(1.5rem, 1.25rem + 1.25vw, 2rem)}:root li{position:relative;padding-left:0.375em}:root li + li{margin-top:var(--spacing-xs)}:root li > ul, :root li > ol{margin-top:var(--spacing-xs);margin-bottom:var(--spacing-sm);padding-left:var(--spacing-md)}:root ul > li::before{content:'';position:absolute;left:-1.125em;top:calc(0.875em - 0.1875em);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;left:-2.5em;width:1.75em;text-align:right;font-weight:600;color:currentColor}:root dl{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md)}:root dt{font-weight:600;margin-top:var(--spacing-sm)}:root dt:first-child{margin-top:0}:root dd{margin-left:var(--spacing-md)}:root dt + dd{margin-top:var(--spacing-xs)}:root dd + dd{margin-top:var(--spacing-xs)}:root dd:last-child{margin-bottom:0}:root pre{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md);font-family:var(--font-family-mono);line-height:1.6;overflow-x:auto}:root pre code{font-size:inherit;padding:0;background:none;border-radius:0}:root fieldset{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md);padding:var(--spacing-md)}:root legend{font-weight:600;padding:0 var(--spacing-xs)}:root label{display:inline-block;font-weight:600;margin-bottom:var(--spacing-xs)}:root output{display:inline-block;font-variant-numeric:tabular-nums}:root :where(meter, progress){display:inline-block;vertical-align:middle}: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 :where(img, video, canvas, audio, iframe, svg){max-width:100%;height:auto;vertical-align:middle}:root figure{margin-top:var(--spacing-lg);margin-bottom:var(--spacing-lg)}:root figcaption{margin-top:0.375rem;font-size:0.875em;line-height:1.5}:root table{width:100%;margin-top:var(--spacing-md);margin-bottom:var(--spacing-md);border-collapse:collapse;font-size:1em;line-height:1.6}:root caption{margin-bottom:var(--spacing-xs);font-size:0.875em;font-weight:600;text-align:left}:root th, :root td{padding:var(--spacing-xs) var(--spacing-sm);text-align:left}: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(--spacing-xl);margin-bottom:var(--spacing-xl);border:0;border-top:1px solid}:root :where(:focus, :focus-visible){outline-offset:2px}:root details{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md)}:root summary{cursor:pointer;font-weight:600}:root details[open] > summary{margin-bottom:var(--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}}