


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>COLOR_COMBO_TEST_HTML</title>
  <style>
    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      background: #050505;
      color: #e8dcc4;
      padding: 20px;
    }

    .page {
      max-width: 1300px;
      margin: 0 auto;
    }

    .hero {
      border: 2px solid #d6a600;
      border-radius: 24px;
      padding: 22px;
      margin-bottom: 18px;
      background: radial-gradient(circle at top left, rgba(255,196,0,.18), transparent 34%), #080808;
      box-shadow: 0 0 30px rgba(255,196,0,.14);
    }

    h1 {
      margin: 0;
      font-family: Impact, Haettenschweiler, "Arial Black", Arial, sans-serif;
      font-size: clamp(36px, 6vw, 78px);
      line-height: .9;
      letter-spacing: -.03em;
      color: #ffc400;
      text-transform: uppercase;
      text-shadow: 4px 4px 0 #000;
    }

    .hero p {
      max-width: 900px;
      font-weight: 800;
      font-size: 18px;
      color: #d8cdb6;
      line-height: 1.45;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }

    .card {
      border-radius: 22px;
      padding: 16px;
      min-height: 250px;
      border: 2px solid var(--accent);
      background:
        radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--accent) 23%, transparent), transparent 34%),
        var(--bg);
      color: var(--text);
      box-shadow: 0 10px 0 #000, 0 0 22px color-mix(in srgb, var(--accent) 18%, transparent);
    }

    .card h2 {
      margin: 0 0 8px;
      font-family: Impact, Haettenschweiler, "Arial Black", Arial, sans-serif;
      font-size: 28px;
      line-height: .95;
      letter-spacing: -.02em;
      color: var(--accent);
      text-transform: uppercase;
      text-shadow: 2px 2px 0 #000;
    }

    .sample {
      font-size: 15px;
      line-height: 1.45;
      font-weight: 750;
      color: var(--text);
      margin: 10px 0;
    }

    .muted {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
      font-weight: 700;
    }

    .button-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 12px;
    }

    .btn {
      display: inline-block;
      border-radius: 999px;
      padding: 8px 11px;
      background: var(--accent);
      color: var(--buttonText);
      font-weight: 950;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .outline {
      background: transparent;
      color: var(--accent);
      border: 1px solid var(--accent);
    }

    .swatches {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      margin-top: 12px;
    }

    .swatch {
      height: 28px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,.18);
    }

    .label {
      font-family: Consolas, monospace;
      font-size: 11px;
      opacity: .9;
      margin-top: 7px;
      color: var(--muted);
    }

    @media (max-width: 1100px) {
      .grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 620px) {
      body { padding: 12px; }
      .grid { grid-template-columns: 1fr; }
    }
  </style>


  <main class="page">
    <section class="hero">
      <h1>Color Combo Test</h1>
      <p>20 dark polished palettes for Collaborhythm: midnight bedroom, Batman/Joker/Bruins energy, but less white-eye-burn. Each card tests background, readable text, muted text, accent, and button contrast.</p>
    </section>

    <section class="grid">
      <article class="card" style="--bg:#050505;--text:#e7d7b8;--muted:#aa9876;--accent:#ffc400;--buttonText:#090909;">
        <h2>01 Bruins Cave</h2>
        <p class="sample">Warm bone text on black with hard gold. Best for main Batman/Bruins navigation.</p>
        <p class="muted">Less white burn. Still punchy. Strong homepage candidate.</p>
        <div class="button-row"><span class="btn">Enter</span><span class="btn outline">Ride Again</span></div>
        <div class="swatches"><div class="swatch" style="background:#050505"></div><div class="swatch" style="background:#e7d7b8"></div><div class="swatch" style="background:#aa9876"></div><div class="swatch" style="background:#ffc400"></div></div>
        <div class="label">BG #050505 · TEXT #e7d7b8 · ACCENT #ffc400</div>
      </article>

      <article class="card" style="--bg:#070911;--text:#d8d0bd;--muted:#8f96a8;--accent:#ffd21f;--buttonText:#080808;">
        <h2>02 Gotham Navy</h2>
        <p class="sample">Deep blue-black background with gold. More iPhone-dark, less basement-black.</p>
        <p class="muted">Excellent for long navigation and entry-point pages.</p>
        <div class="button-row"><span class="btn">Enter</span><span class="btn outline">Ride Again</span></div>
        <div class="swatches"><div class="swatch" style="background:#070911"></div><div class="swatch" style="background:#d8d0bd"></div><div class="swatch" style="background:#8f96a8"></div><div class="swatch" style="background:#ffd21f"></div></div>
        <div class="label">BG #070911 · TEXT #d8d0bd · ACCENT #ffd21f</div>
      </article>

      <article class="card" style="--bg:#0b0a08;--text:#dbc8a4;--muted:#9b8b6e;--accent:#f2b705;--buttonText:#070707;">
        <h2>03 Whiskey Bat</h2>
        <p class="sample">Almost black, slightly brown, softer gold. Easier on eyes than pure white.</p>
        <p class="muted">Good for archive tools and semi-long browsing.</p>
        <div class="button-row"><span class="btn">Enter</span><span class="btn outline">Ride Again</span></div>
        <div class="swatches"><div class="swatch" style="background:#0b0a08"></div><div class="swatch" style="background:#dbc8a4"></div><div class="swatch" style="background:#9b8b6e"></div><div class="swatch" style="background:#f2b705"></div></div>
        <div class="label">BG #0b0a08 · TEXT #dbc8a4 · ACCENT #f2b705</div>
      </article>

      <article class="card" style="--bg:#080707;--text:#d9cfc0;--muted:#9f8f8a;--accent:#ff3131;--buttonText:#0b0b0b;">
        <h2>04 Joker Bloodline</h2>
        <p class="sample">Black and warm gray text with red danger accent. Use for explicit warnings.</p>
        <p class="muted">Great for Johnny Trouble Map and bouncer alerts.</p>
        <div class="button-row"><span class="btn">Warning</span><span class="btn outline">Proceed</span></div>
        <div class="swatches"><div class="swatch" style="background:#080707"></div><div class="swatch" style="background:#d9cfc0"></div><div class="swatch" style="background:#9f8f8a"></div><div class="swatch" style="background:#ff3131"></div></div>
        <div class="label">BG #080707 · TEXT #d9cfc0 · ACCENT #ff3131</div>
      </article>

      <article class="card" style="--bg:#07100a;--text:#d8d0b8;--muted:#8fa48e;--accent:#80ff72;--buttonText:#031005;">
        <h2>05 Joker Green</h2>
        <p class="sample">Dark green-black with neon green. Villain lab, but still readable.</p>
        <p class="muted">Good for weird paths, AI tools, experimental rooms.</p>
        <div class="button-row"><span class="btn">Enter</span><span class="btn outline">Experiment</span></div>
        <div class="swatches"><div class="swatch" style="background:#07100a"></div><div class="swatch" style="background:#d8d0b8"></div><div class="swatch" style="background:#8fa48e"></div><div class="swatch" style="background:#80ff72"></div></div>
        <div class="label">BG #07100a · TEXT #d8d0b8 · ACCENT #80ff72</div>
      </article>

      <article class="card" style="--bg:#090713;--text:#d8cbe9;--muted:#9889a8;--accent:#b56cff;--buttonText:#080510;">
        <h2>06 Purple Joker</h2>
        <p class="sample">Midnight purple with soft lavender text and bright villain accent.</p>
        <p class="muted">Good for Lady Weaver lore, mystery, weird romance paths.</p>
        <div class="button-row"><span class="btn">Enter</span><span class="btn outline">Mystery</span></div>
        <div class="swatches"><div class="swatch" style="background:#090713"></div><div class="swatch" style="background:#d8cbe9"></div><div class="swatch" style="background:#9889a8"></div><div class="swatch" style="background:#b56cff"></div></div>
        <div class="label">BG #090713 · TEXT #d8cbe9 · ACCENT #b56cff</div>
      </article>

      <article class="card" style="--bg:#081013;--text:#cadbdc;--muted:#7f9ca0;--accent:#28d7ff;--buttonText:#021014;">
        <h2>07 Ice Bat Tech</h2>
        <p class="sample">Blue-black tech feel with soft cyan. Modern phone-dashboard energy.</p>
        <p class="muted">Good for generator tools, search, filter systems.</p>
        <div class="button-row"><span class="btn">Search</span><span class="btn outline">Filter</span></div>
        <div class="swatches"><div class="swatch" style="background:#081013"></div><div class="swatch" style="background:#cadbdc"></div><div class="swatch" style="background:#7f9ca0"></div><div class="swatch" style="background:#28d7ff"></div></div>
        <div class="label">BG #081013 · TEXT #cadbdc · ACCENT #28d7ff</div>
      </article>

      <article class="card" style="--bg:#0e0b05;--text:#e1cfa7;--muted:#a08453;--accent:#ff9f1c;--buttonText:#0a0500;">
        <h2>08 Amber Alley</h2>
        <p class="sample">Dark amber streetlight mood. Strong but warmer than yellow-on-black.</p>
        <p class="muted">Good for story, How I Got Here, personal routes.</p>
        <div class="button-row"><span class="btn">Story</span><span class="btn outline">Continue</span></div>
        <div class="swatches"><div class="swatch" style="background:#0e0b05"></div><div class="swatch" style="background:#e1cfa7"></div><div class="swatch" style="background:#a08453"></div><div class="swatch" style="background:#ff9f1c"></div></div>
        <div class="label">BG #0e0b05 · TEXT #e1cfa7 · ACCENT #ff9f1c</div>
      </article>

      <article class="card" style="--bg:#0c0f0c;--text:#d6d2bf;--muted:#8d9688;--accent:#c3ff4d;--buttonText:#071003;">
        <h2>09 Toxic Archive</h2>
        <p class="sample">Muted charcoal-green with acid yellow-green. Cool but not too bright.</p>
        <p class="muted">Good for categories, maps, oddball archive trails.</p>
        <div class="button-row"><span class="btn">Map</span><span class="btn outline">Index</span></div>
        <div class="swatches"><div class="swatch" style="background:#0c0f0c"></div><div class="swatch" style="background:#d6d2bf"></div><div class="swatch" style="background:#8d9688"></div><div class="swatch" style="background:#c3ff4d"></div></div>
        <div class="label">BG #0c0f0c · TEXT #d6d2bf · ACCENT #c3ff4d</div>
      </article>

      <article class="card" style="--bg:#12100b;--text:#d8c9aa;--muted:#958a76;--accent:#d4af37;--buttonText:#070707;">
        <h2>10 Old Gold Room</h2>
        <p class="sample">Classy dark gold and parchment. Less comic, more premium archive.</p>
        <p class="muted">Good for books, indexes, New American Songbook.</p>
        <div class="button-row"><span class="btn">Read</span><span class="btn outline">Archive</span></div>
        <div class="swatches"><div class="swatch" style="background:#12100b"></div><div class="swatch" style="background:#d8c9aa"></div><div class="swatch" style="background:#958a76"></div><div class="swatch" style="background:#d4af37"></div></div>
        <div class="label">BG #12100b · TEXT #d8c9aa · ACCENT #d4af37</div>
      </article>

      <article class="card" style="--bg:#0a0a0d;--text:#d1c9bd;--muted:#8b8992;--accent:#f7d774;--buttonText:#060606;">
        <h2>11 Soft Bat Signal</h2>
        <p class="sample">Nearly black, soft cream-gray, softer yellow. Very usable all-purpose.</p>
        <p class="muted">Probably one of the best anti-eye-burn options.</p>
        <div class="button-row"><span class="btn">Enter</span><span class="btn outline">Switch</span></div>
        <div class="swatches"><div class="swatch" style="background:#0a0a0d"></div><div class="swatch" style="background:#d1c9bd"></div><div class="swatch" style="background:#8b8992"></div><div class="swatch" style="background:#f7d774"></div></div>
        <div class="label">BG #0a0a0d · TEXT #d1c9bd · ACCENT #f7d774</div>
      </article>

      <article class="card" style="--bg:#0d0710;--text:#d8c4d8;--muted:#9a819d;--accent:#ff4fd8;--buttonText:#0a0610;">
        <h2>12 Neon Villain</h2>
        <p class="sample">Black-purple with hot pink accent. Strong for comedy/chaos sections.</p>
        <p class="muted">Not for long reading, but great as a danger-room accent.</p>
        <div class="button-row"><span class="btn">Chaos</span><span class="btn outline">Unlock</span></div>
        <div class="swatches"><div class="swatch" style="background:#0d0710"></div><div class="swatch" style="background:#d8c4d8"></div><div class="swatch" style="background:#9a819d"></div><div class="swatch" style="background:#ff4fd8"></div></div>
        <div class="label">BG #0d0710 · TEXT #d8c4d8 · ACCENT #ff4fd8</div>
      </article>

      <article class="card" style="--bg:#111111;--text:#d2c4ae;--muted:#9b907d;--accent:#e0b13a;--buttonText:#090909;">
        <h2>13 Charcoal Gold</h2>
        <p class="sample">True charcoal instead of black. Softer contrast, still strong yellow identity.</p>
        <p class="muted">Excellent for repeated browsing.</p>
        <div class="button-row"><span class="btn">Browse</span><span class="btn outline">More</span></div>
        <div class="swatches"><div class="swatch" style="background:#111111"></div><div class="swatch" style="background:#d2c4ae"></div><div class="swatch" style="background:#9b907d"></div><div class="swatch" style="background:#e0b13a"></div></div>
        <div class="label">BG #111111 · TEXT #d2c4ae · ACCENT #e0b13a</div>
      </article>

      <article class="card" style="--bg:#060b12;--text:#cbd2d9;--muted:#8290a0;--accent:#8ab4ff;--buttonText:#05080d;">
        <h2>14 Midnight iPhone</h2>
        <p class="sample">Apple-ish dark blue with calm blue accent. Cleanest modern tech look.</p>
        <p class="muted">Good for utility pages, search, AI generator controls.</p>
        <div class="button-row"><span class="btn">Tool</span><span class="btn outline">Open</span></div>
        <div class="swatches"><div class="swatch" style="background:#060b12"></div><div class="swatch" style="background:#cbd2d9"></div><div class="swatch" style="background:#8290a0"></div><div class="swatch" style="background:#8ab4ff"></div></div>
        <div class="label">BG #060b12 · TEXT #cbd2d9 · ACCENT #8ab4ff</div>
      </article>

      <article class="card" style="--bg:#120808;--text:#dac7bc;--muted:#9b7f7c;--accent:#ff6b35;--buttonText:#100300;">
        <h2>15 Burnt Neon</h2>
        <p class="sample">Dark red-brown with orange accent. Fire, comedy, warning, nightlife.</p>
        <p class="muted">Great for explicit/comedy and high-energy trails.</p>
        <div class="button-row"><span class="btn">Heat</span><span class="btn outline">Warning</span></div>
        <div class="swatches"><div class="swatch" style="background:#120808"></div><div class="swatch" style="background:#dac7bc"></div><div class="swatch" style="background:#9b7f7c"></div><div class="swatch" style="background:#ff6b35"></div></div>
        <div class="label">BG #120808 · TEXT #dac7bc · ACCENT #ff6b35</div>
      </article>

      <article class="card" style="--bg:#0a0e0d;--text:#cdd8cf;--muted:#81958a;--accent:#40ffaa;--buttonText:#03100b;">
        <h2>16 Mint Batcave</h2>
        <p class="sample">Dark teal-black with mint accent. Futuristic but softer than cyan.</p>
        <p class="muted">Good for dashboards and status/readiness pages.</p>
        <div class="button-row"><span class="btn">Ready</span><span class="btn outline">Status</span></div>
        <div class="swatches"><div class="swatch" style="background:#0a0e0d"></div><div class="swatch" style="background:#cdd8cf"></div><div class="swatch" style="background:#81958a"></div><div class="swatch" style="background:#40ffaa"></div></div>
        <div class="label">BG #0a0e0d · TEXT #cdd8cf · ACCENT #40ffaa</div>
      </article>

      <article class="card" style="--bg:#0f0d12;--text:#d2c7d0;--muted:#928693;--accent:#c084fc;--buttonText:#09060d;">
        <h2>17 Velvet Night</h2>
        <p class="sample">Dark velvet purple with gentle violet accent. Moody, romantic, story-rich.</p>
        <p class="muted">Good for Lady Weaver and emotional mythology.</p>
        <div class="button-row"><span class="btn">Lore</span><span class="btn outline">Path</span></div>
        <div class="swatches"><div class="swatch" style="background:#0f0d12"></div><div class="swatch" style="background:#d2c7d0"></div><div class="swatch" style="background:#928693"></div><div class="swatch" style="background:#c084fc"></div></div>
        <div class="label">BG #0f0d12 · TEXT #d2c7d0 · ACCENT #c084fc</div>
      </article>

      <article class="card" style="--bg:#100f0c;--text:#d8d0bc;--muted:#908a78;--accent:#ffee88;--buttonText:#0a0905;">
        <h2>18 Lamp Light</h2>
        <p class="sample">Dark reading-room background with pale gold. Best bridge to reader mode.</p>
        <p class="muted">Good for 5+ minute reading without full parchment mode.</p>
        <div class="button-row"><span class="btn">Read</span><span class="btn outline">Continue</span></div>
        <div class="swatches"><div class="swatch" style="background:#100f0c"></div><div class="swatch" style="background:#d8d0bc"></div><div class="swatch" style="background:#908a78"></div><div class="swatch" style="background:#ffee88"></div></div>
        <div class="label">BG #100f0c · TEXT #d8d0bc · ACCENT #ffee88</div>
      </article>

      <article class="card" style="--bg:#060606;--text:#d6c8a8;--muted:#7d7667;--accent:#a3a3a3;--buttonText:#050505;">
        <h2>19 Black Chrome</h2>
        <p class="sample">Black and antique text with chrome accent. Less yellow, more premium metal.</p>
        <p class="muted">Good for neutral pages where yellow would be too loud.</p>
        <div class="button-row"><span class="btn">Open</span><span class="btn outline">More</span></div>
        <div class="swatches"><div class="swatch" style="background:#060606"></div><div class="swatch" style="background:#d6c8a8"></div><div class="swatch" style="background:#7d7667"></div><div class="swatch" style="background:#a3a3a3"></div></div>
        <div class="label">BG #060606 · TEXT #d6c8a8 · ACCENT #a3a3a3</div>
      </article>

      <article class="card" style="--bg:#0b0b05;--text:#d6cfa5;--muted:#8d875f;--accent:#f5e642;--buttonText:#070700;">
        <h2>20 Comic Bruise</h2>
        <p class="sample">Black-olive with bright comic yellow. Batman bedroom, but warmer than pure black.</p>
        <p class="muted">Strong candidate for front door / bouncer / switchboard.</p>
        <div class="button-row"><span class="btn">Ride</span><span class="btn outline">Again</span></div>
        <div class="swatches"><div class="swatch" style="background:#0b0b05"></div><div class="swatch" style="background:#d6cfa5"></div><div class="swatch" style="background:#8d875f"></div><div class="swatch" style="background:#f5e642"></div></div>
        <div class="label">BG #0b0b05 · TEXT #d6cfa5 · ACCENT #f5e642</div>
      </article>
    

      <article class="card" style="--bg:#05070d;--text:#d7cfbf;--muted:#8f95a3;--accent:#f0c419;--buttonText:#050505;">
        <h2>21 Gotham Gold</h2>
        <p class="sample">Blue-black with softer Bruins gold. Cleaner and calmer than pure yellow.</p>
        <p class="muted">Strong universal candidate for switchboards.</p>
        <div class="button-row"><span class="btn">Open</span><span class="btn outline">Explore</span></div>
      </article>

      <article class="card" style="--bg:#07090f;--text:#cfd4dc;--muted:#7d8da1;--accent:#ffd84d;--buttonText:#050505;">
        <h2>22 Bat Signal Fog</h2>
        <p class="sample">Cool gray text with cinematic gold accent and softer navy shadows.</p>
        <p class="muted">Feels expensive and modern.</p>
        <div class="button-row"><span class="btn">Enter</span><span class="btn outline">Ride</span></div>
      </article>

      <article class="card" style="--bg:#0b0b0d;--text:#d8c8af;--muted:#91826f;--accent:#c0c0c0;--buttonText:#050505;">
        <h2>23 Chrome Whiskey</h2>
        <p class="sample">Whiskey text with silver chrome instead of gold.</p>
        <p class="muted">Good neutral archive palette.</p>
        <div class="button-row"><span class="btn">Archive</span><span class="btn outline">Read</span></div>
      </article>

      <article class="card" style="--bg:#090806;--text:#dccfb7;--muted:#97866f;--accent:#ffcf40;--buttonText:#050505;">
        <h2>24 Warm Batcave</h2>
        <p class="sample">Classic Batman room but easier on eyes than hard yellow-black.</p>
        <p class="muted">Feels vintage and warm.</p>
        <div class="button-row"><span class="btn">Doorway</span><span class="btn outline">Again</span></div>
      </article>

      <article class="card" style="--bg:#05080c;--text:#d4d0c8;--muted:#8d97a3;--accent:#9dc7ff;--buttonText:#020202;">
        <h2>25 Midnight Steel</h2>
        <p class="sample">Apple-dark steel with cool blue glow and soft white-gray text.</p>
        <p class="muted">Very strong utility/UI palette.</p>
        <div class="button-row"><span class="btn">Search</span><span class="btn outline">Filter</span></div>
      </article>

      <article class="card" style="--bg:#0b0c10;--text:#d6cfbe;--muted:#888f9a;--accent:#f7d25c;--buttonText:#050505;">
        <h2>26 Gotham Cinema</h2>
        <p class="sample">Movie-poster navy with faded gold and creamy text.</p>
        <p class="muted">Good blend of comic and luxury.</p>
        <div class="button-row"><span class="btn">Start</span><span class="btn outline">Path</span></div>
      </article>

      <article class="card" style="--bg:#080808;--text:#d9c9a8;--muted:#867b69;--accent:#8f8f8f;--buttonText:#050505;">
        <h2>27 Dark Chrome Gold</h2>
        <p class="sample">Muted gold text with brushed-metal accent tones.</p>
        <p class="muted">Less cartoon, more premium machine.</p>
        <div class="button-row"><span class="btn">Open</span><span class="btn outline">Machine</span></div>
      </article>

      <article class="card" style="--bg:#06070b;--text:#d7d2c8;--muted:#8a9098;--accent:#ffe27a;--buttonText:#040404;">
        <h2>28 Night Reader</h2>
        <p class="sample">One of the least eye-burning dark modes while still feeling Batman-ish.</p>
        <p class="muted">Great long-session candidate.</p>
        <div class="button-row"><span class="btn">Read</span><span class="btn outline">Continue</span></div>
      </article>

      <article class="card" style="--bg:#090b0f;--text:#cdd4da;--muted:#8390a0;--accent:#ffbf3f;--buttonText:#050505;">
        <h2>29 Batphone Pro</h2>
        <p class="sample">iPhone dark mode mixed with Gotham gold navigation accents.</p>
        <p class="muted">Feels app-like and modern.</p>
        <div class="button-row"><span class="btn">Launch</span><span class="btn outline">Map</span></div>
      </article>

      <article class="card" style="--bg:#0a0908;--text:#d7cab4;--muted:#978974;--accent:#ffdb6e;--buttonText:#050505;">
        <h2>30 Old Theater</h2>
        <p class="sample">Warm dark auditorium with vintage marquee gold.</p>
        <p class="muted">Good for reviews and music sections.</p>
        <div class="button-row"><span class="btn">Reviews</span><span class="btn outline">Albums</span></div>
      </article>

      <article class="card" style="--bg:#060606;--text:#d2cdc3;--muted:#8d8d8d;--accent:#d6a545;--buttonText:#050505;">
        <h2>31 Soft Industrial</h2>
        <p class="sample">Muted industrial black with bronze-gold glow.</p>
        <p class="muted">Very stable everyday UI option.</p>
        <div class="button-row"><span class="btn">Browse</span><span class="btn outline">More</span></div>
      </article>

      <article class="card" style="--bg:#05070a;--text:#d7d0c4;--muted:#8f9299;--accent:#f7e08b;--buttonText:#040404;">
        <h2>32 Moonlit Gotham</h2>
        <p class="sample">Moonlight yellow instead of comic yellow. Softer and elegant.</p>
        <p class="muted">Could work across entire site.</p>
        <div class="button-row"><span class="btn">Enter</span><span class="btn outline">Night</span></div>
      </article>

      <article class="card" style="--bg:#08090d;--text:#d8d3c9;--muted:#8c96a3;--accent:#e4b84d;--buttonText:#040404;">
        <h2>33 Gotham Executive</h2>
        <p class="sample">Professional dark mode with restrained gold highlights.</p>
        <p class="muted">Feels expensive without screaming.</p>
        <div class="button-row"><span class="btn">Open</span><span class="btn outline">Tools</span></div>
      </article>

      <article class="card" style="--bg:#0a0a0b;--text:#d7cdbf;--muted:#918779;--accent:#c9c9c9;--buttonText:#040404;">
        <h2>34 Silver Cave</h2>
        <p class="sample">Soft silver highlights replacing yellow almost entirely.</p>
        <p class="muted">Excellent secondary reader palette.</p>
        <div class="button-row"><span class="btn">Reader</span><span class="btn outline">Quiet</span></div>
      </article>

      <article class="card" style="--bg:#070707;--text:#dccfb5;--muted:#99886a;--accent:#f2c14e;--buttonText:#050505;">
        <h2>35 Bruins Luxury</h2>
        <p class="sample">Refined Bruins palette without the harsh sports brightness.</p>
        <p class="muted">Very strong homepage option.</p>
        <div class="button-row"><span class="btn">Homepage</span><span class="btn outline">Start</span></div>
      </article>

      <article class="card" style="--bg:#06080d;--text:#cfd5dc;--muted:#8793a0;--accent:#f9d86a;--buttonText:#040404;">
        <h2>36 Batcomputer</h2>
        <p class="sample">Cold dark tech with warmer gold overlays for balance.</p>
        <p class="muted">Excellent for generator and filter pages.</p>
        <div class="button-row"><span class="btn">Compute</span><span class="btn outline">System</span></div>
      </article>

      <article class="card" style="--bg:#0a0907;--text:#d8cfbf;--muted:#8d8478;--accent:#ffe082;--buttonText:#040404;">
        <h2>37 Quiet Batroom</h2>
        <p class="sample">Soft lamp-lit Batman room. Minimal eye fatigue.</p>
        <p class="muted">Probably safest for marathon reading.</p>
        <div class="button-row"><span class="btn">Read</span><span class="btn outline">Relax</span></div>
      </article>

    </section>
  </main>


