Replace native menu with custom titlebar

src/styles.css

@@ -140,9 +140,71 @@ textarea:focus {
 .appShell {
   display: grid;
   gap: 12px;
-  grid-template-rows: auto auto minmax(260px, 1fr) minmax(160px, 0.52fr);
+  grid-template-rows: 34px auto auto minmax(260px, 1fr) minmax(160px, 0.52fr);
   height: 100%;
   padding: 14px;
+  padding-top: 8px;
+}
+
+.titlebar {
+  -webkit-app-region: drag;
+  align-items: center;
+  background: color-mix(in srgb, var(--surface) 88%, var(--bg));
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  display: flex;
+  justify-content: space-between;
+  overflow: hidden;
+}
+
+.titlebarBrand {
+  align-items: center;
+  color: var(--muted);
+  display: flex;
+  font-size: 0.82rem;
+  font-weight: 800;
+  gap: 8px;
+  padding-left: 10px;
+}
+
+.titlebarMark {
+  align-items: center;
+  background: var(--accent-soft);
+  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
+  border-radius: 6px;
+  color: var(--accent-strong);
+  display: flex;
+  font-size: 0.66rem;
+  height: 20px;
+  justify-content: center;
+  width: 24px;
+}
+
+.windowControls {
+  -webkit-app-region: no-drag;
+  align-items: stretch;
+  display: flex;
+  height: 100%;
+}
+
+.windowControls button {
+  background: transparent;
+  border-radius: 0;
+  color: var(--muted);
+  min-height: 0;
+  min-width: 44px;
+  padding: 0;
+}
+
+.windowControls button:hover {
+  background: var(--surface-subtle);
+  color: var(--text);
+  transform: none;
+}
+
+.windowControls .closeButton:hover {
+  background: #c93d32;
+  color: #fff;
 }
 
 .toolbar {
@@ -504,7 +566,7 @@ textarea::selection {
 
 @media (max-width: 1100px) {
   .appShell {
-    grid-template-rows: auto auto minmax(420px, 1fr) minmax(320px, auto);
+    grid-template-rows: 34px auto auto minmax(420px, 1fr) minmax(320px, auto);
     overflow: auto;
   }