<!-- AlumniQuiz - Classroom Reunion Planner Quiz (HTML+CSS only) -->

<style>
  :root {
    --primary: #5b6cff;
    --primary-dark: #3d4ad9;
    --bg: #f5f7fb;
    --card-bg: #ffffff;
    --text: #222222;
    --muted: #666666;
    --border: #e0e4f0;
  }

  .alumni-quiz * { box-sizing: border-box !important; }

  .alumni-quiz {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    margin: 0 auto;
    padding: 0;
    max-width: 720px;
    color: var(--text);
  }

  .quiz-card {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 24px 20px;
    margin: 30px 0;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
    border: 1px solid var(--border);
  }

  .quiz-header { text-align: center; margin-bottom: 20px; }
  .quiz-title { font-size: 1.6rem; margin-bottom: 8px; }
  .quiz-subtitle { font-size: 0.98rem; color: var(--muted); }

  .progress {
    margin: 12px 0 20px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.85rem; color: var(--muted);
  }

  .progress-bar {
    flex: 1; height: 6px;
    background: #e3e6f5;
    border-radius: 999px; overflow: hidden;
  }
  .progress-bar-inner {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    transition: width 0.25s ease;
  }

  .question-text { font-size: 1.05rem; margin-bottom: 16px; font-weight: 600; }

  .answers { display: grid; gap: 10px; }

  /* Answer buttons: visible text fix */
  .answer-btn {
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #f9fafb;
    text-align: left;
    font-size: 0.96rem;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #222222 !important;
  }

  .answer-btn:hover {
    background: #eef0ff;
    border-color: var(--primary);
    transform: translateY(-1px);
  }

  .primary-btn {
    padding: 10px 18px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    color: #ffffff;
    font-weight: 600;
    font-size: 0.98rem;
    cursor: pointer;
    margin-top: 14px;
    display: inline-flex; gap: 6px; align-items: center; justify-content: center;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.25);
    transition: 0.2s ease;
  }

  .primary-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(37, 99, 235, 0.35);
  }

  .result-screen { text-align: center; }
  .result-title { font-size: 1.4rem; margin-bottom: 6px; }
  .result-label { font-size: 0.9rem; color: var(--muted); margin-bottom: 16px; }

  .result-body { text-align: left; font-size: 0.96rem; }
  .result-body h4 { font-size: 1rem; margin: 14px 0 6px; }
  .result-body ul { margin: 6px 0 10px; padding-left: 18px; }
  .result-body li { margin-bottom: 4px; }

  .muted-note { font-size: 0.85rem; color: var(--muted); margin-top: 14px; }
</style>

<div class="alumni-quiz">
  <div class="quiz-card">

    <!-- START SCREEN -->
    <div id="aq-start-screen">
      <div class="quiz-header">
        <h1 class="quiz-title">What Type of Classroom Reunion Planner Are You?</h1>
        <p class="quiz-subtitle">Take this 7-question quiz to discover your natural role in bringing classmates back together.</p>
      </div>

      <button class="primary-btn" id="aq-start-btn">Start the quiz ▶</button>

      <p class="muted-note">No right or wrong answers—just insight into your planning style.</p>
    </div>

    <!-- QUIZ SCREEN -->
    <div id="aq-quiz-screen" style="display:none;">
      <div class="quiz-header">
        <h2 class="quiz-title" style="font-size:1.3rem;">Classroom Reunion Planner Quiz</h2>
      </div>

      <div class="progress">
        <span id="aq-progress-label">Question 1 of 7</span>
        <div class="progress-bar"><div class="progress-bar-inner" id="aq-progress-bar-inner"></div></div>
      </div>

      <div id="aq-question-container"></div>
      <div class="answers" id="aq-answers-container"></div>
    </div>

    <!-- RESULT SCREEN -->
    <div id="aq-result-screen" style="display:none;">
      <div class="quiz-header">
        <h2 class="quiz-title">Your Classroom Reunion Planner Type</h2>
      </div>

      <div id="aq-result-content" class="result-body"></div>

      <button class="primary-btn" id="aq-restart-btn">Retake quiz</button>

      <p class="muted-note">This is a demo quiz for AlumniQuiz.com. You can customize every part of it.</p>
    </div>

  </div>
</div>