Citycraft

github: [can4hou6joeng4]

name: CI

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  validate:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        python-version: ['3.9', '3.12']

    steps:
      - uses: actions/checkout@v4

      - name: Set up Python ${{ matrix.python-version }}
        uses: actions/setup-python@v5
        with:
          python-version: ${{ matrix.python-version }}

      - name: Validate Python script syntax
        run: |
          for f in assets/scripts/*.py; do
            python -c "import ast; ast.parse(open('$f').read())" && echo "OK: $f" || exit 1
          done

      - name: Validate city token extraction
        run: |
          python assets/scripts/get_city_tokens.py "Kyoto" > /dev/null
          python assets/scripts/get_city_tokens.py "東京" > /dev/null
          python assets/scripts/get_city_tokens.py "Seoul" --texture > /dev/null
          echo "City token extraction: OK"

      - name: Validate all variant extraction
        run: |
          PASS=0
          TOTAL=0

          for v in A B C D E F G; do
            TOTAL=$((TOTAL+1))
            python assets/scripts/extract_variant.py assets/sections/hero-variants.html $v > /dev/null && PASS=$((PASS+1))
          done

          for v in A B C D E F; do
            TOTAL=$((TOTAL+1))
            python assets/scripts/extract_variant.py assets/sections/features-variants.html $v > /dev/null && PASS=$((PASS+1))
          done

          for v in A B C D E F; do
            TOTAL=$((TOTAL+1))
            python assets/scripts/extract_variant.py assets/sections/testimonial-variants.html $v > /dev/null && PASS=$((PASS+1))
          done

          for v in PRICING COMPARE_PRICING BRAND_WALL CTA FAQ_A FAQ_B; do
            TOTAL=$((TOTAL+1))
            python assets/scripts/extract_variant.py assets/sections/conversion-variants.html $v > /dev/null && PASS=$((PASS+1))
          done

          for v in A B C; do
            TOTAL=$((TOTAL+1))
            python assets/scripts/extract_variant.py assets/sections/footer-variants.html $v > /dev/null && PASS=$((PASS+1))
          done

          for v in ABOUT CONTACT BLOG; do
            TOTAL=$((TOTAL+1))
            python assets/scripts/extract_variant.py assets/sections/page-variants.html $v > /dev/null && PASS=$((PASS+1))
          done

          for v in NEWSLETTER WAITLIST CONTACT_INLINE; do
            TOTAL=$((TOTAL+1))
            python assets/scripts/extract_variant.py assets/sections/form-variants.html $v > /dev/null && PASS=$((PASS+1))
          done

          for v in TEAM STATS LOGO_SCROLL GALLERY INTEGRATIONS TIMELINE; do
            TOTAL=$((TOTAL+1))
            python assets/scripts/extract_variant.py assets/sections/extra-variants.html $v > /dev/null && PASS=$((PASS+1))
          done

          echo "$PASS/$TOTAL variants OK"
          [ "$PASS" -eq "$TOTAL" ] || exit 1

      - name: Validate evals.json
        run: |
          python -c "
          import json
          d = json.load(open('evals/evals.json'))
          assert d['skill_name'] == 'citycraft', f'Wrong skill name: {d[\"skill_name\"]}'
          assert len(d['evals']) >= 9, f'Too few evals: {len(d[\"evals\"])}'
          print(f'Evals: {len(d[\"evals\"])} cases OK')
          "

      - name: Validate SKILL.md frontmatter
        run: |
          python -c "
          text = open('SKILL.md').read()
          assert text.startswith('---'), 'Missing frontmatter'
          assert 'name: citycraft' in text[:500], 'Missing name field'
          assert 'description:' in text[:500], 'Missing description field'
          print('SKILL.md frontmatter: OK')
          "

# OS
.DS_Store
Thumbs.db
Desktop.ini

# Editors
.vscode/
.idea/
*.swp
*.swo
*~

# Generated preview files (user workspace, not source)
style-preview.html
options-preview.html
*-landing/

# Python
__pycache__/
*.pyc
*.pyo

# Temp
/tmp/
*.tmp
citycraft_result.json
citycraft_selection.json

# Logs
*.log

/* ============================================================
   LANDING PAGE SKILL — CLIP-PATH DIVIDER LIBRARY
   Apply to section elements to create non-rectangular dividers.
   Combine top/bottom cuts from different sections to create
   "interlocking" edges between adjacent sections.
   ============================================================ */

/* ── DIAGONAL CUTS ─────────────────────────────────────────── */

/* Section with a diagonal bottom-right cut */
.clip-diagonal-br {
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
  padding-bottom: calc(var(--section-pad, 120px) + 8vw);
}

/* Section with a diagonal bottom-left cut */
.clip-diagonal-bl {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 88%);
  padding-bottom: calc(var(--section-pad, 120px) + 8vw);
}

/* Section with opposing diagonal (parallelogram feel) */
.clip-parallelogram {
  clip-path: polygon(0 6vw, 100% 0, 100% calc(100% - 6vw), 0 100%);
  padding: calc(var(--section-pad, 120px) + 6vw) 0;
  margin-top: -6vw;
}

/* ── ANGLED CORNER CUTS (chamfer effect) ────────────────────── */

/* Bottom-right corner chamfered */
.clip-chamfer-br {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), calc(100% - 60px) 100%, 0 100%);
}

/* All four corners chamfered (hexagonal softness) */
.clip-chamfer-all {
  clip-path: polygon(40px 0, calc(100% - 40px) 0, 100% 40px, 100% calc(100% - 40px), calc(100% - 40px) 100%, 40px 100%, 0 calc(100% - 40px), 0 40px);
}

/* ── WAVE CUTS ──────────────────────────────────────────────── */

/* Gentle wave at the bottom */
.clip-wave-bottom {
  clip-path: ellipse(55% 100% at 50% 0%);
  /* Use as a decorative top element overlapping the previous section */
}

/* Arc cut (bowl shape at bottom) */
.clip-arc-bottom {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
  padding-bottom: calc(var(--section-pad, 120px) + 10vw);
}

/* ── STEPPED CUTS ───────────────────────────────────────────── */

/* Staircase cut bottom-right */
.clip-step-br {
  clip-path: polygon(0 0, 100% 0, 100% 60%, 75% 60%, 75% 80%, 50% 80%, 50% 100%, 0 100%);
}

/* ── UTILITY — apply to a sticky overlay section ───────────── */
/* The next section "covers" the previous one from below */
.clip-cover-prev {
  position: relative;
  z-index: 2;
  clip-path: polygon(0 48px, 100% 0, 100% 100%, 0 100%);
  margin-top: -48px;
}

/* ── GRADIENT / DISSOLVE TRANSITIONS ────────────────────────── */
/*
  渐变过渡 — The section's top edge dissolves in from transparent,
  overlapping the previous section. The gradient fades from transparent
  to var(--bg), so the section blends into what came before.

  Usage: add to the SECOND section in a pair.
  The previous section needs no special class.
*/
.section-dissolve {
  position: relative;
  z-index: 2;
  margin-top: -120px;
  padding-top: calc(120px + var(--section-pad, 120px));
}
.section-dissolve::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(to bottom, transparent, var(--bg, #f5ede0));
  pointer-events: none;
  z-index: -1;
}

/* ── FLAT / RULE TRANSITIONS ─────────────────────────────────── */
/*
  平直过渡 — Clean straight edge, no clip. An accent-colored ruled line
  visually separates sections without a geometric cut. Understated.

  Usage: add to the section that receives the rule at its top.
*/
.section-rule {
  position: relative;
  padding-top: calc(var(--section-pad, 120px) + 32px);
}
.section-rule::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--accent, #8b4513) 25%,
    var(--accent, #8b4513) 75%,
    transparent
  );
  opacity: 0.5;
}

