Claude Design

.DS_Store
*.swp
*.swo
node_modules/
.vscode/
.idea/
.gstack/
.claude/

/*
  animations.jsx — Stage + Sprite timeline primitives for motion design.

  Attach as a <script type="text/babel" src="animations.jsx"></script>, then use:

    const { Stage, Sprite, useTime, useSprite, Easing, interpolate } = window.Anim;

    const Intro = () => {
      const t = useSprite();          // 0..1 within this Sprite's active window
      const opacity = Easing.outCubic(t);
      return <div style={{ opacity }}>Hello</div>;
    };

    ReactDOM.render(
      <Stage duration={6.0} width={1920} height={1080}>
        <Sprite start={0} end={2}><Intro /></Sprite>
        <Sprite start={1.5} end={4}><Middle /></Sprite>
        <Sprite start={3.5} end={6}><Outro /></Sprite>
      </Stage>,
      document.getElementById('root')
    );

  Features:
  - Scales 1920×1080 to viewport, letterboxed
  - Play / pause / scrub controls outside the scaled canvas
  - localStorage persistence of playhead for iteration workflow
  - useTime() returns stage time in seconds; useSprite() returns 0..1 within the sprite
  - interpolate(t, [t0, t1], [v0, v1], easing?) for keyframes
  - Easing library: linear, inQuad, outQuad, inOutCubic, outCubic, inOutSine, etc.
*/

const StageContext = React.createContext({ time: 0, duration: 0 });
const SpriteContext = React.createContext({ start: 0, end: 0 });

const Easing = {
  linear: (t) => t,
  inQuad: (t) => t * t,
  outQuad: (t) => 1 - (1 - t) * (1 - t),
  inOutQuad: (t) => (t < 0.5 ? 2 * t * t : 1 - ((-2 * t + 2) ** 2) / 2),
  inCubic: (t) => t * t * t,
  outCubic: (t) => 1 - (1 - t) ** 3,
  inOutCubic: (t) => (t < 0.5 ? 4 * t * t * t : 1 - ((-2 * t + 2) ** 3) / 2),
  inOutSine: (t) => -(Math.cos(Math.PI * t) - 1) / 2,
};

function interpolate(t, input, output, easing = Easing.linear) {
  const [i0, i1] = input;
  const [o0, o1] = output;
  if (t <= i0) return o0;
  if (t >= i1) return o1;
  const p = easing((t - i0) / (i1 - i0));
  return o0 + (o1 - o0) * p;
}

const useTime = () => React.useContext(StageContext).time;

const useSprite = () => {
  const { time } = React.useContext(StageContext);
  const { start, end } = React.useContext(SpriteContext);
  if (end <= start) return 0;
  return Math.max(0, Math.min(1, (time - start) / (end - start)));
};

const Sprite = ({ start, end, children }) => {
  const { time } = React.useContext(StageContext);
  const visible = time >= start && time <= end;
  if (!visible) return null;
  return (
    <SpriteContext.Provider value={{ start, end }}>
      {children}
    </SpriteContext.Provider>
  );
};

const Stage = ({ duration = 6, width = 1920, height = 1080, storageKey = 'anim-time', children }) => {
  const [time, setTime] = React.useState(() => {
    const stored = Number(localStorage.getItem(storageKey));
    return Number.isFinite(stored) ? Math.min(duration, Math.max(0, stored)) : 0;
  });
  const [playing, setPlaying] = React.useState(false);
  const [scale, setScale] = React.useState(1);
  const rafRef = React.useRef(null);
  const lastRef = React.useRef(null);

  // Scale the canvas to fit the viewport, letterboxed
  React.useEffect(() => {
    const fit = () => {
      const sx = window.innerWidth / width;
      const sy = window.innerHeight / height;
      setScale(Math.min(sx, sy));
    };
    fit();
    window.addEventListener('resize', fit);
    return () => window.removeEventListener('resize', fit);
  }, [width, height]);

  // Animation frame loop
  React.useEffect(() => {
    if (!playing) {
      if (rafRef.current) cancelAnimationFrame(rafRef.current);
      lastRef.current = null;
      return;
    }
    const tick = (now) => {
      if (lastRef.current == null) lastRef.current = now;
      const dt = (now - lastRef.current) / 1000;
      lastRef.current = now;
      setTime((t) => {
        const next = t + dt;
        if (next >= duration) { setPlaying(false); return duration; }
        return next;
      });
      rafRef.current = requestAnimationFrame(tick);
    };
    rafRef.current = requestAnimationFrame(tick);
    return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current); };
  }, [playing, duration]);

  // Persist playhead
  React.useEffect(() => {
    localStorage.setItem(storageKey, String(time));
  }, [time, storageKey]);

  return (
    <StageContext.Provider value={{ time, duration }}>
      <div style={{ position: 'fixed', inset: 0, background: '#000', display: 'grid', placeItems: 'center' }}>
        <div style={{
          width, height, transform: `scale(${scale})`, transformOrigin: 'center',
          background: 'white', position: 'relative', overflow: 'hidden',
        }}>
          {children}
        </div>
      </div>

      <div style={{
        position: 'fixed', bottom: 16, left: '50%', transform: 'translateX(-50%)',
        display: 'flex', gap: 12, alignItems: 'center',
        background: 'rgba(0,0,0,0.7)', backdropFilter: 'blur(8px)',
        padding: '10px 16px', borderRadius: 8, color: 'white', fontSize: 13,
      }}>
        <button
          onClick={() => {
            if (time >= duration) { setTime(0); setPlaying(true); }
            else setPlaying((p) => !p);
          }}
          style={{ background: 'rgba(255,255,255,0.15)', border: 'none', color: 'white', padding: '6px 12px', borderRadius: 4, cursor: 'pointer' }}
        >
          {playing ? 'Pause' : (time >= duration ? 'Replay' : 'Play')}
        </button>
        <input
          type="range"
          min={0} max={duration} step={0.01}
          value={time}
          onChange={(e) => { setPlaying(false); setTime(Number(e.target.value)); }}
          style={{ width: 400 }}
        />
        <span style={{ fontVariantNumeric: 'tabular-nums', minWidth: 80, textAlign: 'right' }}>
          {time.toFixed(2)}s / {duration.toFixed(2)}s
        </span>
      </div>
    </StageContext.Provider>
  );
};

