Spaces:

HI7RAI
/

anycoder-a7e9e050

Running

App Files Files Community

HI7RAI commited on 21 days ago

Commit

3d02a72

verified ·

1 Parent(s): abea2d5

Update style.css

Browse files

Files changed (1) hide show

style.css +2322 -1

style.css CHANGED Viewed

@@ -1,4 +1,2325 @@
-body {
 	padding: 2rem;
 	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }

+```html
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>TextForge Pro - Text Processing Suite</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap"
+    rel="stylesheet">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          fontFamily: {
+            display: ['Space Grotesk', 'sans-serif'],
+            mono: ['JetBrains Mono', 'monospace']
+          }
+        }
+      }
+    }
+  </script>
+  <style>
+    :root {
+      --bg-primary: #0a0a0f;
+      --bg-secondary: #12121a;
+      --bg-tertiary: #1a1a25;
+      --fg-primary: #e8e8ed;
+      --fg-secondary: #9898a8;
+      --fg-muted: #5a5a6e;
+      --accent-primary: #00d4aa;
+      --accent-secondary: #7c3aed;
+      --accent-tertiary: #f59e0b;
+      --border-color: #2a2a3a;
+      --card-bg: rgba(18, 18, 26, 0.8);
+      --glow-primary: rgba(0, 212, 170, 0.15);
+      --glow-secondary: rgba(124, 58, 237, 0.15);
+    }
+    * {
+      box-sizing: border-box;
+      scrollbar-width: thin;
+      scrollbar-color: var(--border-color) transparent;
+    }
+    *::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+    *::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    *::-webkit-scrollbar-thumb {
+      background: var(--border-color);
+      border-radius: 3px;
+    }
+    *::-webkit-scrollbar-thumb:hover {
+      background: var(--fg-muted);
+    }
+    body {
+      font-family: 'Space Grotesk', sans-serif;
+      background: var(--bg-primary);
+      color: var(--fg-primary);
+      min-height: 100vh;
+      overflow-x: hidden;
+    }
+    .bg-mesh {
+      position: fixed;
+      inset: 0;
+      z-index: -1;
+      background:
+        radial-gradient(ellipse 80% 50% at 20% 20%, var(--glow-primary), transparent),
+        radial-gradient(ellipse 60% 40% at 80% 80%, var(--glow-secondary), transparent),
+        linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
+    }
+    .noise-overlay {
+      position: fixed;
+      inset: 0;
+      z-index: -1;
+      opacity: 0.03;
+      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+    }
+    .glass-card {
+      background: var(--card-bg);
+      backdrop-filter: blur(20px);
+      border: 1px solid var(--border-color);
+      border-radius: 16px;
+      transition: border-color 0.3s ease, box-shadow 0.3s ease;
+    }
+    .glass-card:hover {
+      border-color: rgba(0, 212, 170, 0.3);
+    }
+    .input-field {
+      background: var(--bg-tertiary);
+      border: 1px solid var(--border-color);
+      border-radius: 12px;
+      color: var(--fg-primary);
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 14px;
+      padding: 16px;
+      width: 100%;
+      resize: vertical;
+      transition: border-color 0.2s, box-shadow 0.2s;
+    }
+    .input-field:focus {
+      outline: none;
+      border-color: var(--accent-primary);
+      box-shadow: 0 0 0 3px var(--glow-primary);
+    }
+    .input-field::placeholder {
+      color: var(--fg-muted);
+    }
+    .btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      padding: 10px 18px;
+      border-radius: 10px;
+      font-weight: 500;
+      font-size: 14px;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      border: 1px solid transparent;
+      font-family: 'Space Grotesk', sans-serif;
+    }
+    .btn-primary {
+      background: linear-gradient(135deg, var(--accent-primary), #00a888);
+      color: var(--bg-primary);
+    }
+    .btn-primary:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 20px var(--glow-primary);
+    }
+    .btn-primary:active {
+      transform: translateY(0);
+    }
+    .btn-secondary {
+      background: var(--bg-tertiary);
+      color: var(--fg-primary);
+      border-color: var(--border-color);
+    }
+    .btn-secondary:hover {
+      background: var(--border-color);
+      border-color: var(--accent-secondary);
+    }
+    .btn-accent {
+      background: linear-gradient(135deg, var(--accent-secondary), #5b21b6);
+      color: white;
+    }
+    .btn-accent:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 20px var(--glow-secondary);
+    }
+    .btn-small {
+      padding: 6px 12px;
+      font-size: 12px;
+      border-radius: 8px;
+    }
+    .preset-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 8px 14px;
+      background: var(--bg-tertiary);
+      border: 1px solid var(--border-color);
+      border-radius: 20px;
+      font-size: 13px;
+      cursor: pointer;
+      transition: all 0.2s;
+      font-family: 'Space Grotesk', sans-serif;
+      color: var(--fg-primary);
+    }
+    .preset-chip:hover {
+      border-color: var(--accent-primary);
+      background: rgba(0, 212, 170, 0.1);
+      transform: translateY(-1px);
+    }
+    .preset-chip.active {
+      background: var(--accent-primary);
+      color: var(--bg-primary);
+      border-color: var(--accent-primary);
+    }
+    .stat-card {
+      background: var(--bg-tertiary);
+      border: 1px solid var(--border-color);
+      border-radius: 12px;
+      padding: 16px;
+      text-align: center;
+      transition: all 0.3s ease;
+    }
+    .stat-card:hover {
+      border-color: var(--accent-primary);
+      transform: translateY(-2px);
+    }
+    .stat-value {
+      font-size: 28px;
+      font-weight: 700;
+      color: var(--accent-primary);
+      font-family: 'JetBrains Mono', monospace;
+    }
+    .stat-label {
+      font-size: 12px;
+      color: var(--fg-secondary);
+      margin-top: 4px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+    .history-item {
+      background: var(--bg-tertiary);
+      border: 1px solid var(--border-color);
+      border-radius: 10px;
+      padding: 12px;
+      margin-bottom: 8px;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+    .history-item:hover {
+      border-color: var(--accent-secondary);
+      background: rgba(124, 58, 237, 0.05);
+      transform: translateX(4px);
+    }
+    .suggestion-card {
+      background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05));
+      border: 1px solid rgba(245, 158, 11, 0.2);
+      border-radius: 12px;
+      padding: 14px;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+    .suggestion-card:hover {
+      border-color: var(--accent-tertiary);
+      transform: translateX(4px);
+      background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.08));
+    }
+    .progress-bar {
+      height: 4px;
+      background: var(--bg-tertiary);
+      border-radius: 2px;
+      overflow: hidden;
+    }
+    .progress-fill {
+      height: 100%;
+      background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
+      border-radius: 2px;
+      transition: width 0.3s ease;
+    }
+    .char-freq-item {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 8px 12px;
+      background: var(--bg-tertiary);
+      border-radius: 8px;
+      margin-bottom: 6px;
+      transition: background 0.2s;
+    }
+    .char-freq-item:hover {
+      background: var(--border-color);
+    }
+    .char-freq-bar {
+      flex: 1;
+      height: 6px;
+      background: var(--border-color);
+      border-radius: 3px;
+      overflow: hidden;
+    }
+    .char-freq-fill {
+      height: 100%;
+      background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
+      border-radius: 3px;
+      transition: width 0.3s ease;
+    }
+    .toast {
+      position: fixed;
+      bottom: 24px;
+      right: 24px;
+      background: var(--bg-secondary);
+      border: 1px solid var(--accent-primary);
+      border-radius: 12px;
+      padding: 16px 24px;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      z-index: 1000;
+      transform: translateY(100px);
+      opacity: 0;
+      transition: all 0.3s ease;
+      box-shadow: 0 10px 40px rgba(0, 212, 170, 0.2);
+    }
+    .toast.show {
+      transform: translateY(0);
+      opacity: 1;
+    }
+    .modal-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.7);
+      backdrop-filter: blur(4px);
+      z-index: 100;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.3s ease;
+    }
+    .modal-overlay.show {
+      opacity: 1;
+      pointer-events: auto;
+    }
+    .modal-content {
+      background: var(--bg-secondary);
+      border: 1px solid var(--border-color);
+      border-radius: 16px;
+      padding: 24px;
+      max-width: 400px;
+      width: 90%;
+      transform: scale(0.9);
+      transition: transform 0.3s ease;
+    }
+    .modal-overlay.show .modal-content {
+      transform: scale(1);
+    }
+    .word-cloud {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      padding: 12px;
+      background: var(--bg-tertiary);
+      border-radius: 12px;
+    }
+    .word-chip {
+      padding: 4px 10px;
+      background: var(--bg-secondary);
+      border: 1px solid var(--border-color);
+      border-radius: 16px;
+      font-size: 12px;
+      transition: all 0.2s;
+      cursor: default;
+    }
+    .word-chip:hover {
+      border-color: var(--accent-primary);
+      background: rgba(0, 212, 170, 0.1);
+    }
+    .word-chip.large {
+      font-size: 14px;
+      padding: 6px 14px;
+      background: rgba(0, 212, 170, 0.15);
+      border-color: var(--accent-primary);
+    }
+    .word-chip.medium {
+      font-size: 13px;
+      padding: 5px 12px;
+    }
+    .saved-preset-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px 12px;
+      background: var(--bg-tertiary);
+      border: 1px solid var(--border-color);
+      border-radius: 10px;
+      margin-bottom: 8px;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+    .saved-preset-item:hover {
+      border-color: var(--accent-primary);
+      background: rgba(0, 212, 170, 0.05);
+    }
+    .delete-btn {
+      padding: 4px;
+      border-radius: 6px;
+      transition: all 0.2s;
+      color: var(--fg-muted);
+      background: none;
+      border: none;
+      cursor: pointer;
+    }
+    .delete-btn:hover {
+      background: rgba(239, 68, 68, 0.2);
+      color: #ef4444;
+    }
+    .tab-btn {
+      padding: 8px 16px;
+      background: transparent;
+      border: none;
+      color: var(--fg-secondary);
+      font-size: 14px;
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+      transition: all 0.2s;
+      font-family: 'Space Grotesk', sans-serif;
+    }
+    .tab-btn:hover {
+      color: var(--fg-primary);
+    }
+    .tab-btn.active {
+      color: var(--accent-primary);
+      border-bottom-color: var(--accent-primary);
+    }
+    @keyframes fadeInUp {
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    .animate-in {
+      animation: fadeInUp 0.4s ease forwards;
+    }
+    .stagger-1 {
+      animation-delay: 0.1s;
+      opacity: 0;
+    }
+    .stagger-2 {
+      animation-delay: 0.2s;
+      opacity: 0;
+    }
+    .stagger-3 {
+      animation-delay: 0.3s;
+      opacity: 0;
+    }
+    .stagger-4 {
+      animation-delay: 0.4s;
+      opacity: 0;
+    }
+    @keyframes pulse {
+      0%,
+      100% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.5;
+      }
+    }
+    .processing {
+      animation: pulse 1s ease-in-out infinite;
+    }
+    @keyframes shimmer {
+      0% {
+        background-position: -200% 0;
+      }
+      100% {
+        background-position: 200% 0;
+      }
+    }
+    .shimmer {
+      background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--border-color) 50%, var(--bg-tertiary) 75%);
+      background-size: 200% 100%;
+      animation: shimmer 1.5s infinite;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      *,
+      *::before,
+      *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+      }
+    }
+    @media (max-width: 1024px) {
+      .main-grid {
+        grid-template-columns: 1fr !important;
+      }
+    }
+    @media (max-width: 768px) {
+      .stat-grid {
+        grid-template-columns: repeat(2, 1fr) !important;
+      }
+      .header-actions {
+        flex-direction: column;
+        gap: 8px;
+      }
+      .toast {
+        left: 16px;
+        right: 16px;
+        bottom: 16px;
+      }
+    }
+    @media (max-width: 480px) {
+      .preset-chip {
+        padding: 6px 10px;
+        font-size: 12px;
+      }
+      .stat-value {
+        font-size: 22px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="bg-mesh"></div>
+  <div class="noise-overlay"></div>
+  <!-- Header -->
+  <header class="sticky top-0 z-50 backdrop-blur-xl border-b border-[var(--border-color)]">
+    <div class="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between flex-wrap gap-4">
+      <div class="flex items-center gap-4">
+        <div
+          class="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--accent-primary)] to-[var(--accent-secondary)] flex items-center justify-center">
+          <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+          </svg>
+        </div>
+        <div>
+          <h1 class="text-xl font-bold">TextForge Pro</h1>
+          <p class="text-xs text-[var(--fg-secondary)]">Text Processing Suite</p>
+        </div>
+      </div>
+      <div class="flex items-center gap-3 header-actions">
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank"
+          class="text-sm text-[var(--accent-primary)] hover:underline">Built with anycoder</a>
+        <button id="clearAllBtn" class="btn btn-secondary btn-small">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+          </svg>
+          Clear All
+        </button>
+      </div>
+    </div>
+  </header>
+  <!-- Main Content -->
+  <main class="max-w-7xl mx-auto px-4 py-6">
+    <!-- Stats Row -->
+    <div class="stat-grid grid grid-cols-4 gap-4 mb-6 animate-in stagger-1">
+      <div class="stat-card">
+        <div class="stat-value" id="charCount">0</div>
+        <div class="stat-label">Characters</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-value" id="wordCount">0</div>
+        <div class="stat-label">Words</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-value" id="lineCount">0</div>
+        <div class="stat-label">Lines</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-value" id="uniqueWords">0</div>
+        <div class="stat-label">Unique</div>
+      </div>
+    </div>
+    <!-- Main Grid -->
+    <div class="main-grid grid grid-cols-[1fr_320px] gap-6">
+      <!-- Left Column - Editor -->
+      <div class="space-y-6">
+        <!-- Input Section -->
+        <section class="glass-card p-6 animate-in stagger-2">
+          <div class="flex items-center justify-between mb-4 flex-wrap gap-2">
+            <h2 class="text-lg font-semibold">Input Text</h2>
+            <div class="flex gap-2">
+              <button id="pasteBtn" class="btn btn-secondary btn-small">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
+                </svg>
+                Paste
+              </button>
+              <label class="btn btn-secondary btn-small cursor-pointer">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
+                </svg>
+                Import
+                <input type="file" id="fileInput" class="hidden" accept=".txt,.md,.html,.css,.js,.json,.csv">
+              </label>
+            </div>
+          </div>
+          <textarea id="inputText" class="input-field min-h-[200px]" placeholder="Paste or type your text here..."></textarea>
+        </section>
+        <!-- Presets Section -->
+        <section class="glass-card p-6 animate-in stagger-3">
+          <h2 class="text-lg font-semibold mb-4">Processing Presets</h2>
+          <div class="flex flex-wrap gap-2 mb-4" id="presetsContainer">
+            <button class="preset-chip" data-preset="clean">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+              </svg>
+              Clean Text
+            </button>
+            <button class="preset-chip" data-preset="html">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
+              </svg>
+              Remove HTML
+            </button>
+            <button class="preset-chip" data-preset="unique">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/>
+              </svg>
+              Unique Only
+            </button>
+            <button class="preset-chip" data-preset="sort">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"/>
+              </svg>
+              Sort Lines
+            </button>
+            <button class="preset-chip" data-preset="minify">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/>
+              </svg>
+              Minify
+            </button>
+            <button class="preset-chip" data-preset="keywords">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
+              </svg>
+              Extract Keywords<div class="codepen" data-height="245" data-pen-title="Six Faces / Walking The Cow" data-preview="true" data-prefill='{"title":"Six Faces / Walking The Cow","description":"A scroll-driven 3D cube that rotates through six faces as you move down the page. Each face holds an image from an experiment in reverse creativity, asking AI to work against itself, break composition rules, and leave the mistakes in place.\n\nThe technical part is just the container. The frame on the wall.\n\nFor Daniel Johnston, who walked the cow first.","tags":["scroll","scrollsync","cow","reverse-creativity"],"scripts":[],"stylesheets":[]}'>
+  <pre data-lang="html">&lt;div id="scene">
+  &lt;div id="cube">
+    &lt;div class="face" data-face="top" data-i="0">&lt;span class="face-ph">TOP&lt;/span>&lt;/div>
+    &lt;div class="face" data-face="front" data-i="1">&lt;span class="face-ph">FRONT&lt;/span>&lt;/div>
+    &lt;div class="face" data-face="right" data-i="2">&lt;span class="face-ph">RIGHT&lt;/span>&lt;/div>
+    &lt;div class="face" data-face="back" data-i="3">&lt;span class="face-ph">BACK&lt;/span>&lt;/div>
+    &lt;div class="face" data-face="left" data-i="4">&lt;span class="face-ph">LEFT&lt;/span>&lt;/div>
+    &lt;div class="face" data-face="bottom" data-i="5">&lt;span class="face-ph">BOTTOM&lt;/span>&lt;/div>
+  &lt;/div>
+&lt;/div>
+&lt;div id="hud">
+  &lt;div id="hud_pct">000%&lt;/div>
+  &lt;div class="progress-bar">
+    &lt;div class="progress-fill" id="prog_fill">&lt;/div>
+  &lt;/div>
+  &lt;div class="scene-label" id="scene_name">DESCENT&lt;/div>
+&lt;/div>
+&lt;button id="theme_toggle" aria-label="Toggle light/dark mode">
+  &lt;svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+    &lt;circle cx="12" cy="12" r="4" />
+    &lt;path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" />
+  &lt;/svg>
+  &lt;svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+    &lt;path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z" />
+  &lt;/svg>
+&lt;/button>
+&lt;div id="scene_strip">
+  &lt;a href="#s0" class="scene-dot active">&lt;/a>
+  &lt;a href="#s1" class="scene-dot">&lt;/a>
+  &lt;a href="#s2" class="scene-dot">&lt;/a>
+  &lt;a href="#s3" class="scene-dot">&lt;/a>
+  &lt;a href="#s4" class="scene-dot">&lt;/a>
+  &lt;a href="#s5" class="scene-dot">&lt;/a>
+&lt;/div>
+&lt;div id="face_caption">
+  &lt;div id="face_caption_num">01&lt;/div>
+  &lt;div id="face_caption_name">DESCENT&lt;/div>
+&lt;/div>
+&lt;div id="scroll_container">
+  &lt;section id="s0">
+    &lt;div class="text-card">
+      &lt;div class="tag">Cube Gallery — Bad Art&lt;/div>
+      &lt;h1>WORK&lt;br>AGAINST&lt;br>THE MODEL&lt;/h1>
+      &lt;p class="body-text">
+        What happens when you ask AI
+        to do the opposite of what it was built for?
+        Break proportion. Flip symmetry.
+        Leave the mistakes in place.
+        Scroll to find out.
+      &lt;/p>
+      &lt;div class="cta-row">
+        &lt;a class="cta" href="#s1">
+          Enter
+          &lt;svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
+            &lt;path d="M1 6h10M6 1l5 5-5 5" />
+          &lt;/svg>
+        &lt;/a>
+      &lt;/div>
+    &lt;/div>
+  &lt;/section>
+  &lt;section id="s1">
+    &lt;div class="text-card right">
+      &lt;div class="h-line">&lt;/div>
+      &lt;div class="tag">01 — Art Rebellion&lt;/div>
+      &lt;h2>FLIP&lt;br>THE&lt;br>PROMPT&lt;/h2>
+      &lt;p class="body-text">
+        A cow walking a monster
+        instead of a monster walking a cow.
+        That inversion is enough
+        to break template thinking.
+        The cape ends up on the wrong body.
+      &lt;/p>
+      &lt;div class="cta-row">
+        &lt;a class="cta-back" href="#s0">
+          &lt;svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
+            &lt;path d="M11 6H1M6 11L1 6l5-5" />
+          &lt;/svg>
+          Back
+        &lt;/a>
+        &lt;a class="cta" href="#s2">
+          Turn
+          &lt;svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
+            &lt;path d="M1 6h10M6 1l5 5-5 5" />
+          &lt;/svg>
+        &lt;/a>
+      &lt;/div>
+    &lt;/div>
+  &lt;/section>
+  &lt;section id="s2">
+    &lt;div class="text-card">
+      &lt;div class="h-line">&lt;/div>
+      &lt;div class="tag">02 — Moo Walk&lt;/div>
+      &lt;h2>NEITHER&lt;br>LEADS&lt;/h2>
+      &lt;p class="body-text">
+        Clashing colors. No balance.
+        A dance with no choreography.
+        When the model works against itself
+        something more genuine surfaces.
+      &lt;/p>
+      &lt;div class="cta-row">
+        &lt;a class="cta-back" href="#s1">
+          &lt;svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
+            &lt;path d="M11 6H1M6 11L1 6l5-5" />
+          &lt;/svg>
+          Back
+        &lt;/a>
+        &lt;a class="cta" href="#s3">
+          Turn
+          &lt;svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
+            &lt;path d="M1 6h10M6 1l5 5-5 5" />
+          &lt;/svg>
+        &lt;/a>
+      &lt;/div>
+    &lt;/div>
+  &lt;/section>
+  &lt;section id="s3">
+    &lt;div class="text-card right">
+      &lt;div class="h-line">&lt;/div>
+      &lt;div class="tag">03 — Bad Art&lt;/div>
+      &lt;h2>REVERSE&lt;br>CREATIVITY&lt;/h2>
+      &lt;p class="body-text">
+        AI is trained to polish and regularize.
+        The harder direction is unlearning that.
+        A television for a head
+        is not an error.
+        It is the point.
+      &lt;/p>
+      &lt;div class="stat-row" style="justify-content: flex-end">
+        &lt;div class="stat">
+          &lt;span class="stat-num">6&lt;/span>
+          &lt;span class="stat-label">Works&lt;/span>
+        &lt;/div>
+        &lt;div class="stat">
+          &lt;span class="stat-num">360&lt;/span>
+          &lt;span class="stat-label">Degrees&lt;/span>
+        &lt;/div>
+        &lt;div class="stat">
+          &lt;span class="stat-num">1&lt;/span>
+          &lt;span class="stat-label">Object&lt;/span>
+        &lt;/div>
+      &lt;/div>
+      &lt;div class="cta-row">
+        &lt;a class="cta-back" href="#s2">
+          &lt;svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
+            &lt;path d="M11 6H1M6 11L1 6l5-5" />
+          &lt;/svg>
+          Back
+        &lt;/a>
+        &lt;a class="cta" href="#s4">
+          Turn
+          &lt;svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
+            &lt;path d="M1 6h10M6 1l5 5-5 5" />
+          &lt;/svg>
+        &lt;/a>
+      &lt;/div>
+    &lt;/div>
+  &lt;/section>
+  &lt;section id="s4">
+    &lt;div class="text-card">
+      &lt;div class="h-line">&lt;/div>
+      &lt;div class="tag">04 — No Rules&lt;/div>
+      &lt;h2>NONSENSE&lt;br>AT THE&lt;br>CENTER&lt;/h2>
+      &lt;p class="body-text">
+        Dada and the surrealists knew this.
+        Put the absurd at the center
+        and the edges stop pretending.
+        Nine heads in the branches.
+        The sun has a face and it approves.
+      &lt;/p>
+      &lt;div class="cta-row">
+        &lt;a class="cta-back" href="#s3">
+          &lt;svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
+            &lt;path d="M11 6H1M6 11L1 6l5-5" />
+          &lt;/svg>
+          Back
+        &lt;/a>
+        &lt;a class="cta" href="#s5">
+          Turn
+          &lt;svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
+            &lt;path d="M1 6h10M6 1l5 5-5 5" />
+          &lt;/svg>
+        &lt;/a>
+      &lt;/div>wdEWs
+    &lt;/div>
+  &lt;/section>
+  &lt;section id="s5">
+    &lt;div class="text-card right">
+      &lt;div class="h-line">&lt;/div>
+      &lt;div class="tag">05 — Super Monsters&lt;/div>
+      &lt;h2>RAW&lt;br>NOT&lt;br>POLISHED&lt;/h2>
+      &lt;p class="body-text">
+        Forward creativity takes a sketch
+        and makes it real.
+        This goes the other way.
+        Imperfection left in place
+        is closer to something honest.
+      &lt;/p>
+      &lt;div class="cta-row">
+        &lt;a class="cta-back" href="#s4">
+          &lt;svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
+            &lt;path d="M11 6H1M6 11L1 6l5-5" />
+          &lt;/svg>
+          Back
+        &lt;/a>
+        &lt;a class="cta" href="#s0">
+          Begin again
+          &lt;svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
+            &lt;path d="M1 6h10M6 1l5 5-5 5" />
+          &lt;/svg>
+        &lt;/a>
+      &lt;/div>
+    &lt;/div>
+  &lt;/section>
+&lt;/div>
+&lt;div id="credit">
+  &lt;a href="https://www.linkedin.com/posts/luis-martinez-lr_ai-creativity-reversecreativity-activity-7366853269517651970-zeUD?utm_source=share&utm_medium=member_desktop&rcm=ACoAAFq1dzgByK1x_NMrcq582OMbK-_3q0DthYY" target="_blank" rel="noopener">Reverse Creativity&lt;/a>
+&lt;/div></pre>
+  <pre data-lang="css">@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@300;400&display=swap");
+@layer reset, tokens, base, layout, cube, ui, cards, reveal, theme, responsive;
+@layer reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+}
+@layer tokens {
+  :root {
+    color-scheme: dark;
+    --dark-bg: #1c1814;
+    --dark-fg: #ede8df;
+    --dark-muted: #8a7b6e;
+    --light-bg: #f0ece3;
+    --light-fg: #0d0d14;
+    --light-muted: #9a9aaa;
+    --accent-dark: #d4a84b;
+    --accent-light: #3a6e00;
+    --bg: var(--dark-bg);
+    --fg: var(--dark-fg);
+    --muted: var(--dark-muted);
+    --accent: var(--accent-dark);
+    --font-display: "Bebas Neue", sans-serif;
+    --font-mono: "DM Mono", monospace;
+    --hairline: 0.0625rem;
+    --ui-inset: 2rem;
+    --card-bg: rgba(28, 24, 20, 0.82);
+    --card-border: rgba(212, 168, 75, 0.2);
+    --nav-x: calc(var(--ui-inset) + 0.125rem);
+    --reveal-offset: 0.625rem;
+    --reveal-duration: 0.5s;
+    --z-ui: 10;
+  }
+}
+@layer base {
+  html {
+    color-scheme: dark;
+  }
+  body {
+    background: var(--bg);
+    color: var(--fg);
+    font-family: var(--font-mono);
+    overflow-x: hidden;
+    transition: background 0.3s ease, color 0.3s ease;
+  }
+}
+@layer layout {
+  #scene {
+    position: fixed;
+    inset: 0;
+    z-index: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    perspective: 1100px;
+    pointer-events: none;
+  }
+  #scroll_container {
+    position: relative;
+    z-index: 1;
+  }
+  section {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    padding: 6rem calc(5rem + var(--ui-inset)) 6rem 5rem;
+  }
+}
+@layer cube {
+  #cube {
+    --s: min(74vw, 74vh, 560px);
+    width: var(--s);
+    height: var(--s);
+    position: relative;
+    transform-style: preserve-3d;
+    transform: rotateX(90deg) rotateY(0deg);
+    will-change: transform;
+  }
+  .face {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    backface-visibility: hidden;
+    background: repeating-linear-gradient(
+        0deg,
+        rgba(255, 255, 255, 0.02) 0,
+        rgba(255, 255, 255, 0.02) 1px,
+        transparent 1px,
+        transparent 48px
+      ),
+      repeating-linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0.02) 0,
+        rgba(255, 255, 255, 0.02) 1px,
+        transparent 1px,
+        transparent 48px
+      ),
+      #14100d;
+    img {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+    &:has(img) .face-ph {
+      display: none;
+    }
+  }
+  .face-ph {
+    position: absolute;
+    bottom: 1.5rem;
+    left: 1.75rem;
+    font-family: var(--font-display);
+    font-size: clamp(2rem, 8vw, 5rem);
+    letter-spacing: 0.04em;
+    color: rgba(255, 255, 255, 0.06);
+    pointer-events: none;
+    user-select: none;
+  }
+  .face[data-face="front"] {
+    transform: translateZ(calc(var(--s) / 2));
+  }
+  .face[data-face="back"] {
+    transform: rotateY(180deg) translateZ(calc(var(--s) / 2));
+  }
+  .face[data-face="right"] {
+    transform: rotateY(90deg) translateZ(calc(var(--s) / 2));
+  }
+  .face[data-face="left"] {
+    transform: rotateY(-90deg) translateZ(calc(var(--s) / 2));
+  }
+  .face[data-face="top"] {
+    transform: rotateX(-90deg) translateZ(calc(var(--s) / 2));
+  }
+  .face[data-face="bottom"] {
+    transform: rotateX(90deg) translateZ(calc(var(--s) / 2));
+  }
+}
+@layer ui {
+  #hud {
+    position: fixed;
+    top: var(--ui-inset);
+    right: var(--ui-inset);
+    z-index: var(--z-ui);
+    text-align: right;
+    font-size: 0.65rem;
+    letter-spacing: 0.15em;
+    color: var(--muted);
+    text-transform: uppercase;
+    .progress-bar {
+      width: 7.5rem;
+      height: var(--hairline);
+      background: var(--muted);
+      margin-block-start: 0.5rem;
+      margin-inline-start: auto;
+      position: relative;
+      overflow: hidden;
+    }
+    .progress-fill {
+      position: absolute;
+      inset-block: 0;
+      inset-inline-start: 0;
+      width: 0%;
+      background: var(--accent);
+      transition: width 0.1s linear;
+    }
+    .scene-label {
+      font-size: 0.6rem;
+      color: var(--accent);
+      margin-block-start: 0.4rem;
+    }
+  }
+  #scene_strip {
+    position: fixed;
+    left: var(--nav-x);
+    top: 50%;
+    translate: -50% -50%;
+    z-index: var(--z-ui);
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  .scene-dot {
+    position: relative;
+    display: block;
+    width: 0.25rem;
+    height: 0.25rem;
+    border-radius: 50%;
+    background: var(--muted);
+    transition: background 0.3s, scale 0.3s;
+    cursor: pointer;
+    &::before {
+      content: "";
+      position: absolute;
+      inset: -0.2rem;
+    }
+    &.active {
+      background: var(--accent);
+      scale: 1.8;
+    }
+  }
+  #theme_toggle {
+    position: fixed;
+    bottom: var(--ui-inset);
+    left: var(--nav-x);
+    translate: -50% 0;
+    z-index: var(--z-ui);
+    width: 2rem;
+    height: 2rem;
+    border: none;
+    background: color-mix(in srgb, var(--muted) 35%, transparent);
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.3s;
+    &:hover {
+      background: color-mix(in srgb, var(--muted) 55%, transparent);
+    }
+    svg {
+      width: 0.875rem;
+      height: 0.875rem;
+      position: absolute;
+      transition: opacity 0.3s ease, rotate 0.3s ease;
+      color: var(--accent);
+    }
+    .icon-sun {
+      opacity: 1;
+      rotate: 0deg;
+    }
+    .icon-moon {
+      opacity: 0;
+      rotate: 90deg;
+    }
+  }
+  #face_caption {
+    position: fixed;
+    bottom: var(--ui-inset);
+    left: 50%;
+    translate: -50% 0;
+    z-index: var(--z-ui);
+    text-align: center;
+    pointer-events: none;
+    user-select: none;
+  }
+  #face_caption_num {
+    font-size: 0.58rem;
+    letter-spacing: 0.28em;
+    color: var(--accent);
+    text-transform: uppercase;
+    margin-block-end: 0.15rem;
+  }
+  #face_caption_name {
+    font-family: var(--font-display);
+    font-size: clamp(1.8rem, 5vw, 3.5rem);
+    letter-spacing: 0.08em;
+    color: var(--muted);
+    opacity: 0.5;
+    line-height: 1;
+  }
+  #credit {
+    position: fixed;
+    right: var(--ui-inset);
+    top: 50%;
+    transform: translateY(-50%) rotate(-90deg);
+    transform-origin: right center;
+    z-index: var(--z-ui);
+    font-family: var(--font-mono);
+    font-size: 0.65rem;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+    a {
+      color: var(--muted);
+      text-decoration: none;
+    }
+  }
+}
+@layer cards {
+  .text-card {
+    max-width: 23.75rem;
+    padding: 2.25rem 2rem;
+    background: var(--card-bg);
+    border-left: var(--hairline) solid var(--card-border);
+    backdrop-filter: blur(6px) saturate(120%);
+    -webkit-backdrop-filter: blur(6px) saturate(120%);
+    overflow: hidden;
+    transition: background 0.3s ease, border-color 0.3s ease;
+    &.right {
+      margin-inline-start: auto;
+      border-left: none;
+      border-right: var(--hairline) solid var(--card-border);
+      text-align: right;
+      .h-line {
+        transform-origin: right;
+        margin-inline-start: auto;
+      }
+    }
+    &.center {
+      margin-inline: auto;
+      border-left: none;
+      border-top: var(--hairline) solid var(--card-border);
+      text-align: center;
+      max-width: 28.75rem;
+      .h-line {
+        transform-origin: center;
+        margin-inline: auto;
+      }
+    }
+  }
+  .tag {
+    font-size: 0.6rem;
+    letter-spacing: 0.25em;
+    text-transform: uppercase;
+    color: var(--accent);
+    margin-block-end: 1.1rem;
+  }
+  :where(h1, h2) {
+    font-family: var(--font-display);
+    font-weight: 400;
+    letter-spacing: 0.03em;
+    line-height: 0.92;
+  }
+  h1 {
+    font-size: clamp(3rem, 8vw, 6.5rem);
+  }
+  h2 {
+    font-size: clamp(2.2rem, 5vw, 4rem);
+  }
+  .body-text {
+    font-size: 0.78rem;
+    line-height: 1.8;
+    color: color-mix(in srgb, var(--fg) 55%, transparent);
+    margin-block-start: 1.25rem;
+  }
+  .stat-row {
+    display: flex;
+    gap: 2.5rem;
+    margin-block-start: 2rem;
+    flex-wrap: wrap;
+  }
+  .stat {
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+  }
+  .stat-num {
+    font-family: var(--font-display);
+    font-size: 2.2rem;
+    color: var(--accent);
+    line-height: 1;
+  }
+  .stat-label {
+    font-size: 0.58rem;
+    letter-spacing: 0.2em;
+    text-transform: uppercase;
+    color: var(--muted);
+  }
+  .h-line {
+    width: 3.125rem;
+    height: var(--hairline);
+    background: var(--accent);
+    margin-block-end: 1.2rem;
+    transform-origin: left;
+  }
+  .cta-row {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 0.75rem;
+    margin-block-start: 1.75rem;
+  }
+  .text-card.right .cta-row {
+    justify-content: flex-end;
+  }
+  .cta {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.6rem;
+    padding: 0.6rem 1.25rem;
+    border: var(--hairline) solid var(--accent);
+    color: var(--accent);
+    font-family: var(--font-mono);
+    font-size: 0.62rem;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    text-decoration: none;
+    cursor: pointer;
+    transition: background 0.2s, color 0.2s;
+    &:hover {
+      background: var(--accent);
+      color: var(--bg);
+    }
+    svg {
+      width: 0.6875rem;
+      height: 0.6875rem;
+    }
+  }
+  .cta-back {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.6rem;
+    padding: 0.6rem 1.25rem;
+    border: var(--hairline) solid
+      color-mix(in srgb, var(--muted) 45%, transparent);
+    color: var(--muted);
+    font-family: var(--font-mono);
+    font-size: 0.62rem;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    text-decoration: none;
+    transition: background 0.2s, color 0.2s, border-color 0.2s;
+    &:hover {
+      background: color-mix(in srgb, var(--muted) 12%, transparent);
+      border-color: var(--muted);
+      color: var(--fg);
+    }
+    svg {
+      width: 0.6875rem;
+      height: 0.6875rem;
+    }
+  }
+}
+@layer reveal {
+  :is(.tag, h1, h2, .body-text, .stat-row, .cta, .cta-back) {
+    opacity: 0;
+    translate: 0 var(--reveal-offset);
+  }
+  :is(h1, h2) {
+    translate: 0 1.125rem;
+    transition: opacity var(--reveal-duration) ease 0.08s,
+      translate var(--reveal-duration) ease 0.08s;
+  }
+  .tag {
+    transition: opacity var(--reveal-duration) ease,
+      translate var(--reveal-duration) ease;
+  }
+  .body-text {
+    transition: opacity var(--reveal-duration) ease 0.2s,
+      translate var(--reveal-duration) ease 0.2s;
+  }
+  .stat-row {
+    transition: opacity var(--reveal-duration) ease 0.3s,
+      translate var(--reveal-duration) ease 0.3s;
+  }
+  :is(.cta, .cta-back) {
+    transition: opacity var(--reveal-duration) ease 0.35s,
+      translate var(--reveal-duration) ease 0.35s, background 0.2s, color 0.2s,
+      border-color 0.2s;
+  }
+  .h-line {
+    opacity: 0;
+    scale: 0 1;
+    transition: opacity 0.4s ease, s
+   <textarea id="init-data" style="display:none">{"__browser":{"country":"DE","device":"unknown_device","mobile":false,"name":"yandex","platform":"linux","version":"26"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; serial *; vr *; web-share *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"data":{"sessionUser":{"id":"vmaLQk","name":"t-13-K+NxE9+ni8!.{{{{{((((..&amp;amp;&amp;amp;&amp;amp;&amp;amp;***..t-13-K+NxE9+ni8!*&amp;amp;&amp;","title":"t-13-K+NxE9+ni8!.{{{{{((((..&amp;amp;&amp;amp;&amp;amp;&amp;amp;***..t-13-K+NxE9+ni8!*&amp;amp;&amp;","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&amp;version=0","currentContext":{"id":"vmaLQk","title":"t-13-K+NxE9+ni8!.{{{{{((((..&amp;amp;&amp;amp;&amp;amp;&amp;amp;***..t-13-K+NxE9+ni8!*&amp;amp;&amp;","name":"t-13-K+NxE9+ni8!.{{{{{((((..&amp;amp;&amp;amp;&amp;amp;&amp;amp;***..t-13-K+NxE9+ni8!*&amp;amp;&amp;","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&amp;version=0","username":"Max-Vors","__typename":"User"},"currentTeamId":null,"username":"Max-Vors","admin":false,"anon":false,"pro":false,"verified":true,"featureFlags":[],"teams":[],"__typename":"User"}}},"url":"https://codepen.io/graphql","api":"cprails"},"__user":{"anon":false,"base_url":"/Max-Vors/","cohorts":[],"current_team_hashid":null,"current_team_id":0,"hashid":"vmaLQk","id":15027949,"itemType":"user","name":"t-13-K+NxE9+ni8!.{{{{{((((..&amp;amp;&amp;amp;&amp;amp;&amp;amp;***..t-13-K+NxE9+ni8!*&amp;amp;&amp;","paid":false,"tier":0,"username":"Max-Vors","created_at":"2025-07-22T11:36:15.496Z","email_verified":true,"collections_count":12,"collections_private_count":1,"followers_count":0,"followings_count":0,"pens_count":17,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoidm1hTFFrIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNzc0NzY5NzEwLCJpYXQiOjE3NzQ3NjYxMTAsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6InZtYUxRayJ9.lPggf8HS6KndSGypiEclGgbXDq4s-fOF8dc1Qe1tXYHxydVyPp8fNIKV1Vuj26BF6rWPqneulzcSvEIcLjaOzvdSkht0SI8VIcERo13Re08-ZibPd6mdUAu3o3M1n3GGNpVNLc8J-ToQ_7TTX_CHxocHMPbP_7D7h4s16qp4IywobgQfi9OcpgUsAdit9pahfrjdCs1_hb_LyEWo06do5vrO2EfNFiUBaYwpUEQy7gQF2bLVSRwqxuUK-MAo0Rw12zwX6DPssVs8PDZgnixdbTDX5Vtb7mOCiY4xdDoY7hJLHn1bYrHKXzjmtuewQBodgUloEBWDl9lCTmMCMWZJmA"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__editor_config":{"id":"classic","editors":[{"id":"html","type":"html","name":"HTML","showEditor":true,"showSettings":true,"showProcessors":true,"embeds":{"showViewCompiled":true},"settings":[{"id":"processor","name":"HTML Preprocessor","type":"select","visible":true,"values":[{"id":"none","name":"None","value":"none","default":true},{"id":"haml","name":"Haml","value":"haml"},{"id":"markdown","name":"Markdown","value":"markdown"},{"id":"slim","name":"Slim","value":"slim"},{"id":"pug","name":"Pug","value":"pug"}]},{"id":"html_classes","name":"Add Class(es) to &lt;html&gt;","type":"input","placeholder":"e.g. single post post-1234","visible":true},{"id":"head","name":"Stuff for &lt;head&gt;","type":"textarea","placeholder":"e.g. &lt;meta&gt;, &lt;link&gt;, &lt;script&gt;","visible":true}],"actions":[{"id":"tidy_html","type":"tidy_code","name":"Format HTML","disabled_processors":["haml","slim"]},{"id":"view_compiled_html","type":"view_compiled","name":"View Compiled HTML","disabled_processors":["none"],"showInEmbeds":true},{"id":"analyze_html","type":"analyze","name":"Analyze HTML"},{"id":"maximize_html_editor","type":"maximize","name":"Maximize HTML Editor"},{"id":"minimize_html_editor","type":"minimize","name":"Minimize HTML Editor"},{"id":"fold_all_html","type":"fold_all","name":"Fold All"},{"id":"unfold_all_html","type":"unfold_all","name":"Unfold All"}],"processors":[{"id":"none","name":"None"},{"id":"haml","name":"Haml"},{"id":"markdown","name":"Markdown"},{"id":"slim","name":"Slim"},{"id":"pug","name":"Pug"}]},{"id":"css","type":"css","name":"CSS","showEditor":true,"showSettings":true,"showProcessors":true,"showVendorPrefixing":true,"embeds":{"showViewCompiled":true},"actions":[{"id":"tidy_css","type":"tidy_code","name":"Format CSS","disabled_processors":["sass","stylus"]},{"id":"view_compiled_css","type":"view_compiled","name":"View Compiled CSS","disabled_processors":["none"],"disabled_prefixes":["neither","prefixfree"]},{"id":"analyze_css","type":"analyze","name":"Analyze CSS"},{"id":"maximize_css_editor","type":"maximize","name":"Maximize CSS Editor"},{"id":"minimize_css_editor","type":"minimize","name":"Minimize CSS Editor"},{"id":"fold_all_css","type":"fold_all","name":"Fold All","disabled_processors":["sass"]},{"id":"unfold_all_css","type":"unfold_all","name":"Unfold All","disabled_processors":["sass"]}],"processors":[{"id":"none","name":"None"},{"id":"less","name":"Less"},{"id":"scss","name":"SCSS"},{"id":"sass","name":"Sass"},{"id":"stylus","name":"Stylus"},{"id":"postcss","name":"PostCSS"}],"parSuffixes":["less","scss","sass","styl"]},{"id":"js","type":"js","name":"JS","showEditor":true,"showSettings":true,"showProcessors":true,"detectImports":true,"externalResourcesHidden":false,"embeds":{"showViewCompiled":true},"actions":[{"id":"tidy_js","type":"tidy_code","name":"Format JavaScript","disabled_processors":["coffeescript, livescript"]},{"id":"view_compiled_js","type":"view_compiled","name":"View Compiled JavaScript","disabled_processors":["none"]},{"id":"analyze_js","type":"analyze","name":"Analyze JavaScript"},{"id":"maximize_js_editor","type":"maximize","name":"Maximize JavaScript Editor"},{"id":"minimize_js_editor","type":"minimize","name":"Minimize JavaScript Editor"},{"id":"fold_all_js","type":"fold_all","name":"Fold All"},{"id":"unfold_all_js","type":"unfold_all","name":"Unfold All"}],"processors":[{"id":"none","name":"None"},{"id":"babel","name":"Babel"},{"id":"typescript","name":"TypeScript"},{"id":"coffeescript","name":"CoffeeScript"},{"id":"livescript","name":"LiveScript"}]}],"formatters":[{"id":"classic","name":"Classic","runOn":[{"eventType":"demand"}],"url":"https://fi593g2v2a.execute-api.us-west-2.amazonaws.com/production/format"}],"layout":{"default":"top"},"linters":[{"id":"classic","name":"Classic","runOn":[{"eventType":"demand"}],"url":"https://fi593g2v2a.execute-api.us-west-2.amazonaws.com/production/lint"}],"preview":{"intervalMaxWaitMS":3500,"intervalMS":1200},"settings":[{"id":"behavior","name":"Behavior","type":"setting"},{"id":"editor","name":"Editor","type":"setting"}]},"__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"default_template\":null,\"emmet_active\":true,\"font_size\":\"15\",\"font_type\":\"system\",\"format_on_save\":true,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"ZYpyoRV\",\"auto_save\":true},\"hashid\":\"ZYpyoRV\",\"itemType\":\"pen\",\"resources\":[],\"tags\":[\"scroll\",\"scrollsync\",\"cow\",\"reverse-creativity\"],\"id\":88247834,\"user_id\":573855,\"html\":\"&lt;div id=\\\"scene\\\"&gt;\\n  &lt;div id=\\\"cube\\\"&gt;\\n    &lt;div class=\\\"face\\\" data-face=\\\"top\\\" data-i=\\\"0\\\"&gt;&lt;span class=\\\"face-ph\\\"&gt;TOP&lt;/span&gt;&lt;/div&gt;\\n    &lt;div class=\\\"face\\\" data-face=\\\"front\\\" data-i=\\\"1\\\"&gt;&lt;span class=\\\"face-ph\\\"&gt;FRONT&lt;/span&gt;&lt;/div&gt;\\n    &lt;div class=\\\"face\\\" data-face=\\\"right\\\" data-i=\\\"2\\\"&gt;&lt;span class=\\\"face-ph\\\"&gt;RIGHT&lt;/span&gt;&lt;/div&gt;\\n    &lt;div class=\\\"face\\\" data-face=\\\"back\\\" data-i=\\\"3\\\"&gt;&lt;span class=\\\"face-ph\\\"&gt;BACK&lt;/span&gt;&lt;/div&gt;\\n    &lt;div class=\\\"face\\\" data-face=\\\"left\\\" data-i=\\\"4\\\"&gt;&lt;span class=\\\"face-ph\\\"&gt;LEFT&lt;/span&gt;&lt;/div&gt;\\n    &lt;div class=\\\"face\\\" data-face=\\\"bottom\\\" data-i=\\\"5\\\"&gt;&lt;span class=\\\"face-ph\\\"&gt;BOTTOM&lt;/span&gt;&lt;/div&gt;\\n  &lt;/div&gt;\\n&lt;/div&gt;\\n\\n&lt;div id=\\\"hud\\\"&gt;\\n  &lt;div id=\\\"hud_pct\\\"&gt;000%&lt;/div&gt;\\n  &lt;div class=\\\"progress-bar\\\"&gt;\\n    &lt;div class=\\\"progress-fill\\\" id=\\\"prog_fill\\\"&gt;&lt;/div&gt;\\n  &lt;/div&gt;\\n  &lt;div class=\\\"scene-label\\\" id=\\\"scene_name\\\"&gt;DESCENT&lt;/div&gt;\\n&lt;/div&gt;\\n\\n&lt;button id=\\\"theme_toggle\\\" aria-label=\\\"Toggle light/dark mode\\\"&gt;\\n  &lt;svg class=\\\"icon-sun\\\" viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.5\\\"&gt;\\n    &lt;circle cx=\\\"12\\\" cy=\\\"12\\\" r=\\\"4\\\" /&gt;\\n    &lt;path d=\\\"M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41\\\" /&gt;\\n  &lt;/svg&gt;\\n  &lt;svg class=\\\"icon-moon\\\" viewBox=\\\"0 0 24 24\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.5\\\"&gt;\\n    &lt;path d=\\\"M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z\\\" /&gt;\\n  &lt;/svg&gt;\\n&lt;/button&gt;\\n\\n&lt;div id=\\\"scene_strip\\\"&gt;\\n  &lt;a href=\\\"#s0\\\" class=\\\"scene-dot active\\\"&gt;&lt;/a&gt;\\n  &lt;a href=\\\"#s1\\\" class=\\\"scene-dot\\\"&gt;&lt;/a&gt;\\n  &lt;a href=\\\"#s2\\\" class=\\\"scene-dot\\\"&gt;&lt;/a&gt;\\n  &lt;a href=\\\"#s3\\\" class=\\\"scene-dot\\\"&gt;&lt;/a&gt;\\n  &lt;a href=\\\"#s4\\\" class=\\\"scene-dot\\\"&gt;&lt;/a&gt;\\n  &lt;a href=\\\"#s5\\\" class=\\\"scene-dot\\\"&gt;&lt;/a&gt;\\n&lt;/div&gt;\\n\\n&lt;div id=\\\"face_caption\\\"&gt;\\n  &lt;div id=\\\"face_caption_num\\\"&gt;01&lt;/div&gt;\\n  &lt;div id=\\\"face_caption_name\\\"&gt;DESCENT&lt;/div&gt;\\n&lt;/div&gt;\\n\\n&lt;div id=\\\"scroll_container\\\"&gt;\\n\\n  &lt;section id=\\\"s0\\\"&gt;\\n    &lt;div class=\\\"text-card\\\"&gt;\\n      &lt;div class=\\\"tag\\\"&gt;Cube Gallery — Bad Art&lt;/div&gt;\\n      &lt;h1&gt;WORK&lt;br&gt;AGAINST&lt;br&gt;THE MODEL&lt;/h1&gt;\\n      &lt;p class=\\\"body-text\\\"&gt;\\n        What happens when you ask AI\\n        to do the opposite of what it was built for?\\n        Break proportion. Flip symmetry.\\n        Leave the mistakes in place.\\n        Scroll to find out.\\n      &lt;/p&gt;\\n      &lt;div class=\\\"cta-row\\\"&gt;\\n        &lt;a class=\\\"cta\\\" href=\\\"#s1\\\"&gt;\\n          Enter\\n          &lt;svg viewBox=\\\"0 0 12 12\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.5\\\"&gt;\\n            &lt;path d=\\\"M1 6h10M6 1l5 5-5 5\\\" /&gt;\\n          &lt;/svg&gt;\\n        &lt;/a&gt;\\n      &lt;/div&gt;\\n    &lt;/div&gt;\\n  &lt;/section&gt;\\n\\n  &lt;section id=\\\"s1\\\"&gt;\\n    &lt;div class=\\\"text-card right\\\"&gt;\\n      &lt;div class=\\\"h-line\\\"&gt;&lt;/div&gt;\\n      &lt;div class=\\\"tag\\\"&gt;01 — Art Rebellion&lt;/div&gt;\\n      &lt;h2&gt;FLIP&lt;br&gt;THE&lt;br&gt;PROMPT&lt;/h2&gt;\\n      &lt;p class=\\\"body-text\\\"&gt;\\n        A cow walking a monster\\n        instead of a monster walking a cow.\\n        That inversion is enough\\n        to break template thinking.\\n        The cape ends up on the wrong body.\\n      &lt;/p&gt;\\n      &lt;div class=\\\"cta-row\\\"&gt;\\n        &lt;a class=\\\"cta-back\\\" href=\\\"#s0\\\"&gt;\\n          &lt;svg viewBox=\\\"0 0 12 12\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.5\\\"&gt;\\n            &lt;path d=\\\"M11 6H1M6 11L1 6l5-5\\\" /&gt;\\n          &lt;/svg&gt;\\n          Back\\n        &lt;/a&gt;\\n        &lt;a class=\\\"cta\\\" href=\\\"#s2\\\"&gt;\\n          Turn\\n          &lt;svg viewBox=\\\"0 0 12 12\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.5\\\"&gt;\\n            &lt;path d=\\\"M1 6h10M6 1l5 5-5 5\\\" /&gt;\\n          &lt;/svg&gt;\\n        &lt;/a&gt;\\n      &lt;/div&gt;\\n    &lt;/div&gt;\\n  &lt;/section&gt;\\n\\n  &lt;section id=\\\"s2\\\"&gt;\\n    &lt;div class=\\\"text-card\\\"&gt;\\n      &lt;div class=\\\"h-line\\\"&gt;&lt;/div&gt;\\n      &lt;div class=\\\"tag\\\"&gt;02 — Moo Walk&lt;/div&gt;\\n      &lt;h2&gt;NEITHER&lt;br&gt;LEADS&lt;/h2&gt;\\n      &lt;p class=\\\"body-text\\\"&gt;\\n        Clashing colors. No balance.\\n        A dance with no choreography.\\n        When the model works against itself\\n        something more genuine surfaces.\\n      &lt;/p&gt;\\n      &lt;div class=\\\"cta-row\\\"&gt;\\n        &lt;a class=\\\"cta-back\\\" href=\\\"#s1\\\"&gt;\\n          &lt;svg viewBox=\\\"0 0 12 12\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.5\\\"&gt;\\n            &lt;path d=\\\"M11 6H1M6 11L1 6l5-5\\\" /&gt;\\n          &lt;/svg&gt;\\n          Back\\n        &lt;/a&gt;\\n        &lt;a class=\\\"cta\\\" href=\\\"#s3\\\"&gt;\\n          Turn\\n          &lt;svg viewBox=\\\"0 0 12 12\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.5\\\"&gt;\\n            &lt;path d=\\\"M1 6h10M6 1l5 5-5 5\\\" /&gt;\\n          &lt;/svg&gt;\\n        &lt;/a&gt;\\n      &lt;/div&gt;\\n    &lt;/div&gt;\\n  &lt;/section&gt;\\n\\n  &lt;section id=\\\"s3\\\"&gt;\\n    &lt;div class=\\\"text-card right\\\"&gt;\\n      &lt;div class=\\\"h-line\\\"&gt;&lt;/div&gt;\\n      &lt;div class=\\\"tag\\\"&gt;03 — Bad Art&lt;/div&gt;\\n      &lt;h2&gt;REVERSE&lt;br&gt;CREATIVITY&lt;/h2&gt;\\n      &lt;p class=\\\"body-text\\\"&gt;\\n        AI is trained to polish and regularize.\\n        The harder direction is unlearning that.\\n        A television for a head\\n        is not an error.\\n        It is the point.\\n      &lt;/p&gt;\\n      &lt;div class=\\\"stat-row\\\" style=\\\"justify-content: flex-end\\\"&gt;\\n        &lt;div class=\\\"stat\\\"&gt;\\n          &lt;span class=\\\"stat-num\\\"&gt;6&lt;/span&gt;\\n          &lt;span class=\\\"stat-label\\\"&gt;Works&lt;/span&gt;\\n        &lt;/div&gt;\\n        &lt;div class=\\\"stat\\\"&gt;\\n          &lt;span class=\\\"stat-num\\\"&gt;360&lt;/span&gt;\\n          &lt;span class=\\\"stat-label\\\"&gt;Degrees&lt;/span&gt;\\n        &lt;/div&gt;\\n        &lt;div class=\\\"stat\\\"&gt;\\n          &lt;span class=\\\"stat-num\\\"&gt;1&lt;/span&gt;\\n          &lt;span class=\\\"stat-label\\\"&gt;Object&lt;/span&gt;\\n        &lt;/div&gt;\\n      &lt;/div&gt;\\n      &lt;div class=\\\"cta-row\\\"&gt;\\n        &lt;a class=\\\"cta-back\\\" href=\\\"#s2\\\"&gt;\\n          &lt;svg viewBox=\\\"0 0 12 12\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.5\\\"&gt;\\n            &lt;path d=\\\"M11 6H1M6 11L1 6l5-5\\\" /&gt;\\n          &lt;/svg&gt;\\n          Back\\n        &lt;/a&gt;\\n        &lt;a class=\\\"cta\\\" href=\\\"#s4\\\"&gt;\\n          Turn\\n          &lt;svg viewBox=\\\"0 0 12 12\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.5\\\"&gt;\\n            &lt;path d=\\\"M1 6h10M6 1l5 5-5 5\\\" /&gt;\\n          &lt;/svg&gt;\\n        &lt;/a&gt;\\n      &lt;/div&gt;\\n    &lt;/div&gt;\\n  &lt;/section&gt;\\n\\n  &lt;section id=\\\"s4\\\"&gt;\\n    &lt;div class=\\\"text-card\\\"&gt;\\n      &lt;div class=\\\"h-line\\\"&gt;&lt;/div&gt;\\n      &lt;div class=\\\"tag\\\"&gt;04 — No Rules&lt;/div&gt;\\n      &lt;h2&gt;NONSENSE&lt;br&gt;AT THE&lt;br&gt;CENTER&lt;/h2&gt;\\n      &lt;p class=\\\"body-text\\\"&gt;\\n        Dada and the surrealists knew this.\\n        Put the absurd at the center\\n        and the edges stop pretending.\\n        Nine heads in the branches.\\n        The sun has a face and it approves.\\n      &lt;/p&gt;\\n      &lt;div class=\\\"cta-row\\\"&gt;\\n        &lt;a class=\\\"cta-back\\\" href=\\\"#s3\\\"&gt;\\n          &lt;svg viewBox=\\\"0 0 12 12\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.5\\\"&gt;\\n            &lt;path d=\\\"M11 6H1M6 11L1 6l5-5\\\" /&gt;\\n          &lt;/svg&gt;\\n          Back\\n        &lt;/a&gt;\\n        &lt;a class=\\\"cta\\\" href=\\\"#s5\\\"&gt;\\n          Turn\\n          &lt;svg viewBox=\\\"0 0 12 12\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.5\\\"&gt;\\n            &lt;path d=\\\"M1 6h10M6 1l5 5-5 5\\\" /&gt;\\n          &lt;/svg&gt;\\n        &lt;/a&gt;\\n      &lt;/div&gt;\\n    &lt;/div&gt;\\n  &lt;/section&gt;\\n\\n  &lt;section id=\\\"s5\\\"&gt;\\n    &lt;div class=\\\"text-card right\\\"&gt;\\n      &lt;div class=\\\"h-line\\\"&gt;&lt;/div&gt;\\n      &lt;div class=\\\"tag\\\"&gt;05 — Super Monsters&lt;/div&gt;\\n      &lt;h2&gt;RAW&lt;br&gt;NOT&lt;br&gt;POLISHED&lt;/h2&gt;\\n      &lt;p class=\\\"body-text\\\"&gt;\\n        Forward creativity takes a sketch\\n        and makes it real.\\n        This goes the other way.\\n        Imperfection left in place\\n        is closer to something honest.\\n      &lt;/p&gt;\\n      &lt;div class=\\\"cta-row\\\"&gt;\\n        &lt;a class=\\\"cta-back\\\" href=\\\"#s4\\\"&gt;\\n          &lt;svg viewBox=\\\"0 0 12 12\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.5\\\"&gt;\\n            &lt;path d=\\\"M11 6H1M6 11L1 6l5-5\\\" /&gt;\\n          &lt;/svg&gt;\\n          Back\\n        &lt;/a&gt;\\n        &lt;a class=\\\"cta\\\" href=\\\"#s0\\\"&gt;\\n          Begin again\\n          &lt;svg viewBox=\\\"0 0 12 12\\\" fill=\\\"none\\\" stroke=\\\"currentColor\\\" stroke-width=\\\"1.5\\\"&gt;\\n            &lt;path d=\\\"M1 6h10M6 1l5 5-5 5\\\" /&gt;\\n          &lt;/svg&gt;\\n        &lt;/a&gt;\\n      &lt;/div&gt;\\n    &lt;/div&gt;\\n  &lt;/section&gt;\\n\\n&lt;/div&gt;\\n\\n&lt;div id=\\\"credit\\\"&gt;\\n  &lt;a href=\\\"https://www.linkedin.com/posts/luis-martinez-lr_ai-creativity-reversecreativity-activity-7366853269517651970-zeUD?utm_source=share&amp;utm_medium=member_desktop&amp;rcm=ACoAAFq1dzgByK1x_NMrcq582OMbK-_3q0DthYY\\\" target=\\\"_blank\\\" rel=\\\"noopener\\\"&gt;Reverse Creativity&lt;/a&gt;\\n&lt;/div&gt;\",\"css\":\"@import url(\\\"https://fonts.googleapis.com/css2?family=Bebas+Neue&amp;family=DM+Mono:wght@300;400&amp;display=swap\\\");\\n\\n@layer reset, tokens, base, layout, cube, ui, cards, reveal, theme, responsive;\\n\\n@layer reset {\\n  *,\\n  *::before,\\n  *::after {\\n    box-sizing: border-box;\\n    margin: 0;\\n    padding: 0;\\n  }\\n}\\n\\n@layer tokens {\\n  :root {\\n    color-scheme: dark;\\n\\n    --dark-bg: #1c1814;\\n    --dark-fg: #ede8df;\\n    --dark-muted: #8a7b6e;\\n    --light-bg: #f0ece3;\\n    --light-fg: #0d0d14;\\n    --light-muted: #9a9aaa;\\n    --accent-dark: #d4a84b;\\n    --accent-light: #3a6e00;\\n\\n    --bg: var(--dark-bg);\\n    --fg: var(--dark-fg);\\n    --muted: var(--dark-muted);\\n    --accent: var(--accent-dark);\\n\\n    --font-display: \\\"Bebas Neue\\\", sans-s@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@300;400&display=swap");
+@layer reset, tokens, base, layout, cube, ui, cards, reveal, theme, responsive;
+@layer reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+}
+@layer tokens {
+  :root {
+    color-scheme: dark;
+    --dark-bg: #1c1814;
+    --dark-fg: #ede8df;
+    --dark-muted: #8a7b6e;
+    --light-bg: #f0ece3;
+    --light-fg: #0d0d14;
+    --light-muted: #9a9aaa;
+    --accent-dark: #d4a84b;
+    --accent-light: #3a6e00;
+    --bg: var(--dark-bg);
+    --fg: var(--dark-fg);
+    --muted: var(--dark-muted);
+    --accent: var(--accent-dark);
+    --font-display: "Bebas Neue", sans-serif;
+    --font-mono: "DM Mono", monospace;
+    --hairline: 0.0625rem;
+    --ui-inset: 2rem;
+    --card-bg: rgba(28, 24, 20, 0.82);
+    --card-border: rgba(212, 168, 75, 0.2);
+    --nav-x: calc(var(--ui-inset) + 0.125rem);
+    --reveal-offset: 0.625rem;
+    --reveal-duration: 0.5s;
+    --z-ui: 10;
+  }
+}
+@layer base {
+  html {
+    color-scheme: dark;
+  }
+  body {
+    background: var(--bg);
+    color: var(--fg);
+    font-family: var(--font-mono);
+    overflow-x: hidden;
+    transition: background 0.3s ease, color 0.3s ease;
+  }
+}
+@layer layout {
+  #scene {
+    position: fixed;
+    inset: 0;
+    z-index: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    perspective: 1100px;
+    pointer-events: none;
+  }
+  #scroll_container {
+    position: relative;
+    z-index: 1;
+  }
+  section {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    padding: 6rem calc(5rem + var(--ui-inset)) 6rem 5rem;
+  }
+}
+@layer cube {
+  #cube {
+    --s: min(74vw, 74vh, 560px);
+    width: var(--s);
+    height: var(--s);
+    position: relative;
+    transform-style: preserve-3d;
+    transform: rotateX(90deg) rotateY(0deg);
+    will-change: transform;
+  }
+  .face {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    backface-visibility: hidden;
+    background: repeating-linear-gradient(
+        0deg,
+        rgba(255, 255, 255, 0.02) 0,
+        rgba(255, 255, 255, 0.02) 1px,
+        transparent 1px,
+        transparent 48px
+      ),
+      repeating-linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0.02) 0,
+        rgba(255, 255, 255, 0.02) 1px,
+        transparent 1px,
+        transparent 48px
+      ),
+      #14100d;
+    img {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+    &:has(img) .face-ph {
+      display: none;
+    }
+  }
+  .face-ph {
+    position: absolute;
+    bottom: 1.5rem;
+    left: 1.75rem;
+    font-family: var(--font-display);
+    font-size: clamp(2rem, 8vw, 5rem);
+    letter-spacing: 0.04em;
+    color: rgba(255, 255, 255, 0.06);
+    pointer-events: none;
+    user-select: none;
+  }
+  .face[data-face="front"] {
+    transform: translateZ(calc(var(--s) / 2));
+  }
+  .face[data-face="back"] {
+    transform: rotateY(180deg) translateZ(calc(var(--s) / 2));
+  }
+  .face[data-face="right"] {
+    transform: rotateY(90deg) translateZ(calc(var(--s) / 2));
+  }
+  .face[data-face="left"] {
+    transform: rotateY(-90deg) translateZ(calc(var(--s) / 2));
+  }
+  .face[data-face="top"] {
+    transform: rotateX(-90deg) translateZ(calc(var(--s) / 2));
+  }
+  .face[data-face="bottom"] {
+    transform: rotateX(90deg) translateZ(calc(var(--s) / 2));
+  }
+}
+@layer ui {
+  #hud {
+    position: fixed;
+    top: var(--ui-inset);
+    right: var(--ui-inset);
+    z-index: var(--z-ui);
+    text-align: right;
+    font-size: 0.65rem;
+    letter-spacing: 0.15em;
+    color: var(--muted);
+    text-transform: uppercase;
+    .progress-bar {
+      width: 7.5rem;
+      height: var(--hairline);
+      background: var(--muted);
+      margin-block-start: 0.5rem;
+      margin-inline-start: auto;
+      position: relative;
+      overflow: hidden;
+    }
+    .progress-fill {
+      position: absolute;
+      inset-block: 0;
+      inset-inline-start: 0;
+      width: 0%;
+      background: var(--accent);
+      transition: width 0.1s linear;
+    }
+    .scene-label {
+      font-size: 0.6rem;
+      color: var(--accent);
+      margin-block-start: 0.4rem;
+    }
+  }
+  #scene_strip {
+    position: fixed;
+    left: var(--nav-x);
+    top: 50%;
+    translate: -50% -50%;
+    z-index: var(--z-ui);
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  .scene-dot {
+    position: relative;
+    display: block;
+    width: 0.25rem;
+    height: 0.25rem;
+    border-radius: 50%;
+    background: var(--muted);
+    transition: background 0.3s, scale 0.3s;
+    cursor: pointer;
+    &::before {
+      content: "";
+      position: absolute;
+      inset: -0.2rem;
+    }
+    &.active {
+      background: var(--accent);
+      scale: 1.8;
+    }
+  }
+  #theme_toggle {
+    position: fixed;
+    bottom: var(--ui-inset);
+    left: var(--nav-x);
+    translate: -50% 0;
+    z-index: var(--z-ui);
+    width: 2rem;
+    height: 2rem;
+    border: none;
+    background: color-mix(in srgb, var(--muted) 35%, transparent);
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.3s;
+    &:hover {
+      background: color-mix(in srgb, var(--muted) 55%, transparent);
+    }
+    svg {
+      width: 0.875rem;
+      height: 0.875rem;
+      position: absolute;
+      transition: opacity 0.3s ease, rotate 0.3s ease;
+      color: var(--accent);
+    }
+    .icon-sun {
+      opacity: 1;
+      rotate: 0deg;
+    }
+    .icon-moon {
+      opacity: 0;
+      rotate: 90deg;
+    }
+  }
+  #face_caption {
+    position: fixed;
+    bottom: var(--ui-inset);
+    left: 50%;
+    translate: -50% 0;
+    z-index: var(--z-ui);
+    text-align: center;
+    pointer-events: none;
+    user-select: none;
+  }
+  #face_caption_num {
+    font-size: 0.58rem;
+    letter-spacing: 0.28em;
+    color: var(--accent);
+    text-transform: uppercase;
+    margin-block-end: 0.15rem;
+  }
+  #face_caption_name {
+    font-family: var(--font-display);
+    font-size: clamp(1.8rem, 5vw, 3.5rem);
+    letter-spacing: 0.08em;
+    color: var(--muted);
+    opacity: 0.5;
+    line-height: 1;
+  }
+  #credit {
+    position: fixed;
+    right: var(--ui-inset);
+    top: 50%;
+    transform: translateY(-50%) rotate(-90deg);
+    transform-origin: right center;
+    z-index: var(--z-ui);
+    font-family: var(--font-mono);
+    font-size: 0.65rem;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+    a {
+      color: var(--muted);
+      text-decoration: none;
+    }
+  }
+}
+@layer cards {
+  .text-card {
+    max-width: 23.75rem;
+    padding: 2.25rem 2rem;
+    background: var(--card-bg);
+    border-left: var(--hairline) solid var(--card-border);
+    backdrop-filter: blur(6px) saturate(120%);
+    -webkit-backdrop-filter: blur(6px) saturate(120%);
+    overflow: hidden;
+    transition: background 0.3s ease, border-color 0.3s ease;
+    &.right {
+      margin-inline-start: auto;
+      border-left: none;
+      border-right: var(--hairline) solid var(--card-border);
+      text-align: right;
+      .h-line {
+        transform-origin: right;
+        margin-inline-start: auto;
+      }
+    }
+    &.center {
+      margin-inline: auto;
+      border-left: none;
+      border-top: var(--hairline) solid var(--card-border);
+      text-align: center;
+      max-width: 28.75rem;
+      .h-line {
+        transform-origin: center;
+        margin-inline: auto;
+      }
+    }
+  }
+  .tag {
+    font-size: 0.6rem;
+    letter-spacing: 0.25em;
+    text-transform: uppercase;
+    color: var(--accent);
+    margin-block-end: 1.1rem;
+  }
+  :where(h1, h2) {
+    font-family: var(--font-display);
+    font-weight: 400;
+    letter-spacing: 0.03em;
+    line-height: 0.92;
+  }
+  h1 {
+    font-size: clamp(3rem, 8vw, 6.5rem);
+  }
+  h2 {
+    font-size: clamp(2.2rem, 5vw, 4rem);
+  }
+  .body-text {
+    font-size: 0.78rem;
+    line-height: 1.8;
+    color: color-mix(in srgb, var(--fg) 55%, transparent);
+    margin-block-start: 1.25rem;
+  }
+  .stat-row {
+    display: flex;
+    gap: 2.5rem;
+    margin-block-start: 2rem;
+    flex-wrap: wrap;
+  }
+  .stat {
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+  }
+  .stat-num {
+    font-family: var(--font-display);
+    font-size: 2.2rem;
+    color: var(--accent);
+    line-height: 1;
+  }
+  .stat-label {
+    font-size: 0.58rem;
+    letter-spacing: 0.2em;
+    text-transform: uppercase;
+    color: var(--muted);
+  }
+  .h-line {
+    width: 3.125rem;
+    height: var(--hairline);
+    background: var(--accent);
+    margin-block-end: 1.2rem;
+    transform-origin: left;
+  }
+  .cta-row {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 0.75rem;
+    margin-block-start: 1.75rem;
+  }
+  .text-card.right .cta-row {
+    justify-content: flex-end;
+  }
+  .cta {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.6rem;
+    padding: 0.6rem 1.25rem;
+    border: var(--hairline) solid var(--accent);
+    color: var(--accent);
+    font-family: var(--font-mono);
+    font-size: 0.62rem;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    text-decoration: none;
+    cursor: pointer;
+    transition: background 0.2s, color 0.2s;
+    &:hover {
+      background: var(--accent);
+      color: var(--bg);
+    }
+    svg {
+      width: 0.6875rem;
+      height: 0.6875rem;
+    }
+  }
+  .cta-back {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.6rem;
+    padding: 0.6rem 1.25rem;
+    border: var(--hairline) solid
+      color-mix(in srgb, var(--muted) 45%, transparent);
+    color: var(--muted);
+    font-family: var(--font-mono);
+    font-size: 0.62rem;
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    text-decoration: none;
+    transition: background 0.2s, color 0.2s, border-color 0.2s;
+    &:hover {
+      background: color-mix(in srgb, var(--muted) 12%, transparent);
+      border-color: var(--muted);
+      color: var(--fg);
+    }
+    svg {
+      width: 0.6875rem;
+      height: 0.6875rem;
+    }
+  }
+}
+@layer reveal {
+  :is(.tag, h1, h2, .body-text, .stat-row, .cta, .cta-back) {
+    opacity: 0;
+    translate: 0 var(--reveal-offset);
+  }
+  :is(h1, h2) {
+    translate: 0 1.125rem;
+    transition: opacity var(--reveal-duration) ease 0.08s,
+      translate var(--reveal-duration) ease 0.08s;
+  }
+  .tag {
+    transition: opacity var(--reveal-duration) ease,
+      translate var(--reveal-duration) ease;
+  }
+  .body-text {
+    transition: opacity var(--reveal-duration) ease 0.2s,
+      translate var(--reveal-duration) ease 0.2s;
+  }
+  .stat-row {
+    transition: opacity var(--reveal-duration) ease 0.3s,
+      translate var(--reveal-duration) ease 0.3s;
+  }
+  :is(.cta, .cta-back) {
+    transition: opacity var(--reveal-duration) ease 0.35s,
+      translate var(--reveal-duration) ease 0.35s, background 0.2s, color 0.2s,
+      border-color 0.2s;
+  }
+  .h-line {
+    opacity: 0;
+    scale: 0 1;
+    transition: opacity 0.4s ease, scale 0.4s ease;
+  }
+  :is(.tag, h1, h2, .body-text, .stat-row, .cta, .cta-back).visible {
+    opacity: 1;
+    translate: 0 0;
+  }
+  .h-line.visible {
+    opacity: 1;
+    scale: 1 1;
+  }
+}
+@layer theme {
+  :root[data-theme="light"] {
+    color-scheme: light;
+    --bg: var(--light-bg);
+    --fg: var(--light-fg);
+    --muted: var(--light-muted);
+    --accent: var(--accent-light);
+    --card-bg: rgba(240, 236, 227, 0.08);
+    --card-border: rgba(58, 110, 0, 0.14);
+    .face {
+      background: repeating-linear-gradient(
+          0deg,
+          rgba(0, 0, 0, 0.05) 0,
+          rgba(0, 0, 0, 0.05) 1px,
+          transparent 1px,
+          transparent 48px
+        ),
+        repeating-linear-gradient(
+          90deg,
+          rgba(0, 0, 0, 0.05) 0,
+          rgba(0, 0, 0, 0.05) 1px,
+          transparent 1px,
+          transparent 48px
+        ),
+        #ddd8cf;
+    }
+    .face-ph {
+      color: rgba(0, 0, 0, 0.07);
+    }
+    #theme_toggle {
+      svg {
+        color: var(--fg);
+      }
+      .icon-sun {
+        opacity: 0;
+        rotate: -90deg;
+      }
+      .icon-moon {
+        opacity: 1;
+        rotate: 0deg;
+      }
+    }
+    #face_caption_name {
+      opacity: 0.35;
+    }
+  }
+}
+@layer responsive {
+  @media (width <= 56.25em) {
+    #hud {
+      top: 1rem;
+      right: 1rem;
+    }
+    #scene_strip {
+      display: none;
+    }
+    #theme_toggle {
+      bottom: 1rem;
+      left: 1.25rem;
+      translate: 0 0;
+    }
+    #face_caption {
+      bottom: 1rem;
+    }
+    section {
+      min-height: 150vh;
+      align-items: flex-end;
+      padding: 0 1.5rem 3.5rem;
+    }
+    #s0 {
+      min-height: 100vh;
+      align-items: center;
+      padding: 4rem 1.5rem;
+    }
+    :is(.text-card, .text-card.right, .text-card.center) {
+      max-width: 100%;
+      padding: 1.5rem 1.25rem;
+    }
+    .body-text {
+      line-height: 1.55;
+    }
+    .stat-row {
+      gap: 1.5rem;
+      margin-block-start: 1.25rem;
+    }
+    .cta-row {
+      margin-block-start: 1.25rem;
+    }
+  }
+}<div id="scene">
+  <div id="cube">
+    <div class="face" data-face="top" data-i="0"><span class="face-ph">TOP</span></div>
+    <div class="face" data-face="front" data-i="1"><span class="face-ph">FRONT</span></div>
+    <div class="face" data-face="right" data-i="2"><span class="face-ph">RIGHT</span></div>
+    <div class="face" data-face="back" data-i="3"><span class="face-ph">BACK</span></div>
+    <div class="face" data-face="left" data-i="4"><span class="face-ph">LEFT</span></div>
+    <div class="face" data-face="bottom" data-i="5"><span class="face-ph">BOTTOM</span></div>
+  </div>
+</div>
+<div id="hud">
+  <div id="hud_pct">000%</div>
+  <div class="progress-bar">
+    <div class="progress-fill" id="prog_fill"></div>
+  </div>
+  <div class="scene-label" id="scene_name">DESCENT</div>
+</div>
+<button id="theme_toggle" aria-label="Toggle light/dark mode">
+  <svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+    <circle cx="12" cy="12" r="4" />
+    <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" />
+  </svg>
+  <svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+    <path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z" />
+  </svg>
+</button>
+<div id="scene_strip">
+  <a href="#s0" class="scene-dot active"></a>
+  <a href="#s1" class="scene-dot"></a>
+  <a href="#s2" class="scene-dot"></a>
+  <a href="#s3" class="scene-dot"></a>
+  <a href="#s4" class="scene-dot"></a>
+  <a href="#s5" class="scene-dot"></a>
+</div>
+<div id="face_caption">
+  <div id="face_caption_num">01</div>
+  <div id="face_caption_name">DESCENT</div>
+</div>
+<div id="scroll_container">
+  <section id="s0">
+    <div class="text-card">
+      <div class="tag">Cube Gallery — Bad Art</div>
+      <h1>WORK<br>AGAINST<br>THE MODEL</h1>
+      <p class="body-text">
+        What happens when you ask AI
+        to do the opposite of what it was built for?
+        Break proportion. Flip symmetry.
+        Leave the mistakes in place.
+        Scroll to find out.
+      </p>
+      <div class="cta-row">
+        <a class="cta" href="#s1">
+          Enter
+          <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
+            <path d="M1 6h10M6 1l5 5-5 5" />
+          </svg>
+        </a>
+      </div>
+    </div>
+  </section>
+  <section id="s1">
+    <div class="text-card right">
+      <div class="h-line"></div>
+      <div class="tag">01 — Art Rebellion</div>
+      <h2>FLIP<br>THE<br>PROMPT</h2>
+      <p class="body-text">
+        A cow walking a monster
+        instead of a monster walking a cow.
+        That inversion is enough
+        to break template thinking.
+        The cape ends up on the wrong body.
+      </p>
+      <div class="cta-row">
+        <a class="cta-back" href="#s0">
+          <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
+            <path d="M11 6H1M6 11L1 6l5-5" />
+          </svg>
+          Back
+        </a>
+        <a class="cta" href="#s2">
+          Turn
+          <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
+            <path d="M1 6h10M6 1l5 5-5 5" />
+          </svg>
+        </a>
+      </div>
+    </div>
+  </section>
+  <section id="s2">
+    <div class="text-card">
+      <div class="h-line"></div>
+      <div class="tag">02 — Moo Walk</div>
+      <h2>NEITHER<br>LEADS</h2>
+      <p class="body-text">
+        Clashing colors. No balance.
+        A dance with no choreography.
+        When the model works against itself
+        something more genuine surfaces.
+      </p>
+      <div class="cta-row">
+        <a class="cta-back" href="#s1">
+          <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
+            <path d="M11 6H1M6 11L1 6l5-5" />
+          </svg>
+          Back
+        </a>
+        <a class="cta" href="#s3">
+          Turn
+          <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
+            <path d="M1 6h10M6 1l5 5-5 5" />
+          </svg>
+        </a>
+      </div>
+    </div>
+  </section>
+  <section id="s3">
+    <div class="text-card right">
+      <div class="h-line"></div>
+      <div class="tag">03 — Bad Art</div>
+      <h2>REVERSE<br>CREATIVITY</h2>
+      <p class="body-text">
+        AI is trained to polish and regularize.
+        The harder direction is unlearning that.
+        A television for a head
+        is not an error.
+        It is the point.
+      </p>
+      <div class="stat-row" style="justify-content: flex-end">
+        <div class="stat">
+          <span class="stat-num">6</span>
+          <span class="stat-label">Works</span>
+        </div>
+        <div class="stat">
+          <span class="stat-num">360</span>
+          <span class="stat-label">Degrees</span>
+        </div>
+        <div class="stat">
+          <span class="stat-num">1</span>
+          <span class="stat-label">Object</span>
+        </div>
+      </div>
+      <div class="cta-row">
+        <a class="cta-back" href="#s2">
+          <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
+            <path d="M11 6H1M6 11L1 6l5-5" />
+          </svg>
+          Back
+        </a>
+        <a class="cta" href="#s4">
+          Turn
+          <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
+            <path d="M1 6h10M6 1l5 5-5 5" />
+          </svg>
+        </a>
+      </div>
+    </div>
+  </section>
+  <section id="s4">
+    <div class="text-card">
+      <div class="h-line"></div>
+      <div class="tag">04 — No Rules</div>
+      <h2>NONSENSE<br>AT THE<br>CENTER</h2>
+      <p class="body-text">
+        Dada and the surrealists knew this.
+        Put the absurd at the center
+        and the edges stop pretending.
+        Nine heads in the branches.
+        The sun has a face and it approves.
+      </p>
+      <div class="cta-row">
+        <a class="cta-back" href="#s3">
+          <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
+            <path d="M11 6H1M6 11L1 6l5-5" />
+          </svg>
+          Back
+        </a>
+        <a class="cta" href="#s5">
+          Turn
+          <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
+            <path d="M1 6h10M6 1l5 5-5 5" />
+          </svg>
+        </a>
+      </div>wdEWs
+    </div>
+  </section>
+  <section id="s5">
+    <div class="text-card right">
+      <div class="h-line"></div>
+      <div class="tag">05 — Super Monsters</div>
+      <h2>RAW<br>NOT<br>POLISHED</h2>
+      <p class="body-text">
+        Forward creativity takes a sketch
+        and makes it real.
+        This goes the other way.
+        Imperfection left in place
+        is closer to something honest.
+      </p>
+      <div class="cta-row">
+        <a class="cta-back" href="#s4">
+          <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
+            <path d="M11 6H1M6 11L1 6l5-5" />
+          </svg>
+          Back
+        </a>
+        <a class="cta" href="#s0">
+          Begin again
+          <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
+            <path d="M1 6h10M6 1l5 5-5 5" />
+          </svg>
+        </a>
+      </div>
+    </div>
+  </section>
+</div>
+<div id="credit">
+  <a href="https://www.linkedin.com/posts/luis-martinez-lr_ai-creativity-reversecreativity-activity-7366853269517651970-zeUD?utm_source=share&utm_medium=member_desktop&rcm=ACoAAFq1dzgByK1x_NMrcq582OMbK-_3q0DthYY" target="_blank" rel="noopener">Reverse Creativity</a>
+</div>body {
 	padding: 2rem;
 	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }