@geekity/cms 0.10.0 → 0.12.0

package/themes/default/static/style.css

@@ -1,1293 +1,2289 @@
-/*
- * The default theme's only stylesheet. Plain CSS, no build step, no
- * dependencies: a site that wants something else puts its own
- * `static/style.css` in the theme it wears and this file is never read again.
- *
- * The design is the andrewshell.org one (decision-16): a serif body and sans
- * headings at an 18px root on a 1.2 minor-third scale, warm paper, near-black
- * text, a rust primary and a blue secondary, one column at 42rem, links that
- * invert on hover and a rule in the primary colour.
- *
- * The source is light only. The dark scheme below is the same design on dark
- * paper, with the rust and the blue lifted until every text and background pair
- * meets WCAG 2.2 AA — 4.5:1 for body text, 3:1 for large text, rules and focus
- * outlines — in both schemes. `src/web/theme-colors.test.ts` reads the custom
- * properties out of this file and computes the ratios, so a colour changed here
- * that breaks one fails the build rather than a reader.
- */
-
-:root {
-  /* Light and dark are both drawn below, so a browser may paint its own form
-     controls, scrollbars and spellcheck marks to match. */
-  color-scheme: light dark;
-
-  --maxWidth-xs: 20rem;
-  --maxWidth-sm: 24rem;
-  --maxWidth-md: 28rem;
-  --maxWidth-lg: 32rem;
-  --maxWidth-xl: 36rem;
-  --maxWidth-2xl: 42rem;
-  --maxWidth-3xl: 48rem;
-  --maxWidth-4xl: 56rem;
-  --maxWidth-wrapper: var(--maxWidth-2xl);
-
-  --spacing-0: 0;
-  --spacing-1: 0.25rem;
-  --spacing-2: 0.5rem;
-  --spacing-3: 0.75rem;
-  --spacing-4: 1rem;
-  --spacing-5: 1.25rem;
-  --spacing-6: 1.5rem;
-  --spacing-8: 2rem;
-  --spacing-10: 2.5rem;
-  --spacing-12: 3rem;
-  --spacing-16: 4rem;
-  --spacing-20: 5rem;
-  --spacing-24: 6rem;
-  --spacing-32: 8rem;
-
-  --fontFamily-sans: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --fontFamily-serif: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
-  --fontFamily-mono:
-    ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
-  --font-body: var(--fontFamily-serif);
-  --font-heading: var(--fontFamily-sans);
-
-  --fontWeight-normal: 400;
-  --fontWeight-medium: 500;
-  --fontWeight-semibold: 600;
-  --fontWeight-bold: 700;
-  --fontWeight-extrabold: 800;
-  --fontWeight-black: 900;
-
-  --fontSize-root: 18px;
-  --lineHeight-none: 1;
-  --lineHeight-tight: 1.1;
-  --lineHeight-normal: 1.5;
-  --lineHeight-relaxed: 1.625;
-
-  /* 1.200 minor third type scale */
-  --fontSize-0: 0.833rem;
-  --fontSize-1: 1rem;
-  --fontSize-2: 1.15rem;
-  --fontSize-3: 1.31rem;
-  --fontSize-4: 1.5rem;
-  --fontSize-5: 1.72rem;
-  --fontSize-6: 1.97rem;
-  --fontSize-7: 2.25rem;
-
-  --content-letter-spacing: -0.01em;
-
-  /* Colours. `body` is the paper and `text` the ink; `base`, `base-2` and
-     `base-3` are the surfaces that sit on the paper, warm, cool and raised.
-     `code-background` and `code-text` are a block of code, named rather than
-     folded into `base` so a highlighting theme has something to be measured
-     against (TASK-86). */
-  --color-body: #fdfcfb;
-  --color-text: #240b00;
-  --color-primary: #b33900;
-  --color-secondary: #007ab3;
-  --color-base: rgb(245 243 243);
-  --color-base-2: rgb(247 248 249);
-  --color-base-3: rgb(255 255 255);
-  --color-code-background: #f6f3f1;
-  --color-code-text: #240b00;
-  --color-error: #b3261e;
-
-  /* Syntax highlighting: the Tomorrow palette, light member (TASK-86). The
-     names are what each colour marks up, and the base16 slot they come from is
-     in the comment; the highlighter is highlight.js, whose base16 Tomorrow
-     theme is the mapping these follow.
-
-     Five of them are not the stock colour. Tomorrow was drawn for an editor,
-     where a faint comment is a feature; on this paper the stock greys, orange,
-     yellow, green and teal read at 1.7:1 to 3.5:1, so each was darkened along
-     its own hue until it made 4.5:1 and no further. `src/web/theme-colors.test.ts`
-     is what keeps that true. */
-  --color-code-comment: #6c6d6a; /* base03, stock #8e908c */
-  --color-code-tag: #6b6d6b; /* base04, stock #969896 */
-  --color-code-name: #c82829; /* base08 */
-  --color-code-literal: #a95608; /* base09, stock #f5871f */
-  --color-code-class: #846700; /* base0A, stock #eab700 */
-  --color-code-string: #5e7500; /* base0B, stock #718c00 */
-  --color-code-support: #30767a; /* base0C, stock #3e999f */
-  --color-code-function: #4271ae; /* base0D */
-  --color-code-keyword: #8959a8; /* base0E */
-  --color-code-meta: #945f52; /* base0F, stock #a3685a */
-  --color-code-added-background: #dff0d8;
-  --color-code-removed-background: #f8dcdc;
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties {
+  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+    *, :before, :after, ::backdrop {
+      --tw-outline-style: solid;
+      --tw-leading: initial;
+      --tw-font-weight: initial;
+      --tw-tracking: initial;
+      --tw-border-style: solid;
+      --tw-space-y-reverse: 0;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
+    }
+  }
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-body: #191110;
-    --color-text: #f4ece7;
-    --color-primary: #ef7a48;
-    --color-secondary: #3ea0d8;
-    --color-base: rgb(38 30 28);
-    --color-base-2: rgb(34 33 36);
-    --color-base-3: rgb(45 36 33);
-    --color-code-background: rgb(30 24 22);
-    --color-code-text: #f4ece7;
-    --color-error: #ff8093;
-
-    /* The other member of the family, Tomorrow Night — the palette both source
-       sites highlighted with, and the one highlight.js ships under that name.
-       Only base0F needed lifting off this darker paper. */
-    --color-code-comment: #999999; /* base03 */
-    --color-code-tag: #b4b7b4; /* base04 */
-    --color-code-name: #f2777a; /* base08 */
-    --color-code-literal: #f99157; /* base09 */
-    --color-code-class: #ffcc66; /* base0A */
-    --color-code-string: #99cc99; /* base0B */
-    --color-code-support: #66cccc; /* base0C */
-    --color-code-function: #6699cc; /* base0D */
-    --color-code-keyword: #cc99cc; /* base0E */
-    --color-code-meta: #ae786b; /* base0F, stock #a3685a */
-    --color-code-added-background: rgb(32 54 34);
-    --color-code-removed-background: rgb(64 30 30);
+@layer theme {
+  :root, :host {
+    --spacing: .25rem;
+    --container-2xl: 42rem;
+    --text-xs: .75rem;
+    --text-xs--line-height: calc(1 / .75);
+    --text-sm: .875rem;
+    --text-sm--line-height: calc(1.25 / .875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
+    --text-4xl: 2.25rem;
+    --text-4xl--line-height: calc(2.5 / 2.25);
+    --text-5xl: 3rem;
+    --text-5xl--line-height: 1;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --tracking-tight: -.025em;
+    --tracking-normal: 0em;
+    --leading-tight: 1.25;
+    --leading-snug: 1.375;
+    --leading-relaxed: 1.625;
+    --radius-xs: .125rem;
+    --radius-sm: .25rem;
+    --radius-md: .375rem;
+    --default-transition-duration: .15s;
+    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+    --default-font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    --default-mono-font-family: ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
   }
 }
 
-/* Reset. The source theme leans on a normalize file; the handful of rules it
-   actually depends on are folded in here instead, so the theme is one file. */
+@layer base {
+  *, :after, :before, ::backdrop {
+    box-sizing: border-box;
+    border: 0 solid;
+    margin: 0;
+    padding: 0;
+  }
 
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
+  ::file-selector-button {
+    box-sizing: border-box;
+    border: 0 solid;
+    margin: 0;
+    padding: 0;
+  }
 
-body,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-figure,
-blockquote,
-dl,
-dd {
-  margin: 0;
-}
+  html, :host {
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    line-height: 1.5;
+    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var(--default-font-variation-settings, normal);
+    -webkit-tap-highlight-color: transparent;
+  }
 
-/* HTML elements */
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
 
-html {
-  font-size: var(--fontSize-root);
-  line-height: var(--lineHeight-relaxed);
-  -webkit-text-size-adjust: 100%;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
 
-body {
-  background-color: var(--color-body);
-  color: var(--color-text);
-  font-family: var(--font-body);
-  font-size: var(--fontSize-1);
-  text-rendering: optimizeSpeed;
-}
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
 
-footer {
-  padding: var(--spacing-6) var(--spacing-0);
-  font-family: var(--fontFamily-sans);
-}
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    -webkit-text-decoration: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
 
-nav,
-.bio {
-  font-family: var(--fontFamily-sans);
-}
+  b, strong {
+    font-weight: bolder;
+  }
 
-hr {
-  height: 1px;
-  border: 0;
-  background: var(--color-primary);
-}
+  code, kbd, samp, pre {
+    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--default-mono-font-variation-settings, normal);
+    font-size: 1em;
+  }
 
-img {
-  max-width: 100%;
-  height: auto;
-}
+  small {
+    font-size: 80%;
+  }
 
-figure {
-  margin: var(--spacing-0) var(--spacing-0) var(--spacing-4) var(--spacing-0);
-}
+  sub, sup {
+    vertical-align: baseline;
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+  }
 
-figcaption {
-  font-size: var(--fontSize-0);
-  text-align: center;
-}
+  sub {
+    bottom: -.25em;
+  }
 
-time {
-  white-space: nowrap;
-}
+  sup {
+    top: -.5em;
+  }
 
-small,
-.small {
-  font-size: var(--fontSize-0);
-}
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
 
-/* Headings */
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin-top: var(--spacing-12);
-  margin-bottom: var(--spacing-6);
-  color: var(--color-text);
-  font-family: var(--font-heading);
-  font-weight: var(--fontWeight-bold);
-  line-height: var(--lineHeight-tight);
-  letter-spacing: -0.025em;
-}
+  :-moz-focusring:where(:not(iframe)) {
+    outline: auto;
+  }
 
-h1 {
-  font-size: var(--fontSize-6);
-  font-weight: var(--fontWeight-black);
-}
+  progress {
+    vertical-align: baseline;
+  }
 
-h2 {
-  font-size: var(--fontSize-5);
-}
+  summary {
+    display: list-item;
+  }
 
-h3 {
-  font-size: var(--fontSize-3);
-}
+  ol, ul, menu {
+    list-style: none;
+  }
 
-h4,
-h5,
-h6 {
-  font-size: var(--fontSize-1);
-}
+  img, svg, video, canvas, audio, iframe, embed, object {
+    vertical-align: middle;
+    display: block;
+  }
 
-h2 > a,
-h3 > a,
-h4 > a,
-h5 > a,
-h6 > a {
-  color: inherit;
-  text-decoration: none;
-}
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
 
-/* Links. A link inverts on hover: the primary colour behind it and the paper
-   colour on top, which is the source design's one flourish. `:focus-visible`
-   draws an outline instead, so a keyboard reader sees where they are without
-   the colour swapping under them. */
+  button, input, select, optgroup, textarea {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    opacity: 1;
+    background-color: #0000;
+    border-radius: 0;
+  }
 
-a,
-a:visited {
-  color: var(--color-primary);
-}
+  ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    opacity: 1;
+    background-color: #0000;
+    border-radius: 0;
+  }
 
-a:hover,
-a:focus {
-  background-color: var(--color-primary);
-  color: var(--color-body);
-  text-decoration: none;
-}
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
 
-a:focus-visible {
-  outline: 2px solid var(--color-primary);
-  outline-offset: 2px;
-  background-color: transparent;
-  color: var(--color-primary);
-}
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
 
-/* The two links that are the page saying where it is rather than somewhere to
-   go: the site title at the root and the small link home everywhere else. Both
-   read as plain text, in the heading font the rules below give them.
-
-   Named rather than reached for through the element they sit in (TASK-111). A
-   bare `header a` also caught the site menu, which is navigation somebody is
-   meant to use, and every link inside a post's own `<header>`. The `:visited`
-   halves are here because `a:visited` outweighs a bare class, and the hover
-   and focus halves because `a:focus-visible` outweighs one too: without them
-   these two would take the outline rather than the flourish. */
-
-.main-heading a,
-.main-heading a:visited,
-.header-link-home,
-.header-link-home:visited {
-  color: var(--color-text);
-  text-decoration: none;
-}
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
 
-.main-heading a:hover,
-.main-heading a:focus,
-.header-link-home:hover,
-.header-link-home:focus {
-  background-color: var(--color-primary);
-  color: var(--color-body);
-  text-decoration: none;
-}
+  ::placeholder {
+    opacity: 1;
+  }
 
-/* Prose */
+  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: currentColor;
+    }
 
