diff --git a/src/client/theme-default/styles/base.css b/src/client/theme-default/styles/base.css
index e8e4f9e4..ca379eb1 100644
--- a/src/client/theme-default/styles/base.css
+++ b/src/client/theme-default/styles/base.css
@@ -1,54 +1,40 @@
 @layer __vitepress_base {
-  @media (prefers-reduced-motion: reduce) {
-    *,
-    ::before,
-    ::after {
-      animation-delay: -1ms !important;
-      animation-duration: 1ms !important;
-      animation-iteration-count: 1 !important;
-      background-attachment: initial !important;
-      scroll-behavior: auto !important;
-      transition-duration: 0s !important;
-      transition-delay: 0s !important;
-    }
-  }
+  /* #region Tailwind Preflight */
+
+  /* Based on https://github.com/tailwindlabs/tailwindcss/blob/e48c5e80473c25fe5a27fe267fbaf4f6512424a3/packages/tailwindcss/preflight.css,
+     with the `--theme()` references replaced by vitepress variables, and `bolder` replaced by `600` */
 
   *,
+  ::after,
   ::before,
-  ::after {
+  ::backdrop,
+  ::file-selector-button {
     box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
   }
 
-  html {
-    line-height: 1.4;
-    font-size: 16px;
+  html,
+  :host {
+    line-height: 1.5;
     -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(--vp-font-family-base);
+    font-feature-settings: normal;
+    font-variation-settings: normal;
+    -webkit-tap-highlight-color: transparent;
   }
 
-  html.dark {
-    color-scheme: dark;
-  }
-
-  body {
-    margin: 0;
-    width: 100%;
-    min-width: 320px;
-    min-height: 100vh;
-    line-height: 24px;
-    font-family: var(--vp-font-family-base);
-    font-size: 16px;
-    font-weight: 400;
-    color: var(--vp-c-text-1);
-    background-color: var(--vp-c-bg);
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-autospace: normal;
-    text-spacing-trim: normal;
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
   }
 
-  main {
-    display: block;
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
   }
 
   h1,
@@ -57,70 +43,73 @@
   h4,
   h5,
   h6 {
-    margin: 0;
-    line-height: 24px;
-    font-size: 16px;
-    font-weight: 400;
+    font-size: inherit;
+    font-weight: inherit;
   }
 
-  p {
-    margin: 0;
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
   }
 
-  strong,
-  b {
+  b,
+  strong {
     font-weight: 600;
   }
 
-  /**
-     * Avoid 300ms click delay on touch devices that support the `touch-action`
-     * CSS property.
-     *
-     * In particular, unlike most other browsers, IE11+Edge on Windows 10 on
-     * touch devices and IE Mobile 10-11 DON'T remove the click delay when
-     * `<meta name="viewport" content="width=device-width">` is present.
-     * However, they DO support removing the click delay via
-     * `touch-action: manipulation`.
-     *
-     * See:
-     * - http://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
-     * - http://caniuse.com/#feat=css-touch-action
-     * - http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
-     */
-  a,
-  area,
-  button,
-  [role='button'],
-  input,
-  label,
-  select,
-  summary,
-  textarea {
-    touch-action: manipulation;
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: var(--vp-font-family-mono);
+    font-feature-settings: normal;
+    font-variation-settings: normal;
+    font-size: 1em;
   }
 
-  a {
-    color: inherit;
-    text-decoration: inherit;
+  small {
+    font-size: 80%;
   }
 
-  ol,
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
   }
 
-  blockquote {
-    margin: 0;
+  sub {
+    bottom: -0.25em;
   }
 
-  pre,
-  code,
-  kbd,
-  samp {
-    font-family: var(--vp-font-family-mono);
-    text-autospace: no-autospace;
+  sup {
+    top: -0.5em;
+  }
+
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+
+  :-moz-focusring:where(:not(iframe)) {
+    outline: auto;
+  }
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  summary {
+    display: list-item;
+  }
+
+  ol,
+  ul,
+  menu {
+    list-style: none;
   }
 
   img,
@@ -134,10 +123,6 @@
     display: block;
   }
 
-  figure {
-    margin: 0;
-  }
-
   img,
   video {
     max-width: 100%;
@@ -146,87 +131,171 @@
 
   button,
   input,
-  optgroup,
   select,
-  textarea {
-    border: 0;
-    padding: 0;
-    line-height: inherit;
+  optgroup,
+  textarea,
+  ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
     color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
   }
 
-  button {
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: 600;
+  }
+
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+
+  ::placeholder {
+    opacity: 1;
+  }
+
+  @supports (not (-webkit-appearance: -apple-pay-button)) or
+    (contain-intrinsic-size: 1px) {
+    ::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;
-    font-family: inherit;
-    background-color: transparent;
-    background-image: none;
   }
 
-  button:enabled,
-  [role='button']:enabled {
-    cursor: pointer;
+  ::-webkit-datetime-edit,
+  ::-webkit-datetime-edit-year-field,
+  ::-webkit-datetime-edit-month-field,
+  ::-webkit-datetime-edit-day-field,
+  ::-webkit-datetime-edit-hour-field,
+  ::-webkit-datetime-edit-minute-field,
+  ::-webkit-datetime-edit-second-field,
+  ::-webkit-datetime-edit-millisecond-field,
+  ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
   }
 
-  button:focus,
-  button:focus-visible {
-    outline: 1px dotted;
-    outline: 4px auto -webkit-focus-ring-color;
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
   }
 
-  button:focus:not(:focus-visible) {
-    outline: none !important;
+  :-moz-ui-invalid {
+    box-shadow: none;
   }
 
-  input:focus,
-  textarea:focus,
-  select:focus {
-    outline: none;
+  button,
+  input:where([type='button'], [type='reset'], [type='submit']),
+  ::file-selector-button {
+    appearance: button;
   }
 
-  table {
-    border-collapse: collapse;
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button {
+    height: auto;
   }
 
-  input {
-    background-color: transparent;
+  [hidden]:where(:not([hidden='until-found'])) {
+    display: none !important;
   }
 
-  input:-ms-input-placeholder,
-  textarea:-ms-input-placeholder {
-    color: var(--vp-c-text-3);
+  /* #endregion */
+
+  /* #region VitePress Overrides */
+
+  /* https://web.dev/articles/prefers-reduced-motion#bonus_forcing_reduced_motion_on_all_websites */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    ::before,
+    ::after {
+      animation-delay: -1ms !important;
+      animation-duration: 1ms !important;
+      animation-iteration-count: 1 !important;
+      background-attachment: initial !important;
+      scroll-behavior: auto !important;
+      transition-duration: 0s !important;
+      transition-delay: 0s !important;
+    }
   }
 
-  input::-ms-input-placeholder,
-  textarea::-ms-input-placeholder {
-    color: var(--vp-c-text-3);
+  :root {
+    /* FIXME: pins rem-sized bits while the theme is px-based - remove when
+       moving to relative units (#570) */
+    font-size: 16px;
+
+    &:is(.dark) {
+      color-scheme: dark;
+    }
+    &:not(.dark) {
+      color-scheme: light;
+    }
   }
 
-  input::placeholder,
-  textarea::placeholder {
-    color: var(--vp-c-text-3);
+  body {
+    /* FIXME: unlike html's unitless 1.5, this is inherited as-is by elements
+       with other font sizes - make unitless with #570 */
+    line-height: 24px;
+    color: var(--vp-c-text-1);
+    background-color: var(--vp-c-bg);
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-autospace: normal;
+    text-spacing-trim: normal;
   }
 
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
+  pre,
+  code,
+  kbd,
+  samp {
+    text-autospace: no-autospace;
   }
 
-  input[type='number'] {
-    -moz-appearance: textfield;
+  button:enabled,
+  [role='button']:enabled {
+    cursor: pointer;
   }
 
-  textarea {
-    resize: vertical;
+  button:focus,
+  input:focus,
+  textarea:focus,
+  select:focus {
+    outline: none;
   }
 
-  select {
-    -webkit-appearance: none;
+  button:focus-visible {
+    outline: 1px dotted;
+    outline: 4px auto -webkit-focus-ring-color;
   }
 
-  fieldset {
-    margin: 0;
-    padding: 0;
+  input::placeholder,
+  textarea::placeholder {
+    color: var(--vp-c-text-3);
   }
 
   h1,
@@ -240,22 +309,6 @@
     overflow-wrap: break-word;
   }
 
-  sub,
-  sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-
-  sub {
-    bottom: -0.25em;
-  }
-
-  sup {
-    top: -0.5em;
-  }
-
   vite-error-overlay {
     z-index: 9999;
   }
@@ -268,4 +321,6 @@
     display: inline-block;
     margin: auto;
   }
+
+  /* #endregion */
 }