Variable ENTITY_GRAPH_DEVTOOLS_STYLESConst
ENTITY_GRAPH_DEVTOOLS_STYLES: "\n:host {\n all: initial;\n color-scheme: dark;\n position: fixed;\n z-index: 2147483000;\n inset: 0;\n box-sizing: border-box;\n font-family: var(--pem-devtools-font-body, ui-sans-serif, system-ui, sans-serif);\n color: var(--pem-devtools-color-text, #e8e6df);\n pointer-events: none;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\nbutton, input, select, textarea { font: inherit; }\nbutton { color: inherit; touch-action: manipulation; }\nh1, h2, h3, p, dl, dd, ol, ul { margin: 0; }\nol, ul { padding: 0; list-style: none; }\ncode, pre, .pem-mono {\n font-family: var(--pem-devtools-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);\n}\nbutton:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,\n[tabindex=\"0\"]:focus-visible, [tabindex=\"-1\"]:focus-visible {\n outline: 2px solid var(--pem-devtools-color-focus, #6ed8c9);\n outline-offset: 2px;\n}\n\n.pem-devtools-surface {\n --pem-line: #344047;\n --pem-muted: #92a0a6;\n --pem-accent: #63c7a8;\n position: fixed;\n inset: 0;\n pointer-events: none;\n color: var(--pem-devtools-color-text, #e8e6df);\n font: 13px/1.4 var(--pem-devtools-font-body, ui-sans-serif, system-ui, sans-serif);\n font-variant-numeric: tabular-nums;\n}\n.pem-launcher-slot {\n position: fixed;\n display: flex;\n align-items: center;\n gap: 5px;\n pointer-events: auto;\n}\n.pem-launcher-slot[data-position=\"top-left\"] { top: max(14px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); }\n.pem-launcher-slot[data-position=\"top-right\"] { top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); }\n.pem-launcher-slot[data-position=\"bottom-left\"] { bottom: max(14px, env(safe-area-inset-bottom)); left: max(14px, env(safe-area-inset-left)); }\n.pem-launcher-slot[data-position=\"bottom-right\"] { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); }\n.pem-launcher, .pem-launcher-settings, .pem-panel-toolbar button {\n border: 1px solid #3c494f;\n background: #111719;\n color: #e8e6df;\n box-shadow: 0 12px 36px rgb(0 0 0 / 36%);\n cursor: pointer;\n}\n.pem-launcher {\n display: flex;\n min-width: 52px;\n min-height: 52px;\n align-items: center;\n justify-content: center;\n gap: 8px;\n border-color: #478e82;\n border-radius: 999px;\n padding: 7px 14px 7px 7px;\n background: #142320;\n color: #c6f4ec;\n font-weight: 720;\n}\n.pem-launcher:hover { border-color: #79d7c9; background: #19302b; }\n.pem-launcher-mark {\n display: grid;\n width: 36px;\n height: 36px;\n place-items: center;\n border: 1px solid #79d7c9;\n border-radius: 50%;\n color: #79d7c9;\n font: 800 13px/1 var(--pem-devtools-font-mono, ui-monospace, monospace);\n}\n.pem-launcher-badge {\n display: grid;\n min-width: 20px;\n min-height: 20px;\n place-items: center;\n border-radius: 10px;\n padding: 0 5px;\n background: #e85d32;\n color: #fff8f2;\n font: 800 10px/1 var(--pem-devtools-font-mono, ui-monospace, monospace);\n}\n.pem-launcher-settings {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n}\n.pem-launcher-slot[data-form=\"edge-tab\"] .pem-launcher {\n min-width: 38px;\n min-height: 48px;\n border-radius: 5px;\n padding: 5px;\n}\n.pem-launcher-slot[data-form=\"edge-tab\"] .pem-launcher-label { display: none; }\n.pem-launcher-slot[data-form=\"edge-tab\"] .pem-launcher-mark { width: 28px; height: 34px; border: 0; }\n.pem-launcher-slot[data-form=\"edge-tab\"][data-position$=\"left\"] { left: 0; }\n.pem-launcher-slot[data-form=\"edge-tab\"][data-position$=\"right\"] { right: 0; }\n.pem-launcher-slot[data-position^=\"bottom\"] .pem-settings { top: auto; bottom: calc(100% + 7px); }\n\n.pem-panel-frame {\n position: fixed;\n display: grid;\n grid-template-rows: auto minmax(0, 1fr);\n overflow: visible;\n border: 1px solid #303a40;\n border-radius: 9px;\n background: #101416;\n box-shadow: 0 28px 80px rgb(0 0 0 / 52%);\n pointer-events: auto;\n}\n.pem-panel-frame[data-layout=\"floating\"] {\n top: max(20px, env(safe-area-inset-top));\n left: 50%;\n width: min(1180px, calc(100vw - 40px));\n height: min(780px, calc(100vh - 40px));\n transform: translateX(-50%);\n}\n.pem-panel-frame[data-layout=\"dock-right\"] {\n inset: 0 0 0 auto;\n width: min(720px, 52vw);\n border-radius: 0;\n}\n.pem-panel-frame[data-layout=\"dock-bottom\"] {\n inset: auto 0 0;\n width: 100vw;\n height: min(680px, 72vh);\n border-radius: 9px 9px 0 0;\n}\n.pem-panel-toolbar {\n position: relative;\n z-index: 4;\n display: flex;\n min-height: 38px;\n align-items: center;\n justify-content: space-between;\n border-bottom: 1px solid #303a40;\n padding: 4px 7px 4px 12px;\n background: #0d1113;\n color: #92a0a6;\n font-size: 11px;\n font-weight: 700;\n letter-spacing: .04em;\n text-transform: uppercase;\n}\n.pem-panel-toolbar > div { display: flex; gap: 5px; }\n.pem-panel-toolbar button {\n width: 30px;\n height: 30px;\n border-radius: 4px;\n box-shadow: none;\n}\n.pem-panel-content { min-width: 0; min-height: 0; overflow: hidden; }\n.pem-settings {\n position: absolute;\n z-index: 7;\n top: calc(100% + 7px);\n right: 0;\n display: grid;\n width: min(310px, calc(100vw - 28px));\n gap: 12px;\n border: 1px solid #3c494f;\n border-radius: 7px;\n padding: 13px;\n background: #151a1d;\n box-shadow: 0 18px 52px rgb(0 0 0 / 50%);\n color: #e8e6df;\n text-transform: none;\n}\n.pem-panel-frame > .pem-settings { top: 42px; right: 7px; }\n.pem-launcher-slot[data-position$=\"left\"] .pem-settings { right: auto; left: 0; }\n.pem-settings header { display: flex; align-items: center; justify-content: space-between; }\n.pem-settings header button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 18px; }\n.pem-settings label { display: grid; gap: 5px; color: #92a0a6; font-size: 10px; }\n.pem-settings select {\n width: 100%;\n min-height: 36px;\n border: 1px solid #303a40;\n border-radius: 4px;\n padding: 6px 8px;\n background: #0d1113;\n color: #e8e6df;\n}\n.pem-settings fieldset { display: flex; gap: 5px; margin: 0; border: 0; padding: 0; }\n.pem-settings legend { margin-bottom: 5px; color: #92a0a6; font-size: 10px; }\n.pem-settings fieldset button, .pem-settings-hide button {\n min-height: 34px;\n border: 1px solid #303a40;\n border-radius: 4px;\n padding: 5px 8px;\n background: #171e21;\n color: #d9dfdc;\n cursor: pointer;\n font-size: 10px;\n text-transform: capitalize;\n}\n.pem-settings fieldset button[aria-pressed=\"true\"] { border-color: #478e82; background: #1c3b36; color: #a7eee2; }\n.pem-settings p { color: #92a0a6; font-size: 10px; }\n.pem-settings kbd { border: 1px solid #303a40; border-radius: 3px; padding: 2px 4px; background: #0d1113; color: #d7e4e1; }\n.pem-settings-hide { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; border-top: 1px solid #303a40; padding-top: 11px; }\n\n.pem-inspector {\n --pem-panel: #1b2227;\n --pem-line: #344047;\n --pem-muted: #92a0a6;\n --pem-accent: #63c7a8;\n --pem-attention: #e85d32;\n display: grid;\n grid-template-rows: auto auto auto minmax(0, 1fr) auto;\n width: 100%;\n height: 100%;\n overflow: hidden;\n border: 0;\n border-radius: 0;\n background: var(--pem-devtools-color-shell, #101416);\n box-shadow: none;\n color: var(--pem-devtools-color-text, #e8e6df);\n font-size: 13px;\n line-height: 1.4;\n}\n\n.pem-shell-header {\n display: flex;\n min-height: 58px;\n align-items: center;\n justify-content: space-between;\n gap: 24px;\n padding: 10px 16px;\n border-bottom: 1px solid var(--pem-line);\n background: #121719;\n}\n.pem-brand, .pem-shell-status, .pem-status-cluster, .pem-row-signals {\n display: flex;\n align-items: center;\n}\n.pem-brand { gap: 10px; }\n.pem-brand strong { display: block; font-size: 13px; letter-spacing: .02em; }\n.pem-brand small, .pem-shell-status small { color: var(--pem-muted); }\n.pem-mark {\n display: grid;\n width: 30px;\n height: 30px;\n place-items: center;\n border: 1px solid #8be5d8;\n border-radius: 5px;\n color: var(--pem-accent);\n font: 700 14px/1 var(--pem-devtools-font-mono, ui-monospace, monospace);\n}\n.pem-shell-status { flex-wrap: wrap; justify-content: flex-end; gap: 7px; }\n.pem-shell-status > span, .pem-status-cluster > span, .pem-live-status, .pem-registered-status {\n border: 1px solid var(--pem-line);\n border-radius: 999px;\n padding: 3px 8px;\n background: #171d20;\n color: #b9c4c8;\n font-size: 11px;\n white-space: nowrap;\n}\n[data-tone=\"attention\"] { color: var(--pem-attention) !important; }\n\n.pem-workspace-tabs {\n display: flex;\n min-height: 39px;\n align-items: end;\n gap: 4px;\n padding: 0 12px;\n border-bottom: 1px solid var(--pem-line);\n background: #111618;\n}\n.pem-workspace-tabs button, .pem-value-tabs button, .pem-filter-row button, .pem-pause {\n border: 0;\n background: transparent;\n cursor: pointer;\n}\n.pem-workspace-tabs button {\n display: inline-flex;\n min-height: 38px;\n align-items: center;\n gap: 5px;\n padding: 0 12px;\n border-bottom: 2px solid transparent;\n color: var(--pem-muted);\n font-weight: 650;\n}\n.pem-workspace-tabs button:hover,\n.pem-value-tabs button:hover,\n.pem-filter-row button:hover,\n.pem-pause:hover,\n.pem-panel-toolbar button:hover,\n.pem-settings button:hover,\n.pem-detail-actions button:hover,\n.pem-preview-actions button:hover,\n.pem-time-travel-controls button:hover,\n.pem-pulse-toggle:hover,\n.pem-pulse-segments button:hover {\n border-color: #5f756f;\n background: #202a2d;\n color: #f5f2e9;\n}\n.pem-workspace-tabs small {\n color: #829096;\n font: 700 10px/1 var(--pem-devtools-font-mono, ui-monospace, monospace);\n}\n.pem-workspace-tabs button[aria-selected=\"true\"] {\n border-color: var(--pem-accent);\n color: #f5f2e9;\n}\n\n.pem-command-feedback {\n display: flex;\n min-height: 0;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n overflow: hidden;\n border-bottom: 0 solid var(--pem-line);\n padding: 0 14px;\n background: #151b1e;\n color: var(--pem-muted);\n font-size: 11px;\n}\n.pem-command-feedback[data-state=\"success\"], .pem-command-feedback[data-state=\"error\"] {\n min-height: 34px;\n border-bottom-width: 1px;\n}\n.pem-command-feedback[data-state=\"success\"] { color: var(--pem-accent); }\n.pem-command-feedback[data-state=\"error\"] { color: #ffc68b; background: #271e18; }\n.pem-command-feedback button {\n border: 0;\n padding: 3px 7px;\n background: transparent;\n color: inherit;\n cursor: pointer;\n}\n\n.pem-shell-main, .pem-workspace, .pem-navigator, .pem-entity-detail,\n.pem-view-detail, .pem-activity-detail { min-width: 0; min-height: 0; }\n.pem-shell-main { overflow: hidden; }\n.pem-workspace { height: 100%; overflow: auto; }\n.pem-workspace-heading, .pem-detail-header, .pem-card-heading, .pem-navigator-heading,\n.pem-activity-heading {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n}\n.pem-workspace-heading h2, .pem-detail-header h2, .pem-navigator-heading h2 {\n font-size: 18px;\n line-height: 1.2;\n}\n.pem-eyebrow {\n margin-bottom: 4px;\n color: var(--pem-accent);\n font-size: 10px;\n font-weight: 750;\n letter-spacing: .12em;\n text-transform: uppercase;\n}\n\n.pem-overview-actions, .pem-detail-actions, .pem-preview-actions {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n justify-content: flex-end;\n gap: 7px;\n}\n.pem-store-select {\n display: flex;\n align-items: center;\n gap: 6px;\n color: var(--pem-muted);\n font-size: 10px;\n}\n.pem-store-select select {\n max-width: 240px;\n border: 1px solid var(--pem-line);\n border-radius: 4px;\n padding: 5px 7px;\n background: #0d1113;\n color: #e8e6df;\n}\n.pem-policy-status {\n border: 1px solid var(--pem-line);\n border-radius: 4px;\n padding: 4px 6px;\n color: var(--pem-muted);\n font: 9px var(--pem-devtools-font-mono, ui-monospace, monospace);\n}\n.pem-primary-action, .pem-secondary-action, .pem-detail-actions button,\n.pem-time-travel-controls button {\n min-height: 29px;\n border: 1px solid #3c494f;\n border-radius: 4px;\n padding: 5px 9px;\n background: #171e21;\n color: #d9dfdc;\n cursor: pointer;\n font-size: 11px;\n}\n.pem-primary-action { border-color: #478e82; background: #1c3b36; color: #a7eee2; }\n.pem-primary-action:disabled, .pem-secondary-action:disabled, .pem-detail-actions button:disabled,\n.pem-time-travel-controls button:disabled {\n cursor: not-allowed;\n opacity: .48;\n}\n\n.pem-overview { padding: 20px; }\n.pem-metric-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: 10px;\n margin-top: 16px;\n}\n.pem-metric, .pem-card, .pem-detail-section {\n border: 1px solid var(--pem-line);\n border-radius: 6px;\n background: var(--pem-panel);\n}\n.pem-metric { min-height: 82px; padding: 13px; }\n.pem-metric span { display: block; margin-bottom: 6px; color: var(--pem-muted); font-size: 11px; }\n.pem-metric strong { font-size: 24px; line-height: 1; }\n.pem-overview-grid {\n display: grid;\n grid-template-columns: minmax(240px, .7fr) minmax(420px, 1.3fr);\n gap: 12px;\n margin-top: 12px;\n}\n.pem-card, .pem-detail-section { padding: 14px; }\n.pem-card-heading { margin-bottom: 10px; }\n.pem-card-heading h3 { font-size: 12px; }\n.pem-card-heading > span {\n color: var(--pem-muted);\n font: 11px var(--pem-devtools-font-mono, ui-monospace, monospace);\n}\n.pem-readout-list { display: grid; gap: 8px; }\n.pem-readout-list div {\n display: flex;\n justify-content: space-between;\n gap: 12px;\n border-bottom: 1px solid #252e32;\n padding-bottom: 7px;\n}\n.pem-readout-list div:last-child { border: 0; padding-bottom: 0; }\n.pem-readout-list dt, .pem-readout-list dd, .pem-empty { color: var(--pem-muted); }\n.pem-trace-list { display: grid; gap: 5px; }\n.pem-trace-list li {\n border-top: 1px solid #252e32;\n padding: 8px 0 3px;\n}\n.pem-trace-list button {\n display: grid;\n grid-template-columns: 78px minmax(0, 1fr) auto;\n width: 100%;\n align-items: baseline;\n gap: 10px;\n border: 0;\n padding: 0;\n background: var(--pem-panel);\n color: inherit;\n cursor: pointer;\n text-align: left;\n}\n.pem-trace-type {\n color: var(--pem-accent);\n font: 10px var(--pem-devtools-font-mono, ui-monospace, monospace);\n text-transform: uppercase;\n}\n.pem-trace-copy { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.pem-trace-list time, .pem-compact-list time {\n color: var(--pem-muted);\n font: 10px var(--pem-devtools-font-mono, ui-monospace, monospace);\n}\n\n.pem-entity-workspace, .pem-view-workspace, .pem-activity-workspace {\n display: grid;\n grid-template-columns: 286px minmax(0, 1fr);\n overflow: hidden;\n}\n.pem-entity-workspace {\n grid-template-columns: 286px minmax(0, 1fr) 240px;\n}\n.pem-entity-workspace[data-navigator-collapsed=\"true\"] {\n grid-template-columns: 38px minmax(0, 1fr) 240px;\n}\n.pem-entity-workspace[data-causal-rail-collapsed=\"true\"] {\n grid-template-columns: 286px minmax(0, 1fr) 38px;\n}\n.pem-entity-workspace[data-navigator-collapsed=\"true\"][data-causal-rail-collapsed=\"true\"] {\n grid-template-columns: 38px minmax(0, 1fr) 38px;\n}\n.pem-navigator {\n display: flex;\n flex-direction: column;\n gap: 10px;\n overflow: hidden;\n padding: 14px 10px 10px;\n border-right: 1px solid var(--pem-line);\n background: #121719;\n}\n.pem-navigator[data-collapsed=\"true\"] { padding: 8px 4px; }\n.pem-rail-collapse, .pem-rail-restore {\n display: inline-grid;\n min-width: 28px;\n min-height: 28px;\n place-items: center;\n border: 1px solid var(--pem-line);\n border-radius: 4px;\n background: #151b1e;\n color: var(--pem-muted);\n cursor: pointer;\n}\n.pem-rail-restore { width: 28px; margin: 0 auto; }\n.pem-coverage-note {\n border-left: 2px solid var(--pem-line);\n padding: 3px 7px;\n color: var(--pem-muted);\n font-size: 10px;\n}\n.pem-search input, .pem-select-label select {\n width: 100%;\n border: 1px solid var(--pem-line);\n border-radius: 5px;\n padding: 8px 9px;\n background: #0d1113;\n color: #e8e6df;\n}\n.pem-filter-row { display: flex; gap: 5px; }\n.pem-filter-row button, .pem-pause {\n border: 1px solid var(--pem-line);\n border-radius: 999px;\n padding: 4px 8px;\n color: var(--pem-muted);\n font-size: 11px;\n text-transform: capitalize;\n}\n.pem-filter-row button[aria-pressed=\"true\"], .pem-pause[aria-pressed=\"true\"] {\n border-color: #4a887f;\n background: #17302e;\n color: var(--pem-accent);\n}\n.pem-scroll-list { min-height: 0; flex: 1; overflow: auto; scrollbar-color: #445158 transparent; }\n.pem-virtual-space, .pem-virtual-row { position: relative; width: 100%; }\n.pem-virtual-row { position: absolute; inset: 0 0 auto; }\n.pem-entity-row, .pem-view-row, .pem-event-row, .pem-membership-row,\n.pem-compact-list button {\n width: 100%;\n border: 0;\n border-radius: 4px;\n background: #0f1315;\n text-align: left;\n cursor: pointer;\n}\n.pem-entity-row, .pem-view-row, .pem-event-row {\n display: flex;\n min-height: 38px;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n padding: 5px 7px;\n}\n.pem-entity-row:hover, .pem-view-row:hover, .pem-event-row:hover,\n.pem-membership-row:hover, .pem-compact-list button:hover { background: #20282c; }\n.pem-entity-row[data-selected=\"true\"], .pem-view-row[data-selected=\"true\"],\n.pem-event-row[data-selected=\"true\"] {\n background: #20322f;\n box-shadow: inset 2px 0 var(--pem-accent);\n}\n.pem-entity-row[data-causal=\"true\"], .pem-view-row[data-causal=\"true\"],\n.pem-membership-row[data-causal=\"true\"], .pem-compact-list li[data-causal=\"true\"] {\n box-shadow: inset 2px 0 var(--pem-accent);\n background: #1a2c28;\n}\n.pem-entity-copy, .pem-event-copy { display: grid; min-width: 0; }\n.pem-entity-copy strong, .pem-event-copy strong {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 11px;\n}\n.pem-entity-copy code, .pem-event-copy small, .pem-view-row code {\n overflow: hidden;\n color: var(--pem-muted);\n font-size: 10px;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.pem-row-signals, .pem-status-cluster {\n flex-wrap: wrap;\n justify-content: flex-end;\n gap: 5px;\n color: var(--pem-attention);\n font-size: 10px;\n}\n.pem-entity-detail, .pem-view-detail, .pem-activity-detail { overflow: auto; padding: 18px; }\n.pem-entity-detail article > section, .pem-view-detail article > section,\n.pem-activity-detail article > section { content-visibility: auto; contain-intrinsic-size: 120px; }\n.pem-entity-confirmation { margin: -5px 0 12px; font-size: 10px; }\n.pem-detail-header { margin-bottom: 14px; }\n.pem-detail-tools { display: grid; justify-items: end; gap: 8px; }\n.pem-detail-header h2 code { color: var(--pem-muted); font-size: .75em; font-weight: 500; }\n.pem-error, .pem-expired {\n display: grid;\n gap: 3px;\n margin-bottom: 12px;\n border: 1px solid #7f5233;\n border-radius: 5px;\n padding: 9px 11px;\n background: #2b2019;\n color: #ffd4a0;\n}\n\n.pem-value-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--pem-line); }\n.pem-value-tabs button {\n padding: 7px 10px;\n border-bottom: 2px solid transparent;\n color: var(--pem-muted);\n text-transform: capitalize;\n}\n.pem-value-tabs button[aria-selected=\"true\"] { border-color: var(--pem-accent); color: #f5f2e9; }\n.pem-value-panel {\n min-height: 160px;\n max-height: 300px;\n overflow: auto;\n border: 1px solid var(--pem-line);\n border-top: 0;\n border-radius: 0 0 5px 5px;\n background: #0e1214;\n}\n.pem-value {\n overflow: auto;\n margin: 0;\n padding: 12px;\n color: #d7e4e1;\n font-size: 11px;\n line-height: 1.55;\n white-space: pre-wrap;\n word-break: break-word;\n}\n.pem-preview-panel {\n margin-top: 12px;\n border: 1px solid var(--pem-line);\n border-radius: 6px;\n padding: 13px;\n background: #13191b;\n}\n.pem-preview-editor { display: grid; gap: 5px; color: var(--pem-muted); font-size: 10px; }\n.pem-preview-editor textarea {\n min-height: 84px;\n resize: vertical;\n border: 1px solid var(--pem-line);\n border-radius: 4px;\n padding: 9px;\n background: #0d1113;\n color: #d7e4e1;\n font: 11px/1.5 var(--pem-devtools-font-mono, ui-monospace, monospace);\n}\n.pem-inline-error { margin-top: 7px; color: #ffc68b; font-size: 11px; }\n.pem-preview-diff { margin-top: 10px; border: 1px solid #293337; border-radius: 4px; overflow: hidden; }\n.pem-preview-diff > p { padding: 7px 9px; background: #171e21; color: var(--pem-muted); font-size: 10px; }\n.pem-preview-actions { justify-content: flex-start; margin-top: 10px; }\n.pem-preview-receipt { margin-top: 8px; color: var(--pem-muted); font-size: 10px; }\n.pem-diff-table { display: grid; }\n.pem-diff-row {\n display: grid;\n grid-template-columns: minmax(90px, .65fr) repeat(2, minmax(120px, 1fr));\n border-top: 1px solid #252e32;\n}\n.pem-diff-row:first-child { border-top: 0; }\n.pem-diff-row > span {\n min-width: 0;\n padding: 7px 9px;\n overflow-wrap: anywhere;\n font: 10px/1.4 var(--pem-devtools-font-mono, ui-monospace, monospace);\n}\n.pem-diff-head { color: var(--pem-muted); background: #161c1f; font-weight: 700; }\n.pem-diff-row[data-kind=\"changed\"] > span:first-child,\n.pem-diff-row[data-kind=\"added\"] > span:first-child,\n.pem-diff-row[data-kind=\"removed\"] > span:first-child { color: var(--pem-attention); }\n\n.pem-detail-grid {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: 10px;\n margin-top: 12px;\n}\n.pem-causal-rail {\n min-width: 0;\n overflow: auto;\n border-left: 1px solid var(--pem-line);\n padding: 14px 10px;\n background: #121719;\n}\n.pem-causal-rail[data-collapsed=\"true\"] { overflow: hidden; padding: 8px 4px; }\n.pem-causal-heading { display: flex; align-items: start; justify-content: space-between; gap: 8px; }\n.pem-causal-heading h2 { font-size: 15px; }\n.pem-causal-path { display: grid; gap: 0; margin-top: 14px; }\n.pem-causal-path li {\n position: relative;\n display: grid;\n gap: 5px;\n border-left: 1px solid var(--pem-line);\n padding: 0 0 14px 12px;\n}\n.pem-causal-path li::before {\n position: absolute;\n top: 2px;\n left: -4px;\n width: 7px;\n height: 7px;\n border: 1px solid var(--pem-accent);\n border-radius: 50%;\n background: #121719;\n content: \"\";\n}\n.pem-causal-path li > span { color: var(--pem-accent); font-size: 9px; font-weight: 800; text-transform: uppercase; }\n.pem-causal-path button, .pem-causal-path code {\n display: grid;\n width: 100%;\n border: 0;\n padding: 3px 0;\n background: transparent;\n color: #dce4df;\n text-align: left;\n overflow-wrap: anywhere;\n font-size: 10px;\n}\n.pem-causal-path button { cursor: pointer; }\n.pem-causal-path small { color: var(--pem-muted); font-size: 9px; }\n.pem-compact-list { display: grid; gap: 3px; }\n.pem-compact-list button, .pem-membership-row { display: grid; gap: 3px; padding: 6px; }\n.pem-compact-list code, .pem-compact-list small, .pem-membership-row code {\n color: var(--pem-muted);\n font-size: 9px;\n}\n.pem-view-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 12px; }\n.pem-readout { min-height: 70px; }\n.pem-list-health { margin-bottom: 12px; }\n.pem-membership-list {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 4px;\n}\n.pem-membership-row { border: 1px solid #293337; background: #121719; }\n.pem-membership-position { color: var(--pem-accent); font: 9px var(--pem-devtools-font-mono, ui-monospace, monospace); }\n.pem-last-change { margin-bottom: 12px; }\n.pem-last-change-readout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }\n.pem-last-change-readout code { grid-column: 1 / -1; color: var(--pem-muted); font-size: 9px; overflow-wrap: anywhere; }\n.pem-activity-heading { align-items: start; }\n.pem-select-label { display: grid; gap: 5px; color: var(--pem-muted); font-size: 10px; }\n.pem-event-row { min-height: 50px; justify-content: start; }\n.pem-correlation { color: var(--pem-muted); font-size: 9px; }\n.pem-event-sequence {\n flex: 0 0 42px;\n color: var(--pem-accent);\n font: 10px var(--pem-devtools-font-mono, ui-monospace, monospace);\n}\n.pem-time-travel {\n border: 1px solid #293337;\n border-radius: 5px;\n padding: 9px;\n background: #101517;\n}\n.pem-time-travel .pem-card-heading { margin-bottom: 7px; }\n.pem-time-travel-controls { display: grid; gap: 7px; }\n.pem-time-travel-controls p { color: var(--pem-muted); font-size: 10px; }\n.pem-event-readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 12px; }\n.pem-event-readouts div { border: 1px solid #293337; border-radius: 4px; padding: 8px; }\n.pem-change-list { display: grid; gap: 5px; }\n.pem-change-list li {\n display: grid;\n grid-template-columns: 70px minmax(120px, .8fr) minmax(0, 1fr);\n gap: 9px;\n border-top: 1px solid #252e32;\n padding: 7px 0;\n}\n.pem-retention-warning {\n margin-bottom: 10px;\n border-left: 2px solid var(--pem-attention);\n padding: 6px 8px;\n background: #281a17;\n color: #f2b19d;\n font-size: 10px;\n}\n.pem-impact-readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 10px; }\n.pem-impact-identities { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0; }\n.pem-impact-identities strong { color: var(--pem-muted); font-size: 10px; }\n.pem-impact-identities code { border: 1px solid var(--pem-line); border-radius: 3px; padding: 2px 5px; font-size: 9px; }\n\n.pem-graph-pulse {\n display: grid;\n grid-template-columns: auto minmax(120px, 1fr) minmax(190px, .45fr);\n min-height: 54px;\n align-items: center;\n gap: 10px;\n border-top: 1px solid var(--pem-line);\n padding: 7px 10px;\n background: #0f1315;\n}\n.pem-graph-pulse[data-collapsed=\"true\"] { grid-template-columns: auto; min-height: 34px; }\n.pem-pulse-toggle {\n min-height: 30px;\n border: 1px solid var(--pem-line);\n border-radius: 4px;\n padding: 4px 8px;\n background: #171d20;\n color: var(--pem-accent);\n cursor: pointer;\n font-weight: 750;\n}\n.pem-pulse-segments { display: flex; min-width: 0; align-items: stretch; gap: 2px; overflow-x: auto; }\n.pem-pulse-segments li { flex: 1 0 20px; max-width: 48px; }\n.pem-pulse-segments button {\n display: grid;\n width: 100%;\n min-height: 32px;\n place-items: center;\n border: 0;\n border-bottom: 2px solid #526069;\n background: #0f1315;\n color: var(--pem-muted);\n cursor: pointer;\n animation: pem-pulse-arrival 150ms ease-out both;\n}\n.pem-pulse-segments button[data-event-type=\"mutation\"] { border-color: var(--pem-accent); }\n.pem-pulse-segments button[data-selected=\"true\"] { background: #1a2c28; color: #eef8f3; }\n.pem-pulse-segments button > span { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }\n.pem-pulse-segments small { font-size: 8px; }\n.pem-pulse-empty { color: var(--pem-muted); font-size: 10px; }\n.pem-pulse-readout { display: grid; min-width: 0; }\n.pem-pulse-readout strong, .pem-pulse-readout span, .pem-pulse-readout code {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.pem-pulse-readout span, .pem-pulse-readout code { color: var(--pem-muted); font-size: 9px; }\n@keyframes pem-pulse-arrival {\n from { opacity: 0; transform: translateY(4px); }\n to { opacity: 1; transform: translateY(0); }\n}\n.pem-empty { padding: 10px 2px; font-size: 11px; }\n.pem-empty-large { display: grid; min-height: 240px; place-items: center; text-align: center; }\n.pem-sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n.pem-devtools-loading {\n min-width: 224px;\n border: 1px solid var(--pem-devtools-color-border, #344047);\n border-radius: var(--pem-devtools-radius-panel, 6px);\n padding: 12px 16px;\n background: var(--pem-devtools-color-shell, #111416);\n color: var(--pem-devtools-color-text, #e8e6df);\n box-shadow: 0 16px 48px rgb(0 0 0 / 36%);\n font-size: 13px;\n line-height: 1.4;\n}\n\n.pem-mobile-back { display: none; }\n\n@media (max-width: 719px) {\n .pem-panel-frame,\n .pem-panel-frame[data-layout=\"floating\"],\n .pem-panel-frame[data-layout=\"dock-right\"],\n .pem-panel-frame[data-layout=\"dock-bottom\"] {\n inset: 0;\n width: 100vw;\n height: 100dvh;\n transform: none;\n border: 0;\n border-radius: 0;\n padding-top: env(safe-area-inset-top);\n padding-right: env(safe-area-inset-right);\n padding-bottom: env(safe-area-inset-bottom);\n padding-left: env(safe-area-inset-left);\n }\n .pem-panel-toolbar { min-height: 44px; }\n .pem-panel-toolbar button, .pem-workspace-tabs button, .pem-mobile-back,\n .pem-primary-action, .pem-secondary-action, .pem-detail-actions button,\n .pem-time-travel-controls button, .pem-settings button, .pem-settings select {\n min-width: 44px;\n min-height: 44px;\n }\n .pem-inspector { font-size: 12px; }\n .pem-shell-header {\n align-items: flex-start;\n flex-direction: column;\n gap: 8px;\n padding: 10px 12px;\n }\n .pem-shell-status { justify-content: flex-start; }\n .pem-workspace-tabs {\n overflow-x: auto;\n overscroll-behavior-x: contain;\n scrollbar-width: thin;\n }\n .pem-workspace-tabs button { flex: 0 0 auto; }\n .pem-shell-main, .pem-workspace, .pem-navigator, .pem-entity-detail,\n .pem-view-detail, .pem-activity-detail, .pem-scroll-list, .pem-value-panel {\n overscroll-behavior: contain;\n }\n .pem-overview { padding: 12px; }\n .pem-workspace-heading { align-items: flex-start; flex-direction: column; }\n .pem-overview-actions { width: 100%; justify-content: flex-start; }\n .pem-store-select { width: 100%; }\n .pem-store-select select { min-height: 44px; max-width: none; flex: 1; }\n .pem-metric-grid, .pem-view-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n .pem-overview-grid, .pem-detail-grid { grid-template-columns: 1fr; }\n .pem-entity-workspace, .pem-view-workspace, .pem-activity-workspace {\n display: block;\n overflow: hidden;\n }\n .pem-causal-rail { display: none; }\n .pem-graph-pulse { grid-template-columns: auto minmax(180px, 1fr); }\n .pem-pulse-readout { display: none; }\n .pem-navigator, .pem-entity-detail, .pem-view-detail, .pem-activity-detail { height: 100%; }\n .pem-workspace[data-narrow-detail=\"false\"] > .pem-entity-detail,\n .pem-workspace[data-narrow-detail=\"false\"] > .pem-view-detail,\n .pem-workspace[data-narrow-detail=\"false\"] > .pem-activity-detail { display: none; }\n .pem-workspace[data-narrow-detail=\"true\"] > .pem-navigator { display: none; }\n .pem-navigator { border-right: 0; padding: 12px; }\n .pem-entity-detail, .pem-view-detail, .pem-activity-detail { padding: 12px; }\n .pem-mobile-back {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 1px solid #3c494f;\n border-radius: 4px;\n margin-bottom: 10px;\n padding: 6px 10px;\n background: #171e21;\n color: #d9dfdc;\n cursor: pointer;\n }\n .pem-detail-header { align-items: flex-start; flex-direction: column; }\n .pem-detail-tools { width: 100%; justify-items: start; }\n .pem-detail-actions { justify-content: flex-start; }\n .pem-value-tabs { overflow-x: auto; }\n .pem-value-tabs button { flex: 0 0 auto; min-height: 44px; }\n .pem-value-panel { max-height: 42vh; }\n .pem-preview-panel { padding: 10px; }\n .pem-preview-editor textarea { min-height: 120px; }\n .pem-preview-diff { overflow-x: auto; }\n .pem-diff-table { min-width: 520px; }\n .pem-membership-list { grid-template-columns: 1fr; }\n .pem-event-readouts { grid-template-columns: 1fr; }\n .pem-change-list li { grid-template-columns: 62px minmax(0, 1fr); }\n .pem-change-list li small { grid-column: 2; }\n .pem-settings { position: fixed; top: calc(52px + env(safe-area-inset-top)); right: 14px; left: 14px; width: auto; }\n .pem-settings fieldset, .pem-settings-hide { grid-template-columns: 1fr; flex-direction: column; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n scroll-behavior: auto !important;\n }\n}\n"
Isolated Shadow DOM contract for the shared forensic inspector workspace.