diff --git a/.prettierrc.json b/.prettierrc.json
index da85980..67795a7 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -38,5 +38,5 @@
     "^.+\\.css$"
   ],
   "importOrderParserPlugins": ["typescript", "jsx"],
-  "importOrderTypeScriptVersion": "5.7.0"
+  "importOrderTypeScriptVersion": "6.0.3"
 }
diff --git a/LICENSE b/LICENSE
deleted file mode 100644
index 8efc47a..0000000
--- a/LICENSE
+++ /dev/null
@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) Thinkmill Labs Pty Ltd
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
diff --git a/astro.config.mjs b/astro.config.mjs
index 121f3d6..2e0871b 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -6,7 +6,6 @@ import markdoc from '@astrojs/markdoc'
 import node from '@astrojs/node'
 import react from '@astrojs/react'
 
-// https://astro.build/config
 export default defineConfig({
   site: 'https://dave-dmg.de',
   integrations: [react(), markdoc(), keystatic()],
diff --git a/package.json b/package.json
index eab170c..ab195b5 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,6 @@
   "name": "dave-dmg",
   "version": "0.0.1",
   "private": true,
-  "license": "MIT",
   "type": "module",
   "scripts": {
     "build": "astro build",
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 6be5c99..3536b6d 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -27,7 +27,7 @@ const { title, description } = Astro.props
     <Font cssVariable="--font-julia-mono" preload />
     <Font cssVariable="--font-unigrim" />
   </head>
-  <body>
+  <body class="ui">
     <slot />
   </body>
 </html>
diff --git a/src/styles/base/colors.css b/src/styles/base/colors.css
index 735bfa2..0a8bd86 100644
--- a/src/styles/base/colors.css
+++ b/src/styles/base/colors.css
@@ -1,112 +1,114 @@
-:root {
-  /* === PALETTE === */
+@layer tokens {
+  :root {
+    /* === PALETTE === */
 
-  /* == Ink == */
-  --color-palette-black-ink: oklch(21.9% 0.006 286deg);
-  --color-palette-charcoal: oklch(26.6% 0.008 240deg);
-  --color-palette-slate: oklch(33.7% 0.019 267deg);
-  --color-palette-graphite: oklch(40% 0.005 89deg);
+    /* == Ink == */
+    --color-palette-black-ink: oklch(21.9% 0.006 286deg);
+    --color-palette-charcoal: oklch(26.6% 0.008 240deg);
+    --color-palette-slate: oklch(33.7% 0.019 267deg);
+    --color-palette-graphite: oklch(40% 0.005 89deg);
 
-  /* == Stock == */
-  --color-palette-ash: oklch(51% 0.008 85deg);
-  --color-palette-stone: oklch(64% 0.01 84deg);
-  --color-palette-sand: oklch(74% 0.01 83deg);
-  --color-palette-bone: oklch(83% 0.01 82deg);
-  --color-palette-parchment: oklch(89% 0.009 82deg);
-  --color-palette-stock: oklch(94.5% 0.008 83deg);
-  --color-palette-cream: oklch(97% 0.006 84deg);
-  --color-palette-paper: oklch(98.8% 0.005 85deg);
+    /* == Stock == */
+    --color-palette-ash: oklch(51% 0.008 85deg);
+    --color-palette-stone: oklch(64% 0.01 84deg);
+    --color-palette-sand: oklch(74% 0.01 83deg);
+    --color-palette-bone: oklch(83% 0.01 82deg);
+    --color-palette-parchment: oklch(89% 0.009 82deg);
+    --color-palette-stock: oklch(94.5% 0.008 83deg);
+    --color-palette-cream: oklch(97% 0.006 84deg);
+    --color-palette-paper: oklch(98.8% 0.005 85deg);
 
-  /* == Accents == */
-  --color-palette-lava: oklch(63.6% 0.193 17.075deg);
-  --color-palette-lime-green: oklch(74.6% 0.18 129.939deg);
-  --color-palette-bright-canary: oklch(89% 0.157 97.726deg);
-  --color-palette-cerise: oklch(60.7% 0.23 18.554deg);
-  --color-palette-persimmon: oklch(68.6% 0.179 40.01deg);
-  --color-palette-royal-blue: oklch(46.1% 0.07 245.64deg);
-  --color-palette-fuchsia: oklch(49.6% 0.181 351.176deg);
+    /* == Accents == */
+    --color-palette-lava: oklch(63.6% 0.193 17.075deg);
+    --color-palette-lime-green: oklch(74.6% 0.18 129.939deg);
+    --color-palette-bright-canary: oklch(89% 0.157 97.726deg);
+    --color-palette-cerise: oklch(60.7% 0.23 18.554deg);
+    --color-palette-persimmon: oklch(68.6% 0.179 40.01deg);
+    --color-palette-royal-blue: oklch(46.1% 0.07 245.64deg);
+    --color-palette-fuchsia: oklch(49.6% 0.181 351.176deg);
 
-  /* === SEMANTICS === */
+    /* === SEMANTICS === */
 
-  /* == Roles == */
-  --color-primary: var(--color-palette-lava);
-  --color-primary-emphasis: oklch(from var(--color-primary) calc(l - 0.15) c h);
-  --color-secondary: var(--color-palette-lime-green);
-  --color-secondary-emphasis: oklch(from var(--color-secondary) calc(l - 0.15) c h);
-  --color-tertiary: var(--color-palette-bright-canary);
-  --color-tertiary-emphasis: oklch(from var(--color-tertiary) calc(l - 0.15) c h);
+    /* == Roles == */
+    --color-primary: var(--color-palette-lava);
+    --color-primary-emphasis: oklch(from var(--color-primary) calc(l - 0.15) c h);
+    --color-secondary: var(--color-palette-lime-green);
+    --color-secondary-emphasis: oklch(from var(--color-secondary) calc(l - 0.15) c h);
+    --color-tertiary: var(--color-palette-bright-canary);
+    --color-tertiary-emphasis: oklch(from var(--color-tertiary) calc(l - 0.15) c h);
 
-  /* == Text == */
-  --color-text-primary: var(--color-palette-black-ink);
-  --color-text-secondary: var(--color-palette-charcoal);
-  --color-text-tertiary: var(--color-palette-slate);
-  --color-text-quarternary: var(--color-palette-graphite);
-  --color-text-quiet: var(--color-palette-ash);
-  --color-text-disabled: var(--color-palette-stone);
-  --color-text-inverse: var(--color-palette-paper);
+    /* == Text == */
+    --color-text-primary: var(--color-palette-black-ink);
+    --color-text-secondary: var(--color-palette-charcoal);
+    --color-text-tertiary: var(--color-palette-slate);
+    --color-text-quarternary: var(--color-palette-graphite);
+    --color-text-quiet: var(--color-palette-ash);
+    --color-text-disabled: var(--color-palette-stone);
+    --color-text-inverse: var(--color-palette-paper);
 
-  /* == Surfaces == */
-  --color-surface-base: var(--color-palette-stock);
-  --color-surface-elevated-1: var(--color-palette-paper);
-  --color-surface-elevated-2: var(--color-palette-cream);
-  --color-surface-elevated-3: var(--color-palette-parchment);
-  --color-surface-inverse: var(--color-palette-black-ink);
-  --color-surface-selected: var(--color-palette-paper);
-  --color-surface-hover: var(--color-palette-cream);
+    /* == Surfaces == */
+    --color-surface-base: var(--color-palette-stock);
+    --color-surface-elevated-1: var(--color-palette-paper);
+    --color-surface-elevated-2: var(--color-palette-cream);
+    --color-surface-elevated-3: var(--color-palette-parchment);
+    --color-surface-inverse: var(--color-palette-black-ink);
+    --color-surface-selected: var(--color-palette-paper);
+    --color-surface-hover: var(--color-palette-cream);
 
-  /* == Borders == */
-  --color-border-hairline: var(--color-palette-parchment);
-  --color-border-subtle: var(--color-palette-bone);
-  --color-border-normal: var(--color-palette-sand);
-  --color-border-strong: var(--color-palette-black-ink);
+    /* == Borders == */
+    --color-border-hairline: var(--color-palette-parchment);
+    --color-border-subtle: var(--color-palette-bone);
+    --color-border-normal: var(--color-palette-sand);
+    --color-border-strong: var(--color-palette-black-ink);
 
-  /* == States == */
-  --color-state-error: var(--color-palette-cerise);
-  --color-state-warning: var(--color-palette-persimmon);
-  --color-state-success: var(--color-palette-lime-green);
-  --color-state-info: var(--color-palette-royal-blue);
+    /* == States == */
+    --color-state-error: var(--color-palette-cerise);
+    --color-state-warning: var(--color-palette-persimmon);
+    --color-state-success: var(--color-palette-lime-green);
+    --color-state-info: var(--color-palette-royal-blue);
 
-  /* == Links == */
-  --color-text-link: var(--color-primary);
-  --color-text-link-hover: var(--color-primary-emphasis);
-  --color-text-link-visited: var(--color-palette-fuchsia);
+    /* == Links == */
+    --color-text-link: var(--color-primary);
+    --color-text-link-hover: var(--color-primary-emphasis);
+    --color-text-link-visited: var(--color-palette-fuchsia);
 
-  /* == Focus == */
-  --color-focus-ring: var(--color-primary);
+    /* == Focus == */
+    --color-focus-ring: var(--color-primary);
 
-  /* == Apparatus == */
-  --color-unfilled-block: var(--color-palette-sand);
-  --color-unfilled-line: var(--color-palette-bone);
-  --color-plate: var(--color-palette-stone);
-  --color-rule: var(--color-palette-bone);
-  --color-rule-strong: var(--color-palette-black-ink);
+    /* == Apparatus == */
+    --color-unfilled-block: var(--color-palette-sand);
+    --color-unfilled-line: var(--color-palette-bone);
+    --color-plate: var(--color-palette-stone);
+    --color-rule: var(--color-palette-bone);
+    --color-rule-strong: var(--color-palette-black-ink);
 
-  /* == Dice & Receipts == */
-  --color-dice-surface: var(--color-surface-inverse);
-  --color-dice-text: var(--color-text-inverse);
-  --color-receipt: var(--color-text-quiet);
+    /* == Dice & Receipts == */
+    --color-dice-surface: var(--color-surface-inverse);
+    --color-dice-text: var(--color-text-inverse);
+    --color-receipt: var(--color-text-quiet);
 
-  /* == Scale Tier == */
-  --color-tier-active-surface: var(--color-palette-paper);
-  --color-tier-active-text: var(--color-text-primary);
-  --color-tier-idle-surface: var(--color-palette-cream);
-  --color-tier-idle-text: var(--color-text-quiet);
-  --color-tier-locked-text: var(--color-text-disabled);
-  --color-tier-marker: var(--color-primary);
+    /* == Scale Tier == */
+    --color-tier-active-surface: var(--color-palette-paper);
+    --color-tier-active-text: var(--color-text-primary);
+    --color-tier-idle-surface: var(--color-palette-cream);
+    --color-tier-idle-text: var(--color-text-quiet);
+    --color-tier-locked-text: var(--color-text-disabled);
+    --color-tier-marker: var(--color-primary);
 
-  /* == Overlays == */
-  --color-overlay-light: oklch(21.9% 0.006 285.911deg / 8%);
-  --color-overlay-medium: oklch(21.9% 0.006 285.911deg / 30%);
-  --color-overlay-heavy: oklch(21.9% 0.006 285.911deg / 60%);
+    /* == Overlays == */
+    --color-overlay-light: oklch(21.9% 0.006 285.911deg / 8%);
+    --color-overlay-medium: oklch(21.9% 0.006 285.911deg / 30%);
+    --color-overlay-heavy: oklch(21.9% 0.006 285.911deg / 60%);
 
-  /* == Shadow == */
-  --shadow-card: var(--size-1) var(--size-1) 0 var(--color-palette-black-ink);
-  --shadow-raised: var(--size-2) var(--size-2) 0 var(--color-palette-black-ink);
-  --shadow-derived: var(--size-1) var(--size-1) 0 var(--color-tertiary);
-  --shadow-pressed: 0 0 0 var(--color-palette-black-ink);
+    /* == Shadow == */
+    --shadow-card: var(--size-1) var(--size-1) 0 var(--color-palette-black-ink);
+    --shadow-raised: var(--size-2) var(--size-2) 0 var(--color-palette-black-ink);
+    --shadow-derived: var(--size-1) var(--size-1) 0 var(--color-tertiary);
+    --shadow-pressed: 0 0 0 var(--color-palette-black-ink);
 
-  /* == Utility == */
-  --color-highlight: var(--color-tertiary);
-  --color-skeleton-base: var(--color-surface-elevated-2);
-  --color-skeleton-shimmer: var(--color-surface-elevated-1);
+    /* == Utility == */
+    --color-highlight: var(--color-tertiary);
+    --color-skeleton-base: var(--color-surface-elevated-2);
+    --color-skeleton-shimmer: var(--color-surface-elevated-1);
+  }
 }
diff --git a/src/styles/base/foundation.css b/src/styles/base/foundation.css
index 8a3bd6a..d395a45 100644
--- a/src/styles/base/foundation.css
+++ b/src/styles/base/foundation.css
@@ -1,12 +1,12 @@
 @layer reset {
   /*
-Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/preflight)
-*/
+  Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/preflight)
+  */
 
   /*
-  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
-  2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
-  */
+    1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+    2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+    */
 
   *,
   ::before,
@@ -17,11 +17,11 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
   }
 
   /*
-  1. Use a consistent sensible line-height in all browsers.
-  2. Prevent adjustments of font size after orientation changes in iOS.
-  3. Use a more readable tab size.
-  4. Use the system's `sans` font-family by default.
-  */
+    1. Use a consistent sensible line-height in all browsers.
+    2. Prevent adjustments of font size after orientation changes in iOS.
+    3. Use a more readable tab size.
+    4. Use the system's `sans` font-family by default.
+    */
 
   html {
     font-family:
@@ -45,9 +45,9 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
   }
 
   /*
-  1. Remove the margin in all browsers.
-  2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
-  */
+    1. Remove the margin in all browsers.
+    2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+    */
 
   body {
     margin: 0; /* 1 */
@@ -55,10 +55,10 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
   }
 
   /*
-  1. Add the correct height in Firefox.
-  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
-  3. Ensure horizontal rules are visible by default.
-  */
+    1. Add the correct height in Firefox.
+    2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+    3. Ensure horizontal rules are visible by default.
+    */
 
   hr {
     height: 0; /* 1 */
@@ -67,16 +67,16 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
   }
 
   /*
-  Add the correct text decoration in Chrome, Edge, and Safari.
-  */
+    Add the correct text decoration in Chrome, Edge, and Safari.
+    */
 
   abbr:where([title]) {
     text-decoration: underline dotted;
   }
 
   /*
-  Remove the default font size and weight for headings.
-  */
+    Remove the default font size and weight for headings.
+    */
 
   h1,
   h2,
@@ -89,8 +89,8 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
   }
 
   /*
-  Reset links to optimize for opt-in styling instead of opt-out.
-  */
+    Reset links to optimize for opt-in styling instead of opt-out.
+    */
 
   a {
     color: inherit;
@@ -98,8 +98,8 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
   }
 
   /*
-  Add the correct font weight in Edge and Safari.
-  */
+    Add the correct font weight in Edge and Safari.
+    */
 
   b,
   strong {
@@ -107,9 +107,9 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
   }
 
   /*
-  1. Use the system's `mono` font family by default.
-  2. Correct the odd `em` font sizing in all browsers.
-  */
+    1. Use the system's `mono` font family by default.
+    2. Correct the odd `em` font sizing in all browsers.
+    */
 
   code,
   kbd,
@@ -122,16 +122,16 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
   }
 
   /*
-  Add the correct font size in all browsers.
-  */
+    Add the correct font size in all browsers.
+    */
 
   small {
     font-size: 80%;
   }
 
   /*
-  Prevent `sub` and `sup` elements from affecting the line height in all browsers.
-  */
+    Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+    */
 
   sub,
   sup {
@@ -150,10 +150,10 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
   }
 
   /*
-  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
-  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
-  3. Remove gaps between table borders by default.
-  */
+    1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+    2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+    3. Remove gaps between table borders by default.
+    */
 
   table {
     border-collapse: collapse; /* 3 */
@@ -162,10 +162,10 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
   }
 
   /*
-  1. Change the font styles in all browsers.
-  2. Remove the margin in Firefox and Safari.
-  3. Remove default padding in all browsers.
-  */
+    1. Change the font styles in all browsers.
+    2. Remove the margin in Firefox and Safari.
+    3. Remove default padding in all browsers.
+    */
 
   button,
   input,
@@ -183,8 +183,8 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
   }
 
   /*
-  Remove the inheritance of text transform in Edge and Firefox.
-  */
+    Remove the inheritance of text transform in Edge and Firefox.
+    */
 
   button,
   select {
@@ -192,9 +192,9 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
   }
 
   /*
-  1. Correct the inability to style clickable types in iOS and Safari.
-  2. Remove default button styles.
-  */
+    1. Correct the inability to style clickable types in iOS and Safari.
+    2. Remove default button styles.
+    */
 
   button,
   [type="button"],
@@ -206,32 +206,32 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
   }
 
   /*
-  Use the modern Firefox focus style for all focusable elements.
-  */
+    Use the modern Firefox focus style for all focusable elements.
+    */
 
   :-moz-focusring {
     outline: auto;
   }
 
   /*
-  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
-  */
+    Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+    */
 
   :-moz-ui-invalid {
     box-shadow: none;
   }
 
   /*
-  Add the correct vertical alignment in Chrome and Firefox.
-  */
+    Add the correct vertical alignment in Chrome and Firefox.
+    */
 
   progress {
     vertical-align: baseline;
   }
 
   /*
-  Correct the cursor style of increment and decrement buttons in Safari.
-  */
+    Correct the cursor style of increment and decrement buttons in Safari.
+    */
 
   ::-webkit-inner-spin-button,
   ::-webkit-outer-spin-button {
@@ -239,9 +239,9 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
   }
 
   /*
-  1. Correct the odd appearance in Chrome and Safari.
-  2. Correct the outline style in Safari.
-  */
+    1. Correct the odd appearance in Chrome and Safari.
+    2. Correct the outline style in Safari.
+    */
 
   [type="search"] {
     appearance: textfield; /* 1 */
@@ -249,17 +249,17 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
   }
 
   /*
-  Remove the inner padding in Chrome and Safari on macOS.
-  */
+    Remove the inner padding in Chrome and Safari on macOS.
+    */
 
   ::-webkit-search-decoration {
     appearance: none;
   }
 
   /*
-  1. Correct the inability to style clickable types in iOS and Safari.
-  2. Change font properties to `inherit` in Safari.
-  */
+    1. Correct the inability to style clickable types in iOS and Safari.
+    2. Change font properties to `inherit` in Safari.
+    */
 
   ::-webkit-file-upload-button {
     font: inherit; /* 2 */
@@ -267,16 +267,16 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
   }
 
   /*
-  Add the correct display in Chrome and Safari.
-  */
+    Add the correct display in Chrome and Safari.
+    */
 
   summary {
     display: list-item;
   }
 
   /*
-  Removes the default spacing and border for appropriate elements.
-  */
+    Removes the default spacing and border for appropriate elements.
+    */
 
   blockquote,
   dl,
