Add 4 CSS style themes with runtime switcher

Adds a style theme system that layers additional CSS files on top of the
base stylesheet. Themes are loaded/unloaded dynamically via <link> tags.

- Default: existing look, unchanged
- Refined: typographic rhythm fixes, consistent spacing on settings page
- Terminal: monospace, dark phosphor CRT aesthetic (scanlines, cyan glow)
- Codex: book/Tufte-inspired with warm paper tones, serif type, fleurons
- Sakura: Japanese-inspired calm aesthetic (named for neko = cat)

Each theme supports both light and dark mode. Style selection persists
in localStorage and is independent of the light/dark toggle.

https://claude.ai/code/session_01Jv3c8GdaDQMm5WYwHUJMVe

4 files changed, 1628 insertions, 0 deletions

diff --git a/web/dist/v3/themes/codex.css b/web/dist/v3/themes/codex.css
new file mode 100644
index 0000000..ece9e2d
--- /dev/null
+++ b/web/dist/v3/themes/codex.css
@@ -0,0 +1,451 @@
+/*
+ * Codex Theme
+ * The book as interface. Tufte, Bringhurst, and the long tradition
+ * of typographic craft applied to the screen.
+ * Warm, readable, unhurried. Content is sovereign.
+ */
+
+/* ---- Color System ---- */
+:root {
+  --bg-color: #faf8f4;
+  --text-color: #2c2c2c;
+  --sidebar-bg: #f0ece4;
+  --link-color: #8b4513;
+  --border-color: #d4cfc6;
+  --accent-color: #8b4513;
+
+  --codex-paper: #faf8f4;
+  --codex-ink: #2c2c2c;
+  --codex-sienna: #8b4513;
+  --codex-muted: #8a8478;
+  --codex-rule: #d4cfc6;
+
+  color-scheme: light;
+}
+
+/* Dark mode adaptation -- parchment by candlelight */
+.theme-dark {
+  --bg-color: #1c1a17;
+  --text-color: #d4cfc6;
+  --sidebar-bg: #23211d;
+  --link-color: #c9956b;
+  --border-color: #3a3630;
+  --accent-color: #c9956b;
+
+  --codex-paper: #1c1a17;
+  --codex-ink: #d4cfc6;
+  --codex-sienna: #c9956b;
+  --codex-muted: #8a8478;
+  --codex-rule: #3a3630;
+}
+
+/* ---- Typography ---- */
+
+body {
+  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', 'Crimson Text', Georgia, serif;
+  font-size: 19px;
+  line-height: 1.7;
+  letter-spacing: 0.005em;
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: 'liga' 1, 'kern' 1, 'onum' 1;
+}
+
+/* ---- Sidebar: Table of Contents ---- */
+
+.sidebar {
+  background: var(--sidebar-bg);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  border-right: 1px solid var(--codex-rule);
+  font-family: 'Iowan Old Style', Palatino, Georgia, serif;
+}
+
+.theme-dark .sidebar {
+  background: var(--sidebar-bg);
+  border-right-color: var(--codex-rule);
+}
+
+.sidebar-section h3 {
+  font-family: 'Iowan Old Style', Palatino, Georgia, serif;
+  font-size: 0.7rem;
+  font-weight: 400;
+  font-variant: small-caps;
+  text-transform: lowercase;
+  letter-spacing: 0.15em;
+  color: var(--codex-muted);
+  opacity: 1;
+}
+
+.theme-dark .sidebar-section h3 {
+  color: var(--codex-muted);
+}
+
+.sidebar-section li a {
+  font-family: 'Iowan Old Style', Palatino, Georgia, serif;
+  color: var(--text-color);
+  font-size: 0.85rem;
+  border-radius: 3px;
+  font-weight: 400;
+}
+
+.theme-dark .sidebar-section li a {
+  color: var(--text-color);
+}
+
+.sidebar-section li a:hover {
+  background: rgba(139, 69, 19, 0.06);
+  color: var(--codex-sienna);
+  transform: none;
+}
+
+.theme-dark .sidebar-section li a:hover {
+  background: rgba(201, 149, 107, 0.08);
+  color: var(--codex-sienna);
+}
+
+.sidebar-section li.active a {
+  background: rgba(139, 69, 19, 0.08);
+  color: var(--codex-sienna);
+  box-shadow: none;
+  border: none;
+  border-radius: 3px;
+  font-weight: 600;
+}
+
+.theme-dark .sidebar-section li.active a {
+  background: rgba(201, 149, 107, 0.1);
+  color: var(--codex-sienna);
+}
+
+.sidebar-footer {
+  border-top-color: var(--codex-rule);
+}
+
+.sidebar-footer a {
+  font-family: 'Iowan Old Style', Palatino, Georgia, serif;
+  color: var(--text-color);
+  opacity: 0.5;
+  font-size: 0.85rem;
+}
+
+.theme-dark .sidebar-footer a {
+  color: var(--text-color);
+}
+
+/* Search */
+.sidebar-search input {
+  background: rgba(0, 0, 0, 0.03);
+  border: 1px solid var(--codex-rule);
+  border-radius: 3px;
+  color: var(--text-color);
+  font-family: inherit;
+}
+
+.theme-dark .sidebar-search input {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-color);
+  border-color: var(--codex-rule);
+}
+
+.sidebar-search input:focus {
+  border-color: var(--codex-sienna);
+  box-shadow: none;
+}
+
+/* ---- Toggle ---- */
+.theme-dark .sidebar-toggle {
+  background: none;
+}
+
+/* ---- Main Content ---- */
+
+.main-content {
+  background-color: var(--bg-color);
+  padding: 2.5rem 2rem;
+}
+
+.main-content > * {
+  max-width: 33em;
+}
+
+/* ---- Feed Items: The Reading Experience ---- */
+
+.feed-item {
+  padding: 0;
+  margin-top: 2.5rem;
+  border-radius: 0;
+  padding-bottom: 2.5rem;
+  border-bottom: none;
+}
+
+/* Decorative separator between items -- a subtle fleuron */
+.feed-item + .feed-item::before {
+  content: '\2766';
+  display: block;
+  text-align: center;
+  font-size: 1rem;
+  color: var(--codex-rule);
+  margin-bottom: 2.5rem;
+  margin-top: -2.5rem;
+}
+
+.feed-item.selected {
+  background: none;
+  box-shadow: inset 3px 0 0 var(--codex-sienna);
+  padding-left: 1rem;
+  border-radius: 0;
+}
+
+.theme-dark .feed-item.selected {
+  background: none;
+}
+
+.item-title {
+  font-family: 'Iowan Old Style', Palatino, Georgia, serif;
+  font-size: 1.65rem;
+  line-height: 1.3;
+  font-weight: 400;
+  color: var(--codex-sienna);
+  letter-spacing: -0.005em;
+}
+
+.item-title:hover {
+  color: var(--codex-ink);
+  text-decoration: none;
+}
+
+.dateline {
+  font-family: 'Iowan Old Style', Palatino, Georgia, serif;
+  font-variant: small-caps;
+  text-transform: lowercase;
+  font-size: 0.78em;
+  letter-spacing: 0.06em;
+  color: var(--codex-muted);
+  margin-bottom: 1.2rem;
+}
+
+.dateline a {
+  color: var(--codex-muted);
+}
+
+.item-description {
+  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
+  font-size: 1rem;
+  line-height: 1.75;
+  color: var(--text-color);
+  hyphens: auto;
+  -webkit-hyphens: auto;
+}
+
+.item-description a {
+  color: var(--codex-sienna);
+  text-decoration: none;
+  border-bottom: 1px solid rgba(139, 69, 19, 0.3);
+}
+
+.item-description a:hover {
+  border-bottom-color: var(--codex-sienna);
+}
+
+.item-description blockquote {
+  border-left: 3px solid var(--codex-rule);
+  margin-left: 0;
+  padding-left: 1.5em;
+  font-style: italic;
+  color: var(--codex-muted);
+}
+
+.item-description pre {
+  background: rgba(0, 0, 0, 0.03);
+  border: 1px solid var(--codex-rule);
+  border-radius: 2px;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 0.88em;
+}
+
+.item-description img {
+  border-radius: 2px;
+}
+
+/* Star */
+.star-btn.is-starred {
+  color: var(--codex-sienna);
+}
+
+.star-btn.is-unstarred {
+  color: var(--codex-muted);
+  opacity: 0.25;
+}
+
+/* Scrape */
+.scrape-btn {
+  font-family: inherit;
+  font-variant: small-caps;
+  text-transform: lowercase;
+  letter-spacing: 0.06em;
+  color: var(--codex-sienna);
+  border-color: var(--codex-rule);
+  background: transparent;
+  border-radius: 2px;
+  font-weight: 400;
+}
+
+/* ---- Buttons ---- */
+
+button,
+.button {
+  font-family: 'Iowan Old Style', Palatino, Georgia, serif;
+  font-variant: small-caps;
+  text-transform: lowercase;
+  letter-spacing: 0.06em;
+  border-radius: 3px;
+  border-color: var(--codex-rule);
+  background: transparent;
+  color: var(--text-color);
+  font-size: 0.85rem;
+  font-weight: 400;
+}
+
+button:hover,
+.button:hover {
+  border-color: var(--codex-sienna);
+  color: var(--codex-sienna);
+  background: rgba(139, 69, 19, 0.04);
+}
+
+.theme-dark button,
+.theme-dark .button {
+  background: transparent;
+  color: var(--text-color);
+  border-color: var(--codex-rule);
+}
+
+.theme-dark button:hover,
+.theme-dark .button:hover {
+  border-color: var(--codex-sienna);
+  color: var(--codex-sienna);
+  background: rgba(201, 149, 107, 0.08);
+}
+
+button.active,
+.theme-dark button.active {
+  background: var(--codex-sienna);
+  color: var(--codex-paper);
+  border-color: var(--codex-sienna);
+}
+
+/* ---- Settings ---- */
+
+.settings-view {
+  font-family: 'Iowan Old Style', Palatino, Georgia, serif;
+}
+
+.settings-view h2 {
+  font-weight: 400;
+  font-size: 1.8rem;
+  letter-spacing: -0.01em;
+}
+
+.settings-section h3 {
+  font-family: inherit;
+  font-weight: 400;
+  font-variant: small-caps;
+  text-transform: lowercase;
+  letter-spacing: 0.08em;
+  font-size: 1.15rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--codex-rule);
+}
+
+.settings-group label,
+.data-group label {
+  font-family: inherit;
+  font-variant: small-caps;
+  text-transform: lowercase;
+  letter-spacing: 0.1em;
+  font-size: 0.85rem;
+  font-weight: 400;
+  opacity: 0.65;
+}
+
+.theme-dark .settings-view,
+.theme-dark .settings-view h2,
+.theme-dark .settings-view h3,
+.theme-dark .settings-group label,
+.theme-dark .data-group label {
+  color: var(--text-color) !important;
+}
+
+/* Inputs */
+input[type="text"],
+input[type="url"],
+input[type="search"],
+select {
+  font-family: inherit;
+  background: transparent;
+  border: 1px solid var(--codex-rule);
+  border-radius: 3px;
+  color: var(--text-color);
+}
+
+input:focus,
+select:focus {
+  border-color: var(--codex-sienna);
+  box-shadow: none;
+}
+
+/* Feed list */
+.manage-feed-list {
+  border-top-color: var(--codex-rule);
+}
+
+.manage-feed-item {
+  border-bottom-color: var(--codex-rule);
+}
+
+.feed-title {
+  font-family: inherit;
+  font-weight: 600;
+}
+
+.feed-url {
+  font-family: inherit;
+}
+
+.delete-feed-btn {
+  color: #a0522d !important;
+  border-color: rgba(160, 82, 45, 0.3) !important;
+}
+
+.delete-feed-btn:hover {
+  background: rgba(160, 82, 45, 0.06) !important;
+  border-color: #a0522d !important;
+}
+
+/* ---- Scrollbars ---- */
+
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--codex-rule);
+  border-radius: 3px;
+}
+
+/* ---- Backdrop ---- */
+.sidebar-backdrop {
+  background: rgba(250, 248, 244, 0.6);
+  backdrop-filter: blur(3px);
+}
+
+.theme-dark .sidebar-backdrop {
+  background: rgba(28, 26, 23, 0.6);
+}
diff --git a/web/dist/v3/themes/refined.css b/web/dist/v3/themes/refined.css
new file mode 100644
index 0000000..9143552
--- /dev/null
+++ b/web/dist/v3/themes/refined.css
@@ -0,0 +1,265 @@
+/*
+ * Refined Theme
+ * A careful refinement of the default aesthetic.
+ * Fixes spacing inconsistencies, improves typographic rhythm,
+ * and adds subtle polish while preserving the original character.
+ */
+
+/* ---- Typographic Scale & Rhythm ---- */
+/* Base unit: 0.5rem. All spacing aligns to this grid. */
+
+:root {
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+  --spacing-2xl: 3rem;
+}
+
+/* Slightly refined base typography */
+body {
+  font-size: 18px;
+  line-height: 1.6;
+  letter-spacing: 0.005em;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+/* ---- Sidebar Refinements ---- */
+
+.sidebar {
+  padding: var(--spacing-lg);
+  padding-top: 5rem;
+}
+
+.sidebar-section h3 {
+  font-size: 0.65rem;
+  letter-spacing: 0.14em;
+  margin-top: var(--spacing-xl);
+  margin-bottom: var(--spacing-sm);
+}
+
+.sidebar-section li a {
+  padding: 0.35rem 0.75rem;
+  margin: 2px 0;
+  font-size: 0.82rem;
+  letter-spacing: 0.01em;
+  border-radius: 6px;
+}
+
+.sidebar-section li.active a {
+  border-radius: 6px;
+}
+
+.sidebar-footer {
+  padding-top: var(--spacing-lg);
+}
+
+.sidebar-footer a {
+  font-size: 0.82rem;
+  padding: 0.4rem 0.75rem;
+  letter-spacing: 0.01em;
+}
+
+/* ---- Main Content Refinements ---- */
+
+.main-content {
+  padding: var(--spacing-xl) var(--spacing-xl);
+}
+
+@media (max-width: 1024px) {
+  .main-content {
+    padding: var(--spacing-md);
+    padding-top: 4rem;
+  }
+}
+
+/* ---- Feed Item Refinements ---- */
+
+.feed-item {
+  padding: var(--spacing-md) var(--spacing-sm);
+  margin-top: var(--spacing-xl);
+}
+
+.item-title {
+  font-size: 1.7rem;
+  line-height: 1.25;
+  letter-spacing: -0.015em;
+}
+
+.item-header {
+  margin-bottom: var(--spacing-sm);
+}
+
+.dateline {
+  font-size: 0.72em;
+  letter-spacing: 0.02em;
+  margin-bottom: var(--spacing-md);
+}
+
+.item-description {
+  line-height: 1.6;
+  margin-top: var(--spacing-md);
+}
+
+.item-description p {
+  margin-top: 0;
+  margin-bottom: var(--spacing-md);
+}
+
+.item-description p:last-child {
+  margin-bottom: 0;
+}
+
+/* ---- Settings Page Refinements ---- */
+/* This is where the biggest improvements are needed */
+
+.settings-view {
+  padding-top: var(--spacing-xl);
+}
+
+.settings-view h2 {
+  font-size: 1.8rem;
+  font-weight: 700;
+  margin-bottom: var(--spacing-2xl);
+  letter-spacing: -0.025em;
+}
+
+.settings-grid {
+  gap: var(--spacing-2xl);
+  margin-bottom: var(--spacing-2xl);
+}
+
+.settings-section {
+  margin: 0;
+  padding: 0;
+}
+
+.settings-section h3 {
+  font-size: 1.1rem;
+  font-weight: 700;
+  margin-bottom: var(--spacing-lg);
+  padding-bottom: var(--spacing-sm);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.settings-group,
+.data-group {
+  margin-bottom: var(--spacing-lg);
+}
+
+.settings-group label,
+.data-group label {
+  font-size: 0.75rem;
+  letter-spacing: 0.1em;
+  margin-bottom: var(--spacing-sm);
+}
+
+.theme-options {
+  gap: var(--spacing-sm);
+}
+
+/* Consistent button sizing */
+button,
+.button {
+  height: 2.2rem;
+  padding: 0 var(--spacing-md);
+  font-size: 0.75rem;
+  letter-spacing: 0.06em;
+  border-radius: 5px;
+}
+
+/* Add feed form alignment */
+.add-feed-form {
+  gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-xl);
+}
+
+.add-feed-form input {
+  height: 2.2rem;
+}
+
+/* Manage feeds list consistency */
+.manage-feeds-section {
+  margin-top: var(--spacing-2xl);
+}
+
+.manage-feed-item {
+  padding: var(--spacing-md) 0;
+  gap: var(--spacing-md);
+}
+
+.feed-title {
+  font-size: 0.95rem;
+  margin-bottom: var(--spacing-xs);
+}
+
+.feed-url {
+  font-size: 0.8rem;
+}
+
+/* Select inputs consistent with buttons */
+select {
+  height: 2.2rem;
+  font-size: 0.85rem;
+}
+
+/* ---- Subtle Polish ---- */
+
+/* Slightly softer selection highlight */
+.feed-item.selected {
+  border-radius: 6px;
+}
+
+/* Smoother scrollbar (webkit) */
+.sidebar-scroll::-webkit-scrollbar,
+.main-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.sidebar-scroll::-webkit-scrollbar-thumb,
+.main-content::-webkit-scrollbar-thumb {
+  background: rgba(128, 128, 128, 0.3);
+  border-radius: 3px;
+}
+
+.sidebar-scroll::-webkit-scrollbar-thumb:hover,
+.main-content::-webkit-scrollbar-thumb:hover {
+  background: rgba(128, 128, 128, 0.5);
+}
+
+/* Refined focus states */
+input:focus,
+select:focus {
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15);
+}
+
+/* Cleaner star button */
+.star-btn {
+  font-size: 1.1rem;
+  padding: 0 0 0 0.75rem;
+  transition: opacity 0.15s, color 0.15s;
+}
+
+.star-btn.is-unstarred {
+  opacity: 0.2;
+}
+
+.star-btn.is-unstarred:hover {
+  opacity: 0.5;
+}
+
+/* Import/export button groups: consistent spacing */
+.data-group .button-group {
+  gap: var(--spacing-sm);
+}
+
+/* Better scrape button */
+.scrape-btn {
+  font-size: 0.7rem;
+  padding: 2px 8px;
+  border-radius: 4px;
+  letter-spacing: 0.04em;
+}
diff --git a/web/dist/v3/themes/sakura.css b/web/dist/v3/themes/sakura.css
new file mode 100644
index 0000000..f0fc990
--- /dev/null
+++ b/web/dist/v3/themes/sakura.css
@@ -0,0 +1,466 @@
+/*
+ * Sakura Theme  --  Claude's Choice
+ * Named for the app: neko is Japanese for cat.
+ * A theme inspired by the quiet beauty of Japanese graphic design.
+ * Ma (negative space), wabi-sabi (beauty in imperfection),
+ * and the restrained palette of ukiyo-e woodblock prints.
+ * Warm grays, muted pinks, deliberate whitespace, and a sense of calm.
+ */
+
+/* ---- Color System ---- */
+:root {
+  --bg-color: #fafaf8;
+  --text-color: #373737;
+  --sidebar-bg: #f2f0ec;
+  --link-color: #c45b78;
+  --border-color: #e0ddd6;
+  --accent-color: #c45b78;
+
+  --sakura-blossom: #c45b78;
+  --sakura-petal: #f0c4cf;
+  --sakura-stone: #8c8a85;
+  --sakura-ink: #373737;
+  --sakura-paper: #fafaf8;
+  --sakura-cloud: #f2f0ec;
+  --sakura-shadow: #e0ddd6;
+  --sakura-indigo: #4a5568;
+
+  color-scheme: light;
+}
+
+/* Dark: Evening in Kyoto */
+.theme-dark {
+  --bg-color: #1a1a1e;
+  --text-color: #d5d3ce;
+  --sidebar-bg: #222226;
+  --link-color: #e8879e;
+  --border-color: #3a3a3e;
+  --accent-color: #e8879e;
+
+  --sakura-blossom: #e8879e;
+  --sakura-petal: #5c3a45;
+  --sakura-stone: #8c8a85;
+  --sakura-ink: #d5d3ce;
+  --sakura-paper: #1a1a1e;
+  --sakura-cloud: #222226;
+  --sakura-shadow: #3a3a3e;
+  --sakura-indigo: #a0aec0;
+}
+
+/* ---- Typography ---- */
+
+body {
+  font-family: 'Hiragino Mincho ProN', 'Noto Serif', 'Iowan Old Style', Palatino, Georgia, serif;
+  font-size: 18px;
+  line-height: 1.8;
+  letter-spacing: 0.01em;
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+/* ---- Sidebar ---- */
+
+.sidebar {
+  background: var(--sakura-cloud);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  border-right: 1px solid var(--sakura-shadow);
+  padding: 1.5rem;
+  padding-top: 5rem;
+}
+
+.theme-dark .sidebar {
+  background: var(--sakura-cloud);
+  border-right-color: var(--sakura-shadow);
+}
+
+.sidebar-section h3 {
+  font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Helvetica Neue', Helvetica, sans-serif;
+  font-size: 0.6rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+  color: var(--sakura-stone);
+  opacity: 1;
+}
+
+.theme-dark .sidebar-section h3 {
+  color: var(--sakura-stone);
+}
+
+.sidebar-section li a {
+  font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Helvetica Neue', Helvetica, sans-serif;
+  color: var(--text-color);
+  font-size: 0.82rem;
+  border-radius: 4px;
+  font-weight: 400;
+  letter-spacing: 0.01em;
+}
+
+.theme-dark .sidebar-section li a {
+  color: var(--text-color);
+}
+
+.sidebar-section li a:hover {
+  background: rgba(196, 91, 120, 0.06);
+  color: var(--sakura-blossom);
+  transform: none;
+}
+
+.theme-dark .sidebar-section li a:hover {
+  background: rgba(232, 135, 158, 0.08);
+  color: var(--sakura-blossom);
+}
+
+.sidebar-section li.active a {
+  background: rgba(196, 91, 120, 0.08);
+  color: var(--sakura-blossom);
+  box-shadow: none;
+  border: none;
+  border-left: 2px solid var(--sakura-blossom);
+  border-radius: 0 4px 4px 0;
+  padding-left: calc(0.8rem - 2px);
+  font-weight: 600;
+}
+
+.theme-dark .sidebar-section li.active a {
+  background: rgba(232, 135, 158, 0.1);
+  color: var(--sakura-blossom);
+}
+
+.sidebar-footer {
+  border-top: 1px solid var(--sakura-shadow);
+}
+
+.sidebar-footer a {
+  font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Helvetica Neue', Helvetica, sans-serif;
+  color: var(--text-color);
+  opacity: 0.45;
+  font-size: 0.82rem;
+}
+
+.theme-dark .sidebar-footer a {
+  color: var(--text-color);
+}
+
+.sidebar-footer a:hover {
+  opacity: 1;
+  color: var(--sakura-blossom);
+  background: rgba(196, 91, 120, 0.04);
+}
+
+/* Search */
+.sidebar-search input {
+  background: rgba(0, 0, 0, 0.03);
+  border: 1px solid var(--sakura-shadow);
+  border-radius: 4px;
+  color: var(--text-color);
+  font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
+}
+
+.theme-dark .sidebar-search input {
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--text-color);
+  border-color: var(--sakura-shadow);
+}
+
+.sidebar-search input:focus {
+  border-color: var(--sakura-blossom);
+  box-shadow: 0 0 0 2px rgba(196, 91, 120, 0.1);
+}
+
+/* ---- Toggle ---- */
+.theme-dark .sidebar-toggle {
+  background: none;
+}
+
+/* ---- Main Content ---- */
+
+.main-content {
+  background-color: var(--bg-color);
+  padding: 2.5rem 2rem;
+}
+
+.main-content > * {
+  max-width: 34em;
+}
+
+/* ---- Feed Items ---- */
+
+.feed-item {
+  padding: 0.5rem 0;
+  margin-top: 2.5rem;
+  border-radius: 0;
+  border-bottom: none;
+}
+
+/* Subtle separator -- a single thin rule, Japanese-style restraint */
+.feed-item + .feed-item {
+  border-top: 1px solid var(--sakura-shadow);
+  padding-top: 2.5rem;
+}
+
+.feed-item.selected {
+  background: rgba(196, 91, 120, 0.03);
+  box-shadow: inset 3px 0 0 var(--sakura-blossom);
+  padding-left: 1rem;
+  border-radius: 0;
+}
+
+.theme-dark .feed-item.selected {
+  background: rgba(232, 135, 158, 0.04);
+}
+
+.item-title {
+  font-family: 'Hiragino Mincho ProN', 'Noto Serif', Palatino, Georgia, serif;
+  font-size: 1.55rem;
+  line-height: 1.4;
+  font-weight: 600;
+  color: var(--sakura-ink);
+  letter-spacing: 0;
+}
+
+.theme-dark .item-title {
+  color: var(--text-color);
+}
+
+.item-title:hover {
+  color: var(--sakura-blossom);
+  text-decoration: none;
+}
+
+.dateline {
+  font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Helvetica Neue', sans-serif;
+  font-size: 0.72em;
+  letter-spacing: 0.03em;
+  color: var(--sakura-stone);
+  margin-bottom: 1rem;
+}
+
+.dateline a {
+  color: var(--sakura-stone);
+}
+
+.dateline a:hover {
+  color: var(--sakura-blossom);
+}
+
+.item-description {
+  font-family: 'Hiragino Mincho ProN', 'Noto Serif', 'Iowan Old Style', Palatino, Georgia, serif;
+  font-size: 1rem;
+  line-height: 1.85;
+  color: var(--text-color);
+}
+
+.item-description a {
+  color: var(--sakura-blossom);
+  text-decoration: none;
+  border-bottom: 1px solid rgba(196, 91, 120, 0.25);
+}
+
+.item-description a:hover {
+  border-bottom-color: var(--sakura-blossom);
+}
+
+.item-description blockquote {
+  border-left: 2px solid var(--sakura-petal);
+  margin-left: 0;
+  padding-left: 1.25em;
+  color: var(--sakura-stone);
+}
+
+.item-description pre {
+  background: rgba(0, 0, 0, 0.02);
+  border: 1px solid var(--sakura-shadow);
+  border-radius: 3px;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 0.88em;
+}
+
+.item-description img {
+  border-radius: 3px;
+}
+
+/* Star -- blossom colored when starred */
+.star-btn.is-starred {
+  color: var(--sakura-blossom);
+}
+
+.star-btn.is-unstarred {
+  color: var(--sakura-stone);
+  opacity: 0.2;
+}
+
+/* Scrape */
+.scrape-btn {
+  font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
+  color: var(--sakura-blossom);
+  border-color: var(--sakura-shadow);
+  background: transparent;
+  border-radius: 3px;
+  font-size: 0.72rem;
+  letter-spacing: 0.04em;
+}
+
+/* ---- Buttons ---- */
+
+button,
+.button {
+  font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Helvetica Neue', sans-serif;
+  border-radius: 4px;
+  border-color: var(--sakura-shadow);
+  background: transparent;
+  color: var(--text-color);
+  font-size: 0.78rem;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+button:hover,
+.button:hover {
+  border-color: var(--sakura-blossom);
+  color: var(--sakura-blossom);
+  background: rgba(196, 91, 120, 0.04);
+}
+
+.theme-dark button,
+.theme-dark .button {
+  background: transparent;
+  color: var(--text-color);
+  border-color: var(--sakura-shadow);
+}
+
+.theme-dark button:hover,
+.theme-dark .button:hover {
+  border-color: var(--sakura-blossom);
+  color: var(--sakura-blossom);
+  background: rgba(232, 135, 158, 0.06);
+}
+
+button.active,
+.theme-dark button.active {
+  background: var(--sakura-blossom);
+  color: #ffffff;
+  border-color: var(--sakura-blossom);
+}
+
+/* ---- Settings ---- */
+
+.settings-view {
+  font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Helvetica Neue', sans-serif;
+}
+
+.settings-view h2 {
+  font-family: 'Hiragino Mincho ProN', 'Noto Serif', Palatino, Georgia, serif;
+  font-weight: 400;
+  font-size: 1.8rem;
+  letter-spacing: 0.02em;
+}
+
+.settings-section h3 {
+  font-family: inherit;
+  font-weight: 500;
+  font-size: 1rem;
+  letter-spacing: 0.04em;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--sakura-shadow);
+}
+
+.settings-group label,
+.data-group label {
+  font-family: inherit;
+  letter-spacing: 0.1em;
+  font-size: 0.72rem;
+  font-weight: 500;
+}
+
+.theme-dark .settings-view,
+.theme-dark .settings-view h2,
+.theme-dark .settings-view h3,
+.theme-dark .settings-group label,
+.theme-dark .data-group label {
+  color: var(--text-color) !important;
+}
+
+/* Inputs */
+input[type="text"],
+input[type="url"],
+input[type="search"],
+select {
+  font-family: inherit;
+  background: transparent;
+  border: 1px solid var(--sakura-shadow);
+  border-radius: 4px;
+  color: var(--text-color);
+}
+
+input:focus,
+select:focus {
+  border-color: var(--sakura-blossom);
+  box-shadow: 0 0 0 2px rgba(196, 91, 120, 0.1);
+}
+
+/* Feed list */
+.manage-feed-list {
+  border-top-color: var(--sakura-shadow);
+}
+
+.manage-feed-item {
+  border-bottom-color: var(--sakura-shadow);
+}
+
+.feed-title {
+  font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
+  font-weight: 600;
+}
+
+.feed-url {
+  font-family: 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
+}
+
+.delete-feed-btn {
+  color: #c45b78 !important;
+  border-color: rgba(196, 91, 120, 0.3) !important;
+}
+
+.delete-feed-btn:hover {
+  background: rgba(196, 91, 120, 0.06) !important;
+  border-color: var(--sakura-blossom) !important;
+}
+
+/* ---- Scrollbars ---- */
+
+::-webkit-scrollbar {
+  width: 5px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--sakura-shadow);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--sakura-stone);
+}
+
+/* ---- Backdrop ---- */
+.sidebar-backdrop {
+  background: rgba(250, 250, 248, 0.5);
+  backdrop-filter: blur(4px);
+}
+
+.theme-dark .sidebar-backdrop {
+  background: rgba(26, 26, 30, 0.5);
+}
+
+/* ---- Loading/Empty ---- */
+.loading, .empty {
+  color: var(--sakura-stone);
+}
diff --git a/web/dist/v3/themes/terminal.css b/web/dist/v3/themes/terminal.css
new file mode 100644
index 0000000..f497dfa
--- /dev/null
+++ b/web/dist/v3/themes/terminal.css
@@ -0,0 +1,446 @@
+/*
+ * Terminal Theme
+ * Born-digital. CRT phosphor. The hum of the machine.
+ * Inspired by green-screen terminals, REZ, and the beauty of text on glass.
+ * Content-first -- the digital medium is the accent, not the show.
+ */
+
+/* ---- Color System ---- */
+:root {
+  --bg-color: #0a0e14;
+  --text-color: #b0bec5;
+  --sidebar-bg: #0d1117;
+  --link-color: #00e5ff;
+  --border-color: #1e2a35;
+  --accent-color: #00e5ff;
+
+  --terminal-glow: rgba(0, 229, 255, 0.08);
+  --terminal-dim: rgba(0, 229, 255, 0.03);
+  --terminal-green: #39ff14;
+  --terminal-cyan: #00e5ff;
+  --terminal-magenta: #ff00ff;
+  --terminal-amber: #ffab00;
+
+  color-scheme: dark;
+}
+
+/* Override dark theme if also applied */
+.theme-dark {
+  --bg-color: #0a0e14;
+  --text-color: #b0bec5;
+  --sidebar-bg: #0d1117;
+  --link-color: #00e5ff;
+  --border-color: #1e2a35;
+  --accent-color: #00e5ff;
+}
+
+/* ---- Typography ---- */
+
+body {
+  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', 'Courier New', monospace;
+  font-size: 15px;
+  line-height: 1.65;
+  letter-spacing: 0.02em;
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Subtle scanline overlay on the whole page */
+body::after {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 9999;
+  background: repeating-linear-gradient(
+    to bottom,
+    transparent,
+    transparent 2px,
+    rgba(0, 0, 0, 0.03) 2px,
+    rgba(0, 0, 0, 0.03) 4px
+  );
+}
+
+/* ---- Sidebar ---- */
+
+.sidebar {
+  background: var(--sidebar-bg);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  border-right: 1px solid var(--border-color);
+  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
+}
+
+.theme-dark .sidebar {
+  background: var(--sidebar-bg);
+  border-right-color: var(--border-color);
+}
+
+.sidebar-section h3 {
+  font-family: inherit;
+  color: var(--terminal-cyan);
+  opacity: 0.6;
+  font-size: 0.65rem;
+  letter-spacing: 0.2em;
+}
+
+.theme-dark .sidebar-section h3 {
+  color: var(--terminal-cyan);
+}
+
+.sidebar-section li a {
+  font-family: inherit;
+  color: var(--text-color);
+  border-radius: 2px;
+  font-size: 0.8rem;
+}
+
+.theme-dark .sidebar-section li a {
+  color: var(--text-color);
+}
+
+.sidebar-section li a:hover {
+  background: var(--terminal-glow);
+  color: var(--terminal-cyan);
+  transform: none;
+}
+
+.theme-dark .sidebar-section li a:hover {
+  background: var(--terminal-glow);
+  color: var(--terminal-cyan);
+}
+
+.sidebar-section li.active a {
+  background: var(--terminal-glow);
+  color: var(--terminal-cyan);
+  box-shadow: inset 2px 0 0 var(--terminal-cyan);
+  border: none;
+  border-radius: 0;
+  font-weight: 500;
+}
+
+.theme-dark .sidebar-section li.active a {
+  background: var(--terminal-glow);
+  color: var(--terminal-cyan);
+}
+
+.sidebar-footer {
+  border-top-color: var(--border-color);
+}
+
+.sidebar-footer a {
+  font-family: inherit;
+  color: var(--text-color);
+  opacity: 0.5;
+  font-size: 0.8rem;
+}
+
+.theme-dark .sidebar-footer a {
+  color: var(--text-color);
+}
+
+.sidebar-footer a:hover {
+  color: var(--terminal-cyan);
+  background: var(--terminal-dim);
+  opacity: 1;
+}
+
+/* Search */
+.sidebar-search input {
+  background: rgba(0, 229, 255, 0.05);
+  border: 1px solid var(--border-color);
+  border-radius: 2px;
+  color: var(--text-color);
+  font-family: inherit;
+}
+
+.theme-dark .sidebar-search input {
+  background: rgba(0, 229, 255, 0.05);
+  color: var(--text-color);
+  border-color: var(--border-color);
+}
+
+.sidebar-search input:focus {
+  border-color: var(--terminal-cyan);
+  box-shadow: 0 0 8px rgba(0, 229, 255, 0.15);
+}
+
+.sidebar-search input::placeholder {
+  color: rgba(176, 190, 197, 0.3);
+}
+
+/* ---- Toggle ---- */
+.sidebar-toggle {
+  opacity: 0.6;
+}
+
+.theme-dark .sidebar-toggle {
+  background: none;
+}
+
+.sidebar-toggle:hover {
+  opacity: 1;
+}
+
+/* ---- Main Content ---- */
+
+.main-content {
+  background-color: var(--bg-color);
+}
+
+/* ---- Feed Items ---- */
+
+.feed-item {
+  border-radius: 0;
+  padding: 1.25rem 0.5rem;
+  margin-top: 1.5rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.feed-item.selected {
+  background-color: var(--terminal-dim);
+  box-shadow: inset 3px 0 0 var(--terminal-cyan);
+  border-radius: 0;
+}
+
+.theme-dark .feed-item.selected {
+  background-color: var(--terminal-dim);
+}
+
+.item-title {
+  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
+  font-size: 1.4rem;
+  line-height: 1.35;
+  color: var(--terminal-cyan);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.item-title:hover {
+  color: #ffffff;
+  text-shadow: 0 0 12px rgba(0, 229, 255, 0.3);
+  text-decoration: none;
+}
+
+.dateline {
+  color: rgba(176, 190, 197, 0.35);
+  font-family: inherit;
+  font-size: 0.75em;
+  letter-spacing: 0.04em;
+}
+
+.dateline a {
+  color: rgba(176, 190, 197, 0.35);
+}
+
+.dateline a:hover {
+  color: var(--terminal-cyan);
+}
+
+.item-description {
+  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
+  font-size: 0.9rem;
+  line-height: 1.7;
+  color: var(--text-color);
+}
+
+.item-description a {
+  color: var(--terminal-cyan);
+}
+
+.item-description a:hover {
+  text-shadow: 0 0 8px rgba(0, 229, 255, 0.2);
+}
+
+.item-description pre {
+  background: rgba(0, 229, 255, 0.04);
+  border: 1px solid var(--border-color);
+  border-radius: 2px;
+  font-family: inherit;
+}
+
+/* Star */
+.star-btn.is-starred {
+  color: var(--terminal-amber);
+}
+
+.star-btn.is-unstarred {
+  color: var(--text-color);
+  opacity: 0.15;
+}
+
+/* Scrape */
+.scrape-btn {
+  font-family: inherit;
+  color: var(--terminal-cyan);
+  border-color: var(--border-color);
+  background: transparent;
+  border-radius: 2px;
+}
+
+.scrape-btn:hover {
+  border-color: var(--terminal-cyan);
+  box-shadow: 0 0 6px rgba(0, 229, 255, 0.15);
+}
+
+/* ---- Buttons ---- */
+
+button,
+.button {
+  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
+  border-radius: 2px;
+  border-color: var(--border-color);
+  background: transparent;
+  color: var(--text-color);
+  font-size: 0.72rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+button:hover,
+.button:hover {
+  border-color: var(--terminal-cyan);
+  color: var(--terminal-cyan);
+  background: var(--terminal-dim);
+}
+
+.theme-dark button,
+.theme-dark .button {
+  background: transparent;
+  color: var(--text-color);
+  border-color: var(--border-color);
+}
+
+.theme-dark button:hover,
+.theme-dark .button:hover {
+  border-color: var(--terminal-cyan);
+  color: var(--terminal-cyan);
+  background: var(--terminal-dim);
+}
+
+button.active,
+.theme-dark button.active {
+  background: var(--terminal-cyan);
+  color: var(--bg-color);
+  border-color: var(--terminal-cyan);
+}
+
+/* ---- Settings ---- */
+
+.settings-view {
+  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
+}
+
+.settings-view h2 {
+  color: var(--terminal-cyan);
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  font-size: 1.5rem;
+}
+
+.settings-section h3 {
+  color: var(--text-color);
+  font-family: inherit;
+  font-size: 1rem;
+  letter-spacing: 0.04em;
+}
+
+.settings-group label,
+.data-group label {
+  color: var(--text-color);
+  font-family: inherit;
+  letter-spacing: 0.12em;
+}
+
+.theme-dark .settings-view,
+.theme-dark .settings-view h2,
+.theme-dark .settings-view h3,
+.theme-dark .settings-group label,
+.theme-dark .data-group label {
+  color: var(--text-color) !important;
+}
+
+/* Inputs */
+input[type="text"],
+input[type="url"],
+input[type="search"],
+select {
+  font-family: inherit;
+  background: rgba(0, 229, 255, 0.04);
+  border: 1px solid var(--border-color);
+  border-radius: 2px;
+  color: var(--text-color);
+}
+
+input:focus,
+select:focus {
+  border-color: var(--terminal-cyan);
+  box-shadow: 0 0 8px rgba(0, 229, 255, 0.15);
+}
+
+/* Feed list in settings */
+.manage-feed-list {
+  border-top-color: var(--border-color);
+}
+
+.manage-feed-item {
+  border-bottom-color: var(--border-color);
+}
+
+.feed-title {
+  font-family: inherit;
+  color: var(--text-color);
+}
+
+.feed-url {
+  font-family: inherit;
+  color: var(--text-color);
+  opacity: 0.4;
+}
+
+/* Delete button */
+.delete-feed-btn {
+  color: #ff5252 !important;
+  border-color: rgba(255, 82, 82, 0.3) !important;
+}
+
+.delete-feed-btn:hover {
+  border-color: #ff5252 !important;
+  box-shadow: 0 0 6px rgba(255, 82, 82, 0.2) !important;
+  background: rgba(255, 82, 82, 0.08) !important;
+}
+
+/* ---- Scrollbars ---- */
+
+::-webkit-scrollbar {
+  width: 5px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(0, 229, 255, 0.15);
+  border-radius: 0;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 229, 255, 0.3);
+}
+
+/* ---- Backdrop ---- */
+.sidebar-backdrop {
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(2px);
+}
+
+/* ---- Loading/Empty States ---- */
+.loading, .empty {
+  color: rgba(176, 190, 197, 0.4);
+  font-family: inherit;
+}