diff --git a/app/assets/css/learn-theme.css b/app/assets/css/learn-theme.css
new file mode 100644
index 0000000..2c910aa
--- /dev/null
+++ b/app/assets/css/learn-theme.css
@@ -0,0 +1,39 @@
+/* Shared Learn surface styling */
+.learn-theme .btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border: 1px solid var(--border);
+  background: color-mix(in srgb, var(--text) 6%, transparent);
+  color: var(--text);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.learn-theme .btn:hover {
+  background: color-mix(in srgb, var(--text) 10%, transparent);
+}
+
+.learn-theme .btn.primary {
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--accent) 90%, transparent),
+    color-mix(in srgb, var(--accent) 70%, transparent)
+  );
+  color: #061318;
+  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
+}
+
+.learn-theme .btn.soft {
+  background: color-mix(in srgb, var(--text) 8%, transparent);
+}
+
+.learn-theme .btn.ghost {
+  background: transparent;
+}
+
+.learn-theme .btn.mini {
+  padding: 6px 10px;
+  font-size: 12px;
+}
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 7ab64bd..6ce7b7e 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -62,6 +62,8 @@ export default defineNuxtConfig({
         }
     },
     css: [
-        '~/assets/css/global.css', '~/assets/css/opensquawk-glass.css'
+        '~/assets/css/global.css',
+        '~/assets/css/opensquawk-glass.css',
+        '~/assets/css/learn-theme.css'
     ],
-})
\ No newline at end of file
+})