@velumo/theme-show-engine 0.1.0-beta.0

package/src/index.ts

@@ -0,0 +1,551 @@
+import type { Theme } from "@velumo/core";
+import { showEngineFonts } from "./fonts.generated.js";
+
+export const showEngineThemeId = "show-engine" as const;
+export type ShowEngineThemeId = typeof showEngineThemeId;
+
+/**
+ * Theme-root-scoped CSS for what tokens cannot express, injected by the DOM
+ * renderer at mount (deduped per theme id). The palette flows through
+ * `--velumo-*` variables (emitted by the renderer and consumed by the
+ * default-theme CSS rules); this string adds what those cannot: it pins the
+ * deck-root background to the theme background, lays an additive ambient glow
+ * over each slide/spatial viewport, and raises layout/world content above it.
+ * Every rule is scoped to `[data-velumo-theme="show-engine"]` so it stays
+ * inert if multiple themes coexist on one page. The fonts the typography tokens
+ * name (Bebas Neue / Inter / JetBrains Mono) ship as self-contained woff2
+ * data-URIs in `theme.fonts` (see `fonts.generated.ts`); the DOM renderer
+ * compiles them to `@font-face` and injects them on every surface.
+ */
+export const showEngineThemeCss = `
+[data-velumo-renderer="dom"][data-velumo-theme="show-engine"],
+[data-velumo-renderer="dom"] [data-velumo-theme="show-engine"] {
+  background: var(--velumo-color-background, #020203);
+}
+
+[data-velumo-renderer="dom"][data-velumo-theme="show-engine"] [data-velumo-slide-id]::before,
+[data-velumo-renderer="dom"] [data-velumo-theme="show-engine"] [data-velumo-slide-id]::before,
+[data-velumo-renderer="dom"][data-velumo-theme="show-engine"] [data-velumo-spatial="viewport"]::before,
+[data-velumo-renderer="dom"] [data-velumo-theme="show-engine"] [data-velumo-spatial="viewport"]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  opacity: var(--velumo-ambient-strength, 0.55);
+  background:
+    radial-gradient(72% 56% at 50% 34%, rgba(255, 209, 102, 0.10), transparent 62%),
+    radial-gradient(90% 72% at 80% 90%, rgba(46, 232, 255, 0.07), transparent 60%);
+  mix-blend-mode: screen;
+}
+
+[data-velumo-renderer="dom"][data-velumo-theme="show-engine"] [data-velumo-layout-root],
+[data-velumo-renderer="dom"] [data-velumo-theme="show-engine"] [data-velumo-layout-root],
+[data-velumo-renderer="dom"][data-velumo-theme="show-engine"] [data-velumo-spatial="world"],
+[data-velumo-renderer="dom"] [data-velumo-theme="show-engine"] [data-velumo-spatial="world"] {
+  position: relative;
+  z-index: 1;
+}
+
+/* Interactive demo controls (Ward 044+). Scoped to the show-engine theme.
+   Determinism slide: two columns — content left, interactive panel right. */
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="determinism"] [data-velumo-layout-root] {
+  max-width: 52cqw;
+}
+[data-velumo-theme="show-engine"] [data-velumo-demo="stepper"] {
+  position: absolute;
+  right: clamp(2.5rem, 6cqw, 5rem);
+  bottom: clamp(7.5rem, 19cqh, 12.5rem);
+  z-index: 3;
+  width: min(40cqw, 27rem);
+  display: flex;
+  flex-direction: column;
+  gap: 0.9rem;
+  padding: 1.5rem 1.6rem 1.7rem;
+  border-radius: 1.1rem;
+  background: rgba(4, 8, 10, 0.66);
+  border: 1px solid rgba(85, 255, 153, 0.3);
+  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+}
+[data-velumo-theme="show-engine"] [data-velumo-demo="stepper"] .demo-stepper-head {
+  display: flex;
+  align-items: baseline;
+  gap: 0.6rem;
+}
+[data-velumo-theme="show-engine"] [data-velumo-demo="stepper"] .demo-stepper-frame-label {
+  color: var(--velumo-color-green, #55ff99);
+  font-size: clamp(1.4rem, 3cqw, 2.1rem);
+}
+[data-velumo-theme="show-engine"] [data-velumo-demo="stepper"] .demo-stepper-frame {
+  color: var(--velumo-color-green, #55ff99);
+  font-size: clamp(1.9rem, 4.4cqw, 3rem);
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+[data-velumo-theme="show-engine"] [data-velumo-demo="stepper"] .demo-stepper-ms {
+  margin-left: auto;
+  color: var(--velumo-color-muted, rgba(255, 247, 232, 0.55));
+  font-size: clamp(0.85rem, 1.8cqw, 1.1rem);
+  font-variant-numeric: tabular-nums;
+}
+[data-velumo-theme="show-engine"] [data-velumo-demo="stepper"] .demo-stepper-ms::after {
+  content: " ms";
+}
+[data-velumo-theme="show-engine"] [data-velumo-demo="stepper"] .demo-stepper-track {
+  height: 0.4rem;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+  overflow: hidden;
+}
+[data-velumo-theme="show-engine"] [data-velumo-demo="stepper"] .demo-stepper-bar {
+  height: 100%;
+  width: 0%;
+  background: linear-gradient(90deg, #2ee8ff, #55ff99);
+  transition: width 0.12s linear;
+}
+[data-velumo-theme="show-engine"] [data-velumo-demo="stepper"] .demo-stepper-eased {
+  color: var(--velumo-color-muted, rgba(255, 247, 232, 0.55));
+  font-size: clamp(0.85rem, 1.8cqw, 1.05rem);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Positioning is scoped to the determinism slide so other slides' control
+   buttons (Wards 045/046) are not forced absolute. The button APPEARANCE below
+   stays theme-global for a consistent look. */
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="determinism"] [data-velumo-layer-type="control.button"] {
+  position: absolute;
+  bottom: clamp(2.75rem, 7cqh, 4.5rem);
+  z-index: 3;
+}
+[data-velumo-theme="show-engine"] [data-velumo-layer-id="demo-advance"] {
+  right: clamp(9.5rem, 20cqw, 15rem);
+}
+[data-velumo-theme="show-engine"] [data-velumo-layer-id="demo-reset"] {
+  right: clamp(2.5rem, 6cqw, 5rem);
+}
+[data-velumo-theme="show-engine"] [data-velumo-control="button"] {
+  cursor: pointer;
+  font-family: "Bebas Neue", Impact, sans-serif;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  font-size: clamp(1rem, 2.2cqw, 1.35rem);
+  padding: 0.55rem 1.3rem;
+  border-radius: 0.6rem;
+  border: 1px solid rgba(85, 255, 153, 0.4);
+  background: rgba(85, 255, 153, 0.14);
+  color: #eafff2;
+}
+[data-velumo-theme="show-engine"] [data-velumo-control-variant="ghost"] {
+  background: transparent;
+  border-color: rgba(255, 255, 255, 0.22);
+  color: var(--velumo-color-muted, rgba(255, 247, 232, 0.55));
+}
+[data-velumo-theme="show-engine"] [data-velumo-control="button"]:hover {
+  filter: brightness(1.2);
+}
+
+/* Spatial slide (Ward 045): a framed camera world + a row of camera.seek buttons. */
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="spatial"] {
+  /* world-inset-x reuses the SAME token (with the SAME fallback) the renderer's
+     own slide padding reads (default-theme.ts), so world's left/right edges are
+     always flush with the slide's standard content margin, never a coincidence. */
+  --spatial-world-inset-x: var(--velumo-margin-frame-x, clamp(4rem, 8cqw, 8.5rem));
+  --spatial-world-inset-top: clamp(13rem, 44cqh, 26rem);
+  --spatial-world-inset-bottom: clamp(6rem, 14cqh, 9.5rem);
+  /* Single source for layout-root's own max-width, so the canvas overlay's
+     right formula below can never drift from it if this is retuned. */
+  --spatial-layout-max-width: 60cqw;
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="spatial"] [data-velumo-layout-root] {
+  max-width: var(--spatial-layout-max-width);
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="spatial"] [data-velumo-demo="camera-world"] {
+  position: absolute;
+  left: var(--spatial-world-inset-x);
+  right: var(--spatial-world-inset-x);
+  top: var(--spatial-world-inset-top);
+  bottom: var(--spatial-world-inset-bottom);
+  z-index: 2;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 1rem;
+  overflow: hidden;
+  background: rgba(4, 8, 12, 0.4);
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="spatial"] [data-velumo-layout="canvas"] {
+  /* The renderer sets position:relative inline on every canvas element
+     (packages/renderer-dom layout-renderer.ts); only !important can override
+     an inline style, so it is scoped to this single property.
+     Unlike [data-velumo-demo="camera-world"] (a LAYER, positioned relative
+     to the slide root), this canvas is part of layout, so its containing
+     block is [data-velumo-layout-root] (position:relative; see the ambient
+     ::before stacking rule above) -- a DIFFERENT box, inset from the slide by
+     the renderer's own --velumo-margin-frame(-x) padding and narrowed to
+     max-width:60cqw. left:0 lines up exactly with camera-world's left because
+     --spatial-world-inset-x reuses that same padding token. top/bottom/right
+     are re-derived (world's inset MINUS layout-root's own offset on that side)
+     so the canvas box still lands exactly on camera-world's box despite the
+     different containing block -- not copy-pasted clamp values that would
+     silently drift out of alignment. */
+  /* The renderer also sets width:100%/height:100% inline, which over-
+     constrains an absolutely positioned box with both left+right (or
+     top+bottom) set -- the browser then honors the explicit width/height and
+     silently ignores right/bottom. auto releases that so left+right and
+     top+bottom actually determine the box, matching camera-world's size. */
+  position: absolute !important;
+  width: auto !important;
+  height: auto !important;
+  left: 0;
+  right: calc(
+    2 * var(--spatial-world-inset-x) - (100cqw - var(--spatial-layout-max-width))
+  );
+  top: calc(
+    var(--spatial-world-inset-top) -
+      var(--velumo-margin-frame, clamp(2.5rem, 4.5cqh, 4rem))
+  );
+  bottom: calc(
+    var(--spatial-world-inset-bottom) -
+      var(--velumo-margin-frame, clamp(2.5rem, 4.5cqh, 4rem))
+  );
+  pointer-events: none;
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="spatial"] [data-velumo-demo="camera-view"] {
+  position: absolute;
+  inset: 0;
+  transform-origin: 0 0;
+  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="spatial"] .demo-camera-grid {
+  position: absolute;
+  inset: 0;
+  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+  background-size: 8% 12%;
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="spatial"] .demo-camera-card {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  width: 24%;
+  padding: 0.7rem 0.9rem;
+  border-radius: 0.7rem;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  background: rgba(4, 8, 12, 0.78);
+  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="spatial"] .demo-camera-card[data-tone="accent"] {
+  border-color: rgba(255, 209, 102, 0.55);
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="spatial"] .demo-camera-card[data-tone="cyan"] {
+  border-color: rgba(46, 232, 255, 0.55);
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="spatial"] .demo-camera-card[data-tone="magenta"] {
+  border-color: rgba(255, 61, 127, 0.55);
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="spatial"] .demo-camera-card-title {
+  font-family: "Bebas Neue", Impact, sans-serif;
+  font-size: clamp(1.1rem, 2.4cqw, 1.7rem);
+  letter-spacing: 0.04em;
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="spatial"] .demo-camera-card[data-tone="accent"] .demo-camera-card-title {
+  color: var(--velumo-color-accent, #ffd166);
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="spatial"] .demo-camera-card[data-tone="cyan"] .demo-camera-card-title {
+  color: var(--velumo-color-cyan, #2ee8ff);
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="spatial"] .demo-camera-card[data-tone="magenta"] .demo-camera-card-title {
+  color: var(--velumo-color-magenta, #ff3d7f);
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="spatial"] .demo-camera-card-sub {
+  color: var(--velumo-color-muted, rgba(255, 247, 232, 0.55));
+  font-size: clamp(0.7rem, 1.4cqw, 0.95rem);
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="spatial"] [data-velumo-layer-type="control.button"] {
+  position: absolute;
+  bottom: clamp(2rem, 5cqh, 3.5rem);
+  z-index: 3;
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="spatial"] [data-velumo-control="button"] {
+  min-width: 5.5rem;
+  text-align: center;
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="spatial"] [data-velumo-layer-id="camera-wide"] {
+  left: clamp(4rem, 8cqw, 8.5rem);
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="spatial"] [data-velumo-layer-id="camera-intro"] {
+  left: calc(clamp(4rem, 8cqw, 8.5rem) + 7rem);
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="spatial"] [data-velumo-layer-id="camera-data"] {
+  left: calc(clamp(4rem, 8cqw, 8.5rem) + 14rem);
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="spatial"] [data-velumo-layer-id="camera-finale"] {
+  left: calc(clamp(4rem, 8cqw, 8.5rem) + 21rem);
+}
+
+/* Fidelity slide (Ward 046): code card left, mode panel right, SHOW treatment
+   keyed on data-velumo-demo-mode. All rules slide-scoped. */
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="fidelity"] [data-velumo-layout-root] {
+  max-width: 50cqw;
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="fidelity"] [data-velumo-demo="fidelity"] {
+  position: absolute;
+  right: clamp(2.5rem, 6cqw, 5rem);
+  top: 50%;
+  transform: translateY(-44%);
+  z-index: 3;
+  width: min(42cqw, 30rem);
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.6rem 1.8rem 1.9rem;
+  border-radius: 1.1rem;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(4, 8, 12, 0.5);
+  transition: border-color 0.35s, box-shadow 0.35s, background 0.35s;
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="fidelity"] .demo-fidelity-moderow {
+  display: flex;
+  gap: 0.4rem;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: clamp(0.72rem, 1.5cqw, 0.92rem);
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--velumo-color-muted, rgba(255, 247, 232, 0.55));
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="fidelity"] .demo-fidelity-mode {
+  color: var(--velumo-color-cyan, #2ee8ff);
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="fidelity"] .demo-fidelity-headline {
+  font-family: "Bebas Neue", Impact, sans-serif;
+  font-size: clamp(1.8rem, 4.6cqw, 3.1rem);
+  letter-spacing: 0.02em;
+  color: var(--velumo-color-foreground, #fff7e8);
+  transition: color 0.35s, text-shadow 0.35s;
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="fidelity"] .demo-fidelity-pills {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="fidelity"] .demo-fidelity-pill {
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: clamp(0.68rem, 1.4cqw, 0.88rem);
+  padding: 0.3rem 0.7rem;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  color: var(--velumo-color-muted, rgba(255, 247, 232, 0.55));
+  opacity: 0.5;
+  transition: opacity 0.35s, border-color 0.35s, color 0.35s;
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="fidelity"] .demo-fidelity-beams {
+  position: absolute;
+  inset: -40% -10% auto -10%;
+  height: 80%;
+  pointer-events: none;
+  opacity: 0;
+  background: linear-gradient(115deg, transparent 30%, rgba(255, 209, 102, 0.14) 48%, rgba(46, 232, 255, 0.12) 56%, transparent 74%);
+  transition: opacity 0.5s;
+}
+/* SHOW treatment */
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="fidelity"] [data-velumo-demo-mode="SHOW"] {
+  border-color: rgba(255, 209, 102, 0.5);
+  box-shadow: 0 0 60px rgba(255, 209, 102, 0.18);
+  background: rgba(8, 8, 6, 0.6);
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="fidelity"] [data-velumo-demo-mode="SHOW"] .demo-fidelity-mode {
+  color: var(--velumo-color-accent, #ffd166);
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="fidelity"] [data-velumo-demo-mode="SHOW"] .demo-fidelity-headline {
+  color: var(--velumo-color-accent, #ffd166);
+  text-shadow: 0 0 26px rgba(255, 209, 102, 0.6);
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="fidelity"] [data-velumo-demo-mode="SHOW"] .demo-fidelity-pill {
+  opacity: 1;
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="fidelity"] [data-velumo-demo-mode="SHOW"] .demo-fidelity-pill[data-tone="magenta"] {
+  border-color: rgba(255, 61, 127, 0.6);
+  color: #ff9ec0;
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="fidelity"] [data-velumo-demo-mode="SHOW"] .demo-fidelity-pill[data-tone="cyan"] {
+  border-color: rgba(46, 232, 255, 0.6);
+  color: #9becff;
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="fidelity"] [data-velumo-demo-mode="SHOW"] .demo-fidelity-pill[data-tone="accent"] {
+  border-color: rgba(255, 209, 102, 0.6);
+  color: #ffe4a3;
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="fidelity"] [data-velumo-demo-mode="SHOW"] .demo-fidelity-beams {
+  opacity: 0.55;
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="fidelity"] [data-velumo-layer-id="fidelity-toggle"] {
+  position: absolute;
+  right: clamp(2.5rem, 6cqw, 5rem);
+  bottom: clamp(2rem, 5cqh, 3.5rem);
+  z-index: 4;
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="one-source"] [data-velumo-layout-root] {
+  justify-content: flex-start;
+  gap: clamp(0.5rem, 1.5cqh, 1rem);
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="one-source"] [data-velumo-element="heading"][data-velumo-heading-size="display"] {
+  font-size: clamp(2.5rem, 7cqw, 5.25rem);
+  line-height: 0.92;
+  margin: 0;
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="one-source"] [data-velumo-frame-tone="accent"] {
+  flex: none;
+  align-self: center;
+  padding: 0.9rem 1.4rem;
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="one-source"] [data-velumo-layout="stack"] > [data-velumo-layout="grid"] {
+  flex: 1;
+  min-height: 0;
+  align-items: stretch;
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="one-source"] [data-velumo-layout="frame"][data-velumo-frame-tone] {
+  gap: 0.75rem;
+  justify-content: flex-start;
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="one-source"] [data-velumo-layout="frame"][data-velumo-frame-tone] > [data-velumo-layout="frame"] {
+  flex: 1;
+  min-height: 0;
+  justify-content: center;
+  gap: 0.7rem;
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="one-source"] [data-velumo-canvas-item] {
+  transform: translateY(-50%);
+}
+@media (prefers-reduced-motion: no-preference) {
+  @keyframes velumo-one-source-playhead {
+    from { left: 6%; }
+    to { left: 76%; }
+  }
+  [data-velumo-theme="show-engine"] [data-velumo-slide-id="one-source"] [data-velumo-frame-tone="magenta"] [data-velumo-canvas-item]:has([data-velumo-rule-tone="cyan"]) {
+    animation: velumo-one-source-playhead 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
+  }
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="one-source"] [data-velumo-frame-tone="green"] [data-velumo-layout="grid"] {
+  flex: 1;
+  min-height: 0;
+  gap: 0.5rem;
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="authoring"] [data-velumo-layout-root] {
+  justify-content: flex-start;
+  gap: clamp(1rem, 2.5cqh, 1.75rem);
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="authoring"] [data-velumo-element="heading"][data-velumo-heading-size="display"] {
+  font-size: clamp(2rem, 6cqw, 4.75rem);
+  line-height: 0.95;
+  margin: 0;
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="authoring"] pre[data-velumo-element="code"] {
+  font-size: 0.82rem;
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="authoring"] [data-velumo-layout="grid"] {
+  align-items: start;
+  gap: 1.5rem;
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="authoring"] [data-velumo-element="badge"] {
+  width: 100%;
+  border-radius: 0.7rem;
+  justify-content: center;
+  padding: 0.75em 1em;
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="closer"] [data-velumo-element="heading"][data-velumo-heading-size="hero"] {
+  max-width: none;
+  margin: 0;
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="closer"] [data-velumo-element="heading"][data-velumo-heading-size="hero"][data-velumo-text-tone="muted"] {
+  font-size: clamp(2.25rem, 7.8cqw, 6.5rem);
+  line-height: 0.9;
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="closer"] [data-velumo-element="heading"][data-velumo-heading-size="hero"][data-velumo-text-tone="accent"] {
+  font-size: clamp(2.75rem, 9.6cqw, 8rem);
+  line-height: 0.9;
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="closer"] [data-velumo-element="badge"] {
+  font-size: clamp(0.95rem, 1.6cqw, 1.4rem);
+  padding: 0.7em 1.2em;
+}
+[data-velumo-theme="show-engine"] [data-velumo-slide-id="closer"] [data-velumo-element="text"] {
+  font-size: clamp(0.85rem, 1.2cqw, 1.1rem);
+  letter-spacing: 0.22em;
+}
+`.trim();
+
+export const showEngineTheme: Theme = {
+  id: showEngineThemeId,
+  css: showEngineThemeCss,
+  fonts: showEngineFonts,
+  tokens: {
+    colors: {
+      background: "#020203",
+      foreground: "#fff7e8",
+      muted: "rgba(255, 247, 232, 0.55)",
+      accent: "#ffd166",
+      danger: "#ff3048",
+      magenta: "#ff3d7f",
+      cyan: "#2ee8ff",
+      purple: "#8d5cff",
+      green: "#55ff99",
+    },
+    typography: {
+      heading: {
+        fontFamily: '"Bebas Neue", Impact, sans-serif',
+        fontSize: "clamp(2.75rem, 6.5cqw, 6rem)",
+        lineHeight: 0.95,
+        fontWeight: 700,
+        letterSpacing: "0.02em",
+      },
+      body: {
+        fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif",
+        fontSize: "clamp(1.05rem, 1.7cqw, 1.35rem)",
+        lineHeight: 1.55,
+        fontWeight: 450,
+      },
+      caption: {
+        fontFamily: '"JetBrains Mono", ui-monospace, SFMono-Regular, monospace',
+        fontSize: "0.9rem",
+        lineHeight: 1.45,
+        fontWeight: 500,
+        letterSpacing: "0.18em",
+      },
+    },
+    spacing: {
+      xs: "0.375rem",
+      sm: "0.75rem",
+      md: "1.25rem",
+      lg: "2rem",
+      xl: "3rem",
+    },
+    radii: {
+      card: "1rem",
+      pill: "999px",
+    },
+    shadows: {
+      card: "0 22px 80px rgba(0, 0, 0, 0.5)",
+    },
+    motion: {
+      quick: { duration: "160ms", easing: "ease-out" },
+      standard: {
+        duration: "1100ms",
+        easing: "cubic-bezier(0.15, 0.8, 0.25, 1)",
+      },
+    },
+    surfaces: {
+      default: "#0a0810",
+      muted: "#11101a",
+      card: "rgba(9, 8, 13, 0.62)",
+      accent: "rgba(255, 209, 102, 0.12)",
+      inverse: "#fff7e8",
+      danger: "rgba(255, 48, 72, 0.14)",
+    },
+    text: {
+      default: "#fff7e8",
+      muted: "rgba(255, 247, 232, 0.55)",
+      accent: "#ffd166",
+      inverse: "#020203",
+      danger: "#ff6b6b",
+    },
+  },
+};

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "tsBuildInfoFile": "dist/tsconfig.tsbuildinfo"
+  },
+  "include": ["src/**/*.ts"],
+  "references": [{ "path": "../core" }]
+}