Html Ppt Zhangzara Pin And Paper

/**
 * <deck-stage> — reusable web component for HTML decks.
 *
 * Handles:
 *  (a) speaker notes — reads <script type="application/json" id="speaker-notes">
 *      and posts {slideIndexChanged: N} to the parent window on nav.
 *  (b) keyboard navigation — ←/→, PgUp/PgDn, Space, Home/End, number keys.
 *  (c) press R to reset to slide 0 (with a tasteful keyboard hint).
 *  (d) bottom-center overlay showing slide count + hints, fades out on idle.
 *  (e) auto-scaling — inner canvas is a fixed design size (default 1920×1080)
 *      scaled with `transform: scale()` to fit the viewport, letterboxed.
 *      Set the `noscale` attribute to render at authored size (1:1) — the
 *      PPTX exporter sets this so its DOM capture sees unscaled geometry.
 *  (f) print — `@media print` lays every slide out as its own page at the
 *      design size, so the browser's Print → Save as PDF produces a clean
 *      one-page-per-slide PDF with no extra setup.
 *
 * Slides are HIDDEN, not unmounted. Non-active slides stay in the DOM with
 * `visibility: hidden` + `opacity: 0`, so their state (videos, iframes,
 * form inputs, React trees) is preserved across navigation.
 *
 * Lifecycle event — the component dispatches a `slidechange` CustomEvent on
 * itself whenever the active slide changes (including the initial mount).
 * The event bubbles and composes out of shadow DOM, so you can listen on
 * the <deck-stage> element or on document:
 *
 *   document.querySelector('deck-stage').addEventListener('slidechange', (e) => {
 *     e.detail.index         // new 0-based index
 *     e.detail.previousIndex // previous index, or -1 on init
 *     e.detail.total         // total slide count
 *     e.detail.slide         // the new active slide element
 *     e.detail.previousSlide // the prior slide element, or null on init
 *     e.detail.reason        // 'init' | 'keyboard' | 'click' | 'tap' | 'api'
 *   });
 *
 * Persistence: none at the deck level. The host app keeps the current slide
 * in its own URL (?slide=) and re-delivers it via location.hash on load, so a
 * bare load with no hash always starts at slide 1.
 *
 * Usage:
 *   <deck-stage width="1920" height="1080">
 *     <section data-label="Title">...</section>
 *     <section data-label="Agenda">...</section>
 *   </deck-stage>
 *
 * Slides are the direct element children of <deck-stage>. Each slide is
 * automatically tagged with:
 *   - data-screen-label="NN Label"   (1-indexed, for comment flow)
 *   - data-om-validate="no_overflowing_text,no_overlapping_text,slide_sized_text"
 */

