Upgrade atlas graph and desktop reader layout

web/static/styles.css

@@ -1,17 +1,17 @@
 :root {
-  --bg: #f4f2ec;
-  --surface: #fffefa;
-  --surface-2: #ece8df;
+  --bg: #eef0ed;
+  --surface: #fcfcf8;
+  --surface-2: #e6ece8;
   --ink: #171a18;
   --muted: #6d716c;
-  --line: #ddd8cb;
+  --line: #d5ddd3;
   --teal: #0d766f;
   --teal-2: #cfe8e3;
   --coral: #ba5644;
   --gold: #aa7419;
   --green: #527b46;
   --violet: #665d9f;
-  --shadow: 0 18px 50px rgba(35, 31, 24, 0.1);
+  --shadow: 0 20px 54px rgba(23, 31, 28, 0.11);
 }
 
 * {
@@ -58,7 +58,7 @@ button {
   gap: 18px;
   padding: 16px 22px;
   border-bottom: 1px solid var(--line);
-  background: rgba(255, 254, 250, 0.94);
+  background: rgba(252, 252, 248, 0.94);
   backdrop-filter: blur(14px);
   position: sticky;
   top: 0;
@@ -215,26 +215,49 @@ button {
 }
 
 .atlas-stage {
+  position: relative;
+  isolation: isolate;
   height: min(58vh, 560px);
   min-height: 420px;
   border: 1px solid var(--line);
   border-radius: 8px;
   background:
-    linear-gradient(90deg, rgba(23, 26, 24, 0.035) 1px, transparent 1px),
-    linear-gradient(0deg, rgba(23, 26, 24, 0.035) 1px, transparent 1px),
-    #fffefa;
-  background-size: 34px 34px;
+    linear-gradient(90deg, rgba(25, 34, 30, 0.045) 1px, transparent 1px),
+    linear-gradient(0deg, rgba(25, 34, 30, 0.045) 1px, transparent 1px),
+    linear-gradient(135deg, rgba(13, 118, 111, 0.08), transparent 42%),
+    linear-gradient(315deg, rgba(186, 86, 68, 0.07), transparent 38%),
+    #f8faf5;
+  background-size: 34px 34px, 34px 34px, 100% 100%, 100% 100%, auto;
   box-shadow: var(--shadow);
   overflow: hidden;
 }
 
+.atlas-stage::after {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  content: "";
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 24%),
+    linear-gradient(0deg, rgba(19, 25, 22, 0.045), transparent 26%);
+}
+
+.atlas-chart,
 #atlasSvg {
+  position: relative;
+  z-index: 1;
   width: 100%;
   height: 100%;
   min-height: 420px;
   display: block;
 }
 
+.atlas-chart[hidden],
+#atlasSvg[hidden] {
+  display: none;
+}
+
 .atlas-edge {
   stroke: rgba(82, 85, 79, 0.24);
   stroke-linecap: round;
@@ -544,6 +567,99 @@ button {
   display: none;
 }
 
+@media (min-width: 1181px) {
+  html,
+  body {
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .atlas-app {
+    height: 100vh;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .workspace {
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .map-panel,
+  .lens-panel {
+    height: 100%;
+    min-height: 0;
+  }
+
+  .map-panel {
+    overflow: auto;
+    overflow-x: hidden;
+    scrollbar-gutter: stable;
+  }
+
+  .lens-panel {
+    overflow: hidden;
+  }
+
+  .lens-body {
+    overflow: auto;
+  }
+
+  .reader-mode .workspace {
+    grid-template-columns: minmax(430px, 0.78fr) minmax(660px, 1.22fr);
+  }
+
+  .reader-mode .map-head {
+    align-items: flex-start;
+    flex-wrap: wrap;
+  }
+
+  .reader-mode .map-head h2 {
+    font-size: 24px;
+  }
+
+  .reader-mode .atlas-actions {
+    justify-content: flex-start;
+  }
+
+  .reader-mode .route-list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .reader-mode .lens-head {
+    padding: 22px 30px;
+  }
+
+  .reader-mode .lens-body {
+    padding: 0 30px 38px;
+  }
+
+  .reader-mode .lens-body .section {
+    max-width: 900px;
+    margin: 0 auto;
+  }
+
+  .reader-mode .lens-head h2 {
+    font-size: 26px;
+  }
+
+  .reader-mode .reader-title {
+    font-size: 24px;
+    line-height: 1.22;
+  }
+
+  .reader-mode .reader-box,
+  .reader-mode .ai-box {
+    padding: 18px;
+  }
+
+  .reader-mode .markdown-preview,
+  .reader-mode .ai-output,
+  .reader-mode .abstract-text {
+    font-size: 15px;
+  }
+}
+
 @media (max-width: 1180px) {
   .topbar {
     grid-template-columns: 1fr;
@@ -636,6 +752,7 @@ button {
     max-width: calc(100vw - 28px);
   }
 
+  .atlas-chart,
   #atlasSvg {
     min-height: 360px;
     width: 100%;