From c6e33bbe489de98957195dfe515a119982387c37 Mon Sep 17 00:00:00 2001
From: shubhamshinare <shubhamshinare2004@gmail.com>
Date: Tue, 31 Mar 2026 00:44:42 +0530
Subject: [PATCH 1/2] Fix #232: updated Help and Quiz modals to scale properly
 with internal scrolling

---
 templates/boneset.html    |  676 +++++---
 templates/helpButton.html |  141 +-
 templates/style.css       | 3173 +++++++++++++++++++------------------
 3 files changed, 2186 insertions(+), 1804 deletions(-)
diff --git a/templates/boneset.html b/templates/boneset.html
index 4e1bf728..1684ca27 100644
--- a/templates/boneset.html
+++ b/templates/boneset.html
@@ -1,268 +1,470 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-
-<head>
+  <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Digital Bones Box - Bone Set Viewer</title>
-    
-    <!-- Favicon -->
-    <link rel="icon" href="data:,">
-    
-    <!-- Google Fonts -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Crimson+Text:wght@400;600&display=swap" rel="stylesheet">
-    
+
+    <link rel="icon" href="data:," />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Crimson+Text:wght@400;600&display=swap"
+      rel="stylesheet"
+    />
+
     <link rel="stylesheet" href="style.css" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <script src="https://unpkg.com/htmx.org@1.9.10"></script>
-</head>
+  </head>
 
-<body>
-    <!-- Header Navigation -->
+  <body>
     <header id="badge" role="banner">
-        <div class="header-left">
-            <button id="toggle-sidebar" type="button" aria-label="Toggle navigation menu">☰</button>
-            <nav class="main-navigation" role="navigation">
-                <button id="text-button-Home" type="button" >Home</button>
-                <button id="text-button-Tutor" type="button" >Tutor</button>
-                <button id="text-button-Study" type="button" >Study</button>
-                <button id="start-quiz-btn" type="button" aria-haspopup="dialog" aria-controls="quiz-modal" >Quiz Me </button>
-                <button id="text-button-Help" type="button" aria-haspopup="dialog" aria-controls="new-help-modal" onclick="document.getElementById('new-help-modal').style.display='flex';">Help</button>
-            </nav>
-        </div>
-        
-        <div class="header-center">
-            <!-- Empty center section -->
-        </div>
-        
-        <div class="header-right">
-            <div id="innerbadge">
-                <span id="text-button-Login" role="button" tabindex="0">Login</span>
-                <span id="text-button-SignUp" role="button" tabindex="0">Sign Up</span>
-            </div>
+      <div class="header-left">
+        <button
+          id="toggle-sidebar"
+          type="button"
+          aria-label="Toggle navigation menu"
+        >
+          ☰
+        </button>
+        <nav class="main-navigation" role="navigation">
+          <button id="text-button-Home" type="button">Home</button>
+          <button id="text-button-Tutor" type="button">Tutor</button>
+          <button id="text-button-Study" type="button">Study</button>
+          <button
+            id="start-quiz-btn"
+            type="button"
+            aria-haspopup="dialog"
+            aria-controls="quiz-modal"
+          >
+            Quiz Me
+          </button>
+          <button
+            id="text-button-Help"
+            type="button"
+            aria-haspopup="dialog"
+            aria-controls="new-help-modal"
+            onclick="
+              document.getElementById('new-help-modal').style.display = 'flex'
+            "
+          >
+            Help
+          </button>
+        </nav>
+      </div>
+
+      <div class="header-center"></div>
+
+      <div class="header-right">
+        <div id="innerbadge">
+          <span id="text-button-Login" role="button" tabindex="0">Login</span>
+          <span id="text-button-SignUp" role="button" tabindex="0"
+            >Sign Up</span
+          >
         </div>
+      </div>
     </header>
 
-    <!-- Sidebar Container -->
     <aside id="sidebar-container" role="complementary"></aside>
 
-    <!-- Main Content Area -->
     <main id="editor-view" role="main">
-        <div class="container">
-            <header class="page-header">
-                <h1>Digital Bones Box</h1>
-                <p class="subtitle">Interactive Anatomical Learning Platform</p>
-            </header>
-            
-            <!-- Search Section -->
-            <section class="search-section">
-                <div class="form-group">
-                    <label for="search-bar">Search Bones and Sub-bones</label>
-                    <div class="search-container">
-                        <input type="text" 
-                               id="search-bar" 
-                               placeholder="Enter bone name (minimum 2 characters)"
-                               autocomplete="off" />
-                        <div id="search-loading" class="search-loading" style="display: none;">Searching...</div>
-                    </div>
-                </div>
-                
-                <ul id="search-results" class="search-results" role="listbox" aria-label="Search results"></ul>
-            </section>
-            
-            <!-- Selection Section -->
-            <section class="selection-section">
-                <div class="form-group">
-                    <label>Select Anatomical Structure</label>
-                    <div class="form-row">
-                        <div class="select-group">
-                            <label for="boneset-select">Boneset</label>
-                            <select id="boneset-select" 
-                                    name="boneId"
-                                    hx-get="http://127.0.0.1:8000/api/description/" 
-                                    hx-target="#description-Container"
-                                    hx-trigger="change">
-                                <option value="">Select a boneset</option>
-                            </select>
-                        </div>
-                        
-                        <div class="select-group">
-                            <label for="bone-select">Bone</label>
-                            <select id="bone-select" 
-                                    name="boneId"
-                                    hx-get="http://127.0.0.1:8000/api/description/" 
-                                    hx-target="#description-Container"
-                                    hx-trigger="change"
-                                    disabled>
-                                <option value="">Select a bone</option>
-                            </select>
-                        </div>
-                        
-                        <div class="select-group">
-                            <label for="subbone-select">Sub-bone</label>
-                            <select id="subbone-select"
-                                    name="boneId"
-                                    hx-get="http://127.0.0.1:8000/api/description/" 
-                                    hx-target="#description-Container"
-                                    hx-trigger="change"
-                                    disabled>
-                                <option value="">Select a sub-bone</option>
-                            </select>
-                        </div>
-                    </div>
-                </div>
-            </section>
+      <div class="container">
+        <header class="page-header">
+          <h1>Digital Bones Box</h1>
+          <p class="subtitle">Interactive Anatomical Learning Platform</p>
+        </header>
 
-            <!-- Content Grid: Description and Images Side by Side -->
-            <div class="content-grid">
-                <!-- Description Section -->
-                <section id="bone-Description-Container" class="description-panel">
-                    <div class="panel-header">
-                        <h2>Anatomical Description</h2>
-                    </div>
-                    <div class="description-content">
-                        <ul id="description-Container" role="list" aria-live="polite"></ul>
-                        <div class="description-placeholder">
-                            <p>Select a bone or sub-bone above to view detailed anatomical descriptions.</p>
-                        </div>
-                    </div>
-                </section>
-                
-                <!-- Images Section -->
-                <section id="bone-images-section" class="images-panel">
-                    <div class="panel-header">
-                        <h2>Visual Reference</h2>
-                    </div>
-                    <div class="images-content">
-                        <div id="bone-image-container" role="region" aria-live="polite"></div>
-                       
-                    </div>
-                </section>
+        <section class="search-section">
+          <div class="form-group">
+            <label for="search-bar">Search Bones and Sub-bones</label>
+            <div class="search-container">
+              <input
+                type="text"
+                id="search-bar"
+                placeholder="Enter bone name (minimum 2 characters)"
+                autocomplete="off"
+              />
+              <div
+                id="search-loading"
+                class="search-loading"
+                style="display: none"
+              >
+                Searching...
+              </div>
             </div>
-            
-            <!-- Navigation -->
-            <nav class="navigation-buttons" role="navigation">
-                <button id="prev-button" type="button" class="btn-secondary" disabled>Previous</button>
-                <button id="next-button" type="button" disabled>Next</button>
-            </nav>
-        </div>
-    </main>
-    
-    <!-- Quiz Modal -->
-    <div id="quiz-modal" role="dialog" aria-labelledby="quiz-title" aria-modal="true">
-        <div id="quiz-container">
-            <!-- Quiz Header -->
-            <div class="quiz-header">
-                <div class="quiz-info">
-                    <div id="quiz-progress">Question 1 of 10</div>
-                    <div id="quiz-score">Score: 0/10</div>
-                </div>
-                <button id="exit-quiz-btn" type="button" aria-label="Exit quiz">Exit Quiz</button>
+          </div>
+
+          <ul
+            id="search-results"
+            class="search-results"
+            role="listbox"
+            aria-label="Search results"
+          ></ul>
+        </section>
+
+        <section class="selection-section">
+          <div class="form-group">
+            <label>Select Anatomical Structure</label>
+            <div class="form-row">
+              <div class="select-group">
+                <label for="boneset-select">Boneset</label>
+                <select
+                  id="boneset-select"
+                  name="boneId"
+                  hx-get="http://127.0.0.1:8000/api/description/"
+                  hx-target="#description-Container"
+                  hx-trigger="change"
+                >
+                  <option value="">Select a boneset</option>
+                </select>
+              </div>
+
+              <div class="select-group">
+                <label for="bone-select">Bone</label>
+                <select
+                  id="bone-select"
+                  name="boneId"
+                  hx-get="http://127.0.0.1:8000/api/description/"
+                  hx-target="#description-Container"
+                  hx-trigger="change"
+                  disabled
+                >
+                  <option value="">Select a bone</option>
+                </select>
+              </div>
+
+              <div class="select-group">
+                <label for="subbone-select">Sub-bone</label>
+                <select
+                  id="subbone-select"
+                  name="boneId"
+                  hx-get="http://127.0.0.1:8000/api/description/"
+                  hx-target="#description-Container"
+                  hx-trigger="change"
+                  disabled
+                >
+                  <option value="">Select a sub-bone</option>
+                </select>
+              </div>
             </div>
-            
-            <!-- Quiz Content -->
-            <div class="quiz-content">
-                <h2 id="quiz-question-text">What bone is this?</h2>
-                
-                <!-- Bone Image Display -->
-                <div id="quiz-bone-image">
-                    <div class="quiz-image-placeholder">
-                        <p>🦴</p>
-                        <p>Loading bone image...</p>
-                    </div>
-                </div>
-                
-                <!-- Answer Choices -->
-                <div id="quiz-choices">
-                    <!-- Choices will be dynamically inserted here -->
-                </div>
-                
-                <!-- Feedback -->
-                <div id="quiz-feedback" class="quiz-feedback">
-                    <!-- Feedback will be dynamically inserted here -->
-                </div>
+          </div>
+        </section>
+
+        <div class="content-grid">
+          <section id="bone-Description-Container" class="description-panel">
+            <div class="panel-header">
+              <h2>Anatomical Description</h2>
+            </div>
+            <div class="description-content">
+              <ul
+                id="description-Container"
+                role="list"
+                aria-live="polite"
+              ></ul>
+              <div class="description-placeholder">
+                <p>
+                  Select a bone or sub-bone above to view detailed anatomical
+                  descriptions.
+                </p>
+              </div>
             </div>
-            
-            <!-- Quiz Actions -->
-            <div class="quiz-actions">
-                <button id="next-question-btn" type="button" style="display: none;">Next Question</button>
+          </section>
+
+          <section id="bone-images-section" class="images-panel">
+            <div class="panel-header">
+              <h2>Visual Reference</h2>
             </div>
+            <div class="images-content">
+              <div
+                id="bone-image-container"
+                role="region"
+                aria-live="polite"
+              ></div>
+            </div>
+          </section>
         </div>
-    </div>
-    
-    <!-- NEW Help Modal - Clean Version -->
-    <div id="new-help-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 99999; align-items: center; justify-content: center;">
-        <div style="background: white; padding: 40px; border-radius: 16px; max-width: 650px; margin: 20px; border: 3px solid #FFD700; box-shadow: 0 25px 60px rgba(0,0,0,0.4);">
-            <h2 style="color: #003366; text-align: center; margin-bottom: 25px; border-bottom: 3px solid #FFD700; padding-bottom: 15px; font-size: 1.6rem; font-weight: bold; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">How to Use the Digital Bones Box</h2>
-            <div style="margin: 25px 0;">
-                <div style="color: #2d3748; font-size: 1.1rem; line-height: 1.8; background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%); padding: 30px; border-radius: 12px; border-left: 5px solid #0369a1; margin-bottom: 25px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
-                    <p style="margin: 0 0 20px 0; font-weight: 500; color: #1a365d;">Welcome to the <strong>Digital Bones Box</strong>, your interactive anatomical learning platform.</p>
-                    
-                    <p style="margin: 0 0 15px 0;">Getting started is simple:</p>
-                    
-                    <ul style="margin: 15px 0; padding-left: 25px; list-style-type: none;">
-                        <li style="margin: 8px 0; position: relative; padding-left: 25px;">
-                            <span style="position: absolute; left: 0; color: #0369a1; font-weight: bold;">•</span>
-                            Use the dropdown menus above to navigate through different bone sets
-                        </li>
-                        <li style="margin: 8px 0; position: relative; padding-left: 25px;">
-                            <span style="position: absolute; left: 0; color: #0369a1; font-weight: bold;">•</span>
-                            Select a boneset from the first dropdown to enable the bone selection menu
-                        </li>
-                        <li style="margin: 8px 0; position: relative; padding-left: 25px;">
-                            <span style="position: absolute; left: 0; color: #0369a1; font-weight: bold;">•</span>
-                            Choose a specific bone to view detailed anatomical descriptions and high-quality images
-                        </li>
-                        <li style="margin: 8px 0; position: relative; padding-left: 25px;">
-                            <span style="position: absolute; left: 0; color: #0369a1; font-weight: bold;">•</span>
-                            Select sub-bones for more specific anatomical details
-                        </li>
-                        <li style="margin: 8px 0; position: relative; padding-left: 25px;">
-                            <span style="position: absolute; left: 0; color: #0369a1; font-weight: bold;">•</span>
-                            Use Previous and Next navigation buttons to browse through related items
-                        </li>
-                        <li style="margin: 8px 0; position: relative; padding-left: 25px;">
-                            <span style="position: absolute; left: 0; color: #0369a1; font-weight: bold;">•</span>
-                            Click <strong>"Quiz Me"</strong> to test your knowledge with interactive quizzes
-                        </li>
-                    </ul>
-                    
-                    <p style="margin: 20px 0 0 0; font-style: italic; color: #4a5568; font-size: 1rem;">Press the ESC key to close this help window at any time.</p>
-                </div>
-                <button onclick="document.getElementById('new-help-modal').style.display='none'" type="button" style="background: linear-gradient(135deg, #003366 0%, #1e40af 100%); color: white; border: 2px solid #FFD700; padding: 15px 30px; border-radius: 10px; cursor: pointer; font-size: 1.1rem; display: block; margin: 0 auto; font-weight: bold; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0,51,102,0.3);" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 16px rgba(0,51,102,0.4)'" onmouseout="this.style.transform='translateY(0px)'; this.style.boxShadow='0 4px 12px rgba(0,51,102,0.3)'">
-                    Close Guide
-                </button>
+
+        <nav class="navigation-buttons" role="navigation">
+          <button id="prev-button" type="button" class="btn-secondary" disabled>
+            Previous
+          </button>
+          <button id="next-button" type="button" disabled>Next</button>
+        </nav>
+      </div>
+    </main>
+
+    <div
+      id="quiz-modal"
+      role="dialog"
+      aria-labelledby="quiz-title"
+      aria-modal="true"
+    >
+      <div id="quiz-container">
+        <div class="quiz-header">
+          <div class="quiz-info">
+            <div id="quiz-progress">Question 1 of 10</div>
+            <div id="quiz-score">Score: 0/10</div>
+          </div>
+          <button id="exit-quiz-btn" type="button" aria-label="Exit quiz">
+            Exit Quiz
+          </button>
+        </div>
+
+        <div class="quiz-content">
+          <h2 id="quiz-question-text">What bone is this?</h2>
+
+          <div id="quiz-bone-image">
+            <div class="quiz-image-placeholder">
+              <p>🦴</p>
+              <p>Loading bone image...</p>
             </div>
