diff --git a/.eleventy.js b/.eleventy.js
index ec75629..5c50fd3 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -166,7 +166,6 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addCollection("tagList", require("./_11ty/getTagList"));
 
   eleventyConfig.addPassthroughCopy("img");
-  eleventyConfig.addPassthroughCopy("css");
   // We need to copy cached.js only if GA is used
   eleventyConfig.addPassthroughCopy(GA_ID ? "js" : "js/*[!cached].*");
   eleventyConfig.addPassthroughCopy("fonts");
@@ -175,7 +174,6 @@ module.exports = function (eleventyConfig) {
   // We need to rebuild upon JS change to update the CSP.
   eleventyConfig.addWatchTarget("./js/");
   // We need to rebuild on CSS change to inline it.
-  eleventyConfig.addWatchTarget("./css/");
   // Unfortunately this means .eleventyignore needs to be maintained redundantly.
   // But without this the JS build artefacts doesn't trigger a build.
   eleventyConfig.setUseGitIgnore(false);
diff --git a/_11ty/optimize-html.js b/_11ty/optimize-html.js
index 197d18e..2107211 100644
--- a/_11ty/optimize-html.js
+++ b/_11ty/optimize-html.js
@@ -19,6 +19,8 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+const isDev = require("../_data/isdevelopment")();
+const chokidar = require("chokidar");
 const minify = require("html-minifier").minify;
 const AmpOptimizer = require("@ampproject/toolbox-optimizer");
 const ampOptimizer = AmpOptimizer.create({
@@ -28,6 +30,7 @@ const ampOptimizer = AmpOptimizer.create({
 });
 const PurgeCSS = require("purgecss").PurgeCSS;
 const csso = require("csso");
+const { join } = require("path");
 
 /**
  * Inlines the CSS.
@@ -79,7 +82,16 @@ const purifyCss = async (rawContent, outputPath) => {
     const after = csso.minify(purged[0].css).css;
     //console.log("CSS reduction", before.length - after.length);
 
-    content = content.replace("</head>", `<style>${after}</style></head>`);
+    // in watch/serve mode, reference the stylesheet. As we bypass 11ty rebuild,
+    // Browsersync will reload only the css file, which is really fast
+    if (isDev) {
+      content = content.replace("</head>", `<link rel="stylesheet" href="/css/main.css"></head>`);
+      await require('util').promisify(require('fs').writeFile)("_site/css/main.css", after, {
+        encoding: "utf-8",
+      });
+    } else {
+      content = content.replace("</head>", `<style>${after}</style></head>`);
+    }
   }
   return content;
 };
@@ -110,9 +122,30 @@ const optimizeAmp = async (rawContent, outputPath) => {
   return content;
 };
 
+const initCssWatcher = () => {
+  console.log(this);
+  const watcher = chokidar.watch("./css/*", {
+    persistent: true
+  });
+  const reload = (path) => {
+    var bs = require("browser-sync");
+    require('fs').copyFileSync(path, join("_site", path));
+    bs.reload(path);
+    if(bs.has('eleventyServer'))
+      bs.get('eleventyServer').reload();
+    else if(bs.instances.length > 0)
+      bs.instances[0].reload([join("_site", path)]);
+  }
+  watcher
+    .on('add', reload)
+    .on('change', reload);
+}
+
 module.exports = {
   initArguments: {},
   configFunction: async (eleventyConfig, pluginOptions = {}) => {
+    initCssWatcher();
+
     eleventyConfig.addTransform("purifyCss", purifyCss);
     eleventyConfig.addTransform("minifyHtml", minifyHtml);
     eleventyConfig.addTransform("optimizeAmp", optimizeAmp);
diff --git a/_data/csp.js b/_data/csp.js
index a0a93c9..9f25eed 100644
--- a/_data/csp.js
+++ b/_data/csp.js
@@ -27,8 +27,10 @@
  * or the comments at the end of the `CSP` const below.
  */
 
-const SELF = quote("self");
+const isDev = require("./isdevelopment")();
 
+const SELF = quote("self");
+const UNSAFE_INLINE = quote("unsafe-inline");
 const CSP = {
   regular: serialize([
     // By default only talk to same-origin
@@ -38,7 +40,9 @@ const CSP = {
     // Script from same-origin and inline-hashes.
     ["script-src", SELF, /* Replaced by csp.js plugin */ "HASHES"],
     // Inline CSS is allowed.
-    ["style-src", quote("unsafe-inline")],
+    ["style-src", UNSAFE_INLINE],
+    // in serve mode, reference the css file for fast reload
+    ["style-src-elem", isDev ? SELF : UNSAFE_INLINE],
     // Images may also come from data-URIs.
     ["img-src", SELF, "data:"],
 
diff --git a/package.json b/package.json
index 66ee89d..ce2fb25 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "@11ty/eleventy-navigation": "^0.1.3",
     "@11ty/eleventy-plugin-rss": "^1.0.7",
     "@11ty/eleventy-plugin-syntaxhighlight": "^3.0.1",
+    "chokidar": "^3.5.2",
     "eleventy-plugin-local-images": "^0.4.0",
     "file-type": "^12.0.1",
     "fs-extra": "^8.1.0",