@walkeros/explorer 4.7.2 → 4.8.0-next-1791496487198

package/dist/styles.css

@@ -1,306 +1,11 @@
+@charset "UTF-8";
+
 /* src/styles/index.scss */
 .elb-explorer {
-  --color-text: #111827;
-  --color-text-label: #4b5563;
-  --color-text-button: #6b7280;
-  --color-text-button-hover: #374151;
-  --color-text-button-active: #1f2937;
-  --color-text-muted: #6b7280;
-  --color-text-toggle: #6b7280;
-  --color-text-input: #111827;
-  --color-text-placeholder: #9ca3af;
-  --bg-box: #ffffff;
-  --bg-header: #f5f5f5;
-  --bg-footer: #f5f5f5;
-  --bg-button-hover: #e8e8e8;
-  --bg-button-active: #ffffff;
-  --bg-button-group: #f3f4f6;
-  --bg-input: #ffffff;
-  --bg-input-hover: #f9f9f9;
-  --bg-code-inline: #f9f9f9;
-  --bg-dropdown: #ffffff;
-  --bg-dropdown-option-hover: #f0f0f0;
-  --bg-dropdown-option-highlighted: #e3f2fd;
-  --border-box: #e0e0e0;
-  --border-header: #e0e0e0;
-  --border-footer: #e0e0e0;
-  --border-button-group: #d1d5db;
-  --border-input: #d1d5db;
-  --border-input-focus: #01b5e2;
-  --shadow-button-active: 0 1px 2px rgba(0, 0, 0, 0.1);
-  --shadow-dropdown: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-  --color-button-primary: #01b5e2;
-  --color-button-primary-hover: #015372;
-  --color-button-primary-text: #ffffff;
-  --color-button-danger: #ef4444;
-  --color-button-danger-hover: #dc2626;
-  --color-button-danger-text: #ffffff;
-  --color-status-enabled: #22c55e;
-  --color-status-disabled: #9ca3af;
-  --color-status-warning: #f59e0b;
-  --color-alert-info-bg: #eff6ff;
-  --color-alert-info-border: #bfdbfe;
-  --color-alert-info-text: #1e40af;
-  --color-alert-success-bg: #f0fdf4;
-  --color-alert-success-border: #bbf7d0;
-  --color-alert-success-text: #166534;
-  --color-alert-warning-bg: #fefce8;
-  --color-alert-warning-border: #fde68a;
-  --color-alert-warning-text: #854d0e;
-  --color-alert-error-bg: #fef2f2;
-  --color-alert-error-border: #fecaca;
-  --color-alert-error-text: #991b1b;
-  --color-focus-ring: rgba(1, 181, 226, 0.2);
-  --color-error-ring: rgba(239, 68, 68, 0.2);
-  --spacing-xs: 4px;
-  --spacing-sm: 8px;
-  --spacing-md: 12px;
-  --spacing-lg: 16px;
-  --spacing-xl: 24px;
-  --font-size-xs: 11px;
-  --font-size-sm: 12px;
-  --line-height-relaxed: 1.6;
-  --font-weight-medium: 500;
-  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  --z-dropdown: 50;
-  --color-highlight-primary: #01b5e2;
-  --radius-box: 4px;
-  --radius-button: 3px;
-  --radius-button-group: 4px;
-  --radius-highlight-button: 6px;
-  --spacing-header: 6px 10px;
-  --spacing-footer: 6px 10px;
-  --spacing-button: 4px 8px;
-  --spacing-button-group: 1px;
-  --spacing-grid-gap: 12px;
-  --grid-min-box-width: 350px;
-  --grid-row-min-height: 250px;
-  --grid-row-max-height: 450px;
-  --grid-box-max-height-mobile: 500px;
-  --height-code-view-max: 600px;
-  --step-example-min-box-width: 220px;
-  --step-example-max-height: 360px;
-  --monaco-font-size: 13px;
-  --monaco-line-height: 1.5;
-  --monaco-font-size-snippet: 16px;
-  --font-family-base:
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    "Roboto",
-    "Helvetica Neue",
-    sans-serif;
-  --font-mono:
-    "SF Mono",
-    "Monaco",
-    "Inconsolata",
-    "Roboto Mono",
-    "Source Code Pro",
-    monospace;
-  --font-size-base: 14px;
-  --font-size-label: 13px;
-  --font-size-toggle: 12px;
-  --font-size-highlight-button: 0.75rem;
-  --font-size-xl: 16px;
-  --line-height-base: 1.5;
-  --font-weight-normal: 400;
-  --font-weight-semibold: 600;
-  --highlight-globals: #4fc3f7cc;
-  --highlight-context: #ffbd44cc;
-  --highlight-entity: #00ca4ecc;
-  --highlight-property: #ff605ccc;
-  --highlight-action: #9900ffcc;
-  --highlight-background: #1f2937;
-  --highlight-text: #9ca3af;
-  --highlight-hover: rgba(255, 255, 255, 0.05);
-  --highlight-separator: rgba(255, 255, 255, 0.05);
-  --flow-source-fill: transparent;
-  --flow-source-stroke: #6ee7b7;
-  --flow-transformer-fill: transparent;
-  --flow-transformer-stroke: #fcd34d;
-  --flow-collector-fill: transparent;
-  --flow-collector-stroke: #7dd3fc;
-  --flow-destination-fill: transparent;
-  --flow-destination-stroke: #c4b5fd;
-  --flow-edge-stroke: #9ca3af;
-}
-[data-theme=light] .elb-explorer {
-  --color-text: #000;
-  --color-text-label: #424242;
-  --color-text-button: #616161;
-  --color-text-button-hover: #424242;
-  --color-text-button-active: #1f2937;
-  --color-text-muted: #666;
-  --color-text-toggle: #666;
-  --color-text-input: #000;
-  --color-text-placeholder: #9ca3af;
-  --bg-box: #ffffff;
-  --bg-header: #f5f5f5;
-  --bg-footer: #f5f5f5;
-  --bg-button-hover: #e8e8e8;
-  --bg-button-active: #ffffff;
-  --bg-button-group: #f3f4f6;
-  --bg-input: #ffffff;
-  --bg-input-hover: #f9f9f9;
-  --bg-code-inline: #f9f9f9;
-  --bg-dropdown: #ffffff;
-  --bg-dropdown-option-hover: #f0f0f0;
-  --bg-dropdown-option-highlighted: #e3f2fd;
-  --border-box: #e0e0e0;
-  --border-header: #e0e0e0;
-  --border-footer: #e0e0e0;
-  --border-button-group: #d1d5db;
-  --border-input: #d1d5db;
-  --border-input-focus: #01b5e2;
-  --shadow-button-active: 0 1px 2px rgba(0, 0, 0, 0.1);
-  --shadow-dropdown: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-  --color-button-primary: #01b5e2;
-  --color-button-primary-hover: #015372;
-  --color-button-primary-text: #ffffff;
-  --color-button-danger: #ef4444;
-  --color-button-danger-hover: #dc2626;
-  --color-button-danger-text: #ffffff;
-  --color-status-enabled: #22c55e;
-  --color-status-disabled: #9ca3af;
-  --color-status-warning: #f59e0b;
-  --radius-box: 4px;
-  --radius-button: 3px;
-  --radius-button-group: 4px;
-  --radius-highlight-button: 6px;
-  --spacing-header: 6px 10px;
-  --spacing-footer: 6px 10px;
-  --spacing-button: 4px 8px;
-  --spacing-button-group: 1px;
-  --spacing-grid-gap: 12px;
-  --grid-min-box-width: 350px;
-  --grid-row-min-height: 250px;
-  --grid-row-max-height: 450px;
-  --grid-box-max-height-mobile: 500px;
-  --height-code-view-max: 600px;
-  --step-example-min-box-width: 220px;
-  --step-example-max-height: 360px;
-  --monaco-font-size: 13px;
-  --monaco-line-height: 1.5;
-  --monaco-font-size-snippet: 16px;
-  --font-family-base:
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    "Roboto",
-    "Helvetica Neue",
-    sans-serif;
-  --font-mono:
-    "SF Mono",
-    "Monaco",
-    "Inconsolata",
-    "Roboto Mono",
-    "Source Code Pro",
-    monospace;
-  --font-size-base: 14px;
-  --font-size-label: 13px;
-  --font-size-toggle: 12px;
-  --font-size-highlight-button: 0.75rem;
-  --font-size-xl: 16px;
-  --line-height-base: 1.5;
-  --font-weight-normal: 400;
-  --font-weight-semibold: 600;
-  --highlight-globals: #4fc3f7cc;
-  --highlight-context: #ffbd44cc;
-  --highlight-entity: #00ca4ecc;
-  --highlight-property: #ff605ccc;
-  --highlight-action: #9900ffcc;
-  --highlight-background: #1f2937;
-  --highlight-text: #9ca3af;
-  --highlight-hover: rgba(255, 255, 255, 0.05);
-  --highlight-separator: rgba(255, 255, 255, 0.05);
-  --flow-source-fill: transparent;
-  --flow-source-stroke: #6ee7b7;
-  --flow-transformer-fill: transparent;
-  --flow-transformer-stroke: #fcd34d;
-  --flow-collector-fill: transparent;
-  --flow-collector-stroke: #7dd3fc;
-  --flow-destination-fill: transparent;
-  --flow-destination-stroke: #c4b5fd;
-  --flow-edge-stroke: #9ca3af;
-}
-[data-theme=dark] .elb-explorer {
-  --color-text: #f3f4f6;
-  --color-text-label: #d1d5db;
-  --color-text-button: #d1d5db;
-  --color-text-button-hover: #ffffff;
-  --color-text-button-active: #ffffff;
-  --color-text-muted: #9ca3af;
-  --color-text-toggle: #9ca3af;
-  --color-text-input: #f3f4f6;
-  --color-text-placeholder: #6b7280;
-  --bg-box: #292d3e;
-  --bg-header: #1f2937;
-  --bg-footer: #1f2937;
-  --bg-button-hover: #374151;
-  --bg-button-active: #111827;
-  --bg-button-group: #374151;
-  --bg-input: #1f2937;
-  --bg-input-hover: #374151;
-  --bg-code-inline: rgba(255, 255, 255, 0.05);
-  --bg-dropdown: #1f2937;
-  --bg-dropdown-option-hover: #374151;
-  --bg-dropdown-option-highlighted: #1e3a5f;
-  --border-box: #4b5563;
-  --border-header: #4b5563;
-  --border-footer: #4b5563;
-  --border-button-group: #4b5563;
-  --border-input: #4b5563;
-  --border-input-focus: #01b5e2;
-  --shadow-button-active: 0 1px 2px rgba(0, 0, 0, 0.3);
-  --shadow-dropdown: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
-  --color-button-primary: #01b5e2;
-  --color-button-primary-hover: #015372;
-  --color-button-danger: #ef4444;
-  --color-button-danger-hover: #dc2626;
-  --flow-source-fill: transparent;
-  --flow-source-stroke: #6ee7b7;
-  --flow-transformer-fill: transparent;
-  --flow-transformer-stroke: #fcd34d;
-  --flow-collector-fill: transparent;
-  --flow-collector-stroke: #7dd3fc;
-  --flow-destination-fill: transparent;
-  --flow-destination-stroke: #c4b5fd;
-  --flow-edge-stroke: #9ca3af;
-  --flow-before-fill: transparent;
-  --flow-before-stroke: #9ca3af;
-  --flow-after-fill: transparent;
-  --flow-after-stroke: #9ca3af;
-  --color-alert-info-bg: rgba(59, 130, 246, 0.15);
-  --color-alert-info-border: rgba(59, 130, 246, 0.3);
-  --color-alert-info-text: #93c5fd;
-  --color-alert-success-bg: rgba(34, 197, 94, 0.15);
-  --color-alert-success-border: rgba(34, 197, 94, 0.3);
-  --color-alert-success-text: #86efac;
-  --color-alert-warning-bg: rgba(245, 158, 11, 0.15);
-  --color-alert-warning-border: rgba(245, 158, 11, 0.3);
-  --color-alert-warning-text: #fcd34d;
-  --color-alert-error-bg: rgba(239, 68, 68, 0.15);
-  --color-alert-error-border: rgba(239, 68, 68, 0.3);
-  --color-alert-error-text: #fca5a5;
-  --color-focus-ring: rgba(1, 181, 226, 0.3);
-  --color-error-ring: rgba(239, 68, 68, 0.3);
-}
-.elb-explorer {
-  font-family:
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    "Helvetica Neue",
-    sans-serif;
-  font-size: 14px;
-  line-height: 1.5;
-  color: var(--color-text);
+  font-family: var(--font-sans);
+  font-size: var(--type-product-body-size);
+  line-height: var(--type-product-body-line-height);
+  color: var(--fg);
 }
 .elb-explorer * {
   box-sizing: border-box;
@@ -309,6 +14,11 @@
   font-family: inherit;
 }
 .elb-explorer-grid-wrapper {
+  --grid-min-box-width: 350px;
+  --grid-box-width: 350px;
+  --grid-row-min-height: 250px;
+  --grid-row-max-height: 450px;
+  --grid-box-max-height-mobile: 500px;
   position: relative;
   width: 100%;
   container-type: inline-size;
@@ -316,7 +26,7 @@
 }
 .elb-explorer-grid {
   display: grid;
-  gap: var(--spacing-grid-gap);
+  gap: 12px;
   width: 100%;
   grid-auto-flow: row;
   grid-template-columns: 1fr;
@@ -351,6 +61,30 @@
     grid-template-columns: repeat(var(--grid-columns), minmax(var(--grid-min-box-width), 1fr));
   }
 }