+          </div>
+
+          <div id="quiz-choices"></div>
+
+          <div id="quiz-feedback" class="quiz-feedback"></div>
+        </div>
+
+        <div class="quiz-actions">
+          <button id="next-question-btn" type="button" style="display: none">
+            Next Question
+          </button>
         </div>
+      </div>
     </div>
-    
-    <!-- Scripts -->
+
+    <div
+      id="new-help-modal"
+      style="
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background: rgba(0, 0, 0, 0.8);
+        z-index: 99999;
+        align-items: center;
+        justify-content: center;
+        padding: 20px;
+        box-sizing: border-box;
+      "
+    >
+      <div
+        style="
+          background: white;
+          padding: 30px;
+          border-radius: 16px;
+          width: 100%;
+          max-width: 650px;
+          border: 3px solid #ffd700;
+          box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
+          max-height: 90vh;
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+          box-sizing: border-box;
+        "
+      >
+        <h2
+          style="
+            flex-shrink: 0;
+            color: #003366;
+            text-align: center;
+            margin-top: 0;
+            margin-bottom: 20px;
+            border-bottom: 3px solid #ffd700;
+            padding-bottom: 15px;
+            font-size: 1.6rem;
+            font-weight: bold;
+            font-family:
+              &quot;Segoe UI&quot;, Tahoma, Geneva, Verdana, sans-serif;
+          "
+        >
+          How to Use the Digital Bones Box
+        </h2>
+
+        <div
+          style="
+            overflow-y: auto;
+            flex: 1;
+            min-height: 0;
+            padding-right: 10px;
+            margin-bottom: 20px;
+          "
+        >
+          <div
+            style="
+              color: #2d3748;
+              font-size: 1.1rem;
+              line-height: 1.8;
+              background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
+              padding: 30px;
+              border-radius: 12px;
+              border-left: 5px solid #0369a1;
+              font-family:
+                &quot;Segoe UI&quot;, Tahoma, Geneva, Verdana, sans-serif;
+              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            "
+          >
+            <p style="margin: 0 0 20px 0; font-weight: 500; color: #1a365d">
+              Welcome to the <strong>Digital Bones Box</strong>, your
+              interactive anatomical learning platform.
+            </p>
+            <p style="margin: 0 0 15px 0">Getting started is simple:</p>
+
+            <ul
+              style="margin: 15px 0; padding-left: 25px; list-style-type: none"
+            >
+              <li style="margin: 8px 0; position: relative; padding-left: 25px">
+                <span
+                  style="
+                    position: absolute;
+                    left: 0;
+                    color: #0369a1;
+                    font-weight: bold;
+                  "
+                  >•</span
+                >
+                Use the dropdown menus above to navigate through different bone
+                sets
+              </li>
+              <li style="margin: 8px 0; position: relative; padding-left: 25px">
+                <span
+                  style="
+                    position: absolute;
+                    left: 0;
+                    color: #0369a1;
+                    font-weight: bold;
+                  "
+                  >•</span
+                >
+                Select a boneset from the first dropdown to enable the bone
+                selection menu
+              </li>
+              <li style="margin: 8px 0; position: relative; padding-left: 25px">
+                <span
+                  style="
+                    position: absolute;
+                    left: 0;
+                    color: #0369a1;
+                    font-weight: bold;
+                  "
+                  >•</span
+                >
+                Choose a specific bone to view detailed anatomical descriptions
+                and high-quality images
+              </li>
+              <li style="margin: 8px 0; position: relative; padding-left: 25px">
+                <span
+                  style="
+                    position: absolute;
+                    left: 0;
+                    color: #0369a1;
+                    font-weight: bold;
+                  "
+                  >•</span
+                >
+                Select sub-bones for more specific anatomical details
+              </li>
+              <li style="margin: 8px 0; position: relative; padding-left: 25px">
+                <span
+                  style="
+                    position: absolute;
+                    left: 0;
+                    color: #0369a1;
+                    font-weight: bold;
+                  "
+                  >•</span
+                >
+                Use Previous and Next navigation buttons to browse through
+                related items
+              </li>
+              <li style="margin: 8px 0; position: relative; padding-left: 25px">
+                <span
+                  style="
+                    position: absolute;
+                    left: 0;
+                    color: #0369a1;
+                    font-weight: bold;
+                  "
+                  >•</span
+                >
+                Click <strong>"Quiz Me"</strong> to test your knowledge with
+                interactive quizzes
+              </li>
+            </ul>
+            <p
+              style="
+                margin: 20px 0 0 0;
+                font-style: italic;
+                color: #4a5568;
+                font-size: 1rem;
+              "
+            >
+              Press the ESC key to close this help window at any time.
+            </p>
+          </div>
+        </div>
+
+        <button
+          onclick="
+            document.getElementById('new-help-modal').style.display = 'none'
+          "
+          type="button"
+          style="
+            flex-shrink: 0;
+            background: linear-gradient(135deg, #003366 0%, #1e40af 100%);
+            color: white;
+            border: 2px solid #ffd700;
+            padding: 15px;
+            border-radius: 10px;
+            cursor: pointer;
+            font-size: 1.1rem;
+            display: block;
+            width: 100%;
+            font-weight: bold;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 12px rgba(0, 51, 102, 0.3);
+          "
+          onmouseover="
+            this.style.transform = 'translateY(-2px)';
+            this.style.boxShadow = '0 6px 16px rgba(0,51,102,0.4)';
+          "
+          onmouseout="
+            this.style.transform = 'translateY(0px)';
+            this.style.boxShadow = '0 4px 12px rgba(0,51,102,0.3)';
+          "
+        >
+          Close Guide
+        </button>
+      </div>
+    </div>
+
     <script type="module" src="js/sidebar.js"></script>
     <script type="module" src="js/main.js"></script>
     <script type="module" src="js/imageDisplay.js"></script>
     <script type="module" src="js/annotationOverlay.js"></script>
     <script type="module" src="js/imageCaptions.js"></script>
-    
-    <!-- Simple Escape Key Handler -->
+
     <script>
-        document.addEventListener('keydown', function(event) {
-            if (event.key === 'Escape') {
-                const modal = document.getElementById('new-help-modal');
-                if (modal) {
-                    modal.style.display = 'none';
-                }
-                
-                // Also close quiz modal if open
-                const quizModal = document.getElementById('quiz-modal');
-                if (quizModal && quizModal.style.display === 'flex') {
-                    // Trigger exit quiz button click
-                    document.getElementById('exit-quiz-btn')?.click();
-                }
-            }
-        });
-    </script>
-</body>
+      document.addEventListener("keydown", function (event) {
+        if (event.key === "Escape") {
+          const modal = document.getElementById("new-help-modal");
+          if (modal) {
+            modal.style.display = "none";
+          }
 
+          // Also close quiz modal if open
+          const quizModal = document.getElementById("quiz-modal");
+          if (quizModal && quizModal.style.display === "flex") {
+            // Trigger exit quiz button click
+            document.getElementById("exit-quiz-btn")?.click();
+          }
+        }
+      });
+    </script>
+  </body>
 </html>
diff --git a/templates/helpButton.html b/templates/helpButton.html
index 8694784d..239a2a71 100644
--- a/templates/helpButton.html
+++ b/templates/helpButton.html
@@ -1,43 +1,110 @@
-<span 
-    id="text-button-Help" 
-    role="button"
-    tabindex="0"
-    aria-haspopup="dialog"
-    aria-controls="help-modal"
+<style>
+  #help-modal-content {
+    max-height: 85vh !important;
+    display: flex !important;
+    flex-direction: column !important;
+    overflow: hidden !important;
+  }
+  .help-content {
+    flex: 1 1 auto !important;
+    overflow-y: auto !important;
+    min-height: 0 !important;
+    display: block !important;
+  }
+  #close-help-modal {
+    flex-shrink: 0 !important;
+  }
+</style>
+
+<span
+  id="text-button-Help"
+  role="button"
+  tabindex="0"
+  aria-haspopup="dialog"
+  aria-controls="help-modal"
 >
-    Help
+  Help
 </span>
 
-<div 
-    id="help-modal" 
-    class="help-modal" 
-    role="dialog"
-    aria-labelledby="help-modal-title"
-    aria-modal="true"
-    aria-hidden="true"
+<div
+  id="help-modal"
+  class="help-modal"
+  role="dialog"
+  aria-labelledby="help-modal-title"
+  aria-modal="true"
+  aria-hidden="true"
+  style="
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 99999;
+  "
 >
-    <div 
-        id="help-modal-content" 
-        class="help-modal-content"
-        role="document"
+  <div
+    id="help-modal-content"
+    class="help-modal-content"
+    role="document"
+    style="
+      background: white;
+      width: 95%;
+      max-width: 800px;
+      padding: 20px;
+      border-radius: 16px;
+      box-sizing: border-box;
+    "
+  >
+    <h2
+      id="help-modal-title"
+      style="
+        flex-shrink: 0;
+        text-align: center;
+        border-bottom: 2px solid #eab308;
+        padding-bottom: 10px;
+        margin-top: 0;
+      "
     >
-        <h2 id="help-modal-title">How to Use the Bone Set Viewer</h2>
-        <div class="help-content">
-            <ul>
-                <li>Use the dropdown menus to navigate through the bone sets</li>
-                <li>Select a boneset first, then choose specific bones</li>
-                <li>View detailed images and descriptions for each selection</li>
-                <li>Use the Previous/Next buttons to browse through items</li>
-                <li>Press ESC key or click Close to dismiss this help window</li>
-            </ul>
-            <button 
-                id="close-help-modal" 
-                type="button" 
-                class="btn"
-                aria-label="Close help modal"
-            >
-                Close Guide
-            </button>
-        </div>
+      How to Use the Bone Set Viewer
+    </h2>
+
+    <div class="help-content" style="padding-right: 10px; margin-bottom: 15px">
+      <ul>
+        <li>Use the dropdown menus to navigate through the bone sets</li>
+        <li>Select a boneset first, then choose specific bones</li>
+        <li>View detailed images and descriptions for each selection</li>
+        <li>Use the Previous/Next buttons to browse through items</li>
+        <li>Press ESC key or click Close to dismiss this help window</li>
+        <br />
+        <li><i>Scroll test 1...</i></li>
+        <li><i>Scroll test 2...</i></li>
+        <li><i>Scroll test 3...</i></li>
+        <li><i>Scroll test 4...</i></li>
+        <li><i>Scroll test 5...</i></li>
+      </ul>
     </div>
-</div>
\ No newline at end of file
+
+    <button
+      id="close-help-modal"
+      type="button"
+      class="btn"
+      aria-label="Close help modal"
+      style="
+        padding: 15px;
+        background: #1e40af;
+        color: white;
+        border-radius: 8px;
+        border: none;
+        cursor: pointer;
+        font-weight: bold;
+        width: 100%;
+      "
+    >
+      Close Guide
+    </button>
+  </div>
+</div>
diff --git a/templates/style.css b/templates/style.css
index 3235777b..b868aa18 100644
--- a/templates/style.css
+++ b/templates/style.css
@@ -1,1718 +1,1810 @@
 :root {
-    --slu-navy: #003366;
-    --slu-blue: #1e4a72;
-    --slu-light-blue: #4a90c2;
-    --slu-gold: #FFD700;
-    --slu-silver: #C0C0C0;
-    --slu-white: #FFFFFF;
-
-    --primary: var(--slu-navy);
-    --primary-hover: #002244;
-    --primary-light: #e6f0f7;
-    --secondary: var(--slu-gold);
-    --secondary-hover: #E6C200;
-    --accent: var(--slu-blue);
-    --accent-hover: #1a4066;
-    --success: #22c55e;
-    --warning: #f59e0b;
-    --error: #ef4444;
-
-    --background: #ffffff;
-    --surface: #f8fafc;
-    --surface-alt: #f1f5f9;
-    --surface-hover: #e2e8f0;
-    --border: #e2e8f0;
-    --border-light: #f1f5f9;
-    --text-primary: #1e293b;
-    --text-secondary: #64748b;
-    --text-muted: #94a3b8;
-
-    --shadow-xs: 0 1px 2px 0 rgba(0, 51, 102, 0.05);
-    --shadow-sm: 0 1px 3px 0 rgba(0, 51, 102, 0.1), 0 1px 2px 0 rgba(0, 51, 102, 0.06);
-    --shadow-md: 0 4px 6px -1px rgba(0, 51, 102, 0.1), 0 2px 4px -1px rgba(0, 51, 102, 0.06);
-    --shadow-lg: 0 10px 15px -3px rgba(0, 51, 102, 0.1), 0 4px 6px -2px rgba(0, 51, 102, 0.05);
-    --shadow-xl: 0 20px 25px -5px rgba(0, 51, 102, 0.1), 0 10px 10px -5px rgba(0, 51, 102, 0.04);
-    --shadow-2xl: 0 25px 50px -12px rgba(0, 51, 102, 0.25);
-    --shadow-color: 0 8px 25px rgba(0, 51, 102, 0.15);
-    --shadow-accent: 0 8px 25px rgba(255, 215, 0, 0.15);
-
-    --gradient-primary: linear-gradient(135deg, var(--slu-navy) 0%, var(--slu-blue) 100%);
-    --gradient-secondary: linear-gradient(135deg, var(--slu-gold) 0%, #E6C200 100%);
-    --gradient-accent: linear-gradient(135deg, var(--slu-blue) 0%, var(--slu-light-blue) 100%);
-    --gradient-surface: linear-gradient(135deg, var(--surface) 0%, var(--background) 100%);
-    --gradient-hero: linear-gradient(135deg, var(--slu-navy) 0%, var(--slu-blue) 100%);
-    --gradient-warm: linear-gradient(135deg, var(--slu-gold) 0%, #FFED4E 100%);
-
-    /* Typography */
-    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    --font-display: 'Crimson Text', Georgia, serif;
-
-    /* Spacing */
-    --space-1: 0.25rem;
-    --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;
-    --space-16: 4rem;
-
-    /* Border Radius */
-    --radius-sm: 0.25rem;
-    --radius: 0.5rem;
-    --radius-lg: 0.75rem;
-    --radius-xl: 1rem;
-    --radius-2xl: 1.5rem;
-
-    /* Transitions */
-    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-    --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-    --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+  --slu-navy: #003366;
+  --slu-blue: #1e4a72;
+  --slu-light-blue: #4a90c2;
+  --slu-gold: #ffd700;
+  --slu-silver: #c0c0c0;
+  --slu-white: #ffffff;
+
+  --primary: var(--slu-navy);
+  --primary-hover: #002244;
+  --primary-light: #e6f0f7;
+  --secondary: var(--slu-gold);
+  --secondary-hover: #e6c200;
+  --accent: var(--slu-blue);
+  --accent-hover: #1a4066;
+  --success: #22c55e;
+  --warning: #f59e0b;
+  --error: #ef4444;
+
+  --background: #ffffff;
+  --surface: #f8fafc;
+  --surface-alt: #f1f5f9;
+  --surface-hover: #e2e8f0;
+  --border: #e2e8f0;
+  --border-light: #f1f5f9;
+  --text-primary: #1e293b;
+  --text-secondary: #64748b;
+  --text-muted: #94a3b8;
+
+  --shadow-xs: 0 1px 2px 0 rgba(0, 51, 102, 0.05);
+  --shadow-sm:
+    0 1px 3px 0 rgba(0, 51, 102, 0.1), 0 1px 2px 0 rgba(0, 51, 102, 0.06);
+  --shadow-md:
+    0 4px 6px -1px rgba(0, 51, 102, 0.1), 0 2px 4px -1px rgba(0, 51, 102, 0.06);
+  --shadow-lg:
+    0 10px 15px -3px rgba(0, 51, 102, 0.1),
+    0 4px 6px -2px rgba(0, 51, 102, 0.05);
+  --shadow-xl:
+    0 20px 25px -5px rgba(0, 51, 102, 0.1),
+    0 10px 10px -5px rgba(0, 51, 102, 0.04);
+  --shadow-2xl: 0 25px 50px -12px rgba(0, 51, 102, 0.25);
+  --shadow-color: 0 8px 25px rgba(0, 51, 102, 0.15);
+  --shadow-accent: 0 8px 25px rgba(255, 215, 0, 0.15);
+
+  --gradient-primary: linear-gradient(
+    135deg,
+    var(--slu-navy) 0%,
+    var(--slu-blue) 100%
+  );
+  --gradient-secondary: linear-gradient(
+    135deg,
+    var(--slu-gold) 0%,
+    #e6c200 100%
+  );
+  --gradient-accent: linear-gradient(
+    135deg,
+    var(--slu-blue) 0%,
+    var(--slu-light-blue) 100%
+  );
+  --gradient-surface: linear-gradient(
+    135deg,
+    var(--surface) 0%,
+    var(--background) 100%
+  );
+  --gradient-hero: linear-gradient(
+    135deg,
+    var(--slu-navy) 0%,
+    var(--slu-blue) 100%
+  );
+  --gradient-warm: linear-gradient(135deg, var(--slu-gold) 0%, #ffed4e 100%);
+
+  /* Typography */
+  --font-primary:
+    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-display: "Crimson Text", Georgia, serif;
+
+  /* Spacing */
+  --space-1: 0.25rem;
+  --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;
+  --space-16: 4rem;
+
+  /* Border Radius */
+  --radius-sm: 0.25rem;
+  --radius: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1.5rem;
+
+  /* Transitions */
+  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 html {
-    scroll-behavior: smooth;
+  scroll-behavior: smooth;
 }
 
 body {
-    font-family: var(--font-primary);
-    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
-    color: var(--text-primary);
-    line-height: 1.6;
-    overflow-x: hidden;
-    min-height: 100vh;
-    position: relative;
-    font-size: 16px;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  font-family: var(--font-primary);
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+  color: var(--text-primary);
+  line-height: 1.6;
+  overflow-x: hidden;
+  min-height: 100vh;
+  position: relative;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 /*  Scrollbar */
 ::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
+  width: 10px;
+  height: 10px;
 }
 
 ::-webkit-scrollbar-track {
-    background: var(--surface);
-    border-radius: var(--radius);
+  background: var(--surface);
+  border-radius: var(--radius);
 }
 
 ::-webkit-scrollbar-thumb {
-    background: var(--gradient-primary);
-    border-radius: var(--radius);
-    border: 2px solid var(--surface);
-    transition: background var(--transition-normal);
+  background: var(--gradient-primary);
+  border-radius: var(--radius);
+  border: 2px solid var(--surface);
+  transition: background var(--transition-normal);
 }
 
 ::-webkit-scrollbar-thumb:hover {
-    background: var(--slu-navy);
+  background: var(--slu-navy);
 }
 
-
 #badge {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 75px;
-    background: var(--gradient-primary);
-    backdrop-filter: blur(20px);
-    border-bottom: 2px solid var(--slu-gold);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 var(--space-8);
-    z-index: 100;
-    box-shadow: var(--shadow-xl);
-    transition: all var(--transition-normal);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 75px;
+  background: var(--gradient-primary);
+  backdrop-filter: blur(20px);
+  border-bottom: 2px solid var(--slu-gold);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 var(--space-8);
+  z-index: 100;
+  box-shadow: var(--shadow-xl);
+  transition: all var(--transition-normal);
 }
 
 #badge:hover {
-    box-shadow: var(--shadow-2xl);
+  box-shadow: var(--shadow-2xl);
 }
 
 /* Left Section: Navigation Elements */
 .header-left {
-    display: flex;
-    align-items: center;
-    gap: var(--space-3);
-    flex: 1;
-    justify-content: flex-start;
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  flex: 1;
+  justify-content: flex-start;
 }
 
 #toggle-sidebar {
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
-    color: white;
-    border: 2px solid rgba(255, 215, 0, 0.6);
-    padding: var(--space-3);
-    border-radius: var(--radius-lg);
-    cursor: pointer;
-    font-weight: 700;
-    font-size: 1.2rem;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
-    width: 48px;
-    height: 48px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    overflow: hidden;
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.15) 0%,
+    rgba(255, 255, 255, 0.05) 100%
+  );
+  color: white;
+  border: 2px solid rgba(255, 215, 0, 0.6);
+  padding: var(--space-3);
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  font-weight: 700;
+  font-size: 1.2rem;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow:
+    0 4px 12px rgba(0, 0, 0, 0.15),
+    inset 0 1px 0 rgba(255, 255, 255, 0.2);
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
 }
 
 #toggle-sidebar::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.3), transparent);