-p {
-  margin: var(--spacing-0) var(--spacing-0) var(--spacing-4) var(--spacing-0);
-  padding: var(--spacing-0);
-  line-height: var(--lineHeight-relaxed);
-}
+    @supports (color: color-mix(in lab, red, red)) {
+      ::placeholder {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+
+  ::-webkit-datetime-edit {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-year-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-month-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-day-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-hour-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-minute-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-second-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-millisecond-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
+
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  button, input:where([type="button"], [type="reset"], [type="submit"]) {
+    appearance: button;
+  }
+
+  ::file-selector-button {
+    appearance: button;
+  }
+
+  ::-webkit-inner-spin-button {
+    height: auto;
+  }
 
-ul,
-ol {
-  margin-top: var(--spacing-0);
-  margin-right: var(--spacing-0);
-  margin-bottom: var(--spacing-8);
-  margin-left: var(--spacing-4);
-  padding: var(--spacing-0);
-  list-style-position: inside;
-  list-style-image: none;
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+
+  html {
+    -webkit-text-size-adjust: 100%;
+    -moz-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+    scrollbar-gutter: stable;
+    font-size: 18px;
+  }
+
+  body {
+    background-color: var(--color-body);
+    --tw-leading: var(--leading-relaxed);
+    font-family: Iowan Old Style, Palatino Linotype, Palatino, Book Antiqua, Georgia, serif;
+    line-height: var(--leading-relaxed);
+    color: var(--color-text);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+    --tw-tracking: var(--tracking-tight);
+    letter-spacing: var(--tracking-tight);
+    text-wrap: balance;
+  }
+
+  p, li, dd, blockquote, figcaption {
+    text-wrap: pretty;
+  }
+
+  a {
+    color: var(--color-primary);
+    text-decoration-line: underline;
+    -webkit-text-decoration-color: var(--color-primary);
+    -webkit-text-decoration-color: var(--color-primary);
+    text-decoration-color: var(--color-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    a {
+      -webkit-text-decoration-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
+      -webkit-text-decoration-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
+      text-decoration-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
+    }
+  }
+
+  a {
+    text-underline-offset: 3px;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    a {
+      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+  }
+
+  a:hover {
+    -webkit-text-decoration-color: var(--color-primary);
+    -webkit-text-decoration-color: var(--color-primary);
+    text-decoration-color: var(--color-primary);
+  }
+
+  :focus-visible {
+    border-radius: var(--radius-xs);
+    outline-style: var(--tw-outline-style);
+    outline-offset: 2px;
+    outline-width: 2px;
+    outline-color: var(--color-secondary);
+  }
+
+  hr {
+    margin-block: calc(var(--spacing) * 10);
+    border-style: var(--tw-border-style);
+    border-width: 0;
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+    border-color: var(--color-rule);
+  }
+
+  ::selection {
+    background-color: var(--color-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    ::selection {
+      background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
+    }
+  }
+
+  code, kbd, samp, pre {
+    font-family: ui-monospace, SF Mono, Menlo, Consolas, DejaVu Sans Mono, monospace;
+  }
+
+  strong, b {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
 }
 
-ul li,
-ol li {
-  margin-bottom: var(--spacing-0);
-  padding-left: var(--spacing-0);
-}
+@layer components {
+  .screen-reader-text {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  .screen-reader-text:focus {
+    z-index: 50;
+    background-color: var(--color-base-3);
+    width: auto;
+    height: auto;
+    padding: calc(var(--spacing) * 4);
+    --tw-font-weight: var(--font-weight-bold);
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    font-weight: var(--font-weight-bold);
+    color: var(--color-text);
+    clip-path: none;
+    margin: 0;
+    text-decoration-line: none;
+    display: block;
+    inset-block-start: .5rem;
+    inset-inline-start: .5rem;
+  }
+
+  .global-wrapper {
+    max-width: var(--container-2xl);
+    padding-inline: calc(var(--spacing) * 5);
+    padding-top: calc(var(--spacing) * 8);
+    padding-bottom: calc(var(--spacing) * 16);
+    margin-inline: auto;
+  }
+
+  @media (min-width: 40rem) {
+    .global-wrapper {
+      padding-inline: calc(var(--spacing) * 6);
+    }
+  }
+
+  .global-header {
+    margin-bottom: calc(var(--spacing) * 12);
+  }
+
+  .global-wrapper:not([data-is-root-path="true"]) .global-header {
+    align-items: baseline;
+    column-gap: calc(var(--spacing) * 6);
+    row-gap: calc(var(--spacing) * 2);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .global-wrapper[data-is-root-path="true"] .global-header {
+    margin-bottom: calc(var(--spacing) * 14);
+  }
+
+  .main-heading {
+    font-size: var(--text-4xl);
+    line-height: var(--tw-leading, var(--text-4xl--line-height));
+    --tw-leading: 1;
+    line-height: 1;
+  }
+
+  @media (min-width: 40rem) {
+    .main-heading {
+      font-size: var(--text-5xl);
+      line-height: var(--tw-leading, var(--text-5xl--line-height));
+    }
+  }
+
+  .main-heading a, .header-link-home {
+    color: var(--color-text);
+    text-decoration-line: none;
+  }
+
+  @media (hover: hover) {
+    :is(.main-heading a, .header-link-home):hover {
+      color: var(--color-primary);
+      text-underline-offset: 6px;
+      text-decoration-line: underline;
+      text-decoration-thickness: 2px;
+    }
+  }
+
+  :is(.main-heading a, .header-link-home):focus-visible {
+    text-decoration-line: underline;
+    text-decoration-thickness: 2px;
+  }
+
+  .header-link-home {
+    min-block-size: 24px;
+    min-inline-size: 24px;
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .site-tagline {
+    margin-top: calc(var(--spacing) * 3);
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+    color: var(--color-muted);
+    font-style: italic;
+  }
+
+  .hlist {
+    flex-wrap: wrap;
+    padding: 0;
+    list-style-type: none;
+    display: flex;
+  }
+
+  .site-nav ul {
+    column-gap: calc(var(--spacing) * 5);
+    row-gap: var(--spacing);
+    --tw-tracking: .12em;
+    letter-spacing: .12em;
+    text-transform: uppercase;
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    font-size: .78rem;
+  }
+
+  .site-nav a {
+    align-items: center;
+    min-block-size: 24px;
+    min-inline-size: 24px;
+    text-decoration-line: underline;
+    text-decoration-color: currentColor;
+    display: inline-flex;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .site-nav a {
+      -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+      -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+      text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+    }
+  }
+
+  .site-nav a {
+    text-underline-offset: 4px;
+    text-decoration-thickness: 1px;
+  }
+
+  @media (hover: hover) {
+    .site-nav a:hover {
+      color: var(--color-primary);
+      -webkit-text-decoration-color: var(--color-primary);
+      -webkit-text-decoration-color: var(--color-primary);
+      text-decoration-color: var(--color-primary);
+      text-decoration-thickness: 2px;
+    }
+  }
+
+  .site-nav a:focus-visible {
+    text-decoration-thickness: 2px;
+  }
+
+  .site-nav a {
+    color: var(--color-muted);
+  }
+
+  .site-nav a[aria-current="page"] {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text);
+  }
+
+  .global-wrapper[data-is-root-path="true"] .global-header .site-nav {
+    margin-top: calc(var(--spacing) * 6);
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+    border-color: var(--color-rule);
+    padding-top: calc(var(--spacing) * 4);
+  }
+
+  .global-wrapper > footer {
+    margin-top: calc(var(--spacing) * 20);
+    justify-content: space-between;
+    align-items: center;
+    gap: calc(var(--spacing) * 4);
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+    border-color: var(--color-rule);
+    padding-top: calc(var(--spacing) * 6);
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-muted);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .global-wrapper > footer .site-nav ul {
+    column-gap: calc(var(--spacing) * 4);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-tracking: var(--tracking-normal);
+    letter-spacing: var(--tracking-normal);
+    text-transform: none;
+  }
+
+  .kicker {
+    margin-bottom: calc(var(--spacing) * 2);
+    align-items: center;
+    column-gap: calc(var(--spacing) * 2);
+    --tw-tracking: .14em;
+    letter-spacing: .14em;
+    color: var(--color-muted);
+    text-transform: uppercase;
+    flex-wrap: wrap;
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    font-size: .72rem;
+    display: flex;
+  }
+
+  .kicker a {
+    align-items: center;
+    min-block-size: 24px;
+    min-inline-size: 24px;
+    text-decoration-line: underline;
+    text-decoration-color: currentColor;
+    display: inline-flex;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .kicker a {
+      -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+      -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+      text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+    }
+  }
+
+  .kicker a {
+    text-underline-offset: 4px;
+    text-decoration-thickness: 1px;
+  }
+
+  @media (hover: hover) {
+    .kicker a:hover {
+      color: var(--color-primary);
+      -webkit-text-decoration-color: var(--color-primary);
+      -webkit-text-decoration-color: var(--color-primary);
+      text-decoration-color: var(--color-primary);
+      text-decoration-thickness: 2px;
+    }
+  }
+
+  .kicker a:focus-visible {
+    text-decoration-thickness: 2px;
+  }
+
+  .kicker a {
+    color: var(--color-muted);
+  }
+
+  .kicker-kind {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-primary);
+  }
+
+  .page-title {
+    margin-top: var(--spacing);
+    margin-bottom: calc(var(--spacing) * 8);
+    font-size: var(--text-4xl);
+    line-height: var(--tw-leading, var(--text-4xl--line-height));
+    --tw-leading: 1.08;
+    line-height: 1.08;
+  }
+
+  @media (min-width: 40rem) {
+    .page-title {
+      font-size: 2.75rem;
+    }
+  }
+
+  .section-title {
+    margin-top: calc(var(--spacing) * 14);
+    margin-bottom: calc(var(--spacing) * 6);
+    --tw-font-weight: var(--font-weight-semibold);
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    font-size: .72rem;
+    font-weight: var(--font-weight-semibold);
+    --tw-tracking: .14em;
+    letter-spacing: .14em;
+    color: var(--color-muted);
+    text-transform: uppercase;
+  }
+
+  .empty {
+    color: var(--color-muted);
+    font-style: italic;
+  }
+
+  .e-content > * + *, .page-body > * + * {
+    margin-top: calc(var(--spacing) * 5);
+  }
+
+  :is(.e-content, .page-body) :is(h2, h3, h4, h5, h6) {
+    margin-bottom: calc(var(--spacing) * 3);
+  }
+
+  :is(.e-content, .page-body) h2 {
+    margin-top: calc(var(--spacing) * 10);
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
+
+  :is(.e-content, .page-body) h3 {
+    margin-top: calc(var(--spacing) * 8);
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+
+  :is(.e-content, .page-body) :is(h4, h5, h6) {
+    margin-top: calc(var(--spacing) * 6);
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
+
+  :is(.e-content, .page-body) ul {
+    padding-inline-start: calc(var(--spacing) * 6);
+    list-style-type: disc;
+  }
+
+  :is(.e-content, .page-body) ol {
+    padding-inline-start: calc(var(--spacing) * 6);
+    list-style-type: decimal;
+  }
+
+  :is(.e-content, .page-body) li + li, :is(.e-content, .page-body) li > :is(ul, ol), :is(.e-content, .page-body) li > p + p {
+    margin-top: calc(var(--spacing) * 2);
+  }
+
+  :is(.e-content, .page-body) blockquote {
+    margin-block: calc(var(--spacing) * 8);
+    border-inline-start-style: var(--tw-border-style);
+    border-inline-start-width: 2px;
+    border-color: var(--color-primary);
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+    --tw-leading: var(--leading-snug);
+    line-height: var(--leading-snug);
+    color: var(--color-muted);
+    padding-inline-start: calc(var(--spacing) * 5);
+    font-style: italic;
+  }
+
+  :is(.e-content, .page-body) blockquote > * + * {
+    margin-top: calc(var(--spacing) * 3);
+  }
+
+  :is(.e-content, .page-body) img, :is(.e-content, .page-body) video {
+    border-radius: var(--radius-md);
+    max-width: 100%;
+    height: auto;
+  }
+
+  :is(.e-content, .page-body) figcaption {
+    margin-top: calc(var(--spacing) * 2);
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-muted);
+  }
+
+  :is(.e-content, .page-body) hr {
+    margin-block: calc(var(--spacing) * 10);
+  }
+
+  :is(.e-content, .page-body) table {
+    border-collapse: collapse;
+    width: 100%;
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+
+  :is(.e-content, .page-body) :is(th, td) {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+    border-color: var(--color-rule);
+    padding-inline: calc(var(--spacing) * 2);
+    padding-block: calc(var(--spacing) * 1.5);
+    text-align: start;
+    vertical-align: top;
+  }
+
+  :is(.e-content, .page-body) th {
+    border-color: var(--color-edge);
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+
+  :is(.e-content, .page-body) dt {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+
+  :is(.e-content, .page-body) dd {
+    padding-inline-start: calc(var(--spacing) * 6);
+  }
+
+  :is(.e-content, .page-body) details summary {
+    cursor: pointer;
+  }
+
+  :is(.e-content, .page-body) kbd {
+    border-radius: var(--radius-sm);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-edge);
+    padding-inline: var(--spacing);
+    font-size: .85em;
+  }
+
+  code {
+    border-radius: var(--radius-sm);
+    background-color: var(--color-code-background);
+    padding-inline: calc(var(--spacing) * 1.5);
+    padding-block: calc(var(--spacing) * .5);
+    color: var(--color-code-text);
+    overflow-wrap: break-word;
+    font-size: .85em;
+  }
+
+  pre {
+    border-radius: var(--radius-md);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-edge);
+    background-color: var(--color-code-background);
+    padding: calc(var(--spacing) * 4);
+    --tw-leading: var(--leading-relaxed);
+    font-size: .85rem;
+    line-height: var(--leading-relaxed);
+    color: var(--color-code-text);
+    overflow-x: auto;
+  }
+
+  pre code {
+    font-size: inherit;
+    overflow-wrap: normal;
+    background-color: #0000;
+    border-radius: 0;
+    padding: 0;
+  }
+
+  .footnotes {
+    margin-top: calc(var(--spacing) * 10);
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+    border-color: var(--color-rule);
+    padding-top: calc(var(--spacing) * 6);
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+
+  .footnotes-sep {
+    display: none;
+  }
+
+  .footnote-item > p {
+    margin-top: 0;
+  }
+
+  .hljs-comment {
+    color: var(--color-code-comment);
+  }
+
+  .hljs-tag {
+    color: var(--color-code-tag);
+  }
+
+  .hljs-subst, .hljs-punctuation, .hljs-operator {
+    color: var(--color-code-text);
+  }
+
+  .hljs-bullet, .hljs-variable, .hljs-template-variable, .hljs-selector-tag, .hljs-name {
+    color: var(--color-code-name);
+  }
+
+  .hljs-symbol, .hljs-number, .hljs-link, .hljs-attr, .hljs-variable.constant_, .hljs-literal {
+    color: var(--color-code-literal);
+  }
+
+  .hljs-title, .hljs-class .hljs-title, .hljs-title.class_ {
+    color: var(--color-code-class);
+  }
+
+  .hljs-strong {
+    color: var(--color-code-class);
+    font-weight: 700;
+  }
+
+  .hljs-code, .hljs-string, .hljs-title.class_.inherited__ {
+    color: var(--color-code-string);
+  }
+
+  .hljs-built_in, .hljs-doctag, .hljs-quote, .hljs-regexp, .hljs-keyword.hljs-atrule {
+    color: var(--color-code-support);
+  }
+
+  .hljs-attribute, .hljs-function .hljs-title, .hljs-section, .hljs-title.function_ {
+    color: var(--color-code-function);
+  }
+
+  .hljs-keyword, .hljs-template-tag, .hljs-type {
+    color: var(--color-code-keyword);
+  }
+
+  .hljs-emphasis {
+    color: var(--color-code-keyword);
+    font-style: italic;
+  }
+
+  .hljs-meta, .hljs-meta .hljs-keyword, .hljs-meta .hljs-string {
+    color: var(--color-code-meta);
+  }
+
+  .hljs-addition, .hljs-deletion {
+    color: var(--color-code-text);
+    margin-inline: -1rem;
+    padding-inline: 1rem;
+    text-decoration: none;
+    display: block;
+  }
+
+  .hljs-addition {
+    background-color: var(--color-code-added-background);
+  }
+
+  .hljs-deletion {
+    background-color: var(--color-code-removed-background);
+  }
+
+  .feed {
+    margin-top: calc(var(--spacing) * 2);
+  }
+
+  .feed-separator {
+    margin-block: calc(var(--spacing) * 9);
+  }
+
+  .feed-title {
+    margin-top: var(--spacing);
+    margin-bottom: calc(var(--spacing) * 3);
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+    --tw-leading: var(--leading-tight);
+    line-height: var(--leading-tight);
+  }
+
+  .feed-title a {
+    color: var(--color-text);
+    text-decoration-line: none;
+  }
+
+  @media (hover: hover) {
+    .feed-title a:hover {
+      color: var(--color-primary);
+      text-underline-offset: 6px;
+      text-decoration-line: underline;
+      text-decoration-thickness: 2px;
+    }
+  }
+
+  .feed-title a:focus-visible {
+    text-decoration-line: underline;
+    text-decoration-thickness: 2px;
+  }
+
+  .feed-excerpt.p-summary {
+    font-size: 1.05rem;
+  }
+
+  .feed-item > .e-content {
+    --tw-leading: 1.6;
+    font-size: 1.12rem;
+    line-height: 1.6;
+  }
+
+  .feed-more, .front-links {
+    margin-top: calc(var(--spacing) * 3);
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+
+  .feed-more a, .front-links a {
+    align-items: center;
+    gap: var(--spacing);
+    min-block-size: 24px;
+    min-inline-size: 24px;
+    display: inline-flex;
+  }
+
+  @media (hover: hover) {
+    :is(.feed-more a, .front-links a):hover {
+      text-decoration-thickness: 2px;
+    }
+  }
+
+  .front-links {
+    margin-top: calc(var(--spacing) * 10);
+    column-gap: calc(var(--spacing) * 6);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .cite {
+    margin-block: calc(var(--spacing) * 3);
+    border-inline-start-style: var(--tw-border-style);
+    border-inline-start-width: 2px;
+    border-color: var(--color-primary);
+    padding-inline-start: calc(var(--spacing) * 4);
+  }
+
+  .cite-line {
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-muted);
+  }
+
+  .cite-line a {
+    --tw-font-weight: var(--font-weight-medium);
+    min-block-size: 24px;
+    min-inline-size: 24px;
+    font-weight: var(--font-weight-medium);
+    align-items: center;
+    text-decoration-line: underline;
+    text-decoration-color: currentColor;
+    display: inline-flex;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .cite-line a {
+      -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+      -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+      text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+    }
+  }
+
+  .cite-line a {
+    text-underline-offset: 4px;
+    text-decoration-thickness: 1px;
+  }
+
+  @media (hover: hover) {
+    .cite-line a:hover {
+      color: var(--color-primary);
+      -webkit-text-decoration-color: var(--color-primary);
+      -webkit-text-decoration-color: var(--color-primary);
+      text-decoration-color: var(--color-primary);
+      text-decoration-thickness: 2px;
+    }
+  }
+
+  .cite-line a:focus-visible {
+    text-decoration-thickness: 2px;
+  }
+
+  .cite-line a {
+    color: var(--color-text);
+  }
+
+  .cite-quote {
+    margin-top: var(--spacing);
+    --tw-leading: var(--leading-snug);
+    font-size: .98rem;
+    line-height: var(--leading-snug);
+    color: var(--color-muted);
+    font-style: italic;
+  }
+
+  .post-header {
+    margin-bottom: calc(var(--spacing) * 8);
+  }
+
+  .post-header h1 {
+    margin-top: var(--spacing);
+    font-size: var(--text-4xl);
+    line-height: var(--tw-leading, var(--text-4xl--line-height));
+    --tw-leading: 1.08;
+    line-height: 1.08;
+  }
+
+  @media (min-width: 40rem) {
+    .post-header h1 {
+      font-size: 2.75rem;
+    }
+  }
+
+  .post-deck {
+    margin-top: calc(var(--spacing) * 4);
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+    --tw-leading: var(--leading-snug);
+    line-height: var(--leading-snug);
+    color: var(--color-muted);
+    font-style: italic;
+  }
+
+  .blog-post > .e-content {
+    --tw-leading: 1.65;
+    font-size: 1.08rem;
+    line-height: 1.65;
+  }
+
+  .blog-post > .screen-reader-text ~ .e-content {
+    --tw-leading: 1.55;
+    font-size: 1.3rem;
+    line-height: 1.55;
+  }
+
+  .entry-meta, .page-meta {
+    margin-top: calc(var(--spacing) * 8);
+    align-items: center;
+    column-gap: calc(var(--spacing) * 2);
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-muted);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .page-meta:empty {
+    display: none;
+  }
+
+  .entry-meta a, .page-meta a {
+    align-items: center;
+    min-block-size: 24px;
+    min-inline-size: 24px;
+    text-decoration-line: underline;
+    text-decoration-color: currentColor;
+    display: inline-flex;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .entry-meta a, .page-meta a {
+      -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+      -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+      text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+    }
+  }
+
+  .entry-meta a, .page-meta a {
+    text-underline-offset: 4px;
+    text-decoration-thickness: 1px;
+  }
+
+  @media (hover: hover) {
+    :is(.entry-meta a, .page-meta a):hover {
+      color: var(--color-primary);
+      -webkit-text-decoration-color: var(--color-primary);
+      -webkit-text-decoration-color: var(--color-primary);
+      text-decoration-color: var(--color-primary);
+      text-decoration-thickness: 2px;
+    }
+  }
+
+  :is(.entry-meta a, .page-meta a):focus-visible {
+    text-decoration-thickness: 2px;
+  }
+
+  .entry-meta a, .page-meta a {
+    color: var(--color-muted);
+  }
+
+  .post-categories {
+    margin-top: calc(var(--spacing) * 2);
+    column-gap: calc(var(--spacing) * 3);
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .post-categories a {
+    align-items: center;
+    min-block-size: 24px;
+    min-inline-size: 24px;
+    text-decoration-line: underline;
+    text-decoration-color: currentColor;
+    display: inline-flex;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .post-categories a {
+      -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+      -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+      text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+    }
+  }
+
+  .post-categories a {
+    text-underline-offset: 4px;
+    text-decoration-thickness: 1px;
+  }
+
+  @media (hover: hover) {
+    .post-categories a:hover {
+      color: var(--color-primary);
+      -webkit-text-decoration-color: var(--color-primary);
+      -webkit-text-decoration-color: var(--color-primary);
+      text-decoration-color: var(--color-primary);
+      text-decoration-thickness: 2px;
+    }
+  }
+
+  .post-categories a:focus-visible {
+    text-decoration-thickness: 2px;
+  }
+
+  .post-categories a {
+    color: var(--color-secondary);
+  }
+
+  .post-categories a[rel="tag"]:before {
+    content: "#";
+  }
+
+  .blog-post > hr {
+    margin-top: calc(var(--spacing) * 10);
+    margin-bottom: calc(var(--spacing) * 8);
+  }
+
+  .blog-post-nav {
+    margin-block: calc(var(--spacing) * 12);
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+
+  .blog-post-nav ul {
+    gap: calc(var(--spacing) * 4);
+    padding: 0;
+    list-style-type: none;
+    display: grid;
+  }
+
+  @media (min-width: 40rem) {
+    .blog-post-nav ul {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .blog-post-nav li:has( > a[rel="next"]) {
+      grid-column-start: 2;
+    }
+  }
+
+  .blog-post-nav a {
+    border-radius: var(--radius-md);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-edge);
+    min-block-size: 24px;
+    min-inline-size: 24px;
+    width: 100%;
+    height: 100%;
+    padding: calc(var(--spacing) * 4);
+    color: var(--color-text);
+    flex-direction: column;
+    align-items: flex-start;
+    text-decoration-line: none;
+    display: inline-flex;
+  }
 
-li > p {
-  display: inline;
-}
+  @media (hover: hover) {
+    .blog-post-nav a:hover {
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+      border-color: var(--color-primary);
+      color: var(--color-primary);
+      padding: calc(1rem - 1px);
+    }
+  }
 
-li *:last-child {
-  margin-bottom: var(--spacing-0);
-}
+  @media (min-width: 40rem) {
+    .blog-post-nav a[rel="next"] {
+      text-align: end;
+      align-items: flex-end;
+    }
+  }
 
-details {
-  margin-left: var(--spacing-4);
-}
+  .blog-post-nav-label {
+    margin-bottom: var(--spacing);
+    --tw-tracking: .14em;
+    letter-spacing: .14em;
+    color: var(--color-muted);
+    text-transform: uppercase;
+    font-size: .7rem;
+    display: block;
+  }
 
-details summary {
-  cursor: pointer;
-}
+  .bio {
+    align-items: flex-start;
+    gap: calc(var(--spacing) * 4);
+    display: flex;
+  }
 
-.list-none {
-  list-style-type: none;
-}
+  .bio-avatar {
+    flex-shrink: 0;
+  }
 
-.hlist {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0;
-}
+  .bio-avatar img {
+    width: calc(var(--spacing) * 14);
+    height: calc(var(--spacing) * 14);
+    object-fit: cover;
+    border-radius: 3.40282e38px;
+  }
 
-.hlist li {
-  margin: 0;
-  padding: 0 0.5em 0 0;
-  list-style-type: none;
-}
+  .bio .p-name {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+    color: var(--color-text);
+  }
 
-blockquote {
-  margin: var(--spacing-8) var(--spacing-8) var(--spacing-8) var(--spacing-0);
-  padding: var(--spacing-0) var(--spacing-0) var(--spacing-0) var(--spacing-6);
-  border-left: var(--spacing-1) solid var(--color-secondary);
-  color: var(--color-secondary);
-  font-size: var(--fontSize-2);
-  font-style: italic;
-}
+  .bio-note {
+    margin-top: var(--spacing);
+    color: var(--color-muted);
+    font-size: .95rem;
+  }
 
-blockquote > :last-child {
-  margin-bottom: var(--spacing-0);
-}
+  .bio-links {
+    margin-top: var(--spacing);
+    column-gap: calc(var(--spacing) * 4);
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
 
-blockquote > ul,
-blockquote > ol {
-  list-style-position: inside;
-}
+  .bio-links a {
+    align-items: center;
+    min-block-size: 24px;
+    min-inline-size: 24px;
+    display: inline-flex;
+  }
 
-table {
-  width: 100%;
-  margin-bottom: var(--spacing-8);
-  border-collapse: collapse;
-  border-spacing: 0.25rem;
-}
+  .global-wrapper[data-is-root-path="true"] .bio {
+    margin-top: calc(var(--spacing) * 2);
+  }
 
-table thead tr th {
-  border-bottom: 1px solid var(--color-primary);
-}
+  .archive-header .page-title {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
 
-pre,
-code,
-kbd,
-samp {
-  font-family: var(--fontFamily-mono);
-}
+  .archive-header {
+    margin-bottom: calc(var(--spacing) * 10);
+  }
 
-code {
-  padding: 0.1em 0.3em;
-  border-radius: 4px;
-  background-color: var(--color-code-background);
-  color: var(--color-code-text);
-  font-size: 0.9em;
-  /* A file path or an identifier is one long word, and a narrow screen would
-     otherwise carry it off the side of the page. A block of code scrolls
-     instead — see `pre` below. */
-  overflow-wrap: break-word;
-}
+  .category-description {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+    color: var(--color-muted);
+    font-style: italic;
+  }
 
-pre {
-  overflow-x: auto;
-  margin-bottom: var(--spacing-8);
-  padding: var(--spacing-3) var(--spacing-4);
-  border-radius: 6px;
-  background-color: var(--color-code-background);
-  color: var(--color-code-text);
-  font-size: var(--fontSize-0);
-  line-height: var(--lineHeight-normal);
-}
+  .author-header + .bio {
+    margin-bottom: calc(var(--spacing) * 12);
+  }
 
-pre code {
-  padding: 0;
-  border-radius: 0;
-  background: none;
-  font-size: inherit;
-}
+  .archive h2 {
+    margin-top: calc(var(--spacing) * 10);
+    margin-bottom: calc(var(--spacing) * 3);
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
 
-/* Syntax highlighting (TASK-86).
- *
- * The CMS renders a fenced block as `pre > code.language-x` and highlights
- * nothing; `static/highlight.js` marks the tokens up on the client, and these
- * are its colours. The scopes and the slots they map to are highlight.js's own
- * base16 Tomorrow theme, so a token it invents later lands somewhere sensible
- * rather than nowhere.
- *
- * Every colour is a custom property, so a site that wants another palette
- * redefines a dozen tokens instead of writing a syntax theme. Delimiters,
- * operators and substitutions are deliberately the block's own ink: they are
- * most of the characters on screen and a colour there is noise.
- */
-
-.hljs-comment {
-  color: var(--color-code-comment);
-}
+  .archive ol {
+    list-style-type: none;
+  }
 
-.hljs-tag {
-  color: var(--color-code-tag);
-}
+  :where(.archive ol > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(var(--spacing) * var(--tw-space-y-reverse));
+    margin-block-end: calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)));
+  }
 
-.hljs-subst,
-.hljs-punctuation,
-.hljs-operator {
-  color: var(--color-code-text);
-}
+  .archive ol {
+    padding: 0;
+  }
 
-.hljs-bullet,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-selector-tag,
-.hljs-name {
-  color: var(--color-code-name);
-}
+  .archive a {
+    align-items: center;
+    min-block-size: 24px;
+    min-inline-size: 24px;
+    display: inline-flex;
+  }
 
-.hljs-symbol,
-.hljs-number,
-.hljs-link,
-.hljs-attr,
-.hljs-variable.constant_,
-.hljs-literal {
-  color: var(--color-code-literal);
-}
+  .pagination {
+    margin-top: calc(var(--spacing) * 12);
+    gap: calc(var(--spacing) * 4);
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    flex-wrap: wrap;
+    display: flex;
+  }
 
-.hljs-title,
-.hljs-class .hljs-title,
-.hljs-title.class_ {
-  color: var(--color-code-class);
-}
+  .pagination a {
+    align-items: center;
+    gap: var(--spacing);
+    min-block-size: 24px;
+    min-inline-size: 24px;
+    text-decoration-line: underline;
+    text-decoration-color: currentColor;
+    display: inline-flex;
+  }
 
-.hljs-strong {
-  color: var(--color-code-class);
-  font-weight: var(--fontWeight-bold);
-}
+  @supports (color: color-mix(in lab, red, red)) {
+    .pagination a {
+      -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+      -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+      text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+    }
+  }
 
-.hljs-code,
-.hljs-string,
-.hljs-title.class_.inherited__ {
-  color: var(--color-code-string);
-}
+  .pagination a {
+    text-underline-offset: 4px;
+    text-decoration-thickness: 1px;
+  }
 
-.hljs-built_in,
-.hljs-doctag,
-.hljs-quote,
-.hljs-regexp,
-.hljs-keyword.hljs-atrule {
-  color: var(--color-code-support);
-}
+  @media (hover: hover) {
+    .pagination a:hover {
+      color: var(--color-primary);
+      -webkit-text-decoration-color: var(--color-primary);
+      -webkit-text-decoration-color: var(--color-primary);
+      text-decoration-color: var(--color-primary);
+      text-decoration-thickness: 2px;
+    }
+  }
 
-.hljs-attribute,
-.hljs-function .hljs-title,
-.hljs-section,
-.hljs-title.function_ {
-  color: var(--color-code-function);
-}
+  .pagination a:focus-visible {
+    text-decoration-thickness: 2px;
+  }
 
-.hljs-keyword,
-.hljs-template-tag,
-.hljs-type {
-  color: var(--color-code-keyword);
-}
+  .pagination-next {
+    margin-inline-start: auto;
+  }
 
-.hljs-emphasis {
-  color: var(--color-code-keyword);
-  font-style: italic;
-}
+  .search-form {
+    margin-bottom: calc(var(--spacing) * 8);
+    gap: calc(var(--spacing) * 2);
+    display: flex;
+  }
 
-.hljs-meta,
-.hljs-meta .hljs-keyword,
-.hljs-meta .hljs-string {
-  color: var(--color-code-meta);
-}
+  .search-form label {
+    flex: 1;
+  }
 
-/* A diff reads by the line, not by the token, which is what prism-diff.css did
- * on the site this design comes from: the whole line takes a tint out to the
- * edges of the block — the negative margin cancels the `pre` padding and the
- * padding puts it back — and keeps the block's own ink, which is the pair the
- * contrast test checks. The `+` and the `-` stay in the text, so the meaning
- * does not rest on the colour alone.
- */
-
-.hljs-addition,
-.hljs-deletion {
-  display: block;
-  margin-right: calc(-1 * var(--spacing-4));
-  margin-left: calc(-1 * var(--spacing-4));
-  padding-right: var(--spacing-4);
-  padding-left: var(--spacing-4);
-  color: var(--color-code-text);
-  text-decoration: none;
-}
+  .search-summary {
+    margin-bottom: calc(var(--spacing) * 8);
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-muted);
+  }
 
-.hljs-addition {
-  background-color: var(--color-code-added-background);
-}
+  .search-result + .search-result {
+    margin-top: calc(var(--spacing) * 9);
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+    border-color: var(--color-rule);
+    padding-top: calc(var(--spacing) * 9);
+  }
 
-.hljs-deletion {
-  background-color: var(--color-code-removed-background);
-}
+  .search-result .feed-title {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
 
-/* Screen reader text. The skip link is this until it is focused, and then it
-   is a box at the top left of the page. */
-
-.screen-reader-text {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  border: 0;
-  clip-path: inset(50%);
-  word-wrap: normal !important;
-}
+  .search-snippet mark {
+    border-radius: var(--radius-xs);
+    background-color: var(--color-primary);
+  }
 
-.screen-reader-text:focus {
-  display: block;
-  width: auto;
-  height: auto;
-  top: var(--spacing-2);
-  left: var(--spacing-2);
-  padding: var(--spacing-4);
-  clip-path: none;
-  background-color: var(--color-base-3);
-  color: var(--color-text);
-  font-size: var(--fontSize-1);
-  font-weight: var(--fontWeight-bold);
-  line-height: normal;
-  text-decoration: none;
-  z-index: 100000;
-}
+  @supports (color: color-mix(in lab, red, red)) {
+    .search-snippet mark {
+      background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
+    }
+  }
 
-/* The page shell */
+  .search-snippet mark {
+    padding-inline: calc(var(--spacing) * .5);
+    color: var(--color-text);
+  }
 
-.global-wrapper {
-  max-width: var(--maxWidth-wrapper);
-  margin: var(--spacing-0) auto;
-  padding: var(--spacing-10) var(--spacing-5);
-}
+  :is(.not-found, .server-error, .maintenance) > p {
+    font-size: 1.08rem;
+  }
 
-.global-wrapper[data-is-root-path='true'] .bio {
-  margin-bottom: var(--spacing-20);
-}
+  .reactions-section {
+    margin-top: calc(var(--spacing) * 14);
+    margin-bottom: calc(var(--spacing) * 10);
+    column-gap: calc(var(--spacing) * 10);
+    row-gap: calc(var(--spacing) * 4);
+    flex-wrap: wrap;
+    display: flex;
+  }
 
-.global-header {
-  margin-bottom: var(--spacing-12);
-}
+  .reaction-group {
+    min-width: 0;
+  }
 
-.main-heading {
-  margin: 0;
-  font-size: var(--fontSize-7);
-}
+  .reaction-title {
+    margin-bottom: calc(var(--spacing) * 2);
+    --tw-font-weight: var(--font-weight-normal);
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    font-size: .72rem;
+    font-weight: var(--font-weight-normal);
+    --tw-tracking: .14em;
+    letter-spacing: .14em;
+    color: var(--color-muted);
+    text-transform: uppercase;
+  }
 
-.header-link-home {
-  font-family: var(--font-heading);
-  font-size: var(--fontSize-2);
-  font-weight: var(--fontWeight-bold);
-  text-decoration: none;
-}
+  .reaction-count {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-text);
+    margin-inline-start: var(--spacing);
+  }
 
-/* The site menu, which the header carries on every page (TASK-105). At the
-   root the header is the site title with the tagline under it, and the menu
-   is a line of its own under that.
+  .facepile {
+    flex-wrap: wrap;
+    align-items: center;
+    display: flex;
+  }
 
-   No size of its own (TASK-111): a menu is navigation somebody is meant to
-   use rather than a footnote, so it reads at the page's size, like the footer
-   menu, which never had one. */
-.global-header .site-nav {
-  margin-top: var(--spacing-2);
-}
+  .facepile > a, .facepile > span {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --tw-ring-color: var(--color-body);
+    border-radius: 3.40282e38px;
+    margin-inline-start: calc(var(--spacing) * -2);
+    position: relative;
+  }
 
-/* Everywhere else the header is the small link home, and the menu sits beside
-   it on the same line — the two wrap onto a second line together rather than
-   the menu dropping under the link on a narrow screen. */
-.global-wrapper:not([data-is-root-path='true']) .global-header {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  column-gap: var(--spacing-5);
-  row-gap: var(--spacing-1);
-}
+  :is(.facepile > a, .facepile > span):first-child {
+    margin-inline-start: 0;
+  }
 
-.global-wrapper:not([data-is-root-path='true']) .global-header .site-nav {
-  margin-top: var(--spacing-0);
-}
+  @media (hover: hover) {
+    :is(.facepile > a, .facepile > span):hover {
+      z-index: 10;
+    }
+  }
 
-/* An entry: a post or a page (TASK-83). The source design's own rules — the
-   title tight against the words under it, a subtitle in the heading font —
-   plus the small line the `e-content` ends on, which carries the permalink,
-   the published date and, when it is a different day, the updated one. */
+  @media (prefers-reduced-motion: no-preference) {
+    .facepile > a, .facepile > span {
+      transition-property: transform, translate, scale, rotate;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+
+    @media (hover: hover) {
+      :is(.facepile > a, .facepile > span):hover {
+        --tw-scale-x: 110%;
+        --tw-scale-y: 110%;
+        --tw-scale-z: 110%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+      }
+    }
+  }
 
-.blog-post header h1 {
-  margin: var(--spacing-0) var(--spacing-0) var(--spacing-4) var(--spacing-0);
-}
+  .facepile img {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+    border-radius: 3.40282e38px;
+  }
 
-.blog-post header p {
-  font-family: var(--font-heading);
-  font-size: var(--fontSize-2);
-}
+  .facepile > :has(.reaction-name) {
+    align-items: center;
+    gap: var(--spacing);
+    background-color: var(--color-base);
+    min-block-size: 24px;
+    min-inline-size: 24px;
+    padding-inline: calc(var(--spacing) * 2);
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-text);
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    margin-inline-start: var(--spacing);
+    text-decoration-line: none;
+    display: inline-flex;
+  }
 
-.entry-meta,
-.page-meta {
-  margin-top: var(--spacing-8);
-}
+  .facepile > :has(.reaction-name):first-child {
+    margin-inline-start: 0;
+  }
 
-/* A page usually carries no date, and then this line has nothing in it. The
-   layout prints it anyway, so a site has one hook wherever it is; here is
-   where it disappears. */
-.entry-meta:empty,
-.page-meta:empty {
-  display: none;
-}
+  .reaction-icon {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
 
-/* The bio, which the entry footer prints and an author archive heads with
-   (TASK-83). */
+  .comments-area {
+    margin-top: calc(var(--spacing) * 14);
+  }
 
-.bio {
-  display: flex;
-  align-items: center;
-  margin-bottom: var(--spacing-16);
-}
+  .comments-title {
+    margin-bottom: calc(var(--spacing) * 5);
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
 
-.bio p {
-  margin-bottom: var(--spacing-0);
-}
+  .comment-list {
+    margin: 0;
+    list-style-type: none;
+  }
 
-/* The name reads as the heading of the card; the source theme printed a
-   <strong> around it, which is styling in the markup. */
-.bio .p-name {
-  font-weight: var(--fontWeight-bold);
-}
+  :where(.comment-list > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
+  }
 
-.bio-note {
-  margin-top: var(--spacing-2);
-  font-style: italic;
-}
+  .comment-list {
+    padding: 0;
+  }
 
-/* The links the person calls their own, under the credit: a horizontal list in
-   the heading font, at the page's size like every other nav (TASK-111). The
-   site menu used to share this rule; it is in the header now (TASK-105) and
-   the bio carries nobody but the person. */
-.bio-links {
-  margin-top: var(--spacing-2);
-}
+  .comment-list .children {
+    margin-top: calc(var(--spacing) * 6);
+    list-style-type: none;
+  }
 
-.bio-avatar {
-  display: inline-block;
-  min-width: 55px;
-  margin-right: var(--spacing-4);
-  margin-bottom: var(--spacing-0);
-  border: 3px solid var(--color-base-3);
-  border-radius: 50%;
-}
+  :where(.comment-list .children > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
+  }
 
-.bio-avatar img {
-  display: block;
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-}
+  .comment-list .children {
+    border-inline-start-style: var(--tw-border-style);
+    border-inline-start-width: 1px;
+    border-color: var(--color-rule);
+    padding-inline-start: calc(var(--spacing) * 6);
+  }
 
-.circle {
-  border-radius: 50%;
-}
+  @media (min-width: 40rem) {
+    .comment-list .children {
+      padding-inline-start: calc(var(--spacing) * 12);
+    }
+  }
 
-/* A listing: the feed of entries, and what heads one (TASK-82). The source
-   design's own rules, on the tokens above. The feed itself takes no styling —
-   it is a stack of articles at the measure — and what makes it read as a list
-   is the rule between two of them and the small meta line under each. */
+  .comment-body {
+    gap: calc(var(--spacing) * 2);
+    flex-direction: column;
+    display: flex;
+  }
 
-.feed-title {
-  margin: var(--spacing-0) var(--spacing-0) var(--spacing-4) var(--spacing-0);
-  padding: var(--spacing-0);
-  font-size: var(--fontSize-3);
-}
+  .comment-meta {
+    align-items: center;
+    column-gap: calc(var(--spacing) * 3);
+    row-gap: var(--spacing);
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    flex-wrap: wrap;
+    display: flex;
+  }
 
-.feed-separator {
-  margin: var(--spacing-2) var(--spacing-0) var(--spacing-4) var(--spacing-0);
-}
+  .comment-author {
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    display: flex;
+  }
 
-.feed-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-2);
-  align-items: baseline;
-  font-size: 70%;
-}
+  .comment-author .avatar, .comment-avatar-empty {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+    border-radius: 3.40282e38px;
+    flex-shrink: 0;
+  }
 
-.feed-meta p {
-  margin: var(--spacing-0);
-}
+  .comment-avatar-empty {
+    background-color: var(--color-base);
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-muted);
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
 
-.post-categories {
-  margin-top: var(--spacing-2);
-  margin-bottom: var(--spacing-0);
-  font-size: 70%;
-}
+  .comment-author a {
+    align-items: center;
+    min-block-size: 24px;
+    min-inline-size: 24px;
+    text-decoration-line: underline;
+    text-decoration-color: currentColor;
+    display: inline-flex;
+  }
 
-.post-categories a {
-  display: inline-block;
-  margin-right: var(--spacing-2);
-}
+  @supports (color: color-mix(in lab, red, red)) {
+    .comment-author a {
+      -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+      -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+      text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+    }
+  }
 
-/* The categories are already small; inside the meta line they would be small
-   twice over, so there they are the size of the line they sit on. */
-.feed-meta .post-categories {
-  font-size: 100%;
-}
+  .comment-author a {
+    text-underline-offset: 4px;
+    text-decoration-thickness: 1px;
+  }
 
-.category-header {
-  margin-bottom: var(--spacing-8);
-}
+  @media (hover: hover) {
+    .comment-author a:hover {
+      color: var(--color-primary);
+      -webkit-text-decoration-color: var(--color-primary);
+      -webkit-text-decoration-color: var(--color-primary);
+      text-decoration-color: var(--color-primary);
+      text-decoration-thickness: 2px;
+    }
+  }
 
-.category-description {
-  margin-top: var(--spacing-2);
-  font-style: italic;
-}
+  .comment-author a:focus-visible {
+    text-decoration-thickness: 2px;
+  }
 
-/* Pagination: two arrows under a listing, the previous one at the left edge
-   and the next at the right however few there are. */
-
-.pagination {
-  display: flex;
-  gap: var(--spacing-4);
-  align-items: baseline;
-  justify-content: space-between;
-  margin-top: var(--spacing-12);
-  padding-top: var(--spacing-5);
-  border-top: 1px solid var(--color-base);
-  font-family: var(--font-heading);
-  font-size: var(--fontSize-0);
-}
+  .comment-author a {
+    color: var(--color-text);
+  }
 
-.pagination-previous {
-  margin-inline-end: auto;
-}
+  .comment-metadata a {
+    align-items: center;
+    min-block-size: 24px;
+    min-inline-size: 24px;
+    text-decoration-line: underline;
+    text-decoration-color: currentColor;
+    display: inline-flex;
+  }
 
-.pagination-next {
-  margin-inline-start: auto;
-}
+  @supports (color: color-mix(in lab, red, red)) {
+    .comment-metadata a {
+      -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+      -webkit-text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+      text-decoration-color: color-mix(in oklab, currentcolor 50%, transparent);
+    }
+  }
 
-/* Where a post links its neighbours, which the entry layout prints (TASK-83). */
+  .comment-metadata a {
+    text-underline-offset: 4px;
+    text-decoration-thickness: 1px;
+  }
 
-.blog-post-nav {
-  font-family: var(--font-heading);
-  font-size: var(--fontSize-0);
-}
+  @media (hover: hover) {
+    .comment-metadata a:hover {
+      color: var(--color-primary);
+      -webkit-text-decoration-color: var(--color-primary);
+      -webkit-text-decoration-color: var(--color-primary);
+      text-decoration-color: var(--color-primary);
+      text-decoration-thickness: 2px;
+    }
+  }
 
-.blog-post-nav ul {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  margin: var(--spacing-0);
-  padding: 0;
-  list-style: none;
-}
+  .comment-metadata a:focus-visible {
+    text-decoration-thickness: 2px;
+  }
 
-/* Titles: what heads a listing, a 404 and an author archive. The source theme
-   prints none of these — it has no archive heading at all — so they are the
-   theme's own, sized off the same scale. An entry's own title is
-   `.blog-post header h1` above. */
+  .comment-metadata a, .comment-metadata {
+    color: var(--color-muted);
+  }
 
-.page-title {
-  margin: 0 0 var(--spacing-2);
-  font-size: var(--fontSize-6);
-}
+  .comment-source {
+    color: var(--color-muted);
+    font-style: italic;
+  }
 
-.empty {
-  font-family: var(--font-heading);
-  font-size: var(--fontSize-0);
-}
+  .comment-content {
+    font-size: 1.02rem;
+  }
 
-/* The search box (TASK-22): a field and a button on one line, at the top of
-   the search page and nowhere else (TASK-105). The field is drawn the way the
-   comment form's are, so the site has one look for a place to type. */
+  .reply {
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
 
-.search-form {
-  display: flex;
-  gap: var(--spacing-2);
-  margin: 0 0 var(--spacing-4);
-  font-family: var(--font-heading);
-}
+  .reply a {
+    align-items: center;
+    min-block-size: 24px;
+    min-inline-size: 24px;
+    display: inline-flex;
+  }
 
-.search-form label {
-  flex: 1;
-  min-width: 0;
-}
+  .no-comments {
+    margin-top: calc(var(--spacing) * 8);
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-muted);
+    font-style: italic;
+  }
 
-.search-form input[type='search'] {
-  width: 100%;
-  padding: var(--spacing-2);
-  border: 1px solid var(--color-base);
-  background-color: var(--color-base-3);
-  color: var(--color-text);
-  font-family: var(--font-body);
-  font-size: var(--fontSize-1);
-}
+  .comment-respond {
+    margin-top: calc(var(--spacing) * 12);
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+    border-color: var(--color-rule);
+    padding-top: calc(var(--spacing) * 10);
+  }
 
-.search-form input[type='search']:focus-visible {
-  outline: 2px solid var(--color-primary);
-  outline-offset: -1px;
-  border-color: var(--color-primary);
-}
+  .comment-reply-title, .contact-form-title {
+    margin-bottom: calc(var(--spacing) * 5);
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
 
-.search-form button {
-  padding: var(--spacing-2) var(--spacing-4);
-  border: none;
-  background-color: var(--color-primary);
-  color: var(--color-body);
-  font-family: var(--font-heading);
-  font-size: var(--fontSize-1);
-  cursor: pointer;
-}
+  .comment-help {
+    margin-top: calc(var(--spacing) * -3);
+    margin-bottom: calc(var(--spacing) * 5);
+    color: var(--color-muted);
+    font-size: .95rem;
+  }
 
-.search-form button:hover,
-.search-form button:focus-visible {
-  opacity: 0.85;
-}
+  .comment-respond form {
+    gap: calc(var(--spacing) * 4);
+    flex-direction: column;
+    display: flex;
+  }
 
-.search-summary {
-  font-family: var(--font-heading);
-  font-size: var(--fontSize-0);
-}
+  .field-row {
+    column-gap: calc(var(--spacing) * 4);
+    row-gap: calc(var(--spacing) * 4);
+    display: grid;
+  }
 
-.search-result {
-  margin: 0 0 var(--spacing-8);
-}
+  @media (min-width: 40rem) {
+    .field-row {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
 
-.search-result .feed-title {
-  margin-bottom: var(--spacing-2);
-}
+  .comment-respond label {
+    margin-bottom: var(--spacing);
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    display: block;
+  }
 
-/* A matched word is marked by weight and an underline in the primary colour
-   rather than by a highlighter background, so it adds no colour pair the
-   contrast test would have to prove in both schemes. */
+  .comment-optional, .contact-optional, .comment-hint, .contact-hint {
+    color: var(--color-muted);
+  }
 
-.search-snippet mark {
-  background-color: transparent;
-  color: inherit;
-  font-weight: var(--fontWeight-bold);
-  text-decoration: underline var(--color-primary);
-  text-underline-offset: 0.15em;
-}
+  .comment-hint, .contact-hint, .comment-field-error, .contact-field-error {
+    margin-top: var(--spacing);
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    display: block;
+  }
 
-/* An author archive (TASK-67): the person above their posts. The same URL is
-   their ActivityPub actor, so this is the page a follower sees when they click
-   through from somewhere else on the fediverse. The person themselves is the
-   bio above; this is only what is left, the heading over it. */
+  .comment-field-error, .contact-field-error {
+    color: var(--color-error);
+  }
 
-.author-header {
-  margin-bottom: var(--spacing-4);
-}
+  :is(.comment-respond, .search-form) :is(input:not([type="checkbox"], [type="hidden"]), textarea) {
+    border-radius: var(--radius-md);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-edge);
+    background-color: var(--color-base);
+    width: 100%;
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    font-family: Iowan Old Style, Palatino Linotype, Palatino, Book Antiqua, Georgia, serif;
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    color: var(--color-text);
+    display: block;
+  }
 
-/* The front page (TASK-85): the site's own words, then Recent Posts, then
-   where to go next. Almost nothing is needed — the words are `.e-content`
-   below, the posts are the feed above, and the heading over them is an
-   ordinary `h2` — so this is only the line of links, which follows a feed
-   rather than a paragraph and needs the air a paragraph would already have. */
+  :is(.comment-respond, .search-form) :is(input, textarea):is(:user-invalid, [aria-invalid="true"]) {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+    border-color: var(--color-error);
+    padding-block: calc(.5rem - 1px);
+    padding-inline: calc(.75rem - 1px);
+  }
 
-.front-links {
-  margin-top: var(--spacing-8);
-}
+  .comment-check {
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    display: flex;
+  }
 
-/* An archive page: every post there has ever been, under a heading per month.
-   The source design's essays page is plain headings over `ol.list-none` and
-   nothing else, so the prose rules draw it; what is here only closes the gap
-   between a month and its own posts, which at the prose spacing reads as two
-   things rather than as one. */
+  .comment-check label {
+    margin-bottom: 0;
+  }
 
-.archive h2 {
-  margin-bottom: var(--spacing-2);
-}
+  .comment-respond input[type="checkbox"] {
+    block-size: 24px;
+    inline-size: 24px;
+    accent-color: var(--color-primary);
+    margin: 0;
+  }
 
-/* Body copy: whatever a document's words render into, which is the entry's
-   `section.e-content` and the `div.page-body.e-content` a posts page prints
-   its own words in. */
+  .search-form button, .comment-respond .form-submit button, .comment-respond .form-submit input[type="submit"] {
+    cursor: pointer;
+    border-radius: var(--radius-md);
+    background-color: var(--color-primary);
+    padding-inline: calc(var(--spacing) * 5);
+    padding-block: calc(var(--spacing) * 2.5);
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-body);
+  }
 
-.e-content {
-  overflow-wrap: break-word;
-}
+  @media (hover: hover) {
+    :is(.search-form button, .comment-respond .form-submit button, .comment-respond .form-submit input[type="submit"]):hover {
+      background-color: var(--color-text);
+    }
+  }
 
-.e-content > :first-child {
-  margin-top: 0;
-}
+  .search-form button, .comment-respond .form-submit button, .comment-respond .form-submit input[type="submit"] {
+    min-block-size: 24px;
+    min-inline-size: 24px;
+  }
 
-.e-content table {
-  display: block;
-  overflow-x: auto;
-}
+  .comment-signed-in, .comment-replying-to {
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-muted);
+  }
 
-.e-content th,
-.e-content td {
-  padding: var(--spacing-1) var(--spacing-3);
-  text-align: start;
-}
+  .comment-signed-in a, .comment-replying-to a {
+    color: var(--color-primary);
+  }
 
-.footnotes {
-  margin-top: var(--spacing-10);
-  padding-top: var(--spacing-4);
-  border-top: 1px solid var(--color-base);
-  font-size: var(--fontSize-0);
-}
+  .comment-notice, .contact-notice {
+    border-radius: var(--radius-md);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-edge);
+    background-color: var(--color-base);
+    padding: calc(var(--spacing) * 4);
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-text);
+  }
 
-.footnote-item p {
-  display: inline;
-}
+  .comment-error, .contact-error {
+    margin-block: calc(var(--spacing) * 6);
+    border-inline-start-style: var(--tw-border-style);
+    border-inline-start-width: 2px;
+    border-color: var(--color-error);
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    padding-inline-start: calc(var(--spacing) * 4);
+  }
 
-/* Reactions: the likes, the boosts and the pages that mentioned a post,
-   grouped by kind as facepiles of small round avatars (TASK-84). */
+  .comment-error h3, .contact-error h3 {
+    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-error);
+  }
 
-.reactions-section {
-  margin-top: var(--spacing-12);
-}
+  .comment-error ul, .contact-error ul {
+    margin-top: calc(var(--spacing) * 2);
+    padding-inline-start: calc(var(--spacing) * 5);
+    list-style-type: disc;
+  }
 
-.reaction-group {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-3);
-  margin-bottom: var(--spacing-3);
-}
+  .comment-error a, .contact-error a {
+    align-items: center;
+    min-block-size: 24px;
+    min-inline-size: 24px;
+    display: inline-flex;
+  }
 
-.reaction-title {
-  margin: 0;
-  font-family: var(--font-heading);
-  font-size: var(--fontSize-1);
-  white-space: nowrap;
+  .comment-trap, .contact-trap {
+    width: 1px;
+    height: 1px;
+    position: absolute;
+    inset-inline-start: -10000px;
+    overflow: hidden;
+  }
 }
 
-.facepile {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-1);
-}
+@layer utilities {
+  .visible {
+    visibility: visible;
+  }
 
-.facepile a,
-.facepile span {
-  display: inline-block;
-  line-height: 0;
-  text-decoration: none;
-}
+  .fixed {
+    position: fixed;
+  }
 
-/* A face is a picture of somebody: the block of colour a link takes on hover
-   everywhere else would sit behind it as a frame, so it is taken back off. */
+  .static {
+    position: static;
+  }
 
-.facepile a:hover,
-.facepile a:focus {
-  background-color: transparent;
-  color: var(--color-primary);
-  text-decoration: underline;
-}
+  .target {
+    align-items: center;
+    min-block-size: 24px;
+    min-inline-size: 24px;
+    display: inline-flex;
+  }
 
-.facepile img {
-  display: block;
-  border-radius: 50%;
-}
+  .block {
+    display: block;
+  }
 
-/* A reaction with no avatar has nothing to recognise anybody by, so the emoji
-   badge of its kind stands in and the name is printed beside it — which needs
-   the line box the faces above do without. */
-
-.facepile a:has(.reaction-name),
-.facepile span:has(.reaction-name) {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-1);
-  font-family: var(--font-heading);
-  font-size: var(--fontSize-0);
-  line-height: normal;
-}
+  .contents {
+    display: contents;
+  }
 
-.reaction-icon {
-  display: inline-block;
-  width: 2rem;
-  height: 2rem;
-  border-radius: 50%;
-  background-color: var(--color-base);
-  line-height: 2rem;
-  text-align: center;
-}
+  .hidden {
+    display: none;
+  }
 
-/* The thread under a post: the replies from every door, each one an h-entry
-   with its author, its time and its words, and answers nested inside it. */
+  .list-none {
+    list-style-type: none;
+  }
 
-.comments-area {
-  margin-top: var(--spacing-12);
-}
+  .truncate {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
 
-.comments-title {
-  margin: 0 0 var(--spacing-8);
-  font-size: var(--fontSize-4);
-}
+  .italic {
+    font-style: italic;
+  }
 
-.comment-list,
-.comment-list .children {
-  margin: 0;
-  padding: 0;
-  list-style: none;
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
 }
 
-.comment-list .children {
-  margin-left: var(--spacing-8);
+:root {
+  color-scheme: light dark;
+  --color-body: #faf7f2;
+  --color-text: #1c1917;
+  --color-muted: #534c46;
+  --color-primary: #8c2f1f;
+  --color-secondary: #2b5580;
+  --color-rule: #e4dccf;
+  --color-edge: #8a867e;
+  --color-base: #f3eee5;
+  --color-base-2: #f5f6f7;
+  --color-base-3: #fff;
+  --color-code-background: #f3eee5;
+  --color-code-text: #1c1917;
+  --color-error: #9c1f18;
+  --color-code-comment: #4e4f4d;
+  --color-code-tag: #4e4f4e;
+  --color-code-name: #991f1f;
+  --color-code-literal: #77420f;
+  --color-code-class: #624c00;
+  --color-code-string: #455500;
+  --color-code-support: #23565a;
+  --color-code-function: #2f507c;
+  --color-code-keyword: #63417a;
+  --color-code-meta: #6d453c;
+  --color-code-added-background: #dcedd3;
+  --color-code-removed-background: #f5d8d6;
 }
 
-.comment-body {
-  padding: var(--spacing-4) 0;
-  border-bottom: 1px solid var(--color-base);
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-body: #171412;
+    --color-text: #ece6de;
+    --color-muted: #b2aaa0;
+    --color-primary: #ee9370;
+    --color-secondary: #86b8e2;
+    --color-rule: #3a332e;
+    --color-edge: #706a67;
+    --color-base: #221d1a;
+    --color-base-2: #222124;
+    --color-base-3: #2d2421;
+    --color-code-background: #221d1a;
+    --color-code-text: #ece6de;
+    --color-error: #ff8f9f;
+    --color-code-comment: #a9a9a9;
+    --color-code-tag: #b4b7b4;
+    --color-code-name: #f48b8d;
+    --color-code-literal: #f99157;
+    --color-code-class: #fc6;
+    --color-code-string: #9c9;
+    --color-code-support: #6cc;
+    --color-code-function: #83add6;
+    --color-code-keyword: #c9c;
+    --color-code-meta: #c6a198;
+    --color-code-added-background: #203622;
+    --color-code-removed-background: #401e1e;
+  }
 }
 
-.comment-author {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-  font-family: var(--font-heading);
-}
+@media (forced-colors: active) {
+  .search-form button, .comment-respond .form-submit button, .comment-respond .form-submit input[type="submit"] {
+    border: 1px solid buttontext;
+  }
 
-.comment-author .avatar {
-  border-radius: 50%;
-}
+  hr {
+    border-block-start: 1px solid canvastext;
+  }
 
-.comment-metadata {
-  margin-bottom: var(--spacing-2);
-  font-family: var(--font-heading);
-  font-size: var(--fontSize-0);
-}
+  pre, code, .search-snippet mark, .comment-avatar-empty {
+    border: 1px solid canvastext;
+  }
 
-/* The permalink is the whole date line, so it is the ink of the page rather
-   than a link's colour until somebody points at it. */
+  pre code {
+    border: 0;
+  }
 
-.comment-metadata a {
-  color: var(--color-text);
-  text-decoration: none;
+  .facepile > a, .facepile > span {
+    outline: 1px solid canvastext;
+  }
 }
 
-.comment-metadata a:hover,
-.comment-metadata a:focus {
-  background-color: transparent;
-  color: var(--color-primary);
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
 }
 
-.comment-content {
-  margin-top: var(--spacing-2);
+@property --tw-leading {
+  syntax: "*";
+  inherits: false
 }
 
-.comment-content > :last-child {
-  margin-bottom: 0;
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false
 }
 
-.reply {
-  margin-top: var(--spacing-2);
-  font-family: var(--font-heading);
-  font-size: var(--fontSize-0);
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false
 }
 
-.no-comments {
-  font-family: var(--font-heading);
-  font-style: italic;
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
 }
 
-/* The comment form under an open post, and the contact form on a page that
-   asked for one. One set of rules rather than two: they are the same kind of
-   form, the contact form wears `comment-respond` to say so, and a site
-   restyling one cannot leave the other behind. */
-
-.comment-respond {
-  margin-top: var(--spacing-8);
+@property --tw-space-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
 }
 
-.comment-respond .comment-reply-title,
-.comment-respond .contact-form-title {
-  margin: 0 0 var(--spacing-4);
-  font-size: var(--fontSize-4);
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
 }
 
-.comment-respond label {
-  display: block;
-  margin-bottom: var(--spacing-1);
-  font-family: var(--font-heading);
-  font-size: var(--fontSize-0);
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false
 }
 
-.comment-field,
-.contact-field,
-.comment-check {
-  margin: 0 0 var(--spacing-4);
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
 }
 
-/* The one label that belongs beside its field rather than over it. */
-
-.comment-check label {
-  display: inline;
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
 }
 
-.comment-respond input[type='text'],
-.comment-respond input[type='email'],
-.comment-respond input[type='url'],
-.comment-respond textarea {
-  width: 100%;
-  padding: var(--spacing-2);
-  border: 1px solid var(--color-base);
-  background-color: var(--color-base-3);
-  color: var(--color-text);
-  font-family: var(--font-body);
-  font-size: var(--fontSize-1);
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false
 }
 
-.comment-respond input[type='text']:focus-visible,
-.comment-respond input[type='email']:focus-visible,
-.comment-respond input[type='url']:focus-visible,
-.comment-respond textarea:focus-visible {
-  outline: 2px solid var(--color-primary);
-  outline-offset: -1px;
-  border-color: var(--color-primary);
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
 }
 
-.comment-respond textarea {
-  min-height: 8rem;
-  resize: vertical;
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false
 }
 
-.comment-respond .form-submit button,
-.comment-respond .form-submit input[type='submit'] {
-  padding: var(--spacing-2) var(--spacing-6);
-  border: none;
-  background-color: var(--color-primary);
-  color: var(--color-body);
-  font-family: var(--font-heading);
-  font-size: var(--fontSize-1);
-  cursor: pointer;
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
 }
 
-.comment-respond .form-submit button:hover,
-.comment-respond .form-submit button:focus-visible,
-.comment-respond .form-submit input[type='submit']:hover,
-.comment-respond .form-submit input[type='submit']:focus-visible {
-  opacity: 0.85;
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false
 }
 
-/* What a form says back: the thank-you after a submission, the message about
-   one that was refused, and what a reader is answering. */
-
-.comment-notice,
-.comment-error,
-.contact-notice,
-.contact-error {
-  margin: 0 0 var(--spacing-4);
-  padding: var(--spacing-2) var(--spacing-3);
-  border-inline-start: var(--spacing-1) solid var(--color-secondary);
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
 }
 
-.comment-error,
-.contact-error {
-  border-inline-start-color: var(--color-error);
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false
 }
 
-.comment-replying-to,
-.comment-signed-in {
-  margin: 0 0 var(--spacing-4);
-  font-family: var(--font-heading);
-  font-size: var(--fontSize-0);
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
 }
 
-.comment-optional,
-.contact-optional {
-  font-size: var(--fontSize-0);
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
 }
 
-.comment-hint,
-.contact-hint,
-.comment-field-error,
-.contact-field-error {
-  display: block;
-  margin-top: var(--spacing-1);
-  font-size: var(--fontSize-0);
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
 }
 
-.comment-field-error,
-.contact-field-error {
-  color: var(--color-error);
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
 }
 
-/*
-  The honeypot. Taken out of the flow rather than `display: none`, because some
-  form fillers skip fields a browser would not paint at all and this one is
-  meant to be filled in.
-*/
-.comment-trap,
-.contact-trap {
-  position: absolute;
-  left: -10000px;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
 }
 
-/* Media queries */
-
-@media (max-width: 42rem) {
-  .bio {
-    flex-direction: column;
-  }
-
-  .bio-avatar {
-    margin-right: var(--spacing-0);
-    margin-bottom: var(--spacing-4);
-  }
-
-  blockquote {
-    margin-left: var(--spacing-0);
-    padding: var(--spacing-0) var(--spacing-0) var(--spacing-0) var(--spacing-4);
-  }
-
-  ul,
-  ol {
-    list-style-position: inside;
-  }
-
-  .comment-list .children {
-    margin-left: var(--spacing-4);
-  }
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
 }