feat(ui): app shell with nav rail

src/ui/AboutPanel.tsx

@@ -0,0 +1,53 @@
+export function AboutPanel() {
+  return (
+    <div className="max-w-2xl space-y-6">
+      <div>
+        <h2 className="font-bold text-slate-100 text-xl tracking-tight">About Idlegame</h2>
+        <p className="text-slate-400 text-sm">A text-fantasy RPG incremental experience.</p>
+      </div>
+
+      <div className="space-y-6 text-slate-300">
+        <section className="space-y-2">
+          <h3 className="font-semibold text-slate-200 text-sm tracking-wide uppercase">
+            How to Play
+          </h3>
+          <p className="text-sm leading-relaxed text-slate-400">
+            Idlegame is driven by actions and choices. Select actions from the{' '}
+            <strong className="text-amber-400">Play</strong> screen to execute them. Some actions
+            are timed and can be queued. Once completed, they reward you with resources, unlock new
+            deeds, or advance the chronicle.
+          </p>
+        </section>
+
+        <section className="space-y-2">
+          <h3 className="font-semibold text-slate-200 text-sm tracking-wide uppercase">
+            The Chronicle
+          </h3>
+          <p className="text-sm leading-relaxed text-slate-400">
+            As you perform actions, you will unlock narrative points of interest. Head to the{' '}
+            <strong className="text-amber-400">Story</strong> tab to make crucial choices and read
+            the history of your journey.
+          </p>
+        </section>
+
+        <section className="space-y-2">
+          <h3 className="font-semibold text-slate-200 text-sm tracking-wide uppercase">
+            Technical Specs
+          </h3>
+          <div className="rounded-xl border border-slate-800 bg-slate-900/40 p-4">
+            <dl className="grid grid-cols-2 gap-x-4 gap-y-2 text-xs">
+              <dt className="text-slate-500">Version</dt>
+              <dd className="font-mono text-slate-300">0.1.0 (M1 Milestone)</dd>
+              <dt className="text-slate-500">Engine</dt>
+              <dd className="text-slate-300">Pure TypeScript State Machine</dd>
+              <dt className="text-slate-500">Framework</dt>
+              <dd className="text-slate-300">React + Zustand + Tailwind CSS</dd>
+              <dt className="text-slate-500">Target Platform</dt>
+              <dd className="text-slate-300">Responsive Web & PWA</dd>
+            </dl>
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}