(() => {
  const DESIGN_W_DEFAULT = 1920;
  const DESIGN_H_DEFAULT = 1080;
  const OVERLAY_HIDE_MS = 1800;
  const VALIDATE_ATTR = 'no_overflowing_text,no_overlapping_text,slide_sized_text';

  const pad2 = (n) => String(n).padStart(2, '0');

  const stylesheet = `
    :host {
      position: fixed;
      inset: 0;
      display: block;
      background: #000;
      color: #fff;
      font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
      overflow: hidden;
    }

    .stage {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .canvas {
      position: relative;
      transform-origin: center center;
      flex-shrink: 0;
      background: #fff;
      will-change: transform;
    }

    /* Slides live in light DOM (via <slot>) so authored CSS still applies.
       We absolutely position each slotted child to stack them. */
    ::slotted(*) {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      box-sizing: border-box !important;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
    }
    ::slotted([data-deck-active]) {
      opacity: 1;
      pointer-events: auto;
      visibility: visible;
    }

    /* Tap zones for mobile — back/forward thirds like Stories.
       Transparent, no visible UI, don't block the overlay. */
    .tapzones {
      position: fixed;
      inset: 0;
      display: flex;
      z-index: 2147482000;
      pointer-events: none;
    }
    .tapzone {
      flex: 1;
      pointer-events: auto;
      -webkit-tap-highlight-color: transparent;
    }
    /* Only activate tap zones on coarse pointers (touch devices). */
    @media (hover: hover) and (pointer: fine) {
      .tapzones { display: none; }
    }

    .overlay {
      position: fixed;
      left: 50%;
      bottom: 22px;
      transform: translate(-50%, 6px) scale(0.92);
      filter: blur(6px);
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 4px;
      background: #000;
      color: #fff;
      border-radius: 999px;
      font-size: 12px;
      font-feature-settings: "tnum" 1;
      letter-spacing: 0.01em;
      opacity: 0;
      pointer-events: none;
      transition: opacity 260ms ease, transform 260ms cubic-bezier(.2,.8,.2,1), filter 260ms ease;
      transform-origin: center bottom;
      z-index: 2147483000;
      user-select: none;
    }
    .overlay[data-visible] {
      opacity: 1;
      pointer-events: auto;
      transform: translate(-50%, 0) scale(1);
      filter: blur(0);
    }

    .btn {
      appearance: none;
      -webkit-appearance: none;
      background: transparent;
      border: 0;
      margin: 0;
      padding: 0;
      color: inherit;
      font: inherit;
      cursor: default;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 28px;
      min-width: 28px;
      border-radius: 999px;
      color: rgba(255,255,255,0.72);
      transition: background 140ms ease, color 140ms ease;
      -webkit-tap-highlight-color: transparent;
    }
    .btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
    .btn:active { background: rgba(255,255,255,0.18); }
    .btn:focus { outline: none; }
    .btn:focus-visible { outline: none; }
    .btn::-moz-focus-inner { border: 0; }
    .btn svg { width: 14px; height: 14px; display: block; }
    .btn.reset {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.02em;
      padding: 0 10px 0 12px;
      gap: 6px;
      color: rgba(255,255,255,0.72);
    }
    .btn.reset .kbd {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 16px;
      height: 16px;
      padding: 0 4px;
      font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
      font-size: 10px;
      line-height: 1;
      color: rgba(255,255,255,0.88);
      background: rgba(255,255,255,0.12);
      border-radius: 4px;
    }

    .count {
      font-variant-numeric: tabular-nums;
      color: #fff;
      font-weight: 500;
      padding: 0 8px;
      min-width: 42px;
      text-align: center;
      font-size: 12px;
    }
    .count .sep { color: rgba(255,255,255,0.45); margin: 0 3px; font-weight: 400; }
    .count .total { color: rgba(255,255,255,0.55); }

    .divider {
      width: 1px;
      height: 14px;
      background: rgba(255,255,255,0.18);
      margin: 0 2px;
    }

    /* ── Print: one page per slide, no chrome ────────────────────────────
       The screen layout stacks every slide at inset:0 inside a scaled
       canvas; for print we want them in document flow at the authored
       design size so the browser paginates one slide per sheet. The
       @page size is set from the width/height attributes via the inline
       <style id="deck-stage-print-page"> that connectedCallback injects
       into <head> (the @page at-rule has no effect inside shadow DOM). */
    @media print {
      :host {
        position: static;
        inset: auto;
        background: none;
        overflow: visible;
        color: inherit;
      }
      .stage { position: static; display: block; }
      .canvas {
        transform: none !important;
        width: auto !important;
        height: auto !important;
        background: none;
        will-change: auto;
      }
      ::slotted(*) {
        position: relative !important;
        inset: auto !important;
        width: var(--deck-design-w) !important;
        height: var(--deck-design-h) !important;
        box-sizing: border-box !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto;
        break-after: page;
        page-break-after: always;
        break-inside: avoid;
        overflow: hidden;
      }
      ::slotted(*:last-child) {
        break-after: auto;
        page-break-after: auto;
      }
      .overlay, .tapzones { display: none !important; }
    }
  `;

  class DeckStage extends HTMLElement {
    static get observedAttributes() { return ['width', 'height', 'noscale']; }

    constructor() {
      super();
      this._root = this.attachShadow({ mode: 'open' });
      this._index = 0;
      this._slides = [];
      this._notes = [];
      this._hideTimer = null;
      this._mouseIdleTimer = null;

      this._onKey = this._onKey.bind(this);
      this._onResize = this._onResize.bind(this);
      this._onSlotChange = this._onSlotChange.bind(this);
      this._onMouseMove = this._onMouseMove.bind(this);
      this._onTapBack = this._onTapBack.bind(this);
      this._onTapForward = this._onTapForward.bind(this);
    }

    get designWidth() {
      return parseInt(this.getAttribute('width'), 10) || DESIGN_W_DEFAULT;
    }
    get designHeight() {
      return parseInt(this.getAttribute('height'), 10) || DESIGN_H_DEFAULT;
    }

    connectedCallback() {
      this._render();
      this._loadNotes();
      this._syncPrintPageRule();
      window.addEventListener('keydown', this._onKey);
      window.addEventListener('resize', this._onResize);
      window.addEventListener('mousemove', this._onMouseMove, { passive: true });
      // Initial collection + layout happens via slotchange, which fires on mount.
    }

    disconnectedCallback() {
      window.removeEventListener('keydown', this._onKey);
      window.removeEventListener('resize', this._onResize);
      window.removeEventListener('mousemove', this._onMouseMove);
      if (this._hideTimer) clearTimeout(this._hideTimer);
      if (this._mouseIdleTimer) clearTimeout(this._mouseIdleTimer);
    }

    attributeChangedCallback() {
      if (this._canvas) {
        this._canvas.style.width = this.designWidth + 'px';
        this._canvas.style.height = this.designHeight + 'px';
        this._canvas.style.setProperty('--deck-design-w', this.designWidth + 'px');
        this._canvas.style.setProperty('--deck-design-h', this.designHeight + 'px');
        this._fit();
        this._syncPrintPageRule();
      }
    }

    _render() {
      const style = document.createElement('style');
      style.textContent = stylesheet;

      const stage = document.createElement('div');
      stage.className = 'stage';

      const canvas = document.createElement('div');
      canvas.className = 'canvas';
      canvas.style.width = this.designWidth + 'px';
      canvas.style.height = this.designHeight + 'px';
      canvas.style.setProperty('--deck-design-w', this.designWidth + 'px');
      canvas.style.setProperty('--deck-design-h', this.designHeight + 'px');

      const slot = document.createElement('slot');
      slot.addEventListener('slotchange', this._onSlotChange);
      canvas.appendChild(slot);
      stage.appendChild(canvas);

      // Tap zones (mobile): left third = back, right third = forward.
      const tapzones = document.createElement('div');
      tapzones.className = 'tapzones export-hidden';
      tapzones.setAttribute('aria-hidden', 'true');
      tapzones.setAttribute('data-noncommentable', '');
      const tzBack = document.createElement('div');
      tzBack.className = 'tapzone tapzone--back';
      const tzMid = document.createElement('div');
      tzMid.className = 'tapzone tapzone--mid';
      tzMid.style.pointerEvents = 'none';
      const tzFwd = document.createElement('div');
      tzFwd.className = 'tapzone tapzone--fwd';
      tzBack.addEventListener('click', this._onTapBack);
      tzFwd.addEventListener('click', this._onTapForward);
      tapzones.append(tzBack, tzMid, tzFwd);

      // Overlay: compact, solid black, with clickable controls.
      const overlay = document.createElement('div');
      overlay.className = 'overlay export-hidden';
      overlay.setAttribute('role', 'toolbar');
      overlay.setAttribute('aria-label', 'Deck controls');
      overlay.setAttribute('data-noncommentable', '');
      overlay.innerHTML = `
        <button class="btn prev" type="button" aria-label="Previous slide" title="Previous (←)">
          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 3L5 8l5 5"/></svg>
        </button>
        <span class="count" aria-live="polite"><span class="current">1</span><span class="sep">/</span><span class="total">1</span></span>
        <button class="btn next" type="button" aria-label="Next slide" title="Next (→)">
          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 3l5 5-5 5"/></svg>
        </button>
        <span class="divider"></span>
        <button class="btn reset" type="button" aria-label="Reset to first slide" title="Reset (R)">Reset<span class="kbd">R</span></button>
      `;

      overlay.querySelector('.prev').addEventListener('click', () => this._go(this._index - 1, 'click'));
      overlay.querySelector('.next').addEventListener('click', () => this._go(this._index + 1, 'click'));
      overlay.querySelector('.reset').addEventListener('click', () => this._go(0, 'click'));

      this._root.append(style, stage, tapzones, overlay);
      this._canvas = canvas;
      this._slot = slot;
      this._overlay = overlay;
      this._countEl = overlay.querySelector('.current');
      this._totalEl = overlay.querySelector('.total');
    }

    /** @page must live in the document stylesheet — it's a no-op inside
     *  shadow DOM. Inject/update a single <head> style tag so the print
     *  sheet matches the design size and Save-as-PDF yields one slide per
     *  page with no margins. */
    _syncPrintPageRule() {
      const id = 'deck-stage-print-page';
      let tag = document.getElementById(id);
      if (!tag) {
        tag = document.createElement('style');
        tag.id = id;
        document.head.appendChild(tag);
      }
      tag.textContent =
        '@page { size: ' + this.designWidth + 'px ' + this.designHeight + 'px; margin: 0; } ' +
        '@media print { html, body { margin: 0 !important; padding: 0 !important; background: none !important; overflow: visible !important; height: auto !important; } ' +
        '* { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }';
    }

    _onSlotChange() {
      this._collectSlides();
      this._restoreIndex();
      this._applyIndex({ showOverlay: false, broadcast: true, reason: 'init' });
      this._fit();
    }

    _collectSlides() {
      const assigned = this._slot.assignedElements({ flatten: true });
      this._slides = assigned.filter((el) => {
        // Skip template/style/script nodes even if someone slots them.
        const tag = el.tagName;
        return tag !== 'TEMPLATE' && tag !== 'SCRIPT' && tag !== 'STYLE';
      });

      this._slides.forEach((slide, i) => {
        const n = i + 1;
        // Determine a label for comment flow: prefer explicit data-label,
        // then an existing data-screen-label, then first heading, else "Slide".
        let label = slide.getAttribute('data-label');
        if (!label) {
          const existing = slide.getAttribute('data-screen-label');
          if (existing) {
            // Strip any leading number the author may have included.
            label = existing.replace(/^\s*\d+\s*/, '').trim() || existing;
          }
        }
        if (!label) {
          const h = slide.querySelector('h1, h2, h3, [data-title]');
          if (h) label = (h.textContent || '').trim().slice(0, 40);
        }
        if (!label) label = 'Slide';
        slide.setAttribute('data-screen-label', `${pad2(n)} ${label}`);

        // Validation attribute for comment flow / auto-checks.
        if (!slide.hasAttribute('data-om-validate')) {
          slide.setAttribute('data-om-validate', VALIDATE_ATTR);
        }

        slide.setAttribute('data-deck-slide', String(i));
      });

      if (this._totalEl) this._totalEl.textContent = String(this._slides.length || 1);
      if (this._index >= this._slides.length) this._index = Math.max(0, this._slides.length - 1);
    }

    _loadNotes() {
      const tag = document.getElementById('speaker-notes');
      if (!tag) { this._notes = []; return; }
      try {
        const parsed = JSON.parse(tag.textContent || '[]');
        if (Array.isArray(parsed)) this._notes = parsed;
      } catch (e) {
        console.warn('[deck-stage] Failed to parse #speaker-notes JSON:', e);
        this._notes = [];
      }
    }

    _restoreIndex() {
      // The host's ?slide= param is delivered as a #<int> hash (1-indexed) on
      // the iframe src. No hash → slide 1; the deck itself keeps no position
      // state across loads.
      const h = (location.hash || '').match(/^#(\d+)$/);
      if (h) {
        const n = parseInt(h[1], 10) - 1;
        if (n >= 0 && n < this._slides.length) this._index = n;
      }
    }

    _applyIndex({ showOverlay = true, broadcast = true, reason = 'init' } = {}) {
      if (!this._slides.length) return;
      const prev = this._prevIndex == null ? -1 : this._prevIndex;
      const curr = this._index;
      // Keep the iframe's own hash in sync so an in-iframe location.reload()
      // (reload banner path in viewer-handle.ts) lands on the current slide,
      // not the stale deep-link hash from initial load.
      try { history.replaceState(null, '', '#' + (curr + 1)); } catch (e) {}
      this._slides.forEach((s, i) => {
        if (i === curr) s.setAttribute('data-deck-active', '');
        else s.removeAttribute('data-deck-active');
      });
      if (this._countEl) this._countEl.textContent = String(curr + 1);

      if (broadcast) {
        // (1) Legacy: host-window postMessage for speaker-notes renderers.
        try { window.postMessage({ slideIndexChanged: curr }, '*'); } catch (e) {}

        // (2) In-page CustomEvent on the <deck-stage> element itself.
        //     Bubbles and composes out of shadow DOM so slide code can listen:
        //       document.querySelector('deck-stage').addEventListener('slidechange', e => {
        //         e.detail.index, e.detail.previousIndex, e.detail.total, e.detail.slide, e.detail.reason
        //       });
        const detail = {
          index: curr,
          previousIndex: prev,
          total: this._slides.length,
          slide: this._slides[curr] || null,
          previousSlide: prev >= 0 ? (this._slides[prev] || null) : null,
          reason: reason, // 'init' | 'keyboard' | 'click' | 'tap' | 'api'
        };
        this.dispatchEvent(new CustomEvent('slidechange', {
          detail,
          bubbles: true,
          composed: true,
        }));
      }

      this._prevIndex = curr;
      if (showOverlay) this._flashOverlay();
    }

    _flashOverlay() {
      if (!this._overlay) return;
      this._overlay.setAttribute('data-visible', '');
      if (this._hideTimer) clearTimeout(this._hideTimer);
      this._hideTimer = setTimeout(() => {
        this._overlay.removeAttribute('data-visible');
      }, OVERLAY_HIDE_MS);
    }

    _fit() {
      if (!this._canvas) return;
      // PPTX export sets noscale so the DOM capture sees authored-size
      // geometry — the scaled canvas is in shadow DOM, so the exporter's
      // resetTransformSelector can't reach .canvas.style.transform directly.
      if (this.hasAttribute('noscale')) {
        this._canvas.style.transform = 'none';
        return;
      }
      const vw = window.innerWidth;
      const vh = window.innerHeight;
      const s = Math.min(vw / this.designWidth, vh / this.designHeight);
      this._canvas.style.transform = `scale(${s})`;
    }

    _onResize() { this._fit(); }

    _onMouseMove() {
      // Keep overlay visible while mouse moves; hide after idle.
      this._flashOverlay();
    }

    _onTapBack(e) {
      e.preventDefault();
      this._go(this._index - 1, 'tap');
    }

    _onTapForward(e) {
      e.preventDefault();
      this._go(this._index + 1, 'tap');
    }

    _onKey(e) {
      // Ignore when the user is typing.
      const t = e.target;
      if (t && (t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName))) return;
      if (e.metaKey || e.ctrlKey || e.altKey) return;

      const key = e.key;
      let handled = true;

      if (key === 'ArrowRight' || key === 'PageDown' || key === ' ' || key === 'Spacebar') {
        this._go(this._index + 1, 'keyboard');
      } else if (key === 'ArrowLeft' || key === 'PageUp') {
        this._go(this._index - 1, 'keyboard');
      } else if (key === 'Home') {
        this._go(0, 'keyboard');
      } else if (key === 'End') {
        this._go(this._slides.length - 1, 'keyboard');
      } else if (key === 'r' || key === 'R') {
        this._go(0, 'keyboard');
      } else if (/^[0-9]$/.test(key)) {
        // 1..9 jump to that slide; 0 jumps to 10.
        const n = key === '0' ? 9 : parseInt(key, 10) - 1;
        if (n < this._slides.length) this._go(n, 'keyboard');
      } else {
        handled = false;
      }

      if (handled) {
        e.preventDefault();
        this._flashOverlay();
      }
    }

    _go(i, reason = 'api') {
      if (!this._slides.length) return;
      const clamped = Math.max(0, Math.min(this._slides.length - 1, i));
      if (clamped === this._index) {
        this._flashOverlay();
        return;
      }
      this._index = clamped;
      this._applyIndex({ showOverlay: true, broadcast: true, reason });
    }

    // Public API ------------------------------------------------------------

    /** Current slide index (0-based). */
    get index() { return this._index; }
    /** Total slide count. */
    get length() { return this._slides.length; }
    /** Programmatically navigate. */
    goTo(i) { this._go(i, 'api'); }
    next() { this._go(this._index + 1, 'api'); }
    prev() { this._go(this._index - 1, 'api'); }
    reset() { this._go(0, 'api'); }
  }

  if (!customElements.get('deck-stage')) {
    customElements.define('deck-stage', DeckStage);
  }
})();