-    transition: left 0.5s ease;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 215, 0, 0.3),
+    transparent
+  );
+  transition: left 0.5s ease;
 }
 
 #toggle-sidebar:hover::before {
-    left: 100%;
+  left: 100%;
 }
 
 #toggle-sidebar:hover {
-    background: linear-gradient(135deg, var(--slu-gold) 0%, #f59e0b 100%);
-    color: var(--slu-navy);
-    transform: translateY(-3px) scale(1.05);
-    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
-    border-color: var(--slu-gold);
+  background: linear-gradient(135deg, var(--slu-gold) 0%, #f59e0b 100%);
+  color: var(--slu-navy);
+  transform: translateY(-3px) scale(1.05);
+  box-shadow:
+    0 8px 25px rgba(255, 215, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.3);
+  border-color: var(--slu-gold);
 }
 
 #toggle-sidebar:active {
-    transform: translateY(-1px) scale(1.02);
-    transition: all 0.1s ease;
+  transform: translateY(-1px) scale(1.02);
+  transition: all 0.1s ease;
 }
 
 /* Center Section: Empty for balance */
 .header-center {
-    flex: 1;
+  flex: 1;
 }
 
 /* Main Navigation in Left Section */
 .header-left .main-navigation {
-    display: flex;
-    gap: var(--space-3);
-    align-items: center;
-    margin: 0;
+  display: flex;
+  gap: var(--space-3);
+  align-items: center;
+  margin: 0;
 }
 
 /* Center Section: Main Navigation */
 .main-navigation {
-    display: flex;
-    gap: var(--space-3);
-    align-items: center;
-    flex: 1;
-    justify-content: center;
-    margin: 0;
+  display: flex;
+  gap: var(--space-3);
+  align-items: center;
+  flex: 1;
+  justify-content: center;
+  margin: 0;
 }
 
 .main-navigation button {
-    padding: var(--space-3) var(--space-6);
-    border-radius: var(--radius-lg);
-    cursor: pointer;
-    font-weight: 600;
-    font-size: 1rem;
-    color: white;
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
-    border: 2px solid rgba(255, 215, 0, 0.3);
-    transition: all var(--transition-normal);
-    position: relative;
-    overflow: hidden;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    min-width: 80px;
-    text-align: center;
-    height: 48px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  padding: var(--space-3) var(--space-6);
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 1rem;
+  color: white;
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.1) 0%,
+    rgba(255, 255, 255, 0.05) 100%
+  );
+  border: 2px solid rgba(255, 215, 0, 0.3);
+  transition: all var(--transition-normal);
+  position: relative;
+  overflow: hidden;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  min-width: 80px;
+  text-align: center;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .main-navigation button::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: var(--gradient-secondary);
-    transition: left var(--transition-slow);
-    z-index: -1;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: var(--gradient-secondary);
+  transition: left var(--transition-slow);
+  z-index: -1;
 }
 
 .main-navigation button:hover {
-    color: var(--slu-navy);
-    border-color: var(--slu-gold);
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-accent);
+  color: var(--slu-navy);
+  border-color: var(--slu-gold);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-accent);
 }
 
 .main-navigation button:hover::before {
-    left: 0;
+  left: 0;
 }
 
 /* Right Section: Help + Login/Signup */
 .header-right {
-    display: flex;
-    align-items: center;
-    gap: var(--space-3);
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
 }
 
 #innerbadge {
-    display: flex;
-    gap: var(--space-3);
-    align-items: center;
+  display: flex;
+  gap: var(--space-3);
+  align-items: center;
 }
 
 #innerbadge span {
-    padding: var(--space-3) var(--space-5);
-    border-radius: var(--radius-lg);
-    cursor: pointer;
-    font-weight: 600;
-    transition: all var(--transition-normal);
-    border: 2px solid transparent;
-    font-size: 1rem;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    min-width: 75px;
-    text-align: center;
-    height: 48px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  padding: var(--space-3) var(--space-5);
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  font-weight: 600;
+  transition: all var(--transition-normal);
+  border: 2px solid transparent;
+  font-size: 1rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  min-width: 75px;
+  text-align: center;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 #text-button-Login {
-    color: white;
-    background: var(--gradient-accent);
-    border-color: var(--slu-blue);
-    box-shadow: 0 3px 10px rgba(30, 74, 114, 0.3);
+  color: white;
+  background: var(--gradient-accent);
+  border-color: var(--slu-blue);
+  box-shadow: 0 3px 10px rgba(30, 74, 114, 0.3);
 }
 
 #text-button-Login:hover {
-    background: var(--slu-blue);
-    transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(30, 74, 114, 0.4);
+  background: var(--slu-blue);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(30, 74, 114, 0.4);
 }
 
 #text-button-SignUp {
-    background: var(--gradient-secondary);
-    color: var(--slu-navy);
-    border-color: var(--slu-gold);
-    box-shadow: var(--shadow-accent);
+  background: var(--gradient-secondary);
+  color: var(--slu-navy);
+  border-color: var(--slu-gold);
+  box-shadow: var(--shadow-accent);
 }
 
 #text-button-SignUp:hover {
-    background: var(--slu-gold);
-    transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
+  background: var(--slu-gold);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
 }
 
 #text-button-Login {
-    color: white;
-    background: var(--gradient-accent);
-    border-color: var(--slu-blue);
-    box-shadow: 0 4px 15px rgba(30, 74, 114, 0.3);
+  color: white;
+  background: var(--gradient-accent);
+  border-color: var(--slu-blue);
+  box-shadow: 0 4px 15px rgba(30, 74, 114, 0.3);
 }
 
 #text-button-Login:hover {
-    background: var(--slu-blue);
-    color: white;
-    transform: translateY(-3px);
-    box-shadow: 0 8px 25px rgba(30, 74, 114, 0.5);
+  background: var(--slu-blue);
+  color: white;
+  transform: translateY(-3px);
+  box-shadow: 0 8px 25px rgba(30, 74, 114, 0.5);
 }
 
 #text-button-SignUp {
-    background: var(--gradient-secondary);
-    color: var(--slu-navy);
-    border-color: var(--slu-gold);
-    box-shadow: var(--shadow-accent);
+  background: var(--gradient-secondary);
+  color: var(--slu-navy);
+  border-color: var(--slu-gold);
+  box-shadow: var(--shadow-accent);
 }
 
 #text-button-SignUp:hover {
-    background: var(--slu-gold);
-    color: var(--slu-navy);
-    transform: translateY(-3px);
-    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.5);
+  background: var(--slu-gold);
+  color: var(--slu-navy);
+  transform: translateY(-3px);
+  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.5);
 }
 
 #text-button-Help {
-    pointer-events: auto !important;
-    z-index: 9999 !important;
+  pointer-events: auto !important;
+  z-index: 9999 !important;
 }
 
-/* Help Modal */
+/* =========================================
+   HELP MODAL STYLES (Fixes Issue #232)
+   ========================================= */
+
+/* 1. Modal Overlay (The dark blurred background) */
 .help-modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background: rgba(0, 0, 0, 0.8);
-    backdrop-filter: blur(8px);
-    display: flex !important;
-    align-items: center;
-    justify-content: center;
-    z-index: 99999;
-    opacity: 0;
-    pointer-events: none;
-    transition: all 0.3s ease;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(8px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 99999;
+  opacity: 0;
+  pointer-events: none;
+  visibility: hidden;
+  transition:
+    opacity 0.3s ease,
+    visibility 0.3s ease;
+  padding: 20px;
+  box-sizing: border-box;
 }
 
 .help-modal.is-visible {
-    opacity: 1 !important;
-    pointer-events: auto !important;
-    visibility: visible !important;
+  opacity: 1;
+  pointer-events: auto;
+  visibility: visible;
 }
 
 .help-modal[aria-hidden="true"] {
-    opacity: 0;
-    pointer-events: none;
+  opacity: 0;
+  pointer-events: none;
+  visibility: hidden;
 }
 
+/* 2. Modal Content Box (The white container) */
 .help-modal-content {
-    background: white;
-    border-radius: var(--radius-2xl);
-    padding: var(--space-12);
-    max-width: 600px;
-    width: 90%;
-    max-height: 80vh;
-    overflow-y: auto;
-    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
-    border: 3px solid var(--slu-gold);
-    position: relative;
-    transform: scale(0.8);
-    transition: transform 0.3s ease;
-    z-index: 100000;
+  background: white;
+  border-radius: var(--radius-2xl);
+  padding: 20px;
+  max-width: 800px;
+  width: 95%;
+
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-sizing: border-box; /* Add this: ensures padding doesn't break the 90vh limit */
+
+  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
+  border: 3px solid var(--slu-gold);
+  position: relative;
+  margin: auto;
 }
 
+/* Apply animation when modal becomes visible */
 .help-modal.is-visible .help-modal-content {
-    transform: scale(1);
+  animation: modalSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 }
 
-
 @keyframes modalSlideIn {
-    from {
-        opacity: 0;
-        transform: translateY(-30px) scale(0.95);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-    }
+  from {
+    opacity: 0;
+    transform: translateY(-30px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
 
+/* Top Gradient Border */
 .help-modal-content::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 4px;
-    background: var(--gradient-accent);
-    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: var(--gradient-accent);
+  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
+}
+
+/* Mobile Responsiveness */
+@media (max-width: 600px) {
+  .help-modal-content {
+    width: 95%;
+    max-width: none;
+    padding: 15px;
+  }
+}
+
+/* 3. Typography & Interior Layout */
+#help-modal-title {
+  font-family: var(--font-display);
+  font-size: 1.8rem;
+  font-weight: 700;
+  color: var(--slu-navy);
+  margin-bottom: var(--space-4);
+  text-align: center;
+  border-bottom: 2px solid var(--slu-gold);
+  padding-bottom: var(--space-3);
+
+  /* Ensure title doesn't shrink */
+  flex-shrink: 0;
 }
 
-#help-modal-title {
-    font-family: var(--font-display);
-    font-size: 1.8rem;
-    font-weight: 700;
-    color: var(--slu-navy);
-    margin-bottom: var(--space-6);
-    text-align: center;
-    border-bottom: 2px solid var(--slu-gold);
-    padding-bottom: var(--space-3);
+/* 🔥 CRITICAL FIX FOR ISSUE #232 🔥 */
+/* This is the area containing the text that needs to scroll */
+.help-content {
+  width: 100%;
+  padding: var(--space-2);
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0; /* 🔥 THE MAGIC FIX: Tells flexbox it's allowed to shrink and scroll */
 }
 
 .help-content p {
-    font-size: 1.1rem;
-    line-height: 1.7;
-    color: #334155;
-    margin-bottom: var(--space-8);
-    text-align: justify;
-    font-family: var(--font-primary);
-    padding: var(--space-4);
-    background: #f8fafc;
-    border-radius: var(--radius-md);
-    border: 1px solid #e2e8f0;
-    display: block !important;
-    visibility: visible !important;
-    opacity: 1 !important;
+  font-size: 1.1rem;
+  line-height: 1.7;
+  color: #334155;
+  margin-bottom: var(--space-8);
+  text-align: justify;
+  font-family: var(--font-primary);
+  padding: var(--space-4);
+  background: #f8fafc;
+  border-radius: var(--radius-md);
+  border: 1px solid #e2e8f0;
 }
 
 .help-content ul {
-    display: none;
+  display: none;
 }
 
-/* Help content container */
-.help-content {
-    display: block !important;
-    visibility: visible !important;
-    opacity: 1 !important;
-    width: 100%;
-    padding: var(--space-2);
-}
+/* 4. Buttons */
 
-/* Close button styling */
+/* Bottom Full-Width Close Button */
 #close-help-modal {
-    background: linear-gradient(135deg, var(--slu-navy) 0%, #1e40af 100%);
-    color: white;
-    border: 2px solid var(--slu-gold);
-    padding: var(--space-4) var(--space-8);
-    border-radius: var(--radius-lg);
-    cursor: pointer;
-    font-size: 1rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    transition: all var(--transition-normal);
-    box-shadow: var(--shadow-color);
-    width: 100%;
-    margin-top: var(--space-4);
+  background: linear-gradient(135deg, var(--slu-navy) 0%, #1e40af 100%);
+  color: white;
+  border: 2px solid var(--slu-gold);
+  padding: var(--space-4) var(--space-8);
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  width: 100%;
+  margin-top: var(--space-4);
+
+  /* Ensure button doesn't shrink and stays pinned */
+  flex-shrink: 0;
 }
 
 #close-help-modal:hover {
-    background: var(--gradient-accent);
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-xl);
+  background: var(--gradient-accent);
+  transform: translateY(-2px);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 }
 
