keyframes 0.1.0__tar.gz → 0.2.0__tar.gz

{keyframes-0.1.0 → keyframes-0.2.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.3
 Name: keyframes
-Version: 0.1.0
+Version: 0.2.0
 Summary: Agent-written, interactive HTML slide decks with live 3D, physics, math, code and diagrams
 Keywords: slides,presentation,llm,agents,three.js,mujoco,katex
 Author: Pranay Thangeda
@@ -53,8 +53,12 @@ For exports install the browser once: `uv run playwright install chromium` (or h
 | --- | --- |
 | → / Space, ← | next / previous (build steps included) |
 | E | toggle the layout editor |
-| S | presenter view (notes, next slide, timer) |
+| S | presenter view in a second window (notes, next slide, timer, clickable slide strip) |
 | F | fullscreen · B blackout |
+| L | laser pointer on/off (on by default) |
+
+Hover the bottom-left corner for the `⋯` options menu (laser pointer, fullscreen, black
+screen, presenter view).
 
 Editor: drag to move (Shift locks axis, Alt disables snapping), handles resize (Shift keeps
 aspect), arrows nudge (Shift ×10), `[`/`]` z-order, double-click to interact with a live

{keyframes-0.1.0 → keyframes-0.2.0}/README.md

@@ -32,8 +32,12 @@ For exports install the browser once: `uv run playwright install chromium` (or h
 | --- | --- |
 | → / Space, ← | next / previous (build steps included) |
 | E | toggle the layout editor |
-| S | presenter view (notes, next slide, timer) |
+| S | presenter view in a second window (notes, next slide, timer, clickable slide strip) |
 | F | fullscreen · B blackout |
+| L | laser pointer on/off (on by default) |
+
+Hover the bottom-left corner for the `⋯` options menu (laser pointer, fullscreen, black
+screen, presenter view).
 
 Editor: drag to move (Shift locks axis, Alt disables snapping), handles resize (Shift keeps
 aspect), arrows nudge (Shift ×10), `[`/`]` z-order, double-click to interact with a live

{keyframes-0.1.0 → keyframes-0.2.0}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "keyframes"
-version = "0.1.0"
+version = "0.2.0"
 description = "Agent-written, interactive HTML slide decks with live 3D, physics, math, code and diagrams"
 readme = "README.md"
 requires-python = ">=3.12"

{keyframes-0.1.0 → keyframes-0.2.0}/pyproject.toml.orig

@@ -1,6 +1,6 @@
 [project]
 name = "keyframes"
-version = "0.1.0"
+version = "0.2.0"
 description = "Agent-written, interactive HTML slide decks with live 3D, physics, math, code and diagrams"
 readme = "README.md"
 authors = [

keyframes-0.2.0/src/keyframes/static/runtime/controls.js

@@ -0,0 +1,181 @@
+const TRAIL_MS = 400;
+const TRAIL_WIDTH = 9;
+const DOT_RADIUS = 15;
+const RED = "255, 38, 38";
+const LASER_STORAGE = "keyframes-laser";
+
+const MENU_ITEMS = [
+  { action: "laser", label: "Laser pointer", key: "L" },
+  { action: "fullscreen", label: "Fullscreen", key: "F" },
+  { action: "blackout", label: "Black screen", key: "B" },
+  { action: "presenter", label: "Presenter view", key: "S" },
+];
+
+export function createLaser(deck) {
+  const root = document.documentElement;
+  const canvas = document.createElement("canvas");
+  canvas.className = "keyframes-laser";
+  document.body.append(canvas);
+  const ctx = canvas.getContext("2d");
+  const trailCanvas = document.createElement("canvas");
+  const trailCtx = trailCanvas.getContext("2d");
+  const trail = [];
+  let on = localStorage.getItem(LASER_STORAGE) !== "0";
+  let dot = null;
+  let frame = 0;
+
+  function resize() {
+    const dpr = devicePixelRatio || 1;
+    for (const [c, context] of [[canvas, ctx], [trailCanvas, trailCtx]]) {
+      c.width = innerWidth * dpr;
+      c.height = innerHeight * dpr;
+      context.setTransform(dpr, 0, 0, dpr, 0, 0);
+    }
+    schedule();
+  }
+
+  function overSlide(e) {
+    if (!on || root.classList.contains("keyframes-editing") || e.target.closest?.(".keyframes-menu")) return false;
+    const r = deck.current?.getBoundingClientRect();
+    return !!r && e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom;
+  }
+
+  function onMove(e) {
+    if (e.pointerType === "touch") return;
+    const inside = overSlide(e);
+    root.classList.toggle("keyframes-lasing", inside);
+    dot = inside ? { x: e.clientX, y: e.clientY } : null;
+    if (inside) {
+      const now = performance.now();
+      for (const p of e.getCoalescedEvents?.() ?? [e]) trail.push({ x: p.clientX, y: p.clientY, t: now });
+    }
+    schedule();
+  }
+
+  function hide() {
+    root.classList.remove("keyframes-lasing");
+    dot = null;
+    schedule();
+  }
+
+  function schedule() {
+    frame ||= requestAnimationFrame(draw);
+  }
+
+  function draw() {
+    frame = 0;
+    const now = performance.now();
+    while (trail.length && now - trail[0].t > TRAIL_MS) trail.shift();
+    ctx.clearRect(0, 0, innerWidth, innerHeight);
+    if (trail.length > 1) drawTrail(now);
+    if (dot) drawDot(dot);
+    if (trail.length) schedule();
+  }
+
+  function drawTrail(now) {
+    trailCtx.clearRect(0, 0, innerWidth, innerHeight);
+    trailCtx.strokeStyle = `rgb(${RED})`;
+    trailCtx.lineCap = "round";
+    for (let i = 1; i < trail.length; i++) {
+      trailCtx.lineWidth = TRAIL_WIDTH * (1 - (now - trail[i].t) / TRAIL_MS);
+      trailCtx.beginPath();
+      trailCtx.moveTo(trail[i - 1].x, trail[i - 1].y);
+      trailCtx.lineTo(trail[i].x, trail[i].y);
+      trailCtx.stroke();
+    }
+    ctx.save();
+    ctx.globalAlpha = 0.55;
+    ctx.shadowColor = `rgb(${RED})`;
+    ctx.shadowBlur = 12;
+    ctx.drawImage(trailCanvas, 0, 0, innerWidth, innerHeight);
+    ctx.restore();
+  }
+
+  function drawDot({ x, y }) {
+    const glow = ctx.createRadialGradient(x, y, 0, x, y, DOT_RADIUS);
+    glow.addColorStop(0, "rgb(255, 236, 236)");
+    glow.addColorStop(0.2, `rgb(${RED})`);
+    glow.addColorStop(0.42, `rgba(${RED}, 0.6)`);
+    glow.addColorStop(1, `rgba(${RED}, 0)`);
+    ctx.fillStyle = glow;
+    ctx.beginPath();
+    ctx.arc(x, y, DOT_RADIUS, 0, 2 * Math.PI);
+    ctx.fill();
+  }
+
+  function toggle() {
+    on = !on;
+    localStorage.setItem(LASER_STORAGE, on ? "1" : "0");
+    trail.length = 0;
+    hide();
+  }
+
+  resize();
+  addEventListener("resize", resize);
+  addEventListener("pointermove", onMove, { capture: true, passive: true });
+  root.addEventListener("mouseleave", hide);
+  deck.addEventListener("editmode", hide);
+  return {
+    get on() {
+      return on;
+    },
+    toggle,
+  };
+}
+
+export function createMenu(deck) {
+  const root = document.createElement("div");
+  root.className = "keyframes-menu";
+  root.innerHTML = `
+    <div class="keyframes-menu-list" role="menu" hidden>
+      ${MENU_ITEMS.map(
+        ({ action, label, key }) =>
+          `<button role="menuitem" data-action="${action}"><span class="keyframes-menu-check"></span>${label} (${key})</button>`,
+      ).join("")}
+    </div>
+    <button class="keyframes-menu-toggle" aria-label="Presentation options" title="Presentation options">
+      <svg viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>
+    </button>`;
+  document.body.append(root);
+  const list = root.querySelector(".keyframes-menu-list");
+
+  const actions = {
+    laser: () => deck.laser.toggle(),
+    fullscreen: () => deck.toggleFullscreen(),
+    blackout: () => deck.toggleBlackout(),
+    presenter: () => deck.openPresenter(),
+  };
+  const isOn = {
+    laser: () => deck.laser.on,
+    fullscreen: () => !!document.fullscreenElement,
+    blackout: () => document.body.classList.contains("keyframes-blackout"),
+  };
+
+  function sync() {
+    for (const button of list.querySelectorAll("[data-action]")) {
+      button.classList.toggle("is-on", !!isOn[button.dataset.action]?.());
+    }
+  }
+
+  function setOpen(open) {
+    list.hidden = !open;
+    root.classList.toggle("is-open", open);
+    if (open) sync();
+  }
+
+  root.addEventListener("mousedown", (e) => e.preventDefault());
+  root.addEventListener("click", (e) => {
+    if (e.target.closest(".keyframes-menu-toggle")) return setOpen(list.hidden);
+    const action = e.target.closest("[data-action]")?.dataset.action;
+    if (!action) return;
+    actions[action]();
+    if (action === "presenter") setOpen(false);
+    else sync();
+  });
+  document.addEventListener("pointerdown", (e) => !root.contains(e.target) && setOpen(false));
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape") setOpen(false);
+    else if (!list.hidden) requestAnimationFrame(sync);
+  });
+  document.addEventListener("fullscreenchange", sync);
+}

{keyframes-0.1.0 → keyframes-0.2.0}/src/keyframes/static/runtime/presenter.js

@@ -1,9 +1,13 @@
-import { maxStep } from "./steps.js";
+import { renderMath } from "./math.js";
+import { applyGeometry } from "./runtime.js";
+import { applySteps, maxStep } from "./steps.js";
+
+const THUMB_HEIGHT = 108;
 
 const STYLE = `
   body { background: #1b1c1f; color: #e8e8e8; font: 16px/1.45 system-ui, sans-serif; overflow: hidden; }
   .keyframes-deck { display: none; }
-  .pv { display: grid; grid-template-columns: 1.7fr 1fr; grid-template-rows: auto 1fr; gap: 16px;
+  .pv { display: grid; grid-template-columns: 1.7fr 1fr; grid-template-rows: auto minmax(0, 1fr) auto; gap: 16px;
         height: 100vh; padding: 16px; box-sizing: border-box; }
   .pv-bar { grid-column: 1 / -1; display: flex; gap: 24px; align-items: baseline; font-variant-numeric: tabular-nums; }
   .pv-bar b { font-size: 28px; }
@@ -13,6 +17,17 @@ const STYLE = `
   .pv-side { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
   .pv-label { color: #999; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
   .pv-notes { flex: 1; overflow: auto; font-size: 20px; background: #26272b; border-radius: 8px; padding: 16px; }
+  .pv-close { margin-left: auto; }
+  .pv-strip { grid-column: 1 / -1; display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 8px; }
+  .pv-thumb { position: relative; flex: none; height: ${THUMB_HEIGHT}px; aspect-ratio: var(--ar); padding: 0; border: 0;
+              border-radius: 6px; overflow: hidden; background: #000; cursor: pointer; opacity: .6; }
+  .pv-thumb:hover { opacity: 1; }
+  .pv-thumb.is-current { opacity: 1; }
+  .pv-thumb.is-current::after { content: ""; position: absolute; inset: 0; border: 3px solid #4c8dff; border-radius: 6px; }
+  .pv-thumb .keyframes-slide { visibility: visible; left: 0; top: 0; transform: scale(var(--thumb-scale));
+                                transform-origin: 0 0; pointer-events: none; }
+  .pv-thumb-n { position: absolute; left: 6px; bottom: 4px; padding: 0 6px; border-radius: 4px;
+                background: rgba(0, 0, 0, .6); color: #e8e8e8; font-size: 12px; }
 `;
 
 export function startPresenter(deck) {
@@ -22,16 +37,20 @@ export function startPresenter(deck) {
 
   document.head.insertAdjacentHTML("beforeend", `<style>${STYLE}</style>`);
   document.title = `Presenter · ${document.title}`;
+  document.documentElement.style.setProperty("--keyframes-w", `${width}px`);
+  document.documentElement.style.setProperty("--keyframes-h", `${height}px`);
   document.body.insertAdjacentHTML(
     "beforeend",
     `<div class="pv" style="--ar:${width}/${height}">
       <div class="pv-bar"><b class="pv-count"></b><b class="pv-timer">00:00</b>
-        <button class="pv-reset">reset timer</button><span class="pv-steps"></span></div>
+        <button class="pv-reset">reset timer</button><span class="pv-steps"></span>
+        <button class="pv-close">close presenter</button></div>
       <div><div class="pv-label">Current</div><div class="pv-frame"><iframe class="pv-current"></iframe></div></div>
       <div class="pv-side">
         <div><div class="pv-label">Next</div><div class="pv-frame"><iframe class="pv-next"></iframe></div></div>
         <div class="pv-label">Notes</div><div class="pv-notes"></div>
       </div>
+      <div class="pv-strip" style="--thumb-scale:${THUMB_HEIGHT / height}"></div>
     </div>`,
   );
   const $ = (s) => document.querySelector(s);
@@ -39,6 +58,7 @@ export function startPresenter(deck) {
   const next = $(".pv-next");
   current.src = `?embed${location.hash}`;
   next.src = "?embed&static";
+  const thumbs = buildStrip($(".pv-strip"), slides, (index) => goTo(index, 0));
 
   const send = (frame, index, step) =>
     frame.contentWindow?.postMessage({ type: "keyframes:goto", index, step }, "*");
@@ -53,6 +73,8 @@ export function startPresenter(deck) {
     $(".pv-count").textContent = `${state.index + 1} / ${slides.length}`;
     $(".pv-steps").textContent = steps ? `build ${state.step}/${steps}` : "";
     $(".pv-notes").innerHTML = slide.querySelector("aside.notes")?.innerHTML || "<i>No notes</i>";
+    thumbs.forEach((thumb, i) => thumb.classList.toggle("is-current", i === state.index));
+    thumbs[state.index].scrollIntoView({ inline: "center", block: "nearest", behavior: "smooth" });
     history.replaceState(null, "", `?presenter#/${state.index + 1}/${state.step}`);
   }
 
@@ -80,6 +102,7 @@ export function startPresenter(deck) {
     e.preventDefault();
   });
   $(".pv-reset").onclick = () => (state.started = Date.now());
+  $(".pv-close").onclick = () => window.close();
   setInterval(() => {
     const s = Math.floor((Date.now() - state.started) / 1000);
     $(".pv-timer").textContent = `${String(Math.floor(s / 60)).padStart(2, "0")}:${String(s % 60).padStart(2, "0")}`;
@@ -89,3 +112,23 @@ export function startPresenter(deck) {
   const [, n, s] = location.hash.match(/^#\/(\d+)(?:\/(\d+))?/) || [];
   goTo(n ? Number(n) - 1 : 0, s ? Number(s) : 0, false);
 }
+
+function buildStrip(strip, slides, onPick) {
+  return slides.map((slide, i) => {
+    const clone = slide.cloneNode(true);
+    clone.classList.remove("is-current");
+    for (const video of clone.querySelectorAll("video")) video.removeAttribute("autoplay");
+    applyGeometry(clone);
+    applySteps(clone, Infinity);
+    renderMath(clone);
+    const thumb = document.createElement("button");
+    thumb.className = "pv-thumb";
+    thumb.title = `Go to slide ${i + 1}`;
+    thumb.append(clone);
+    thumb.insertAdjacentHTML("beforeend", `<span class="pv-thumb-n">${i + 1}</span>`);
+    thumb.onmousedown = (e) => e.preventDefault();
+    thumb.onclick = () => onPick(i);
+    strip.append(thumb);
+    return thumb;
+  });
+}

keyframes-0.2.0/src/keyframes/static/runtime/runtime.css

@@ -0,0 +1,185 @@
+html, body {
+  margin: 0;
+  height: 100%;
+  overflow: hidden;
+  background: #111;
+}
+
+.keyframes-deck {
+  position: fixed;
+  inset: 0;
+}
+
+.keyframes-slide {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: var(--keyframes-w);
+  height: var(--keyframes-h);
+  transform: translate(-50%, -50%) scale(var(--keyframes-scale, 1));
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.keyframes-slide.is-current {
+  visibility: visible;
+  pointer-events: auto;
+}
+
+.keyframes-slide > section {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+[data-block] {
+  box-sizing: border-box;
+}
+
+[data-block][data-x] {
+  position: absolute;
+}
+
+[data-step] {
+  transition: opacity 0.35s ease;
+}
+
+.keyframes-step-hidden {
+  opacity: 0 !important;
+  visibility: hidden;
+}
+
+aside.notes {
+  display: none !important;
+}
+
+.keyframes-blackout .keyframes-slide.is-current {
+  visibility: hidden;
+}
+
+.keyframes-laser {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+  pointer-events: none;
+}
+
+html.keyframes-lasing,
+html.keyframes-lasing * {
+  cursor: none !important;
+}
+
+.keyframes-menu {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  z-index: 1001;
+  padding: 20px;
+  font: 14px/1.2 system-ui, sans-serif;
+}
+
+.keyframes-menu-toggle {
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: rgba(32, 33, 36, 0.85);
+  color: #e8e8e8;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.keyframes-menu-toggle svg {
+  width: 20px;
+  height: 20px;
+  fill: currentColor;
+}
+
+.keyframes-menu:hover .keyframes-menu-toggle,
+.keyframes-menu.is-open .keyframes-menu-toggle {
+  opacity: 1;
+}
+
+.keyframes-menu-list {
+  margin-bottom: 8px;
+  padding: 6px;
+  min-width: 220px;
+  border-radius: 10px;
+  background: rgba(32, 33, 36, 0.95);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+}
+
+.keyframes-menu-list[hidden] {
+  display: none;
+}
+
+.keyframes-menu-list button {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 8px 10px;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  color: #e8e8e8;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.keyframes-menu-list button:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.keyframes-menu-check {
+  width: 14px;
+}
+
+.keyframes-menu-list button.is-on .keyframes-menu-check::before {
+  content: "✓";
+}
+
+.keyframes-editing .keyframes-menu,
+.keyframes-editing .keyframes-laser {
+  display: none;
+}
+
+.keyframes-error {
+  position: absolute;
+  inset: 0;
+  overflow: auto;
+  padding: 16px;
+  background: #fff0f0;
+  color: #a00;
+  font: 14px/1.4 ui-monospace, Menlo, monospace;
+  white-space: pre-wrap;
+  border: 2px solid #e55;
+  box-sizing: border-box;
+}
+
+html.keyframes-print, html.keyframes-print body {
+  background: transparent;
+}
+
+html.keyframes-print .keyframes-slide {
+  left: 0;
+  top: 0;
+  transform: none;
+}
+
+html.keyframes-print [data-step] {
+  transition: none;
+}
+
+@page {
+  margin: 0;
+}

{keyframes-0.1.0 → keyframes-0.2.0}/src/keyframes/static/runtime/runtime.js

@@ -1,3 +1,4 @@
+import { createLaser, createMenu } from "./controls.js";
 import { renderMath } from "./math.js";
 import { applySteps, maxStep } from "./steps.js";
 
@@ -68,7 +69,11 @@ class Deck extends EventTarget {
     this.fit();
     new ResizeObserver(() => this.fit()).observe(document.querySelector(".keyframes-deck"));
     window.addEventListener("hashchange", () => this.goToHash());
-    if (!params.has("embed")) document.addEventListener("keydown", (e) => this.onKey(e));
+    if (!params.has("embed")) {
+      document.addEventListener("keydown", (e) => this.onKey(e));
+      this.laser = createLaser(this);
+      createMenu(this);
+    }
     this.channel.onmessage = ({ data }) => {
       if (data.type === "nav") this.goTo(data.index, data.step, { broadcast: false });
     };
@@ -158,9 +163,10 @@ class Deck extends EventTarget {
       PageUp: () => this.prev(),
       Home: () => this.goTo(0),
       End: () => this.goTo(this.slides.length - 1),
-      f: () => document.documentElement.requestFullscreen?.(),
-      b: () => document.body.classList.toggle("keyframes-blackout"),
-      s: () => window.open(`?presenter${location.hash}`, "keyframes-presenter", "width=1400,height=850"),
+      f: () => this.toggleFullscreen(),
+      b: () => this.toggleBlackout(),
+      s: () => this.openPresenter(),
+      l: () => this.laser.toggle(),
     };
     const action = actions[e.key];
     if (action) {
@@ -169,6 +175,19 @@ class Deck extends EventTarget {
     }
   }
 
+  toggleFullscreen() {
+    if (document.fullscreenElement) document.exitFullscreen();
+    else document.documentElement.requestFullscreen?.();
+  }
+
+  toggleBlackout() {
+    document.body.classList.toggle("keyframes-blackout");
+  }
+
+  openPresenter() {
+    window.open(`?presenter${location.hash}`, "keyframes-presenter", "width=1400,height=850");
+  }
+
   async replaceSlide(name, html) {
     const old = this.slides.find((s) => s.dataset.slide === name);
     if (!old) return location.reload();

keyframes-0.1.0/src/keyframes/static/runtime/runtime.css

@@ -1,91 +0,0 @@
-html, body {
-  margin: 0;
-  height: 100%;
-  overflow: hidden;
-  background: #111;
-}
-
-.keyframes-deck {
-  position: fixed;
-  inset: 0;
-}
-
-.keyframes-slide {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  width: var(--keyframes-w);
-  height: var(--keyframes-h);
-  transform: translate(-50%, -50%) scale(var(--keyframes-scale, 1));
-  visibility: hidden;
-  pointer-events: none;
-}
-
-.keyframes-slide.is-current {
-  visibility: visible;
-  pointer-events: auto;
-}
-
-.keyframes-slide > section {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  box-sizing: border-box;
-}
-
-[data-block] {
-  box-sizing: border-box;
-}
-
-[data-block][data-x] {
-  position: absolute;
-}
-
-[data-step] {
-  transition: opacity 0.35s ease;
-}
-
-.keyframes-step-hidden {
-  opacity: 0 !important;
-  visibility: hidden;
-}
-
-aside.notes {
-  display: none !important;
-}
-
-.keyframes-blackout .keyframes-slide.is-current {
-  visibility: hidden;
-}
-
-.keyframes-error {
-  position: absolute;
-  inset: 0;
-  overflow: auto;
-  padding: 16px;
-  background: #fff0f0;
-  color: #a00;
-  font: 14px/1.4 ui-monospace, Menlo, monospace;
-  white-space: pre-wrap;
-  border: 2px solid #e55;
-  box-sizing: border-box;
-}
-
-html.keyframes-print, html.keyframes-print body {
-  background: transparent;
-}
-
-html.keyframes-print .keyframes-slide {
-  left: 0;
-  top: 0;
-  transform: none;
-}
-
-html.keyframes-print [data-step] {
-  transition: none;
-}
-
-@page {
-  margin: 0;
-}