diff --git a/app/docs-shell.tsx b/app/docs-shell.tsx
index 6235e7d..2fa688c 100644
--- a/app/docs-shell.tsx
+++ b/app/docs-shell.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import Image from "next/image";
 import Link from "next/link";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
@@ -101,13 +100,14 @@ export function DocsShell({
 
   const results = useMemo(() => search(searchPages, query), [query, searchPages]);
   const editUrl = sourceEditUrl(page);
+  const isDemo = page.route === "/app/demo/";
 
   return (
     <>
       <a className="skip-link" href="#main">
         Skip to content
       </a>
-      <header className="site-header">
+      <header className={`site-header${isDemo ? " site-header--demo" : ""}`}>
         <Link className="brand" href="/" aria-label="TaskNotes documentation home">
           <TaskNotesMark />
           <span className="brand__copy">
@@ -116,50 +116,59 @@ export function DocsShell({
           </span>
         </Link>
         <div className="site-header__actions">
-          <button
-            className="search-trigger"
-            type="button"
-            aria-haspopup="dialog"
-            onClick={openSearch}
-          >
-            <SearchMark />
-            <span>Search</span>
-            <kbd>⌘ K</kbd>
-          </button>
-          <label className="theme-control">
-            <span className="sr-only">Colour theme</span>
-            <select
-              aria-label="Colour theme"
-              value={theme}
-              onChange={(event) => setTheme(event.target.value as Theme)}
-            >
-              <option value="system">System</option>
-              <option value="light">Light</option>
-              <option value="dark">Dark</option>
-            </select>
-          </label>
+          {isDemo ? (
+            <Link className="demo-docs-link" href="/app/">
+              App docs
+            </Link>
+          ) : (
+            <>
+              <button
+                className="search-trigger"
+                type="button"
+                aria-haspopup="dialog"
+                onClick={openSearch}
+              >
+                <SearchMark />
+                <span>Search</span>
+                <kbd>⌘ K</kbd>
+              </button>
+              <label className="theme-control">
+                <span className="sr-only">Colour theme</span>
+                <select
+                  aria-label="Colour theme"
+                  value={theme}
+                  onChange={(event) => setTheme(event.target.value as Theme)}
+                >
+                  <option value="system">System</option>
+                  <option value="light">Light</option>
+                  <option value="dark">Dark</option>
+                </select>
+              </label>
+            </>
+          )}
           <a className="app-link" href="https://app.tasknotes.dev/">
             Open app
           </a>
-          <button
-            className="menu-trigger"
-            type="button"
-            aria-label="Open documentation navigation"
-            aria-expanded={menuOpen}
-            onClick={() => setMenuOpen(true)}
-          >
-            <MenuMark />
-          </button>
+          {!isDemo ? (
+            <button
+              className="menu-trigger"
+              type="button"
+              aria-label="Open documentation navigation"
+              aria-expanded={menuOpen}
+              onClick={() => setMenuOpen(true)}
+            >
+              <MenuMark />
+            </button>
+          ) : null}
         </div>
       </header>
 
-      <div
-        className={`site-shell${page.route === "/app/demo/" ? " site-shell--demo" : ""}`}
-      >
-        <aside
-          className={`sidebar${menuOpen ? " is-open" : ""}`}
-          aria-label="Documentation"
-        >
+      <div className={`site-shell${isDemo ? " site-shell--demo" : ""}`}>
+        {!isDemo ? (
+          <aside
+            className={`sidebar${menuOpen ? " is-open" : ""}`}
+            aria-label="Documentation"
+          >
           <div className="sidebar__mobile-header">
             <span>Documentation</span>
             <button type="button" onClick={() => setMenuOpen(false)}>
@@ -195,19 +204,34 @@ export function DocsShell({
             <span>Plugin {versions.obsidian}</span>
             <a href="https://github.com/callumalpass">GitHub</a>
           </footer>
-        </aside>
+          </aside>
+        ) : null}
 
-        <button
-          className={`sidebar-overlay${menuOpen ? " is-visible" : ""}`}
-          type="button"
-          aria-label="Close documentation navigation"
-          onClick={() => setMenuOpen(false)}
-        />
+        {!isDemo ? (
+          <button
+            className={`sidebar-overlay${menuOpen ? " is-visible" : ""}`}
+            type="button"
+            aria-label="Close documentation navigation"
+            onClick={() => setMenuOpen(false)}
+          />
+        ) : null}
 
-        <main
-          className={`prose${page.route === "/app/demo/" ? " prose--demo" : ""}`}
-          id="main"
-        >
+        {isDemo ? (
+          <main className="demo-page" id="main">
+            <header className="demo-page__intro">
+              <div>
+                <p className="demo-page__eyebrow">Interactive demo</p>
+                <h1>Try TaskNotes</h1>
+              </div>
+              <p>
+                Explore with 24 sample tasks. Changes stay in this browser
+                session and never touch a collection.
+              </p>
+            </header>
+            <InteractiveDemo />
+          </main>
+        ) : (
+          <main className="prose" id="main">
           {page.route !== "/" ? (
             <nav className="breadcrumbs" aria-label="Breadcrumb">
               <ol>
@@ -233,29 +257,34 @@ export function DocsShell({
             <p className="page-description">{page.description}</p>
           </header>
           <div dangerouslySetInnerHTML={{ __html: page.html }} />
-          {page.route === "/app/demo/" ? <InteractiveDemo /> : null}
           {editUrl ? (
             <footer className="page-source">
               <span>Source: {page.source}</span>
               <a href={editUrl}>View source</a>
             </footer>
           ) : null}
-        </main>
+          </main>
+        )}
 
-        <aside className="toc-column" aria-label="Page outline">
-          {!page.hideToc && page.toc.length > 1 ? (
-            <nav className="toc" aria-label="On this page">
-              <p className="toc__heading">On this page</p>
-              <ul>
-                {page.toc.map((item) => (
-                  <li className={item.level === 3 ? "toc__sub" : undefined} key={item.id}>
-                    <a href={`#${item.id}`}>{item.text}</a>
-                  </li>
-                ))}
-              </ul>
-            </nav>
-          ) : null}
-        </aside>
+        {!isDemo ? (
+          <aside className="toc-column" aria-label="Page outline">
+            {!page.hideToc && page.toc.length > 1 ? (
+              <nav className="toc" aria-label="On this page">
+                <p className="toc__heading">On this page</p>
+                <ul>
+                  {page.toc.map((item) => (
+                    <li
+                      className={item.level === 3 ? "toc__sub" : undefined}
+                      key={item.id}
+                    >
+                      <a href={`#${item.id}`}>{item.text}</a>
+                    </li>
+                  ))}
+                </ul>
+              </nav>
+            ) : null}
+          </aside>
+        ) : null}
       </div>
 
       {searchOpen ? (
@@ -314,86 +343,37 @@ const EMBEDDED_DEMO_URL = `${TASKNOTES_APP_ORIGIN}/embed/?demo=24`;
 const FULL_DEMO_URL = `${TASKNOTES_APP_ORIGIN}/?demo=24`;
 
 function InteractiveDemo() {
-  const [loaded, setLoaded] = useState(false);
   const [instance, setInstance] = useState(0);
 
   return (
     <section className="demo-player" aria-labelledby="interactive-demo-heading">
-      <div className="demo-player__heading">
+      <header className="demo-player__toolbar">
         <div>
-          <p className="demo-player__eyebrow">Disposable sample collection</p>
-          <h2 id="interactive-demo-heading">A working TaskNotes session</h2>
-          <p>
-            The controls are real; the records are temporary. Nothing here is
-            written to a hosted collection or a computer.
-          </p>
-        </div>
-        <dl className="demo-player__facts">
-          <div>
-            <dt>Records</dt>
-            <dd>24 sample tasks</dd>
-          </div>
-          <div>
-            <dt>Account</dt>
-            <dd>Not required</dd>
-          </div>
-          <div>
-            <dt>Persistence</dt>
-            <dd>This session only</dd>
-          </div>
-        </dl>
-      </div>
-
-      {loaded ? (
-        <div className="demo-player__frame">
-          <iframe
-            key={instance}
-            src={EMBEDDED_DEMO_URL}
-            title="Interactive TaskNotes demo"
-            referrerPolicy="no-referrer"
-            sandbox="allow-forms allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
-          />
-        </div>
-      ) : (
-        <button
-          className="demo-player__preview"
-          type="button"
-          onClick={() => setLoaded(true)}
-        >
-          <Image
-            src="/assets/app/today-workspace.webp"
-            alt=""
-            width={1440}
-            height={900}
-            loading="lazy"
-            unoptimized
-          />
-          <span className="demo-player__preview-action">
-            <span>Load the interactive demo</span>
-            <small>Opens here with disposable sample data</small>
-          </span>
-        </button>
-      )}
-
-      <footer className="demo-player__footer">
-        <div>
-          <p className="demo-player__eyebrow">Try these</p>
-          <p>Complete a task · open Scratchpad · switch saved views</p>
+          <h2 id="interactive-demo-heading">Live demo</h2>
+          <p>Disposable data · resets when you reload</p>
         </div>
         <div className="demo-player__actions">
-          {loaded ? (
-            <button
-              type="button"
-              onClick={() => setInstance((current) => current + 1)}
-            >
-              Reset demo
-            </button>
-          ) : null}
+          <button
+            type="button"
+            onClick={() => setInstance((current) => current + 1)}
+          >
+            Reset demo
+          </button>
           <a href={FULL_DEMO_URL} target="_blank" rel="noreferrer">
             Open in a new tab ↗
           </a>
         </div>
-      </footer>
+      </header>
+      <div className="demo-player__frame">
+        <iframe
+          key={instance}
+          src={EMBEDDED_DEMO_URL}
+          title="Interactive TaskNotes demo"
+          loading="eager"
+          referrerPolicy="no-referrer"
+          sandbox="allow-forms allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
+        />
+      </div>
     </section>
   );
 }
diff --git a/app/globals.css b/app/globals.css
index 71174ed..740372d 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -549,7 +549,7 @@ video {
 }
 
 .demo-callout__label,
-.demo-player__eyebrow {
+.demo-page__eyebrow {
 	color: var(--color-accent-strong);
 	font: 500 0.65rem/1.4 var(--mono);
 	letter-spacing: 0.05em;
@@ -572,135 +572,62 @@ video {
 }
 
 .site-shell--demo {
-	grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
+	display: block;
+	width: min(100%, 100rem);
 }
 
-.site-shell--demo .toc-column {
-	display: none;
+.demo-docs-link {
+	padding: 0.3rem 0.45rem;
+	color: var(--color-text-soft);
+	font: 500 0.68rem/1.2 var(--mono);
+	text-decoration: none;
 }
 
-.prose--demo {
-	max-width: 78rem;
+.demo-docs-link:hover {
+	color: var(--color-accent-strong);
 }
 
-.demo-player {
-	margin-top: 2.5rem;
+.demo-page {
+	min-height: calc(100dvh - var(--header-height));
+	padding: clamp(0.8rem, 2vw, 1.5rem);
 	background: var(--color-surface);
-	border: 1px solid var(--color-border-strong);
-	box-shadow: 0 1.5rem 4rem color-mix(in srgb, var(--color-text), transparent 94%);
-}
-
-.demo-player__heading {
-	display: grid;
-	padding: clamp(1.25rem, 3vw, 2rem);
-	gap: 2rem;
-	grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.85fr);
-	border-bottom: 1px solid var(--color-border-strong);
-}
-
-.demo-player__heading h2 {
-	margin: 0.35rem 0 0.75rem;
-}
-
-.demo-player__heading p:last-child {
-	margin-bottom: 0;
-	color: var(--color-text-soft);
-}
-
-.demo-player__facts {
-	display: grid;
-	align-self: stretch;
-	border-top: 1px solid var(--color-border);
-	grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
-.demo-player__facts div {
+.demo-page__intro {
 	display: flex;
-	min-width: 0;
-	padding: 0.8rem 0.65rem;
-	flex-direction: column;
+	max-width: 86rem;
+	padding: 0.15rem 0 1rem;
+	margin-inline: auto;
+	align-items: end;
 	justify-content: space-between;
-	gap: 0.6rem;
-	border-bottom: 1px solid var(--color-border);
+	gap: 1.5rem;
 }
 
-.demo-player__facts div + div {
-	border-left: 1px solid var(--color-border);
+.demo-page__intro h1 {
+	font-size: clamp(1.65rem, 3vw, 2.45rem);
+	line-height: 1.05;
+	letter-spacing: -0.025em;
 }
 
-.demo-player__facts dt {
-	color: var(--color-text-muted);
-	font: 500 0.6rem/1.4 var(--mono);
-	letter-spacing: 0.04em;
-	text-transform: uppercase;
-}
-
-.demo-player__facts dd {
-	color: var(--color-text);
-	font-size: 0.86rem;
-	font-weight: 700;
-	line-height: 1.25;
+.demo-page__intro > p {
+	max-width: 38rem;
+	color: var(--color-text-soft);
+	font-size: 0.92rem;
+	line-height: 1.45;
+	text-wrap: balance;
 }
 
-.demo-player__preview {
-	position: relative;
-	display: block;
-	width: 100%;
-	min-height: 34rem;
-	padding: 0;
+.demo-player {
+	max-width: 86rem;
+	margin-inline: auto;
 	overflow: hidden;
-	color: var(--color-text);
 	background: var(--color-surface-subtle);
-	border: 0;
-	text-align: left;
-}
-
-.demo-player__preview img {
-	width: 100%;
-	height: 100%;
-	min-height: 34rem;
-	margin: 0;
-	object-fit: cover;
-	object-position: top left;
-	border: 0;
-	border-radius: 0;
-	filter: saturate(0.82);
-	transition: filter 180ms var(--ease), transform 180ms var(--ease);
-}
-
-.demo-player__preview:hover img,
-.demo-player__preview:focus-visible img {
-	filter: saturate(1);
-	transform: scale(1.005);
-}
-
-.demo-player__preview-action {
-	position: absolute;
-	right: 1.25rem;
-	bottom: 1.25rem;
-	display: flex;
-	max-width: calc(100% - 2.5rem);
-	padding: 0.85rem 1rem;
-	flex-direction: column;
-	gap: 0.1rem;
-	color: var(--color-surface);
-	background: var(--color-accent-strong);
-	border: 1px solid var(--color-accent-strong);
+	border: 1px solid var(--color-border-strong);
 	border-radius: var(--radius);
-	box-shadow: 0 0.75rem 2rem var(--color-scrim);
-}
-
-.demo-player__preview-action span {
-	font-weight: 700;
-}
-
-.demo-player__preview-action small {
-	font: 400 0.64rem/1.45 var(--mono);
-	opacity: 0.82;
 }
 
 .demo-player__frame {
-	height: clamp(42rem, 76dvh, 52rem);
+	height: clamp(38rem, calc(100dvh - 12rem), 58rem);
 	background: var(--color-surface-subtle);
 }
 
@@ -711,29 +638,36 @@ video {
 	border: 0;
 }
 
-.demo-player__footer {
+.demo-player__toolbar {
 	display: flex;
-	min-height: 4.5rem;
-	padding: 0.85rem 1rem;
+	min-height: 3.25rem;
+	padding: 0.55rem 0.7rem;
 	align-items: center;
 	justify-content: space-between;
 	gap: 1rem;
-	border-top: 1px solid var(--color-border-strong);
+	background: var(--color-surface);
+	border-bottom: 1px solid var(--color-border-strong);
 }
 
-.demo-player__footer p {
+.demo-player__toolbar h2,
+.demo-player__toolbar p {
 	margin: 0;
 }
 
-.demo-player__footer > div > p:last-child {
+.demo-player__toolbar h2 {
+	font-size: 0.9rem;
+	line-height: 1.2;
+}
+
+.demo-player__toolbar p {
 	color: var(--color-text-soft);
-	font-size: 0.84rem;
+	font: 400 0.62rem/1.4 var(--mono);
 }
 
 .demo-player__actions {
 	display: flex;
 	align-items: center;
-	gap: 0.8rem;
+	gap: 0.5rem;
 	white-space: nowrap;
 }
 
@@ -1392,27 +1326,28 @@ video {
 		border-left: 0;
 	}
 
-	.demo-player__heading {
-		grid-template-columns: 1fr;
+	.demo-page {
+		padding: 0.75rem;
 	}
 
-	.demo-player__preview,
-	.demo-player__preview img {
-		min-height: 26rem;
+	.demo-page__intro {
+		align-items: flex-start;
+		flex-direction: column;
+		gap: 0.45rem;
 	}
 
-	.demo-player__frame {
-		height: 42rem;
+	.demo-page__intro > p {
+		font-size: 0.84rem;
 	}
 
-	.demo-player__footer {
+	.demo-player__toolbar {
 		align-items: flex-start;
 		flex-direction: column;
 	}
 
-	.demo-player__actions {
-		flex-wrap: wrap;
-		white-space: normal;
+	.demo-player__frame {
+		height: calc(100dvh - 15rem);
+		min-height: 36rem;
 	}
 
 	.card:nth-child(odd) {
diff --git a/tests/rendered-html.test.mjs b/tests/rendered-html.test.mjs
index 5b089d0..1c70a48 100644
--- a/tests/rendered-html.test.mjs
+++ b/tests/rendered-html.test.mjs
@@ -46,14 +46,16 @@ test("renders app and Obsidian pages with explicit scope", async () => {
   assert.match(pluginHtml, /Core Concepts/);
 });
 
-test("renders the interactive app demo as an opt-in experience", async () => {
+test("renders the interactive app demo immediately with minimal chrome", async () => {
   const response = await render("/app/demo/");
   assert.equal(response.status, 200);
   const html = await response.text();
-  assert.match(html, /Load the interactive demo/);
+  assert.match(html, /Try TaskNotes/);
   assert.match(html, /24 sample tasks/);
   assert.match(html, /Open in a new tab/);
-  assert.doesNotMatch(html, /<iframe/);
+  assert.match(html, /<iframe/);
+  assert.doesNotMatch(html, /Load the interactive demo/);
+  assert.doesNotMatch(html, /aria-label="Documentation"/);
 });
 
 test("renders legacy routes with canonical destinations", async () => {