-/* Close button positioning */
+/* Top Right Circular Close Button (Optional) */
 .help-modal-content .close-button {
-    position: absolute;
-    top: var(--space-4);
-    right: var(--space-4);
-    background: var(--surface-alt);
-    border: none;
-    border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: all var(--transition-normal);
-    color: var(--text-secondary);
-    font-size: 1.2rem;
-    font-weight: 700;
+  position: absolute;
+  top: var(--space-4);
+  right: var(--space-4);
+  background: #f1f5f9;
+  border: none;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  color: #64748b;
+  font-size: 1.2rem;
+  font-weight: 700;
+  z-index: 10;
 }
 
 .help-modal-content .close-button:hover {
-    background: var(--error);
-    color: white;
-    transform: scale(1.1);
+  background: #ef4444;
+  color: white;
+  transform: scale(1.1);
 }
 
-
 #editor-view {
-    margin-top: 75px;
-    padding: var(--space-4);
-    min-height: calc(100vh - 75px);
-    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
+  margin-top: 75px;
+  padding: var(--space-4);
+  min-height: calc(100vh - 75px);
+  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
 }
 
 .container {
-    max-width: 1400px;
-    margin: 0 auto;
-    background: rgba(255, 255, 255, 0.98);
-    backdrop-filter: blur(10px);
-    border-radius: var(--radius-xl);
-    padding: var(--space-6);
-    box-shadow: var(--shadow-lg);
-    border: 1px solid var(--border-light);
-    position: relative;
-    overflow: hidden;
+  max-width: 1400px;
+  margin: 0 auto;
+  background: rgba(255, 255, 255, 0.98);
+  backdrop-filter: blur(10px);
+  border-radius: var(--radius-xl);
+  padding: var(--space-6);
+  box-shadow: var(--shadow-lg);
+  border: 1px solid var(--border-light);
+  position: relative;
+  overflow: hidden;
 }
 
 .container::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 3px;
-    background: var(--gradient-primary);
-    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--gradient-primary);
+  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
 }
 
 .page-header {
-    text-align: center;
-    margin-bottom: var(--space-6);
-    padding: var(--space-4) 0;
+  text-align: center;
+  margin-bottom: var(--space-6);
+  padding: var(--space-4) 0;
 }
 
 h1 {
-    font-family: var(--font-display);
-    font-size: 2.5rem;
-    font-weight: 700;
-    color: var(--slu-navy);
-    margin-bottom: var(--space-3);
-    letter-spacing: -0.025em;
-    position: relative;
-    text-align: center;
+  font-family: var(--font-display);
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: var(--slu-navy);
+  margin-bottom: var(--space-3);
+  letter-spacing: -0.025em;
+  position: relative;
+  text-align: center;
 }
 
 h1::after {
-    content: '';
-    position: absolute;
-    bottom: -6px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 60px;
-    height: 3px;
-    background: var(--gradient-secondary);
-    border-radius: 2px;
+  content: "";
+  position: absolute;
+  bottom: -6px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 60px;
+  height: 3px;
+  background: var(--gradient-secondary);
+  border-radius: 2px;
 }
 
 .subtitle {
-    font-size: 1.1rem;
-    color: var(--text-secondary);
-    margin-bottom: var(--space-4);
-    font-weight: 500;
-    letter-spacing: 0.5px;
-    text-align: center;
+  font-size: 1.1rem;
+  color: var(--text-secondary);
+  margin-bottom: var(--space-4);
+  font-weight: 500;
+  letter-spacing: 0.5px;
+  text-align: center;
 }
 
 h2 {
-    font-family: var(--font-display);
-    font-size: 1.75rem;
-    font-weight: 600;
-    color: var(--primary);
-    margin-bottom: var(--space-4);
+  font-family: var(--font-display);
+  font-size: 1.75rem;
+  font-weight: 600;
+  color: var(--primary);
+  margin-bottom: var(--space-4);
 }
 
-
 .search-section,
 .selection-section {
-    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
-    padding: var(--space-5);
-    border-radius: var(--radius-xl);
-    margin-bottom: var(--space-5);
-    border: 1px solid var(--border-light);
-    box-shadow: var(--shadow-md);
-    transition: all var(--transition-normal);
-    position: relative;
-    overflow: hidden;
+  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+  padding: var(--space-5);
+  border-radius: var(--radius-xl);
+  margin-bottom: var(--space-5);
+  border: 1px solid var(--border-light);
+  box-shadow: var(--shadow-md);
+  transition: all var(--transition-normal);
+  position: relative;
+  overflow: hidden;
 }
 
 .search-section::before,
 .selection-section::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 3px;
-    background: var(--gradient-primary);
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--gradient-primary);
 }
 
 .search-section:hover,
 .selection-section:hover {
-    border-color: var(--slu-blue);
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-lg);
+  border-color: var(--slu-blue);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
 }
 
 .form-group {
-    margin-bottom: var(--space-4);
+  margin-bottom: var(--space-4);
 }
 
 label {
-    display: block;
-    font-weight: 600;
-    color: var(--slu-navy);
-    margin-bottom: var(--space-2);
-    font-size: 1rem;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    text-align: center;
+  display: block;
+  font-weight: 600;
+  color: var(--slu-navy);
+  margin-bottom: var(--space-2);
+  font-size: 1rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  text-align: center;
 }
 
 input[type="text"],
 select {
-    width: 100%;
-    padding: var(--space-3) var(--space-4);
-    border: 2px solid var(--border);
-    border-radius: var(--radius-lg);
-    background: var(--background);
-    font-size: 1rem;
-    color: var(--text-primary);
-    transition: all var(--transition-normal);
-    font-family: var(--font-primary);
-    height: 45px;
-    box-shadow: var(--shadow-sm);
+  width: 100%;
+  padding: var(--space-3) var(--space-4);
+  border: 2px solid var(--border);
+  border-radius: var(--radius-lg);
+  background: var(--background);
+  font-size: 1rem;
+  color: var(--text-primary);
+  transition: all var(--transition-normal);
+  font-family: var(--font-primary);
+  height: 45px;
+  box-shadow: var(--shadow-sm);
 }
 
 input[type="text"]:focus,
 select:focus {
-    outline: none;
-    border-color: var(--slu-blue);
-    box-shadow: 0 0 0 3px rgba(30, 74, 114, 0.1), var(--shadow-md);
-    transform: translateY(-1px);
-    background: white;
+  outline: none;
+  border-color: var(--slu-blue);
+  box-shadow:
+    0 0 0 3px rgba(30, 74, 114, 0.1),
+    var(--shadow-md);
+  transform: translateY(-1px);
+  background: white;
 }
 
 input[type="text"]:hover,
 select:hover {
-    border-color: var(--accent);
-    box-shadow: var(--shadow-md);
+  border-color: var(--accent);
+  box-shadow: var(--shadow-md);
 }
 
 select {
-    appearance: none;
-    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
-    background-repeat: no-repeat;
-    background-position: right var(--space-4) center;
-    background-size: 24px;
-    cursor: pointer;
+  appearance: none;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right var(--space-4) center;
+  background-size: 24px;
+  cursor: pointer;
 }
 
 select:disabled {
-    background-color: var(--surface-alt);
-    color: var(--text-muted);
-    cursor: not-allowed;
-    border-color: var(--border-light);
+  background-color: var(--surface-alt);
+  color: var(--text-muted);
+  cursor: not-allowed;
+  border-color: var(--border-light);
 }
 
 .form-row {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    gap: var(--space-6);
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: var(--space-6);
 }
 
 .select-group label {
-    font-size: 0.875rem;
-    color: var(--text-secondary);
-    margin-bottom: var(--space-2);
-    font-weight: 500;
-    text-transform: uppercase;
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  margin-bottom: var(--space-2);
+  font-weight: 500;
+  text-transform: uppercase;
 }
 
 /* ========================================
    PROFESSIONAL CONTENT GRID LAYOUT
    ======================================== */
 .content-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: var(--space-6);
-    margin-top: var(--space-6);
-    align-items: stretch;
-    grid-auto-rows: 1fr;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-6);
+  margin-top: var(--space-6);
+  align-items: stretch;
+  grid-auto-rows: 1fr;
 }
 
 .description-panel {
-    background: #ffffff;
-    border-radius: var(--radius-lg);
-    overflow: hidden;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    transition: all var(--transition-normal);
-    position: relative;
-    border: 1px solid #e2e8f0;
-    min-height: 400px;
-    height: auto;
-    display: flex;
-    flex-direction: column;
+  background: #ffffff;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: all var(--transition-normal);
+  position: relative;
+  border: 1px solid #e2e8f0;
+  min-height: 400px;
+  height: auto;
+  display: flex;
+  flex-direction: column;
 }
 
 .images-panel {
-    background: #000000;
-    border-radius: var(--radius-lg);
-    overflow: hidden;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    transition: all var(--transition-normal);
-    position: relative;
-    border: none;
-    min-height: 400px;
-    height: auto;
-    display: flex;
-    flex-direction: column;
+  background: #000000;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: all var(--transition-normal);
+  position: relative;
+  border: none;
+  min-height: 400px;
+  height: auto;
+  display: flex;
+  flex-direction: column;
 }
 
 .description-panel:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
 }
 
 .images-panel:hover {
-    transform: translateY(-2px);
-    box-shadow: none;
+  transform: translateY(-2px);
+  box-shadow: none;
 }
 
 /* Professional Headers with Color Coding */
 .panel-header {
-    padding: var(--space-5) var(--space-5);
-    position: relative;
-    border-bottom: 1px solid #e2e8f0;
-    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
-    text-align: center;
+  padding: var(--space-5) var(--space-5);
+  position: relative;
+  border-bottom: 1px solid #e2e8f0;
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  text-align: center;
 }
 
 .description-panel .panel-header {
-    border-left: 4px solid var(--slu-navy);
-    border-top: 3px solid var(--slu-navy);
+  border-left: 4px solid var(--slu-navy);
+  border-top: 3px solid var(--slu-navy);
 }
 
 .images-panel .panel-header {
-    border-left: 4px solid var(--slu-gold);
-    border-top: 3px solid var(--slu-gold);
+  border-left: 4px solid var(--slu-gold);
+  border-top: 3px solid var(--slu-gold);
 }
 
 .panel-header h2 {
-    color: var(--slu-navy);
-    margin: 0;
-    font-size: 1.4rem;
-    font-weight: 800;
-    font-family: var(--font-display);
-    text-transform: uppercase;
-    letter-spacing: 1.2px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--space-3);
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-    position: relative;
+  color: var(--slu-navy);
+  margin: 0;
+  font-size: 1.4rem;
+  font-weight: 800;
+  font-family: var(--font-display);
+  text-transform: uppercase;
+  letter-spacing: 1.2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-3);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  position: relative;
 }
 
 .panel-header h2::before,
 .panel-header h2::after {
-    content: '';
-    flex: 1;
-    height: 2px;
-    background: linear-gradient(90deg, transparent 0%, var(--slu-gold) 50%, transparent 100%);
-    max-width: 60px;
+  content: "";
+  flex: 1;
+  height: 2px;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--slu-gold) 50%,
+    transparent 100%
+  );
+  max-width: 60px;
 }
 
 .description-panel .panel-header h2::before,
 .description-panel .panel-header h2::after {
-    background: linear-gradient(90deg, transparent 0%, var(--slu-navy) 50%, transparent 100%);
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--slu-navy) 50%,
+    transparent 100%
+  );
 }
 
 .images-panel .panel-header h2::before,
 .images-panel .panel-header h2::after {
-    background: linear-gradient(90deg, transparent 0%, var(--slu-gold) 50%, transparent 100%);
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--slu-gold) 50%,
+    transparent 100%
+  );
 }
 
 /* Professional Content Areas */
 .description-content {
-    padding: var(--space-6) var(--space-5);
-    min-height: 400px;
-    height: auto;
-    flex: 1;
-    position: relative;
-    background: #ffffff;
-    width: 100%;
-    box-sizing: border-box;
+  padding: var(--space-6) var(--space-5);
+  min-height: 400px;
+  height: auto;
+  flex: 1;
+  position: relative;
+  background: #ffffff;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .images-content {
-    padding: var(--space-6) var(--space-5);
-    min-height: 400px;
-    height: auto;
-    flex: 1;
-    position: relative;
-    background: #000000;
-    width: 100%;
-    /* Ensure this line is present */
-    box-sizing: border-box;
-    /* --- ADD THIS AGGRESSIVE RULE --- */
-    min-width: 100% !important;
+  padding: var(--space-6) var(--space-5);
+  min-height: 400px;
+  height: auto;
+  flex: 1;
+  position: relative;
+  background: #000000;
+  width: 100%;
+  /* Ensure this line is present */
+  box-sizing: border-box;
+  /* --- ADD THIS AGGRESSIVE RULE --- */
+  min-width: 100% !important;
 }
 
 .description-content {
-    border-left: 3px solid rgba(0, 51, 102, 0.1);
-    overflow: hidden;
+  border-left: 3px solid rgba(0, 51, 102, 0.1);
+  overflow: hidden;
 }
 
 .images-content {
-    border-left: 3px solid rgba(255, 215, 0, 0.1);
-    overflow: visible;
-    min-height: 300px;
-    background: #ffffff;
-    color: #000000;
-    transition: background-color 0.3s ease, color 0.3s ease;
+  border-left: 3px solid rgba(255, 215, 0, 0.1);
+  overflow: visible;
+  min-height: 300px;
+  background: #ffffff;
+  color: #000000;
+  transition:
+    background-color 0.3s ease,
+    color 0.3s ease;
 }
 
 /* Black background only when images are present - using class-based approach */
 .images-content.has-images {
-    background: #000000 !important;
-    color: #ffffff;
+  background: #000000 !important;
+  color: #ffffff;
 }
 
 /* Fallback for browsers that support :has() */
 .images-content:has(#bone-image-container:not(:empty)) {
-    background: #000000 !important;
-    color: #ffffff;
+  background: #000000 !important;
+  color: #ffffff;
 }
 
 .panel-content {
-    padding: var(--space-6);
+  padding: var(--space-6);
 }
 
 .panel-title {
-    font-family: var(--font-display);
-    font-size: 1.25rem;
-    font-weight: 600;
-    color: var(--primary);
-    margin: 0;
+  font-family: var(--font-display);
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--primary);
+  margin: 0;
 }
 
 .panel-subtitle {
-    font-size: 0.875rem;
-    color: var(--text-secondary);
-    margin: 0;
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  margin: 0;
 }
 
-
 #description-Container {
-    list-style: none;
-    max-height: none;
-    height: auto;
-    overflow-y: visible;
-    padding: 0;
-    margin: 0;
-    display: block;
-    width: 100%;
-    box-sizing: border-box;
+  list-style: none;
+  max-height: none;
+  height: auto;
+  overflow-y: visible;
+  padding: 0;
+  margin: 0;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 #description-Container::-webkit-scrollbar {
-    width: 6px;
+  width: 6px;
 }
 
 #description-Container::-webkit-scrollbar-track {
-    background: #f1f5f9;
-    border-radius: 3px;
+  background: #f1f5f9;
+  border-radius: 3px;
 }
 
 #description-Container::-webkit-scrollbar-thumb {
-    background: var(--slu-navy);
-    border-radius: 3px;
+  background: var(--slu-navy);
+  border-radius: 3px;
 }
 
 /* First Line - Bone Name (Centered and Bold) */
 #description-Container li:first-child {
-    background: none;
-    color: var(--slu-navy);
-    padding: 0 0 var(--space-2) 0;
-    border-radius: 0;
-    font-weight: 800;
-    font-size: 1.3rem;
-    text-align: center;
-    margin-bottom: var(--space-4);
-    box-shadow: none;
-    border: none;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    position: relative;
-    overflow: visible;
-    word-wrap: break-word;
-    word-break: break-word;
-    hyphens: auto;
-    line-height: 1.3;
-    min-height: auto;
-    display: block;
-    width: 100%;
-    box-sizing: border-box;
-    border-bottom: 2px solid var(--slu-gold);
-    padding-bottom: var(--space-2);
+  background: none;
+  color: var(--slu-navy);
+  padding: 0 0 var(--space-2) 0;
+  border-radius: 0;
+  font-weight: 800;
+  font-size: 1.3rem;
+  text-align: center;
+  margin-bottom: var(--space-4);
+  box-shadow: none;
+  border: none;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  position: relative;
+  overflow: visible;
+  word-wrap: break-word;
+  word-break: break-word;
+  hyphens: auto;
+  line-height: 1.3;
+  min-height: auto;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  border-bottom: 2px solid var(--slu-gold);
+  padding-bottom: var(--space-2);
 }
 
 #description-Container li:first-child::before {
-    display: none;
+  display: none;
 }
 
 @keyframes shimmer {
-    0% {
-        left: -100%;
-    }
+  0% {
+    left: -100%;
+  }
 
-    100% {
-        left: 100%;
-    }
+  100% {
+    left: 100%;
+  }
 }
 
 #description-Container li:first-child:hover {
-    transform: none;
-    box-shadow: none;
-    border-color: var(--slu-gold);
+  transform: none;
+  box-shadow: none;
+  border-color: var(--slu-gold);
 }
 
 /* Description Bullet Points */
 #description-Container li:not(:first-child) {
-    background: none;
-    border: none;
-    border-radius: 0;
-    padding: 0 0 var(--space-2) var(--space-5);
-    margin-bottom: var(--space-2);
-    margin-left: var(--space-4);
-    transition: none;
-    cursor: default;
-    position: relative;
-    overflow: visible;
-    box-shadow: none;
-    font-size: 1rem;
-    line-height: 1.6;
-    color: #334155;
-    font-weight: 400;
-    text-align: left;
-    display: list-item;
-    list-style-type: disc;
-    list-style-position: outside;
+  background: none;
+  border: none;
+  border-radius: 0;
+  padding: 0 0 var(--space-2) var(--space-5);
+  margin-bottom: var(--space-2);
+  margin-left: var(--space-4);
+  transition: none;
+  cursor: default;
+  position: relative;
+  overflow: visible;
+  box-shadow: none;
+  font-size: 1rem;
+  line-height: 1.6;
+  color: #334155;
+  font-weight: 400;
+  text-align: left;
+  display: list-item;
+  list-style-type: disc;
+  list-style-position: outside;
 }
 
 /* Remove alternating colors and hover effects */
 #description-Container li:nth-child(even):not(:first-child),
 #description-Container li:nth-child(odd):not(:first-child) {
-    border: none;
-    background: none;
+  border: none;
+  background: none;
 }
 
 #description-Container li:not(:first-child):hover {
-    transform: none;
-    box-shadow: none;
-    background: none;
+  transform: none;
+  box-shadow: none;
+  background: none;
 }
 
 /* Remove separators */
 #description-Container li:not(:first-child):not(:last-child)::after {
-    display: none;
+  display: none;
 }
 
 /* Professional Placeholder */
 .description-placeholder {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    min-height: 400px;
-    height: auto;
-    padding: var(--space-6);
-    color: #64748b;
-    text-align: center;
-    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
-    border-radius: var(--radius-lg);
-    border: 2px dashed #cbd5e1;
-    margin: 0;
-    transition: all var(--transition-normal);
-    position: relative;
-    overflow: hidden;
-    box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+  height: auto;
+  padding: var(--space-6);
+  color: #64748b;
+  text-align: center;
+  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+  border-radius: var(--radius-lg);
+  border: 2px dashed #cbd5e1;
+  margin: 0;
+  transition: all var(--transition-normal);
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
 }
 
 .images-placeholder {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    min-height: 400px;
-    height: auto;
-    padding: var(--space-6);
-    color: #888888;
-    text-align: center;
-    background: #000000;
-    border-radius: var(--radius-lg);
-    border: none;
-    margin: 0;
-    /* SET MARGIN TO ZERO (was var(--space-2)) */
-    transition: all var(--transition-normal);
-    position: relative;
-    overflow: hidden;
-    box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+  height: auto;
+  padding: var(--space-6);
+  color: #888888;
+  text-align: center;
+  background: #000000;
+  border-radius: var(--radius-lg);
+  border: none;
+  margin: 0;
+  /* SET MARGIN TO ZERO (was var(--space-2)) */
+  transition: all var(--transition-normal);
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
 }
 
 /* Ensure placeholders show by default */
 .images-placeholder {
-    display: flex;
+  display: flex;
 }
 
 .description-placeholder {
-    display: flex;
+  display: flex;
 }
 
 /* Hide HTML placeholder when JavaScript creates content in container */
-#bone-image-container:not(:empty)+.images-placeholder {
-    display: none !important;
+#bone-image-container:not(:empty) + .images-placeholder {
+  display: none !important;
 }
 
 /* Show HTML placeholder only when image container is completely empty */
-#bone-image-container:empty+.images-placeholder {
-    display: flex;
+#bone-image-container:empty + .images-placeholder {
+  display: flex;
 }
 
 /* Show JavaScript-generated images-placeholder class when inside the container */
 #bone-image-container .images-placeholder {
-    display: flex !important;
+  display: flex !important;
 }
 
-#description-Container:not(:empty)+.description-placeholder {
-    display: none;
+#description-Container:not(:empty) + .description-placeholder {
+  display: none;
 }
 
 .description-placeholder::before {
-    content: '📋';
-    font-size: 3rem;
-    opacity: 0.3;
-    margin-bottom: var(--space-3);
-    filter: grayscale(50%);
+  content: "📋";
+  font-size: 3rem;
+  opacity: 0.3;
+  margin-bottom: var(--space-3);
+  filter: grayscale(50%);
 }
 
 .images-placeholder::before {
-    content: '🖼️';
-    font-size: 3rem;
-    opacity: 0.3;
-    margin-bottom: var(--space-3);
-    filter: grayscale(50%);
+  content: "🖼️";
+  font-size: 3rem;
+  opacity: 0.3;
+  margin-bottom: var(--space-3);
+  filter: grayscale(50%);
 }
 
 .description-placeholder p,
 .images-placeholder p {
-    font-size: 1rem;
-    font-weight: 500;
-    margin: 0;
-    padding: 0 var(--space-4);
-    line-height: 1.6;
-    color: var(--slu-navy);
-    opacity: 0.7;
+  font-size: 1rem;
+  font-weight: 500;
+  margin: 0;
+  padding: 0 var(--space-4);
+  line-height: 1.6;
+  color: var(--slu-navy);
+  opacity: 0.7;
 }
 
 .description-placeholder:hover {
-    border-color: var(--slu-gold);
-    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
-    transform: translateY(-1px);
+  border-color: var(--slu-gold);
+  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+  transform: translateY(-1px);
 }
 
 .images-placeholder:hover {
-    background: #000000;
-    transform: translateY(-1px);
+  background: #000000;
+  transform: translateY(-1px);
 }
 
 .description-placeholder:hover::before {
-    opacity: 0.5;
-    transform: scale(1.1);
+  opacity: 0.5;
+  transform: scale(1.1);
 }
 
 .images-placeholder:hover::before {
-    opacity: 0.5;
-    transform: scale(1.1);
+  opacity: 0.5;
+  transform: scale(1.1);
 }
 
 .description-placeholder p {
-    margin: 0;
-    font-size: 1rem;
-    line-height: 1.6;
-    max-width: 400px;
-    font-weight: 500;
-    color: #64748b;
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.6;
+  max-width: 400px;
+  font-weight: 500;
+  color: #64748b;
 }
 
 .description-placeholder:hover {
-    border-color: var(--slu-navy);
-    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
-    transform: scale(1.01);
+  border-color: var(--slu-navy);
+  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+  transform: scale(1.01);
 }
 
 /* Hide placeholder when content exists */
-#description-Container:not(:empty)+.description-placeholder {
-    display: none;
+#description-Container:not(:empty) + .description-placeholder {
+  display: none;
 }
 
-
 button {
-    background: var(--gradient-primary);
-    color: white;
-    border: none;
-    padding: var(--space-4) var(--space-8);
-    border-radius: var(--radius-lg);
-    cursor: pointer;
-    font-size: 1rem;
-    font-weight: 600;
-    transition: all var(--transition-normal);
-    box-shadow: var(--shadow-color);
-    position: relative;
-    overflow: hidden;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
+  background: var(--gradient-primary);
+  color: white;
+  border: none;
+  padding: var(--space-4) var(--space-8);
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 600;
+  transition: all var(--transition-normal);
+  box-shadow: var(--shadow-color);
+  position: relative;
+  overflow: hidden;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
 button::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
-    transition: left var(--transition-slow);
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.3) 50%,
+    transparent 100%
+  );
+  transition: left var(--transition-slow);
 }
 
 button:hover {
-    background: var(--gradient-accent);
-    transform: translateY(-3px);
-    box-shadow: var(--shadow-xl);
+  background: var(--gradient-accent);
+  transform: translateY(-3px);
+  box-shadow: var(--shadow-xl);
 }
 
 button:hover::before {
-    left: 100%;
+  left: 100%;
 }
 
 button:active {
-    transform: translateY(-1px);
-    box-shadow: var(--shadow-lg);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-lg);
 }
 
 button:disabled {
-    background: var(--text-muted);
-    cursor: not-allowed;
-    transform: none;
-    box-shadow: none;
+  background: var(--text-muted);
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
 }
 
 .btn-secondary {
-    background: white;
-    color: var(--primary);
-    border: 2px solid var(--primary);
-    box-shadow: var(--shadow-sm);
+  background: white;
+  color: var(--primary);
+  border: 2px solid var(--primary);
+  box-shadow: var(--shadow-sm);
 }
 
 .btn-secondary:hover {
-    background: var(--primary);
-    color: white;
-    border-color: var(--primary);
+  background: var(--primary);
+  color: white;
+  border-color: var(--primary);
 }
 
-
 #search-results {
-    list-style: none;
-    background: white;
-    border-radius: var(--radius-lg);
-    border: 2px solid var(--border);
-    max-height: 350px;
-    overflow-y: auto;
-    margin-top: var(--space-4);
-    box-shadow: var(--shadow-lg);
-    animation: slideDown 0.3s ease-out;
+  list-style: none;
+  background: white;
+  border-radius: var(--radius-lg);
+  border: 2px solid var(--border);
+  max-height: 350px;
+  overflow-y: auto;
+  margin-top: var(--space-4);
+  box-shadow: var(--shadow-lg);
+  animation: slideDown 0.3s ease-out;
 }
 
 @keyframes slideDown {
-    from {
-        opacity: 0;
-        transform: translateY(-10px);
-    }
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
 
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 #search-results:empty {
-    display: none;
+  display: none;
 }
 
 #search-results li {
-    padding: var(--space-4) var(--space-6);
-    border-bottom: 1px solid var(--border-light);
-    cursor: pointer;
-    transition: all var(--transition-normal);
-    position: relative;
-    background: white;
+  padding: var(--space-4) var(--space-6);
+  border-bottom: 1px solid var(--border-light);
+  cursor: pointer;
+  transition: all var(--transition-normal);
+  position: relative;
+  background: white;
 }
 
 #search-results li::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 0;
-    background: var(--gradient-accent);
-    transition: width var(--transition-normal);
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 0;
+  background: var(--gradient-accent);
+  transition: width var(--transition-normal);
 }
 
 #search-results li:hover {
-    background: var(--primary-light);
-    transform: translateX(12px);
-    color: var(--primary);
-    font-weight: 600;
+  background: var(--primary-light);
+  transform: translateX(12px);
+  color: var(--primary);
+  font-weight: 600;
 }
 
 #search-results li:hover::before {
-    width: 4px;
+  width: 4px;
 }
 
 #search-results li:last-child {
-    border-bottom: none;
+  border-bottom: none;
 }
 
-
 .image-container {
-    background: black;
-    border-radius: var(--radius-lg);
-    padding: var(--space-6);
-    border: none;
-    text-align: center;
-    min-height: 300px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all var(--transition-normal);
+  background: black;
+  border-radius: var(--radius-lg);
+  padding: var(--space-6);
+  border: none;
+  text-align: center;
+  min-height: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition-normal);
 }
 
 .image-container:hover {
-    box-shadow: var(--shadow-lg);
-    transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+  transform: translateY(-2px);
 }
 
 .image-placeholder {
-    color: var(--text-secondary);
-    font-size: 1rem;
-    font-style: italic;
+  color: var(--text-secondary);
+  font-size: 1rem;
+  font-style: italic;
 }
 
 .image-container img {
-    max-width: 100%;
-    height: auto;
-    border-radius: var(--radius);
-    box-shadow: var(--shadow-md);
-    transition: transform var(--transition-normal);
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-md);
+  transition: transform var(--transition-normal);
 }
 
 .image-container img:hover {
-    transform: scale(1.05);
+  transform: scale(1.05);
 }
 
-
 #bone-image-container {
-    display: grid;
-    gap: var(--space-4);
-    position: relative;
-    height: auto;
-    width: 100%;
-    box-sizing: border-box;
-    background: #000000;
-    min-height: 100px;
-    /* Base height when images are present */
-    padding: var(--space-3);
-    align-items: start;
+  display: grid;
+  gap: var(--space-4);
+  position: relative;
+  height: auto;
+  width: 100%;
+  box-sizing: border-box;
+  background: #000000;
+  min-height: 100px;
+  /* Base height when images are present */
+  padding: var(--space-3);
+  align-items: start;
 }
 
 #bone-image-container:empty {
-    /* When empty, remove padding and min-height so the placeholder can take over */
-    min-height: 0;
-    padding: 0;
+  /* When empty, remove padding and min-height so the placeholder can take over */
+  min-height: 0;
+  padding: 0;
 }
 
 /* Two images layout - side by side */
 #bone-image-container.two-images {
-    grid-template-columns: 1fr 1fr;
-    align-items: stretch;
+  grid-template-columns: 1fr 1fr;
+  align-items: stretch;
 }
 
 /* Single image layout when only one image */
 #bone-image-container.single-image {
-    grid-template-columns: 1fr;
-    justify-items: center;
+  grid-template-columns: 1fr;
+  justify-items: center;
 }
 
 /* Multiple images (3+) layout */
 #bone-image-container.multiple-images {
