@velumo/renderer-dom 0.1.0-beta.0

package/src/default-theme.ts

@@ -0,0 +1,582 @@
+import type { Theme } from "@velumo/core";
+
+export const defaultThemeId = "velumo-default";
+
+export const defaultTheme: Theme = {
+  id: defaultThemeId,
+  tokens: {
+    colors: {
+      background: "#0b0e14",
+      foreground: "#e8edf4",
+      muted: "#9aa6b8",
+      accent: "#6ea8fe",
+      danger: "#ff6b6b",
+      magenta: "#ff6ba3",
+      cyan: "#5bd6f0",
+      purple: "#a98bff",
+      green: "#5fd398",
+    },
+    typography: {
+      heading: {
+        fontFamily: "ui-sans-serif, system-ui, sans-serif",
+        fontSize: "clamp(2.25rem, 5cqw, 4.5rem)",
+        lineHeight: 1.05,
+        fontWeight: 760,
+        letterSpacing: "-0.045em",
+      },
+      body: {
+        fontFamily: "ui-sans-serif, system-ui, sans-serif",
+        fontSize: "clamp(1.05rem, 1.7cqw, 1.35rem)",
+        lineHeight: 1.6,
+        fontWeight: 450,
+      },
+      caption: {
+        fontFamily: "ui-sans-serif, system-ui, sans-serif",
+        fontSize: "0.92rem",
+        lineHeight: 1.45,
+        fontWeight: 520,
+        letterSpacing: "0.02em",
+      },
+    },
+    spacing: {
+      xs: "0.375rem",
+      sm: "0.75rem",
+      md: "1.25rem",
+      lg: "2rem",
+      xl: "3rem",
+    },
+    radii: {
+      card: "1.25rem",
+      pill: "999px",
+    },
+    shadows: {
+      card: "0 24px 80px rgba(0, 0, 0, 0.45)",
+    },
+    motion: {
+      quick: {
+        duration: "140ms",
+        easing: "ease-out",
+      },
+      standard: {
+        duration: "260ms",
+        easing: "cubic-bezier(0.2, 0, 0, 1)",
+      },
+    },
+    surfaces: {
+      default: "#11151c",
+      muted: "#1a1f29",
+      card: "rgba(255, 255, 255, 0.04)",
+      accent: "rgba(110, 168, 254, 0.12)",
+      inverse: "#f8fafc",
+      danger: "rgba(255, 107, 107, 0.14)",
+    },
+    text: {
+      default: "#e8edf4",
+      muted: "#9aa6b8",
+      accent: "#9ec5ff",
+      inverse: "#0b0e14",
+      danger: "#ff8585",
+    },
+  },
+};
+
+export const defaultThemeCss = `
+[data-velumo-renderer="dom"] {
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  scroll-padding: var(--velumo-spacing-xs, 0.375rem);
+  background: var(--velumo-color-background, #0b0e14);
+  color: var(--velumo-text-default, #e8edf4);
+  font-family: var(--velumo-typography-body-font-family, ui-sans-serif, system-ui, sans-serif);
+  font-size: var(--velumo-typography-body-font-size, 1.125rem);
+  line-height: var(--velumo-typography-body-line-height, 1.6);
+  /* Size containment makes the host's sizing of this root load-bearing: a host
+     MUST give the Velumo renderer root a definite size, or it collapses. All
+     shipped shells (CLI default, example, presenter preview, SlideThumbnail
+     surface) already do.*/
+  container-type: size;
+  container-name: velumo-slide;
+  --velumo-tone-default: var(--velumo-text-default, #e8edf4);
+  --velumo-tone-muted: var(--velumo-text-muted, #9aa6b8);
+  --velumo-tone-accent: var(--velumo-text-accent, #9ec5ff);
+  --velumo-tone-danger: var(--velumo-text-danger, #ff8585);
+  --velumo-tone-magenta: var(--velumo-color-magenta, #ff6ba3);
+  --velumo-tone-cyan: var(--velumo-color-cyan, #5bd6f0);
+  --velumo-tone-purple: var(--velumo-color-purple, #a98bff);
+  --velumo-tone-green: var(--velumo-color-green, #5fd398);
+}
+
+[data-velumo-renderer="dom"] *,
+[data-velumo-renderer="dom"] *::before,
+[data-velumo-renderer="dom"] *::after {
+  box-sizing: border-box;
+}
+
+[data-velumo-renderer="dom"] [data-velumo-slide-id] {
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  padding: var(--velumo-margin-frame, clamp(2.5rem, 4.5cqh, 4rem)) var(--velumo-margin-frame-x, clamp(4rem, 8cqw, 8.5rem));
+  background: transparent;
+  overflow: hidden;
+}
+
+[data-velumo-renderer="dom"] [data-velumo-watermark] {
+  position: absolute;
+  top: var(--velumo-margin-frame, clamp(2.5rem, 4.5cqh, 4rem));
+  right: var(--velumo-margin-frame-x, clamp(4rem, 8cqw, 8.5rem));
+  z-index: 5;
+  pointer-events: none;
+  font-family: var(--velumo-font-mono, ui-monospace, "JetBrains Mono", monospace);
+  font-size: 0.72rem;
+  letter-spacing: 0.24em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--velumo-text-muted, #9aa6b8) 62%, transparent);
+}
+
+[data-velumo-renderer="dom"] [data-velumo-layout-root] {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+[data-velumo-renderer="dom"] [data-velumo-layout="stack"],
+[data-velumo-renderer="dom"] [data-velumo-layout="hero"],
+[data-velumo-renderer="dom"] [data-velumo-layout="frame"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--velumo-spacing-md, 1.25rem);
+  flex: 1;
+  min-height: 0;
+}
+[data-velumo-renderer="dom"] [data-velumo-layout="stack"][data-velumo-stack-direction="horizontal"] {
+  flex-direction: row;
+}
+
+[data-velumo-renderer="dom"] [data-velumo-layout="hero"] {
+  justify-content: center;
+}
+
+[data-velumo-renderer="dom"] [data-velumo-layout="frame"] {
+  padding: var(--velumo-spacing-lg, 2rem);
+  border: 1px solid color-mix(in srgb, var(--velumo-color-muted, #9aa6b8) 18%, transparent);
+  border-radius: var(--velumo-radius-card, 1.25rem);
+  background: linear-gradient(180deg, color-mix(in srgb, var(--velumo-text-default, #e8edf4) 8%, transparent), color-mix(in srgb, var(--velumo-text-default, #e8edf4) 3%, transparent)), var(--velumo-surface-card, rgba(255, 255, 255, 0.04));
+  box-shadow: var(--velumo-shadow-card, 0 24px 80px rgba(0, 0, 0, 0.45));
+}
+[data-velumo-renderer="dom"] [data-velumo-layout="frame"][data-velumo-frame-tone="muted"] { border-color: color-mix(in srgb, var(--velumo-tone-muted) 40%, transparent); }
+[data-velumo-renderer="dom"] [data-velumo-layout="frame"][data-velumo-frame-tone="accent"] { border-color: color-mix(in srgb, var(--velumo-tone-accent) 40%, transparent); }
+[data-velumo-renderer="dom"] [data-velumo-layout="frame"][data-velumo-frame-tone="danger"] { border-color: color-mix(in srgb, var(--velumo-tone-danger) 40%, transparent); }
+[data-velumo-renderer="dom"] [data-velumo-layout="frame"][data-velumo-frame-tone="magenta"] { border-color: color-mix(in srgb, var(--velumo-tone-magenta) 40%, transparent); }
+[data-velumo-renderer="dom"] [data-velumo-layout="frame"][data-velumo-frame-tone="cyan"] { border-color: color-mix(in srgb, var(--velumo-tone-cyan) 40%, transparent); }
+[data-velumo-renderer="dom"] [data-velumo-layout="frame"][data-velumo-frame-tone="purple"] { border-color: color-mix(in srgb, var(--velumo-tone-purple) 40%, transparent); }
+[data-velumo-renderer="dom"] [data-velumo-layout="frame"][data-velumo-frame-tone="green"] { border-color: color-mix(in srgb, var(--velumo-tone-green) 40%, transparent); }
+
+[data-velumo-renderer="dom"] [data-velumo-layout="stack"][data-velumo-stack-justify="center"] { justify-content: center; }
+[data-velumo-renderer="dom"] [data-velumo-layout="stack"][data-velumo-stack-justify="between"] { justify-content: space-between; }
+[data-velumo-renderer="dom"] [data-velumo-layout="stack"][data-velumo-stack-justify="end"] { justify-content: flex-end; }
+[data-velumo-renderer="dom"] [data-velumo-stack-align="start"] { align-items: flex-start; }
+[data-velumo-renderer="dom"] [data-velumo-stack-align="center"] { align-items: center; }
+[data-velumo-renderer="dom"] [data-velumo-stack-align="end"] { align-items: flex-end; }
+[data-velumo-renderer="dom"] [data-velumo-stack-align="stretch"] { align-items: stretch; }
+[data-velumo-renderer="dom"] [data-velumo-layout="canvas"] { flex: 1; min-height: 0; }
+[data-velumo-renderer="dom"] [data-velumo-slide-id]::after,
+[data-velumo-renderer="dom"] [data-velumo-spatial="viewport"]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 2;
+  background: radial-gradient(120% 120% at 50% 42%, transparent 55%, rgba(0, 0, 0, var(--velumo-vignette-strength, 0.5)) 100%);
+  mix-blend-mode: multiply;
+}
+
+[data-velumo-renderer="dom"] [data-velumo-layout="grid"] {
+  display: grid;
+  grid-template-columns: repeat(var(--velumo-layout-columns, 2), minmax(0, 1fr));
+  gap: var(--velumo-spacing-md, 1.25rem);
+}
+
+[data-velumo-renderer="dom"] [data-velumo-layout="split"] {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+  gap: var(--velumo-spacing-lg, 2rem);
+  align-items: start;
+}
+
+[data-velumo-renderer="dom"] [data-velumo-element="heading"] {
+  margin: 0;
+  max-width: 20ch;
+  text-wrap: balance;
+  color: var(--velumo-text-default, #e8edf4);
+  font-family: var(--velumo-typography-heading-font-family, ui-sans-serif, system-ui, sans-serif);
+  font-size: var(--velumo-typography-heading-font-size, clamp(2.25rem, 5cqw, 4.5rem));
+  font-weight: var(--velumo-typography-heading-font-weight, 760);
+  letter-spacing: var(--velumo-typography-heading-letter-spacing, -0.045em);
+  line-height: var(--velumo-typography-heading-line-height, 1.05);
+}
+[data-velumo-renderer="dom"] [data-velumo-element="heading"][data-velumo-heading-size="display"] {
+  font-size: calc(var(--velumo-typography-heading-font-size, clamp(2.25rem, 5cqw, 4.5rem))*1.55);
+  line-height: 0.98;
+}
+[data-velumo-renderer="dom"] [data-velumo-element="heading"][data-velumo-heading-size="hero"] {
+  font-size: calc(var(--velumo-typography-heading-font-size, clamp(2.25rem, 5cqw, 4.5rem))*2.5);
+  line-height: 0.9;
+}
+
+[data-velumo-renderer="dom"] [data-velumo-element="text"] {
+  margin: 0;
+  max-width: 68ch;
+  color: var(--velumo-text-default, #e8edf4);
+  font-size: var(--velumo-typography-body-font-size, 1.125rem);
+  line-height: var(--velumo-typography-body-line-height, 1.6);
+}
+
+[data-velumo-renderer="dom"] [data-velumo-text-variant="lead"] {
+  color: var(--velumo-text-muted, #9aa6b8);
+  font-size: 1.3275rem;
+}
+
+[data-velumo-renderer="dom"] [data-velumo-text-variant="caption"] {
+  color: var(--velumo-text-muted, #9aa6b8);
+  font-size: var(--velumo-typography-caption-font-size, 0.92rem);
+  letter-spacing: var(--velumo-typography-caption-letter-spacing, 0.02em);
+  line-height: var(--velumo-typography-caption-line-height, 1.45);
+}
+
+[data-velumo-renderer="dom"] [data-velumo-element="media"] {
+  display: block;
+  max-width: 100%;
+  min-height: 8rem;
+  border-radius: var(--velumo-radius-card, 1.25rem);
+  background: var(--velumo-surface-muted, #1a1f29);
+  object-fit: contain;
+}
+
+[data-velumo-renderer="dom"] [data-velumo-media-fit="cover"] {
+  object-fit: cover;
+}
+
+[data-velumo-renderer="dom"] [data-velumo-media-fit="fill"] {
+  object-fit: fill;
+}
+
+[data-velumo-renderer="dom"] [data-velumo-element="callout"] {
+  display: grid;
+  gap: var(--velumo-spacing-sm, 0.75rem);
+  padding: var(--velumo-spacing-md, 1.25rem) var(--velumo-spacing-lg, 2rem);
+  border: 1px solid color-mix(in srgb, var(--velumo-text-default, #e8edf4) 12%, transparent);
+  border-left: 0.3rem solid var(--velumo-color-accent, #6ea8fe);
+  border-radius: var(--velumo-radius-card, 1.25rem);
+  background: linear-gradient(180deg, color-mix(in srgb, var(--velumo-text-default, #e8edf4) 9%, transparent), color-mix(in srgb, var(--velumo-text-default, #e8edf4) 4%, transparent));
+  box-shadow: var(--velumo-shadow-card, 0 24px 80px rgba(0, 0, 0, 0.45));
+  color: var(--velumo-text-default, #e8edf4);
+}
+
+[data-velumo-renderer="dom"] [data-velumo-callout-tone="info"] {
+  border-left-color: var(--velumo-color-cyan, #5bd6f0);
+}
+
+[data-velumo-renderer="dom"] [data-velumo-callout-tone="warning"] {
+  border-left-color: var(--velumo-color-magenta, #ff6ba3);
+}
+
+[data-velumo-renderer="dom"] [data-velumo-callout-tone="success"] {
+  border-left-color: var(--velumo-color-green, #5fd398);
+}
+
+[data-velumo-renderer="dom"] [data-velumo-callout-tone="quote"] {
+  border-left-color: var(--velumo-color-muted, #9aa6b8);
+}
+
+[data-velumo-renderer="dom"] [data-velumo-callout-tone="danger"] {
+  border-left-color: var(--velumo-color-danger, #ff6b6b);
+}
+
+[data-velumo-renderer="dom"] [data-velumo-layer-type="markdown"],
+[data-velumo-renderer="dom"] [data-velumo-layer-type="html"] {
+  margin-top: var(--velumo-spacing-lg, 2rem);
+  color: var(--velumo-text-default, #e8edf4);
+  font-size: var(--velumo-typography-body-font-size, 1.125rem);
+  line-height: var(--velumo-typography-body-line-height, 1.6);
+}
+
+[data-velumo-renderer="dom"] [data-velumo-fragment="hidden"] {
+  display: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  @keyframes velumo-rise {
+    from { opacity: 0; transform: translateY(2rem); }
+    to { opacity: 1; transform: none; }
+  }
+  @keyframes velumo-fade {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+  @keyframes velumo-zoom {
+    from { opacity: 0; transform: scale(0.86); }
+    to { opacity: 1; transform: none; }
+  }
+  @keyframes velumo-draw {
+    from { opacity: 0; transform: scaleX(0); }
+    to { opacity: 1; transform: scaleX(1); }
+  }
+  @keyframes velumo-in-left {
+    from { opacity: 0; transform: translateX(-3rem); }
+    to { opacity: 1; transform: none; }
+  }
+  @keyframes velumo-in-right {
+    from { opacity: 0; transform: translateX(3rem); }
+    to { opacity: 1; transform: none; }
+  }
+
+  [data-velumo-renderer="dom"] [data-velumo-animation] {
+    animation-duration: var(--velumo-animation-duration, 0.8s);
+    animation-delay: var(--velumo-animation-delay, 0s);
+    animation-timing-function: var(--velumo-animation-easing, cubic-bezier(0.4, 0, 0.2, 1));
+    animation-fill-mode: both;
+  }
+  [data-velumo-renderer="dom"] [data-velumo-animation="rise"] { animation-name: velumo-rise; }
+  [data-velumo-renderer="dom"] [data-velumo-animation="fade"] { animation-name: velumo-fade; }
+  [data-velumo-renderer="dom"] [data-velumo-animation="zoom"] { animation-name: velumo-zoom; }
+  [data-velumo-renderer="dom"] [data-velumo-animation="draw"] { animation-name: velumo-draw; transform-origin: left center; }
+  [data-velumo-renderer="dom"] [data-velumo-animation="in-left"] { animation-name: velumo-in-left; }
+  [data-velumo-renderer="dom"] [data-velumo-animation="in-right"] { animation-name: velumo-in-right; }
+
+  @keyframes velumo-glow {
+    from { text-shadow: 0 0 28px rgba(255, 209, 102, 0.4), 0 0 60px rgba(255, 61, 127, 0.28); }
+    to { text-shadow: 0 0 40px rgba(255, 209, 102, 0.6), 0 0 96px rgba(255, 61, 127, 0.42); }
+  }
+  @keyframes velumo-blink {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.35; }
+  }
+  @keyframes velumo-pulse {
+    0%, 100% { opacity: 0.55; transform: none; }
+    50% { opacity: 1; transform: scale(1.03); }
+  }
+  @keyframes velumo-sweep {
+    from { transform: translateX(-46%); }
+    to { transform: translateX(46%); }
+  }
+  [data-velumo-renderer="dom"] [data-velumo-animation="glow"] { animation: velumo-glow var(--velumo-animation-duration, 2.6s) var(--velumo-animation-easing, ease-in-out) var(--velumo-animation-delay, 0s) infinite alternate; }
+  [data-velumo-renderer="dom"] [data-velumo-animation="blink"] { animation: velumo-blink max(1s, var(--velumo-animation-duration, 1.4s)) var(--velumo-animation-easing, ease-in-out) var(--velumo-animation-delay, 0s) infinite; }
+  [data-velumo-renderer="dom"] [data-velumo-animation="pulse"] { animation: velumo-pulse var(--velumo-animation-duration, 2.4s) var(--velumo-animation-easing, ease-in-out) var(--velumo-animation-delay, 0s) infinite; }
+  [data-velumo-renderer="dom"] [data-velumo-animation="sweep"] { animation: velumo-sweep var(--velumo-animation-duration, 3.2s) var(--velumo-animation-easing, cubic-bezier(0.4, 0, 0.2, 1)) var(--velumo-animation-delay, 0s) infinite alternate; }
+}
+
+[data-velumo-thumbnail] [data-velumo-animation] { animation: none !important; }
+
+[data-velumo-renderer="dom"] [data-velumo-text-transform="uppercase"] { text-transform: uppercase; }
+[data-velumo-renderer="dom"] [data-velumo-text-transform="lowercase"] { text-transform: lowercase; }
+[data-velumo-renderer="dom"] [data-velumo-text-transform="capitalize"] { text-transform: capitalize; }
+
+[data-velumo-renderer="dom"] [data-velumo-text-decoration="underline"] { text-decoration: underline; }
+[data-velumo-renderer="dom"] [data-velumo-text-decoration="line-through"] { text-decoration: line-through; }
+
+[data-velumo-renderer="dom"] [data-velumo-text-glow] {
+  text-shadow: 0 0 0.4em currentColor, 0 0 1.2em currentColor;
+}
+
+[data-velumo-renderer="dom"] [data-velumo-text-tone="muted"] { color: var(--velumo-text-muted, #9aa6b8); }
+[data-velumo-renderer="dom"] [data-velumo-text-tone="accent"] { color: var(--velumo-text-accent, #9ec5ff); }
+[data-velumo-renderer="dom"] [data-velumo-text-tone="danger"] { color: var(--velumo-text-danger, #ff8585); }
+[data-velumo-renderer="dom"] [data-velumo-text-tone="magenta"] { color: var(--velumo-color-magenta, #ff6ba3); }
+[data-velumo-renderer="dom"] [data-velumo-text-tone="cyan"] { color: var(--velumo-color-cyan, #5bd6f0); }
+[data-velumo-renderer="dom"] [data-velumo-text-tone="purple"] { color: var(--velumo-color-purple, #a98bff); }
+[data-velumo-renderer="dom"] [data-velumo-text-tone="green"] { color: var(--velumo-color-green, #5fd398); }
+
+[data-velumo-renderer="dom"] [data-velumo-element="badge"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5em;
+  padding: 0.35em 0.9em;
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
+  color: var(--velumo-text-default, #e8edf4);
+  font-size: 0.9em;
+  line-height: 1.2;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+[data-velumo-renderer="dom"] [data-velumo-badge-mono] {
+  font-family: var(--velumo-font-mono, ui-monospace, "JetBrains Mono", monospace);
+  letter-spacing: 0.02em;
+}
+[data-velumo-renderer="dom"] [data-velumo-badge-variant="soft"] {
+  background: color-mix(in srgb, currentColor 12%, transparent);
+}
+[data-velumo-renderer="dom"] [data-velumo-badge-variant="solid"] {
+  background: color-mix(in srgb, currentColor 22%, transparent);
+  border-color: color-mix(in srgb, currentColor 60%, transparent);
+}
+[data-velumo-renderer="dom"] [data-velumo-badge-tone="muted"] { color: var(--velumo-text-muted, #9aa6b8); }
+[data-velumo-renderer="dom"] [data-velumo-badge-tone="accent"] { color: var(--velumo-text-accent, #9ec5ff); }
+[data-velumo-renderer="dom"] [data-velumo-badge-tone="danger"] { color: var(--velumo-text-danger, #ff8585); }
+[data-velumo-renderer="dom"] [data-velumo-badge-tone="magenta"] { color: var(--velumo-color-magenta, #ff6ba3); }
+[data-velumo-renderer="dom"] [data-velumo-badge-tone="cyan"] { color: var(--velumo-color-cyan, #5bd6f0); }
+[data-velumo-renderer="dom"] [data-velumo-badge-tone="purple"] { color: var(--velumo-color-purple, #a98bff); }
+[data-velumo-renderer="dom"] [data-velumo-badge-tone="green"] { color: var(--velumo-color-green, #5fd398); }
+[data-velumo-renderer="dom"] [data-velumo-badge-dot] {
+  width: 0.6em;
+  height: 0.6em;
+  border-radius: 999px;
+  flex: none;
+  background: currentColor;
+  box-shadow: 0 0 0.6em currentColor;
+}
+[data-velumo-renderer="dom"] [data-velumo-badge-dot="muted"] { color: var(--velumo-text-muted, #9aa6b8); }
+[data-velumo-renderer="dom"] [data-velumo-badge-dot="accent"] { color: var(--velumo-text-accent, #9ec5ff); }
+[data-velumo-renderer="dom"] [data-velumo-badge-dot="danger"] { color: var(--velumo-text-danger, #ff8585); }
+[data-velumo-renderer="dom"] [data-velumo-badge-dot="magenta"] { color: var(--velumo-color-magenta, #ff6ba3); }
+[data-velumo-renderer="dom"] [data-velumo-badge-dot="cyan"] { color: var(--velumo-color-cyan, #5bd6f0); }
+[data-velumo-renderer="dom"] [data-velumo-badge-dot="purple"] { color: var(--velumo-color-purple, #a98bff); }
+[data-velumo-renderer="dom"] [data-velumo-badge-dot="green"] { color: var(--velumo-color-green, #5fd398); }
+
+[data-velumo-renderer="dom"] [data-velumo-element="rule"] {
+  display: block;
+  flex: none;
+  background: var(--velumo-tone-default);
+}
+[data-velumo-renderer="dom"] [data-velumo-rule-tone="muted"] { background: var(--velumo-tone-muted); }
+[data-velumo-renderer="dom"] [data-velumo-rule-tone="accent"] { background: var(--velumo-tone-accent); }
+[data-velumo-renderer="dom"] [data-velumo-rule-tone="danger"] { background: var(--velumo-tone-danger); }
+[data-velumo-renderer="dom"] [data-velumo-rule-tone="magenta"] { background: var(--velumo-tone-magenta); }
+[data-velumo-renderer="dom"] [data-velumo-rule-tone="cyan"] { background: var(--velumo-tone-cyan); }
+[data-velumo-renderer="dom"] [data-velumo-rule-tone="purple"] { background: var(--velumo-tone-purple); }
+[data-velumo-renderer="dom"] [data-velumo-rule-tone="green"] { background: var(--velumo-tone-green); }
+[data-velumo-renderer="dom"] [data-velumo-rule-gradient] {
+  background: linear-gradient(90deg, var(--velumo-rule-from, var(--velumo-tone-default)), var(--velumo-rule-to, var(--velumo-tone-default)));
+}
+
+[data-velumo-renderer="dom"] pre[data-velumo-element="code"] {
+  margin: 0;
+  padding: 1.1rem 1.35rem;
+  border: 1px solid var(--velumo-color-muted, #9aa6b8);
+  border-radius: var(--velumo-radii-card, 0.75rem);
+  background: var(--velumo-surface-muted, #1a1f29);
+  color: var(--velumo-text-default, #e8edf4);
+  font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
+  font-size: 0.95em;
+  line-height: 1.6;
+  overflow: auto;
+  white-space: pre;
+}
+[data-velumo-renderer="dom"] [data-velumo-token="keyword"] { color: var(--velumo-color-purple, #a98bff); }
+[data-velumo-renderer="dom"] [data-velumo-token="function"] { color: var(--velumo-text-accent, #9ec5ff); }
+[data-velumo-renderer="dom"] [data-velumo-token="string"] { color: var(--velumo-color-green, #5fd398); }
+[data-velumo-renderer="dom"] [data-velumo-token="number"] { color: var(--velumo-color-magenta, #ff6ba3); }
+[data-velumo-renderer="dom"] [data-velumo-token="property"] { color: var(--velumo-color-cyan, #5bd6f0); }
+[data-velumo-renderer="dom"] [data-velumo-token="comment"] { color: var(--velumo-text-muted, #9aa6b8); }
+[data-velumo-renderer="dom"] [data-velumo-token="punctuation"] { color: var(--velumo-text-muted, #9aa6b8); }
+
+[data-velumo-renderer="dom"] [data-velumo-element="icon"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.6em;
+  height: 1.6em;
+  border-radius: 999px;
+  background: color-mix(in srgb, currentColor 20%, transparent);
+  vertical-align: middle;
+  flex: none;
+}
+[data-velumo-renderer="dom"] [data-velumo-element="icon"]::before {
+  content: "";
+  display: block;
+  box-sizing: border-box;
+}
+[data-velumo-renderer="dom"] [data-velumo-icon="check"]::before {
+  width: 0.34em;
+  height: 0.62em;
+  border: solid currentColor;
+  border-width: 0 0.14em 0.14em 0;
+  transform: translateY(-0.07em) rotate(45deg);
+}
+[data-velumo-renderer="dom"] [data-velumo-icon="cross"] { position: relative; }
+[data-velumo-renderer="dom"] [data-velumo-icon="cross"]::before,
+[data-velumo-renderer="dom"] [data-velumo-icon="cross"]::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0.72em;
+  height: 0.14em;
+  border-radius: 2px;
+  background: currentColor;
+}
+[data-velumo-renderer="dom"] [data-velumo-icon="cross"]::before { transform: translate(-50%, -50%) rotate(45deg); }
+[data-velumo-renderer="dom"] [data-velumo-icon="cross"]::after { transform: translate(-50%, -50%) rotate(-45deg); }
+[data-velumo-renderer="dom"] [data-velumo-icon="dash"]::before {
+  width: 0.72em;
+  height: 0.14em;
+  border-radius: 2px;
+  background: currentColor;
+}
+[data-velumo-renderer="dom"] [data-velumo-icon="ring"]::before {
+  width: 0.78em;
+  height: 0.78em;
+  border: 0.13em solid currentColor;
+  border-radius: 50%;
+}
+[data-velumo-renderer="dom"] [data-velumo-icon="dot"]::before {
+  width: 0.5em;
+  height: 0.5em;
+  background: currentColor;
+  border-radius: 50%;
+}
+[data-velumo-renderer="dom"] [data-velumo-icon="arrow"]::before {
+  width: 0.42em;
+  height: 0.42em;
+  border: solid currentColor;
+  border-width: 0.14em 0.14em 0 0;
+  transform: translateX(-0.08em) rotate(45deg);
+}
+[data-velumo-renderer="dom"] [data-velumo-layout="table"] {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--velumo-color-muted, #9aa6b8);
+  border-radius: var(--velumo-radii-card, 0.75rem);
+  background: var(--velumo-surface-muted, #1a1f29);
+  overflow: hidden;
+}
+[data-velumo-renderer="dom"] [data-velumo-layout="table"] [role="row"] {
+  display: grid;
+  grid-template-columns: var(--velumo-table-columns, 1fr);
+  align-items: center;
+  padding: 0 1.4rem;
+}
+[data-velumo-renderer="dom"] [data-velumo-layout="table"] [data-velumo-table-head] {
+  background: color-mix(in srgb, var(--velumo-text-default, #e8edf4) 8%, transparent);
+  border-bottom: 1px solid var(--velumo-color-muted, #9aa6b8);
+}
+[data-velumo-renderer="dom"] [data-velumo-layout="table"] [role="rowgroup"] [role="row"] + [role="row"] {
+  border-top: 1px solid color-mix(in srgb, var(--velumo-text-default, #e8edf4) 8%, transparent);
+}
+[data-velumo-renderer="dom"] [data-velumo-layout="table"] [role="cell"],
+[data-velumo-renderer="dom"] [data-velumo-layout="table"] [role="columnheader"] {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  padding: 0.85rem 0;
+}
+[data-velumo-renderer="dom"] [data-velumo-layout="table"] [role="columnheader"] {
+  font-weight: 650;
+  letter-spacing: 0.01em;
+}
+[data-velumo-renderer="dom"] [data-velumo-layout="table"] [data-velumo-col-align="center"] { justify-content: center; }
+[data-velumo-renderer="dom"] [data-velumo-layout="table"] [data-velumo-col-align="end"] { justify-content: flex-end; }
+[data-velumo-renderer="dom"] [data-velumo-layout="table"] [data-velumo-col-emphasis] {
+  background: color-mix(in srgb, var(--velumo-text-accent, #6ea8fe) 10%, transparent);
+}
+[data-velumo-renderer="dom"] [data-velumo-layout="table"] [data-velumo-table-head] [data-velumo-col-emphasis] {
+  box-shadow: inset 0 0.18rem 0 0 var(--velumo-text-accent, #6ea8fe);
+}
+`.trim();