window.Anim = { Stage, Sprite, useTime, useSprite, Easing, interpolate };

<!doctype html>
<!--
  Minimal slide-deck scaffold.
  - Fixed 1920×1080 canvas that scales to fit any viewport
  - Letterboxed on black background
  - Arrow keys, click targets, and visible prev/next
  - 1-indexed slide counter
  - localStorage persistence of slide index
  - Speaker-notes sync via postMessage (if present)
  - Print-to-PDF: each slide becomes one page

  Usage:
  1. Replace <section> contents with your slides. Keep data-screen-label 1-indexed.
  2. Optional: add a <script type="application/json" id="speaker-notes"> block
     with one string per slide for speaker notes.
  3. Customize the styles inside .slide to taste. Body text ≥ 24px, headers ≥ 64px.
-->
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Deck</title>
  <style>
    :root { --stage-bg: #0a0a0a; }
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: var(--stage-bg); font-family: system-ui, sans-serif; }

    .stage {
      position: fixed; inset: 0; display: grid; place-items: center;
    }
    .canvas {
      width: 1920px; height: 1080px;
      transform-origin: center center;
      position: relative;
      background: white;
      box-shadow: 0 40px 80px rgba(0,0,0,0.4);
    }
    .slide {
      position: absolute; inset: 0;
      display: none;
      padding: 120px 160px;
    }
    .slide.active { display: block; }

    .chrome {
      position: fixed; z-index: 10;
      display: flex; gap: 12px; align-items: center;
      color: white; font-size: 14px;
    }
    .chrome.bottom { bottom: 20px; left: 50%; transform: translateX(-50%); }
    .chrome button {
      background: rgba(255,255,255,0.1); color: white; border: 1px solid rgba(255,255,255,0.2);
      padding: 10px 16px; border-radius: 6px; font: inherit; cursor: pointer;
    }
    .chrome button:hover { background: rgba(255,255,255,0.2); }
    .counter { opacity: 0.6; min-width: 60px; text-align: center; }

    @media print {
      @page { size: 1920px 1080px; margin: 0; }
      html, body { background: white; }
      .stage { position: static; display: block; height: auto; }
      .canvas { transform: none !important; width: 1920px; height: 1080px; box-shadow: none; page-break-after: always; }
      .slide { display: block !important; }
      .chrome { display: none; }
    }
  </style>
</head>
<body>
  <div class="stage">
    <div class="canvas" id="canvas">

      <!-- SLIDE 1 -->
      <section class="slide active" data-screen-label="01 Title">
        <h1 style="font-size: 120px; font-weight: 700; margin: 0;">Your Deck Title</h1>
        <p style="font-size: 32px; opacity: 0.6; margin-top: 24px;">Subtitle or author</p>
      </section>

      <!-- SLIDE 2 -->
      <section class="slide" data-screen-label="02 Content">
        <h2 style="font-size: 72px; font-weight: 600; margin: 0 0 48px;">Section heading</h2>
        <p style="font-size: 32px; line-height: 1.4; max-width: 1200px;">
          Body copy here. Keep text ≥ 24px on 1920×1080 slides. Prefer fewer words, bigger visuals.
        </p>
      </section>

      <!-- Add more <section class="slide"> elements here -->

    </div>
  </div>

  <nav class="chrome bottom">
    <button id="prev">← Prev</button>
    <span class="counter" id="counter">1/1</span>
    <button id="next">Next →</button>
  </nav>

  <!-- Optional: speaker notes. One string per slide, in order. Delete if unused. -->
  <script type="application/json" id="speaker-notes">
    []
  </script>

  <script>
    (() => {
      const canvas = document.getElementById('canvas');
      const slides = [...document.querySelectorAll('.slide')];
      const counter = document.getElementById('counter');
      const prev = document.getElementById('prev');
      const next = document.getElementById('next');

      const notesEl = document.getElementById('speaker-notes');
      const notes = notesEl ? JSON.parse(notesEl.textContent || '[]') : [];

      const STORAGE_KEY = 'deck-slide-index';
      let idx = Number(localStorage.getItem(STORAGE_KEY)) || 0;
      if (idx < 0 || idx >= slides.length) idx = 0;

      function go(to) {
        idx = Math.max(0, Math.min(slides.length - 1, to));
        slides.forEach((s, i) => s.classList.toggle('active', i === idx));
        counter.textContent = `${idx + 1}/${slides.length}`;
        localStorage.setItem(STORAGE_KEY, String(idx));
        // Sync speaker notes / let host know the slide changed
        try { window.parent.postMessage({ slideIndexChanged: idx, note: notes[idx] ?? '' }, '*'); } catch {}
      }

      function fit() {
        const sx = window.innerWidth / 1920;
        const sy = window.innerHeight / 1080;
        const scale = Math.min(sx, sy);
        canvas.style.transform = `scale(${scale})`;
      }

      prev.addEventListener('click', () => go(idx - 1));
      next.addEventListener('click', () => go(idx + 1));
      document.addEventListener('keydown', (e) => {
        if (e.key === 'ArrowLeft' || e.key === 'PageUp') go(idx - 1);
        if (e.key === 'ArrowRight' || e.key === 'PageDown' || e.key === ' ') go(idx + 1);
        if (e.key === 'Home') go(0);
        if (e.key === 'End') go(slides.length - 1);
      });
      window.addEventListener('resize', fit);

      fit();
      go(idx);
    })();
  </script>
