<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #f8fafc;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px;
      user-select: none;
    }
    header {
      text-align: center;
      margin-bottom: 8px;
    }
    h1 {
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -0.2px;
      color: #0f172a;
    }
    .subtitle {
      font-size: 13px;
      color: #64748b;
      margin-top: 2px;
    }
    .scale-container {
      width: 100%;
      max-width: 480px;
      height: 250px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    /* Beam & pan animations */
    .beam-assembly {
      transform-origin: 240px 80px;
      transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .pan-left-assembly {
      transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .pan-right-assembly {
      transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* States */
    .state-balanced .beam-assembly { transform: rotate(0deg); }
    .state-balanced .pan-left-assembly { transform: translateY(0px); }
    .state-balanced .pan-right-assembly { transform: translateY(0px); }

    .state-delight .beam-assembly { transform: rotate(-14deg); }
    .state-delight .pan-left-assembly { transform: translateY(32px); }
    .state-delight .pan-right-assembly { transform: translateY(-32px); }

    .state-utility .beam-assembly { transform: rotate(14deg); }
    .state-utility .pan-left-assembly { transform: translateY(-32px); }
    .state-utility .pan-right-assembly { transform: translateY(32px); }

    /* Controls */
    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 420px;
      justify-content: center;
      margin-top: 8px;
    }
    .btn {
      flex: 1;
      padding: 8px 10px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
      transition: all 0.2s ease;
    }
    .btn:active {
      transform: translateY(1px);
    }
    .btn.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
      box-shadow: 0 3px 8px rgba(30,41,69,0.2);
    }

    .pan-card {
      font-family: inherit;
    }
    .pan-title {
      font-size: 13px;
      font-weight: 700;
    }
    .pan-sub {
      font-size: 10.5px;
      fill: #475569;
    }
    .fulcrum-label {
      font-size: 12px;
      font-weight: 700;
      fill: #ffffff;
      text-anchor: middle;
    }
    .status-pill {
      font-size: 11.5px;
      font-weight: 600;
      padding: 4px 12px;
      border-radius: 20px;
      display: inline-block;
      margin-top: 4px;
      background: #e2e8f0;
      color: #334155;
      transition: all 0.3s ease;
    }
    .status-pill.perfect {
      background: #dcfce7;
      color: #15803d;
    }
    .status-pill.flawed {
      background: #fee2e2;
      color: #b91c1c;
    }
  </style>
</head>
<body class="state-balanced">

  <header>
    <h1>The Neoclassical Formula</h1>
    <div id="statusPill" class="status-pill perfect">✦ Perfect Equilibrium: Reason Governs Both</div>
  </header>

  <div class="scale-container">
    <svg viewBox="0 0 480 240">
      <defs>
        <linearGradient id="fulcrumGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#334155" />
          <stop offset="100%" stop-color="#0f172a" />
        </linearGradient>
        <linearGradient id="goldGrad" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stop-color="#f59e0b" />
          <stop offset="100%" stop-color="#d97706" />
        </linearGradient>
        <filter id="shadow" x="-8%" y="-8%" width="120%" height="120%">
          <feDropShadow dx="0" dy="2" stdDeviation="2" flood-opacity="0.08"/>
        </filter>
      </defs>

      
      <path d="M 235 80 L 245 80 L 255 190 L 225 190 Z" fill="#94a3b8" />
      <rect x="210" y="190" width="60" height="10" rx="3" fill="#64748b" />

      
      <g class="beam-assembly">
        
        <rect x="70" y="77" width="340" height="6" rx="3" fill="#475569" />
        
        
        <circle cx="90" cy="80" r="4" fill="#334155" />
        <line x1="90" y1="80" x2="90" y2="92" stroke="#64748b" stroke-width="2" />
        
        
        <circle cx="390" cy="80" r="4" fill="#334155" />
        <line x1="390" y1="80" x2="390" y2="92" stroke="#64748b" stroke-width="2" />
        
        
        <circle cx="240" cy="80" r="6" fill="#0f172a" stroke="#ffffff" stroke-width="2" />
      </g>

      
      <g class="pan-left-assembly">
        
        <line x1="90" y1="92" x2="45" y2="148" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="2 2" />
        <line x1="90" y1="92" x2="135" y2="148" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="2 2" />
        
        
        <path d="M 35 148 Q 90 162 145 148 Z" fill="#e2e8f0" stroke="#cbd5e1" stroke-width="2" />
        
        
        <g transform="translate(42, 106)" filter="url(#shadow)">
          <rect width="96" height="42" rx="6" fill="#ffffff" stroke="#e0e7ff" stroke-width="1.5" />
          <text class="pan-title" x="48" y="18" text-anchor="middle" fill="#4338ca">🎭 Dulce</text>
          <text class="pan-sub" x="48" y="32" text-anchor="middle">Wit · Polish · Delight</text>
        </g>
      </g>

      
      <g class="pan-right-assembly">
        
        <line x1="390" y1="92" x2="345" y2="148" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="2 2" />
        <line x1="390" y1="92" x2="435" y2="148" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="2 2" />
        
        
        <path d="M 335 148 Q 390 162 445 148 Z" fill="#e2e8f0" stroke="#cbd5e1" stroke-width="2" />
        
        
        <g transform="translate(342, 106)" filter="url(#shadow)">
          <rect width="96" height="42" rx="6" fill="#ffffff" stroke="#dcfce7" stroke-width="1.5" />
          <text class="pan-title" x="48" y="18" text-anchor="middle" fill="#047857">📜 Utile</text>
          <text class="pan-sub" x="48" y="32" text-anchor="middle">Moral · Virtue · Utility</text>
        </g>
      </g>

      
      <g transform="translate(202, 140)" filter="url(#shadow)">
        <polygon points="38,0 76,55 0,55" fill="url(#fulcrumGrad)" />
        <polygon points="38,6 68,50 8,50" fill="none" stroke="#60a5fa" stroke-width="1" opacity="0.4" />
        <text class="fulcrum-label" x="38" y="42">REASON</text>
      </g>
    </svg>
  </div>

  <nav class="controls">
    <button class="btn" id="btnDelight" onclick="setMode('delight')">Only Delight</button>
    <button class="btn active" id="btnBalanced" onclick="setMode('balanced')">⚖️ Balanced</button>
    <button class="btn" id="btnUtility" onclick="setMode('utility')">Only Utility</button>
  </nav>

  <script>
    const modes = {
      balanced: {
        cls: 'state-balanced',
        pill: '✦ Perfect Equilibrium: Reason Governs Both',
        pillCls: 'perfect'
      },
      delight: {
        cls: 'state-delight',
        pill: '⚠ Empty Ornament: Lacks Moral Purpose',
        pillCls: 'flawed'
      },
      utility: {
        cls: 'state-utility',
        pill: '⚠ Dry Sermon: Lacks Artful Pleasure',
        pillCls: 'flawed'
      }
    };

    function setMode(modeKey) {
      document.body.className = modes[modeKey].cls;
      
      const pill = document.getElementById('statusPill');
      pill.textContent = modes[modeKey].pill;
      pill.className = 'status-pill ' + modes[modeKey].pillCls;

      document.querySelectorAll('.btn').forEach(b => b.classList.remove('active'));
      if (modeKey === 'balanced') document.getElementById('btnBalanced').classList.add('active');
      if (modeKey === 'delight') document.getElementById('btnDelight').classList.add('active');
      if (modeKey === 'utility') document.getElementById('btnUtility').classList.add('active');
    }
  </script>
</body>
</html>

Enlightenment Rationalism and Neoclassical Poetics

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .container {
      width: 100%;
      max-width: 620px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .toggle-bar {
      display: flex;
      justify-content: center;
      gap: 8px;
    }

    .tab-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .tab-btn.active {
      background: #0ea5e9;
      border-color: #0ea5e9;
      color: #ffffff;
    }

    .columns {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
    }

    .satire-card {
      border-radius: 12px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 10px;
      transition: opacity 0.3s ease, transform 0.3s ease;
      position: relative;
    }

    .satire-card.horatian {
      background: #f0fdf4;
      border: 1.5px solid #86efac;
    }

    .satire-card.juvenalian {
      background: #fff1f2;
      border: 1.5px solid #fca5a5;
    }

    .dimmed {
      opacity: 0.35;
      filter: grayscale(40%);
    }

    .card-title {
      font-size: 15px;
      font-weight: 800;
      letter-spacing: 0.2px;
    }

    .horatian .card-title { color: #166534; }
    .juvenalian .card-title { color: #991b1b; }

    .icon-hero {
      font-size: 38px;
      line-height: 1;
    }

    .meter-box {
      width: 100%;
      background: rgba(255, 255, 255, 0.7);
      border-radius: 8px;
      padding: 8px 6px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .pill-label {
      font-size: 12px;
      font-weight: 700;
      border-radius: 12px;
      padding: 3px 8px;
      display: inline-block;
    }

    .horatian .pill-label {
      background: #dcfce7;
      color: #15803d;
    }

    .juvenalian .pill-label {
      background: #fee2e2;
      color: #b91c1c;
    }

    .work-tag {
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      font-style: italic;
    }

    .author {
      font-size: 11px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="toggle-bar">
      <button class="tab-btn active" id="btn-both" onclick="setMode('both')">Compare</button>
      <button class="tab-btn" id="btn-horatian" onclick="setMode('horatian')">Horatian</button>
      <button class="tab-btn" id="btn-juvenalian" onclick="setMode('juvenalian')">Juvenalian</button>
    </div>

    <div class="columns">
      
      <div class="satire-card horatian" id="card-horatian" onclick="setMode('horatian')">
        <div class="icon-hero">🪶</div>
        <div class="card-title">Horatian</div>
        <div class="meter-box">
          <span class="pill-label">Smiling & Playful</span>
          <span class="pill-label">Mock-Heroic</span>
        </div>
        <div class="work-tag">The Rape of the Lock</div>
        <div class="author">Alexander Pope</div>
      </div>

      
      <div class="satire-card juvenalian" id="card-juvenalian" onclick="setMode('juvenalian')">
        <div class="icon-hero">🗡️</div>
        <div class="card-title">Juvenalian</div>
        <div class="meter-box">
          <span class="pill-label">Scathing & Bitter</span>
          <span class="pill-label">Grotesque Irony</span>
        </div>
        <div class="work-tag">A Modest Proposal</div>
        <div class="author">Jonathan Swift</div>
      </div>
    </div>
  </div>

  <script>
    function setMode(mode) {
      const cardH = document.getElementById('card-horatian');
      const cardJ = document.getElementById('card-juvenalian');
      const btnBoth = document.getElementById('btn-both');
      const btnH = document.getElementById('btn-horatian');
      const btnJ = document.getElementById('btn-juvenalian');

      btnBoth.classList.remove('active');
      btnH.classList.remove('active');
      btnJ.classList.remove('active');

      if (mode === 'horatian') {
        btnH.classList.add('active');
        cardH.classList.remove('dimmed');
        cardJ.classList.add('dimmed');
      } else if (mode === 'juvenalian') {
        btnJ.classList.add('active');
        cardJ.classList.remove('dimmed');
        cardH.classList.add('dimmed');
      } else {
        btnBoth.classList.add('active');
        cardH.classList.remove('dimmed');
        cardJ.classList.remove('dimmed');
      }
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      width: 100%;
      min-height: 100%;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      gap: 12px;
    }

    /* Top Navigation */
    .nav-bar {
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
      max-width: 580px;
      justify-content: space-between;
    }
    .pill-tabs {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
      flex: 1;
    }
    .tab-btn {
      flex: 1;
      min-width: 68px;
      padding: 6px 4px;
      font-size: 11px;
      font-weight: 700;
      text-align: center;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      color: #64748b;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
    }
    .tab-btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 2px 4px rgba(2, 132, 199, 0.2);
    }
    .play-btn {
      width: 32px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      cursor: pointer;
      font-size: 11px;
      color: #1e293b;
    }

    /* Central Verse Display */
    .verse-card {
      width: 100%;
      max-width: 580px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      position: relative;
    }

    .verse-line {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      flex-wrap: wrap;
      font-family: Georgia, serif;
      font-size: clamp(15px, 4vw, 19px);
      font-weight: 600;
    }

    .hemistich {
      display: flex;
      gap: 3px;
      padding: 4px 6px;
      border-radius: 8px;
      transition: all 0.3s ease;
      border: 1px solid transparent;
    }

    .foot {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      padding: 2px 3px;
      border-radius: 4px;
      transition: all 0.3s ease;
    }
    .stress-mark {
      font-size: 10px;
      font-family: system-ui, sans-serif;
      font-weight: 800;
      color: #94a3b8;
      height: 12px;
      line-height: 12px;
      transition: all 0.3s ease;
    }
    .stressed {
      color: #0284c7;
      font-weight: 700;
    }

    /* Caesura Divider */
    .caesura-marker {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 18px;
      color: #cbd5e1;
      font-weight: 900;
      font-size: 16px;
      transition: all 0.3s ease;
    }

    /* Visual Dynamic Stage */
    .stage-container {
      width: 100%;
      max-width: 580px;
      height: 110px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .stage-panel {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: space-around;
      opacity: 0;
      pointer-events: none;
      transform: translateY(6px);
      transition: opacity 0.3s ease, transform 0.3s ease;
      padding: 8px 12px;
    }
    .stage-panel.active {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    /* Stage 1: Meter Track */
    .meter-track {
      display: flex;
      gap: 6px;
      width: 100%;
      justify-content: center;
    }
    .meter-beat {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      background: #f1f5f9;
      padding: 6px 8px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 700;
      color: #475569;
    }
    .beat-pair {
      display: flex;
      gap: 2px;
      align-items: flex-end;
      height: 24px;
    }
    .bar-unstressed {
      width: 8px;
      height: 10px;
      background: #cbd5e1;
      border-radius: 2px;
    }
    .bar-stressed {
      width: 8px;
      height: 22px;
      background: #0284c7;
      border-radius: 2px;
    }

    /* Stage 2: Balance Scale (Antithesis) */
    .scale-box {
      flex: 1;
      max-width: 190px;
      padding: 10px;
      border-radius: 8px;
      text-align: center;
      font-size: 12px;
      font-weight: 700;
    }
    .scale-mortal {
      background: #fef3c7;
      border: 1px solid #fde68a;
      color: #92400e;
    }
    .scale-divine {
      background: #e0f2fe;
      border: 1px solid #bae6fd;
      color: #0369a1;
    }
    .scale-pivot {
      font-size: 18px;
      color: #64748b;
      font-weight: 800;
    }

    /* Stage 3: Didactic Arrow */
    .didactic-flow {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      justify-content: center;
    }
    .flow-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 700;
      text-align: center;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .flow-arrow {
      color: #0284c7;
      font-weight: 900;
      font-size: 16px;
    }

    /* Stage 4: Symmetry Meter */
    .symmetry-gauge {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    .gauge-bar {
      width: 90%;
      height: 14px;
      background: #e2e8f0;
      border-radius: 7px;
      display: flex;
      overflow: hidden;
      border: 1px solid #cbd5e1;
    }
    .gauge-half-left {
      width: 50%;
      height: 100%;
      background: #6366f1;
    }
    .gauge-half-right {
      width: 50%;
      height: 100%;
      background: #0284c7;
    }
    .gauge-labels {
      width: 90%;
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      font-weight: 700;
      color: #475569;
    }

    /* Highlights triggered by state */
    .state-0 .foot { background: #f0fdf4; border-bottom: 2px solid #22c55e; }
    .state-0 .stress-mark { color: #15803d; }
    
    .state-1 .hemi-left { background: #fef3c7; border-color: #f59e0b; }
    .state-1 .hemi-right { background: #e0f2fe; border-color: #0284c7; }
    .state-1 .caesura-marker { color: #dc2626; font-size: 20px; }

    .state-2 .verse-card { box-shadow: 0 0 0 2px #3b82f6; }
    
    .state-3 .hemi-left { border-bottom: 3px solid #6366f1; }
    .state-3 .hemi-right { border-bottom: 3px solid #0284c7; }
  </style>
</head>
<body class="state-0">

  
  <div class="nav-bar">
    <div class="pill-tabs">
      <button class="tab-btn active" onclick="setStep(0)">1. Meter</button>
      <button class="tab-btn" onclick="setStep(1)">2. Caesura</button>
      <button class="tab-btn" onclick="setStep(2)">3. Didactic</button>
      <button class="tab-btn" onclick="setStep(3)">4. Symmetry</button>
    </div>
    <button class="play-btn" id="playBtn" onclick="togglePlay()" aria-label="Play/Pause">⏸</button>
  </div>

  
  <div class="verse-card">
    <div class="verse-line">
      
      <div class="hemistich hemi-left">
        <div class="foot">
          <span class="stress-mark">˘</span>
          <span>To</span>
        </div>
        <div class="foot">
          <span class="stress-mark">/</span>
          <span class="stressed">err</span>
        </div>
        <div class="foot">
          <span class="stress-mark">˘</span>
          <span>is</span>
        </div>
        <div class="foot">
          <span class="stress-mark">/</span>
          <span class="stressed">hu-</span>
        </div>
        <div class="foot">
          <span class="stress-mark">˘</span>
          <span>man,</span>
        </div>
      </div>

      
      <div class="caesura-marker" title="Midpoint Pause (Caesura)">||</div>

      
      <div class="hemistich hemi-right">
        <div class="foot">
          <span class="stress-mark">˘</span>
          <span>to</span>
        </div>
        <div class="foot">
          <span class="stress-mark">/</span>
          <span class="stressed">for-</span>
        </div>
        <div class="foot">
          <span class="stress-mark">˘</span>
          <span>give,</span>
        </div>
        <div class="foot">
          <span class="stress-mark">˘</span>
          <span>di-</span>
        </div>
        <div class="foot">
          <span class="stress-mark">/</span>
          <span class="stressed">vine.</span>
        </div>
      </div>
    </div>
  </div>

  
  <div class="stage-container">
    
    <div class="stage-panel active" id="panel-0">
      <div class="meter-track">
        <div class="meter-beat"><div class="beat-pair"><div class="bar-unstressed"></div><div class="bar-stressed"></div></div>da-DUM</div>
        <div class="meter-beat"><div class="beat-pair"><div class="bar-unstressed"></div><div class="bar-stressed"></div></div>da-DUM</div>
        <div class="meter-beat"><div class="beat-pair"><div class="bar-unstressed"></div><div class="bar-stressed"></div></div>da-DUM</div>
        <div class="meter-beat"><div class="beat-pair"><div class="bar-unstressed"></div><div class="bar-stressed"></div></div>da-DUM</div>
        <div class="meter-beat"><div class="beat-pair"><div class="bar-unstressed"></div><div class="bar-stressed"></div></div>da-DUM</div>
      </div>
    </div>

    
    <div class="stage-panel" id="panel-1">
      <div class="scale-box scale-mortal">Mortal Imperfection<br><span style="font-weight:400;font-size:10px;">(Human Error)</span></div>
      <div class="scale-pivot">⚖️</div>
      <div class="scale-box scale-divine">Godly Grace<br><span style="font-weight:400;font-size:10px;">(Divine Mercy)</span></div>
    </div>

    
    <div class="stage-panel" id="panel-2">
      <div class="didactic-flow">
        <div class="flow-card">Flawed Critic 👤</div>
        <div class="flow-arrow">→</div>
        <div class="flow-card" style="border-color:#0284c7;color:#0284c7;">Moral Rule 📜</div>
        <div class="flow-arrow">→</div>
        <div class="flow-card">Ideal Mercy ✨</div>
      </div>
    </div>

    
    <div class="stage-panel" id="panel-3">
      <div class="symmetry-gauge">
        <div class="gauge-bar">
          <div class="gauge-half-left"></div>
          <div class="gauge-half-right"></div>
        </div>
        <div class="gauge-labels">
          <span>50% Reason</span>
          <span>Balanced Order</span>
          <span>50% Grace</span>
        </div>
      </div>
    </div>
  </div>

  <script>
    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    function setStep(index) {
      currentStep = index;
      document.body.className = `state-${index}`;
      
      document.querySelectorAll('.tab-btn').forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });

      document.querySelectorAll('.stage-panel').forEach((panel, i) => {
        panel.classList.toggle('active', i === index);
      });
    }

    function nextStep() {
      setStep((currentStep + 1) % 4);
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      document.getElementById('playBtn').textContent = isPlaying ? '⏸' : '▶';
      if (isPlaying) {
        startTimer();
      } else {
        clearInterval(timer);
      }
    }

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(() => {
        if (isPlaying) nextStep();
      }, 3600);
    }

    startTimer();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #1e293b;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .diagram-wrap {
      width: 100%;
      max-width: 620px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .headers {
      display: grid;
      grid-template-columns: 1fr 40px 1fr;
      gap: 8px;
      align-items: center;
      text-align: center;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }

    .header-left { color: #0284c7; }
    .header-center { color: #94a3b8; font-size: 11px; }
    .header-right { color: #7c3aed; }

    .bridge-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
    }

    .bridge-row {
      display: grid;
      grid-template-columns: 1fr 40px 1fr;
      gap: 8px;
      align-items: center;
      cursor: pointer;
      border-radius: 8px;
      padding: 4px;
      transition: background 0.25s ease;
    }

    .bridge-row:hover {
      background: #f1f5f9;
    }

    .node {
      padding: 10px 12px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.25;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      transition: all 0.25s ease;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .node-left {
      justify-content: flex-start;
      border-left: 3px solid #cbd5e1;
    }

    .node-right {
      justify-content: flex-start;
      border-left: 3px solid #cbd5e1;
    }

    .icon {
      font-size: 15px;
      flex-shrink: 0;
    }

    .connector {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #94a3b8;
      font-size: 16px;
      font-weight: 700;
      transition: all 0.25s ease;
    }

    /* Active Highlight States */
    .bridge-row.active .node-left {
      border-color: #0284c7;
      background: #f0f9ff;
      color: #0369a1;
      box-shadow: 0 0 0 1px #0284c7;
    }

    .bridge-row.active .node-right {
      border-color: #7c3aed;
      background: #f5f3ff;
      color: #6d28d9;
      box-shadow: 0 0 0 1px #7c3aed;
    }

    .bridge-row.active .connector {
      color: #0284c7;
      transform: translateX(2px);
    }

    .controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      margin-top: 4px;
    }

    .btn-step {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 14px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .btn-step:hover {
      background: #f8fafc;
      border-color: #94a3b8;
    }

    .dots {
      display: flex;
      gap: 6px;
      align-items: center;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.2s ease, transform 0.2s ease;
    }

    .dot.active {
      background: #0284c7;
      transform: scale(1.25);
    }

    @media (max-width: 480px) {
      .node {
        font-size: 12px;
        padding: 8px 10px;
        gap: 6px;
      }
      .headers {
        font-size: 11px;
      }
      .icon {
        font-size: 13px;
      }
    }
  </style>
</head>
<body>
  <div class="diagram-wrap">
    <div class="headers">
      <div class="header-left">Enlightenment Ideals</div>
      <div class="header-center">➔</div>
      <div class="header-right">Neoclassical Poetics</div>
    </div>

    <div class="bridge-list" id="bridgeList">
      <div class="bridge-row active" data-index="0">
        <div class="node node-left">
          <span class="icon">⚙️</span>
          <span>Reason &amp; Logic</span>
        </div>
        <div class="connector">→</div>
        <div class="node node-right">
          <span class="icon">📐</span>
          <span>Balanced Meter &amp; Form</span>
        </div>
      </div>

      <div class="bridge-row" data-index="1">
        <div class="node node-left">
          <span class="icon">🌌</span>
          <span>Universal Laws</span>
        </div>
        <div class="connector">→</div>
        <div class="node node-right">
          <span class="icon">📜</span>
          <span>Fixed Classical Rules</span>
        </div>
      </div>

      <div class="bridge-row" data-index="2">
        <div class="node node-left">
          <span class="icon">⚖️</span>
          <span>Empirical Restraint</span>
        </div>
        <div class="connector">→</div>
        <div class="node node-right">
          <span class="icon">🎭</span>
          <span>Satirical Critique</span>
        </div>
      </div>

      <div class="bridge-row" data-index="3">
        <div class="node node-left">
          <span class="icon">🧭</span>
          <span>Moral Perfectibility</span>
        </div>
        <div class="connector">→</div>
        <div class="node node-right">
          <span class="icon">📖</span>
          <span>Didactic Instruction</span>
        </div>
      </div>
    </div>

    <div class="controls">
      <button class="btn-step" id="prevBtn" aria-label="Previous">◀</button>
      <div class="dots" id="dotContainer">
        <div class="dot active" data-index="0"></div>
        <div class="dot" data-index="1"></div>
        <div class="dot" data-index="2"></div>
        <div class="dot" data-index="3"></div>
      </div>
      <button class="btn-step" id="nextBtn" aria-label="Next">▶</button>
    </div>
  </div>

  <script>
    const rows = document.querySelectorAll('.bridge-row');
    const dots = document.querySelectorAll('.dot');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    let currentIndex = 0;
    let autoTimer = null;

    function setStep(idx) {
      currentIndex = (idx + rows.length) % rows.length;
      rows.forEach((r, i) => r.classList.toggle('active', i === currentIndex));
      dots.forEach((d, i) => d.classList.toggle('active', i === currentIndex));
    }

    function startAuto() {
      stopAuto();
      autoTimer = setInterval(() => {
        setStep(currentIndex + 1);
      }, 3500);
    }

    function stopAuto() {
      if (autoTimer) clearInterval(autoTimer);
    }

    rows.forEach((row, i) => {
      row.addEventListener('click', () => {
        stopAuto();
        setStep(i);
      });
    });

    dots.forEach((dot, i) => {
      dot.addEventListener('click', () => {
        stopAuto();
        setStep(i);
      });
    });

    prevBtn.addEventListener('click', () => {
      stopAuto();
      setStep(currentIndex - 1);
    });

    nextBtn.addEventListener('click', () => {
      stopAuto();
      setStep(currentIndex + 1);
    });

    startAuto();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pope Heroic Couplet Structure</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e293b;
      padding: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100%;
    }

    /* Controls */
    .controls-row {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      width: 100%;
      max-width: 640px;
    }
    .toggle-group {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
    }
    .toggle-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #475569;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
    .toggle-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }
    .layer-pills {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 4px;
      background: #e2e8f0;
      padding: 3px;
      border-radius: 16px;
    }
    .layer-pill {
      border: none;
      background: transparent;
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease;
    }
    .layer-pill.active {
      background: #ffffff;
      color: #0f172a;
    }

    /* Main Balance Board */
    .stage {
      width: 100%;
      max-width: 640px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Syllable Strip */
    .syllable-flow {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 2px;
      width: 100%;
      padding-bottom: 2px;
    }
    .syl-unit {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1 1 0;
      min-width: 0;
    }
    .stress-mark {
      font-size: clamp(10px, 2.5vw, 13px);
      font-weight: 800;
      color: #94a3b8;
      height: 14px;
      line-height: 14px;
      margin-bottom: 2px;
    }
    .stress-mark.stressed {
      color: #2563eb;
      font-weight: 900;
    }
    .syl-box {
      width: 100%;
      height: 32px;
      background: #f1f5f9;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: clamp(10px, 2.3vw, 13px);
      font-weight: 600;
      color: #334155;
      border: 1px solid #e2e8f0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 0 1px;
    }
    .syl-box.stressed {
      background: #dbeafe;
      color: #1d4ed8;
      border-color: #93c5fd;
      font-weight: 700;
    }

    /* Caesura Divider */
    .caesura-divider {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      padding: 0 2px;
      flex: 0 0 auto;
    }
    .caesura-sym {
      font-size: clamp(13px, 3vw, 16px);
      font-weight: 900;
      color: #d97706;
      letter-spacing: -1px;
      line-height: 1;
    }
    .caesura-tag {
      font-size: 8px;
      font-weight: 800;
      text-transform: uppercase;
      color: #b45309;
      background: #fef3c7;
      border: 1px solid #fde68a;
      padding: 2px 3px;
      border-radius: 4px;
      margin-top: 2px;
      white-space: nowrap;
    }

    /* Symmetry Dual Columns */
    .symmetry-grid {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 8px;
      align-items: stretch;
      width: 100%;
    }
    .hemisphere {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
    }
    .hemisphere.left {
      border-left: 4px solid #3b82f6;
    }
    .hemisphere.right {
      border-right: 4px solid #8b5cf6;
    }

    /* Fulcrum Center */
    .fulcrum {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0 2px;
      color: #64748b;
      font-size: 15px;
    }

    /* Feature Badges inside Hemispheres */
    .meta-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 6px;
      padding: 5px 6px;
      border-radius: 6px;
      background: #f8fafc;
      font-size: 11px;
      border: 1px solid #e2e8f0;
      flex-wrap: wrap;
    }
    .meta-label {
      color: #64748b;
      font-size: 9.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      flex-shrink: 0;
    }
    .meta-val {
      font-weight: 700;
      font-size: 11.5px;
      text-align: right;
      word-break: break-word;
    }
    .val-left { color: #1d4ed8; }
    .val-right { color: #6d28d9; }

    /* Antithesis Banner */
    .antithesis-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 700;
      flex-wrap: wrap;
    }
    .anti-item {
      display: flex;
      align-items: center;
      gap: 5px;
      min-width: 0;
    }
    .anti-left { color: #1e40af; }
    .anti-vs {
      font-size: 10px;
      color: #94a3b8;
      font-weight: 800;
      text-transform: uppercase;
      margin: 0 auto;
    }
    .anti-right { color: #6d28d9; }

    /* Highlights for active layer */
    .highlight-metre .syl-box.stressed {
      outline: 2px solid #2563eb;
      background: #bfdbfe;
    }
    .highlight-caesura .caesura-divider {
      background: #fffbeb;
      border-radius: 6px;
      padding: 2px 4px;
      outline: 2px solid #f59e0b;
    }
    .highlight-grammar .hemisphere {
      background: #f8fafc;
      border-color: #94a3b8;
    }
    .highlight-grammar .meta-row {
      background: #ffffff;
      border-color: #cbd5e1;
    }
    .highlight-antithesis .antithesis-bar {
      background: #fdf4ff;
      border-color: #d8b4fe;
    }

    /* Mobile Adaptations */
    @media (max-width: 440px) {
      .symmetry-grid {
        grid-template-columns: 1fr;
        gap: 6px;
      }
      .hemisphere.right {
        border-right: 1px solid #e2e8f0;
        border-left: 4px solid #8b5cf6;
      }
      .fulcrum {
        display: none;
      }
      .antithesis-bar {
        justify-content: center;
        text-align: center;
      }
      .anti-vs {
        width: 100%;
        margin: 2px 0;
      }
    }
  </style>
</head>
<body>

  
  <div class="controls-row">
    <div class="toggle-group">
      <button id="ex1Btn" class="toggle-btn active" onclick="setExample(1)">Pope: "To err..."</button>
      <button id="ex2Btn" class="toggle-btn" onclick="setExample(2)">Pope: "Pierian spring"</button>
    </div>
    <div class="layer-pills">
      <button class="layer-pill active" onclick="setLayer('all', this)">All</button>
      <button class="layer-pill" onclick="setLayer('metre', this)">Metre</button>
      <button class="layer-pill" onclick="setLayer('caesura', this)">Caesura</button>
      <button class="layer-pill" onclick="setLayer('grammar', this)">Grammar</button>
      <button class="layer-pill" onclick="setLayer('antithesis', this)">Antithesis</button>
    </div>
  </div>

  
  <div id="stageContainer" class="stage">
    
    <div id="syllablesContainer" class="syllable-flow"></div>
    
    
    <div class="symmetry-grid">
      
      <div class="hemisphere left">
        <div class="meta-row">
          <span class="meta-label">Grammar</span>
          <span id="gramLeft" class="meta-val val-left">Infinitive</span>
        </div>
        <div class="meta-row">
          <span class="meta-label">Structure</span>
          <span id="structLeft" class="meta-val val-left">Verb + Predicate</span>
        </div>
      </div>

      
      <div class="fulcrum" title="Caesural Balance Point">⚖</div>

      
      <div class="hemisphere right">
        <div class="meta-row">
          <span class="meta-label">Grammar</span>
          <span id="gramRight" class="meta-val val-right">Infinitive</span>
        </div>
        <div class="meta-row">
          <span class="meta-label">Structure</span>
          <span id="structRight" class="meta-val val-right">Verb + Predicate</span>
        </div>
      </div>
    </div>

    
    <div class="antithesis-bar">
      <div class="anti-item anti-left">
        <span>🍂</span>
        <span id="antiLeft">Human Imperfection</span>
      </div>
      <span class="anti-vs">✦ vs ✦</span>
      <div class="anti-item anti-right">
        <span id="antiRight">Divine Perfection</span>
        <span>✨</span>
      </div>
    </div>
  </div>

  <script>
    const data = {
      1: {
        syllables: [
          { text: "To", stress: "˘" },
          { text: "err", stress: "¯", stressed: true },
          { text: "is", stress: "˘" },
          { text: "hu-", stress: "¯", stressed: true },
          { text: "man;", stress: "˘" },
          { caesura: true },
          { text: "to", stress: "˘" },
          { text: "for-", stress: "¯", stressed: true },
          { text: "give,", stress: "˘" },
          { text: "di-", stress: "˘" },
          { text: "vine.", stress: "¯", stressed: true }
        ],
        gramLeft: "Infinitive",
        structLeft: "To err + human",
        gramRight: "Infinitive [Ellipsis]",
        structRight: "[To] forgive + divine",
        antiLeft: "Human Imperfection",
        antiRight: "Divine Perfection"
      },
      2: {
        syllables: [
          { text: "Drink", stress: "¯", stressed: true },
          { text: "deep,", stress: "˘" },
          { caesura: true },
          { text: "or", stress: "˘" },
          { text: "taste", stress: "¯", stressed: true },
          { text: "not", stress: "˘" },
          { text: "the", stress: "˘" },
          { text: "Pie-", stress: "¯", stressed: true },
          { text: "ri-", stress: "˘" },
          { text: "an", stress: "˘" },
          { text: "spring.", stress: "¯", stressed: true }
        ],
        gramLeft: "Imperative",
        structLeft: "Drink deep (Full)",
        gramRight: "Negative Imperative",
        structRight: "Taste not (Restraint)",
        antiLeft: "Total Immersion",
        antiRight: "Superficial Taste"
      }
    };

    let currentExample = 1;
    let currentLayer = 'all';

    function render() {
      const d = data[currentExample];
      const container = document.getElementById('syllablesContainer');
      container.innerHTML = '';

      d.syllables.forEach(s => {
        if (s.caesura) {
          const cDiv = document.createElement('div');
          cDiv.className = 'caesura-divider';
          cDiv.innerHTML = '<span class="caesura-sym">||</span><span class="caesura-tag">Pause</span>';
          container.appendChild(cDiv);
        } else {
          const uDiv = document.createElement('div');
          uDiv.className = 'syl-unit';
          uDiv.innerHTML = `
            <span class="stress-mark ${s.stressed ? 'stressed' : ''}">${s.stress}</span>
            <div class="syl-box ${s.stressed ? 'stressed' : ''}" title="${s.text}">${s.text}</div>
          `;
          container.appendChild(uDiv);
        }
      });

      document.getElementById('gramLeft').textContent = d.gramLeft;
      document.getElementById('structLeft').textContent = d.structLeft;
      document.getElementById('gramRight').textContent = d.gramRight;
      document.getElementById('structRight').textContent = d.structRight;
      document.getElementById('antiLeft').textContent = d.antiLeft;
      document.getElementById('antiRight').textContent = d.antiRight;

      applyLayerClass();
    }

    function setExample(num) {
      currentExample = num;
      document.getElementById('ex1Btn').classList.toggle('active', num === 1);
      document.getElementById('ex2Btn').classList.toggle('active', num === 2);
      render();
    }

    function setLayer(layer, btn) {
      currentLayer = layer;
      document.querySelectorAll('.layer-pill').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      applyLayerClass();
    }

    function applyLayerClass() {
      const stage = document.getElementById('stageContainer');
      stage.className = 'stage';
      if (currentLayer !== 'all') {
        stage.classList.add(`highlight-${currentLayer}`);
      }
    }

    render();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #1e293b;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }

    .container {
      width: 100%;
      max-width: 720px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .header-bar {
      text-align: center;
    }

    .header-title {
      font-size: 15px;
      font-weight: 800;
      color: #0f172a;
      letter-spacing: -0.01em;
    }

    .header-subtitle {
      font-size: 11.5px;
      color: #64748b;
      margin-top: 2px;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: 100%;
    }

    @media (max-width: 600px) {
      .grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }

    .col {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      cursor: pointer;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
      min-height: 245px;
    }

    .col:hover, .col.active {
      border-color: #2563eb;
      box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12);
      background-color: #ffffff;
    }

    .col-title {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #0f172a;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .col-title span {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #2563eb;
    }

    .visual-area {
      flex: 1;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    /* 1. FRAMED NARRATIVE */
    .frame-outer {
      width: 100%;
      height: 180px;
      background: #f1f5f9;
      border: 1.5px solid #cbd5e1;
      border-radius: 10px;
      padding: 6px 6px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    .frame-inner {
      width: 92%;
      height: 126px;
      background: #e2e8f0;
      border: 1.5px solid #94a3b8;
      border-radius: 8px;
      margin-top: 24px;
      padding: 6px 6px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    .frame-core {
      width: 88%;
      height: 68px;
      background: #1e3a8a;
      border: 1.5px solid #172554;
      border-radius: 6px;
      margin-top: 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
    }

    .frame-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 1.15;
      text-align: center;
    }

    .frame-label {
      font-size: 10.5px;
      font-weight: 700;
      color: #334155;
    }

    .frame-sub {
      font-size: 8.5px;
      font-weight: 600;
      color: #64748b;
      letter-spacing: -0.01em;
    }

    .frame-core .frame-label {
      color: #ffffff;
      font-size: 10.5px;
    }

    .frame-core .frame-sub {
      color: #bfdbfe;
      font-size: 8.5px;
    }

    /* 2. CHIASMIC STRUCTURE */
    .chiasm-svg {
      width: 100%;
      height: 180px;
    }

    .chiasm-track-label {
      font-size: 8px;
      font-weight: 700;
      fill: #64748b;
      letter-spacing: 0.05em;
    }

    .node {
      font-size: 9.5px;
      font-weight: 700;
      fill: #1e293b;
      text-anchor: middle;
      dominant-baseline: central;
    }

    .pivot-node {
      fill: #ffffff;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.04em;
    }

    /* 3. EPISTOLARY / FRAGMENTED */
    .collage-wrap {
      width: 100%;
      height: 180px;
      position: relative;
      overflow: hidden;
      border-radius: 8px;
      background: #f8fafc;
      border: 1px solid #f1f5f9;
    }

    .collage-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .doc-card {
      position: absolute;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 5px;
      padding: 4px 6px;
      font-size: 9.5px;
      font-weight: 600;
      color: #334155;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
      display: flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
      z-index: 2;
    }

    .doc-tag {
      font-size: 7.5px;
      font-weight: 700;
      padding: 1px 3px;
      border-radius: 3px;
    }

    .doc-1 {
      top: 10px;
      left: 6px;
      transform: rotate(-3deg);
      border-left: 3px solid #0284c7;
    }
    .doc-1 .doc-tag { background: #e0f2fe; color: #0369a1; }

    .doc-2 {
      top: 48px;
      right: 6px;
      transform: rotate(3deg);
      border-left: 3px solid #475569;
    }
    .doc-2 .doc-tag { background: #f1f5f9; color: #334155; }

    .doc-3 {
      top: 86px;
      left: 10px;
      transform: rotate(-2deg);
      border-left: 3px solid #d97706;
    }
    .doc-3 .doc-tag { background: #fef3c7; color: #b45309; }

    .doc-target {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      background: #047857;
      color: #ffffff;
      font-size: 10px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      gap: 4px;
      box-shadow: 0 2px 6px rgba(4, 120, 87, 0.25);
      z-index: 2;
    }

    /* Explanation Banner */
    .info-panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 12px;
      font-size: 11.5px;
      line-height: 1.45;
      color: #334155;
    }

    .info-panel strong {
      color: #0f172a;
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="header-bar">
      <div class="header-title">Comparative Literary Structures</div>
      <div class="header-subtitle">Select a framework to examine narrative architecture & perspective</div>
    </div>

    <div class="grid">
      
      <div class="col active" onclick="selectStructure(0, this)">
        <div class="col-title"><span></span>Framed Narrative</div>
        <div class="visual-area">
          <div class="frame-outer">
            <div class="frame-header">
              <span class="frame-label">Outer Frame</span>
              <span class="frame-sub">Objective Observer</span>
            </div>
            <div class="frame-inner">
              <div class="frame-header">
                <span class="frame-label">Inner Narrative</span>
                <span class="frame-sub">Confessional Account</span>
              </div>
              <div class="frame-core">
                <span class="frame-label">Core Tale</span>
                <span class="frame-sub">Mythic Truth</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      
      <div class="col" onclick="selectStructure(1, this)">
        <div class="col-title"><span style="background:#0284c7;"></span>Chiasmic / Parallel</div>
        <div class="visual-area">
          <svg class="chiasm-svg" viewBox="0 0 200 180">
            
            <text x="12" y="16" class="chiasm-track-label">LINE A</text>
            <text x="188" y="172" class="chiasm-track-label" text-anchor="end">LINE B</text>

            
            <path d="M 30 32 Q 100 56 100 90" fill="none" stroke="#93c5fd" stroke-width="1.8" stroke-dasharray="3 3"/>
            <path d="M 170 32 Q 100 56 100 90" fill="none" stroke="#93c5fd" stroke-width="1.8" stroke-dasharray="3 3"/>
            <path d="M 100 90 Q 100 124 30 148" fill="none" stroke="#93c5fd" stroke-width="1.8" stroke-dasharray="3 3"/>
            <path d="M 100 90 Q 100 124 170 148" fill="none" stroke="#93c5fd" stroke-width="1.8" stroke-dasharray="3 3"/>

            
            <circle cx="30" cy="32" r="12" fill="#e0f2fe" stroke="#0284c7" stroke-width="1.5"/>
            <text x="30" y="32" class="node">A</text>

            <circle cx="100" cy="42" r="12" fill="#e0f2fe" stroke="#0284c7" stroke-width="1.5"/>
            <text x="100" y="42" class="node">B</text>

            <circle cx="170" cy="32" r="12" fill="#e0f2fe" stroke="#0284c7" stroke-width="1.5"/>
            <text x="170" y="32" class="node">C</text>

            
            <rect x="66" y="77" width="68" height="26" rx="6" fill="#0284c7" filter="drop-shadow(0px 2px 4px rgba(2,132,199,0.25))"/>
            <text x="100" y="90" class="node pivot-node">PIVOT</text>

            
            <circle cx="30" cy="148" r="12" fill="#e0f2fe" stroke="#0284c7" stroke-width="1.5"/>
            <text x="30" y="148" class="node">C′</text>

            <circle cx="100" cy="138" r="12" fill="#e0f2fe" stroke="#0284c7" stroke-width="1.5"/>
            <text x="100" y="138" class="node">B′</text>

            <circle cx="170" cy="148" r="12" fill="#e0f2fe" stroke="#0284c7" stroke-width="1.5"/>
            <text x="170" y="148" class="node">A′</text>
          </svg>
        </div>
      </div>

      
      <div class="col" onclick="selectStructure(2, this)">
        <div class="col-title"><span style="background:#047857;"></span>Epistolary / Collage</div>
        <div class="visual-area">
          <div class="collage-wrap" id="collageWrap">
            
            <svg class="collage-svg" id="collageSvg" viewBox="0 0 100 100" preserveAspectRatio="none">
              <path id="path1" d="M 28 14 Q 38 60 50 88" fill="none" stroke="#94a3b8" stroke-width="1.2" stroke-dasharray="2 2"/>
              <path id="path2" d="M 72 34 Q 68 62 50 88" fill="none" stroke="#94a3b8" stroke-width="1.2" stroke-dasharray="2 2"/>
              <path id="path3" d="M 32 56 Q 38 72 50 88" fill="none" stroke="#94a3b8" stroke-width="1.2" stroke-dasharray="2 2"/>
            </svg>

            <div class="doc-card doc-1" id="cardDoc1">
              <span>🗓 Diary</span>
              <span class="doc-tag">1897</span>
            </div>
            <div class="doc-card doc-2" id="cardDoc2">
              <span>📄 Report</span>
              <span class="doc-tag">Log</span>
            </div>
            <div class="doc-card doc-3" id="cardDoc3">
              <span>✉ Letter</span>
              <span class="doc-tag">Conf.</span>
            </div>

            <div class="doc-target" id="cardTruth">
              <span>✦ Elusive Truth</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="info-panel" id="infoPanel">
      <strong>Framed Narrative:</strong> Stories nested within stories create layers of distance and psychological filtration—from Walton's objective outer letters to Frankenstein's confession, down to the Creature's central core tale.
    </div>
  </div>

  <script>
    const descriptions = [
      "<strong>Framed Narrative:</strong> Stories nested within stories create layers of distance and psychological filtration—from an objective outer observer to a personal confession, down to a primal core tale (e.g., <em>Frankenstein</em>, <em>Wuthering Heights</em>).",
      "<strong>Chiasmic / Parallel Structure:</strong> Dual or mirrored narrative arcs (A-B-C ... C'-B'-A') converge around a central thematic pivot, contrasting perspectives or reversing fates across structural reflections.",
      "<strong>Epistolary / Fragmented Collage:</strong> Modular documents (diaries, letters, police reports, and telegrams) assemble an elusive multi-perspective truth through reader synthesis (e.g., <em>Dracula</em>)."
    ];

    function selectStructure(index, el) {
      document.querySelectorAll('.col').forEach(c => c.classList.remove('active'));
      el.classList.add('active');
      document.getElementById('infoPanel').innerHTML = descriptions[index];
    }

    // Precise SVG connector alignment for fragmented collage across screen sizes
    function updateConnectors() {
      const wrap = document.getElementById('collageWrap');
      const doc1 = document.getElementById('cardDoc1');
      const doc2 = document.getElementById('cardDoc2');
      const doc3 = document.getElementById('cardDoc3');
      const truth = document.getElementById('cardTruth');

      if (!wrap || !doc1 || !doc2 || !doc3 || !truth) return;

      const wRect = wrap.getBoundingClientRect();
      if (wRect.width === 0 || wRect.height === 0) return;

      const getRelCenter = (el) => {
        const r = el.getBoundingClientRect();
        return {
          x: ((r.left + r.width / 2 - wRect.left) / wRect.width) * 100,
          y: ((r.top + r.height / 2 - wRect.top) / wRect.height) * 100
        };
      };

      const p1 = getRelCenter(doc1);
      const p2 = getRelCenter(doc2);
      const p3 = getRelCenter(doc3);
      const pT = getRelCenter(truth);

      const path1 = document.getElementById('path1');
      const path2 = document.getElementById('path2');
      const path3 = document.getElementById('path3');

      if (path1) path1.setAttribute('d', `M ${p1.x.toFixed(1)} ${p1.y.toFixed(1)} Q ${(p1.x + pT.x)/2} ${(p1.y + pT.y)/2} ${pT.x.toFixed(1)} ${pT.y.toFixed(1)}`);
      if (path2) path2.setAttribute('d', `M ${p2.x.toFixed(1)} ${p2.y.toFixed(1)} Q ${(p2.x + pT.x)/2} ${(p2.y + pT.y)/2} ${pT.x.toFixed(1)} ${pT.y.toFixed(1)}`);
      if (path3) path3.setAttribute('d', `M ${p3.x.toFixed(1)} ${p3.y.toFixed(1)} Q ${(p3.x + pT.x)/2} ${(p3.y + pT.y)/2} ${pT.x.toFixed(1)} ${pT.y.toFixed(1)}`);
    }

    window.addEventListener('resize', updateConnectors);
    window.addEventListener('DOMContentLoaded', updateConnectors);
    setTimeout(updateConnectors, 100);
  </script>
</body>
</html>

Analyzing How Structural Choices Shape Overall Meaning

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #f8fafc;
      color: #1e293b;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 100%;
    }

    /* Pacing Spectrum Header Bar */
    .spectrum-container {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .spectrum-labels {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }
    .label-accel { color: #1e1b4b; }
    .label-decel { color: #0284c7; }

    .spectrum-bar {
      position: relative;
      height: 14px;
      border-radius: 999px;
      background: linear-gradient(90deg, #1e1b4b 0%, #3730a3 30%, #0284c7 70%, #06b6d4 100%);
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
    }
    .spectrum-ticks {
      position: absolute;
      inset: 0;
      display: flex;
      justify-content: space-between;
      padding: 0 12%;
      align-items: center;
      pointer-events: none;
    }
    .tick {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: rgba(255,255,255,0.7);
    }
    .spectrum-indicator {
      position: absolute;
      top: -4px;
      width: 22px;
      height: 22px;
      background: #ffffff;
      border: 3px solid #1e1b4b;
      border-radius: 50%;
      box-shadow: 0 2px 6px rgba(0,0,0,0.25);
      transform: translateX(-50%);
      transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s ease;
    }

    /* Grid of 4 Movements */
    .movements-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }

    .movement-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      user-select: none;
      transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
    }
    .movement-card:hover {
      border-color: #94a3b8;
    }
    .movement-card.active {
      border-color: var(--card-accent, #3b82f6);
      box-shadow: 0 4px 12px rgba(0,0,0,0.06);
      background-color: #f0f9ff;
    }

    .badge-speed {
      font-size: 10px;
      font-weight: 800;
      padding: 2px 6px;
      border-radius: 6px;
      color: #ffffff;
      margin-bottom: 6px;
      letter-spacing: 0.3px;
    }
    .m-title {
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 2px;
    }
    .m-tag {
      font-size: 10px;
      font-weight: 600;
      color: #64748b;
      margin-bottom: 10px;
      line-height: 1.2;
    }

    /* Ratio Visualizer inside Card */
    .ratio-box {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding-top: 6px;
      border-top: 1px solid #f1f5f9;
    }
    .time-row {
      display: flex;
      flex-direction: column;
      gap: 2px;
      text-align: left;
    }
    .time-meta {
      display: flex;
      justify-content: space-between;
      font-size: 9px;
      font-weight: 700;
      color: #475569;
    }
    .time-meta span:last-child {
      color: #0f172a;
    }
    .bar-track {
      width: 100%;
      height: 6px;
      background: #f1f5f9;
      border-radius: 999px;
      overflow: hidden;
    }
    .bar-fill {
      height: 100%;
      border-radius: 999px;
      transition: width 0.4s ease;
    }
    .bar-story { background: #f59e0b; }
    .bar-discourse { background: #06b6d4; }

    /* Interactive Focus Details Panel */
    .focus-panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      gap: 12px;
    }
    .formula-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
    }
    .formula-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 800;
      color: #fff;
    }
    .formula-st { background: #f59e0b; }
    .formula-dt { background: #06b6d4; }
    .formula-op {
      font-size: 16px;
      font-weight: 800;
      color: #64748b;
    }

    /* Mobile Adaptability */
    @media (max-width: 480px) {
      .movements-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .m-title { font-size: 12px; }
      .m-tag { font-size: 9.5px; }
      .formula-item { font-size: 11px; }
    }
  </style>
</head>
<body>

  
  <div class="spectrum-container">
    <div class="spectrum-labels">
      <span class="label-accel">⚡ Fast (Story > Text)</span>
      <span class="label-decel">🔍 Slow (Text > Story)</span>
    </div>
    <div class="spectrum-bar">
      <div class="spectrum-ticks">
        <div class="tick"></div>
        <div class="tick"></div>
        <div class="tick"></div>
        <div class="tick"></div>
      </div>
      <div class="spectrum-indicator" id="indicator" style="left: 12.5%; border-color: #1e1b4b;"></div>
    </div>
  </div>

  
  <div class="movements-grid">
    
    
    <div class="movement-card active" data-idx="0" data-pos="12.5%" data-color="#1e1b4b" style="--card-accent: #1e1b4b;">
      <span class="badge-speed" style="background: #1e1b4b;">∞ Fast</span>
      <div class="m-title">1. Ellipsis</div>
      <div class="m-tag">Silence / Skip</div>
      <div class="ratio-box">
        <div class="time-row">
          <div class="time-meta"><span>Story</span><span>20 Years</span></div>
          <div class="bar-track"><div class="bar-fill bar-story" style="width: 100%;"></div></div>
        </div>
        <div class="time-row">
          <div class="time-meta"><span>Discourse</span><span>0 Words</span></div>
          <div class="bar-track"><div class="bar-fill bar-discourse" style="width: 0%;"></div></div>
        </div>
      </div>
    </div>

    
    <div class="movement-card" data-idx="1" data-pos="37.5%" data-color="#3730a3" style="--card-accent: #3730a3;">
      <span class="badge-speed" style="background: #3730a3;">Fast</span>
      <div class="m-title">2. Summary</div>
      <div class="m-tag">Rapid Exposition</div>
      <div class="ratio-box">
        <div class="time-row">
          <div class="time-meta"><span>Story</span><span>5 Years</span></div>
          <div class="bar-track"><div class="bar-fill bar-story" style="width: 75%;"></div></div>
        </div>
        <div class="time-row">
          <div class="time-meta"><span>Discourse</span><span>1 Para</span></div>
          <div class="bar-track"><div class="bar-fill bar-discourse" style="width: 25%;"></div></div>
        </div>
      </div>
    </div>

    
    <div class="movement-card" data-idx="2" data-pos="62.5%" data-color="#0284c7" style="--card-accent: #0284c7;">
      <span class="badge-speed" style="background: #0284c7;">1 : 1</span>
      <div class="m-title">3. Scene</div>
      <div class="m-tag">Real-Time</div>
      <div class="ratio-box">
        <div class="time-row">
          <div class="time-meta"><span>Story</span><span>5 Mins</span></div>
          <div class="bar-track"><div class="bar-fill bar-story" style="width: 50%;"></div></div>
        </div>
        <div class="time-row">
          <div class="time-meta"><span>Discourse</span><span>5 Mins</span></div>
          <div class="bar-track"><div class="bar-fill bar-discourse" style="width: 50%;"></div></div>
        </div>
      </div>
    </div>

    
    <div class="movement-card" data-idx="3" data-pos="87.5%" data-color="#06b6d4" style="--card-accent: #06b6d4;">
      <span class="badge-speed" style="background: #06b6d4;">Stop</span>
      <div class="m-title">4. Pause</div>
      <div class="m-tag">Dilation / Interiority</div>
      <div class="ratio-box">
        <div class="time-row">
          <div class="time-meta"><span>Story</span><span>0 Secs</span></div>
          <div class="bar-track"><div class="bar-fill bar-story" style="width: 0%;"></div></div>
        </div>
        <div class="time-row">
          <div class="time-meta"><span>Discourse</span><span>3 Pages</span></div>
          <div class="bar-track"><div class="bar-fill bar-discourse" style="width: 100%;"></div></div>
        </div>
      </div>
    </div>

  </div>

  
  <div class="focus-panel">
    <div class="formula-item">
      <span class="formula-badge formula-st">ST</span>
      <span id="st-val">Story: 20 Yrs</span>
    </div>
    <div class="formula-op" id="formula-op">≫</div>
    <div class="formula-item">
      <span class="formula-badge formula-dt">DT</span>
      <span id="dt-val">Discourse: 0 Words</span>
    </div>
  </div>

  <script>
    const cards = document.querySelectorAll('.movement-card');
    const indicator = document.getElementById('indicator');
    const stVal = document.getElementById('st-val');
    const dtVal = document.getElementById('dt-val');
    const formulaOp = document.getElementById('formula-op');

    const movementData = [
      { st: "Story: 20 Years", dt: "Discourse: 0 Words", op: "≫" },
      { st: "Story: 5 Years", dt: "Discourse: 1 Paragraph", op: ">" },
      { st: "Story: 5 Minutes", dt: "Discourse: 5 Minutes", op: "≈" },
      { st: "Story: 0 Seconds", dt: "Discourse: 3 Pages", op: "≪" }
    ];

    function activateCard(idx) {
      cards.forEach((card, i) => {
        if (i === idx) {
          card.classList.add('active');
          indicator.style.left = card.dataset.pos;
          indicator.style.borderColor = card.dataset.color;
          stVal.textContent = movementData[i].st;
          dtVal.textContent = movementData[i].dt;
          formulaOp.textContent = movementData[i].op;
        } else {
          card.classList.remove('active');
        }
      });
    }

    cards.forEach((card, idx) => {
      card.addEventListener('click', () => activateCard(idx));
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Structural Choices &amp; Meaning</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      user-select: none;
    }

    /* TOP: STRUCTURAL ARCHITECTURE VISUAL */
    .arch-container {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 12px 14px 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .arch-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #64748b;
    }

    .lens-indicator {
      display: inline-flex;
      align-items: center;
      font-size: 11px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 12px;
      transition: background 0.3s ease, color 0.3s ease;
    }

    .lens-indicator.linear {
      background: #fee2e2;
      color: #991b1b;
    }

    .lens-indicator.frame {
      background: #dcfce7;
      color: #166534;
    }

    /* Track Layout */
    .diagram-layout {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .nodes-row {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr;
      align-items: center;
      gap: 6px;
      width: 100%;
    }

    .step-node {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 4px;
      text-align: center;
      transition: all 0.3s ease;
      position: relative;
      z-index: 2;
    }

    .step-num {
      font-size: 9.5px;
      font-weight: 700;
      color: #64748b;
      margin-bottom: 2px;
      letter-spacing: 0.03em;
    }

    .step-title {
      font-size: 11.5px;
      font-weight: 700;
      line-height: 1.2;
      color: #1e2945;
    }

    .flow-arrow {
      font-size: 14px;
      color: #94a3b8;
      font-weight: 700;
      transition: color 0.3s ease;
      text-align: center;
      line-height: 1;
    }

    /* DESKTOP LOOP (Dedicated container below nodes, preventing overlap) */
    .desktop-loop-wrapper {
      width: 100%;
      height: 32px;
      margin-top: 4px;
      position: relative;
    }

    .desktop-loop-svg {
      width: 100%;
      height: 100%;
      display: block;
      overflow: visible;
    }

    /* MOBILE LOOP (Hidden by default) */
    .mobile-loop-wrapper {
      display: none;
    }

    /* Bracket & Labels SVG styling */
    .frame-bracket {
      fill: none;
      stroke: #16a34a;
      stroke-width: 2.2;
      stroke-dasharray: 5 3.5;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .frame-arrow {
      fill: #16a34a;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .frame-label {
      fill: #166534;
      font-size: 9.5px;
      font-weight: 800;
      letter-spacing: 0.06em;
      opacity: 0;
      transition: opacity 0.3s ease;
      paint-order: stroke fill;
      stroke: #f8fafc;
      stroke-width: 5px;
      stroke-linejoin: round;
      stroke-linecap: round;
    }

    /* Mode States on Top Architecture */
    body[data-mode="plot"] .step-node {
      border-color: #cbd5e1;
      opacity: 0.85;
    }

    body[data-mode="plot"] .flow-arrow {
      color: #dc2626;
    }

    body[data-mode="analysis"] .step-node.node-frame {
      border-color: #16a34a;
      background: #f0fdf4;
      box-shadow: 0 0 0 1px #16a34a;
    }

    body[data-mode="analysis"] .step-node.node-center {
      border-color: #d97706;
      background: #fffbeb;
    }

    body[data-mode="analysis"] .frame-bracket,
    body[data-mode="analysis"] .frame-arrow,
    body[data-mode="analysis"] .frame-label {
      opacity: 1;
    }

    /* BOTTOM: COMPARISON CALLOUT BOXES */
    .cards-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .callout-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      padding: 9px 11px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      gap: 5px;
      transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
      position: relative;
    }

    .callout-card:hover {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 4px;
    }

    .card-badge {
      display: inline-flex;
      align-items: center;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 4px;
    }

    .card-plot .card-badge {
      background: #fee2e2;
      color: #991b1b;
    }

    .card-analysis .card-badge {
      background: #dcfce7;
      color: #166534;
    }

    .status-icon {
      font-size: 13px;
      font-weight: 900;
      line-height: 1;
    }

    .card-plot .status-icon {
      color: #dc2626;
    }

    .card-analysis .status-icon {
      color: #16a34a;
    }

    .card-title {
      font-size: 11.5px;
      font-weight: 700;
      color: #1e2945;
    }

    .card-quote {
      font-size: 12px;
      line-height: 1.35;
      color: #334155;
      flex-grow: 1;
    }

    /* Active Selected States */
    .card-plot.active {
      border-color: #ef4444;
      background: #fef2f2;
    }

    .card-analysis.active {
      border-color: #16a34a;
      background: #f0fdf4;
    }

    .prompt-hint {
      font-size: 9.5px;
      font-weight: 600;
      color: #64748b;
      margin-top: 1px;
    }

    /* ADAPTIVE MOBILE LAYOUT */
    @media (max-width: 480px) {
      .diagram-layout {
        display: grid;
        grid-template-columns: 1fr 48px;
        gap: 6px;
        align-items: stretch;
      }

      .nodes-row {
        grid-template-columns: 1fr;
        gap: 4px;
      }

      .flow-arrow {
        transform: rotate(90deg);
        margin: -2px 0;
      }

      .desktop-loop-wrapper {
        display: none;
      }

      .mobile-loop-wrapper {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
      }

      .mobile-loop-svg {
        width: 100%;
        height: 100%;
        display: block;
      }

      .cards-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }
    }
  </style>
</head>
<body data-mode="analysis">

  
  <div class="arch-container">
    <div class="arch-header">
      <span>Structural Architecture</span>
      <span class="lens-indicator frame" id="lensTag">Structural Framing Active</span>
    </div>

    <div class="diagram-layout">
      
      <div class="nodes-row">
        <div class="step-node node-frame">
          <div class="step-num">PART I</div>
          <div class="step-title">Present Decay</div>
        </div>

        <div class="flow-arrow">→</div>

        <div class="step-node node-center">
          <div class="step-num">PART II</div>
          <div class="step-title">Historical Betrayal</div>
        </div>

        <div class="flow-arrow">→</div>

        <div class="step-node node-frame">
          <div class="step-num">PART III</div>
          <div class="step-title">Circular Return</div>
        </div>
      </div>

      
      <div class="desktop-loop-wrapper">
        <svg class="desktop-loop-svg" viewBox="0 0 400 32" preserveAspectRatio="none">
          <path class="frame-bracket" d="M 333,2 C 333,25 67,25 67,4" />
          <polygon points="62,7 67,0 72,7" class="frame-arrow" />
          <text x="200" y="24" text-anchor="middle" class="frame-label">CIRCULAR ENCLOSURE</text>
        </svg>
      </div>

      
      <div class="mobile-loop-wrapper">
        <svg class="mobile-loop-svg" viewBox="0 0 48 160" preserveAspectRatio="none">
          <path class="frame-bracket" d="M 6,138 C 42,138 42,22 6,22" />
          <polygon points="9,17 2,22 9,27" class="frame-arrow" />
          <text x="32" y="80" text-anchor="middle" class="frame-label" transform="rotate(90, 32, 80)">CIRCULAR ENCLOSURE</text>
        </svg>
      </div>
    </div>
  </div>

  
  <div class="cards-grid">
    
    <div class="callout-card card-plot" id="plotCard" onclick="setMode('plot')">
      <div class="card-header">
        <span class="card-badge">Plot Summary</span>
        <span class="status-icon">✕</span>
      </div>
      <div class="card-title">Superficial Chronology</div>
      <p class="card-quote">
        “The story shows a ruined house, explains how the brothers fought over money, and then ends where it started.”
      </p>
      <div class="prompt-hint">Tap to view plot lens</div>
    </div>

    
    <div class="callout-card card-analysis active" id="analysisCard" onclick="setMode('analysis')">
      <div class="card-header">
        <span class="card-badge">Structural Analysis</span>
        <span class="status-icon">✓</span>
      </div>
      <div class="card-title">Architectural Meaning</div>
      <p class="card-quote">
        “By encasing the historical betrayal within a closed circular frame, the author converts personal guilt into a permanent structural prison, denying cathartic resolution.”
      </p>
      <div class="prompt-hint">Tap to view meaning lens</div>
    </div>
  </div>

  <script>
    function setMode(mode) {
      document.body.setAttribute('data-mode', mode);

      const plotCard = document.getElementById('plotCard');
      const analysisCard = document.getElementById('analysisCard');
      const lensTag = document.getElementById('lensTag');

      if (mode === 'plot') {
        plotCard.classList.add('active');
        analysisCard.classList.remove('active');
        lensTag.textContent = 'Chronological Plot Lens';
        lensTag.className = 'lens-indicator linear';
      } else {
        analysisCard.classList.add('active');
        plotCard.classList.remove('active');
        lensTag.textContent = 'Structural Framing Active';
        lensTag.className = 'lens-indicator frame';
      }
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #1e293b;
      padding: 16px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
    }

    .diagram-stage {
      width: 100%;
      max-width: 640px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      position: relative;
    }

    /* Track Headers */
    .track-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 0 4px;
    }
    .track-title {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    .fabula-title { color: #64748b; }
    .syuzhet-title { color: #2563eb; }
    .track-desc {
      font-size: 12px;
      color: #94a3b8;
      font-weight: 500;
    }

    /* Track Grids */
    .track-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 6px;
      position: relative;
      z-index: 2;
    }

    /* Cards */
    .card-node {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 4px;
      text-align: center;
      cursor: pointer;
      transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      min-height: 58px;
      justify-content: center;
    }

    .node-code {
      font-size: 11px;
      font-weight: 800;
      line-height: 1;
    }
    .node-label {
      font-size: 12px;
      font-weight: 600;
      line-height: 1.1;
      white-space: nowrap;
    }
    .node-year {
      font-size: 10px;
      color: #94a3b8;
      font-weight: 500;
    }

    /* Fabula Nodes */
    .fabula-node {
      border-color: #cbd5e1;
    }
    .fabula-node .node-code { color: #64748b; }
    .fabula-node .node-label { color: #334155; }
    .fabula-node.active {
      border-color: #64748b;
      box-shadow: 0 0 0 2px #94a3b8;
      background: #f1f5f9;
    }

    /* Syuzhet Nodes */
    .syuzhet-node {
      border-color: #bfdbfe;
    }
    .syuzhet-node .node-code { color: #2563eb; }
    .syuzhet-node .node-label { color: #1e3a8a; }
    .syuzhet-node.active {
      border-color: #2563eb;
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.4);
      background: #eff6ff;
    }

    /* SVG Canvas for Connectors */
    .connector-container {
      position: relative;
      width: 100%;
      height: 90px;
      margin: -4px 0;
      z-index: 1;
    }
    svg.connections {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .wire-bg {
      fill: none;
      stroke: #e2e8f0;
      stroke-width: 2;
      stroke-dasharray: 4 4;
      transition: stroke 0.3s, stroke-width 0.3s, opacity 0.3s;
    }
    .wire-active {
      fill: none;
      stroke: #2563eb;
      stroke-width: 3.5;
      stroke-linecap: round;
      filter: drop-shadow(0 2px 4px rgba(37, 99, 235, 0.35));
      transition: opacity 0.3s ease;
    }

    /* Controls & Navigation */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 14px;
    }
    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    .btn:active { background: #f1f5f9; }
    .btn-play {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }
    .btn-play:active { background: #1d4ed8; }

    .step-dots {
      display: flex;
      gap: 6px;
      align-items: center;
    }
    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background-color 0.2s, transform 0.2s;
    }
    .dot.active {
      background: #2563eb;
      transform: scale(1.25);
    }

    @media (max-width: 480px) {
      .card-node { padding: 6px 2px; min-height: 52px; }
      .node-code { font-size: 10px; }
      .node-label { font-size: 10.5px; }
      .node-year { font-size: 9px; }
      .connector-container { height: 75px; }
    }
  </style>
</head>
<body>

  <div class="diagram-stage">
    
    
    <div>
      <div class="track-header">
        <span class="track-title fabula-title">Fabula</span>
        <span class="track-desc">Chronological Timeline (Story)</span>
      </div>
      <div class="track-grid" id="fabulaGrid">
        <div class="card-node fabula-node" data-id="A" id="fab-A">
          <span class="node-code">A</span>
          <span class="node-label">Origin</span>
          <span class="node-year">1980</span>
        </div>
        <div class="card-node fabula-node" data-id="B" id="fab-B">
          <span class="node-code">B</span>
          <span class="node-label">Conflict</span>
          <span class="node-year">1995</span>
        </div>
        <div class="card-node fabula-node" data-id="C" id="fab-C">
          <span class="node-code">C</span>
          <span class="node-label">Crisis</span>
          <span class="node-year">2010</span>
        </div>
        <div class="card-node fabula-node" data-id="D" id="fab-D">
          <span class="node-code">D</span>
          <span class="node-label">Climax</span>
          <span class="node-year">2015</span>
        </div>
        <div class="card-node fabula-node" data-id="E" id="fab-E">
          <span class="node-code">E</span>
          <span class="node-label">Ending</span>
          <span class="node-year">2020</span>
        </div>
      </div>
    </div>

    
    <div class="connector-container" id="svgWrap">
      <svg class="connections" id="svgCanvas"></svg>
    </div>

    
    <div>
      <div class="track-header">
        <span class="track-title syuzhet-title">Syuzhet</span>
        <span class="track-desc">Architectural Plot (Told Order)</span>
      </div>
      <div class="track-grid" id="syuzhetGrid">
        <div class="card-node syuzhet-node" data-fab="C" data-step="0" id="syu-0">
          <span class="node-code">1 • In Media Res</span>
          <span class="node-label">Crisis [C]</span>
          <span class="node-year">2010</span>
        </div>
        <div class="card-node syuzhet-node" data-fab="A" data-step="1" id="syu-1">
          <span class="node-code">2 • Flashback</span>
          <span class="node-label">Origin [A]</span>
          <span class="node-year">1980</span>
        </div>
        <div class="card-node syuzhet-node" data-fab="D" data-step="2" id="syu-2">
          <span class="node-code">3 • Ellipsis</span>
          <span class="node-label">Climax [D]</span>
          <span class="node-year">2015</span>
        </div>
        <div class="card-node syuzhet-node" data-fab="B" data-step="3" id="syu-3">
          <span class="node-code">4 • Memory</span>
          <span class="node-label">Conflict [B]</span>
          <span class="node-year">1995</span>
        </div>
        <div class="card-node syuzhet-node" data-fab="E" data-step="4" id="syu-4">
          <span class="node-code">5 • Open Ending</span>
          <span class="node-label">Ending [E]</span>
          <span class="node-year">2020</span>
        </div>
      </div>
    </div>

  </div>

  
  <div class="controls">
    <button class="btn" id="prevBtn" aria-label="Previous beat">←</button>
    <button class="btn btn-play" id="playBtn"><span>⏸</span></button>
    <button class="btn" id="nextBtn" aria-label="Next beat">→</button>
    <div class="step-dots" id="dotsGroup">
      <div class="dot active" data-step="0"></div>
      <div class="dot" data-step="1"></div>
      <div class="dot" data-step="2"></div>
      <div class="dot" data-step="3"></div>
      <div class="dot" data-step="4"></div>
    </div>
  </div>

  <script>
    // Narrative pairs: Syuzhet step index -> Fabula ID
    const mapping = [
      { syuIdx: 0, fabId: 'C' },
      { syuIdx: 1, fabId: 'A' },
      { syuIdx: 2, fabId: 'D' },
      { syuIdx: 3, fabId: 'B' },
      { syuIdx: 4, fabId: 'E' }
    ];

    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    const svgCanvas = document.getElementById('svgCanvas');
    const svgWrap = document.getElementById('svgWrap');

    function drawLines() {
      svgCanvas.innerHTML = '';
      const wrapRect = svgWrap.getBoundingClientRect();
      if (!wrapRect.width || !wrapRect.height) return;

      mapping.forEach((pair, idx) => {
        const fabEl = document.getElementById('fab-' + pair.fabId);
        const syuEl = document.getElementById('syu-' + pair.syuIdx);

        if (!fabEl || !syuEl) return;

        const fRect = fabEl.getBoundingClientRect();
        const sRect = syuEl.getBoundingClientRect();

        const x1 = fRect.left + fRect.width / 2 - wrapRect.left;
        const y1 = 0;
        const x2 = sRect.left + sRect.width / 2 - wrapRect.left;
        const y2 = wrapRect.height;

        const cy1 = wrapRect.height * 0.45;
        const cy2 = wrapRect.height * 0.55;

        const pathData = `M ${x1} ${y1} C ${x1} ${cy1}, ${x2} ${cy2}, ${x2} ${y2}`;

        // Base/Background dashed wire
        const baseWire = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        baseWire.setAttribute('d', pathData);
        baseWire.setAttribute('class', 'wire-bg');
        baseWire.id = `wire-bg-${idx}`;
        svgCanvas.appendChild(baseWire);

        // Active highlighted wire
        const activeWire = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        activeWire.setAttribute('d', pathData);
        activeWire.setAttribute('class', 'wire-active');
        activeWire.id = `wire-active-${idx}`;
        activeWire.style.opacity = (idx === currentStep) ? '1' : '0';
        svgCanvas.appendChild(activeWire);
      });
    }

    function setStep(idx) {
      currentStep = (idx + mapping.length) % mapping.length;
      
      // Update Fabula highlights
      document.querySelectorAll('.fabula-node').forEach(el => el.classList.remove('active'));
      const activeFabId = mapping[currentStep].fabId;
      const targetFab = document.getElementById('fab-' + activeFabId);
      if (targetFab) targetFab.classList.add('active');

      // Update Syuzhet highlights
      document.querySelectorAll('.syuzhet-node').forEach(el => el.classList.remove('active'));
      const targetSyu = document.getElementById('syu-' + currentStep);
      if (targetSyu) targetSyu.classList.add('active');

      // Update Wires
      mapping.forEach((_, i) => {
        const wireAct = document.getElementById(`wire-active-${i}`);
        const wireBg = document.getElementById(`wire-bg-${i}`);
        if (wireAct) wireAct.style.opacity = (i === currentStep) ? '1' : '0';
        if (wireBg) {
          wireBg.style.stroke = (i === currentStep) ? '#93c5fd' : '#e2e8f0';
          wireBg.style.strokeWidth = (i === currentStep) ? '2.5' : '1.5';
        }
      });

      // Update Dots
      document.querySelectorAll('.dot').forEach((dot, i) => {
        dot.classList.toggle('active', i === currentStep);
      });
    }

    function startAutoPlay() {
      if (timer) clearInterval(timer);
      timer = setInterval(() => {
        setStep(currentStep + 1);
      }, 3000);
    }

    function stopAutoPlay() {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      const btn = document.getElementById('playBtn');
      if (isPlaying) {
        btn.innerHTML = '<span>⏸</span>';
        startAutoPlay();
      } else {
        btn.innerHTML = '<span>▶</span>';
        stopAutoPlay();
      }
    }

    // Event Listeners
    document.getElementById('playBtn').addEventListener('click', togglePlay);
    document.getElementById('prevBtn').addEventListener('click', () => {
      setStep(currentStep - 1);
      if (isPlaying) startAutoPlay();
    });
    document.getElementById('nextBtn').addEventListener('click', () => {
      setStep(currentStep + 1);
      if (isPlaying) startAutoPlay();
    });

    document.querySelectorAll('.syuzhet-node').forEach(el => {
      el.addEventListener('click', () => {
        const step = parseInt(el.getAttribute('data-step'), 10);
        setStep(step);
        if (isPlaying) startAutoPlay();
      });
    });

    document.querySelectorAll('.fabula-node').forEach(el => {
      el.addEventListener('click', () => {
        const id = el.getAttribute('data-id');
        const matchIdx = mapping.findIndex(m => m.fabId === id);
        if (matchIdx !== -1) {
          setStep(matchIdx);
          if (isPlaying) startAutoPlay();
        }
      });
    });

    document.querySelectorAll('.dot').forEach(dot => {
      dot.addEventListener('click', () => {
        const step = parseInt(dot.getAttribute('data-step'), 10);
        setStep(step);
        if (isPlaying) startAutoPlay();
      });
    });

    // Resize observer to update SVG curves smoothly
    const ro = new ResizeObserver(() => {
      drawLines();
      setStep(currentStep);
    });
    ro.observe(document.body);

    // Initial setup
    window.addEventListener('load', () => {
      drawLines();
      setStep(0);
      startAutoPlay();
    });
  </script>
</body>
</html>

OGE.12.RL.2

Aligned learning resources

Related diagrams