--- a/mrjunejune/src/base.css	Tue Aug 04 16:49:11 2026 -0700
+++ b/mrjunejune/src/base.css	Wed Aug 05 05:25:40 2026 -0700
@@ -99,36 +99,37 @@
 }
 
 :root {
-  --zen-font-editorial: "More Thin", "Roboto", sans-serif;
-  --zen-font-playful: "More", "More Thin", sans-serif;
-  --zen-font-sans: var(--zen-font-editorial);
+  --zenbu-font-editorial: "More Thin", "Roboto", sans-serif;
+  --zenbu-font-playful: "More", "More Thin", sans-serif;
+  --zenbu-sys-font-family-ui: var(--zenbu-font-editorial);
+  --zenbu-sys-font-family-content: var(--zenbu-font-editorial);
 }
 
 :root:not([data-zen-theme]),
 :root[data-zen-theme] {
-  --white: var(--zen-color-surface);
-  --black: var(--zen-color-text);
-  --darkgray: var(--zen-color-border-strong);
-  --lightgray: var(--zen-color-border-muted);
-  --gray-light: var(--zen-color-border-muted);
-  --green: var(--zen-color-success);
-  --orange: var(--zen-color-warning);
-  --purple: var(--zen-color-violet-400);
-  --red: var(--zen-color-danger);
-  --blue: var(--zen-color-info);
-  --darktext: var(--zen-color-text-muted);
-  --text: var(--zen-color-text);
-  --graytext: var(--zen-color-text-muted);
-  --lighttext: var(--zen-color-text-subtle);
-  --awesome: var(--zen-color-persimmon);
-  --accent: var(--zen-color-info);
-  --accent-dark: var(--zen-color-indigo);
-  --gray-dark: var(--zen-color-text);
+  --white: var(--zenbu-sys-color-surface-default);
+  --black: var(--zenbu-sys-color-text-primary);
+  --darkgray: var(--zenbu-sys-color-border-strong);
+  --lightgray: var(--zenbu-sys-color-border-subtle);
+  --gray-light: var(--zenbu-sys-color-border-subtle);
+  --green: var(--zenbu-sys-color-success-foreground);
+  --orange: var(--zenbu-sys-color-action-primary-background-hover);
+  --purple: var(--zenbu-sys-color-action-primary-background);
+  --red: var(--zenbu-sys-color-danger-foreground);
+  --blue: var(--zenbu-sys-color-info-foreground);
+  --darktext: var(--zenbu-sys-color-text-secondary);
+  --text: var(--zenbu-sys-color-text-primary);
+  --graytext: var(--zenbu-sys-color-text-secondary);
+  --lighttext: var(--zenbu-sys-color-text-tertiary);
+  --awesome: var(--zenbu-sys-color-action-danger-background);
+  --accent: var(--zenbu-sys-color-text-link);
+  --accent-dark: var(--zenbu-sys-color-action-primary-background-pressed);
+  --gray-dark: var(--zenbu-sys-color-text-primary);
   --gray-gradient: linear-gradient(
-    var(--zen-color-canvas),
-    var(--zen-color-surface)
+    var(--zenbu-sys-color-surface-page),
+    var(--zenbu-sys-color-surface-default)
   );
-  --box-shadow: var(--zen-shadow-md);
+  --box-shadow: var(--zenbu-sys-shadow-raised);
 }
 
 /* --- fonts --- */
@@ -165,6 +166,7 @@
 
 /* -- HTML Tags only --*/
 html {
+  min-height: 100%;
   background: var(--white);
 }
 
@@ -174,23 +176,26 @@
 }
 
 body {
-  font-family: var(--zen-font-sans, "More Thin", sans-serif);
+  min-height: 100vh;
+  font-family: var(--zenbu-sys-font-family-content);
   margin: 0;
   padding: 0;
   text-align: left;
   background: var(--gray-gradient);
-  background-size: 100% 600px;
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+  background-size: cover;
   word-wrap: break-word;
   overflow-wrap: break-word;
   color: var(--gray-dark);
-  font-size: 20px;
-  line-height: 1.7;
+  font-size: var(--zenbu-sys-font-size-xl);
+  line-height: var(--zenbu-sys-line-height-lg);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 main {
-  background: var(--white);
+  background: transparent;
   width: var(--main-width);
   max-width: calc(100% - 2em);
   margin: auto;
@@ -208,23 +213,23 @@
 }
 
 h1 {
-  font-size: 2.5em;
+  font-size: var(--zenbu-sys-font-size-3xl);
 }
 
 h2 {
-  font-size: 2em;
+  font-size: var(--zenbu-sys-font-size-2xl);
 }
 
 h3 {
-  font-size: 1.75em;
+  font-size: var(--zenbu-sys-font-size-xl);
 }
 
 h4 {
-  font-size: 1.5em;
+  font-size: var(--zenbu-sys-font-size-lg);
 }
 
 h5 {
-  font-size: 1.25em;
+  font-size: var(--zenbu-sys-font-size-md);
 }
 
 strong,
@@ -245,6 +250,19 @@
   font-size: 16px;
 }
 