+.elb-explorer-grid.elb-explorer-grid--fixed {
+  grid-auto-flow: column;
+  grid-template-columns: none;
+  grid-auto-columns: min(var(--grid-box-width), 100% - 32px);
+  grid-auto-rows: minmax(var(--grid-row-min-height), var(--grid-row-max-height, auto));
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+}
+.elb-explorer-grid.elb-explorer-grid--fixed > * {
+  min-width: 0;
+  scroll-snap-align: start;
+}
+.elb-explorer-grid.elb-explorer-grid--fixed > .elb-explorer-box {
+  height: 100%;
+  max-height: none;
+}
+@container grid-container (min-width: 600px) {
+  .elb-explorer-grid.elb-explorer-grid--fixed {
+    width: auto;
+    margin-inline: 48px;
+  }
+}
 @container grid-container (min-width: 800px) {
   .elb-explorer-grid.elb-explorer-grid--row-auto {
     grid-auto-rows: auto;
@@ -366,101 +100,83 @@
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  z-index: 10;
+  z-index: var(--z-raised);
   width: 40px;
   height: 40px;
   padding: 0;
-  border: none;
-  border-radius: 50%;
-  background: var(--bg-box);
-  color: var(--color-text);
-  font-size: 24px;
-  line-height: 0;
+  border: 1px solid var(--primary);
+  border-radius: var(--radius-full);
+  background: var(--surface);
+  color: var(--fg);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  transition: all 0.2s ease;
+  transition: background-color var(--motion) var(--ease);
   user-select: none;
 }
-@container grid-container (max-width: 799px) {
+@container grid-container (max-width: 599px) {
   .elb-explorer-grid-scroll-button {
     display: none;
   }
 }
 .elb-explorer-grid-scroll-button:hover {
-  background: var(--bg-button-hover);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  transform: translateY(-50%) scale(1.1);
+  background: var(--surface-2);
 }
-.elb-explorer-grid-scroll-button:active {
-  transform: translateY(-50%) scale(0.95);
+.elb-explorer-grid-scroll-button:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 3px;
 }
 .elb-explorer-grid-scroll-button--left {
-  left: 8px;
+  left: 4px;
 }
 .elb-explorer-grid-scroll-button--right {
-  right: 8px;
-}
-.elb-explorer ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-.elb-explorer ::-webkit-scrollbar-track {
-  background: transparent;
-}
-.elb-explorer ::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 4px;
-}
-.elb-explorer ::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 0.2);
-}
-[data-theme=dark] .elb-explorer ::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.2);
-}
-[data-theme=dark] .elb-explorer ::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.2);
+  right: 4px;
 }
 .elb-explorer {
   width: 100%;
   max-width: 100%;
   background: transparent;
   padding: 0;
-  font-family: var(--font-family-base);
-  font-size: var(--font-size-base);
-  line-height: var(--line-height-base);
-  color: var(--color-text);
+}
+.elb-explorer-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }
 .elb-explorer-btn {
-  padding: var(--spacing-button);
+  padding: 4px 8px;
   background: transparent;
   border: none;
-  border-radius: var(--radius-button);
+  border-radius: var(--radius-xs);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--color-text-button);
-  transition: all 0.15s;
+  color: var(--fg-2);
+  transition: all var(--motion) var(--ease);
 }
 .elb-explorer-btn:hover {
-  background: var(--bg-button-hover);
-  color: var(--color-text-button-hover);
+  background: var(--surface-2);
+  color: var(--fg);
 }
 .elb-explorer-btn.active {
-  background: var(--bg-button-active);
-  color: var(--color-text-button-active);
-  box-shadow: var(--shadow-button-active);
-  font-weight: var(--font-weight-semibold);
+  background: var(--surface);
+  color: var(--fg);
+  font-weight: 600;
 }
 .elb-explorer-button-group {
   display: flex;
-  background: var(--bg-button-group);
-  border-radius: var(--radius-button-group);
-  padding: var(--spacing-button-group);
-  border: 1px solid var(--border-button-group);
+  background: var(--bg-2);
+  border-radius: var(--radius-xs);
+  padding: 1px;
+  border: 1px solid var(--border-strong);
 }
 .elb-explorer-button-group.elb-explorer-button-group--tabs {
   background: transparent;
@@ -471,90 +187,19 @@
 }
 .elb-explorer-button-group.elb-explorer-button-group--tabs .elb-explorer-btn {
   padding: 3px 10px;
-  font-size: var(--font-size-label);
-  font-weight: var(--font-weight-medium);
-  color: var(--color-text-button);
+  font-size: var(--type-product-small-size);
+  font-weight: 500;
+  color: var(--fg-2);
   background: transparent;
-  border-radius: var(--radius-button) var(--radius-button) 0 0;
+  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
 }
 .elb-explorer-button-group.elb-explorer-button-group--tabs .elb-explorer-btn:hover {
   background: transparent;
-  color: var(--color-text-button-hover);
+  color: var(--fg);
 }
 .elb-explorer-button-group.elb-explorer-button-group--tabs .elb-explorer-btn.active {
-  background: var(--bg-button-active);
-  color: var(--color-text-button-active);
-  box-shadow: none;
-}
-.elb-button-link {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 12px 32px;
-  font-family: var(--font-family-base);
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-semibold);
-  border-radius: var(--radius-button);
-  border: none;
-  text-decoration: none;
-  transition: all 0.15s;
-  cursor: pointer;
-}
-.elb-button-link:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-.elb-button-link-default {
-  background: transparent;
-  color: var(--color-text-button);
-  border: 1px solid var(--border-input);
-}
-.elb-button-link-default:hover:not(:disabled) {
-  background: var(--bg-button-hover);
-  color: var(--color-text-button-hover);
-}
-.elb-button-link-primary {
-  background: var(--color-button-primary);
-  color: var(--color-button-primary-text);
-  border: 1px solid var(--color-button-primary);
-}
-.elb-button-link-primary:hover:not(:disabled) {
-  background: var(--color-button-primary-hover);
-  border-color: var(--color-button-primary-hover);
-}
-.elb-button-link-secondary {
-  background: var(--bg-box);
-  color: var(--color-button-primary);
-  border: 1px solid var(--border-input);
-}
-.elb-button-link-secondary:hover:not(:disabled) {
-  background: var(--bg-button-hover);
-}
-.elb-button-link-md {
-  padding: 12px 32px;
-  font-size: var(--font-size-base);
-}
-.elb-button-link-lg {
-  padding: 16px 40px;
-  font-size: var(--font-size-xl);
-}
-.elb-button-group {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-@media (max-width: 799px) {
-  .elb-button-group {
-    width: 100%;
-  }
-  .elb-button-group .elb-button-link {
-    width: 100%;
-  }
-}
-@media (min-width: 1200px) {
-  .elb-button-group {
-    flex-direction: row;
-  }
+  background: var(--surface);
+  color: var(--fg);
 }
 .elb-code {
   flex: 1;
@@ -564,6 +209,7 @@
   flex-direction: column;
   position: relative;
   overflow: hidden;
+  background: var(--code-bg);
 }
 .elb-code > div {
   flex: 1;
@@ -588,7 +234,7 @@
   background: transparent !important;
 }
 .elb-code .monaco-editor .sticky-widget {
-  background: var(--bg-content) !important;
+  background: var(--code-bg) !important;
   border: none !important;
   outline: none !important;
   box-shadow: none !important;
@@ -604,15 +250,17 @@
   flex-direction: column;
   position: relative;
   overflow: hidden;
-  font-size: var(--monaco-font-size, 13px);
+  background: var(--code-bg);
+  color: var(--code-fg);
+  font-size: var(--type-code-step-size);
   line-height: 1.5;
-  font-family: var(--font-mono, "SF Mono", "Monaco", "Menlo", "Consolas", monospace);
+  font-family: var(--font-mono);
 }
 .elb-code-static pre.shiki,
 .elb-code-static pre {
   flex: 1;
   margin: 0 !important;
-  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px) !important;
+  padding: 8px 12px !important;
   background: transparent !important;
   font-family: inherit !important;
   font-size: inherit !important;
@@ -628,40 +276,22 @@
   background: transparent !important;
   display: block;
 }
