/* godmode-evolution-v3-quality-diversity.css — extracted from inline <style> blocks. Generated by scripts/h1-extract.mjs */
/* per-post signature: godmode-evolution-v3-quality-diversity — wood / dotted-1 / chamfer-12 / tight / numbered / dual-tone / centered */
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] {
        --sig-fg: #aa6633;
        --sig-accent: #dd9966;
        --sig-dim: #5a3a1a;
        --sig-glow: rgba(170,102,51,0.3);
      }
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] .tldr,
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] .key-point,
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] .info-table,
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] .cta-box {
        border: 1px dotted var(--sig-fg);
        clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
        padding: 12px 14px;
      }
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] .info-table {
        padding: 8px;
      }
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] .info-table th {
        color: var(--sig-fg);
        border-bottom: 1px dotted var(--sig-fg);
      }
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] .tldr-label,
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] .key-point strong,
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] .cta-box h3 {
        color: var(--sig-fg);
      }
      /* numbered typography on h2 */
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] h2 {
        counter-increment: ev3qd-h2;
        position: relative;
      }
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] {
        counter-reset: ev3qd-h2;
      }
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] h2::before {
        content: counter(ev3qd-h2, decimal-leading-zero) " / ";
        font-family: 'JetBrains Mono', monospace;
        color: var(--sig-fg);
        font-size: 0.8em;
        margin-right: 4px;
        opacity: 0.7;
      }
      /* per-post visual primitives */
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] .vis-cause,
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] .vis-callout,
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] .vis-matrix,
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] .vis-term {
        margin: 24px auto;
        max-width: 720px;
      }
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] .vis-cause svg,
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] .vis-callout svg {
        width: 100%;
        height: auto;
        display: block;
      }
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] figcaption {
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px;
        color: var(--sig-accent);
        text-align: center;
        margin-top: 8px;
      }
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] .vis-callout {
        display: grid;
        grid-template-columns: 78px 1fr;
        gap: 14px;
        align-items: start;
        padding: 14px 16px;
        border: 1px dotted var(--sig-fg);
        clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
      }
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] .vis-callout .callout-tag {
        font-family: 'JetBrains Mono', monospace;
        font-size: 26px;
        font-weight: 700;
        color: var(--sig-fg);
        text-align: center;
        padding: 8px;
        border: 1px dotted var(--sig-fg);
        clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
      }
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] .vis-callout .callout-title {
        color: var(--sig-fg);
        font-weight: 700;
        margin-bottom: 4px;
      }
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] .vis-callout .callout-body p {
        margin: 0;
      }
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] .vis-matrix .mx-grid {
        display: grid;
        gap: 1px;
        background: var(--sig-dim);
        border: 1px dotted var(--sig-fg);
      }
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] .vis-matrix .mx-h,
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] .vis-matrix .mx-rh,
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] .vis-matrix .mx-c {
        background: #060403;
        padding: 8px 10px;
        font-family: 'JetBrains Mono', monospace;
        font-size: 12px;
      }
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] .vis-matrix .mx-h {
        color: var(--sig-fg);
        text-align: center;
        font-weight: 700;
      }
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] .vis-matrix .mx-rh {
        color: var(--sig-accent);
      }
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] .vis-matrix .mx-c {
        text-align: center;
        color: var(--sig-dim);
      }
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] .vis-matrix .mx-c.on {
        background: var(--sig-fg);
        color: #000;
        font-weight: 700;
      }
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] .vis-term .term-frame {
        background: #060403;
        border: 1px dotted var(--sig-fg);
        clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
      }
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] .vis-term .term-bar {
        background: var(--sig-dim);
        padding: 6px 10px;
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px;
        color: var(--sig-accent);
      }
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] .vis-term .term-body {
        padding: 10px 14px;
        font-family: 'JetBrains Mono', monospace;
        font-size: 12px;
      }
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] .vis-term .term-line {
        margin: 2px 0;
        color: var(--sig-accent);
      }
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] .vis-term .prompt {
        color: var(--sig-fg);
        margin-right: 6px;
      }
      .article-wrap[data-sig="godmode-evolution-v3-quality-diversity"] .vis-term .term-out {
        padding-left: 14px;
      }