-    grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr 1fr;
 }
 
 .image-item {
-    background: #000000;
-    border: none;
-    border-radius: 0;
-    overflow: hidden;
-    transition: all var(--transition-normal);
-    box-shadow: none;
-    width: 100%;
-    max-width: 100%;
-    transform: none !important;
-    position: relative;
-    /* --- MODIFIED FOR 4:3 ASPECT RATIO --- */
-    min-height: 400px;
-    /* Minimum height to ensure visibility */
-    aspect-ratio: 3 / 4;
-    /* Modern CSS aspect ratio */
+  background: #000000;
+  border: none;
+  border-radius: 0;
+  overflow: hidden;
+  transition: all var(--transition-normal);
+  box-shadow: none;
+  width: 100%;
+  max-width: 100%;
+  transform: none !important;
+  position: relative;
+  /* --- MODIFIED FOR 4:3 ASPECT RATIO --- */
+  min-height: 400px;
+  /* Minimum height to ensure visibility */
+  aspect-ratio: 3 / 4;
+  /* Modern CSS aspect ratio */
 }
 
 /* Fallback for browsers that don't support aspect-ratio */
 @supports not (aspect-ratio: 3 / 4) {
-    .image-item {
-        height: 0;
-        padding-bottom: 133.33%;
-    }
+  .image-item {
+    height: 0;
+    padding-bottom: 133.33%;
+  }
 }
 
 /* Two images should have equal heights */
 #bone-image-container.two-images .image-item {
-    align-self: stretch;
+  align-self: stretch;
 }
 
 .image-item:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: none;
+  transform: translateY(-2px) !important;
+  box-shadow: none;
 }
 
 .image-item img {
-    /* --- MODIFIED TO FILL ASPECT RATIO BOX --- */
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    /* Now fills the proportional container */
-
-    width: 100%;
-    object-fit: contain;
-    object-position: center;
-    display: block;
-    border: none;
-    background: #000000;
-    padding: var(--space-2);
-    transition: transform 0.3s ease;
+  /* --- MODIFIED TO FILL ASPECT RATIO BOX --- */
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  /* Now fills the proportional container */
+
+  width: 100%;
+  object-fit: contain;
+  object-position: center;
+  display: block;
+  border: none;
+  background: #000000;
+  padding: var(--space-2);
+  transition: transform 0.3s ease;
 }
 
 /* Add more pronounced natural tilts like the original */
 .image-item:nth-child(1) img {
-    transform: rotate(-18deg);
+  transform: rotate(-18deg);
 }
 
 .image-item:nth-child(2) img {
-    transform: rotate(3.5deg);
+  transform: rotate(3.5deg);
 }
 
 .image-item:nth-child(3) img {
-    transform: rotate(-3deg);
+  transform: rotate(-3deg);
 }
 
 .image-item:nth-child(4) img {
-    transform: rotate(4.5deg);
+  transform: rotate(4.5deg);
 }
 
 .image-caption {
-    display: none;
+  display: none;
 }
 
 /* Allow natural image orientation while maintaining layout */
 .image-item:nth-child(1):hover img {
-    transform: translateY(-2px) rotate(-12deg) scale(1.02);
+  transform: translateY(-2px) rotate(-12deg) scale(1.02);
 }
 
 .image-item:nth-child(2):hover img {
-    transform: translateY(-2px) rotate(3.5deg) scale(1.02);
+  transform: translateY(-2px) rotate(3.5deg) scale(1.02);
 }
 
 .image-item:nth-child(3):hover img {
-    transform: translateY(-2px) rotate(-3deg) scale(1.02);
+  transform: translateY(-2px) rotate(-3deg) scale(1.02);
 }
 
 .image-item:nth-child(4):hover img {
-    transform: translateY(-2px) rotate(4.5deg) scale(1.02);
+  transform: translateY(-2px) rotate(4.5deg) scale(1.02);
 }
 
 /* === CRITICAL FIX: Single Image Wrapper Aspect Ratio === */
 /* This container holds the single image and MUST define its own height */
 .single-image-wrapper {
-    /* position: relative; is already defined globally at the top */
+  /* position: relative; is already defined globally at the top */
 
-    /* Enforce 4:3 Aspect Ratio using padding-bottom trick, same as .image-item */
-    width: 100%;
-    height: 0;
-    padding-bottom: 55%;
-    overflow: hidden;
-    background: #000000;
+  /* Enforce 4:3 Aspect Ratio using padding-bottom trick, same as .image-item */
+  width: 100%;
+  height: 0;
+  padding-bottom: 55%;
+  overflow: hidden;
+  background: #000000;
 }
 
 /* Ensure image element inside the wrapper fills the space */
 .single-image-wrapper img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    object-fit: contain;
-    object-position: center;
-    display: block;
-    padding: var(--space-2);
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  object-fit: contain;
+  object-position: center;
+  display: block;
+  padding: var(--space-2);
 }
 
 /* Ensure the placeholder fills the single-image wrapper space when it's present */
 /* If the placeholder is placed inside .single-image-wrapper when no image is present,
    these styles ensure it takes up the full space defined by the padding-bottom. */
 .single-image-wrapper .images-placeholder {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    margin: 0 !important;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0 !important;
 }
 
 /* Colored Regions Overlay - Ensures SVG scales with image */
 .colored-regions-overlay {
-    position: absolute !important;
-    top: 0 !important;
-    left: 0 !important;
-    width: 100% !important;
-    height: 100% !important;
-    pointer-events: none !important;
-    z-index: 10;
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  pointer-events: none !important;
+  z-index: 10;
 }
 
 /* Images Placeholder */
 
 .images-placeholder::before {
-    content: '🖼️';
-    font-size: 2.5rem;
-    opacity: 0.4;
-    margin-bottom: var(--space-3);
+  content: "🖼️";
+  font-size: 2.5rem;
+  opacity: 0.4;
+  margin-bottom: var(--space-3);
 }
 
 .images-placeholder p {
-    margin: 0;
-    font-size: 1rem;
-    line-height: 1.6;
-    max-width: 400px;
-    font-weight: 500;
-    color: #92400e;
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.6;
+  max-width: 400px;
+  font-weight: 500;
+  color: #92400e;
 }
 
-
 /* Placeholder styling when inside black images-content */
 .images-content .images-placeholder {
-    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
-    border: 2px dashed #6b7280;
-    color: #ffffff;
-    /* --- FINAL WIDTH OVERRIDE --- */
-    width: 100% !important;
-    margin: 0 !important;
+  background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
+  border: 2px dashed #6b7280;
+  color: #ffffff;
+  /* --- FINAL WIDTH OVERRIDE --- */
+  width: 100% !important;
+  margin: 0 !important;
 }
 
 .images-content .images-placeholder p {
-    color: #d1d5db;
+  color: #d1d5db;
 }
 
 .images-content .images-placeholder:hover {
-    border-color: var(--slu-gold);
-    background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
-    transform: scale(1.01);
+  border-color: var(--slu-gold);
+  background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
+  transform: scale(1.01);
 }
 
 .images-placeholder:hover {
-    border-color: var(--slu-gold);
-    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
-    transform: scale(1.01);
+  border-color: var(--slu-gold);
+  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+  transform: scale(1.01);
 }
 
 /* Hide placeholder when images exist */
 #bone-image-container:not(:empty) .images-placeholder {
-    display: none;
+  display: none;
 }
 
 /* Colored Regions Overlay SVG - Scale with image */
 .colored-regions-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100% !important;
-    height: 100% !important;
-    pointer-events: none;
-    z-index: 10;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100% !important;
+  height: 100% !important;
+  pointer-events: none;
+  z-index: 10;
 }
 
 /* Navigation Buttons */
 .navigation-buttons {
-    display: flex;
-    justify-content: center;
-    gap: var(--space-4);
-    margin-top: var(--space-6);
-    padding: var(--space-4) 0;
+  display: flex;
+  justify-content: center;
+  gap: var(--space-4);
+  margin-top: var(--space-6);
+  padding: var(--space-4) 0;
 }
 
 .navigation-buttons button {
-    padding: var(--space-3) var(--space-6);
-    border: 2px solid var(--slu-navy);
-    background: transparent;
-    color: var(--slu-navy);
-    border-radius: var(--radius-lg);
-    font-weight: 600;
-    font-size: 1rem;
-    cursor: pointer;
-    transition: all var(--transition-normal);
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    min-width: 120px;
+  padding: var(--space-3) var(--space-6);
+  border: 2px solid var(--slu-navy);
+  background: transparent;
+  color: var(--slu-navy);
+  border-radius: var(--radius-lg);
+  font-weight: 600;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: all var(--transition-normal);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  min-width: 120px;
 }
 
 .navigation-buttons button:hover:not(:disabled) {
-    background: var(--slu-navy);
-    color: white;
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.3);
+  background: var(--slu-navy);
+  color: white;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 51, 102, 0.3);
 }
 
 .navigation-buttons button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    border-color: #cbd5e1;
-    color: #9ca3af;
+  opacity: 0.5;
+  cursor: not-allowed;
+  border-color: #cbd5e1;
+  color: #9ca3af;
 }
 
 .btn-secondary {
-    border-color: var(--slu-gold) !important;
-    color: var(--slu-gold) !important;
+  border-color: var(--slu-gold) !important;
+  color: var(--slu-gold) !important;
 }
 
 .btn-secondary:hover:not(:disabled) {
-    background: var(--slu-gold) !important;
-    color: var(--slu-navy) !important;
-    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3) !important;
+  background: var(--slu-gold) !important;
+  color: var(--slu-navy) !important;
+  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3) !important;
 }
 
-
 @media (max-width: 1024px) {
-    .container {
-        padding: var(--space-8);
-    }
+  .container {
+    padding: var(--space-8);
+  }
 
-    .content-grid {
-        gap: var(--space-6);
-    }
+  .content-grid {
+    gap: var(--space-6);
+  }
 
-    h1 {
-        font-size: 2.5rem;
-    }
+  h1 {
+    font-size: 2.5rem;
+  }
 }
 
 @media (max-width: 768px) {
-    .content-grid {
-        grid-template-columns: 1fr;
-    }
+  .content-grid {
+    grid-template-columns: 1fr;
+  }
 
-    .form-row {
-        grid-template-columns: 1fr;
-    }
+  .form-row {
+    grid-template-columns: 1fr;
+  }
 
-    #editor-view {
-        padding: var(--space-4);
-    }
+  #editor-view {
+    padding: var(--space-4);
+  }
 
-    .container {
-        padding: var(--space-6);
-    }
+  .container {
+    padding: var(--space-6);
+  }
 
-    h1 {
-        font-size: 2rem;
-    }
+  h1 {
+    font-size: 2rem;
+  }
 
-    .main-navigation {
-        display: none;
-    }
+  .main-navigation {
+    display: none;
+  }
 
-    #innerbadge {
-        gap: var(--space-2);
-    }
+  #innerbadge {
+    gap: var(--space-2);
+  }
 
-    #innerbadge span {
-        padding: var(--space-2) var(--space-4);
-        font-size: 0.9rem;
-    }
+  #innerbadge span {
+    padding: var(--space-2) var(--space-4);
+    font-size: 0.9rem;
+  }
 }
 
 @media (max-width: 480px) {
-    #badge {
-        padding: 0 var(--space-4);
-    }
+  #badge {
+    padding: 0 var(--space-4);
+  }
 
-    .subtitle {
-        font-size: 1.2rem;
-    }
+  .subtitle {
+    font-size: 1.2rem;
+  }
 
-    .search-section,
-    .selection-section {
-        padding: var(--space-6);
-    }
+  .search-section,
+  .selection-section {
+    padding: var(--space-6);
+  }
 }
 
-
-.container>* {
-    animation: fadeInUp 0.6s ease-out backwards;
+.container > * {
+  animation: fadeInUp 0.6s ease-out backwards;
 }
 
-.container>*:nth-child(1) {
-    animation-delay: 0.1s;
+.container > *:nth-child(1) {
+  animation-delay: 0.1s;
 }
 
-.container>*:nth-child(2) {
-    animation-delay: 0.2s;
+.container > *:nth-child(2) {
+  animation-delay: 0.2s;
 }
 
-.container>*:nth-child(3) {
-    animation-delay: 0.3s;
+.container > *:nth-child(3) {
+  animation-delay: 0.3s;
 }
 
-.container>*:nth-child(4) {
-    animation-delay: 0.4s;
+.container > *:nth-child(4) {
+  animation-delay: 0.4s;
 }
 
 /* Hover effects for better interactivity */
 .form-group:hover label {
-    color: var(--primary);
-    transform: translateX(4px);
-    transition: all var(--transition-normal);
+  color: var(--primary);
+  transform: translateX(4px);
+  transition: all var(--transition-normal);
 }
 
 /* Focus improvements */
 *:focus-visible {
-    outline: 2px solid var(--primary);
-    outline-offset: 2px;
-    border-radius: var(--radius);
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+  border-radius: var(--radius);
 }
 
 /* Loading states */
 .loading {
-    position: relative;
-    overflow: hidden;
+  position: relative;
+  overflow: hidden;
 }
 
 .loading::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
-    animation: shimmer 1.5s ease-in-out infinite;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.4) 50%,
+    transparent 100%
+  );
+  animation: shimmer 1.5s ease-in-out infinite;
 }
 
 @keyframes shimmer {
-    0% {
-        left: -100%;
-    }
+  0% {
+    left: -100%;
+  }
 
-    100% {
-        left: 100%;
-    }
+  100% {
+    left: 100%;
+  }
 }
 
 /* ============================================
@@ -1721,52 +1813,52 @@ button:disabled {
 
 /* SVG overlay for colored anatomical regions */
 .colored-regions-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    pointer-events: none;
-    /* Allow clicks to pass through to image */
-    z-index: 10;
-    /* Above image, below text annotations */
-    width: 100%;
-    height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  /* Allow clicks to pass through to image */
+  z-index: 10;
+  /* Above image, below text annotations */
+  width: 100%;
+  height: 100%;
 }
 
 /* Ensure parent containers support absolute positioning of SVG overlay */
 .image-box,
 .image-item,
 .single-image-wrapper {
-    position: relative;
-    overflow: hidden;
-    /* Clip colored regions to image boundaries */
+  position: relative;
+  overflow: hidden;
+  /* Clip colored regions to image boundaries */
 }
 
 /* Ensure images in containers are positioned for overlay alignment */
 .image-box img,
 .image-item img {
-    position: relative;
-    z-index: 1;
-    /* Below colored regions overlay */
+  position: relative;
+  z-index: 1;
+  /* Below colored regions overlay */
 }
 
 /* Colored region paths with smooth transitions */
 .colored-regions-overlay path {
-    transition: opacity 0.3s ease;
-    stroke-width: 3;
-    stroke-dasharray: 15, 10;
+  transition: opacity 0.3s ease;
+  stroke-width: 3;
+  stroke-dasharray: 15, 10;
 }
 
 /* Solid lines for stroked paths (like sciatic notches) */
 .colored-regions-overlay path[data-region-type="stroke"] {
-    stroke-dasharray: none;
-    /* Override to make solid lines */
+  stroke-dasharray: none;
+  /* Override to make solid lines */
 }
 
 /* Optional: Hover effect to make regions slightly more visible when hovering over image */
 .image-box:hover .colored-regions-overlay path,
 .image-item:hover .colored-regions-overlay path {
-    opacity: 0.5;
-    /* Slightly increase opacity on hover */
+  opacity: 0.5;
+  /* Slightly increase opacity on hover */
 }
 
 /* ============================================
@@ -1778,26 +1870,26 @@ button:disabled {
 #bone-image-container .image-item,
 #bone-image-container .image-box,
 #bone-image-container .single-image-wrapper {
-    position: relative;
+  position: relative;
 }
 
 /* Full-bleed overlay that sits above the image */
 .annotation-stage {
-    position: absolute;
-    inset: 0;
-    z-index: 5;
-    /* above the image */
-    pointer-events: none;
-    /* overlay doesn't block hover/scroll */
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  /* above the image */
+  pointer-events: none;
+  /* overlay doesn't block hover/scroll */
 }
 
 /* Overlay layers */
 .annotation-svg,
 .annotation-labels {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
 }
 
 /* In templates/style.css */
@@ -1805,40 +1897,40 @@ button:disabled {
 /* Lines: Use a dark color and a thin stroke */
 .annotation-line,
 .annotation-svg line {
-    stroke: #ffffff;
-    /* Dark gray/black for visibility */
-    stroke-width: 1.5;
-    /* Thin line */
-    opacity: 1;
-    vector-effect: non-scaling-stroke;
+  stroke: #ffffff;
+  /* Dark gray/black for visibility */
+  stroke-width: 1.5;
+  /* Thin line */
+  opacity: 1;
+  vector-effect: non-scaling-stroke;
 }
 
 /* Label boxes: Use dark text and transparent styling */
 .annotation-label {
-    position: absolute;
-    /* Appearance to match the slide */
-    color: #ffffff;
-    /* white text */
-    background: transparent;
-    /* Remove background box */
-    border: none;
-    /* Remove border */
-    padding: 0;
-    /* Remove padding */
-    font-weight: 500;
-    font-size: 14px;
-    /* Adjust size */
-    text-shadow: none;
-    /* Remove shadows */
-    box-shadow: none;
-    text-align: center;
-    white-space: nowrap;
-    /* Keep the text on one line */
-
-    /* Ensure proper vertical and horizontal centering */
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  position: absolute;
+  /* Appearance to match the slide */
+  color: #ffffff;
+  /* white text */
+  background: transparent;
+  /* Remove background box */
+  border: none;
+  /* Remove border */
+  padding: 0;
+  /* Remove padding */
+  font-weight: 500;
+  font-size: 14px;
+  /* Adjust size */
+  text-shadow: none;
+  /* Remove shadows */
+  box-shadow: none;
+  text-align: center;
+  white-space: nowrap;
+  /* Keep the text on one line */
+
+  /* Ensure proper vertical and horizontal centering */
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 /* --- Important for accuracy ---
@@ -1846,602 +1938,623 @@ button:disabled {
    will not match the coordinates. Disable decorative rotations
    whenever annotations are present.  */
 .image-item:has(.annotation-stage) img {
-    transform: none !important;
+  transform: none !important;
 }
 
 /* Fallback for browsers without :has(). If you add the class
    'with-annotations' to the container, this will also cancel tilt. */
 .image-item.with-annotations img {
-    transform: none !important;
+  transform: none !important;
 }
 
 /* Quiz Modal Container */
 #quiz-modal {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.85);
-    backdrop-filter: blur(10px);
-    z-index: 1000;
-    align-items: center;
-    justify-content: center;
-    padding: var(--space-4);
-    overflow-y: auto;
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.85);
+  backdrop-filter: blur(10px);
+  z-index: 1000;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-4);
+  overflow-y: auto;
 }
 
 #quiz-modal.active {
