diff --git a/site/decodal-site/src/style.css b/site/decodal-site/src/style.css
index 836be15..5147fc2 100644
--- a/site/decodal-site/src/style.css
+++ b/site/decodal-site/src/style.css
@@ -1,16 +1,62 @@
 :root {
-  color-scheme: light dark;
+  color-scheme: light;
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  background: #f7f7f8;
-  color: #1f2328;
+  --bg: #f7f7f8;
+  --surface: #ffffff;
+  --text: #1f2328;
+  --heading: #111827;
+  --muted: #4b5563;
+  --subtle: #64748b;
+  --border: #e5e7eb;
+  --link: #2563eb;
+  --topbar-bg: #111827;
+  --topbar-text: #ffffff;
+  --topbar-link: #dbeafe;
+  --active-bg: #dbeafe;
+  --active-text: #1d4ed8;
+  --nav-number: #94a3b8;
+  --shadow: 0 8px 24px rgb(15 23 42 / 0.05);
+  --inline-code-bg: #eef2ff;
+  --inline-code-text: #3730a3;
+  --editor-bg: #0f172a;
+  --editor-text: #e5e7eb;
+  --danger: #b91c1c;
+  --error: #fecaca;
+  --selection: rgb(59 130 246 / 0.35);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+    --bg: #0b1120;
+    --surface: #111827;
+    --text: #d1d5db;
+    --heading: #f9fafb;
+    --muted: #9ca3af;
+    --subtle: #94a3b8;
+    --border: #334155;
+    --link: #60a5fa;
+    --topbar-bg: #020617;
+    --topbar-text: #f8fafc;
+    --topbar-link: #bfdbfe;
+    --active-bg: #1e3a8a;
+    --active-text: #bfdbfe;
+    --nav-number: #64748b;
+    --shadow: 0 8px 24px rgb(0 0 0 / 0.25);
+    --inline-code-bg: #1e293b;
+    --inline-code-text: #bfdbfe;
+    --danger: #fca5a5;
+  }
 }
 
 body {
+  background: var(--bg);
+  color: var(--text);
   margin: 0;
 }
 
 a {
-  color: #2563eb;
+  color: var(--link);
   text-decoration: none;
 }
 
@@ -20,8 +66,8 @@ a:hover {
 
 .topbar {
   align-items: center;
-  background: #111827;
-  color: white;
+  background: var(--topbar-bg);
+  color: var(--topbar-text);
   display: flex;
   height: 56px;
   justify-content: space-between;
@@ -29,7 +75,7 @@ a:hover {
 }
 
 .brand {
-  color: white;
+  color: var(--topbar-text);
   font-size: 20px;
   font-weight: 700;
 }
@@ -40,7 +86,7 @@ a:hover {
 }
 
 .topnav a {
-  color: #dbeafe;
+  color: var(--topbar-link);
 }
 
 .layout {
@@ -54,14 +100,14 @@ a:hover {
 }
 
 .sidebar {
-  background: #ffffff;
-  border-right: 1px solid #e5e7eb;
+  background: var(--surface);
+  border-right: 1px solid var(--border);
   overflow: auto;
   padding: 22px 18px;
 }
 
 .sidebar-title {
-  color: #111827;
+  color: var(--heading);
   display: block;
   font-weight: 700;
   margin-bottom: 12px;
@@ -79,7 +125,7 @@ a:hover {
 
 .nav-tree a {
   border-radius: 6px;
-  color: #374151;
+  color: var(--text);
   display: flex;
   font-size: 14px;
   gap: 6px;
@@ -88,19 +134,19 @@ a:hover {
 }
 
 .nav-number {
-  color: #94a3b8;
+  color: var(--nav-number);
   flex: 0 0 auto;
   font-variant-numeric: tabular-nums;
 }
 
 .nav-tree a.active {
-  background: #dbeafe;
-  color: #1d4ed8;
+  background: var(--active-bg);
+  color: var(--active-text);
   font-weight: 600;
 }
 
 .nav-tree a.active .nav-number {
-  color: #2563eb;
+  color: var(--link);
 }
 
 main {
@@ -113,10 +159,10 @@ main.playground {
 }
 
 .markdown {
-  background: white;
-  border: 1px solid #e5e7eb;
+  background: var(--surface);
+  border: 1px solid var(--border);
   border-radius: 12px;
-  box-shadow: 0 8px 24px rgb(15 23 42 / 0.05);
+  box-shadow: var(--shadow);
   margin: 0 auto;
   max-width: 920px;
   padding: 24px 36px 42px;
@@ -125,14 +171,14 @@ main.playground {
 .markdown h1,
 .markdown h2,
 .markdown h3 {
-  color: #111827;
+  color: var(--heading);
 }
 
 .markdown pre,
 .output-pane pre {
-  background: #0f172a;
+  background: var(--editor-bg);
   border-radius: 10px;
-  color: #e5e7eb;
+  color: var(--editor-text);
   overflow: auto;
   padding: 14px;
 }
@@ -142,9 +188,9 @@ main.playground {
 }
 
 .markdown :not(pre) > code {
-  background: #eef2ff;
+  background: var(--inline-code-bg);
   border-radius: 4px;
-  color: #3730a3;
+  color: var(--inline-code-text);
   padding: 1px 4px;
 }
 
@@ -168,7 +214,7 @@ main.playground {
 }
 
 .tok-comment {
-  color: #94a3b8;
+  color: var(--nav-number);
   font-style: italic;
 }
 
@@ -194,15 +240,15 @@ main.playground {
 }
 
 .playground-header p {
-  color: #4b5563;
+  color: var(--muted);
   font-size: 13px;
   margin: 0;
 }
 
 .playground-header code {
-  background: #eef2ff;
+  background: var(--inline-code-bg);
   border-radius: 4px;
-  color: #3730a3;
+  color: var(--inline-code-text);
   padding: 1px 4px;
 }
 
@@ -213,10 +259,10 @@ main.playground {
 }
 
 button {
-  background: #2563eb;
+  background: var(--link);
   border: 0;
   border-radius: 8px;
-  color: white;
+  color: var(--topbar-text);
   cursor: pointer;
   font-weight: 700;
   padding: 8px 14px;
@@ -237,8 +283,8 @@ button:disabled {
 
 .file-panel,
 .pane {
-  background: white;
-  border: 1px solid #e5e7eb;
+  background: var(--surface);
+  border: 1px solid var(--border);
   border-radius: 10px;
   display: flex;
   flex-direction: column;
@@ -249,8 +295,8 @@ button:disabled {
 .panel-header,
 .pane > span {
   align-items: center;
-  border-bottom: 1px solid #e5e7eb;
-  color: #374151;
+  border-bottom: 1px solid var(--border);
+  color: var(--text);
   display: flex;
   font-size: 13px;
   font-weight: 700;
@@ -288,7 +334,7 @@ button:disabled {
 }
 
 .file-tree .folder {
-  color: #64748b;
+  color: var(--subtle);
   display: block;
   font-size: 13px;
   font-weight: 700;
@@ -298,7 +344,7 @@ button:disabled {
 .file-tree .file {
   background: transparent;
   border-radius: 6px;
-  color: #334155;
+  color: var(--text);
   display: block;
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
   font-size: 13px;
@@ -310,22 +356,22 @@ button:disabled {
 
 .file-tree .file:hover,
 .file-tree .file.active {
-  background: #dbeafe;
-  color: #1d4ed8;
+  background: var(--active-bg);
+  color: var(--active-text);
   text-decoration: none;
 }
 
 .danger-button {
   background: transparent;
-  border-top: 1px solid #e5e7eb;
+  border-top: 1px solid var(--border);
   border-radius: 0;
-  color: #b91c1c;
+  color: var(--danger);
   padding: 9px 10px;
   text-align: left;
 }
 
 .editor-wrap {
-  background: #0f172a;
+  background: var(--editor-bg);
   flex: 1;
   min-height: 0;
   position: relative;
@@ -346,13 +392,13 @@ button:disabled {
 }
 
 .editor-wrap pre {
-  color: #e5e7eb;
+  color: var(--editor-text);
   pointer-events: none;
 }
 
 .editor-wrap textarea {
   background: transparent;
-  caret-color: #e5e7eb;
+  caret-color: var(--editor-text);
   color: transparent;
   outline: none;
   resize: none;
@@ -360,7 +406,7 @@ button:disabled {
 }
 
 .editor-wrap textarea::selection {
-  background: rgb(59 130 246 / 0.35);
+  background: var(--selection);
 }
 
 .output-pane pre {
@@ -370,11 +416,11 @@ button:disabled {
 }
 
 .output-pane pre.error {
-  color: #fecaca;
+  color: var(--error);
 }
 
 .status {
-  color: #4b5563;
+  color: var(--muted);
   font-size: 13px;
   margin: 0;
   white-space: nowrap;
@@ -385,11 +431,11 @@ button:disabled {
     grid-template-columns: 1fr;
   }
   .sidebar {
-    border-bottom: 1px solid #e5e7eb;
+    border-bottom: 1px solid var(--border);
     border-right: 0;
     max-height: 260px;
   }
-  .playground-grid {
+  .playground-shell {
     grid-template-columns: 1fr;
   }
 }