@miragon/slidev-toolkit 1.0.0

package/components/BrandMeshBackground.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+/**
+ * BrandMeshBackground — animierter WebGL2 Mesh-Gradient-Hintergrund (Miragon CI).
+ *
+ * HEILIG: Farbstops und Parameter stammen 1:1 aus dem bestehenden
+ * @miragon/slidev-theme. Nicht ohne Rücksprache ändern.
+ *
+ * Verwendung: liegt als unterste Ebene (z-index 0) in den animierten
+ * Layouts (cover, closing). pointer-events:none, damit Klicks durchgehen.
+ * Fallback-Navy #0d0d2b für den ersten Frame / kein WebGL.
+ */
+import { onMounted, onBeforeUnmount, ref } from 'vue'
+import {
+  ShaderMount,
+  meshGradientFragmentShader,
+  getShaderColorFromString,
+  defaultObjectSizing,
+  ShaderFitOptions,
+} from '@paper-design/shaders'
+
+// --- Heilige Markenparameter (DO NOT CHANGE) -------------------------------
+const COLORS = ['#335DE5', '#1a1a4e', '#00E676', '#335DE5', '#0d0d2b', '#00C853']
+const DISTORTION = 1      // Verformung der Farbfelder
+const SWIRL = 0.5         // Verwirbelung der Übergänge
+const SPEED = 0.6         // Animationsgeschwindigkeit
+// ---------------------------------------------------------------------------
+
+const host = ref<HTMLDivElement | null>(null)
+let mount: ShaderMount | null = null
+
+onMounted(() => {
+  if (!host.value) return
+  try {
+    // Sizing/Fit-Uniforms explizit übergeben (sonst nutzt der Shader Default-
+    // Werte, die je nach Slide-Format zu inkonsistentem Crop/Scale führen).
+    const uniforms = {
+      u_colors: COLORS.map((c) => getShaderColorFromString(c)),
+      u_colorsCount: COLORS.length,
+      u_distortion: DISTORTION,
+      u_swirl: SWIRL,
+      u_grainMixer: 0,
+      u_grainOverlay: 0,
+      u_fit: ShaderFitOptions[defaultObjectSizing.fit],
+      u_rotation: defaultObjectSizing.rotation,
+      u_scale: defaultObjectSizing.scale,
+      u_offsetX: defaultObjectSizing.offsetX,
+      u_offsetY: defaultObjectSizing.offsetY,
+      u_originX: defaultObjectSizing.originX,
+      u_originY: defaultObjectSizing.originY,
+      u_worldWidth: defaultObjectSizing.worldWidth,
+      u_worldHeight: defaultObjectSizing.worldHeight,
+    }
+    // Performance (rührt die heiligen COLORS/DISTORTION/SWIRL/SPEED NICHT an):
+    // die Library-Defaults erzwingen minPixelRatio=2 und cappen bei 1920*1080*4
+    // (~8.3M) Pixeln, d. h. auf einem Retina-Display läuft dieser teure Mesh-
+    // Gradient-Fragment-Shader über ~8.3M Pixel pro Frame und ruckelt. Ein weicher
+    // Verlauf braucht keinen 4K-Backing-Store: Supersampling weg (minPixelRatio 1)
+    // und den Render auf ~0.9M Pixel cappen. CSS skaliert das Canvas hoch, der Blur
+    // kaschiert es.
+    const MIN_PIXEL_RATIO = 1
+    const MAX_PIXEL_COUNT = 640 * 360
+    // Reduced-Motion respektieren: auf dem ersten Frame einfrieren (speed 0)
+    // statt zu animieren — kostet ebenfalls nichts.
+    const reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false
+    mount = new ShaderMount(
+      host.value,
+      meshGradientFragmentShader,
+      uniforms,
+      undefined,
+      reduceMotion ? 0 : SPEED,
+      0,
+      MIN_PIXEL_RATIO,
+      MAX_PIXEL_COUNT,
+    )
+    // WebGL läuft: den blurred, dauerhaft animierten CSS-Fallback-Layer abschalten.
+    // Er liegt unsichtbar hinter dem nun opaken Canvas, kostet aber pro Frame
+    // Compositor-Zeit (ein blur(48px)-Layer in doppelter Viewport-Größe), was die
+    // FPS senkt und das Canvas während Slide-Transitions desynchronisiert.
+    host.value.classList.add('webgl-active')
+  } catch (e) {
+    // WebGL nicht verfügbar (z. B. headless) → Fallback-Navy bleibt sichtbar.
+    console.warn('[BrandMeshBackground] WebGL unavailable, falling back to solid navy.', e)
+  }
+})
+
+onBeforeUnmount(() => {
+  mount?.dispose()
+  mount = null
+})
+</script>
+
+<template>
+  <div ref="host" class="mesh-bg" aria-hidden="true"></div>
+</template>
+
+<style scoped>
+.mesh-bg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  background: #0d0d2b; /* Navy-Basis für allerersten Frame */
+  pointer-events: none;
+  z-index: 0;
+  overflow: hidden; /* hält den überdimensionierten Fallback-Layer im Rahmen */
+}
+
+/*
+ * CSS-Fallback (additiv, ändert NICHT die heiligen Shader-Werte):
+ * Animierter Mesh-Verlauf in den Markenfarben. Liegt HINTER dem Canvas.
+ * - WebGL ok  → ShaderMount-Canvas ist opak und überdeckt diesen Layer.
+ * - WebGL fehlt (Browser ohne GPU, `npm run export`/headless) → der Canvas
+ *   bleibt transparent, dieser Layer scheint durch und animiert weiter.
+ * Farben 1:1 aus der Mesh-Palette (Blau/Navy/Grün), kein totes Navy mehr.
+ *
+ * z-index: -2 → liegt HINTER dem Library-Canvas (der bei WebGL-Erfolg per
+ * `@layer paper-shaders` z-index:-1 bekommt). So überdeckt der echte Shader
+ * diesen Fallback; bei WebGL-Ausfall (transparenter/leerer Canvas) scheint er
+ * über der Navy-Basis durch.
+ */
+.mesh-bg::before {
+  content: '';
+  position: absolute;
+  z-index: -2;
+  inset: -50%;
+  background:
+    radial-gradient(38% 38% at 24% 30%, #335DE5 0%, transparent 60%),
+    radial-gradient(34% 34% at 76% 22%, #00E676 0%, transparent 60%),
+    radial-gradient(44% 44% at 70% 76%, #00C853 0%, transparent 60%),
+    radial-gradient(40% 40% at 28% 80%, #1a1a4e 0%, transparent 62%),
+    radial-gradient(55% 55% at 50% 50%, #335DE5 0%, transparent 72%);
+  filter: blur(48px);
+  will-change: transform;
+  animation: mesh-fallback-float 22s ease-in-out infinite alternate;
+}
+
+@keyframes mesh-fallback-float {
+  0%   { transform: translate(-4%, -3%) scale(1.06) rotate(0deg); }
+  50%  { transform: translate(3%, 2%)   scale(1.16) rotate(7deg); }
+  100% { transform: translate(2%, -4%)  scale(1.10) rotate(-6deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mesh-bg::before { animation: none; }
+}
+
+/* WebGL erfolgreich: das opake Shader-Canvas überdeckt den Fallback, also den
+   animierten Blur-Layer ganz weglassen (kein verschwendetes Compositing). */
+.mesh-bg.webgl-active::before {
+  display: none;
+}
+
+/* Canvas-Positionierung der Library NICHT überschreiben (sie setzt position
+   absolute + z-index:-1 via @layer). Nur die Größe absichern. */
+.mesh-bg canvas {
+  width: 100% !important;
+  height: 100% !important;
+}
+</style>

package/components/Card.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+/**
+ * Card — kanonische weiße Brand-Card (Design-System §6).
+ * Hintergrund IMMER weiß, Akzent NUR auf dem Titel. `accent` wählt einen Stop
+ * der blue → teal → green-Progression (§6.3) — dies ist der einzige
+ * sanktionierte Ort für rohe Hex-Werte, hier zentral statt im Deck verstreut.
+ *
+ * Mehrkartige Grids: Titel von links nach rechts entlang der Progression.
+ *   2 Karten: blue, green
+ *   3 Karten: blue, teal, green
+ *   4 Karten: blue, blue-mid, green-deep, green
+ *   <Card title="Deployment" accent="blue">Body …</Card>
+ */
+const props = withDefaults(
+  defineProps<{
+    title?: string
+    accent?: 'blue' | 'blue-mid' | 'teal' | 'green-deep' | 'green-mid' | 'green'
+    padding?: 'compact' | 'standard' | 'generous'
+  }>(),
+  { accent: 'blue', padding: 'standard' },
+)
+
+// Die §6.3-Progressions-Stops. Bewusst lokal: der einzige sanktionierte Hex-Ort.
+const ACCENTS: Record<string, string> = {
+  blue: '#335DE5',
+  'blue-mid': '#2B5ACE',
+  teal: '#1E7A8A',
+  'green-deep': '#0E8E6E',
+  'green-mid': '#00974F',
+  green: '#00C263',
+}
+</script>
+
+<template>
+  <div class="mg-card" :class="`mg-card--${props.padding}`">
+    <h3 v-if="title" class="mg-card__title" :style="{ color: ACCENTS[props.accent] }">{{ title }}</h3>
+    <div class="mg-card__body"><slot /></div>
+  </div>
+</template>
+
+<style scoped>
+.mg-card {
+  border-radius: 0.75rem;
+  border: 1px solid #e5e7eb;
+  background: var(--miragon-white);
+  box-shadow: 0 8px 20px rgba(51, 93, 229, 0.08);
+}
+/* Nur Karten mit Zeichnung (compact) werden zur Flex-Spalte: im Grid stretchen
+   die Karten auf gleiche Höhe, eine abschließende Zeichnung (margin-top:auto)
+   dockt am Kartenboden an und liegt über alle Karten hinweg auf gleicher Höhe.
+   Standard-Karten bleiben normaler Fluss, sonst würde inline <strong> im Body
+   zu eigenen Flex-Items (eigene Zeilen) umbrechen. */
+.mg-card--compact { padding: 1rem; display: flex; flex-direction: column; }
+.mg-card--standard { padding: 1.25rem; }
+.mg-card--generous { padding: 1.5rem; }
+.mg-card__title {
+  margin: 0;
+  font-weight: 700;
+  font-size: 1.05rem;
+  line-height: 1.2;
+}
+.mg-card__body {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.55;
+  color: #4b5563;
+}
+.mg-card--compact .mg-card__body { flex: 1 1 auto; display: flex; flex-direction: column; }
+/* A trailing diagram (<Figure src>) docks at the card bottom, so the image sits at
+   the same position in every card of a stretched grid regardless of text length. */
+.mg-card--compact .mg-card__body :deep(.mg-figure) { margin-top: auto; }
+</style>

package/components/CardGrid.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+/**
+ * CardGrid — gleichmaessiges Spalten-Raster fuer Karten/Figuren (Design-System §6).
+ * Ersetzt das rohe `<div class="grid grid-cols-N gap-…">` im Markdown, damit Folien
+ * keine Utility-Klassen tragen: nur semantische Tags. Karten im Grid strecken auf
+ * gleiche Hoehe (align: stretch). `cols` setzt die Spaltenzahl, `gap` den Abstand.
+ *
+ *   <CardGrid cols="3">
+ *     <Card title="…" accent="blue">…</Card>
+ *     <Card title="…" accent="teal">…</Card>
+ *     <Card title="…" accent="green">…</Card>
+ *   </CardGrid>
+ */
+const props = withDefaults(
+  defineProps<{
+    cols?: number | string
+    gap?: 'compact' | 'standard' | 'generous'
+  }>(),
+  { cols: 3, gap: 'standard' },
+)
+
+const GAPS: Record<string, string> = {
+  compact: '1rem',
+  standard: '1.5rem',
+  generous: '2rem',
+}
+</script>
+
+<template>
+  <div
+    class="mg-card-grid"
+    :style="{ '--mg-cols': String(props.cols), '--mg-gap': GAPS[props.gap] }"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.mg-card-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--mg-cols), minmax(0, 1fr));
+  gap: var(--mg-gap);
+  align-items: stretch;
+  margin-top: 0.5rem;
+}
+</style>

package/components/Figure.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+/**
+ * Figure — beschriftete Diagramm-Spalte: Titel oben, Grafik (Slot) mittig,
+ * Caption unten. Ersetzt die handgestylten text-center-<div>/<p>-Paare
+ * (z. B. der VM/Container/Pod-Vergleich).
+ *   <Figure title="Container" caption="Container teilen sich den **Host-Kernel**.">
+ *   <svg …></svg>
+ *   </Figure>
+ * Die Caption versteht Inline-Markdown: **fett**, *kursiv*, `code`.
+ *
+ * Statt eines Slot-Visuals kann auch ein Public-Asset per `src` eingebunden
+ * werden (z. B. eine .excalidraw.png). Der Pfad wird base-aware über
+ * BASE_URL aufgelöst — KEIN Markdown-Bild verwenden: Slidev kompiliert ein
+ * `![](…)` in einen Vite-Import, der bei Public-Assets den Build bricht.
+ *   <Figure src="images/foo.excalidraw.png" alt="…" caption="…"></Figure>
+ */
+const props = withDefaults(
+  defineProps<{
+    title?: string
+    caption?: string
+    src?: string
+    alt?: string
+    maxHeight?: string
+  }>(),
+  { maxHeight: '340px' },
+)
+
+// Assets werden unter BASE_URL serviert (z. B. "/" lokal, "/<repo>/" auf GitHub
+// Pages) — etwa Kapitel-Ressourcen unter /resources/<chapter>/<file>. Slash normalisieren.
+const resolvedSrc = computed(() => {
+  if (!props.src) return ''
+  const base = import.meta.env.BASE_URL.replace(/\/$/, '')
+  return `${base}/${props.src.replace(/^\//, '')}`
+})
+
+// HTML-sicher: erst escapen, dann nur die erlaubten Inline-Marker zu Tags machen.
+const captionHtml = computed(() => {
+  if (!props.caption) return ''
+  const escaped = props.caption
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+  return escaped
+    .replace(/`([^`]+)`/g, '<code>$1</code>')
+    .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+    .replace(/(^|[^*])\*([^*]+)\*/g, '$1<em>$2</em>')
+})
+</script>
+
+<template>
+  <div class="mg-figure">
+    <div v-if="title" class="mg-figure__title">{{ title }}</div>
+    <div class="mg-figure__media">
+      <img v-if="resolvedSrc" :src="resolvedSrc" :alt="alt" :style="{ maxHeight }" />
+      <slot v-else />
+    </div>
+    <div v-if="caption" class="mg-figure__caption" v-html="captionHtml"></div>
+  </div>
+</template>
+
+<style scoped>
+.mg-figure {
+  display: flex;
+  flex-direction: column;
+}
+.mg-figure__title {
+  text-align: center;
+  font-weight: 700;
+  font-size: 1rem;
+  color: var(--miragon-text-primary);
+  margin-bottom: 0.5rem;
+}
+.mg-figure__media {
+  display: flex;
+  justify-content: center;
+}
+.mg-figure__media img {
+  max-width: 100%;
+  height: auto;
+}
+.mg-figure__caption {
+  text-align: center;
+  color: var(--miragon-text-secondary);
+  line-height: 1.4;
+  font-size: 0.8rem;
+  margin-top: 1.5rem;
+}
+.mg-figure__caption :deep(strong) {
+  font-weight: 700;
+  color: var(--miragon-text-primary);
+}
+.mg-figure__caption :deep(em) {
+  font-style: italic;
+}
+.mg-figure__caption :deep(code) {
+  font-family: var(--miragon-font-mono, ui-monospace, monospace);
+  font-size: 0.92em;
+}
+</style>

package/components/SplitView.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+/**
+ * SplitView — zweispaltiges „Visual + Erklärung"-Raster: links eine Grafik
+ * (Diagramm-Komponente oder Bild über den #visual-Slot), rechts der erklärende
+ * Text im Default-Slot (Bullets oder <StepList>). Ersetzt die handgestylten
+ * <div class="grid grid-cols-2 …">-Wrapper in slides.md und vereinheitlicht
+ * Spaltenverhältnis, Abstand und vertikale Ausrichtung.
+ *
+ * Beide Spalten sind standardmäßig vertikal zentriert (align="center"), damit
+ * die Stichpunkte mittig zur Grafik sitzen.
+ *
+ * Props:
+ *   ratio — Spaltenverhältnis links/rechts als "a/b" (Default "1/1";
+ *           z. B. "1.5/1" für eine breitere Grafik)
+ *   align — vertikale Ausrichtung der Spalten: "center" | "start" | "end" |
+ *           "stretch" (Default "center")
+ *   gap   — Spaltenabstand als CSS-Länge (Default "2.5rem")
+ *
+ * Verwendung:
+ *   <SplitView ratio="1.5/1">
+ *   <template #visual>
+ *   <RuntimeView></RuntimeView>
+ *   </template>
+ *
+ *   - Punkt eins
+ *   - Punkt zwei
+ *   </SplitView>
+ *
+ * Styling lebt ausschließlich hier; die Bullet-Marker kommen weiterhin vom
+ * content-Layout, nie aus diesem Component.
+ */
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    ratio?: string
+    align?: 'center' | 'start' | 'end' | 'stretch'
+    gap?: string
+  }>(),
+  { ratio: '1/1', align: 'center', gap: '2.5rem' },
+)
+
+const columns = computed(() => {
+  const parts = props.ratio.split('/').map((n) => n.trim() || '1')
+  const left = parts[0] || '1'
+  const right = parts[1] || '1'
+  return `${left}fr ${right}fr`
+})
+</script>
+
+<template>
+  <div
+    class="mg-split"
+    :style="{ gridTemplateColumns: columns, alignItems: align, gap }"
+  >
+    <div class="mg-split__visual"><slot name="visual" /></div>
+    <div class="mg-split__body"><slot /></div>
+  </div>
+</template>
+
+<style scoped>
+.mg-split {
+  display: grid;
+  margin-top: 0.5rem;
+}
+/* min-width:0 verhindert, dass breite Grafiken die Spalte über fr sprengen. */
+.mg-split__visual,
+.mg-split__body {
+  min-width: 0;
+}
+</style>

package/components/Step.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+/**
+ * Step — eine Zeile in einer <StepList>: fett gesetztes Label + Fließtext.
+ * Das Label nutzt die primäre Textfarbe, der Body erbt die Farbe der StepList.
+ *   <Step label="Client">ruft … auf</Step>
+ */
+defineProps<{ label?: string }>()
+</script>
+
+<template>
+  <div class="step"><strong v-if="label" class="step__label">{{ label }}:</strong> <slot /></div>
+</template>
+
+<style scoped>
+.step__label {
+  font-weight: 700;
+  color: var(--miragon-text-primary);
+}
+</style>

package/components/StepList.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+/**
+ * StepList — kompakte, beschriftete Schrittliste für die Seitenspalte neben
+ * einem Diagramm (Laufzeit-/Deploymentsicht). Ersetzt handgestylte
+ * <div style="font-size:…"><div style="margin-bottom:…"><strong style="…">-Blöcke.
+ *
+ * Styling lebt ausschließlich hier (Tokens aus theme.css), nie in slides.md.
+ * Verwendung:
+ *   <StepList>
+ *   <Step label="Client">ruft … auf</Step>
+ *   </StepList>
+ */
+</script>
+
+<template>
+  <div class="step-list"><slot /></div>
+</template>
+
+<style scoped>
+.step-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+  font-size: 0.8rem;
+  line-height: 1.4;
+  color: var(--miragon-text-secondary);
+}
+</style>

package/layouts/bpmn.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+/**
+ * bpmn — Slide centered on a BPMN diagram (STATIC world, no Mesh shader).
+ *
+ * Renders a .bpmn file with the token simulation from `slidev-addon-bpmn`,
+ * with an optional title/eyebrow header above and an optional caption below.
+ * The diagram is the focal point.
+ *
+ * Requires: `slidev-addon-bpmn` must be listed in the slides.md frontmatter
+ * `addons:` block. The component used is `<BpmnTokenSimulation>`, registered
+ * automatically by the addon.
+ *
+ * Frontmatter props:
+ *   title    — slide title (h2-level)
+ *   eyebrow  — uppercase kicker
+ *   accent   — "blue" | "green" | "mixed" (default blue)
+ *   diagram  — served URL path to the .bpmn file, resolved base-aware
+ *              (e.g. "/resources/05-diagrams/recruitment.bpmn")
+ *   height   — CSS height for the BPMN canvas (default "380px")
+ * Slot:
+ *   default  — optional caption / explanatory line below the diagram
+ */
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    eyebrow?: string
+    accent?: 'blue' | 'green' | 'mixed'
+    diagram?: string
+    height?: string
+    frontmatter?: Record<string, unknown>
+  }>(),
+  { accent: 'blue', height: '380px' },
+)
+
+const title = computed(() => props.frontmatter?.title as string | undefined)
+const gradientVar = computed(() => `var(--miragon-gradient-${props.accent})`)
+const accentVar = computed(() =>
+  props.accent === 'green' ? 'var(--miragon-green-deep)' : 'var(--miragon-blue)',
+)
+
+// Base-Pfad respektieren (GitHub Pages baut unter /<repo>/). Runtime-Strings
+// werden von Vite NICHT umgeschrieben — daher manuell mit BASE_URL auflösen.
+// Gleiche Logik wie in person.vue / content-image.vue.
+function withBase(path?: string) {
+  if (!path) return path
+  if (/^https?:\/\//.test(path)) return path
+  return import.meta.env.BASE_URL.replace(/\/$/, '') + '/' + path.replace(/^\//, '')
+}
+const diagramSrc = computed(() => withBase(props.diagram))
+</script>
+
+<template>
+  <div class="bpmn-layout" :style="{ '--bp-grad': gradientVar, '--bp-accent': accentVar }">
+    <div class="bpmn-inner">
+      <header v-if="title || eyebrow" class="bpmn-head">
+        <span class="bpmn-bar" aria-hidden="true"></span>
+        <div v-if="eyebrow" class="bpmn-eyebrow">{{ eyebrow }}</div>
+        <h2 v-if="title" class="bpmn-title">{{ title }}</h2>
+      </header>
+
+      <div class="bpmn-canvas">
+        <BpmnTokenSimulation
+          v-if="diagram"
+          :bpmnFilePath="diagramSrc"
+          width="100%"
+          :height="height"
+        />
+      </div>
+
+      <div v-if="$slots.default" class="bpmn-caption">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.bpmn-layout {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: var(--miragon-gray-bg);
+  color: var(--miragon-text-primary);
+  display: flex;
+  align-items: stretch;
+}
+
+.bpmn-inner {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 78rem;
+  margin: 0 auto;
+  padding: 2.5rem 4rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.bpmn-head {
+  flex: 0 0 auto;
+  margin-bottom: 1.25rem;
+}
+.bpmn-bar {
+  display: block;
+  width: 3.5rem;
+  height: 0.35rem;
+  border-radius: 999px;
+  background: var(--bp-grad);
+  margin-bottom: 0.9rem;
+}
+.bpmn-eyebrow {
+  font-size: 0.9rem;
+  font-weight: 600;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--bp-accent);
+  margin-bottom: 0.55rem;
+}
+.bpmn-title {
+  font-size: clamp(1.7rem, 2.7vw, 2.2rem);
+  line-height: 1.15;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  margin: 0;
+}
+
+.bpmn-canvas {
+  flex: 1 1 auto;
+  min-height: 0;
+  background: var(--miragon-white);
+  border: 1px solid #E5E7EB;
+  border-radius: 1.1rem;
+  padding: 0.75rem;
+  box-shadow: 0 8px 20px rgba(51, 93, 229, 0.08);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.bpmn-caption {
+  flex: 0 0 auto;
+  margin-top: 1rem;
+  font-size: 0.95rem;
+  color: var(--miragon-text-muted);
+  text-align: center;
+}
+.bpmn-caption :deep(p) {
+  margin: 0;
+  line-height: 1.5;
+}
+.bpmn-caption :deep(code) {
+  font-family: var(--miragon-font-mono);
+  font-size: 0.9em;
+  background: var(--miragon-blue-light);
+  color: var(--miragon-blue-darker);
+  padding: 0.1em 0.4em;
+  border-radius: 0.35rem;
+}
+</style>