/* ── SMOOTH CURVE TRANSITIONS ────────────────────────────────── */
/*
  曲线过渡 — Smooth rounded bottom edge using border-radius.
  The section background is clipped to an elliptical curve at the bottom.
  Combine with the next section using a negative margin-top to interlock.

  Usage: add to the FIRST section in a pair.
  Next section: add z-index: 2 and margin-top: -6vw.
*/
.clip-round-bottom {
  border-radius: 0 0 50% 50% / 0 0 5vw 5vw;
  overflow: hidden;
  padding-bottom: calc(var(--section-pad, 120px) + 6vw);
}

/* Concave wave — a scalloped bottom cut (multi-point polygon curve) */
.clip-scallop {
  clip-path: polygon(
    0 0, 100% 0, 100% 82%,
    92% 84%, 84% 88%, 75% 93%, 66% 97%, 58% 99%,
    50% 100%, 42% 99%, 34% 97%, 25% 93%, 16% 88%,
    8% 84%, 0 82%
  );
  padding-bottom: calc(var(--section-pad, 120px) + 12vw);
}

/* ============================================================
   LANDING PAGE SKILL — GSAP ANIMATION SNIPPETS
   These are proven patterns. Copy, adapt variable names,
   and plug into your main.js. Do NOT reinvent these.
   ============================================================ */

// ─── 0. REDUCED MOTION GUARD ─────────────────────────────────
// Check once, use everywhere. When true, skip all non-essential animations.
const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

// ─── 1. BLUR-STAGGER ENTRANCE (hero text reveal) ──────────────
// Usage: call once on DOMContentLoaded
function initHeroEntrance(containerSelector, itemSelector) {
  if (prefersReducedMotion) { gsap.set(itemSelector || `${containerSelector} > *`, { opacity: 1 }); return; }
  gsap.from(itemSelector || `${containerSelector} > *`, {
    y: 32,
    opacity: 0,
    filter: "blur(6px)",
    duration: 0.9,
    ease: "power3.out",
    stagger: 0.12,
    clearProps: "filter",
  });
}
// Example: initHeroEntrance(".hero-text", ".hero-text > *")


// ─── 2. CLIP-MASK LINE REVEAL (Paris / editorial style) ────────
// Each heading line slides up from a clip container.
// Wrap each line: <span class="line-wrap"><span class="line-inner">text</span></span>
//
// ⚠️  CJK CLIPPING FIX (required when page includes Chinese/Japanese):
// .line-wrap { overflow: hidden } clips tall CJK ascenders at the top.
// Always add this compensation in style.css:
//   .line-wrap { overflow: hidden; padding-top: 0.15em; margin-top: -0.15em; }
function initLineReveal(headingSelector) {
  if (prefersReducedMotion) return;
  const headings = document.querySelectorAll(headingSelector);
  headings.forEach((heading) => {
    const lines = heading.querySelectorAll(".line-inner");
    gsap.from(lines, {
      y: "110%",
      duration: 0.85,
      ease: "expo.out",
      stagger: 0.08,
      scrollTrigger: {
        trigger: heading,
        start: "top 80%",
        toggleActions: "play none none none",
      },
    });
  });
}
// CSS required:
// .line-wrap { display: block; overflow: hidden; }
// .line-inner { display: block; }


// ─── 3. PARALLAX LAYERS (depth on scroll) ──────────────────────
// Pass an array of { selector, speed } — speed 0.5 = half rate, 1.5 = faster
function initParallax(layers) {
  if (prefersReducedMotion) return;
  layers.forEach(({ selector, speed }) => {
    gsap.to(selector, {
      y: () => window.innerHeight * (speed - 1) * -0.4,
      ease: "none",
      scrollTrigger: {
        trigger: "body",
        start: "top top",
        end: "bottom bottom",
        scrub: speed,
      },
    });
  });
}
// Example:
// initParallax([
//   { selector: ".hero-bg-glow",   speed: 0.6 },
//   { selector: ".hero-phone",     speed: 1.2 },
//   { selector: ".hero-particles", speed: 0.8 },
// ]);


// ─── 4. STICKY STEP-THROUGH (how it works / theatrical) ────────
// Pins a container, steps through items as user scrolls.
// HTML: <div class="steps-wrapper">
//         <div class="steps-panel sticky-panel">  ← pinned
//         <div class="steps-content">             ← scroll height
//           <div class="step" data-step="0">
function initStickySteps(wrapperSelector, panelSelector, stepSelector) {
  if (prefersReducedMotion) { document.querySelectorAll(stepSelector).forEach(s => s.classList.add("active")); return; }
  const steps = document.querySelectorAll(stepSelector);
  const total = steps.length;

  ScrollTrigger.create({
    trigger: wrapperSelector,
    start: "top top",
    end: `+=${total * 100}vh`,
    pin: panelSelector,
    scrub: false,
    onUpdate(self) {
      const idx = Math.min(Math.floor(self.progress * total), total - 1);
      steps.forEach((s, i) => s.classList.toggle("active", i === idx));
    },
  });
}
// Example:
// initStickySteps(".how-wrapper", ".how-panel", ".how-step")


// ─── 5. FULLSCREEN BLAST MENU ──────────────────────────────────
// Open/close animation for a full-viewport nav overlay.
// HTML: <div class="nav-overlay"> <a class="nav-item">...</a> </div>
function initBlastMenu(triggerSelector, overlaySelector, itemSelector) {
  const trigger = document.querySelector(triggerSelector);
  const overlay = document.querySelector(overlaySelector);
  const items   = document.querySelectorAll(itemSelector);
  let isOpen = false;

  if (prefersReducedMotion) {
    gsap.set(overlay, { display: "none" });
    trigger.addEventListener("click", () => {
      isOpen = !isOpen;
      trigger.setAttribute("aria-expanded", isOpen);
      document.body.style.overflow = isOpen ? "hidden" : "";
      overlay.style.display = isOpen ? "flex" : "none";
    });
    document.addEventListener("keydown", (e) => {
      if (e.key === "Escape" && isOpen) { isOpen = false; overlay.style.display = "none"; document.body.style.overflow = ""; }
    });
    return;
  }

  // Overlay starts: clip-path: inset(0% 0% 100% 0%)
  gsap.set(overlay, { clipPath: "inset(0% 0% 100% 0%)", display: "flex" });

  const openTl = gsap.timeline({ paused: true })
    .to(overlay,  { clipPath: "inset(0% 0% 0% 0%)", duration: 0.6, ease: "power4.inOut" })
    .from(items,  { y: 64, opacity: 0, stagger: 0.07, duration: 0.5, ease: "power3.out" }, "-=0.25");

  trigger.addEventListener("click", () => {
    isOpen = !isOpen;
    trigger.setAttribute("aria-expanded", isOpen);
    document.body.style.overflow = isOpen ? "hidden" : "";
    isOpen ? openTl.play() : openTl.reverse();
  });

  document.addEventListener("keydown", (e) => {
    if (e.key === "Escape" && isOpen) { isOpen = false; openTl.reverse(); document.body.style.overflow = ""; }
  });
}
// CSS required:
// .nav-overlay { position: fixed; inset: 0; z-index: 200; display: none; }
// Call: initBlastMenu(".menu-toggle", ".nav-overlay", ".nav-item")


