Initial Gradio Space — Dream Museum

.env.example

@@ -0,0 +1,2 @@
+HF_TOKEN=hf_your_token_here
+GALLERY_DATASET=your-hf-username/dream-museum-gallery

.gitattributes

@@ -1,35 +1 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text
+*.glb filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,11 @@
+env/
+not-the-louvre/
+__pycache__/
+*.pyc
+.env
+*.egg-info/
+.DS_Store
+Thumbs.db
+static/marco.html
+static/marco.css
+static/marco.js

Dockerfile

@@ -0,0 +1,29 @@
+FROM nvidia/cuda:12.1.0-cudnn8-runtime-ubuntu22.04
+
+WORKDIR /app
+
+ENV DEBIAN_FRONTEND=noninteractive
+ENV PYTHONUNBUFFERED=1
+
+# Python + git
+RUN apt-get update && \
+    apt-get install -y python3.11 python3.11-dev python3-pip git curl && \
+    ln -sf python3.11 /usr/bin/python && \
+    ln -sf python3.11 /usr/bin/python3 && \
+    rm -rf /var/lib/apt/lists/*
+
+# Torch with CUDA 12.1 first (avoids pip installing CPU version later)
+RUN pip install --no-cache-dir \
+    torch==2.3.0 torchvision \
+    --index-url https://download.pytorch.org/whl/cu121
+
+# Remaining dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# App files
+COPY . .
+
+EXPOSE 7860
+
+CMD ["python", "app.py"]

README.md

@@ -1,13 +1,42 @@
 ---
 title: Dream Museum
-emoji: 📊
-colorFrom: green
-colorTo: indigo
+emoji: 🌙
+colorFrom: purple
+colorTo: pink
 sdk: gradio
 sdk_version: 6.16.0
-python_version: '3.13'
 app_file: app.py
 pinned: false
+license: mit
+short_description: Draw a dream · Describe it · Watch it materialize
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# ◈ Dream Museum
+
+*Draw a dream · Describe it · Watch it materialize · Hang it in the museum*
+
+Built for the **HuggingFace Build Small Hackathon 2026** — Thousand Token Wood track.
+
+## How it works
+
+1. Open the Gradio interface and sketch your dream on the canvas
+2. Describe it in words
+3. SDXL + ControlNet-scribble materializes it into an image
+4. Save it to the public museum or keep it private
+5. Visit the 3D museum to see all exhibited dreams
+
+## Models used
+
+| Model | Params | Role |
+|---|---|---|
+| [stabilityai/stable-diffusion-xl-base-1.0](https://huggingface.co/stabilityai/stable-diffusion-xl-base-1.0) | ~3.5B | Image generation |
+| [xinsir/controlnet-scribble-sdxl-1.0](https://huggingface.co/xinsir/controlnet-scribble-sdxl-1.0) | ~1.4B | Sketch guidance |
+
+**Total: ~5B parameters** — well within the 32B limit.
+
+## Environment variables (Space secrets)
+
+| Variable | Description |
+|---|---|
+| `HF_TOKEN` | HuggingFace token with write access to the gallery dataset |
+| `GALLERY_DATASET` | Dataset repo ID, e.g. `your-username/dream-museum-gallery` |

app.py

@@ -0,0 +1,209 @@
+import io
+import base64
+from pathlib import Path
+
+from dotenv import load_dotenv
+load_dotenv()
+
+from fastapi import FastAPI, Request
+from fastapi.responses import FileResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
+from PIL import Image
+import gradio as gr
+import uvicorn
+
+import gallery as gallery_module
+import inference as inference_module
+
+STATIC = Path(__file__).parent / "static"
+
+# ── FastAPI app (serves the 3D frontend + JSON API) ───────────────────────────
+
+app = FastAPI()
+app.mount("/static", StaticFiles(directory=str(STATIC)), name="static")
+
+
+@app.get("/museum")
+async def museum():
+    return FileResponse(str(STATIC / "index.html"))
+
+
+@app.get("/galeria")
+async def galeria():
+    return FileResponse(str(STATIC / "galeria.html"))
+
+
+@app.post("/generate")
+async def generate_endpoint(request: Request):
+    body = await request.json()
+    sketch_b64  = body.get("sketch_b64", "")
+    description = body.get("description", "").strip()
+    strength    = float(body.get("strength", 0.7))
+    if not sketch_b64 or not description:
+        return JSONResponse({"ok": False, "error": "Sketch and description are required"})
+    try:
+        image_b64 = inference_module.generate(sketch_b64, description, strength)
+        return JSONResponse({"ok": True, "image": image_b64})
+    except Exception as e:
+        return JSONResponse({"ok": False, "error": str(e)})
+
+
+@app.post("/gallery/public")
+async def public_gallery(request: Request):
+    body   = await request.json()
+    dreams = gallery_module.get_public_dreams(body.get("limit", 50), body.get("offset", 0))
+    return JSONResponse({"ok": True, "dreams": dreams})
+
+
+@app.post("/gallery/user")
+async def user_gallery(request: Request):
+    body    = await request.json()
+    user_id = body.get("user_id", "")
+    if not user_id:
+        return JSONResponse({"ok": False, "error": "user_id required"})
+    return JSONResponse({"ok": True, "dreams": gallery_module.get_user_dreams(user_id)})
+
+
+@app.post("/gallery/save")
+async def save_dream_endpoint(request: Request):
+    body    = await request.json()
+    user_id = body.get("user_id", "")
+    if not user_id:
+        return JSONResponse({"ok": False, "error": "Login required to save dreams"})
+    result = gallery_module.save_dream(
+        user_id,
+        body.get("sketch_b64", ""),
+        body.get("image_b64", ""),
+        body.get("description", ""),
+        body.get("visibility", "public"),
+    )
+    return JSONResponse(result)
+
+
+@app.post("/gallery/delete")
+async def delete_dream_endpoint(request: Request):
+    body   = await request.json()
+    result = gallery_module.delete_dream(body.get("dream_id", ""), body.get("user_id", ""))
+    return JSONResponse(result)
+
+
+@app.post("/gallery/toggle")
+async def toggle_visibility_endpoint(request: Request):
+    body   = await request.json()
+    result = gallery_module.toggle_visibility(body.get("dream_id", ""), body.get("user_id", ""))
+    return JSONResponse(result)
+
+
+# ── Gradio generation function ────────────────────────────────────────────────
+
+def _gradio_generate(sketch_data, description: str, strength: float):
+    """Gradio event handler: sketchpad → dream image."""
+    if sketch_data is None or not description.strip():
+        return None
+
+    # gr.Sketchpad returns {"composite": PIL, "background": PIL, "layers": [...]}
+    sketch_img = (
+        sketch_data.get("composite")
+        if isinstance(sketch_data, dict)
+        else sketch_data
+    )
+    if sketch_img is None:
+        return None
+
+    buf = io.BytesIO()
+    sketch_img.convert("RGB").save(buf, format="PNG")
+    sketch_b64 = "data:image/png;base64," + base64.b64encode(buf.getvalue()).decode()
+
+    image_b64 = inference_module.generate(sketch_b64, description.strip(), float(strength))
+
+    img_bytes = base64.b64decode(image_b64)
+    return Image.open(io.BytesIO(img_bytes)).convert("RGB")
+
+
+# ── Gradio Blocks UI ──────────────────────────────────────────────────────────
+
+theme_css = """
+body, html {
+  background-color: #0b0813 !important;
+}
+.gradio-container {
+  max-width: 1400px !important;
+  background: #0f0b1e !important;
+  border: 1px solid #2d244a !important;
+  border-radius: 16px !important;
+  box-shadow: 0 20px 50px rgba(0,0,0,0.5) !important;
+}
+.tab-nav button {
+  font-family: 'Cormorant Garamond', Georgia, serif !important;
+  font-size: 1.15rem !important;
+  color: #9880a8 !important;
+}
+.tab-nav button.selected {
+  color: #f0cc6e !important;
+}
+"""
+
+with gr.Blocks(title="Dream Museum", css=theme_css) as demo:
+
+    gr.HTML("""
+    <style>
+      footer { display: none !important; }
+      @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;1,300;1,400&display=swap');
+    </style>
+    <div style="text-align:center;padding:24px 20px 10px;font-family:'Cormorant Garamond',Georgia,serif">
+      <p style="color:#c9a030;font-size:1.5rem;margin:0">◈</p>
+      <h1 style="font-size:2.5rem;font-weight:300;font-style:italic;letter-spacing:.15em;color:#f0cc6e;margin:6px 0">Dream Museum</h1>
+      <p style="color:#9880a8;font-style:italic;font-size:.95rem;margin:0">Draw a dream · Describe it · Watch it come alive</p>
+    </div>
+    """)
+
+    with gr.Row(equal_height=False):
+        with gr.Column(scale=1):
+            sketch_input = gr.Sketchpad(
+                label="Sketch your dream",
+                type="pil",
+                height=440,
+            )
+
+        with gr.Column(scale=1):
+            desc_input = gr.Textbox(
+                label="Describe your dream",
+                placeholder=(
+                    "A cathedral of clouds, golden light through impossible windows, "
+                    "the sensation of floating between colours…"
+                ),
+                lines=5,
+            )
+            strength_slider = gr.Slider(
+                minimum=0.3, maximum=1.0, value=0.7, step=0.05,
+                label="Sketch faithfulness",
+                info="Low = free interpretation · High = follows your sketch",
+            )
+            generate_btn = gr.Button("✶  Materialize Dream", variant="primary", size="lg")
+            dream_output = gr.Image(
+                label="Your dream",
+                type="pil",
+                height=300,
+            )
+
+    generate_btn.click(
+        fn=_gradio_generate,
+        inputs=[sketch_input, desc_input, strength_slider],
+        outputs=[dream_output],
+    )
+
+    gr.HTML("""
+    <div style="text-align: center; margin-top: 15px; font-family: 'Cormorant Garamond', Georgia, serif;">
+      <a href="/museum" target="_blank" style="color: #f0cc6e; text-decoration: none; font-size: 1.1rem; letter-spacing: 0.1em; transition: color 0.3s;">
+        ◈ &nbsp; Open 3D Dream Museum →
+      </a>
+    </div>
+    """)
+
+
+# Mount Gradio at / — the 3D museum is served at /museum
+app = gr.mount_gradio_app(app, demo, path="/")
+
+
+if __name__ == "__main__":
+    uvicorn.run(app, host="0.0.0.0", port=7860)

gallery.py

@@ -0,0 +1,139 @@
+import base64
+import io
+import json
+import os
+import uuid
+from datetime import datetime
+
+from huggingface_hub import HfApi, hf_hub_download
+from PIL import Image
+
+DATASET_REPO = os.environ.get("GALLERY_DATASET", "")
+HF_TOKEN = os.environ.get("HF_TOKEN", "")
+
+_api = None
+
+
+def _get_api() -> HfApi:
+    global _api
+    if _api is None:
+        _api = HfApi(token=HF_TOKEN)
+    return _api
+
+
+def _pil_from_b64(b64: str) -> Image.Image:
+    if "," in b64:
+        b64 = b64.split(",", 1)[1]
+    return Image.open(io.BytesIO(base64.b64decode(b64))).convert("RGB")
+
+
+def _upload_image(img: Image.Image, path_in_repo: str) -> str:
+    buf = io.BytesIO()
+    img.save(buf, format="PNG")
+    buf.seek(0)
+    api = _get_api()
+    api.upload_file(
+        path_or_fileobj=buf,
+        path_in_repo=path_in_repo,
+        repo_id=DATASET_REPO,
+        repo_type="dataset",
+    )
+    return f"https://huggingface.co/datasets/{DATASET_REPO}/resolve/main/{path_in_repo}"
+
+
+def _load_index() -> list[dict]:
+    if not DATASET_REPO:
+        return []
+    try:
+        path = hf_hub_download(
+            repo_id=DATASET_REPO,
+            filename="index.json",
+            repo_type="dataset",
+            token=HF_TOKEN,
+        )
+        with open(path) as f:
+            return json.load(f)
+    except Exception:
+        return []
+
+
+def _save_index(entries: list[dict]):
+    api = _get_api()
+    data = json.dumps(entries, ensure_ascii=False, indent=2).encode()
+    api.upload_file(
+        path_or_fileobj=io.BytesIO(data),
+        path_in_repo="index.json",
+        repo_id=DATASET_REPO,
+        repo_type="dataset",
+    )
+
+
+def save_dream(
+    user_id: str,
+    sketch_b64: str,
+    image_b64: str,
+    description: str,
+    visibility: str,  # "public" | "private"
+) -> dict:
+    if not DATASET_REPO:
+        return {"ok": False, "error": "Gallery not configured"}
+
+    dream_id = str(uuid.uuid4())[:8]
+    timestamp = datetime.utcnow().isoformat()
+
+    sketch_url = _upload_image(
+        _pil_from_b64(sketch_b64), f"dreams/{dream_id}/sketch.png"
+    )
+    image_url = _upload_image(
+        _pil_from_b64(image_b64), f"dreams/{dream_id}/dream.png"
+    )
+
+    entry = {
+        "id": dream_id,
+        "user_id": user_id,
+        "description": description,
+        "visibility": visibility,
+        "sketch_url": sketch_url,
+        "image_url": image_url,
+        "timestamp": timestamp,
+    }
+
+    entries = _load_index()
+    entries.insert(0, entry)
+    _save_index(entries)
+
+    return {"ok": True, "id": dream_id}
+
+
+def get_public_dreams(limit: int = 50, offset: int = 0) -> list[dict]:
+    entries = _load_index()
+    public = [e for e in entries if e.get("visibility") == "public"]
+    return public[offset : offset + limit]
+
+
+def get_user_dreams(user_id: str, limit: int = 50) -> list[dict]:
+    entries = _load_index()
+    return [e for e in entries if e.get("user_id") == user_id][:limit]
+
+
+def delete_dream(dream_id: str, user_id: str) -> dict:
+    entries = _load_index()
+    original_len = len(entries)
+    entries = [
+        e for e in entries
+        if not (e["id"] == dream_id and e["user_id"] == user_id)
+    ]
+    if len(entries) == original_len:
+        return {"ok": False, "error": "Not found or unauthorized"}
+    _save_index(entries)
+    return {"ok": True}
+
+
+def toggle_visibility(dream_id: str, user_id: str) -> dict:
+    entries = _load_index()
+    for e in entries:
+        if e["id"] == dream_id and e["user_id"] == user_id:
+            e["visibility"] = "private" if e["visibility"] == "public" else "public"
+            _save_index(entries)
+            return {"ok": True, "visibility": e["visibility"]}
+    return {"ok": False, "error": "Not found or unauthorized"}

inference.py

@@ -0,0 +1,70 @@
+import base64
+import io
+import torch
+from PIL import Image
+from diffusers import StableDiffusionXLControlNetPipeline, ControlNetModel
+
+_pipe = None
+
+
+def _load_pipeline():
+    global _pipe
+    if _pipe is not None:
+        return _pipe
+
+    print("Loading ControlNet...")
+    controlnet = ControlNetModel.from_pretrained(
+        "xinsir/controlnet-scribble-sdxl-1.0",
+        torch_dtype=torch.float16,
+    )
+
+    print("Loading SDXL...")
+    _pipe = StableDiffusionXLControlNetPipeline.from_pretrained(
+        "stabilityai/stable-diffusion-xl-base-1.0",
+        controlnet=controlnet,
+        torch_dtype=torch.float16,
+        variant="fp16",
+        use_safetensors=True,
+    ).to("cuda")
+
+    _pipe.enable_attention_slicing()
+    _pipe.enable_vae_slicing()
+
+    print("Pipeline ready.")
+    return _pipe
+
+
+def _b64_to_pil(b64: str) -> Image.Image:
+    # strip data URI prefix if present
+    if "," in b64:
+        b64 = b64.split(",", 1)[1]
+    return Image.open(io.BytesIO(base64.b64decode(b64))).convert("RGB")
+
+
+def _pil_to_b64(img: Image.Image) -> str:
+    buf = io.BytesIO()
+    img.save(buf, format="PNG")
+    return base64.b64encode(buf.getvalue()).decode()
+
+
+def generate(sketch_b64: str, description: str, strength: float = 0.7) -> str:
+    pipe = _load_pipeline()
+
+    sketch = _b64_to_pil(sketch_b64).resize((1024, 1024))
+
+    negative_prompt = (
+        "ugly, blurry, low quality, distorted, deformed, watermark, text, signature"
+    )
+
+    result = pipe(
+        prompt=description,
+        negative_prompt=negative_prompt,
+        image=sketch,
+        controlnet_conditioning_scale=strength,
+        num_inference_steps=30,
+        guidance_scale=7.5,
+        height=1024,
+        width=1024,
+    ).images[0]
+
+    return _pil_to_b64(result)

requirements.txt

@@ -0,0 +1,13 @@
+gradio==6.16.0
+fastapi>=0.111.0
+uvicorn>=0.29.0
+python-multipart>=0.0.9
+diffusers==0.30.3
+transformers==4.44.2
+accelerate==0.33.0
+# torch installed separately in Dockerfile with CUDA support
+# for local dev: pip install torch torchvision --index-url https://download.pytorch.org/whl/cu128
+controlnet-aux>=0.0.9
+Pillow>=10.0.0
+huggingface_hub>=0.24.0
+python-dotenv

static/app.js

@@ -0,0 +1,357 @@
+import { init as initScene, setPaintings } from '/static/scene.js';
+
+// ── State ─────────────────────────────────────────────────────────────────────
+const state = {
+  userId:      localStorage.getItem('dm_user') || '',
+  lastSketch:  null,
+  lastDream:   null,
+  activePanel: null,
+};
+
+// ── API helper ────────────────────────────────────────────────────────────────
+async function api(path, body) {
+  const r = await fetch(path, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  });
+  return r.json();
+}
+
+// ── Boot ──────────────────────────────────────────────────────────────────────
+document.addEventListener('DOMContentLoaded', async () => {
+  initScene(document.getElementById('museum-canvas'), openDreamModal);
+
+  if (state.userId) _applyAuth(state.userId);
+
+  await _refreshMuseum();
+
+  _initHUD();
+  _initAuth();
+  _initDrawCanvas();
+  _initControls();
+  _initModal();
+  _initSaveBtns();
+});
+
+// ── Museum ────────────────────────────────────────────────────────────────────
+async function _refreshMuseum() {
+  const data = await api('/gallery/public', { limit: 12, offset: 0 });
+  if (data.ok) setPaintings(data.dreams);
+}
+
+// ── HUD / panels ──────────────────────────────────────────────────────────────
+function _initHUD() {
+  document.getElementById('btn-create').addEventListener('click',    () => _openPanel('create'));
+  document.getElementById('btn-my-gallery').addEventListener('click', () => _openPanel('gallery'));
+  document.getElementById('close-create').addEventListener('click',   () => _openPanel(null));
+  document.getElementById('close-gallery').addEventListener('click',  () => _openPanel(null));
+}
+
+function _openPanel(name) {
+  if (state.activePanel) {
+    document.getElementById(`panel-${state.activePanel}`).classList.remove('open');
+  }
+  state.activePanel = name;
+  const canvas = document.getElementById('museum-canvas');
+
+  if (name) {
+    const panel = document.getElementById(`panel-${name}`);
+    panel.classList.remove('hidden');
+    requestAnimationFrame(() => panel.classList.add('open'));
+    canvas.classList.add('dimmed');
+    document.getElementById('room-hint').classList.add('hidden');
+    if (name === 'gallery') _loadUserGallery();
+  } else {
+    canvas.classList.remove('dimmed');
+    document.getElementById('room-hint').classList.remove('hidden');
+  }
+}
+
+// Hide panel after slide-out transition ends
+document.addEventListener('transitionend', e => {
+  const el = e.target;
+  if (el.classList.contains('side-panel') && !el.classList.contains('open')) {
+    el.classList.add('hidden');
+  }
+});
+
+// ── Auth ──────────────────────────────────────────────────────────────────────
+function _initAuth() {
+  const input = document.getElementById('auth-input');
+  const btn   = document.getElementById('auth-btn');
+  btn.addEventListener('click', () => { const v = input.value.trim(); if (v) _applyAuth(v); });
+  input.addEventListener('keydown', e => { if (e.key === 'Enter') btn.click(); });
+}
+
+function _applyAuth(name) {
+  state.userId = name;
+  localStorage.setItem('dm_user', name);
+
+  document.getElementById('auth-input').classList.add('hidden');
+  document.getElementById('auth-btn').classList.add('hidden');
+  const nameEl = document.getElementById('auth-name');
+  nameEl.textContent = `✦ ${name}`;
+  nameEl.classList.remove('hidden');
+
+  _updateSaveArea();
+}
+
+// ── Drawing canvas ─────────────────────────────────────────────────────────────
+function _initDrawCanvas() {
+  const canvas = document.getElementById('draw-canvas');
+  const ctx    = canvas.getContext('2d');
+  ctx.fillStyle = '#0f0d1e';
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+  let drawing = false, tool = 'pen', color = '#ffffff', size = 6;
+
+  // Brush preview dot
+  const preview = document.getElementById('brush-preview');
+  function _updatePreview() {
+    preview.style.width  = Math.min(size, 24) + 'px';
+    preview.style.height = Math.min(size, 24) + 'px';
+    preview.style.background = tool === 'eraser' ? 'rgba(255,255,255,.3)' : color;
+  }
+  _updatePreview();
+
+  function pos(e) {
+    const r  = canvas.getBoundingClientRect();
+    const sx = canvas.width  / r.width;
+    const sy = canvas.height / r.height;
+    const s  = e.touches ? e.touches[0] : e;
+    return { x: (s.clientX - r.left) * sx, y: (s.clientY - r.top) * sy };
+  }
+
+  function down(e) {
+    e.preventDefault();
+    drawing = true;
+    const { x, y } = pos(e);
+    ctx.beginPath(); ctx.moveTo(x, y);
+  }
+
+  function move(e) {
+    e.preventDefault();
+    if (!drawing) return;
+    const { x, y } = pos(e);
+    ctx.lineWidth   = tool === 'eraser' ? size * 3 : size;
+    ctx.strokeStyle = tool === 'eraser' ? '#0f0d1e' : color;
+    ctx.lineCap = ctx.lineJoin = 'round';
+    ctx.globalAlpha = 1;
+    ctx.lineTo(x, y); ctx.stroke();
+    ctx.beginPath(); ctx.moveTo(x, y);
+  }
+
+  function up() { drawing = false; ctx.beginPath(); }
+
+  canvas.addEventListener('mousedown',  down);
+  canvas.addEventListener('mousemove',  move);
+  canvas.addEventListener('mouseup',    up);
+  canvas.addEventListener('mouseleave', up);
+  canvas.addEventListener('touchstart', down, { passive: false });
+  canvas.addEventListener('touchmove',  move, { passive: false });
+  canvas.addEventListener('touchend',   up);
+
+  // Tool buttons
+  document.getElementById('t-pen').addEventListener('click', () => {
+    tool = 'pen'; _setActiveTool('t-pen'); _updatePreview();
+  });
+  document.getElementById('t-eraser').addEventListener('click', () => {
+    tool = 'eraser'; _setActiveTool('t-eraser'); _updatePreview();
+  });
+
+  // Color picker
+  document.getElementById('t-color').addEventListener('input', e => {
+    color = e.target.value;
+    tool = 'pen'; _setActiveTool('t-pen'); _updatePreview();
+  });
+
+  // Color swatches
+  document.querySelectorAll('.swatch').forEach(s => {
+    s.addEventListener('click', () => {
+      color = s.dataset.color;
+      document.getElementById('t-color').value = color;
+      tool = 'pen'; _setActiveTool('t-pen'); _updatePreview();
+    });
+  });
+
+  // Size slider
+  document.getElementById('t-size').addEventListener('input', e => {
+    size = +e.target.value; _updatePreview();
+  });
+
+  // Clear
+  document.getElementById('t-clear').addEventListener('click', () => {
+    ctx.fillStyle = '#0f0d1e';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+  });
+}
+
+function _setActiveTool(id) {
+  document.querySelectorAll('.tool').forEach(t => t.classList.remove('active'));
+  document.getElementById(id).classList.add('active');
+}
+
+// ── Generation ─────────────────────────────────────────────────────────────────
+function _initControls() {
+  const slider = document.getElementById('strength');
+  const valEl  = document.getElementById('strength-val');
+  slider.addEventListener('input', () => { valEl.textContent = slider.value; });
+  document.getElementById('generate-btn').addEventListener('click', _generate);
+}
+
+async function _generate() {
+  const desc = document.getElementById('dream-desc').value.trim();
+  if (!desc) { alert('Please describe your dream first.'); return; }
+
+  const canvas   = document.getElementById('draw-canvas');
+  const sketch   = canvas.toDataURL('image/png');
+  const strength = parseFloat(document.getElementById('strength').value);
+
+  const btn   = document.getElementById('generate-btn');
+  const label = document.getElementById('gen-label');
+  const spin  = document.getElementById('gen-spin');
+  btn.disabled = true;
+  label.textContent = '✦ Materializing…';
+  spin.classList.remove('hidden');
+
+  try {
+    const data = await api('/generate', { sketch_b64: sketch, description: desc, strength });
+    if (!data.ok) { alert('Error: ' + data.error); return; }
+
+    state.lastSketch = sketch;
+    state.lastDream  = 'data:image/png;base64,' + data.image;
+
+    document.getElementById('res-sketch').src = state.lastSketch;
+    document.getElementById('res-dream').src  = state.lastDream;
+    document.getElementById('result-area').classList.remove('hidden');
+    _updateSaveArea();
+  } finally {
+    btn.disabled = false;
+    label.textContent = '✦ Materialize Dream';
+    spin.classList.add('hidden');
+  }
+}
+
+// ── Save buttons ───────────────────────────────────────────────────────────────
+function _initSaveBtns() {
+  document.getElementById('btn-publish').addEventListener('click',  () => _save('public'));
+  document.getElementById('btn-private').addEventListener('click',  () => _save('private'));
+  document.getElementById('btn-download').addEventListener('click', _download);
+}
+
+function _updateSaveArea() {
+  if (!state.lastDream) return;
+  document.getElementById('need-auth').classList.toggle('hidden',  !!state.userId);
+  document.getElementById('save-btns').classList.toggle('hidden',  !state.userId);
+}
+
+async function _save(visibility) {
+  const desc = document.getElementById('dream-desc').value.trim();
+  const data = await api('/gallery/save', {
+    user_id:     state.userId,
+    sketch_b64:  state.lastSketch,
+    image_b64:   state.lastDream,
+    description: desc,
+    visibility,
+  });
+  if (data.ok) {
+    alert(visibility === 'public'
+      ? '◈ Dream exhibited in the Museum.'
+      : 'Dream saved to your private gallery.');
+    if (visibility === 'public') _refreshMuseum();
+  } else {
+    alert('Could not save: ' + data.error);
+  }
+}
+
+function _download() {
+  if (!state.lastDream) return;
+  const a = document.createElement('a');
+  a.href = state.lastDream;
+  a.download = 'sueno.png';
+  a.click();
+}
+
+// ── My Gallery ─────────────────────────────────────────────────────────────────
+async function _loadUserGallery() {
+  const grid = document.getElementById('my-grid');
+
+  if (!state.userId) {
+    grid.innerHTML = '<div class="empty-state">Enter your name to see your saved dreams.</div>';
+    return;
+  }
+
+  document.getElementById('gallery-subtitle').textContent = `${state.userId}'s archive`;
+  grid.innerHTML = '<div class="empty-state">Loading…</div>';
+
+  const data = await api('/gallery/user', { user_id: state.userId });
+  if (!data.ok || !data.dreams.length) {
+    grid.innerHTML = '<div class="empty-state">No dreams saved yet.</div>';
+    return;
+  }
+
+  grid.innerHTML = '';
+  data.dreams.forEach(d => grid.appendChild(_makeCard(d, true)));
+}
+
+function _makeCard(dream, isOwner = false) {
+  const card = document.createElement('div');
+  card.className = 'dream-card';
+  card.innerHTML = `
+    <div class="card-diptych">
+      <img src="${dream.sketch_url}" loading="lazy" alt="boceto" />
+      <img src="${dream.image_url}"  loading="lazy" alt="sueño" />
+    </div>
+    <div class="card-info">
+      <div class="card-desc">${dream.description}</div>
+      <div class="card-vis">${dream.visibility === 'public' ? '◈ Public' : '◆ Private'}</div>
+    </div>
+  `;
+  card.addEventListener('click', () => openDreamModal(dream, isOwner));
+  return card;
+}
+
+// ── Dream modal ────────────────────────────────────────────────────────────────
+function _initModal() {
+  document.querySelector('.modal-close').addEventListener('click', _closeModal);
+  document.querySelector('.modal-backdrop').addEventListener('click', _closeModal);
+  document.addEventListener('keydown', e => { if (e.key === 'Escape') _closeModal(); });
+}
+
+function openDreamModal(dream, isOwner = false) {
+  document.getElementById('modal-sketch').src = dream.sketch_url;
+  document.getElementById('modal-dream').src  = dream.image_url;
+  document.getElementById('modal-desc').textContent = `"${dream.description}"`;
+  document.getElementById('modal-meta').textContent =
+    `${dream.user_id}  ·  ${dream.timestamp?.slice(0, 10) ?? ''}`;
+
+  const ownerArea = document.getElementById('modal-owner');
+  const isMyDream = state.userId && dream.user_id === state.userId;
+  ownerArea.classList.toggle('hidden', !isMyDream);
+
+  if (isMyDream) {
+    const toggleBtn = document.getElementById('modal-toggle');
+    toggleBtn.textContent = dream.visibility === 'public' ? 'Make private' : 'Exhibit publicly';
+    toggleBtn.onclick = async () => {
+      const r = await api('/gallery/toggle', { dream_id: dream.id, user_id: state.userId });
+      if (r.ok) {
+        dream.visibility = r.visibility;
+        toggleBtn.textContent = dream.visibility === 'public' ? 'Make private' : 'Exhibit publicly';
+        _refreshMuseum();
+        _loadUserGallery();
+      }
+    };
+    document.getElementById('modal-delete').onclick = async () => {
+      if (!confirm('Delete this dream permanently?')) return;
+      const r = await api('/gallery/delete', { dream_id: dream.id, user_id: state.userId });
+      if (r.ok) { _closeModal(); _loadUserGallery(); _refreshMuseum(); }
+    };
+  }
+
+  document.getElementById('dream-modal').classList.remove('hidden');
+}
+
+function _closeModal() {
+  document.getElementById('dream-modal').classList.add('hidden');
+}

static/frame.js

@@ -0,0 +1,265 @@
+// Procedural ornate museum frame + diptych canvas
+// Inspired by not-the-louvre's artwork-frame-canvas approach
+
+function seededRNG(seed) {
+  let s = typeof seed === 'string'
+    ? seed.split('').reduce((a, c) => (a * 31 + c.charCodeAt(0)) | 0, 0)
+    : seed | 0;
+  if (s === 0) s = 1;
+  return () => {
+    s = Math.imul(s, 16807) % 2147483647;
+    return (s & 0x7fffffff) / 2147483647;
+  };
+}
+
+async function loadImage(url) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.onload  = () => resolve(img);
+    img.onerror = () => reject(new Error('img load fail: ' + url));
+    img.src = url;
+  });
+}
+
+// Public: build a 1024×576 canvas with ornate frame + diptych inside
+export async function buildDiptychCanvas(dream) {
+  const W = 1024, H = 576;
+  const FRAME = 44;
+  const MAT   = 10;
+  const DIV   = 3;
+
+  const canvas = document.createElement('canvas');
+  canvas.width = W;
+  canvas.height = H;
+  const ctx = canvas.getContext('2d');
+
+  // 1 — Frame
+  drawOrnateFrame(ctx, W, H, FRAME, seededRNG(dream.id || dream.description || 0));
+
+  // 2 — Mat (dark mounting board)
+  ctx.fillStyle = '#16132a';
+  ctx.fillRect(FRAME, FRAME, W - FRAME * 2, H - FRAME * 2);
+
+  // 3 — Images
+  const innerW = W - FRAME * 2;
+  const innerH = H - FRAME * 2;
+  const halfIW = Math.floor(innerW / 2);
+
+  try {
+    const [sketchImg, dreamImg] = await Promise.all([
+      loadImage(dream.sketch_url),
+      loadImage(dream.image_url),
+    ]);
+
+    const ix = FRAME + MAT;
+    const iy = FRAME + MAT;
+    const iw = halfIW - MAT * 2 - DIV;
+    const ih = innerH - MAT * 2;
+
+    ctx.drawImage(sketchImg, ix,                    iy, iw, ih);
+    ctx.drawImage(dreamImg,  ix + halfIW + MAT + DIV, iy, iw, ih);
+
+    // Subtle label bands
+    for (const [lx, txt] of [[ix, 'SKETCH'], [ix + halfIW + MAT + DIV, 'DREAM']]) {
+      ctx.fillStyle = 'rgba(0,0,0,.55)';
+      ctx.fillRect(lx, iy + ih - 22, iw, 22);
+      ctx.fillStyle = 'rgba(210,185,110,.8)';
+      ctx.font = '11px Georgia, serif';
+      ctx.textAlign = 'center';
+      ctx.fillText(txt, lx + iw / 2, iy + ih - 7);
+    }
+  } catch {
+    // Fallback placeholder
+    ctx.fillStyle = '#1a1630';
+    ctx.fillRect(FRAME + MAT, FRAME + MAT, innerW - MAT * 2, innerH - MAT * 2);
+  }
+
+  // 4 — Divider between sketch and dream
+  ctx.fillStyle = '#0f0d1a';
+  ctx.fillRect(FRAME + halfIW - DIV, FRAME + MAT, DIV * 2, innerH - MAT * 2);
+
+  return canvas;
+}
+
+// ── Frame drawing ────────────────────────────────────────────────────────────
+
+function drawOrnateFrame(ctx, W, H, depth, rng) {
+  // Base gold fill
+  ctx.fillStyle = '#a07820';
+  ctx.fillRect(0, 0, W, H);
+
+  // Top bar — highlighted (light source top-left)
+  const topGrad = ctx.createLinearGradient(0, 0, 0, depth);
+  topGrad.addColorStop(0,   '#f5d870');
+  topGrad.addColorStop(0.4, '#d4a830');
+  topGrad.addColorStop(1,   '#906018');
+  ctx.fillStyle = topGrad;
+  ctx.fillRect(0, 0, W, depth);
+
+  // Bottom bar — in shadow
+  const botGrad = ctx.createLinearGradient(0, H - depth, 0, H);
+  botGrad.addColorStop(0, '#6a4808');
+  botGrad.addColorStop(1, '#4a3005');
+  ctx.fillStyle = botGrad;
+  ctx.fillRect(0, H - depth, W, depth);
+
+  // Left bar
+  const leftGrad = ctx.createLinearGradient(0, 0, depth, 0);
+  leftGrad.addColorStop(0,   '#e8c050');
+  leftGrad.addColorStop(0.5, '#c09028');
+  leftGrad.addColorStop(1,   '#906018');
+  ctx.fillStyle = leftGrad;
+  ctx.fillRect(0, 0, depth, H);
+
+  // Right bar — in shadow
+  ctx.fillStyle = '#7a5010';
+  ctx.fillRect(W - depth, 0, depth, H);
+
+  // Inner bevel — highlight top & left edges
+  ctx.strokeStyle = 'rgba(255,230,110,.55)';
+  ctx.lineWidth = 1.5;
+  ctx.beginPath();
+  ctx.moveTo(depth, depth);
+  ctx.lineTo(W - depth, depth);
+  ctx.moveTo(depth, depth);
+  ctx.lineTo(depth, H - depth);
+  ctx.stroke();
+
+  // Inner bevel — shadow right & bottom edges
+  ctx.strokeStyle = 'rgba(0,0,0,.45)';
+  ctx.beginPath();
+  ctx.moveTo(W - depth, depth);
+  ctx.lineTo(W - depth, H - depth);
+  ctx.moveTo(depth, H - depth);
+  ctx.lineTo(W - depth, H - depth);
+  ctx.stroke();
+
+  // Outer shadow (depth illusion)
+  const shadowW = 5;
+  ctx.fillStyle = 'rgba(0,0,0,.35)';
+  ctx.fillRect(W - shadowW, 0, shadowW, H);
+  ctx.fillRect(0, H - shadowW, W, shadowW);
+
+  // Corner ornaments
+  const cx = depth / 2;
+  const cy = depth / 2;
+  drawCorner(ctx, cx,     cy,     depth * 0.38, rng);
+  drawCorner(ctx, W - cx, cy,     depth * 0.38, rng);
+  drawCorner(ctx, cx,     H - cy, depth * 0.38, rng);
+  drawCorner(ctx, W - cx, H - cy, depth * 0.38, rng);
+
+  // Fine fluted lines along bars
+  drawFlutes(ctx, W, H, depth);
+
+  // Aging effects
+  applyAging(ctx, W, H, depth, rng);
+}
+
+function drawCorner(ctx, cx, cy, size, rng) {
+  // Outer diamond
+  ctx.fillStyle = '#6a4808';
+  ctx.beginPath();
+  ctx.moveTo(cx,        cy - size);
+  ctx.lineTo(cx + size, cy);
+  ctx.lineTo(cx,        cy + size);
+  ctx.lineTo(cx - size, cy);
+  ctx.closePath();
+  ctx.fill();
+
+  // Highlight face
+  ctx.fillStyle = 'rgba(255,220,90,.65)';
+  const s2 = size * 0.55;
+  ctx.beginPath();
+  ctx.moveTo(cx,       cy - s2);
+  ctx.lineTo(cx + s2,  cy);
+  ctx.lineTo(cx,       cy);
+  ctx.lineTo(cx - s2,  cy);
+  ctx.closePath();
+  ctx.fill();
+
+  // Shadow face
+  ctx.fillStyle = 'rgba(0,0,0,.35)';
+  ctx.beginPath();
+  ctx.moveTo(cx,       cy + s2);
+  ctx.lineTo(cx + s2,  cy);
+  ctx.lineTo(cx,       cy);
+  ctx.lineTo(cx - s2,  cy);
+  ctx.closePath();
+  ctx.fill();
+
+  // Centre dot
+  ctx.fillStyle = '#3a2005';
+  ctx.beginPath();
+  ctx.arc(cx, cy, size * 0.18, 0, Math.PI * 2);
+  ctx.fill();
+}
+
+function drawFlutes(ctx, W, H, depth) {
+  ctx.strokeStyle = 'rgba(255,215,60,.15)';
+  ctx.lineWidth = 0.8;
+  const step = 8;
+  const inset = 6;
+
+  // Top bar flutes (horizontal lines)
+  for (let y = inset; y < depth - inset; y += step) {
+    ctx.beginPath();
+    ctx.moveTo(depth, y);
+    ctx.lineTo(W - depth, y);
+    ctx.stroke();
+  }
+  // Bottom bar
+  for (let y = H - depth + inset; y < H - inset; y += step) {
+    ctx.beginPath();
+    ctx.moveTo(depth, y);
+    ctx.lineTo(W - depth, y);
+    ctx.stroke();
+  }
+  // Left bar (vertical)
+  for (let x = inset; x < depth - inset; x += step) {
+    ctx.beginPath();
+    ctx.moveTo(x, depth);
+    ctx.lineTo(x, H - depth);
+    ctx.stroke();
+  }
+  // Right bar
+  for (let x = W - depth + inset; x < W - inset; x += step) {
+    ctx.beginPath();
+    ctx.moveTo(x, depth);
+    ctx.lineTo(x, H - depth);
+    ctx.stroke();
+  }
+}
+
+function applyAging(ctx, W, H, depth, rng) {
+  // Dust accumulation at bottom
+  const dust = ctx.createLinearGradient(0, H - depth * 1.5, 0, H);
+  dust.addColorStop(0, 'rgba(160,130,50,0)');
+  dust.addColorStop(1, 'rgba(140,110,40,.2)');
+  ctx.fillStyle = dust;
+  ctx.fillRect(0, 0, W, H);
+
+  // Age spots on frame surface
+  for (let i = 0; i < 10; i++) {
+    const x = rng() * W;
+    const y = rng() * H;
+    const inFrame = x < depth || x > W - depth || y < depth || y > H - depth;
+    if (!inFrame) continue;
+    ctx.fillStyle = `rgba(30,18,5,${0.08 + rng() * 0.14})`;
+    ctx.beginPath();
+    ctx.ellipse(x, y, 2 + rng() * 7, 1.5 + rng() * 5, rng() * Math.PI, 0, Math.PI * 2);
+    ctx.fill();
+  }
+
+  // Verdigris (blue-green oxidation) — rare
+  for (let i = 0; i < 3; i++) {
+    const x = rng() * W;
+    const y = rng() * H;
+    const inFrame = x < depth - 3 || x > W - depth + 3 || y < depth - 3 || y > H - depth + 3;
+    if (!inFrame) continue;
+    ctx.fillStyle = `rgba(50,110,70,${0.06 + rng() * 0.1})`;
+    ctx.beginPath();
+    ctx.ellipse(x, y, 3 + rng() * 6, 2 + rng() * 4, rng() * Math.PI, 0, Math.PI * 2);
+    ctx.fill();
+  }
+}

static/galeria.css

@@ -0,0 +1,377 @@
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --ink:      #0d0a16;
+  --paper:    #f5ede8;
+  --gold:     #c9a030;
+  --gold-lt:  #e8c96a;
+  --rose:     #e8b4c4;
+  --text:     #f0e8f0;
+  --text-dim: #9880a8;
+  --border:   rgba(201,160,48,.25);
+  --card-bg:  rgba(22, 14, 32, 0.92);
+}
+
+html { scroll-behavior: smooth; }
+
+body {
+  min-height: 100vh;
+  background: var(--ink);
+  color: var(--text);
+  font-family: 'Cormorant Garamond', Georgia, serif;
+  overflow-x: hidden;
+}
+
+/* ── Background glow ─────────────────────────────────────────────────── */
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background:
+    radial-gradient(ellipse 80% 50% at 20% 10%, rgba(200,120,180,.12) 0%, transparent 60%),
+    radial-gradient(ellipse 60% 40% at 80% 90%, rgba(100,80,200,.10) 0%, transparent 60%),
+    radial-gradient(ellipse 100% 80% at 50% 50%, rgba(13,10,22,1) 60%, transparent 100%);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.vignette {
+  position: fixed;
+  inset: 0;
+  background: radial-gradient(ellipse at center, transparent 40%, rgba(5,3,10,.7) 100%);
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* ── Floating particles ──────────────────────────────────────────────── */
+.particles {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.particles span {
+  position: absolute;
+  display: block;
+  border-radius: 50%;
+  background: var(--gold);
+  opacity: 0;
+  animation: float-up 8s infinite ease-in;
+}
+
+.particles span:nth-child(1)  { width:3px; height:3px; left:15%; animation-delay:0s;   animation-duration:9s; }
+.particles span:nth-child(2)  { width:2px; height:2px; left:28%; animation-delay:1.5s; animation-duration:11s; }
+.particles span:nth-child(3)  { width:4px; height:4px; left:42%; animation-delay:3s;   animation-duration:8s; }
+.particles span:nth-child(4)  { width:2px; height:2px; left:58%; animation-delay:0.8s; animation-duration:12s; }
+.particles span:nth-child(5)  { width:3px; height:3px; left:72%; animation-delay:2.2s; animation-duration:9s; }
+.particles span:nth-child(6)  { width:2px; height:2px; left:85%; animation-delay:4s;   animation-duration:10s; }
+.particles span:nth-child(7)  { width:3px; height:3px; left:8%;  animation-delay:5s;   animation-duration:13s; }
+.particles span:nth-child(8)  { width:2px; height:2px; left:35%; animation-delay:1s;   animation-duration:7s; }
+.particles span:nth-child(9)  { width:4px; height:4px; left:62%; animation-delay:3.5s; animation-duration:11s; }
+.particles span:nth-child(10) { width:2px; height:2px; left:90%; animation-delay:0.3s; animation-duration:8s; }
+
+@keyframes float-up {
+  0%   { opacity: 0;   transform: translateY(100vh) scale(.5); }
+  10%  { opacity: .6; }
+  90%  { opacity: .2; }
+  100% { opacity: 0;   transform: translateY(-10vh)  scale(1.2); }
+}
+
+/* ── Header ──────────────────────────────────────────────────────────── */
+.marco-header {
+  position: relative;
+  z-index: 10;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  padding: 40px 60px 32px;
+  border-bottom: 1px solid var(--border);
+}
+
+.back-link {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-dim);
+  text-decoration: none;
+  font-size: 1rem;
+  font-style: italic;
+  letter-spacing: .05em;
+  transition: color .2s;
+}
+
+.back-link:hover { color: var(--gold-lt); }
+
+.marco-title-block {
+  text-align: center;
+}
+
+.marco-glyph {
+  display: block;
+  color: var(--gold);
+  font-size: 1.8rem;
+  margin-bottom: 6px;
+  animation: pulse-glow 3s ease-in-out infinite;
+}
+
+@keyframes pulse-glow {
+  0%, 100% { text-shadow: 0 0 8px rgba(201,160,48,.4); }
+  50%       { text-shadow: 0 0 20px rgba(201,160,48,.8), 0 0 40px rgba(201,160,48,.3); }
+}
+
+.marco-title {
+  font-size: 3.8rem;
+  font-weight: 300;
+  letter-spacing: .25em;
+  color: var(--gold-lt);
+  line-height: 1;
+  font-style: italic;
+}
+
+.marco-sub {
+  font-size: 1rem;
+  color: var(--text-dim);
+  font-style: italic;
+  letter-spacing: .12em;
+  margin-top: 6px;
+}
+
+.marco-count {
+  text-align: right;
+  font-size: .85rem;
+  color: var(--text-dim);
+  font-style: italic;
+  letter-spacing: .05em;
+}
+
+/* ── Main grid ───────────────────────────────────────────────────────── */
+.marco-main {
+  position: relative;
+  z-index: 10;
+  padding: 56px 60px 80px;
+}
+
+.marco-grid {
+  columns: 4;
+  column-gap: 24px;
+}
+
+@media (max-width: 1300px) { .marco-grid { columns: 3; } }
+@media (max-width: 900px)  { .marco-grid { columns: 2; } }
+@media (max-width: 560px)  { .marco-grid { columns: 1; } }
+
+.marco-loading {
+  column-span: all;
+  text-align: center;
+  padding: 100px 20px;
+  color: var(--text-dim);
+}
+
+.loading-glyph {
+  display: block;
+  font-size: 2rem;
+  color: var(--gold);
+  margin-bottom: 16px;
+  animation: pulse-glow 2s ease-in-out infinite;
+}
+
+/* ── Dream card ──────────────────────────────────────────────────────── */
+.marco-card {
+  break-inside: avoid;
+  margin-bottom: 28px;
+  cursor: pointer;
+  position: relative;
+}
+
+.marco-card-inner {
+  background: var(--card-bg);
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  overflow: hidden;
+  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
+}
+
+.marco-card:hover .marco-card-inner {
+  transform: translateY(-4px) scale(1.01);
+  box-shadow: 0 12px 40px rgba(201,160,48,.15), 0 0 0 1px rgba(201,160,48,.35);
+  border-color: rgba(201,160,48,.5);
+}
+
+/* Ornate corner accents */
+.marco-card-inner::before,
+.marco-card-inner::after {
+  content: '◈';
+  position: absolute;
+  color: rgba(201,160,48,.3);
+  font-size: .6rem;
+  transition: color .35s;
+  z-index: 2;
+}
+
+.marco-card-inner::before { top: 6px; left: 8px; }
+.marco-card-inner::after  { bottom: 6px; right: 8px; }
+.marco-card:hover .marco-card-inner::before,
+.marco-card:hover .marco-card-inner::after { color: rgba(201,160,48,.7); }
+
+.marco-card-img {
+  width: 100%;
+  display: block;
+  aspect-ratio: 1;
+  object-fit: cover;
+  transition: filter .35s;
+}
+
+.marco-card:hover .marco-card-img { filter: brightness(1.08) saturate(1.05); }
+
+.marco-card-body {
+  padding: 14px 16px 16px;
+  border-top: 1px solid var(--border);
+}
+
+.marco-card-desc {
+  font-size: 1rem;
+  font-style: italic;
+  color: var(--text);
+  line-height: 1.55;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.marco-card-author {
+  display: block;
+  margin-top: 8px;
+  font-size: .78rem;
+  color: var(--gold);
+  letter-spacing: .1em;
+  font-style: normal;
+  font-family: 'Cormorant SC', serif;
+}
+
+/* ── Footer ──────────────────────────────────────────────────────────── */
+.marco-footer {
+  position: relative;
+  z-index: 10;
+  text-align: center;
+  padding: 28px;
+  border-top: 1px solid var(--border);
+  font-size: .82rem;
+  color: var(--text-dim);
+  font-style: italic;
+  letter-spacing: .08em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+}
+
+.marco-footer .logo-glyph { color: var(--gold); font-size: 1rem; }
+
+/* ── Lightbox ────────────────────────────────────────────────────────── */
+.lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+
+.lightbox.hidden { display: none; }
+
+.lightbox-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(5, 3, 10, .92);
+  backdrop-filter: blur(12px);
+}
+
+.lightbox-inner {
+  position: relative;
+  max-width: 900px;
+  width: 100%;
+  background: rgba(16, 10, 24, .98);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 40px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 0 60px rgba(201,160,48,.08);
+}
+
+.lightbox-close {
+  position: absolute;
+  top: 16px; right: 16px;
+  background: none;
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  width: 32px; height: 32px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: .9rem;
+  font-family: inherit;
+  transition: color .2s, border-color .2s;
+}
+
+.lightbox-close:hover { color: var(--text); border-color: var(--gold); }
+
+.lightbox-diptych {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 16px;
+  align-items: center;
+}
+
+.lb-panel { display: flex; flex-direction: column; gap: 8px; }
+
+.lb-lbl {
+  text-align: center;
+  font-size: .72rem;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+  color: var(--text-dim);
+  font-style: normal;
+  font-family: 'Cormorant SC', serif;
+}
+
+.lb-panel img {
+  width: 100%;
+  aspect-ratio: 1;
+  object-fit: cover;
+  border-radius: 2px;
+  border: 1px solid var(--border);
+  display: block;
+}
+
+.lb-divider {
+  color: var(--gold);
+  font-size: 1.8rem;
+  flex-shrink: 0;
+  font-style: italic;
+  font-family: 'Cormorant Garamond', Georgia, serif;
+}
+
+.lb-desc {
+  text-align: center;
+  font-style: italic;
+  font-size: 1.2rem;
+  color: var(--text);
+  line-height: 1.7;
+  padding: 0 20px;
+}
+
+.lb-meta {
+  text-align: center;
+  font-size: .82rem;
+  color: var(--gold);
+  letter-spacing: .1em;
+  font-family: 'Cormorant SC', serif;
+}
+
+.hidden { display: none !important; }

static/galeria.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="description" content="Explore the collective dreams of the community. A public exhibition of AI-materialized sketches in the Dream Museum." />
+  <title>Public Gallery — Dream Museum</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=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Cormorant+SC:wght@300;400&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/static/galeria.css" />
+</head>
+<body>
+
+  <div class="vignette"></div>
+
+  <div class="particles" aria-hidden="true">
+    <span></span><span></span><span></span><span></span><span></span>
+    <span></span><span></span><span></span><span></span><span></span>
+  </div>
+
+  <header class="marco-header">
+    <a href="/museum" class="back-link" title="Back to museum">
+      <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
+        <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
+      </svg>
+      Back to Museum
+    </a>
+    <div class="marco-title-block">
+      <span class="marco-glyph">◈</span>
+      <h1 class="marco-title">Public Gallery</h1>
+      <p class="marco-sub">The collective dream</p>
+    </div>
+    <div class="marco-count"><span id="dream-count">—</span> dreams on display</div>
+  </header>
+
+  <main class="marco-main">
+    <div id="marco-grid" class="marco-grid">
+      <div class="marco-loading">
+        <span class="loading-glyph">◈</span>
+        <p>Summoning dreams…</p>
+      </div>
+    </div>
+  </main>
+
+  <footer class="marco-footer">
+    <span class="logo-glyph">◈</span>
+    <span>Dream Museum · Build Small Hackathon 2026</span>
+  </footer>
+
+  <div id="lightbox" class="lightbox hidden">
+    <div class="lightbox-backdrop"></div>
+    <div class="lightbox-inner">
+      <button class="lightbox-close">✕</button>
+      <div class="lightbox-diptych">
+        <div class="lb-panel">
+          <p class="lb-lbl">Sketch</p>
+          <img id="lb-sketch" alt="" />
+        </div>
+        <div class="lb-divider">→</div>
+        <div class="lb-panel">
+          <p class="lb-lbl">Dream</p>
+          <img id="lb-dream" alt="" />
+        </div>
+      </div>
+      <p id="lb-desc" class="lb-desc"></p>
+      <p id="lb-meta" class="lb-meta"></p>
+    </div>
+  </div>
+
+  <script src="/static/galeria.js"></script>
+</body>
+</html>

static/galeria.js

@@ -0,0 +1,73 @@
+(async () => {
+  const grid    = document.getElementById('marco-grid');
+  const countEl = document.getElementById('dream-count');
+
+  let dreams = [];
+
+  try {
+    const res = await fetch('/gallery/public', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ limit: 100, offset: 0 }),
+    });
+    const data = await res.json();
+    if (!data.ok) throw new Error(data.error || 'Error');
+    dreams = data.dreams;
+  } catch {
+    grid.innerHTML = `<div class="marco-loading"><span class="loading-glyph">◈</span><p>Could not load dreams.</p></div>`;
+    return;
+  }
+
+  countEl.textContent = dreams.length;
+
+  if (!dreams.length) {
+    grid.innerHTML = `<div class="marco-loading"><span class="loading-glyph">◈</span><p>No dreams on display yet.</p></div>`;
+    return;
+  }
+
+  grid.innerHTML = '';
+  dreams.forEach(d => {
+    const card = document.createElement('div');
+    card.className = 'marco-card';
+    card.innerHTML = `
+      <div class="marco-card-inner">
+        <img class="marco-card-img" src="${esc(d.image_url)}" alt="${esc(d.description)}" loading="lazy" />
+        <div class="marco-card-body">
+          <p class="marco-card-desc">${esc(d.description)}</p>
+          <span class="marco-card-author">✦ ${esc(d.user_id)}</span>
+        </div>
+      </div>
+    `;
+    card.addEventListener('click', () => openLightbox(d));
+    grid.appendChild(card);
+  });
+
+  // Lightbox
+  const lb       = document.getElementById('lightbox');
+  const lbSketch = document.getElementById('lb-sketch');
+  const lbDream  = document.getElementById('lb-dream');
+  const lbDesc   = document.getElementById('lb-desc');
+  const lbMeta   = document.getElementById('lb-meta');
+
+  function openLightbox(d) {
+    lbSketch.src = d.sketch_url;
+    lbDream.src  = d.image_url;
+    lbDesc.textContent = `"${d.description}"`;
+    lbMeta.textContent = `${d.user_id}  ·  ${(d.timestamp || '').slice(0, 10)}`;
+    lb.classList.remove('hidden');
+  }
+
+  function closeLightbox() { lb.classList.add('hidden'); }
+
+  document.querySelector('.lightbox-close').addEventListener('click', closeLightbox);
+  document.querySelector('.lightbox-backdrop').addEventListener('click', closeLightbox);
+  document.addEventListener('keydown', e => { if (e.key === 'Escape') closeLightbox(); });
+})();
+
+function esc(s) {
+  return String(s ?? '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}

static/index.html

@@ -0,0 +1,223 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="description" content="Draw your dreams and see them come to life in an interactive 3D art museum. Powered by SDXL and ControlNet scribble guidance." />
+  <title>Dream Museum — Materialize Your Dreams in 3D</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=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/static/style.css" />
+  <script type="importmap">
+  {
+    "imports": {
+      "three": "https://cdn.jsdelivr.net/npm/three@0.183.0/build/three.module.js",
+      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.183.0/examples/jsm/"
+    }
+  }
+  </script>
+</head>
+<body>
+
+  <canvas id="museum-canvas"></canvas>
+
+  <!-- Floating logo — top left -->
+  <div id="museum-logo">
+    <span class="logo-glyph">◈</span>
+    <span class="logo-text">Dream Museum</span>
+  </div>
+
+  <!-- Top right — auth + my gallery -->
+  <div id="hud-topright">
+    <div class="auth-area">
+      <span id="auth-name" class="auth-name hidden"></span>
+      <input id="auth-input" class="auth-input" type="text" placeholder="Enter as…" />
+      <button id="auth-btn" class="btn-outline-sm">✦</button>
+    </div>
+    <button class="hud-pill" id="btn-my-gallery">My Gallery</button>
+  </div>
+
+  <!-- Bottom-left FAB — Paint -->
+  <button class="fab fab--left" id="btn-create">
+    <span class="fab-icon">
+      <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
+        <path d="M7 14c-1.66 0-3 1.34-3 3 0 1.31-1.16 2-2 2 .92 1.22 2.49 2 4 2 2.21 0 4-1.79 4-4 0-1.66-1.34-3-3-3zm13.71-9.37l-1.34-1.34c-.39-.39-1.02-.39-1.41 0L9 12.25 11.75 15l8.96-8.96c.39-.39.39-1.02 0-1.41z"/>
+      </svg>
+    </span>
+    <span class="fab-label">Paint</span>
+  </button>
+
+  <!-- Bottom-right FAB — Gallery -->
+  <a class="fab fab--right" href="/galeria">
+    <span class="fab-icon">◈</span>
+    <span class="fab-label">Gallery</span>
+  </a>
+
+  <!-- Hint -->
+  <div id="room-hint">
+    <span>Click a painting to view it</span>
+  </div>
+
+  <!-- ── Paint / Create panel ───────────────────────────────────────── -->
+  <div id="panel-create" class="side-panel hidden">
+    <button class="panel-close" id="close-create">✕</button>
+    <div class="panel-scroll">
+
+      <div class="panel-head">
+        <h2>Create a Dream</h2>
+        <p>Draw its shape. Describe its soul. Let the museum do the rest.</p>
+      </div>
+
+      <div class="create-layout">
+
+        <!-- Canvas column -->
+        <div class="canvas-col">
+          <div class="draw-toolbar">
+            <button class="tool active" id="t-pen" title="Brush">
+              <svg viewBox="0 0 24 24" fill="currentColor" width="15" height="15">
+                <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
+              </svg>
+            </button>
+            <button class="tool" id="t-eraser" title="Eraser">
+              <svg viewBox="0 0 24 24" fill="currentColor" width="15" height="15">
+                <path d="M15.14 3c-.51 0-1.02.2-1.41.59L2.59 14.73c-.78.77-.78 2.04 0 2.83L5.03 20h7.66l8.72-8.72c.79-.78.79-2.05 0-2.83l-4.86-4.86c-.39-.39-.9-.59-1.41-.59zm-3.73 15H5.17l-1.8-1.8 4.86-4.86 5.18 5.18V18z"/>
+              </svg>
+            </button>
+
+            <div class="tool-sep"></div>
+
+            <input type="color" id="t-color" value="#ffffff" class="color-picker" title="Color" />
+            <div class="color-swatches">
+              <button class="swatch" style="--c:#ffffff"  data-color="#ffffff"></button>
+              <button class="swatch" style="--c:#f9c6da"  data-color="#f9c6da"></button>
+              <button class="swatch" style="--c:#c9a0dc"  data-color="#c9a0dc"></button>
+              <button class="swatch" style="--c:#7ec8e3"  data-color="#7ec8e3"></button>
+              <button class="swatch" style="--c:#f0cc6e"  data-color="#f0cc6e"></button>
+              <button class="swatch" style="--c:#ff8fab"  data-color="#ff8fab"></button>
+              <button class="swatch" style="--c:#8888ee"  data-color="#8888ee"></button>
+              <button class="swatch" style="--c:#1a0f2e"  data-color="#1a0f2e"></button>
+            </div>
+
+            <div class="tool-sep"></div>
+
+            <div class="brush-row">
+              <input type="range" id="t-size" min="1" max="40" value="6" />
+              <div id="brush-preview" class="brush-preview"></div>
+            </div>
+
+            <div class="tool-sep"></div>
+
+            <button class="tool" id="t-clear" title="Clear">
+              <svg viewBox="0 0 24 24" fill="currentColor" width="15" height="15">
+                <path d="M19 4h-3.5l-1-1h-5l-1 1H5v2h14V4zM6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12z"/>
+              </svg>
+            </button>
+          </div>
+
+          <div class="canvas-frame">
+            <canvas id="draw-canvas" width="512" height="512"></canvas>
+          </div>
+        </div>
+
+        <!-- Controls column -->
+        <div class="ctrl-col">
+
+          <div class="field-group">
+            <label class="field-label" for="dream-desc">Describe your dream</label>
+            <textarea id="dream-desc"
+              placeholder="A cathedral of clouds, golden light through impossible windows, the feeling of floating between colours…"
+              rows="5"></textarea>
+          </div>
+
+          <div class="field-group">
+            <div class="slider-label">
+              <span>Sketch faithfulness</span>
+              <span id="strength-val" class="slider-num">0.7</span>
+            </div>
+            <input type="range" id="strength" min="0.3" max="1.0" step="0.05" value="0.7" />
+            <div class="slider-hints">
+              <span>Free interpretation</span>
+              <span>Follows sketch</span>
+            </div>
+          </div>
+
+          <button id="generate-btn" class="btn-materialize">
+            <span id="gen-label">✦ Materialize Dream</span>
+            <span id="gen-spin" class="spinner hidden"></span>
+          </button>
+
+          <div id="result-area" class="result-area hidden">
+            <div class="result-diptych">
+              <div class="res-side">
+                <div class="res-label">Sketch</div>
+                <img id="res-sketch" alt="sketch" />
+              </div>
+              <div class="res-arrow">→</div>
+              <div class="res-side">
+                <div class="res-label">Dream</div>
+                <img id="res-dream" alt="dream" />
+              </div>
+            </div>
+
+            <div id="save-area" class="save-area">
+              <p id="need-auth" class="auth-notice hidden">
+                Enter your name above to save this dream.
+              </p>
+              <div id="save-btns" class="save-btns hidden">
+                <button id="btn-publish" class="btn-gold">Exhibit in the Museum</button>
+                <button id="btn-private" class="btn-outline">Save privately</button>
+              </div>
+              <button id="btn-download" class="btn-ghost">Download image</button>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+    </div>
+  </div>
+
+  <!-- ── My Gallery panel ───────────────────────────────────────────── -->
+  <div id="panel-gallery" class="side-panel hidden">
+    <button class="panel-close" id="close-gallery">✕</button>
+    <div class="panel-scroll">
+      <div class="panel-head">
+        <h2>My Gallery</h2>
+        <p id="gallery-subtitle">Your private dream archive</p>
+      </div>
+      <div id="my-grid" class="dream-grid">
+        <div class="empty-state">No dreams saved yet.</div>
+      </div>
+    </div>
+  </div>
+
+  <!-- ── Dream detail modal ────────────────────────────────────────── -->
+  <div id="dream-modal" class="modal hidden">
+    <div class="modal-backdrop"></div>
+    <div class="modal-box">
+      <button class="modal-close">✕</button>
+      <div class="modal-diptych">
+        <div class="modal-side">
+          <div class="modal-lbl">Sketch</div>
+          <img id="modal-sketch" alt="sketch" />
+        </div>
+        <div class="modal-arrow">→</div>
+        <div class="modal-side">
+          <div class="modal-lbl">Dream</div>
+          <img id="modal-dream" alt="dream" />
+        </div>
+      </div>
+      <p id="modal-desc" class="modal-desc"></p>
+      <div id="modal-meta" class="modal-meta"></div>
+      <div id="modal-owner" class="modal-owner hidden">
+        <button id="modal-toggle" class="btn-outline"></button>
+        <button id="modal-delete" class="btn-danger">Delete</button>
+      </div>
+    </div>
+  </div>
+
+  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
+  <script type="module" src="/static/app.js"></script>
+</body>
+</html>

static/models/studio-transformed.glb

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b3f6b0b139df2a4d207d46a5cd77e9106dae9782888f4347b79d0f3171b9d21f
+size 578468

static/scene.js

@@ -0,0 +1,385 @@
+// 3D scene — based on not-the-louvre StudioScene.svelte + SceneTextureBindings.svelte
+import * as THREE from 'three';
+import { GLTFLoader }  from 'three/addons/loaders/GLTFLoader.js';
+import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
+
+const gsap = window.gsap;
+
+// ── Camera poses  (exact values from StudioScene.svelte) ──────────────────────
+const DEFAULT_CAMERA = {
+  cameraX: 0, cameraDepth: 16, cameraHeight: 7.8,
+  rotationX: -0.22, rotationY: 0,
+  targetX: 0, targetY: 0.8, targetZ: 0,
+  zoom: 62
+};
+const LEFT_WALL_CAMERA = {
+  cameraX: 0, cameraDepth: 16, cameraHeight: 0.8,
+  rotationX: 0, rotationY: 0,
+  targetX: 0, targetY: 0.8, targetZ: 0,
+  zoom: 12000
+};
+const TOP_CLOSE_CAMERA = {
+  cameraX: 1.8, cameraDepth: 0.6, cameraHeight: 0,
+  rotationX: 0, rotationY: 0,
+  targetX: 1.8, targetY: -1.8, targetZ: 0.6,
+  zoom: 450
+};
+
+// Animation durations (from StudioScene.svelte)
+const ENTER_DURATION          = 2.08;
+const LEFT_WALL_ROTATE_DUR    = 1.1;
+const LEFT_WALL_ZOOM_DUR      = 2.2;
+const LEFT_WALL_EXIT_ZOOM_DUR = 1.1;
+const LEFT_WALL_EXIT_ROT_DUR  = 1.75;
+const TOP_CLOSE_ENTER_DUR     = 2.0;
+const TOP_CLOSE_EXIT_DUR      = 1.4;
+
+// Artwork slot names discovered from GLB (console log confirmed)
+const ARTWORK_SLOTS = ['a1','a2','a3','a4','a5','a6','a7','a8','a9','a10','a11','art1'];
+
+// ── Module state ──────────────────────────────────────────────────────────────
+let renderer, scene, camera;
+let modelRoot       = null;
+let nodes           = {};    // mesh name → Object3D
+let appliedMaterials = [];   // track for cleanup
+let activeTimeline  = null;
+let dreamsBySlot    = {};    // slotName → dream object
+let interactables   = [];    // meshes with click
+let hoveredMesh     = null;
+let _onClickCb      = null;
+let raycaster, pointer;
+
+const studioMotion = { ...DEFAULT_CAMERA };
+
+function _syncCamera() {
+  camera.position.set(studioMotion.cameraX, studioMotion.cameraHeight, studioMotion.cameraDepth);
+  camera.lookAt(studioMotion.targetX, studioMotion.targetY, studioMotion.targetZ);
+  camera.zoom = studioMotion.zoom;
+  camera.updateProjectionMatrix();
+  if (modelRoot) {
+    modelRoot.rotation.x = studioMotion.rotationX;
+    modelRoot.rotation.y = studioMotion.rotationY;
+  }
+}
+
+// ── Public API ────────────────────────────────────────────────────────────────
+
+export function init(canvas, onPaintingClick) {
+  _onClickCb = onPaintingClick;
+
+  _initRenderer(canvas);
+  _initScene();
+  _initCamera();
+  _loadModel();
+
+  raycaster = new THREE.Raycaster();
+  pointer   = new THREE.Vector2(-999, -999);
+
+  canvas.addEventListener('pointermove', _onMove);
+  canvas.addEventListener('click',       _onClick);
+  window.addEventListener('resize',      _onResize);
+  _tick();
+}
+
+// Apply dreams to artwork slots. dreams = array of dream objects (max 12).
+export function setPaintings(dreams) {
+  // Clear previous
+  for (const { mesh, origMat, mat } of appliedMaterials) {
+    if (mesh.material === mat) mesh.material = origMat;
+    mat.dispose();
+  }
+  appliedMaterials = [];
+  dreamsBySlot     = {};
+  interactables    = [];
+
+  const loader = new THREE.TextureLoader();
+
+  dreams.forEach((dream, i) => {
+    const slotName = ARTWORK_SLOTS[i];
+    if (!slotName) return;
+
+    const mesh = nodes[slotName];
+    if (!mesh || Array.isArray(mesh.material)) return;
+
+    dreamsBySlot[slotName] = dream;
+    interactables.push(mesh);
+
+    loader.loadAsync(dream.image_url).then(tex => {
+      tex.colorSpace  = THREE.SRGBColorSpace;
+      tex.flipY       = false;
+      tex.needsUpdate = true;
+
+      const mat = new THREE.MeshBasicMaterial({
+        map: tex, side: THREE.DoubleSide, transparent: true,
+      });
+      appliedMaterials.push({ mesh, origMat: mesh.material, mat });
+      mesh.material = mat;
+    }).catch(() => {});
+  });
+}
+
+// ── Pose transitions  (from StudioScene.svelte effect) ───────────────────────
+
+export function enterDefault() {
+  _kill();
+  activeTimeline = gsap.timeline()
+    .to(studioMotion, {
+      cameraX: 0, zoom: 60, cameraDepth: 16, cameraHeight: 7.8,
+      targetX: 0, targetY: 0.8, targetZ: 0, rotationX: -0.22,
+      duration: ENTER_DURATION, ease: 'power4.inOut', onUpdate: _syncCamera
+    })
+    .to(studioMotion, {
+      rotationY: -Math.PI / 4,
+      duration: ENTER_DURATION - 0.55, ease: 'power3.inOut', onUpdate: _syncCamera
+    }, 0.55);
+}
+
+export function goToLeftWall() {
+  _kill();
+  activeTimeline = gsap.timeline()
+    .to(studioMotion, {
+      rotationY: 0,
+      duration: LEFT_WALL_ROTATE_DUR, ease: 'power3.inOut', onUpdate: _syncCamera
+    })
+    .to(studioMotion, {
+      cameraX: 0, cameraDepth: 16, cameraHeight: 0.8,
+      targetX: 0, targetY: 0.8, targetZ: 0, rotationX: 0, zoom: 12000,
+      duration: LEFT_WALL_ZOOM_DUR, ease: 'power4.inOut', onUpdate: _syncCamera
+    });
+}
+
+export function leaveLeftWall() {
+  _kill();
+  activeTimeline = gsap.timeline()
+    .to(studioMotion, {
+      cameraX: 0, zoom: 60, cameraDepth: 16, cameraHeight: 7.8,
+      targetX: 0, targetY: 0.8, targetZ: 0, rotationX: -0.22,
+      duration: LEFT_WALL_EXIT_ZOOM_DUR, ease: 'power3.out', onUpdate: _syncCamera
+    })
+    .to(studioMotion, {
+      rotationY: -Math.PI / 4,
+      duration: LEFT_WALL_EXIT_ROT_DUR, ease: 'power3.inOut', onUpdate: _syncCamera
+    });
+}
+
+export function goToTopClose() {
+  _kill();
+  activeTimeline = gsap.to(studioMotion, {
+    zoom: 450, cameraX: 1.8, cameraDepth: 0.6, cameraHeight: 0,
+    targetX: 1.8, targetY: -1.8, targetZ: 0.6, rotationX: 0, rotationY: 0,
+    duration: TOP_CLOSE_ENTER_DUR, ease: 'power3.inOut', onUpdate: _syncCamera
+  });
+}
+
+export function leaveTopClose() {
+  _kill();
+  activeTimeline = gsap.timeline()
+    .to(studioMotion, {
+      cameraX: 0, zoom: 60, cameraDepth: 16, cameraHeight: 7.8,
+      targetX: 0, targetY: 0.8, targetZ: 0, rotationX: -0.22,
+      duration: TOP_CLOSE_EXIT_DUR, ease: 'power3.inOut', onUpdate: _syncCamera
+    })
+    .to(studioMotion, {
+      rotationY: -Math.PI / 4,
+      duration: 0.8, ease: 'power3.inOut', onUpdate: _syncCamera
+    });
+}
+
+// ── Three.js init ─────────────────────────────────────────────────────────────
+
+function _initRenderer(canvas) {
+  renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  renderer.shadowMap.enabled = true;
+  renderer.shadowMap.type      = THREE.VSMShadowMap;
+  renderer.toneMapping         = THREE.ACESFilmicToneMapping;
+  renderer.toneMappingExposure = 1.15;
+}
+
+function _initScene() {
+  scene = new THREE.Scene();
+  scene.background = new THREE.Color('#f5cedd');
+  scene.fog = new THREE.Fog('#f9dce8', 30, 68);
+
+  // Dreamy pink-warm lights
+  scene.add(new THREE.AmbientLight(0xffb8cc, 0.28));
+
+  const dirLight = new THREE.DirectionalLight(0xfff0f5, 1.5);
+  dirLight.position.set(5, 16, 6);
+  dirLight.castShadow = true;
+  scene.add(dirLight);
+
+  // Soft bounce from below
+  const fillLight = new THREE.DirectionalLight(0xff99bb, 0.2);
+  fillLight.position.set(-3, -4, 8);
+  scene.add(fillLight);
+
+  // Shadow receiver circle  (exact from StudioScene.svelte)
+  const shadowCircle = new THREE.Mesh(
+    new THREE.CircleGeometry(18, 48),
+    new THREE.ShadowMaterial({ transparent: true, opacity: 0.2 })
+  );
+  shadowCircle.rotation.set(-Math.PI / 2, 0, 0.5);
+  shadowCircle.position.set(0, -2.62, 0);
+  shadowCircle.receiveShadow = true;
+  scene.add(shadowCircle);
+}
+
+function _initCamera() {
+  const w = window.innerWidth  / 2;
+  const h = window.innerHeight / 2;
+  camera = new THREE.OrthographicCamera(-w, w, h, -h, -1000, 1000);
+  camera.position.set(DEFAULT_CAMERA.cameraX, DEFAULT_CAMERA.cameraHeight, DEFAULT_CAMERA.cameraDepth);
+  camera.zoom = DEFAULT_CAMERA.zoom;
+  camera.lookAt(DEFAULT_CAMERA.targetX, DEFAULT_CAMERA.targetY, DEFAULT_CAMERA.targetZ);
+  camera.updateProjectionMatrix();
+}
+
+function _loadModel() {
+  const dracoLoader = new DRACOLoader();
+  // Use Google's CDN for DRACO decoder (reliable)
+  dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.6/');
+
+  const loader = new GLTFLoader();
+  loader.setDRACOLoader(dracoLoader);
+
+  loader.load(
+    '/static/models/studio-transformed.glb',
+    (gltf) => {
+      modelRoot = gltf.scene;
+      modelRoot.scale.setScalar(5.7);
+      modelRoot.position.set(0, -6, 0);
+      // -Math.PI/4 on Y = the "inside the museum" diagonal view from not-the-louvre
+      modelRoot.rotation.set(DEFAULT_CAMERA.rotationX, -Math.PI / 4, 0);
+      studioMotion.rotationX = DEFAULT_CAMERA.rotationX;
+      studioMotion.rotationY = -Math.PI / 4;
+
+      modelRoot.traverse(obj => {
+        obj.castShadow    = true;
+        obj.receiveShadow = true;
+        if (obj.name) nodes[obj.name] = obj;
+      });
+
+      console.log('[Dream Museum] GLB nodes:', Object.keys(nodes).join(', '));
+
+      scene.add(modelRoot);
+    },
+    undefined,
+    (err) => console.error('[Dream Museum] GLB load error:', err)
+  );
+}
+
+// ── Clouds ────────────────────────────────────────────────────────────────────
+
+function _buildClouds() {
+  const mat = new THREE.MeshStandardMaterial({
+    color: 0xfff0f5,
+    transparent: true,
+    opacity: 0.82,
+    roughness: 1.0,
+    metalness: 0,
+    depthWrite: false,
+  });
+
+  // [x, y, z, size]  — peripheral ring, never over the studio center
+  const configs = [
+    // Left side wall
+    [-40,   -4,   8,  5.5 ],
+    [-44,    2,  -4,  4.5 ],
+    [-36,   -8,  -8,  5.0 ],
+    // Right side wall
+    [ 40,   -4,   8,  5.5 ],
+    [ 44,    2,  -4,  4.5 ],
+    [ 36,   -8,  -8,  5.0 ],
+    // Far background (behind the room)
+    [-18,   -2, -28,  7.0 ],
+    [ 18,   -2, -28,  7.0 ],
+    [-36,    0, -22,  5.5 ],
+    [ 36,    0, -22,  5.5 ],
+    // Front left / right corners (toward the camera)
+    [-38,   -6,  20,  5.0 ],
+    [ 38,   -6,  20,  5.0 ],
+    // High sides
+    [-30,   14,  -6,  5.0 ],
+    [ 30,   14,  -6,  5.0 ],
+    [-20,   10,  16,  4.5 ],
+    [ 20,   10,  16,  4.5 ],
+  ];
+
+  configs.forEach(([x, y, z, s]) => scene.add(_cloudGroup(x, y, z, s, mat)));
+}
+
+function _cloudGroup(x, y, z, size, mat) {
+  const g = new THREE.Group();
+
+  // Cluster of spheres at varying offsets — gives a fluffy cumulus shape
+  const puffs = [
+    [ 0,           0,          0,    1.00 ],
+    [ size * 0.88, size * 0.1, 0,    0.72 ],
+    [-size * 0.88, size * 0.1, 0,    0.72 ],
+    [ size * 0.42, size * 0.52, 0,   0.62 ],
+    [-size * 0.42, size * 0.52, 0,   0.62 ],
+    [ 0,           size * 0.62, 0,   0.52 ],
+    [ size * 0.28, size * 0.22, size * 0.38, 0.58 ],
+    [-size * 0.28, size * 0.18,-size * 0.32, 0.55 ],
+    [ size * 1.35, size * 0.05, size * 0.2,  0.50 ],
+    [-size * 1.35, size * 0.05,-size * 0.2,  0.50 ],
+  ];
+
+  puffs.forEach(([ox, oy, oz, r]) => {
+    const m = new THREE.Mesh(new THREE.SphereGeometry(size * r, 8, 6), mat);
+    m.position.set(ox, oy, oz);
+    g.add(m);
+  });
+
+  g.position.set(x, y, z);
+  return g;
+}
+
+// ── Interaction ───────────────────────────────────────────────────────────────
+
+function _onMove(e) {
+  pointer.x =  (e.clientX / window.innerWidth)  * 2 - 1;
+  pointer.y = -(e.clientY / window.innerHeight) * 2 + 1;
+
+  raycaster.setFromCamera(pointer, camera);
+  const hit = raycaster.intersectObjects(interactables, true)[0]?.object ?? null;
+
+  // Walk up to find the interactable root
+  const hitRoot = hit ? interactables.find(m => m === hit || m.parent === hit) ?? null : null;
+
+  if (hitRoot !== hoveredMesh) {
+    if (hoveredMesh) document.body.style.cursor = 'default';
+    hoveredMesh = hitRoot;
+    if (hoveredMesh) document.body.style.cursor = 'pointer';
+  }
+}
+
+function _onClick() {
+  if (!hoveredMesh || !_onClickCb) return;
+  const slotName = Object.keys(dreamsBySlot).find(k => nodes[k] === hoveredMesh);
+  if (slotName) _onClickCb(dreamsBySlot[slotName]);
+}
+
+function _kill() {
+  activeTimeline?.kill();
+  gsap.killTweensOf(studioMotion);
+  activeTimeline = null;
+}
+
+function _tick() {
+  requestAnimationFrame(_tick);
+  renderer.render(scene, camera);
+}
+
+function _onResize() {
+  const w = window.innerWidth  / 2;
+  const h = window.innerHeight / 2;
+  camera.left   = -w;
+  camera.right  =  w;
+  camera.top    =  h;
+  camera.bottom = -h;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+}

static/style.css

@@ -0,0 +1,812 @@
+/* ── Reset ──────────────────────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --gold:       #c9a030;
+  --gold-light: #f0cc6e;
+  --gold-dark:  #806018;
+  --bg:         #07070c;
+  --panel-bg:   rgba(8, 7, 14, 0.97);
+  --card-bg:    #100f1c;
+  --border:     #2a2545;
+  --accent:     #7c6af7;
+  --text:       #e8e0f0;
+  --text-dim:   #8880aa;
+  --danger:     #c0392b;
+  --radius:     10px;
+  --font:       'Cormorant Garamond', Georgia, 'Times New Roman', serif;
+}
+
+html, body {
+  height: 100%;
+  overflow: hidden;
+  font-family: var(--font);
+  background: var(--bg);
+  color: var(--text);
+}
+
+/* ── 3D Canvas ───────────────────────────────────────────────────────────── */
+#museum-canvas {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  transition: filter 0.5s ease;
+}
+
+#museum-canvas.dimmed {
+  filter: blur(6px) brightness(0.3);
+}
+
+/* ── Top gradient veil (contrast for corner HUD elements) ────────────────── */
+body::before {
+  content: '';
+  position: fixed;
+  top: 0; left: 0; right: 0;
+  height: 110px;
+  background: linear-gradient(to bottom, rgba(4,3,10,.72) 0%, transparent 100%);
+  z-index: 45;
+  pointer-events: none;
+}
+
+/* ── Floating logo ───────────────────────────────────────────────────────── */
+#museum-logo {
+  position: fixed;
+  top: 24px; left: 28px;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  pointer-events: none;
+  user-select: none;
+}
+
+.logo-glyph {
+  font-size: 1.3rem;
+  color: var(--gold-light);
+  text-shadow: 0 1px 6px rgba(0,0,0,.8);
+}
+
+.logo-text {
+  font-size: 1.05rem;
+  letter-spacing: .14em;
+  color: #f5e8c0;
+  font-style: italic;
+  font-weight: 300;
+  text-shadow: 0 1px 6px rgba(0,0,0,.9);
+}
+
+/* ── Top-right HUD ───────────────────────────────────────────────────────── */
+#hud-topright {
+  position: fixed;
+  top: 18px; right: 22px;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.auth-area {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+
+.auth-name {
+  color: #f5e8c0;
+  font-style: italic;
+  font-size: 1rem;
+  letter-spacing: .04em;
+  text-shadow: 0 1px 5px rgba(0,0,0,.9);
+}
+
+.auth-input {
+  background: rgba(4,3,10,.7);
+  border: 1px solid rgba(201,160,48,.35);
+  color: #f0e8d8;
+  padding: 7px 14px;
+  border-radius: 6px;
+  font-size: .88rem;
+  width: 160px;
+  font-family: inherit;
+  outline: none;
+  transition: border-color .2s, background .2s;
+  backdrop-filter: blur(10px);
+}
+
+.auth-input:focus { border-color: var(--gold); background: rgba(4,3,10,.88); }
+.auth-input::placeholder { color: rgba(200,180,140,.5); font-style: italic; }
+
+.hud-pill {
+  background: rgba(4,3,10,.78);
+  border: 1px solid rgba(201,160,48,.45);
+  color: #f0d98a;
+  padding: 7px 18px;
+  border-radius: 20px;
+  font-family: inherit;
+  font-size: .88rem;
+  font-style: italic;
+  letter-spacing: .06em;
+  cursor: pointer;
+  backdrop-filter: blur(12px);
+  transition: background .2s, border-color .2s, color .2s;
+  text-shadow: 0 1px 4px rgba(0,0,0,.7);
+}
+
+.hud-pill:hover {
+  background: rgba(201,160,48,.15);
+  border-color: rgba(201,160,48,.7);
+  color: var(--gold-light);
+}
+
+/* ── FAB buttons (bottom corners) ───────────────────────────────────────── */
+.fab {
+  position: fixed;
+  bottom: 32px;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 22px;
+  background: rgba(8,7,14,.82);
+  border: 1px solid rgba(201,160,48,.35);
+  border-radius: 40px;
+  color: rgba(240,204,110,.9);
+  font-family: inherit;
+  font-size: 1rem;
+  font-style: italic;
+  letter-spacing: .08em;
+  cursor: pointer;
+  text-decoration: none;
+  backdrop-filter: blur(12px);
+  transition: background .25s, border-color .25s, color .25s, transform .2s, box-shadow .25s;
+  box-shadow: 0 4px 20px rgba(0,0,0,.4);
+}
+
+.fab:hover {
+  background: rgba(201,160,48,.14);
+  border-color: rgba(201,160,48,.7);
+  color: var(--gold-light);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 28px rgba(201,160,48,.15);
+}
+
+.fab--left  { left: 32px; }
+.fab--right { right: 32px; }
+
+.fab-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px; height: 20px;
+  flex-shrink: 0;
+  font-size: 1rem;
+}
+
+.fab-label {
+  font-size: .95rem;
+}
+
+/* ── Room hint ──��────────────────────────────────────────────────────────── */
+#room-hint {
+  position: fixed;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 40;
+  background: rgba(7,7,12,.6);
+  border: 1px solid rgba(201,160,48,.22);
+  border-radius: 20px;
+  padding: 7px 22px;
+  font-size: .78rem;
+  font-style: italic;
+  color: rgba(201,160,48,.65);
+  letter-spacing: .1em;
+  backdrop-filter: blur(6px);
+  pointer-events: all;
+  cursor: default;
+  transition:
+    opacity .5s,
+    color .25s,
+    border-color .25s,
+    background .25s,
+    box-shadow .25s,
+    transform .25s;
+  white-space: nowrap;
+  user-select: none;
+}
+
+#room-hint:hover {
+  color: #f0cc6e;
+  border-color: rgba(201,160,48,.65);
+  background: rgba(201,160,48,.1);
+  box-shadow: 0 0 18px rgba(201,160,48,.18), 0 0 6px rgba(201,160,48,.12);
+  transform: translateX(-50%) translateY(-2px);
+}
+
+#room-hint.hidden { opacity: 0; pointer-events: none; }
+
+/* ── Side panels ─────────────────────────────────────────────────────────── */
+.side-panel {
+  position: fixed;
+  top: 0; right: 0; bottom: 0;
+  width: min(960px, 100vw);
+  z-index: 60;
+  background: var(--panel-bg);
+  border-left: 1px solid var(--border);
+  transform: translateX(100%);
+  transition: transform .45s cubic-bezier(.22,.68,0,1.1);
+  overflow: hidden;
+}
+
+.side-panel.open { transform: translateX(0); }
+
+.panel-scroll {
+  height: 100%;
+  overflow-y: auto;
+  padding: 64px 44px 60px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+}
+
+.panel-close {
+  position: absolute;
+  top: 20px; right: 22px;
+  background: none;
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  width: 34px; height: 34px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: .9rem;
+  font-family: inherit;
+  transition: color .2s, border-color .2s;
+  z-index: 2;
+}
+
+.panel-close:hover { color: var(--text); border-color: var(--text-dim); }
+
+.panel-head {
+  margin-bottom: 36px;
+}
+
+.panel-head h2 {
+  font-size: 2.2rem;
+  font-weight: 300;
+  font-style: italic;
+  letter-spacing: .1em;
+  color: var(--gold-light);
+  margin-bottom: 8px;
+  line-height: 1.1;
+}
+
+.panel-head p {
+  color: var(--text-dim);
+  font-style: italic;
+  font-size: 1rem;
+  letter-spacing: .04em;
+}
+
+/* ── Create layout ───────────────────────────────────────────────────────── */
+.create-layout {
+  display: grid;
+  grid-template-columns: 460px 1fr;
+  gap: 40px;
+  align-items: start;
+}
+
+@media (max-width: 860px) {
+  .create-layout { grid-template-columns: 1fr; }
+}
+
+/* ── Drawing toolbar ─────────────────────────────────────────────────────── */
+.canvas-col {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.draw-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  padding: 8px 12px;
+  background: rgba(255,255,255,.04);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+
+.tool {
+  background: transparent;
+  border: 1px solid transparent;
+  color: var(--text-dim);
+  width: 32px; height: 32px;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color .15s, border-color .15s, background .15s;
+  flex-shrink: 0;
+}
+
+.tool:hover  { color: var(--text); border-color: var(--border); background: rgba(255,255,255,.05); }
+.tool.active { color: var(--gold); border-color: rgba(201,160,48,.5); background: rgba(201,160,48,.1); }
+
+.tool-sep {
+  width: 1px; height: 20px;
+  background: var(--border);
+  flex-shrink: 0;
+}
+
+.color-picker {
+  width: 32px; height: 32px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 2px;
+  background: rgba(255,255,255,.06);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.color-swatches {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+.swatch {
+  width: 18px; height: 18px;
+  border-radius: 50%;
+  border: 1px solid rgba(255,255,255,.15);
+  background: var(--c);
+  cursor: pointer;
+  transition: transform .15s, box-shadow .15s;
+  flex-shrink: 0;
+}
+
+.swatch:hover { transform: scale(1.25); box-shadow: 0 0 6px rgba(255,255,255,.3); }
+
+.brush-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: 1;
+  min-width: 100px;
+}
+
+.brush-row input[type=range] {
+  flex: 1;
+  accent-color: var(--gold);
+}
+
+.brush-preview {
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  background: #ffffff;
+  flex-shrink: 0;
+  transition: width .1s, height .1s;
+  box-shadow: 0 0 4px rgba(255,255,255,.4);
+}
+
+/* ── Canvas frame ───────────���────────────────────────────────────────────── */
+.canvas-frame {
+  position: relative;
+  border-radius: 4px;
+  overflow: hidden;
+  box-shadow:
+    0 0 0 1px var(--border),
+    0 0 0 3px rgba(201,160,48,.08),
+    0 0 0 4px rgba(42,37,69,.6),
+    0 8px 32px rgba(0,0,0,.5);
+}
+
+#draw-canvas {
+  width: 100%;
+  aspect-ratio: 1;
+  display: block;
+  background: #0f0d1e;
+  cursor: crosshair;
+  touch-action: none;
+}
+
+/* ── Controls column ─────────────────────────────────────────────────────── */
+.ctrl-col {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.field-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.field-label {
+  font-size: .72rem;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+  color: var(--text-dim);
+  font-style: normal;
+  font-family: inherit;
+}
+
+textarea {
+  background: rgba(255,255,255,.05);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: var(--text);
+  font-family: inherit;
+  font-size: 1rem;
+  font-style: italic;
+  line-height: 1.7;
+  padding: 14px 16px;
+  resize: vertical;
+  outline: none;
+  width: 100%;
+  transition: border-color .2s;
+}
+
+textarea:focus { border-color: rgba(201,160,48,.5); }
+textarea::placeholder { color: var(--text-dim); font-style: italic; }
+
+.slider-label {
+  display: flex;
+  justify-content: space-between;
+  font-size: .88rem;
+  color: var(--text-dim);
+  font-style: italic;
+}
+
+.slider-num { color: var(--gold); font-style: normal; }
+
+.field-group input[type=range] { width: 100%; accent-color: var(--gold); }
+
+.slider-hints {
+  display: flex;
+  justify-content: space-between;
+  font-size: .72rem;
+  color: var(--text-dim);
+  font-style: italic;
+}
+
+/* ── Materialize button ──────────────────────────────────────────────────── */
+.btn-materialize {
+  background: linear-gradient(135deg, rgba(201,160,48,.9), rgba(140,100,20,.9));
+  color: #0a0808;
+  border: none;
+  padding: 14px 24px;
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: 1.05rem;
+  font-style: italic;
+  font-weight: 600;
+  letter-spacing: .06em;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  width: 100%;
+  transition: opacity .2s, transform .15s, box-shadow .2s;
+  box-shadow: 0 4px 20px rgba(201,160,48,.25);
+}
+
+.btn-materialize:hover {
+  opacity: .9;
+  transform: translateY(-1px);
+  box-shadow: 0 6px 28px rgba(201,160,48,.35);
+}
+
+.btn-materialize:disabled { opacity: .45; cursor: not-allowed; transform: none; }
+
+/* ── Common buttons ──────────────────────────────────────────────────────── */
+.btn-gold {
+  background: var(--gold);
+  color: #0a0808;
+  border: none;
+  padding: 11px 20px;
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: .92rem;
+  font-weight: 600;
+  letter-spacing: .04em;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  transition: background .2s, opacity .2s;
+}
+
+.btn-gold:hover    { background: var(--gold-light); }
+.btn-gold:disabled { opacity: .5; cursor: not-allowed; }
+
+.btn-outline {
+  background: transparent;
+  color: var(--text);
+  border: 1px solid var(--border);
+  padding: 10px 20px;
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: .9rem;
+  cursor: pointer;
+  transition: border-color .2s, color .2s;
+}
+
+.btn-outline:hover { border-color: var(--gold); color: var(--gold); }
+
+.btn-outline-sm {
+  background: transparent;
+  color: var(--text-dim);
+  border: 1px solid var(--border);
+  padding: 6px 12px;
+  border-radius: 6px;
+  font-family: inherit;
+  font-size: .82rem;
+  cursor: pointer;
+  transition: border-color .2s, color .2s;
+}
+
+.btn-outline-sm:hover { border-color: var(--gold); color: var(--gold); }
+
+.btn-ghost {
+  background: transparent;
+  color: var(--text-dim);
+  border: none;
+  padding: 8px 16px;
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: .88rem;
+  font-style: italic;
+  cursor: pointer;
+  transition: color .2s;
+  width: 100%;
+}
+
+.btn-ghost:hover { color: var(--text); }
+
+.btn-danger {
+  background: transparent;
+  color: var(--danger);
+  border: 1px solid var(--danger);
+  padding: 10px 20px;
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: .9rem;
+  cursor: pointer;
+}
+
+.btn-danger:hover { background: rgba(192,57,43,.1); }
+
+/* ── Spinner ─────────────────────────────────────────────────────────────── */
+.spinner {
+  width: 16px; height: 16px;
+  border: 2px solid rgba(0,0,0,.3);
+  border-top-color: #0a0808;
+  border-radius: 50%;
+  animation: spin .7s linear infinite;
+  display: inline-block;
+  flex-shrink: 0;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* ── Result diptych ──────────────────────────────────────────────────────── */
+.result-area { display: flex; flex-direction: column; gap: 14px; }
+
+.result-diptych {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 10px;
+  align-items: center;
+}
+
+.res-side { display: flex; flex-direction: column; gap: 5px; }
+
+.res-label {
+  font-size: .68rem;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+  color: var(--text-dim);
+  text-align: center;
+  font-style: normal;
+}
+
+.result-diptych img {
+  width: 100%;
+  aspect-ratio: 1;
+  object-fit: cover;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  display: block;
+}
+
+.res-arrow { color: var(--gold); font-size: 1.4rem; flex-shrink: 0; }
+
+.save-area { display: flex; flex-direction: column; gap: 8px; }
+
+.save-btns {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.save-btns .btn-gold { font-size: .85rem; padding: 10px 12px; }
+
+.auth-notice {
+  text-align: center;
+  color: var(--text-dim);
+  font-style: italic;
+  font-size: .9rem;
+  padding: 8px;
+}
+
+/* ── My Gallery grid ─────────────────────────────────────────────────────── */
+.dream-grid {
+  columns: 2;
+  column-gap: 18px;
+}
+
+@media (max-width: 600px) { .dream-grid { columns: 1; } }
+
+.dream-card {
+  break-inside: avoid;
+  margin-bottom: 18px;
+  background: var(--card-bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  cursor: pointer;
+  transition: transform .2s, border-color .2s;
+}
+
+.dream-card:hover { transform: translateY(-2px); border-color: rgba(201,160,48,.4); }
+
+.card-diptych {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+.card-diptych img {
+  width: 100%;
+  aspect-ratio: 1;
+  object-fit: cover;
+  display: block;
+}
+
+.card-info { padding: 10px 12px; }
+
+.card-desc {
+  font-size: .9rem;
+  color: var(--text-dim);
+  font-style: italic;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.card-vis {
+  font-size: .72rem;
+  color: var(--gold-dark);
+  margin-top: 5px;
+  letter-spacing: .05em;
+  text-transform: uppercase;
+}
+
+.empty-state {
+  color: var(--text-dim);
+  font-style: italic;
+  text-align: center;
+  padding: 50px 20px;
+  font-size: 1rem;
+}
+
+/* ── Modal ───────────────────────────────────────────────────────────────── */
+.modal {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+
+.modal.hidden { display: none; }
+
+.modal-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0,0,0,.85);
+  backdrop-filter: blur(10px);
+}
+
+.modal-box {
+  position: relative;
+  background: rgba(10,9,18,.97);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 40px;
+  max-width: 860px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 0 60px rgba(0,0,0,.6);
+}
+
+.modal-close {
+  position: absolute;
+  top: 16px; right: 16px;
+  background: none;
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  width: 32px; height: 32px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: .9rem;
+  font-family: inherit;
+  transition: color .2s;
+}
+
+.modal-close:hover { color: var(--text); }
+
+.modal-diptych {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  gap: 14px;
+  align-items: center;
+}
+
+.modal-side { display: flex; flex-direction: column; gap: 6px; }
+
+.modal-lbl {
+  font-size: .68rem;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+  color: var(--text-dim);
+  text-align: center;
+}
+
+.modal-diptych img {
+  width: 100%;
+  aspect-ratio: 1;
+  object-fit: cover;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  display: block;
+}
+
+.modal-arrow { color: var(--gold); font-size: 2rem; flex-shrink: 0; }
+
+.modal-desc {
+  text-align: center;
+  font-style: italic;
+  font-size: 1.15rem;
+  color: var(--text-dim);
+  line-height: 1.7;
+  padding: 0 20px;
+}
+
+.modal-meta {
+  text-align: center;
+  font-size: .82rem;
+  color: rgba(201,160,48,.5);
+  letter-spacing: .06em;
+}
+
+.modal-owner {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+}
+
+/* ── Utility ─────────────────────────────────────────────────────────────── */
+.hidden { display: none !important; }