@echodial/deck 0.1.0

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@echodial/deck",
+  "version": "0.1.0",
+  "description": "A mobile-first CSS framework with no build step, no config file, and no dependencies. Retheme an entire app from one number.",
+  "keywords": [
+    "css",
+    "css-framework",
+    "mobile-first",
+    "no-build",
+    "design-tokens",
+    "oklch",
+    "cascade-layers",
+    "container-queries",
+    "logical-properties",
+    "view-transitions",
+    "rtl",
+    "php",
+    "keel"
+  ],
+  "homepage": "https://get-keel.dev/deck",
+  "bugs": "https://github.com/srivera145/deck/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/srivera145/deck.git"
+  },
+  "license": "MIT",
+  "author": "Santos Rivera",
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "./dist/deck.js",
+    "./dist/deck-extras.js",
+    "./dist/deck-adapters.js",
+    "./dist/deck.bundle.js"
+  ],
+  "main": "./dist/deck.bundle.js",
+  "module": "./dist/deck.esm.js",
+  "style": "./dist/deck.css",
+  "unpkg": "./dist/deck.min.css",
+  "jsdelivr": "./dist/deck.min.css",
+  "bin": {
+    "deck": "./bin/deck.mjs"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/deck.esm.js",
+      "require": "./dist/deck.bundle.js",
+      "default": "./dist/deck.bundle.js"
+    },
+    "./css": "./dist/deck.css",
+    "./css/min": "./dist/deck.min.css",
+    "./icons": "./dist/deck-icons.svg",
+    "./js": "./dist/deck.js",
+    "./extras": "./dist/deck-extras.js",
+    "./adapters": "./dist/deck-adapters.js",
+    "./bundle": "./dist/deck.bundle.js",
+    "./layers/*": "./dist/layers/*",
+    "./src/*": "./src/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "bin",
+    "build.mjs",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "node build.mjs",
+    "demo": "node build.mjs && node bin/deck.mjs init public_html/assets/deck --force && node -e \"import('node:fs/promises').then(async f=>{await Promise.all(['deck.min.css','deck.bundle.min.js'].map(n=>f.copyFile('dist/'+n,'public_html/assets/deck/'+n)));await f.mkdir('public_html/assets/images',{recursive:true});for(const n of await f.readdir('dist/brand'))await f.copyFile('dist/brand/'+n,'public_html/assets/images/'+n)})\"",
+    "start": "php -S localhost:4321 -t public_html",
+    "clean": "node -e \"import('node:fs/promises').then(f=>f.rm('dist',{recursive:true,force:true}))\"",
+    "prepublishOnly": "node build.mjs",
+    "brand": "node tools/make-brand.mjs",
+    "icons": "node tools/icons/build-icons.mjs"
+  },
+  "devDependencies": {
+    "esbuild": "^0.28.0",
+    "opentype.js": "^2.0.0"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "browserslist": [
+    "chrome >= 117",
+    "edge >= 117",
+    "safari >= 17.4",
+    "firefox >= 128"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/00-layers.css

@@ -0,0 +1,87 @@
+/* ==========================================================================
+   Deck — 00 Layers
+   The whole cascade contract in one place, declared before any rule exists.
+   Order is decided here, not by file order, not by specificity, and never by
+   !important.
+
+   Later layers win. Anything you write OUTSIDE a layer beats every layer, so
+   a plain rule in a page template always wins with no escalation.
+
+     deck.*    the framework
+     app.*     your slots, in the order you almost certainly want them
+
+   In a Keel view you can write:
+
+     @layer app.pages {
+       .page-header { padding-block: var(--space-8); }
+     }
+
+   and it beats every deck rule without a single !important, while still being
+   overridable by app.overrides and by unlayered CSS.
+   ========================================================================== */
+
+@layer
+  deck.reset,      /* normalize and element defaults        */
+  deck.tokens,     /* custom properties only                */
+  deck.type,       /* headings, prose, links                */
+  deck.layout,     /* containers, stack, grid, containers   */
+  deck.components, /* buttons, forms, cards, grid, charts   */
+  deck.mobile,     /* sheets, tab bar, icons, emoji         */
+  deck.motion,     /* transitions, entrances, view trans.   */
+  deck.effects,    /* gradients, 3D, surface treatments     */
+  deck.utilities,  /* single-purpose classes                */
+  deck.rtl,        /* direction fixes, must beat utilities  */
+  deck.print,      /* paper                                 */
+
+  app.base,        /* your resets and element styles        */
+  app.components,  /* your components and deck overrides    */
+  app.pages,       /* per-page and per-view tweaks          */
+  app.overrides;   /* the escape hatch, still not !important */
+
+/* --------------------------------------------------------------------------
+   Registered custom properties.
+   @property is not affected by layers. Registering a property gives it a type,
+   which is what lets the browser interpolate it — an angle or a color in a
+   custom property can now animate, which plain custom properties cannot do.
+   -------------------------------------------------------------------------- */
+
+@property --g-angle {
+  syntax: "<angle>";
+  initial-value: 180deg;
+  inherits: false;
+}
+@property --g-from {
+  syntax: "<color>";
+  initial-value: transparent;
+  inherits: false;
+}
+@property --g-to {
+  syntax: "<color>";
+  initial-value: transparent;
+  inherits: false;
+}
+@property --g-stop {
+  syntax: "<percentage>";
+  initial-value: 50%;
+  inherits: false;
+}
+@property --sheen {
+  syntax: "<percentage>";
+  initial-value: -40%;
+  inherits: false;
+}
+@property --tilt-x {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+@property --tilt-y {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+@property --depth {
+  syntax: "<length>";
+  initial-value: 0px;
+  inherits: false;
+}

package/src/01-tokens.css

@@ -0,0 +1,229 @@
+/* ==========================================================================
+   Deck — 01 Tokens
+   Everything is a custom property. Change a hue, retheme the whole app.
+   No build step. No purge. No config file.
+   ========================================================================== */
+
+/* Layer order is declared in 00-layers.css. */
+
+@layer deck.tokens {
+
+  :root {
+    color-scheme: light dark;
+
+    /* --- Hue control -------------------------------------------------------
+       These six numbers are the whole palette. Set --hue-brand to 12 and the
+       framework becomes rust. Set it to 265 and it becomes violet. Buttons,
+       focus rings, links, charts, and shadows all follow.
+       ---------------------------------------------------------------------- */
+    --hue-brand: 196;   /* harbor teal   */
+    --hue-accent: 42;   /* signal amber  */
+    --hue-good: 152;    /* starboard     */
+    --hue-warn: 74;     /* caution       */
+    --hue-bad: 24;      /* port light    */
+    --hue-neutral: 232; /* chart ink     */
+
+    --chroma-brand: .118;
+    --chroma-accent: .142;
+    --chroma-status: .132;
+    --chroma-neutral: .012; /* neutrals carry a trace of the ink hue */
+
+    /* --- Brand ramp -------------------------------------------------------- */
+    --brand-50:  oklch(97.4% calc(var(--chroma-brand) * .16) var(--hue-brand));
+    --brand-100: oklch(94.2% calc(var(--chroma-brand) * .30) var(--hue-brand));
+    --brand-200: oklch(88.6% calc(var(--chroma-brand) * .48) var(--hue-brand));
+    --brand-300: oklch(80.4% calc(var(--chroma-brand) * .70) var(--hue-brand));
+    --brand-400: oklch(70.2% calc(var(--chroma-brand) * .90) var(--hue-brand));
+    --brand-500: oklch(60.8% var(--chroma-brand) var(--hue-brand));
+    --brand-600: oklch(51.6% var(--chroma-brand) var(--hue-brand));
+    --brand-700: oklch(43.4% calc(var(--chroma-brand) * .92) var(--hue-brand));
+    --brand-800: oklch(35.6% calc(var(--chroma-brand) * .78) var(--hue-brand));
+    --brand-900: oklch(28.2% calc(var(--chroma-brand) * .62) var(--hue-brand));
+    --brand-950: oklch(20.4% calc(var(--chroma-brand) * .46) var(--hue-brand));
+
+    /* --- Neutral ramp ------------------------------------------------------ */
+    --ink-0:   oklch(100% 0 0);
+    --ink-25:  oklch(99.1% calc(var(--chroma-neutral) * .5) var(--hue-neutral));
+    --ink-50:  oklch(97.8% var(--chroma-neutral) var(--hue-neutral));
+    --ink-100: oklch(95.4% calc(var(--chroma-neutral) * 1.4) var(--hue-neutral));
+    --ink-200: oklch(91.2% calc(var(--chroma-neutral) * 1.8) var(--hue-neutral));
+    --ink-300: oklch(84.6% calc(var(--chroma-neutral) * 2.2) var(--hue-neutral));
+    --ink-400: oklch(70.8% calc(var(--chroma-neutral) * 2.6) var(--hue-neutral));
+    --ink-500: oklch(58.4% calc(var(--chroma-neutral) * 2.8) var(--hue-neutral));
+    --ink-600: oklch(47.6% calc(var(--chroma-neutral) * 2.8) var(--hue-neutral));
+    --ink-700: oklch(38.2% calc(var(--chroma-neutral) * 2.6) var(--hue-neutral));
+    --ink-800: oklch(29.4% calc(var(--chroma-neutral) * 2.4) var(--hue-neutral));
+    --ink-900: oklch(22.6% calc(var(--chroma-neutral) * 2.2) var(--hue-neutral));
+    --ink-950: oklch(16.2% calc(var(--chroma-neutral) * 2.0) var(--hue-neutral));
+    --ink-1000: oklch(11.4% calc(var(--chroma-neutral) * 1.8) var(--hue-neutral));
+
+    /* --- Status ------------------------------------------------------------ */
+    --good-100: oklch(94% calc(var(--chroma-status) * .3) var(--hue-good));
+    --good-500: oklch(62% var(--chroma-status) var(--hue-good));
+    --good-600: oklch(52% var(--chroma-status) var(--hue-good));
+    --good-700: oklch(44% var(--chroma-status) var(--hue-good));
+    --warn-100: oklch(95% calc(var(--chroma-status) * .32) var(--hue-warn));
+    --warn-500: oklch(76% var(--chroma-status) var(--hue-warn));
+    --warn-700: oklch(50% var(--chroma-status) var(--hue-warn));
+    --bad-100:  oklch(94.5% calc(var(--chroma-status) * .3) var(--hue-bad));
+    --bad-500:  oklch(58% calc(var(--chroma-status) * 1.25) var(--hue-bad));
+    --bad-600:  oklch(52% calc(var(--chroma-status) * 1.25) var(--hue-bad));
+    --bad-700:  oklch(44% calc(var(--chroma-status) * 1.1) var(--hue-bad));
+    --accent-100: oklch(95% calc(var(--chroma-accent) * .3) var(--hue-accent));
+    --accent-500: oklch(74% var(--chroma-accent) var(--hue-accent));
+    --accent-700: oklch(52% calc(var(--chroma-accent) * .9) var(--hue-accent));
+
+    /* --- Semantic surfaces (auto light/dark) -------------------------------- */
+    --bg:          light-dark(var(--ink-50),  var(--ink-1000));
+    --bg-sunken:   light-dark(var(--ink-100), oklch(8.6% .012 var(--hue-neutral)));
+    --surface:     light-dark(var(--ink-0),   var(--ink-950));
+    --surface-2:   light-dark(var(--ink-25),  var(--ink-900));
+    --surface-hover:light-dark(var(--ink-50), var(--ink-900));
+    --line:        light-dark(var(--ink-200), oklch(28% .016 var(--hue-neutral)));
+    --line-strong: light-dark(var(--ink-300), oklch(36% .018 var(--hue-neutral)));
+
+    --text:        light-dark(var(--ink-900), var(--ink-100));
+    --text-muted:  light-dark(var(--ink-600), var(--ink-400));
+    --text-faint:  light-dark(var(--ink-500), var(--ink-500));
+    /* --- Ink on a coloured surface ----------------------------------------
+       One per saturated surface. These are the static values: they are correct
+       for the shipped hues but they are guesses about any hue you set, which
+       is what the @supports block below fixes.
+       -------------------------------------------------------------------- */
+    --text-on-brand:  oklch(99% .01 var(--hue-brand));
+    --text-on-accent: oklch(24% .06 var(--hue-accent));
+    --text-on-good:   oklch(99% .01 var(--hue-good));
+    --text-on-warn:   oklch(24% .06 var(--hue-warn));
+    --text-on-bad:    oklch(99% .01 var(--hue-bad));
+
+    --brand:       light-dark(var(--brand-600), var(--brand-400));
+    --brand-hover: light-dark(var(--brand-700), var(--brand-300));
+    --brand-soft:  light-dark(var(--brand-50),  oklch(26% .05 var(--hue-brand)));
+    --brand-soft-text: light-dark(var(--brand-800), var(--brand-200));
+
+    --focus: light-dark(var(--brand-500), var(--brand-300));
+
+    /* --- Space: 4px base, plus fluid steps for page rhythm ------------------ */
+    --space-0: 0;
+    --space-px: 1px;
+    --space-1: .25rem;
+    --space-2: .5rem;
+    --space-3: .75rem;
+    --space-4: 1rem;
+    --space-5: 1.25rem;
+    --space-6: 1.5rem;
+    --space-8: 2rem;
+    --space-10: 2.5rem;
+    --space-12: 3rem;
+    --space-16: 4rem;
+    --space-20: 5rem;
+    --space-24: 6rem;
+    --space-section: clamp(2.5rem, 1.4rem + 5.5vw, 6rem);
+    --space-gutter: clamp(1rem, .55rem + 2.2vw, 2rem);
+
+    /* --- Radius: intentionally not one value ------------------------------- */
+    --r-xs: 4px;    /* chips, tags, kbd            */
+    --r-sm: 7px;    /* inputs, buttons             */
+    --r-md: 12px;   /* cards, menus                */
+    --r-lg: 18px;   /* sheets, modals, hero panels */
+    --r-full: 999px;
+
+    /* --- Elevation: tinted with the ink hue, never flat black -------------- */
+    --shadow-color: var(--hue-neutral);
+    --shadow-1: 0 1px 2px oklch(20% .03 var(--shadow-color) / .06),
+                0 1px 1px oklch(20% .03 var(--shadow-color) / .04);
+    --shadow-2: 0 2px 4px oklch(20% .03 var(--shadow-color) / .05),
+                0 4px 12px oklch(20% .03 var(--shadow-color) / .07);
+    --shadow-3: 0 4px 8px oklch(20% .03 var(--shadow-color) / .06),
+                0 12px 28px oklch(20% .03 var(--shadow-color) / .10);
+    --shadow-4: 0 8px 16px oklch(20% .03 var(--shadow-color) / .08),
+                0 24px 56px oklch(20% .03 var(--shadow-color) / .14);
+    --shadow-inset: inset 0 1px 0 oklch(100% 0 0 / .6);
+
+    /* A legible floor for text over a photo. Eased rather than a flat wash: a
+       50% black overlay dulls the whole image, while this only darkens where
+       the text actually sits. Shared by .g-scrim and .carousel-caption so the
+       two cannot drift apart. */
+    --scrim: linear-gradient(to top,
+             oklch(12% .02 var(--hue-neutral) / .82) 0%,
+             oklch(12% .02 var(--hue-neutral) / .62) 22%,
+             oklch(12% .02 var(--hue-neutral) / .28) 48%,
+             transparent 78%);
+
+    /* --- Type -------------------------------------------------------------- */
+    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text",
+                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono",
+                 Menlo, Consolas, monospace;
+    --font-display: var(--font-sans);
+
+    --text-2xs: .6875rem;
+    --text-xs:  .75rem;
+    --text-sm:  .8125rem;
+    --text-base: .9375rem;
+    --text-md:  1.0625rem;
+    --text-lg:  clamp(1.125rem, 1.06rem + .32vw, 1.3125rem);
+    --text-xl:  clamp(1.3125rem, 1.19rem + .62vw, 1.625rem);
+    --text-2xl: clamp(1.5625rem, 1.33rem + 1.16vw, 2.125rem);
+    --text-3xl: clamp(1.875rem, 1.44rem + 2.16vw, 2.875rem);
+    --text-4xl: clamp(2.25rem, 1.5rem + 3.75vw, 3.75rem);
+
+    --leading-tight: 1.12;
+    --leading-snug: 1.3;
+    --leading-normal: 1.55;
+    --leading-loose: 1.72;
+    --measure: 68ch;
+
+    /* --- Motion ------------------------------------------------------------ */
+    --ease-out: cubic-bezier(.22, 1, .36, 1);
+    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
+    --ease-spring: linear(0, .18 6%, .53 14%, .89 24%, 1.04 32%, 1.06 40%, 1);
+    --dur-1: 110ms;
+    --dur-2: 190ms;
+    --dur-3: 300ms;
+
+    /* --- Controls ---------------------------------------------------------- */
+    --tap: 44px;             /* minimum touch target, everywhere */
+    --control-h-sm: 34px;
+    --control-h: 42px;
+    --control-h-lg: 50px;
+    --ring: 0 0 0 3px light-dark(oklch(from var(--focus) l c h / .32),
+                                 oklch(from var(--focus) l c h / .42));
+
+    --z-sticky: 100;
+    --z-nav: 200;
+    --z-sheet: 300;
+    --z-modal: 400;
+    --z-toast: 500;
+  }
+
+  /* contrast-color() resolves against the colour as it actually computes, so
+     these follow --hue-brand and friends wherever they are dragged. It returns
+     only black or white and it aims at AA (4.5:1), which is why every surface
+     that carries text is kept out of the 55-65% lightness band -- see
+     --good-600 and --bad-600 above. Baseline Newly Available, so the static
+     values in :root stand in where it is missing. */
+  @supports (color: contrast-color(red)) {
+    :root {
+      --text-on-brand:  contrast-color(var(--brand-600));
+      --text-on-accent: contrast-color(var(--accent-500));
+      --text-on-good:   contrast-color(var(--good-600));
+      --text-on-warn:   contrast-color(var(--warn-500));
+      --text-on-bad:    contrast-color(var(--bad-600));
+    }
+  }
+
+  /* Explicit theme override beats the OS setting */
+  [data-theme="light"] { color-scheme: light; }
+  [data-theme="dark"]  { color-scheme: dark; }
+
+  /* Dark mode wants slightly less shadow and slightly more border */
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --shadow-2: 0 2px 4px oklch(0% 0 0 / .3), 0 4px 12px oklch(0% 0 0 / .34);
+      --shadow-3: 0 4px 10px oklch(0% 0 0 / .34), 0 14px 30px oklch(0% 0 0 / .4);
+      --shadow-4: 0 10px 20px oklch(0% 0 0 / .4), 0 28px 60px oklch(0% 0 0 / .5);
+      --shadow-inset: inset 0 1px 0 oklch(100% 0 0 / .06);
+    }
+  }
+}

package/src/02-reset.css

@@ -0,0 +1,103 @@
+/* ==========================================================================
+   Deck — 02 Reset
+   ========================================================================== */
+
+@layer deck.reset {
+
+  *, *::before, *::after { box-sizing: border-box; }
+
+  * { margin: 0; }
+
+  html {
+    -webkit-text-size-adjust: 100%;
+    -moz-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+    tab-size: 2;
+    scroll-behavior: smooth;
+    scroll-padding-block-start: calc(var(--control-h-lg) + var(--space-4));
+  }
+
+  body {
+    min-block-size: 100dvh;
+    background: var(--bg);
+    color: var(--text);
+    font-family: var(--font-sans);
+    font-size: var(--text-base);
+    line-height: var(--leading-normal);
+    font-synthesis-weight: none;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    overflow-wrap: break-word;
+  }
+
+  img, svg, video, canvas, audio, iframe, embed, object {
+    display: block;
+    max-inline-size: 100%;
+  }
+  img, video { block-size: auto; }
+
+  input, button, textarea, select { font: inherit; color: inherit; }
+
+  button { background: none; border: 0; }
+
+  p, li, figcaption { text-wrap: pretty; }
+  h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
+
+  ul[class], ol[class] { list-style: none; padding: 0; }
+
+  table { border-collapse: collapse; border-spacing: 0; }
+
+  hr {
+    border: 0;
+    block-size: 1px;
+    background: var(--line);
+  }
+
+  :target { scroll-margin-block-start: var(--space-16); }
+
+  ::selection {
+    background: var(--brand-200);
+    color: var(--ink-950);
+  }
+
+  /* One focus treatment for the whole framework */
+  :focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+    border-radius: var(--r-xs);
+  }
+  :focus:not(:focus-visible) { outline: none; }
+
+  /* Firefox needs help with the scrollbar; WebKit gets the thin version */
+  * { scrollbar-color: var(--ink-300) transparent; scrollbar-width: thin; }
+  ::-webkit-scrollbar { inline-size: 10px; block-size: 10px; }
+  ::-webkit-scrollbar-thumb {
+    background: var(--ink-300);
+    border-radius: var(--r-full);
+    border: 3px solid transparent;
+    background-clip: content-box;
+  }
+  ::-webkit-scrollbar-thumb:hover { background: var(--ink-400); background-clip: content-box; }
+
+  @media (prefers-reduced-motion: reduce) {
+    html { scroll-behavior: auto; }
+    *, *::before, *::after {
+      animation-duration: .01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: .01ms !important;
+      scroll-behavior: auto !important;
+    }
+    /* Loading indicators keep moving, slowly. A frozen spinner reads as broken,
+       and progress feedback is information, not decoration. */
+    .spinner, .icon-spin, .skeleton, .marquee-track, .btn.is-loading::after,
+    .dg-wrap.is-loading::after, .ping::after {
+      animation-duration: 2.4s !important;
+      animation-iteration-count: infinite !important;
+    }
+  }
+
+  /* Opt in per-element where a smooth auto height matters */
+  @supports (interpolate-size: allow-keywords) {
+    :root { interpolate-size: allow-keywords; }
+  }
+}

package/src/03-type.css

@@ -0,0 +1,114 @@
+/* ==========================================================================
+   Deck — 03 Type
+   ========================================================================== */
+
+@layer deck.type {
+
+  h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
+    font-family: var(--font-display);
+    font-weight: 640;
+    line-height: var(--leading-tight);
+    letter-spacing: -.021em;
+    color: var(--text);
+  }
+
+  h1, .h1 { font-size: var(--text-3xl); letter-spacing: -.031em; }
+  h2, .h2 { font-size: var(--text-2xl); letter-spacing: -.026em; }
+  h3, .h3 { font-size: var(--text-xl); }
+  h4, .h4 { font-size: var(--text-lg); letter-spacing: -.014em; }
+  h5, .h5 { font-size: var(--text-md); letter-spacing: -.008em; font-weight: 620; }
+  h6, .h6 { font-size: var(--text-base); letter-spacing: 0; font-weight: 640; }
+
+  .display {
+    font-size: var(--text-4xl);
+    font-weight: 700;
+    line-height: 1.04;
+    letter-spacing: -.036em;
+  }
+
+  .lede {
+    font-size: var(--text-md);
+    line-height: var(--leading-loose);
+    color: var(--text-muted);
+    max-inline-size: var(--measure);
+  }
+
+  small { font-size: var(--text-sm); }
+
+  strong, b { font-weight: 640; }
+
+  a {
+    color: var(--brand);
+    text-decoration-thickness: 1px;
+    text-underline-offset: .18em;
+    text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
+    transition: color var(--dur-1) var(--ease-out),
+                text-decoration-color var(--dur-1) var(--ease-out);
+  }
+  a:hover { color: var(--brand-hover); text-decoration-color: currentColor; }
+
+  .link-quiet { color: var(--text); text-decoration: none; }
+  .link-quiet:hover { color: var(--brand); text-decoration: underline; }
+
+  code, kbd, samp, pre { font-family: var(--font-mono); font-size: .92em; }
+
+  :not(pre) > code {
+    background: var(--surface-2);
+    border: 1px solid var(--line);
+    border-radius: var(--r-xs);
+    padding: .12em .38em;
+    color: light-dark(var(--brand-800), var(--brand-200));
+  }
+
+  pre {
+    background: var(--ink-950);
+    color: var(--ink-100);
+    padding: var(--space-4);
+    border-radius: var(--r-md);
+    overflow-x: auto;
+    line-height: 1.6;
+    font-size: var(--text-sm);
+    -webkit-overflow-scrolling: touch;
+  }
+  pre code { background: none; border: 0; padding: 0; color: inherit; }
+
+  kbd {
+    display: inline-block;
+    background: var(--surface);
+    border: 1px solid var(--line-strong);
+    border-block-end-width: 2px;
+    border-radius: var(--r-xs);
+    padding: .1em .42em;
+    font-size: var(--text-xs);
+    line-height: 1.5;
+    color: var(--text-muted);
+  }
+
+  blockquote {
+    border-inline-start: 3px solid var(--brand-300);
+    padding-inline-start: var(--space-4);
+    color: var(--text-muted);
+    font-size: var(--text-md);
+    line-height: var(--leading-loose);
+  }
+
+  mark {
+    background: var(--accent-100);
+    color: light-dark(var(--ink-900), var(--ink-900));
+    padding: .05em .2em;
+    border-radius: var(--r-xs);
+  }
+
+  abbr[title] { text-decoration: underline dotted; cursor: help; }
+
+  /* Prose: for anything that came out of a WYSIWYG or markdown */
+  .prose { max-inline-size: var(--measure); }
+  .prose > * + * { margin-block-start: var(--space-4); }
+  .prose > * + :is(h2, h3, h4) { margin-block-start: var(--space-8); }
+  .prose :is(ul, ol) { padding-inline-start: var(--space-6); display: grid; gap: var(--space-2); }
+  .prose ul { list-style: disc; }
+  .prose ol { list-style: decimal; }
+  .prose li::marker { color: var(--text-faint); }
+  .prose img { border-radius: var(--r-md); }
+  .prose hr { margin-block: var(--space-8); }
+}