// ─── 6. MAGNETIC PILL NAV ──────────────────────────────────────
// Bottom pill floats toward the cursor when nearby.
function initMagneticPill(pillSelector, radius, strength) {
  if (prefersReducedMotion) return;
  radius   = radius   || 120;
  strength = strength || 0.28;
  const pill = document.querySelector(pillSelector);
  if (!pill) return;

  document.addEventListener("mousemove", (e) => {
    const r    = pill.getBoundingClientRect();
    const cx   = r.left + r.width  / 2;
    const cy   = r.top  + r.height / 2;
    const dx   = e.clientX - cx;
    const dy   = e.clientY - cy;
    const dist = Math.hypot(dx, dy);

    if (dist < radius) {
      const pull = 1 - dist / radius;
      gsap.to(pill, { x: dx * pull * strength, y: dy * pull * strength, duration: 0.4, ease: "power2.out" });
    } else {
      gsap.to(pill, { x: 0, y: 0, duration: 0.8, ease: "elastic.out(1, 0.5)" });
    }
  });
}
// Example: initMagneticPill(".pill-nav")


// ─── 7. HERO DEMO STEPPER (time-driven product walkthrough) ────
// A self-running, scene-by-scene product demo inside the Hero.
// NOT scroll-driven — advances on a timer, resets when scrolled away.
//
// Required HTML structure:
//   <div class="demo-wrapper">                    ← IntersectionObserver target
//     <div class="demo-step-badge">
//       <span class="demo-step-num"></span>
//       <span class="demo-step-label"></span>
//     </div>
//     <div class="demo-panel">                    ← needs overflow: visible in CSS
//       <div class="demo-slot" data-step="0"></div>
//       <div class="demo-slot" data-step="1"></div>
//       <div class="demo-slot" data-step="2"></div>
//     </div>
//     <div class="demo-progress-dots">
//       <span class="step-dot active" data-target="0"></span>
//       <span class="step-dot" data-target="1"></span>
//       <span class="step-dot" data-target="2"></span>
//     </div>
//     <!-- Optional synced subtitle — text updates per step -->
//     <p class="demo-synced-text"
//        data-step-0="Step 0 subtitle"
//        data-step-1="Step 1 subtitle"
//        data-step-2="Step 2 subtitle"></p>
//   </div>
//
// stepDefs: array of { num, label, onEnter(slotEl) }
// onEnter receives the slot DOM element — run your GSAP timeline inside it.
//
// Design law: each onEnter should animate (1) one hero element first,
// (2) supporting elements with stagger delay, (3) one breakout element last.
// Read references/product-demo-hero.md before writing these callbacks.
function initHeroDemoStepper(wrapperSel, stepDefs, intervalMs) {
  const wrapper = document.querySelector(wrapperSel);
  if (!wrapper) return;
  intervalMs = intervalMs || 3200;

  const slots    = wrapper.querySelectorAll('.demo-slot');
  const numEl    = wrapper.querySelector('.demo-step-num');
  const labelEl  = wrapper.querySelector('.demo-step-label');
  const dots     = wrapper.querySelectorAll('.step-dot');
  const syncText = wrapper.querySelector('.demo-synced-text');

  let current = -1;
  let timer   = null;

  function updateBadge(idx) {
    const def = stepDefs[idx];
    if (numEl) {
      gsap.to(numEl, { opacity: 0, y: -6, duration: 0.18, onComplete: () => {
        numEl.textContent = def.num;
        gsap.to(numEl, { opacity: 1, y: 0, duration: 0.22 });
      }});
    }
    if (labelEl) {
      gsap.to(labelEl, { opacity: 0, duration: 0.15, onComplete: () => {
        labelEl.textContent = def.label;
        gsap.to(labelEl, { opacity: 1, duration: 0.2 });
      }});
    }
    if (syncText) {
      gsap.to(syncText, { opacity: 0, y: 4, duration: 0.18, onComplete: () => {
        syncText.textContent = syncText.dataset['step' + idx] || '';
        gsap.to(syncText, { opacity: 1, y: 0, duration: 0.25 });
      }});
    }
    dots.forEach((d, i) => d.classList.toggle('active', i === idx));
  }

  function enterSlot(slot, idx) {
    gsap.set(slot, { display: 'block', opacity: 0 });
    gsap.to(slot, { opacity: 1, duration: 0.22 });
    if (stepDefs[idx].onEnter) stepDefs[idx].onEnter(slot);
  }

  function goTo(idx) {
    const prev = current;
    current = idx;
    updateBadge(idx);
    if (prev >= 0 && slots[prev]) {
      gsap.to(slots[prev], { opacity: 0, duration: 0.2, onComplete: () => {
        gsap.set(slots[prev], { display: 'none' });
        enterSlot(slots[idx], idx);
      }});
    } else {
      enterSlot(slots[idx], idx);
    }
  }

  function startTimer() {
    clearInterval(timer);
    timer = setInterval(() => goTo((current + 1) % stepDefs.length), intervalMs);
  }

  dots.forEach((dot, i) => {
    dot.addEventListener('click', () => { clearInterval(timer); goTo(i); startTimer(); });
  });

  // Start on viewport entry, pause on exit, reset when re-entering
  const io = new IntersectionObserver((entries) => {
    entries.forEach(({ isIntersecting }) => {
      if (isIntersecting) {
        slots.forEach(s => gsap.set(s, { display: 'none', opacity: 0 }));
        current = -1;
        goTo(0);
        startTimer();
      } else {
        clearInterval(timer);
      }
    });
  }, { threshold: 0.3 });

  io.observe(wrapper);
}
// Example:
// initHeroDemoStepper(".demo-wrapper", [
//   { num: "01", label: "Setup",   onEnter(slot) { /* gsap animations */ } },
//   { num: "02", label: "Running", onEnter(slot) { animateCount(slot.querySelector('.big-num'), 4200, 1.5); } },
//   { num: "03", label: "Result",  onEnter(slot) { /* gsap animations */ } },
// ]);


// ─── 8. ANIMATED COUNT (use inside initHeroDemoStepper onEnter) ─
// Counts from 0 → target inside an element. Shows velocity and scale.
function animateCount(el, target, duration, suffix) {
  if (!el) return;
  suffix   = suffix   || '';
  duration = duration || 1.6;
  if (prefersReducedMotion) { el.textContent = Math.round(target).toLocaleString() + suffix; return; }
  const obj = { val: 0 };
  gsap.to(obj, {
    val: target,
    duration: duration,
    ease: 'power3.out',
    onUpdate: () => { el.textContent = Math.round(obj.val).toLocaleString() + suffix; },
  });
}
// Example: animateCount(slot.querySelector('.views-num'), 84201, 1.8)
// Example: animateCount(slot.querySelector('.pct'), 96, 1.2, '%')


