diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx
index b80ea0c..9be037f 100644
--- a/src/components/Editor.tsx
+++ b/src/components/Editor.tsx
@@ -1,23 +1,30 @@
 "use client";
 
 import { useEffect, useRef, useState, useSyncExternalStore } from "react";
-import { Pencil, Eye, Maximize2, Columns2 } from "lucide-react";
+import { Pencil, Eye, PanelLeft, Columns2, PanelRight } from "lucide-react";
 import { useEditorStore } from "@/lib/store";
-import { SHORTCUTS, applyEdit } from "@/lib/md-edit";
+import { SHORTCUTS, applyEdit, insertAtCursor } from "@/lib/md-edit";
 import { Toolbar } from "./Toolbar";
 import { Preview } from "./Preview";
 
 const noopSubscribe = () => () => {};
 type View = "write" | "preview";
+const MIN = 0.15;
+const MAX = 0.85;
 
 export function Editor() {
   const markdown = useEditorStore((s) => s.markdown);
   const setMarkdown = useEditorStore((s) => s.setMarkdown);
   const pageSize = useEditorStore((s) => s.options.pageSize);
+  const ratio = useEditorStore((s) => s.splitRatio);
+  const setSplitRatio = useEditorStore((s) => s.setSplitRatio);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   const [view, setView] = useState<View>("write"); // mobile/tablet only
-  const [focus, setFocus] = useState(false); // desktop: hide preview
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [dragging, setDragging] = useState(false);
+  const rectRef = useRef<{ left: number; width: number } | null>(null);
+  const rafRef = useRef<number | null>(null);
 
   const mounted = useSyncExternalStore(noopSubscribe, () => true, () => false);
 
@@ -27,6 +34,56 @@ export function Editor() {
     return () => clearTimeout(id);
   }, [markdown]);
 
+  // Divider drag (desktop). Width is cached at drag start; updates are
+  // rAF-throttled. The preview only reflows — it never re-parses on resize.
+  useEffect(() => {
+    if (!dragging) return;
+    function onMove(e: MouseEvent) {
+      const rect = rectRef.current;
+      if (!rect || rafRef.current) return;
+      rafRef.current = requestAnimationFrame(() => {
+        rafRef.current = null;
+        const x = (e.clientX - rect.left) / rect.width;
+        setSplitRatio(Math.min(MAX, Math.max(MIN, x)));
+      });
+    }
+    function onUp() {
+      setDragging(false);
+    }
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+    const prevSelect = document.body.style.userSelect;
+    const prevCursor = document.body.style.cursor;
+    document.body.style.userSelect = "none";
+    document.body.style.cursor = "col-resize";
+    return () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+      document.body.style.userSelect = prevSelect;
+      document.body.style.cursor = prevCursor;
+    };
+  }, [dragging, setSplitRatio]);
+
+  function startDrag(e: React.MouseEvent) {
+    const el = containerRef.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    rectRef.current = { left: r.left, width: r.width };
+    setDragging(true);
+    e.preventDefault();
+  }
+
+  function onDividerKey(e: React.KeyboardEvent) {
+    if (e.key === "ArrowLeft") setSplitRatio(Math.max(MIN, ratio - 0.02));
+    else if (e.key === "ArrowRight") setSplitRatio(Math.min(MAX, ratio + 0.02));
+    else if (e.key === "Home") setSplitRatio(MIN);
+    else if (e.key === "End") setSplitRatio(MAX);
+    else return;
+    e.preventDefault();
+  }
+
   function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
     const el = e.currentTarget;
     const mod = e.metaKey || e.ctrlKey;
@@ -34,16 +91,9 @@ export function Editor() {
     if (transform) {
       e.preventDefault();
       applyEdit(el, markdown, setMarkdown, transform);
-      return;
-    }
-    if (e.key === "Tab") {
+    } else if (e.key === "Tab") {
       e.preventDefault();
-      const start = el.selectionStart;
-      const end = el.selectionEnd;
-      setMarkdown(markdown.slice(0, start) + "  " + markdown.slice(end));
-      requestAnimationFrame(() => {
-        el.selectionStart = el.selectionEnd = start + 2;
-      });
+      insertAtCursor(el, "  ", setMarkdown);
     }
   }
 
