update

.superpowers/brainstorm/73376-1779100666/content/background.html

@@ -0,0 +1,98 @@
+<h2>Background Treatment</h2>
+<p class="subtitle">The background sets the whole mood. All options use Dracula's base color (#282a36) as the foundation.</p>
+
+<style>
+.bg-preview {
+  width: 100%;
+  height: 110px;
+  border-radius: 8px;
+  margin-top: 10px;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bg-label {
+  font-family: ui-monospace, monospace;
+  font-size: 11px;
+  color: rgba(248,248,242,0.5);
+  letter-spacing: 0.08em;
+}
+
+/* A: flat clean */
+.bg-flat {
+  background: #282a36;
+}
+
+/* B: radial aurora glow */
+.bg-aurora {
+  background: #282a36;
+  background-image:
+    radial-gradient(ellipse at 20% 30%, rgba(189,147,249,0.18) 0%, transparent 55%),
+    radial-gradient(ellipse at 80% 70%, rgba(255,121,198,0.12) 0%, transparent 50%),
+    radial-gradient(ellipse at 55% 90%, rgba(139,233,253,0.08) 0%, transparent 45%);
+}
+
+/* C: subtle grid */
+.bg-grid {
+  background: #282a36;
+  background-image:
+    linear-gradient(rgba(68,71,90,0.4) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(68,71,90,0.4) 1px, transparent 1px);
+  background-size: 24px 24px;
+}
+
+/* D: dot matrix */
+.bg-dots {
+  background: #282a36;
+  background-image: radial-gradient(circle, rgba(98,114,164,0.5) 1px, transparent 1px);
+  background-size: 20px 20px;
+}
+</style>
+
+<div class="options">
+  <div class="option" data-choice="flat" onclick="toggleSelect(this)">
+    <div class="letter">A</div>
+    <div class="content">
+      <h3>Flat & Clean</h3>
+      <p>Pure #282a36, no texture. Maximum focus on content. Closest to how most Dracula apps look.</p>
+      <div class="bg-preview bg-flat">
+        <span class="bg-label">#282a36 — pure</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="option" data-choice="aurora" onclick="toggleSelect(this)">
+    <div class="letter">B</div>
+    <div class="content">
+      <h3>Aurora Glow</h3>
+      <p>Subtle radial gradients using Dracula's purple, pink, and cyan — like a soft aurora bleeding through the dark. Gives depth without noise.</p>
+      <div class="bg-preview bg-aurora">
+        <span class="bg-label">radial glows — purple / pink / cyan</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="option" data-choice="grid" onclick="toggleSelect(this)">
+    <div class="letter">C</div>
+    <div class="content">
+      <h3>Subtle Grid</h3>
+      <p>Faint 24px grid overlay on the dark background. Keeps a technical/terminal feel while the cards are soft. Nod to graph paper or circuit boards.</p>
+      <div class="bg-preview bg-grid">
+        <span class="bg-label">24px grid — #44475a lines</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="option" data-choice="dots" onclick="toggleSelect(this)">
+    <div class="letter">D</div>
+    <div class="content">
+      <h3>Dot Matrix</h3>
+      <p>Subtle dot pattern — evokes old terminal screens and LED matrices. Quiet texture, doesn't compete with content.</p>
+      <div class="bg-preview bg-dots">
+        <span class="bg-label">20px dot grid — comment color dots</span>
+      </div>
+    </div>
+  </div>
+</div>