--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/design_system/src/storybook.css	Tue Aug 04 09:14:57 2026 -0700
@@ -0,0 +1,268 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  min-height: 100%;
+  background: var(--zen-color-canvas);
+  color: var(--zen-color-text);
+  font-family: var(--zen-font-sans);
+}
+
+body {
+  min-height: 100vh;
+  margin: 0;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+.catalog-shell {
+  display: grid;
+  grid-template-columns: 17rem minmax(0, 1fr);
+  min-height: 100vh;
+}
+
+.catalog-sidebar {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  overflow: auto;
+  padding: var(--zen-space-5);
+  border-right: var(--zen-border-width) solid var(--zen-color-border);
+  background: var(--zen-color-surface);
+}
+
+.catalog-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--zen-space-3);
+  color: inherit;
+  font-size: var(--zen-font-size-lg);
+  font-weight: 850;
+  text-decoration: none;
+}
+
+.catalog-mark {
+  display: grid;
+  width: 2.5rem;
+  height: 2.5rem;
+  place-items: center;
+  border: var(--zen-border-width) solid var(--zen-color-border);
+  border-radius: 50%;
+  background: var(--zen-color-accent);
+  color: #171a21;
+}
+
+.catalog-sidebar h2 {
+  margin: var(--zen-space-6) 0 var(--zen-space-2);
+  color: var(--zen-color-text-muted);
+  font-size: var(--zen-font-size-xs);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.catalog-nav {
+  display: grid;
+  gap: var(--zen-space-1);
+}
+
+.catalog-nav a {
+  padding: var(--zen-space-2) var(--zen-space-3);
+  border-radius: var(--zen-radius-sm);
+  color: inherit;
+  text-decoration: none;
+}
+
+.catalog-nav a:hover,
+.catalog-nav a[aria-current] {
+  background: var(--zen-color-accent);
+  color: #171a21;
+}
+
+.theme-toggle {
+  width: 100%;
+  margin-top: var(--zen-space-6);
+  padding: var(--zen-space-2);
+  border: var(--zen-border-width) solid var(--zen-color-border);
+  border-radius: var(--zen-radius-md);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.catalog-main {
+  width: min(100%, var(--zen-content-width));
+  padding: var(--zen-space-7) clamp(1rem, 5vw, 5rem);
+  outline: none;
+}
+
+.catalog-page[hidden] {
+  display: none;
+}
+
+.page-heading {
+  max-width: 52rem;
+  margin-bottom: var(--zen-space-7);
+}
+
+.eyebrow {
+  margin: 0 0 var(--zen-space-2);
+  color: var(--zen-color-info);
+  font-size: var(--zen-font-size-sm);
+  font-weight: 800;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.page-heading h1 {
+  margin: 0 0 var(--zen-space-3);
+  font-size: var(--zen-font-size-xl);
+  line-height: 1.05;
+}
+
+.page-heading p {
+  color: var(--zen-color-text-muted);
+  font-size: var(--zen-font-size-lg);
+}
+
+.principles,
+.component-grid,
+.token-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+  gap: var(--zen-space-5);
+}
+
+.principle,
+.token-group {
+  padding: var(--zen-space-5);
+  border: var(--zen-border-width) solid var(--zen-color-border);
+  border-radius: var(--zen-radius-lg);
+  background: var(--zen-color-surface);
+}
+
+.principle h2,
+.token-group h2 {
+  margin-top: 0;
+}
+
+.component-grid a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.component-grid zen-card {
+  height: 100%;
+}
+
+.swatch-list {
+  display: grid;
+  gap: var(--zen-space-2);
+  margin: 0;
+}
+
+.swatch-list div {
+  display: grid;
+  grid-template-columns: 2rem 1fr;
+  align-items: center;
+  gap: var(--zen-space-2);
+}
+
+.swatch-list dt,
+.swatch-list dd {
+  margin: 0;
+  font-family: var(--zen-font-mono);
+  font-size: var(--zen-font-size-xs);
+}
+
+.swatch {
+  width: 2rem;
+  height: 2rem;
+  border: 1px solid var(--zen-color-border);
+  border-radius: 50%;
+  background: var(--swatch);
+}
+
+zen-story {
+  display: block;
+  margin-bottom: var(--zen-space-6);
+  overflow: hidden;
+  border: var(--zen-border-width) solid var(--zen-color-border);
+  border-radius: var(--zen-radius-lg);
+  background: var(--zen-color-surface);
+}
+
+zen-story > header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--zen-space-3);
+  padding: var(--zen-space-3) var(--zen-space-4);
+  border-bottom: 1px solid var(--zen-color-border);
+}
+
+zen-story > header h3 {
+  margin: 0;
+}
+
+zen-story > header button {
+  padding: var(--zen-space-1) var(--zen-space-2);
+  border: 0;
+  border-radius: var(--zen-radius-sm);
+  background: transparent;
+  color: var(--zen-color-info);
+  cursor: pointer;
+}
+
+.story-canvas {
+  min-height: 8rem;
+  padding: clamp(1rem, 4vw, 3rem);
+  background:
+    linear-gradient(90deg, rgba(127, 127, 127, 0.08) 1px, transparent 1px),
+    linear-gradient(rgba(127, 127, 127, 0.08) 1px, transparent 1px);
+  background-size: 1rem 1rem;
+}
+
+zen-story > pre {
+  max-height: 24rem;
+  overflow: auto;
+  margin: 0;
+  padding: var(--zen-space-4);
+  border-top: 1px solid var(--zen-color-border);
+  background: #111318;
+  color: #f4f4f5;
+  font: var(--zen-font-size-sm)/1.55 var(--zen-font-mono);
+}
+
+.demo-card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+  gap: var(--zen-space-5);
+}
+
+@media (max-width: 760px) {
+  .catalog-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .catalog-sidebar {
+    position: static;
+    width: 100%;
+    height: auto;
+    border-right: 0;
+    border-bottom: var(--zen-border-width) solid var(--zen-color-border);
+  }
+
+  .catalog-nav {
+    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
+  }
+
+  .catalog-main {
+    padding: var(--zen-space-6) var(--zen-space-4);
+  }
+}