:root {
  --paper:    #EFE56A;
  --paper-2:  #F5ECA0;
  --paper-3:  #E8D85A;
  --cream:    #F8F1D6;
  --kraft:    #C9A66B;
  --ink:      #1F3A8A;
  --ink-soft: #2D4FB8;
  --ink-line: #3457C4;
  --black:    #0E1430;
  --red:      #C2342B;
  --olive:    #6B7A2E;
  --orange:   #D8702A;
}

html, body { margin:0; padding:0; background:#1a1a1a; }
body { font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; color: var(--ink); }
deck-stage { background: #1a1a1a; }

section.slide {
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(140% 100% at 80% 95%, rgba(0,0,0,.05), transparent 55%),
    var(--paper);
  color: var(--ink);
  overflow: hidden;
  position: relative;
}
section.slide.cream { background:
    radial-gradient(120% 90% at 20% 10%, rgba(255,255,255,.5), transparent 60%),
    var(--cream); }
section.slide.deep  { background:
    radial-gradient(120% 90% at 30% 10%, rgba(255,255,255,.18), transparent 60%),
    var(--paper-3); }
section.slide.ink {
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(255,255,255,.06), transparent 60%),
    var(--ink);
  color: var(--paper);
}

/* paper grain */
section.slide::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.45  0 0 0 0 0.2  0 0 0 .25 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
section.slide.ink::before { opacity: .25; mix-blend-mode: screen; }

/* chrome */
.top {
  position: absolute; top: 44px; left: 64px; right: 64px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: "DM Mono", ui-monospace, monospace;
  font-weight: 500; font-size: 18px;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1;
}
.top .lockup { display: flex; align-items: center; gap: 14px; }
.top .lockup svg { width: 32px; height: 16px; }
.top .meta { display: flex; gap: 36px; opacity: .7; }
section.slide.ink .top { color: var(--paper); }

.footer {
  position: absolute; left: 64px; right: 64px; bottom: 36px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: "DM Mono", ui-monospace, monospace;
  font-weight: 500; font-size: 15px;
  letter-spacing: .14em; text-transform: uppercase;
  opacity: .65;
}
section.slide.ink .footer { color: var(--paper); opacity: .75; }

.scribble {
  font-family: "Caveat", cursive;
  color: var(--ink);
  line-height: 1.05;
}

.stamp {
  display: inline-block;
  border: 3px solid var(--red);
  color: var(--red);
  padding: 6px 16px;
  font-family: "DM Mono", monospace;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .18em;
  text-transform: uppercase;
  transform: rotate(-4deg);
}

/* ============ 01 COVER ============ */
.s-cover { padding: 0; }
.s-cover .stage {
  position: absolute; inset: 0;
  padding: 110px 64px 80px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 24px;
  z-index: 2;
}
.s-cover .super {
  font-family: "DM Mono", monospace;
  font-weight: 500;
  font-size: 18px; letter-spacing: .22em; text-transform: uppercase;
  opacity: .85;
}
.s-cover h1 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 196px;
  line-height: .88;
  letter-spacing: -.04em;
  color: var(--ink);
  margin: 0;
  align-self: center;
  max-width: 14ch;
}
.s-cover h1 em {
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-style: normal;
  color: var(--ink);
  font-size: 1.05em;
  letter-spacing: -.005em;
}
.s-cover .pin-1 {
  position: absolute; top: 130px; right: 80px;
  width: 420px; transform: rotate(-8deg);
  color: var(--ink); z-index: 1;
}
.s-cover .pin-2 {
  position: absolute; bottom: 200px; right: 140px;
  width: 360px; transform: rotate(14deg);
  color: var(--ink); z-index: 1;
}
.s-cover .handwritten {
  position: absolute;
  right: 80px; bottom: 360px;
  font-family: "Caveat", cursive;
  font-size: 38px;
  line-height: 1.1;
  color: var(--ink);
  transform: rotate(-3deg);
  transform-origin: right bottom;
  text-align: right;
  z-index: 3;
}
.s-cover .handwritten .underline {
  border-bottom: 2px solid var(--ink);
}
.s-cover .row {
  display: flex; align-items: end; justify-content: space-between;
  gap: 32px;
}
.s-cover .row .who {
  font-family: "DM Mono", monospace; font-weight: 500;
  font-size: 16px; letter-spacing: .18em; text-transform: uppercase;
}
.s-cover .row .who small {
  display: block; opacity: .7; margin-top: 6px; letter-spacing: .14em;
}
.s-cover .row .date {
  font-family: "DM Mono", monospace; font-weight: 500;
  font-size: 16px; letter-spacing: .18em; text-transform: uppercase;
  text-align: right;
}

