@leftium/nimble.css 0.1.0 → 0.3.0

package/README.md

@@ -1,52 +1,95 @@
 # nimble.css
 
-A minimal class/classless CSS library. Drop it in and your semantic HTML looks good — no classes required. ~3 KB gzipped.
+Minimal CSS library for great-looking default HTML styles; no classes required. ~3.4 KB brotli (core).
 
-- **Classless by default** — style every standard HTML element with zero markup changes
-- **Automatic dark mode** — via `prefers-color-scheme` and `light-dark()`
-- **OKLCH color system** — perceptually uniform, fully customizable via SCSS config
+- **Classless** — every standard HTML element elegantly styled without classes
+- **Dark mode** — included (automatic and manual)
 - **Cascade layers** — plays nicely alongside your own styles
-- **Tiny** — 11.9 KB minified, ~3.1 KB gzipped
+- **Tiny** — core is only ~3.4 KB brotli (15.9 KB minified)
 
 ## Demos
 
 - [HTML5 Test Page](https://leftium.github.io/nimble.css/demo/) — every standard HTML element
+- [Pico CSS-style Demo](https://leftium.github.io/nimble.css/demo/pico.html) — Pico CSS-inspired page with forms, buttons, article, tables, and more
 - [Extended Demo](https://leftium.github.io/nimble.css/demo/extended.html) — layouts, utilities, button variants, forms, dark mode toggle
 
 ## Quick Start
 
-### CDN
-
-```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Leftium/nimble.css@main/dist/nimble.min.css">
+```bash
+npm install @leftium/nimble.css
 ```
 
-That's it. Write semantic HTML and it just works.
+Then import in your CSS, JS, or framework:
+
+```css
+/* CSS */
+@import '@leftium/nimble.css';
+```
 
-### Sub-bundles
+```js
+// JS / framework entry point
+import '@leftium/nimble.css';
+```
 
-Pick only what you need:
+<details>
+<summary>Or use CDN</summary>
 
-| Bundle | Minified | Contents |
-|---|---|---|
-| `nimble.min.css` | 11.9 KB | Everything |
-| `nimble-base.min.css` | 5.2 KB | Reset + colors + document + typography |
-| `nimble-reset.min.css` | 1.7 KB | Modern CSS reset only |
-| `nimble-utilities.min.css` | 572 B | Utility classes only |
+Via jsDelivr (npm):
 
 ```html
-<!-- Just the classless core, no element styles or utilities -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Leftium/nimble.css@main/dist/nimble-base.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@leftium/nimble.css/dist/nimble.min.css">
 ```
 
-### Download
+</details>
+
+<details>
+<summary>For 3.4 KB core size</summary>
+
+`nimble.min.css` (19.4 KB) includes everything.
 
-Grab [`nimble.min.css`](dist/nimble.min.css) from this repo and include it locally:
+To trim size, use `nimble-core.min.css` (15.9 KB) + only the add-ons you need:
+
+| Add-on | Minified |
+|---|---|
+| `nimble-progress.min.css` | 1.6 KB |
+| `nimble-meter.min.css` | 1.0 KB |
+| `nimble-select.min.css` | 1.0 KB |
+
+Mix and match with CDN links (comment out what you don't need):
 
 ```html
-<link rel="stylesheet" href="nimble.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@leftium/nimble.css/dist/nimble-core.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@leftium/nimble.css/dist/nimble-progress.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@leftium/nimble.css/dist/nimble-meter.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@leftium/nimble.css/dist/nimble-select.min.css">
+```
+
+Or with SCSS (comment out what you don't need):
+
+```scss
+@use '@leftium/nimble.css/scss/core';       // core
+@use '@leftium/nimble.css/scss/progress';   // add-ons
+@use '@leftium/nimble.css/scss/meter';
+@use '@leftium/nimble.css/scss/select';
 ```
 
+<details>
+<summary>Granular sub-bundles</summary>
+
+For advanced use, `nimble-core` is composed of these non-overlapping layers:
+
+| Sub-bundle | Minified | Contents |
+|---|---|---|
+| `nimble-reset.min.css` | 1.8 KB | Modern CSS reset |
+| `nimble-base.min.css` | 3.8 KB | Colors + document + typography |
+| `nimble-utilities.min.css` | 572 B | Utility classes |
+
+</details>
+
+</details>
+
+That's it. Write semantic HTML and it just works.
+
 ## Utility Classes
 
 Content is centered at `720px` by default — no class needed. These opt-in utilities handle the rest. Disable all with `$enable-utilities: false`.
@@ -63,52 +106,106 @@ Content is centered at `720px` by default — no class needed. These opt-in util
 
 ## Customization
 
-nimble.css is built with SCSS. Override any config variable:
+### CSS Custom Properties
+
+Override at runtime — no build step needed. Hover and focus states auto-derive from the base color via [relative color syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors).
+
+```css
+:root {
+  /* Surface hue (shared by backgrounds, text, border) */
+  --nc-surface-hue: 250;
+
+  /* Primary accent (links, buttons, focus rings) — hover/focus auto-derive */
+  --nc-primary: light-dark(oklch(0.5 0.2 250), oklch(0.6 0.2 250));
+  --nc-primary-contrast: light-dark(#fff, oklch(0.15 0.005 250));
+
+  /* Secondary accent (reset buttons) — hover/focus auto-derive */
+  --nc-secondary: light-dark(oklch(0.45 0.05 250), oklch(0.6 0.05 250));
+  --nc-secondary-contrast: light-dark(#fff, oklch(0.15 0.005 250));
+
+  /* Validation colors */
+  --nc-valid: light-dark(oklch(0.52 0.17 145), oklch(0.65 0.2 145));
+  --nc-invalid: light-dark(oklch(0.55 0.22 25), oklch(0.65 0.22 25));
+
+  /* Font stacks */
+  --nc-font-sans: system-ui, sans-serif;
+  --nc-font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+
+  /* Layout */
+  --nc-spacing: 1rem;
+  --nc-radius: 0.25rem;
+  --nc-content-width: 720px;
+}
+```
+
+These properties are auto-derived and available for use in your own components (no need to set them):
+
+`--nc-surface-1` .. `--nc-surface-4`, `--nc-text`, `--nc-border`, `--nc-primary-hover`, `--nc-primary-focus`, `--nc-secondary-hover`, `--nc-secondary-focus`
+
+<details>
+<summary>SCSS (advanced)</summary>
+
+Build a CSS file with new defaults. SCSS-unique options listed first; the rest mirror CSS custom properties above.
 
 ```scss
 @use 'nimble' with (
-  $primary-hue: 150,
-  $primary-chroma: 0.15,
-  $radius: 0.5rem,
-  $content-width: 960px,
-  $enable-dialog: false,
+  // --- SCSS-only (no CSS custom property equivalent) ---
+
+  $prefix: '--nc-',        // CSS custom property prefix
+  $wide-width: 1200px,     // wide layout max-width (used in utilities)
+
+  // Feature flags (tree-shake unused components)
+  $enable-utilities: true,
+  $enable-dialog: true,
+  $enable-switch: true,
+  $enable-details: true,
+
+  // Surface fine-tuning
+  $surface-chroma: 0.002,
+  $surface-light-base: 0.985,     // light mode base lightness
+  $surface-dark-base: 0.170,      // dark mode base lightness
+  $surface-offsets: (2: 0.03, 3: 0.06, 4: 0.10),
+  $surface-dark-chroma-boost: 0.003,
+  $surface-dark-hue-shift: 10,
+
+  // --- Same as CSS custom properties above ---
+
+  $surface-hue: 250,
+
+  // Primary accent (hue, chroma, lightness → --nc-primary)
+  $primary-hue: 250,
+  $primary-chroma: 0.2,
+  $primary-lightness: 0.50,
+
+  // Secondary accent (hue, chroma, lightness → --nc-secondary)
+  $secondary-hue: 250,
+  $secondary-chroma: 0.05,
+  $secondary-lightness: 0.45,
+
+  // Font stacks
+  $font-sans: (system-ui, sans-serif),
+  $font-mono: (ui-monospace, monospace),
+
+  // Layout
+  $spacing: 1rem,
+  $radius: 0.25rem,
+  $content-width: 720px,
 );
 ```
 
-### Config Variables
-
-| Variable | Default | Description |
-|---|---|---|
-| `$prefix` | `'--nc-'` | CSS custom property prefix |
-| `$primary-hue` | `250` | Primary accent hue (OKLCH) |
-| `$primary-chroma` | `0.2` | Primary accent chroma |
-| `$primary-lightness` | `0.50` | Primary accent lightness |
-| `$secondary-hue` | `250` | Secondary accent hue |
-| `$secondary-chroma` | `0.05` | Secondary accent chroma |
-| `$secondary-lightness` | `0.45` | Secondary accent lightness |
-| `$surface-hue` | `250` | Background surface hue |
-| `$font-sans` | `system-ui, sans-serif` | Body font stack |
-| `$font-mono` | `ui-monospace, ...` | Code font stack |
-| `$spacing` | `1rem` | Base spacing unit |
-| `$radius` | `0.25rem` | Border radius |
-| `$content-width` | `720px` | Max content width |
-| `$wide-width` | `1200px` | Wide layout max-width |
-| `$enable-utilities` | `true` | Include utility classes |
-| `$enable-dialog` | `true` | Include dialog styles |
-| `$enable-switch` | `true` | Include switch toggle |
-| `$enable-details` | `true` | Include details/summary |
+</details>
 
 ## Design Lineage
 
 nimble.css combines [Open Props](https://open-props.style/)'s design token philosophy with [PicoCSS](https://picocss.com/)'s classless aesthetics. Key concepts borrowed from Open Props:
 
-- **Surface hierarchy** (`surface-1` through `surface-4`) — layered backgrounds for page, card, input, and overlay contexts. Defined in `_colors.scss` from OKLCH parameters rather than imported at runtime.
-- **Text hierarchy** (`text-1`, `text-2`) — primary and muted text colors, same naming convention as Open Props.
-- **OKLCH color space** — perceptually uniform color system. Change `$primary-hue` and the entire palette regenerates consistently.
+- **Surface hierarchy** (`surface-1` through `surface-4`) — layered backgrounds for page, card, input, and overlay contexts, all derived from a single `--nc-surface-hue`.
+- **Text color** (`text`) — single text color variable; muted text derived inline via `color-mix()`.
+- **OKLCH color space** — perceptually uniform color system. Change `--nc-primary` and hover/focus states regenerate automatically via [relative color syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors).
 - **Curated scale values** — `$spacing: 1rem` (~Open Props `size-3`) and `$radius: 0.25rem` (~Open Props `radius-2`) are sourced from Open Props' scales.
 - **Minimal DevTools pollution** — ~20 semantic custom properties on `:root` plus scoped `--_` internals per component, rather than dumping hundreds of variables globally.
 
-The key architectural difference: nimble.css is self-contained SCSS with no runtime dependency on Open Props. Token values are baked in at compile time, and the SCSS parametric layer (change one hue, regenerate everything) goes beyond what pure CSS custom properties can offer.
+The key architectural difference: nimble.css is self-contained SCSS with no runtime dependency on Open Props. Color derivatives (hover, focus, surfaces) are expressed as native CSS relative colors and `calc()`, so runtime theming works without a build step.
 
 ## Building from Source
 

package/dist/nimble-base.css

@@ -1,140 +1,21 @@
 @layer nimble.reset, nimble.base;
-@layer nimble.reset {
-  :where(*),
-  :where(*::before),
-  :where(*::after) {
-    box-sizing: border-box;
-    background-repeat: no-repeat;
-  }
-  :where(html) {
-    line-height: 1.5;
-    -webkit-text-size-adjust: 100%;
-    tab-size: 4;
-  }
-  :where(body) {
-    margin: 0;
-  }
-  :where(h1) {
-    font-size: 2em;
-    margin-block: 0.67em;
-  }
-  :where(hr) {
-    height: 0;
-    color: inherit;
-  }
-  :where(nav) :where(ol, ul) {
-    list-style-type: none;
-    padding: 0;
-  }
-  :where(pre) {
-    font-family: monospace, monospace;
-    font-size: 1em;
-  }
-  :where(abbr[title]) {
-    text-decoration: underline dotted;
-  }
-  :where(b, strong) {
-    font-weight: bolder;
-  }
-  :where(code, kbd, samp) {
-    font-family: monospace, monospace;
-    font-size: 1em;
-  }
-  :where(small) {
-    font-size: 80%;
-  }
-  :where(sub, sup) {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-  :where(sub) {
-    bottom: -0.25em;
-  }
-  :where(sup) {
-    top: -0.5em;
-  }
-  :where(iframe) {
-    border-style: none;
-  }
-  :where(table) {
-    border-collapse: collapse;
-    border-color: currentColor;
-    text-indent: 0;
-  }
-  :where(button, input, select, textarea) {
-    font: inherit;
-    letter-spacing: inherit;
-  }
-  :where(button, [type=button], [type=reset], [type=submit]) {
-    -webkit-appearance: button;
-  }
-  :where(fieldset) {
-    border: 1px solid #a0a0a0;
-  }
-  :where(progress) {
-    vertical-align: baseline;
-  }
-  :where(textarea) {
-    resize: vertical;
-    overflow: auto;
-  }
-  :where([type=search]) {
-    -webkit-appearance: textfield;
-    outline-offset: -2px;
-  }
-  :where(::-webkit-search-decoration) {
-    -webkit-appearance: none;
-  }
-  :where(::-webkit-inner-spin-button),
-  :where(::-webkit-outer-spin-button) {
-    height: auto;
-  }
-  :where(::-webkit-file-upload-button) {
-    -webkit-appearance: button;
-    font: inherit;
-  }
-  :where(summary) {
-    display: list-item;
-  }
-  :where(a, area, button, input, label, select, summary, textarea, [tabindex]) {
-    touch-action: manipulation;
-  }
-  :where([aria-busy=true]) {
-    cursor: progress;
-  }
-  :where([aria-disabled=true], [disabled]) {
-    cursor: not-allowed;
-  }
-  @media (prefers-reduced-motion: reduce) {
-    :where(*),
-    :where(*::before),
-    :where(*::after) {
-      animation-duration: 0.01ms !important;
-      animation-iteration-count: 1 !important;
-      transition-duration: 0.01ms !important;
-      scroll-behavior: auto !important;
-    }
-  }
-}
 @layer nimble.base {
   :root {
     color-scheme: light dark;
-    --nc-surface-1: light-dark(oklch(0.985 0.002 250), oklch(0.17 0.005 260));
-    --nc-surface-2: light-dark(oklch(0.955 0.002 250), oklch(0.2 0.005 260));
-    --nc-surface-3: light-dark(oklch(0.925 0.002 250), oklch(0.23 0.005 260));
-    --nc-surface-4: light-dark(oklch(0.885 0.002 250), oklch(0.27 0.005 260));
-    --nc-text-1: light-dark(oklch(0.28 0.005 250), oklch(0.86 0.005 250));
-    --nc-text-2: light-dark(oklch(0.58 0.005 250), oklch(0.65 0.005 250));
-    --nc-border: light-dark(oklch(0.83 0.005 250), oklch(0.28 0.005 260));
+    --nc-surface-hue: 250;
+    --nc-surface-1: light-dark(oklch(0.985 0.002 var(--nc-surface-hue)), oklch(0.17 0.005 calc(var(--nc-surface-hue) + 10)));
+    --nc-surface-2: light-dark(oklch(0.955 0.002 var(--nc-surface-hue)), oklch(0.2 0.005 calc(var(--nc-surface-hue) + 10)));
+    --nc-surface-3: light-dark(oklch(0.925 0.002 var(--nc-surface-hue)), oklch(0.23 0.005 calc(var(--nc-surface-hue) + 10)));
+    --nc-surface-4: light-dark(oklch(0.885 0.002 var(--nc-surface-hue)), oklch(0.27 0.005 calc(var(--nc-surface-hue) + 10)));
+    --nc-text: light-dark(oklch(0.28 0.005 var(--nc-surface-hue)), oklch(0.86 0.005 var(--nc-surface-hue)));
+    --nc-border: light-dark(oklch(0.83 0.005 var(--nc-surface-hue)), oklch(0.28 0.005 calc(var(--nc-surface-hue) + 10)));
     --nc-primary: light-dark(oklch(0.5 0.2 250), oklch(0.6 0.2 250));
-    --nc-primary-hover: light-dark(oklch(0.4 0.2 250), oklch(0.7 0.2 250));
-    --nc-primary-focus: oklch(0.5 0.2 250 / 0.4);
+    --nc-primary-hover: light-dark(oklch(from var(--nc-primary) calc(l - 0.1) c h), oklch(from var(--nc-primary) calc(l + 0.1) c h));
+    --nc-primary-focus: oklch(from var(--nc-primary) l c h / 0.4);
     --nc-primary-contrast: light-dark(#fff, oklch(0.15 0.005 250));
     --nc-secondary: light-dark(oklch(0.45 0.05 250), oklch(0.6 0.05 250));
-    --nc-secondary-hover: light-dark(oklch(0.35 0.05 250), oklch(0.7 0.05 250));
-    --nc-secondary-focus: oklch(0.45 0.05 250 / 0.3);
+    --nc-secondary-hover: light-dark(oklch(from var(--nc-secondary) calc(l - 0.1) c h), oklch(from var(--nc-secondary) calc(l + 0.1) c h));
+    --nc-secondary-focus: oklch(from var(--nc-secondary) l c h / 0.3);
     --nc-secondary-contrast: light-dark(#fff, oklch(0.15 0.005 250));
     --nc-valid: light-dark(oklch(0.52 0.17 145), oklch(0.65 0.2 145));
     --nc-invalid: light-dark(oklch(0.55 0.22 25), oklch(0.65 0.22 25));
@@ -156,7 +37,7 @@
     font-family: var(--nc-font-sans);
     font-size: 100%;
     line-height: 1.5;
-    color: var(--nc-text-1);
+    color: var(--nc-text);
     background-color: var(--nc-surface-1);
   }
   body {
@@ -166,10 +47,15 @@
   }
   body > * {
     grid-column: 2;
+    min-width: 0;
+  }
+  body > [style*="display: contents"] > * {
+    grid-column: 2;
+    min-width: 0;
   }
   ::selection {
     background-color: var(--nc-primary-focus);
-    color: var(--nc-text-1);
+    color: var(--nc-text);
   }
 }
 @layer nimble.base {
@@ -184,7 +70,7 @@
   h2 {
     font-size: 1.75rem;
     line-height: 1.15;
-    margin-top: 0;
+    margin-top: 2rem;
     margin-bottom: var(--nc-spacing);
     font-weight: 700;
     text-wrap: balance;
@@ -192,7 +78,7 @@
   h3 {
     font-size: 1.5rem;
     line-height: 1.2;
-    margin-top: 0;
+    margin-top: 1.5rem;
     margin-bottom: var(--nc-spacing);
     font-weight: 700;
     text-wrap: balance;
@@ -200,7 +86,7 @@
   h4 {
     font-size: 1.25rem;
     line-height: 1.3;
-    margin-top: 0;
+    margin-top: 1.5rem;
     margin-bottom: var(--nc-spacing);
     font-weight: 700;
     text-wrap: balance;
@@ -208,7 +94,7 @@
   h5 {
     font-size: 1.125rem;
     line-height: 1.4;
-    margin-top: 0;
+    margin-top: 1.5rem;
     margin-bottom: var(--nc-spacing);
     font-weight: 700;
     text-wrap: balance;
@@ -216,7 +102,7 @@
   h6 {
     font-size: 1rem;
     line-height: 1.5;
-    margin-top: 0;
+    margin-top: 1.5rem;
     margin-bottom: var(--nc-spacing);
     font-weight: 700;
     text-wrap: balance;
@@ -236,9 +122,6 @@
     margin-top: 0;
     margin-bottom: var(--nc-spacing);
   }
-  :where(p, ul, ol, dl, blockquote, pre, table, figure, form) + :is(h1, h2, h3, h4, h5, h6) {
-    margin-top: calc(var(--nc-spacing) * 2);
-  }
   ul, ol {
     padding-inline-start: 1.5em;
   }
@@ -266,7 +149,7 @@
   :where(blockquote) cite {
     font-style: normal;
     font-size: 0.9em;
-    color: var(--nc-text-2);
+    color: color-mix(in oklch, var(--nc-text), transparent 40%);
   }
   hr {
     border: none;

package/dist/nimble-base.min.css

@@ -1 +1 @@
-@layer nimble.reset{:where(*),:where(),:where(){box-sizing:border-box;background-repeat:no-repeat}:where(html){-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5}:where(body){margin:0}:where(h1){margin-block:.67em;font-size:2em}:where(hr){height:0;color:inherit}:where(nav) :where(ol,ul){padding:0;list-style-type:none}:where(pre){font-family:monospace;font-size:1em}:where(abbr[title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,samp){font-family:monospace;font-size:1em}:where(small){font-size:80%}:where(sub,sup){vertical-align:baseline;font-size:75%;line-height:0;position:relative}:where(sub){bottom:-.25em}:where(sup){top:-.5em}:where(iframe){border-style:none}:where(table){border-collapse:collapse;text-indent:0;border-color:currentColor}:where(button,input,select,textarea){font:inherit;letter-spacing:inherit}:where(button,[type=button],[type=reset],[type=submit]){-webkit-appearance:button}:where(fieldset){border:1px solid #a0a0a0}:where(progress){vertical-align:baseline}:where(textarea){resize:vertical;overflow:auto}:where([type=search]){-webkit-appearance:textfield;outline-offset:-2px}:where(){-webkit-appearance:none}:where(),:where(){height:auto}:where(){-webkit-appearance:button;font:inherit}:where(summary){display:list-item}:where(a,area,button,input,label,select,summary,textarea,[tabindex]){touch-action:manipulation}:where([aria-busy=true]){cursor:progress}:where([aria-disabled=true],[disabled]){cursor:not-allowed}@media (prefers-reduced-motion:reduce){:where(*),:where(),:where(){scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}}@layer nimble.base{:root{color-scheme:light dark;--nc-surface-1:light-dark(oklch(98.5% .002 250),oklch(17% .005 260));--nc-surface-2:light-dark(oklch(95.5% .002 250),oklch(20% .005 260));--nc-surface-3:light-dark(oklch(92.5% .002 250),oklch(23% .005 260));--nc-surface-4:light-dark(oklch(88.5% .002 250),oklch(27% .005 260));--nc-text-1:light-dark(oklch(28% .005 250),oklch(86% .005 250));--nc-text-2:light-dark(oklch(58% .005 250),oklch(65% .005 250));--nc-border:light-dark(oklch(83% .005 250),oklch(28% .005 260));--nc-primary:light-dark(oklch(50% .2 250),oklch(60% .2 250));--nc-primary-hover:light-dark(oklch(40% .2 250),oklch(70% .2 250));--nc-primary-focus:oklch(50% .2 250/.4);--nc-primary-contrast:light-dark(#fff,oklch(15% .005 250));--nc-secondary:light-dark(oklch(45% .05 250),oklch(60% .05 250));--nc-secondary-hover:light-dark(oklch(35% .05 250),oklch(70% .05 250));--nc-secondary-focus:oklch(45% .05 250/.3);--nc-secondary-contrast:light-dark(#fff,oklch(15% .005 250));--nc-valid:light-dark(oklch(52% .17 145),oklch(65% .2 145));--nc-invalid:light-dark(oklch(55% .22 25),oklch(65% .22 25));--nc-font-sans:system-ui, sans-serif;--nc-font-mono:ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;--nc-spacing:1rem;--nc-radius:.25rem;--nc-content-width:720px}[data-theme=dark]{color-scheme:dark}[data-theme=light]{color-scheme:light}html{font-family:var(--nc-font-sans);color:var(--nc-text-1);background-color:var(--nc-surface-1);font-size:100%;line-height:1.5}body{grid-template-columns:1fr min(var(--nc-content-width), calc(100% - 2 * var(--nc-spacing))) 1fr;min-height:100dvh;display:grid}body>*{grid-column:2}::selection{background-color:var(--nc-primary-focus);color:var(--nc-text-1)}h1{margin-top:0;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:2rem;font-weight:700;line-height:1.1}h2{margin-top:0;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.75rem;font-weight:700;line-height:1.15}h3{margin-top:0;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.5rem;font-weight:700;line-height:1.2}h4{margin-top:0;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.25rem;font-weight:700;line-height:1.3}h5{margin-top:0;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.125rem;font-weight:700;line-height:1.4}h6{margin-top:0;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1rem;font-weight:700;line-height:1.5}@media (width<=720px){h1{font-size:1.75rem}h2{font-size:1.5rem}h3{font-size:1.3rem}}p,ul,ol,dl,blockquote,pre,table,figure,form,fieldset{margin-top:0;margin-bottom:var(--nc-spacing)}:where(p,ul,ol,dl,blockquote,pre,table,figure,form)+:is(h1,h2,h3,h4,h5,h6){margin-top:calc(var(--nc-spacing) * 2)}ul,ol{padding-inline-start:1.5em}li{margin-bottom:.25em}:where(li)>:where(ul,ol){margin-bottom:0}dt{font-weight:600}dd{margin-inline-start:1.5em;margin-bottom:.5em}blockquote{margin-block:var(--nc-spacing);padding:.25em var(--nc-spacing);border-inline-start:.25rem solid var(--nc-border);margin-inline:0;font-style:italic}:where(blockquote) footer,:where(blockquote) cite{color:var(--nc-text-2);font-size:.9em;font-style:normal}hr{background-color:color-mix(in oklch, var(--nc-border), transparent 40%);height:1px;margin:calc(var(--nc-spacing) * 2) 0;border:none}mark{color:light-dark(inherit,oklch(95% .01 85));background-color:light-dark(#fde68a,oklch(55% .12 85));border-radius:2px;padding:.1em .25em}address{font-style:normal}}
+@layer nimble.reset;@layer nimble.base{:root{color-scheme:light dark;--nc-surface-hue:250;--nc-surface-1:light-dark(oklch(.985 .002 var(--nc-surface-hue)),oklch(.17 .005 calc(var(--nc-surface-hue) + 10)));--nc-surface-2:light-dark(oklch(.955 .002 var(--nc-surface-hue)),oklch(.2 .005 calc(var(--nc-surface-hue) + 10)));--nc-surface-3:light-dark(oklch(.925 .002 var(--nc-surface-hue)),oklch(.23 .005 calc(var(--nc-surface-hue) + 10)));--nc-surface-4:light-dark(oklch(.885 .002 var(--nc-surface-hue)),oklch(.27 .005 calc(var(--nc-surface-hue) + 10)));--nc-text:light-dark(oklch(.28 .005 var(--nc-surface-hue)),oklch(.86 .005 var(--nc-surface-hue)));--nc-border:light-dark(oklch(.83 .005 var(--nc-surface-hue)),oklch(.28 .005 calc(var(--nc-surface-hue) + 10)));--nc-primary:light-dark(oklch(50% .2 250),oklch(60% .2 250));--nc-primary-hover:light-dark(oklch(from var(--nc-primary) calc(l - .1) c h),oklch(from var(--nc-primary) calc(l + .1) c h));--nc-primary-focus:oklch(from var(--nc-primary) l c h / .4);--nc-primary-contrast:light-dark(#fff,oklch(15% .005 250));--nc-secondary:light-dark(oklch(45% .05 250),oklch(60% .05 250));--nc-secondary-hover:light-dark(oklch(from var(--nc-secondary) calc(l - .1) c h),oklch(from var(--nc-secondary) calc(l + .1) c h));--nc-secondary-focus:oklch(from var(--nc-secondary) l c h / .3);--nc-secondary-contrast:light-dark(#fff,oklch(15% .005 250));--nc-valid:light-dark(oklch(52% .17 145),oklch(65% .2 145));--nc-invalid:light-dark(oklch(55% .22 25),oklch(65% .22 25));--nc-font-sans:system-ui, sans-serif;--nc-font-mono:ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;--nc-spacing:1rem;--nc-radius:.25rem;--nc-content-width:720px}[data-theme=dark]{color-scheme:dark}[data-theme=light]{color-scheme:light}html{font-family:var(--nc-font-sans);color:var(--nc-text);background-color:var(--nc-surface-1);font-size:100%;line-height:1.5}body{grid-template-columns:1fr min(var(--nc-content-width), calc(100% - 2 * var(--nc-spacing))) 1fr;min-height:100dvh;display:grid}body>*,body>[style*="display: contents"]>*{grid-column:2;min-width:0}::selection{background-color:var(--nc-primary-focus);color:var(--nc-text)}h1{margin-top:0;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:2rem;font-weight:700;line-height:1.1}h2{margin-top:2rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.75rem;font-weight:700;line-height:1.15}h3{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.5rem;font-weight:700;line-height:1.2}h4{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.25rem;font-weight:700;line-height:1.3}h5{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.125rem;font-weight:700;line-height:1.4}h6{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1rem;font-weight:700;line-height:1.5}@media (width<=720px){h1{font-size:1.75rem}h2{font-size:1.5rem}h3{font-size:1.3rem}}p,ul,ol,dl,blockquote,pre,table,figure,form,fieldset{margin-top:0;margin-bottom:var(--nc-spacing)}ul,ol{padding-inline-start:1.5em}li{margin-bottom:.25em}:where(li)>:where(ul,ol){margin-bottom:0}dt{font-weight:600}dd{margin-inline-start:1.5em;margin-bottom:.5em}blockquote{margin-block:var(--nc-spacing);padding:.25em var(--nc-spacing);border-inline-start:.25rem solid var(--nc-border);margin-inline:0;font-style:italic}:where(blockquote) footer,:where(blockquote) cite{color:color-mix(in oklch, var(--nc-text), transparent 40%);font-size:.9em;font-style:normal}hr{background-color:color-mix(in oklch, var(--nc-border), transparent 40%);height:1px;margin:calc(var(--nc-spacing) * 2) 0;border:none}mark{color:light-dark(inherit,oklch(95% .01 85));background-color:light-dark(#fde68a,oklch(55% .12 85));border-radius:2px;padding:.1em .25em}address{font-style:normal}}