diff --git a/public/styles.css b/public/styles.css
index cb19b77..7fb6a68 100755
--- a/public/styles.css
+++ b/public/styles.css
@@ -1,264 +1,172 @@
-/* ============================================================
-   The Fold Within — Styles v2.6.2
-   Independent Scroll + Desktop Collapse + Overlap Fix
-   ============================================================ */
+/* ---------- Theme tokens ---------- */
+:root{
+  --bg:#0c0c0c;
+  --panel:#141414;
+  --muted:#1d1d1d;
+  --text:#e6e3d7;
+  --sub:#b9b39a;
+  --gold:#d4af37;
+  --line:#61521a;
 
-:root {
-  --bg: #0b0c10;
-  --fg: #f3f3f3;
-  --accent: #d0aa5b;
-  --muted: #8d8f95;
-  --line: #2a2d34;
+  --topbar-h:56px;
+  --sidebar-w:320px;
+  --gap:16px;
+
+  --shadow:0 8px 24px rgba(0,0,0,.35);
+  --ring:0 0 0 1px rgba(212,175,55,.25);
+  --radius:12px;
+
+  color-scheme: dark;
 }
 
-/* Base */
-html, body {
-  margin: 0;
-  padding: 0;
-  background: var(--bg);
-  color: var(--fg);
-  font-family: system-ui, sans-serif;
-  height: 100%;
-  overflow: hidden;
-  -webkit-font-smoothing: antialiased;
+*{ box-sizing:border-box }
+html,body{ height:100% }
+body{
+  margin:0;
+  font:16px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
+  background:var(--bg);
+  color:var(--text);
 }
 
-/* ============================================================
-   Topbar
-   ============================================================ */
-.topbar {
-  position: fixed;
-  top: 0; left: 0; right: 0;
-  height: 48px;
-  display: flex;
-  align-items: center;
-  gap: 1em;
-  background: #111;
-  padding: 0 1em;
-  z-index: 300;
-  box-shadow: 0 2px 8px rgba(0,0,0,.3);
-}
-.topbar a {
-  color: var(--accent);
-  text-decoration: none;
-  font-weight: 500;
-}
-.topbar a:hover { color: var(--fg); }
-.topbar button {
-  font-size: 24px;
-  background: transparent;
-  color: var(--accent);
-  border: none;
-  padding: 4px 8px;
-  cursor: pointer;
-}
-.topbar button:hover { color: var(--fg); }
-
-/* ============================================================
-   Layout Containers
-   ============================================================ */
-.page {
-  display: flex;
-  position: relative;
-  height: calc(100vh - 48px);
-  margin-top: 48px;
-  overflow: hidden;
+/* ---------- Top bar ---------- */
+.topbar{
+  position:sticky; top:0; z-index:50;
+  height:var(--topbar-h);
+  display:flex; align-items:center; gap:12px;
+  padding:0 12px 0 8px;
+  background:linear-gradient(180deg, #0f0f0f, #0b0b0b);
+  border-bottom:1px solid #151515;
+  box-shadow:var(--shadow);
 }
 
-/* ============================================================
-   Sidebar (base shared)
-   ============================================================ */
-.sidebar {
-  background: #111;
-  width: 280px;
-  overflow-y: auto;
-  transform: translateX(0);
-  transition: transform .3s ease, width .3s ease;
-  padding: 10px;
-  z-index: 200;
-  border-right: 1px solid var(--line);
+.icon-btn{
+  min-width:44px; height:36px; padding:0 10px;
+  display:inline-grid; place-items:center;
+  border-radius:10px; border:1px solid #262626;
+  background:#121212; color:var(--text);
+  cursor:pointer; user-select:none;
+}
+.icon-btn:focus-visible{ outline:2px solid var(--gold) }
+
+.primary-nav{
+  display:flex; gap:18px;
+  align-items:center;
+  padding-left:4px;
+}
+.primary-nav a{
+  color:var(--gold); text-decoration:none; font-weight:600; letter-spacing:.2px;
+}
+.primary-nav .brand{ margin-right:6px }
+
+.spacer{ flex:1 }
+
+/* ---------- Layout ---------- */
+#appLayout{
+  display:flex;
+  min-height:calc(100vh - var(--topbar-h));
 }
 
-/* collapsed (desktop + mobile toggle) */
-.sidebar.collapsed {
-  transform: translateX(-280px);
+/* Sidebar */
+.sidebar{
+  position:relative;
+  width:var(--sidebar-w);
+  flex:0 0 var(--sidebar-w);
+  background:var(--panel);
+  border-right:1px solid #191919;
+  overflow:auto; /* independent scroll */
+  will-change:transform;
+  transition:transform .25s ease;
+  z-index:20;
 }
 
-.overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0,0,0,.45);
-  backdrop-filter: blur(4px);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity .3s ease;
-  z-index: 150;
+/* Desktop collapse support */
+body.sidebar-collapsed .sidebar{
+  transform:translateX(calc(-1 * var(--sidebar-w)));
 }
-.sidebar.open ~ .overlay {
-  opacity: 1;
-  pointer-events: all;
+body.sidebar-collapsed .content{
+  margin-left:0;
 }
 
-/* ============================================================
-   Desktop Sidebar (≥900px)
-   ============================================================ */
-@media (min-width:900px){
-  .sidebar {
-    position: fixed;
-    top: 48px;
-    bottom: 0;
-    left: 0;
-    width: 280px;
-    transform: none;
-  }
-  .sidebar.collapsed {
-    transform: translateX(-280px);
+/* Mobile overlay behaviour */
+@media (max-width: 1024px){
+  .sidebar{
+    position:fixed; inset:var(--topbar-h) auto 0 0;
+    max-height:calc(100vh - var(--topbar-h));
+    box-shadow:var(--shadow);
+    transform:translateX(-100%);
   }
+  body.sidebar-open .sidebar{ transform:none }
 }
 
-/* ============================================================
-   Content Area
-   ============================================================ */
-.content {
-  flex: 1;
-  position: relative;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 16px;
-  box-sizing: border-box;
-  max-width: 960px;
-  margin-left: 280px;
-  transition: margin-left .3s ease;
+/* Content area */
+.content{
+  position:relative;
+  flex:1 1 auto;
+  margin-left:var(--sidebar-w);
+  padding:20px clamp(12px, 3vw, 28px);
+  transition:margin-left .25s ease;
 }
-.content.full {
-  margin-left: 0;
-}
-@media(max-width:899px){
-  .content { margin-left: 0; padding: 12px; }
+@media (max-width:1024px){
+  .content{ margin-left:0 }
 }
 
-/* ============================================================
-   Viewer + HTML Frame
-   ============================================================ */
-.viewer, #htmlView {
-  display: block;
-  width: 100%;
-  flex: 1 1 auto;
-  margin-top: 0;
-  padding-top: 0;
-  min-height: calc(100vh - 48px);
-  overflow-y: auto;
-  transition: opacity .25s ease;
-}
-.viewer.fade-in, #htmlView.fade-in { opacity: 1; }
-.viewer:not(.fade-in), #htmlView:not(.fade-in) { opacity: 0; }
-#htmlView { border: none; background: #0b0c10; }
-
-/* ============================================================
-   Markdown Formatting
-   ============================================================ */
-#mdView h1, #mdView h2, #mdView h3 { color: var(--accent); }
-#mdView pre, #mdView code {
-  overflow-x: auto;
-  background: #111;
-  padding: .5em;
-  border-radius: 4px;
-  color: var(--accent);
-}
-#mdView blockquote {
-  border-left: 3px solid var(--accent);
-  padding-left: 12px;
-  color: var(--muted);
-  font-style: italic;
-}
-#mdView a { color: var(--accent); }
-#mdView img { max-width: 100%; border-radius: 8px; }
-
-/* ============================================================
-   Warnings + Meta + Pager
-   ============================================================ */
-.md-warn {
-  background: #3b0c0c;
-  color: #ffd4d4;
-  border: 1px solid #6c1f1f;
-  border-radius: 8px;
-  padding: 10px 12px;
-  margin: 10px auto;
-  max-width: 820px;
-}
-.meta { color: var(--muted); margin-bottom: 12px; font-size: .9em; }
-
-.pager {
-  display: flex;
-  justify-content: space-between;
-  padding: 8px 0;
-}
-button#prev, button#next {
-  background: transparent;
-  border: 1px solid var(--line);
-  color: var(--fg);
-  border-radius: 8px;
-  padding: 4px 10px;
-  cursor: pointer;
-}
-button#prev:hover, button#next:hover {
-  border-color: var(--accent);
-  color: var(--accent);
+/* When desktop collapsed via toggle button */
+@media (min-width:1025px){
+  body.sidebar-open .sidebar{ transform:none }
+  body.sidebar-open .content{ margin-left:var(--sidebar-w) }
 }
 
-/* ============================================================
-   Tree + Controls
-   ============================================================ */
-.controls { display: flex; gap: .5em; margin-bottom: 8px; }
-select, #search {
-  background: #0b0c10;
-  color: var(--fg);
-  border: 1px solid var(--line);
-  border-radius: 4px;
-  padding: 6px;
+/* Sidebar header */
+.side-head{
+  position:sticky; top:0; z-index:5;
+  background:linear-gradient(180deg, #171717, #131313);
+  border-bottom:1px solid #1c1c1c;
+  padding:10px;
 }
-.dir .label {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  padding: 4px 6px;
-  color: var(--accent);
-  font-weight: 600;
+.filters{ display:flex; gap:8px; align-items:center }
+.filters select{
+  height:34px; background:#101010; color:var(--text);
+  border:1px solid #2a2a2a; border-radius:10px; padding:0 8px;
 }
-.dir .label::before {
-  content: "▶";
-  margin-right: 6px;
-  font-size: .8em;
-  color: var(--muted);
+.search{ margin-top:8px }
+.search input{
+  width:100%; height:36px; background:#0e0e0e; color:var(--text);
+  border:1px solid #252525; border-radius:10px; padding:0 10px;
 }
-.dir.open .label::before { content: "▼"; }
 
-/* ============================================================
-   Mobile (≤899px)
-   ============================================================ */
-@media (max-width:899px){
-  .sidebar {
-    position: fixed !important;
-    top: 48px !important;
-    bottom: 0 !important;
-    left: 0 !important;
-    width: 85% !important;
-    max-width: 320px !important;
-    background: #111 !important;
-    transform: translateX(-100%) !important;
-    transition: transform .3s ease;
-    overflow-y: auto;
-    z-index: 200 !important;
-  }
-  .sidebar.open { transform: translateX(0) !important; }
-  .overlay { opacity: 0; pointer-events: none; }
-  .sidebar.open ~ .overlay {
-    opacity: 1; pointer-events: all;
-  }
-  main.content {
-    margin-left: 0 !important;
-    height: auto !important;
-    overflow-y: auto;
-    padding: 12px;
-  }
+/* Tree list */
+.tree{ padding:10px }
+.tree a{
+  display:block; padding:8px 10px; margin:2px 0;
+  border-radius:10px;
+  color:var(--text); text-decoration:none;
+}
+.tree a:hover{ background:#111 }
+.tree .meta{ color:var(--sub); font-size:.85rem }
+
+/* Viewer */
+.viewer{
+  background:radial-gradient(1200px 600px at 20% 10%, rgba(212,175,55,.05), transparent 60%);
+  border:1px solid #1a1a1a;
+  border-radius:var(--radius);
+  padding:clamp(16px, 2.5vw, 32px);
+  box-shadow:var(--ring);
+  min-height:40vh; /* no giant fixed heights */
+}
+.viewer .empty{ opacity:.75 }
+.viewer h1,h2,h3{ color:var(--gold); margin:0 0 .75rem }
+.viewer h1{ font-size:clamp(1.8rem, 4vw, 2.6rem) }
+.viewer blockquote{
+  margin:1rem 0; padding:0 0 0 1rem; border-left:4px solid var(--line); color:var(--sub)
+}
+.viewer hr{ border:0; border-top:1px solid #222; margin:1.5rem 0 }
+.viewer img, .viewer iframe{ max-width:100%; display:block; border-radius:12px }
+
+/* Prev/Next (optional anchors you add in content) */
+.pager{ display:flex; justify-content:space-between; margin-top:2rem; color:var(--sub) }
+
+/* Utilities */
+.visually-hidden{
+  position:absolute !important; height:1px; width:1px; overflow:hidden;
+  clip:rect(1px,1px,1px,1px); white-space:nowrap;
 }
\ No newline at end of file