/* ============ 02 AGENDA ============ */
.s-agenda h2 {
  position: absolute; left: 64px; top: 110px;
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: 96px; line-height: .92; letter-spacing: -.03em;
  margin: 0; color: var(--ink);
}
.s-agenda h2 em {
  font-family: "Caveat", cursive; font-style: normal; font-weight: 700;
}
.s-agenda .list {
  position: absolute; left: 64px; right: 64px; top: 340px; bottom: 100px;
  display: flex; flex-direction: column;
}
.s-agenda .row {
  display: grid;
  grid-template-columns: 90px 1fr 140px 240px;
  align-items: center;
  gap: 32px;
  padding: 22px 0;
  border-bottom: 1.5px dashed rgba(31,58,138,.45);
}
.s-agenda .row:last-child { border-bottom: 0; }
.s-agenda .row .num {
  font-family: "DM Mono", monospace; font-weight: 500;
  font-size: 22px; letter-spacing: .14em;
}
.s-agenda .row .lab {
  font-family: "Space Grotesk", sans-serif; font-weight: 600;
  font-size: 44px; letter-spacing: -.02em; line-height: 1;
}
.s-agenda .row .pin {
  width: 120px; height: 28px; color: var(--ink);
  transform: rotate(-3deg);
}
.s-agenda .row .meta {
  font-family: "DM Mono", monospace; font-weight: 500;
  font-size: 15px; letter-spacing: .14em; text-transform: uppercase;
  opacity: .7; text-align: right;
}