/* ===========================================================
         Visual chrome: flex column. Buttons / tag / status are
         OUTSIDE the canvas, never overlapping. Tooltip is the only
         absolute child (it follows the cursor).
         =========================================================== */

      /* ---- Cosmic visual (qd-) ---- */
      .qd-stage {
        position: relative;
        margin: 28px 0 32px;
        border-radius: 10px;
        overflow: hidden;
        background:
          radial-gradient(ellipse at 30% 20%, rgba(96, 60, 220, 0.18), transparent 60%),
          radial-gradient(ellipse at 80% 90%, rgba(0, 200, 255, 0.10), transparent 65%),
          linear-gradient(180deg, #04030a 0%, #07061a 60%, #02020a 100%);
        border: 1px solid rgba(120, 90, 255, 0.30);
        box-shadow:
          inset 0 0 80px rgba(140, 80, 255, 0.10),
          0 0 28px rgba(80, 40, 200, 0.20);
        font-family: 'JetBrains Mono', monospace;
        display: flex;
        flex-direction: column;
      }
      .qd-canvas {
        display: block;
        width: 100%;
        height: 480px;
        flex-shrink: 0;
      }
      @media (max-width: 720px) { .qd-canvas { height: 360px; } }
      .qd-bar {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        align-items: center;
        padding: 10px 12px;
        background: rgba(8, 4, 16, 0.55);
        border-top: 1px solid rgba(170, 130, 255, 0.20);
        font-size: 11px;
        color: #cbb8ff;
      }
      .qd-btn {
        background: rgba(20, 12, 50, 0.85);
        border: 1px solid rgba(170, 130, 255, 0.45);
        color: #e2d4ff;
        padding: 6px 10px;
        border-radius: 4px;
        font: 600 11px 'JetBrains Mono', monospace;
        cursor: pointer;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        transition: background 120ms, transform 120ms, box-shadow 120ms;
      }
      .qd-btn:hover {
        background: rgba(60, 30, 130, 0.85);
        box-shadow: 0 0 16px rgba(170, 120, 255, 0.45);
        transform: translateY(-1px);
      }
      .qd-btn.run.active {
        background: rgba(180, 60, 220, 0.40);
        border-color: rgba(255, 160, 240, 0.7);
        color: #ffe7ff;
      }
      .qd-status {
        flex: 1 1 100%;
        text-align: left;
        font-size: 10px;
        color: #aa9be0;
        letter-spacing: 0.04em;
        line-height: 1.6;
      }
      .qd-status b { color: #ffd9ff; }
      @media (min-width: 560px) {
        .qd-status { flex: 1 1 auto; text-align: right; }
      }
      .qd-tag {
        font: 700 10px 'JetBrains Mono', monospace;
        color: #ffd6ff;
        background: rgba(20, 8, 60, 0.60);
        padding: 8px 12px;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        border-bottom: 1px solid rgba(170, 100, 255, 0.25);
      }
      .qd-tip {
        position: absolute; pointer-events: none;
        background: rgba(8, 4, 24, 0.92);
        border: 1px solid rgba(180, 130, 255, 0.6);
        border-radius: 4px;
        color: #ffeaff;
        padding: 6px 8px;
        font: 11px 'JetBrains Mono', monospace;
        white-space: pre;
        z-index: 3;
        opacity: 0;
        transition: opacity 80ms;
        text-shadow: 0 1px 2px #000;
      }

      /* Tighter spacing for the variant table inside the post */
      .v3qd-cmd-table th, .v3qd-cmd-table td { padding: 6px 10px; font-size: 13px; }
      .v3qd-cmd-table code { font-size: 12px; }

      /* ---- Shared chrome for the three new visuals ---- */
      .viz-stage {
        position: relative;
        margin: 28px 0 32px;
        border-radius: 10px;
        overflow: hidden;
        font-family: 'JetBrains Mono', monospace;
        display: flex;
        flex-direction: column;
      }
      .viz-canvas { display: block; width: 100%; flex-shrink: 0; }
      .viz-tag {
        font: 700 10px 'JetBrains Mono', monospace;
        background: rgba(20, 8, 60, 0.60);
        padding: 8px 12px;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: #ffd6ff;
        border-bottom: 1px solid rgba(170, 100, 255, 0.25);
      }
      .viz-bar {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        align-items: center;
        padding: 10px 12px;
        background: rgba(8, 4, 16, 0.55);
        border-top: 1px solid rgba(170, 130, 255, 0.20);
        font-size: 11px;
      }
      .viz-bar + .viz-bar { border-top-color: rgba(170, 130, 255, 0.10); }
      .viz-btn {
        background: rgba(20, 12, 50, 0.78);
        border: 1px solid rgba(170, 130, 255, 0.40);
        color: #e2d4ff;
        padding: 6px 10px;
        border-radius: 4px;
        font: 600 11px 'JetBrains Mono', monospace;
        cursor: pointer;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        transition: background 120ms, transform 120ms, box-shadow 120ms;
      }
      .viz-btn:hover {
        background: rgba(60, 30, 130, 0.85);
        box-shadow: 0 0 16px rgba(170, 120, 255, 0.45);
        transform: translateY(-1px);
      }
      .viz-btn.active {
        background: rgba(180, 60, 220, 0.40);
        border-color: rgba(255, 160, 240, 0.7);
        color: #ffe7ff;
      }
      .viz-status {
        flex: 1 1 100%;
        text-align: left;
        font-size: 10px;
        color: #aa9be0;
        letter-spacing: 0.04em;
        line-height: 1.6;
      }
      .viz-status b { color: #ffd9ff; }
      @media (min-width: 560px) {
        .viz-status { flex: 1 1 auto; text-align: right; }
      }
      .viz-tip {
        position: absolute; pointer-events: none;
        background: rgba(8, 4, 24, 0.92);
        border: 1px solid rgba(180, 130, 255, 0.6);
        border-radius: 4px;
        color: #ffeaff;
        padding: 6px 8px;
        font: 11px 'JetBrains Mono', monospace;
        white-space: pre;
        z-index: 3;
        opacity: 0;
        transition: opacity 80ms;
        text-shadow: 0 1px 2px #000;
      }

      /* Mobile: tighten chrome so it stays out of the way */
      @media (max-width: 480px) {
        .viz-btn, .qd-btn { padding: 5px 8px; font-size: 10px; letter-spacing: 0.04em; }
        .viz-tag, .qd-tag { font-size: 9px; padding: 6px 10px; }
        .viz-bar, .qd-bar { padding: 8px 10px; gap: 5px; }
      }

      /* ---- Posterior Bloom (Thompson, tb-) ---- */
      .tb-stage {
        background:
          radial-gradient(ellipse at 25% 25%, rgba(255, 200, 240, 0.08), transparent 60%),
          radial-gradient(ellipse at 80% 80%, rgba(140, 200, 255, 0.06), transparent 60%),
          linear-gradient(170deg, #0a0712 0%, #11091e 60%, #050208 100%);
        border: 1px solid rgba(180, 130, 255, 0.28);
        box-shadow: inset 0 0 80px rgba(120, 60, 200, 0.10), 0 0 28px rgba(80, 40, 160, 0.18);
      }
      .tb-canvas { height: 420px; }
      @media (max-width: 720px) { .tb-canvas { height: 340px; } }

      /* ---- Mutation Stream (ms-) ---- */
      .ms-stage {
        background:
          radial-gradient(ellipse at 20% 20%, rgba(255, 140, 100, 0.10), transparent 60%),
          radial-gradient(ellipse at 80% 80%, rgba(110, 90, 220, 0.10), transparent 60%),
          linear-gradient(180deg, #0a0612 0%, #0d0820 50%, #050106 100%);
        border: 1px solid rgba(180, 100, 220, 0.28);
        box-shadow: inset 0 0 80px rgba(140, 60, 180, 0.10), 0 0 28px rgba(120, 40, 80, 0.18);
      }
      .ms-canvas { height: 380px; }
      @media (max-width: 720px) { .ms-canvas { height: 320px; } }

      /* ---- Garden of Variants (vg-) ---- */
      .vg-stage {
        background:
          radial-gradient(ellipse at 30% 0%, rgba(255, 200, 200, 0.10), transparent 55%),
          radial-gradient(ellipse at 80% 10%, rgba(255, 240, 180, 0.07), transparent 55%),
          linear-gradient(180deg, #0d0818 0%, #0a0e1c 35%, #1a0e10 75%, #03020a 100%);
        border: 1px solid rgba(220, 160, 200, 0.28);
        box-shadow: inset 0 0 80px rgba(180, 80, 140, 0.10), 0 0 28px rgba(180, 80, 140, 0.18);
      }
      .vg-canvas { height: 420px; }
      @media (max-width: 720px) { .vg-canvas { height: 360px; } }