// ─── 9. DARK MODE TOGGLE ─────────────────────────────────────
// Toggles between light/dark color schemes by swapping CSS custom properties.
// Requires: :root with light tokens, [data-theme="dark"] with dark tokens in style.css.
// Persists choice to localStorage.
//
// CSS required in style.css:
//   :root { --bg: #fdf9f2; --bg-surface: #f7f0e6; --ink: #1a1510; ... }
//   [data-theme="dark"] { --bg: #0e0c09; --bg-surface: #1e1b16; --ink: #f2ede4; ... }
//
// HTML: <button class="theme-toggle" aria-label="Toggle dark mode">
//         <svg class="icon-sun" ...></svg>
//         <svg class="icon-moon" ...></svg>
//       </button>
function initDarkModeToggle(toggleSelector) {
  const toggle = document.querySelector(toggleSelector);
  if (!toggle) return;

  const root = document.documentElement;
  const stored = localStorage.getItem('theme');
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  const initial = stored || (prefersDark ? 'dark' : 'light');

  root.setAttribute('data-theme', initial);

  toggle.addEventListener('click', () => {
    const current = root.getAttribute('data-theme');
    const next = current === 'dark' ? 'light' : 'dark';
    root.setAttribute('data-theme', next);
    localStorage.setItem('theme', next);
  });
}
// Example: initDarkModeToggle(".theme-toggle")

#!/usr/bin/env python3
from __future__ import annotations

import re
import sys
from pathlib import Path

START_RE = re.compile(r"^\s*<!--\s*@@VARIANT:([A-Za-z0-9_]+)\s*-->\s*$")
END_RE = re.compile(r"^\s*<!--\s*@@/VARIANT:([A-Za-z0-9_]+)\s*-->\s*$")
STYLE_OPEN_RE = re.compile(r"^\s*<style\b[^>]*>\s*$", re.IGNORECASE)
STYLE_CLOSE_RE = re.compile(r"^\s*</style>\s*$", re.IGNORECASE)


def fail(message: str) -> None:
    print(f"Error: {message}", file=sys.stderr)
    print("Usage: python3 extract_variant.py <file> <variant>", file=sys.stderr)
    print("Example: python3 extract_variant.py hero-variants.html A", file=sys.stderr)
    print("Example: python3 extract_variant.py conversion-variants.html PRICING", file=sys.stderr)
    raise SystemExit(1)


def resolve_path(raw_path: str) -> Path:
    candidate = Path(raw_path).expanduser()
    if candidate.exists():
        return candidate.resolve()

    script_dir = Path(__file__).resolve().parent
    fallbacks = [
        script_dir.parent / "sections" / raw_path,
        script_dir / raw_path,
        Path.cwd() / raw_path,
    ]
    for fallback in fallbacks:
        if fallback.exists():
            return fallback.resolve()

    fail(f"file not found: {raw_path}")


def parse_segments(lines: list[str]) -> tuple[list[tuple[int, int]], list[dict[str, object]]]:
    style_blocks: list[tuple[int, int]] = []
    segments: list[dict[str, object]] = []
    inside_style = False
    style_block_id = -1
    current: dict[str, object] | None = None

    for idx, line in enumerate(lines):
        if STYLE_OPEN_RE.search(line):
            inside_style = True
            style_block_id += 1
            style_blocks.append((idx, -1))

        start_match = START_RE.match(line)
        if start_match:
            if current is not None:
                fail("nested variant markers are not supported")
            current = {
                "variant": start_match.group(1).upper(),
                "start_marker": idx,
                "content_start": idx + 1,
                "inside_style": inside_style,
                "style_block_id": style_block_id if inside_style else None,
            }
            continue

        end_match = END_RE.match(line)
        if end_match:
            if current is None:
                fail(f"unexpected closing marker for {end_match.group(1)}")
            if current["variant"] != end_match.group(1).upper():
                fail(
                    f"marker mismatch: expected {current['variant']} but found {end_match.group(1).upper()}"
                )
            current["end_marker"] = idx
            current["content_end"] = idx
            segments.append(current)
            current = None
            continue

        if STYLE_CLOSE_RE.search(line):
            if style_block_id < 0:
                fail("found </style> before <style>")
            start_idx, _ = style_blocks[style_block_id]
            style_blocks[style_block_id] = (start_idx, idx)
            inside_style = False

    if current is not None:
        fail(f"unterminated variant marker for {current['variant']}")

    unresolved = [block for block in style_blocks if block[1] == -1]
    if unresolved:
        fail("unterminated <style> block")

    return style_blocks, segments


def build_style_output(lines, style_blocks, segments, variant):
    outputs = []

    full_style_segments = [
        segment
        for segment in segments
        if segment["variant"] == variant
        and "<style" in "".join(lines[segment["content_start"]:segment["content_end"]])
    ]
    for segment in full_style_segments:
        content = "".join(lines[segment["content_start"]:segment["content_end"]]).strip()
        if content:
            outputs.append((int(segment["start_marker"]), content))

    style_segment_groups = {}
    for segment in segments:
        if segment["variant"] != variant:
            continue
        if not segment["inside_style"]:
            continue
        content = "".join(lines[segment["content_start"]:segment["content_end"]])
        if "<style" in content:
            continue
        style_segment_groups.setdefault(int(segment["style_block_id"]), []).append(segment)

    block_segments = {}
    for segment in segments:
        if segment["inside_style"] and segment["style_block_id"] is not None:
            block_segments.setdefault(int(segment["style_block_id"]), []).append(segment)

    for block_id in style_segment_groups:
        start_idx, end_idx = style_blocks[block_id]
        all_block_segments = block_segments.get(block_id, [])
        marker_lines = {int(segment["start_marker"]) for segment in all_block_segments} | {
            int(segment["end_marker"]) for segment in all_block_segments
        }
        occupied_lines = {}
        for segment in all_block_segments:
            for line_idx in range(int(segment["content_start"]), int(segment["content_end"])):
                occupied_lines[line_idx] = str(segment["variant"])

        rendered = []
        for line_idx in range(start_idx, end_idx + 1):
            if line_idx in marker_lines:
                continue
            owner = occupied_lines.get(line_idx)
            if owner is not None and owner != variant:
                continue
            rendered.append(lines[line_idx])

        content = "".join(rendered).strip()
        if content:
            outputs.append((start_idx, content))

    outputs.sort(key=lambda item: item[0])
    return outputs


def build_markup_output(lines, segments, variant):
    outputs = []
    for segment in segments:
        if segment["variant"] != variant:
            continue
        content = "".join(lines[segment["content_start"]:segment["content_end"]])
        stripped = content.strip()
        if not stripped:
            continue
        if STYLE_OPEN_RE.match(stripped.splitlines()[0]):
            continue
        if segment["inside_style"]:
            continue
        outputs.append((int(segment["start_marker"]), stripped))

    outputs.sort(key=lambda item: item[0])
    return outputs


def main():
    if len(sys.argv) != 3:
        fail("expected a file path and a variant name")

    file_path = resolve_path(sys.argv[1])
    variant = sys.argv[2].strip().upper()
    if not variant:
        fail("variant name cannot be empty")

    lines = file_path.read_text().splitlines(keepends=True)
    style_blocks, segments = parse_segments(lines)

    if not any(segment["variant"] == variant for segment in segments):
        fail(f"variant not found: {variant}")

    style_outputs = [content for _, content in build_style_output(lines, style_blocks, segments, variant)]
    markup_outputs = [content for _, content in build_markup_output(lines, segments, variant)]

    parts = [part for part in style_outputs + markup_outputs if part.strip()]
    if not parts:
        fail(f"no extractable content found for variant: {variant}")

    sys.stdout.write("\n\n".join(parts).rstrip() + "\n")