@@ -312,16 +312,16 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
   }
 
   /*
-  Prevent resizing textareas horizontally by default.
-  */
+    Prevent resizing textareas horizontally by default.
+    */
 
   textarea {
     resize: vertical;
   }
 
   /*
-  1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
-  */
+    1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+    */
 
   input::placeholder,
   textarea::placeholder {
@@ -329,8 +329,8 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
   }
 
   /*
-  Set the default cursor for buttons.
-  */
+    Set the default cursor for buttons.
+    */
 
   button,
   [role="button"] {
@@ -338,18 +338,18 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
   }
 
   /*
-  Make sure disabled buttons don't get the pointer cursor.
-  */
+    Make sure disabled buttons don't get the pointer cursor.
+    */
 
   :disabled {
     cursor: default;
   }
 
   /*
-  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
-  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
-     This can trigger a poorly considered lint error in some tools but is included by design.
-  */
+    1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+    2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+       This can trigger a poorly considered lint error in some tools but is included by design.
+    */
 
   img,
   svg,
@@ -364,8 +364,8 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
   }
 
   /*
-  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
-  */
+    Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+    */
 
   img,
   video {
@@ -374,8 +374,8 @@ Foundation inspired by Tailwind CSS Preflight. (https://tailwindcss.com/docs/pre
   }
 
   /*
-  Make elements with the HTML hidden attribute stay hidden by default.
-  */
+    Make elements with the HTML hidden attribute stay hidden by default.
+    */
 
   [hidden] {
     display: none;
diff --git a/src/styles/base/primitives.css b/src/styles/base/primitives.css
index 247580e..49fa0ba 100644
--- a/src/styles/base/primitives.css
+++ b/src/styles/base/primitives.css
@@ -1,200 +1,202 @@
-.ui {
-  /* == Font sizes == */
-  --type--3: 0.625rem; /* 10px */
-  --type--2: 0.6875rem; /* 11px */
-  --type--1: 0.75rem; /* 12px */
-  --type-0: 0.875rem; /* 14px — base */
-  --type-1: 1rem; /* 16px */
-  --type-2: 1.125rem; /* 18px */
-  --type-3: 1.25rem; /* 20px */
-  --type-4: 1.375rem; /* 22px */
-  --type-5: 1.5625rem; /* 25px */
-  --type-6: 1.75rem; /* 28px */
-  --type-7: 1.9375rem; /* 31px */
-  --type-8: 2.1875rem; /* 35px */
-  --type-9: 2.5rem; /* 40px */
-  --type-10: 2.75rem; /* 44px */
+@layer tokens {
+  .ui {
+    /* == Font sizes == */
+    --type--3: 0.625rem; /* 10px */
+    --type--2: 0.6875rem; /* 11px */
+    --type--1: 0.75rem; /* 12px */
+    --type-0: 0.875rem; /* 14px — base */
+    --type-1: 1rem; /* 16px */
+    --type-2: 1.125rem; /* 18px */
+    --type-3: 1.25rem; /* 20px */
+    --type-4: 1.375rem; /* 22px */
+    --type-5: 1.5625rem; /* 25px */
+    --type-6: 1.75rem; /* 28px */
+    --type-7: 1.9375rem; /* 31px */
+    --type-8: 2.1875rem; /* 35px */
+    --type-9: 2.5rem; /* 40px */
+    --type-10: 2.75rem; /* 44px */
 
-  /* == Line heights == */
-  --leading--3: 1.6;
-  --leading--2: 1.4545;
-  --leading--1: 1.6667;
-  --leading-0: 1.4286;
-  --leading-1: 1.5;
-  --leading-2: 1.3333;
-  --leading-3: 1.4;
-  --leading-4: 1.2727;
-  --leading-5: 1.28;
-  --leading-6: 1.2857;
-  --leading-7: 1.1613;
-  --leading-8: 1.1429;
-  --leading-9: 1.2;
-  --leading-10: 1.1818;
+    /* == Line heights == */
+    --leading--3: 1.6;
+    --leading--2: 1.4545;
+    --leading--1: 1.6667;
+    --leading-0: 1.4286;
+    --leading-1: 1.5;
+    --leading-2: 1.3333;
+    --leading-3: 1.4;
+    --leading-4: 1.2727;
+    --leading-5: 1.28;
+    --leading-6: 1.2857;
+    --leading-7: 1.1613;
+    --leading-8: 1.1429;
+    --leading-9: 1.2;
+    --leading-10: 1.1818;
 
-  /* == Letter spacing == */
-  --tracking--3: 0.012em;
-  --tracking--2: 0.0082em;
-  --tracking--1: 0.005em;
-  --tracking-0: 0em;
-  --tracking-1: -0.0037em;
-  --tracking-2: -0.0067em;
-  --tracking-3: -0.009em;
-  --tracking-4: -0.0109em;
-  --tracking-5: -0.0132em;
-  --tracking-6: -0.015em;
-  --tracking-7: -0.0165em;
-  --tracking-8: -0.018em;
-  --tracking-9: -0.0195em;
-  --tracking-10: -0.0205em;
+    /* == Letter spacing == */
+    --tracking--3: 0.012em;
+    --tracking--2: 0.0082em;
+    --tracking--1: 0.005em;
+    --tracking-0: 0em;
+    --tracking-1: -0.0037em;
+    --tracking-2: -0.0067em;
+    --tracking-3: -0.009em;
+    --tracking-4: -0.0109em;
+    --tracking-5: -0.0132em;
+    --tracking-6: -0.015em;
+    --tracking-7: -0.0165em;
+    --tracking-8: -0.018em;
+    --tracking-9: -0.0195em;
+    --tracking-10: -0.0205em;
 
-  /* == Prose leading == */
-  --leading-prose: 1.7;
-  --leading-prose-tight: 1.6;
+    /* == Prose leading == */
+    --leading-prose: 1.7;
+    --leading-prose-tight: 1.6;
 
-  /* == Chrome tracking == */
-  --tracking-label: 0.14em; /* step labels, buttons */
-  --tracking-tag: 0.12em; /* tags */
-  --tracking-eyebrow: 0.16em; /* section eyebrows, zone labels */
-  --tracking-plate: 0.08em; /* plate numbers */
-  --tracking-display: 0.01em; /* Blaka h1 */
-}
-
-.content {
-  /* == Font sizes == */
-  --type--3: 0.625em;
-  --type--2: 0.6875em;
-  --type--1: 0.8125em;
-  --type-0: 1em; /* 16px — base */
-  --type-1: 1.1875em;
-  --type-2: 1.4375em;
-  --type-3: 1.6875em;
-  --type-4: 2em;
-  --type-5: 2.375em;
-  --type-6: 2.8125em;
-  --type-7: 3.375em;
-  --type-8: 4em;
-  --type-9: 4.75em;
-  --type-10: 5.6875em;
-
-  /* == Line heights == */
-  --leading--3: 2;
-  --leading--2: 1.8182;
-  --leading--1: 1.5385;
-  --leading-0: 1.5;
-  --leading-1: 1.4737;
-  --leading-2: 1.3912;
-  --leading-3: 1.3333;
-  --leading-4: 1.25;
-  --leading-5: 1.2632;
-  --leading-6: 1.1556;
-  --leading-7: 1.1852;
-  --leading-8: 1.125;
-  --leading-9: 1.1053;
-  --leading-10: 1.0989;
-
-  /* == Letter spacing == */
-  --tracking--3: 0.018em;
-  --tracking--2: 0.0136em;
-  --tracking--1: 0.0069em;
-  --tracking-0: 0em;
-  --tracking-1: -0.0047em;
-  --tracking-2: -0.0091em;
-  --tracking-3: -0.0122em;
-  --tracking-4: -0.015em;
-  --tracking-5: -0.0174em;
-  --tracking-6: -0.0193em;
-  --tracking-7: -0.0211em;
-  --tracking-8: -0.0225em;
-  --tracking-9: -0.0237em;
-  --tracking-10: -0.0247em;
-  --leading-prose: 1.6;
-}
-
-:root {
-  /* === FONT FAMILIES == */
-  --font-display: var(--font-blaka), serif;
-  --font-header: var(--font-geist), sans-serif;
-  --font-body: var(--font-julia-mono), monospace;
-  --font-mono: var(--font-geist-mono), monospace;
-  --font-symbols: var(--font-unigrim), monospace;
-  --font-weight-display: 400;
-  --font-weight-body: 400;
-  --font-weight-emphasis: 700;
-  --font-weight-label: 600;
-  --font-weight-heading: 800;
-
-  /* === SIZE === */
-  --size-0: 0;
-  --size-px: 0.0625rem; /* 1px */
-  --size-1: 0.125rem; /* 2px */
-  --size-2: 0.25rem; /* 4px */
-  --size-3: 0.375rem; /* 6px */
-  --size-4: 0.5rem; /* 8px */
-  --size-5: 0.625rem; /* 10px */
-  --size-6: 0.75rem; /* 12px */
-  --size-7: 0.875rem; /* 14px */
-  --size-8: 1rem; /* 16px */
-  --size-9: 1.25rem; /* 20px */
-  --size-10: 1.5rem; /* 24px */
-  --size-11: 2rem;
-  --size-12: 2.5rem;
-  --size-13: 3rem;
-  --size-14: 4rem;
-  --size-15: 5rem;
-  --size-16: 6rem;
-
-  /* === SPACING === */
-  --space-0: 0;
-  --space-px: 0.0625em;
-  --space-1: 0.125em;
-  --space-2: 0.25em;
-  --space-3: 0.375em;
-  --space-4: 0.5em;
-  --space-5: 0.625em;
-  --space-6: 0.75em;
-  --space-7: 0.875em;
-  --space-8: 1em;
-  --space-9: 1.25em;
-  --space-10: 1.5em;
-  --space-11: 2em;
-  --space-12: 2.5em;
-  --space-13: 3em;
-  --space-14: 4em;
-  --space-15: 5em;
-  --space-16: 6em;
-
-  /* === BORDER === */
-  --border-hairline: var(--size-px); /* 1px — inside a card */
-  --border-card: var(--size-1); /* 2px — the card edge */
-  --border-shell: var(--size-3); /* 6px?? no: see below */
-  --border-boundary: 0.1875rem; /* 3px — section / shell boundary */
-  --border-marker: var(--size-1); /* 2px — the tier row active marker */
-  --radius: 0; /* always. */
-
-  /* === FIXED SLOTS === */
-  --slot-sigil: var(--size-7); /* 14px — Unigrim Dee. RESERVED, empty. */
-  --slot-plate: 2.25rem; /* plate number column */
-  --slot-modifier: 1.125rem; /* the +2 / −1 column in contributions */
-  --slot-marker: var(--size-5); /* footnote marker column */
-  --slot-roll-range: 1.5rem; /* the 4–5 column in a table row */
-
-  /* ═══ MOTION ═══ */
-  --motion-fast: 150ms; /* state change: hover, focus, press */
-  --motion-normal: 300ms; /* reveals: chooser open, tier switch */
-  --motion-slow: 500ms;
-  --motion-instant: 0ms; /* roll results. Use this deliberately. */
-  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
-  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
-
-  /* ═══ LAYOUT ═══ */
-  --layout-max-width: 74rem; /* the tool shell */
-  --layout-content-width: minmax(0, 78ch); /* article measure */
-  --layout-margin-width: minmax(10ch, 1fr);
-  --layout-step-columns: 2;
-  --layout-gutter: var(--size-6); /* between step cards */
-  --layout-section-gap: var(--size-9); /* header to grid */
-  --layout-page-margin: var(--size-10);
-  --layout-tier-height: 2.25rem;
-  --layout-header-height: 3.125rem;
-  --layout-card-min-height: 6.5rem; /* stops grid reflow on resolve */
+    /* == Chrome tracking == */
+    --tracking-label: 0.14em; /* step labels, buttons */
+    --tracking-tag: 0.12em; /* tags */
+    --tracking-eyebrow: 0.16em; /* section eyebrows, zone labels */
+    --tracking-plate: 0.08em; /* plate numbers */
+    --tracking-display: 0.01em; /* Blaka h1 */
+  }
+
+  .content {
+    /* == Font sizes == */
+    --type--3: 0.625em;
+    --type--2: 0.6875em;
+    --type--1: 0.8125em;
+    --type-0: 1em; /* 16px — base */
+    --type-1: 1.1875em;
+    --type-2: 1.4375em;
+    --type-3: 1.6875em;
+    --type-4: 2em;
+    --type-5: 2.375em;
+    --type-6: 2.8125em;
+    --type-7: 3.375em;
+    --type-8: 4em;
+    --type-9: 4.75em;
+    --type-10: 5.6875em;
+
+    /* == Line heights == */
+    --leading--3: 2;
+    --leading--2: 1.8182;
+    --leading--1: 1.5385;
+    --leading-0: 1.5;
+    --leading-1: 1.4737;
+    --leading-2: 1.3912;
+    --leading-3: 1.3333;
+    --leading-4: 1.25;
+    --leading-5: 1.2632;
+    --leading-6: 1.1556;
+    --leading-7: 1.1852;
+    --leading-8: 1.125;
+    --leading-9: 1.1053;
+    --leading-10: 1.0989;
+
+    /* == Letter spacing == */
+    --tracking--3: 0.018em;
+    --tracking--2: 0.0136em;
+    --tracking--1: 0.0069em;
+    --tracking-0: 0em;
+    --tracking-1: -0.0047em;
+    --tracking-2: -0.0091em;
+    --tracking-3: -0.0122em;
+    --tracking-4: -0.015em;
+    --tracking-5: -0.0174em;
+    --tracking-6: -0.0193em;
+    --tracking-7: -0.0211em;
+    --tracking-8: -0.0225em;
+    --tracking-9: -0.0237em;
+    --tracking-10: -0.0247em;
+    --leading-prose: 1.6;
+  }
+
+  :root {
+    /* === FONT FAMILIES == */
+    --font-display: var(--font-blaka), serif;
+    --font-header: var(--font-geist), sans-serif;
+    --font-body: var(--font-julia-mono), monospace;
+    --font-mono: var(--font-geist-mono), monospace;
+    --font-symbols: var(--font-unigrim), monospace;
+    --font-weight-display: 400;
+    --font-weight-body: 400;
+    --font-weight-emphasis: 700;
+    --font-weight-label: 600;
+    --font-weight-heading: 800;
+
+    /* === SIZE === */
+    --size-0: 0;
+    --size-px: 0.0625rem; /* 1px */
+    --size-1: 0.125rem; /* 2px */
+    --size-2: 0.25rem; /* 4px */
+    --size-3: 0.375rem; /* 6px */
+    --size-4: 0.5rem; /* 8px */
+    --size-5: 0.625rem; /* 10px */
+    --size-6: 0.75rem; /* 12px */
+    --size-7: 0.875rem; /* 14px */
+    --size-8: 1rem; /* 16px */
+    --size-9: 1.25rem; /* 20px */
+    --size-10: 1.5rem; /* 24px */
+    --size-11: 2rem;
+    --size-12: 2.5rem;
+    --size-13: 3rem;
+    --size-14: 4rem;
+    --size-15: 5rem;
+    --size-16: 6rem;
+
+    /* === SPACING === */
+    --space-0: 0;
+    --space-px: 0.0625em;
+    --space-1: 0.125em;
+    --space-2: 0.25em;
+    --space-3: 0.375em;
+    --space-4: 0.5em;
+    --space-5: 0.625em;
+    --space-6: 0.75em;
+    --space-7: 0.875em;
+    --space-8: 1em;
+    --space-9: 1.25em;
+    --space-10: 1.5em;
+    --space-11: 2em;
+    --space-12: 2.5em;
+    --space-13: 3em;
+    --space-14: 4em;
+    --space-15: 5em;
+    --space-16: 6em;
+
+    /* === BORDER === */
+    --border-hairline: var(--size-px); /* 1px — inside a card */
+    --border-card: var(--size-1); /* 2px — the card edge */
+    --border-shell: var(--size-3); /* 6px?? no: see below */
+    --border-boundary: 0.1875rem; /* 3px — section / shell boundary */
+    --border-marker: var(--size-1); /* 2px — the tier row active marker */
+    --radius: 0; /* always. */
+
+    /* === FIXED SLOTS === */
+    --slot-sigil: var(--size-7); /* 14px — Unigrim Dee. RESERVED, empty. */
+    --slot-plate: 2.25rem; /* plate number column */
+    --slot-modifier: 1.125rem; /* the +2 / −1 column in contributions */
+    --slot-marker: var(--size-5); /* footnote marker column */
+    --slot-roll-range: 1.5rem; /* the 4–5 column in a table row */
+
+    /* ═══ MOTION ═══ */
+    --motion-fast: 150ms; /* state change: hover, focus, press */
+    --motion-normal: 300ms; /* reveals: chooser open, tier switch */
+    --motion-slow: 500ms;
+    --motion-instant: 0ms; /* roll results. Use this deliberately. */
+    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+
+    /* ═══ LAYOUT ═══ */
+    --layout-max-width: 74rem; /* the tool shell */
+    --layout-content-width: minmax(0, 78ch); /* article measure */
+    --layout-margin-width: minmax(10ch, 1fr);
+    --layout-step-columns: 2;
+    --layout-gutter: var(--size-6); /* between step cards */
+    --layout-section-gap: var(--size-9); /* header to grid */
+    --layout-page-margin: var(--size-10);
+    --layout-tier-height: 2.25rem;
+    --layout-header-height: 3.125rem;
+    --layout-card-min-height: 6.5rem; /* stops grid reflow on resolve */
+  }
 }
diff --git a/src/styles/global.css b/src/styles/global.css
index 9fd46e8..ce88068 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,6 +1,5 @@
-@layer reset, base, components, utilities;
+@layer reset, tokens, base, components, utilities;
 
-@import url("base/custom-media.css");
 @import url("base/foundation.css");
 @import url("base/colors.css");
 @import url("base/primitives.css");
diff --git a/tsconfig.json b/tsconfig.json
index 54d2bfa..c1167f5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,7 +5,6 @@
   "compilerOptions": {
     "jsx": "react-jsx",
     "jsxImportSource": "react",
-    "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"],
     },