Add welcome landing screen

app/renderer/style.css

@@ -53,6 +53,14 @@ body {
 
 #app { display: flex; flex-direction: column; height: 100vh; }
 #view { flex: 1; min-height: 0; display: flex; }
+#welcome-host,
+#library-host,
+#editor-host {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+}
 .hidden { display: none !important; }
 .muted { color: var(--muted); font-size: 12px; }
 
@@ -155,6 +163,63 @@ kbd {
 
 .library, .editor { flex: 1; min-height: 0; display: flex; }
 
+.welcome {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: clamp(28px, 7vh, 76px) clamp(28px, 6vw, 92px) clamp(24px, 8vh, 72px);
+}
+.welcome-hero {
+  width: min(760px, 100%);
+  margin: clamp(32px, 12vh, 132px) auto 0;
+  text-align: center;
+}
+.welcome-kicker {
+  margin-bottom: 12px;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 650;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+.welcome-hero h1 {
+  margin: 0;
+  font-size: clamp(44px, 5vw, 72px);
+  line-height: 1.03;
+  letter-spacing: -0.04em;
+}
+.welcome-hero p {
+  margin: 16px auto 0;
+  max-width: 560px;
+  color: var(--muted);
+  font-size: 15px;
+}
+.welcome-actions {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+  width: min(940px, 100%);
+  margin: 0 auto;
+}
+.welcome-action {
+  min-height: 60px;
+  padding: 15px 18px;
+  border-radius: 16px;
+  font-size: 15px;
+  box-shadow: var(--shadow);
+}
+.welcome-actions .primary {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--accent-fg);
+}
+.welcome-actions .primary:hover {
+  background: var(--accent-strong);
+  border-color: var(--accent-strong);
+}
+
 .lib-side {
   width: 248px;
   min-width: 248px;
@@ -671,3 +736,15 @@ fieldset legend {
   border-top: 1px solid var(--border);
 }
 
+@media (max-width: 820px) {
+  .welcome {
+    padding: 24px 20px 28px;
+  }
+  .welcome-hero {
+    margin-top: 72px;
+  }
+  .welcome-actions {
+    grid-template-columns: 1fr;
+    width: min(440px, 100%);
+  }
+}