-html[data-theme=dark] .shiki,
-html[data-theme=dark] .shiki span {
-  color: var(--shiki-dark) !important;
-  background-color: var(--shiki-dark-bg) !important;
-  font-style: var(--shiki-dark-font-style) !important;
-  font-weight: var(--shiki-dark-font-weight) !important;
-  text-decoration: var(--shiki-dark-text-decoration) !important;
-}
-.elb-code-inline {
-  font-family: var(--font-mono);
-  font-size: 0.9em;
-  padding: 0.125rem 0.375rem;
-  border-radius: var(--radius-button);
-  background-color: var(--bg-code-inline);
-  border: 1px solid var(--border-input);
-  color: var(--color-text);
-  white-space: nowrap;
-}
 .elb-preview-footer {
   display: grid;
   grid-auto-flow: column;
   grid-auto-columns: 1fr;
   flex: 1;
   align-self: stretch;
-  background: var(--bg-footer);
+  background: var(--bg-2);
 }
 .elb-preview-btn {
   padding: 6px 6px;
-  font-size: var(--font-size-toggle);
+  font-size: var(--type-product-caption-size);
   font-weight: 600;
-  color: var(--color-text-button);
+  color: var(--fg-2);
   border: 0;
   background: transparent;
-  transition: color 0.2s ease, background 0.2s ease;
+  transition: color var(--motion) var(--ease), background var(--motion) var(--ease);
   position: relative;
   cursor: pointer;
   text-align: center;
@@ -674,11 +304,11 @@ html[data-theme=dark] .shiki span {
   justify-content: center;
 }
 .elb-preview-btn:hover {
-  color: var(--color-text-button-hover);
-  background: var(--bg-button-hover);
+  color: var(--fg);
+  background: var(--surface-2);
 }
 .elb-preview-btn:active {
-  background: var(--bg-button-active);
+  background: var(--surface);
 }
 .elb-preview-btn:not(:last-child)::after {
   content: "";
@@ -687,161 +317,49 @@ html[data-theme=dark] .shiki span {
   top: 20%;
   height: 60%;
   width: 1px;
-  background: var(--border-footer);
+  background: var(--border);
   opacity: 0.3;
 }
 .elb-preview-btn.highlight-globals {
-  color: var(--highlight-globals);
+  color: var(--event-globals);
 }
 .elb-preview-btn.highlight-context {
-  color: var(--highlight-context);
+  color: var(--event-context);
 }
 .elb-preview-btn.highlight-entity {
-  color: var(--highlight-entity);
+  color: var(--event-entity);
 }
 .elb-preview-btn.highlight-property {
-  color: var(--highlight-property);
+  color: var(--event-property);
 }
 .elb-preview-btn.highlight-action {
-  color: var(--highlight-action);
-}
-.elb-toggle-container {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-.elb-toggle {
-  position: relative;
-  width: 48px;
-  height: 24px;
-  background: var(--color-primary, #3b82f6);
-  border: none;
-  border-radius: 12px;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-  padding: 0;
-  outline: none;
-}
-.elb-toggle:focus-visible {
-  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.2);
-}
-.elb-toggle-checked {
-  background: var(--border-input);
-}
-.elb-toggle-disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.elb-toggle-slider {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 20px;
-  height: 20px;
-  background: white;
-  border-radius: 50%;
-  transition: transform 0.2s ease;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-}
-.elb-toggle-checked .elb-toggle-slider {
-  transform: translateX(24px);
-}
-.elb-toggle-label {
-  font-family: var(--font-family-base);
-  font-size: var(--font-size-base);
-  color: var(--color-text);
-  user-select: none;
-  cursor: pointer;
-}
-.elb-spinner {
-  display: inline-block;
-  border: 2px solid var(--border-input);
-  border-top-color: var(--color-button-primary);
-  border-radius: 50%;
-  animation: elb-spin 0.6s linear infinite;
-}
-.elb-spinner--sm {
-  width: 1rem;
-  height: 1rem;
-}
-.elb-spinner--md {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-.elb-spinner--lg {
-  width: 2rem;
-  height: 2rem;
-}
-@keyframes elb-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-.elb-dropdown {
-  position: relative;
-  display: inline-block;
-}
-.elb-dropdown__trigger {
-  cursor: pointer;
-  user-select: none;
-}
-.elb-dropdown__trigger:focus {
-  outline: 2px solid var(--border-input-focus);
-  outline-offset: 2px;
-  border-radius: var(--radius-button);
-}
-.elb-dropdown__panel {
-  position: absolute;
-  top: 100%;
-  margin-top: var(--spacing-xs);
-  min-width: 12rem;
-  background-color: var(--bg-dropdown);
-  border: 1px solid var(--border-box);
-  border-radius: var(--radius-box);
-  box-shadow: var(--shadow-lg);
-  z-index: var(--z-dropdown);
-  padding: var(--spacing-xs) 0;
-}
-.elb-dropdown__panel--left {
-  left: 0;
+  color: var(--event-action);
 }
-.elb-dropdown__panel--right {
-  right: 0;
-}
-.elb-dropdown__item {
-  display: block;
-  width: 100%;
-  padding: var(--spacing-sm) var(--spacing-md);
-  font-size: var(--font-size-sm);
-  font-family: inherit;
-  text-align: left;
-  color: var(--color-text);
-  background: none;
-  border: none;
+.elb-explorer-toggle {
+  display: inline-grid;
+  place-items: center;
+  margin: 0;
+  padding: 4px 10px;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-xs);
+  background: var(--surface);
+  color: var(--fg);
+  font-family: var(--font-sans);
+  font-size: var(--type-product-small-size);
+  font-weight: 600;
+  line-height: var(--type-product-small-line-height);
   cursor: pointer;
-  transition: background-color 0.1s ease;
+  transition: background-color var(--motion) var(--ease), border-color var(--motion) var(--ease);
 }
-.elb-dropdown__item:hover:not(:disabled) {
-  background-color: var(--bg-dropdown-option-hover);
+.elb-explorer-toggle:hover {
+  background: var(--surface-2);
 }
-.elb-dropdown__item:focus {
-  outline: none;
-  background-color: var(--bg-dropdown-option-hover);
-}
-.elb-dropdown__item--danger {
-  color: var(--color-button-danger);
-}
-.elb-dropdown__item--danger:hover:not(:disabled) {
-  background-color: var(--color-alert-error-bg);
-}
-.elb-dropdown__item--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+.elb-explorer-toggle__label {
+  grid-area: 1/1;
+  white-space: nowrap;
 }
-.elb-dropdown__divider {
-  height: 1px;
-  margin: var(--spacing-xs) 0;
-  background-color: var(--border-box);
+.elb-explorer-toggle__label[aria-hidden=true] {
+  visibility: hidden;
 }
 .elb-code-box {
   display: flex;
@@ -854,13 +372,12 @@ html[data-theme=dark] .shiki span {
   position: absolute;
   top: 100%;
   right: 0;
-  z-index: 10;
+  z-index: var(--z-dropdown);
   margin-top: 4px;
   padding: 8px 0;
-  background: var(--bg-dropdown);
-  border: 1px solid var(--border-box);
-  border-radius: var(--radius-button);
-  box-shadow: var(--shadow-dropdown);
+  background: var(--surface);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-xs);
   min-width: 140px;
 }
 .elb-codebox-settings-option {
@@ -868,61 +385,71 @@ html[data-theme=dark] .shiki span {
   align-items: center;
   gap: 8px;
   padding: 6px 12px;
-  font-size: var(--font-size-label);
-  color: var(--color-text);
+  font-size: var(--type-product-small-size);
+  color: var(--fg);
   cursor: pointer;
   user-select: none;
   white-space: nowrap;
 }
 .elb-codebox-settings-option:hover {
-  background: var(--bg-dropdown-option-hover);
+  background: var(--surface-2);
 }
 .elb-codebox-settings-option input[type=checkbox] {
   margin: 0;
   cursor: pointer;
 }
+.elb-codebox-placeholder {
+  position: absolute;
+  inset: 0 0 auto;
+  margin: 0;
+  padding: 8px 12px;
+  color: var(--fg-3);
+  font-family: var(--font-sans);
+  font-size: var(--type-product-small-size);
+  line-height: var(--type-product-small-line-height);
+  pointer-events: none;
+}
 .elb-codebox-marker-badge {
   display: flex;
   align-items: center;
   gap: 3px;
   padding: 2px 6px;
   border: none;
-  border-radius: var(--radius-button);
+  border-radius: var(--radius-xs);
   cursor: pointer;
-  font-size: calc(var(--font-size-base) - 2px);
-  font-weight: var(--font-weight-semibold);
+  font-size: var(--type-product-caption-size);
+  font-weight: 600;
   font-family: var(--font-mono);
   line-height: 1;
-  transition: all 0.15s;
+  transition: all var(--motion) var(--ease);
 }
 .elb-codebox-marker-badge svg {
   flex-shrink: 0;
 }
 .elb-codebox-marker-badge--error {
-  color: var(--color-alert-error-text);
+  color: var(--danger);
   background: transparent;
 }
 .elb-codebox-marker-badge--error:hover {
-  background: var(--color-alert-error-bg);
+  background: var(--danger-bg);
 }
 .elb-codebox-marker-badge--warning {
-  color: var(--color-alert-warning-text);
+  color: var(--warning);
   background: transparent;
 }
 .elb-codebox-marker-badge--warning:hover {
-  background: var(--color-alert-warning-bg);
+  background: var(--warning-bg);
 }
 .elb-codebox-marker-menu {
   position: absolute;
   top: 100%;
   right: 0;
-  z-index: 10;
+  z-index: var(--z-dropdown);
   margin-top: 4px;
   padding: 4px 0;
-  background: var(--bg-dropdown);
-  border: 1px solid var(--border-box);
-  border-radius: var(--radius-button);
-  box-shadow: var(--shadow-dropdown);
+  background: var(--surface);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-xs);
   min-width: 200px;
   max-width: 340px;
   max-height: 200px;
@@ -937,17 +464,17 @@ html[data-theme=dark] .shiki span {
   border: none;
   background: none;
   cursor: pointer;
-  font-size: calc(var(--font-size-base) - 2px);
-  color: var(--color-text);
+  font-size: var(--type-product-caption-size);
+  color: var(--fg);
   text-align: left;
 }
 .elb-codebox-marker-menu-item:hover {
-  background: var(--bg-dropdown-option-hover);
+  background: var(--surface-2);
 }
 .elb-codebox-marker-menu-line {
   flex-shrink: 0;
   font-family: var(--font-mono);
-  font-weight: var(--font-weight-semibold);
+  font-weight: 600;
   opacity: 0.6;
 }
 .elb-codebox-marker-menu-msg {
@@ -955,8 +482,39 @@ html[data-theme=dark] .shiki span {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.elb-code-diff-box__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.elb-code-diff-box__summary {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--type-product-caption-size);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+.elb-code-diff-box__added {
+  color: var(--success);
+}
+.elb-code-diff-box__deleted {
+  color: var(--danger);
+}
+.elb-code-diff-box__modified {
+  color: var(--fg-2);
+}
+.elb-code-diff-box__toggle .elb-explorer-btn {
+  padding: 2px 8px;
+  font-size: var(--type-product-caption-size);
+  font-weight: 500;
+  user-select: none;
+}
 .elb-code-snippet .elb-code-static {
-  font-size: 15px;
+  font-size: var(--type-code-command-size);
+}
+.elb-code-view--fit {
+  --height-code-view-max: 600px;
 }
 .elb-code-view--fit.elb-explorer-box {
   height: auto;
@@ -973,12 +531,12 @@ html[data-theme=dark] .shiki span {
   position: absolute;
   top: 6px;
   right: 6px;
-  z-index: 1;
+  z-index: var(--z-raised);
   display: flex;
-  background: var(--bg-box);
-  border-radius: var(--radius-button);
+  background: var(--code-bar);
+  border-radius: var(--radius-xs);
   opacity: 0;
-  transition: opacity 0.15s;
+  transition: opacity var(--motion) var(--ease);
 }
 .elb-explorer-content:hover > .elb-code-view-actions,
 .elb-code-view-actions:focus-within {
@@ -989,11 +547,15 @@ html[data-theme=dark] .shiki span {
     opacity: 1;
   }
 }
+.elb-step-example {
+  --step-example-min-box-width: 220px;
+  --step-example-max-height: 360px;
+}
 .elb-step-example-boxes {
   display: flex;
   flex-wrap: wrap;
   align-items: stretch;
-  gap: var(--spacing-grid-gap);
+  gap: 12px;
 }
 .elb-step-example .elb-step-example-boxes > .elb-explorer-box {
   flex: 1 1 var(--step-example-min-box-width);
@@ -1014,68 +576,11 @@ html[data-theme=dark] .shiki span {
   border: none;
   display: block;
 }
-.token.attr-name {
-  color: white !important;
-}
-.token.attr-name[data-elb],
-.token.attr-name[data-elbaction],
-.token.attr-name[data-elbglobals],
-.token.attr-name[data-elbcontext],
-.token.attr-name[data-elbproperty] {
-  color: var(--highlight-property) !important;
-}
 @container grid-container (max-width: 799px) {
   .elb-preview-content {
     min-height: 300px;
   }
 }
-.elb-explorer-btn {
-  padding: var(--spacing-button);
-  background: transparent;
-  border: none;
-  border-radius: var(--radius-button);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-text-button);
-  transition: all 0.15s;
-}
-.elb-explorer-btn:hover {
-  background: var(--bg-button-hover);
-  color: var(--color-text-button-hover);
-}
-.elb-explorer-btn.active {
-  background: var(--bg-button-active);
-  color: var(--color-text-button-active);
-  box-shadow: var(--shadow-button-active);
-  font-weight: var(--font-weight-semibold);
-}
-.elb-explorer-button-group {
-  display: flex;
-  background: var(--bg-button-group);
-  border-radius: var(--radius-button-group);
-  padding: var(--spacing-button-group);
-  border: 1px solid var(--border-button-group);
-}
-.elb-explorer-controls {
-  padding: 8px 0 12px 0;
-  display: flex;
-  justify-content: flex-end;
-}
-.elb-explorer-toggle {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: var(--font-size-toggle);
-  color: var(--color-text-toggle);
-  cursor: pointer;
-  user-select: none;
-}
-.elb-explorer-toggle input[type=checkbox] {
-  margin: 0;
-  cursor: pointer;
-}
 .elb-architecture-flow {
   container-type: inline-size;
   width: 100%;
@@ -1095,12 +600,12 @@ html[data-theme=dark] .shiki span {
   }
 }
 .elb-architecture-flow__title {
-  font-size: var(--font-size-base, 16px);
-  font-weight: var(--font-weight-semibold, 600);
+  font-size: var(--type-product-body-size);
+  font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   text-align: center;
-  color: var(--color-text-muted, #6b7280);
+  color: var(--fg-2);
 }
 .elb-architecture-flow__title--desktop {
   display: none;
@@ -1141,15 +646,15 @@ html[data-theme=dark] .shiki span {
 }
 .elb-architecture-flow__section {
   padding: 16px;
-  border-radius: 12px;
-  border: 1px solid var(--border-box, rgba(128, 128, 128, 0.3));
-  background-color: var(--bg-box, transparent);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border);
+  background-color: var(--surface);
 }
 .elb-architecture-flow__section-title {
   display: block;
-  font-size: calc(var(--font-size-base, 16px) - 2px);
+  font-size: var(--type-product-caption-size);
   font-weight: 500;
-  color: var(--color-text-muted, #6b7280);
+  color: var(--fg-2);
   margin-bottom: 12px;
 }
 .elb-architecture-flow__items {
@@ -1161,7 +666,7 @@ html[data-theme=dark] .shiki span {
   display: flex;
   align-items: center;
   gap: 12px;
-  color: var(--color-text, currentColor);
+  color: var(--fg);
 }
 .elb-architecture-flow__item-icon {
   width: 20px;
@@ -1176,18 +681,18 @@ html[data-theme=dark] .shiki span {
   height: 20px;
 }
 .elb-architecture-flow__item-label {
-  font-size: var(--font-size-base, 16px);
+  font-size: var(--type-product-body-size);
   white-space: nowrap;
 }
 .elb-architecture-flow__more {
-  font-size: calc(var(--font-size-base, 16px) - 2px);
+  font-size: var(--type-product-caption-size);
   font-style: italic;
-  color: var(--color-text-muted, #6b7280);
+  color: var(--fg-2);
   opacity: 0.7;
   text-align: center;
 }
 .elb-architecture-flow__arrow {
-  color: var(--color-button-primary, #01b5e2);
+  color: var(--link);
 }
 .elb-architecture-flow__arrow > svg {
   width: 32px;
@@ -1233,8 +738,8 @@ html[data-theme=dark] .shiki span {
 }
 .elb-property-table__container {
   overflow: visible;
-  border-radius: var(--radius-box);
-  border: 1px solid var(--border-box);
+  border-radius: var(--radius-xs);
+  border: 1px solid var(--border);
   width: 100%;
   box-sizing: border-box;
   container-type: inline-size;
@@ -1247,27 +752,27 @@ html[data-theme=dark] .shiki span {
   width: 100%;
   table-layout: auto;
   border-collapse: collapse;
-  font-size: calc(var(--font-size-base) - 1px);
-  background: var(--bg-box);
+  font-size: var(--type-product-small-size);
+  background: var(--surface);
   display: table;
 }
 .elb-property-table thead {
-  background: var(--bg-header);
+  background: var(--bg-2);
 }
 .elb-property-table th {
   padding: 12px 16px;
   text-align: left;
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-text-label);
-  border-bottom: 2px solid var(--border-box);
-  font-size: calc(var(--font-size-base) - 2px);
+  font-weight: 600;
+  color: var(--fg-2);
+  border-bottom: 2px solid var(--border);
+  font-size: var(--type-product-caption-size);
   text-transform: uppercase;
   letter-spacing: 0.5px;
   white-space: nowrap;
 }
 .elb-property-table td {
   padding: 12px 16px;
-  border-bottom: 1px solid var(--border-box);
+  border-bottom: 1px solid var(--border);
   vertical-align: top;
 }
 .elb-property-table tbody tr:last-child td {
@@ -1275,16 +780,16 @@ html[data-theme=dark] .shiki span {
   padding-bottom: 12px;
 }
 .elb-property-table__property-name {
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-button-primary);
+  font-weight: 600;
+  color: var(--link);
   font-family: var(--font-mono);
-  font-size: calc(var(--font-size-base) - 2px);
+  font-size: var(--type-product-caption-size);
 }
 .elb-property-table__row--nested {
-  background: var(--bg-header);
+  background: var(--bg-2);
 }
 .elb-property-table__row--nested .elb-property-table__property-cell {
-  border-left: 2px solid var(--border-box);
+  border-left: 2px solid var(--border);
 }
 .elb-property-table__group-toggle {
   display: inline-flex;
@@ -1295,16 +800,16 @@ html[data-theme=dark] .shiki span {
   background: none;
   border: none;
   cursor: pointer;
-  color: var(--color-text-label);
+  color: var(--fg-2);
   vertical-align: baseline;
 }
 .elb-property-table__group-toggle:hover {
-  color: var(--color-button-primary);
+  color: var(--link);
 }
 .elb-property-table__property-type {
-  color: var(--color-text);
+  color: var(--fg);
   font-family: var(--font-mono);
-  font-size: calc(var(--font-size-base) - 3px);
+  font-size: var(--type-product-caption-size);
   white-space: nowrap;
 }
 .elb-property-table__property-type--truncated {
@@ -1323,7 +828,7 @@ html[data-theme=dark] .shiki span {
     linear-gradient(
       to right,
       transparent,
-      var(--bg-box));
+      var(--surface));
   pointer-events: none;
 }
 .elb-property-table__type-button {
@@ -1335,7 +840,7 @@ html[data-theme=dark] .shiki span {
   text-align: left;
   display: block;
   width: 100%;
-  transition: opacity 0.2s ease;
+  transition: opacity var(--motion) var(--ease);
 }
 .elb-property-table__type-button:hover {
   opacity: 0.7;
@@ -1345,13 +850,13 @@ html[data-theme=dark] .shiki span {
     linear-gradient(
       to right,
       transparent,
-      var(--bg-input-hover));
+      var(--surface-2));
 }
 .elb-property-table__required-icon {
-  color: var(--color-button-danger);
+  color: var(--danger);
   font-weight: bold;
   margin-left: 4px;
-  font-size: 1.1em;
+  font-size: var(--type-product-small-size);
 }
 .elb-property-table__action-cell {
   text-align: center;
@@ -1367,7 +872,7 @@ html[data-theme=dark] .shiki span {
 }
 .elb-property-table__description {
   line-height: 1.4;
-  color: var(--color-text);
+  color: var(--fg);
   word-break: break-word;
   overflow-wrap: anywhere;
   min-width: 0;
@@ -1376,21 +881,21 @@ html[data-theme=dark] .shiki span {
   background: none;
   border: none;
   padding: 6px;
-  border-radius: var(--radius-button);
+  border-radius: var(--radius-xs);
   cursor: pointer;
-  color: var(--color-button-primary);
+  color: var(--link);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  transition: background-color 0.2s ease;
+  transition: background-color var(--motion) var(--ease);
 }
 .elb-property-table__more-button:hover {
-  background: var(--bg-button-hover);
+  background: var(--surface-2);
 }
 .elb-property-table__required-notice {
   margin-top: 0;
-  font-size: calc(var(--font-size-base) - 2px);
-  color: var(--color-text-muted);
+  font-size: var(--type-product-caption-size);
+  color: var(--fg-2);
   font-style: italic;
 }
 .elb-property-table__modal-backdrop {
@@ -1399,58 +904,57 @@ html[data-theme=dark] .shiki span {
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--backdrop);
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1000;
+  z-index: var(--z-modal);
   padding: 20px;
 }
 .elb-property-table__modal-content {
-  background: var(--bg-box);
-  border-radius: var(--radius-box);
-  box-shadow: var(--shadow-dropdown);
+  background: var(--surface);
+  border-radius: var(--radius-xs);
   max-width: 600px;
   width: 100%;
   max-height: 80vh;
   overflow-y: auto;
-  border: 1px solid var(--border-box);
+  border: 1px solid var(--border-strong);
 }
 .elb-property-table__modal-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px 24px 16px;
-  border-bottom: 1px solid var(--border-box);
+  border-bottom: 1px solid var(--border);
 }
 .elb-property-table__modal-title {
   margin: 0;
-  font-size: 1.25rem;
-  font-weight: var(--font-weight-semibold);
+  font-size: var(--type-product-heading-size);
+  font-weight: 600;
   display: flex;
   align-items: center;
 }
 .elb-property-table__modal-property-name {
   font-family: var(--font-mono);
-  color: var(--color-button-primary);
-  font-weight: var(--font-weight-semibold);
-  font-size: 1rem;
+  color: var(--link);
+  font-weight: 600;
+  font-size: var(--type-product-title-size);
 }
 .elb-property-table__close-button {
   background: none;
   border: none;
   padding: 8px;
-  border-radius: var(--radius-button);
+  border-radius: var(--radius-xs);
   cursor: pointer;
-  color: var(--color-text-muted);
+  color: var(--fg-2);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  transition: color 0.2s ease, background-color 0.2s ease;
+  transition: color var(--motion) var(--ease), background-color var(--motion) var(--ease);
 }
 .elb-property-table__close-button:hover {
-  color: var(--color-text);
-  background: var(--bg-button-hover);
+  color: var(--fg);
+  background: var(--surface-2);
 }
 .elb-property-table__modal-body {
   padding: 20px 24px 24px;
@@ -1463,15 +967,15 @@ html[data-theme=dark] .shiki span {
 }
 .elb-property-table__modal-label {
   display: block;
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-text-label);
+  font-weight: 600;
+  color: var(--fg-2);
   margin-bottom: 6px;
-  font-size: calc(var(--font-size-base) - 1px);
+  font-size: var(--type-product-small-size);
 }
 .elb-property-table__modal-type {
   font-family: var(--font-mono);
-  color: var(--color-text);
-  font-size: calc(var(--font-size-base) - 1px);
+  color: var(--fg);
+  font-size: var(--type-product-small-size);
 }
 .elb-property-table__modal-type--wrap {
   display: block;
@@ -1482,27 +986,27 @@ html[data-theme=dark] .shiki span {
 .elb-property-table__modal-description {
   margin: 0;
   line-height: 1.5;
-  color: var(--color-text);
+  color: var(--fg);
 }
 .elb-property-table__modal-default {
   font-family: var(--font-mono);
-  color: var(--color-text);
-  font-size: calc(var(--font-size-base) - 1px);
+  color: var(--fg);
+  font-size: var(--type-product-small-size);
 }
 .elb-property-table__modal-example {
   font-family: var(--font-mono);
-  color: var(--color-text);
-  font-size: calc(var(--font-size-base) - 1px);
+  color: var(--fg);
+  font-size: var(--type-product-small-size);
   display: block;
   white-space: pre-wrap;
   word-break: break-word;
 }
 @media (max-width: 768px) {
   .elb-property-table__container {
-    margin: 1rem 0 0;
+    margin: 16px 0 0;
   }
   .elb-property-table {
-    font-size: calc(var(--font-size-base) - 2px);
+    font-size: var(--type-product-caption-size);
     display: block;
   }
   .elb-property-table thead {
@@ -1513,20 +1017,20 @@ html[data-theme=dark] .shiki span {
   }
   .elb-property-table tr {
     display: block;
-    margin-bottom: 1rem;
-    border: 1px solid var(--border-box);
-    border-radius: var(--radius-box);
-    background: var(--bg-box);
+    margin-bottom: 16px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-xs);
+    background: var(--surface);
     position: relative;
   }
   .elb-property-table td {
     display: block;
     padding: 8px 12px;
-    border-bottom: 1px solid var(--border-box);
+    border-bottom: 1px solid var(--border);
     text-align: left;
   }
   .elb-property-table tbody tr:last-child td {
-    border-bottom: 1px solid var(--border-box);
+    border-bottom: 1px solid var(--border);
   }
   .elb-property-table td:last-child {
     border-bottom: none;
@@ -1534,15 +1038,15 @@ html[data-theme=dark] .shiki span {
   .elb-property-table td::before {
     content: attr(data-label);
     display: block;
-    font-weight: var(--font-weight-semibold);
-    color: var(--color-text-label);
-    font-size: calc(var(--font-size-base) - 3px);
+    font-weight: 600;
+    color: var(--fg-2);
+    font-size: var(--type-product-caption-size);
     text-transform: uppercase;
     margin-bottom: 4px;
   }
   .elb-property-table__property-name,
   .elb-property-table__property-type {
-    font-size: calc(var(--font-size-base) - 2px);
+    font-size: var(--type-product-caption-size);
   }
   .elb-property-table__property-cell {
     width: 100%;
@@ -1557,7 +1061,7 @@ html[data-theme=dark] .shiki span {
     width: 100%;
   }
   .elb-property-table__description {
-    font-size: calc(var(--font-size-base) - 2px);
+    font-size: var(--type-product-caption-size);
   }
   .elb-property-table__action-cell {
     position: absolute;
@@ -1577,7 +1081,7 @@ html[data-theme=dark] .shiki span {
     width: auto;
     min-width: 28px;
     height: 28px;
-    border-radius: 4px;
+    border-radius: var(--radius-xs);
   }
   .elb-property-table__more-button svg {
     width: 20px;
@@ -1599,8 +1103,8 @@ html[data-theme=dark] .shiki span {
   align-items: center;
   justify-content: center;
   min-height: 120px;
-  padding: 2rem 1rem;
-  color: var(--color-text-muted);
+  padding: 32px 16px;
+  color: var(--fg-2);
   font-style: italic;
   text-align: center;
 }
@@ -1623,7 +1127,7 @@ html[data-theme=dark] .shiki span {
     column-gap: 8px;
     row-gap: 4px;
     padding: 12px 16px;
-    border-bottom: 1px solid var(--border-box);
+    border-bottom: 1px solid var(--border);
   }
   .elb-property-table tbody tr:last-child {
     border-bottom: none;
@@ -1653,16 +1157,122 @@ html[data-theme=dark] .shiki span {
     grid-row: 2;
     grid-column: 1/-1;
     line-height: 1.4;
-    color: var(--color-text-muted);
-    font-size: calc(var(--font-size-base) - 1px);
+    color: var(--fg-2);
+    font-size: var(--type-product-small-size);
+  }
+}
+.elb-view-source {
+  --elb-view-source-width: 100%;
+  --elb-view-source-height: 0px;
+  --elb-view-source-radius: 0px;
+  --elb-view-source-inset: 0px;
+  --elb-view-source-inset-top: 0px;
+  --elb-view-source-inset-right: 0px;
+  position: relative;
+}
+.elb-view-source--stretch,
+.elb-view-source--stretch > .elb-view-source__content {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+}
+.elb-view-source__content[hidden] {
+  display: none;
+}
+.elb-view-source__toolbar {
+  position: absolute;
+  top: calc(var(--elb-view-source-inset-top) + 8px);
+  right: calc(var(--elb-view-source-inset-right) + 8px);
+  z-index: var(--z-raised);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: stretch;
+  gap: 4px;
+  max-width: calc(100% - 16px);
+  font-family: var(--font-sans);
+  font-size: var(--type-product-small-size);
+  line-height: var(--type-product-small-line-height);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--motion) var(--ease);
+}
+.elb-view-source__notice,
+.elb-view-source__reset {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-xs);
+  background: var(--surface);
+}
+.elb-view-source__notice {
+  gap: 4px;
+  padding: 0 8px;
+  color: var(--fg);
+}
+.elb-view-source__notice svg {
+  flex: none;
+  color: var(--warning);
+}
+.elb-view-source__notice:empty {
+  position: absolute;
+  padding: 0;
+  border: 0;
+}
+.elb-view-source__reset {
+  justify-content: center;
+  margin: 0;
+  padding: 7px;
+  color: var(--fg-2);
+  cursor: pointer;
+  transition: background-color var(--motion) var(--ease), color var(--motion) var(--ease);
+}
+.elb-view-source__reset:hover {
+  background: var(--surface-2);
+  color: var(--fg);
+}
+.elb-view-source__code {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: var(--elb-view-source-width);
+  max-width: 100%;
+  height: max(var(--elb-view-source-height), 160px);
+  padding: var(--elb-view-source-inset);
+}
+.elb-view-source__surface {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  border-radius: var(--elb-view-source-radius);
+  background: var(--code-bg);
+  isolation: isolate;
+}
+.elb-view-source--code > .elb-view-source__toolbar,
+.elb-view-source--edited > .elb-view-source__toolbar,
+.elb-view-source--notice > .elb-view-source__toolbar {
+  opacity: 1;
+  pointer-events: auto;
+}
+.elb-view-source:hover:not(:has(.elb-view-source:hover)) > .elb-view-source__toolbar,
+.elb-view-source:has(:focus-visible):not(:has(.elb-view-source :focus-visible)) > .elb-view-source__toolbar {
+  opacity: 1;
+  pointer-events: auto;
+}
+@supports not selector(:has(*)) {
+  .elb-view-source:hover > .elb-view-source__toolbar,
+  .elb-view-source:focus-within > .elb-view-source__toolbar {
+    opacity: 1;
+    pointer-events: auto;
   }
 }
 .elb-explorer-box {
   display: flex;
   flex-direction: column;
-  background: var(--bg-box);
-  border: 1px solid var(--border-box);
-  border-radius: var(--radius-box);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xs);
   overflow: hidden;
   box-sizing: border-box;
   min-height: 200px;
@@ -1690,31 +1300,66 @@ html[data-theme=dark] .shiki span {
   min-height: 0;
   max-height: none;
 }
+.elb-explorer-box--code {
+  background: var(--code-bg);
+  border-color: var(--code-border);
+}
+.elb-explorer-box--code > .elb-explorer-header,
+.elb-explorer-box--code > .elb-explorer-tabs,
+.elb-explorer-box--code > .elb-explorer-footer {
+  background: var(--code-bar);
+  border-color: var(--code-border);
+}
+.elb-explorer-box--code > .elb-explorer-content {
+  background: var(--code-bg);
+}
 .elb-explorer-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--spacing-header);
-  background: var(--bg-header);
-  border-bottom: 1px solid var(--border-header);
+  padding: 6px 10px;
+  background: var(--bg-2);
+  border-bottom: 1px solid var(--border);
   flex-shrink: 0;
   height: 36px;
   box-sizing: border-box;
 }
 .elb-explorer-label {
-  font-size: var(--font-size-label);
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-text-label);
+  font-size: var(--type-product-small-size);
+  font-weight: 600;
+  color: var(--fg-2);
   user-select: none;
 }
-.elb-explorer-footer {
+.elb-explorer-box-error {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--spacing-footer);
-  background: var(--bg-footer);
-  border-top: 1px solid var(--border-footer);
-  flex-shrink: 0;
+  align-items: baseline;
+  gap: 6px;
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--danger);
+  background: var(--danger-bg);
+  color: var(--fg);
+  font-family: var(--font-sans);
+  font-size: var(--type-product-small-size);
+  line-height: var(--type-product-small-line-height);
+  flex-shrink: 0;
+  overflow-wrap: anywhere;
+}
+.elb-explorer-box-error svg {
+  flex: none;
+  align-self: center;
+  color: var(--danger);
+}
+.elb-explorer-box-error strong {
+  font-weight: 600;
+}
+.elb-explorer-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 10px;
+  background: var(--bg-2);
+  border-top: 1px solid var(--border);
+  flex-shrink: 0;
   height: 40px;
   box-sizing: border-box;
 }
@@ -1725,7 +1370,7 @@ html[data-theme=dark] .shiki span {
   flex: 1;
   min-height: 0;
   position: relative;
-  background: var(--bg-box);
+  background: var(--surface);
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -1737,62 +1382,2494 @@ html[data-theme=dark] .shiki span {
   flex: 1;
   min-height: 0;
 }
-.elb-explorer-button-group {
-  display: flex;
-  background: var(--bg-button-group);
-  border-radius: var(--radius-button-group);
-  padding: var(--spacing-button-group);
-  border: 1px solid var(--border-button-group);
-}
 .elb-explorer-tabs {
   display: flex;
   align-items: center;
-  background: var(--bg-header);
-  border-bottom: 1px solid var(--border-header);
+  background: var(--bg-2);
+  border-bottom: 1px solid var(--border);
   flex-shrink: 0;
   min-height: 36px;
   box-sizing: border-box;
 }
 .elb-explorer-tab {
-  padding: 0.5rem 1rem;
-  font-size: var(--font-size-label);
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-text-muted);
+  padding: 8px 16px;
+  font-size: var(--type-product-small-size);
+  font-weight: 600;
+  color: var(--fg-2);
   background: transparent;
   border: none;
   border-bottom: 2px solid transparent;
   cursor: pointer;
-  transition: color 0.15s ease, border-color 0.15s ease;
+  transition: color var(--motion) var(--ease), border-color var(--motion) var(--ease);
   user-select: none;
 }
 .elb-explorer-tab:hover {
-  color: var(--color-text-label);
+  color: var(--fg);
 }
 .elb-explorer-tab--active {
-  color: #01b5e2;
-  border-bottom-color: #01b5e2;
+  color: var(--link);
+  border-bottom-color: var(--primary);
 }
 .elb-explorer-tab-actions {
   margin-left: auto;
-  padding-right: 0.5rem;
+  padding-right: 8px;
 }
 .elb-explorer-traffic-lights {
   display: flex;
-  gap: 0.5rem;
-  padding: 0 1rem;
+  gap: 8px;
+  padding: 0 16px;
   align-items: center;
 }
 .elb-explorer-traffic-light {
-  width: 0.75rem;
-  height: 0.75rem;
-  border-radius: 50%;
+  width: 12px;
+  height: 12px;
+  border-radius: var(--radius-full);
+  background-color: var(--border-strong);
+}
+@layer components {
+  .elb-pg {
+    --elb-pg-panel: var(--viz-bg);
+    --elb-pg-bar: color-mix(in srgb, var(--viz-bg) 60%, var(--viz-code-bg));
+    --elb-pg-code: var(--viz-code-bg);
+    --elb-pg-line: var(--viz-surface);
+    --elb-pg-line-2: color-mix( in srgb, var(--viz-surface) 70%, var(--viz-code-bg) );
+    --elb-pg-text: var(--viz-fg);
+    --elb-pg-muted: var(--viz-fg-2);
+    --elb-pg-dim: var(--viz-comment);
+    --elb-pg-code-fg: var(--code-fg);
+    --elb-pg-line-height: 1.75;
+    box-sizing: border-box;
+    max-width: 1320px;
+    margin: 0 auto;
+    padding: 56px var(--gutter) var(--section-y);
+    color: var(--fg);
+    font-family: var(--font-sans);
+  }
+  .elb-pg__head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 16px 48px;
+    padding-bottom: 28px;
+  }
+  .elb-pg__head > .elb-pg__intro > .elb-eyebrow {
+    margin-bottom: 14px;
+  }
+  .elb-pg__title {
+    margin: 0 0 12px;
+    color: var(--fg);
+    font-family: var(--type-heading-xl-family);
+    font-size: clamp(30px, 3.6vw, var(--type-heading-xl-size));
+    line-height: 1.12;
+    font-weight: var(--type-heading-xl-weight);
+    letter-spacing: -0.02em;
+    text-wrap: balance;
+  }
+  .elb-pg__lead {
+    max-width: 62ch;
+    margin: 0;
+    color: var(--fg-2);
+    font-size: var(--type-title-item-size);
+    line-height: var(--type-body-line-height);
+    text-wrap: pretty;
+  }
+  .elb-pg__reset .elb-icon {
+    width: 15px;
+    height: 15px;
+  }
+  .elb-pg__grid {
+    display: grid;
+    gap: 16px;
+    align-items: stretch;
+    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr);
+    grid-template-areas: "comp event mapping" "comp result result";
+  }
+  .elb-pg-panel {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    overflow: hidden;
+    color: var(--elb-pg-text);
+    background: var(--elb-pg-panel);
+    border: 1px solid var(--viz-border);
+    border-radius: var(--radius-lg);
+  }
+  .elb-pg-panel--comp {
+    grid-area: comp;
+  }
+  .elb-pg-panel--event {
+    grid-area: event;
+  }
+  .elb-pg-panel--mapping {
+    grid-area: mapping;
+  }
+  .elb-pg-panel--result {
+    grid-area: result;
+  }
+  .elb-pg-bar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-height: 46px;
+    padding: 0 8px 0 14px;
+    background: var(--elb-pg-bar);
+    border-bottom: 1px solid var(--elb-pg-line);
+  }
+  .elb-pg-step {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 20px;
+    height: 20px;
+    border: 1px solid var(--primary);
+    border-radius: var(--radius-full);
+    color: var(--link);
+    font: 600 var(--type-viz-legend-size) var(--font-mono);
+  }
+  .elb-pg-name {
+    margin: 0;
+    color: var(--elb-pg-text);
+    font-family: var(--font-sans);
+    font-size: var(--type-small-size);
+    font-weight: 600;
+    line-height: 1.4;
+  }
+  .elb-pg-meta {
+    color: var(--elb-pg-dim);
+    font: var(--type-product-caption-size) var(--font-mono);
+  }
+  .elb-pg-meta--edit {
+    color: var(--event-entity);
+  }
+  .elb-pg-meta--end {
+    margin-left: auto;
+    padding-right: 8px;
+  }
+  .elb-pg-copy {
+    display: inline-flex;
+    margin-left: auto;
+    padding: 8px;
+    color: var(--elb-pg-muted);
+    background: none;
+    border: 0;
+    border-radius: 6px;
+    cursor: pointer;
+  }
+  .elb-pg-copy:hover:not(:disabled) {
+    color: var(--elb-pg-text);
+    background: var(--elb-pg-line-2);
+  }
+  .elb-pg-copy:disabled {
+    cursor: default;
+    opacity: 0.4;
+  }
+  .elb-pg-tabs {
+    display: flex;
+    gap: 2px;
+    margin-left: 8px;
+  }
+  .elb-pg-tab {
+    padding: 6px 10px;
+    color: var(--elb-pg-muted);
+    background: transparent;
+    border: 0;
+    border-radius: 6px;
+    font: 500 var(--type-product-small-size) var(--font-sans);
+    cursor: pointer;
+  }
+  .elb-pg-tab[aria-selected=true] {
+    color: var(--elb-pg-text);
+    background: var(--elb-pg-line-2);
+  }
+  .elb-pg-pane {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+  .elb-pg-chips {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--elb-pg-line-2);
+  }
+  .elb-pg-chips > span {
+    margin-right: 4px;
+    color: var(--elb-pg-dim);
+    font: var(--type-product-caption-size) var(--font-mono);
+  }
+  .elb-pg-chip {
+    --elb-pg-chip: var(--event-entity);
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 3px 10px;
+    color: var(--elb-pg-muted);
+    background: transparent;
+    border: 1px solid var(--viz-border);
+    border-radius: var(--radius-full);
+    font: 500 var(--type-product-caption-size) var(--font-mono);
+    cursor: pointer;
+  }
+  .elb-pg-chip i {
+    width: 7px;
+    height: 7px;
+    background: var(--viz-line-number);
+    border-radius: var(--radius-full);
+  }
+  .elb-pg-chip[aria-pressed=true] {
+    color: var(--elb-pg-text);
+    background: color-mix(in srgb, var(--viz-fg) 4%, transparent);
+    border-color: var(--elb-pg-chip);
+  }
+  .elb-pg-chip[aria-pressed=true] i {
+    background: var(--elb-pg-chip);
+  }
+  .elb-pg-chip--property {
+    --elb-pg-chip: var(--event-property);
+  }
+  .elb-pg-chip--action {
+    --elb-pg-chip: var(--event-action);
+  }
+  .elb-pg-chip--context {
+    --elb-pg-chip: var(--event-context);
+  }
+  .elb-pg-chip--globals {
+    --elb-pg-chip: var(--event-globals);
+  }
+  .elb-pg-preview {
+    flex: 1;
+    min-height: 440px;
+    padding: 24px 18px;
+    color: var(--elb-pg-text);
+    background: var(--elb-pg-code);
+    font-family: var(--font-sans);
+  }
+  .elb-pg-editor {
+    position: relative;
+    flex: 1;
+    background: var(--elb-pg-code);
+  }
+  .elb-pg-editor pre,
+  .elb-pg-editor textarea {
+    position: absolute;
+    inset: 0;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 14px 16px;
+    font: var(--type-code-step-size)/var(--elb-pg-line-height) var(--font-mono);
+    white-space: pre;
+    tab-size: 2;
+  }
+  .elb-pg-editor pre {
+    overflow: hidden;
+    color: var(--elb-pg-code-fg);
+    background: transparent;
+    border-radius: 0;
+    pointer-events: none;
+  }
+  .elb-pg-editor pre > div {
+    min-height: calc(var(--elb-pg-line-height) * 1em);
+  }
+  .elb-pg-editor textarea {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    color: transparent;
+    background: transparent;
+    border: 0;
+    outline: none;
+    resize: none;
+    caret-color: var(--elb-pg-text);
+  }
+  .elb-pg-editor textarea::selection {
+    color: transparent;
+    background: color-mix(in srgb, var(--primary) 35%, transparent);
+  }
+  .elb-pg-editor textarea:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--focus);
+  }
+  .elb-pg-editor__on {
+    background: color-mix(in srgb, var(--primary) 8%, transparent);
+    box-shadow: inset 2px 0 0 var(--primary);
+  }
+  .elb-pg-editor--tall {
+    min-height: 480px;
+  }
+  .elb-pg-status {
+    padding: 10px 14px;
+    color: var(--elb-pg-dim);
+    border-bottom: 1px solid var(--elb-pg-line-2);
+    font: var(--type-product-caption-size) var(--font-mono);
+  }
+  .elb-pg-note {
+    padding: 9px 14px;
+    color: var(--event-context);
+    background: color-mix(in srgb, var(--event-context) 8%, transparent);
+    border-bottom: 1px solid var(--elb-pg-line-2);
+    font-size: var(--type-product-small-size);
+  }
+  .elb-pg-error {
+    padding: 8px 14px;
+    color: var(--event-property);
+    background: color-mix(in srgb, var(--event-property) 10%, transparent);
+    border-bottom: 1px solid var(--elb-pg-line-2);
+    font: var(--type-product-caption-size) var(--font-mono);
+  }
+  .elb-pg-scroll {
+    flex: none;
+    box-sizing: border-box;
+    height: 400px;
+    min-height: 0;
+    overflow: auto;
+    padding: 12px 0;
+    color: var(--elb-pg-code-fg);
+    background: var(--elb-pg-code);
+    font: var(--type-code-step-size)/var(--elb-pg-line-height) var(--font-mono);
+  }
+  .elb-pg-scroll:focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: -2px;
+  }
+  .elb-pg-panel--event .elb-pg-scroll,
+  .elb-pg-scroll--map {
+    flex-grow: 1;
+  }
+  .elb-pg-scroll--map {
+    position: relative;
+    height: 446px;
+    padding: 0;
+    overflow: hidden;
+  }
+  .elb-pg-out {
+    min-height: 120px;
+    padding: 12px 0;
+    color: var(--elb-pg-code-fg);
+    background: var(--elb-pg-code);
+    font: var(--type-code-step-size)/var(--elb-pg-line-height) var(--font-mono);
+  }
+  .elb-pg-ln {
+    padding-right: 14px;
+    text-indent: -14px;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+  .elb-pg-sent {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: var(--event-entity);
+    font: var(--type-product-caption-size) var(--font-mono);
+  }
+  .elb-pg-sent::before {
+    content: "";
+    width: 7px;
+    height: 7px;
+    background: currentColor;
+    border-radius: var(--radius-full);
+  }
+  .elb-pg-c-key,
+  .elb-pg-c-globals {
+    color: var(--event-globals);
+  }
+  .elb-pg-c-str {
+    color: var(--syntax-string);
+  }
+  .elb-pg-c-num {
+    color: var(--syntax-number);
+  }
+  .elb-pg-c-punct {
+    color: var(--viz-fg-2);
+  }
+  .elb-pg-c-tag,
+  .elb-pg-c-property {
+    color: var(--event-property);
+  }
+  .elb-pg-c-kw,
+  .elb-pg-c-action {
+    color: var(--event-action);
+  }
+  .elb-pg-c-fn {
+    color: var(--syntax-function);
+  }
+  .elb-pg-c-dim {
+    color: var(--elb-pg-dim);
+  }
+  .elb-pg-c-entity {
+    color: var(--event-entity);
+  }
+  .elb-pg-c-context {
+    color: var(--event-context);
+  }
+  @media (max-width: 1127px) {
+    .elb-pg__grid {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      grid-template-areas: "comp event" "comp mapping" "result result";
+    }
+    .elb-pg-scroll,
+    .elb-pg-scroll--map {
+      height: 240px;
+    }
+  }
+  @media (max-width: 747px) {
+    .elb-pg__grid {
+      grid-template-columns: minmax(0, 1fr);
+      grid-template-areas: "comp" "event" "mapping" "result";
+    }
+    .elb-pg-scroll,
+    .elb-pg-scroll--map {
+      height: 360px;
+    }
+  }
+}
+@layer components {
+  .elb-btn {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    font-family: var(--type-body-family);
+    font-weight: 600;
+    font-size: var(--type-body-size);
+    line-height: var(--type-body-line-height);
+    padding: 12px 24px;
+    border-radius: var(--radius-md);
+    border: 1px solid transparent;
+    cursor: pointer;
+    text-decoration: none;
+    transition: border-color var(--motion) var(--ease), filter var(--motion) var(--ease);
+  }
+  .elb-btn:hover {
+    text-decoration: none;
+  }
+  .elb-btn--primary {
+    background: var(--primary);
+    color: var(--on-primary);
+  }
+  .elb-btn--primary:hover {
+    filter: brightness(1.08);
+    color: var(--on-primary);
+  }
+  .elb-btn--secondary {
+    background: var(--surface);
+    color: var(--fg);
+    border-color: var(--border);
+  }
+  .elb-btn--secondary:hover {
+    border-color: var(--primary);
+    color: var(--fg);
+  }
+  .elb-btn--block {
+    width: 100%;
+  }
+}
+@layer components {
+  .elb-code-inline {
+    font-family: var(--font-mono);
+    font-size: var(--type-code-inline-size);
+    background: var(--surface-2);
+    border: 1px solid var(--border);
+    padding: 0.1em 0.4em;
+    border-radius: var(--radius-sm);
+    color: var(--fg);
+  }
+}
+@layer components {
+  .elb-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 14px;
+    font-family: var(--font-viz-mono);
+    font-size: var(--type-viz-legend-size);
+    color: var(--viz-fg-2);
+    background: var(--viz-bg);
+    padding: 12px 16px;
+    border-radius: var(--radius-lg);
+  }
+  .elb-legend__item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+  .elb-legend__swatch {
+    display: inline-block;
+    width: 9px;
+    height: 9px;
+    border-radius: 2px;
+  }
 }
-.elb-explorer-traffic-light--red {
-  background-color: #ff5f56;
+@layer components {
+  .elb-icon {
+    display: inline-block;
+    flex: none;
+    vertical-align: middle;
+  }
+  .elb-icon--check {
+    color: var(--primary);
+  }
+}
+@layer components {
+  .elb-eyebrow {
+    margin: 0;
+    color: var(--link);
+    font-family: var(--type-eyebrow-family);
+    font-size: var(--type-eyebrow-size);
+    line-height: var(--type-eyebrow-line-height);
+    font-weight: var(--type-eyebrow-weight);
+    letter-spacing: var(--type-eyebrow-tracking);
+    text-transform: uppercase;
+  }
+  .elb-eyebrow--label {
+    font-family: var(--type-label-family);
+    font-size: var(--type-label-size);
+    line-height: var(--type-label-line-height);
+    font-weight: var(--type-label-weight);
+    letter-spacing: var(--type-label-tracking);
+  }
+  .elb-eyebrow--muted {
+    color: var(--fg-3);
+  }
+}
+@layer components {
+  .elb-stat {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding: 16px;
+    background: var(--surface-2);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-faq);
+  }
+  .elb-stat__value {
+    display: flex;
+    color: var(--primary);
+    font-family: var(--type-display-family);
+    font-size: var(--type-footer-statement-size);
+    line-height: 1;
+    font-weight: var(--type-display-weight);
+    letter-spacing: -0.03em;
+  }
+  .elb-stat__label {
+    margin: 0;
+    color: var(--fg-2);
+    font-family: var(--type-small-family);
+    font-size: var(--type-small-size);
+    line-height: var(--type-small-line-height);
+    font-weight: 400;
+  }
+}
+@layer components {
+  .elb-text {
+    margin: 0;
+    color: var(--fg-2);
+    font-family: var(--type-body-family);
+    font-size: var(--type-body-size);
+    line-height: var(--type-body-line-height);
+    font-weight: var(--type-body-weight);
+    text-wrap: pretty;
+  }
+  .elb-text--lg {
+    font-family: var(--type-body-lg-family);
+    font-size: var(--type-body-lg-size);
+    line-height: var(--type-body-lg-line-height);
+    font-weight: var(--type-body-lg-weight);
+  }
+  .elb-text--fg {
+    color: var(--fg);
+  }
+}
+@layer components {
+  .elb-text-link {
+    color: var(--link);
+    font-weight: 500;
+    text-decoration: none;
+    transition: color var(--motion) var(--ease);
+  }
+  .elb-text-link:hover {
+    text-decoration: underline;
+  }
+  .elb-text-link--muted {
+    color: var(--fg-2);
+  }
+  .elb-text-link--muted:hover {
+    color: var(--fg);
+  }
+}
+@layer components {
+  .elb-card {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3-5);
+    min-width: 0;
+    color: var(--fg);
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    transition: border-color var(--motion) var(--ease);
+  }
+  .elb-card--pad-sm {
+    padding: var(--card-pad-sm);
+  }
+  .elb-card--pad-md {
+    padding: var(--card-pad);
+  }
+  .elb-card--pad-lg {
+    padding: 32px;
+  }
+  .elb-card--radius-xl {
+    border-radius: var(--radius-xl);
+  }
+  .elb-card--hover:not(.elb-card--highlight):hover {
+    border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
+  }
+  .elb-card--highlight {
+    border-color: var(--primary);
+    box-shadow: var(--plan-highlight);
+  }
+  .elb-card--glow {
+    overflow: hidden;
+  }
+  .elb-card--glow::after {
+    content: "";
+    position: absolute;
+    right: -120px;
+    top: -160px;
+    width: 360px;
+    height: 360px;
+    background:
+      radial-gradient(
+        closest-side,
+        var(--glow),
+        transparent 72%);
+    pointer-events: none;
+  }
+  .elb-card--glow > * {
+    position: relative;
+    z-index: var(--z-raised);
+  }
+}
+@layer components {
+  .elb-cmd {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: 12px 18px;
+    color: var(--fg);
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    font-family: var(--type-code-command-family);
+    font-size: var(--type-code-command-size);
+    line-height: var(--type-code-command-line-height);
+    font-weight: var(--type-code-command-weight);
+    cursor: pointer;
+    transition: border-color var(--motion) var(--ease);
+  }
+  .elb-cmd:hover {
+    border-color: var(--primary);
+  }
+  .elb-cmd__prompt {
+    color: var(--fg-3);
+  }
+  .elb-cmd__icon {
+    display: inline-flex;
+    color: var(--fg-3);
+  }
+  .elb-cmd__icon--done {
+    color: var(--primary);
+  }
+  .elb-cmd__status {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+}
+@layer components {
+  .elb-photo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    color: var(--fg-3);
+    background:
+      repeating-linear-gradient(
+        45deg,
+        var(--surface-2) 0 6px,
+        var(--border) 6px 12px);
+    font-family: var(--type-viz-code-family);
+    font-size: var(--type-viz-legend-size);
+  }
+  .elb-photo--viz {
+    color: var(--viz-comment);
+    background:
+      repeating-linear-gradient(
+        45deg,
+        var(--viz-surface) 0 6px,
+        var(--viz-border) 6px 12px);
+  }
+}
+@layer components {
+  .elb-checklist {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px 28px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    color: var(--fg-2);
+    font-family: var(--type-ui-family);
+    font-size: var(--type-ui-size);
+    line-height: var(--type-ui-line-height);
+    font-weight: 400;
+  }
+  .elb-checklist--center {
+    justify-content: center;
+  }
+  .elb-checklist--stack {
+    flex-direction: column;
+    flex-wrap: nowrap;
+    gap: 9px;
+  }
+  .elb-checklist__item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+  .elb-checklist--stack > .elb-checklist__item {
+    align-items: flex-start;
+    gap: 10px;
+  }
+  .elb-checklist--stack > .elb-checklist__item > .elb-icon {
+    margin-top: 4px;
+  }
+}
+@layer components {
+  .elb-sh {
+    display: flex;
+    flex-direction: column;
+    max-width: 760px;
+    margin: 0;
+  }
+  .elb-sh > .elb-eyebrow {
+    margin-bottom: 16px;
+  }
+  .elb-sh--center {
+    align-items: center;
+    margin: 0 auto;
+    text-align: center;
+  }
+  .elb-sh__title {
+    margin: 0;
+    color: var(--fg);
+    text-wrap: balance;
+  }
+  .elb-sh__title--display {
+    max-width: 20ch;
+    font-family: var(--type-display-family);
+    font-size: clamp(38px, 6vw, var(--type-display-size));
+    line-height: var(--type-display-line-height);
+    font-weight: var(--type-display-weight);
+    letter-spacing: var(--type-display-tracking);
+  }
+  .elb-sh__title--lg {
+    font-family: var(--type-heading-lg-family);
+    font-size: clamp(28px, 3.6vw, var(--type-heading-lg-size));
+    line-height: var(--type-heading-lg-line-height);
+    font-weight: var(--type-heading-lg-weight);
+    letter-spacing: var(--type-heading-lg-tracking);
+  }
+  .elb-sh__title--md {
+    font-family: var(--type-heading-md-family);
+    font-size: clamp(26px, 3.2vw, var(--type-heading-md-size));
+    line-height: var(--type-heading-md-line-height);
+    font-weight: var(--type-heading-md-weight);
+    letter-spacing: var(--type-heading-md-tracking);
+  }
+  .elb-sh__highlight {
+    color: var(--primary);
+  }
+  .elb-sh__lead {
+    margin: 14px 0 0;
+    color: var(--fg-2);
+    font-family: var(--type-lead-family);
+    font-size: var(--type-title-item-size);
+    line-height: var(--type-lead-line-height);
+    font-weight: var(--type-lead-weight);
+  }
+  .elb-sh__lead--hero {
+    max-width: 58ch;
+    font-size: clamp(18px, 2vw, var(--type-lead-size));
+  }
+}
+@layer components {
+  .elb-problem-card {
+    gap: var(--space-2);
+  }
+  .elb-problem-card__title {
+    display: flex;
+    align-items: baseline;
+    gap: var(--space-3);
+    margin: 0;
+    color: var(--fg);
+    font-family: var(--type-title-card-family);
+    font-size: var(--type-title-card-size);
+    line-height: var(--type-title-card-line-height);
+    font-weight: var(--type-title-card-weight);
+  }
+  .elb-problem-card__number {
+    color: var(--link);
+    font-family: var(--type-code-step-family);
+    font-size: var(--type-code-step-size);
+    line-height: var(--type-code-step-line-height);
+    font-weight: var(--type-code-step-weight);
+  }
+  .elb-problem-card__text {
+    margin: 0;
+    color: var(--fg-2);
+    font-family: var(--type-body-family);
+    font-size: var(--type-body-size);
+    line-height: var(--type-body-line-height);
+    font-weight: var(--type-body-weight);
+  }
+}
+@layer components {
+  .elb-feature {
+    display: grid;
+    grid-template-columns: 20px minmax(0, 1fr);
+    gap: var(--space-3-5);
+    align-items: start;
+  }
+  .elb-feature > .elb-icon {
+    margin-top: 3px;
+  }
+  .elb-feature__title {
+    margin: 0 0 var(--space-2);
+    color: var(--fg);
+    font-family: var(--type-title-item-family);
+    font-size: var(--type-title-item-size);
+    line-height: var(--type-title-item-line-height);
+    font-weight: var(--type-title-item-weight);
+  }
+  .elb-feature__text {
+    margin: 0 0 var(--space-2);
+    color: var(--fg-2);
+    font-family: var(--type-body-family);
+    font-size: var(--type-body-size);
+    line-height: var(--type-body-line-height);
+    font-weight: var(--type-body-weight);
+    text-wrap: pretty;
+  }
+  .elb-feature__link {
+    font-family: var(--type-small-family);
+    font-size: var(--type-small-size);
+    line-height: var(--type-small-line-height);
+    font-weight: 500;
+  }
+}
+@layer components {
+  .elb-faq {
+    box-sizing: border-box;
+    max-width: 900px;
+    color: var(--fg);
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-faq);
+  }
+  .elb-faq + .elb-faq {
+    margin-top: var(--space-3);
+  }
+  .elb-faq__question {
+    display: flex;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 18px 22px;
+    list-style: none;
+    cursor: pointer;
+    color: var(--fg);
+    font-family: var(--type-body-lg-family);
+    font-size: var(--type-body-lg-size);
+    line-height: var(--type-body-lg-line-height);
+    font-weight: 600;
+    transition: color var(--motion) var(--ease);
+  }
+  .elb-faq__question::-webkit-details-marker {
+    display: none;
+  }
+  .elb-faq__question::after {
+    content: "+";
+    flex: none;
+    color: var(--fg-3);
+    font-size: var(--type-lead-size);
+    line-height: 1;
+  }
+  .elb-faq__question:hover {
+    color: var(--link);
+  }
+  .elb-faq[open] > .elb-faq__question::after {
+    content: "\2212";
+  }
+  .elb-faq__answer {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    padding: 16px 22px 20px;
+    color: var(--fg-2);
+    border-top: 1px solid var(--border);
+    font-family: var(--type-body-family);
+    font-size: var(--type-body-size);
+    line-height: var(--type-body-line-height);
+    font-weight: var(--type-body-weight);
+  }
+  .elb-faq__answer > p {
+    max-width: 72ch;
+    margin: 0;
+  }
+}
+@layer components {
+  .elb-plan__title {
+    margin: 0;
+    color: var(--fg);
+    font-family: var(--type-title-plan-family);
+    font-size: var(--type-title-plan-size);
+    line-height: var(--type-title-plan-line-height);
+    font-weight: var(--type-title-plan-weight);
+    letter-spacing: var(--type-title-plan-tracking);
+  }
+  .elb-plan__text {
+    flex: 1;
+    margin: 0;
+    color: var(--fg-2);
+    font-family: var(--type-body-family);
+    font-size: var(--type-body-size);
+    line-height: var(--type-body-line-height);
+    font-weight: var(--type-body-weight);
+  }
+}
+@layer components {
+  .elb-case-card__title {
+    margin: 0;
+    color: var(--fg);
+    font-family: var(--type-title-plan-family);
+    font-size: var(--type-title-plan-size);
+    line-height: var(--type-title-plan-line-height);
+    font-weight: var(--type-title-plan-weight);
+    letter-spacing: var(--type-title-plan-tracking);
+    text-wrap: balance;
+  }
+  .elb-case-card__text {
+    margin: 0;
+    color: var(--fg-2);
+    font-family: var(--type-body-family);
+    font-size: var(--type-body-size);
+    line-height: var(--type-body-line-height);
+    font-weight: var(--type-body-weight);
+  }
+  .elb-case-card__stats {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
+    gap: 10px;
+  }
 }
-.elb-explorer-traffic-light--yellow {
-  background-color: #ffbd2e;
+@layer components {
+  .elb-highlight-card__title {
+    margin: 0;
+    color: var(--fg);
+    font-family: var(--type-kicker-lg-family);
+    font-size: clamp(22px, 2.4vw, var(--type-kicker-lg-size));
+    line-height: var(--type-kicker-lg-line-height);
+    font-weight: var(--type-kicker-lg-weight);
+    letter-spacing: var(--type-kicker-lg-tracking);
+    text-wrap: balance;
+  }
+  .elb-highlight-card__text {
+    flex: 1;
+    margin: 0;
+    color: var(--fg-2);
+    font-family: var(--type-body-lg-family);
+    font-size: var(--type-body-lg-size);
+    line-height: var(--type-body-lg-line-height);
+    font-weight: var(--type-body-lg-weight);
+    text-wrap: pretty;
+  }
+  .elb-highlight-card__cta {
+    align-self: flex-start;
+    margin-top: 6px;
+    padding: 10px 18px;
+    background: var(--surface-2);
+    font-family: var(--type-ui-family);
+    font-size: var(--type-ui-size);
+    line-height: var(--type-ui-line-height);
+    font-weight: 600;
+  }
+  .elb-highlight-card__cta:hover {
+    border-color: var(--primary);
+    color: var(--fg);
+  }
 }
-.elb-explorer-traffic-light--green {
-  background-color: #27c93f;
+@layer components {
+  .elb-browser {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    overflow: hidden;
+    color: var(--fg);
+    background: var(--surface);
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius-lg);
+  }
+  .elb-browser__bar {
+    container: elb-browser-bar/inline-size;
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--border);
+  }
+  .elb-browser__dots {
+    display: flex;
+    flex: none;
+    gap: 7px;
+  }
+  .elb-browser__dots > span {
+    width: 10px;
+    height: 10px;
+    background: var(--border-strong);
+    border-radius: var(--radius-full);
+  }
+  .elb-browser__address {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: var(--space-2);
+    min-width: 0;
+    padding: 5px 12px;
+    color: var(--fg-2);
+    background: var(--bg-2);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-full);
+    font-family: var(--type-small-family);
+    font-size: var(--type-small-size);
+    line-height: var(--type-small-line-height);
+  }
+  .elb-browser__url {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .elb-browser__reload,
+  .elb-browser__actions > :is(a, button),
+  .elb-browser__bookmark {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    color: var(--fg-2);
+    background: transparent;
+    border: 1px solid transparent;
+    text-decoration: none;
+    cursor: pointer;
+    transition:
+      color var(--motion) var(--ease),
+      background var(--motion) var(--ease),
+      border-color var(--motion) var(--ease);
+  }
+  .elb-browser__reload:hover:not(:disabled),
+  .elb-browser__actions > :is(a, button):hover:not(:disabled),
+  .elb-browser__bookmark:hover:not(:disabled) {
+    color: var(--fg);
+    background: var(--surface-2);
+  }
+  .elb-browser__reload:disabled,
+  .elb-browser__actions > :is(a, button):disabled,
+  .elb-browser__bookmark:disabled {
+    cursor: default;
+  }
+  .elb-browser__reload,
+  .elb-browser__actions > :is(a, button) {
+    justify-content: center;
+    padding: 6px;
+    border-radius: var(--radius-sm);
+  }
+  .elb-browser__actions {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: 4px;
+  }
+  .elb-browser__bookmarks {
+    display: flex;
+    gap: 4px;
+    padding: 6px 12px;
+    overflow-x: auto;
+    border-bottom: 1px solid var(--border);
+  }
+  .elb-browser__bookmark {
+    gap: 6px;
+    padding: 4px 10px;
+    border-radius: var(--radius-full);
+    font-family: var(--type-small-family);
+    font-size: var(--type-small-size);
+    line-height: var(--type-small-line-height);
+    white-space: nowrap;
+  }
+  .elb-browser__bookmark--active {
+    color: var(--fg);
+    background: var(--surface-2);
+    border-color: var(--border-strong);
+  }
+  .elb-browser__viewport {
+    position: relative;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+    background: var(--bg);
+  }
+  .elb-browser__viewport > iframe {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+  @container elb-browser-bar (max-width: 479px) {
+    .elb-browser__dots {
+      display: none;
+    }
+  }
+}
+@layer components {
+  .elb-quickstart {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 32px;
+  }
+  .elb-quickstart__steps {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr) 84px;
+    gap: 0 16px;
+    align-items: start;
+    align-self: stretch;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .elb-quickstart__step {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3-5);
+    min-width: 0;
+    margin: 0;
+  }
+  .elb-quickstart__head {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+  }
+  .elb-quickstart__num {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 32px;
+    height: 32px;
+    border: 1px solid var(--primary);
+    border-radius: var(--radius-full);
+    color: var(--link);
+    font-family: var(--font-mono);
+    font-size: var(--type-small-size);
+    font-weight: 600;
+  }
+  .elb-quickstart__title {
+    margin: 0;
+    color: var(--fg);
+    font-family: var(--type-title-card-family);
+    font-size: var(--type-title-card-size);
+    font-weight: var(--type-title-card-weight);
+    line-height: 1.3;
+  }
+  .elb-quickstart__copy {
+    margin: 0;
+    color: var(--fg-2);
+    font-family: var(--type-body-family);
+    font-size: var(--type-body-size);
+    line-height: var(--type-body-line-height);
+    text-wrap: pretty;
+  }
+  .elb-quickstart__arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 32px;
+    margin: 0;
+    color: var(--primary);
+  }
+  .elb-quickstart__arrow > svg {
+    overflow: visible;
+  }
+  .elb-quickstart__arrow--wave > svg {
+    transform: rotate(-4deg);
+  }
+  .elb-quickstart__arrow--loop > svg {
+    transform: rotate(3deg);
+  }
+  @media (max-width: 807px) {
+    .elb-quickstart__steps {
+      grid-auto-flow: row;
+      grid-template-columns: minmax(0, 1fr);
+      gap: 4px;
+    }
+    .elb-quickstart__arrow {
+      height: 64px;
+    }
+    .elb-quickstart__arrow--wave > svg {
+      transform: rotate(90deg);
+    }
+    .elb-quickstart__arrow--loop > svg {
+      transform: rotate(90deg) scaleY(-1);
+    }
+  }
+}
+@layer components {
+  .elb-section {
+    box-sizing: border-box;
+    padding: var(--section-y) 0;
+    color: var(--fg);
+    background: var(--bg);
+    border-top: 1px solid var(--border);
+    font-family: var(--type-body-family);
+    font-size: var(--type-body-size);
+    line-height: var(--type-body-line-height);
+  }
+  .elb-section--alt {
+    background: var(--bg-2);
+  }
+  .elb-section__inner {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--heading-gap);
+    max-width: var(--container);
+    margin: 0 auto;
+    padding: 0 var(--gutter);
+  }
+}
+@layer components {
+  .elb-card-grid {
+    --elb-card-grid-min: 280px;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--elb-card-grid-min)), 1fr));
+    gap: var(--space-5);
+  }
+  .elb-card-grid--min-280 {
+    --elb-card-grid-min: 280px;
+  }
+  .elb-card-grid--min-300 {
+    --elb-card-grid-min: 300px;
+  }
+  .elb-card-grid--min-420 {
+    --elb-card-grid-min: 420px;
+  }
+  .elb-card-grid--min-440 {
+    --elb-card-grid-min: 440px;
+  }
+  .elb-card-grid--features {
+    gap: var(--heading-gap) 48px;
+  }
+}
+@layer components {
+  .elb-split {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
+    row-gap: 24px;
+    column-gap: var(--split-gap);
+    align-items: start;
+  }
+  .elb-split__start,
+  .elb-split__end {
+    min-width: 0;
+  }
+  .elb-split--aside {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 48px;
+    align-items: flex-start;
+  }
+  .elb-split--aside > .elb-split__start {
+    flex: 1 1 320px;
+    max-width: 440px;
+  }
+  .elb-split--aside > .elb-split__end {
+    flex: 2 1 600px;
+  }
+}
+@layer components {
+  .elb-cluster {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-3);
+  }
+  .elb-cluster--links {
+    gap: var(--space-2) 24px;
+  }
+  .elb-cluster--center {
+    justify-content: center;
+  }
+  .elb-cluster--separated {
+    margin-top: var(--heading-gap);
+  }
+}
+@layer components {
+  .elb-hero {
+    position: relative;
+    box-sizing: border-box;
+    overflow: hidden;
+    padding: 104px 0 var(--section-y);
+    color: var(--fg);
+    background: var(--bg);
+    font-family: var(--type-body-family);
+    font-size: var(--type-body-size);
+    line-height: var(--type-body-line-height);
+  }
+  .elb-hero::before {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: -120px;
+    width: min(1000px, 140%);
+    height: 520px;
+    translate: -50% 0;
+    background:
+      radial-gradient(
+        closest-side,
+        var(--glow),
+        transparent 75%);
+    pointer-events: none;
+  }
+  .elb-hero__inner {
+    position: relative;
+    box-sizing: border-box;
+    max-width: var(--container);
+    margin: 0 auto;
+    padding: 0 var(--gutter);
+    text-align: center;
+  }
+  .elb-hero__actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--space-3);
+    margin-top: 34px;
+  }
+  .elb-hero__proof {
+    display: flex;
+    justify-content: center;
+    margin-top: 34px;
+  }
+  .elb-hero__demo {
+    margin-top: 56px;
+    text-align: left;
+  }
+}
+@layer components {
+  .elb-viz {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    color: var(--viz-fg);
+    background: var(--viz-bg);
+    border-radius: var(--radius-xl);
+    font-family: var(--type-viz-body-family);
+    font-size: var(--type-viz-body-size);
+    line-height: var(--type-viz-body-line-height);
+    font-weight: var(--type-viz-body-weight);
+    text-align: left;
+    container-type: inline-size;
+    -webkit-font-smoothing: antialiased;
+  }
+  .elb-viz *,
+  .elb-viz *::before,
+  .elb-viz *::after {
+    box-sizing: border-box;
+  }
+  .elb-viz--hero {
+    border: 1px solid var(--border);
+  }
+  .elb-viz--mapping {
+    overflow: hidden;
+    border: 1px solid var(--viz-border);
+  }
+  .elb-viz__body {
+    min-width: 0;
+  }
+  .elb-viz--hero > .elb-viz__body {
+    padding: 16px;
+  }
+  .elb-viz--teaser > .elb-viz__body {
+    padding: 24px;
+  }
+  @container (max-width: 639px) {
+    .elb-viz--hero > .elb-viz__body {
+      padding: 12px;
+    }
+    .elb-viz--teaser > .elb-viz__body {
+      padding: 16px;
+    }
+  }
+}
+@layer components {
+  .elb-viz-tok {
+    border-radius: var(--radius-xs);
+    transition: background var(--motion) var(--ease);
+  }
+  .elb-viz-tok--tag {
+    color: var(--viz-tag);
+  }
+  .elb-viz-tok--attr,
+  .elb-viz-tok--key {
+    color: var(--event-globals);
+  }
+  .elb-viz-tok--punct {
+    color: var(--viz-punct);
+  }
+  .elb-viz-tok--str {
+    color: var(--viz-string);
+  }
+  .elb-viz-tok--text {
+    color: var(--viz-fg);
+  }
+  .elb-viz-tok--kw,
+  .elb-viz-tok--fn {
+    color: var(--event-action);
+  }
+  .elb-viz-tok--num {
+    color: var(--viz-number);
+  }
+  .elb-viz-tok--value {
+    color: var(--event-entity);
+  }
+  .elb-viz-tok--mark-entity {
+    background: color-mix(in srgb, var(--event-entity) 16%, transparent);
+  }
+  .elb-viz-tok--mark-action {
+    background: color-mix(in srgb, var(--event-action) 16%, transparent);
+  }
+  .elb-viz-tok--mark-property {
+    background: color-mix(in srgb, var(--event-property) 16%, transparent);
+  }
+  .elb-viz-tok--mark-context {
+    background: color-mix(in srgb, var(--event-context) 16%, transparent);
+  }
+  .elb-viz-tok--mark-globals {
+    background: color-mix(in srgb, var(--event-globals) 16%, transparent);
+  }
+  .elb-viz-line {
+    display: flex;
+    align-items: stretch;
+    transition: background var(--motion) var(--ease);
+  }
+  .elb-viz-line__bar {
+    flex: none;
+    width: 3px;
+    background: transparent;
+    transition: background var(--motion) var(--ease);
+  }
+  .elb-viz-line__bar--entity {
+    background: var(--event-entity);
+  }
+  .elb-viz-line__bar--action {
+    background: var(--event-action);
+  }
+  .elb-viz-line__bar--property {
+    background: var(--event-property);
+  }
+  .elb-viz-line__bar--context {
+    background: var(--event-context);
+  }
+  .elb-viz-line__bar--globals {
+    background: var(--event-globals);
+  }
+  .elb-viz-line__number {
+    flex: none;
+    width: 30px;
+    padding-right: 14px;
+    color: var(--viz-line-number);
+    text-align: right;
+  }
+  .elb-viz-line__code {
+    min-width: 0;
+    padding-right: 16px;
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+  .elb-viz-caret {
+    --elb-viz-caret: 1;
+    display: inline-block;
+    width: 2px;
+    height: 1.15em;
+    margin-left: 1px;
+    vertical-align: -0.2em;
+    background: var(--primary);
+    opacity: var(--elb-viz-caret);
+  }
+}
+@layer components {
+  .elb-viz-pill {
+    --elb-viz-pill: var(--event-entity);
+    display: inline-block;
+    padding: 0 7px;
+    color: var(--viz-bg);
+    background: var(--elb-viz-pill);
+    border: 1.5px solid var(--elb-viz-pill);
+    border-radius: var(--radius-xs);
+    font-family: var(--type-viz-code-family);
+    font-size: var(--type-viz-legend-size);
+    line-height: 16px;
+    font-weight: 500;
+    white-space: nowrap;
+  }
+  .elb-viz-pill--entity {
+    --elb-viz-pill: var(--event-entity);
+  }
+  .elb-viz-pill--action {
+    --elb-viz-pill: var(--event-action);
+  }
+  .elb-viz-pill--property {
+    --elb-viz-pill: var(--event-property);
+  }
+  .elb-viz-pill--context {
+    --elb-viz-pill: var(--event-context);
+  }
+  .elb-viz-pill--globals {
+    --elb-viz-pill: var(--event-globals);
+  }
+  .elb-viz-pill--outline {
+    padding: 0 6px;
+    color: var(--elb-viz-pill);
+    background: var(--viz-bg);
+  }
+}
+@layer components {
+  .elb-viz-thumb {
+    display: block;
+  }
+  .elb-viz-thumb__legs,
+  .elb-viz-thumb__seam,
+  .elb-viz-thumb__shine,
+  .elb-viz-thumb__wave,
+  .elb-viz-thumb__score {
+    fill: none;
+  }
+  .elb-viz-thumb--bug .elb-viz-thumb__ground {
+    fill: var(--viz-fg);
+  }
+  .elb-viz-thumb--bug .elb-viz-thumb__shadow {
+    fill: var(--viz-fg-2);
+  }
+  .elb-viz-thumb--bug .elb-viz-thumb__ink {
+    fill: var(--viz-bg);
+  }
+  .elb-viz-thumb--bug .elb-viz-thumb__legs,
+  .elb-viz-thumb--bug .elb-viz-thumb__seam {
+    stroke: var(--viz-bg);
+  }
+  .elb-viz-thumb--bug .elb-viz-thumb__eye {
+    fill: var(--viz-fg);
+  }
+  .elb-viz-thumb--bug .elb-viz-thumb__shell {
+    fill: var(--viz-number);
+  }
+  .elb-viz-thumb--bug .elb-viz-thumb__shine {
+    stroke: color-mix(in srgb, var(--viz-number) 60%, var(--viz-fg));
+  }
+  .elb-viz-thumb--tech .elb-viz-thumb__ground {
+    fill: var(--viz-border);
+  }
+  .elb-viz-thumb--tech .elb-viz-thumb__badge {
+    fill: var(--viz-number);
+  }
+  .elb-viz-thumb--tech .elb-viz-thumb__dot {
+    fill: var(--viz-fg);
+  }
+  .elb-viz-thumb--tech .elb-viz-thumb__wave {
+    stroke: var(--viz-fg);
+  }
+  .elb-viz-thumb--food .elb-viz-thumb__ground {
+    fill: var(--viz-fg);
+  }
+  .elb-viz-thumb--food .elb-viz-thumb__plate {
+    fill: var(--viz-fg-2);
+  }
+  .elb-viz-thumb--food .elb-viz-thumb__loaf {
+    fill: var(--viz-number);
+  }
+  .elb-viz-thumb--food .elb-viz-thumb__crust {
+    fill: var(--viz-string);
+  }
+  .elb-viz-thumb--food .elb-viz-thumb__score {
+    stroke: var(--viz-fg);
+  }
+}
+@layer components {
+  .elb-viz-table {
+    display: flex;
+    flex: 1 1 400px;
+    flex-direction: column;
+    min-width: 0;
+    overflow: hidden;
+    background: var(--viz-bg);
+    border: 1px solid var(--viz-surface);
+    border-radius: var(--radius-lg);
+    font-family: var(--type-viz-code-family);
+    font-size: var(--type-viz-code-size);
+  }
+  .elb-viz-table__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    padding: 12px 16px;
+    color: var(--viz-fg-2);
+    border-bottom: 1px solid var(--viz-surface);
+  }
+  .elb-viz-table__keyword {
+    color: var(--event-action);
+  }
+  .elb-viz-table__source {
+    color: var(--viz-fg);
+  }
+  .elb-viz-table__live {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    color: var(--event-entity);
+  }
+  .elb-viz-table__dot {
+    width: 7px;
+    height: 7px;
+    background: var(--event-entity);
+    border-radius: var(--radius-full);
+  }
+  .elb-viz-table__body {
+    position: relative;
+    flex: 1;
+    min-height: 300px;
+  }
+  .elb-viz-table__scroll {
+    position: absolute;
+    inset: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+  .elb-viz-table__rows {
+    min-width: 454px;
+  }
+  .elb-viz-table__row {
+    --elb-viz-row-tint: 0;
+    --elb-viz-row-opacity: 1;
+    --elb-viz-row-shift: 0;
+    display: grid;
+    grid-template-columns: 38px 166px minmax(250px, 1fr);
+    border-bottom: 1px solid var(--viz-surface);
+    line-height: 1.4;
+  }
+  .elb-viz-table__row--header {
+    background: var(--viz-surface);
+    border-bottom-color: var(--viz-border);
+  }
+  .elb-viz-table__row--event {
+    background: color-mix(in srgb, var(--event-entity) calc(var(--elb-viz-row-tint) * 1%), transparent);
+    opacity: var(--elb-viz-row-opacity);
+    transform: translateX(calc(var(--elb-viz-row-shift) * 1px));
+  }
+  .elb-viz-table__cell {
+    min-width: 0;
+    padding: 10px;
+    overflow: hidden;
+    color: var(--viz-fg);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    border-right: 1px solid var(--viz-surface);
+  }
+  .elb-viz-table__cell:last-child {
+    border-right: 0;
+  }
+  .elb-viz-table__row--header > .elb-viz-table__cell {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    padding: 8px 10px;
+  }
+  .elb-viz-table__cell--n {
+    color: var(--viz-comment);
+    text-align: right;
+  }
+  .elb-viz-table__row--header > .elb-viz-table__cell--n {
+    font-size: var(--type-viz-legend-size);
+  }
+  .elb-viz-table__row--skeleton > .elb-viz-table__cell--n {
+    color: var(--viz-line-number);
+  }
+  .elb-viz-table__type {
+    color: var(--viz-comment);
+    font-size: var(--type-viz-legend-size);
+  }
+  .elb-viz-table__json {
+    color: var(--viz-punct);
+  }
+  .elb-viz-table__json-key {
+    color: var(--event-globals);
+  }
+  .elb-viz-table__json-value {
+    color: var(--viz-string);
+  }
+  .elb-viz-table__bar {
+    display: block;
+    width: 75%;
+    height: 8px;
+    margin: 5px 0;
+    background: var(--viz-surface);
+    border-radius: var(--radius-xs);
+  }
+  .elb-viz-table__row--skeleton:nth-child(odd) .elb-viz-table__bar:last-child {
+    width: 66%;
+  }
+  @container (max-width: 639px) {
+    .elb-viz-table__scroll {
+      overflow-x: hidden;
+    }
+    .elb-viz-table__rows {
+      min-width: 0;
+    }
+    .elb-viz-table__row {
+      grid-template-columns: minmax(0, 130px) minmax(0, 1fr);
+    }
+    .elb-viz-table__row > .elb-viz-table__cell--n {
+      display: none;
+    }
+  }
+}
+@layer components {
+  .elb-viz-mapping {
+    display: flex;
+    flex-direction: column;
+  }
+  .elb-viz-mapping__pick {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 18px 20px 0;
+  }
+  .elb-viz-mapping__label {
+    color: var(--viz-fg-2);
+    font-family: var(--type-viz-legend-family);
+    font-size: var(--type-viz-legend-size);
+    line-height: var(--type-viz-legend-line-height);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+  .elb-viz-mapping__chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+  }
+  .elb-viz-mapping__chip {
+    position: relative;
+    display: flex;
+    overflow: hidden;
+    padding: 0;
+    background: transparent;
+    border: 1px solid var(--viz-border);
+    border-radius: var(--radius-md);
+    font-family: var(--type-viz-code-family);
+    font-size: var(--type-viz-chip-size);
+    line-height: var(--type-viz-chip-line-height);
+    cursor: pointer;
+    transition: border-color var(--motion) var(--ease), background var(--motion) var(--ease);
+  }
+  .elb-viz-mapping__chip:hover {
+    border-color: var(--viz-comment);
+  }
+  .elb-viz-mapping__chip--active,
+  .elb-viz-mapping__chip--active:hover {
+    background: color-mix(in srgb, var(--primary) 8%, transparent);
+    border-color: var(--primary);
+  }
+  .elb-viz-mapping__chip-entity {
+    padding: 7px 10px;
+    color: var(--viz-fg);
+    background: color-mix(in srgb, var(--viz-fg) 4%, transparent);
+  }
+  .elb-viz-mapping__chip-action {
+    padding: 7px 10px;
+    color: var(--primary);
+  }
+  .elb-viz-mapping__event {
+    margin: 16px 20px 0;
+    padding: 10px 14px;
+    overflow-x: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--viz-border) transparent;
+    background: var(--viz-code-bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    font-family: var(--type-viz-code-family);
+    font-size: var(--type-viz-code-size);
+    line-height: 1.6;
+    white-space: pre;
+  }
+  .elb-viz-mapping__body {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 18px 20px 20px;
+  }
+  .elb-viz-mapping__comment {
+    color: var(--viz-comment);
+    font-family: var(--type-viz-code-family);
+    font-size: var(--type-viz-code-size);
+    font-style: italic;
+  }
+  .elb-viz-mapping__cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
+    gap: 10px;
+  }
+  .elb-viz-mapping__card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    min-width: 0;
+    padding: 12px 14px;
+    background: var(--viz-code-bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-faq);
+  }
+  .elb-viz-mapping__name {
+    font-size: var(--type-small-size);
+    font-weight: var(--type-small-weight);
+  }
+  .elb-viz-mapping__row {
+    display: flex;
+    align-items: baseline;
+    gap: 10px;
+    font-family: var(--type-viz-code-family);
+    font-size: var(--type-viz-code-size);
+    line-height: var(--type-viz-code-line-height);
+  }
+  .elb-viz-mapping__row--sends {
+    align-items: flex-start;
+  }
+  .elb-viz-mapping__tag {
+    flex: none;
+    width: 58px;
+    color: var(--viz-comment);
+    font-size: var(--type-viz-legend-size);
+  }
+  .elb-viz-mapping__rule,
+  .elb-viz-mapping__calls {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow-x: auto;
+    white-space: pre;
+    scrollbar-width: thin;
+    scrollbar-color: var(--viz-border) transparent;
+  }
+  .elb-viz-mapping__caption {
+    margin: 0;
+    padding: 18px 20px 20px;
+    color: var(--viz-punct);
+    border-top: 1px solid var(--viz-border);
+    font-family: var(--type-viz-body-family);
+    font-size: var(--type-viz-body-size);
+    line-height: 1.6;
+    text-wrap: pretty;
+  }
+  @container (max-width: 639px) {
+    .elb-viz-mapping__pick {
+      padding: 14px 14px 0;
+    }
+    .elb-viz-mapping__event {
+      margin: 14px 14px 0;
+    }
+    .elb-viz-mapping__body,
+    .elb-viz-mapping__caption {
+      padding: 14px;
+    }
+    .elb-viz-mapping__row {
+      flex-direction: column;
+      gap: 2px;
+    }
+    .elb-viz-mapping__rule,
+    .elb-viz-mapping__calls {
+      align-self: stretch;
+    }
+  }
+}
+@layer components {
+  .elb-viz-hero {
+    --elb-viz-fade: 1;
+    --elb-viz-card-opacity: 1;
+    --elb-viz-card-offset: 0;
+    --elb-viz-cursor-x: 22;
+    --elb-viz-cursor-y: 11;
+    --elb-viz-cursor-opacity: 0;
+    --elb-viz-ring-scale: 1;
+    --elb-viz-ring-opacity: 0;
+    --elb-viz-press: 1;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    align-items: stretch;
+  }
+  .elb-viz-hero__pane {
+    display: flex;
+    flex: 1.2 1 520px;
+    flex-direction: column;
+    min-width: 0;
+    overflow: hidden;
+    background: var(--viz-code-bg);
+    border: 1px solid var(--viz-surface);
+    border-radius: var(--radius-lg);
+  }
+  .elb-viz-hero__bar {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3-5);
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--viz-surface);
+  }
+  .elb-viz-hero__dots {
+    display: flex;
+    gap: 7px;
+  }
+  .elb-viz-hero__dots > span {
+    width: 10px;
+    height: 10px;
+    background: var(--viz-border);
+    border-radius: var(--radius-full);
+  }
+  .elb-viz-hero__file {
+    color: var(--primary);
+    font-family: var(--type-viz-code-family);
+    font-size: var(--type-viz-code-size);
+  }
+  .elb-viz-hero__code {
+    min-height: 268px;
+    padding: 12px 0 14px;
+    font-family: var(--type-viz-code-family);
+    font-size: var(--type-viz-chip-size);
+    line-height: 1.95;
+    opacity: var(--elb-viz-fade);
+  }
+  .elb-viz-hero__line--on {
+    background: color-mix(in srgb, var(--event-entity) 7%, transparent);
+  }
+  .elb-viz-hero__stage {
+    position: relative;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    padding: 34px 24px 28px;
+    background:
+      repeating-linear-gradient(
+        45deg,
+        var(--viz-code-bg) 0 8px,
+        var(--viz-bg) 8px 16px);
+    border-top: 1px solid var(--viz-surface);
+  }
+  .elb-viz-hero__card {
+    position: relative;
+    display: flex;
+    gap: var(--space-3-5);
+    width: 100%;
+    max-width: 430px;
+    padding: var(--space-3);
+    background: var(--viz-surface);
+    border: 1.5px solid var(--viz-border);
+    border-radius: var(--radius-faq);
+    opacity: var(--elb-viz-card-opacity);
+    transform: translateY(calc(var(--elb-viz-card-offset) * 1px));
+  }
+  .elb-viz-hero__card--tagged {
+    border-color: var(--event-entity);
+  }
+  .elb-viz-hero__pills {
+    position: absolute;
+    top: -10px;
+    left: 12px;
+    display: flex;
+    gap: 6px;
+  }
+  .elb-viz-hero__thumb {
+    position: relative;
+    flex: none;
+    width: 112px;
+    min-height: 86px;
+    overflow: hidden;
+    background: var(--viz-surface);
+    border-radius: var(--radius-sm);
+  }
+  .elb-viz-hero__thumb > .elb-viz-thumb {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .elb-viz-hero__text {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 4px;
+    min-width: 0;
+  }
+  .elb-viz-hero__kicker {
+    align-self: flex-start;
+    margin-left: -3px;
+    padding: 0 3px;
+    color: var(--viz-fg-2);
+    border-radius: var(--radius-xs);
+    font-family: var(--type-viz-code-family);
+    font-size: var(--type-viz-legend-size);
+    letter-spacing: 0.04em;
+    outline: 1.5px solid transparent;
+  }
+  .elb-viz-hero__title {
+    font-size: var(--type-viz-body-size);
+    font-weight: 600;
+    line-height: 1.3;
+    text-wrap: pretty;
+  }
+  .elb-viz-hero__mark {
+    border-radius: var(--radius-xs);
+    outline: 1.5px solid transparent;
+    outline-offset: 1px;
+  }
+  .elb-viz-hero__kicker--on,
+  .elb-viz-hero__mark--on {
+    outline-color: var(--event-property);
+    box-shadow: 0 0 10px 1px color-mix(in srgb, var(--event-property) 55%, transparent);
+  }
+  .elb-viz-hero__foot {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    margin-top: auto;
+    padding-top: 6px;
+  }
+  .elb-viz-hero__link {
+    position: relative;
+    margin-left: -5px;
+    padding: 1px 5px;
+    color: var(--primary);
+    border-radius: var(--radius-sm);
+    font-family: var(--type-viz-chip-family);
+    font-size: var(--type-viz-chip-size);
+    font-weight: var(--type-viz-chip-weight);
+    outline: 1.5px solid transparent;
+  }
+  .elb-viz-hero__link--on {
+    outline-color: var(--event-action);
+  }
+  .elb-viz-hero__cursor {
+    position: absolute;
+    left: calc(var(--elb-viz-cursor-x) * 1px);
+    top: calc(var(--elb-viz-cursor-y) * 1px);
+    width: 22px;
+    height: 22px;
+    margin: -11px 0 0 -11px;
+    pointer-events: none;
+    opacity: var(--elb-viz-cursor-opacity);
+  }
+  .elb-viz-hero__ring,
+  .elb-viz-hero__pointer {
+    position: absolute;
+    inset: 0;
+    border-radius: var(--radius-full);
+  }
+  .elb-viz-hero__ring {
+    border: 2px solid var(--event-entity);
+    opacity: var(--elb-viz-ring-opacity);
+    transform: scale(var(--elb-viz-ring-scale));
+  }
+  .elb-viz-hero__pointer {
+    background: color-mix(in srgb, var(--viz-fg) 22%, transparent);
+    border: 2px solid color-mix(in srgb, var(--viz-fg) 90%, transparent);
+    transform: scale(var(--elb-viz-press));
+  }
+  @container (max-width: 639px) {
+    .elb-viz-hero__pane,
+    .elb-viz-hero > .elb-viz-table {
+      flex-basis: 100%;
+    }
+    .elb-viz-hero__code {
+      font-size: var(--type-viz-code-size);
+    }
+    .elb-viz-hero__stage {
+      padding: 24px 12px;
+    }
+    .elb-viz-hero__thumb {
+      width: 88px;
+    }
+  }
+}
+@layer components {
+  .elb-viz-teaser {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+  }
+  .elb-viz-teaser__header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px 20px;
+  }
+  .elb-viz-teaser__steps {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+  }
+  .elb-viz-teaser__step {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: 6px 12px 6px 6px;
+    color: var(--viz-fg-2);
+    background: transparent;
+    border: 1px solid var(--viz-border);
+    border-radius: var(--radius-full);
+    font-family: var(--type-viz-chip-family);
+    font-size: var(--type-viz-chip-size);
+    line-height: var(--type-viz-chip-line-height);
+    font-weight: var(--type-viz-chip-weight);
+    cursor: pointer;
+    transition:
+      color var(--motion) var(--ease),
+      background var(--motion) var(--ease),
+      border-color var(--motion) var(--ease);
+  }
+  .elb-viz-teaser__step--active {
+    color: var(--viz-fg);
+    background: color-mix(in srgb, var(--primary) 10%, transparent);
+    border-color: var(--primary);
+  }
+  .elb-viz-teaser__step-number {
+    width: 20px;
+    height: 20px;
+    color: var(--viz-bg);
+    background: var(--viz-border);
+    border-radius: var(--radius-full);
+    font-size: var(--type-viz-legend-size);
+    line-height: 20px;
+    font-weight: 600;
+    text-align: center;
+  }
+  .elb-viz-teaser__step--done > .elb-viz-teaser__step-number {
+    background: var(--viz-comment);
+  }
+  .elb-viz-teaser__step--active > .elb-viz-teaser__step-number {
+    color: var(--on-primary);
+    background: var(--primary);
+  }
+  .elb-viz-teaser__legend > .elb-legend {
+    padding: 0;
+    background: none;
+  }
+  .elb-viz-teaser__caption {
+    min-height: 23px;
+    margin: 0;
+    color: var(--viz-punct);
+    font-family: var(--type-viz-body-family);
+    font-size: var(--type-viz-body-size);
+    line-height: var(--type-viz-body-line-height);
+    text-wrap: pretty;
+  }
+  .elb-viz-teaser__body {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    align-items: stretch;
+  }
+  .elb-viz-teaser__pane {
+    position: sticky;
+    top: calc(var(--header-h) + 16px);
+    flex: 1 1 380px;
+    align-self: flex-start;
+    min-width: 0;
+    padding: 4px 0 10px;
+    overflow: hidden;
+    background: var(--viz-code-bg);
+    border: 1px solid var(--viz-border);
+    border-radius: var(--radius-lg);
+  }
+  .elb-viz-teaser__scroll {
+    position: relative;
+    min-height: 140px;
+    max-height: min(640px, 100vh - var(--header-h) - 48px);
+    overflow: auto;
+    font-family: var(--type-viz-code-family);
+    font-size: var(--type-viz-code-size);
+  }
+  .elb-viz-teaser__line {
+    max-height: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition: max-height calc(var(--motion) * 2) var(--ease), opacity calc(var(--motion) * 2) var(--ease);
+  }
+  .elb-viz-teaser__line--visible {
+    max-height: 24px;
+    opacity: 1;
+  }
+  .elb-viz-teaser__line--file.elb-viz-teaser__line--visible {
+    max-height: 44px;
+  }
+  .elb-viz-teaser__line--dim {
+    opacity: 0.45;
+  }
+  .elb-viz-teaser__file {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+    padding: 14px 16px 4px 19px;
+    border-top: 1px solid transparent;
+  }
+  .elb-viz-teaser__file--separated {
+    border-top-color: var(--viz-surface);
+  }
+  .elb-viz-teaser__file-name {
+    color: var(--primary);
+  }
+  .elb-viz-teaser__file-level {
+    color: var(--viz-comment);
+  }
+  .elb-viz-teaser__code > .elb-viz-line__number {
+    width: 26px;
+    padding-right: 12px;
+    line-height: var(--type-viz-code-line-height);
+  }
+  .elb-viz-teaser__code > .elb-viz-line__code {
+    line-height: var(--type-viz-code-line-height);
+    white-space: pre;
+    word-break: normal;
+  }
+  .elb-viz-teaser__code--current-plain {
+    background: color-mix(in srgb, var(--viz-fg) 4%, transparent);
+  }
+  .elb-viz-teaser__code--current-entity {
+    background: color-mix(in srgb, var(--event-entity) 10%, transparent);
+  }
+  .elb-viz-teaser__code--current-action {
+    background: color-mix(in srgb, var(--event-action) 10%, transparent);
+  }
+  .elb-viz-teaser__code--current-property {
+    background: color-mix(in srgb, var(--event-property) 10%, transparent);
+  }
+  .elb-viz-teaser__code--current-context {
+    background: color-mix(in srgb, var(--event-context) 10%, transparent);
+  }
+  .elb-viz-teaser__code--current-globals {
+    background: color-mix(in srgb, var(--event-globals) 10%, transparent);
+  }
+  .elb-viz-teaser__pages {
+    display: flex;
+    flex: 1.1 1 420px;
+    flex-direction: column;
+    gap: 24px;
+    align-self: flex-start;
+    min-width: 0;
+    padding-top: 10px;
+  }
+  .elb-viz-teaser__page {
+    position: relative;
+    padding: 12px;
+    border: 1.5px dashed transparent;
+    border-radius: var(--radius-xl);
+    transition: border-color calc(var(--motion) * 2) var(--ease), background calc(var(--motion) * 2) var(--ease);
+  }
+  .elb-viz-teaser__page--on {
+    background: color-mix(in srgb, var(--event-globals) 4%, transparent);
+    border-color: var(--event-globals);
+  }
+  .elb-viz-teaser__page-pill {
+    position: absolute;
+    top: -10px;
+    left: 14px;
+  }
+  .elb-viz-teaser__list {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 14px;
+    border: 1.5px solid var(--viz-surface);
+    border-radius: var(--radius-lg);
+    transition: border-color calc(var(--motion) * 2) var(--ease), background calc(var(--motion) * 2) var(--ease);
+  }
+  .elb-viz-teaser__list--on {
+    background: color-mix(in srgb, var(--event-context) 5%, transparent);
+    border-color: var(--event-context);
+  }
+  .elb-viz-teaser__list-head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    min-height: 19px;
+  }
+  .elb-viz-teaser__list-label {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  .elb-viz-teaser__list-name {
+    color: var(--viz-fg-2);
+    font-family: var(--type-viz-code-family);
+    font-size: var(--type-viz-code-size);
+  }
+  .elb-viz-teaser__list-heading {
+    font-size: var(--type-small-size);
+    font-weight: var(--type-small-weight);
+  }
+  .elb-viz-teaser__cards {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: var(--space-3);
+  }
+  .elb-viz-teaser__card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    min-height: 224px;
+    padding: 10px;
+    background: transparent;
+    border: 1.5px dashed var(--viz-surface);
+    border-radius: var(--radius-faq);
+    transition: border-color calc(var(--motion) * 2) var(--ease), background calc(var(--motion) * 2) var(--ease);
+  }
+  .elb-viz-teaser__card--entity {
+    background: var(--viz-surface);
+    border-style: solid;
+    border-color: var(--event-entity);
+  }
+  .elb-viz-teaser__pills {
+    position: absolute;
+    top: -10px;
+    left: 10px;
+    display: flex;
+    gap: 4px;
+  }
+  .elb-viz-teaser__fade {
+    opacity: 0;
+    transition:
+      opacity calc(var(--motion) * 2) var(--ease),
+      outline-color calc(var(--motion) * 2) var(--ease),
+      box-shadow calc(var(--motion) * 2) var(--ease);
+  }
+  .elb-viz-teaser__fade--on {
+    opacity: 1;
+  }
+  .elb-viz-teaser__photo {
+    flex: none;
+    height: 86px;
+    border-radius: var(--radius-sm);
+  }
+  .elb-viz-teaser__kicker {
+    align-self: flex-start;
+    padding: 1px 6px;
+    color: var(--viz-fg);
+    background: var(--viz-border);
+    border-radius: var(--radius-xs);
+    font-family: var(--type-viz-code-family);
+    font-size: var(--type-viz-legend-size);
+    letter-spacing: 0.04em;
+    outline: 1.5px solid transparent;
+  }
+  .elb-viz-teaser__title {
+    align-self: flex-start;
+    border-radius: var(--radius-xs);
+    font-size: var(--type-small-size);
+    font-weight: var(--type-small-weight);
+    line-height: 1.3;
+    text-wrap: pretty;
+    outline: 1.5px solid transparent;
+    outline-offset: 2px;
+  }
+  .elb-viz-teaser__link {
+    align-self: flex-start;
+    margin-top: auto;
+    margin-left: -6px;
+    padding: 2px 6px;
+    color: var(--primary);
+    border-radius: var(--radius-xs);
+    font-family: var(--type-viz-chip-family);
+    font-size: var(--type-viz-chip-size);
+    font-weight: var(--type-viz-chip-weight);
+    outline: 1.5px solid transparent;
+  }
+  .elb-viz-teaser__kicker--on,
+  .elb-viz-teaser__title--on {
+    outline-color: var(--event-property);
+    box-shadow: 0 0 10px 1px color-mix(in srgb, var(--event-property) 50%, transparent);
+  }
+  .elb-viz-teaser__link--on {
+    outline-color: var(--event-action);
+    box-shadow: 0 0 10px 1px color-mix(in srgb, var(--event-action) 50%, transparent);
+  }
+  @container (max-width: 639px) {
+    .elb-viz-teaser__pane {
+      position: static;
+    }
+    .elb-viz-teaser__scroll {
+      max-height: 320px;
+    }
+    .elb-viz-teaser__cards {
+      grid-template-columns: minmax(0, 1fr);
+      row-gap: var(--space-5);
+    }
+    .elb-viz-teaser__card {
+      display: grid;
+      grid-template-columns: 72px minmax(0, 1fr);
+      align-content: start;
+      gap: 6px var(--space-3);
+      min-height: 0;
+    }
+    .elb-viz-teaser__photo {
+      grid-row: span 3;
+      height: auto;
+      min-height: 72px;
+    }
+    .elb-viz-teaser__kicker,
+    .elb-viz-teaser__title,
+    .elb-viz-teaser__link {
+      justify-self: start;
+    }
+    .elb-viz-teaser__link {
+      margin-top: 0;
+    }
+    .elb-viz-teaser__page--ahead,
+    .elb-viz-teaser__card--ahead {
+      display: none;
+    }
+  }
 }