-    display: flex;
+  display: flex;
 }
 
 /* Quiz Container */
 #quiz-container {
-    background: white;
-    border-radius: var(--radius-2xl);
-    max-width: 900px;
-    width: 100%;
-    padding: var(--space-8);
-    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
-    border: 3px solid var(--slu-gold);
-    position: relative;
-    animation: slideIn 0.4s ease-out;
+  background: white;
+  border-radius: var(--radius-2xl);
+  max-width: 900px;
+  width: 100%;
+  padding: var(--space-8);
+  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
+  border: 3px solid var(--slu-gold);
+  position: relative;
+  animation: slideIn 0.4s ease-out;
+
+  /* 🔥 FIX FOR ISSUE #232 🔥 */
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  margin: auto;
 }
 
 @keyframes slideIn {
-    from {
-        opacity: 0;
-        transform: translateY(-30px) scale(0.95);
-    }
+  from {
+    opacity: 0;
+    transform: translateY(-30px) scale(0.95);
+  }
 
-    to {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-    }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
 
 #quiz-container::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 4px;
-    background: var(--gradient-primary);
-    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: var(--gradient-primary);
+  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
 }
 
 /* Quiz Header */
 .quiz-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: var(--space-6);
-    padding-bottom: var(--space-4);
-    border-bottom: 2px solid var(--border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--space-6);
+  padding-bottom: var(--space-4);
+  border-bottom: 2px solid var(--border);
+  flex-shrink: 0;
 }
 
 .quiz-info {
-    display: flex;
-    gap: var(--space-6);
-    align-items: center;
+  display: flex;
+  gap: var(--space-6);
+  align-items: center;
 }
 
 #quiz-progress {
-    font-size: 1.1rem;
-    font-weight: 600;
-    color: var(--slu-navy);
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--slu-navy);
 }
 
 #quiz-score {
-    font-size: 1.1rem;
-    font-weight: 700;
-    color: var(--success);
-    background: rgba(34, 197, 94, 0.1);
-    padding: var(--space-2) var(--space-4);
-    border-radius: var(--radius-lg);
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--success);
+  background: rgba(34, 197, 94, 0.1);
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-lg);
 }
 
 #exit-quiz-btn {
-    background: transparent;
-    border: 2px solid var(--error);
-    color: var(--error);
-    padding: var(--space-2) var(--space-5);
-    border-radius: var(--radius-lg);
-    cursor: pointer;
-    font-weight: 600;
-    transition: all var(--transition-normal);
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    font-size: 0.9rem;
+  background: transparent;
+  border: 2px solid var(--error);
+  color: var(--error);
+  padding: var(--space-2) var(--space-5);
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  font-weight: 600;
+  transition: all var(--transition-normal);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-size: 0.9rem;
 }
 
 #exit-quiz-btn:hover {
-    background: var(--error);
-    color: white;
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
+  background: var(--error);
+  color: white;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
 }
 
 /* Quiz Content */
 .quiz-content {
-    margin-bottom: var(--space-6);
+  margin-bottom: var(--space-6);
+  /* 🔥 FIX FOR ISSUE #232 🔥 */
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+  padding: 20px; /* Adjust padding as needed for your specific design */
 }
 
 #quiz-question-text {
-    font-family: var(--font-display);
-    font-size: 1.75rem;
-    font-weight: 600;
-    color: var(--slu-navy);
-    text-align: center;
-    margin-bottom: var(--space-6);
+  font-family: var(--font-display);
+  font-size: 1.75rem;
+  font-weight: 600;
+  color: var(--slu-navy);
+  text-align: center;
+  margin-bottom: var(--space-6);
 }
 
 /* Quiz Bone Image */
 #quiz-bone-image {
-    background: #000000;
-    border-radius: var(--radius-xl);
-    padding: var(--space-6);
-    margin-bottom: var(--space-6);
-    min-height: 200px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 2px solid var(--border);
-    box-shadow: var(--shadow-md);
+  background: #000000;
+  border-radius: var(--radius-xl);
+  padding: var(--space-6);
+  margin-bottom: var(--space-6);
+  min-height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid var(--border);
+  box-shadow: var(--shadow-md);
 }
 
 #quiz-bone-image img {
-    max-width: 100%;
-    max-height: 300px;
-    object-fit: contain;
-    border-radius: var(--radius);
+  max-width: 100%;
+  max-height: 300px;
+  object-fit: contain;
+  border-radius: var(--radius);
 }
 
 .quiz-image-placeholder {
-    text-align: center;
-    color: white;
-    padding: var(--space-8);
+  text-align: center;
+  color: white;
+  padding: var(--space-8);
 }
 
 .quiz-image-placeholder p:first-child {
-    font-size: 4rem;
-    margin-bottom: var(--space-3);
+  font-size: 4rem;
+  margin-bottom: var(--space-3);
 }
 
 .quiz-image-placeholder p:nth-child(2) {
-    font-size: 1.5rem;
-    font-weight: 600;
-    margin-bottom: var(--space-2);
-    color: var(--slu-gold);
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: var(--space-2);
+  color: var(--slu-gold);
 }
 
 .quiz-image-placeholder small {
-    font-size: 0.9rem;
-    color: #94a3b8;
+  font-size: 0.9rem;
+  color: #94a3b8;
 }
 
 /* Quiz Answer Choices */
 #quiz-choices {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: var(--space-4);
-    margin-bottom: var(--space-5);
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-4);
+  margin-bottom: var(--space-5);
 }
 
 .quiz-choice-btn {
-    background: white;
-    border: 3px solid var(--border);
-    padding: var(--space-5) var(--space-6);
-    border-radius: var(--radius-xl);
-    cursor: pointer;
-    font-size: 1.1rem;
-    font-weight: 600;
-    color: var(--text-primary);
-    transition: all var(--transition-normal);
-    text-align: center;
-    min-height: 70px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    overflow: hidden;
+  background: white;
+  border: 3px solid var(--border);
+  padding: var(--space-5) var(--space-6);
+  border-radius: var(--radius-xl);
+  cursor: pointer;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  transition: all var(--transition-normal);
+  text-align: center;
+  min-height: 70px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
 }
 
 .quiz-choice-btn::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: var(--gradient-accent);
-    transition: left var(--transition-slow);
-    z-index: -1;
-    opacity: 0.1;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: var(--gradient-accent);
+  transition: left var(--transition-slow);
+  z-index: -1;
+  opacity: 0.1;
 }
 
 .quiz-choice-btn:hover:not(:disabled) {
-    border-color: var(--slu-blue);
-    transform: translateY(-3px);
-    box-shadow: var(--shadow-lg);
-    color: var(--slu-navy);
+  border-color: var(--slu-blue);
+  transform: translateY(-3px);
+  box-shadow: var(--shadow-lg);
+  color: var(--slu-navy);
 }
 
 .quiz-choice-btn:hover:not(:disabled)::before {
-    left: 0;
+  left: 0;
 }
 
 .quiz-choice-btn:active:not(:disabled) {
-    transform: translateY(-1px);
+  transform: translateY(-1px);
 }
 
 /* Correct and Incorrect States */
 .quiz-choice-btn.correct {
-    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
-    border-color: #22c55e;
-    color: white;
-    animation: correctPulse 0.6s ease-out;
+  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
+  border-color: #22c55e;
+  color: white;
+  animation: correctPulse 0.6s ease-out;
 }
 
 .quiz-choice-btn.incorrect {
-    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-    border-color: #ef4444;
-    color: white;
-    animation: shake 0.5s ease-out;
+  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+  border-color: #ef4444;
+  color: white;
+  animation: shake 0.5s ease-out;
 }
 
 @keyframes correctPulse {
-    0% {
-        transform: scale(1);
-        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
-    }
+  0% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
+  }
 
-    50% {
-        transform: scale(1.05);
-        box-shadow: 0 0 20px 10px rgba(34, 197, 94, 0);
-    }
+  50% {
+    transform: scale(1.05);
+    box-shadow: 0 0 20px 10px rgba(34, 197, 94, 0);
+  }
 
-    100% {
-        transform: scale(1);
-        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
-    }
+  100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
+  }
 }
 
 @keyframes shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
 
-    0%,
-    100% {
-        transform: translateX(0);
-    }
-
-    25% {
-        transform: translateX(-10px);
-    }
+  25% {
+    transform: translateX(-10px);
+  }
 
-    75% {
-        transform: translateX(10px);
-    }
+  75% {
+    transform: translateX(10px);
+  }
 }
 
 .quiz-choice-btn:disabled {
-    cursor: not-allowed;
-    opacity: 0.6;
+  cursor: not-allowed;
+  opacity: 0.6;
 }
 
 /* Quiz Feedback */
 #quiz-feedback {
-    display: none;
-    padding: var(--space-5);
-    border-radius: var(--radius-xl);
-    margin-bottom: var(--space-5);
-    font-size: 1.1rem;
-    font-weight: 600;
-    text-align: center;
-    animation: fadeIn 0.4s ease-out;
+  display: none;
+  padding: var(--space-5);
+  border-radius: var(--radius-xl);
+  margin-bottom: var(--space-5);
+  font-size: 1.1rem;
+  font-weight: 600;
+  text-align: center;
+  animation: fadeIn 0.4s ease-out;
 }
 
 @keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(-10px);
-    }
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
 
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 #quiz-feedback.correct {
-    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(22, 163, 74, 0.15) 100%);
-    border: 2px solid #22c55e;
-    color: #166534;
+  background: linear-gradient(
+    135deg,
+    rgba(34, 197, 94, 0.15) 0%,
+    rgba(22, 163, 74, 0.15) 100%
+  );
+  border: 2px solid #22c55e;
+  color: #166534;
 }
 
 #quiz-feedback.incorrect {
-    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.15) 100%);
-    border: 2px solid #ef4444;
-    color: #991b1b;
+  background: linear-gradient(
+    135deg,
+    rgba(239, 68, 68, 0.15) 0%,
+    rgba(220, 38, 38, 0.15) 100%
+  );
+  border: 2px solid #ef4444;
+  color: #991b1b;
 }
 
 .feedback-icon {
-    font-size: 1.5rem;
-    margin-right: var(--space-2);
+  font-size: 1.5rem;
+  margin-right: var(--space-2);
 }
 
 .feedback-text strong {
-    color: var(--slu-navy);
+  color: var(--slu-navy);
 }
 
 /* Quiz Actions */
 .quiz-actions {
-    display: flex;
-    justify-content: center;
-    gap: var(--space-4);
+  display: flex;
+  justify-content: center;
+  gap: var(--space-4);
+  flex-shrink: 0;
 }
 
 #next-question-btn {
-    background: var(--gradient-primary);
-    color: white;
-    border: none;
-    padding: var(--space-4) var(--space-8);
-    border-radius: var(--radius-lg);
-    cursor: pointer;
-    font-size: 1.1rem;
-    font-weight: 600;
-    transition: all var(--transition-normal);
-    box-shadow: var(--shadow-color);
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    min-width: 150px;
+  background: var(--gradient-primary);
+  color: white;
+  border: none;
+  padding: var(--space-4) var(--space-8);
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  font-size: 1.1rem;
+  font-weight: 600;
+  transition: all var(--transition-normal);
+  box-shadow: var(--shadow-color);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  min-width: 150px;
 }
 
 #next-question-btn:hover {
-    background: var(--gradient-accent);
-    transform: translateY(-3px);
-    box-shadow: var(--shadow-xl);
+  background: var(--gradient-accent);
+  transform: translateY(-3px);
+  box-shadow: var(--shadow-xl);
 }
 
 #next-question-btn:active {
