fix: make navigation visible on dark pages and improve playground UX

- Updated Navigation component with dark mode support
  - Added dark prop (black bg, white text on dark pages)
  - Light bg with black text on light pages
- Applied dark={true} to all docs pages (black backgrounds)
- Fixed playground layout
  - Now uses shared Navigation component
  - Changed to light theme (white bg, black text)
  - Removed duplicate header
  - Added prominent 'Coming Soon' banner for exports
  - Export buttons clearly labeled '(Coming Soon)'
  - Yellow warning box with CLI instructions
- Fixed output panel styling for light theme
- Navigation now visible and consistent on ALL pages

Author: alpha912

app/docs/api-reference/page.tsx

@@ -6,7 +6,7 @@ import { Code, Package, Wrench } from 'phosphor-react';
 export default function APIReferencePage() {
   return (
     <div className="min-h-screen bg-black text-white">
-      <Navigation />
+      <Navigation dark />
       <div className="container mx-auto px-4 py-12 pt-24 max-w-4xl">
         {/* Header */}
         <div className="mb-8">

app/docs/getting-started/installation/page.tsx

@@ -10,7 +10,7 @@ import Navigation from '@/components/Navigation';
 export default function InstallationPage() {
   return (
     <div className="min-h-screen bg-black text-white">
-      <Navigation />
+      <Navigation dark />
       <div className="container mx-auto px-4 py-12 max-w-4xl pt-24">
         <h1 className="text-5xl font-bold mb-4 border-b-4 border-white pb-4">Installation</h1>
         <p className="text-xl text-gray-300 mb-12">

app/docs/page.tsx

@@ -11,7 +11,7 @@ import { Rocket, Book, Sparkle, Wrench, Lightbulb, BookOpen, PresentationChart }
 export default function DocsPage() {
   return (
     <div className="min-h-screen bg-black text-white">
-      <Navigation />
+      <Navigation dark />
       <div className="container mx-auto px-4 py-12 max-w-6xl pt-24">
         <h1 className="text-5xl font-bold mb-6 border-b-4 border-white pb-4">
           OmniScript Format Documentation

app/docs/releases/page.tsx

@@ -11,7 +11,7 @@ import { CheckCircle, Warning, RocketLaunch, GitBranch } from 'phosphor-react';
 export default function ReleasesPage() {
   return (
     <div className="min-h-screen bg-black text-white">
-      <Navigation />
+      <Navigation dark />
       <div className="container mx-auto px-4 py-12 pt-24 max-w-4xl">
         <h1 className="text-5xl font-bold mb-6 border-b-4 border-white pb-4">
           Release Notes

app/docs/releases/v1-0/page.tsx

@@ -11,7 +11,7 @@ import { Rocket, ChartBar, FlowArrow, Code, CheckCircle, Warning, Star, Confetti
 export default function V1ReleaseNotesPage() {
   return (
     <div className="min-h-screen bg-black text-white">
-      <Navigation />
+      <Navigation dark />
       <div className="container mx-auto px-4 py-12 pt-24 max-w-4xl">
         {/* Header */}
         <div className="mb-8">

app/docs/v1-features/chart-blocks/page.tsx

@@ -11,7 +11,7 @@ import { ChartBar, GameController } from 'phosphor-react';
 export default function ChartBlocksPage() {
   return (
     <div className="min-h-screen bg-black text-white">
-      <Navigation />
+      <Navigation dark />
       <div className="container mx-auto px-4 py-12 pt-24 max-w-4xl">
         <h1 className="text-5xl font-bold mb-6 border-b-4 border-blue-500 pb-4">
           @chart Blocks

app/docs/v1-features/code-blocks/page.tsx

@@ -11,7 +11,7 @@ import { Code, GameController, CheckCircle, Warning } from 'phosphor-react';
 export default function CodeBlocksPage() {
   return (
     <div className="min-h-screen bg-black text-white">
-      <Navigation />
+      <Navigation dark />
       <div className="container mx-auto px-4 py-12 pt-24 max-w-4xl">
         <h1 className="text-5xl font-bold mb-6 border-b-4 border-green-500 pb-4">
           @code Blocks

app/docs/v1-features/diagram-blocks/page.tsx

@@ -11,7 +11,7 @@ import { FlowArrow, GameController } from 'phosphor-react';
 export default function DiagramBlocksPage() {
   return (
     <div className="min-h-screen bg-black text-white">
-      <Navigation />
+      <Navigation dark />
       <div className="container mx-auto px-4 py-12 pt-24 max-w-4xl">
         <h1 className="text-5xl font-bold mb-6 border-b-4 border-purple-500 pb-4">
           @diagram Blocks

app/playground/page.tsx

@@ -119,17 +119,44 @@ export default function PlaygroundPage() {
   };
 
   return (
-    <div className="h-screen flex flex-col bg-black text-white">
-      {/* Header */}
-      <div className="border-b-2 border-white p-4">
-        <h1 className="text-2xl font-bold">OmniScript Playground</h1>
-        <p className="text-sm text-gray-400">Experiment with OSF in your browser</p>
+    <div className="min-h-screen flex flex-col bg-noir-white">
+      <Navigation />
+
+      {/* Page Title */}
+      <div className="border-b-2 border-noir-black p-6 mt-16">
+        <h1 className="text-3xl font-bold font-mono">OmniScript Playground</h1>
+        <p className="text-sm text-gray-600 font-mono">Experiment with OSF syntax and see live preview</p>
+      </div>
+
+      {/* Coming Soon Banner */}
+      <div className="bg-yellow-100 border-2 border-yellow-500 p-6 m-6">
+        <h2 className="font-mono font-bold text-xl text-yellow-900 mb-3">
+          🚧 Export Functionality: Coming Soon
+        </h2>
+        <p className="font-mono text-sm text-yellow-800 mb-3">
+          The playground currently shows <strong>live preview and AST output only</strong>. 
+          Server-side export to PDF/DOCX/PPTX/XLSX requires deployment to Vercel/Netlify.
+        </p>
+        <div className="bg-yellow-200 p-3 border border-yellow-600">
+          <p className="font-mono text-xs text-yellow-900 font-bold mb-2">
+            ✅ GET FULL EXPORT NOW - Use the CLI:
+          </p>
+          <pre className="font-mono text-xs bg-black text-green-400 p-2 mb-2">
+npm install -g omniscript-cli
+          </pre>
+          <pre className="font-mono text-xs bg-black text-green-400 p-2">
+osf render document.osf --format pdf
+          </pre>
+          <a href="/docs/getting-started/installation" className="font-mono text-xs text-blue-600 hover:underline font-bold">
+            → View installation guide
+          </a>
+        </div>
       </div>
 
       {/* Main Content */}
-      <div className="flex-1 flex overflow-hidden">
+      <div className="flex-1 flex overflow-hidden mx-6 mb-6 border-2 border-noir-black">
         {/* Editor Panel */}
-        <div className="w-1/2 border-r-2 border-white">
+        <div className="w-1/2 border-r-2 border-noir-black">
           <MonacoEditor
             height="100%"
             language="plaintext"
@@ -148,9 +175,9 @@ export default function PlaygroundPage() {
         </div>
 
         {/* Output Panel */}
-        <div className="w-1/2 flex flex-col">
+        <div className="w-1/2 flex flex-col bg-white">
           {/* Controls */}
-          <div className="border-b-2 border-white p-4 flex gap-4 items-center flex-wrap">
+          <div className="border-b-2 border-noir-black p-4 flex gap-4 items-center flex-wrap bg-gray-100">
             <button
               onClick={handleParse}
               className="px-4 py-2 bg-white text-black hover:bg-gray-200 font-bold"
@@ -201,24 +228,24 @@ export default function PlaygroundPage() {
           </div>
 
           {/* Output Display */}
-          <div className="flex-1 overflow-auto p-4 bg-gray-900">
+          <div className="flex-1 overflow-auto p-4 bg-white text-black border-t-2 border-noir-black">
             {output === 'preview' && (
               <div
-                className="prose prose-invert max-w-none"
+                className="prose max-w-none"
                 dangerouslySetInnerHTML={{ __html: result }}
               />
             )}
             {output === 'ast' && (
-              <pre className="text-sm text-green-400 font-mono">{result}</pre>
+              <pre className="text-sm text-blue-600 font-mono bg-gray-100 p-4 rounded">{result}</pre>
             )}
             {output === 'errors' && (
-              <div className="text-red-400 font-mono">
+              <div className="text-red-600 font-mono">
                 <h3 className="text-xl font-bold mb-4">Parse Error:</h3>
-                <pre className="bg-red-900 bg-opacity-20 p-4 rounded">{result}</pre>
+                <pre className="bg-red-50 border-2 border-red-400 p-4 rounded">{result}</pre>
               </div>
             )}
             {!result && (
-              <div className="text-gray-500 text-center py-20">
+              <div className="text-gray-400 text-center py-20 font-mono">
                 Click "Parse & Preview" to see output
               </div>
             )}

components/Navigation.tsx

@@ -2,9 +2,17 @@
 // What: Shared navigation component for consistent layout
 // Why: Ensure users don't feel lost across different sections
 
-export default function Navigation() {
+interface NavigationProps {
+  dark?: boolean; // If true, uses black bg with white text for dark pages
+}
+
+export default function Navigation({ dark = false }: NavigationProps) {
+  const bgColor = dark ? 'bg-black' : 'bg-noir-white';
+  const textColor = dark ? 'text-white' : 'text-noir-black';
+  const borderColor = dark ? 'border-white' : 'border-noir-black';
+
   return (
-    <nav className="fixed top-0 left-0 right-0 z-50 bg-noir-white border-b-2 border-noir-black px-8 py-4">
+    <nav className={`fixed top-0 left-0 right-0 z-50 ${bgColor} ${textColor} border-b-2 ${borderColor} px-8 py-4`}>
       <div className="container-noir flex items-center justify-between">
         <a href="/" className="font-mono font-bold text-2xl tracking-tight">
           OmniScript_