From 500ed1b7f895468c51b925a2628b689784cba940 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 29 May 2026 13:50:34 +0000
Subject: [PATCH] design: align app pages with brand system, DRY shared CSS,
 fix violations

Extract shared header/nav/footer/body styles to styles.css; update brand
tokens to match landing page (midnight gradient, #2563eb accent, dot-grid
texture on headers). Fix: emoji removed from h1/h2, alert() replaced with
inline error, iframe sandbox added, git clone placeholder filled in,
compliance list emoji replaced with CSS checkmarks, transition:all fixed.

https://claude.ai/code/session_01F6vaDUobgHiBujg3kjj19t
---
 about.html           | 225 +++++---------------
 getting-started.html | 261 ++++++-----------------
 index.html           | 497 ++++++++++++++-----------------------------
 styles.css           | 282 ++++++++++++++++++++++++
 4 files changed, 553 insertions(+), 712 deletions(-)
 create mode 100644 styles.css

diff --git a/about.html b/about.html
index 01cd94b..35af84b 100644
--- a/about.html
+++ b/about.html
@@ -4,188 +4,71 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>About EduStack</title>
+  <link rel="stylesheet" href="styles.css">
   <style>
-    /* ========================================= */
-    /* PAGE SETUP: Background and base styles   */
-    /* ========================================= */
-    * {
-      box-sizing: border-box;
-    }
-
-    body {
-      margin: 0;
-      padding: 0;
-      background-color: #f0f4f8;
-      color: #2d3748;
-      font-family: Georgia, serif;
-      line-height: 1.6;
-    }
-
-    /* ========================================= */
-    /* HEADER: Top navigation and title         */
-    /* ========================================= */
-    .header {
-      background: linear-gradient(135deg, #2b6cb0, #4299e1);
-      color: white;
-      padding: 30px 20px;
-      text-align: center;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-    }
-
-    .header h1 {
-      margin: 0;
-      font-size: 32px;
-      font-weight: normal;
-    }
-
-    /* ========================================= */
-    /* NAVIGATION: Links to other pages          */
-    /* ========================================= */
-    .nav {
-      background-color: white;
-      padding: 15px 20px;
-      text-align: center;
-      border-bottom: 1px solid #e2e8f0;
-      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
-    }
-
-    .nav a {
-      color: #2b6cb0;
-      text-decoration: none;
-      margin: 0 15px;
-      padding: 8px 12px;
-      border-radius: 4px;
-      transition: background-color 0.2s;
-    }
-
-    .nav a:hover,
-    .nav a:focus {
-      background-color: #edf2f7;
-      outline: 2px solid #2b6cb0;
-      outline-offset: 2px;
-    }
-
-    /* ========================================= */
-    /* CONTAINER: Main content area              */
-    /* ========================================= */
+    /* Narrow content width for reading */
     .container {
-      max-width: 800px;
-      margin: 0 auto;
-      padding: 40px 20px;
-    }
-
-    .section {
-      background-color: white;
-      padding: 30px;
-      border-radius: 8px;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-      margin-bottom: 30px;
-    }
-
-    .section h2 {
-      color: #2b6cb0;
-      margin-top: 0;
-      padding-bottom: 10px;
-      border-bottom: 2px solid #bee3f8;
-    }
-
-    .section h3 {
-      color: #2c5282;
-      margin-top: 25px;
-    }
-
-    .section ul,
-    .section ol {
-      margin: 15px 0;
-      padding-left: 30px;
-    }
-
-    .section li {
-      margin: 8px 0;
-    }
-
-    .highlight {
-      background-color: #edf2f7;
-      padding: 20px;
-      border-radius: 4px;
-      border-left: 4px solid #2b6cb0;
-      margin: 20px 0;
+      max-width: var(--measure);
     }
 
+    /* Safety grid */
     .safety-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-      gap: 15px;
-      margin: 20px 0;
+      gap: var(--space-4);
+      margin: var(--space-5) 0;
     }
-
     .safety-item {
-      background-color: #edf2f7;
-      padding: 15px;
-      border-radius: 4px;
-      border: 2px solid #cbd5e0;
+      background: var(--color-paper);
+      padding: var(--space-4);
+      border-radius: var(--radius-sm);
+      border: 2px solid var(--color-line);
     }
-
     .safety-item strong {
-      color: #2b6cb0;
+      color: var(--color-accent);
       display: block;
-      margin-bottom: 5px;
+      margin-bottom: var(--space-2);
     }
 
-    /* ========================================= */
-    /* FOOTER: Bottom links                     */
-    /* ========================================= */
-    .footer {
-      background-color: white;
-      padding: 30px 20px;
-      text-align: center;
-      border-top: 1px solid #e2e8f0;
-      margin-top: 60px;
-      color: #718096;
+    /* Compliance list with CSS checkmarks */
+    .compliance-list {
+      list-style: none;
+      padding-left: 0;
     }
-
-    .footer a {
-      color: #2b6cb0;
-      text-decoration: none;
-      margin: 0 10px;
+    .compliance-list li {
+      padding-left: 1.4rem;
+      position: relative;
+      margin: var(--space-2) 0;
     }
-
-    .footer a:hover,
-    .footer a:focus {
-      text-decoration: underline;
-      outline: 2px solid #2b6cb0;
-      outline-offset: 2px;
+    .compliance-list li::before {
+      content: "\2713";
+      position: absolute;
+      left: 0;
+      color: var(--color-ok);
+      font-weight: 800;
     }
 
-    /* ========================================= */
-    /* RESPONSIVE: Mobile adjustments            */
-    /* ========================================= */
+    /* Responsive */
     @media (max-width: 768px) {
       .safety-grid {
         grid-template-columns: 1fr;
       }
     }
-
-    /* ========================================= */
-    /* FOCUS VISIBLE: Keyboard navigation        */
-    /* ========================================= */
-    *:focus-visible {
-      outline: 2px solid #2b6cb0;
-      outline-offset: 2px;
-    }
   </style>
 </head>
 <body>
   <!-- Header -->
-  <header class="header">
-    <h1>About EduStack</h1>
+  <header class="site-header">
+    <div class="site-header-inner">
+      <h1>About <span class="logo-edu">Edu</span><span class="logo-stack">Stack</span></h1>
+    </div>
   </header>
 
   <!-- Navigation -->
-  <nav class="nav" role="navigation" aria-label="Main navigation">
+  <nav class="site-nav" role="navigation" aria-label="Main navigation">
     <a href="index.html">Home</a>
     <a href="getting-started.html">Getting Started</a>
-    <a href="about.html">About</a>
+    <a href="about.html" aria-current="page">About</a>
   </nav>
 
   <!-- Main Container -->
@@ -193,13 +76,13 @@ <h1>About EduStack</h1>
     <!-- Mission Section -->
     <section class="section" aria-labelledby="mission-heading">
       <h2 id="mission-heading">Our Mission</h2>
-      <p>EduStack is a <strong>free, open-source, school-safe framework</strong> that teaches middle school students (grades 6–8) to build real web apps with AI assistance.</p>
+      <p>EduStack is a <strong>free, open-source, school-safe framework</strong> that teaches middle school students (grades 6&ndash;8) to build real web apps with AI assistance.</p>
       <p>We believe that:</p>
       <ul>
-        <li><strong>Students learn by doing</strong> — not just reading or taking quizzes</li>
-        <li><strong>Safety comes first</strong> — every feature is designed to pass review by principals, superintendents, and parents</li>
-        <li><strong>Teachers don't need to be experts</strong> — you learn each lesson 15 minutes before you teach it</li>
-        <li><strong>Education should be free</strong> — 100% free, MIT licensed, forever</li>
+        <li><strong>Students learn by doing</strong> &mdash; not just reading or taking quizzes</li>
+        <li><strong>Safety comes first</strong> &mdash; every feature is designed to pass review by principals, superintendents, and parents</li>
+        <li><strong>Teachers don't need to be experts</strong> &mdash; you learn each lesson 15 minutes before you teach it</li>
+        <li><strong>Education should be free</strong> &mdash; 100% free, MIT licensed, forever</li>
       </ul>
     </section>
 
@@ -210,19 +93,19 @@ <h2 id="why-heading">Why EduStack?</h2>
         <p><strong>EduStack solves real problems in middle school coding education:</strong></p>
       </div>
       <ul>
-        <li><strong>Coding tutorials are boring</strong> → Students build real projects from day one</li>
-        <li><strong>AI tools aren't school-safe</strong> → 7-layer safety system blocks inappropriate content</li>
-        <li><strong>Teachers don't know code</strong> → Teacher guides explain everything before each lesson</li>
-        <li><strong>Existing platforms cost money</strong> → 100% free, MIT licensed, forever</li>
-        <li><strong>Online environments are risky</strong> → Runs locally — no accounts, no cloud, no tracking</li>
+        <li><strong>Coding tutorials are boring</strong> &rarr; Students build real projects from day one</li>
+        <li><strong>AI tools aren't school-safe</strong> &rarr; 7-layer safety system blocks inappropriate content</li>
+        <li><strong>Teachers don't know code</strong> &rarr; Teacher guides explain everything before each lesson</li>
+        <li><strong>Existing platforms cost money</strong> &rarr; 100% free, MIT licensed, forever</li>
+        <li><strong>Online environments are risky</strong> &rarr; Runs locally &mdash; no accounts, no cloud, no tracking</li>
       </ul>
     </section>
 
     <!-- Safety Section -->
     <section class="section" aria-labelledby="safety-heading">
-      <h2 id="safety-heading">🔒 Safety First — Always</h2>
+      <h2 id="safety-heading">Safety architecture</h2>
       <p>EduStack was built from the ground up for the most cautious school environments. Every feature was designed to pass review by principals, superintendents, school boards, and parents.</p>
-      
+
       <h3>The 7-Layer Safety System</h3>
       <div class="safety-grid">
         <div class="safety-item">
@@ -271,14 +154,14 @@ <h3>What Makes This Safer Than Other Platforms?</h3>
     <section class="section" aria-labelledby="compliance-heading">
       <h2 id="compliance-heading">For School Administrators</h2>
       <p><strong>EduStack is designed to meet your requirements:</strong></p>
-      <ul>
-        <li>✅ <strong>COPPA compliant</strong> — Collects zero personal data from students</li>
-        <li>✅ <strong>FERPA compatible</strong> — No student records are created or transmitted</li>
-        <li>✅ <strong>CIPA friendly</strong> — All content is pre-screened; no internet access required during use</li>
-        <li>✅ <strong>ADA accessible</strong> — All content works with screen readers and keyboard navigation</li>
-        <li>✅ <strong>Free</strong> — MIT license, no cost, no subscriptions, no hidden fees</li>
-        <li>✅ <strong>Open source</strong> — Every line of code is publicly auditable</li>
-        <li>✅ <strong>No vendor lock-in</strong> — Fork it, modify it, own it</li>
+      <ul class="compliance-list">
+        <li><strong>COPPA compliant</strong> &mdash; Collects zero personal data from students</li>
+        <li><strong>FERPA compatible</strong> &mdash; No student records are created or transmitted</li>
+        <li><strong>CIPA friendly</strong> &mdash; All content is pre-screened; no internet access required during use</li>
+        <li><strong>ADA accessible</strong> &mdash; All content works with screen readers and keyboard navigation</li>
+        <li><strong>Free</strong> &mdash; MIT license, no cost, no subscriptions, no hidden fees</li>
+        <li><strong>Open source</strong> &mdash; Every line of code is publicly auditable</li>
+        <li><strong>No vendor lock-in</strong> &mdash; Fork it, modify it, own it</li>
       </ul>
     </section>
 
@@ -291,7 +174,7 @@ <h2 id="license-heading">License</h2>
   </main>
 
   <!-- Footer -->
-  <footer class="footer">
+  <footer class="site-footer">
     <p>
       <a href="index.html">Home</a> |
       <a href="getting-started.html">Getting Started</a>
diff --git a/getting-started.html b/getting-started.html
index 3215523..f676e86 100644
--- a/getting-started.html
+++ b/getting-started.html
@@ -4,208 +4,41 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Getting Started with EduStack</title>
+  <link rel="stylesheet" href="styles.css">
   <style>
-    /* ========================================= */
-    /* PAGE SETUP: Background and base styles   */
-    /* ========================================= */
-    * {
-      box-sizing: border-box;
-    }
-
-    body {
-      margin: 0;
-      padding: 0;
-      background-color: #f0f4f8;
-      color: #2d3748;
-      font-family: Georgia, serif;
-      line-height: 1.6;
-    }
-
-    /* ========================================= */
-    /* HEADER: Top navigation and title         */
-    /* ========================================= */
-    .header {
-      background: linear-gradient(135deg, #2b6cb0, #4299e1);
-      color: white;
-      padding: 30px 20px;
-      text-align: center;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-    }
-
-    .header h1 {
-      margin: 0;
-      font-size: 32px;
-      font-weight: normal;
-    }
-
-    /* ========================================= */
-    /* NAVIGATION: Links to other pages          */
-    /* ========================================= */
-    .nav {
-      background-color: white;
-      padding: 15px 20px;
-      text-align: center;
-      border-bottom: 1px solid #e2e8f0;
-      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
-    }
-
-    .nav a {
-      color: #2b6cb0;
-      text-decoration: none;
-      margin: 0 15px;
-      padding: 8px 12px;
-      border-radius: 4px;
-      transition: background-color 0.2s;
-    }
-
-    .nav a:hover,
-    .nav a:focus {
-      background-color: #edf2f7;
-      outline: 2px solid #2b6cb0;
-      outline-offset: 2px;
-    }
-
-    /* ========================================= */
-    /* CONTAINER: Main content area              */
-    /* ========================================= */
+    /* Narrow content width for reading */
     .container {
-      max-width: 800px;
-      margin: 0 auto;
-      padding: 40px 20px;
-    }
-
-    .section {
-      background-color: white;
-      padding: 30px;
-      border-radius: 8px;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-      margin-bottom: 30px;
-    }
-
-    .section h2 {
-      color: #2b6cb0;
-      margin-top: 0;
-      padding-bottom: 10px;
-      border-bottom: 2px solid #bee3f8;
-    }
-
-    .section h3 {
-      color: #2c5282;
-      margin-top: 25px;
-    }
-
-    .section ol,
-    .section ul {
-      margin: 15px 0;
-      padding-left: 30px;
-    }
-
-    .section li {
-      margin: 10px 0;
-    }
-
-    .code-block {
-      background-color: #2d3748;
-      color: #e2e8f0;
-      padding: 20px;
-      border-radius: 4px;
-      font-family: 'Courier New', monospace;
-      font-size: 14px;
-      overflow-x: auto;
-      margin: 15px 0;
-    }
-
-    .code-block code {
-      color: #e2e8f0;
-    }
-
-    .checklist {
-      background-color: #edf2f7;
-      padding: 20px;
-      border-radius: 4px;
-      border-left: 4px solid #2b6cb0;
-      margin: 20px 0;
-    }
-
-    .checklist-item {
-      margin: 10px 0;
-      padding-left: 25px;
-      position: relative;
-    }
-
-    .checklist-item::before {
-      content: "☐";
-      position: absolute;
-      left: 0;
-      color: #2b6cb0;
-      font-size: 18px;
-    }
-
-    .highlight {
-      background-color: #edf2f7;
-      padding: 20px;
-      border-radius: 4px;
-      border-left: 4px solid #2b6cb0;
-      margin: 20px 0;
+      max-width: var(--measure);
     }
 
+    /* Step number badge */
     .step-number {
       display: inline-block;
       width: 30px;
       height: 30px;
-      background-color: #2b6cb0;
-      color: white;
+      background: var(--color-accent);
+      color: #fff;
       border-radius: 50%;
       text-align: center;
       line-height: 30px;
       font-weight: bold;
-      margin-right: 10px;
-    }
-
-    /* ========================================= */
-    /* FOOTER: Bottom links                     */
-    /* ========================================= */
-    .footer {
-      background-color: white;
-      padding: 30px 20px;
-      text-align: center;
-      border-top: 1px solid #e2e8f0;
-      margin-top: 60px;
-      color: #718096;
-    }
-
-    .footer a {
-      color: #2b6cb0;
-      text-decoration: none;
-      margin: 0 10px;
-    }
-
-    .footer a:hover,
-    .footer a:focus {
-      text-decoration: underline;
-      outline: 2px solid #2b6cb0;
-      outline-offset: 2px;
-    }
-
-    /* ========================================= */
-    /* FOCUS VISIBLE: Keyboard navigation        */
-    /* ========================================= */
-    *:focus-visible {
-      outline: 2px solid #2b6cb0;
-      outline-offset: 2px;
+      margin-right: var(--space-3);
+      flex-shrink: 0;
     }
   </style>
 </head>
 <body>
   <!-- Header -->
-  <header class="header">
-    <h1>Getting Started with EduStack</h1>
+  <header class="site-header">
+    <div class="site-header-inner">
+      <h1>Getting Started with <span class="logo-edu">Edu</span><span class="logo-stack">Stack</span></h1>
+    </div>
   </header>
 
   <!-- Navigation -->
-  <nav class="nav" role="navigation" aria-label="Main navigation">
+  <nav class="site-nav" role="navigation" aria-label="Main navigation">
     <a href="index.html">Home</a>
-    <a href="getting-started.html">Getting Started</a>
+    <a href="getting-started.html" aria-current="page">Getting Started</a>
     <a href="about.html">About</a>
   </nav>
 
@@ -225,7 +58,7 @@ <h2 id="intro-heading">Welcome to EduStack!</h2>
       <h2 id="requirements-heading">What You Need</h2>
       <ul>
         <li>A computer with Git installed (most school IT departments can do this)</li>
-        <li>A text editor (VS Code recommended — it's free)</li>
+        <li>A text editor (VS Code recommended &mdash; it's free)</li>
         <li>A web browser (Chrome, Firefox, Edge, or Safari)</li>
         <li>15 minutes to set up before your first class</li>
       </ul>
@@ -234,26 +67,31 @@ <h2 id="requirements-heading">What You Need</h2>
     <!-- Setup Steps -->
     <section class="section" aria-labelledby="setup-heading">
       <h2 id="setup-heading">Setup (One Time)</h2>
-      
+
       <h3><span class="step-number">1</span>Clone EduStack</h3>
       <p>Open a terminal (or command prompt) and run:</p>
       <div class="code-block">
-        <code>git clone [repository-url]</code>
+        <span class="code-prompt">$</span>
+        <code id="code-clone">git clone https://github.com/Cartooli/edustack.git</code>
+        <button class="copy-btn" aria-label="Copy clone command" data-target="code-clone">copy</button>
       </div>
-      <p><em>Note: Your IT department will provide the correct repository URL for your school.</em></p>
-      <p>This downloads EduStack to your computer. It's just a folder with files — no installation needed.</p>
+      <p>This downloads EduStack to your computer. It's just a folder with files &mdash; no installation needed.</p>
 
       <h3><span class="step-number">2</span>Enter the Directory</h3>
       <div class="code-block">
-        <code>cd edustack</code>
+        <span class="code-prompt">$</span>
+        <code id="code-cd">cd edustack</code>
+        <button class="copy-btn" aria-label="Copy cd command" data-target="code-cd">copy</button>
       </div>
       <p>This moves you into the EduStack folder.</p>
 
       <h3><span class="step-number">3</span>Run the Setup Script</h3>
       <div class="code-block">
-        <code>./setup.sh</code>
+        <span class="code-prompt">$</span>
+        <code id="code-setup">./setup.sh</code>
+        <button class="copy-btn" aria-label="Copy setup command" data-target="code-setup">copy</button>
       </div>
-      <p>This validates your environment. It doesn't install anything — just checks that everything is ready.</p>
+      <p>This validates your environment. It doesn't install anything &mdash; just checks that everything is ready.</p>
 
       <div class="highlight">
         <p><strong>That's it!</strong> No <code>npm install</code>. No API keys. No accounts. No admin privileges needed.</p>
@@ -263,7 +101,7 @@ <h3><span class="step-number">3</span>Run the Setup Script</h3>
     <!-- First Class -->
     <section class="section" aria-labelledby="first-class-heading">
       <h2 id="first-class-heading">Your First Class (30 minutes)</h2>
-      
+
       <div class="checklist">
         <h3 style="margin-top: 0;">Before Class Checklist:</h3>
         <div class="checklist-item">Read the teacher guide for Lesson 1 (5 min): <code>docs/teacher-guides/LESSON-01.md</code></div>
@@ -285,7 +123,9 @@ <h3>During Class:</h3>
       <h2 id="updates-heading">Getting Updates</h2>
       <p>To get the latest lessons and safety patches:</p>
       <div class="code-block">
-        <code>cd edustack<br>git pull origin main</code>
+        <span class="code-prompt">$</span>
+        <code id="code-pull">cd edustack &amp;&amp; git pull origin main</code>
+        <button class="copy-btn" aria-label="Copy pull command" data-target="code-pull">copy</button>
       </div>
       <p>EduStack follows semantic versioning. Safety patches are released immediately. New lessons are released on a predictable schedule.</p>
     </section>
@@ -293,8 +133,8 @@ <h2 id="updates-heading">Getting Updates</h2>
     <!-- AI Features (Optional) -->
     <section class="section" aria-labelledby="ai-heading">
       <h2 id="ai-heading">AI Features (Optional)</h2>
-      <p>EduStack can optionally integrate with Claude (via Claude Code or the API) to provide students with an AI coding tutor. <strong>This is entirely optional</strong> — all lessons work without AI.</p>
-      
+      <p>EduStack can optionally integrate with Claude (via Claude Code or the API) to provide students with an AI coding tutor. <strong>This is entirely optional</strong> &mdash; all lessons work without AI.</p>
+
       <div class="checklist">
         <h3 style="margin-top: 0;">If AI features will be used:</h3>
         <div class="checklist-item">Claude Code or API access configured by IT department</div>
@@ -309,11 +149,11 @@ <h3 style="margin-top: 0;">If AI features will be used:</h3>
     <section class="section" aria-labelledby="troubleshooting-heading">
       <h2 id="troubleshooting-heading">Troubleshooting</h2>
       <ul>
-        <li><strong>"The page is blank"</strong> → Check if the file was saved. Check for a typo in the filename.</li>
-        <li><strong>"The colors don't show"</strong> → Check for a missing semicolon in CSS. Most common beginner error.</li>
-        <li><strong>"Nothing happens when I click"</strong> → Check the browser console (F12) for JavaScript errors.</li>
-        <li><strong>"The AI isn't responding"</strong> → Check if AI features are enabled in <code>config/teacher-settings.json</code>.</li>
-        <li><strong>"I can't git pull"</strong> → Ask IT to check network access to GitHub.</li>
+        <li><strong>"The page is blank"</strong> &rarr; Check if the file was saved. Check for a typo in the filename.</li>
+        <li><strong>"The colors don't show"</strong> &rarr; Check for a missing semicolon in CSS. Most common beginner error.</li>
+        <li><strong>"Nothing happens when I click"</strong> &rarr; Check the browser console (F12) for JavaScript errors.</li>
+        <li><strong>"The AI isn't responding"</strong> &rarr; Check if AI features are enabled in <code>config/teacher-settings.json</code>.</li>
+        <li><strong>"I can't git pull"</strong> &rarr; Ask IT to check network access to GitHub.</li>
       </ul>
     </section>
 
@@ -344,11 +184,34 @@ <h2 id="next-steps-heading">Next Steps</h2>
   </main>
 
   <!-- Footer -->
-  <footer class="footer">
+  <footer class="site-footer">
     <p>
       <a href="index.html">Home</a> |
       <a href="about.html">About</a>
     </p>
   </footer>
+
+  <script>
+    // Copy-to-clipboard for code blocks
+    document.querySelectorAll(".copy-btn").forEach(function(btn) {
+      btn.addEventListener("click", function() {
+        var targetId = btn.getAttribute("data-target");
+        var codeEl = document.getElementById(targetId);
+        if (!codeEl) return;
+        var text = codeEl.textContent;
+        navigator.clipboard.writeText(text).then(function() {
+          btn.textContent = "copied!";
+          btn.classList.add("copied");
+          setTimeout(function() {
+            btn.textContent = "copy";
+            btn.classList.remove("copied");
+          }, 2000);
+        }).catch(function() {
+          // Fallback for browsers without clipboard API
+          btn.textContent = "copy";
+        });
+      });
+    });
+  </script>
 </body>
 </html>
diff --git a/index.html b/index.html
index 6b5f278..5905660 100644
--- a/index.html
+++ b/index.html
@@ -4,451 +4,280 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>EduStack — Curriculum Hub</title>
+  <link rel="stylesheet" href="styles.css">
   <style>
-    /* ========================================= */
-    /* PAGE SETUP: Background and base styles   */
-    /* ========================================= */
-    * {
-      box-sizing: border-box;
-    }
-
-    body {
-      margin: 0;
-      padding: 0;
-      background-color: #f0f4f8;
-      color: #2d3748;
-      font-family: Georgia, serif;
-      line-height: 1.6;
-    }
-
-    /* ========================================= */
-    /* HEADER: Top navigation and title         */
-    /* ========================================= */
-    .header {
-      background: linear-gradient(135deg, #2b6cb0, #4299e1);
-      color: white;
-      padding: 30px 20px;
-      text-align: center;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-    }
-
-    .header h1 {
-      margin: 0;
-      font-size: 32px;
-      font-weight: normal;
-    }
-
-    .header p {
-      margin: 10px 0 0;
-      font-size: 16px;
-      opacity: 0.9;
-    }
-
-    /* ========================================= */
-    /* NAVIGATION: Links to other pages          */
-    /* ========================================= */
-    .nav {
-      background-color: white;
-      padding: 15px 20px;
-      text-align: center;
-      border-bottom: 1px solid #e2e8f0;
-      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
-    }
-
-    .nav a {
-      color: #2b6cb0;
-      text-decoration: none;
-      margin: 0 15px;
-      padding: 8px 12px;
-      border-radius: 4px;
-      transition: background-color 0.2s;
-    }
-
-    .nav a:hover,
-    .nav a:focus {
-      background-color: #edf2f7;
-      outline: 2px solid #2b6cb0;
-      outline-offset: 2px;
-    }
-
-    /* ========================================= */
-    /* CONTAINER: Main content area              */
-    /* ========================================= */
-    .container {
-      max-width: 1200px;
-      margin: 0 auto;
-      padding: 30px 20px;
-    }
-
-    /* ========================================= */
-    /* QUICK START: Today's lesson selector      */
-    /* ========================================= */
+    /* Quick start */
     .quick-start {
-      background-color: white;
-      padding: 25px;
-      border-radius: 8px;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-      margin-bottom: 30px;
+      background: var(--color-surface);
+      padding: var(--space-6);
+      border-radius: var(--radius-md);
+      box-shadow: var(--shadow-sm);
+      margin-bottom: var(--space-8);
     }
-
     .quick-start h2 {
-      margin: 0 0 15px;
-      color: #2b6cb0;
-      font-size: 22px;
+      margin: 0 0 var(--space-4);
+      color: var(--color-accent);
+      font-size: 1.25rem;
     }
-
     .quick-start-controls {
       display: flex;
-      gap: 15px;
+      gap: var(--space-4);
       flex-wrap: wrap;
       align-items: center;
     }
-
     .quick-start select {
-      padding: 10px 15px;
-      font-size: 16px;
-      font-family: Georgia, serif;
-      border: 2px solid #cbd5e0;
-      border-radius: 4px;
-      background-color: white;
-      color: #2d3748;
+      padding: var(--space-3) var(--space-4);
+      font-size: 1rem;
+      font-family: var(--font-body);
+      border: 2px solid var(--color-line);
+      border-radius: var(--radius-sm);
+      background: var(--color-surface);
+      color: var(--color-ink);
       cursor: pointer;
     }
-
     .quick-start select:focus {
-      outline: 2px solid #2b6cb0;
-      outline-offset: 2px;
-      border-color: #2b6cb0;
-    }
-
-    .btn {
-      padding: 10px 20px;
-      font-size: 16px;
-      font-family: Georgia, serif;
-      background-color: #2b6cb0;
-      color: white;
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
-      transition: background-color 0.2s;
-    }
-
-    .btn:hover,
-    .btn:focus {
-      background-color: #2c5282;
-      outline: 2px solid #2b6cb0;
+      outline: 2px solid var(--color-accent);
       outline-offset: 2px;
+      border-color: var(--color-accent);
     }
-
-    .btn:active {
-      background-color: #2a4365;
+    .quick-start-error {
+      color: #9f1239;
+      font-size: 0.95rem;
+      margin-top: 0.5rem;
     }
 
-    /* ========================================= */
-    /* SEARCH AND FILTER: Find lessons           */
-    /* ========================================= */
+    /* Search and filter */
     .search-filter {
-      background-color: white;
-      padding: 25px;
-      border-radius: 8px;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-      margin-bottom: 30px;
+      background: var(--color-surface);
+      padding: var(--space-6);
+      border-radius: var(--radius-md);
+      box-shadow: var(--shadow-sm);
+      margin-bottom: var(--space-8);
     }
-
     .search-filter h2 {
-      margin: 0 0 15px;
-      color: #2b6cb0;
-      font-size: 22px;
+      margin: 0 0 var(--space-4);
+      color: var(--color-accent);
+      font-size: 1.25rem;
     }
-
     .search-box {
       width: 100%;
-      padding: 12px 15px;
-      font-size: 16px;
-      font-family: Georgia, serif;
-      border: 2px solid #cbd5e0;
-      border-radius: 4px;
-      margin-bottom: 15px;
+      padding: var(--space-3) var(--space-4);
+      font-size: 1rem;
+      font-family: var(--font-body);
+      border: 2px solid var(--color-line);
+      border-radius: var(--radius-sm);
+      margin-bottom: var(--space-4);
+      color: var(--color-ink);
     }
-
     .search-box:focus {
-      outline: 2px solid #2b6cb0;
+      outline: 2px solid var(--color-accent);
       outline-offset: 2px;
-      border-color: #2b6cb0;
+      border-color: var(--color-accent);
     }
-
     .filters {
       display: flex;
-      gap: 10px;
+      gap: var(--space-3);
       flex-wrap: wrap;
     }
-
     .filter-btn {
-      padding: 8px 16px;
-      font-size: 14px;
-      font-family: Georgia, serif;
-      background-color: #edf2f7;
-      color: #2d3748;
-      border: 2px solid #cbd5e0;
-      border-radius: 4px;
+      padding: var(--space-2) var(--space-4);
+      font-size: 0.9rem;
+      font-family: var(--font-body);
+      background: var(--color-paper);
+      color: var(--color-ink);
+      border: 2px solid var(--color-line);
+      border-radius: var(--radius-sm);
       cursor: pointer;
-      transition: all 0.2s;
+      transition: background 0.15s, color 0.15s, border-color 0.15s;
     }
-
     .filter-btn:hover,
     .filter-btn:focus {
-      background-color: #e2e8f0;
-      outline: 2px solid #2b6cb0;
+      background: var(--color-line);
+      outline: 2px solid var(--color-accent);
       outline-offset: 2px;
     }
-
     .filter-btn.active {
-      background-color: #2b6cb0;
-      color: white;
-      border-color: #2b6cb0;
+      background: var(--color-accent);
+      color: #fff;
+      border-color: var(--color-accent);
     }
 
-    /* ========================================= */
-    /* PREP TIME CALCULATOR: Running total       */
-    /* ========================================= */
+    /* Prep calculator */
     .prep-calculator {
-      background-color: #edf2f7;
-      padding: 15px 25px;
-      border-radius: 8px;
-      margin-bottom: 30px;
+      background: var(--color-paper);
+      padding: var(--space-4) var(--space-6);
+      border-radius: var(--radius-md);
+      margin-bottom: var(--space-8);
       text-align: center;
-      border: 2px solid #cbd5e0;
+      border: 2px solid var(--color-line);
     }
-
     .prep-calculator strong {
-      color: #2b6cb0;
-      font-size: 18px;
+      color: var(--color-accent);
+      font-size: 1.1rem;
     }
 
-    /* ========================================= */
-    /* LESSON CARDS: Grid of lesson cards        */
-    /* ========================================= */
+    /* Lessons grid */
     .lessons-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-      gap: 25px;
-      margin-bottom: 40px;
+      gap: var(--space-6);
+      margin-bottom: var(--space-10);
     }
-
     .lesson-card {
-      background-color: white;
-      border-radius: 8px;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-      padding: 25px;
+      background: var(--color-surface);
+      border-radius: var(--radius-md);
+      box-shadow: var(--shadow-sm);
+      padding: var(--space-6);
       transition: transform 0.2s, box-shadow 0.2s;
       border: 2px solid transparent;
     }
-
     .lesson-card:hover {
       transform: translateY(-2px);
-      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+      box-shadow: var(--shadow-md);
     }
-
     .lesson-card:focus-within {
-      border-color: #2b6cb0;
-      outline: 2px solid #2b6cb0;
+      border-color: var(--color-accent);
+      outline: 2px solid var(--color-accent);
       outline-offset: 2px;
     }
-
     .lesson-card h3 {
-      margin: 0 0 10px;
-      color: #2b6cb0;
-      font-size: 20px;
+      margin: 0 0 var(--space-3);
+      color: var(--color-accent);
+      font-size: 1.1rem;
     }
-
     .lesson-meta {
       display: flex;
-      gap: 15px;
-      margin: 10px 0;
-      font-size: 14px;
-      color: #718096;
+      gap: var(--space-4);
+      margin: var(--space-3) 0;
+      font-size: 0.875rem;
+      color: var(--color-muted);
     }
-
     .lesson-meta span {
       display: flex;
       align-items: center;
-      gap: 5px;
+      gap: var(--space-2);
     }
-
     .lesson-description {
-      margin: 15px 0;
-      color: #4a5568;
+      margin: var(--space-4) 0;
+      color: var(--color-muted);
       line-height: 1.6;
     }
-
     .lesson-links {
       display: flex;
-      gap: 10px;
+      gap: var(--space-3);
       flex-wrap: wrap;
-      margin-top: 15px;
+      margin-top: var(--space-4);
     }
-
     .lesson-links a {
-      padding: 8px 16px;
-      font-size: 14px;
+      padding: var(--space-2) var(--space-4);
+      font-size: 0.875rem;
       text-decoration: none;
-      border-radius: 4px;
-      transition: all 0.2s;
+      border-radius: var(--radius-sm);
+      transition: background 0.15s, color 0.15s;
     }
-
     .link-teacher {
-      background-color: #2b6cb0;
-      color: white;
+      background: var(--color-accent);
+      color: #fff;
     }
-
     .link-teacher:hover,
     .link-teacher:focus {
-      background-color: #2c5282;
-      outline: 2px solid #2b6cb0;
+      background: var(--color-accent-hover);
+      outline: 2px solid var(--color-accent);
       outline-offset: 2px;
     }
-
     .link-student {
-      background-color: #edf2f7;
-      color: #2d3748;
-      border: 2px solid #cbd5e0;
+      background: var(--color-paper);
+      color: var(--color-ink);
+      border: 2px solid var(--color-line);
     }
-
     .link-student:hover,
     .link-student:focus {
-      background-color: #e2e8f0;
-      outline: 2px solid #2b6cb0;
+      background: var(--color-line);
+      outline: 2px solid var(--color-accent);
       outline-offset: 2px;
     }
 
-    /* ========================================= */
-    /* EXAMPLE PREVIEW: Inline iframe            */
-    /* ========================================= */
+    /* Example preview */
     .example-preview {
-      margin-top: 15px;
-      border: 2px solid #e2e8f0;
-      border-radius: 4px;
+      margin-top: var(--space-4);
+      border: 2px solid var(--color-line);
+      border-radius: var(--radius-sm);
       overflow: hidden;
     }
-
     .example-preview iframe {
       width: 100%;
       height: 300px;
       border: none;
       display: block;
     }
-
     .example-fallback {
-      padding: 20px;
+      padding: var(--space-5);
       text-align: center;
-      background-color: #edf2f7;
-      color: #4a5568;
+      background: var(--color-paper);
+      color: var(--color-muted);
     }
-
     .example-fallback a {
-      color: #2b6cb0;
+      color: var(--color-accent);
       text-decoration: none;
       font-weight: bold;
     }
-
     .example-fallback a:hover,
     .example-fallback a:focus {
       text-decoration: underline;
-      outline: 2px solid #2b6cb0;
+      outline: 2px solid var(--color-accent);
       outline-offset: 2px;
     }
 
-    /* ========================================= */
-    /* NO RESULTS: Empty state                   */
-    /* ========================================= */
+    /* No results */
     .no-results {
       text-align: center;
-      padding: 60px 20px;
-      color: #718096;
+      padding: var(--space-12) var(--space-5);
+      color: var(--color-muted);
     }
-
     .no-results h3 {
-      color: #4a5568;
-      margin-bottom: 10px;
-    }
-
-    /* ========================================= */
-    /* FOOTER: Bottom links                     */
-    /* ========================================= */
-    .footer {
-      background-color: white;
-      padding: 30px 20px;
-      text-align: center;
-      border-top: 1px solid #e2e8f0;
-      margin-top: 60px;
-      color: #718096;
-    }
-
-    .footer a {
-      color: #2b6cb0;
-      text-decoration: none;
-      margin: 0 10px;
-    }
-
-    .footer a:hover,
-    .footer a:focus {
-      text-decoration: underline;
-      outline: 2px solid #2b6cb0;
-      outline-offset: 2px;
+      color: var(--color-ink);
+      margin-bottom: var(--space-3);
     }
 
-    /* ========================================= */
-    /* KEYBOARD SHORTCUTS: Visual indicator      */
-    /* ========================================= */
+    /* Keyboard hint */
     .keyboard-hint {
-      font-size: 12px;
-      color: #a0aec0;
-      margin-top: 10px;
+      font-size: 0.8rem;
+      color: var(--color-muted-light);
+      margin-top: var(--space-3);
       text-align: center;
     }
 
-    /* ========================================= */
-    /* RESPONSIVE: Mobile adjustments            */
-    /* ========================================= */
+    /* Responsive */
     @media (max-width: 768px) {
       .lessons-grid {
         grid-template-columns: 1fr;
       }
-
       .quick-start-controls {
         flex-direction: column;
         align-items: stretch;
       }
-
       .quick-start select,
       .btn {
         width: 100%;
       }
-
       .filters {
         justify-content: center;
       }
     }
-
-    /* ========================================= */
-    /* FOCUS VISIBLE: Keyboard navigation        */
-    /* ========================================= */
-    *:focus-visible {
-      outline: 2px solid #2b6cb0;
-      outline-offset: 2px;
-    }
   </style>
 </head>
 <body>
   <!-- Header -->
-  <header class="header">
-    <h1>🎓 EduStack Curriculum Hub</h1>
-    <p>Your guide to teaching web development in middle school</p>
+  <header class="site-header">
+    <div class="site-header-inner">
+      <h1><span class="logo-edu">Edu</span><span class="logo-stack">Stack</span> &mdash; Curriculum Hub</h1>
+      <p>Your guide to teaching web development in middle school</p>
+    </div>
   </header>
 
   <!-- Navigation -->
-  <nav class="nav" role="navigation" aria-label="Main navigation">
-    <a href="index.html">Home</a>
+  <nav class="site-nav" role="navigation" aria-label="Main navigation">
+    <a href="index.html" aria-current="page">Home</a>
     <a href="getting-started.html">Getting Started</a>
     <a href="about.html">About</a>
   </nav>
@@ -459,7 +288,7 @@ <h1>🎓 EduStack Curriculum Hub</h1>
     <section class="quick-start" aria-labelledby="quick-start-heading">
       <h2 id="quick-start-heading">Today's Lesson</h2>
       <div class="quick-start-controls">
-        <label for="lesson-select" style="display: none;">Select lesson:</label>
+        <label for="lesson-select">Select today's lesson:</label>
         <select id="lesson-select" aria-label="Select today's lesson">
           <option value="">Choose a lesson...</option>
         </select>
@@ -467,15 +296,16 @@ <h2 id="quick-start-heading">Today's Lesson</h2>
           Start Today's Lesson
         </button>
       </div>
+      <p id="quick-start-error" class="quick-start-error" role="alert" style="display:none;"></p>
     </section>
 
     <!-- Search and Filter Section -->
     <section class="search-filter" aria-labelledby="search-heading">
       <h2 id="search-heading">Find Lessons</h2>
-      <input 
-        type="text" 
-        class="search-box" 
-        id="search-input" 
+      <input
+        type="text"
+        class="search-box"
+        id="search-input"
         placeholder="Search lessons by name, topic, or keyword..."
         aria-label="Search lessons"
       >
@@ -508,7 +338,7 @@ <h3>No lessons found</h3>
   </main>
 
   <!-- Footer -->
-  <footer class="footer">
+  <footer class="site-footer">
     <p>
       <a href="about.html">About EduStack</a> |
       <a href="getting-started.html">Getting Started</a>
@@ -517,9 +347,7 @@ <h3>No lessons found</h3>
   </footer>
 
   <script>
-    // =========================================
-    // CURRICULUM DATA: All lessons in JSON
-    // =========================================
+    // Curriculum data: all lessons
     const curriculumData = [
       {
         id: 1,
@@ -691,27 +519,23 @@ <h3>No lessons found</h3>
       }
     ];
 
-    // =========================================
-    // STATE: Current filters and search
-    // =========================================
+    // State: current filters and search
     let currentFilter = "all";
     let searchQuery = "";
     let selectedLessons = new Set();
 
-    // =========================================
-    // RENDER: Create lesson cards
-    // =========================================
+    // Render lesson cards
     function renderLessons() {
       const grid = document.getElementById("lessons-grid");
       const noResults = document.getElementById("no-results");
-      
+
       // Filter lessons
       let filtered = curriculumData.filter(lesson => {
         // Unit filter
         if (currentFilter !== "all" && currentFilter !== lesson.unit && currentFilter !== lesson.difficulty) {
           return false;
         }
-        
+
         // Search filter
         if (searchQuery) {
           const query = searchQuery.toLowerCase();
@@ -720,7 +544,7 @@ <h3>No lessons found</h3>
             return false;
           }
         }
-        
+
         return true;
       });
 
@@ -747,9 +571,7 @@ <h3>No lessons found</h3>
       updatePrepCalculator();
     }
 
-    // =========================================
-    // CREATE: Individual lesson card
-    // =========================================
+    // Create individual lesson card
     function createLessonCard(lesson) {
       const card = document.createElement("div");
       card.className = "lesson-card";
@@ -767,18 +589,18 @@ <h3>No lessons found</h3>
       const cardHTML = `
         <h3>Lesson ${lesson.number}: ${lesson.title}</h3>
         <div class="lesson-meta">
-          <span>⏱️ ${lesson.prepTime} min prep</span>
-          <span style="color: ${difficultyColors[lesson.difficulty]}">● ${lesson.difficulty}</span>
+          <span>&#8987; ${lesson.prepTime} min prep</span>
+          <span style="color: ${difficultyColors[lesson.difficulty]}">&#9679; ${lesson.difficulty}</span>
         </div>
         <p class="lesson-description">${lesson.description}</p>
-        <p style="font-size: 14px; color: #718096; margin: 10px 0;"><strong>Builds:</strong> ${lesson.builds}</p>
+        <p style="font-size: 0.875rem; color: var(--color-muted); margin: var(--space-3) 0;"><strong>Builds:</strong> ${lesson.builds}</p>
         <div class="lesson-links">
           <a href="${lesson.teacherGuide}" class="link-teacher" target="_blank" rel="noopener">Teacher Guide</a>
           <a href="${lesson.studentSkill}" class="link-student" target="_blank" rel="noopener">Student Skill</a>
         </div>
         ${lesson.example ? `
           <div class="example-preview">
-            <iframe src="${lesson.example}" title="Example preview for ${lesson.title}" loading="lazy"></iframe>
+            <iframe src="${lesson.example}" title="Example preview for ${lesson.title}" loading="lazy" sandbox="allow-same-origin"></iframe>
             <div class="example-fallback" style="display: none;">
               <p>Preview not available. <a href="${lesson.example}" target="_blank" rel="noopener">Open example in new tab</a></p>
             </div>
@@ -808,9 +630,7 @@ <h3>Lesson ${lesson.number}: ${lesson.title}</h3>
       return card;
     }
 
-    // =========================================
-    // UPDATE: Prep time calculator
-    // =========================================
+    // Update prep time calculator
     function updatePrepCalculator() {
       const visibleLessons = Array.from(document.querySelectorAll(".lesson-card"))
         .map(card => {
@@ -824,34 +644,28 @@ <h3>Lesson ${lesson.number}: ${lesson.title}</h3>
       prepTotalEl.textContent = `${totalPrep} minutes`;
     }
 
-    // =========================================
-    // SEARCH: Filter by text input
-    // =========================================
+    // Search: filter by text input
     const searchInput = document.getElementById("search-input");
     searchInput.addEventListener("input", function(e) {
       searchQuery = e.target.value;
       renderLessons();
     });
 
-    // =========================================
-    // FILTER: Filter by unit/difficulty
-    // =========================================
+    // Filter: filter by unit/difficulty
     const filterButtons = document.querySelectorAll(".filter-btn");
     filterButtons.forEach(btn => {
       btn.addEventListener("click", function() {
         // Update active state
         filterButtons.forEach(b => b.classList.remove("active"));
         btn.classList.add("active");
-        
+
         // Update filter
         currentFilter = btn.getAttribute("data-filter");
         renderLessons();
       });
     });
 
-    // =========================================
-    // QUICK START: Today's lesson
-    // =========================================
+    // Quick start: today's lesson
     const lessonSelect = document.getElementById("lesson-select");
     const quickStartBtn = document.getElementById("quick-start-btn");
 
@@ -867,7 +681,10 @@ <h3>Lesson ${lesson.number}: ${lesson.title}</h3>
     quickStartBtn.addEventListener("click", function() {
       const selectedId = lessonSelect.value;
       if (!selectedId) {
-        alert("Please select a lesson first.");
+        const err = document.getElementById("quick-start-error");
+        err.textContent = "Please select a lesson first.";
+        err.style.display = "block";
+        setTimeout(() => { err.style.display = "none"; }, 3000);
         return;
       }
 
@@ -888,9 +705,7 @@ <h3>Lesson ${lesson.number}: ${lesson.title}</h3>
       }
     });
 
-    // =========================================
-    // KEYBOARD SHORTCUTS
-    // =========================================
+    // Keyboard shortcuts
     document.addEventListener("keydown", function(e) {
       // Focus search with /
       if (e.key === "/" && e.target.tagName !== "INPUT" && e.target.tagName !== "TEXTAREA") {
@@ -907,12 +722,10 @@ <h3>Lesson ${lesson.number}: ${lesson.title}</h3>
       }
     });
 
-    // =========================================
-    // INITIALIZE: Render on page load
-    // =========================================
+    // Initialize: render on page load
     document.addEventListener("DOMContentLoaded", function() {
       renderLessons();
-      
+
       // Set "All Lessons" as active
       document.querySelector('.filter-btn[data-filter="all"]').classList.add("active");
     });
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..1244e66
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,282 @@
+/* Design tokens */
+:root {
+  --font-body: "Source Sans 3", system-ui, sans-serif;
+  --font-mono: "SFMono-Regular", "Menlo", "Monaco", "Consolas", monospace;
+  --color-ink: #0f172a;
+  --color-muted: #475569;
+  --color-muted-light: #64748b;
+  --color-paper: #f1f5f9;
+  --color-surface: #ffffff;
+  --color-line: #e2e8f0;
+  --color-accent: #2563eb;
+  --color-accent-hover: #1d4ed8;
+  --color-accent-light: #dbeafe;
+  --color-ok: #0f766e;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --shadow-sm: 0 1px 3px rgba(15,23,42,0.07);
+  --shadow-md: 0 4px 16px rgba(15,23,42,0.10);
+  --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
+  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem;
+  --space-10: 2.5rem; --space-12: 3rem;
+  --content-max: 1200px;
+  --measure: 800px;
+}
+
+/* Reset */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+/* Base */
+body {
+  margin: 0;
+  padding: 0;
+  background-color: var(--color-paper);
+  color: var(--color-ink);
+  font-family: var(--font-body);
+  line-height: 1.6;
+}
+
+/* Skip link */
+.skip-link {
+  position: absolute;
+  left: -9999px;
+  top: var(--space-3);
+  background: var(--color-accent);
+  color: #fff;
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-sm);
+  font-weight: 600;
+  z-index: 100;
+  text-decoration: none;
+}
+.skip-link:focus {
+  left: var(--space-4);
+}
+
+/* Site header */
+.site-header {
+  background: linear-gradient(155deg, #080e1c 0%, #0d2040 55%, #1a3a7c 100%);
+  color: #f8fafc;
+  padding: var(--space-10) var(--space-5);
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+.site-header::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
+  background-size: 28px 28px;
+  pointer-events: none;
+}
+.site-header-inner {
+  position: relative;
+  z-index: 1;
+}
+.site-header h1 {
+  font-size: clamp(1.5rem, 4vw, 2.25rem);
+  font-weight: 700;
+  margin: 0;
+  letter-spacing: -0.02em;
+}
+.site-header p {
+  font-size: 1rem;
+  margin: 0.5rem 0 0;
+  color: rgba(248,250,252,0.82);
+}
+
+/* Split-color wordmark */
+.logo-edu { color: #f8fafc; }
+.logo-stack { color: #93c5fd; }
+
+/* Site nav */
+.site-nav {
+  background: var(--color-surface);
+  padding: 0 var(--space-5);
+  text-align: center;
+  border-bottom: 1px solid var(--color-line);
+  box-shadow: var(--shadow-sm);
+  display: flex;
+  justify-content: center;
+  gap: var(--space-6);
+  flex-wrap: wrap;
+}
+.site-nav a {
+  color: var(--color-muted);
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 0.95rem;
+  display: inline-flex;
+  align-items: center;
+  min-height: 48px;
+  padding: 0 var(--space-2);
+  border-bottom: 2px solid transparent;
+  transition: color 0.15s, border-color 0.15s;
+}
+.site-nav a:hover,
+.site-nav a[aria-current="page"] {
+  color: var(--color-accent);
+  border-bottom-color: var(--color-accent);
+}
+
+/* Container */
+.container {
+  max-width: var(--content-max);
+  margin: 0 auto;
+  padding: var(--space-8) var(--space-5);
+}
+.container--narrow {
+  max-width: var(--measure);
+}
+
+/* Section card */
+.section {
+  background: var(--color-surface);
+  padding: var(--space-8);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  margin-bottom: var(--space-8);
+}
+.section h2 {
+  color: var(--color-accent);
+  margin-top: 0;
+  padding-bottom: var(--space-3);
+  border-bottom: 2px solid var(--color-accent-light);
+}
+.section h3 {
+  color: var(--color-accent-hover);
+  margin-top: var(--space-6);
+}
+.section ul,
+.section ol {
+  margin: var(--space-4) 0;
+  padding-left: var(--space-8);
+}
+.section li {
+  margin: var(--space-2) 0;
+}
+
+/* Highlight box */
+.highlight {
+  background: var(--color-paper);
+  padding: var(--space-5);
+  border-radius: var(--radius-sm);
+  border-left: 4px solid var(--color-accent);
+  margin: var(--space-5) 0;
+}
+
+/* Checklist */
+.checklist {
+  background: var(--color-accent-light);
+  padding: var(--space-6);
+  border-radius: var(--radius-md);
+  border-left: 4px solid var(--color-accent);
+  margin: var(--space-5) 0;
+}
+.checklist-item {
+  margin: var(--space-3) 0;
+  padding-left: 1.5rem;
+  position: relative;
+  color: var(--color-ink);
+}
+.checklist-item::before {
+  content: "☐";
+  position: absolute;
+  left: 0;
+  color: var(--color-accent);
+}
+
+/* Code block */
+.code-block {
+  background: #0f172a;
+  color: #e2e8f0;
+  padding: var(--space-4) var(--space-5);
+  border-radius: var(--radius-md);
+  font-family: var(--font-mono);
+  font-size: 0.88rem;
+  overflow-x: auto;
+  margin: var(--space-3) 0;
+  border: 1px solid rgba(148,163,184,0.18);
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+.code-prompt {
+  color: #4ade80;
+  user-select: none;
+  flex-shrink: 0;
+}
+.code-block code {
+  flex: 1;
+  min-width: 0;
+  color: #e2e8f0;
+}
+.copy-btn {
+  flex-shrink: 0;
+  background: rgba(255,255,255,0.08);
+  color: #94a3b8;
+  border: 1px solid rgba(148,163,184,0.25);
+  border-radius: var(--radius-sm);
+  padding: 2px 10px;
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+  white-space: nowrap;
+}
+.copy-btn:hover {
+  background: rgba(255,255,255,0.16);
+  color: #f1f5f9;
+}
+.copy-btn.copied {
+  color: #4ade80;
+}
+
+/* Buttons */
+.btn {
+  padding: var(--space-3) var(--space-5);
+  font-size: 1rem;
+  font-family: var(--font-body);
+  background: var(--color-accent);
+  color: #fff;
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.btn:hover,
+.btn:focus {
+  background: var(--color-accent-hover);
+}
+.btn:active {
+  background: #1e40af;
+}
+
+/* Site footer */
+.site-footer {
+  background: var(--color-surface);
+  padding: var(--space-8) var(--space-5);
+  text-align: center;
+  border-top: 1px solid var(--color-line);
+  margin-top: var(--space-12);
+  color: var(--color-muted);
+}
+.site-footer a {
+  color: var(--color-accent);
+  text-decoration: none;
+  margin: 0 var(--space-3);
+}
+.site-footer a:hover,
+.site-footer a:focus {
+  text-decoration: underline;
+}
+
+/* Focus visible */
+*:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}