/* ============ 03 NOTECARDS ============ */
.s-notes .head { position: absolute; left: 64px; right: 64px; top: 110px; }
.s-notes h2 {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: 84px; line-height: .92; letter-spacing: -.03em; margin: 0;
}
.s-notes h2 em { font-family: "Caveat", cursive; font-style: normal; }
.s-notes .sub {
  margin-top: 14px;
  font-size: 22px; line-height: 1.45; max-width: 60ch; opacity: .85;
}
.s-notes .grid {
  position: absolute; left: 64px; right: 64px; top: 430px; bottom: 100px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.s-notes .card {
  background: var(--cream);
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  padding: 36px 28px 28px;
  display: flex; flex-direction: column;
  position: relative;
  box-shadow: 5px 6px 0 0 var(--ink);
}
.s-notes .card.alt  { background: var(--paper-2); }
.s-notes .card.alt2 { background: #FBE6A4; transform: rotate(.6deg); }
.s-notes .card .pin {
  position: absolute; top: -16px; left: 28px;
  width: 110px; height: 32px;
  color: var(--ink);
  transform: rotate(-10deg);
}
.s-notes .card .num {
  font-family: "DM Mono", monospace; font-weight: 500;
  font-size: 16px; letter-spacing: .2em; text-transform: uppercase;
  opacity: .65; margin-top: 8px;
}
.s-notes .card h3 {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: 38px; line-height: 1.02; letter-spacing: -.02em;
  margin: 14px 0 16px;
}
.s-notes .card p { font-size: 20px; line-height: 1.45; margin: 0; }
.s-notes .card .scribble {
  margin-top: auto; padding-top: 18px;
  font-size: 32px; line-height: 1.05;
  transform: rotate(-1.5deg);
  transform-origin: left;
}
.s-notes .card .scribble .underline { border-bottom: 2px solid var(--ink); }

/* ============ 04 SECTION DIVIDER (ink) ============ */
.s-sec { padding: 0; }
.s-sec .marker {
  position: absolute; left: 64px; top: 110px;
  font-family: "DM Mono", monospace; font-weight: 500;
  font-size: 16px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--paper); opacity: .8;
}
.s-sec .label {
  position: absolute; right: 64px; top: 110px;
  font-family: "DM Mono", monospace; font-weight: 500;
  font-size: 16px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--paper); opacity: .8; text-align: right;
}
.s-sec h2 {
  position: absolute;
  left: 64px; right: 480px; bottom: 180px;
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: 168px; line-height: .88; letter-spacing: -.04em;
  color: var(--paper); margin: 0;
}
.s-sec h2 em {
  font-family: "Caveat", cursive; font-style: normal; color: var(--paper);
}
.s-sec .pin-big {
  position: absolute; right: 64px; top: 280px;
  width: 640px; color: var(--paper);
  transform: rotate(-14deg); opacity: .85;
}
.s-sec .scribble {
  position: absolute; left: 64px; bottom: 90px;
  font-size: 36px; color: var(--paper); opacity: .9;
  transform: rotate(-2deg);
}