if __name__ == "__main__":
    main()

#!/usr/bin/env python3
"""
get_city_tokens.py — Extract color tokens (and optionally texture CSS) for a city.

Usage:
  python3 get_city_tokens.py "京都"           # color tokens (shell eval-friendly)
  python3 get_city_tokens.py "Kyoto"          # case-insensitive, Chinese or English
  python3 get_city_tokens.py "京都" --texture  # print only the CSS texture block

Color output (one token per line, for shell eval):
  CITY_BG=#f7f0e6
  CITY_SURFACE=#ede4d6
  CITY_INK=#2a1f14
  CITY_MUTED=#7a6655
  CITY_ACCENT=#8b4513

Exit 0 on success, 1 if city not found.
"""

from __future__ import annotations

import re
import sys
from pathlib import Path

CITY_STYLES = Path(__file__).parent.parent.parent / "references" / "city-styles.md"

# Map CSS variable names → output key names
VAR_MAP = {
    "--bg":         "CITY_BG",
    "--bg-surface": "CITY_SURFACE",
    "--ink":        "CITY_INK",
    "--ink-muted":  "CITY_MUTED",
    "--accent":     "CITY_ACCENT",
}


CJK_ALIASES = {
    "東京": "东京", "東京夜": "东京夜",
    "パリ": "巴黎", "ソウル": "首尔", "ベイルート": "贝鲁特",
    "キョウト": "���都", "ニューヨーク": "纽约", "ベルリン": "柏林",
    "シンガポール": "新加坡", "ドバイ": "迪拜", "ムンバイ": "孟买",
    "香港": "香港", "台北": "台北", "大阪": "大阪",
}


def find_city_section(text: str, query: str) -> str | None:
    """Return the markdown text of the matching city section, or None."""
    query_clean = query.strip()
    query_lower = query_clean.lower()
    # Resolve CJK variant aliases (e.g. Japanese 東京 → simplified 东京)
    resolved = CJK_ALIASES.get(query_clean, query_clean)
    candidates = {query_lower, resolved.lower()}
    # Split on ## headings (city sections)
    sections = re.split(r"\n(?=## \d+\.)", text)
    for section in sections:
        first_line = section.split("\n")[0].lower()
        if any(c in first_line for c in candidates):
            return section
    return None


def extract_colors(section: str) -> dict:
    """Parse the ### Colors block and return {VAR_MAP key: value}."""
    result = {}
    in_colors = False
    for line in section.splitlines():
        if re.match(r"^### Colors", line):
            in_colors = True
            continue
        if in_colors and re.match(r"^### ", line):
            break  # next subsection
        if in_colors:
            for css_var, out_key in VAR_MAP.items():
                # Match: --bg:    #xxx  or  --bg:  rgba(...)
                pattern = rf"^\s*{re.escape(css_var)}\s*:\s*([#\w(),.\s%]+)"
                m = re.match(pattern, line)
                if m:
                    value = m.group(1).split("/*")[0].strip().rstrip(",")
                    result[out_key] = value
    return result


def extract_texture(section: str) -> str:
    """Return the CSS inside the ### Texture code block, or empty string."""
    m = re.search(r"### Texture.*?```css\s*(.*?)```", section, re.S)
    return m.group(1).strip() if m else ""


def main():
    if len(sys.argv) < 2:
        print("Usage: get_city_tokens.py <city-name> [--texture]", file=sys.stderr)
        sys.exit(1)

    query = sys.argv[1]
    want_texture = "--texture" in sys.argv

    text = CITY_STYLES.read_text(encoding="utf-8")
    section = find_city_section(text, query)

    if not section:
        print(f"City not found: {query}", file=sys.stderr)
        sys.exit(1)

    if want_texture:
        css = extract_texture(section)
        if css:
            print(css)
        else:
            print(f"No texture block found for '{query}'", file=sys.stderr)
            sys.exit(1)
        return

    colors = extract_colors(section)

    missing = [k for k in VAR_MAP.values() if k not in colors]
    if missing:
        print(f"Warning: could not parse {missing} for '{query}'", file=sys.stderr)

    for key in VAR_MAP.values():
        if key in colors:
            print(f"{key}={colors[key]}")


if __name__ == "__main__":
    main()

<#
.SYNOPSIS
    Windows PowerShell preview launcher for citycraft.

.DESCRIPTION
    Substitutes __KEY__ placeholders in the template, serves the filled HTML
    on localhost, opens the default browser, waits for POST /submit, and
    prints the result JSON to stdout.

    Requires: PowerShell 5.1+ (Windows built-in) or PowerShell 7+.
    No external dependencies — uses System.Net.HttpListener from .NET.

.PARAMETER Template
    Path to the HTML template file.

.PARAMETER Output
    Path to write the filled HTML.

.PARAMETER Port
    HTTP port to listen on (default: 17432).

.PARAMETER Result
    Path to write the submitted JSON (default: %TEMP%\citycraft_result.json).

.PARAMETER Timeout
    Seconds to wait for submission (default: 300).

.PARAMETER Sub
    One or more KEY=VALUE substitution pairs. Replaces __KEY__ in the template.
    Repeat the flag for multiple pairs:  -Sub "K1=V1" -Sub "K2=V2"