@@ -57,6 +107,10 @@ export function Editor() {
 
   const words = markdown.trim() ? markdown.trim().split(/\s+/).length : 0;
   const minutes = Math.max(1, Math.round(words / 200));
+  const editorOnly = ratio >= 0.98;
+  const previewOnly = ratio <= 0.02;
+  const isSplit = !editorOnly && !previewOnly;
+  const gridTemplate = `minmax(0, ${ratio}fr) ${isSplit ? 7 : 0}px minmax(0, ${1 - ratio}fr)`;
 
   return (
     <div className="flex min-h-0 flex-1 flex-col">
@@ -66,12 +120,16 @@ export function Editor() {
         <TabButton active={view === "preview"} onClick={() => setView("preview")} icon={<Eye size={15} />} label="Preview" />
       </div>
 
-      <div className={`grid min-h-0 flex-1 ${focus ? "lg:grid-cols-1" : "lg:grid-cols-2"}`}>
+      <div
+        ref={containerRef}
+        className="block min-h-0 flex-1 lg:grid"
+        style={{ gridTemplateColumns: gridTemplate }}
+      >
         {/* Shell — where you type */}
         <section
-          className={`min-h-0 flex-col border-shell-line lg:flex ${
-            focus ? "" : "lg:border-r"
-          } ${view === "write" ? "flex" : "hidden"}`}
+          className={`min-h-0 flex-col lg:col-start-1 lg:flex ${
+            view === "write" ? "flex" : "hidden"
+          } ${previewOnly ? "lg:hidden" : ""}`}
         >
           <Toolbar textareaRef={textareaRef} value={markdown} onChange={setMarkdown} />
           <textarea
@@ -86,33 +144,49 @@ export function Editor() {
           />
         </section>
 
+        {/* Draggable divider (desktop only) */}
+        <div
+          role="separator"
+          aria-orientation="vertical"
+          aria-label="Resize editor and preview"
+          aria-valuenow={Math.round(ratio * 100)}
+          aria-valuemin={Math.round(MIN * 100)}
+          aria-valuemax={Math.round(MAX * 100)}
+          tabIndex={isSplit ? 0 : -1}
+          onMouseDown={startDrag}
+          onDoubleClick={() => setSplitRatio(0.5)}
+          onKeyDown={onDividerKey}
+          title="Drag to resize · double-click to reset"
+          className={`group relative hidden cursor-col-resize items-center justify-center bg-shell-line focus-ring lg:col-start-2 lg:flex ${
+            isSplit ? "" : "pointer-events-none invisible"
+          } ${dragging ? "bg-rust" : "hover:bg-rust/60"}`}
+        >
+          <span className="h-8 w-1 rounded-full bg-chalk-dim/50 transition-colors group-hover:bg-white/80" />
+        </div>
+
         {/* Paper — what you make */}
-        <section className={`min-h-0 bg-canvas lg:block ${focus ? "lg:hidden" : ""} ${view === "preview" ? "block" : "hidden"}`}>
+        <section
+          className={`min-h-0 bg-canvas lg:col-start-3 lg:block ${
+            view === "preview" ? "block" : "hidden"
+          } ${editorOnly ? "lg:hidden" : ""}`}
+        >
           <Preview markdown={previewMarkdown} />
         </section>
       </div>
 
       {/* Status rail */}
-      <footer className="flex shrink-0 items-center justify-between gap-3 border-t border-shell-line bg-shell px-3 py-1.5 text-xs text-chalk-dim sm:px-4">
-        <span className="font-mono">
+      <footer className="grid shrink-0 grid-cols-[1fr_auto_1fr] items-center gap-3 border-t border-shell-line bg-shell px-3 py-1.5 text-xs text-chalk-dim sm:px-4">
+        <span className="justify-self-start font-mono">
           {words.toLocaleString()} {words === 1 ? "word" : "words"}
           <span className="mx-1.5 text-shell-line">·</span>~{minutes} min read
         </span>
-        <span className="flex items-center gap-3">
-          <button
-            type="button"
-            onClick={() => setFocus((v) => !v)}
-            aria-pressed={focus}
-            className="focus-ring hidden items-center gap-1.5 rounded px-1.5 py-0.5 transition-colors hover:text-chalk lg:flex"
-          >
-            {focus ? <Columns2 size={13} /> : <Maximize2 size={13} />}
-            {focus ? "Show preview" : "Focus"}
-          </button>
-          <span className="flex items-center gap-1.5">
-            <span className="hidden sm:inline">Page</span>
-            <span className="rounded bg-shell-raised px-1.5 py-0.5 font-mono font-medium text-chalk">
-              {pageSize}
-            </span>
+
+        <ViewControl ratio={ratio} setSplitRatio={setSplitRatio} />
+
+        <span className="flex items-center gap-1.5 justify-self-end">
+          <span className="hidden sm:inline">Page</span>
+          <span className="rounded bg-shell-raised px-1.5 py-0.5 font-mono font-medium text-chalk">
+            {pageSize}
           </span>
         </span>
       </footer>
@@ -120,6 +194,40 @@ export function Editor() {
   );
 }
 
+function ViewControl({
+  ratio,
+  setSplitRatio,
+}: {
+  ratio: number;
+  setSplitRatio: (r: number) => void;
+}) {
+  const mode = ratio >= 0.98 ? "editor" : ratio <= 0.02 ? "preview" : "split";
+  const items: { id: string; label: string; icon: React.ReactNode; value: number }[] = [
+    { id: "editor", label: "Editor only", icon: <PanelLeft size={14} />, value: 1 },
+    { id: "split", label: "Split view", icon: <Columns2 size={14} />, value: 0.5 },
+    { id: "preview", label: "Preview only", icon: <PanelRight size={14} />, value: 0 },
+  ];
+  return (
+    <div className="hidden items-center gap-0.5 justify-self-center rounded-md bg-shell-raised p-0.5 lg:flex">
+      {items.map((it) => (
+        <button
+          key={it.id}
+          type="button"
+          aria-label={it.label}
+          aria-pressed={mode === it.id}
+          title={it.label}
+          onClick={() => setSplitRatio(it.value)}
+          className={`focus-ring flex h-6 w-7 items-center justify-center rounded transition-colors ${
+            mode === it.id ? "bg-rust text-white" : "text-chalk-dim hover:text-chalk"
+          }`}
+        >
+          {it.icon}
+        </button>
+      ))}
+    </div>
+  );
+}
+
 function TabButton({
   active,
   onClick,
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 3730a74..175d463 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -7,116 +7,149 @@ import { DocControls } from "./DocControls";
 import { SettingsMenu } from "./SettingsMenu";
 import { useExport } from "@/lib/use-export";
 
-const GITHUB_URL = "https://github.com/markdowntopdf/markdowntopdf.sh";
+const GITHUB_URL = "https://github.com/raj-khan/markdown.software";
 
 /** A print registration target — the mark a press operator lines up by. */
 function RegistrationMark({ size = 20 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 20 20" aria-hidden="true">
-      <circle cx="10" cy="10" r="5" fill="none" stroke="var(--color-rust)" strokeWidth="1.25" />
-      <line x1="10" y1="0" x2="10" y2="20" stroke="var(--color-rust)" strokeWidth="1.25" />
-      <line x1="0" y1="10" x2="20" y2="10" stroke="var(--color-rust)" strokeWidth="1.25" />
-    </svg>
-  );
+	return (
+		<svg width={size} height={size} viewBox="0 0 20 20" aria-hidden="true">
+			<circle
+				cx="10"
+				cy="10"
+				r="5"
+				fill="none"
+				stroke="var(--color-rust)"
+				strokeWidth="1.25"
+			/>
+			<line
+				x1="10"
+				y1="0"
+				x2="10"
+				y2="20"
+				stroke="var(--color-rust)"
+				strokeWidth="1.25"
+			/>
+			<line
+				x1="0"
+				y1="10"
+				x2="20"
+				y2="10"
+				stroke="var(--color-rust)"
+				strokeWidth="1.25"
+			/>
+		</svg>
+	);
 }
 
 function GithubIcon({ size = 18 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-      <path d="M12 .5C5.73.5.5 5.73.5 12a11.5 11.5 0 0 0 7.86 10.92c.58.1.79-.25.79-.56v-2c-3.2.7-3.88-1.37-3.88-1.37-.53-1.34-1.3-1.7-1.3-1.7-1.06-.72.08-.71.08-.71 1.17.08 1.79 1.2 1.79 1.2 1.04 1.79 2.73 1.27 3.4.97.1-.76.41-1.27.74-1.56-2.55-.29-5.23-1.28-5.23-5.7 0-1.26.45-2.29 1.19-3.1-.12-.29-.52-1.46.11-3.05 0 0 .98-.31 3.2 1.18a11.1 11.1 0 0 1 5.83 0c2.22-1.49 3.2-1.18 3.2-1.18.63 1.59.23 2.76.11 3.05.74.81 1.19 1.84 1.19 3.1 0 4.43-2.69 5.41-5.25 5.69.42.36.79 1.07.79 2.16v3.2c0 .31.21.67.8.56A11.5 11.5 0 0 0 23.5 12C23.5 5.73 18.27.5 12 .5Z" />
-    </svg>
-  );
+	return (
+		<svg
+			width={size}
+			height={size}
+			viewBox="0 0 24 24"
+			fill="currentColor"
+			aria-hidden="true"
+		>
+			<path d="M12 .5C5.73.5.5 5.73.5 12a11.5 11.5 0 0 0 7.86 10.92c.58.1.79-.25.79-.56v-2c-3.2.7-3.88-1.37-3.88-1.37-.53-1.34-1.3-1.7-1.3-1.7-1.06-.72.08-.71.08-.71 1.17.08 1.79 1.2 1.79 1.2 1.04 1.79 2.73 1.27 3.4.97.1-.76.41-1.27.74-1.56-2.55-.29-5.23-1.28-5.23-5.7 0-1.26.45-2.29 1.19-3.1-.12-.29-.52-1.46.11-3.05 0 0 .98-.31 3.2 1.18a11.1 11.1 0 0 1 5.83 0c2.22-1.49 3.2-1.18 3.2-1.18.63 1.59.23 2.76.11 3.05.74.81 1.19 1.84 1.19 3.1 0 4.43-2.69 5.41-5.25 5.69.42.36.79 1.07.79 2.16v3.2c0 .31.21.67.8.56A11.5 11.5 0 0 0 23.5 12C23.5 5.73 18.27.5 12 .5Z" />
+		</svg>
+	);
 }
 
 export function Header() {
-  const { exportPdf, busy, status, dismiss } = useExport();
+	const { exportPdf, busy, status, dismiss } = useExport();
 
-  // Global export shortcuts: ⌘S / Ctrl+S and ⇧⌘E / Ctrl+Shift+E.
-  useEffect(() => {
-    function onKey(e: KeyboardEvent) {
-      const mod = e.metaKey || e.ctrlKey;
-      if (!mod) return;
-      const k = e.key.toLowerCase();
-      if (k === "s" || (e.shiftKey && k === "e")) {
-        e.preventDefault();
-        void exportPdf();
-      }
-    }
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [exportPdf]);
+	// Global export shortcuts: ⌘S / Ctrl+S and ⇧⌘E / Ctrl+Shift+E.
+	useEffect(() => {
+		function onKey(e: KeyboardEvent) {
+			const mod = e.metaKey || e.ctrlKey;
+			if (!mod) return;
+			const k = e.key.toLowerCase();
+			if (k === "s" || (e.shiftKey && k === "e")) {
+				e.preventDefault();
+				void exportPdf();
+			}
+		}
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [exportPdf]);
 
-  return (
-    <header className="flex items-center justify-between gap-3 border-b border-shell-line bg-shell px-3 py-2.5 sm:px-4">
-      <Link href="/" className="focus-ring flex items-center gap-2.5 rounded">
-        <RegistrationMark />
-        <span className="leading-none">
-          <span className="font-display text-[17px] font-medium tracking-tight text-chalk">
-            markdowntopdf<span className="text-rust">.sh</span>
-          </span>
-          <span className="mt-0.5 hidden text-[11px] tracking-wide text-chalk-dim lg:block">
-            a typesetting bench for plain text
-          </span>
-        </span>
-      </Link>
+	return (
+		<header className="flex items-center justify-between gap-3 border-b border-shell-line bg-shell px-3 py-2.5 sm:px-4">
+			<Link href="/" className="focus-ring flex items-center gap-2.5 rounded">
+				<RegistrationMark />
+				<span className="leading-none">
+					<span className="font-display text-[17px] font-medium tracking-tight text-chalk">
+						markdowntopdf<span className="text-rust">.sh</span>
+					</span>
+					<span className="mt-0.5 hidden text-[11px] tracking-wide text-chalk-dim lg:block">
+						a typesetting bench for plain text
+					</span>
+				</span>
+			</Link>
 
-      <div className="flex items-center gap-2">
-        <div className="hidden lg:flex">
-          <DocControls variant="inline" />
-        </div>
-        <div className="lg:hidden">
-          <SettingsMenu />
-        </div>
+			<div className="flex items-center gap-2">
+				<div className="hidden lg:flex">
+					<DocControls variant="inline" />
+				</div>
+				<div className="lg:hidden">
+					<SettingsMenu />
+				</div>
 
-        <a
-          href={GITHUB_URL}
-          target="_blank"
-          rel="noreferrer"
-          title="View source on GitHub"
-          aria-label="View source on GitHub"
-          className="focus-ring hidden h-9 w-9 items-center justify-center rounded-md border border-shell-line text-chalk-dim transition-colors hover:border-chalk-dim hover:text-chalk sm:flex"
-        >
-          <GithubIcon size={18} />
-        </a>
+				<a
+					href={GITHUB_URL}
+					target="_blank"
+					rel="noreferrer"
+					title="View source on GitHub"
+					aria-label="View source on GitHub"
+					className="focus-ring hidden h-9 w-9 items-center justify-center rounded-md border border-shell-line text-chalk-dim transition-colors hover:border-chalk-dim hover:text-chalk sm:flex"
+				>
+					<GithubIcon size={18} />
+				</a>
 
-        <button
-          type="button"
-          onClick={() => void exportPdf()}
-          disabled={busy}
-          title="Export PDF  ⇧⌘E"
-          className="focus-ring flex h-9 items-center gap-2 rounded-md bg-rust px-3.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-rust-strong disabled:cursor-not-allowed disabled:opacity-60"
-        >
-          {busy ? <Loader2 size={16} className="animate-spin" /> : <FileDown size={16} />}
-          <span className="hidden sm:inline">{busy ? "Exporting…" : "Export PDF"}</span>
-          <span className="sm:hidden">{busy ? "…" : "PDF"}</span>
-        </button>
-      </div>
+				<button
+					type="button"
+					onClick={() => void exportPdf()}
+					disabled={busy}
+					title="Export PDF  ⇧⌘E"
+					className="focus-ring flex h-9 items-center gap-2 rounded-md bg-rust px-3.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-rust-strong disabled:cursor-not-allowed disabled:opacity-60"
+				>
+					{busy ? (
+						<Loader2 size={16} className="animate-spin" />
+					) : (
+						<FileDown size={16} />
+					)}
+					<span className="hidden sm:inline">
+						{busy ? "Exporting…" : "Export PDF"}
+					</span>
+					<span className="sm:hidden">{busy ? "…" : "PDF"}</span>
+				</button>
+			</div>
 
-      {status && (
-        <div
-          role={status.type === "error" ? "alert" : "status"}
-          className={`fixed inset-x-0 bottom-5 z-30 mx-auto flex w-[min(92%,26rem)] items-center gap-2.5 rounded-lg border px-3.5 py-3 text-sm shadow-lg ${
-            status.type === "error"
-              ? "border-red-200 bg-red-50 text-red-800"
-              : "border-line bg-paper text-ink"
-          }`}
-        >
-          {status.type === "error" ? (
-            <AlertCircle size={18} className="shrink-0 text-red-500" />
-          ) : (
-            <CheckCircle2 size={18} className="shrink-0 text-rust" />
-          )}
-          <p className="flex-1">{status.message}</p>
-          <button
-            type="button"
-            aria-label="Dismiss"
-            onClick={dismiss}
-            className="focus-ring shrink-0 rounded text-ink-soft hover:text-ink"
-          >
-            <X size={16} />
-          </button>
-        </div>
-      )}
-    </header>
-  );
+			{status && (
+				<div
+					role={status.type === "error" ? "alert" : "status"}
+					className={`fixed inset-x-0 bottom-5 z-30 mx-auto flex w-[min(92%,26rem)] items-center gap-2.5 rounded-lg border px-3.5 py-3 text-sm shadow-lg ${
+						status.type === "error"
+							? "border-red-200 bg-red-50 text-red-800"
+							: "border-line bg-paper text-ink"
+					}`}
+				>
+					{status.type === "error" ? (
+						<AlertCircle size={18} className="shrink-0 text-red-500" />
+					) : (
+						<CheckCircle2 size={18} className="shrink-0 text-rust" />
+					)}
+					<p className="flex-1">{status.message}</p>
+					<button
+						type="button"
+						aria-label="Dismiss"
+						onClick={dismiss}
+						className="focus-ring shrink-0 rounded text-ink-soft hover:text-ink"
+					>
+						<X size={16} />
+					</button>
+				</div>
+			)}
+		</header>
+	);
 }
diff --git a/src/components/Preview.tsx b/src/components/Preview.tsx
index 256dc6e..313313f 100644
--- a/src/components/Preview.tsx
+++ b/src/components/Preview.tsx
@@ -7,25 +7,25 @@ import { renderMarkdown } from "@/lib/markdown";
 import { useEditorStore } from "@/lib/store";
 
 export function Preview({ markdown }: { markdown: string }) {
-  const html = useMemo(() => renderMarkdown(markdown), [markdown]);
-  const pressing = useEditorStore((s) => s.pressing);
+	const html = useMemo(() => renderMarkdown(markdown), [markdown]);
+	const pressing = useEditorStore((s) => s.pressing);
 
-  return (
-    <div className="thin-scroll h-full overflow-auto bg-canvas">
-      <div className="mx-auto max-w-3xl px-6 py-10 sm:px-10 sm:py-14">
-        <div className="crop-sheet relative">
-          <span className="crop-corner-tr" aria-hidden />
-          <span className="crop-corner-bl" aria-hidden />
-          <div
-            className={`markdown-body rounded-sm border border-line p-7 shadow-[0_1px_2px_rgba(26,26,33,0.04),0_12px_32px_-12px_rgba(26,26,33,0.18)] sm:p-12 ${
-              pressing ? "is-pressing" : ""
-            }`}
-            style={{ transformOrigin: "center" }}
-            // Sanitized in renderMarkdown via rehype-sanitize.
-            dangerouslySetInnerHTML={{ __html: html }}
-          />
-        </div>
-      </div>
-    </div>
-  );
+	return (
+		<div className="thin-scroll h-full overflow-auto bg-canvas">
+			<div className="mx-auto max-w-3xl px-6 py-10 sm:px-10 sm:py-14">
+				<div className="crop-sheet relative">
+					<span className="crop-corner-tr" aria-hidden />
+					<span className="crop-corner-bl" aria-hidden />
+					<div
+						className={`markdown-body rounded-sm border border-line p-7 shadow-[0_1px_2px_rgba(26,26,33,0.04),0_12px_32px_-12px_rgba(26,26,33,0.18)] sm:p-12 ${
+							pressing ? "is-pressing" : ""
+						}`}
+						style={{ transformOrigin: "center" }}
+						// Sanitized in renderMarkdown via rehype-sanitize.
+						dangerouslySetInnerHTML={{ __html: html }}
+					/>
+				</div>
+			</div>
+		</div>
+	);
 }
diff --git a/src/components/SettingsMenu.tsx b/src/components/SettingsMenu.tsx
index d6570f6..5e74a16 100644
--- a/src/components/SettingsMenu.tsx
+++ b/src/components/SettingsMenu.tsx
@@ -5,58 +5,60 @@ import { SlidersHorizontal, X } from "lucide-react";
 import { DocControls } from "./DocControls";
 
 export function SettingsMenu() {
-  const [open, setOpen] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
+	const [open, setOpen] = useState(false);
+	const containerRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    if (!open) return;
-    function onKey(e: KeyboardEvent) {
-      if (e.key === "Escape") setOpen(false);
-    }
-    function onClick(e: MouseEvent) {
-      if (!containerRef.current?.contains(e.target as Node)) setOpen(false);
-    }
-    document.addEventListener("keydown", onKey);
-    document.addEventListener("mousedown", onClick);
-    return () => {
-      document.removeEventListener("keydown", onKey);
-      document.removeEventListener("mousedown", onClick);
-    };
-  }, [open]);
+	useEffect(() => {
+		if (!open) return;
+		function onKey(e: KeyboardEvent) {
+			if (e.key === "Escape") setOpen(false);
+		}
+		function onClick(e: MouseEvent) {
+			if (!containerRef.current?.contains(e.target as Node)) setOpen(false);
+		}
+		document.addEventListener("keydown", onKey);
+		document.addEventListener("mousedown", onClick);
+		return () => {
+			document.removeEventListener("keydown", onKey);
+			document.removeEventListener("mousedown", onClick);
+		};
+	}, [open]);
 
-  return (
-    <div ref={containerRef} className="relative">
-      <button
-        type="button"
-        aria-label="Document settings"
-        aria-haspopup="dialog"
-        aria-expanded={open}
-        onClick={() => setOpen((v) => !v)}
-        className="focus-ring flex h-9 w-9 items-center justify-center rounded-md border border-shell-line text-chalk-dim transition-colors hover:border-chalk-dim hover:text-chalk"
-      >
-        <SlidersHorizontal size={18} />
-      </button>
+	return (
+		<div ref={containerRef} className="relative">
+			<button
+				type="button"
+				aria-label="Document settings"
+				aria-haspopup="dialog"
+				aria-expanded={open}
+				onClick={() => setOpen((v) => !v)}
+				className="focus-ring flex h-9 w-9 items-center justify-center rounded-md border border-shell-line text-chalk-dim transition-colors hover:border-chalk-dim hover:text-chalk"
+			>
+				<SlidersHorizontal size={18} />
+			</button>
 
-      {open && (
-        <div
-          role="dialog"
-          aria-label="Document settings"
-          className="absolute right-0 z-20 mt-2 w-64 rounded-xl border border-shell-line bg-shell-raised p-4 shadow-xl"
-        >
-          <div className="mb-3 flex items-center justify-between">
-            <h2 className="font-display text-sm font-medium text-chalk">Settings</h2>
-            <button
-              type="button"
-              aria-label="Close settings"
-              onClick={() => setOpen(false)}
-              className="focus-ring flex h-7 w-7 items-center justify-center rounded-md text-chalk-dim hover:bg-shell hover:text-chalk"
-            >
-              <X size={16} />
-            </button>
-          </div>
-          <DocControls variant="stacked" />
-        </div>
-      )}
-    </div>
-  );
+			{open && (
+				<div
+					role="dialog"
+					aria-label="Document settings"
+					className="absolute right-0 z-20 mt-2 w-64 rounded-xl border border-shell-line bg-shell-raised p-4 shadow-xl"
+				>
+					<div className="mb-3 flex items-center justify-between">
+						<h2 className="font-display text-sm font-medium text-chalk">
+							Settings
+						</h2>
+						<button
+							type="button"
+							aria-label="Close settings"
+							onClick={() => setOpen(false)}
+							className="focus-ring flex h-7 w-7 items-center justify-center rounded-md text-chalk-dim hover:bg-shell hover:text-chalk"
+						>
+							<X size={16} />
+						</button>
+					</div>
+					<DocControls variant="stacked" />
+				</div>
+			)}
+		</div>
+	);
 }
diff --git a/src/lib/md-edit.ts b/src/lib/md-edit.ts
index c0af5ef..5d8be3d 100644
--- a/src/lib/md-edit.ts
+++ b/src/lib/md-edit.ts
@@ -35,8 +35,31 @@ export const insert =
   () => ({ text: snippet, selStart, selEnd });
 
 /**
- * Apply a transform to the current selection of a textarea, push the new
- * value through `onChange`, and restore a sensible selection afterward.
+ * Replace text in a textarea so the change stays on the browser's native
+ * undo stack (Ctrl/Cmd+Z). We use `execCommand("insertText")` — the only
+ * API that writes to the undo history and emits an `input` event, which keeps
+ * React state in sync. Falls back to a direct value set if it isn't supported.
+ */
+function insertText(
+  el: HTMLTextAreaElement,
+  start: number,
+  end: number,
+  text: string,
+  onChange: (next: string) => void,
+) {
+  el.focus();
+  el.setSelectionRange(start, end);
+  const ok = document.execCommand("insertText", false, text);
+  if (!ok) {
+    const value = el.value;
+    onChange(value.slice(0, start) + text + value.slice(end));
+  }
+}
+
+/**
+ * Apply a transform to the current selection of a textarea (toolbar button or
+ * keyboard shortcut), keeping the edit undoable, then select the placeholder
+ * portion of whatever was inserted.
  */
 export function applyEdit(
   el: HTMLTextAreaElement,
@@ -47,13 +70,28 @@ export function applyEdit(
   const start = el.selectionStart;
   const end = el.selectionEnd;
   const { text, selStart, selEnd } = transform(value.slice(start, end));
-  onChange(value.slice(0, start) + text + value.slice(end));
+  insertText(el, start, end, text, onChange);
   requestAnimationFrame(() => {
     el.focus();
     el.setSelectionRange(start + selStart, start + selEnd);
   });
 }
 
+/** Insert plain text at the cursor (e.g. a Tab), keeping it undoable. */
+export function insertAtCursor(
+  el: HTMLTextAreaElement,
+  text: string,
+  onChange: (next: string) => void,
+) {
+  const start = el.selectionStart;
+  const end = el.selectionEnd;
+  insertText(el, start, end, text, onChange);
+  requestAnimationFrame(() => {
+    el.focus();
+    el.setSelectionRange(start + text.length, start + text.length);
+  });
+}
+
 // Keyboard shortcuts handled inside the editor textarea.
 export const SHORTCUTS: Record<string, Transform> = {
   b: wrap("**", "bold text"),
diff --git a/src/lib/store.ts b/src/lib/store.ts
index a63a6c4..6323f73 100644
--- a/src/lib/store.ts
+++ b/src/lib/store.ts
@@ -9,10 +9,13 @@ type EditorState = {
   options: PdfOptions;
   /** Transient: true while a PDF export is in flight (drives the press animation). */
   pressing: boolean;
+  /** Desktop split: fraction of width given to the editor (0 = preview only, 1 = editor only). */
+  splitRatio: number;
   setMarkdown: (markdown: string) => void;
   setFilename: (filename: string) => void;
   setOptions: (options: Partial<PdfOptions>) => void;
   setPressing: (pressing: boolean) => void;
+  setSplitRatio: (ratio: number) => void;
   reset: (markdown: string) => void;
 };
 
@@ -23,11 +26,14 @@ export const useEditorStore = create<EditorState>()(
       filename: "document",
       options: DEFAULT_PDF_OPTIONS,
       pressing: false,
+      splitRatio: 0.5,
       setMarkdown: (markdown) => set({ markdown }),
       setFilename: (filename) => set({ filename }),
       setOptions: (options) =>
         set((state) => ({ options: { ...state.options, ...options } })),
       setPressing: (pressing) => set({ pressing }),
+      setSplitRatio: (ratio) =>
+        set({ splitRatio: Math.min(1, Math.max(0, ratio)) }),
       reset: (markdown) => set({ markdown }),
     }),
     {
@@ -37,6 +43,7 @@ export const useEditorStore = create<EditorState>()(
         markdown: state.markdown,
         filename: state.filename,
         options: state.options,
+        splitRatio: state.splitRatio,
       }),
     },
   ),