/* ============ 05 NOTICE (text-dense) ============ */
.s-notice .head {
  position: absolute; left: 64px; right: 64px; top: 110px;
  display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: start;
}
.s-notice .head .pre {
  font-family: "DM Mono", monospace; font-weight: 500;
  font-size: 16px; letter-spacing: .2em; text-transform: uppercase;
  border-right: 2px solid var(--ink);
  padding-right: 28px; padding-top: 14px;
  white-space: nowrap;
}
.s-notice .head h2 {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: 50px; line-height: 1.05; letter-spacing: -.02em; margin: 0;
}
.s-notice .head h2 em { font-family: "Caveat", cursive; font-style: normal; }
.s-notice .grid {
  position: absolute; left: 64px; right: 64px; top: 320px; bottom: 90px;
  display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 28px;
}
.s-notice .col {
  background: var(--cream);
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  padding: 28px 28px 24px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 4px 5px 0 0 var(--ink);
}
.s-notice .col.b { background: var(--paper-2); }
.s-notice .col h3 {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: 28px; letter-spacing: -.01em;
  border-bottom: 1.5px solid var(--ink); padding-bottom: 12px; margin: 0;
}
.s-notice .col .meta {
  font-family: "Caveat", cursive; font-weight: 600;
  font-size: 38px; line-height: 1.05;
}
.s-notice .col p { font-size: 19px; line-height: 1.5; margin: 0; }
.s-notice .col ul { margin: 0; padding-left: 20px; font-size: 19px; line-height: 1.45; }
.s-notice .col ul li { margin-bottom: 8px; }
.s-notice .col .src {
  margin-top: auto;
  font-family: "DM Mono", monospace; font-weight: 500;
  font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  border-top: 1px dashed rgba(31,58,138,.45); padding-top: 10px; opacity: .75;
}