</body>
</html>

<!doctype html>
<!--
  Design-canvas scaffold — for presenting multiple static variants side-by-side.

  Usage: duplicate the .cell blocks inside .canvas. Each cell gets:
  - A short variant label ("Variant A · Editorial")
  - A one-line description of what's being explored
  - The actual variant content inside .cell-body

  Rules:
  - Keep cells the same size so variants are directly comparable.
  - Use a neutral canvas background (cream / light grey) so variant colors read correctly.
  - 2–3 columns is usually right; 4+ gets too small to evaluate.
-->
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Design canvas</title>
  <style>
    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; font-family: system-ui, sans-serif; background: #f4f1ec; }
    .canvas {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 40px;
      padding: 48px;
      max-width: 1440px;
      margin: 0 auto;
    }
    .cell {
      background: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.04);
    }
    .cell-label {
      padding: 16px 20px;
      border-bottom: 1px solid #eee;
    }
    .cell-label h3 {
      margin: 0;
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #555;
      font-weight: 600;
    }
    .cell-label p {
      margin: 6px 0 0;
      font-size: 13px;
      color: #888;
      line-height: 1.4;
    }
    .cell-body {
      aspect-ratio: 16 / 10;
      display: grid;
      place-items: center;
      padding: 40px;
      background: #fafafa;
    }
    .placeholder {
      text-align: center;
      color: #aaa;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <main class="canvas">

    <section class="cell">
      <header class="cell-label">
        <h3>Variant A · Editorial</h3>
        <p>Serif headline, generous negative space, full-width photo</p>
      </header>
      <div class="cell-body">
        <div class="placeholder">[ Variant A content ]</div>
      </div>
    </section>

    <section class="cell">
      <header class="cell-label">
        <h3>Variant B · Product-forward</h3>
        <p>Mono headline, product screenshot, tight rhythm</p>
      </header>
      <div class="cell-body">
        <div class="placeholder">[ Variant B content ]</div>
      </div>
    </section>

    <section class="cell">
      <header class="cell-label">
        <h3>Variant C · Remix</h3>
        <p>Headline as diagram; product interaction as the hero</p>
      </header>
      <div class="cell-body">
        <div class="placeholder">[ Variant C content ]</div>
      </div>
    </section>

    <!-- Add more .cell blocks as needed -->

  </main>
</body>
</html>

<!doctype html>
<!--
  React + Babel prototype shell with pinned versions and integrity hashes.
  Do not change the script versions or integrity attributes — they silently break things.

  Usage:
  1. Write your components in components.jsx; export via Object.assign(window, {...}).
  2. Write your app in app.jsx; read from window at the top.
  3. Put real styles in styles.css or use Tailwind (uncomment the CDN line below).
  4. Load the prototype in a browser to verify — never ship without a real-browser check.

  Anti-patterns (see references/react-babel.md for the why):
  - No `const styles = {...}` at file top-level; name them uniquely.
  - No `type="module"` on Babel scripts.
  - No `scrollIntoView` in components.
-->
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Prototype</title>
  <link rel="stylesheet" href="styles.css">

  <!-- Pinned React 18.3.1 + ReactDOM 18.3.1 + Babel-standalone 7.29.0 -->
  <script
    src="https://unpkg.com/react@18.3.1/umd/react.development.js"
    integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L"
    crossorigin="anonymous"
  ></script>
  <script
    src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"
    integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm"
    crossorigin="anonymous"
  ></script>
  <script
    src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js"
    integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y"
    crossorigin="anonymous"
  ></script>

  <!-- Optional: Tailwind via CDN (uncomment if desired) -->
  <!--
  <script>
    tailwind = tailwind || {};
    tailwind.config = {
      theme: { extend: {
        colors: { brand: { 500: '#D97757', 600: '#B85C3E' } },
        fontFamily: { display: ['Söhne', 'sans-serif'] },
      }},
    };
  </script>
  <script src="https://cdn.tailwindcss.com"></script>
  -->
</head>
<body>
  <div id="root"></div>

  <!-- Order matters: shared components first, then app -->
  <script type="text/babel" src="components.jsx"></script>
  <script type="text/babel" src="app.jsx"></script>
</body>
</html>

<!doctype html>
<!--
  Tweaks starter — standalone (localStorage-backed, no host integration).

  This is the fallback shape when you don't have a host-provided Tweaks toolbar.
  If the host does support it (e.g., Claude.ai artifact viewer), switch from
  localStorage persistence to `postMessage({type: '__edit_mode_set_keys', ...})`
  and gate visibility on `__activate_edit_mode` / `__deactivate_edit_mode`.
  See references/variations-and-tweaks.md.
-->
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Prototype with Tweaks</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: system-ui, sans-serif;
      background: var(--bg, #fafafa);
      color: var(--fg, #111);
      transition: background 0.2s, color 0.2s;
    }
    body[data-dark="true"] {
      --bg: #0a0a0a;
      --fg: #f5f5f5;
    }
    .hero {
      padding: 120px 64px;
      max-width: var(--container, 960px);
      margin: 0 auto;
    }
    .hero h1 {
      font-size: var(--h1, 72px);
      line-height: 1.05;
      margin: 0 0 24px;
      color: var(--primary, #d97757);
    }
    .hero p {
      font-size: 20px;
      line-height: 1.5;
      max-width: 640px;
      opacity: 0.75;
    }

    /* Tweaks panel */
    .tweaks-panel {
      position: fixed; bottom: 20px; right: 20px;
      background: white; color: #111;
      border-radius: 10px; padding: 16px;
      box-shadow: 0 20px 40px rgba(0,0,0,0.12);
      font-size: 13px; font-family: system-ui, sans-serif;
      width: 260px;
      z-index: 100;
      display: none;  /* toggled by the button below */
    }
    .tweaks-panel.open { display: block; }
    .tweaks-panel h2 {
      margin: 0 0 12px; font-size: 13px; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.08em;
      color: #555;
    }
    .tweak-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 8px 0; border-top: 1px solid #eee;
    }
    .tweak-row:first-of-type { border-top: none; }
    .tweak-row label { color: #555; }
    .tweak-row input[type="color"] { width: 36px; height: 24px; border: 1px solid #ddd; border-radius: 4px; padding: 0; }
    .tweak-row input[type="range"] { width: 120px; }
    .tweak-row select { font-size: 13px; padding: 4px 6px; }

    .tweaks-toggle {
      position: fixed; bottom: 20px; right: 20px;
      background: #111; color: white;
      border: none; border-radius: 999px; padding: 10px 16px;
      font: 600 12px/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.08em;
      cursor: pointer;
      z-index: 101;
    }
  </style>
</head>
<body>

  <section class="hero">
    <h1>Tweakable hero headline</h1>
    <p>This prototype exposes a small set of design parameters. Open Tweaks (bottom-right) to cycle the primary color, typography scale, container width, and dark mode. Use this pattern when the user asks "show me a few options" — cheaper than separate files.</p>
  </section>

  <!-- Tweaks controls (hidden by default) -->
  <div class="tweaks-panel" id="tweaks">
    <h2>Tweaks</h2>
    <div class="tweak-row">
      <label for="tweak-primary">Primary color</label>
      <input type="color" id="tweak-primary">
    </div>
    <div class="tweak-row">
      <label for="tweak-h1">Headline size</label>
      <input type="range" id="tweak-h1" min="40" max="120" step="2">
    </div>
    <div class="tweak-row">
      <label for="tweak-container">Container</label>
      <select id="tweak-container">
        <option value="720">Tight</option>
        <option value="960">Standard</option>
        <option value="1280">Wide</option>
      </select>
    </div>
    <div class="tweak-row">
      <label for="tweak-dark">Dark mode</label>
      <input type="checkbox" id="tweak-dark">
    </div>
  </div>

  <button class="tweaks-toggle" id="tweaks-toggle">Tweaks</button>

  <script>
    // Default values — wrap in EDITMODE markers so a host with edit-mode support
    // can rewrite them on disk. Even in standalone mode the marker is harmless.
    const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
      "primaryColor": "#D97757",
      "headlineSize": 72,
      "container": 960,
      "dark": false
    }/*EDITMODE-END*/;

    const STORAGE_KEY = 'tweaks-v1';
    const state = { ...TWEAK_DEFAULTS, ...(JSON.parse(localStorage.getItem(STORAGE_KEY) || 'null') || {}) };

    const $ = (id) => document.getElementById(id);
    const apply = () => {
      document.documentElement.style.setProperty('--primary', state.primaryColor);
      document.documentElement.style.setProperty('--h1', `${state.headlineSize}px`);
      document.documentElement.style.setProperty('--container', `${state.container}px`);
      document.body.dataset.dark = String(state.dark);
    };
    const save = () => localStorage.setItem(STORAGE_KEY, JSON.stringify(state));

    // Wire controls to state
    $('tweak-primary').value = state.primaryColor;
    $('tweak-h1').value = state.headlineSize;
    $('tweak-container').value = state.container;
    $('tweak-dark').checked = state.dark;

    $('tweak-primary').addEventListener('input', (e) => { state.primaryColor = e.target.value; apply(); save(); });
    $('tweak-h1').addEventListener('input', (e) => { state.headlineSize = Number(e.target.value); apply(); save(); });
    $('tweak-container').addEventListener('change', (e) => { state.container = Number(e.target.value); apply(); save(); });
    $('tweak-dark').addEventListener('change', (e) => { state.dark = e.target.checked; apply(); save(); });

    // Open/close panel
    $('tweaks-toggle').addEventListener('click', () => {
      $('tweaks').classList.toggle('open');
    });

    apply();

    // --- Host integration (optional) ---
    // If a host provides an edit-mode toolbar, it will send activate/deactivate messages.
    // Register the listener FIRST, then announce availability.
    window.addEventListener('message', (e) => {
      if (e.data?.type === '__activate_edit_mode') $('tweaks').classList.add('open');
      if (e.data?.type === '__deactivate_edit_mode') $('tweaks').classList.remove('open');
    });
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch {}
  </script>
</body>
</html>

<!doctype html>
<!--
  Demo 1 · Slide deck
  Style: Swiss Editorial (Pentagram / Vignelli lineage)
  System:
    Type: GT America (display) + GT America (body) — 14 / 22 / 32 / 72 / 160
    Color: #111 ink on #f4f0ea cream; accent #d93a1c used once per slide max
    Grid: 12 col, hairline horizontal rules, left-flush
    Rhythm: numbered sections, oversized folios, quiet captions

  Shows: deck scaling · 1-indexed data-screen-labels · keyboard nav · localStorage persistence
-->
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Demo · Ledger — a note-taking product (Swiss Editorial)</title>
  <link rel="preconnect" href="https://rsms.me/">
  <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
  <style>
    :root {
      --cream: #f4f0ea;
      --ink: #111;
      --accent: #d93a1c;
      --rule: #1a1a1a;
      --mute: #6b6359;
    }
    * { box-sizing: border-box; }
    html, body {
      margin: 0; padding: 0; height: 100%; overflow: hidden;
      background: #0a0a0a;
      font-family: 'Inter', -apple-system, system-ui, sans-serif;
      font-feature-settings: 'ss01', 'ss03', 'cv11';
    }
    .stage { position: fixed; inset: 0; display: grid; place-items: center; }
    .canvas {
      width: 1920px; height: 1080px;
      background: var(--cream);
      transform-origin: center;
      position: relative;
      overflow: hidden;
      box-shadow: 0 40px 80px rgba(0,0,0,0.3);
    }
    .slide {
      position: absolute; inset: 0; display: none;
      color: var(--ink);
      padding: 96px 160px;
    }
    .slide.active { display: block; }

    /* Common atoms */
    .folio {
      position: absolute; top: 96px; left: 160px;
      font-size: 14px; letter-spacing: 0.2em; font-weight: 500;
      text-transform: uppercase; color: var(--mute);
    }
    .brand {
      position: absolute; top: 96px; right: 160px;
      font-size: 14px; letter-spacing: 0.2em; font-weight: 600;
      text-transform: uppercase; color: var(--ink);
    }
    .rule { border: none; border-top: 1px solid var(--rule); margin: 0; }
    .accent { color: var(--accent); }
    h1, h2, h3, h4 { font-weight: 500; letter-spacing: -0.02em; margin: 0; line-height: 1.02; }
    p  { font-size: 22px; line-height: 1.4; color: var(--ink); margin: 0; }
    .eyebrow { font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute); font-weight: 500; }

    /* Slide 1 — Title */
    .s1 .title { font-size: 160px; font-weight: 400; letter-spacing: -0.04em; line-height: 0.92; }
    .s1 .sub { position: absolute; bottom: 96px; left: 160px; right: 160px; display: flex; justify-content: space-between; align-items: flex-end; gap: 64px; }
    .s1 .sub p { font-size: 22px; max-width: 540px; color: var(--ink); }
    .s1 .big-number { font-size: 240px; font-weight: 400; letter-spacing: -0.05em; line-height: 1; color: var(--accent); }

    /* Slide 2 — Section index */
    .s2 h2 { font-size: 96px; margin-bottom: 64px; font-weight: 400; }
    .s2 ol { list-style: none; padding: 0; margin: 0; counter-reset: item; }
    .s2 li {
      padding: 32px 0;
      border-top: 1px solid var(--rule);
      display: grid;
      grid-template-columns: 80px 1fr auto;
      align-items: center;
      font-size: 40px;
      font-weight: 400;
      letter-spacing: -0.01em;
    }
    .s2 li:last-child { border-bottom: 1px solid var(--rule); }
    .s2 li::before { content: counter(item, decimal-leading-zero); counter-increment: item; color: var(--mute); font-size: 22px; letter-spacing: 0.1em; }
    .s2 li .page-ref { font-size: 22px; color: var(--mute); letter-spacing: 0.1em; }

    /* Slide 3 — Problem / quote */
    .slide.active.s3 { display: grid; grid-template-rows: auto 1fr auto; gap: 64px; }
    .s3 .quote-body { font-size: 96px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.05; max-width: 1300px; }
    .s3 .attrib { font-size: 20px; color: var(--mute); letter-spacing: 0.05em; }
    .s3 .quote-body .emph { color: var(--accent); }

    /* Slide 4 — Data */
    .s4 h3 { font-size: 40px; margin-bottom: 48px; font-weight: 400; }
    .s4 .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule); }
    .s4 .cell { padding: 48px 0; border-bottom: 1px solid var(--rule); }
    .s4 .cell + .cell { border-left: 1px solid var(--rule); padding-left: 48px; }
    .s4 .stat { font-size: 128px; font-weight: 400; letter-spacing: -0.04em; line-height: 1; }
    .s4 .label { font-size: 18px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); margin-top: 16px; max-width: 420px; }
    .s4 .footnote { font-size: 16px; color: var(--mute); margin-top: 32px; letter-spacing: 0.02em; }

    /* Slide 5 — Close */
    .slide.active.s5 { display: grid; place-items: center; text-align: center; }
    .s5 .mark { font-size: 48px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 48px; }
    .s5 .contact { font-size: 22px; color: var(--mute); letter-spacing: 0.02em; }

    /* Chrome */
    .chrome {
      position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
      display: flex; gap: 10px; align-items: center; z-index: 10;
      color: #fff; font-size: 13px; font-family: 'Inter', sans-serif;
      background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
      padding: 8px 12px; border-radius: 6px;
    }
    .chrome button {
      background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.15);
      color: white; font: inherit; padding: 6px 12px; border-radius: 4px; cursor: pointer;
    }
    .chrome button:hover { background: rgba(255,255,255,0.22); }
    .counter { opacity: 0.6; min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
  </style>
</head>
<body>
  <div class="stage">
    <div class="canvas" id="canvas">

      <section class="slide active s1" data-screen-label="01 Title">
        <span class="folio">01 / 05</span>
        <span class="brand">Ledger</span>
        <h1 class="title">
          Write<br>
          like you<br>
          <span class="accent">think.</span>
        </h1>
        <div class="sub">
          <p>Ledger is a notebook for the shape of ideas, not the shape of documents. Series A, 2026.</p>
          <span class="big-number">01</span>
        </div>
      </section>

      <section class="slide s2" data-screen-label="02 Contents">
        <span class="folio">02 / 05</span>
        <span class="brand">Ledger</span>
        <hr class="rule">
        <h2>What we'll cover.</h2>
        <ol>
          <li><span>The moment a note becomes a thought</span><span class="page-ref">pp. 03</span></li>
          <li><span>Why outlining is the wrong primitive</span><span class="page-ref">pp. 04</span></li>
          <li><span>How Ledger earns its place in your day</span><span class="page-ref">pp. 05</span></li>
        </ol>
      </section>

      <section class="slide s3" data-screen-label="03 Problem">
        <span class="folio">03 / 05</span>
        <span class="brand">Ledger</span>
        <hr class="rule">
        <h3 class="eyebrow">Problem</h3>
        <p class="quote-body">
          Today's notes apps let you <span class="emph">type anything</span>,<br>
          but none of them help you <span class="emph">think about it</span>.
        </p>
        <div class="attrib">— OBSERVATIONS FROM 40 KNOWLEDGE WORKERS · MARCH 2026</div>
      </section>

      <section class="slide s4" data-screen-label="04 Data">
        <span class="folio">04 / 05</span>
        <span class="brand">Ledger</span>
        <hr class="rule">
        <h3>In the first 90 days, early users said:</h3>
        <div class="grid">
          <div class="cell">
            <div class="stat">73<span style="font-size: 64px;">%</span></div>
            <div class="label">Ended the day with fewer open browser tabs</div>
          </div>
          <div class="cell">
            <div class="stat">2.8<span style="font-size: 64px;">×</span></div>
            <div class="label">More notes cross-linked to prior notes vs. baseline</div>
          </div>
          <div class="cell">
            <div class="stat">40<span style="font-size: 64px;">%</span></div>
            <div class="label">Less time spent re-finding something they wrote last week</div>
          </div>
        </div>
        <div class="footnote">Self-reported; n = 112; baseline = primary note app before Ledger. Read the methodology at ledger.app/research.</div>
      </section>

      <section class="slide s5" data-screen-label="05 Close">
        <span class="folio">05 / 05</span>
        <span class="brand">Ledger</span>
        <div>
          <div class="mark"><span class="accent">Ledger</span></div>
          <div class="contact">hello@ledger.app · ledger.app</div>
        </div>
      </section>

    </div>
  </div>

  <nav class="chrome">
    <button id="prev">← Prev</button>
    <span class="counter" id="counter">1/5</span>
    <button id="next">Next →</button>
  </nav>

  <script>
    (() => {
      const canvas = document.getElementById('canvas');
      const slides = [...document.querySelectorAll('.slide')];
      const counter = document.getElementById('counter');
      const KEY = 'demo-1-deck-idx';
      let idx = Number(localStorage.getItem(KEY)) || 0;
      if (idx < 0 || idx >= slides.length) idx = 0;

      const go = (to) => {
        idx = Math.max(0, Math.min(slides.length - 1, to));
        slides.forEach((s, i) => s.classList.toggle('active', i === idx));
        counter.textContent = `${idx + 1}/${slides.length}`;
        localStorage.setItem(KEY, String(idx));
      };
      const fit = () => {
        const s = Math.min(innerWidth / 1920, innerHeight / 1080);
        canvas.style.transform = `scale(${s})`;
      };
      document.getElementById('prev').onclick = () => go(idx - 1);
      document.getElementById('next').onclick = () => go(idx + 1);
      addEventListener('keydown', (e) => {
        if (['ArrowLeft', 'PageUp'].includes(e.key)) go(idx - 1);
        if (['ArrowRight', 'PageDown', ' '].includes(e.key)) go(idx + 1);
      });
      addEventListener('resize', fit);
      fit();
      go(idx);
    })();
  </script>
</body>
</html>

<!doctype html>
<!--
  Demo 2 · Design canvas
  Shows three differentiated hero variants for a fictional reading-companion app
  ("Page & Margin"), drawn from three different design schools:
    A · Swiss Editorial — structural, precise, quiet authority
    B · Kenya Hara minimalism — generous whitespace, single focal object
    C · Brutalist web — raw text, monospace, no polish

  Each cell is the same size (so variants compare cleanly), labeled with what
  it's exploring, on a neutral cream canvas so the variant colors read correctly.
-->
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Demo · Page & Margin — hero variations</title>
  <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
  <style>
    * { box-sizing: border-box; }
    html, body { margin: 0; font-family: 'Inter', system-ui, sans-serif; background: #efece5; color: #111; }
    .page {
      max-width: 1440px; margin: 0 auto; padding: 72px 48px;
    }
    .page > header { margin-bottom: 48px; }
    .page-title { font-size: 28px; font-weight: 500; letter-spacing: -0.01em; margin: 0; }
    .page-sub { margin: 8px 0 0; color: #6b6359; font-size: 15px; }

    .canvas {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px;
    }
    .cell {
      background: white; border-radius: 6px; overflow: hidden;
      box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 12px 28px rgba(0,0,0,0.06);
    }
    .cell-head {
      padding: 14px 18px; border-bottom: 1px solid #eee;
      display: flex; align-items: baseline; gap: 12px;
    }
    .cell-head .tag {
      font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
      padding: 3px 8px; border-radius: 3px;
      background: #efece5; color: #6b6359; font-weight: 500;
    }
    .cell-head h3 { font-size: 14px; margin: 0; font-weight: 600; }
    .cell-head .why { font-size: 12px; color: #6b6359; margin-left: auto; }
    .cell-body { aspect-ratio: 4 / 3; position: relative; overflow: hidden; }

    /* Variant A — Swiss Editorial */
    .vA {
      background: #f4f0ea; color: #111;
      padding: 40px 48px;
      display: grid; grid-template-rows: auto 1fr auto;
      font-family: 'Inter', sans-serif;
    }
    .vA .head { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: #6b6359; font-weight: 500; }
    .vA .headline {
      font-size: 68px; line-height: 0.96; letter-spacing: -0.03em; font-weight: 400;
      margin: auto 0; max-width: 540px;
    }
    .vA .accent { color: #c94727; }
    .vA .foot { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; }
    .vA .foot p { font-size: 12px; color: #6b6359; margin: 0; max-width: 340px; line-height: 1.45; }
    .vA .cta { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; border-top: 1px solid #111; padding-top: 6px; }

    /* Variant B — Kenya Hara minimalism */
    .vB {
      background: #fbf9f4; color: #333;
      padding: 48px 56px;
      display: grid; grid-template-rows: 1fr auto;
      font-family: 'Fraunces', serif;
    }
    .vB .dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: #a88a5e; margin: auto;
    }
    .vB .foot { display: grid; place-items: center; text-align: center; gap: 10px; }
    .vB .eyebrow { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: #a88a5e; font-family: 'Inter', sans-serif; font-weight: 500; }
    .vB .name { font-size: 32px; font-weight: 300; letter-spacing: -0.01em; }
    .vB .tag { font-size: 12px; color: #6b6359; font-family: 'Inter', sans-serif; max-width: 280px; line-height: 1.5; }

    /* Variant C — Brutalist web */
    .vC {
      background: white; color: #000;
      padding: 24px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 13px; line-height: 1.5;
    }
    .vC pre { margin: 0; font: inherit; white-space: pre-wrap; }
    .vC hr { border: none; border-top: 1px solid #000; margin: 12px 0; }
    .vC h1 { font-size: 28px; font-weight: 500; margin: 0 0 6px; font-family: 'Fraunces', serif; letter-spacing: -0.02em; }
    .vC .link { color: #0000ee; text-decoration: underline; }
    .vC table { width: 100%; border-collapse: collapse; margin: 8px 0; }
    .vC td { padding: 4px 8px 4px 0; vertical-align: top; border-bottom: 1px dashed #aaa; }
    .vC td:first-child { color: #666; width: 110px; }

    /* Variant D — Editorial magazine */
    .vD {
      background: #1a1613; color: #f0e9dd;
      padding: 36px 44px;
      display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
      font-family: 'Inter', sans-serif;
    }
    .vD .left { display: grid; grid-template-rows: auto 1fr auto; }
    .vD .masthead { font-family: 'Fraunces', serif; font-size: 13px; letter-spacing: 0.05em; color: #c4a77d; }
    .vD .deck {
      font-family: 'Fraunces', serif; font-weight: 400;
      font-size: 52px; line-height: 0.98; letter-spacing: -0.02em;
      margin-top: 16px;
    }
    .vD .byline { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: #8a7c68; margin-top: auto; }
    .vD .right { background: #2a2420; border-radius: 3px; display: grid; place-items: center; padding: 24px; }
    .vD .pull-quote {
      font-family: 'Fraunces', serif; font-weight: 300; font-size: 22px; line-height: 1.3;
      border-left: 2px solid #c4a77d; padding-left: 18px; color: #f0e9dd;
    }
    .vD .pull-quote cite { display: block; margin-top: 14px; font-family: 'Inter', sans-serif; font-size: 11px; font-style: normal; color: #8a7c68; letter-spacing: 0.1em; text-transform: uppercase; }
  </style>
</head>
<body>
  <div class="page">
    <header>
      <h1 class="page-title">Page &amp; Margin — hero variations</h1>
      <p class="page-sub">Four differentiated directions for the marketing hero of a fictional reading-companion app. Each cell is labelled with the style it's exploring and a one-line note on when that direction fits.</p>
    </header>

    <main class="canvas">

      <section class="cell">
        <div class="cell-head">
          <span class="tag">A</span>
          <h3>Swiss Editorial</h3>
          <span class="why">Structural authority · good for B2B, professional tools</span>
        </div>
        <div class="cell-body vA">
          <div class="head">
            <span>Page &amp; Margin</span>
            <span>V.01 · 2026</span>
          </div>
          <h2 class="headline">Reading you can <span class="accent">argue with.</span></h2>
          <div class="foot">
            <p>Turn your margin notes into a conversation with every book you've read. Private by default, syncable across devices, exportable as a single archive file you own.</p>
            <div class="cta">Start a shelf →</div>
          </div>
        </div>
      </section>

      <section class="cell">
        <div class="cell-head">
          <span class="tag">B</span>
          <h3>Quiet Minimalism</h3>
          <span class="why">Kenya Hara lineage · good for lifestyle, wellness, craft</span>
        </div>
        <div class="cell-body vB">
          <div class="dot" aria-hidden="true"></div>
          <div class="foot">
            <span class="eyebrow">Page &amp; Margin</span>
            <div class="name">Read, slowly.</div>
            <p class="tag">A notebook for margins, and the thoughts that outlive the book.</p>
          </div>
        </div>
      </section>

      <section class="cell">
        <div class="cell-head">
          <span class="tag">C</span>
          <h3>Brutalist Web</h3>
          <span class="why">Are.na lineage · good for indie, text-forward, dev audiences</span>
        </div>
        <div class="cell-body vC">
          <pre>// page-and-margin v0.2.1
// a notebook for the books you actually read</pre>
          <hr>
          <h1>Page &amp; Margin</h1>
          <p style="font-family: 'Fraunces', serif; margin: 0 0 10px;">Every note you ever took on every book you ever finished, in one plain-text archive you can keep forever.</p>
          <hr>
          <table>
            <tr><td>STORAGE</td><td>plain text · yours · ~40KB per 100 books</td></tr>
            <tr><td>SYNC</td><td>iCloud / Dropbox / your git repo</td></tr>
            <tr><td>EXPORT</td><td>markdown, epub, csv, pdf</td></tr>
            <tr><td>PRICE</td><td>$29 once, not a subscription</td></tr>
          </table>
          <p><a class="link" href="#">→ try the beta</a> &nbsp; <a class="link" href="#">→ read the manifesto</a></p>
        </div>
      </section>

      <section class="cell">
        <div class="cell-head">
          <span class="tag">D</span>
          <h3>Editorial Magazine</h3>
          <span class="why">New York Magazine lineage · good for opinion-led, storytelling brands</span>
        </div>
        <div class="cell-body vD">
          <div class="left">
            <div class="masthead">Page &amp; Margin · Issue N° 01</div>
            <div class="deck">A notebook<br>with opinions<br>about what you read.</div>
            <div class="byline">Shipping Spring 2026</div>
          </div>
          <div class="right">
            <blockquote class="pull-quote">
              "The book was finished,<br>but the argument had just started."
              <cite>— from the launch essay</cite>
            </blockquote>
          </div>
        </div>
      </section>

    </main>
  </div>
</body>
</html>