-    transform: translateY(-1px);
+  transform: translateY(-1px);
 }
 
 /* Quiz Results */
 .quiz-results {
-    text-align: center;
-    padding: var(--space-8) var(--space-4);
+  text-align: center;
+  padding: var(--space-8) var(--space-4);
 }
 
 .results-emoji {
-    font-size: 5rem;
-    margin-bottom: var(--space-6);
-    animation: bounceIn 0.6s ease-out;
+  font-size: 5rem;
+  margin-bottom: var(--space-6);
+  animation: bounceIn 0.6s ease-out;
 }
 
 @keyframes bounceIn {
-    0% {
-        opacity: 0;
-        transform: scale(0.3);
-    }
+  0% {
+    opacity: 0;
+    transform: scale(0.3);
+  }
 
-    50% {
-        opacity: 1;
-        transform: scale(1.1);
-    }
+  50% {
+    opacity: 1;
+    transform: scale(1.1);
+  }
 
-    100% {
-        transform: scale(1);
-    }
+  100% {
+    transform: scale(1);
+  }
 }
 
 .quiz-results h2 {
-    font-family: var(--font-display);
-    font-size: 2.5rem;
-    font-weight: 700;
-    color: var(--slu-navy);
-    margin-bottom: var(--space-6);
+  font-family: var(--font-display);
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: var(--slu-navy);
+  margin-bottom: var(--space-6);
 }
 
 .results-score {
-    background: var(--gradient-primary);
-    color: white;
-    padding: var(--space-8);
-    border-radius: var(--radius-2xl);
-    margin: var(--space-6) auto;
-    max-width: 300px;
-    box-shadow: var(--shadow-xl);
+  background: var(--gradient-primary);
+  color: white;
+  padding: var(--space-8);
+  border-radius: var(--radius-2xl);
+  margin: var(--space-6) auto;
+  max-width: 300px;
+  box-shadow: var(--shadow-xl);
 }
 
 .score-number {
-    font-size: 3.5rem;
-    font-weight: 800;
-    line-height: 1;
-    margin-bottom: var(--space-2);
+  font-size: 3.5rem;
+  font-weight: 800;
+  line-height: 1;
+  margin-bottom: var(--space-2);
 }
 
 .score-percentage {
-    font-size: 2rem;
-    font-weight: 600;
-    opacity: 0.9;
+  font-size: 2rem;
+  font-weight: 600;
+  opacity: 0.9;
 }
 
 .results-message {
-    font-size: 1.3rem;
-    font-weight: 600;
-    color: var(--text-primary);
-    margin: var(--space-6) 0;
-    line-height: 1.6;
+  font-size: 1.3rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: var(--space-6) 0;
+  line-height: 1.6;
 }
 
 .results-buttons {
-    display: flex;
-    gap: var(--space-4);
-    justify-content: center;
-    margin-top: var(--space-8);
+  display: flex;
+  gap: var(--space-4);
+  justify-content: center;
+  margin-top: var(--space-8);
 }
 
 .quiz-btn {
-    padding: var(--space-4) var(--space-8);
-    border-radius: var(--radius-lg);
-    cursor: pointer;
-    font-size: 1.1rem;
-    font-weight: 600;
-    transition: all var(--transition-normal);
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    border: none;
-    min-width: 150px;
+  padding: var(--space-4) var(--space-8);
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  font-size: 1.1rem;
+  font-weight: 600;
+  transition: all var(--transition-normal);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border: none;
+  min-width: 150px;
 }
 
 .quiz-btn-primary {
-    background: var(--gradient-primary);
-    color: white;
-    box-shadow: var(--shadow-color);
+  background: var(--gradient-primary);
+  color: white;
+  box-shadow: var(--shadow-color);
 }
 
 .quiz-btn-primary:hover {
-    background: var(--gradient-accent);
-    transform: translateY(-3px);
-    box-shadow: var(--shadow-xl);
+  background: var(--gradient-accent);
+  transform: translateY(-3px);
+  box-shadow: var(--shadow-xl);
 }
 
 .quiz-btn-secondary {
-    background: white;
-    color: var(--primary);
-    border: 2px solid var(--primary);
-    box-shadow: var(--shadow-sm);
+  background: white;
+  color: var(--primary);
+  border: 2px solid var(--primary);
+  box-shadow: var(--shadow-sm);
 }
 
 .quiz-btn-secondary:hover {
-    background: var(--primary);
-    color: white;
-    transform: translateY(-3px);
-    box-shadow: var(--shadow-lg);
+  background: var(--primary);
+  color: white;
+  transform: translateY(-3px);
+  box-shadow: var(--shadow-lg);
 }
 
 /* Responsive Design */
 @media (max-width: 768px) {
-    #quiz-modal {
-        padding: var(--space-2);
-    }
-
-    #quiz-container {
-        padding: var(--space-6);
-    }
-
-    .quiz-header {
-        flex-direction: column;
-        gap: var(--space-3);
-        align-items: flex-start;
-    }
-
-    .quiz-info {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: var(--space-2);
-        width: 100%;
-    }
-
-    #exit-quiz-btn {
-        width: 100%;
-        margin-top: var(--space-3);
-    }
-
-    #quiz-question-text {
-        font-size: 1.3rem;
-    }
-
-    #quiz-choices {
-        grid-template-columns: 1fr;
-    }
-
-    .quiz-choice-btn {
-        font-size: 1rem;
-        padding: var(--space-4);
-    }
-
-    .results-score {
-        padding: var(--space-6);
-    }
-
-    .score-number {
-        font-size: 2.5rem;
-    }
-
-    .score-percentage {
-        font-size: 1.5rem;
-    }
-
-    .results-buttons {
-        flex-direction: column;
-    }
-
-    .quiz-btn {
-        width: 100%;
-    }
+  #quiz-modal {
+    padding: var(--space-2);
+  }
+
+  #quiz-container {
+    padding: var(--space-6);
+  }
+
+  .quiz-header {
+    flex-direction: column;
+    gap: var(--space-3);
+    align-items: flex-start;
+  }
+
+  .quiz-info {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-2);
+    width: 100%;
+  }
+
+  #exit-quiz-btn {
+    width: 100%;
+    margin-top: var(--space-3);
+  }
+
+  #quiz-question-text {
+    font-size: 1.3rem;
+  }
+
+  #quiz-choices {
+    grid-template-columns: 1fr;
+  }
+
+  .quiz-choice-btn {
+    font-size: 1rem;
+    padding: var(--space-4);
+  }
+
+  .results-score {
+    padding: var(--space-6);
+  }
+
+  .score-number {
+    font-size: 2.5rem;
+  }
+
+  .score-percentage {
+    font-size: 1.5rem;
+  }
+
+  .results-buttons {
+    flex-direction: column;
+  }
+
+  .quiz-btn {
+    width: 100%;
+  }
 }
 
 @media (max-width: 480px) {
-    #quiz-container {
-        padding: var(--space-4);
-    }
+  #quiz-container {
+    padding: var(--space-4);
+  }
 
-    .quiz-results h2 {
-        font-size: 2rem;
-    }
+  .quiz-results h2 {
+    font-size: 2rem;
+  }
 
-    .results-emoji {
-        font-size: 3.5rem;
-    }
+  .results-emoji {
+    font-size: 3.5rem;
+  }
 
-    #start-quiz-btn {
-        min-width: 80px;
-        font-size: 0.9rem;
-        padding: var(--space-2) var(--space-4);
-    }
+  #start-quiz-btn {
+    min-width: 80px;
+    font-size: 0.9rem;
+    padding: var(--space-2) var(--space-4);
+  }
 }
 
 /* Image Caption Styles */
 #caption-container {
-    background: white;
-    border-top: 1px solid #e2e8f0;
-    width: 100%;
-    position: relative;
-    z-index: 1;
+  background: white;
+  border-top: 1px solid #e2e8f0;
+  width: 100%;
+  position: relative;
+  z-index: 1;
 }
 
 .image-caption {
-    text-align: center;
-    font-size: 15px;
-    color: #333;
-    padding: 12px 8px;
-    font-weight: 500;
-    line-height: 1.4;
-    font-style: italic;
+  text-align: center;
+  font-size: 15px;
+  color: #333;
+  padding: 12px 8px;
+  font-weight: 500;
+  line-height: 1.4;
+  font-style: italic;
 }
 
 /* Ensure captions stay white background */
-.images-content.has-images+#caption-container {
-    background: white;
+.images-content.has-images + #caption-container {
+  background: white;
 }
 
 /* Responsive adjustments */
 @media (max-width: 768px) {
-    #caption-container {
-        grid-template-columns: 1fr !important;
-    }
+  #caption-container {
+    grid-template-columns: 1fr !important;
+  }
 
-    .image-caption {
-        font-size: 14px;
-        padding: 10px 8px;
-    }
+  .image-caption {
+    font-size: 14px;
+    padding: 10px 8px;
+  }
 }
 
 @media (max-width: 480px) {
-    .image-caption {
-        font-size: 13px;
-        padding: 8px 6px;
-    }
-}
\ No newline at end of file
+  .image-caption {
+    font-size: 13px;
+    padding: 8px 6px;
+  }
+}

From 31e8bfc966d4a3a067b8a393a5c398d8df60306f Mon Sep 17 00:00:00 2001
From: shubhamshinare <shubhamshinare2004@gmail.com>
Date: Tue, 31 Mar 2026 00:55:27 +0530
Subject: [PATCH 2/2] Cleanup: Removed testing code and finalized helpButton
 layout

---
 templates/helpButton.html | 321 ++++++++++++++++++++++++++------------
 1 file changed, 219 insertions(+), 102 deletions(-)

diff --git a/templates/helpButton.html b/templates/helpButton.html
index 239a2a71..90d4610a 100644
--- a/templates/helpButton.html
+++ b/templates/helpButton.html
@@ -1,110 +1,227 @@
-<style>
-  #help-modal-content {
-    max-height: 85vh !important;
-    display: flex !important;
-    flex-direction: column !important;
-    overflow: hidden !important;
-  }
-  .help-content {
-    flex: 1 1 auto !important;
-    overflow-y: auto !important;
-    min-height: 0 !important;
-    display: block !important;
-  }
-  #close-help-modal {
-    flex-shrink: 0 !important;
-  }
-</style>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Digital Bones Box - Bone Set Viewer</title>
 
-<span
-  id="text-button-Help"
-  role="button"
-  tabindex="0"
-  aria-haspopup="dialog"
-  aria-controls="help-modal"
->
-  Help
-</span>
+    <link rel="icon" href="data:," />
 
-<div
-  id="help-modal"
-  class="help-modal"
-  role="dialog"
-  aria-labelledby="help-modal-title"
-  aria-modal="true"
-  aria-hidden="true"
-  style="
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background: rgba(0, 0, 0, 0.8);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 99999;
-  "
->
-  <div
-    id="help-modal-content"
-    class="help-modal-content"
-    role="document"
-    style="
-      background: white;
-      width: 95%;
-      max-width: 800px;
-      padding: 20px;
-      border-radius: 16px;
-      box-sizing: border-box;
-    "
-  >
-    <h2
-      id="help-modal-title"
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Crimson+Text:wght@400;600&display=swap"
+      rel="stylesheet"
+    />
+
+    <link rel="stylesheet" href="style.css" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
+  </head>
+
+  <body>
+    <header id="badge" role="banner">
+      <div class="header-left">
+        <button
+          id="toggle-sidebar"
+          type="button"
+          aria-label="Toggle navigation menu"
+        >
+          ☰
+        </button>
+        <nav class="main-navigation" role="navigation">
+          <button id="text-button-Home" type="button">Home</button>
+          <button id="text-button-Tutor" type="button">Tutor</button>
+          <button id="text-button-Study" type="button">Study</button>
+          <button
+            id="start-quiz-btn"
+            type="button"
+            aria-haspopup="dialog"
+            aria-controls="quiz-modal"
+          >
+            Quiz Me
+          </button>
+          <button
+            id="text-button-Help"
+            type="button"
+            aria-haspopup="dialog"
+            aria-controls="new-help-modal"
+            onclick="
+              document.getElementById('new-help-modal').style.display = 'flex'
+            "
+          >
+            Help
+          </button>
+        </nav>
+      </div>
+
+      <div class="header-right">
+        <div id="innerbadge">
+          <span id="text-button-Login" role="button" tabindex="0">Login</span>
+          <span id="text-button-SignUp" role="button" tabindex="0"
+            >Sign Up</span
+          >
+        </div>
+      </div>
+    </header>
+
+    <aside id="sidebar-container" role="complementary"></aside>
+
+    <main id="editor-view" role="main">
+      <div class="container">
+        <header class="page-header">
+          <h1>Digital Bones Box</h1>
+          <p class="subtitle">Interactive Anatomical Learning Platform</p>
+        </header>
+
+        <section class="selection-section">
+          <div class="form-group">
+            <label>Select Anatomical Structure</label>
+            <div class="form-row">
+              <div class="select-group">
+                <label for="boneset-select">Boneset</label>
+                <select id="boneset-select" name="boneId">
+                  <option value="">Select a boneset</option>
+                </select>
+              </div>
+
+              <div class="select-group">
+                <label for="bone-select">Bone</label>
+                <select id="bone-select" name="boneId" disabled>
+                  <option value="">Select a bone</option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <div class="content-grid">
+          <section id="bone-Description-Container" class="description-panel">
+            <div class="panel-header"><h2>Anatomical Description</h2></div>
+            <div class="description-content">
+              <ul id="description-Container"></ul>
+            </div>
+          </section>
+
+          <section id="bone-images-section" class="images-panel">
+            <div class="panel-header"><h2>Visual Reference</h2></div>
+            <div id="bone-image-container"></div>
+          </section>
+        </div>
+      </div>
+    </main>
+
+    <div
+      id="new-help-modal"
       style="
-        flex-shrink: 0;
-        text-align: center;
-        border-bottom: 2px solid #eab308;
-        padding-bottom: 10px;
-        margin-top: 0;
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background: rgba(0, 0, 0, 0.8);
+        z-index: 99999;
+        align-items: center;
+        justify-content: center;
+        padding: 20px;
+        box-sizing: border-box;
       "
     >
-      How to Use the Bone Set Viewer
-    </h2>
+      <div
+        style="
+          background: white;
+          padding: 30px;
+          border-radius: 16px;
+          width: 100%;
+          max-width: 650px;
+          border: 3px solid #ffd700;
+          box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
+          max-height: 90vh;
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+          box-sizing: border-box;
+        "
+      >
+        <h2
+          style="
+            flex-shrink: 0;
+            color: #003366;
+            text-align: center;
+            margin-top: 0;
+            margin-bottom: 20px;
+            border-bottom: 3px solid #ffd700;
+            padding-bottom: 15px;
+            font-weight: bold;
+          "
+        >
+          How to Use the Digital Bones Box
+        </h2>
+
+        <div
+          style="
+            overflow-y: auto;
+            flex: 1;
+            min-height: 0;
+            padding-right: 10px;
+            margin-bottom: 20px;
+          "
+        >
+          <div
+            style="
+              color: #2d3748;
+              font-size: 1.1rem;
+              line-height: 1.8;
+              background: #f7fafc;
+              padding: 25px;
+              border-radius: 12px;
+              border-left: 5px solid #0369a1;
+            "
+          >
+            <p style="margin-bottom: 15px">
+              Welcome! Getting started is simple:
+            </p>
+            <ul style="padding-left: 20px">
+              <li>Use dropdowns to navigate bone sets.</li>
+              <li>Select a boneset first to enable bone selection.</li>
+              <li>View detailed images and descriptions.</li>
+              <li>Click <strong>"Quiz Me"</strong> to test your knowledge!</li>
+            </ul>
+            <p style="margin-top: 15px; font-style: italic; color: #718096">
+              Press ESC to close.
+            </p>
+          </div>
+        </div>
 
-    <div class="help-content" style="padding-right: 10px; margin-bottom: 15px">
-      <ul>
-        <li>Use the dropdown menus to navigate through the bone sets</li>
-        <li>Select a boneset first, then choose specific bones</li>
-        <li>View detailed images and descriptions for each selection</li>
-        <li>Use the Previous/Next buttons to browse through items</li>
-        <li>Press ESC key or click Close to dismiss this help window</li>
-        <br />
-        <li><i>Scroll test 1...</i></li>
-        <li><i>Scroll test 2...</i></li>
-        <li><i>Scroll test 3...</i></li>
-        <li><i>Scroll test 4...</i></li>
-        <li><i>Scroll test 5...</i></li>
-      </ul>
+        <button
+          onclick="
+            document.getElementById('new-help-modal').style.display = 'none'
+          "
+          type="button"
+          style="
+            flex-shrink: 0;
+            background: #003366;
+            color: white;
+            border: 2px solid #ffd700;
+            padding: 15px;
+            border-radius: 10px;
+            cursor: pointer;
+            font-weight: bold;
+            width: 100%;
+          "
+        >
+          Close Guide
+        </button>
+      </div>
     </div>
 
-    <button
-      id="close-help-modal"
-      type="button"
-      class="btn"
-      aria-label="Close help modal"
-      style="
-        padding: 15px;
-        background: #1e40af;
-        color: white;
-        border-radius: 8px;
-        border: none;
-        cursor: pointer;
-        font-weight: bold;
-        width: 100%;
-      "
-    >
-      Close Guide
-    </button>
-  </div>
-</div>
+    <script type="module" src="js/main.js"></script>
+    <script>
+      document.addEventListener("keydown", (e) => {
+        if (e.key === "Escape")
+          document.getElementById("new-help-modal").style.display = "none";
+      });
+    </script>
+  </body>
+</html>