/* ============ 06 CHART ============ */
.s-chart { padding: 0; }
.s-chart .left {
  position: absolute; left: 64px; top: 200px; bottom: 110px; width: 600px;
  display: flex; flex-direction: column; gap: 24px;
}
.s-chart .left h2 {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: 110px; line-height: .9; letter-spacing: -.035em; margin: 0;
  color: var(--paper);
}
.s-chart .left h2 em { font-family: "Caveat", cursive; font-style: normal; color: var(--paper); }
.s-chart .left p { font-size: 21px; line-height: 1.5; color: var(--paper); opacity: .85; max-width: 36ch; }
.s-chart .left .legend { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.s-chart .left .legend .li {
  display: flex; align-items: center; gap: 14px;
  font-family: "DM Mono", monospace; font-weight: 500;
  font-size: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper);
}
.s-chart .left .legend .li i { width: 32px; height: 4px; }
.s-chart .right {
  position: absolute; right: 64px; top: 180px; bottom: 110px; left: 720px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  padding: 28px 32px 24px 76px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 6px 7px 0 0 rgba(239,229,106,.25);
}
.s-chart .right .yhead {
  font-family: "DM Mono", monospace; font-weight: 500;
  font-size: 14px; letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: 8px; opacity: .7;
}
.s-chart .plot { flex: 1; min-height: 0; position: relative;
  border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.s-chart .plot .gline { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(31,58,138,.25); }
.s-chart .plot .yticks {
  position: absolute; left: -48px; top: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  font-family: "DM Mono", monospace; font-weight: 500; font-size: 14px;
}
.s-chart .plot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.s-chart .right .xticks {
  display: flex; justify-content: space-between; padding-top: 8px;
  font-family: "DM Mono", monospace; font-weight: 500; font-size: 14px; letter-spacing: .1em;
}
.s-chart .pin-deco {
  position: absolute; top: 110px; right: 60px;
  width: 240px; color: var(--paper);
  transform: rotate(20deg); opacity: .35;
}

/* ============ 07 PROCESS (5 pinned cards) ============ */
.s-process .head {
  position: absolute; left: 64px; right: 64px; top: 110px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 40px;
}
.s-process .head h2 {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: 88px; line-height: .9; letter-spacing: -.035em; margin: 0;
}
.s-process .head h2 em { font-family: "Caveat", cursive; font-style: normal; }
.s-process .head .sub {
  font-family: "Space Grotesk", sans-serif;
  font-size: 19px; line-height: 1.5; max-width: 36ch; opacity: .85; margin-top: 12px;
}
.s-process .flow {
  position: absolute; left: 64px; right: 64px; top: 460px; bottom: 200px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px;
}
.s-process .node {
  background: var(--cream);
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  padding: 32px 22px 22px;
  display: flex; flex-direction: column; gap: 8px; position: relative;
  box-shadow: 4px 5px 0 0 var(--ink);
}
.s-process .node.alt  { background: var(--paper-2); }
.s-process .node.alt2 { background: #FBE6A4; }
.s-process .node .pin {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(-6deg);
  width: 96px; height: 28px; color: var(--ink);
}
.s-process .node .n {
  font-family: "Caveat", cursive; font-weight: 700;
  font-size: 70px; line-height: .9; color: var(--ink);
}
.s-process .node h3 {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: 28px; line-height: 1.05; letter-spacing: -.015em; margin: 0;
}
.s-process .node p { font-size: 18px; line-height: 1.4; margin: 0; }
.s-process .node .arr {
  position: absolute; right: -16px; top: 44%;
  width: 28px; height: 28px; z-index: 2; color: var(--ink);
}
.s-process .node:last-child .arr { display: none; }
.s-process .timeline {
  position: absolute; left: 64px; right: 64px; bottom: 110px; height: 48px;
  background: transparent;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  padding: 0 24px; display: flex; align-items: center; justify-content: space-between;
  font-family: "DM Mono", monospace; font-weight: 500;
  font-size: 16px; letter-spacing: .12em; text-transform: uppercase;
}

/* ============ 08 LEDGER (comparison) ============ */
.s-matrix .head {
  position: absolute; left: 64px; right: 64px; top: 110px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 40px;
}
.s-matrix .head h2 {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: 88px; line-height: .9; letter-spacing: -.035em; margin: 0;
}
.s-matrix .head h2 em { font-family: "Caveat", cursive; font-style: normal; }
.s-matrix .head .sub {
  font-size: 19px; line-height: 1.5; max-width: 36ch; opacity: .85; margin-top: 12px;
}
.s-matrix .table {
  position: absolute; left: 64px; right: 64px; top: 460px; bottom: 110px;
  background: var(--cream);
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  grid-auto-rows: 1fr; overflow: hidden;
  box-shadow: 5px 6px 0 0 var(--ink);
}
.s-matrix .cell {
  padding: 18px 22px; display: flex; align-items: center;
  font-size: 21px; line-height: 1.35;
  border-bottom: 1.5px solid rgba(31,58,138,.5);
  border-right: 1.5px solid rgba(31,58,138,.5);
}
.s-matrix .cell:nth-child(4n) { border-right: 0; }
.s-matrix .cell.last { border-bottom: 0; }
.s-matrix .cell.head-row {
  background: var(--ink); color: var(--paper);
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: 22px; letter-spacing: -.005em;
  border-right-color: rgba(239,229,106,.3);
}
.s-matrix .cell.row-label {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: 24px; letter-spacing: -.01em;
}
.s-matrix .pill {
  display: inline-block;
  font-family: "Caveat", cursive; font-weight: 600;
  font-size: 28px; line-height: 1;
  padding: 4px 14px; border-radius: 999px;
  border: 1.5px solid var(--ink);
}
.s-matrix .pill.yes  { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.s-matrix .pill.part { background: var(--paper-2); color: var(--ink); }
.s-matrix .pill.no   {
  background: transparent; color: var(--red); border-color: var(--red);
  font-family: "DM Mono", monospace; font-weight: 500; font-size: 16px;
  letter-spacing: .14em; text-transform: uppercase;
}
.s-matrix .pill.note { background: transparent; }

/* ============ 09 STATS ============ */
.s-stats .head {
  position: absolute; left: 64px; right: 64px; top: 110px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 40px;
}
.s-stats .head h2 {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: 92px; line-height: .9; letter-spacing: -.035em; margin: 0;
}
.s-stats .head h2 em { font-family: "Caveat", cursive; font-style: normal; }
.s-stats .head .sub {
  font-size: 19px; line-height: 1.5; max-width: 36ch; opacity: .85; margin-top: 12px;
}
.s-stats .grid {
  position: absolute; left: 64px; right: 64px; top: 460px; bottom: 110px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.s-stats .stat {
  background: var(--cream);
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  padding: 32px 30px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  box-shadow: 5px 6px 0 0 var(--ink);
}
.s-stats .stat.alt  { background: var(--paper-2); }
.s-stats .stat.alt2 { background: #FBE6A4; }
.s-stats .stat .pin {
  position: absolute; top: -14px; left: 32px;
  width: 110px; height: 32px;
  color: var(--ink);
  transform: rotate(-8deg);
}
.s-stats .stat .big {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: 168px; line-height: .85; letter-spacing: -.04em;
  margin-top: 16px;
}
.s-stats .stat .big small {
  font-family: "Caveat", cursive; font-weight: 700;
  font-size: 60px; vertical-align: top; margin-left: 6px;
}
.s-stats .stat h3 {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: 26px; letter-spacing: -.015em;
  margin: auto 0 0; line-height: 1.05;
}
.s-stats .stat p { font-size: 19px; line-height: 1.45; margin: 0; }

/* ============ 10 QUOTE ============ */
.s-quote { padding: 0; }
.s-quote .panel {
  position: absolute; left: 80px; right: 80px; top: 140px; bottom: 130px;
  background: var(--cream);
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  padding: 60px 80px;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 60px;
  align-items: center;
  box-shadow: 8px 9px 0 0 var(--ink);
}
.s-quote .panel .qmark {
  font-family: "Caveat", cursive; font-weight: 700;
  font-size: 360px; line-height: .8; color: var(--ink);
  margin-top: -100px;
}
.s-quote .panel blockquote {
  margin: 0;
  font-family: "Space Grotesk", sans-serif; font-weight: 500;
  font-size: 50px; line-height: 1.1;
  color: var(--ink);
  letter-spacing: -.02em;
}
.s-quote .panel blockquote em {
  font-family: "Caveat", cursive; font-weight: 700; font-style: normal;
  font-size: 1.05em;
}
.s-quote .panel .who {
  margin-top: 32px;
  font-family: "DM Mono", monospace; font-weight: 500;
  font-size: 18px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink);
}
.s-quote .panel .who small {
  display: block; font-weight: 500; font-size: 16px; opacity: .7; margin-top: 6px;
}
.s-quote .panel .pin {
  position: absolute; top: -22px; left: 90px;
  width: 160px; color: var(--ink);
  transform: rotate(-12deg);
}

/* ============ 11 CTA ============ */
.s-cta { padding: 0; }
.s-cta .stage {
  position: absolute; inset: 0;
  padding: 110px 64px 90px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
}
.s-cta .pane {
  border-radius: 4px;
  padding: 40px;
  display: flex; flex-direction: column; gap: 20px;
  position: relative;
}
.s-cta .pane.l {
  background: var(--ink); color: var(--paper);
  justify-content: space-between;
}
.s-cta .pane.r {
  background: var(--cream);
  border: 1.5px solid var(--ink);
  box-shadow: 5px 6px 0 0 var(--ink);
}
.s-cta .pane.l .super {
  font-family: "DM Mono", monospace; font-weight: 500;
  font-size: 16px; letter-spacing: .22em; text-transform: uppercase;
  opacity: .8;
}
.s-cta .pane.l h2 {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: 130px; line-height: .88; letter-spacing: -.035em; margin: 0;
}
.s-cta .pane.l h2 em {
  font-family: "Caveat", cursive; font-style: normal;
}
.s-cta .pane.l p { font-size: 21px; line-height: 1.5; opacity: .9; max-width: 30ch; }
.s-cta .pane.l .pin {
  position: absolute; bottom: 40px; right: 40px;
  width: 220px; color: var(--paper); opacity: .9;
  transform: rotate(-12deg);
}
.s-cta .pane.r h3 {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: 32px; letter-spacing: -.015em; margin: 0;
}
.s-cta .pane.r .step {
  display: grid; grid-template-columns: 70px 1fr; gap: 14px; align-items: start;
  padding: 12px 0;
  border-top: 1.5px dashed rgba(31,58,138,.45);
}
.s-cta .pane.r .step:first-of-type { border-top: 0; }
.s-cta .pane.r .step .n {
  font-family: "Caveat", cursive; font-weight: 700;
  font-size: 60px; line-height: .9; color: var(--ink);
}
.s-cta .pane.r .step h4 {
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: 22px; letter-spacing: -.005em; margin: 0 0 4px;
}
.s-cta .pane.r .step p { font-size: 18px; line-height: 1.4; margin: 0; }