.EXAMPLE
    .\run_preview.ps1 `
        -Template "$env:USERPROFILE\.agents\skills\citycraft\assets\style-preview-template.html" `
        -Output   .\style-preview.html `
        -Port     17433 `
        -Timeout  300 `
        -Sub "PRODUCT_NAME=My Product" `
        -Sub "PRODUCT_HEADLINE=Build faster" `
        -Sub "RECEIVER_PORT=17433"
#>
param(
    [Parameter(Mandatory)][string]   $Template,
    [Parameter(Mandatory)][string]   $Output,
    [int]      $Port    = 17432,
    [string]   $Result  = (Join-Path $env:TEMP "citycraft_result.json"),
    [int]      $Timeout = 300,
    [string[]] $Sub     = @()
)

Set-StrictMode -Version Latest
$ErrorActionPreference = "Stop"

# ── 1. Template substitution ──────────────────────────────────────────────────
$templateFull = (Resolve-Path $Template).Path
$content = [System.IO.File]::ReadAllText($templateFull, [System.Text.Encoding]::UTF8)

foreach ($pair in $Sub) {
    $idx = $pair.IndexOf("=")
    if ($idx -lt 1) { continue }
    $key   = "__$($pair.Substring(0, $idx).Trim())__"
    $value = $pair.Substring($idx + 1)
    $content = $content.Replace($key, $value)
}

$outputFull = Join-Path (Get-Location) $Output
[System.IO.File]::WriteAllText($outputFull, $content, [System.Text.Encoding]::UTF8)

# ── 2. Start HTTP listener ────────────────────────────────────────────────────
$listener = [System.Net.HttpListener]::new()
$listener.Prefixes.Add("http://localhost:$Port/")
$listener.Start()

# ── 3. Open browser ───────────────────────────────────────────────────────────
Start-Process "http://localhost:$Port"

# ── 4. Request loop ───────────────────────────────────────────────────────────
$startTime  = [DateTime]::UtcNow
$submitted  = $false
$htmlBytes  = $null   # lazy-load on first GET

try {
    while ($listener.IsListening) {
        $elapsed = ([DateTime]::UtcNow - $startTime).TotalSeconds
        if ($elapsed -ge $Timeout) { break }

        # Non-blocking wait: up to 1 s per iteration
        $async = $listener.BeginGetContext($null, $null)
        if (-not $async.AsyncWaitHandle.WaitOne(1000)) { continue }

        $ctx  = $listener.EndGetContext($async)
        $req  = $ctx.Request
        $resp = $ctx.Response

        $resp.Headers.Add("Access-Control-Allow-Origin",  "*")
        $resp.Headers.Add("Access-Control-Allow-Methods", "GET,POST,OPTIONS")
        $resp.Headers.Add("Access-Control-Allow-Headers", "Content-Type")

        $route = "$($req.HttpMethod) $($req.Url.LocalPath)"

        switch ($route) {
            "OPTIONS /" {
                $resp.StatusCode = 204
            }
            "GET /" {
                if ($null -eq $htmlBytes) {
                    $htmlBytes = [System.IO.File]::ReadAllBytes($outputFull)
                }
                $resp.ContentType     = "text/html; charset=utf-8"
                $resp.ContentLength64 = $htmlBytes.Length
                $resp.OutputStream.Write($htmlBytes, 0, $htmlBytes.Length)
            }
            "POST /submit" {
                $reader = [System.IO.StreamReader]::new(
                    $req.InputStream, [System.Text.Encoding]::UTF8)
                $body = $reader.ReadToEnd()
                [System.IO.File]::WriteAllText(
                    $Result, $body, [System.Text.Encoding]::UTF8)
                $ok = [System.Text.Encoding]::UTF8.GetBytes('{"ok":true}')
                $resp.ContentType     = "application/json; charset=utf-8"
                $resp.ContentLength64 = $ok.Length
                $resp.OutputStream.Write($ok, 0, $ok.Length)
                $submitted = $true
            }
            default {
                $resp.StatusCode = 404
            }
        }

        $resp.Close()
        if ($submitted) { break }
    }
} finally {
    $listener.Stop()
}

# ── 5. Output ─────────────────────────────────────────────────────────────────
if ($submitted) {
    $data = [System.IO.File]::ReadAllText($Result, [System.Text.Encoding]::UTF8)
    Remove-Item $Result -ErrorAction SilentlyContinue
    Write-Output $data
} else {
    Write-Error "No submission in ${Timeout}s. Ask the user to type their choice manually."
    exit 1
}

#!/usr/bin/env python3
"""
run_preview.py — Cross-platform preview launcher for citycraft.

Replaces the sed + receiver.py + shell-polling combo with a single script
that works on macOS, Linux, and Windows (Python 3.6+, stdlib only).

What it does:
  1. Reads the template and substitutes __KEY__ placeholders.
  2. Writes the filled HTML to --output.
  3. Starts a one-shot HTTP server on --port (GET / → HTML, POST /submit → result).
  4. Opens the browser via webbrowser.open() (cross-platform).
  5. Blocks until POST /submit arrives or --timeout seconds elapse.
  6. Prints the submitted JSON to stdout and exits 0.
     On timeout: prints a message to stderr and exits 1.

Usage:
    python3 run_preview.py \\
        --template /path/to/template.html \\
        --output   ./preview.html \\
        --port     17433 \\
        --timeout  300 \\
        PRODUCT_NAME="My Product" \\
        PRODUCT_HEADLINE="Build faster" \\
        RECEIVER_PORT=17433

Each positional KEY=VALUE arg replaces __KEY__ in the template.
"""

import argparse
import os
import sys
import tempfile
import threading
import time
import webbrowser
from http.server import BaseHTTPRequestHandler, ThreadingHTTPServer
from pathlib import Path


def parse_args():
    p = argparse.ArgumentParser(description="citycraft preview launcher")
    p.add_argument("--template", required=True, help="Path to HTML template")
    p.add_argument("--output",   required=True, help="Path to write filled HTML")
    p.add_argument("--port",     type=int, default=17432, help="HTTP port (default 17432)")
    p.add_argument("--result",   default=None,
                   help="Path to write submitted JSON (default: OS temp dir)")
    p.add_argument("--timeout",  type=int, default=300,
                   help="Seconds to wait for submission (default 300)")
    p.add_argument("subs", nargs="*",
                   help="Substitution pairs: KEY=VALUE  (replaces __KEY__ in template)")
    return p.parse_args()


def substitute(template_path, output_path, subs):
    text = Path(template_path).read_text(encoding="utf-8")
    for pair in subs:
        if "=" not in pair:
            continue
        key, _, value = pair.partition("=")
        text = text.replace("__{key}__".format(key=key.strip()), value)
    Path(output_path).write_text(text, encoding="utf-8")


def make_handler(html_path, result_path):
    """Return a BaseHTTPRequestHandler subclass bound to html_path / result_path."""

    class _Handler(BaseHTTPRequestHandler):

        def _cors(self):
            self.send_header("Access-Control-Allow-Origin", "*")
            self.send_header("Access-Control-Allow-Methods", "GET,POST,OPTIONS")
            self.send_header("Access-Control-Allow-Headers", "Content-Type")

        def do_OPTIONS(self):
            self.send_response(204)
            self._cors()
            self.end_headers()

        def do_GET(self):
            if self.path != "/":
                self.send_response(404)
                self._cors()
                self.end_headers()
                return
            body = Path(html_path).read_bytes()
            self.send_response(200)
            self._cors()
            self.send_header("Content-Type", "text/html; charset=utf-8")
            self.send_header("Content-Length", str(len(body)))
            self.end_headers()
            self.wfile.write(body)

        def do_POST(self):
            if self.path != "/submit":
                self.send_response(404)
                self._cors()
                self.end_headers()
                return
            length = int(self.headers.get("Content-Length", "0"))
            body = self.rfile.read(length)
            Path(result_path).write_bytes(body)
            self.send_response(200)
            self._cors()
            self.send_header("Content-Type", "application/json; charset=utf-8")
            self.end_headers()
            self.wfile.write(b'{"ok":true}')
            threading.Thread(target=self.server.shutdown, daemon=True).start()

        def log_message(self, *_):
            pass  # suppress request logs

    return _Handler


def find_free_port(preferred, max_attempts=10):
    """Try preferred port, then increment until a free one is found."""
    import socket
    for offset in range(max_attempts):
        port = preferred + offset
        try:
            with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s:
                s.bind(("127.0.0.1", port))
                return port
        except OSError:
            continue
    return None


def main():
    args = parse_args()

    result_path = Path(
        args.result if args.result
        else os.path.join(tempfile.gettempdir(), "citycraft_result.json")
    )

    # Remove stale result from a previous run
    try:
        result_path.unlink()
    except OSError:
        pass

    # 1. Fill template
    substitute(args.template, args.output, args.subs)

    # 2. Find available port and start HTTP server
    port = find_free_port(args.port)
    if port is None:
        sys.stderr.write(
            "Could not find a free port in range {p}–{e}.\n"
            .format(p=args.port, e=args.port + 9)
        )
        sys.exit(1)
    if port != args.port:
        sys.stderr.write(
            "Port {p} in use, using {a} instead.\n"
            .format(p=args.port, a=port)
        )
    html_abs = str(Path(args.output).resolve())
    Handler = make_handler(html_abs, str(result_path))
    server = ThreadingHTTPServer(("127.0.0.1", port), Handler)
    threading.Thread(target=server.serve_forever, daemon=True).start()

    # 3. Open browser (cross-platform: macOS / Linux / Windows)
    webbrowser.open("http://localhost:{port}".format(port=port))

    # 4. Poll for result
    for _ in range(args.timeout):
        if result_path.exists():
            data = result_path.read_text(encoding="utf-8")
            try:
                result_path.unlink()
            except OSError:
                pass
            server.shutdown()
            print(data)
            return
        time.sleep(1)

    # Timeout
    server.shutdown()
    sys.stderr.write(
        "No submission in {t}s. Ask the user to type their choice manually.\n"
        .format(t=args.timeout)
    )
    sys.exit(1)


if __name__ == "__main__":
    main()

<!-- @@VARIANT:TEAM -->
<style>
.section-team {
  padding: 6rem 5vw;
  background: var(--bg);
  font-family: var(--font-body);
  color: var(--ink);
}
.team-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.team-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 400;
  text-align: center;
  margin-bottom: 1rem;
}
.team-inner > p {
  text-align: center;
  color: var(--ink-muted);
  font-size: 1.05rem;
  margin-bottom: 3rem;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}
.team-card {
  text-align: center;
  padding: 2rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-surface);
  transition: box-shadow 0.3s, transform 0.3s;
}
.team-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  transform: translateY(-4px);
}
.team-card:first-child {
  border-color: var(--accent);
}
.team-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 0 auto 1rem;
}
.team-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  margin-bottom: 0.25rem;
}
.team-role {
  font-size: 0.85rem;
  color: var(--accent);
  margin-bottom: 0.75rem;
  font-weight: 500;
}
.team-bio {
  font-size: 0.9rem;
  color: var(--ink-muted);
  line-height: 1.5;
}
</style>
<section class="section-team">
  <div class="team-inner">
    <h2>Meet the team</h2>
    <p>Replace with a short intro about your team culture.</p>
    <div class="team-grid">
      <div class="team-card">
        <div class="team-avatar">JD</div>
        <h3>Jane Doe</h3>
        <div class="team-role">Founder & CEO</div>
        <p class="team-bio">Replace with a 1-2 sentence bio.</p>
      </div>
      <div class="team-card">
        <div class="team-avatar">AS</div>
        <h3>Alex Smith</h3>
        <div class="team-role">CTO</div>
        <p class="team-bio">Replace with bio.</p>
      </div>
      <div class="team-card">
        <div class="team-avatar">MK</div>
        <h3>Maria Kim</h3>
        <div class="team-role">Head of Design</div>
        <p class="team-bio">Replace with bio.</p>
      </div>
      <div class="team-card">
        <div class="team-avatar">RL</div>
        <h3>Ryan Lee</h3>
        <div class="team-role">Lead Engineer</div>
        <p class="team-bio">Replace with bio.</p>
      </div>
    </div>
  </div>
</section>
<!-- @@/VARIANT:TEAM -->

<!-- @@VARIANT:STATS -->
<style>
.section-stats {
  padding: 5rem 5vw;
  background: var(--bg-surface);
  font-family: var(--font-body);
  color: var(--ink);
}
.stats-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.stats-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 400;
  margin-bottom: 3rem;
}
.stats-inner h2 span { color: var(--accent); font-style: italic; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}
.stat-item {
  padding: 2rem 1rem;
}
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.stat-num .stat-accent { color: var(--accent); }
.stat-label {
  font-size: 0.95rem;
  color: var(--ink-muted);
  line-height: 1.4;
}
.stat-divider {
  width: 40px;
  height: 2px;
  background: var(--accent);
  margin: 0.75rem auto 0;
  opacity: 0.5;
}
</style>
<section class="section-stats">
  <div class="stats-inner">
    <h2>Numbers that <span>speak</span></h2>
    <div class="stats-grid">
      <div class="stat-item">
        <div class="stat-num">10<span class="stat-accent">K+</span></div>
        <div class="stat-label">Active users</div>
        <div class="stat-divider"></div>
      </div>
      <div class="stat-item">
        <div class="stat-num">99<span class="stat-accent">%</span></div>
        <div class="stat-label">Uptime SLA</div>
        <div class="stat-divider"></div>
      </div>
      <div class="stat-item">
        <div class="stat-num">50<span class="stat-accent">M</span></div>
        <div class="stat-label">Requests per day</div>
        <div class="stat-divider"></div>
      </div>
      <div class="stat-item">
        <div class="stat-num">4.9<span class="stat-accent">/5</span></div>
        <div class="stat-label">Average rating</div>
        <div class="stat-divider"></div>
      </div>
    </div>
  </div>
</section>
<!-- @@/VARIANT:STATS -->

<!-- @@VARIANT:LOGO_SCROLL -->
<style>
.section-logo-scroll {
  padding: 3rem 0;
  background: var(--bg);
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.logo-scroll-label {
  text-align: center;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  margin-bottom: 2rem;
  font-weight: 500;
}
.logo-track {
  display: flex;
  width: max-content;
  animation: logoScroll 25s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; gap: 2rem; padding: 0 5vw; }
}
@keyframes logoScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.logo-item {
  flex-shrink: 0;
  padding: 0 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.4;
  transition: opacity 0.3s;
}
.logo-item:hover { opacity: 0.8; }
.logo-item svg {
  height: 28px;
  width: auto;
  fill: var(--ink);
}
</style>
<section class="section-logo-scroll">
  <div class="logo-scroll-label">Trusted by teams at</div>
  <div class="logo-track">
    <div class="logo-item"><svg viewBox="0 0 120 28"><rect width="120" height="28" rx="4" fill="currentColor" opacity="0.15"/><text x="60" y="18" text-anchor="middle" font-size="12" fill="currentColor">Brand A</text></svg></div>
    <div class="logo-item"><svg viewBox="0 0 120 28"><rect width="120" height="28" rx="4" fill="currentColor" opacity="0.15"/><text x="60" y="18" text-anchor="middle" font-size="12" fill="currentColor">Brand B</text></svg></div>
    <div class="logo-item"><svg viewBox="0 0 120 28"><rect width="120" height="28" rx="4" fill="currentColor" opacity="0.15"/><text x="60" y="18" text-anchor="middle" font-size="12" fill="currentColor">Brand C</text></svg></div>
    <div class="logo-item"><svg viewBox="0 0 120 28"><rect width="120" height="28" rx="4" fill="currentColor" opacity="0.15"/><text x="60" y="18" text-anchor="middle" font-size="12" fill="currentColor">Brand D</text></svg></div>
    <div class="logo-item"><svg viewBox="0 0 120 28"><rect width="120" height="28" rx="4" fill="currentColor" opacity="0.15"/><text x="60" y="18" text-anchor="middle" font-size="12" fill="currentColor">Brand E</text></svg></div>
    <div class="logo-item"><svg viewBox="0 0 120 28"><rect width="120" height="28" rx="4" fill="currentColor" opacity="0.15"/><text x="60" y="18" text-anchor="middle" font-size="12" fill="currentColor">Brand F</text></svg></div>
    <!-- Duplicate set for seamless loop -->
    <div class="logo-item"><svg viewBox="0 0 120 28"><rect width="120" height="28" rx="4" fill="currentColor" opacity="0.15"/><text x="60" y="18" text-anchor="middle" font-size="12" fill="currentColor">Brand A</text></svg></div>
    <div class="logo-item"><svg viewBox="0 0 120 28"><rect width="120" height="28" rx="4" fill="currentColor" opacity="0.15"/><text x="60" y="18" text-anchor="middle" font-size="12" fill="currentColor">Brand B</text></svg></div>
    <div class="logo-item"><svg viewBox="0 0 120 28"><rect width="120" height="28" rx="4" fill="currentColor" opacity="0.15"/><text x="60" y="18" text-anchor="middle" font-size="12" fill="currentColor">Brand C</text></svg></div>
    <div class="logo-item"><svg viewBox="0 0 120 28"><rect width="120" height="28" rx="4" fill="currentColor" opacity="0.15"/><text x="60" y="18" text-anchor="middle" font-size="12" fill="currentColor">Brand D</text></svg></div>
    <div class="logo-item"><svg viewBox="0 0 120 28"><rect width="120" height="28" rx="4" fill="currentColor" opacity="0.15"/><text x="60" y="18" text-anchor="middle" font-size="12" fill="currentColor">Brand E</text></svg></div>
    <div class="logo-item"><svg viewBox="0 0 120 28"><rect width="120" height="28" rx="4" fill="currentColor" opacity="0.15"/><text x="60" y="18" text-anchor="middle" font-size="12" fill="currentColor">Brand F</text></svg></div>
  </div>
</section>
<!-- @@/VARIANT:LOGO_SCROLL -->

<!-- @@VARIANT:GALLERY -->
<style>
.section-gallery {
  padding: 6rem 5vw;
  background: var(--bg);
  font-family: var(--font-body);
  color: var(--ink);
}
.gallery-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.gallery-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 400;
  text-align: center;
  margin-bottom: 3rem;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 250px;
  gap: 1rem;
}
@media (max-width: 768px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; }
}
@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr; }
}
.gallery-grid .gi:nth-child(1) { grid-row: span 2; }
.gallery-grid .gi:nth-child(4) { grid-column: span 2; }
@media (max-width: 768px) {
  .gallery-grid .gi:nth-child(1) { grid-row: span 1; }
  .gallery-grid .gi:nth-child(4) { grid-column: span 1; }
}
.gi {
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.3s;
  position: relative;
}
.gi:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.1); }
.gi svg {
  width: 40%;
  height: 40%;
  opacity: 0.12;
  stroke: var(--ink);
  fill: none;
  stroke-width: 1;
}
.gi-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s;
  display: flex;
  align-items: flex-end;
  padding: 1.25rem;
}
.gi:hover .gi-overlay { opacity: 1; }
.gi-overlay span {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
}
</style>
<section class="section-gallery">
  <div class="gallery-inner">
    <h2>Our work</h2>
    <div class="gallery-grid">
      <div class="gi">
        <svg viewBox="0 0 100 100"><rect x="10" y="10" width="80" height="80" rx="4"/></svg>
        <div class="gi-overlay"><span>Project Alpha</span></div>
      </div>
      <div class="gi">
        <svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="35"/></svg>
        <div class="gi-overlay"><span>Project Beta</span></div>
      </div>
      <div class="gi">
        <svg viewBox="0 0 100 100"><polygon points="50,15 90,85 10,85"/></svg>
        <div class="gi-overlay"><span>Project Gamma</span></div>
      </div>
      <div class="gi">
        <svg viewBox="0 0 100 100"><rect x="20" y="20" width="60" height="60" rx="8" transform="rotate(45 50 50)"/></svg>
        <div class="gi-overlay"><span>Project Delta</span></div>
      </div>
      <div class="gi">
        <svg viewBox="0 0 100 100"><path d="M20 80 Q50 20 80 80"/></svg>
        <div class="gi-overlay"><span>Project Epsilon</span></div>
      </div>
    </div>
  </div>
</section>
<!-- @@/VARIANT:GALLERY -->

<!-- @@VARIANT:INTEGRATIONS -->
<style>
.section-integrations {
  padding: 6rem 5vw;
  background: var(--bg-surface);
  font-family: var(--font-body);
  color: var(--ink);
}
.integ-inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.integ-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 400;
  margin-bottom: 0.75rem;
}
.integ-inner > p {
  color: var(--ink-muted);
  font-size: 1.05rem;
  margin-bottom: 3rem;
}
.integ-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1.5rem;
}
.integ-item {
  padding: 1.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.integ-item:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.integ-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.integ-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.integ-name {
  font-size: 0.85rem;
  font-weight: 500;
}
</style>
<section class="section-integrations">
  <div class="integ-inner">
    <h2>Works with your stack</h2>
    <p>Replace with a description of your integration ecosystem.</p>
    <div class="integ-grid">
      <div class="integ-item">
        <div class="integ-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/></svg></div>
        <span class="integ-name">Platform A</span>
      </div>
      <div class="integ-item">
        <div class="integ-icon"><svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2"/></svg></div>
        <span class="integ-name">Platform B</span>
      </div>
      <div class="integ-item">
        <div class="integ-icon"><svg viewBox="0 0 24 24"><polygon points="12,2 22,22 2,22"/></svg></div>
        <span class="integ-name">Platform C</span>
      </div>
      <div class="integ-item">
        <div class="integ-icon"><svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg></div>
        <span class="integ-name">Platform D</span>
      </div>
      <div class="integ-item">
        <div class="integ-icon"><svg viewBox="0 0 24 24"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/></svg></div>
        <span class="integ-name">Platform E</span>
      </div>
      <div class="integ-item">
        <div class="integ-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/></svg></div>
        <span class="integ-name">Platform F</span>
      </div>
    </div>
  </div>
</section>
<!-- @@/VARIANT:INTEGRATIONS -->

<!-- @@VARIANT:TIMELINE -->
<style>
.section-timeline {
  padding: 6rem 5vw;
  background: var(--bg);
  font-family: var(--font-body);
  color: var(--ink);
}
.timeline-inner {
  max-width: 800px;
  margin: 0 auto;
}
.timeline-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 400;
  text-align: center;
  margin-bottom: 4rem;
}
.tl-list {
  position: relative;
  padding-left: 2.5rem;
}
.tl-list::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent), var(--line));
}
.tl-item {
  position: relative;
  padding-bottom: 3rem;
}
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute;
  left: -2.5rem;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--accent);
}
.tl-item:first-child .tl-dot {
  background: var(--accent);
}
.tl-date {
  font-size: 0.8rem;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}
.tl-item h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}
.tl-item p {
  font-size: 0.95rem;
  color: var(--ink-muted);
  line-height: 1.6;
  max-width: 560px;
}
</style>
<section class="section-timeline">
  <div class="timeline-inner">
    <h2>Our journey</h2>
    <div class="tl-list">
      <div class="tl-item">
        <div class="tl-dot"></div>
        <div class="tl-date">2026</div>
        <h3>Replace with milestone title</h3>
        <p>Replace with what happened at this milestone.</p>
      </div>
      <div class="tl-item">
        <div class="tl-dot"></div>
        <div class="tl-date">2025</div>
        <h3>Replace with milestone title</h3>
        <p>Replace with description.</p>
      </div>
      <div class="tl-item">
        <div class="tl-dot"></div>
        <div class="tl-date">2024</div>
        <h3>Replace with milestone title</h3>
        <p>Replace with description.</p>
      </div>
      <div class="tl-item">
        <div class="tl-dot"></div>
        <div class="tl-date">2023</div>
        <h3>The beginning</h3>
        <p>Replace with your origin story.</p>
      </div>
    </div>
  </div>
</section>
<!-- @@/VARIANT:TIMELINE -->