@obsrviq/widgets 0.3.1 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obsrviq/widgets",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -28,9 +28,9 @@
   },
   "dependencies": {
     "lucide-react": "^0.468.0",
-    "@obsrviq/player": "0.3.1",
-    "@obsrviq/types": "0.4.0",
-    "@obsrviq/ui": "0.3.0"
+    "@obsrviq/player": "0.3.2",
+    "@obsrviq/ui": "0.3.0",
+    "@obsrviq/types": "0.4.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.17",

package/src/embed-css.ts

@@ -1,3 +1,3 @@
 // AUTO-GENERATED by scripts/build-embed-css.mjs — do not edit.
 // Concatenated stylesheets baked into the standalone <script> player bundle.
-export const EMBED_CSS = "/* Obsrviq design tokens (§16) — refined. Override any --lum-* var to white-label.\n   All neutrals carry a faint cool-blue hue (~232°) for identity; the accent is a\n   confident iris reserved for live / now / active + primary CTA. */\n:root,\n[data-lum-theme='dark'] {\n  /* ── Surface ramp: bg → surface → raised → overlay (cool-tinted neutrals) ── */\n  --lum-bg: #0a0b0f; /* app canvas */\n  --lum-surface: #101218; /* primary cards / sidebar / topbar */\n  --lum-surface-2: #171a22; /* raised: hover, inputs, nested panels */\n  --lum-raised: #1c2029; /* floats above surface (metric tiles, menus) */\n  --lum-overlay: #20242e; /* drawers / toasts / popovers (highest) */\n  --lum-border: #232733; /* hairline */\n  --lum-border-strong: #2e3340; /* emphasized dividers, input borders */\n  --lum-hairline: rgba(255, 255, 255, 0.06); /* top inner-highlight for material edges */\n\n  /* ── Text ramp (AA on --lum-surface) ── */\n  --lum-text: #eceef3; /* primary */\n  --lum-text-2: #b6bcc8; /* secondary body */\n  --lum-muted: #828a99; /* tertiary / labels */\n  --lum-faint: #5b6273; /* disabled / placeholder / axis ticks */\n\n  /* ── Accent: iris. Reserve for live/now/active + primary CTA only. ── */\n  --lum-accent: #6e76f1; /* iris-indigo */\n  --lum-accent-hover: #828aff;\n  --lum-accent-press: #5a62d8;\n  --lum-accent-soft: rgba(110, 118, 241, 0.14); /* active nav/row wash, chip bg */\n  --lum-accent-line: rgba(110, 118, 241, 0.4); /* accent hairline/border */\n  --lum-accent-contrast: #ffffff;\n  --lum-accent-glow: 0 0 24px rgba(110, 118, 241, 0.3); /* logo dot, live pulse */\n\n  /* ── Semantic. Each gets fg / soft bg / line for badges & rows. ── */\n  --lum-ok: #3ecf8e;\n  --lum-ok-soft: rgba(62, 207, 142, 0.13);\n  --lum-ok-line: rgba(62, 207, 142, 0.38);\n  --lum-warn: #f5b54a;\n  --lum-warn-soft: rgba(245, 181, 74, 0.13);\n  --lum-warn-line: rgba(245, 181, 74, 0.4);\n  --lum-error: #f0555c;\n  --lum-error-soft: rgba(240, 85, 92, 0.13);\n  --lum-error-line: rgba(240, 85, 92, 0.42);\n  --lum-info: #58a6ff; /* distinct sky blue so \"info\" ≠ \"accent/active\" */\n  --lum-info-soft: rgba(88, 166, 255, 0.13);\n  --lum-info-line: rgba(88, 166, 255, 0.4);\n\n  /* ── Data-viz palette (categorical, for charts/legends) ── */\n  --lum-viz-1: #6e76f1; /* sessions (accent) */\n  --lum-viz-2: #f0555c; /* errors */\n  --lum-viz-3: #3ecf8e; /* conversions */\n  --lum-viz-4: #f5b54a; /* rage/slow */\n  --lum-viz-grid: rgba(255, 255, 255, 0.05);\n\n  /* ── Radius scale ── */\n  --lum-radius-xs: 4px;\n  --lum-radius-sm: 7px;\n  --lum-radius: 11px; /* cards/buttons */\n  --lum-radius-lg: 16px; /* page-level panels, player frame */\n  --lum-radius-full: 999px;\n\n  /* ── Type ── */\n  --lum-font-ui: 'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif;\n  --lum-font-display: 'Inter Variable', 'Inter', system-ui, sans-serif; /* optical size handles display */\n  --lum-font-mono: 'JetBrains Mono', 'JetBrains Mono NL', ui-monospace, 'SF Mono', Menlo, monospace;\n\n  /* ── Elevation (layered shadow + ambient). Use the named tiers, not raw --lum-shadow. ── */\n  --lum-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.2);\n  --lum-shadow: 0 4px 14px rgba(0, 0, 0, 0.34), 0 1px 2px rgba(0, 0, 0, 0.3); /* default raise */\n  --lum-shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.5), 0 6px 16px rgba(0, 0, 0, 0.34); /* overlays/drawer */\n\n  /* ── Motion ── */\n  --lum-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* standard ease-out */\n  --lum-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle overshoot for thumbs/toggles */\n  --lum-dur-1: 110ms; /* hover/press feedback */\n  --lum-dur-2: 180ms; /* enter/leave, expand */\n  --lum-dur-3: 320ms; /* drawers, chart draw */\n  --lum-motion: var(--lum-dur-2) var(--lum-ease); /* back-compat alias */\n\n  /* ── Focus ── */\n  --lum-focus: 0 0 0 2px var(--lum-bg), 0 0 0 4px var(--lum-accent);\n}\n\n/* Opt-in light theme: add data-lum-theme=\"light\" on a container. */\n[data-lum-theme='light'] {\n  --lum-bg: #fbfbfd;\n  --lum-surface: #ffffff;\n  --lum-surface-2: #f4f5f8;\n  --lum-raised: #ffffff;\n  --lum-overlay: #ffffff;\n  --lum-border: #e6e8ee;\n  --lum-border-strong: #d4d8e1;\n  --lum-hairline: rgba(20, 22, 30, 0.04);\n  --lum-text: #14161c;\n  --lum-text-2: #3c4250;\n  --lum-muted: #5d646e;\n  --lum-faint: #939aa6;\n  --lum-accent-soft: rgba(110, 118, 241, 0.1);\n  --lum-shadow-sm: 0 1px 2px rgba(20, 22, 30, 0.06);\n  --lum-shadow: 0 4px 16px rgba(20, 22, 30, 0.1), 0 1px 2px rgba(20, 22, 30, 0.06);\n  --lum-shadow-lg: 0 18px 48px rgba(20, 22, 30, 0.16);\n  --lum-viz-grid: rgba(20, 22, 30, 0.06);\n  /* Semantic foregrounds re-tuned for legibility on white (the soft/line bg\n     variants are translucent and already read fine; only the solid hue, used as\n     text + dots, needed darkening). Charts use the separate --lum-viz-* palette. */\n  --lum-ok: #178f57;\n  --lum-warn: #b0760f;\n  --lum-error: #d83a43;\n  --lum-info: #2f7de0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :root {\n    --lum-motion: 0ms;\n    --lum-dur-1: 0ms;\n    --lum-dur-2: 0ms;\n    --lum-dur-3: 0ms;\n  }\n}\n\n/* ───────────────────────────── Base ──────────────────────────────── */\n.lum-root,\n.lum {\n  color: var(--lum-text);\n  font-family: var(--lum-font-ui);\n  font-size: 14px;\n  line-height: 1.55;\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n}\n.lum-mono {\n  font-family: var(--lum-font-mono);\n  font-variant-numeric: tabular-nums;\n  font-feature-settings: 'tnum' 1;\n}\n.lum-muted {\n  color: var(--lum-muted);\n}\n.lum *:focus-visible {\n  outline: none;\n  box-shadow: var(--lum-focus);\n  border-radius: var(--lum-radius-sm);\n}\n\n/* ─────────────────── Material recipe (elevated surfaces) ──────────── */\n/* shadow + a 1px inner top highlight (the gradient padding-box trick). */\n.lum-elevated {\n  background:\n    linear-gradient(var(--lum-hairline), transparent 64px) padding-box,\n    var(--lum-raised) padding-box;\n  border: 1px solid var(--lum-border);\n  box-shadow: var(--lum-shadow-sm);\n}\n\n/* ──────────────────────────── Buttons ────────────────────────────── */\n.lum-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 8px 14px;\n  border-radius: var(--lum-radius);\n  border: 1px solid var(--lum-border);\n  background: var(--lum-surface-2);\n  color: var(--lum-text);\n  font: inherit;\n  font-weight: 560;\n  cursor: pointer;\n  transition:\n    background var(--lum-dur-1) var(--lum-ease),\n    border-color var(--lum-dur-1) var(--lum-ease),\n    box-shadow var(--lum-dur-1) var(--lum-ease),\n    transform var(--lum-dur-1) var(--lum-ease);\n  white-space: nowrap;\n}\n.lum-btn:hover {\n  background: var(--lum-raised);\n  border-color: var(--lum-border-strong);\n}\n.lum-btn:active {\n  transform: translateY(1px);\n}\n.lum-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.lum-btn--primary {\n  background: var(--lum-accent);\n  color: var(--lum-accent-contrast);\n  border-color: transparent;\n  box-shadow: var(--lum-shadow-sm);\n}\n.lum-btn--primary:hover {\n  background: var(--lum-accent-hover);\n  border-color: transparent;\n  transform: translateY(-1px);\n  box-shadow: var(--lum-shadow);\n}\n.lum-btn--primary:active {\n  background: var(--lum-accent-press);\n  transform: translateY(1px);\n  box-shadow: var(--lum-shadow-sm);\n}\n.lum-btn--ghost {\n  background: transparent;\n  border-color: var(--lum-border);\n}\n.lum-btn--ghost:hover {\n  background: var(--lum-surface-2);\n  border-color: var(--lum-border-strong);\n}\n.lum-btn--danger {\n  background: var(--lum-error);\n  color: #fff;\n  border-color: transparent;\n}\n.lum-btn--sm {\n  padding: 5px 10px;\n  font-size: 13px;\n}\n\n.lum-iconbtn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 34px;\n  height: 34px;\n  border-radius: var(--lum-radius-sm);\n  border: 1px solid transparent;\n  background: transparent;\n  color: var(--lum-text);\n  cursor: pointer;\n  transition:\n    background var(--lum-dur-1) var(--lum-ease),\n    color var(--lum-dur-1) var(--lum-ease),\n    transform var(--lum-dur-1) var(--lum-ease);\n}\n.lum-iconbtn:hover {\n  background: var(--lum-surface-2);\n}\n.lum-iconbtn:active {\n  transform: scale(0.96);\n}\n.lum-iconbtn[aria-pressed='true'] {\n  background: var(--lum-accent-soft);\n  color: var(--lum-accent);\n}\n.lum-iconbtn:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n/* ───────────────────────────── Badge ─────────────────────────────── */\n.lum-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 2px 9px;\n  border-radius: var(--lum-radius-full);\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 1.5;\n  background: var(--lum-surface-2);\n  color: var(--lum-muted);\n  border: 1px solid var(--lum-border);\n  white-space: nowrap;\n}\n.lum-badge--error {\n  color: var(--lum-error);\n  border-color: var(--lum-error-line);\n  background: var(--lum-error-soft);\n}\n.lum-badge--warn {\n  color: var(--lum-warn);\n  border-color: var(--lum-warn-line);\n  background: var(--lum-warn-soft);\n}\n.lum-badge--ok {\n  color: var(--lum-ok);\n  border-color: var(--lum-ok-line);\n  background: var(--lum-ok-soft);\n}\n.lum-badge--info {\n  color: var(--lum-info);\n  border-color: var(--lum-info-line);\n  background: var(--lum-info-soft);\n}\n.lum-badge--accent {\n  color: var(--lum-accent-contrast);\n  background: var(--lum-accent);\n  border-color: transparent;\n}\n\n/* ──────────────────────────── Tabs ───────────────────────────────── */\n.lum-tabs {\n  display: flex;\n  gap: 2px;\n  border-bottom: 1px solid var(--lum-border);\n  overflow-x: auto;\n  scrollbar-width: thin;\n}\n.lum-tab {\n  appearance: none;\n  background: transparent;\n  border: none;\n  border-bottom: 2px solid transparent;\n  color: var(--lum-muted);\n  padding: 9px 12px;\n  font: inherit;\n  font-weight: 560;\n  cursor: pointer;\n  white-space: nowrap;\n  transition: color var(--lum-dur-1) var(--lum-ease), border-color var(--lum-dur-1) var(--lum-ease);\n}\n.lum-tab:hover {\n  color: var(--lum-text);\n}\n.lum-tab[aria-selected='true'] {\n  color: var(--lum-text);\n  border-bottom-color: var(--lum-accent);\n}\n.lum-tab__count {\n  margin-left: 6px;\n  font-size: 11px;\n  color: var(--lum-muted);\n}\n\n/* ─────────────────────────── Tooltip ─────────────────────────────── */\n.lum-tip {\n  position: relative;\n  display: inline-flex;\n}\n.lum-tip__bubble {\n  position: absolute;\n  bottom: calc(100% + 6px);\n  left: 50%;\n  transform: translateX(-50%);\n  background: var(--lum-overlay);\n  color: var(--lum-text);\n  border: 1px solid var(--lum-border-strong);\n  padding: 4px 8px;\n  border-radius: var(--lum-radius-sm);\n  font-size: 12px;\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity var(--lum-dur-1) var(--lum-ease);\n  z-index: 50;\n  box-shadow: var(--lum-shadow);\n}\n.lum-tip:hover .lum-tip__bubble,\n.lum-tip:focus-within .lum-tip__bubble {\n  opacity: 1;\n}\n\n/* ──────────────────────────── Drawer ─────────────────────────────── */\n.lum-drawer__scrim {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(2px);\n  z-index: 100;\n  animation: lum-fade var(--lum-dur-2) var(--lum-ease);\n}\n.lum-drawer {\n  position: fixed;\n  top: 0;\n  right: 0;\n  height: 100%;\n  width: min(520px, 100%);\n  background: var(--lum-overlay);\n  border-left: 1px solid var(--lum-border-strong);\n  z-index: 101;\n  box-shadow: var(--lum-shadow-lg);\n  display: flex;\n  flex-direction: column;\n  animation: lum-slide-in var(--lum-dur-2) var(--lum-ease);\n}\n.lum-drawer__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--lum-border);\n}\n.lum-drawer__body {\n  overflow: auto;\n  padding: 16px;\n}\n@keyframes lum-fade {\n  from {\n    opacity: 0;\n  }\n}\n@keyframes lum-slide-in {\n  from {\n    transform: translateX(20px);\n    opacity: 0;\n  }\n}\n\n/* ─────────────────────────── Skeleton ────────────────────────────── */\n.lum-skeleton {\n  background: linear-gradient(90deg, var(--lum-surface-2) 25%, var(--lum-raised) 37%, var(--lum-surface-2) 63%);\n  background-size: 400% 100%;\n  border-radius: var(--lum-radius-sm);\n  animation: lum-shimmer 1.4s ease infinite;\n}\n@keyframes lum-shimmer {\n  to {\n    background-position: -135% 0;\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .lum-skeleton {\n    animation: none;\n  }\n}\n\n/* ───────────────────────────── Toast ─────────────────────────────── */\n.lum-toasts {\n  position: fixed;\n  bottom: 18px;\n  right: 18px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  z-index: 200;\n}\n.lum-toast {\n  background: var(--lum-overlay);\n  border: 1px solid var(--lum-border-strong);\n  border-left: 3px solid var(--lum-accent);\n  color: var(--lum-text);\n  padding: 10px 14px;\n  border-radius: var(--lum-radius);\n  box-shadow: var(--lum-shadow-lg);\n  min-width: 220px;\n  animation: lum-slide-in var(--lum-dur-2) var(--lum-ease);\n}\n.lum-toast--ok {\n  border-left-color: var(--lum-ok);\n}\n.lum-toast--error {\n  border-left-color: var(--lum-error);\n}\n\n/* ───────────────────────────── Slider ────────────────────────────── */\n.lum-slider {\n  position: relative;\n  height: 16px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  touch-action: none;\n}\n.lum-slider__track {\n  position: relative;\n  height: 5px;\n  width: 100%;\n  background: var(--lum-surface-2);\n  border-radius: 999px;\n  overflow: hidden;\n}\n.lum-slider__buffer {\n  position: absolute;\n  height: 100%;\n  background: color-mix(in srgb, var(--lum-muted) 40%, transparent);\n}\n.lum-slider__fill {\n  position: absolute;\n  height: 100%;\n  background: var(--lum-accent);\n}\n.lum-slider__thumb {\n  position: absolute;\n  top: 50%;\n  width: 13px;\n  height: 13px;\n  border-radius: 50%;\n  background: var(--lum-accent);\n  border: 2px solid var(--lum-bg);\n  transform: translate(-50%, -50%);\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);\n  transition: width var(--lum-dur-2) var(--lum-ease-spring), height var(--lum-dur-2) var(--lum-ease-spring);\n}\n\n/* ───────────────────────────── Menu ──────────────────────────────── */\n.lum-menu {\n  position: relative;\n  display: inline-flex;\n}\n.lum-menu__list {\n  position: absolute;\n  top: calc(100% + 6px);\n  right: 0;\n  background:\n    linear-gradient(var(--lum-hairline), transparent 48px) padding-box,\n    var(--lum-overlay) padding-box;\n  border: 1px solid var(--lum-border-strong);\n  border-radius: var(--lum-radius);\n  box-shadow: var(--lum-shadow-lg);\n  padding: 5px;\n  min-width: 160px;\n  z-index: 60;\n  animation: lum-pop var(--lum-dur-2) var(--lum-ease);\n}\n/* Open upward instead — for triggers in a bottom bar (e.g. the player transport). */\n.lum-menu__list--up {\n  top: auto;\n  bottom: calc(100% + 6px);\n}\n@keyframes lum-pop {\n  from {\n    opacity: 0;\n    transform: translateY(4px) scale(0.98);\n  }\n}\n.lum-menu__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  width: 100%;\n  padding: 7px 10px;\n  border: none;\n  background: transparent;\n  color: var(--lum-text);\n  font: inherit;\n  text-align: left;\n  border-radius: var(--lum-radius-sm);\n  cursor: pointer;\n  transition: background var(--lum-dur-1) var(--lum-ease);\n}\n.lum-menu__item:hover {\n  background: var(--lum-surface-2);\n}\n.lum-menu__item[aria-checked='true'] {\n  color: var(--lum-accent);\n}\n\n/* ───────────────────────────── Table ─────────────────────────────── */\n.lum-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13px;\n}\n.lum-table th {\n  text-align: left;\n  font-weight: 600;\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--lum-muted);\n  padding: 8px 10px;\n  border-bottom: 1px solid var(--lum-border-strong);\n  position: sticky;\n  top: 0;\n  background: var(--lum-surface);\n  z-index: 1;\n}\n.lum-table td {\n  padding: 7px 10px;\n  border-bottom: 1px solid color-mix(in srgb, var(--lum-border) 60%, transparent);\n}\n.lum-table tbody tr {\n  cursor: pointer;\n  transition: background var(--lum-dur-1) var(--lum-ease);\n}\n.lum-table tbody tr:hover {\n  background: var(--lum-surface-2);\n}\n.lum-table tbody tr[aria-selected='true'] {\n  background: var(--lum-accent-soft);\n}\n\n/* ─────────────────── Empty / Error states ────────────────────────── */\n.lum-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  gap: 8px;\n  padding: 44px 24px;\n  color: var(--lum-muted);\n}\n.lum-state__title {\n  color: var(--lum-text);\n  font-weight: 620;\n  font-size: 15px;\n  letter-spacing: -0.006em;\n}\n.lum-state__icon {\n  color: var(--lum-muted);\n  margin-bottom: 4px;\n  font-size: 22px;\n}\n.lum-state--error .lum-state__icon {\n  color: var(--lum-error);\n}\n\n/* ──────────────────────────── Surfaces ───────────────────────────── */\n.lum-card {\n  background:\n    linear-gradient(var(--lum-hairline), transparent 64px) padding-box,\n    var(--lum-surface) padding-box;\n  border: 1px solid var(--lum-border);\n  border-radius: var(--lum-radius);\n  padding: 16px;\n  box-shadow: var(--lum-shadow-sm);\n}\n.lum-divider {\n  height: 1px;\n  background: var(--lum-border);\n  border: none;\n  margin: 12px 0;\n}\n\n/* ════════════════════════════════════════════════════════════════════\n   STRATA — timeline-first debugging cockpit\n   Grid: Topbar / Synopsis / StageRow / Timeline\n   ════════════════════════════════════════════════════════════════════ */\n.lum-strata {\n  display: grid;\n  grid-template-rows: 48px auto minmax(0, 1fr) minmax(0, 1fr);\n  grid-template-areas:\n    'topbar'\n    'synopsis'\n    'stage'\n    'timeline';\n  height: 100%;\n  min-height: 460px;\n  background: var(--lum-bg);\n  border: 1px solid var(--lum-border);\n  border-radius: var(--lum-radius-lg);\n  overflow: hidden;\n  outline: none;\n  box-shadow: var(--lum-shadow-lg);\n  color: var(--lum-text);\n  position: relative;\n}\n/* Balanced: stage ~52% / timeline ~45% (after fixed rows). */\n.lum-strata--balanced {\n  grid-template-rows: 48px auto 1.15fr 1fr;\n}\n/* Watch focus (T): replay maximizes; timeline collapses to a slim scrubber. */\n.lum-strata--stage {\n  grid-template-rows: 48px auto 1fr 112px;\n}\n/* Debug focus (D): monitor shrinks; lanes + inspector dominate. */\n.lum-strata--debug {\n  grid-template-rows: 48px auto 0.6fr 1.55fr;\n}\n@media (prefers-reduced-motion: no-preference) {\n  .lum-strata {\n    transition: grid-template-rows var(--lum-dur-3) var(--lum-ease);\n  }\n}\n\n/* ─────────────────────────── Topbar ─────────────────────────── */\n.lum-st-topbar {\n  grid-area: topbar;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 0 12px;\n  background: var(--lum-surface);\n  border-bottom: 1px solid var(--lum-border);\n  box-shadow: inset 0 -1px 0 var(--lum-hairline);\n  min-width: 0;\n}\n.lum-st-topbar__left {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n}\n.lum-st-topbar__back {\n  margin-left: -4px;\n  margin-right: 2px;\n  flex-shrink: 0;\n}\n.lum-st-logo {\n  color: var(--lum-accent);\n  filter: drop-shadow(var(--lum-accent-glow));\n  font-size: 13px;\n}\n.lum-st-topbar__title {\n  font-weight: 650;\n  letter-spacing: 0.02em;\n}\n.lum-st-topbar__sep {\n  color: var(--lum-faint);\n}\n.lum-st-topbar__sid {\n  color: var(--lum-muted);\n  font-size: 12px;\n}\n.lum-st-topbar__device {\n  font-size: 12px;\n  white-space: nowrap;\n}\n.lum-st-topbar__user {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 12px;\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  padding: 2px 8px;\n  border-radius: 999px;\n  color: var(--lum-accent);\n  background: color-mix(in srgb, var(--lum-accent) 12%, transparent);\n  border: 1px solid color-mix(in srgb, var(--lum-accent) 26%, transparent);\n}\n.lum-st-topbar__user svg {\n  flex-shrink: 0;\n}\n.lum-st-livebadge {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.04em;\n  color: #fff;\n  background: #ef4444;\n  border: 1px solid #ef4444;\n  border-radius: 999px;\n  padding: 2px 9px;\n  white-space: nowrap;\n}\n.lum-st-livebadge--paused {\n  color: #ef4444;\n  background: color-mix(in srgb, #ef4444 12%, transparent);\n  cursor: pointer;\n}\n.lum-st-livebadge--paused:hover {\n  background: color-mix(in srgb, #ef4444 22%, transparent);\n}\n.lum-st-livebadge__dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: currentColor;\n  box-shadow: 0 0 0 0 currentColor;\n  animation: lum-live-pulse 1.6s ease-out infinite;\n}\n.lum-st-livebadge--paused .lum-st-livebadge__dot {\n  animation: none;\n}\n@keyframes lum-live-pulse {\n  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); }\n  70% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }\n  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }\n}\n@media (prefers-reduced-motion: reduce) {\n  .lum-st-livebadge__dot { animation: none; }\n}\n.lum-st-topbar__clock {\n  font-size: 12px;\n  color: var(--lum-text-2);\n  font-variant-numeric: tabular-nums;\n  margin-left: 4px;\n}\n.lum-st-topbar__badges {\n  display: flex;\n  gap: 6px;\n  margin-left: auto;\n}\n.lum-st-badge {\n  font-family: var(--lum-font-mono);\n  font-size: 11px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: var(--lum-radius-full);\n  border: 1px solid transparent;\n  white-space: nowrap;\n}\n.lum-st-badge.is-zero {\n  opacity: 0.4;\n}\n.lum-st-badge--error {\n  color: var(--lum-error);\n  background: var(--lum-error-soft);\n  border-color: var(--lum-error-line);\n}\n.lum-st-badge--net {\n  color: #a06bff;\n  background: rgba(160, 107, 255, 0.13);\n  border-color: rgba(160, 107, 255, 0.4);\n}\n.lum-st-badge--rage {\n  color: var(--lum-warn);\n  background: var(--lum-warn-soft);\n  border-color: var(--lum-warn-line);\n}\n.lum-st-badge--conv {\n  color: var(--lum-ok);\n  background: var(--lum-ok-soft);\n  border-color: var(--lum-ok-line);\n  max-width: 160px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.lum-st-badge--signal {\n  color: var(--lum-info);\n  background: var(--lum-info-soft);\n  border-color: var(--lum-info-line);\n  max-width: 160px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.lum-st-topbar__right {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.lum-st-cmdk {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  background: var(--lum-surface-2);\n  border: 1px solid var(--lum-border);\n  color: var(--lum-text-2);\n  border-radius: var(--lum-radius-sm);\n  padding: 4px 9px;\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: border-color var(--lum-dur-1) var(--lum-ease), color var(--lum-dur-1) var(--lum-ease);\n}\n.lum-st-cmdk:hover {\n  border-color: var(--lum-accent-line);\n  color: var(--lum-text);\n}\n\n/* Copy link to this exact moment */\n.lum-st-share {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  background: var(--lum-surface-2);\n  border: 1px solid var(--lum-border);\n  color: var(--lum-text-2);\n  border-radius: var(--lum-radius-sm);\n  padding: 4px 9px;\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  white-space: nowrap;\n  transition: border-color var(--lum-dur-1) var(--lum-ease), color var(--lum-dur-1) var(--lum-ease),\n    background var(--lum-dur-1) var(--lum-ease);\n}\n.lum-st-share:hover:not(:disabled) {\n  border-color: var(--lum-accent-line);\n  color: var(--lum-text);\n}\n.lum-st-share:disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n.lum-st-share.is-copied {\n  border-color: var(--lum-ok, #2ea043);\n  color: var(--lum-ok, #2ea043);\n}\n\n/* Clip control (segment to play / share) */\n.lum-st-clipwrap {\n  position: relative;\n}\n.lum-st-clip {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  background: var(--lum-surface-2);\n  border: 1px solid var(--lum-border);\n  color: var(--lum-text-2);\n  border-radius: var(--lum-radius-sm);\n  padding: 4px 9px;\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  white-space: nowrap;\n  transition: border-color var(--lum-dur-1) var(--lum-ease), color var(--lum-dur-1) var(--lum-ease);\n}\n.lum-st-clip:hover:not(:disabled),\n.lum-st-clip.is-open {\n  border-color: var(--lum-accent-line);\n  color: var(--lum-text);\n}\n.lum-st-clip:disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n.lum-st-clippop {\n  position: absolute;\n  top: calc(100% + 6px);\n  right: 0;\n  z-index: 30;\n  width: 248px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 10px;\n  background: var(--lum-raised, var(--lum-surface-2));\n  border: 1px solid var(--lum-border-strong, var(--lum-border));\n  border-radius: var(--lum-radius-md, 8px);\n  box-shadow: var(--lum-shadow-2, 0 8px 24px rgba(0, 0, 0, 0.4));\n}\n.lum-st-clippop__row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n}\n.lum-st-clippop__lbl {\n  width: 34px;\n  color: var(--lum-muted);\n  font-weight: 600;\n}\n.lum-st-clippop__val {\n  flex: 1;\n  font-variant-numeric: tabular-nums;\n  color: var(--lum-text);\n}\n.lum-st-clippop__set {\n  border: 1px solid var(--lum-border);\n  background: var(--lum-surface-2);\n  color: var(--lum-text-2);\n  border-radius: var(--lum-radius-sm);\n  padding: 3px 7px;\n  font-size: 11px;\n  font-weight: 600;\n  cursor: pointer;\n}\n.lum-st-clippop__set:hover {\n  border-color: var(--lum-accent-line);\n  color: var(--lum-text);\n}\n.lum-st-clippop__loop {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--lum-text-2);\n  cursor: pointer;\n}\n.lum-st-clippop__hint {\n  margin: 0;\n  font-size: 11px;\n  color: var(--lum-faint, var(--lum-muted));\n  line-height: 1.4;\n}\n.lum-st-clippop__actions {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.lum-st-clippop__play,\n.lum-st-clippop__copy {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  border-radius: var(--lum-radius-sm);\n  padding: 5px 9px;\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  white-space: nowrap;\n}\n.lum-st-clippop__play {\n  flex: 0 0 auto;\n  border: 0;\n  background: var(--lum-accent);\n  color: var(--lum-accent-fg, #fff);\n}\n.lum-st-clippop__copy {\n  flex: 1;\n  border: 1px solid var(--lum-border);\n  background: transparent;\n  color: var(--lum-text-2);\n}\n.lum-st-clippop__copy:hover:not(:disabled) {\n  border-color: var(--lum-accent-line);\n  color: var(--lum-text);\n}\n.lum-st-clippop__play:disabled,\n.lum-st-clippop__copy:disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n.lum-st-clippop__clear {\n  border: 1px solid var(--lum-border);\n  background: transparent;\n  color: var(--lum-muted);\n  border-radius: var(--lum-radius-sm);\n  padding: 5px;\n  cursor: pointer;\n  display: inline-flex;\n}\n.lum-st-clippop__clear:hover {\n  border-color: var(--lum-danger-line, var(--lum-border-strong));\n  color: var(--lum-text);\n}\n\n/* Focus mode pills */\n.lum-st-focus {\n  display: inline-flex;\n  gap: 2px;\n  padding: 2px;\n  background: var(--lum-surface-2);\n  border: 1px solid var(--lum-border);\n  border-radius: var(--lum-radius-sm);\n}\n.lum-st-focus__pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  background: transparent;\n  border: 1px solid transparent;\n  color: var(--lum-muted);\n  border-radius: var(--lum-radius-xs);\n  padding: 3px 9px;\n  font-size: 12px;\n  font-weight: 540;\n  cursor: pointer;\n  transition: background var(--lum-dur-1) var(--lum-ease), color var(--lum-dur-1) var(--lum-ease);\n}\n.lum-st-focus__pill:hover {\n  color: var(--lum-text);\n}\n.lum-st-focus__pill.is-active {\n  color: var(--lum-text);\n  background: var(--lum-raised);\n  border-color: var(--lum-border);\n  box-shadow: var(--lum-shadow-sm);\n}\n.lum-st-focus__key {\n  font-family: var(--lum-font-mono);\n  font-size: 10px;\n  color: var(--lum-faint);\n  background: var(--lum-bg);\n  border-radius: 3px;\n  padding: 0 4px;\n}\n\n/* ─────────────────────────── Synopsis ─────────────────────────── */\n.lum-st-synopsis {\n  grid-area: synopsis;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 14px;\n  background: linear-gradient(90deg, var(--lum-accent-soft), transparent 60%);\n  border-bottom: 1px solid var(--lum-border);\n  font-size: 13px;\n  min-width: 0;\n  overflow: hidden;\n}\n.lum-st-synopsis--empty {\n  background: var(--lum-surface);\n  font-size: 12px;\n}\n.lum-st-synopsis__icon {\n  color: var(--lum-accent);\n  display: inline-flex;\n}\n.lum-st-synopsis__text {\n  color: var(--lum-text);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex-shrink: 1;\n  /* it's a <button> for click-to-expand — strip the native chrome */\n  background: none;\n  border: none;\n  padding: 0;\n  margin: 0;\n  font: inherit;\n  text-align: left;\n  cursor: pointer;\n  min-width: 0;\n}\n.lum-st-synopsis__text[aria-expanded] {\n  cursor: pointer;\n}\n.lum-st-synopsis__more {\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  background: none;\n  border: none;\n  color: var(--lum-muted);\n  cursor: pointer;\n  padding: 2px;\n  border-radius: 5px;\n}\n.lum-st-synopsis__more:hover {\n  color: var(--lum-accent);\n  background: var(--lum-accent-soft);\n}\n/* Expanded: let the strip grow and the text wrap to the full summary. */\n.lum-st-synopsis.is-expanded {\n  align-items: flex-start;\n  overflow: visible;\n}\n.lum-st-synopsis.is-expanded .lum-st-synopsis__text {\n  white-space: normal;\n  overflow: visible;\n  text-overflow: clip;\n  line-height: 1.5;\n}\n.lum-st-synopsis.is-expanded .lum-st-synopsis__chips {\n  margin-top: 1px;\n}\n.lum-st-synopsis__chips {\n  display: flex;\n  gap: 6px;\n  margin-left: auto;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n.lum-st-synopsis__chips::-webkit-scrollbar {\n  display: none;\n}\n.lum-st-chip {\n  background: var(--lum-surface-2);\n  border: 1px solid var(--lum-border);\n  color: var(--lum-accent);\n  border-radius: var(--lum-radius-full);\n  padding: 2px 10px;\n  font-size: 11.5px;\n  font-family: var(--lum-font-mono);\n  white-space: nowrap;\n  cursor: pointer;\n  transition: border-color var(--lum-dur-1) var(--lum-ease), background var(--lum-dur-1) var(--lum-ease);\n}\n.lum-st-chip:hover {\n  border-color: var(--lum-accent-line);\n  background: var(--lum-accent-soft);\n}\n\n/* ───────────────────── AI \"Explain this moment\" ─────────────────── */\n.lum-st-explain {\n  margin-top: 12px;\n  padding-top: 12px;\n  border-top: 1px solid var(--lum-border);\n}\n.lum-st-explain__btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--lum-accent-soft);\n  border: 1px solid var(--lum-accent-line);\n  color: var(--lum-accent);\n  border-radius: var(--lum-radius-full);\n  padding: 5px 12px;\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: background var(--lum-dur-1) var(--lum-ease);\n}\n.lum-st-explain__btn:hover {\n  background: var(--lum-accent-line);\n}\n.lum-st-explain__out {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.lum-st-explain__label {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--lum-accent);\n}\n.lum-st-explain__text {\n  margin: 0;\n  font-size: 13px;\n  line-height: 1.5;\n  color: var(--lum-text);\n}\n.lum-st-explain__text.is-error {\n  color: var(--lum-danger, #d23);\n}\n.lum-st-explain__re {\n  align-self: flex-start;\n  background: none;\n  border: none;\n  color: var(--lum-muted);\n  font-size: 11px;\n  cursor: pointer;\n  padding: 0;\n  text-decoration: underline;\n}\n.lum-st-explain__re:hover {\n  color: var(--lum-accent);\n}\n@keyframes lum-st-explain-blink {\n  0%, 100% { opacity: 0.3; }\n  50% { opacity: 1; }\n}\n.lum-st-explain__dots {\n  animation: lum-st-explain-blink 1s ease-in-out infinite;\n}\n\n/* ─────────────────────────── Stage row ─────────────────────────── */\n.lum-st-stagerow {\n  grid-area: stage;\n  display: grid;\n  grid-template-columns: 1fr clamp(320px, 30vw, 460px);\n  min-height: 0;\n  min-width: 0;\n  border-bottom: 1px solid var(--lum-border);\n}\n.lum-strata--mid .lum-st-stagerow,\n.lum-strata--narrow .lum-st-stagerow,\n.lum-strata--compact .lum-st-stagerow,\n.lum-strata--stage .lum-st-stagerow {\n  grid-template-columns: 1fr;\n}\n.lum-st-stagecol {\n  position: relative;\n  min-width: 0;\n  min-height: 0;\n  background: #000;\n  overflow: hidden;\n}\n.lum-st-monitor {\n  position: absolute;\n  inset: 0;\n  padding: 16px;\n}\n/* Mid-playback buffering chip (seek/scrub ahead of the loaded edge). Floats over\n * the last rendered frame — non-blocking, unlike the full loading skeleton. */\n.lum-st-buffering {\n  position: absolute;\n  top: 26px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 6;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 12px;\n  border-radius: 999px;\n  background: color-mix(in srgb, #0b0d13 72%, transparent);\n  backdrop-filter: blur(6px);\n  border: 1px solid var(--lum-border, #262b36);\n  color: var(--lum-text, #e7e9ee);\n  font-size: 12px;\n  pointer-events: none;\n}\n.lum-st-buffering__spinner {\n  width: 13px;\n  height: 13px;\n  border-radius: 50%;\n  border: 2px solid color-mix(in srgb, var(--lum-accent) 35%, transparent);\n  border-top-color: var(--lum-accent);\n  animation: lum-buffer-spin 0.7s linear infinite;\n}\n@keyframes lum-buffer-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Auto-skim badge — pinned top-right of the stage while skimming idle. */\n.lum-st-skimbadge {\n  position: absolute;\n  top: 26px;\n  right: 26px;\n  z-index: 6;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 11px;\n  border-radius: 999px;\n  background: color-mix(in srgb, #39c5cf 22%, #0b0d13 78%);\n  border: 1px solid color-mix(in srgb, #39c5cf 55%, transparent);\n  color: #d7f7fa;\n  font-size: 12px;\n  font-weight: 560;\n  pointer-events: none;\n  box-shadow: 0 0 14px color-mix(in srgb, #39c5cf 35%, transparent);\n  animation: lum-skim-pulse 1.4s ease-in-out infinite;\n}\n@keyframes lum-skim-pulse {\n  0%,\n  100% {\n    opacity: 0.82;\n  }\n  50% {\n    opacity: 1;\n  }\n}\n/* Auto-skip flash — iris accent, brief fade-in (the jump is instantaneous). */\n.lum-st-skimbadge--skip {\n  background: color-mix(in srgb, var(--lum-accent) 24%, #0b0d13 76%);\n  border-color: color-mix(in srgb, var(--lum-accent) 60%, transparent);\n  color: #e7e9ff;\n  box-shadow: 0 0 14px color-mix(in srgb, var(--lum-accent) 38%, transparent);\n  animation: lum-skip-flash 0.9s ease-out forwards;\n}\n@keyframes lum-skip-flash {\n  0% {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n  18% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  70% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n/* Transport auto-skim button: glow while actively skimming. */\n.lum-st-skim.is-skimming .lum-iconbtn,\n.lum-st-skim.is-skimming button {\n  color: #39c5cf;\n}\n.lum-st-monitor__frame {\n  position: absolute;\n  inset: 16px;\n  border-radius: var(--lum-radius);\n  overflow: hidden;\n  box-shadow:\n    0 0 0 1px var(--lum-accent-line),\n    inset 0 0 0 1px rgba(255, 255, 255, 0.04),\n    0 8px 30px rgba(0, 0, 0, 0.5);\n  background: #0c0d12;\n}\n.lum-st-mount {\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n  border-radius: var(--lum-radius);\n}\n.lum-st-mount iframe {\n  border: 0;\n  background: #fff;\n}\n.lum-st-monitor__edge {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 2px;\n  background: linear-gradient(90deg, transparent, var(--lum-accent-line), transparent);\n  pointer-events: none;\n}\n/* REPLAY chip */\n.lum-st-stagecol::after {\n  content: '● REPLAY';\n  position: absolute;\n  top: 22px;\n  left: 22px;\n  z-index: 5;\n  font-family: var(--lum-font-mono);\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 0.08em;\n  color: var(--lum-accent);\n  background: color-mix(in srgb, var(--lum-bg) 70%, transparent);\n  backdrop-filter: blur(6px);\n  border: 1px solid var(--lum-accent-line);\n  border-radius: var(--lum-radius-full);\n  padding: 3px 9px;\n  pointer-events: none;\n}\n.lum-strata--debug .lum-st-stagecol::after {\n  font-size: 9px;\n  top: 20px;\n  left: 20px;\n}\n\n/* On-stage overlay (callouts) */\n.lum-st-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 6;\n  pointer-events: none;\n}\n.lum-st-callout {\n  position: absolute;\n  width: 28px;\n  height: 28px;\n  margin: -14px 0 0 -14px;\n}\n.lum-st-callout__ring {\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  border: 2px solid var(--lum-warn);\n}\n.lum-st-callout--error .lum-st-callout__ring {\n  border-color: var(--lum-error);\n  box-shadow: 0 0 16px var(--lum-error);\n}\n.lum-st-callout--rage .lum-st-callout__ring {\n  border-color: var(--lum-warn);\n  box-shadow: 0 0 16px var(--lum-warn);\n}\n@media (prefers-reduced-motion: no-preference) {\n  .lum-st-callout__ring {\n    animation: lum-st-ripple 1.1s var(--lum-ease) infinite;\n  }\n}\n@keyframes lum-st-ripple {\n  0% {\n    transform: scale(0.6);\n    opacity: 0.9;\n  }\n  100% {\n    transform: scale(1.8);\n    opacity: 0;\n  }\n}\n\n/* Loading / empty / error overlays (ported) */\n.lum-pl-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--lum-bg) 86%, transparent);\n  backdrop-filter: blur(3px);\n  text-align: center;\n}\n.lum-pl-loading {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  width: min(360px, 80%);\n  align-items: stretch;\n}\n.lum-pl-progress {\n  height: 5px;\n  background: var(--lum-surface-2);\n  border-radius: 999px;\n  overflow: hidden;\n}\n.lum-pl-progress__bar {\n  height: 100%;\n  background: linear-gradient(90deg, var(--lum-accent), var(--lum-accent-hover));\n  transition: width var(--lum-motion);\n}\n\n/* ─────────────────────────── Inspector ─────────────────────────── */\n.lum-st-inspectorcol {\n  position: relative;\n  border-left: 1px solid var(--lum-border);\n  box-shadow: inset 1px 0 0 var(--lum-hairline);\n  background: var(--lum-surface);\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n}\n\n/* ── Drag-to-resize handles (inspector width + timeline height) ──\n   Transparent strips straddling the panel edge; the resize cursor signals the\n   affordance and they light up on hover / while dragging. */\n.lum-st-resize {\n  position: absolute;\n  z-index: 6;\n  background: transparent;\n  touch-action: none;\n  transition: background var(--lum-dur-1) var(--lum-ease);\n}\n.lum-st-resize:hover,\n.lum-st-resize.is-active {\n  background: var(--lum-accent-line);\n}\n.lum-st-resize--x {\n  top: 0;\n  bottom: 0;\n  left: -4px;\n  width: 8px;\n  cursor: col-resize;\n}\n.lum-st-resize--y {\n  left: 0;\n  right: 0;\n  top: -4px;\n  height: 8px;\n  cursor: row-resize;\n}\n.lum-st-inspector {\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  flex: 1;\n  width: 100%;\n}\n.lum-st-inspector__tabs {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  padding: 6px 8px 0;\n  border-bottom: 1px solid var(--lum-border);\n}\n.lum-st-inspector__clear {\n  margin-left: auto;\n  background: transparent;\n  border: none;\n  color: var(--lum-muted);\n  cursor: pointer;\n  display: inline-flex;\n  padding: 4px;\n  border-radius: var(--lum-radius-xs);\n}\n.lum-st-inspector__clear:hover {\n  color: var(--lum-text);\n  background: var(--lum-surface-2);\n}\n.lum-st-inspector__body {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n}\n.lum-st-inspector__crumb {\n  padding: 8px 12px 0;\n  font-size: 12px;\n  color: var(--lum-text-2);\n  word-break: break-all;\n}\n.lum-st-inspbody {\n  padding: 12px;\n  min-height: 0;\n}\n.lum-st-detail__h {\n  margin: 12px 0 4px;\n  color: var(--lum-muted);\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n}\n.lum-st-err__msg {\n  margin-top: 6px;\n  color: var(--lum-error);\n  font-size: 12.5px;\n  word-break: break-word;\n}\n.lum-st-err__src {\n  margin-top: 8px;\n  font-size: 11px;\n  word-break: break-all;\n}\n.lum-st-inspactions {\n  display: flex;\n  gap: 8px;\n  margin: 10px 0;\n}\n.lum-st-inspactions .lum-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n}\n.lum-st-cause {\n  font-size: 11.5px;\n  padding: 8px 10px;\n  background: var(--lum-surface-2);\n  border: 1px solid var(--lum-border);\n  border-left: 2px solid var(--lum-accent);\n  border-radius: var(--lum-radius-sm);\n  word-break: break-word;\n}\n\n/* Unified feed */\n.lum-st-feed {\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  flex: 1;\n}\n.lum-st-feed__chips {\n  display: flex;\n  gap: 2px;\n  padding: 8px 10px;\n  flex-wrap: wrap;\n  border-bottom: 1px solid var(--lum-border);\n}\n.lum-st-feed__rows {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  font-size: 12px;\n}\n\n/* ── Network waterfall (Chrome-style, replay-synced) ──────────────────── */\n.lum-wf {\n  --wf-label-w: 150px;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n}\n.lum-wf__toolbar {\n  flex: 0 0 auto;\n  padding: 5px 10px;\n  font-size: 11px;\n  border-bottom: 1px solid var(--lum-border);\n}\n.lum-wf__hint {\n  color: var(--lum-accent);\n}\n/* The single scroll viewport (both axes). The grid inside is as wide as the\n   whole time span; the label column + ruler stay frozen via position:sticky. */\n.lum-wf__scroll {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n}\n.lum-wf__grid {\n  position: relative;\n  min-width: 100%;\n}\n.lum-wf__ruler {\n  position: sticky;\n  top: 0;\n  z-index: 6;\n  display: flex;\n  height: 20px;\n  background: var(--lum-surface);\n  border-bottom: 1px solid var(--lum-border);\n}\n.lum-wf__rulerspacer {\n  position: sticky;\n  left: 0;\n  z-index: 7;\n  width: var(--wf-label-w);\n  flex: 0 0 auto;\n  background: var(--lum-surface);\n  border-right: 1px solid var(--lum-border);\n}\n.lum-wf__rulertrack {\n  position: relative;\n  flex: 0 0 auto;\n  height: 100%;\n}\n.lum-wf__tick {\n  position: absolute;\n  top: 3px;\n  transform: translateX(-50%);\n  font-size: 9.5px;\n  color: var(--lum-muted);\n  white-space: nowrap;\n  font-family: var(--lum-font-mono);\n}\n.lum-wf__rows {\n  position: relative;\n}\n.lum-wf__row {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  height: 28px;\n  cursor: pointer;\n  /* Reserve the sticky ruler's height so scrollIntoView doesn't tuck a followed\n     row underneath it. */\n  scroll-margin-top: 20px;\n  border-bottom: 1px solid color-mix(in srgb, var(--lum-border) 45%, transparent);\n  transition: background var(--lum-dur-1) var(--lum-ease);\n}\n.lum-wf__row:hover {\n  background: var(--lum-surface-2);\n}\n.lum-wf__row.is-selected {\n  background: var(--lum-accent-soft);\n}\n.lum-wf__label {\n  box-sizing: border-box;\n  position: sticky;\n  left: 0;\n  z-index: 4;\n  width: var(--wf-label-w);\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0 8px;\n  overflow: hidden;\n  background: var(--lum-surface);\n  border-right: 1px solid var(--lum-border);\n  font-size: 11px;\n}\n/* Keep the frozen label tinted in step with its row's hover/selected state. */\n.lum-wf__row:hover .lum-wf__label {\n  background: var(--lum-surface-2);\n}\n.lum-wf__row.is-selected .lum-wf__label {\n  background: color-mix(in srgb, var(--lum-accent) 16%, var(--lum-surface));\n}\n.lum-wf__dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  flex: 0 0 auto;\n  background: var(--lum-ok);\n}\n.lum-wf__dot--error {\n  background: var(--lum-error);\n}\n.lum-wf__dot--warn {\n  background: var(--lum-warn);\n}\n.lum-wf__dot--info {\n  background: var(--lum-info);\n}\n.lum-wf__name {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--lum-text-2);\n}\n.lum-wf__method {\n  flex: 0 0 auto;\n  font-size: 10px;\n}\n.lum-wf__time {\n  flex: 0 0 auto;\n  font-size: 10px;\n}\n.lum-wf__track {\n  position: relative;\n  flex: 0 0 auto;\n  height: 100%;\n}\n.lum-wf__bar {\n  position: absolute;\n  top: 9px;\n  height: 10px;\n  min-width: 2px;\n  display: flex;\n  border-radius: 2px;\n  overflow: hidden;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);\n}\n.lum-wf__seg {\n  display: block;\n  min-width: 0;\n  flex-shrink: 1;\n}\n/* Chrome-ish phase palette */\n.lum-wf__seg--blocked {\n  background: #5b6472;\n}\n.lum-wf__seg--dns {\n  background: #16b3a7;\n}\n.lum-wf__seg--connect {\n  background: #f4a740;\n}\n.lum-wf__seg--ssl {\n  background: #a06bff;\n}\n.lum-wf__seg--wait {\n  background: #8fd16b;\n}\n.lum-wf__seg--download {\n  background: #3b82f6;\n}\n.lum-wf__seg--tone {\n  background: var(--lum-accent);\n}\n.lum-wf__bar--error .lum-wf__seg--tone {\n  background: var(--lum-error);\n}\n.lum-wf__bar--warn .lum-wf__seg--tone {\n  background: var(--lum-warn);\n}\n.lum-wf__bar--info .lum-wf__seg--tone {\n  background: var(--lum-info);\n}\n/* Replay-synced cursor overlay (sits above the bars, scrolls with the grid).\n   Anchored at the track start so px offsets line up with the bars; the sticky\n   label column (higher z) masks it when the playhead scrolls off to the left. */\n.lum-wf__cursor {\n  position: absolute;\n  top: 0;\n  left: var(--wf-label-w);\n  pointer-events: none;\n  z-index: 3;\n}\n.lum-wf__playhead {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 2px;\n  margin-left: -1px;\n  background: var(--lum-accent);\n  box-shadow: 0 0 6px var(--lum-accent-glow, var(--lum-accent));\n}\n.lum-wf__running {\n  position: absolute;\n  border-radius: 3px;\n  box-shadow:\n    0 0 0 1.5px var(--lum-accent),\n    0 0 9px color-mix(in srgb, var(--lum-accent) 70%, transparent);\n}\n.lum-st-feedrow {\n  display: grid;\n  grid-template-columns: 16px 52px 1fr auto;\n  gap: 8px;\n  align-items: baseline;\n  width: 100%;\n  text-align: left;\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid color-mix(in srgb, var(--lum-border) 50%, transparent);\n  color: var(--lum-text-2);\n  padding: 5px 10px;\n  cursor: pointer;\n  font: inherit;\n  font-family: var(--lum-font-mono);\n  transition: background var(--lum-dur-1) var(--lum-ease);\n}\n.lum-st-feedrow:hover {\n  background: var(--lum-surface-2);\n}\n.lum-st-feedrow.is-active {\n  background: var(--lum-accent-soft);\n}\n.lum-st-feedrow.is-selected {\n  box-shadow: inset 2px 0 0 var(--lum-accent);\n}\n.lum-st-feedrow--error {\n  color: var(--lum-error);\n}\n.lum-st-feedrow--warn .lum-st-feedrow__glyph {\n  color: var(--lum-warn);\n}\n.lum-st-feedrow--error .lum-st-feedrow__glyph {\n  color: var(--lum-error);\n}\n.lum-st-feedrow--ok .lum-st-feedrow__glyph {\n  color: var(--lum-ok);\n}\n.lum-st-feedrow__glyph {\n  text-align: center;\n  color: var(--lum-faint);\n}\n.lum-st-feedrow__time {\n  color: var(--lum-accent);\n  font-variant-numeric: tabular-nums;\n}\n.lum-st-feedrow__title {\n  color: var(--lum-text);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.lum-st-feedrow--error .lum-st-feedrow__title {\n  color: var(--lum-error);\n}\n.lum-st-feedrow__sub {\n  font-size: 11px;\n  white-space: nowrap;\n}\n\n/* ── Tasks (sub-event spans) sub-view ─────────────────────────────── */\n.lum-st-spans {\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  flex: 1;\n}\n.lum-st-spans__tags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 8px 10px 4px;\n}\n.lum-st-tag {\n  font-size: 11px;\n  font-family: var(--lum-font-mono);\n  color: var(--lum-accent);\n  background: var(--lum-accent-soft);\n  border: 1px solid var(--lum-accent-line, var(--lum-accent));\n  border-radius: 999px;\n  padding: 1px 8px;\n}\n.lum-st-spans__search {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 10px;\n  border-bottom: 1px solid color-mix(in srgb, var(--lum-border) 60%, transparent);\n}\n.lum-st-spans__input {\n  flex: 1;\n  background: var(--lum-surface-2);\n  border: 1px solid var(--lum-border);\n  border-radius: 6px;\n  color: var(--lum-text);\n  padding: 4px 8px;\n  font-size: 12px;\n}\n.lum-st-spans__input:focus {\n  outline: none;\n  border-color: var(--lum-accent);\n}\n.lum-st-spans__count {\n  font-size: 11px;\n  font-variant-numeric: tabular-nums;\n}\n.lum-st-spans__rows {\n  overflow-y: auto;\n  min-height: 0;\n}\n.lum-st-spanrow {\n  display: grid;\n  grid-template-columns: 16px 52px 1fr auto;\n  gap: 8px;\n  align-items: baseline;\n  width: 100%;\n  text-align: left;\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid color-mix(in srgb, var(--lum-border) 50%, transparent);\n  color: var(--lum-text-2);\n  padding: 5px 10px;\n  cursor: pointer;\n  font: inherit;\n  font-family: var(--lum-font-mono);\n  transition: background var(--lum-dur-1) var(--lum-ease);\n}\n.lum-st-spanrow:hover {\n  background: var(--lum-surface-2);\n}\n.lum-st-spanrow.is-selected {\n  box-shadow: inset 2px 0 0 var(--lum-accent);\n}\n.lum-st-spanrow__glyph {\n  text-align: center;\n  color: #39c5cf;\n}\n.lum-st-spanrow.is-running .lum-st-spanrow__glyph {\n  opacity: 0.6;\n}\n.lum-st-spanrow__time {\n  color: var(--lum-accent);\n  font-variant-numeric: tabular-nums;\n}\n.lum-st-spanrow__title {\n  color: var(--lum-text);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.lum-st-spanrow__dur {\n  font-size: 11px;\n  white-space: nowrap;\n  font-variant-numeric: tabular-nums;\n}\n\n/* Floating inspector tab (mid/narrow) */\n.lum-st-inspectortab {\n  position: absolute;\n  right: 0;\n  top: 50%;\n  transform: translateY(-50%) rotate(180deg);\n  writing-mode: vertical-rl;\n  background: var(--lum-surface-2);\n  border: 1px solid var(--lum-border);\n  border-right: none;\n  color: var(--lum-text-2);\n  padding: 12px 5px;\n  border-radius: var(--lum-radius-sm) 0 0 var(--lum-radius-sm);\n  cursor: pointer;\n  font-size: 12px;\n  z-index: 30;\n  box-shadow: var(--lum-shadow);\n}\n.lum-st-inspectortab:hover {\n  color: var(--lum-text);\n  border-color: var(--lum-accent-line);\n}\n\n/* ═══════════════════════════ Timeline spine ═══════════════════════════ */\n.lum-st-timeline {\n  position: relative;\n  grid-area: timeline;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  background: var(--lum-surface);\n  box-shadow: inset 0 1px 0 var(--lum-hairline);\n}\n\n/* Overview strip */\n.lum-st-overview {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 5px 12px;\n  height: 40px;\n  border-bottom: 1px solid var(--lum-border);\n}\n.lum-st-overview__label {\n  font-size: 10px;\n  letter-spacing: 0.08em;\n  font-weight: 600;\n}\n.lum-st-overview__spark {\n  position: relative;\n  flex: 1;\n  height: 28px;\n  display: flex;\n  align-items: flex-end;\n  gap: 1px;\n  cursor: crosshair;\n  touch-action: none;\n}\n.lum-st-overview__bar {\n  position: relative;\n  z-index: 1;\n  flex: 1;\n  min-height: 2px;\n  border-radius: 1px 1px 0 0;\n  opacity: 0.85;\n}\n/* Progressive-load buffered fill behind the sparkline (video-style \"loaded\"). */\n.lum-st-overview__buffered {\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  z-index: 0;\n  background: color-mix(in srgb, var(--lum-accent) 12%, transparent);\n  border-right: 1px solid color-mix(in srgb, var(--lum-accent) 38%, transparent);\n  pointer-events: none;\n  transition: width 0.18s linear;\n}\n.lum-st-overview__window {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  background: var(--lum-accent-soft);\n  border-left: 1px solid var(--lum-accent-line);\n  border-right: 1px solid var(--lum-accent-line);\n  pointer-events: none;\n}\n.lum-st-overview__brush {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  background: color-mix(in srgb, var(--lum-accent) 22%, transparent);\n  border: 1px solid var(--lum-accent);\n  pointer-events: none;\n}\n.lum-st-overview__crumbs {\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  max-width: 40%;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n.lum-st-overview__crumbs::-webkit-scrollbar {\n  display: none;\n}\n.lum-st-crumb {\n  background: transparent;\n  border: 1px solid var(--lum-border);\n  color: var(--lum-muted);\n  border-radius: var(--lum-radius-full);\n  padding: 2px 9px;\n  font-size: 11px;\n  font-family: var(--lum-font-mono);\n  white-space: nowrap;\n  cursor: pointer;\n}\n.lum-st-crumb:hover {\n  color: var(--lum-text);\n  border-color: var(--lum-accent-line);\n}\n.lum-st-crumb.is-active {\n  color: var(--lum-text);\n  background: var(--lum-accent-soft);\n  border-color: var(--lum-accent-line);\n}\n\n/* Ruler + transport row */\n.lum-st-rulerrow {\n  display: flex;\n  align-items: stretch;\n  height: 46px;\n  border-bottom: 1px solid var(--lum-border);\n  background: var(--lum-surface);\n}\n.lum-st-transport {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 0 10px;\n  border-right: 1px solid var(--lum-border);\n  flex-shrink: 0;\n}\n.lum-st-transport__group {\n  display: flex;\n  align-items: center;\n  gap: 1px;\n}\n.lum-st-transport__group--right {\n  gap: 2px;\n}\n.lum-st-transport__time {\n  font-size: 12px;\n  white-space: nowrap;\n  font-variant-numeric: tabular-nums;\n  margin-left: 6px;\n  color: var(--lum-text-2);\n}\n/* Inactivity readout appended to the time (e.g. \"· 4:10 idle (34%)\"). */\n.lum-st-transport__idle {\n  font-size: 11.5px;\n}\n/* Crowded on small players — drop the idle readout there (it stays in the list). */\n.lum-strata--narrow .lum-st-transport__idle,\n.lum-strata--compact .lum-st-transport__idle {\n  display: none;\n}\n.lum-pl-play .lum-iconbtn {\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n  background: var(--lum-accent);\n  color: var(--lum-accent-contrast);\n  box-shadow: var(--lum-shadow-sm);\n}\n.lum-pl-play .lum-iconbtn:hover {\n  background: var(--lum-accent-hover);\n}\n.lum-pl-play .lum-iconbtn:active {\n  transform: scale(0.94);\n}\n.lum-pl-speed {\n  margin-left: 3px;\n  font-size: 11px;\n}\n.lum-st-rulerrow__ruler {\n  flex: 1;\n  min-width: 0;\n  position: relative;\n}\n\n/* The role=slider scrubber axis */\n.lum-st-ruler {\n  position: absolute;\n  inset: 0;\n  cursor: pointer;\n  touch-action: none;\n  outline-offset: -2px;\n}\n.lum-st-ruler:focus-visible {\n  box-shadow: var(--lum-focus);\n  border-radius: 2px;\n}\n.lum-st-ruler__tick {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 1px;\n  background: color-mix(in srgb, var(--lum-border) 70%, transparent);\n}\n.lum-st-ruler__ticklabel {\n  position: absolute;\n  top: 6px;\n  left: 4px;\n  font-size: 10px;\n  color: var(--lum-faint);\n  white-space: nowrap;\n  font-variant-numeric: tabular-nums;\n  pointer-events: none;\n}\n.lum-st-ruler__chdiv {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 1px;\n  background: var(--lum-accent-line);\n  opacity: 0.5;\n}\n\n/* ─────────────── Lanes ─────────────── */\n.lum-st-lanes {\n  flex: 1;\n  min-height: 0;\n  display: grid;\n  grid-template-columns: 150px 1fr;\n  /* Scroll the lane stack vertically when all lanes don't fit; never overflow\n     horizontally. Plain mouse-wheel now scrolls here (zoom requires ⌘/ctrl). */\n  overflow: hidden auto;\n  overscroll-behavior: contain;\n}\n.lum-st-lanes__rails {\n  border-right: 1px solid var(--lum-border);\n  background: var(--lum-surface);\n  position: sticky;\n  left: 0;\n  z-index: 4;\n}\n.lum-st-lanes__tracks {\n  position: relative;\n  min-width: 0;\n}\n\n.lum-st-rail {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  height: 30px;\n  padding: 0 8px 0 4px;\n  border-bottom: 1px solid color-mix(in srgb, var(--lum-border) 50%, transparent);\n  font-size: 12px;\n}\n.lum-st-rail.is-muted {\n  opacity: 0.4;\n}\n.lum-st-rail__collapse {\n  background: transparent;\n  border: none;\n  color: var(--lum-muted);\n  cursor: pointer;\n  display: inline-flex;\n  padding: 2px;\n}\n.lum-st-rail__collapse:hover {\n  color: var(--lum-text);\n}\n.lum-st-rail__label {\n  color: var(--lum-text-2);\n  font-weight: 540;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.lum-st-rail__count {\n  color: var(--lum-faint);\n  font-size: 11px;\n  margin-left: auto;\n  font-variant-numeric: tabular-nums;\n}\n.lum-st-rail__ctrls {\n  display: flex;\n  gap: 1px;\n}\n.lum-st-rail__btn {\n  background: transparent;\n  border: none;\n  color: var(--lum-faint);\n  cursor: pointer;\n  display: inline-flex;\n  padding: 3px;\n  border-radius: var(--lum-radius-xs);\n}\n.lum-st-rail__btn:hover {\n  color: var(--lum-text);\n  background: var(--lum-surface-2);\n}\n.lum-st-rail__btn.is-on {\n  color: var(--lum-accent);\n  background: var(--lum-accent-soft);\n}\n\n.lum-st-lane {\n  position: relative;\n  height: 30px;\n  /* Clip glyphs whose time falls outside the current zoom window so a zoom\n     never spills content horizontally and breaks the layout. */\n  overflow: hidden;\n  border-bottom: 1px solid color-mix(in srgb, var(--lum-border) 50%, transparent);\n}\n.lum-st-lane:focus-visible {\n  outline: none;\n  box-shadow: inset var(--lum-focus);\n}\n.lum-st-lane--collapsed {\n  height: 16px;\n  display: flex;\n  align-items: center;\n  padding-left: 8px;\n}\n.lum-st-lane__count {\n  font-size: 10px;\n  color: var(--lum-faint);\n}\n.lum-st-lane__empty {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  color: var(--lum-faint);\n  font-size: 11px;\n}\n\n/* Chapter blocks */\n.lum-st-chapter {\n  position: absolute;\n  top: 5px;\n  bottom: 5px;\n  border: 1px solid transparent;\n  border-radius: var(--lum-radius-xs);\n  cursor: pointer;\n  overflow: hidden;\n  text-align: left;\n  padding: 0 6px;\n  font: inherit;\n  display: flex;\n  align-items: center;\n  transition: filter var(--lum-dur-1) var(--lum-ease);\n}\n.lum-st-chapter:hover {\n  filter: brightness(1.2);\n}\n.lum-st-chapter__label {\n  font-size: 10.5px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--lum-text);\n}\n.lum-st-chapter--start {\n  background: color-mix(in srgb, var(--lum-info) 22%, transparent);\n  border-color: var(--lum-info-line);\n}\n.lum-st-chapter--browse,\n.lum-st-chapter--nav {\n  background: var(--lum-surface-2);\n  border-color: var(--lum-border);\n}\n.lum-st-chapter--load {\n  background: rgba(160, 107, 255, 0.16);\n  border-color: rgba(160, 107, 255, 0.4);\n}\n.lum-st-chapter--error {\n  background: var(--lum-error-soft);\n  border-color: var(--lum-error-line);\n}\n.lum-st-chapter--frustration {\n  background: var(--lum-warn-soft);\n  border-color: var(--lum-warn-line);\n}\n.lum-st-chapter--conversion {\n  background: var(--lum-ok-soft);\n  border-color: var(--lum-ok-line);\n}\n.lum-st-chapter--idle,\n.lum-st-chapter.is-idle {\n  background: repeating-linear-gradient(\n    45deg,\n    var(--lum-surface-2),\n    var(--lum-surface-2) 4px,\n    transparent 4px,\n    transparent 8px\n  );\n  border-color: var(--lum-border);\n}\n.lum-st-chapter--idle .lum-st-chapter__label {\n  color: var(--lum-faint);\n}\n\n/* Network mini-waterfall bars */\n.lum-st-netbar {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  height: 9px;\n  min-width: 2px;\n  border-radius: 2px;\n  cursor: pointer;\n  border: none;\n  padding: 0;\n  background: var(--lum-info);\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);\n}\n.lum-st-netbar--error {\n  background: var(--lum-error);\n  box-shadow: 0 0 8px var(--lum-error-line);\n}\n.lum-st-netbar--warn {\n  background: var(--lum-warn);\n}\n.lum-st-netbar--ok {\n  background: #a06bff;\n}\n.lum-st-netbar--muted {\n  background: var(--lum-faint);\n}\n.lum-st-netbar.is-selected {\n  outline: 2px solid var(--lum-accent);\n  outline-offset: 1px;\n  z-index: 3;\n}\n\n/* Task lane: duration bars (sub-event spans) */\n.lum-st-taskbar {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  height: 9px;\n  min-width: 3px;\n  border-radius: 3px;\n  cursor: pointer;\n  border: none;\n  padding: 0;\n  background: #39c5cf;\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);\n}\n.lum-st-taskbar.is-running {\n  width: 3px !important;\n  background: repeating-linear-gradient(90deg, #39c5cf 0 3px, transparent 3px 6px);\n  opacity: 0.8;\n}\n.lum-st-taskbar.is-selected {\n  outline: 2px solid var(--lum-accent);\n  outline-offset: 1px;\n  z-index: 3;\n}\n\n/* Glyphs */\n.lum-st-glyph {\n  position: absolute;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  /* min 24x24 hit area (§12) */\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n  font-size: 12px;\n}\n.lum-st-glyph__char {\n  pointer-events: none;\n  filter: drop-shadow(0 0 4px currentColor);\n}\n.lum-st-glyph__count {\n  position: absolute;\n  top: -2px;\n  right: -2px;\n  background: var(--lum-raised);\n  border: 1px solid var(--lum-border);\n  color: var(--lum-text);\n  border-radius: var(--lum-radius-full);\n  font-size: 8px;\n  font-family: var(--lum-font-mono);\n  min-width: 12px;\n  height: 12px;\n  line-height: 11px;\n  text-align: center;\n  padding: 0 2px;\n}\n.lum-st-glyph.is-selected .lum-st-glyph__char {\n  filter: drop-shadow(0 0 7px currentColor);\n}\n.lum-st-glyph.is-selected::after {\n  content: '';\n  position: absolute;\n  inset: 3px;\n  border: 1.5px solid var(--lum-accent);\n  border-radius: 50%;\n}\n@media (prefers-reduced-motion: no-preference) {\n  .lum-st-glyph--pulse .lum-st-glyph__char {\n    animation: lum-st-pulse 1.4s var(--lum-ease) infinite;\n  }\n}\n@keyframes lum-st-pulse {\n  0%,\n  100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.45;\n  }\n}\n\n/* Single playhead crossing all lanes */\n.lum-st-playhead {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 2px;\n  background: var(--lum-accent);\n  box-shadow: var(--lum-accent-glow);\n  transform: translateX(-1px);\n  pointer-events: none;\n  z-index: 5;\n}\n@media (prefers-reduced-motion: no-preference) {\n  .lum-st-playhead {\n    transition: left var(--lum-dur-1) linear;\n  }\n}\n.lum-st-playhead.is-offleft {\n  left: 0 !important;\n  box-shadow: -4px 0 8px var(--lum-accent);\n}\n.lum-st-playhead.is-offright {\n  left: 100% !important;\n  box-shadow: 4px 0 8px var(--lum-accent);\n}\n.lum-st-playhead__cap {\n  position: absolute;\n  top: -3px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 8px;\n  height: 8px;\n  background: var(--lum-accent);\n  border-radius: 50%;\n  box-shadow: var(--lum-accent-glow);\n}\n.lum-st-ghost {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 1px;\n  background: color-mix(in srgb, var(--lum-text) 35%, transparent);\n  pointer-events: none;\n  z-index: 4;\n}\n.lum-st-ghosttip {\n  position: absolute;\n  top: -1px;\n  transform: translateX(-50%);\n  background: var(--lum-overlay);\n  border: 1px solid var(--lum-border-strong);\n  padding: 2px 7px;\n  border-radius: 4px;\n  font-size: 10.5px;\n  white-space: nowrap;\n  pointer-events: none;\n  z-index: 12;\n  box-shadow: var(--lum-shadow);\n}\n.lum-st-ghosttip__lbl {\n  color: var(--lum-muted);\n}\n\n/* Signal ribbon (narrow/compact) */\n.lum-st-ribbonwrap {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  align-items: center;\n  padding: 0 12px;\n}\n.lum-st-ribbon {\n  position: relative;\n  width: 100%;\n  height: 28px;\n  cursor: pointer;\n  touch-action: none;\n  display: flex;\n  align-items: center;\n}\n.lum-st-ribbon:focus-visible {\n  box-shadow: var(--lum-focus);\n  border-radius: 4px;\n}\n.lum-st-ribbon__track {\n  width: 100%;\n  height: 6px;\n  background: var(--lum-surface-2);\n  border-radius: 999px;\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);\n}\n.lum-st-ribbon__glyph {\n  position: absolute;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  font-size: 11px;\n  padding: 4px;\n  filter: drop-shadow(0 0 4px currentColor);\n}\n.lum-st-ribbon__head {\n  position: absolute;\n  top: 2px;\n  bottom: 2px;\n  width: 2px;\n  background: var(--lum-accent);\n  box-shadow: var(--lum-accent-glow);\n  transform: translateX(-1px);\n  pointer-events: none;\n}\n\n/* ═══════════════════ Command palette ═══════════════════ */\n.lum-st-palette {\n  position: absolute;\n  inset: 0;\n  z-index: 140;\n  background: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding-top: 12vh;\n}\n.lum-st-palette__card {\n  width: min(560px, 92%);\n  background: var(--lum-overlay);\n  border: 1px solid var(--lum-border-strong);\n  border-radius: var(--lum-radius-lg);\n  box-shadow: var(--lum-shadow-lg);\n  overflow: hidden;\n}\n.lum-st-palette__input {\n  width: 100%;\n  border: none;\n  border-bottom: 1px solid var(--lum-border);\n  background: transparent;\n  color: var(--lum-text);\n  padding: 14px 16px;\n  font-size: 14px;\n  outline: none;\n}\n.lum-st-palette__input::placeholder {\n  color: var(--lum-faint);\n}\n.lum-st-palette__hint {\n  padding: 6px 16px 0;\n  font-size: 11px;\n}\n.lum-st-palette__list {\n  list-style: none;\n  margin: 0;\n  padding: 6px;\n  max-height: 50vh;\n  overflow: auto;\n}\n.lum-st-palette__item {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  width: 100%;\n  text-align: left;\n  background: transparent;\n  border: none;\n  color: var(--lum-text);\n  padding: 8px 10px;\n  border-radius: var(--lum-radius-sm);\n  cursor: pointer;\n}\n.lum-st-palette__item.is-active {\n  background: var(--lum-accent-soft);\n}\n.lum-st-palette__label {\n  font-size: 13px;\n  font-weight: 540;\n}\n.lum-st-palette__detail {\n  font-size: 11.5px;\n}\n.lum-st-palette__empty {\n  padding: 14px;\n  text-align: center;\n  font-size: 13px;\n}\n\n/* ════════════════════ Responsive (§4) ════════════════════ */\n/* Stage focus: lanes collapse to a strip; rails narrower. */\n.lum-strata--stage .lum-st-lanes {\n  grid-template-columns: 120px 1fr;\n}\n/* mid+: inspector docks become drawer; stage spans full row (handled by JS). */\n.lum-strata--narrow .lum-st-overview,\n.lum-strata--compact .lum-st-overview {\n  display: none; /* brush-zoom disabled; ribbon scrubber used */\n}\n.lum-strata--compact .lum-st-transport__group--right {\n  display: none;\n}\n.lum-strata--compact .lum-st-rulerrow {\n  height: 40px;\n}\n\n/* ════════════════════ rrweb wrapper ════════════════════ */\n.lum-strata .replayer-wrapper {\n  position: absolute;\n}\n.lum-strata .replayer-mouse-tail {\n  position: absolute;\n}\n\n/* ════════════════════════════════════════════════════════════════════\n   Reused panel / detail styles (NetworkDetail, console rows, etc.)\n   These render INSIDE the new Inspector — kept verbatim from the old shell.\n   ════════════════════════════════════════════════════════════════════ */\n.lum-pl-rows {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  font-size: 12.5px;\n}\n.lum-pl-row {\n  display: grid;\n  grid-template-columns: 18px 56px 1fr auto;\n  gap: 8px;\n  align-items: start;\n  padding: 5px 10px;\n  border-bottom: 1px solid color-mix(in srgb, var(--lum-border) 50%, transparent);\n}\n.lum-pl-row.is-active {\n  background: var(--lum-accent-soft);\n}\n.lum-pl-row--error {\n  background: var(--lum-error-soft);\n  box-shadow: inset 2px 0 0 var(--lum-error);\n}\n.lum-pl-row--warn {\n  background: var(--lum-warn-soft);\n  box-shadow: inset 2px 0 0 var(--lum-warn);\n}\n.lum-pl-row__lvl {\n  text-align: center;\n  font-weight: 700;\n  border-radius: var(--lum-radius-xs);\n  font-size: 11px;\n  line-height: 16px;\n}\n.lum-pl-row__time {\n  background: transparent;\n  border: none;\n  color: var(--lum-accent);\n  cursor: pointer;\n  padding: 0;\n  text-align: left;\n  font: inherit;\n  font-family: var(--lum-font-mono);\n  font-variant-numeric: tabular-nums;\n}\n.lum-pl-row__time:hover {\n  color: var(--lum-accent-hover);\n  text-decoration: underline;\n}\n.lum-pl-row__msg {\n  word-break: break-word;\n  white-space: pre-wrap;\n}\n.lum-pl-row__src {\n  font-size: 11px;\n  white-space: nowrap;\n  color: var(--lum-faint);\n}\n.lum-pl-arg--err {\n  color: var(--lum-error);\n}\n.lum-pl-arg--dom {\n  color: var(--lum-accent);\n}\n.lum-pl-arg__toggle {\n  background: transparent;\n  border: none;\n  color: var(--lum-info);\n  cursor: pointer;\n  font: inherit;\n  padding: 0;\n}\n.lum-pl-json,\n.lum-pl-stack,\n.lum-pl-inspector {\n  background: var(--lum-bg);\n  border: 1px solid var(--lum-border);\n  border-radius: var(--lum-radius-sm);\n  padding: 8px;\n  margin: 4px 0;\n  overflow: auto;\n  white-space: pre-wrap;\n  font-size: 11.5px;\n  font-family: var(--lum-font-mono);\n  max-height: 320px;\n}\n.lum-pl-stack {\n  color: var(--lum-muted);\n}\n.lum-pl-mark {\n  background: var(--lum-warn);\n  color: #000;\n  border-radius: 2px;\n}\n\n/* Network detail (reused verbatim by Inspector → NetworkDetail) */\n.lum-pl-detail__head {\n  font-size: 13px;\n  margin-bottom: 10px;\n}\n.lum-pl-detail__url {\n  word-break: break-all;\n  color: var(--lum-muted);\n  margin-top: 4px;\n}\n.lum-pl-tabs2 {\n  display: flex;\n  gap: 2px;\n  border-bottom: 1px solid var(--lum-border);\n  margin-bottom: 10px;\n}\n.lum-pl-tab2 {\n  background: transparent;\n  border: none;\n  border-bottom: 2px solid transparent;\n  color: var(--lum-muted);\n  padding: 6px 10px;\n  cursor: pointer;\n  font: inherit;\n  font-size: 12.5px;\n  transition: color var(--lum-dur-1) var(--lum-ease);\n}\n.lum-pl-tab2:hover {\n  color: var(--lum-text);\n}\n.lum-pl-tab2.is-active {\n  color: var(--lum-text);\n  border-bottom-color: var(--lum-accent);\n}\n.lum-pl-kv h5 {\n  margin: 12px 0 4px;\n  color: var(--lum-muted);\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n}\n.lum-pl-kv__row {\n  display: grid;\n  grid-template-columns: 130px 1fr;\n  gap: 10px;\n  padding: 3px 0;\n  font-size: 12px;\n  border-bottom: 1px solid color-mix(in srgb, var(--lum-border) 40%, transparent);\n}\n.lum-pl-kv__val {\n  word-break: break-all;\n}\n.lum-pl-redacted {\n  color: var(--lum-warn);\n}\n.lum-pl-timing__row {\n  display: grid;\n  grid-template-columns: 92px 1fr 64px;\n  gap: 8px;\n  align-items: center;\n  padding: 3px 0;\n  font-size: 12px;\n}\n.lum-pl-timing__label {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n.lum-pl-timing__i {\n  flex: none;\n  opacity: 0.45;\n  cursor: help;\n  vertical-align: middle;\n}\n.lum-pl-timing__i:hover {\n  opacity: 0.85;\n}\n.lum-pl-timing__bar {\n  background: var(--lum-surface-2);\n  height: 8px;\n  border-radius: 3px;\n  overflow: hidden;\n}\n.lum-pl-timing__bar span {\n  display: block;\n  height: 100%;\n  background: linear-gradient(90deg, var(--lum-accent), var(--lum-accent-hover));\n}\n\n/* Error groups + info (reused) */\n.lum-pl-errgroup {\n  padding: 10px;\n  border-bottom: 1px solid var(--lum-border);\n}\n.lum-pl-errgroup__head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n.lum-pl-errgroup__msg {\n  margin: 6px 0;\n  color: var(--lum-error);\n}\n.lum-pl-panel {\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  flex: 1;\n}\n.lum-pl-chips {\n  display: inline-flex;\n  gap: 2px;\n  flex-wrap: wrap;\n}\n.lum-pl-chip {\n  background: transparent;\n  border: 1px solid transparent;\n  color: var(--lum-muted);\n  border-radius: var(--lum-radius-xs);\n  padding: 3px 9px;\n  font-size: 12px;\n  font-weight: 540;\n  cursor: pointer;\n  white-space: nowrap;\n  transition: background var(--lum-dur-1) var(--lum-ease), color var(--lum-dur-1) var(--lum-ease);\n}\n.lum-pl-chip:hover {\n  color: var(--lum-text);\n}\n.lum-pl-chip.is-active {\n  color: var(--lum-text);\n  background: var(--lum-surface-2);\n  border-color: var(--lum-border);\n}\n.lum-pl-chip__count {\n  margin-left: 5px;\n  opacity: 0.7;\n  font-variant-numeric: tabular-nums;\n}\n\n/* ─────────────── Shortcut overlay (kept) ─────────────── */\n.lum-pl-help {\n  position: absolute;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.55);\n  backdrop-filter: blur(3px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 120;\n}\n.lum-pl-help__card {\n  background:\n    linear-gradient(var(--lum-hairline), transparent 80px) padding-box,\n    var(--lum-overlay) padding-box;\n  border: 1px solid var(--lum-border-strong);\n  border-radius: var(--lum-radius-lg);\n  padding: 18px;\n  width: min(520px, 92%);\n  box-shadow: var(--lum-shadow-lg);\n}\n.lum-pl-help__head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 12px;\n}\n.lum-pl-help__grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 8px 16px;\n}\n.lum-pl-help__row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 13px;\n}\n.lum-pl-kbd {\n  background: var(--lum-bg);\n  border: 1px solid var(--lum-border);\n  border-bottom-width: 2px;\n  border-radius: 5px;\n  padding: 2px 7px;\n  font-size: 11.5px;\n  font-family: var(--lum-font-mono);\n  min-width: 54px;\n  text-align: center;\n}\n\n/* Reduced-motion: kill JS-adjacent transitions */\n@media (prefers-reduced-motion: reduce) {\n  .lum-strata,\n  .lum-st-playhead {\n    transition: none;\n  }\n}\n\n/* ─────────────────────────── Replay cursor ──────────────────────────────\n   rrweb 2.x ships its player chrome (the replayed-cursor pointer, click\n   ripple, mouse-tail) in a separate stylesheet we don't bundle, so the\n   `.replayer-mouse` element renders unstyled. These rules restore the proper\n   mouse pointer + click feedback inside the replay. The arrow image is rrweb's\n   own (a black pointer); the ripple uses the Obsrviq accent. */\n.replayer-wrapper {\n  position: relative;\n}\n.replayer-mouse {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  transition: left 0.05s linear, top 0.05s linear;\n  background-size: contain;\n  background-position: center center;\n  background-repeat: no-repeat;\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iTGF5ZXIgMSIgdmlld0JveD0iMCAwIDUwIDUwIiB4PSIwcHgiIHk9IjBweCI+PHRpdGxlPkRlc2lnbl90bnA8L3RpdGxlPjxwYXRoIGQ9Ik00OC43MSw0Mi45MUwzNC4wOCwyOC4yOSw0NC4zMywxOEExLDEsMCwwLDAsNDQsMTYuMzlMMi4zNSwxLjA2QTEsMSwwLDAsMCwxLjA2LDIuMzVMMTYuMzksNDRhMSwxLDAsMCwwLDEuNjUuMzZMMjguMjksMzQuMDgsNDIuOTEsNDguNzFhMSwxLDAsMCwwLDEuNDEsMGw0LjM4LTQuMzhBMSwxLDAsMCwwLDQ4LjcxLDQyLjkxWm0tNS4wOSwzLjY3TDI5LDMyYTEsMSwwLDAsMC0xLjQxLDBsLTkuODUsOS44NUwzLjY5LDMuNjlsMzguMTIsMTRMMzIsMjcuNThBMSwxLDAsMCwwLDMyLDI5TDQ2LjU5LDQzLjYyWiI+PC9wYXRoPjwvc3ZnPg==\");\n  border-color: transparent;\n  /* The replay stage is scaled via transform; keep the cursor crisp + on top. */\n  z-index: 2;\n  pointer-events: none;\n}\n.replayer-mouse::after {\n  content: \"\";\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  background: var(--lum-accent, rgb(73, 80, 246));\n  border-radius: 100%;\n  transform: translate(-50%, -50%);\n  opacity: 0;\n}\n.replayer-mouse.active::after {\n  animation: lum-replay-click 0.4s ease-in-out 1;\n}\n.replayer-mouse.touch-device {\n  background-image: none;\n  width: 70px;\n  height: 70px;\n  border: 4px solid color-mix(in srgb, var(--lum-accent, #4950f6) 0%, transparent);\n  border-radius: 100%;\n  margin-left: -37px;\n  margin-top: -37px;\n  transition: left 0s linear, top 0s linear, border-color 0.2s ease-in-out;\n}\n.replayer-mouse.touch-device.touch-active {\n  border-color: var(--lum-accent, #4950f6);\n  transition: left 0.25s linear, top 0.25s linear, border-color 0.2s ease-in-out;\n}\n.replayer-mouse.touch-device::after {\n  opacity: 0;\n}\n.replayer-mouse.touch-device.active::after {\n  animation: lum-replay-touch-click 0.4s ease-in-out 1;\n}\n.replayer-mouse-tail {\n  position: absolute;\n  pointer-events: none;\n  z-index: 1;\n}\n@keyframes lum-replay-click {\n  0% { opacity: 0.4; width: 20px; height: 20px; }\n  50% { opacity: 0.6; width: 10px; height: 10px; }\n  100% { opacity: 0; }\n}\n@keyframes lum-replay-touch-click {\n  0% { opacity: 0; width: 20px; height: 20px; }\n  50% { opacity: 0.5; width: 10px; height: 10px; }\n  100% { opacity: 0; }\n}\n\n/* ───────────────────────── Mobile (RN) replay player ───────────────────── */\n.lum-mob {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  background: var(--lum-bg);\n  color: var(--lum-text);\n}\n.lum-mob--msg {\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  color: var(--lum-muted);\n  font-size: 14px;\n}\n.lum-mob--msg code {\n  font-size: 12px;\n  color: var(--lum-error);\n  max-width: 80%;\n  text-align: center;\n}\n.lum-mob-top {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 9px 14px;\n  border-bottom: 1px solid var(--lum-border);\n  background: var(--lum-surface);\n}\n.lum-mob-back {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  background: transparent;\n  border: 1px solid var(--lum-border);\n  border-radius: var(--lum-radius-full);\n  color: var(--lum-text);\n  font: inherit;\n  font-size: 12.5px;\n  padding: 5px 11px 5px 8px;\n  cursor: pointer;\n}\n.lum-mob-back:hover { background: var(--lum-raised); }\n.lum-mob-title {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  font-size: 13px;\n  font-weight: 540;\n  color: var(--lum-text-2);\n}\n.lum-mob-spacer { flex: 1; }\n\n.lum-mob-body {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n}\n.lum-mob-stagewrap {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 18px;\n  min-width: 0;\n  background:\n    radial-gradient(120% 120% at 50% 0%, var(--lum-surface) 0%, var(--lum-bg) 70%);\n}\n/* The phone frame — keeps the recorded device aspect ratio, fits the stage. */\n.lum-mob-device {\n  position: relative;\n  height: 100%;\n  max-height: 100%;\n  border-radius: 22px;\n  overflow: hidden;\n  background: #000;\n  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--lum-border);\n}\n.lum-mob-frame {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  background: #000;\n}\n.lum-mob-frame--empty {\n  width: 240px;\n  height: 100%;\n}\n/* Tap ripple — small + quick, so it reads as a precise touch, not a blob. */\n.lum-mob-tap {\n  position: absolute;\n  width: 18px;\n  height: 18px;\n  margin: -9px 0 0 -9px;\n  border-radius: 50%;\n  background: rgba(129, 140, 248, 0.26);\n  box-shadow: 0 0 0 1.5px rgba(129, 140, 248, 0.9) inset, 0 0 10px rgba(129, 140, 248, 0.5);\n  pointer-events: none;\n  animation: lum-mob-tap 0.42s ease-out forwards;\n}\n@keyframes lum-mob-tap {\n  from { transform: scale(0.35); opacity: 0.95; }\n  60%  { opacity: 0.7; }\n  to   { transform: scale(1.15); opacity: 0; }\n}\n/* Swipe streak — a soft glowing comet tracing the finger's recent path (per-segment fade\n   set inline). Non-scaling strokes keep a constant visual weight across device sizes. */\n.lum-mob-swipe {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  overflow: visible;\n}\n.lum-mob-swipe__seg {\n  stroke: rgba(129, 140, 248, 0.95);\n  stroke-width: 3.5;\n  stroke-linecap: round;\n  filter: drop-shadow(0 0 3px rgba(129, 140, 248, 0.65));\n}\n.lum-mob-swipe__head {\n  fill: #c7d2fe;\n  stroke: rgba(129, 140, 248, 0.95);\n  filter: drop-shadow(0 0 5px rgba(129, 140, 248, 0.9));\n}\n\n/* Synced structured-event feed. */\n.lum-mob-feed {\n  width: 320px;\n  flex: none;\n  border-left: 1px solid var(--lum-border);\n  background: var(--lum-surface);\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n.lum-mob-feed__head {\n  padding: 8px 14px;\n  font-size: 11px;\n  font-weight: 650;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  color: var(--lum-muted);\n  border-bottom: 1px solid var(--lum-border);\n}\n/* Feed / Network tabs */\n.lum-mob-feed__tabs { display: flex; border-bottom: 1px solid var(--lum-border); flex: none; }\n.lum-mob-feed__tab {\n  flex: 1; padding: 9px 0; background: none; border: 0; cursor: pointer;\n  font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;\n  color: var(--lum-muted); border-bottom: 2px solid transparent;\n}\n.lum-mob-feed__tab:hover { color: var(--lum-text-2); }\n.lum-mob-feed__tab.is-active { color: var(--lum-text); border-bottom-color: var(--lum-accent); }\n\n/* Network waterfall + inspector — modelled on the web NetworkPanel. */\n.lum-mob-net { display: flex; flex-direction: column; flex: 1; min-height: 0; font-size: 12px; }\n.lum-mob-net__empty { padding: 18px 14px; color: var(--lum-muted); font-size: 12.5px; }\n\n.lum-mob-net__toolbar {\n  display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; flex: none;\n  border-bottom: 1px solid var(--lum-border);\n}\n.lum-mob-net__chips { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }\n.lum-mob-net__chip {\n  padding: 2px 9px; border-radius: 999px; cursor: pointer; font-size: 11px; font-weight: 600;\n  color: var(--lum-muted); background: var(--lum-raised); border: 1px solid transparent;\n}\n.lum-mob-net__chip:hover { color: var(--lum-text-2); }\n.lum-mob-net__chip.is-active { color: var(--lum-text); background: var(--lum-surface); border-color: var(--lum-accent); }\n.lum-mob-net__follow {\n  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; color: var(--lum-muted); cursor: pointer;\n}\n.lum-mob-net__search {\n  width: 100%; padding: 4px 8px; border-radius: 6px; font-size: 12px;\n  background: var(--lum-bg); border: 1px solid var(--lum-border); color: var(--lum-text);\n}\n\n.lum-mob-net__rows { overflow-y: auto; flex: 1; min-height: 0; padding: 2px 0; }\n.lum-mob-net__row {\n  display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left;\n  padding: 7px 10px 8px; background: none; border: 0; border-bottom: 1px solid var(--lum-border);\n  cursor: pointer; color: var(--lum-text); border-left: 2px solid transparent;\n}\n.lum-mob-net__row:hover { background: var(--lum-raised); }\n.lum-mob-net__row.is-active { background: var(--lum-raised); border-left-color: var(--lum-accent); }\n.lum-mob-net__rowtop { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 7px; align-items: center; }\n.lum-mob-net__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--lum-text); }\n.lum-mob-net__method { font-size: 10.5px; font-weight: 700; color: var(--lum-muted); }\n.lum-mob-net__time { font-size: 11px; color: var(--lum-muted); font-variant-numeric: tabular-nums; }\n/* Timeline-positioned waterfall bar (start offset + duration over the whole session). */\n.lum-mob-net__wf { position: relative; display: block; height: 4px; border-radius: 2px; background: var(--lum-raised); }\n.lum-mob-net__bar { position: absolute; top: 0; height: 100%; min-width: 2px; border-radius: 2px; background: var(--lum-accent); }\n.lum-mob-net__bar--error { background: var(--lum-error); }\n.lum-mob-net__bar--warn { background: #d97706; }\n.lum-mob-net__bar--info { background: #3b82f6; }\n.lum-mob-net__bar--default { background: #1f9d55; }\n\n.lum-mob-net__footer {\n  flex: none; padding: 6px 10px; font-size: 11px; color: var(--lum-muted);\n  border-top: 1px solid var(--lum-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n/* Console rows — reuse the web ConsoleArgs renderer, with a compact time/jump header. */\n.lum-mob-crow { padding: 5px 10px 6px; border-bottom: 1px solid var(--lum-border); border-left: 2px solid transparent; }\n.lum-mob-crow.is-active { background: var(--lum-raised); border-left-color: var(--lum-accent); }\n.lum-mob-crow__t { display: inline-block; margin-bottom: 2px; padding: 0; background: none; border: 0; cursor: pointer; font-size: 10.5px; color: var(--lum-muted); }\n.lum-mob-crow__t:hover { color: var(--lum-accent); }\n\n/* Mobile AI panel — vision-grounded narrative + seekable findings. */\n.lum-mob-ai { overflow-y: auto; flex: 1; min-height: 0; padding: 10px 12px 14px; font-size: 12.5px; }\n.lum-mob-ai__msg { padding: 18px 14px; color: var(--lum-muted); font-size: 12.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }\n.lum-mob-ai__cta { padding: 26px 18px; text-align: center; color: var(--lum-muted); display: flex; flex-direction: column; align-items: center; gap: 6px; }\n.lum-mob-ai__ctatitle { margin: 4px 0 0; font-size: 14px; font-weight: 650; color: var(--lum-text); }\n.lum-mob-ai__ctasub { margin: 0; font-size: 12px; line-height: 1.5; max-width: 280px; }\n.lum-mob-ai__ctabtn { margin-top: 8px; padding: 7px 18px; border-radius: 8px; cursor: pointer; font-size: 12.5px; font-weight: 650; color: #fff; background: var(--lum-accent); border: 0; }\n.lum-mob-ai__ctabtn:hover { filter: brightness(1.06); }\n.lum-mob-ai__cap { margin-bottom: 8px; padding: 6px 9px; border-radius: 6px; font-size: 11px; color: var(--lum-warn); background: var(--lum-raised); border: 1px solid var(--lum-border); }\n.lum-mob-ai__retry { padding: 2px 9px; border-radius: 6px; cursor: pointer; font-size: 11px; font-weight: 600; color: var(--lum-accent); background: var(--lum-raised); border: 1px solid var(--lum-border); }\n.lum-mob-ai__head { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }\n.lum-mob-ai__headline { font-size: 13px; font-weight: 650; color: var(--lum-text); flex: 1; min-width: 0; }\n.lum-mob-ai__refresh { flex: none; padding: 3px; border-radius: 5px; cursor: pointer; color: var(--lum-muted); background: none; border: 1px solid var(--lum-border); display: inline-flex; }\n.lum-mob-ai__refresh:hover { color: var(--lum-text); }\n.lum-mob-ai__narrative { margin: 0 0 12px; color: var(--lum-text-2); line-height: 1.5; }\n.lum-mob-ai__sec { margin-bottom: 12px; }\n.lum-mob-ai__sectitle { font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; color: var(--lum-muted); margin-bottom: 5px; }\n.lum-mob-ai__findings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }\n.lum-mob-ai__finding { display: flex; gap: 8px; padding: 6px; border-radius: 7px; cursor: pointer; }\n.lum-mob-ai__finding:hover { background: var(--lum-raised); }\n.lum-mob-ai__dot { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--lum-muted); }\n.lum-mob-ai__dot--err { background: var(--lum-error); }\n.lum-mob-ai__dot--warn { background: #d97706; }\n.lum-mob-ai__dot--info { background: #3b82f6; }\n.lum-mob-ai__fbody { display: flex; flex-direction: column; gap: 1px; min-width: 0; }\n.lum-mob-ai__ftitle { font-weight: 600; color: var(--lum-text); }\n.lum-mob-ai__ft { font-weight: 400; font-size: 10.5px; color: var(--lum-muted); }\n.lum-mob-ai__fdetail { font-size: 11.5px; color: var(--lum-text-2); line-height: 1.4; }\n.lum-mob-ai__screens { display: flex; flex-wrap: wrap; gap: 5px; }\n.lum-mob-ai__screen { padding: 3px 8px; border-radius: 999px; cursor: pointer; font-size: 11px; color: var(--lum-text-2); background: var(--lum-raised); border: 1px solid var(--lum-border); }\n.lum-mob-ai__screen:hover { color: var(--lum-text); border-color: var(--lum-accent); }\n.lum-mob-ai__st { color: var(--lum-muted); }\n.lum-mob-ai__foot { font-size: 10.5px; color: var(--lum-muted); padding-top: 4px; border-top: 1px solid var(--lum-border); }\n\n/* Error groups — compact mirror of the web ErrorsPanel. */\n.lum-mob-errgrp { padding: 9px 10px; border-bottom: 1px solid var(--lum-border); }\n.lum-mob-errgrp__head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }\n.lum-mob-errgrp__name { font-size: 12px; color: var(--lum-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.lum-mob-errgrp__jump { margin-left: auto; padding: 0; background: none; border: 0; cursor: pointer; font-size: 10.5px; color: var(--lum-accent); white-space: nowrap; }\n.lum-mob-errgrp__msg { font-size: 11.5px; color: var(--lum-text-2); word-break: break-word; }\n.lum-mob-errgrp__stack {\n  margin: 5px 0 0; padding: 7px; border-radius: 6px; max-height: 180px; overflow: auto;\n  font-size: 10.5px; line-height: 1.4; white-space: pre-wrap; word-break: break-all;\n  background: var(--lum-bg); border: 1px solid var(--lum-border); color: var(--lum-muted);\n}\n.lum-mob-feed__list {\n  list-style: none;\n  margin: 0;\n  padding: 4px 0;\n  overflow-y: auto;\n  flex: 1;\n}\n.lum-mob-ev {\n  display: flex;\n  gap: 10px;\n  padding: 5px 14px;\n  font-size: 12px;\n  cursor: pointer;\n  opacity: 0.5;\n  border-left: 2px solid transparent;\n}\n.lum-mob-ev.is-past { opacity: 1; }\n.lum-mob-ev.is-current {\n  background: var(--lum-accent-soft);\n  border-left-color: var(--lum-accent);\n}\n.lum-mob-ev:hover { background: var(--lum-raised); }\n.lum-mob-ev__t {\n  flex: none;\n  width: 48px;\n  color: var(--lum-muted);\n  font-variant-numeric: tabular-nums;\n  font-size: 11px;\n}\n.lum-mob-ev__label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.lum-mob-ev--error .lum-mob-ev__label { color: var(--lum-error); }\n.lum-mob-ev--network .lum-mob-ev__label { color: var(--lum-text-2); }\n\n/* Transport + scrubber. */\n.lum-mob-transport {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 14px;\n  border-top: 1px solid var(--lum-border);\n  background: var(--lum-surface);\n}\n.lum-mob-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  border: 1px solid transparent;\n  background: transparent;\n  color: var(--lum-text);\n  cursor: pointer;\n}\n.lum-mob-btn:hover { background: var(--lum-raised); }\n.lum-mob-btn--play {\n  background: var(--lum-accent);\n  color: var(--lum-accent-contrast);\n}\n.lum-mob-btn--play:hover { background: var(--lum-accent-hover); }\n.lum-mob-scrub { flex: 1; padding: 0 6px; }\n.lum-mob-track {\n  position: relative;\n  height: 22px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.lum-mob-track::before {\n  content: '';\n  position: absolute;\n  left: 0; right: 0;\n  height: 4px;\n  border-radius: 2px;\n  background: var(--lum-border-strong);\n}\n.lum-mob-track__fill {\n  position: absolute;\n  left: 0;\n  height: 4px;\n  border-radius: 2px;\n  background: var(--lum-accent);\n}\n.lum-mob-track__head {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  margin-left: -6px;\n  border-radius: 50%;\n  background: var(--lum-accent);\n  box-shadow: 0 0 0 3px var(--lum-accent-soft);\n}\n.lum-mob-mark {\n  position: absolute;\n  width: 3px;\n  height: 10px;\n  margin-left: -1px;\n  border-radius: 1px;\n}\n.lum-mob-mark--error { background: var(--lum-error); }\n.lum-mob-mark--custom { background: var(--lum-accent); }\n.lum-mob-time {\n  font-size: 12px;\n  font-variant-numeric: tabular-nums;\n  color: var(--lum-text-2);\n  white-space: nowrap;\n}\n.lum-mob-speed {\n  background: var(--lum-surface-2);\n  color: var(--lum-text);\n  border: 1px solid var(--lum-border);\n  border-radius: 7px;\n  font: inherit;\n  font-size: 12px;\n  padding: 4px 6px;\n}\n\n.lum-widget {\n  color: var(--lum-text);\n  font-family: var(--lum-font-ui);\n}\n\n/* ── Insight cards ── */\n.lum-w-cards {\n  display: grid;\n  gap: 14px;\n}\n.lum-w-card {\n  position: relative;\n  background:\n    linear-gradient(var(--lum-hairline), transparent 64px) padding-box,\n    var(--lum-raised) padding-box;\n  border: 1px solid var(--lum-border);\n  border-radius: 14px;\n  box-shadow: var(--lum-shadow-sm);\n  padding: 16px 18px 16px 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 7px;\n  overflow: hidden;\n  transition: transform var(--lum-dur-1) var(--lum-ease), box-shadow var(--lum-dur-1) var(--lum-ease);\n}\n.lum-w-card:hover {\n  transform: translateY(-1px);\n  box-shadow: var(--lum-shadow);\n}\n/* priority left rule, colored by the severity badge inside */\n.lum-w-card::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 3px;\n  background: var(--lum-info);\n}\n.lum-w-card:has(.lum-badge--error)::before {\n  background: var(--lum-error);\n}\n.lum-w-card:has(.lum-badge--warn)::before {\n  background: var(--lum-warn);\n}\n.lum-w-card:has(.lum-badge--info)::before {\n  background: var(--lum-info);\n}\n.lum-w-card__head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.lum-w-card__head strong {\n  font-size: 15px;\n  font-weight: 620;\n  letter-spacing: -0.006em;\n}\n.lum-w-card__head .lum-badge {\n  text-transform: uppercase;\n  font-size: 11px;\n  letter-spacing: 0.04em;\n}\n.lum-w-card__what {\n  margin: 2px 0 0;\n  color: var(--lum-text);\n}\n.lum-w-card__why {\n  margin: 0;\n  font-size: 13px;\n  color: var(--lum-text-2);\n}\n.lum-w-card__rec {\n  position: relative;\n  margin: 6px 0;\n  padding: 10px 12px 10px 14px;\n  background: var(--lum-surface-2);\n  border-radius: var(--lum-radius-sm);\n  font-size: 13px;\n  border-left: 3px solid var(--lum-accent);\n}\n.lum-w-card__rec::before {\n  content: 'Recommended fix';\n  display: block;\n  font-size: 10px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--lum-accent);\n  margin-bottom: 3px;\n}\n.lum-w-card__meta {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  flex-wrap: wrap;\n  font-size: 12px;\n}\n.lum-w-card__meta .lum-muted {\n  margin-left: auto;\n  font-family: var(--lum-font-mono);\n  font-variant-numeric: tabular-nums;\n  color: var(--lum-faint);\n}\n.lum-w-card__actions {\n  display: flex;\n  gap: 8px;\n  margin-top: 6px;\n}\n\n/* ── Recommendation queue ── */\n.lum-w-queue {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.lum-w-queue__item {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  background:\n    linear-gradient(var(--lum-hairline), transparent 48px) padding-box,\n    var(--lum-raised) padding-box;\n  border: 1px solid var(--lum-border);\n  border-radius: var(--lum-radius);\n  box-shadow: var(--lum-shadow-sm);\n  padding: 10px 14px;\n  transition: transform var(--lum-dur-1) var(--lum-ease), box-shadow var(--lum-dur-1) var(--lum-ease);\n}\n.lum-w-queue__item:hover {\n  transform: translateY(-1px);\n  box-shadow: var(--lum-shadow);\n}\n.lum-w-queue__rank {\n  font-size: 18px;\n  font-weight: 680;\n  font-family: var(--lum-font-mono);\n  font-variant-numeric: tabular-nums;\n  color: var(--lum-accent);\n  width: 24px;\n  text-align: center;\n}\n.lum-w-queue__body {\n  flex: 1;\n  min-width: 0;\n}\n.lum-w-queue__title {\n  font-weight: 600;\n  font-size: 14px;\n}\n.lum-w-queue__meta {\n  display: flex;\n  gap: 6px;\n  margin-top: 4px;\n  flex-wrap: wrap;\n}\n\n/* ── Score gauge ── */\n.lum-w-score {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 6px;\n}\n.lum-w-score__label {\n  font-size: 13px;\n  color: var(--lum-muted);\n  font-weight: 600;\n}\n/* Animate the arc sweeping from empty (full circumference) to its value. */\n.lum-w-score__arc {\n  animation: lum-arc-sweep var(--lum-dur-3) var(--lum-ease) both;\n}\n@keyframes lum-arc-sweep {\n  from {\n    stroke-dashoffset: var(--lum-arc-c);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .lum-w-score__arc {\n    animation: none;\n  }\n}\n\n/* ── Copilot ── */\n.lum-w-copilot {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 280px;\n  background:\n    linear-gradient(var(--lum-hairline), transparent 80px) padding-box,\n    var(--lum-surface) padding-box;\n  border: 1px solid var(--lum-border);\n  border-radius: var(--lum-radius-lg);\n  box-shadow: var(--lum-shadow-sm);\n  overflow: hidden;\n}\n.lum-w-copilot__log {\n  flex: 1;\n  overflow: auto;\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n.lum-w-copilot__hint {\n  font-size: 13px;\n  color: var(--lum-text-2);\n}\n.lum-w-copilot__q {\n  font-weight: 620;\n  color: var(--lum-text);\n  margin-bottom: 4px;\n}\n.lum-w-copilot__a {\n  white-space: pre-wrap;\n  font-size: 13.5px;\n  line-height: 1.6;\n  color: var(--lum-text-2);\n}\n.lum-w-copilot__ev {\n  margin-top: 8px;\n  font-size: 12px;\n}\n.lum-w-copilot__ev .lum-badge {\n  color: var(--lum-info);\n  border-color: var(--lum-info-line);\n  background: var(--lum-info-soft);\n}\n.lum-w-copilot__caret {\n  display: inline-block;\n  width: 7px;\n  height: 14px;\n  background: var(--lum-accent);\n  margin-left: 2px;\n  vertical-align: text-bottom;\n  animation: lum-blink 1s steps(2) infinite;\n}\n@keyframes lum-blink {\n  50% {\n    opacity: 0;\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .lum-w-copilot__caret {\n    animation: none;\n  }\n}\n.lum-w-copilot__bar {\n  display: flex;\n  gap: 8px;\n  padding: 10px;\n  border-top: 1px solid var(--lum-border);\n  box-shadow: inset 0 1px 0 var(--lum-hairline);\n}\n.lum-w-copilot__bar .lum-pl-search {\n  flex: 1;\n}\n";
+export const EMBED_CSS = "/* Obsrviq design tokens (§16) — refined. Override any --lum-* var to white-label.\n   All neutrals carry a faint cool-blue hue (~232°) for identity; the accent is a\n   confident iris reserved for live / now / active + primary CTA. */\n:root,\n[data-lum-theme='dark'] {\n  /* ── Surface ramp: bg → surface → raised → overlay (cool-tinted neutrals) ── */\n  --lum-bg: #0a0b0f; /* app canvas */\n  --lum-surface: #101218; /* primary cards / sidebar / topbar */\n  --lum-surface-2: #171a22; /* raised: hover, inputs, nested panels */\n  --lum-raised: #1c2029; /* floats above surface (metric tiles, menus) */\n  --lum-overlay: #20242e; /* drawers / toasts / popovers (highest) */\n  --lum-border: #232733; /* hairline */\n  --lum-border-strong: #2e3340; /* emphasized dividers, input borders */\n  --lum-hairline: rgba(255, 255, 255, 0.06); /* top inner-highlight for material edges */\n\n  /* ── Text ramp (AA on --lum-surface) ── */\n  --lum-text: #eceef3; /* primary */\n  --lum-text-2: #b6bcc8; /* secondary body */\n  --lum-muted: #828a99; /* tertiary / labels */\n  --lum-faint: #5b6273; /* disabled / placeholder / axis ticks */\n\n  /* ── Accent: iris. Reserve for live/now/active + primary CTA only. ── */\n  --lum-accent: #6e76f1; /* iris-indigo */\n  --lum-accent-hover: #828aff;\n  --lum-accent-press: #5a62d8;\n  --lum-accent-soft: rgba(110, 118, 241, 0.14); /* active nav/row wash, chip bg */\n  --lum-accent-line: rgba(110, 118, 241, 0.4); /* accent hairline/border */\n  --lum-accent-contrast: #ffffff;\n  --lum-accent-glow: 0 0 24px rgba(110, 118, 241, 0.3); /* logo dot, live pulse */\n\n  /* ── Semantic. Each gets fg / soft bg / line for badges & rows. ── */\n  --lum-ok: #3ecf8e;\n  --lum-ok-soft: rgba(62, 207, 142, 0.13);\n  --lum-ok-line: rgba(62, 207, 142, 0.38);\n  --lum-warn: #f5b54a;\n  --lum-warn-soft: rgba(245, 181, 74, 0.13);\n  --lum-warn-line: rgba(245, 181, 74, 0.4);\n  --lum-error: #f0555c;\n  --lum-error-soft: rgba(240, 85, 92, 0.13);\n  --lum-error-line: rgba(240, 85, 92, 0.42);\n  --lum-info: #58a6ff; /* distinct sky blue so \"info\" ≠ \"accent/active\" */\n  --lum-info-soft: rgba(88, 166, 255, 0.13);\n  --lum-info-line: rgba(88, 166, 255, 0.4);\n\n  /* ── Data-viz palette (categorical, for charts/legends) ── */\n  --lum-viz-1: #6e76f1; /* sessions (accent) */\n  --lum-viz-2: #f0555c; /* errors */\n  --lum-viz-3: #3ecf8e; /* conversions */\n  --lum-viz-4: #f5b54a; /* rage/slow */\n  --lum-viz-grid: rgba(255, 255, 255, 0.05);\n\n  /* ── Radius scale ── */\n  --lum-radius-xs: 4px;\n  --lum-radius-sm: 7px;\n  --lum-radius: 11px; /* cards/buttons */\n  --lum-radius-lg: 16px; /* page-level panels, player frame */\n  --lum-radius-full: 999px;\n\n  /* ── Type ── */\n  --lum-font-ui: 'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif;\n  --lum-font-display: 'Inter Variable', 'Inter', system-ui, sans-serif; /* optical size handles display */\n  --lum-font-mono: 'JetBrains Mono', 'JetBrains Mono NL', ui-monospace, 'SF Mono', Menlo, monospace;\n\n  /* ── Elevation (layered shadow + ambient). Use the named tiers, not raw --lum-shadow. ── */\n  --lum-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.2);\n  --lum-shadow: 0 4px 14px rgba(0, 0, 0, 0.34), 0 1px 2px rgba(0, 0, 0, 0.3); /* default raise */\n  --lum-shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.5), 0 6px 16px rgba(0, 0, 0, 0.34); /* overlays/drawer */\n\n  /* ── Motion ── */\n  --lum-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* standard ease-out */\n  --lum-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* gentle overshoot for thumbs/toggles */\n  --lum-dur-1: 110ms; /* hover/press feedback */\n  --lum-dur-2: 180ms; /* enter/leave, expand */\n  --lum-dur-3: 320ms; /* drawers, chart draw */\n  --lum-motion: var(--lum-dur-2) var(--lum-ease); /* back-compat alias */\n\n  /* ── Focus ── */\n  --lum-focus: 0 0 0 2px var(--lum-bg), 0 0 0 4px var(--lum-accent);\n}\n\n/* Opt-in light theme: add data-lum-theme=\"light\" on a container. */\n[data-lum-theme='light'] {\n  --lum-bg: #fbfbfd;\n  --lum-surface: #ffffff;\n  --lum-surface-2: #f4f5f8;\n  --lum-raised: #ffffff;\n  --lum-overlay: #ffffff;\n  --lum-border: #e6e8ee;\n  --lum-border-strong: #d4d8e1;\n  --lum-hairline: rgba(20, 22, 30, 0.04);\n  --lum-text: #14161c;\n  --lum-text-2: #3c4250;\n  --lum-muted: #5d646e;\n  --lum-faint: #939aa6;\n  --lum-accent-soft: rgba(110, 118, 241, 0.1);\n  --lum-shadow-sm: 0 1px 2px rgba(20, 22, 30, 0.06);\n  --lum-shadow: 0 4px 16px rgba(20, 22, 30, 0.1), 0 1px 2px rgba(20, 22, 30, 0.06);\n  --lum-shadow-lg: 0 18px 48px rgba(20, 22, 30, 0.16);\n  --lum-viz-grid: rgba(20, 22, 30, 0.06);\n  /* Semantic foregrounds re-tuned for legibility on white (the soft/line bg\n     variants are translucent and already read fine; only the solid hue, used as\n     text + dots, needed darkening). Charts use the separate --lum-viz-* palette. */\n  --lum-ok: #178f57;\n  --lum-warn: #b0760f;\n  --lum-error: #d83a43;\n  --lum-info: #2f7de0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :root {\n    --lum-motion: 0ms;\n    --lum-dur-1: 0ms;\n    --lum-dur-2: 0ms;\n    --lum-dur-3: 0ms;\n  }\n}\n\n/* ───────────────────────────── Base ──────────────────────────────── */\n.lum-root,\n.lum {\n  color: var(--lum-text);\n  font-family: var(--lum-font-ui);\n  font-size: 14px;\n  line-height: 1.55;\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n}\n.lum-mono {\n  font-family: var(--lum-font-mono);\n  font-variant-numeric: tabular-nums;\n  font-feature-settings: 'tnum' 1;\n}\n.lum-muted {\n  color: var(--lum-muted);\n}\n.lum *:focus-visible {\n  outline: none;\n  box-shadow: var(--lum-focus);\n  border-radius: var(--lum-radius-sm);\n}\n\n/* ─────────────────── Material recipe (elevated surfaces) ──────────── */\n/* shadow + a 1px inner top highlight (the gradient padding-box trick). */\n.lum-elevated {\n  background:\n    linear-gradient(var(--lum-hairline), transparent 64px) padding-box,\n    var(--lum-raised) padding-box;\n  border: 1px solid var(--lum-border);\n  box-shadow: var(--lum-shadow-sm);\n}\n\n/* ──────────────────────────── Buttons ────────────────────────────── */\n.lum-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 8px 14px;\n  border-radius: var(--lum-radius);\n  border: 1px solid var(--lum-border);\n  background: var(--lum-surface-2);\n  color: var(--lum-text);\n  font: inherit;\n  font-weight: 560;\n  cursor: pointer;\n  transition:\n    background var(--lum-dur-1) var(--lum-ease),\n    border-color var(--lum-dur-1) var(--lum-ease),\n    box-shadow var(--lum-dur-1) var(--lum-ease),\n    transform var(--lum-dur-1) var(--lum-ease);\n  white-space: nowrap;\n}\n.lum-btn:hover {\n  background: var(--lum-raised);\n  border-color: var(--lum-border-strong);\n}\n.lum-btn:active {\n  transform: translateY(1px);\n}\n.lum-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.lum-btn--primary {\n  background: var(--lum-accent);\n  color: var(--lum-accent-contrast);\n  border-color: transparent;\n  box-shadow: var(--lum-shadow-sm);\n}\n.lum-btn--primary:hover {\n  background: var(--lum-accent-hover);\n  border-color: transparent;\n  transform: translateY(-1px);\n  box-shadow: var(--lum-shadow);\n}\n.lum-btn--primary:active {\n  background: var(--lum-accent-press);\n  transform: translateY(1px);\n  box-shadow: var(--lum-shadow-sm);\n}\n.lum-btn--ghost {\n  background: transparent;\n  border-color: var(--lum-border);\n}\n.lum-btn--ghost:hover {\n  background: var(--lum-surface-2);\n  border-color: var(--lum-border-strong);\n}\n.lum-btn--danger {\n  background: var(--lum-error);\n  color: #fff;\n  border-color: transparent;\n}\n.lum-btn--sm {\n  padding: 5px 10px;\n  font-size: 13px;\n}\n\n.lum-iconbtn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 34px;\n  height: 34px;\n  border-radius: var(--lum-radius-sm);\n  border: 1px solid transparent;\n  background: transparent;\n  color: var(--lum-text);\n  cursor: pointer;\n  transition:\n    background var(--lum-dur-1) var(--lum-ease),\n    color var(--lum-dur-1) var(--lum-ease),\n    transform var(--lum-dur-1) var(--lum-ease);\n}\n.lum-iconbtn:hover {\n  background: var(--lum-surface-2);\n}\n.lum-iconbtn:active {\n  transform: scale(0.96);\n}\n.lum-iconbtn[aria-pressed='true'] {\n  background: var(--lum-accent-soft);\n  color: var(--lum-accent);\n}\n.lum-iconbtn:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n/* ───────────────────────────── Badge ─────────────────────────────── */\n.lum-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 2px 9px;\n  border-radius: var(--lum-radius-full);\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 1.5;\n  background: var(--lum-surface-2);\n  color: var(--lum-muted);\n  border: 1px solid var(--lum-border);\n  white-space: nowrap;\n}\n.lum-badge--error {\n  color: var(--lum-error);\n  border-color: var(--lum-error-line);\n  background: var(--lum-error-soft);\n}\n.lum-badge--warn {\n  color: var(--lum-warn);\n  border-color: var(--lum-warn-line);\n  background: var(--lum-warn-soft);\n}\n.lum-badge--ok {\n  color: var(--lum-ok);\n  border-color: var(--lum-ok-line);\n  background: var(--lum-ok-soft);\n}\n.lum-badge--info {\n  color: var(--lum-info);\n  border-color: var(--lum-info-line);\n  background: var(--lum-info-soft);\n}\n.lum-badge--accent {\n  color: var(--lum-accent-contrast);\n  background: var(--lum-accent);\n  border-color: transparent;\n}\n\n/* ──────────────────────────── Tabs ───────────────────────────────── */\n.lum-tabs {\n  display: flex;\n  gap: 2px;\n  border-bottom: 1px solid var(--lum-border);\n  overflow-x: auto;\n  scrollbar-width: thin;\n}\n.lum-tab {\n  appearance: none;\n  background: transparent;\n  border: none;\n  border-bottom: 2px solid transparent;\n  color: var(--lum-muted);\n  padding: 9px 12px;\n  font: inherit;\n  font-weight: 560;\n  cursor: pointer;\n  white-space: nowrap;\n  transition: color var(--lum-dur-1) var(--lum-ease), border-color var(--lum-dur-1) var(--lum-ease);\n}\n.lum-tab:hover {\n  color: var(--lum-text);\n}\n.lum-tab[aria-selected='true'] {\n  color: var(--lum-text);\n  border-bottom-color: var(--lum-accent);\n}\n.lum-tab__count {\n  margin-left: 6px;\n  font-size: 11px;\n  color: var(--lum-muted);\n}\n\n/* ─────────────────────────── Tooltip ─────────────────────────────── */\n.lum-tip {\n  position: relative;\n  display: inline-flex;\n}\n.lum-tip__bubble {\n  position: absolute;\n  bottom: calc(100% + 6px);\n  left: 50%;\n  transform: translateX(-50%);\n  background: var(--lum-overlay);\n  color: var(--lum-text);\n  border: 1px solid var(--lum-border-strong);\n  padding: 4px 8px;\n  border-radius: var(--lum-radius-sm);\n  font-size: 12px;\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n  transition: opacity var(--lum-dur-1) var(--lum-ease);\n  z-index: 50;\n  box-shadow: var(--lum-shadow);\n}\n.lum-tip:hover .lum-tip__bubble,\n.lum-tip:focus-within .lum-tip__bubble {\n  opacity: 1;\n}\n\n/* ──────────────────────────── Drawer ─────────────────────────────── */\n.lum-drawer__scrim {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(2px);\n  z-index: 100;\n  animation: lum-fade var(--lum-dur-2) var(--lum-ease);\n}\n.lum-drawer {\n  position: fixed;\n  top: 0;\n  right: 0;\n  height: 100%;\n  width: min(520px, 100%);\n  background: var(--lum-overlay);\n  border-left: 1px solid var(--lum-border-strong);\n  z-index: 101;\n  box-shadow: var(--lum-shadow-lg);\n  display: flex;\n  flex-direction: column;\n  animation: lum-slide-in var(--lum-dur-2) var(--lum-ease);\n}\n.lum-drawer__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--lum-border);\n}\n.lum-drawer__body {\n  overflow: auto;\n  padding: 16px;\n}\n@keyframes lum-fade {\n  from {\n    opacity: 0;\n  }\n}\n@keyframes lum-slide-in {\n  from {\n    transform: translateX(20px);\n    opacity: 0;\n  }\n}\n\n/* ─────────────────────────── Skeleton ────────────────────────────── */\n.lum-skeleton {\n  background: linear-gradient(90deg, var(--lum-surface-2) 25%, var(--lum-raised) 37%, var(--lum-surface-2) 63%);\n  background-size: 400% 100%;\n  border-radius: var(--lum-radius-sm);\n  animation: lum-shimmer 1.4s ease infinite;\n}\n@keyframes lum-shimmer {\n  to {\n    background-position: -135% 0;\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .lum-skeleton {\n    animation: none;\n  }\n}\n\n/* ───────────────────────────── Toast ─────────────────────────────── */\n.lum-toasts {\n  position: fixed;\n  bottom: 18px;\n  right: 18px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  z-index: 200;\n}\n.lum-toast {\n  background: var(--lum-overlay);\n  border: 1px solid var(--lum-border-strong);\n  border-left: 3px solid var(--lum-accent);\n  color: var(--lum-text);\n  padding: 10px 14px;\n  border-radius: var(--lum-radius);\n  box-shadow: var(--lum-shadow-lg);\n  min-width: 220px;\n  animation: lum-slide-in var(--lum-dur-2) var(--lum-ease);\n}\n.lum-toast--ok {\n  border-left-color: var(--lum-ok);\n}\n.lum-toast--error {\n  border-left-color: var(--lum-error);\n}\n\n/* ───────────────────────────── Slider ────────────────────────────── */\n.lum-slider {\n  position: relative;\n  height: 16px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  touch-action: none;\n}\n.lum-slider__track {\n  position: relative;\n  height: 5px;\n  width: 100%;\n  background: var(--lum-surface-2);\n  border-radius: 999px;\n  overflow: hidden;\n}\n.lum-slider__buffer {\n  position: absolute;\n  height: 100%;\n  background: color-mix(in srgb, var(--lum-muted) 40%, transparent);\n}\n.lum-slider__fill {\n  position: absolute;\n  height: 100%;\n  background: var(--lum-accent);\n}\n.lum-slider__thumb {\n  position: absolute;\n  top: 50%;\n  width: 13px;\n  height: 13px;\n  border-radius: 50%;\n  background: var(--lum-accent);\n  border: 2px solid var(--lum-bg);\n  transform: translate(-50%, -50%);\n  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);\n  transition: width var(--lum-dur-2) var(--lum-ease-spring), height var(--lum-dur-2) var(--lum-ease-spring);\n}\n\n/* ───────────────────────────── Menu ──────────────────────────────── */\n.lum-menu {\n  position: relative;\n  display: inline-flex;\n}\n.lum-menu__list {\n  position: absolute;\n  top: calc(100% + 6px);\n  right: 0;\n  background:\n    linear-gradient(var(--lum-hairline), transparent 48px) padding-box,\n    var(--lum-overlay) padding-box;\n  border: 1px solid var(--lum-border-strong);\n  border-radius: var(--lum-radius);\n  box-shadow: var(--lum-shadow-lg);\n  padding: 5px;\n  min-width: 160px;\n  z-index: 60;\n  animation: lum-pop var(--lum-dur-2) var(--lum-ease);\n}\n/* Open upward instead — for triggers in a bottom bar (e.g. the player transport). */\n.lum-menu__list--up {\n  top: auto;\n  bottom: calc(100% + 6px);\n}\n@keyframes lum-pop {\n  from {\n    opacity: 0;\n    transform: translateY(4px) scale(0.98);\n  }\n}\n.lum-menu__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  width: 100%;\n  padding: 7px 10px;\n  border: none;\n  background: transparent;\n  color: var(--lum-text);\n  font: inherit;\n  text-align: left;\n  border-radius: var(--lum-radius-sm);\n  cursor: pointer;\n  transition: background var(--lum-dur-1) var(--lum-ease);\n}\n.lum-menu__item:hover {\n  background: var(--lum-surface-2);\n}\n.lum-menu__item[aria-checked='true'] {\n  color: var(--lum-accent);\n}\n\n/* ───────────────────────────── Table ─────────────────────────────── */\n.lum-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 13px;\n}\n.lum-table th {\n  text-align: left;\n  font-weight: 600;\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--lum-muted);\n  padding: 8px 10px;\n  border-bottom: 1px solid var(--lum-border-strong);\n  position: sticky;\n  top: 0;\n  background: var(--lum-surface);\n  z-index: 1;\n}\n.lum-table td {\n  padding: 7px 10px;\n  border-bottom: 1px solid color-mix(in srgb, var(--lum-border) 60%, transparent);\n}\n.lum-table tbody tr {\n  cursor: pointer;\n  transition: background var(--lum-dur-1) var(--lum-ease);\n}\n.lum-table tbody tr:hover {\n  background: var(--lum-surface-2);\n}\n.lum-table tbody tr[aria-selected='true'] {\n  background: var(--lum-accent-soft);\n}\n\n/* ─────────────────── Empty / Error states ────────────────────────── */\n.lum-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  gap: 8px;\n  padding: 44px 24px;\n  color: var(--lum-muted);\n}\n.lum-state__title {\n  color: var(--lum-text);\n  font-weight: 620;\n  font-size: 15px;\n  letter-spacing: -0.006em;\n}\n.lum-state__icon {\n  color: var(--lum-muted);\n  margin-bottom: 4px;\n  font-size: 22px;\n}\n.lum-state--error .lum-state__icon {\n  color: var(--lum-error);\n}\n\n/* ──────────────────────────── Surfaces ───────────────────────────── */\n.lum-card {\n  background:\n    linear-gradient(var(--lum-hairline), transparent 64px) padding-box,\n    var(--lum-surface) padding-box;\n  border: 1px solid var(--lum-border);\n  border-radius: var(--lum-radius);\n  padding: 16px;\n  box-shadow: var(--lum-shadow-sm);\n}\n.lum-divider {\n  height: 1px;\n  background: var(--lum-border);\n  border: none;\n  margin: 12px 0;\n}\n\n/* ════════════════════════════════════════════════════════════════════\n   STRATA — timeline-first debugging cockpit\n   Grid: Topbar / Synopsis / StageRow / Timeline\n   ════════════════════════════════════════════════════════════════════ */\n.lum-strata {\n  display: grid;\n  grid-template-rows: 48px auto minmax(0, 1fr) minmax(0, 1fr);\n  grid-template-areas:\n    'topbar'\n    'synopsis'\n    'stage'\n    'timeline';\n  height: 100%;\n  min-height: 460px;\n  background: var(--lum-bg);\n  border: 1px solid var(--lum-border);\n  border-radius: var(--lum-radius-lg);\n  overflow: hidden;\n  outline: none;\n  box-shadow: var(--lum-shadow-lg);\n  color: var(--lum-text);\n  position: relative;\n}\n/* Balanced: stage ~52% / timeline ~45% (after fixed rows). */\n.lum-strata--balanced {\n  grid-template-rows: 48px auto 1.15fr 1fr;\n}\n/* Watch focus (T): replay maximizes; timeline collapses to a slim scrubber. */\n.lum-strata--stage {\n  grid-template-rows: 48px auto 1fr 112px;\n}\n/* Debug focus (D): monitor shrinks; lanes + inspector dominate. */\n.lum-strata--debug {\n  grid-template-rows: 48px auto 0.6fr 1.55fr;\n}\n@media (prefers-reduced-motion: no-preference) {\n  .lum-strata {\n    transition: grid-template-rows var(--lum-dur-3) var(--lum-ease);\n  }\n}\n\n/* ─────────────────────────── Topbar ─────────────────────────── */\n.lum-st-topbar {\n  grid-area: topbar;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 0 12px;\n  background: var(--lum-surface);\n  border-bottom: 1px solid var(--lum-border);\n  box-shadow: inset 0 -1px 0 var(--lum-hairline);\n  min-width: 0;\n}\n.lum-st-topbar__left {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 0;\n}\n.lum-st-topbar__back {\n  margin-left: -4px;\n  margin-right: 2px;\n  flex-shrink: 0;\n}\n.lum-st-logo {\n  color: var(--lum-accent);\n  filter: drop-shadow(var(--lum-accent-glow));\n  font-size: 13px;\n}\n.lum-st-topbar__title {\n  font-weight: 650;\n  letter-spacing: 0.02em;\n}\n.lum-st-topbar__sep {\n  color: var(--lum-faint);\n}\n.lum-st-topbar__sid {\n  color: var(--lum-muted);\n  font-size: 12px;\n}\n.lum-st-topbar__device {\n  font-size: 12px;\n  white-space: nowrap;\n}\n.lum-st-topbar__user {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 12px;\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  padding: 2px 8px;\n  border-radius: 999px;\n  color: var(--lum-accent);\n  background: color-mix(in srgb, var(--lum-accent) 12%, transparent);\n  border: 1px solid color-mix(in srgb, var(--lum-accent) 26%, transparent);\n}\n.lum-st-topbar__user svg {\n  flex-shrink: 0;\n}\n.lum-st-livebadge {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.04em;\n  color: #fff;\n  background: #ef4444;\n  border: 1px solid #ef4444;\n  border-radius: 999px;\n  padding: 2px 9px;\n  white-space: nowrap;\n}\n.lum-st-livebadge--paused {\n  color: #ef4444;\n  background: color-mix(in srgb, #ef4444 12%, transparent);\n  cursor: pointer;\n}\n.lum-st-livebadge--paused:hover {\n  background: color-mix(in srgb, #ef4444 22%, transparent);\n}\n.lum-st-livebadge__dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  background: currentColor;\n  box-shadow: 0 0 0 0 currentColor;\n  animation: lum-live-pulse 1.6s ease-out infinite;\n}\n.lum-st-livebadge--paused .lum-st-livebadge__dot {\n  animation: none;\n}\n@keyframes lum-live-pulse {\n  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); }\n  70% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); }\n  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }\n}\n@media (prefers-reduced-motion: reduce) {\n  .lum-st-livebadge__dot { animation: none; }\n}\n.lum-st-topbar__clock {\n  font-size: 12px;\n  color: var(--lum-text-2);\n  font-variant-numeric: tabular-nums;\n  margin-left: 4px;\n}\n.lum-st-topbar__badges {\n  display: flex;\n  gap: 6px;\n  margin-left: auto;\n}\n.lum-st-badge {\n  font-family: var(--lum-font-mono);\n  font-size: 11px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: var(--lum-radius-full);\n  border: 1px solid transparent;\n  white-space: nowrap;\n}\n.lum-st-badge.is-zero {\n  opacity: 0.4;\n}\n.lum-st-badge--error {\n  color: var(--lum-error);\n  background: var(--lum-error-soft);\n  border-color: var(--lum-error-line);\n}\n.lum-st-badge--net {\n  color: #a06bff;\n  background: rgba(160, 107, 255, 0.13);\n  border-color: rgba(160, 107, 255, 0.4);\n}\n.lum-st-badge--rage {\n  color: var(--lum-warn);\n  background: var(--lum-warn-soft);\n  border-color: var(--lum-warn-line);\n}\n.lum-st-badge--conv {\n  color: var(--lum-ok);\n  background: var(--lum-ok-soft);\n  border-color: var(--lum-ok-line);\n  max-width: 160px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.lum-st-badge--signal {\n  color: var(--lum-info);\n  background: var(--lum-info-soft);\n  border-color: var(--lum-info-line);\n  max-width: 160px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.lum-st-topbar__right {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.lum-st-cmdk {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  background: var(--lum-surface-2);\n  border: 1px solid var(--lum-border);\n  color: var(--lum-text-2);\n  border-radius: var(--lum-radius-sm);\n  padding: 4px 9px;\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: border-color var(--lum-dur-1) var(--lum-ease), color var(--lum-dur-1) var(--lum-ease);\n}\n.lum-st-cmdk:hover {\n  border-color: var(--lum-accent-line);\n  color: var(--lum-text);\n}\n\n/* Copy link to this exact moment */\n.lum-st-share {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  background: var(--lum-surface-2);\n  border: 1px solid var(--lum-border);\n  color: var(--lum-text-2);\n  border-radius: var(--lum-radius-sm);\n  padding: 4px 9px;\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  white-space: nowrap;\n  transition: border-color var(--lum-dur-1) var(--lum-ease), color var(--lum-dur-1) var(--lum-ease),\n    background var(--lum-dur-1) var(--lum-ease);\n}\n.lum-st-share:hover:not(:disabled) {\n  border-color: var(--lum-accent-line);\n  color: var(--lum-text);\n}\n.lum-st-share:disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n.lum-st-share.is-copied {\n  border-color: var(--lum-ok, #2ea043);\n  color: var(--lum-ok, #2ea043);\n}\n\n/* Clip control (segment to play / share) */\n.lum-st-clipwrap {\n  position: relative;\n}\n.lum-st-clip {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  background: var(--lum-surface-2);\n  border: 1px solid var(--lum-border);\n  color: var(--lum-text-2);\n  border-radius: var(--lum-radius-sm);\n  padding: 4px 9px;\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  white-space: nowrap;\n  transition: border-color var(--lum-dur-1) var(--lum-ease), color var(--lum-dur-1) var(--lum-ease);\n}\n.lum-st-clip:hover:not(:disabled),\n.lum-st-clip.is-open {\n  border-color: var(--lum-accent-line);\n  color: var(--lum-text);\n}\n.lum-st-clip:disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n.lum-st-clippop {\n  position: absolute;\n  top: calc(100% + 6px);\n  right: 0;\n  z-index: 30;\n  width: 248px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 10px;\n  background: var(--lum-raised, var(--lum-surface-2));\n  border: 1px solid var(--lum-border-strong, var(--lum-border));\n  border-radius: var(--lum-radius-md, 8px);\n  box-shadow: var(--lum-shadow-2, 0 8px 24px rgba(0, 0, 0, 0.4));\n}\n.lum-st-clippop__row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n}\n.lum-st-clippop__lbl {\n  width: 34px;\n  color: var(--lum-muted);\n  font-weight: 600;\n}\n.lum-st-clippop__val {\n  flex: 1;\n  font-variant-numeric: tabular-nums;\n  color: var(--lum-text);\n}\n.lum-st-clippop__set {\n  border: 1px solid var(--lum-border);\n  background: var(--lum-surface-2);\n  color: var(--lum-text-2);\n  border-radius: var(--lum-radius-sm);\n  padding: 3px 7px;\n  font-size: 11px;\n  font-weight: 600;\n  cursor: pointer;\n}\n.lum-st-clippop__set:hover {\n  border-color: var(--lum-accent-line);\n  color: var(--lum-text);\n}\n.lum-st-clippop__loop {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--lum-text-2);\n  cursor: pointer;\n}\n.lum-st-clippop__hint {\n  margin: 0;\n  font-size: 11px;\n  color: var(--lum-faint, var(--lum-muted));\n  line-height: 1.4;\n}\n.lum-st-clippop__actions {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.lum-st-clippop__play,\n.lum-st-clippop__copy {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  border-radius: var(--lum-radius-sm);\n  padding: 5px 9px;\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  white-space: nowrap;\n}\n.lum-st-clippop__play {\n  flex: 0 0 auto;\n  border: 0;\n  background: var(--lum-accent);\n  color: var(--lum-accent-fg, #fff);\n}\n.lum-st-clippop__copy {\n  flex: 1;\n  border: 1px solid var(--lum-border);\n  background: transparent;\n  color: var(--lum-text-2);\n}\n.lum-st-clippop__copy:hover:not(:disabled) {\n  border-color: var(--lum-accent-line);\n  color: var(--lum-text);\n}\n.lum-st-clippop__play:disabled,\n.lum-st-clippop__copy:disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n.lum-st-clippop__clear {\n  border: 1px solid var(--lum-border);\n  background: transparent;\n  color: var(--lum-muted);\n  border-radius: var(--lum-radius-sm);\n  padding: 5px;\n  cursor: pointer;\n  display: inline-flex;\n}\n.lum-st-clippop__clear:hover {\n  border-color: var(--lum-danger-line, var(--lum-border-strong));\n  color: var(--lum-text);\n}\n\n/* Focus mode pills */\n.lum-st-focus {\n  display: inline-flex;\n  gap: 2px;\n  padding: 2px;\n  background: var(--lum-surface-2);\n  border: 1px solid var(--lum-border);\n  border-radius: var(--lum-radius-sm);\n}\n.lum-st-focus__pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  background: transparent;\n  border: 1px solid transparent;\n  color: var(--lum-muted);\n  border-radius: var(--lum-radius-xs);\n  padding: 3px 9px;\n  font-size: 12px;\n  font-weight: 540;\n  cursor: pointer;\n  transition: background var(--lum-dur-1) var(--lum-ease), color var(--lum-dur-1) var(--lum-ease);\n}\n.lum-st-focus__pill:hover {\n  color: var(--lum-text);\n}\n.lum-st-focus__pill.is-active {\n  color: var(--lum-text);\n  background: var(--lum-raised);\n  border-color: var(--lum-border);\n  box-shadow: var(--lum-shadow-sm);\n}\n.lum-st-focus__key {\n  font-family: var(--lum-font-mono);\n  font-size: 10px;\n  color: var(--lum-faint);\n  background: var(--lum-bg);\n  border-radius: 3px;\n  padding: 0 4px;\n}\n\n/* ─────────────────────────── Synopsis ─────────────────────────── */\n.lum-st-synopsis {\n  grid-area: synopsis;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 14px;\n  background: linear-gradient(90deg, var(--lum-accent-soft), transparent 60%);\n  border-bottom: 1px solid var(--lum-border);\n  font-size: 13px;\n  min-width: 0;\n  overflow: hidden;\n}\n.lum-st-synopsis--empty {\n  background: var(--lum-surface);\n  font-size: 12px;\n}\n.lum-st-synopsis__icon {\n  color: var(--lum-accent);\n  display: inline-flex;\n}\n.lum-st-synopsis__text {\n  color: var(--lum-text);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex-shrink: 1;\n  /* it's a <button> for click-to-expand — strip the native chrome */\n  background: none;\n  border: none;\n  padding: 0;\n  margin: 0;\n  font: inherit;\n  text-align: left;\n  cursor: pointer;\n  min-width: 0;\n}\n.lum-st-synopsis__text[aria-expanded] {\n  cursor: pointer;\n}\n.lum-st-synopsis__more {\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  background: none;\n  border: none;\n  color: var(--lum-muted);\n  cursor: pointer;\n  padding: 2px;\n  border-radius: 5px;\n}\n.lum-st-synopsis__more:hover {\n  color: var(--lum-accent);\n  background: var(--lum-accent-soft);\n}\n/* Expanded: let the strip grow and the text wrap to the full summary. */\n.lum-st-synopsis.is-expanded {\n  align-items: flex-start;\n  overflow: visible;\n}\n.lum-st-synopsis.is-expanded .lum-st-synopsis__text {\n  white-space: normal;\n  overflow: visible;\n  text-overflow: clip;\n  line-height: 1.5;\n}\n.lum-st-synopsis.is-expanded .lum-st-synopsis__chips {\n  margin-top: 1px;\n}\n.lum-st-synopsis__chips {\n  display: flex;\n  gap: 6px;\n  margin-left: auto;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n.lum-st-synopsis__chips::-webkit-scrollbar {\n  display: none;\n}\n.lum-st-chip {\n  background: var(--lum-surface-2);\n  border: 1px solid var(--lum-border);\n  color: var(--lum-accent);\n  border-radius: var(--lum-radius-full);\n  padding: 2px 10px;\n  font-size: 11.5px;\n  font-family: var(--lum-font-mono);\n  white-space: nowrap;\n  cursor: pointer;\n  transition: border-color var(--lum-dur-1) var(--lum-ease), background var(--lum-dur-1) var(--lum-ease);\n}\n.lum-st-chip:hover {\n  border-color: var(--lum-accent-line);\n  background: var(--lum-accent-soft);\n}\n\n/* ───────────────────── AI \"Explain this moment\" ─────────────────── */\n.lum-st-explain {\n  margin-top: 12px;\n  padding-top: 12px;\n  border-top: 1px solid var(--lum-border);\n}\n.lum-st-explain__btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--lum-accent-soft);\n  border: 1px solid var(--lum-accent-line);\n  color: var(--lum-accent);\n  border-radius: var(--lum-radius-full);\n  padding: 5px 12px;\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: background var(--lum-dur-1) var(--lum-ease);\n}\n.lum-st-explain__btn:hover {\n  background: var(--lum-accent-line);\n}\n.lum-st-explain__out {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n.lum-st-explain__label {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--lum-accent);\n}\n.lum-st-explain__text {\n  margin: 0;\n  font-size: 13px;\n  line-height: 1.5;\n  color: var(--lum-text);\n}\n.lum-st-explain__text.is-error {\n  color: var(--lum-danger, #d23);\n}\n.lum-st-explain__re {\n  align-self: flex-start;\n  background: none;\n  border: none;\n  color: var(--lum-muted);\n  font-size: 11px;\n  cursor: pointer;\n  padding: 0;\n  text-decoration: underline;\n}\n.lum-st-explain__re:hover {\n  color: var(--lum-accent);\n}\n@keyframes lum-st-explain-blink {\n  0%, 100% { opacity: 0.3; }\n  50% { opacity: 1; }\n}\n.lum-st-explain__dots {\n  animation: lum-st-explain-blink 1s ease-in-out infinite;\n}\n\n/* ─────────────────────────── Stage row ─────────────────────────── */\n.lum-st-stagerow {\n  grid-area: stage;\n  display: grid;\n  grid-template-columns: 1fr clamp(320px, 30vw, 460px);\n  min-height: 0;\n  min-width: 0;\n  border-bottom: 1px solid var(--lum-border);\n}\n.lum-strata--mid .lum-st-stagerow,\n.lum-strata--narrow .lum-st-stagerow,\n.lum-strata--compact .lum-st-stagerow,\n.lum-strata--stage .lum-st-stagerow {\n  grid-template-columns: 1fr;\n}\n.lum-st-stagecol {\n  position: relative;\n  min-width: 0;\n  min-height: 0;\n  background: #000;\n  overflow: hidden;\n}\n.lum-st-monitor {\n  position: absolute;\n  inset: 0;\n  padding: 16px;\n}\n/* Mid-playback buffering chip (seek/scrub ahead of the loaded edge). Floats over\n * the last rendered frame — non-blocking, unlike the full loading skeleton. */\n.lum-st-buffering {\n  position: absolute;\n  top: 26px;\n  left: 50%;\n  transform: translateX(-50%);\n  z-index: 6;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 12px;\n  border-radius: 999px;\n  background: color-mix(in srgb, #0b0d13 72%, transparent);\n  backdrop-filter: blur(6px);\n  border: 1px solid var(--lum-border, #262b36);\n  color: var(--lum-text, #e7e9ee);\n  font-size: 12px;\n  pointer-events: none;\n}\n.lum-st-buffering__spinner {\n  width: 13px;\n  height: 13px;\n  border-radius: 50%;\n  border: 2px solid color-mix(in srgb, var(--lum-accent) 35%, transparent);\n  border-top-color: var(--lum-accent);\n  animation: lum-buffer-spin 0.7s linear infinite;\n}\n@keyframes lum-buffer-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* Auto-skim badge — pinned top-right of the stage while skimming idle. */\n.lum-st-skimbadge {\n  position: absolute;\n  top: 26px;\n  right: 26px;\n  z-index: 6;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 11px;\n  border-radius: 999px;\n  background: color-mix(in srgb, #39c5cf 22%, #0b0d13 78%);\n  border: 1px solid color-mix(in srgb, #39c5cf 55%, transparent);\n  color: #d7f7fa;\n  font-size: 12px;\n  font-weight: 560;\n  pointer-events: none;\n  box-shadow: 0 0 14px color-mix(in srgb, #39c5cf 35%, transparent);\n  animation: lum-skim-pulse 1.4s ease-in-out infinite;\n}\n@keyframes lum-skim-pulse {\n  0%,\n  100% {\n    opacity: 0.82;\n  }\n  50% {\n    opacity: 1;\n  }\n}\n/* Auto-skip flash — iris accent, brief fade-in (the jump is instantaneous). */\n.lum-st-skimbadge--skip {\n  background: color-mix(in srgb, var(--lum-accent) 24%, #0b0d13 76%);\n  border-color: color-mix(in srgb, var(--lum-accent) 60%, transparent);\n  color: #e7e9ff;\n  box-shadow: 0 0 14px color-mix(in srgb, var(--lum-accent) 38%, transparent);\n  animation: lum-skip-flash 0.9s ease-out forwards;\n}\n@keyframes lum-skip-flash {\n  0% {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n  18% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  70% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n/* Transport auto-skim button: glow while actively skimming. */\n.lum-st-skim.is-skimming .lum-iconbtn,\n.lum-st-skim.is-skimming button {\n  color: #39c5cf;\n}\n.lum-st-monitor__frame {\n  position: absolute;\n  inset: 16px;\n  border-radius: var(--lum-radius);\n  overflow: hidden;\n  box-shadow:\n    0 0 0 1px var(--lum-accent-line),\n    inset 0 0 0 1px rgba(255, 255, 255, 0.04),\n    0 8px 30px rgba(0, 0, 0, 0.5);\n  background: #0c0d12;\n}\n.lum-st-mount {\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n  border-radius: var(--lum-radius);\n}\n.lum-st-mount iframe {\n  border: 0;\n  background: #fff;\n}\n.lum-st-monitor__edge {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 2px;\n  background: linear-gradient(90deg, transparent, var(--lum-accent-line), transparent);\n  pointer-events: none;\n}\n/* REPLAY chip */\n.lum-st-stagecol::after {\n  content: '● REPLAY';\n  position: absolute;\n  top: 22px;\n  left: 22px;\n  z-index: 5;\n  font-family: var(--lum-font-mono);\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 0.08em;\n  color: var(--lum-accent);\n  background: color-mix(in srgb, var(--lum-bg) 70%, transparent);\n  backdrop-filter: blur(6px);\n  border: 1px solid var(--lum-accent-line);\n  border-radius: var(--lum-radius-full);\n  padding: 3px 9px;\n  pointer-events: none;\n}\n.lum-strata--debug .lum-st-stagecol::after {\n  font-size: 9px;\n  top: 20px;\n  left: 20px;\n}\n\n/* On-stage overlay (callouts) */\n.lum-st-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 6;\n  pointer-events: none;\n}\n.lum-st-callout {\n  position: absolute;\n  width: 28px;\n  height: 28px;\n  margin: -14px 0 0 -14px;\n}\n.lum-st-callout__ring {\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  border: 2px solid var(--lum-warn);\n}\n.lum-st-callout--error .lum-st-callout__ring {\n  border-color: var(--lum-error);\n  box-shadow: 0 0 16px var(--lum-error);\n}\n.lum-st-callout--rage .lum-st-callout__ring {\n  border-color: var(--lum-warn);\n  box-shadow: 0 0 16px var(--lum-warn);\n}\n@media (prefers-reduced-motion: no-preference) {\n  .lum-st-callout__ring {\n    animation: lum-st-ripple 1.1s var(--lum-ease) infinite;\n  }\n}\n@keyframes lum-st-ripple {\n  0% {\n    transform: scale(0.6);\n    opacity: 0.9;\n  }\n  100% {\n    transform: scale(1.8);\n    opacity: 0;\n  }\n}\n\n/* Loading / empty / error overlays (ported) */\n.lum-pl-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 10;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--lum-bg) 86%, transparent);\n  backdrop-filter: blur(3px);\n  text-align: center;\n}\n.lum-pl-loading {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  width: min(360px, 80%);\n  align-items: stretch;\n}\n.lum-pl-progress {\n  height: 5px;\n  background: var(--lum-surface-2);\n  border-radius: 999px;\n  overflow: hidden;\n}\n.lum-pl-progress__bar {\n  height: 100%;\n  background: linear-gradient(90deg, var(--lum-accent), var(--lum-accent-hover));\n  transition: width var(--lum-motion);\n}\n\n/* ─────────────────────────── Inspector ─────────────────────────── */\n.lum-st-inspectorcol {\n  position: relative;\n  border-left: 1px solid var(--lum-border);\n  box-shadow: inset 1px 0 0 var(--lum-hairline);\n  background: var(--lum-surface);\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n}\n\n/* ── Drag-to-resize handles (inspector width + timeline height) ──\n   Transparent strips straddling the panel edge; the resize cursor signals the\n   affordance and they light up on hover / while dragging. */\n.lum-st-resize {\n  position: absolute;\n  z-index: 6;\n  background: transparent;\n  touch-action: none;\n  transition: background var(--lum-dur-1) var(--lum-ease);\n}\n.lum-st-resize:hover,\n.lum-st-resize.is-active {\n  background: var(--lum-accent-line);\n}\n.lum-st-resize--x {\n  top: 0;\n  bottom: 0;\n  left: -4px;\n  width: 8px;\n  cursor: col-resize;\n}\n.lum-st-resize--y {\n  left: 0;\n  right: 0;\n  top: -4px;\n  height: 8px;\n  cursor: row-resize;\n}\n.lum-st-inspector {\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  flex: 1;\n  width: 100%;\n}\n.lum-st-inspector__tabs {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  padding: 6px 8px 0;\n  border-bottom: 1px solid var(--lum-border);\n}\n.lum-st-inspector__clear {\n  margin-left: auto;\n  background: transparent;\n  border: none;\n  color: var(--lum-muted);\n  cursor: pointer;\n  display: inline-flex;\n  padding: 4px;\n  border-radius: var(--lum-radius-xs);\n}\n.lum-st-inspector__clear:hover {\n  color: var(--lum-text);\n  background: var(--lum-surface-2);\n}\n.lum-st-inspector__body {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  display: flex;\n  flex-direction: column;\n}\n.lum-st-inspector__crumb {\n  padding: 8px 12px 0;\n  font-size: 12px;\n  color: var(--lum-text-2);\n  word-break: break-all;\n}\n.lum-st-inspbody {\n  padding: 12px;\n  min-height: 0;\n}\n.lum-st-detail__h {\n  margin: 12px 0 4px;\n  color: var(--lum-muted);\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n}\n.lum-st-err__msg {\n  margin-top: 6px;\n  color: var(--lum-error);\n  font-size: 12.5px;\n  word-break: break-word;\n}\n.lum-st-err__src {\n  margin-top: 8px;\n  font-size: 11px;\n  word-break: break-all;\n}\n.lum-st-inspactions {\n  display: flex;\n  gap: 8px;\n  margin: 10px 0;\n}\n.lum-st-inspactions .lum-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n}\n.lum-st-cause {\n  font-size: 11.5px;\n  padding: 8px 10px;\n  background: var(--lum-surface-2);\n  border: 1px solid var(--lum-border);\n  border-left: 2px solid var(--lum-accent);\n  border-radius: var(--lum-radius-sm);\n  word-break: break-word;\n}\n\n/* Unified feed */\n.lum-st-feed {\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  flex: 1;\n}\n.lum-st-feed__chips {\n  display: flex;\n  gap: 2px;\n  padding: 8px 10px;\n  flex-wrap: wrap;\n  border-bottom: 1px solid var(--lum-border);\n}\n.lum-st-feed__rows {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  font-size: 12px;\n}\n\n/* ── Network waterfall (Chrome-style, replay-synced) ──────────────────── */\n.lum-wf {\n  --wf-label-w: 150px;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n}\n.lum-wf__toolbar {\n  flex: 0 0 auto;\n  padding: 5px 10px;\n  font-size: 11px;\n  border-bottom: 1px solid var(--lum-border);\n}\n.lum-wf__hint {\n  color: var(--lum-accent);\n}\n/* The single scroll viewport (both axes). The grid inside is as wide as the\n   whole time span; the label column + ruler stay frozen via position:sticky. */\n.lum-wf__scroll {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n}\n.lum-wf__grid {\n  position: relative;\n  min-width: 100%;\n}\n.lum-wf__ruler {\n  position: sticky;\n  top: 0;\n  z-index: 6;\n  display: flex;\n  height: 20px;\n  background: var(--lum-surface);\n  border-bottom: 1px solid var(--lum-border);\n}\n.lum-wf__rulerspacer {\n  position: sticky;\n  left: 0;\n  z-index: 7;\n  width: var(--wf-label-w);\n  flex: 0 0 auto;\n  background: var(--lum-surface);\n  border-right: 1px solid var(--lum-border);\n}\n.lum-wf__rulertrack {\n  position: relative;\n  flex: 0 0 auto;\n  height: 100%;\n}\n.lum-wf__tick {\n  position: absolute;\n  top: 3px;\n  transform: translateX(-50%);\n  font-size: 9.5px;\n  color: var(--lum-muted);\n  white-space: nowrap;\n  font-family: var(--lum-font-mono);\n}\n.lum-wf__rows {\n  position: relative;\n}\n.lum-wf__row {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  height: 28px;\n  cursor: pointer;\n  /* Reserve the sticky ruler's height so scrollIntoView doesn't tuck a followed\n     row underneath it. */\n  scroll-margin-top: 20px;\n  border-bottom: 1px solid color-mix(in srgb, var(--lum-border) 45%, transparent);\n  transition: background var(--lum-dur-1) var(--lum-ease);\n}\n.lum-wf__row:hover {\n  background: var(--lum-surface-2);\n}\n.lum-wf__row.is-selected {\n  background: var(--lum-accent-soft);\n}\n.lum-wf__label {\n  box-sizing: border-box;\n  position: sticky;\n  left: 0;\n  z-index: 4;\n  width: var(--wf-label-w);\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0 8px;\n  overflow: hidden;\n  background: var(--lum-surface);\n  border-right: 1px solid var(--lum-border);\n  font-size: 11px;\n}\n/* Keep the frozen label tinted in step with its row's hover/selected state. */\n.lum-wf__row:hover .lum-wf__label {\n  background: var(--lum-surface-2);\n}\n.lum-wf__row.is-selected .lum-wf__label {\n  background: color-mix(in srgb, var(--lum-accent) 16%, var(--lum-surface));\n}\n.lum-wf__dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  flex: 0 0 auto;\n  background: var(--lum-ok);\n}\n.lum-wf__dot--error {\n  background: var(--lum-error);\n}\n.lum-wf__dot--warn {\n  background: var(--lum-warn);\n}\n.lum-wf__dot--info {\n  background: var(--lum-info);\n}\n.lum-wf__name {\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--lum-text-2);\n}\n.lum-wf__method {\n  flex: 0 0 auto;\n  font-size: 10px;\n}\n.lum-wf__time {\n  flex: 0 0 auto;\n  font-size: 10px;\n}\n.lum-wf__track {\n  position: relative;\n  flex: 0 0 auto;\n  height: 100%;\n}\n.lum-wf__bar {\n  position: absolute;\n  top: 9px;\n  height: 10px;\n  min-width: 2px;\n  display: flex;\n  border-radius: 2px;\n  overflow: hidden;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);\n}\n/* WebSocket connection: a thin lifetime line with per-frame ticks (send/recv). */\n.lum-wf__bar--ws {\n  top: 12px;\n  height: 4px;\n  box-shadow: none;\n  border-radius: 2px;\n  background: color-mix(in srgb, var(--lum-info) 55%, transparent);\n}\n.lum-wf__bar--ws.lum-wf__bar--default {\n  background: color-mix(in srgb, var(--lum-faint) 60%, transparent);\n}\n.lum-wf__bar--ws.lum-wf__bar--error {\n  background: color-mix(in srgb, var(--lum-error) 60%, transparent);\n}\n.lum-wf__wsframe {\n  position: absolute;\n  top: 8px;\n  width: 2px;\n  height: 12px;\n  border-radius: 1px;\n  transform: translateX(-1px);\n  pointer-events: none;\n}\n.lum-wf__wsframe--send {\n  background: var(--lum-accent);\n}\n.lum-wf__wsframe--recv {\n  background: var(--lum-ok);\n}\n.lum-wf__seg {\n  display: block;\n  min-width: 0;\n  flex-shrink: 1;\n}\n/* Chrome-ish phase palette */\n.lum-wf__seg--blocked {\n  background: #5b6472;\n}\n.lum-wf__seg--dns {\n  background: #16b3a7;\n}\n.lum-wf__seg--connect {\n  background: #f4a740;\n}\n.lum-wf__seg--ssl {\n  background: #a06bff;\n}\n.lum-wf__seg--wait {\n  background: #8fd16b;\n}\n.lum-wf__seg--download {\n  background: #3b82f6;\n}\n.lum-wf__seg--tone {\n  background: var(--lum-accent);\n}\n.lum-wf__bar--error .lum-wf__seg--tone {\n  background: var(--lum-error);\n}\n.lum-wf__bar--warn .lum-wf__seg--tone {\n  background: var(--lum-warn);\n}\n.lum-wf__bar--info .lum-wf__seg--tone {\n  background: var(--lum-info);\n}\n/* Replay-synced cursor overlay (sits above the bars, scrolls with the grid).\n   Anchored at the track start so px offsets line up with the bars; the sticky\n   label column (higher z) masks it when the playhead scrolls off to the left. */\n.lum-wf__cursor {\n  position: absolute;\n  top: 0;\n  left: var(--wf-label-w);\n  pointer-events: none;\n  z-index: 3;\n}\n.lum-wf__playhead {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 2px;\n  margin-left: -1px;\n  background: var(--lum-accent);\n  box-shadow: 0 0 6px var(--lum-accent-glow, var(--lum-accent));\n}\n.lum-wf__running {\n  position: absolute;\n  border-radius: 3px;\n  box-shadow:\n    0 0 0 1.5px var(--lum-accent),\n    0 0 9px color-mix(in srgb, var(--lum-accent) 70%, transparent);\n}\n.lum-st-feedrow {\n  display: grid;\n  grid-template-columns: 16px 52px 1fr auto;\n  gap: 8px;\n  align-items: baseline;\n  width: 100%;\n  text-align: left;\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid color-mix(in srgb, var(--lum-border) 50%, transparent);\n  color: var(--lum-text-2);\n  padding: 5px 10px;\n  cursor: pointer;\n  font: inherit;\n  font-family: var(--lum-font-mono);\n  transition: background var(--lum-dur-1) var(--lum-ease);\n}\n.lum-st-feedrow:hover {\n  background: var(--lum-surface-2);\n}\n.lum-st-feedrow.is-active {\n  background: var(--lum-accent-soft);\n}\n.lum-st-feedrow.is-selected {\n  box-shadow: inset 2px 0 0 var(--lum-accent);\n}\n.lum-st-feedrow--error {\n  color: var(--lum-error);\n}\n.lum-st-feedrow--warn .lum-st-feedrow__glyph {\n  color: var(--lum-warn);\n}\n.lum-st-feedrow--error .lum-st-feedrow__glyph {\n  color: var(--lum-error);\n}\n.lum-st-feedrow--ok .lum-st-feedrow__glyph {\n  color: var(--lum-ok);\n}\n.lum-st-feedrow__glyph {\n  text-align: center;\n  color: var(--lum-faint);\n}\n.lum-st-feedrow__time {\n  color: var(--lum-accent);\n  font-variant-numeric: tabular-nums;\n}\n.lum-st-feedrow__title {\n  color: var(--lum-text);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.lum-st-feedrow--error .lum-st-feedrow__title {\n  color: var(--lum-error);\n}\n.lum-st-feedrow__sub {\n  font-size: 11px;\n  white-space: nowrap;\n}\n\n/* ── Tasks (sub-event spans) sub-view ─────────────────────────────── */\n.lum-st-spans {\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  flex: 1;\n}\n.lum-st-spans__tags {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 8px 10px 4px;\n}\n.lum-st-tag {\n  font-size: 11px;\n  font-family: var(--lum-font-mono);\n  color: var(--lum-accent);\n  background: var(--lum-accent-soft);\n  border: 1px solid var(--lum-accent-line, var(--lum-accent));\n  border-radius: 999px;\n  padding: 1px 8px;\n}\n.lum-st-spans__search {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 10px;\n  border-bottom: 1px solid color-mix(in srgb, var(--lum-border) 60%, transparent);\n}\n.lum-st-spans__input {\n  flex: 1;\n  background: var(--lum-surface-2);\n  border: 1px solid var(--lum-border);\n  border-radius: 6px;\n  color: var(--lum-text);\n  padding: 4px 8px;\n  font-size: 12px;\n}\n.lum-st-spans__input:focus {\n  outline: none;\n  border-color: var(--lum-accent);\n}\n.lum-st-spans__count {\n  font-size: 11px;\n  font-variant-numeric: tabular-nums;\n}\n.lum-st-spans__rows {\n  overflow-y: auto;\n  min-height: 0;\n}\n.lum-st-spanrow {\n  display: grid;\n  grid-template-columns: 16px 52px 1fr auto;\n  gap: 8px;\n  align-items: baseline;\n  width: 100%;\n  text-align: left;\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid color-mix(in srgb, var(--lum-border) 50%, transparent);\n  color: var(--lum-text-2);\n  padding: 5px 10px;\n  cursor: pointer;\n  font: inherit;\n  font-family: var(--lum-font-mono);\n  transition: background var(--lum-dur-1) var(--lum-ease);\n}\n.lum-st-spanrow:hover {\n  background: var(--lum-surface-2);\n}\n.lum-st-spanrow.is-selected {\n  box-shadow: inset 2px 0 0 var(--lum-accent);\n}\n.lum-st-spanrow__glyph {\n  text-align: center;\n  color: #39c5cf;\n}\n.lum-st-spanrow.is-running .lum-st-spanrow__glyph {\n  opacity: 0.6;\n}\n.lum-st-spanrow__time {\n  color: var(--lum-accent);\n  font-variant-numeric: tabular-nums;\n}\n.lum-st-spanrow__title {\n  color: var(--lum-text);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.lum-st-spanrow__dur {\n  font-size: 11px;\n  white-space: nowrap;\n  font-variant-numeric: tabular-nums;\n}\n\n/* Floating inspector tab (mid/narrow) */\n.lum-st-inspectortab {\n  position: absolute;\n  right: 0;\n  top: 50%;\n  transform: translateY(-50%) rotate(180deg);\n  writing-mode: vertical-rl;\n  background: var(--lum-surface-2);\n  border: 1px solid var(--lum-border);\n  border-right: none;\n  color: var(--lum-text-2);\n  padding: 12px 5px;\n  border-radius: var(--lum-radius-sm) 0 0 var(--lum-radius-sm);\n  cursor: pointer;\n  font-size: 12px;\n  z-index: 30;\n  box-shadow: var(--lum-shadow);\n}\n.lum-st-inspectortab:hover {\n  color: var(--lum-text);\n  border-color: var(--lum-accent-line);\n}\n\n/* ═══════════════════════════ Timeline spine ═══════════════════════════ */\n.lum-st-timeline {\n  position: relative;\n  grid-area: timeline;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  background: var(--lum-surface);\n  box-shadow: inset 0 1px 0 var(--lum-hairline);\n}\n\n/* Overview strip */\n.lum-st-overview {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 5px 12px;\n  height: 40px;\n  border-bottom: 1px solid var(--lum-border);\n}\n.lum-st-overview__labelwrap {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n.lum-st-overview__label {\n  font-size: 10px;\n  letter-spacing: 0.08em;\n  font-weight: 600;\n}\n.lum-st-overview__i-wrap {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n.lum-st-overview__i {\n  color: var(--lum-muted);\n  opacity: 0.55;\n  cursor: help;\n}\n.lum-st-overview__i-wrap:hover .lum-st-overview__i {\n  opacity: 0.9;\n}\n/* ⓘ legend + explanation popover (opens above the icon) */\n.lum-st-overview__legend-pop {\n  position: absolute;\n  bottom: calc(100% + 8px);\n  left: 0;\n  z-index: 30;\n  width: 260px;\n  background: var(--lum-overlay);\n  border: 1px solid var(--lum-border-strong);\n  border-radius: 10px;\n  box-shadow: var(--lum-shadow-lg);\n  padding: 9px 11px;\n  pointer-events: none;\n}\n.lum-st-overview__legend-lead {\n  font-size: 11px;\n  line-height: 1.45;\n  color: var(--lum-muted);\n  margin-bottom: 8px;\n}\n.lum-st-overview__legend {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 5px 12px;\n}\n.lum-st-overview__legend-item {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  font-size: 11px;\n  color: var(--lum-text);\n}\n/* per-bar hover insight (opens above the hovered bar) */\n.lum-st-overview__tip {\n  position: absolute;\n  bottom: calc(100% + 6px);\n  transform: translateX(-50%);\n  z-index: 30;\n  background: var(--lum-overlay);\n  border: 1px solid var(--lum-border-strong);\n  border-radius: 8px;\n  box-shadow: var(--lum-shadow-lg);\n  padding: 6px 9px;\n  pointer-events: none;\n  white-space: nowrap;\n}\n.lum-st-overview__tip-time {\n  font-size: 11px;\n  font-family: var(--lum-font-mono);\n  color: var(--lum-muted);\n  margin-bottom: 3px;\n}\n.lum-st-overview__tip-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n.lum-st-overview__tip-list li {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--lum-text);\n}\n.lum-st-overview__tip-dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 2px;\n  flex: none;\n}\n.lum-st-overview__spark {\n  position: relative;\n  flex: 1;\n  height: 28px;\n  display: flex;\n  align-items: flex-end;\n  gap: 1px;\n  cursor: crosshair;\n  touch-action: none;\n}\n.lum-st-overview__bar {\n  position: relative;\n  z-index: 1;\n  flex: 1;\n  min-height: 2px;\n  border-radius: 1px 1px 0 0;\n  opacity: 0.85;\n}\n/* Progressive-load buffered fill behind the sparkline (video-style \"loaded\"). */\n.lum-st-overview__buffered {\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  z-index: 0;\n  background: color-mix(in srgb, var(--lum-accent) 12%, transparent);\n  border-right: 1px solid color-mix(in srgb, var(--lum-accent) 38%, transparent);\n  pointer-events: none;\n  transition: width 0.18s linear;\n}\n.lum-st-overview__window {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  background: var(--lum-accent-soft);\n  border-left: 1px solid var(--lum-accent-line);\n  border-right: 1px solid var(--lum-accent-line);\n  pointer-events: none;\n}\n.lum-st-overview__brush {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  background: color-mix(in srgb, var(--lum-accent) 22%, transparent);\n  border: 1px solid var(--lum-accent);\n  pointer-events: none;\n}\n.lum-st-overview__crumbs {\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  max-width: 40%;\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n.lum-st-overview__crumbs::-webkit-scrollbar {\n  display: none;\n}\n.lum-st-crumb {\n  background: transparent;\n  border: 1px solid var(--lum-border);\n  color: var(--lum-muted);\n  border-radius: var(--lum-radius-full);\n  padding: 2px 9px;\n  font-size: 11px;\n  font-family: var(--lum-font-mono);\n  white-space: nowrap;\n  cursor: pointer;\n}\n.lum-st-crumb:hover {\n  color: var(--lum-text);\n  border-color: var(--lum-accent-line);\n}\n.lum-st-crumb.is-active {\n  color: var(--lum-text);\n  background: var(--lum-accent-soft);\n  border-color: var(--lum-accent-line);\n}\n\n/* Ruler + transport row */\n.lum-st-rulerrow {\n  display: flex;\n  align-items: stretch;\n  height: 46px;\n  border-bottom: 1px solid var(--lum-border);\n  background: var(--lum-surface);\n}\n.lum-st-transport {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 0 10px;\n  border-right: 1px solid var(--lum-border);\n  flex-shrink: 0;\n}\n.lum-st-transport__group {\n  display: flex;\n  align-items: center;\n  gap: 1px;\n}\n.lum-st-transport__group--right {\n  gap: 2px;\n}\n.lum-st-transport__time {\n  font-size: 12px;\n  white-space: nowrap;\n  font-variant-numeric: tabular-nums;\n  margin-left: 6px;\n  color: var(--lum-text-2);\n}\n/* Inactivity readout appended to the time (e.g. \"· 4:10 idle (34%)\"). */\n.lum-st-transport__idle {\n  font-size: 11.5px;\n}\n/* Crowded on small players — drop the idle readout there (it stays in the list). */\n.lum-strata--narrow .lum-st-transport__idle,\n.lum-strata--compact .lum-st-transport__idle {\n  display: none;\n}\n.lum-pl-play .lum-iconbtn {\n  width: 30px;\n  height: 30px;\n  border-radius: 50%;\n  background: var(--lum-accent);\n  color: var(--lum-accent-contrast);\n  box-shadow: var(--lum-shadow-sm);\n}\n.lum-pl-play .lum-iconbtn:hover {\n  background: var(--lum-accent-hover);\n}\n.lum-pl-play .lum-iconbtn:active {\n  transform: scale(0.94);\n}\n.lum-pl-speed {\n  margin-left: 3px;\n  font-size: 11px;\n}\n.lum-st-rulerrow__ruler {\n  flex: 1;\n  min-width: 0;\n  position: relative;\n}\n\n/* The role=slider scrubber axis */\n.lum-st-ruler {\n  position: absolute;\n  inset: 0;\n  cursor: pointer;\n  touch-action: none;\n  outline-offset: -2px;\n}\n.lum-st-ruler:focus-visible {\n  box-shadow: var(--lum-focus);\n  border-radius: 2px;\n}\n.lum-st-ruler__tick {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 1px;\n  background: color-mix(in srgb, var(--lum-border) 70%, transparent);\n}\n.lum-st-ruler__ticklabel {\n  position: absolute;\n  top: 6px;\n  left: 4px;\n  font-size: 10px;\n  color: var(--lum-faint);\n  white-space: nowrap;\n  font-variant-numeric: tabular-nums;\n  pointer-events: none;\n}\n.lum-st-ruler__chdiv {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 1px;\n  background: var(--lum-accent-line);\n  opacity: 0.5;\n}\n\n/* ─────────────── Lanes ─────────────── */\n.lum-st-lanes {\n  flex: 1;\n  min-height: 0;\n  display: grid;\n  grid-template-columns: 150px 1fr;\n  /* Scroll the lane stack vertically when all lanes don't fit; never overflow\n     horizontally. Plain mouse-wheel now scrolls here (zoom requires ⌘/ctrl). */\n  overflow: hidden auto;\n  overscroll-behavior: contain;\n}\n.lum-st-lanes__rails {\n  border-right: 1px solid var(--lum-border);\n  background: var(--lum-surface);\n  position: sticky;\n  left: 0;\n  z-index: 4;\n}\n.lum-st-lanes__tracks {\n  position: relative;\n  min-width: 0;\n}\n\n.lum-st-rail {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  height: 30px;\n  padding: 0 8px 0 4px;\n  border-bottom: 1px solid color-mix(in srgb, var(--lum-border) 50%, transparent);\n  font-size: 12px;\n}\n.lum-st-rail.is-muted {\n  opacity: 0.4;\n}\n/* Collapsed rail must match the collapsed track height (.lum-st-lane--collapsed,\n   16px) or the taller rail dictates the row and nothing visibly reduces. Drop the\n   solo/mute controls to fit the shorter row; the chevron + label + count remain. */\n.lum-st-rail.is-collapsed {\n  height: 16px;\n  font-size: 11px;\n}\n.lum-st-rail.is-collapsed .lum-st-rail__collapse {\n  padding: 0;\n}\n.lum-st-rail.is-collapsed .lum-st-rail__ctrls {\n  display: none;\n}\n.lum-st-rail__collapse {\n  background: transparent;\n  border: none;\n  color: var(--lum-muted);\n  cursor: pointer;\n  display: inline-flex;\n  padding: 2px;\n}\n.lum-st-rail__collapse:hover {\n  color: var(--lum-text);\n}\n.lum-st-rail__label {\n  color: var(--lum-text-2);\n  font-weight: 540;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.lum-st-rail__count {\n  color: var(--lum-faint);\n  font-size: 11px;\n  margin-left: auto;\n  font-variant-numeric: tabular-nums;\n}\n.lum-st-rail__ctrls {\n  display: flex;\n  gap: 1px;\n}\n.lum-st-rail__btn {\n  background: transparent;\n  border: none;\n  color: var(--lum-faint);\n  cursor: pointer;\n  display: inline-flex;\n  padding: 3px;\n  border-radius: var(--lum-radius-xs);\n}\n.lum-st-rail__btn:hover {\n  color: var(--lum-text);\n  background: var(--lum-surface-2);\n}\n.lum-st-rail__btn.is-on {\n  color: var(--lum-accent);\n  background: var(--lum-accent-soft);\n}\n\n.lum-st-lane {\n  position: relative;\n  height: 30px;\n  /* Clip glyphs whose time falls outside the current zoom window so a zoom\n     never spills content horizontally and breaks the layout. */\n  overflow: hidden;\n  border-bottom: 1px solid color-mix(in srgb, var(--lum-border) 50%, transparent);\n}\n.lum-st-lane:focus-visible {\n  outline: none;\n  box-shadow: inset var(--lum-focus);\n}\n.lum-st-lane--collapsed {\n  height: 16px;\n  display: flex;\n  align-items: center;\n  padding-left: 8px;\n}\n.lum-st-lane__count {\n  font-size: 10px;\n  color: var(--lum-faint);\n}\n.lum-st-lane__empty {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  color: var(--lum-faint);\n  font-size: 11px;\n}\n\n/* Chapter blocks */\n.lum-st-chapter {\n  position: absolute;\n  top: 5px;\n  bottom: 5px;\n  border: 1px solid transparent;\n  border-radius: var(--lum-radius-xs);\n  cursor: pointer;\n  overflow: hidden;\n  text-align: left;\n  padding: 0 6px;\n  font: inherit;\n  display: flex;\n  align-items: center;\n  transition: filter var(--lum-dur-1) var(--lum-ease);\n}\n.lum-st-chapter:hover {\n  filter: brightness(1.2);\n}\n.lum-st-chapter__label {\n  font-size: 10.5px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--lum-text);\n}\n.lum-st-chapter--start {\n  background: color-mix(in srgb, var(--lum-info) 22%, transparent);\n  border-color: var(--lum-info-line);\n}\n.lum-st-chapter--browse,\n.lum-st-chapter--nav {\n  background: var(--lum-surface-2);\n  border-color: var(--lum-border);\n}\n.lum-st-chapter--load {\n  background: rgba(160, 107, 255, 0.16);\n  border-color: rgba(160, 107, 255, 0.4);\n}\n.lum-st-chapter--error {\n  background: var(--lum-error-soft);\n  border-color: var(--lum-error-line);\n}\n.lum-st-chapter--frustration {\n  background: var(--lum-warn-soft);\n  border-color: var(--lum-warn-line);\n}\n.lum-st-chapter--conversion {\n  background: var(--lum-ok-soft);\n  border-color: var(--lum-ok-line);\n}\n.lum-st-chapter--idle,\n.lum-st-chapter.is-idle {\n  background: repeating-linear-gradient(\n    45deg,\n    var(--lum-surface-2),\n    var(--lum-surface-2) 4px,\n    transparent 4px,\n    transparent 8px\n  );\n  border-color: var(--lum-border);\n}\n.lum-st-chapter--idle .lum-st-chapter__label {\n  color: var(--lum-faint);\n}\n\n/* Network mini-waterfall bars */\n.lum-st-netbar {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  height: 9px;\n  min-width: 2px;\n  border-radius: 2px;\n  cursor: pointer;\n  border: none;\n  padding: 0;\n  background: var(--lum-info);\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);\n}\n.lum-st-netbar--error {\n  background: var(--lum-error);\n  box-shadow: 0 0 8px var(--lum-error-line);\n}\n.lum-st-netbar--warn {\n  background: var(--lum-warn);\n}\n.lum-st-netbar--ok {\n  background: #a06bff;\n}\n.lum-st-netbar--muted {\n  background: var(--lum-faint);\n}\n.lum-st-netbar.is-selected {\n  outline: 2px solid var(--lum-accent);\n  outline-offset: 1px;\n  z-index: 3;\n}\n\n/* Task lane: duration bars (sub-event spans) */\n.lum-st-taskbar {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  height: 9px;\n  min-width: 3px;\n  border-radius: 3px;\n  cursor: pointer;\n  border: none;\n  padding: 0;\n  background: #39c5cf;\n  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);\n}\n.lum-st-taskbar.is-running {\n  width: 3px !important;\n  background: repeating-linear-gradient(90deg, #39c5cf 0 3px, transparent 3px 6px);\n  opacity: 0.8;\n}\n.lum-st-taskbar.is-selected {\n  outline: 2px solid var(--lum-accent);\n  outline-offset: 1px;\n  z-index: 3;\n}\n\n/* Glyphs */\n.lum-st-glyph {\n  position: absolute;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  /* min 24x24 hit area (§12) */\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n  font-size: 12px;\n}\n.lum-st-glyph__char {\n  pointer-events: none;\n  filter: drop-shadow(0 0 4px currentColor);\n}\n.lum-st-glyph__count {\n  position: absolute;\n  top: -2px;\n  right: -2px;\n  background: var(--lum-raised);\n  border: 1px solid var(--lum-border);\n  color: var(--lum-text);\n  border-radius: var(--lum-radius-full);\n  font-size: 8px;\n  font-family: var(--lum-font-mono);\n  min-width: 12px;\n  height: 12px;\n  line-height: 11px;\n  text-align: center;\n  padding: 0 2px;\n}\n.lum-st-glyph.is-selected .lum-st-glyph__char {\n  filter: drop-shadow(0 0 7px currentColor);\n}\n.lum-st-glyph.is-selected::after {\n  content: '';\n  position: absolute;\n  inset: 3px;\n  border: 1.5px solid var(--lum-accent);\n  border-radius: 50%;\n}\n@media (prefers-reduced-motion: no-preference) {\n  .lum-st-glyph--pulse .lum-st-glyph__char {\n    animation: lum-st-pulse 1.4s var(--lum-ease) infinite;\n  }\n}\n@keyframes lum-st-pulse {\n  0%,\n  100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.45;\n  }\n}\n\n/* Single playhead crossing all lanes */\n.lum-st-playhead {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 2px;\n  background: var(--lum-accent);\n  box-shadow: var(--lum-accent-glow);\n  transform: translateX(-1px);\n  pointer-events: none;\n  z-index: 5;\n}\n@media (prefers-reduced-motion: no-preference) {\n  .lum-st-playhead {\n    transition: left var(--lum-dur-1) linear;\n  }\n}\n.lum-st-playhead.is-offleft {\n  left: 0 !important;\n  box-shadow: -4px 0 8px var(--lum-accent);\n}\n.lum-st-playhead.is-offright {\n  left: 100% !important;\n  box-shadow: 4px 0 8px var(--lum-accent);\n}\n.lum-st-playhead__cap {\n  position: absolute;\n  top: -3px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 8px;\n  height: 8px;\n  background: var(--lum-accent);\n  border-radius: 50%;\n  box-shadow: var(--lum-accent-glow);\n}\n.lum-st-ghost {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 1px;\n  background: color-mix(in srgb, var(--lum-text) 35%, transparent);\n  pointer-events: none;\n  z-index: 4;\n}\n.lum-st-ghosttip {\n  position: absolute;\n  top: -1px;\n  transform: translateX(-50%);\n  background: var(--lum-overlay);\n  border: 1px solid var(--lum-border-strong);\n  padding: 2px 7px;\n  border-radius: 4px;\n  font-size: 10.5px;\n  white-space: nowrap;\n  pointer-events: none;\n  z-index: 12;\n  box-shadow: var(--lum-shadow);\n}\n.lum-st-ghosttip__lbl {\n  color: var(--lum-muted);\n}\n\n/* Signal ribbon (narrow/compact) */\n.lum-st-ribbonwrap {\n  flex: 1;\n  min-height: 0;\n  display: flex;\n  align-items: center;\n  padding: 0 12px;\n}\n.lum-st-ribbon {\n  position: relative;\n  width: 100%;\n  height: 28px;\n  cursor: pointer;\n  touch-action: none;\n  display: flex;\n  align-items: center;\n}\n.lum-st-ribbon:focus-visible {\n  box-shadow: var(--lum-focus);\n  border-radius: 4px;\n}\n.lum-st-ribbon__track {\n  width: 100%;\n  height: 6px;\n  background: var(--lum-surface-2);\n  border-radius: 999px;\n  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);\n}\n.lum-st-ribbon__glyph {\n  position: absolute;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  font-size: 11px;\n  padding: 4px;\n  filter: drop-shadow(0 0 4px currentColor);\n}\n.lum-st-ribbon__head {\n  position: absolute;\n  top: 2px;\n  bottom: 2px;\n  width: 2px;\n  background: var(--lum-accent);\n  box-shadow: var(--lum-accent-glow);\n  transform: translateX(-1px);\n  pointer-events: none;\n}\n\n/* ═══════════════════ Command palette ═══════════════════ */\n.lum-st-palette {\n  position: absolute;\n  inset: 0;\n  z-index: 140;\n  background: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  padding-top: 12vh;\n}\n.lum-st-palette__card {\n  width: min(560px, 92%);\n  background: var(--lum-overlay);\n  border: 1px solid var(--lum-border-strong);\n  border-radius: var(--lum-radius-lg);\n  box-shadow: var(--lum-shadow-lg);\n  overflow: hidden;\n}\n.lum-st-palette__input {\n  width: 100%;\n  border: none;\n  border-bottom: 1px solid var(--lum-border);\n  background: transparent;\n  color: var(--lum-text);\n  padding: 14px 16px;\n  font-size: 14px;\n  outline: none;\n}\n.lum-st-palette__input::placeholder {\n  color: var(--lum-faint);\n}\n.lum-st-palette__hint {\n  padding: 6px 16px 0;\n  font-size: 11px;\n}\n.lum-st-palette__list {\n  list-style: none;\n  margin: 0;\n  padding: 6px;\n  max-height: 50vh;\n  overflow: auto;\n}\n.lum-st-palette__item {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  width: 100%;\n  text-align: left;\n  background: transparent;\n  border: none;\n  color: var(--lum-text);\n  padding: 8px 10px;\n  border-radius: var(--lum-radius-sm);\n  cursor: pointer;\n}\n.lum-st-palette__item.is-active {\n  background: var(--lum-accent-soft);\n}\n.lum-st-palette__label {\n  font-size: 13px;\n  font-weight: 540;\n}\n.lum-st-palette__detail {\n  font-size: 11.5px;\n}\n.lum-st-palette__empty {\n  padding: 14px;\n  text-align: center;\n  font-size: 13px;\n}\n\n/* ════════════════════ Responsive (§4) ════════════════════ */\n/* Stage focus: lanes collapse to a strip; rails narrower. */\n.lum-strata--stage .lum-st-lanes {\n  grid-template-columns: 120px 1fr;\n}\n/* mid+: inspector docks become drawer; stage spans full row (handled by JS). */\n.lum-strata--narrow .lum-st-overview,\n.lum-strata--compact .lum-st-overview {\n  display: none; /* brush-zoom disabled; ribbon scrubber used */\n}\n.lum-strata--compact .lum-st-transport__group--right {\n  display: none;\n}\n.lum-strata--compact .lum-st-rulerrow {\n  height: 40px;\n}\n\n/* ════════════════════ rrweb wrapper ════════════════════ */\n.lum-strata .replayer-wrapper {\n  position: absolute;\n}\n.lum-strata .replayer-mouse-tail {\n  position: absolute;\n}\n\n/* ════════════════════════════════════════════════════════════════════\n   Reused panel / detail styles (NetworkDetail, console rows, etc.)\n   These render INSIDE the new Inspector — kept verbatim from the old shell.\n   ════════════════════════════════════════════════════════════════════ */\n.lum-pl-rows {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  font-size: 12.5px;\n}\n.lum-pl-row {\n  display: grid;\n  grid-template-columns: 18px 56px 1fr auto;\n  gap: 8px;\n  align-items: start;\n  padding: 5px 10px;\n  border-bottom: 1px solid color-mix(in srgb, var(--lum-border) 50%, transparent);\n}\n.lum-pl-row.is-active {\n  background: var(--lum-accent-soft);\n}\n.lum-pl-row--error {\n  background: var(--lum-error-soft);\n  box-shadow: inset 2px 0 0 var(--lum-error);\n}\n.lum-pl-row--warn {\n  background: var(--lum-warn-soft);\n  box-shadow: inset 2px 0 0 var(--lum-warn);\n}\n.lum-pl-row__lvl {\n  text-align: center;\n  font-weight: 700;\n  border-radius: var(--lum-radius-xs);\n  font-size: 11px;\n  line-height: 16px;\n}\n.lum-pl-row__time {\n  background: transparent;\n  border: none;\n  color: var(--lum-accent);\n  cursor: pointer;\n  padding: 0;\n  text-align: left;\n  font: inherit;\n  font-family: var(--lum-font-mono);\n  font-variant-numeric: tabular-nums;\n}\n.lum-pl-row__time:hover {\n  color: var(--lum-accent-hover);\n  text-decoration: underline;\n}\n.lum-pl-row__msg {\n  word-break: break-word;\n  white-space: pre-wrap;\n}\n.lum-pl-row__src {\n  font-size: 11px;\n  white-space: nowrap;\n  color: var(--lum-faint);\n}\n.lum-pl-arg--err {\n  color: var(--lum-error);\n}\n.lum-pl-arg--dom {\n  color: var(--lum-accent);\n}\n.lum-pl-arg__toggle {\n  background: transparent;\n  border: none;\n  color: var(--lum-info);\n  cursor: pointer;\n  font: inherit;\n  padding: 0;\n}\n.lum-pl-json,\n.lum-pl-stack,\n.lum-pl-inspector {\n  background: var(--lum-bg);\n  border: 1px solid var(--lum-border);\n  border-radius: var(--lum-radius-sm);\n  padding: 8px;\n  margin: 4px 0;\n  overflow: auto;\n  white-space: pre-wrap;\n  font-size: 11.5px;\n  font-family: var(--lum-font-mono);\n  max-height: 320px;\n}\n.lum-pl-stack {\n  color: var(--lum-muted);\n}\n.lum-pl-mark {\n  background: var(--lum-warn);\n  color: #000;\n  border-radius: 2px;\n}\n\n/* Network body — DevTools-style JSON tree + Parsed/Raw toggle */\n.lum-pl-body__head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n}\n.lum-pl-seg {\n  display: inline-flex;\n  border: 1px solid var(--lum-border);\n  border-radius: var(--lum-radius-sm);\n  overflow: hidden;\n}\n.lum-pl-seg__btn {\n  background: transparent;\n  border: none;\n  color: var(--lum-muted);\n  font-size: 11px;\n  padding: 2px 9px;\n  cursor: pointer;\n}\n.lum-pl-seg__btn.is-active {\n  background: var(--lum-accent-soft);\n  color: var(--lum-accent);\n}\n.lum-jt {\n  background: var(--lum-bg);\n  border: 1px solid var(--lum-border);\n  border-radius: var(--lum-radius-sm);\n  padding: 6px 8px;\n  margin: 4px 0;\n  overflow: auto;\n  max-height: 340px;\n  font-size: 12px;\n  line-height: 1.55;\n}\n.lum-jt__row {\n  border-radius: 3px;\n}\n.lum-jt__branch {\n  cursor: pointer;\n}\n.lum-jt__branch:hover {\n  background: var(--lum-surface-2);\n}\n.lum-jt__caret {\n  display: inline-block;\n  width: 12px;\n  color: var(--lum-faint);\n  user-select: none;\n}\n.lum-jt__key {\n  color: var(--lum-accent);\n  margin-right: 6px;\n}\n.lum-jt__str {\n  color: var(--lum-ok);\n  word-break: break-all;\n}\n.lum-jt__num {\n  color: var(--lum-info);\n}\n.lum-jt__bool {\n  color: var(--lum-warn);\n}\n.lum-jt__null {\n  color: var(--lum-faint);\n}\n.lum-jt__punc {\n  color: var(--lum-muted);\n}\n.lum-jt__preview {\n  color: var(--lum-faint);\n  font-style: italic;\n}\n\n/* WebSocket rows + Messages view */\n.lum-pl-ws__dot {\n  display: inline-block;\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: var(--lum-info);\n  margin-right: 5px;\n  vertical-align: middle;\n}\n.lum-pl-ws__bar {\n  opacity: 0.55;\n  background-image: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 10px);\n}\n.lum-pl-ws-msgs {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  margin-top: 4px;\n}\n.lum-pl-ws-frame {\n  border-radius: 5px;\n  overflow: hidden;\n}\n.lum-pl-ws-frame--send {\n  background: color-mix(in srgb, var(--lum-accent) 7%, transparent);\n}\n.lum-pl-ws-frame__head {\n  width: 100%;\n  display: grid;\n  grid-template-columns: 16px 62px 1fr auto;\n  gap: 8px;\n  align-items: center;\n  text-align: left;\n  background: transparent;\n  border: none;\n  color: var(--lum-text);\n  padding: 4px 7px;\n  cursor: pointer;\n  font-size: 12px;\n}\n.lum-pl-ws-frame__head:disabled {\n  cursor: default;\n}\n.lum-pl-ws-frame__head:not(:disabled):hover {\n  background: var(--lum-surface-2);\n}\n.lum-pl-ws-frame__dir {\n  font-size: 10px;\n}\n.lum-pl-ws-frame__dir.is-send {\n  color: var(--lum-accent);\n}\n.lum-pl-ws-frame__dir.is-recv {\n  color: var(--lum-ok);\n}\n.lum-pl-ws-frame__data {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.lum-pl-ws-frame__body {\n  padding: 2px 8px 8px 32px;\n}\n\n/* Network detail (reused verbatim by Inspector → NetworkDetail) */\n.lum-pl-detail__head {\n  font-size: 13px;\n  margin-bottom: 10px;\n}\n.lum-pl-detail__url {\n  word-break: break-all;\n  color: var(--lum-muted);\n  margin-top: 4px;\n}\n.lum-pl-tabs2 {\n  display: flex;\n  gap: 2px;\n  border-bottom: 1px solid var(--lum-border);\n  margin-bottom: 10px;\n}\n.lum-pl-tab2 {\n  background: transparent;\n  border: none;\n  border-bottom: 2px solid transparent;\n  color: var(--lum-muted);\n  padding: 6px 10px;\n  cursor: pointer;\n  font: inherit;\n  font-size: 12.5px;\n  transition: color var(--lum-dur-1) var(--lum-ease);\n}\n.lum-pl-tab2:hover {\n  color: var(--lum-text);\n}\n.lum-pl-tab2.is-active {\n  color: var(--lum-text);\n  border-bottom-color: var(--lum-accent);\n}\n.lum-pl-kv h5 {\n  margin: 12px 0 4px;\n  color: var(--lum-muted);\n  font-size: 11px;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n}\n.lum-pl-kv__row {\n  display: grid;\n  grid-template-columns: 130px 1fr;\n  gap: 10px;\n  padding: 3px 0;\n  font-size: 12px;\n  border-bottom: 1px solid color-mix(in srgb, var(--lum-border) 40%, transparent);\n}\n.lum-pl-kv__val {\n  word-break: break-all;\n}\n.lum-pl-redacted {\n  color: var(--lum-warn);\n}\n.lum-pl-timing__row {\n  display: grid;\n  grid-template-columns: 92px 1fr 64px;\n  gap: 8px;\n  align-items: center;\n  padding: 3px 0;\n  font-size: 12px;\n}\n.lum-pl-timing__label {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n.lum-pl-timing__i {\n  flex: none;\n  opacity: 0.45;\n  cursor: help;\n  vertical-align: middle;\n}\n.lum-pl-timing__i:hover {\n  opacity: 0.85;\n}\n.lum-pl-timing__bar {\n  background: var(--lum-surface-2);\n  height: 8px;\n  border-radius: 3px;\n  overflow: hidden;\n}\n.lum-pl-timing__bar span {\n  display: block;\n  height: 100%;\n  background: linear-gradient(90deg, var(--lum-accent), var(--lum-accent-hover));\n}\n\n/* Error groups + info (reused) */\n.lum-pl-errgroup {\n  padding: 10px;\n  border-bottom: 1px solid var(--lum-border);\n}\n.lum-pl-errgroup__head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n.lum-pl-errgroup__msg {\n  margin: 6px 0;\n  color: var(--lum-error);\n}\n.lum-pl-panel {\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  flex: 1;\n}\n.lum-pl-chips {\n  display: inline-flex;\n  gap: 2px;\n  flex-wrap: wrap;\n}\n.lum-pl-chip {\n  background: transparent;\n  border: 1px solid transparent;\n  color: var(--lum-muted);\n  border-radius: var(--lum-radius-xs);\n  padding: 3px 9px;\n  font-size: 12px;\n  font-weight: 540;\n  cursor: pointer;\n  white-space: nowrap;\n  transition: background var(--lum-dur-1) var(--lum-ease), color var(--lum-dur-1) var(--lum-ease);\n}\n.lum-pl-chip:hover {\n  color: var(--lum-text);\n}\n.lum-pl-chip.is-active {\n  color: var(--lum-text);\n  background: var(--lum-surface-2);\n  border-color: var(--lum-border);\n}\n.lum-pl-chip__count {\n  margin-left: 5px;\n  opacity: 0.7;\n  font-variant-numeric: tabular-nums;\n}\n\n/* ─────────────── Shortcut overlay (kept) ─────────────── */\n.lum-pl-help {\n  position: absolute;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.55);\n  backdrop-filter: blur(3px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 120;\n}\n.lum-pl-help__card {\n  background:\n    linear-gradient(var(--lum-hairline), transparent 80px) padding-box,\n    var(--lum-overlay) padding-box;\n  border: 1px solid var(--lum-border-strong);\n  border-radius: var(--lum-radius-lg);\n  padding: 18px;\n  width: min(520px, 92%);\n  box-shadow: var(--lum-shadow-lg);\n}\n.lum-pl-help__head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 12px;\n}\n.lum-pl-help__grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 8px 16px;\n}\n.lum-pl-help__row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 13px;\n}\n.lum-pl-kbd {\n  background: var(--lum-bg);\n  border: 1px solid var(--lum-border);\n  border-bottom-width: 2px;\n  border-radius: 5px;\n  padding: 2px 7px;\n  font-size: 11.5px;\n  font-family: var(--lum-font-mono);\n  min-width: 54px;\n  text-align: center;\n}\n\n/* Reduced-motion: kill JS-adjacent transitions */\n@media (prefers-reduced-motion: reduce) {\n  .lum-strata,\n  .lum-st-playhead {\n    transition: none;\n  }\n}\n\n/* ─────────────────────────── Replay cursor ──────────────────────────────\n   rrweb 2.x ships its player chrome (the replayed-cursor pointer, click\n   ripple, mouse-tail) in a separate stylesheet we don't bundle, so the\n   `.replayer-mouse` element renders unstyled. These rules restore the proper\n   mouse pointer + click feedback inside the replay. The arrow image is rrweb's\n   own (a black pointer); the ripple uses the Obsrviq accent. */\n.replayer-wrapper {\n  position: relative;\n}\n.replayer-mouse {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  transition: left 0.05s linear, top 0.05s linear;\n  background-size: contain;\n  background-position: center center;\n  background-repeat: no-repeat;\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iTGF5ZXIgMSIgdmlld0JveD0iMCAwIDUwIDUwIiB4PSIwcHgiIHk9IjBweCI+PHRpdGxlPkRlc2lnbl90bnA8L3RpdGxlPjxwYXRoIGQ9Ik00OC43MSw0Mi45MUwzNC4wOCwyOC4yOSw0NC4zMywxOEExLDEsMCwwLDAsNDQsMTYuMzlMMi4zNSwxLjA2QTEsMSwwLDAsMCwxLjA2LDIuMzVMMTYuMzksNDRhMSwxLDAsMCwwLDEuNjUuMzZMMjguMjksMzQuMDgsNDIuOTEsNDguNzFhMSwxLDAsMCwwLDEuNDEsMGw0LjM4LTQuMzhBMSwxLDAsMCwwLDQ4LjcxLDQyLjkxWm0tNS4wOSwzLjY3TDI5LDMyYTEsMSwwLDAsMC0xLjQxLDBsLTkuODUsOS44NUwzLjY5LDMuNjlsMzguMTIsMTRMMzIsMjcuNThBMSwxLDAsMCwwLDMyLDI5TDQ2LjU5LDQzLjYyWiI+PC9wYXRoPjwvc3ZnPg==\");\n  border-color: transparent;\n  /* The replay stage is scaled via transform; keep the cursor crisp + on top. */\n  z-index: 2;\n  pointer-events: none;\n}\n.replayer-mouse::after {\n  content: \"\";\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  background: var(--lum-accent, rgb(73, 80, 246));\n  border-radius: 100%;\n  transform: translate(-50%, -50%);\n  opacity: 0;\n}\n.replayer-mouse.active::after {\n  animation: lum-replay-click 0.4s ease-in-out 1;\n}\n.replayer-mouse.touch-device {\n  background-image: none;\n  width: 70px;\n  height: 70px;\n  border: 4px solid color-mix(in srgb, var(--lum-accent, #4950f6) 0%, transparent);\n  border-radius: 100%;\n  margin-left: -37px;\n  margin-top: -37px;\n  transition: left 0s linear, top 0s linear, border-color 0.2s ease-in-out;\n}\n.replayer-mouse.touch-device.touch-active {\n  border-color: var(--lum-accent, #4950f6);\n  transition: left 0.25s linear, top 0.25s linear, border-color 0.2s ease-in-out;\n}\n.replayer-mouse.touch-device::after {\n  opacity: 0;\n}\n.replayer-mouse.touch-device.active::after {\n  animation: lum-replay-touch-click 0.4s ease-in-out 1;\n}\n.replayer-mouse-tail {\n  position: absolute;\n  pointer-events: none;\n  z-index: 1;\n}\n@keyframes lum-replay-click {\n  0% { opacity: 0.4; width: 20px; height: 20px; }\n  50% { opacity: 0.6; width: 10px; height: 10px; }\n  100% { opacity: 0; }\n}\n@keyframes lum-replay-touch-click {\n  0% { opacity: 0; width: 20px; height: 20px; }\n  50% { opacity: 0.5; width: 10px; height: 10px; }\n  100% { opacity: 0; }\n}\n\n/* ───────────────────────── Mobile (RN) replay player ───────────────────── */\n.lum-mob {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  background: var(--lum-bg);\n  color: var(--lum-text);\n}\n.lum-mob--msg {\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  color: var(--lum-muted);\n  font-size: 14px;\n}\n.lum-mob--msg code {\n  font-size: 12px;\n  color: var(--lum-error);\n  max-width: 80%;\n  text-align: center;\n}\n.lum-mob-top {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 9px 14px;\n  border-bottom: 1px solid var(--lum-border);\n  background: var(--lum-surface);\n}\n.lum-mob-back {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  background: transparent;\n  border: 1px solid var(--lum-border);\n  border-radius: var(--lum-radius-full);\n  color: var(--lum-text);\n  font: inherit;\n  font-size: 12.5px;\n  padding: 5px 11px 5px 8px;\n  cursor: pointer;\n}\n.lum-mob-back:hover { background: var(--lum-raised); }\n.lum-mob-title {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  font-size: 13px;\n  font-weight: 540;\n  color: var(--lum-text-2);\n}\n.lum-mob-spacer { flex: 1; }\n\n.lum-mob-body {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n}\n.lum-mob-stagewrap {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 18px;\n  min-width: 0;\n  background:\n    radial-gradient(120% 120% at 50% 0%, var(--lum-surface) 0%, var(--lum-bg) 70%);\n}\n/* The phone frame — keeps the recorded device aspect ratio, fits the stage. */\n.lum-mob-device {\n  position: relative;\n  height: 100%;\n  max-height: 100%;\n  border-radius: 22px;\n  overflow: hidden;\n  background: #000;\n  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--lum-border);\n}\n.lum-mob-frame {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  background: #000;\n}\n.lum-mob-frame--empty {\n  width: 240px;\n  height: 100%;\n}\n/* Tap ripple — small + quick, so it reads as a precise touch, not a blob. */\n.lum-mob-tap {\n  position: absolute;\n  width: 18px;\n  height: 18px;\n  margin: -9px 0 0 -9px;\n  border-radius: 50%;\n  background: rgba(129, 140, 248, 0.26);\n  box-shadow: 0 0 0 1.5px rgba(129, 140, 248, 0.9) inset, 0 0 10px rgba(129, 140, 248, 0.5);\n  pointer-events: none;\n  animation: lum-mob-tap 0.42s ease-out forwards;\n}\n@keyframes lum-mob-tap {\n  from { transform: scale(0.35); opacity: 0.95; }\n  60%  { opacity: 0.7; }\n  to   { transform: scale(1.15); opacity: 0; }\n}\n/* Swipe streak — a soft glowing comet tracing the finger's recent path (per-segment fade\n   set inline). Non-scaling strokes keep a constant visual weight across device sizes. */\n.lum-mob-swipe {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  overflow: visible;\n}\n.lum-mob-swipe__seg {\n  stroke: rgba(129, 140, 248, 0.95);\n  stroke-width: 3.5;\n  stroke-linecap: round;\n  filter: drop-shadow(0 0 3px rgba(129, 140, 248, 0.65));\n}\n.lum-mob-swipe__head {\n  fill: #c7d2fe;\n  stroke: rgba(129, 140, 248, 0.95);\n  filter: drop-shadow(0 0 5px rgba(129, 140, 248, 0.9));\n}\n\n/* Synced structured-event feed. */\n.lum-mob-feed {\n  width: 320px;\n  flex: none;\n  border-left: 1px solid var(--lum-border);\n  background: var(--lum-surface);\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n.lum-mob-feed__head {\n  padding: 8px 14px;\n  font-size: 11px;\n  font-weight: 650;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  color: var(--lum-muted);\n  border-bottom: 1px solid var(--lum-border);\n}\n/* Feed / Network tabs */\n.lum-mob-feed__tabs { display: flex; border-bottom: 1px solid var(--lum-border); flex: none; }\n.lum-mob-feed__tab {\n  flex: 1; padding: 9px 0; background: none; border: 0; cursor: pointer;\n  font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;\n  color: var(--lum-muted); border-bottom: 2px solid transparent;\n}\n.lum-mob-feed__tab:hover { color: var(--lum-text-2); }\n.lum-mob-feed__tab.is-active { color: var(--lum-text); border-bottom-color: var(--lum-accent); }\n\n/* Network waterfall + inspector — modelled on the web NetworkPanel. */\n.lum-mob-net { display: flex; flex-direction: column; flex: 1; min-height: 0; font-size: 12px; }\n.lum-mob-net__empty { padding: 18px 14px; color: var(--lum-muted); font-size: 12.5px; }\n\n.lum-mob-net__toolbar {\n  display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; flex: none;\n  border-bottom: 1px solid var(--lum-border);\n}\n.lum-mob-net__chips { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }\n.lum-mob-net__chip {\n  padding: 2px 9px; border-radius: 999px; cursor: pointer; font-size: 11px; font-weight: 600;\n  color: var(--lum-muted); background: var(--lum-raised); border: 1px solid transparent;\n}\n.lum-mob-net__chip:hover { color: var(--lum-text-2); }\n.lum-mob-net__chip.is-active { color: var(--lum-text); background: var(--lum-surface); border-color: var(--lum-accent); }\n.lum-mob-net__follow {\n  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;\n  font-size: 11px; color: var(--lum-muted); cursor: pointer;\n}\n.lum-mob-net__search {\n  width: 100%; padding: 4px 8px; border-radius: 6px; font-size: 12px;\n  background: var(--lum-bg); border: 1px solid var(--lum-border); color: var(--lum-text);\n}\n\n.lum-mob-net__rows { overflow-y: auto; flex: 1; min-height: 0; padding: 2px 0; }\n.lum-mob-net__row {\n  display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left;\n  padding: 7px 10px 8px; background: none; border: 0; border-bottom: 1px solid var(--lum-border);\n  cursor: pointer; color: var(--lum-text); border-left: 2px solid transparent;\n}\n.lum-mob-net__row:hover { background: var(--lum-raised); }\n.lum-mob-net__row.is-active { background: var(--lum-raised); border-left-color: var(--lum-accent); }\n.lum-mob-net__rowtop { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 7px; align-items: center; }\n.lum-mob-net__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--lum-text); }\n.lum-mob-net__method { font-size: 10.5px; font-weight: 700; color: var(--lum-muted); }\n.lum-mob-net__time { font-size: 11px; color: var(--lum-muted); font-variant-numeric: tabular-nums; }\n/* Timeline-positioned waterfall bar (start offset + duration over the whole session). */\n.lum-mob-net__wf { position: relative; display: block; height: 4px; border-radius: 2px; background: var(--lum-raised); }\n.lum-mob-net__bar { position: absolute; top: 0; height: 100%; min-width: 2px; border-radius: 2px; background: var(--lum-accent); }\n.lum-mob-net__bar--error { background: var(--lum-error); }\n.lum-mob-net__bar--warn { background: #d97706; }\n.lum-mob-net__bar--info { background: #3b82f6; }\n.lum-mob-net__bar--default { background: #1f9d55; }\n\n.lum-mob-net__footer {\n  flex: none; padding: 6px 10px; font-size: 11px; color: var(--lum-muted);\n  border-top: 1px solid var(--lum-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n\n/* Console rows — reuse the web ConsoleArgs renderer, with a compact time/jump header. */\n.lum-mob-crow { padding: 5px 10px 6px; border-bottom: 1px solid var(--lum-border); border-left: 2px solid transparent; }\n.lum-mob-crow.is-active { background: var(--lum-raised); border-left-color: var(--lum-accent); }\n.lum-mob-crow__t { display: inline-block; margin-bottom: 2px; padding: 0; background: none; border: 0; cursor: pointer; font-size: 10.5px; color: var(--lum-muted); }\n.lum-mob-crow__t:hover { color: var(--lum-accent); }\n\n/* Mobile AI panel — vision-grounded narrative + seekable findings. */\n.lum-mob-ai { overflow-y: auto; flex: 1; min-height: 0; padding: 10px 12px 14px; font-size: 12.5px; }\n.lum-mob-ai__msg { padding: 18px 14px; color: var(--lum-muted); font-size: 12.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }\n.lum-mob-ai__cta { padding: 26px 18px; text-align: center; color: var(--lum-muted); display: flex; flex-direction: column; align-items: center; gap: 6px; }\n.lum-mob-ai__ctatitle { margin: 4px 0 0; font-size: 14px; font-weight: 650; color: var(--lum-text); }\n.lum-mob-ai__ctasub { margin: 0; font-size: 12px; line-height: 1.5; max-width: 280px; }\n.lum-mob-ai__ctabtn { margin-top: 8px; padding: 7px 18px; border-radius: 8px; cursor: pointer; font-size: 12.5px; font-weight: 650; color: #fff; background: var(--lum-accent); border: 0; }\n.lum-mob-ai__ctabtn:hover { filter: brightness(1.06); }\n.lum-mob-ai__cap { margin-bottom: 8px; padding: 6px 9px; border-radius: 6px; font-size: 11px; color: var(--lum-warn); background: var(--lum-raised); border: 1px solid var(--lum-border); }\n.lum-mob-ai__retry { padding: 2px 9px; border-radius: 6px; cursor: pointer; font-size: 11px; font-weight: 600; color: var(--lum-accent); background: var(--lum-raised); border: 1px solid var(--lum-border); }\n.lum-mob-ai__head { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }\n.lum-mob-ai__headline { font-size: 13px; font-weight: 650; color: var(--lum-text); flex: 1; min-width: 0; }\n.lum-mob-ai__refresh { flex: none; padding: 3px; border-radius: 5px; cursor: pointer; color: var(--lum-muted); background: none; border: 1px solid var(--lum-border); display: inline-flex; }\n.lum-mob-ai__refresh:hover { color: var(--lum-text); }\n.lum-mob-ai__narrative { margin: 0 0 12px; color: var(--lum-text-2); line-height: 1.5; }\n.lum-mob-ai__sec { margin-bottom: 12px; }\n.lum-mob-ai__sectitle { font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; color: var(--lum-muted); margin-bottom: 5px; }\n.lum-mob-ai__findings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }\n.lum-mob-ai__finding { display: flex; gap: 8px; padding: 6px; border-radius: 7px; cursor: pointer; }\n.lum-mob-ai__finding:hover { background: var(--lum-raised); }\n.lum-mob-ai__dot { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--lum-muted); }\n.lum-mob-ai__dot--err { background: var(--lum-error); }\n.lum-mob-ai__dot--warn { background: #d97706; }\n.lum-mob-ai__dot--info { background: #3b82f6; }\n.lum-mob-ai__fbody { display: flex; flex-direction: column; gap: 1px; min-width: 0; }\n.lum-mob-ai__ftitle { font-weight: 600; color: var(--lum-text); }\n.lum-mob-ai__ft { font-weight: 400; font-size: 10.5px; color: var(--lum-muted); }\n.lum-mob-ai__fdetail { font-size: 11.5px; color: var(--lum-text-2); line-height: 1.4; }\n.lum-mob-ai__screens { display: flex; flex-wrap: wrap; gap: 5px; }\n.lum-mob-ai__screen { padding: 3px 8px; border-radius: 999px; cursor: pointer; font-size: 11px; color: var(--lum-text-2); background: var(--lum-raised); border: 1px solid var(--lum-border); }\n.lum-mob-ai__screen:hover { color: var(--lum-text); border-color: var(--lum-accent); }\n.lum-mob-ai__st { color: var(--lum-muted); }\n.lum-mob-ai__foot { font-size: 10.5px; color: var(--lum-muted); padding-top: 4px; border-top: 1px solid var(--lum-border); }\n\n/* Error groups — compact mirror of the web ErrorsPanel. */\n.lum-mob-errgrp { padding: 9px 10px; border-bottom: 1px solid var(--lum-border); }\n.lum-mob-errgrp__head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }\n.lum-mob-errgrp__name { font-size: 12px; color: var(--lum-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.lum-mob-errgrp__jump { margin-left: auto; padding: 0; background: none; border: 0; cursor: pointer; font-size: 10.5px; color: var(--lum-accent); white-space: nowrap; }\n.lum-mob-errgrp__msg { font-size: 11.5px; color: var(--lum-text-2); word-break: break-word; }\n.lum-mob-errgrp__stack {\n  margin: 5px 0 0; padding: 7px; border-radius: 6px; max-height: 180px; overflow: auto;\n  font-size: 10.5px; line-height: 1.4; white-space: pre-wrap; word-break: break-all;\n  background: var(--lum-bg); border: 1px solid var(--lum-border); color: var(--lum-muted);\n}\n.lum-mob-feed__list {\n  list-style: none;\n  margin: 0;\n  padding: 4px 0;\n  overflow-y: auto;\n  flex: 1;\n}\n.lum-mob-ev {\n  display: flex;\n  gap: 10px;\n  padding: 5px 14px;\n  font-size: 12px;\n  cursor: pointer;\n  opacity: 0.5;\n  border-left: 2px solid transparent;\n}\n.lum-mob-ev.is-past { opacity: 1; }\n.lum-mob-ev.is-current {\n  background: var(--lum-accent-soft);\n  border-left-color: var(--lum-accent);\n}\n.lum-mob-ev:hover { background: var(--lum-raised); }\n.lum-mob-ev__t {\n  flex: none;\n  width: 48px;\n  color: var(--lum-muted);\n  font-variant-numeric: tabular-nums;\n  font-size: 11px;\n}\n.lum-mob-ev__label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.lum-mob-ev--error .lum-mob-ev__label { color: var(--lum-error); }\n.lum-mob-ev--network .lum-mob-ev__label { color: var(--lum-text-2); }\n\n/* Transport + scrubber. */\n.lum-mob-transport {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 14px;\n  border-top: 1px solid var(--lum-border);\n  background: var(--lum-surface);\n}\n.lum-mob-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border-radius: 8px;\n  border: 1px solid transparent;\n  background: transparent;\n  color: var(--lum-text);\n  cursor: pointer;\n}\n.lum-mob-btn:hover { background: var(--lum-raised); }\n.lum-mob-btn--play {\n  background: var(--lum-accent);\n  color: var(--lum-accent-contrast);\n}\n.lum-mob-btn--play:hover { background: var(--lum-accent-hover); }\n.lum-mob-scrub { flex: 1; padding: 0 6px; }\n.lum-mob-track {\n  position: relative;\n  height: 22px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.lum-mob-track::before {\n  content: '';\n  position: absolute;\n  left: 0; right: 0;\n  height: 4px;\n  border-radius: 2px;\n  background: var(--lum-border-strong);\n}\n.lum-mob-track__fill {\n  position: absolute;\n  left: 0;\n  height: 4px;\n  border-radius: 2px;\n  background: var(--lum-accent);\n}\n.lum-mob-track__head {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  margin-left: -6px;\n  border-radius: 50%;\n  background: var(--lum-accent);\n  box-shadow: 0 0 0 3px var(--lum-accent-soft);\n}\n.lum-mob-mark {\n  position: absolute;\n  width: 3px;\n  height: 10px;\n  margin-left: -1px;\n  border-radius: 1px;\n}\n.lum-mob-mark--error { background: var(--lum-error); }\n.lum-mob-mark--custom { background: var(--lum-accent); }\n.lum-mob-time {\n  font-size: 12px;\n  font-variant-numeric: tabular-nums;\n  color: var(--lum-text-2);\n  white-space: nowrap;\n}\n.lum-mob-speed {\n  background: var(--lum-surface-2);\n  color: var(--lum-text);\n  border: 1px solid var(--lum-border);\n  border-radius: 7px;\n  font: inherit;\n  font-size: 12px;\n  padding: 4px 6px;\n}\n\n.lum-widget {\n  color: var(--lum-text);\n  font-family: var(--lum-font-ui);\n}\n\n/* ── Insight cards ── */\n.lum-w-cards {\n  display: grid;\n  gap: 14px;\n}\n.lum-w-card {\n  position: relative;\n  background:\n    linear-gradient(var(--lum-hairline), transparent 64px) padding-box,\n    var(--lum-raised) padding-box;\n  border: 1px solid var(--lum-border);\n  border-radius: 14px;\n  box-shadow: var(--lum-shadow-sm);\n  padding: 16px 18px 16px 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 7px;\n  overflow: hidden;\n  transition: transform var(--lum-dur-1) var(--lum-ease), box-shadow var(--lum-dur-1) var(--lum-ease);\n}\n.lum-w-card:hover {\n  transform: translateY(-1px);\n  box-shadow: var(--lum-shadow);\n}\n/* priority left rule, colored by the severity badge inside */\n.lum-w-card::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 3px;\n  background: var(--lum-info);\n}\n.lum-w-card:has(.lum-badge--error)::before {\n  background: var(--lum-error);\n}\n.lum-w-card:has(.lum-badge--warn)::before {\n  background: var(--lum-warn);\n}\n.lum-w-card:has(.lum-badge--info)::before {\n  background: var(--lum-info);\n}\n.lum-w-card__head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.lum-w-card__head strong {\n  font-size: 15px;\n  font-weight: 620;\n  letter-spacing: -0.006em;\n}\n.lum-w-card__head .lum-badge {\n  text-transform: uppercase;\n  font-size: 11px;\n  letter-spacing: 0.04em;\n}\n.lum-w-card__what {\n  margin: 2px 0 0;\n  color: var(--lum-text);\n}\n.lum-w-card__why {\n  margin: 0;\n  font-size: 13px;\n  color: var(--lum-text-2);\n}\n.lum-w-card__rec {\n  position: relative;\n  margin: 6px 0;\n  padding: 10px 12px 10px 14px;\n  background: var(--lum-surface-2);\n  border-radius: var(--lum-radius-sm);\n  font-size: 13px;\n  border-left: 3px solid var(--lum-accent);\n}\n.lum-w-card__rec::before {\n  content: 'Recommended fix';\n  display: block;\n  font-size: 10px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  color: var(--lum-accent);\n  margin-bottom: 3px;\n}\n.lum-w-card__meta {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  flex-wrap: wrap;\n  font-size: 12px;\n}\n.lum-w-card__meta .lum-muted {\n  margin-left: auto;\n  font-family: var(--lum-font-mono);\n  font-variant-numeric: tabular-nums;\n  color: var(--lum-faint);\n}\n.lum-w-card__actions {\n  display: flex;\n  gap: 8px;\n  margin-top: 6px;\n}\n\n/* ── Recommendation queue ── */\n.lum-w-queue {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.lum-w-queue__item {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  background:\n    linear-gradient(var(--lum-hairline), transparent 48px) padding-box,\n    var(--lum-raised) padding-box;\n  border: 1px solid var(--lum-border);\n  border-radius: var(--lum-radius);\n  box-shadow: var(--lum-shadow-sm);\n  padding: 10px 14px;\n  transition: transform var(--lum-dur-1) var(--lum-ease), box-shadow var(--lum-dur-1) var(--lum-ease);\n}\n.lum-w-queue__item:hover {\n  transform: translateY(-1px);\n  box-shadow: var(--lum-shadow);\n}\n.lum-w-queue__rank {\n  font-size: 18px;\n  font-weight: 680;\n  font-family: var(--lum-font-mono);\n  font-variant-numeric: tabular-nums;\n  color: var(--lum-accent);\n  width: 24px;\n  text-align: center;\n}\n.lum-w-queue__body {\n  flex: 1;\n  min-width: 0;\n}\n.lum-w-queue__title {\n  font-weight: 600;\n  font-size: 14px;\n}\n.lum-w-queue__meta {\n  display: flex;\n  gap: 6px;\n  margin-top: 4px;\n  flex-wrap: wrap;\n}\n\n/* ── Score gauge ── */\n.lum-w-score {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 6px;\n}\n.lum-w-score__label {\n  font-size: 13px;\n  color: var(--lum-muted);\n  font-weight: 600;\n}\n/* Animate the arc sweeping from empty (full circumference) to its value. */\n.lum-w-score__arc {\n  animation: lum-arc-sweep var(--lum-dur-3) var(--lum-ease) both;\n}\n@keyframes lum-arc-sweep {\n  from {\n    stroke-dashoffset: var(--lum-arc-c);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .lum-w-score__arc {\n    animation: none;\n  }\n}\n\n/* ── Copilot ── */\n.lum-w-copilot {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 280px;\n  background:\n    linear-gradient(var(--lum-hairline), transparent 80px) padding-box,\n    var(--lum-surface) padding-box;\n  border: 1px solid var(--lum-border);\n  border-radius: var(--lum-radius-lg);\n  box-shadow: var(--lum-shadow-sm);\n  overflow: hidden;\n}\n.lum-w-copilot__log {\n  flex: 1;\n  overflow: auto;\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n}\n.lum-w-copilot__hint {\n  font-size: 13px;\n  color: var(--lum-text-2);\n}\n.lum-w-copilot__q {\n  font-weight: 620;\n  color: var(--lum-text);\n  margin-bottom: 4px;\n}\n.lum-w-copilot__a {\n  white-space: pre-wrap;\n  font-size: 13.5px;\n  line-height: 1.6;\n  color: var(--lum-text-2);\n}\n.lum-w-copilot__ev {\n  margin-top: 8px;\n  font-size: 12px;\n}\n.lum-w-copilot__ev .lum-badge {\n  color: var(--lum-info);\n  border-color: var(--lum-info-line);\n  background: var(--lum-info-soft);\n}\n.lum-w-copilot__caret {\n  display: inline-block;\n  width: 7px;\n  height: 14px;\n  background: var(--lum-accent);\n  margin-left: 2px;\n  vertical-align: text-bottom;\n  animation: lum-blink 1s steps(2) infinite;\n}\n@keyframes lum-blink {\n  50% {\n    opacity: 0;\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .lum-w-copilot__caret {\n    animation: none;\n  }\n}\n.lum-w-copilot__bar {\n  display: flex;\n  gap: 8px;\n  padding: 10px;\n  border-top: 1px solid var(--lum-border);\n  box-shadow: inset 0 1px 0 var(--lum-hairline);\n}\n.lum-w-copilot__bar .lum-pl-search {\n  flex: 1;\n}\n";