diff --git a/assets/css/main.css b/assets/css/main.css
new file mode 100644
index 0000000..3ead329
--- /dev/null
+++ b/assets/css/main.css
@@ -0,0 +1,148 @@
+:root {
+  color-scheme: light dark;
+  --bg: #fafafa;
+  --bg-raised: #ffffff;
+  --fg: #1a1a1a;
+  --fg-muted: #5a5a5a;
+  --border: #e2e2e2;
+  --accent: #1a5fb4;
+  --accent-fg: #ffffff;
+  --radius: 0.5rem;
+  --max-width: 42rem;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #14161a;
+    --bg-raised: #1c1f24;
+    --fg: #e8e8e8;
+    --fg-muted: #9a9fa6;
+    --border: #2c3038;
+    --accent: #8ab4f8;
+    --accent-fg: #0f1115;
+  }
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  line-height: 1.6;
+  background: var(--bg);
+  color: var(--fg);
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+a { color: var(--accent); }
+
+h1, h2, h3 { line-height: 1.25; }
+
+header.site {
+  border-bottom: 1px solid var(--border);
+}
+header.site .inner {
+  max-width: var(--max-width);
+  margin: 0 auto;
+  padding: 1.25rem 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+header.site .brand {
+  font-weight: 700;
+  font-size: 1.1rem;
+  color: var(--fg);
+  text-decoration: none;
+}
+header.site nav {
+  display: flex;
+  gap: 1.5rem;
+}
+header.site nav a {
+  color: var(--fg-muted);
+  text-decoration: none;
+  font-size: 0.95rem;
+}
+header.site nav a:hover { color: var(--fg); }
+
+main {
+  flex: 1;
+  max-width: var(--max-width);
+  margin: 0 auto;
+  padding: 4rem 1.5rem;
+  width: 100%;
+}
+
+footer.site {
+  border-top: 1px solid var(--border);
+  margin-top: 2rem;
+}
+footer.site .inner {
+  max-width: var(--max-width);
+  margin: 0 auto;
+  padding: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+  font-size: 0.85rem;
+  color: var(--fg-muted);
+}
+footer.site nav {
+  display: flex;
+  gap: 1.25rem;
+}
+footer.site nav a {
+  color: var(--fg-muted);
+  text-decoration: none;
+}
+footer.site nav a:hover { color: var(--fg); }
+
+.btn {
+  display: inline-block;
+  padding: 0.75rem 1.5rem;
+  border-radius: var(--radius);
+  background: var(--accent);
+  color: var(--accent-fg);
+  text-decoration: none;
+  font-weight: 600;
+  border: none;
+  font-size: 1rem;
+  cursor: pointer;
+}
+.btn:hover { opacity: 0.9; }
+
+label {
+  display: block;
+  font-weight: 600;
+  font-size: 0.9rem;
+  margin-bottom: 0.35rem;
+}
+input, textarea {
+  width: 100%;
+  padding: 0.65rem 0.75rem;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: var(--bg-raised);
+  color: var(--fg);
+  font-family: inherit;
+  font-size: 1rem;
+  margin-bottom: 1.25rem;
+}
+input:focus, textarea:focus {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
+}
+
+.field-honeypot {
+  position: absolute;
+  left: -9999px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index a3b13ad..f270983 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -5,156 +5,13 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} · {{ .Site.Title }}{{ end }}</title>
   <meta name="description" content="{{ .Site.Params.description }}">
-  <style>
-    :root {
-      color-scheme: light dark;
-      --bg: #fafafa;
-      --bg-raised: #ffffff;
-      --fg: #1a1a1a;
-      --fg-muted: #5a5a5a;
-      --border: #e2e2e2;
-      --accent: #1a5fb4;
-      --accent-fg: #ffffff;
-      --radius: 0.5rem;
-      --max-width: 42rem;
-    }
-    @media (prefers-color-scheme: dark) {
-      :root {
-        --bg: #14161a;
-        --bg-raised: #1c1f24;
-        --fg: #e8e8e8;
-        --fg-muted: #9a9fa6;
-        --border: #2c3038;
-        --accent: #8ab4f8;
-        --accent-fg: #0f1115;
-      }
-    }
-
-    * { box-sizing: border-box; }
-
-    body {
-      margin: 0;
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-      line-height: 1.6;
-      background: var(--bg);
-      color: var(--fg);
-      display: flex;
-      flex-direction: column;
-      min-height: 100vh;
-    }
-
-    a { color: var(--accent); }
-
-    h1, h2, h3 { line-height: 1.25; }
-
-    header.site {
-      border-bottom: 1px solid var(--border);
-    }
-    header.site .inner {
-      max-width: var(--max-width);
-      margin: 0 auto;
-      padding: 1.25rem 1.5rem;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 1rem;
-      flex-wrap: wrap;
-    }
-    header.site .brand {
-      font-weight: 700;
-      font-size: 1.1rem;
-      color: var(--fg);
-      text-decoration: none;
-    }
-    header.site nav {
-      display: flex;
-      gap: 1.5rem;
-    }
-    header.site nav a {
-      color: var(--fg-muted);
-      text-decoration: none;
-      font-size: 0.95rem;
-    }
-    header.site nav a:hover { color: var(--fg); }
-
-    main {
-      flex: 1;
-      max-width: var(--max-width);
-      margin: 0 auto;
-      padding: 4rem 1.5rem;
-      width: 100%;
-    }
-
-    footer.site {
-      border-top: 1px solid var(--border);
-      margin-top: 2rem;
-    }
-    footer.site .inner {
-      max-width: var(--max-width);
-      margin: 0 auto;
-      padding: 1.5rem;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 1rem;
-      flex-wrap: wrap;
-      font-size: 0.85rem;
-      color: var(--fg-muted);
-    }
-    footer.site nav {
-      display: flex;
-      gap: 1.25rem;
-    }
-    footer.site nav a {
-      color: var(--fg-muted);
-      text-decoration: none;
-    }
-    footer.site nav a:hover { color: var(--fg); }
-
-    .btn {
-      display: inline-block;
-      padding: 0.75rem 1.5rem;
-      border-radius: var(--radius);
-      background: var(--accent);
-      color: var(--accent-fg);
-      text-decoration: none;
-      font-weight: 600;
-      border: none;
-      font-size: 1rem;
-      cursor: pointer;
-    }
-    .btn:hover { opacity: 0.9; }
-
-    label {
-      display: block;
-      font-weight: 600;
-      font-size: 0.9rem;
-      margin-bottom: 0.35rem;
-    }
-    input, textarea {
-      width: 100%;
-      padding: 0.65rem 0.75rem;
-      border-radius: var(--radius);
-      border: 1px solid var(--border);
-      background: var(--bg-raised);
-      color: var(--fg);
-      font-family: inherit;
-      font-size: 1rem;
-      margin-bottom: 1.25rem;
-    }
-    input:focus, textarea:focus {
-      outline: 2px solid var(--accent);
-      outline-offset: 1px;
-    }
-
-    .field-honeypot {
-      position: absolute;
-      left: -9999px;
-      width: 1px;
-      height: 1px;
-      overflow: hidden;
-    }
-  </style>
+  {{ $css := resources.Get "css/main.css" }}
+  {{ if hugo.IsProduction }}
+    {{ $css = $css | minify | fingerprint }}
+    <link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
+  {{ else }}
+    <link rel="stylesheet" href="{{ $css.RelPermalink }}">
+  {{ end }}
 </head>
 <body>
   <header class="site">