+zen-button[appearance="plain"][size] > :where(button, a) {
+  display: inline-flex;
+  min-height: var(--zenbu-control-height);
+  align-items: center;
+  justify-content: center;
+  gap: var(--zenbu-control-gap);
+  padding:
+    var(--zenbu-control-padding-block)
+    var(--zenbu-control-padding-inline);
+  font-size: var(--zenbu-control-font-size);
+  line-height: var(--zenbu-control-line-height);
+}
+
 input {
   font-size: 16px;
 }
@@ -274,7 +292,8 @@
   border-left: 4px solid var(--accent);
   padding: 0 0 0 20px;
   margin-bottom: 1.25em;
-  font-size: 1.333em;
+  font-size: var(--zenbu-sys-font-size-lg);
+  line-height: var(--zenbu-sys-line-height-lg);
 }
 
 ul {
@@ -295,63 +314,35 @@
   text-decoration: underline;
 }
 
-a::before {
-  content: "";
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  margin-right: 8px;
-  vertical-align: middle;
-  background-color: #FF69B4;
-  -webkit-mask: url('/public/paw.svg') no-repeat center;
-  mask: url('/public/paw.svg') no-repeat center;
-  animation: pawStep 0.6s ease-out forwards;
-}
-
-@keyframes pawStep {
-  0% { transform: scale(0); opacity: 0; }
-  100% { transform: scale(1); opacity: 1; }
-}
-
-a:hover::before {
-  animation: wiggle 0.4s ease-in-out infinite;
-}
-
-@keyframes wiggle {
-  0%, 100% { transform: rotate(-15deg); }
-  50% { transform: rotate(15deg); }
-}
-
-
 /* -- mobile -- */
 @media (max-width: 720px) {
   body {
-    font-size: 18px;
-    line-height: 1.8;
+    font-size: var(--zenbu-sys-font-size-lg);
+    line-height: var(--zenbu-sys-line-height-md);
   }
 
   main {
-    padding: 1.5em 1em;
+    padding: var(--zenbu-sys-padding-lg) var(--zenbu-sys-padding-md);
   }
 
   h1 {
-    font-size: 2em;
+    font-size: var(--zenbu-sys-font-size-2xl);
   }
 
   h2 {
-    font-size: 1.75em;
+    font-size: var(--zenbu-sys-font-size-xl);
   }
 
   h3 {
-    font-size: 1.5em;
+    font-size: var(--zenbu-sys-font-size-lg);
   }
 
   h4 {
-    font-size: 1.25em;
+    font-size: var(--zenbu-sys-font-size-md);
   }
 
   h5 {
-    font-size: 1.1em;
+    font-size: var(--zenbu-sys-font-size-sm);
   }
 
   p {
@@ -364,25 +355,19 @@
     display: inline-block;
   }
 
-  button, input[type="submit"], input[type="button"] {
-    min-height: 44px;
-    padding: 0.75em 1.5em;
-    font-size: 1em;
-  }
-
   input, textarea, select {
     font-size: 16px; /* Prevents zoom on iOS */
   }
 
   /* Improve blockquote readability */
   blockquote {
-    font-size: 1.1em;
+    font-size: var(--zenbu-sys-font-size-md);
     padding: 0.5em 0 0.5em 1em;
   }
 
   /* Better code block sizing */
   code {
-    font-size: 0.9em;
+    font-size: var(--zenbu-sys-font-size-sm);
   }
 
   pre {
@@ -397,34 +382,24 @@
   position: fixed;
   bottom: 20px;
   right: 20px;
-  padding: 12px 24px 12px 36px;
+  min-height: var(--zenbu-control-height);
+  gap: var(--zenbu-control-gap);
+  padding:
+    var(--zenbu-control-padding-block)
+    var(--zenbu-control-padding-inline);
   background: #000000;
   color: #eeffee;
   border: none;
   border-radius: 8px;
   cursor: pointer;
-  font-size: 14px;
+  font-size: var(--zenbu-control-font-size);
   font-weight: bold;
   box-shadow: 0 4px 12px rgba(0,0,0,0.2);
   z-index: 1000;
   font-family: inherit;
 }
 
-#pwa-install-btn.with-icon::before {
-  content: "";
-  position: absolute;
-  left: 14px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 18px;
-  height: 18px;
-
-  /* Masked icon */
-  -webkit-mask: url('/public/paw.svg') no-repeat center;
-  mask: url('/public/paw.svg') no-repeat center;
-  mask-size: contain;
-  mask-repeat: no-repeat;
-
-  /* Icon color = button text color */
-  background-color: currentColor;
+#pwa-install-btn zen-icon {
+  width: var(--zenbu-control-icon-size);
+  height: var(--zenbu-control-icon-size);
 }