@tea-agent/loop-agent 0.13.0-beta.0 → 0.13.0

package/dist/worker/observe/static/styles.css

@@ -1,1902 +1,1902 @@
-:root {
-	--canvas: #f7f7f4;
-	--canvas-soft: #fafaf7;
-	--surface: #ffffff;
-	--surface-muted: #f0efe9;
-	--surface-ink: #26251e;
-	--ink: #26251e;
-	--body: #5a5852;
-	--muted: #807d72;
-	--muted-soft: #a09c92;
-	--hairline: #e6e5e0;
-	--hairline-strong: #cfcdc4;
-	--orange: #f54e00;
-	--orange-active: #d04200;
-	--blue: #3f6ea4;
-	--green: #1f8a65;
-	--amber: #a66a00;
-	--red: #c72d53;
-	--lavender: #e4daf1;
-	--mint: #d8ead5;
-	--peach: #f1d8cb;
-	--gold: #d8b166;
-	--space-1: 4px;
-	--space-2: 8px;
-	--space-3: 12px;
-	--space-4: 16px;
-	--space-5: 20px;
-	--space-6: 24px;
-	--space-8: 32px;
-	--space-10: 40px;
-	--space-12: 48px;
-	--radius-sm: 4px;
-	--radius-md: 6px;
-	--radius-lg: 8px;
-	--transition-fast: 160ms ease;
-	--transition-base: 240ms ease;
-}
-
-* {
-	box-sizing: border-box;
-}
-
-html {
-	background: var(--canvas);
-	scroll-behavior: smooth;
-}
-
-body {
-	min-width: 320px;
-	margin: 0;
-	background: var(--canvas);
-	color: var(--ink);
-	font-family:
-		system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-	font-size: 14px;
-	line-height: 1.5;
-}
-
-button,
-input,
-select,
-textarea {
-	font: inherit;
-}
-
-a {
-	color: inherit;
-}
-
-code,
-pre,
-.output-block,
-.rank-node-id,
-.dag-node-label,
-.dag-node-meta,
-.dag-node-status,
-td:first-child,
-.meta-item dd,
-.header-refresh,
-.kpi-value,
-.risk-total,
-.process-timeline-time {
-	font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
-}
-
-.skip-link {
-	position: fixed;
-	top: -64px;
-	left: var(--space-4);
-	z-index: 100;
-	padding: 9px 12px;
-	background: var(--orange);
-	color: #fff;
-	font-weight: 700;
-	text-decoration: none;
-	transition: top var(--transition-fast);
-}
-
-.skip-link:focus {
-	top: var(--space-3);
-}
-
-#app {
-	width: min(100% - 48px, 1680px);
-	margin: 0 auto;
-	padding-bottom: 56px;
-}
-
-.site-header {
-	position: sticky;
-	top: 0;
-	z-index: 30;
-	display: grid;
-	grid-template-columns: auto auto 1fr;
-	grid-template-areas: "brand nav status" "crumb crumb crumb";
-	column-gap: var(--space-6);
-	align-items: center;
-	min-height: 76px;
-	margin-bottom: var(--space-8);
-	padding: 14px 0 12px;
-	background: color-mix(in srgb, var(--canvas) 94%, transparent);
-	border-bottom: 1px solid var(--hairline);
-	backdrop-filter: blur(10px);
-}
-
-.logo {
-	grid-area: brand;
-	display: inline-flex;
-	align-items: center;
-	gap: 9px;
-	color: var(--ink);
-	font-size: 16px;
-	font-weight: 650;
-	letter-spacing: 0;
-	text-decoration: none;
-}
-
-.logo > i {
-	color: var(--orange);
-	font-size: 20px;
-	font-weight: 400;
-}
-.logo:hover {
-	color: var(--orange-active);
-}
-
-.top-nav {
-	grid-area: nav;
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-}
-
-.nav-link {
-	display: inline-flex;
-	align-items: center;
-	gap: 7px;
-	min-height: 36px;
-	padding: 0 10px;
-	border: 1px solid transparent;
-	border-radius: var(--radius-sm);
-	color: var(--body);
-	font-size: 13px;
-	font-weight: 600;
-	text-decoration: none;
-	transition:
-		border-color var(--transition-fast),
-		background-color var(--transition-fast),
-		color var(--transition-fast);
-}
-
-.nav-link > i {
-	font-size: 16px;
-	font-weight: 400;
-}
-.nav-link:hover,
-.nav-link:focus-visible {
-	border-color: var(--hairline-strong);
-	background: var(--surface);
-	color: var(--ink);
-	outline: none;
-}
-.nav-link-active {
-	border-color: var(--orange);
-	background: var(--surface);
-	color: var(--ink);
-}
-
-.header-meta {
-	grid-area: status;
-	display: inline-flex;
-	justify-self: end;
-	align-items: center;
-	gap: 7px;
-	color: var(--muted);
-	font-size: 12px;
-	font-variant-numeric: tabular-nums;
-}
-
-.header-meta > i {
-	color: var(--green);
-	font-size: 16px;
-}
-
-.breadcrumb {
-	grid-area: crumb;
-	display: flex;
-	min-height: 16px;
-	gap: 7px;
-	color: var(--muted);
-	font-size: 12px;
-}
-
-.breadcrumb[hidden] {
-	display: none;
-}
-
-.breadcrumb a {
-	color: var(--body);
-	text-decoration: none;
-}
-.breadcrumb a:hover,
-.breadcrumb a:focus-visible {
-	color: var(--orange);
-	text-decoration: underline;
-	outline: none;
-}
-
-.dashboard-main:focus {
-	outline: none;
-}
-.view {
-	min-width: 0;
-}
-.view[hidden] {
-	display: none !important;
-}
-.view:not(.view-dashboard) {
-	display: grid;
-	gap: var(--space-4);
-}
-
-.view-heading {
-	display: grid;
-	gap: 4px;
-	margin-bottom: var(--space-6);
-}
-
-.view-kicker {
-	margin: 0;
-	color: var(--orange);
-	font-size: 11px;
-	font-weight: 700;
-	letter-spacing: 0.08em;
-}
-
-.view h2 {
-	margin: 0;
-	color: var(--ink);
-	font-size: 28px;
-	font-weight: 500;
-	line-height: 1.16;
-	letter-spacing: 0;
-}
-
-.view-heading > p:last-child {
-	max-width: 66ch;
-	margin: 0;
-	color: var(--body);
-}
-
-.panel {
-	min-width: 0;
-	background: var(--surface);
-	border: 1px solid var(--hairline);
-	border-radius: var(--radius-lg);
-	padding: var(--space-5);
-}
-
-.panel-primary {
-	border-color: var(--hairline-strong);
-}
-.panel-meta {
-	background: transparent;
-	border-color: var(--hairline-strong);
-}
-.panel-table {
-	overflow: hidden;
-	padding: 0;
-}
-.panel-output {
-	background: #fbfbf9;
-}
-
-.section-heading,
-.panel h3 {
-	margin: 0 0 var(--space-4);
-	color: var(--ink);
-	font-size: 14px;
-	font-weight: 700;
-}
-
-.empty,
-.risk-empty {
-	margin: 0;
-	color: var(--muted);
-}
-.empty-state {
-	padding: var(--space-8);
-	text-align: center;
-	color: var(--body);
-}
-
-.view-dashboard {
-	display: grid;
-	gap: var(--space-4);
-}
-
-.repo-banner {
-	display: flex;
-	align-items: center;
-	gap: var(--space-3);
-	padding: 10px 14px;
-	border: 1px solid var(--hairline-strong);
-	border-radius: var(--radius-lg);
-	background: var(--surface);
-}
-.repo-banner > i {
-	color: var(--muted);
-	font-size: 18px;
-}
-.repo-banner-text {
-	display: grid;
-	gap: 2px;
-	min-width: 0;
-}
-.repo-banner-name {
-	color: var(--ink);
-	font-size: 14px;
-	font-weight: 700;
-	overflow-wrap: anywhere;
-}
-.repo-banner-path {
-	color: var(--muted);
-	font-size: 11px;
-	overflow-wrap: anywhere;
-}
-
-.panel-kpi {
-	padding: 0;
-	background: transparent;
-	border: 0;
-}
-
-.kpi-group {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	display: grid;
-	gap: var(--space-3);
-}
-.kpi-group + .kpi-group {
-	margin-top: var(--space-3);
-}
-.kpi-group-legend {
-	padding: 0;
-	color: var(--muted);
-	font-size: 11px;
-	font-weight: 700;
-	letter-spacing: 0.04em;
-	text-transform: uppercase;
-}
-
-.kpi-grid {
-	display: grid;
-	grid-template-columns: repeat(6, minmax(0, 1fr));
-	overflow: visible;
-	border: 1px solid var(--hairline-strong);
-	border-radius: var(--radius-lg);
-	background: var(--surface);
-}
-
-.kpi-card {
-	position: relative;
-	min-width: 0;
-	min-height: 84px;
-	padding: 15px 18px 14px;
-	border-left: 1px solid var(--hairline);
-}
-
-.kpi-card:first-child {
-	border-left: 0;
-}
-.kpi-label {
-	margin-bottom: 9px;
-	color: var(--muted);
-	font-size: 11px;
-	font-weight: 650;
-}
-.kpi-value-row {
-	display: flex;
-	align-items: baseline;
-	gap: 6px;
-}
-.kpi-value {
-	color: var(--ink);
-	font-size: 26px;
-	font-weight: 500;
-	line-height: 1;
-	font-variant-numeric: tabular-nums;
-}
-
-.kpi-help {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	width: 16px;
-	height: 16px;
-	padding: 0;
-	border: 0;
-	border-radius: 50%;
-	background: transparent;
-	color: var(--muted-soft);
-	cursor: help;
-	font-size: 13px;
-	line-height: 1;
-}
-.kpi-help:hover,
-.kpi-help:focus-visible {
-	color: var(--ink);
-	background: var(--surface-muted);
-	outline: none;
-}
-.kpi-help:focus-visible {
-	box-shadow: 0 0 0 2px var(--hairline-strong);
-}
-.kpi-tip {
-	position: absolute;
-	left: 12px;
-	right: 12px;
-	top: calc(100% - 8px);
-	z-index: 10;
-	max-width: 280px;
-	padding: 8px 10px;
-	border: 1px solid var(--hairline-strong);
-	border-radius: var(--radius-md);
-	background: var(--surface-ink);
-	color: var(--canvas);
-	font-size: 11px;
-	font-weight: 400;
-	line-height: 1.5;
-	box-shadow: var(--shadow-panel);
-	opacity: 0;
-	visibility: hidden;
-	pointer-events: none;
-	transition: opacity var(--transition-fast);
-}
-.kpi-help:hover + .kpi-tip,
-.kpi-help:focus-visible + .kpi-tip {
-	opacity: 1;
-	visibility: visible;
-}
-
-.dashboard-workspace,
-.dashboard-secondary {
-	display: grid;
-	gap: var(--space-4);
-	align-items: stretch;
-}
-
-.dashboard-workspace {
-	grid-template-columns: 1fr;
-}
-.dashboard-secondary {
-	grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.panel-risk {
-	display: block;
-	background: var(--canvas-soft);
-}
-
-.panel-risk-attention {
-	border-color: color-mix(in srgb, var(--red) 50%, var(--hairline));
-	background: #fff8f9;
-}
-.panel-risk .section-heading {
-	margin: 0 0 var(--space-3);
-}
-.risk-blocks {
-	display: grid;
-	gap: var(--space-4);
-}
-.risk-block {
-	display: grid;
-	grid-template-columns: minmax(120px, 0.25fr) minmax(0, 1fr);
-	align-items: start;
-	gap: var(--space-3);
-	padding-top: var(--space-3);
-	border-top: 1px solid var(--hairline);
-}
-.risk-block:first-child {
-	padding-top: 0;
-	border-top: 0;
-}
-.risk-block-label {
-	color: var(--muted);
-	font-size: 11px;
-	font-weight: 700;
-	letter-spacing: 0.04em;
-	text-transform: uppercase;
-}
-.risk-block-dag .risk-block-label {
-	color: var(--ink);
-}
-.risk-block-worker .risk-block-label {
-	color: var(--ink);
-}
-.risk-total {
-	margin: 0;
-	color: var(--amber);
-	font-size: 32px;
-	font-weight: 500;
-	line-height: 1;
-	font-variant-numeric: tabular-nums;
-}
-.panel-risk-attention .risk-total {
-	color: var(--red);
-}
-.risk-summary {
-	margin: 0;
-	color: var(--body);
-	font-size: 12px;
-	line-height: 1.6;
-}
-.panel-risk .risk-empty {
-	margin: 0;
-}
-
-.projection-fault {
-	display: flex;
-	align-items: flex-start;
-	gap: var(--space-3);
-	padding: 14px 16px;
-	border: 1px solid color-mix(in srgb, var(--red) 50%, var(--hairline));
-	border-radius: var(--radius-lg);
-	background: #fff8f9;
-}
-.projection-fault > i {
-	color: var(--red);
-	font-size: 20px;
-	line-height: 1.4;
-}
-.projection-fault-body {
-	display: grid;
-	gap: 4px;
-	min-width: 0;
-}
-.projection-fault-title {
-	margin: 0;
-	color: var(--ink);
-	font-size: 14px;
-	font-weight: 700;
-}
-.projection-fault-message {
-	margin: 0;
-	color: var(--body);
-	font-size: 12px;
-	overflow-wrap: anywhere;
-}
-.projection-fault-at {
-	margin: 0;
-	color: var(--muted);
-	font-size: 11px;
-}
-
-.risk-link,
-.active-dag-link,
-.link,
-.inbox-link,
-.artifact-link,
-.step-link {
-	color: var(--ink);
-	font-size: 12px;
-	font-weight: 700;
-	text-decoration-color: var(--orange);
-	text-decoration-thickness: 1px;
-	text-underline-offset: 4px;
-}
-
-.risk-link {
-	margin: 0;
-	padding: 0;
-	white-space: nowrap;
-}
-.risk-link:hover,
-.active-dag-link:hover,
-.link:hover,
-.inbox-link:hover,
-.artifact-link:hover,
-.step-link:hover {
-	color: var(--orange-active);
-}
-
-.active-dag-list {
-	display: grid;
-	gap: 10px;
-}
-.active-dag-card {
-	padding: 14px;
-	border: 1px solid var(--hairline);
-	border-radius: var(--radius-md);
-	background: var(--canvas-soft);
-}
-.active-dag-card-running {
-	border-left: 3px solid var(--orange);
-	padding-left: 12px;
-}
-.active-dag-header {
-	display: flex;
-	align-items: start;
-	justify-content: space-between;
-	gap: var(--space-3);
-	margin-bottom: 9px;
-}
-.active-dag-title {
-	min-width: 0;
-	color: var(--ink);
-	font-size: 14px;
-	font-weight: 700;
-	overflow-wrap: anywhere;
-}
-.active-dag-meta {
-	display: grid;
-	gap: 4px;
-	color: var(--body);
-	font-size: 12px;
-}
-.active-dag-link {
-	display: inline-block;
-	margin-top: 10px;
-}
-
-.meta-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-	gap: 15px 24px;
-	margin: 0;
-}
-
-.meta-item {
-	min-width: 0;
-}
-.meta-item dt {
-	color: var(--muted);
-	font-size: 11px;
-	font-weight: 650;
-}
-.meta-item dd {
-	min-height: 24px;
-	margin: 4px 0 0;
-	padding-top: 5px;
-	border-top: 1px solid var(--hairline);
-	color: var(--ink);
-	overflow-wrap: anywhere;
-	font-size: 12px;
-}
-
-table {
-	width: 100%;
-	border-collapse: collapse;
-	font-size: 13px;
-}
-th,
-td {
-	padding: 11px 14px;
-	border-bottom: 1px solid var(--hairline);
-	text-align: left;
-	vertical-align: top;
-}
-th {
-	position: sticky;
-	top: 0;
-	z-index: 2;
-	background: var(--surface-muted);
-	color: var(--body);
-	font-size: 11px;
-	font-weight: 700;
-}
-td {
-	color: var(--body);
-}
-tbody tr:last-child td {
-	border-bottom: 0;
-}
-tbody tr {
-	transition: background-color var(--transition-fast);
-}
-tbody tr:hover {
-	background: #fff8f4;
-}
-tr.clickable {
-	cursor: pointer;
-}
-tr.clickable:focus-within {
-	outline: 2px solid var(--orange);
-	outline-offset: -2px;
-}
-
-.badge {
-	display: inline-flex;
-	align-items: center;
-	min-height: 22px;
-	padding: 2px 7px;
-	border: 1px solid currentColor;
-	border-radius: 999px;
-	background: transparent;
-	color: var(--muted);
-	font-size: 11px;
-	font-weight: 700;
-	line-height: 1.2;
-	white-space: nowrap;
-}
-
-.badge-succeeded,
-.badge-finished,
-.badge-completed,
-.badge-done,
-.liveness-active {
-	color: var(--green);
-	background: #f2faf5;
-}
-.badge-failed,
-.badge-error,
-.liveness-stale {
-	color: var(--red);
-	background: #fff5f7;
-}
-.badge-partial-failed {
-	color: #9a3a4f;
-	background: #fff7f8;
-}
-.badge-running,
-.badge-started {
-	color: var(--orange-active);
-	background: #fff5ed;
-}
-.badge-pending,
-.badge-queued,
-.badge-blocked,
-.badge-unknown {
-	color: var(--body);
-	background: var(--surface-muted);
-}
-.badge-skipped,
-.badge-reused,
-.liveness-quiet {
-	color: var(--blue);
-	background: #f2f6fb;
-}
-.liveness-timeout-risk {
-	color: var(--amber);
-	background: #fff8e7;
-}
-
-.dag-detail-workspace {
-	display: block;
-}
-
-.dag-inspector {
-	position: fixed;
-	z-index: 40;
-	top: 96px;
-	right: 24px;
-	bottom: 24px;
-	display: grid;
-	grid-template-rows: auto minmax(0, 1fr);
-	width: min(var(--dag-inspector-width, 440px), calc(100vw - 48px));
-	min-width: 0;
-	padding: 0;
-	overflow: hidden;
-	border-color: var(--hairline-strong);
-	box-shadow: 0 20px 48px rgba(38, 37, 30, 0.16);
-	opacity: 0;
-	pointer-events: none;
-	transform: translateX(calc(100% + 24px));
-	visibility: hidden;
-	transition:
-		transform var(--transition-base),
-		opacity var(--transition-base),
-		visibility 0s linear 240ms;
-}
-.dag-inspector.is-open {
-	opacity: 1;
-	pointer-events: auto;
-	transform: translateX(0);
-	visibility: visible;
-	transition-delay: 0s, 0s, 0s;
-}
-.dag-inspector-resize-handle {
-	position: absolute;
-	z-index: 1;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	width: 18px;
-	cursor: col-resize;
-	touch-action: none;
-	outline: none;
-}
-.dag-inspector-resize-handle::before {
-	content: "";
-	position: absolute;
-	top: 50%;
-	left: 7px;
-	width: 3px;
-	height: 52px;
-	transform: translateY(-50%);
-	border-radius: 2px;
-	background: var(--hairline-strong);
-	opacity: 0;
-	transition:
-		opacity var(--transition-base),
-		background var(--transition-base);
-}
-.dag-inspector-resize-handle:hover::before,
-.dag-inspector-resize-handle:focus-visible::before {
-	background: var(--orange);
-	opacity: 1;
-}
-.dag-inspector-resize-handle:focus-visible {
-	outline: 2px solid var(--orange);
-	outline-offset: -2px;
-}
-body.is-resizing-dag-inspector {
-	cursor: col-resize;
-	user-select: none;
-}
-body.is-resizing-dag-graph {
-	cursor: grabbing;
-	user-select: none;
-}
-.dag-inspector-header {
-	display: grid;
-	grid-template-columns: minmax(0, 1fr) auto;
-	gap: var(--space-3);
-	align-items: start;
-	padding: var(--space-4) var(--space-4) var(--space-3);
-	border-bottom: 1px solid var(--hairline);
-	background: var(--canvas-soft);
-}
-.dag-inspector-title {
-	display: grid;
-	gap: 6px;
-	min-width: 0;
-}
-.dag-inspector-title h3 {
-	margin: 0;
-	font-size: 14px;
-}
-.dag-inspector-node {
-	min-width: 0;
-	color: var(--body);
-	font-size: 12px;
-	font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
-	overflow-wrap: anywhere;
-}
-.dag-inspector-controls {
-	display: inline-flex;
-	align-items: center;
-	gap: 8px;
-}
-.dag-inspector-close {
-	display: inline-grid;
-	place-items: center;
-	width: 32px;
-	height: 32px;
-	border: 1px solid var(--hairline-strong);
-	border-radius: var(--radius-sm);
-	background: var(--surface);
-	color: var(--body);
-	cursor: pointer;
-}
-.dag-inspector-close:hover,
-.dag-inspector-close:focus-visible {
-	border-color: var(--orange);
-	color: var(--orange-active);
-	outline: none;
-}
-.dag-inspector-tabs {
-	display: flex;
-	grid-column: 1 / -1;
-	gap: 4px;
-	margin-top: 2px;
-}
-.dag-inspector-tab {
-	min-height: 32px;
-	padding: 0 10px;
-	border: 1px solid transparent;
-	border-radius: var(--radius-sm);
-	background: transparent;
-	color: var(--muted);
-	font-size: 12px;
-	font-weight: 700;
-	cursor: pointer;
-}
-.dag-inspector-tab:hover,
-.dag-inspector-tab:focus-visible {
-	color: var(--ink);
-	outline: none;
-}
-.dag-inspector-tab[aria-selected="true"] {
-	border-color: color-mix(in srgb, var(--orange) 55%, var(--hairline));
-	background: #fff5ed;
-	color: var(--orange-active);
-}
-.dag-inspector-content {
-	min-height: 0;
-	padding: var(--space-4);
-	overflow: auto;
-	overscroll-behavior: contain;
-}
-.panel-graph {
-	min-height: 0;
-}
-
-.dag-graph-wrap {
-	display: grid;
-	gap: var(--space-3);
-}
-.dag-graph-toolbar {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--space-3);
-}
-.dag-graph-summary,
-.dag-graph-fallback {
-	margin: 0;
-	color: var(--muted);
-	font-size: 12px;
-}
-.dag-graph-reset {
-	min-height: 32px;
-	padding: 0 10px;
-	border: 1px solid var(--hairline-strong);
-	border-radius: var(--radius-sm);
-	background: var(--surface);
-	color: var(--ink);
-	font-size: 12px;
-	font-weight: 650;
-	cursor: pointer;
-}
-.dag-graph-reset:hover,
-.dag-graph-reset:focus-visible {
-	border-color: var(--orange);
-	color: var(--orange-active);
-	outline: none;
-}
-.dag-graph-viewport {
-	min-height: 320px;
-	max-height: 560px;
-	overflow: auto;
-	border: 1px solid var(--hairline);
-	border-radius: var(--radius-md);
-	background: var(--canvas-soft);
-	scroll-behavior: auto;
-}
-.dag-graph {
-	display: block;
-}
-.dag-edge {
-	fill: none;
-	stroke: var(--hairline-strong);
-	stroke-width: 2;
-	transition:
-		opacity var(--transition-fast),
-		stroke var(--transition-fast);
-}
-#dag-arrow path {
-	fill: var(--hairline-strong);
-}
-.dag-graph-node {
-	cursor: pointer;
-	transition: opacity var(--transition-fast);
-}
-.dag-graph-node rect {
-	fill: var(--surface);
-	stroke: var(--hairline-strong);
-	stroke-width: 1.5;
-}
-.dag-graph-node:hover rect,
-.dag-graph-node:focus-visible rect {
-	stroke: var(--orange);
-	stroke-width: 2;
-}
-.dag-graph-node:focus {
-	outline: none;
-}
-.dag-graph-node.selected rect {
-	stroke: var(--orange);
-	stroke-width: 3;
-}
-.dag-graph-node.status-running rect,
-.dag-graph-node.status-started rect {
-	stroke: var(--orange);
-	fill: #fff7f0;
-}
-.dag-graph-node.status-failed rect,
-.dag-graph-node.status-error rect {
-	stroke: var(--red);
-	fill: #fff7f8;
-}
-.dag-graph-node.status-succeeded:hover rect,
-.dag-graph-node.status-succeeded:focus-visible rect,
-.dag-graph-node.status-finished:hover rect,
-.dag-graph-node.status-finished:focus-visible rect,
-.dag-graph-node.status-completed:hover rect,
-.dag-graph-node.status-completed:focus-visible rect,
-.dag-graph-node.status-done:hover rect,
-.dag-graph-node.status-done:focus-visible rect {
-	stroke: var(--green);
-	fill: #f2faf5;
-}
-.dag-graph-node.selected.status-succeeded rect,
-.dag-graph-node.selected.status-finished rect,
-.dag-graph-node.selected.status-completed rect,
-.dag-graph-node.selected.status-done rect {
-	stroke: var(--green);
-	fill: #f2faf5;
-}
-.dag-graph-node.status-skipped rect {
-	stroke-dasharray: 5 4;
-}
-.dag-node-label {
-	fill: var(--ink);
-	font-size: 13px;
-	font-weight: 700;
-}
-.dag-node-meta {
-	fill: var(--muted);
-	font-size: 11px;
-}
-.dag-node-status {
-	fill: var(--body);
-	font-size: 11px;
-}
-.dag-dimmed {
-	opacity: 0.28;
-}
-.dag-graph-node.status-running {
-	animation: graph-node-pulse 2s ease-in-out infinite;
-}
-@keyframes graph-node-pulse {
-	50% {
-		opacity: 0.72;
-	}
-}
-
-.dag-section-heading {
-	display: flex;
-	align-items: baseline;
-	justify-content: space-between;
-	gap: var(--space-3);
-	margin-bottom: var(--space-4);
-}
-.dag-section-heading h3 {
-	margin: 0;
-}
-.dag-section-meta {
-	color: var(--muted);
-	font-size: 12px;
-}
-#dag-nodes .dag-section-heading {
-	padding: var(--space-5) var(--space-5) 0;
-}
-#dag-nodes .dag-node-table {
-	border-top: 1px solid var(--hairline);
-}
-.dag-node-table {
-	table-layout: fixed;
-}
-.dag-node-table th:nth-child(1),
-.dag-node-table td:nth-child(1) {
-	width: 19%;
-}
-.dag-node-table th:nth-child(2),
-.dag-node-table td:nth-child(2) {
-	width: 7%;
-}
-.dag-node-table th:nth-child(3),
-.dag-node-table td:nth-child(3) {
-	width: 12%;
-}
-.dag-node-table th:nth-child(4),
-.dag-node-table td:nth-child(4) {
-	width: 16%;
-}
-.dag-node-table th:nth-child(5),
-.dag-node-table td:nth-child(5) {
-	width: 12%;
-}
-.dag-node-table th:nth-child(6),
-.dag-node-table td:nth-child(6) {
-	width: 9%;
-}
-.dag-node-table th:nth-child(7),
-.dag-node-table td:nth-child(7) {
-	width: 25%;
-}
-.dag-node-table td:nth-child(1),
-.dag-node-table td:nth-child(4),
-.dag-node-table td:nth-child(7) {
-	overflow-wrap: anywhere;
-}
-.dag-active-node {
-	background: #fff8f3;
-}
-.dag-error-node {
-	background: #fff7f8;
-}
-.dag-node-selected {
-	box-shadow: inset 3px 0 0 var(--orange);
-}
-
-.rank-lanes {
-	display: grid;
-	gap: var(--space-3);
-}
-.rank-lane {
-	display: grid;
-	grid-template-columns: 56px minmax(0, 1fr);
-	gap: var(--space-3);
-	align-items: center;
-}
-.rank-lane-label {
-	color: var(--muted);
-	font-size: 11px;
-	font-weight: 700;
-}
-.rank-lane-nodes {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 8px;
-}
-.rank-node-chip {
-	display: inline-flex;
-	align-items: center;
-	gap: 7px;
-	min-height: 32px;
-	padding: 5px 8px;
-	border: 1px solid var(--hairline);
-	border-radius: var(--radius-sm);
-	background: var(--canvas-soft);
-}
-.rank-node-active {
-	border-color: var(--orange);
-}
-.rank-node-error {
-	border-color: var(--red);
-}
-.rank-node-id {
-	color: var(--ink);
-	font-size: 11px;
-}
-.rank-node-dur {
-	color: var(--muted);
-	font-size: 11px;
-}
-
-.process-timeline-note {
-	margin: 0 0 var(--space-2);
-	color: var(--muted);
-	font-size: 11px;
-}
-.process-timeline {
-	display: grid;
-	gap: 0;
-	margin: 0;
-	padding: var(--space-2) 0;
-	list-style: none;
-}
-.process-timeline-item {
-	display: grid;
-	grid-template-columns: 20px minmax(0, 1fr);
-	align-items: stretch;
-	min-height: 34px;
-}
-.process-timeline-item.has-time {
-	grid-template-columns: 20px 92px minmax(0, 1fr);
-}
-.process-timeline-rail {
-	position: relative;
-	display: grid;
-	place-items: center;
-	min-height: 34px;
-}
-.process-timeline-rail::before {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	width: 1px;
-	background: var(--hairline-strong);
-	content: "";
-}
-.process-timeline-item.is-first .process-timeline-rail::before {
-	top: 50%;
-}
-.process-timeline-item.is-last .process-timeline-rail::before {
-	bottom: 50%;
-}
-.process-timeline-dot {
-	position: relative;
-	z-index: 1;
-	width: 8px;
-	height: 8px;
-	border: 2px solid var(--surface);
-	border-radius: 50%;
-	background: var(--muted-soft);
-}
-.process-timeline-lifecycle .process-timeline-dot {
-	background: var(--lavender);
-}
-.process-timeline-tool-start .process-timeline-dot {
-	background: var(--orange);
-}
-.process-timeline-tool-end .process-timeline-dot {
-	background: var(--green);
-}
-.process-timeline-assistant .process-timeline-dot {
-	background: var(--blue);
-}
-.process-timeline-protocol .process-timeline-dot {
-	background: var(--muted-soft);
-}
-.process-timeline-time {
-	padding: 9px 0;
-	color: var(--muted);
-	font-size: 10px;
-	font-variant-numeric: tabular-nums;
-}
-.process-timeline-label {
-	min-width: 0;
-	padding: 8px 0 8px var(--space-2);
-	color: var(--body);
-	font-size: 12px;
-	line-height: 1.5;
-	overflow-wrap: anywhere;
-}
-.process-timeline-protocol .process-timeline-label {
-	color: var(--muted);
-	font-size: 11px;
-}
-
-.markdown-output {
-	display: grid;
-	gap: var(--space-3);
-	color: var(--body);
-	font-size: 13px;
-	line-height: 1.65;
-}
-.markdown-output > :first-child {
-	margin-top: 0;
-}
-.markdown-output > :last-child {
-	margin-bottom: 0;
-}
-.markdown-output h1,
-.markdown-output h2,
-.markdown-output h3,
-.markdown-output h4 {
-	margin: var(--space-5) 0 var(--space-2);
-	color: var(--ink);
-	line-height: 1.3;
-}
-.markdown-output h1 {
-	font-size: 21px;
-}
-.markdown-output h2 {
-	font-size: 18px;
-}
-.markdown-output h3 {
-	font-size: 16px;
-}
-.markdown-output h4 {
-	font-size: 14px;
-}
-.markdown-output p,
-.markdown-output blockquote,
-.markdown-output ul,
-.markdown-output ol {
-	margin: 0;
-}
-.markdown-output ul,
-.markdown-output ol {
-	padding-left: 22px;
-}
-.markdown-output blockquote {
-	padding-left: 12px;
-	border-left: 3px solid var(--peach);
-	color: var(--body);
-}
-.markdown-output pre {
-	margin: 0;
-	padding: var(--space-3);
-	overflow: auto;
-	border: 1px solid var(--hairline);
-	border-radius: var(--radius-sm);
-	background: var(--surface-ink);
-	color: #f8f7f2;
-	font-size: 12px;
-	line-height: 1.65;
-}
-.markdown-output code {
-	padding: 1px 4px;
-	border-radius: 3px;
-	background: var(--surface-muted);
-	color: var(--ink);
-	font-size: 0.92em;
-}
-.markdown-output pre code {
-	padding: 0;
-	background: transparent;
-	color: inherit;
-}
-.markdown-output a {
-	color: var(--orange-active);
-	text-decoration-color: var(--orange);
-	text-underline-offset: 3px;
-}
-.markdown-output table {
-	font-size: 12px;
-}
-.markdown-output th,
-.markdown-output td {
-	padding: 8px 9px;
-}
-.markdown-output th {
-	position: static;
-}
-.markdown-error {
-	display: grid;
-	gap: var(--space-2);
-	padding-top: var(--space-4);
-	border-top: 1px solid var(--hairline);
-}
-.markdown-error-title {
-	margin: 0;
-	color: var(--red);
-	font-size: 12px;
-	font-weight: 700;
-}
-
-.spec-evidence-section { padding-bottom: var(--space-4); border-bottom: 1px solid var(--hairline); }
-.spec-evidence-section + .spec-evidence-section { margin-top: var(--space-4); }
-.spec-evidence-section h4 { margin: 0 0 var(--space-2); color: var(--ink); font-size: 12px; font-weight: 700; }
-.spec-evidence-summary { margin: var(--space-2) 0 0; color: var(--body); font-size: 12px; line-height: 1.6; }
-.spec-evidence-list { display: grid; gap: 6px; margin: var(--space-2) 0 0; padding: 0; list-style: none; }
-.spec-evidence-list li { display: flex; align-items: flex-start; gap: 6px; color: var(--body); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
-.spec-evidence-list li > i { flex-shrink: 0; margin-top: 2px; color: var(--muted); font-size: 13px; }
-.spec-evidence-list code { font-size: 11px; }
-.spec-evidence-time { margin-left: auto; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
-.spec-evidence-warning { display: flex; align-items: flex-start; gap: 8px; margin-top: var(--space-4); padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--amber) 50%, var(--hairline)); border-radius: var(--radius-sm); background: #fff8e7; color: var(--body); font-size: 12px; line-height: 1.6; }
-.spec-evidence-warning > i { flex-shrink: 0; margin-top: 2px; color: var(--amber); }
-
-.run-layer-process {
-	display: grid;
-	gap: var(--space-4);
-	margin-top: var(--space-4);
-}
-.run-layer-diagnosis {
-	display: grid;
-	gap: var(--space-4);
-	margin-top: var(--space-4);
-}
-.run-detail-workspace {
-	display: grid;
-	grid-template-columns: minmax(220px, 0.5fr) minmax(0, 1.25fr);
-	gap: var(--space-4);
-	align-items: start;
-}
-.run-evidence {
-	display: grid;
-	gap: var(--space-4);
-	min-width: 0;
-}
-.artifact-preview-list {
-	gap: 12px;
-}
-.artifact-preview-head {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 8px;
-	align-items: baseline;
-	margin-bottom: 6px;
-}
-.artifact-preview-label {
-	font-size: 12px;
-	color: var(--muted);
-	overflow-wrap: anywhere;
-}
-.artifact-preview-body {
-	max-height: 240px;
-	overflow: auto;
-	font-size: 12px;
-}
-.artifact-preview-error {
-	color: var(--red);
-}
-.batch-task-links,
-.batch-task-evidence {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 4px;
-	align-items: center;
-}
-.object-link {
-	color: var(--body);
-	text-decoration: underline;
-	text-underline-offset: 2px;
-}
-.panel-rail {
-	background: var(--canvas-soft);
-}
-.step-timeline {
-	display: grid;
-	gap: 0;
-	margin: 0;
-	padding: 0;
-	list-style: none;
-}
-.step-timeline li {
-	display: grid;
-	grid-template-columns: 18px minmax(0, 1fr) auto;
-	align-items: center;
-	gap: 8px;
-	min-height: 38px;
-	border-bottom: 1px solid var(--hairline);
-}
-.step-timeline li:last-child {
-	border-bottom: 0;
-}
-.step-marker {
-	display: inline-grid;
-	place-items: center;
-	width: 16px;
-	height: 16px;
-	border: 1px solid var(--hairline-strong);
-	border-radius: 50%;
-	color: var(--muted);
-	font-size: 10px;
-}
-.step-marker.succeeded {
-	border-color: var(--green);
-	color: var(--green);
-}
-.step-marker.running {
-	border-color: var(--orange);
-	color: var(--orange-active);
-}
-.step-marker.failed {
-	border-color: var(--red);
-	color: var(--red);
-}
-.step-name {
-	min-width: 0;
-	color: var(--body);
-	font-size: 12px;
-	overflow-wrap: anywhere;
-}
-.step-duration {
-	color: var(--muted);
-	font-size: 11px;
-	font-variant-numeric: tabular-nums;
-}
-
-.output-block {
-	max-height: 480px;
-	margin: 0;
-	padding: var(--space-4);
-	overflow: auto;
-	border: 1px solid var(--hairline);
-	border-radius: var(--radius-sm);
-	background: var(--surface-ink);
-	color: #f8f7f2;
-	font-size: 12px;
-	line-height: 1.7;
-	white-space: pre-wrap;
-	overflow-wrap: anywhere;
-}
-
-.artifact-list {
-	display: grid;
-	gap: 8px;
-	margin: 0;
-	padding: 0;
-	list-style: none;
-}
-.artifact-list li {
-	min-width: 0;
-}
-.artifact-list a {
-	color: var(--body);
-	font-size: 12px;
-	overflow-wrap: anywhere;
-}
-.artifact-links {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 6px;
-}
-.muted {
-	color: var(--muted);
-}
-
-.dag-run-timeline {
-	position: relative;
-	display: grid;
-	gap: 0;
-}
-.dag-run-timeline::before {
-	position: absolute;
-	top: 12px;
-	bottom: 12px;
-	left: 10px;
-	width: 1px;
-	background: var(--hairline-strong);
-	content: "";
-}
-.dag-run-timeline-item {
-	position: relative;
-	display: grid;
-	grid-template-columns: 24px minmax(0, 1fr) auto;
-	gap: var(--space-3);
-	align-items: start;
-	padding: 9px 0;
-	color: inherit;
-	text-decoration: none;
-	transition: background-color var(--transition-fast);
-}
-.dag-run-timeline-item:hover,
-.dag-run-timeline-item:focus-visible {
-	margin-inline: -8px;
-	padding-inline: 8px;
-	background: #fff8f4;
-	outline: none;
-}
-.dag-run-timeline-rail {
-	position: relative;
-	display: grid;
-	place-items: center;
-	min-height: 24px;
-}
-.dag-run-timeline-dot {
-	position: relative;
-	z-index: 1;
-	width: 9px;
-	height: 9px;
-	border: 2px solid var(--surface);
-	border-radius: 50%;
-	background: var(--muted-soft);
-}
-.dag-run-timeline-dot.status-finished,
-.dag-run-timeline-dot.status-succeeded,
-.dag-run-timeline-dot.status-completed {
-	background: var(--green);
-}
-.dag-run-timeline-dot.status-failed,
-.dag-run-timeline-dot.status-error,
-.dag-run-timeline-dot.status-partial_failed {
-	background: var(--red);
-}
-.dag-run-timeline-dot.status-running,
-.dag-run-timeline-dot.status-started {
-	background: var(--orange);
-}
-.dag-run-timeline-content {
-	display: grid;
-	gap: 3px;
-	min-width: 0;
-}
-.dag-run-timeline-title {
-	color: var(--ink);
-	font-size: 13px;
-	font-weight: 700;
-	overflow-wrap: anywhere;
-}
-.dag-run-timeline-meta {
-	color: var(--muted);
-	font-size: 11px;
-	overflow-wrap: anywhere;
-}
-.dag-run-timeline-status {
-	padding-top: 1px;
-}
-
-#failures-list .row-failed td:first-child,
-#failures-list .row-blocked td:first-child {
-	color: var(--red);
-	font-weight: 700;
-}
-
-@media (max-width: 1320px) {
-	.kpi-grid {
-		grid-template-columns: repeat(3, minmax(0, 1fr));
-	}
-	.kpi-card:nth-child(4) {
-		border-left: 0;
-	}
-	.kpi-card:nth-child(n + 4) {
-		border-top: 1px solid var(--hairline);
-	}
-	.dashboard-workspace {
-		grid-template-columns: 1fr;
-	}
-	.run-detail-workspace {
-		grid-template-columns: minmax(200px, 0.45fr) minmax(0, 1fr);
-	}
-	.panel-artifacts {
-		grid-column: 1 / -1;
-	}
-}
-
-@media (max-width: 1080px) {
-	#app {
-		width: min(100% - 32px, 1680px);
-	}
-	.site-header {
-		grid-template-columns: auto auto 1fr;
-		grid-template-areas: "brand nav status" "crumb crumb crumb";
-		row-gap: 8px;
-	}
-	.run-detail-workspace {
-		grid-template-columns: 1fr;
-	}
-	.panel-artifacts {
-		grid-column: auto;
-	}
-}
-
-@media (max-width: 720px) {
-	#app {
-		width: min(100% - 24px, 1680px);
-	}
-	.site-header {
-		margin-bottom: var(--space-6);
-	}
-	.kpi-grid {
-		grid-template-columns: repeat(2, minmax(0, 1fr));
-	}
-	.kpi-card:nth-child(n) {
-		border-top: 1px solid var(--hairline);
-		border-left: 1px solid var(--hairline);
-	}
-	.kpi-card:nth-child(1),
-	.kpi-card:nth-child(2) {
-		border-top: 0;
-	}
-	.kpi-card:nth-child(odd) {
-		border-left: 0;
-	}
-	.dag-inspector {
-		top: 76px;
-		right: 12px;
-		bottom: 12px;
-		width: calc(100vw - 24px);
-	}
-	.dag-inspector-resize-handle {
-		display: none;
-	}
-	.dashboard-secondary {
-		grid-template-columns: 1fr;
-	}
-	.risk-block {
-		grid-template-columns: 1fr;
-		gap: var(--space-2);
-	}
-	.panel {
-		padding: var(--space-4);
-	}
-	.panel-table {
-		overflow-x: auto;
-		padding: 0;
-	}
-	table {
-		min-width: 680px;
-	}
-	.view h2 {
-		font-size: 24px;
-	}
-}
-
-/* R3: object relation bar + recommended commands (copy-only) */
-.object-relations-panel {
-	padding: var(--space-3) var(--space-4);
-}
-
-.object-relation-bar {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: var(--space-2);
-	font-size: 0.9rem;
-}
-
-.object-relation-item {
-	display: inline-flex;
-	align-items: baseline;
-	gap: 0.25rem;
-}
-
-.object-relation-label {
-	color: var(--muted, #6b6560);
-	font-weight: 600;
-	font-size: 0.75rem;
-	text-transform: uppercase;
-	letter-spacing: 0.04em;
-}
-
-.object-relation-sep {
-	color: var(--muted, #6b6560);
-	opacity: 0.7;
-	user-select: none;
-}
-
-.object-link {
-	color: var(--accent, #8a5a2b);
-	text-decoration: none;
-	word-break: break-all;
-}
-
-.object-link:hover,
-.object-link:focus-visible {
-	text-decoration: underline;
-}
-
-.recommended-command {
-	border: 1px solid var(--border, #e2ddd4);
-	border-radius: 8px;
-	padding: var(--space-3);
-	margin: var(--space-2) 0;
-	background: #fbf9f4;
-}
-
-.recommended-command-head {
-	display: flex;
-	flex-wrap: wrap;
-	gap: var(--space-2);
-	align-items: baseline;
-	margin-bottom: var(--space-2);
-}
-
-.recommended-command-kind {
-	font-size: 0.75rem;
-	font-weight: 600;
-	color: var(--muted, #6b6560);
-	text-transform: uppercase;
-}
-
-.recommended-command-label {
-	font-weight: 600;
-}
-
-.recommended-command-body {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: var(--space-2);
-}
-
-.recommended-command-text {
-	flex: 1 1 12rem;
-	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-	font-size: 0.85rem;
-	word-break: break-all;
-	background: #f0ebe3;
-	padding: 0.35rem 0.5rem;
-	border-radius: 4px;
-}
-
-button.copy-command {
-	appearance: none;
-	border: 1px solid var(--border, #d4cdc2);
-	background: #fff;
-	border-radius: 6px;
-	padding: 0.35rem 0.75rem;
-	cursor: pointer;
-	font-size: 0.85rem;
-}
-
-button.copy-command:hover,
-button.copy-command:focus-visible {
-	border-color: var(--accent, #8a5a2b);
-}
-
-.executed-facts {
-	border-left: 3px solid #6b8f71;
-}
-
-.advisory-note {
-	margin: 0 0 var(--space-2);
-	font-size: 0.85rem;
-}
-
-.blocking-list {
-	margin: 0;
-	padding-left: 1.25rem;
-}
-
-.blocking-message {
-	font-weight: 500;
-}
-
-.blocking-meta {
-	font-size: 0.85rem;
-	color: var(--muted, #6b6560);
-	margin: 0.15rem 0 0.35rem;
-}
-
-
-
-/* R5: unified view states + information hierarchy */
-.view-state {
-	border-radius: var(--radius, 8px);
-	padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
-	margin: 0 0 var(--space-3, 0.75rem);
-}
-.view-state-loading {
-	border: 1px dashed var(--border, #e2dcd4);
-	background: var(--surface-muted, #f7f4ef);
-	color: var(--muted, #6b6560);
-}
-.view-state-empty {
-	border: 1px solid var(--border, #e2dcd4);
-	background: var(--surface, #fffdf9);
-}
-.view-state-degraded {
-	/* projection-fault styles also apply */
-}
-.view-state-error {
-	border: 1px solid var(--danger-border, #e8b4b4);
-	background: var(--danger-bg, #fdf2f2);
-	color: var(--danger-text, #8a2f2f);
-}
-.view-state-error p {
-	margin: 0;
-}
-.layer-primary {
-	/* main facts */
-}
-.layer-diagnostic {
-	opacity: 0.98;
-}
-.layer-raw {
-	font-size: 0.9rem;
-	color: var(--muted, #6b6560);
-}
-.pool-filters {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 0.5rem 0.75rem;
-	align-items: center;
-	margin: 0 0 var(--space-3, 0.75rem);
-}
-.pool-filters label {
-	display: inline-flex;
-	align-items: center;
-	gap: 0.35rem;
-	font-size: 0.9rem;
-}
-.pool-filters select,
-.pool-filters input[type="search"] {
-	font: inherit;
-	padding: 0.25rem 0.5rem;
-	border: 1px solid var(--border, #e2dcd4);
-	border-radius: 6px;
-	background: var(--surface, #fff);
-	min-height: 2rem;
-}
-.pool-filters select:focus-visible,
-.pool-filters input[type="search"]:focus-visible {
-	outline: 2px solid var(--focus, #3d6bf3);
-	outline-offset: 2px;
-}
-
-@media (max-width: 1024px) {
-	.pool-filters {
-		flex-direction: column;
-		align-items: stretch;
-	}
-}
-
-@media (prefers-reduced-motion: reduce) {
-	*,
-	*::before,
-	*::after {
-		animation-duration: 0.01ms !important;
-		animation-iteration-count: 1 !important;
-		scroll-behavior: auto !important;
-		transition-duration: 0.01ms !important;
-	}
-}
+:root {
+	--canvas: #f7f7f4;
+	--canvas-soft: #fafaf7;
+	--surface: #ffffff;
+	--surface-muted: #f0efe9;
+	--surface-ink: #26251e;
+	--ink: #26251e;
+	--body: #5a5852;
+	--muted: #807d72;
+	--muted-soft: #a09c92;
+	--hairline: #e6e5e0;
+	--hairline-strong: #cfcdc4;
+	--orange: #f54e00;
+	--orange-active: #d04200;
+	--blue: #3f6ea4;
+	--green: #1f8a65;
+	--amber: #a66a00;
+	--red: #c72d53;
+	--lavender: #e4daf1;
+	--mint: #d8ead5;
+	--peach: #f1d8cb;
+	--gold: #d8b166;
+	--space-1: 4px;
+	--space-2: 8px;
+	--space-3: 12px;
+	--space-4: 16px;
+	--space-5: 20px;
+	--space-6: 24px;
+	--space-8: 32px;
+	--space-10: 40px;
+	--space-12: 48px;
+	--radius-sm: 4px;
+	--radius-md: 6px;
+	--radius-lg: 8px;
+	--transition-fast: 160ms ease;
+	--transition-base: 240ms ease;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+html {
+	background: var(--canvas);
+	scroll-behavior: smooth;
+}
+
+body {
+	min-width: 320px;
+	margin: 0;
+	background: var(--canvas);
+	color: var(--ink);
+	font-family:
+		system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+	font-size: 14px;
+	line-height: 1.5;
+}
+
+button,
+input,
+select,
+textarea {
+	font: inherit;
+}
+
+a {
+	color: inherit;
+}
+
+code,
+pre,
+.output-block,
+.rank-node-id,
+.dag-node-label,
+.dag-node-meta,
+.dag-node-status,
+td:first-child,
+.meta-item dd,
+.header-refresh,
+.kpi-value,
+.risk-total,
+.process-timeline-time {
+	font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+}
+
+.skip-link {
+	position: fixed;
+	top: -64px;
+	left: var(--space-4);
+	z-index: 100;
+	padding: 9px 12px;
+	background: var(--orange);
+	color: #fff;
+	font-weight: 700;
+	text-decoration: none;
+	transition: top var(--transition-fast);
+}
+
+.skip-link:focus {
+	top: var(--space-3);
+}
+
+#app {
+	width: min(100% - 48px, 1680px);
+	margin: 0 auto;
+	padding-bottom: 56px;
+}
+
+.site-header {
+	position: sticky;
+	top: 0;
+	z-index: 30;
+	display: grid;
+	grid-template-columns: auto auto 1fr;
+	grid-template-areas: "brand nav status" "crumb crumb crumb";
+	column-gap: var(--space-6);
+	align-items: center;
+	min-height: 76px;
+	margin-bottom: var(--space-8);
+	padding: 14px 0 12px;
+	background: color-mix(in srgb, var(--canvas) 94%, transparent);
+	border-bottom: 1px solid var(--hairline);
+	backdrop-filter: blur(10px);
+}
+
+.logo {
+	grid-area: brand;
+	display: inline-flex;
+	align-items: center;
+	gap: 9px;
+	color: var(--ink);
+	font-size: 16px;
+	font-weight: 650;
+	letter-spacing: 0;
+	text-decoration: none;
+}
+
+.logo > i {
+	color: var(--orange);
+	font-size: 20px;
+	font-weight: 400;
+}
+.logo:hover {
+	color: var(--orange-active);
+}
+
+.top-nav {
+	grid-area: nav;
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+}
+
+.nav-link {
+	display: inline-flex;
+	align-items: center;
+	gap: 7px;
+	min-height: 36px;
+	padding: 0 10px;
+	border: 1px solid transparent;
+	border-radius: var(--radius-sm);
+	color: var(--body);
+	font-size: 13px;
+	font-weight: 600;
+	text-decoration: none;
+	transition:
+		border-color var(--transition-fast),
+		background-color var(--transition-fast),
+		color var(--transition-fast);
+}
+
+.nav-link > i {
+	font-size: 16px;
+	font-weight: 400;
+}
+.nav-link:hover,
+.nav-link:focus-visible {
+	border-color: var(--hairline-strong);
+	background: var(--surface);
+	color: var(--ink);
+	outline: none;
+}
+.nav-link-active {
+	border-color: var(--orange);
+	background: var(--surface);
+	color: var(--ink);
+}
+
+.header-meta {
+	grid-area: status;
+	display: inline-flex;
+	justify-self: end;
+	align-items: center;
+	gap: 7px;
+	color: var(--muted);
+	font-size: 12px;
+	font-variant-numeric: tabular-nums;
+}
+
+.header-meta > i {
+	color: var(--green);
+	font-size: 16px;
+}
+
+.breadcrumb {
+	grid-area: crumb;
+	display: flex;
+	min-height: 16px;
+	gap: 7px;
+	color: var(--muted);
+	font-size: 12px;
+}
+
+.breadcrumb[hidden] {
+	display: none;
+}
+
+.breadcrumb a {
+	color: var(--body);
+	text-decoration: none;
+}
+.breadcrumb a:hover,
+.breadcrumb a:focus-visible {
+	color: var(--orange);
+	text-decoration: underline;
+	outline: none;
+}
+
+.dashboard-main:focus {
+	outline: none;
+}
+.view {
+	min-width: 0;
+}
+.view[hidden] {
+	display: none !important;
+}
+.view:not(.view-dashboard) {
+	display: grid;
+	gap: var(--space-4);
+}
+
+.view-heading {
+	display: grid;
+	gap: 4px;
+	margin-bottom: var(--space-6);
+}
+
+.view-kicker {
+	margin: 0;
+	color: var(--orange);
+	font-size: 11px;
+	font-weight: 700;
+	letter-spacing: 0.08em;
+}
+
+.view h2 {
+	margin: 0;
+	color: var(--ink);
+	font-size: 28px;
+	font-weight: 500;
+	line-height: 1.16;
+	letter-spacing: 0;
+}
+
+.view-heading > p:last-child {
+	max-width: 66ch;
+	margin: 0;
+	color: var(--body);
+}
+
+.panel {
+	min-width: 0;
+	background: var(--surface);
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-lg);
+	padding: var(--space-5);
+}
+
+.panel-primary {
+	border-color: var(--hairline-strong);
+}
+.panel-meta {
+	background: transparent;
+	border-color: var(--hairline-strong);
+}
+.panel-table {
+	overflow: hidden;
+	padding: 0;
+}
+.panel-output {
+	background: #fbfbf9;
+}
+
+.section-heading,
+.panel h3 {
+	margin: 0 0 var(--space-4);
+	color: var(--ink);
+	font-size: 14px;
+	font-weight: 700;
+}
+
+.empty,
+.risk-empty {
+	margin: 0;
+	color: var(--muted);
+}
+.empty-state {
+	padding: var(--space-8);
+	text-align: center;
+	color: var(--body);
+}
+
+.view-dashboard {
+	display: grid;
+	gap: var(--space-4);
+}
+
+.repo-banner {
+	display: flex;
+	align-items: center;
+	gap: var(--space-3);
+	padding: 10px 14px;
+	border: 1px solid var(--hairline-strong);
+	border-radius: var(--radius-lg);
+	background: var(--surface);
+}
+.repo-banner > i {
+	color: var(--muted);
+	font-size: 18px;
+}
+.repo-banner-text {
+	display: grid;
+	gap: 2px;
+	min-width: 0;
+}
+.repo-banner-name {
+	color: var(--ink);
+	font-size: 14px;
+	font-weight: 700;
+	overflow-wrap: anywhere;
+}
+.repo-banner-path {
+	color: var(--muted);
+	font-size: 11px;
+	overflow-wrap: anywhere;
+}
+
+.panel-kpi {
+	padding: 0;
+	background: transparent;
+	border: 0;
+}
+
+.kpi-group {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	display: grid;
+	gap: var(--space-3);
+}
+.kpi-group + .kpi-group {
+	margin-top: var(--space-3);
+}
+.kpi-group-legend {
+	padding: 0;
+	color: var(--muted);
+	font-size: 11px;
+	font-weight: 700;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+}
+
+.kpi-grid {
+	display: grid;
+	grid-template-columns: repeat(6, minmax(0, 1fr));
+	overflow: visible;
+	border: 1px solid var(--hairline-strong);
+	border-radius: var(--radius-lg);
+	background: var(--surface);
+}
+
+.kpi-card {
+	position: relative;
+	min-width: 0;
+	min-height: 84px;
+	padding: 15px 18px 14px;
+	border-left: 1px solid var(--hairline);
+}
+
+.kpi-card:first-child {
+	border-left: 0;
+}
+.kpi-label {
+	margin-bottom: 9px;
+	color: var(--muted);
+	font-size: 11px;
+	font-weight: 650;
+}
+.kpi-value-row {
+	display: flex;
+	align-items: baseline;
+	gap: 6px;
+}
+.kpi-value {
+	color: var(--ink);
+	font-size: 26px;
+	font-weight: 500;
+	line-height: 1;
+	font-variant-numeric: tabular-nums;
+}
+
+.kpi-help {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 16px;
+	height: 16px;
+	padding: 0;
+	border: 0;
+	border-radius: 50%;
+	background: transparent;
+	color: var(--muted-soft);
+	cursor: help;
+	font-size: 13px;
+	line-height: 1;
+}
+.kpi-help:hover,
+.kpi-help:focus-visible {
+	color: var(--ink);
+	background: var(--surface-muted);
+	outline: none;
+}
+.kpi-help:focus-visible {
+	box-shadow: 0 0 0 2px var(--hairline-strong);
+}
+.kpi-tip {
+	position: absolute;
+	left: 12px;
+	right: 12px;
+	top: calc(100% - 8px);
+	z-index: 10;
+	max-width: 280px;
+	padding: 8px 10px;
+	border: 1px solid var(--hairline-strong);
+	border-radius: var(--radius-md);
+	background: var(--surface-ink);
+	color: var(--canvas);
+	font-size: 11px;
+	font-weight: 400;
+	line-height: 1.5;
+	box-shadow: var(--shadow-panel);
+	opacity: 0;
+	visibility: hidden;
+	pointer-events: none;
+	transition: opacity var(--transition-fast);
+}
+.kpi-help:hover + .kpi-tip,
+.kpi-help:focus-visible + .kpi-tip {
+	opacity: 1;
+	visibility: visible;
+}
+
+.dashboard-workspace,
+.dashboard-secondary {
+	display: grid;
+	gap: var(--space-4);
+	align-items: stretch;
+}
+
+.dashboard-workspace {
+	grid-template-columns: 1fr;
+}
+.dashboard-secondary {
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.panel-risk {
+	display: block;
+	background: var(--canvas-soft);
+}
+
+.panel-risk-attention {
+	border-color: color-mix(in srgb, var(--red) 50%, var(--hairline));
+	background: #fff8f9;
+}
+.panel-risk .section-heading {
+	margin: 0 0 var(--space-3);
+}
+.risk-blocks {
+	display: grid;
+	gap: var(--space-4);
+}
+.risk-block {
+	display: grid;
+	grid-template-columns: minmax(120px, 0.25fr) minmax(0, 1fr);
+	align-items: start;
+	gap: var(--space-3);
+	padding-top: var(--space-3);
+	border-top: 1px solid var(--hairline);
+}
+.risk-block:first-child {
+	padding-top: 0;
+	border-top: 0;
+}
+.risk-block-label {
+	color: var(--muted);
+	font-size: 11px;
+	font-weight: 700;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+}
+.risk-block-dag .risk-block-label {
+	color: var(--ink);
+}
+.risk-block-worker .risk-block-label {
+	color: var(--ink);
+}
+.risk-total {
+	margin: 0;
+	color: var(--amber);
+	font-size: 32px;
+	font-weight: 500;
+	line-height: 1;
+	font-variant-numeric: tabular-nums;
+}
+.panel-risk-attention .risk-total {
+	color: var(--red);
+}
+.risk-summary {
+	margin: 0;
+	color: var(--body);
+	font-size: 12px;
+	line-height: 1.6;
+}
+.panel-risk .risk-empty {
+	margin: 0;
+}
+
+.projection-fault {
+	display: flex;
+	align-items: flex-start;
+	gap: var(--space-3);
+	padding: 14px 16px;
+	border: 1px solid color-mix(in srgb, var(--red) 50%, var(--hairline));
+	border-radius: var(--radius-lg);
+	background: #fff8f9;
+}
+.projection-fault > i {
+	color: var(--red);
+	font-size: 20px;
+	line-height: 1.4;
+}
+.projection-fault-body {
+	display: grid;
+	gap: 4px;
+	min-width: 0;
+}
+.projection-fault-title {
+	margin: 0;
+	color: var(--ink);
+	font-size: 14px;
+	font-weight: 700;
+}
+.projection-fault-message {
+	margin: 0;
+	color: var(--body);
+	font-size: 12px;
+	overflow-wrap: anywhere;
+}
+.projection-fault-at {
+	margin: 0;
+	color: var(--muted);
+	font-size: 11px;
+}
+
+.risk-link,
+.active-dag-link,
+.link,
+.inbox-link,
+.artifact-link,
+.step-link {
+	color: var(--ink);
+	font-size: 12px;
+	font-weight: 700;
+	text-decoration-color: var(--orange);
+	text-decoration-thickness: 1px;
+	text-underline-offset: 4px;
+}
+
+.risk-link {
+	margin: 0;
+	padding: 0;
+	white-space: nowrap;
+}
+.risk-link:hover,
+.active-dag-link:hover,
+.link:hover,
+.inbox-link:hover,
+.artifact-link:hover,
+.step-link:hover {
+	color: var(--orange-active);
+}
+
+.active-dag-list {
+	display: grid;
+	gap: 10px;
+}
+.active-dag-card {
+	padding: 14px;
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-md);
+	background: var(--canvas-soft);
+}
+.active-dag-card-running {
+	border-left: 3px solid var(--orange);
+	padding-left: 12px;
+}
+.active-dag-header {
+	display: flex;
+	align-items: start;
+	justify-content: space-between;
+	gap: var(--space-3);
+	margin-bottom: 9px;
+}
+.active-dag-title {
+	min-width: 0;
+	color: var(--ink);
+	font-size: 14px;
+	font-weight: 700;
+	overflow-wrap: anywhere;
+}
+.active-dag-meta {
+	display: grid;
+	gap: 4px;
+	color: var(--body);
+	font-size: 12px;
+}
+.active-dag-link {
+	display: inline-block;
+	margin-top: 10px;
+}
+
+.meta-grid {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+	gap: 15px 24px;
+	margin: 0;
+}
+
+.meta-item {
+	min-width: 0;
+}
+.meta-item dt {
+	color: var(--muted);
+	font-size: 11px;
+	font-weight: 650;
+}
+.meta-item dd {
+	min-height: 24px;
+	margin: 4px 0 0;
+	padding-top: 5px;
+	border-top: 1px solid var(--hairline);
+	color: var(--ink);
+	overflow-wrap: anywhere;
+	font-size: 12px;
+}
+
+table {
+	width: 100%;
+	border-collapse: collapse;
+	font-size: 13px;
+}
+th,
+td {
+	padding: 11px 14px;
+	border-bottom: 1px solid var(--hairline);
+	text-align: left;
+	vertical-align: top;
+}
+th {
+	position: sticky;
+	top: 0;
+	z-index: 2;
+	background: var(--surface-muted);
+	color: var(--body);
+	font-size: 11px;
+	font-weight: 700;
+}
+td {
+	color: var(--body);
+}
+tbody tr:last-child td {
+	border-bottom: 0;
+}
+tbody tr {
+	transition: background-color var(--transition-fast);
+}
+tbody tr:hover {
+	background: #fff8f4;
+}
+tr.clickable {
+	cursor: pointer;
+}
+tr.clickable:focus-within {
+	outline: 2px solid var(--orange);
+	outline-offset: -2px;
+}
+
+.badge {
+	display: inline-flex;
+	align-items: center;
+	min-height: 22px;
+	padding: 2px 7px;
+	border: 1px solid currentColor;
+	border-radius: 999px;
+	background: transparent;
+	color: var(--muted);
+	font-size: 11px;
+	font-weight: 700;
+	line-height: 1.2;
+	white-space: nowrap;
+}
+
+.badge-succeeded,
+.badge-finished,
+.badge-completed,
+.badge-done,
+.liveness-active {
+	color: var(--green);
+	background: #f2faf5;
+}
+.badge-failed,
+.badge-error,
+.liveness-stale {
+	color: var(--red);
+	background: #fff5f7;
+}
+.badge-partial-failed {
+	color: #9a3a4f;
+	background: #fff7f8;
+}
+.badge-running,
+.badge-started {
+	color: var(--orange-active);
+	background: #fff5ed;
+}
+.badge-pending,
+.badge-queued,
+.badge-blocked,
+.badge-unknown {
+	color: var(--body);
+	background: var(--surface-muted);
+}
+.badge-skipped,
+.badge-reused,
+.liveness-quiet {
+	color: var(--blue);
+	background: #f2f6fb;
+}
+.liveness-timeout-risk {
+	color: var(--amber);
+	background: #fff8e7;
+}
+
+.dag-detail-workspace {
+	display: block;
+}
+
+.dag-inspector {
+	position: fixed;
+	z-index: 40;
+	top: 96px;
+	right: 24px;
+	bottom: 24px;
+	display: grid;
+	grid-template-rows: auto minmax(0, 1fr);
+	width: min(var(--dag-inspector-width, 440px), calc(100vw - 48px));
+	min-width: 0;
+	padding: 0;
+	overflow: hidden;
+	border-color: var(--hairline-strong);
+	box-shadow: 0 20px 48px rgba(38, 37, 30, 0.16);
+	opacity: 0;
+	pointer-events: none;
+	transform: translateX(calc(100% + 24px));
+	visibility: hidden;
+	transition:
+		transform var(--transition-base),
+		opacity var(--transition-base),
+		visibility 0s linear 240ms;
+}
+.dag-inspector.is-open {
+	opacity: 1;
+	pointer-events: auto;
+	transform: translateX(0);
+	visibility: visible;
+	transition-delay: 0s, 0s, 0s;
+}
+.dag-inspector-resize-handle {
+	position: absolute;
+	z-index: 1;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	width: 18px;
+	cursor: col-resize;
+	touch-action: none;
+	outline: none;
+}
+.dag-inspector-resize-handle::before {
+	content: "";
+	position: absolute;
+	top: 50%;
+	left: 7px;
+	width: 3px;
+	height: 52px;
+	transform: translateY(-50%);
+	border-radius: 2px;
+	background: var(--hairline-strong);
+	opacity: 0;
+	transition:
+		opacity var(--transition-base),
+		background var(--transition-base);
+}
+.dag-inspector-resize-handle:hover::before,
+.dag-inspector-resize-handle:focus-visible::before {
+	background: var(--orange);
+	opacity: 1;
+}
+.dag-inspector-resize-handle:focus-visible {
+	outline: 2px solid var(--orange);
+	outline-offset: -2px;
+}
+body.is-resizing-dag-inspector {
+	cursor: col-resize;
+	user-select: none;
+}
+body.is-resizing-dag-graph {
+	cursor: grabbing;
+	user-select: none;
+}
+.dag-inspector-header {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) auto;
+	gap: var(--space-3);
+	align-items: start;
+	padding: var(--space-4) var(--space-4) var(--space-3);
+	border-bottom: 1px solid var(--hairline);
+	background: var(--canvas-soft);
+}
+.dag-inspector-title {
+	display: grid;
+	gap: 6px;
+	min-width: 0;
+}
+.dag-inspector-title h3 {
+	margin: 0;
+	font-size: 14px;
+}
+.dag-inspector-node {
+	min-width: 0;
+	color: var(--body);
+	font-size: 12px;
+	font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+	overflow-wrap: anywhere;
+}
+.dag-inspector-controls {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+}
+.dag-inspector-close {
+	display: inline-grid;
+	place-items: center;
+	width: 32px;
+	height: 32px;
+	border: 1px solid var(--hairline-strong);
+	border-radius: var(--radius-sm);
+	background: var(--surface);
+	color: var(--body);
+	cursor: pointer;
+}
+.dag-inspector-close:hover,
+.dag-inspector-close:focus-visible {
+	border-color: var(--orange);
+	color: var(--orange-active);
+	outline: none;
+}
+.dag-inspector-tabs {
+	display: flex;
+	grid-column: 1 / -1;
+	gap: 4px;
+	margin-top: 2px;
+}
+.dag-inspector-tab {
+	min-height: 32px;
+	padding: 0 10px;
+	border: 1px solid transparent;
+	border-radius: var(--radius-sm);
+	background: transparent;
+	color: var(--muted);
+	font-size: 12px;
+	font-weight: 700;
+	cursor: pointer;
+}
+.dag-inspector-tab:hover,
+.dag-inspector-tab:focus-visible {
+	color: var(--ink);
+	outline: none;
+}
+.dag-inspector-tab[aria-selected="true"] {
+	border-color: color-mix(in srgb, var(--orange) 55%, var(--hairline));
+	background: #fff5ed;
+	color: var(--orange-active);
+}
+.dag-inspector-content {
+	min-height: 0;
+	padding: var(--space-4);
+	overflow: auto;
+	overscroll-behavior: contain;
+}
+.panel-graph {
+	min-height: 0;
+}
+
+.dag-graph-wrap {
+	display: grid;
+	gap: var(--space-3);
+}
+.dag-graph-toolbar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--space-3);
+}
+.dag-graph-summary,
+.dag-graph-fallback {
+	margin: 0;
+	color: var(--muted);
+	font-size: 12px;
+}
+.dag-graph-reset {
+	min-height: 32px;
+	padding: 0 10px;
+	border: 1px solid var(--hairline-strong);
+	border-radius: var(--radius-sm);
+	background: var(--surface);
+	color: var(--ink);
+	font-size: 12px;
+	font-weight: 650;
+	cursor: pointer;
+}
+.dag-graph-reset:hover,
+.dag-graph-reset:focus-visible {
+	border-color: var(--orange);
+	color: var(--orange-active);
+	outline: none;
+}
+.dag-graph-viewport {
+	min-height: 320px;
+	max-height: 560px;
+	overflow: auto;
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-md);
+	background: var(--canvas-soft);
+	scroll-behavior: auto;
+}
+.dag-graph {
+	display: block;
+}
+.dag-edge {
+	fill: none;
+	stroke: var(--hairline-strong);
+	stroke-width: 2;
+	transition:
+		opacity var(--transition-fast),
+		stroke var(--transition-fast);
+}
+#dag-arrow path {
+	fill: var(--hairline-strong);
+}
+.dag-graph-node {
+	cursor: pointer;
+	transition: opacity var(--transition-fast);
+}
+.dag-graph-node rect {
+	fill: var(--surface);
+	stroke: var(--hairline-strong);
+	stroke-width: 1.5;
+}
+.dag-graph-node:hover rect,
+.dag-graph-node:focus-visible rect {
+	stroke: var(--orange);
+	stroke-width: 2;
+}
+.dag-graph-node:focus {
+	outline: none;
+}
+.dag-graph-node.selected rect {
+	stroke: var(--orange);
+	stroke-width: 3;
+}
+.dag-graph-node.status-running rect,
+.dag-graph-node.status-started rect {
+	stroke: var(--orange);
+	fill: #fff7f0;
+}
+.dag-graph-node.status-failed rect,
+.dag-graph-node.status-error rect {
+	stroke: var(--red);
+	fill: #fff7f8;
+}
+.dag-graph-node.status-succeeded:hover rect,
+.dag-graph-node.status-succeeded:focus-visible rect,
+.dag-graph-node.status-finished:hover rect,
+.dag-graph-node.status-finished:focus-visible rect,
+.dag-graph-node.status-completed:hover rect,
+.dag-graph-node.status-completed:focus-visible rect,
+.dag-graph-node.status-done:hover rect,
+.dag-graph-node.status-done:focus-visible rect {
+	stroke: var(--green);
+	fill: #f2faf5;
+}
+.dag-graph-node.selected.status-succeeded rect,
+.dag-graph-node.selected.status-finished rect,
+.dag-graph-node.selected.status-completed rect,
+.dag-graph-node.selected.status-done rect {
+	stroke: var(--green);
+	fill: #f2faf5;
+}
+.dag-graph-node.status-skipped rect {
+	stroke-dasharray: 5 4;
+}
+.dag-node-label {
+	fill: var(--ink);
+	font-size: 13px;
+	font-weight: 700;
+}
+.dag-node-meta {
+	fill: var(--muted);
+	font-size: 11px;
+}
+.dag-node-status {
+	fill: var(--body);
+	font-size: 11px;
+}
+.dag-dimmed {
+	opacity: 0.28;
+}
+.dag-graph-node.status-running {
+	animation: graph-node-pulse 2s ease-in-out infinite;
+}
+@keyframes graph-node-pulse {
+	50% {
+		opacity: 0.72;
+	}
+}
+
+.dag-section-heading {
+	display: flex;
+	align-items: baseline;
+	justify-content: space-between;
+	gap: var(--space-3);
+	margin-bottom: var(--space-4);
+}
+.dag-section-heading h3 {
+	margin: 0;
+}
+.dag-section-meta {
+	color: var(--muted);
+	font-size: 12px;
+}
+#dag-nodes .dag-section-heading {
+	padding: var(--space-5) var(--space-5) 0;
+}
+#dag-nodes .dag-node-table {
+	border-top: 1px solid var(--hairline);
+}
+.dag-node-table {
+	table-layout: fixed;
+}
+.dag-node-table th:nth-child(1),
+.dag-node-table td:nth-child(1) {
+	width: 19%;
+}
+.dag-node-table th:nth-child(2),
+.dag-node-table td:nth-child(2) {
+	width: 7%;
+}
+.dag-node-table th:nth-child(3),
+.dag-node-table td:nth-child(3) {
+	width: 12%;
+}
+.dag-node-table th:nth-child(4),
+.dag-node-table td:nth-child(4) {
+	width: 16%;
+}
+.dag-node-table th:nth-child(5),
+.dag-node-table td:nth-child(5) {
+	width: 12%;
+}
+.dag-node-table th:nth-child(6),
+.dag-node-table td:nth-child(6) {
+	width: 9%;
+}
+.dag-node-table th:nth-child(7),
+.dag-node-table td:nth-child(7) {
+	width: 25%;
+}
+.dag-node-table td:nth-child(1),
+.dag-node-table td:nth-child(4),
+.dag-node-table td:nth-child(7) {
+	overflow-wrap: anywhere;
+}
+.dag-active-node {
+	background: #fff8f3;
+}
+.dag-error-node {
+	background: #fff7f8;
+}
+.dag-node-selected {
+	box-shadow: inset 3px 0 0 var(--orange);
+}
+
+.rank-lanes {
+	display: grid;
+	gap: var(--space-3);
+}
+.rank-lane {
+	display: grid;
+	grid-template-columns: 56px minmax(0, 1fr);
+	gap: var(--space-3);
+	align-items: center;
+}
+.rank-lane-label {
+	color: var(--muted);
+	font-size: 11px;
+	font-weight: 700;
+}
+.rank-lane-nodes {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+.rank-node-chip {
+	display: inline-flex;
+	align-items: center;
+	gap: 7px;
+	min-height: 32px;
+	padding: 5px 8px;
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-sm);
+	background: var(--canvas-soft);
+}
+.rank-node-active {
+	border-color: var(--orange);
+}
+.rank-node-error {
+	border-color: var(--red);
+}
+.rank-node-id {
+	color: var(--ink);
+	font-size: 11px;
+}
+.rank-node-dur {
+	color: var(--muted);
+	font-size: 11px;
+}
+
+.process-timeline-note {
+	margin: 0 0 var(--space-2);
+	color: var(--muted);
+	font-size: 11px;
+}
+.process-timeline {
+	display: grid;
+	gap: 0;
+	margin: 0;
+	padding: var(--space-2) 0;
+	list-style: none;
+}
+.process-timeline-item {
+	display: grid;
+	grid-template-columns: 20px minmax(0, 1fr);
+	align-items: stretch;
+	min-height: 34px;
+}
+.process-timeline-item.has-time {
+	grid-template-columns: 20px 92px minmax(0, 1fr);
+}
+.process-timeline-rail {
+	position: relative;
+	display: grid;
+	place-items: center;
+	min-height: 34px;
+}
+.process-timeline-rail::before {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	width: 1px;
+	background: var(--hairline-strong);
+	content: "";
+}
+.process-timeline-item.is-first .process-timeline-rail::before {
+	top: 50%;
+}
+.process-timeline-item.is-last .process-timeline-rail::before {
+	bottom: 50%;
+}
+.process-timeline-dot {
+	position: relative;
+	z-index: 1;
+	width: 8px;
+	height: 8px;
+	border: 2px solid var(--surface);
+	border-radius: 50%;
+	background: var(--muted-soft);
+}
+.process-timeline-lifecycle .process-timeline-dot {
+	background: var(--lavender);
+}
+.process-timeline-tool-start .process-timeline-dot {
+	background: var(--orange);
+}
+.process-timeline-tool-end .process-timeline-dot {
+	background: var(--green);
+}
+.process-timeline-assistant .process-timeline-dot {
+	background: var(--blue);
+}
+.process-timeline-protocol .process-timeline-dot {
+	background: var(--muted-soft);
+}
+.process-timeline-time {
+	padding: 9px 0;
+	color: var(--muted);
+	font-size: 10px;
+	font-variant-numeric: tabular-nums;
+}
+.process-timeline-label {
+	min-width: 0;
+	padding: 8px 0 8px var(--space-2);
+	color: var(--body);
+	font-size: 12px;
+	line-height: 1.5;
+	overflow-wrap: anywhere;
+}
+.process-timeline-protocol .process-timeline-label {
+	color: var(--muted);
+	font-size: 11px;
+}
+
+.markdown-output {
+	display: grid;
+	gap: var(--space-3);
+	color: var(--body);
+	font-size: 13px;
+	line-height: 1.65;
+}
+.markdown-output > :first-child {
+	margin-top: 0;
+}
+.markdown-output > :last-child {
+	margin-bottom: 0;
+}
+.markdown-output h1,
+.markdown-output h2,
+.markdown-output h3,
+.markdown-output h4 {
+	margin: var(--space-5) 0 var(--space-2);
+	color: var(--ink);
+	line-height: 1.3;
+}
+.markdown-output h1 {
+	font-size: 21px;
+}
+.markdown-output h2 {
+	font-size: 18px;
+}
+.markdown-output h3 {
+	font-size: 16px;
+}
+.markdown-output h4 {
+	font-size: 14px;
+}
+.markdown-output p,
+.markdown-output blockquote,
+.markdown-output ul,
+.markdown-output ol {
+	margin: 0;
+}
+.markdown-output ul,
+.markdown-output ol {
+	padding-left: 22px;
+}
+.markdown-output blockquote {
+	padding-left: 12px;
+	border-left: 3px solid var(--peach);
+	color: var(--body);
+}
+.markdown-output pre {
+	margin: 0;
+	padding: var(--space-3);
+	overflow: auto;
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-sm);
+	background: var(--surface-ink);
+	color: #f8f7f2;
+	font-size: 12px;
+	line-height: 1.65;
+}
+.markdown-output code {
+	padding: 1px 4px;
+	border-radius: 3px;
+	background: var(--surface-muted);
+	color: var(--ink);
+	font-size: 0.92em;
+}
+.markdown-output pre code {
+	padding: 0;
+	background: transparent;
+	color: inherit;
+}
+.markdown-output a {
+	color: var(--orange-active);
+	text-decoration-color: var(--orange);
+	text-underline-offset: 3px;
+}
+.markdown-output table {
+	font-size: 12px;
+}
+.markdown-output th,
+.markdown-output td {
+	padding: 8px 9px;
+}
+.markdown-output th {
+	position: static;
+}
+.markdown-error {
+	display: grid;
+	gap: var(--space-2);
+	padding-top: var(--space-4);
+	border-top: 1px solid var(--hairline);
+}
+.markdown-error-title {
+	margin: 0;
+	color: var(--red);
+	font-size: 12px;
+	font-weight: 700;
+}
+
+.spec-evidence-section { padding-bottom: var(--space-4); border-bottom: 1px solid var(--hairline); }
+.spec-evidence-section + .spec-evidence-section { margin-top: var(--space-4); }
+.spec-evidence-section h4 { margin: 0 0 var(--space-2); color: var(--ink); font-size: 12px; font-weight: 700; }
+.spec-evidence-summary { margin: var(--space-2) 0 0; color: var(--body); font-size: 12px; line-height: 1.6; }
+.spec-evidence-list { display: grid; gap: 6px; margin: var(--space-2) 0 0; padding: 0; list-style: none; }
+.spec-evidence-list li { display: flex; align-items: flex-start; gap: 6px; color: var(--body); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
+.spec-evidence-list li > i { flex-shrink: 0; margin-top: 2px; color: var(--muted); font-size: 13px; }
+.spec-evidence-list code { font-size: 11px; }
+.spec-evidence-time { margin-left: auto; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.spec-evidence-warning { display: flex; align-items: flex-start; gap: 8px; margin-top: var(--space-4); padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--amber) 50%, var(--hairline)); border-radius: var(--radius-sm); background: #fff8e7; color: var(--body); font-size: 12px; line-height: 1.6; }
+.spec-evidence-warning > i { flex-shrink: 0; margin-top: 2px; color: var(--amber); }
+
+.run-layer-process {
+	display: grid;
+	gap: var(--space-4);
+	margin-top: var(--space-4);
+}
+.run-layer-diagnosis {
+	display: grid;
+	gap: var(--space-4);
+	margin-top: var(--space-4);
+}
+.run-detail-workspace {
+	display: grid;
+	grid-template-columns: minmax(220px, 0.5fr) minmax(0, 1.25fr);
+	gap: var(--space-4);
+	align-items: start;
+}
+.run-evidence {
+	display: grid;
+	gap: var(--space-4);
+	min-width: 0;
+}
+.artifact-preview-list {
+	gap: 12px;
+}
+.artifact-preview-head {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+	align-items: baseline;
+	margin-bottom: 6px;
+}
+.artifact-preview-label {
+	font-size: 12px;
+	color: var(--muted);
+	overflow-wrap: anywhere;
+}
+.artifact-preview-body {
+	max-height: 240px;
+	overflow: auto;
+	font-size: 12px;
+}
+.artifact-preview-error {
+	color: var(--red);
+}
+.batch-task-links,
+.batch-task-evidence {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 4px;
+	align-items: center;
+}
+.object-link {
+	color: var(--body);
+	text-decoration: underline;
+	text-underline-offset: 2px;
+}
+.panel-rail {
+	background: var(--canvas-soft);
+}
+.step-timeline {
+	display: grid;
+	gap: 0;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+.step-timeline li {
+	display: grid;
+	grid-template-columns: 18px minmax(0, 1fr) auto;
+	align-items: center;
+	gap: 8px;
+	min-height: 38px;
+	border-bottom: 1px solid var(--hairline);
+}
+.step-timeline li:last-child {
+	border-bottom: 0;
+}
+.step-marker {
+	display: inline-grid;
+	place-items: center;
+	width: 16px;
+	height: 16px;
+	border: 1px solid var(--hairline-strong);
+	border-radius: 50%;
+	color: var(--muted);
+	font-size: 10px;
+}
+.step-marker.succeeded {
+	border-color: var(--green);
+	color: var(--green);
+}
+.step-marker.running {
+	border-color: var(--orange);
+	color: var(--orange-active);
+}
+.step-marker.failed {
+	border-color: var(--red);
+	color: var(--red);
+}
+.step-name {
+	min-width: 0;
+	color: var(--body);
+	font-size: 12px;
+	overflow-wrap: anywhere;
+}
+.step-duration {
+	color: var(--muted);
+	font-size: 11px;
+	font-variant-numeric: tabular-nums;
+}
+
+.output-block {
+	max-height: 480px;
+	margin: 0;
+	padding: var(--space-4);
+	overflow: auto;
+	border: 1px solid var(--hairline);
+	border-radius: var(--radius-sm);
+	background: var(--surface-ink);
+	color: #f8f7f2;
+	font-size: 12px;
+	line-height: 1.7;
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+}
+
+.artifact-list {
+	display: grid;
+	gap: 8px;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+.artifact-list li {
+	min-width: 0;
+}
+.artifact-list a {
+	color: var(--body);
+	font-size: 12px;
+	overflow-wrap: anywhere;
+}
+.artifact-links {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 6px;
+}
+.muted {
+	color: var(--muted);
+}
+
+.dag-run-timeline {
+	position: relative;
+	display: grid;
+	gap: 0;
+}
+.dag-run-timeline::before {
+	position: absolute;
+	top: 12px;
+	bottom: 12px;
+	left: 10px;
+	width: 1px;
+	background: var(--hairline-strong);
+	content: "";
+}
+.dag-run-timeline-item {
+	position: relative;
+	display: grid;
+	grid-template-columns: 24px minmax(0, 1fr) auto;
+	gap: var(--space-3);
+	align-items: start;
+	padding: 9px 0;
+	color: inherit;
+	text-decoration: none;
+	transition: background-color var(--transition-fast);
+}
+.dag-run-timeline-item:hover,
+.dag-run-timeline-item:focus-visible {
+	margin-inline: -8px;
+	padding-inline: 8px;
+	background: #fff8f4;
+	outline: none;
+}
+.dag-run-timeline-rail {
+	position: relative;
+	display: grid;
+	place-items: center;
+	min-height: 24px;
+}
+.dag-run-timeline-dot {
+	position: relative;
+	z-index: 1;
+	width: 9px;
+	height: 9px;
+	border: 2px solid var(--surface);
+	border-radius: 50%;
+	background: var(--muted-soft);
+}
+.dag-run-timeline-dot.status-finished,
+.dag-run-timeline-dot.status-succeeded,
+.dag-run-timeline-dot.status-completed {
+	background: var(--green);
+}
+.dag-run-timeline-dot.status-failed,
+.dag-run-timeline-dot.status-error,
+.dag-run-timeline-dot.status-partial_failed {
+	background: var(--red);
+}
+.dag-run-timeline-dot.status-running,
+.dag-run-timeline-dot.status-started {
+	background: var(--orange);
+}
+.dag-run-timeline-content {
+	display: grid;
+	gap: 3px;
+	min-width: 0;
+}
+.dag-run-timeline-title {
+	color: var(--ink);
+	font-size: 13px;
+	font-weight: 700;
+	overflow-wrap: anywhere;
+}
+.dag-run-timeline-meta {
+	color: var(--muted);
+	font-size: 11px;
+	overflow-wrap: anywhere;
+}
+.dag-run-timeline-status {
+	padding-top: 1px;
+}
+
+#failures-list .row-failed td:first-child,
+#failures-list .row-blocked td:first-child {
+	color: var(--red);
+	font-weight: 700;
+}
+
+@media (max-width: 1320px) {
+	.kpi-grid {
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+	}
+	.kpi-card:nth-child(4) {
+		border-left: 0;
+	}
+	.kpi-card:nth-child(n + 4) {
+		border-top: 1px solid var(--hairline);
+	}
+	.dashboard-workspace {
+		grid-template-columns: 1fr;
+	}
+	.run-detail-workspace {
+		grid-template-columns: minmax(200px, 0.45fr) minmax(0, 1fr);
+	}
+	.panel-artifacts {
+		grid-column: 1 / -1;
+	}
+}
+
+@media (max-width: 1080px) {
+	#app {
+		width: min(100% - 32px, 1680px);
+	}
+	.site-header {
+		grid-template-columns: auto auto 1fr;
+		grid-template-areas: "brand nav status" "crumb crumb crumb";
+		row-gap: 8px;
+	}
+	.run-detail-workspace {
+		grid-template-columns: 1fr;
+	}
+	.panel-artifacts {
+		grid-column: auto;
+	}
+}
+
+@media (max-width: 720px) {
+	#app {
+		width: min(100% - 24px, 1680px);
+	}
+	.site-header {
+		margin-bottom: var(--space-6);
+	}
+	.kpi-grid {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+	.kpi-card:nth-child(n) {
+		border-top: 1px solid var(--hairline);
+		border-left: 1px solid var(--hairline);
+	}
+	.kpi-card:nth-child(1),
+	.kpi-card:nth-child(2) {
+		border-top: 0;
+	}
+	.kpi-card:nth-child(odd) {
+		border-left: 0;
+	}
+	.dag-inspector {
+		top: 76px;
+		right: 12px;
+		bottom: 12px;
+		width: calc(100vw - 24px);
+	}
+	.dag-inspector-resize-handle {
+		display: none;
+	}
+	.dashboard-secondary {
+		grid-template-columns: 1fr;
+	}
+	.risk-block {
+		grid-template-columns: 1fr;
+		gap: var(--space-2);
+	}
+	.panel {
+		padding: var(--space-4);
+	}
+	.panel-table {
+		overflow-x: auto;
+		padding: 0;
+	}
+	table {
+		min-width: 680px;
+	}
+	.view h2 {
+		font-size: 24px;
+	}
+}
+
+/* R3: object relation bar + recommended commands (copy-only) */
+.object-relations-panel {
+	padding: var(--space-3) var(--space-4);
+}
+
+.object-relation-bar {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: var(--space-2);
+	font-size: 0.9rem;
+}
+
+.object-relation-item {
+	display: inline-flex;
+	align-items: baseline;
+	gap: 0.25rem;
+}
+
+.object-relation-label {
+	color: var(--muted, #6b6560);
+	font-weight: 600;
+	font-size: 0.75rem;
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+}
+
+.object-relation-sep {
+	color: var(--muted, #6b6560);
+	opacity: 0.7;
+	user-select: none;
+}
+
+.object-link {
+	color: var(--accent, #8a5a2b);
+	text-decoration: none;
+	word-break: break-all;
+}
+
+.object-link:hover,
+.object-link:focus-visible {
+	text-decoration: underline;
+}
+
+.recommended-command {
+	border: 1px solid var(--border, #e2ddd4);
+	border-radius: 8px;
+	padding: var(--space-3);
+	margin: var(--space-2) 0;
+	background: #fbf9f4;
+}
+
+.recommended-command-head {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--space-2);
+	align-items: baseline;
+	margin-bottom: var(--space-2);
+}
+
+.recommended-command-kind {
+	font-size: 0.75rem;
+	font-weight: 600;
+	color: var(--muted, #6b6560);
+	text-transform: uppercase;
+}
+
+.recommended-command-label {
+	font-weight: 600;
+}
+
+.recommended-command-body {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: var(--space-2);
+}
+
+.recommended-command-text {
+	flex: 1 1 12rem;
+	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+	font-size: 0.85rem;
+	word-break: break-all;
+	background: #f0ebe3;
+	padding: 0.35rem 0.5rem;
+	border-radius: 4px;
+}
+
+button.copy-command {
+	appearance: none;
+	border: 1px solid var(--border, #d4cdc2);
+	background: #fff;
+	border-radius: 6px;
+	padding: 0.35rem 0.75rem;
+	cursor: pointer;
+	font-size: 0.85rem;
+}
+
+button.copy-command:hover,
+button.copy-command:focus-visible {
+	border-color: var(--accent, #8a5a2b);
+}
+
+.executed-facts {
+	border-left: 3px solid #6b8f71;
+}
+
+.advisory-note {
+	margin: 0 0 var(--space-2);
+	font-size: 0.85rem;
+}
+
+.blocking-list {
+	margin: 0;
+	padding-left: 1.25rem;
+}
+
+.blocking-message {
+	font-weight: 500;
+}
+
+.blocking-meta {
+	font-size: 0.85rem;
+	color: var(--muted, #6b6560);
+	margin: 0.15rem 0 0.35rem;
+}
+
+
+
+/* R5: unified view states + information hierarchy */
+.view-state {
+	border-radius: var(--radius, 8px);
+	padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
+	margin: 0 0 var(--space-3, 0.75rem);
+}
+.view-state-loading {
+	border: 1px dashed var(--border, #e2dcd4);
+	background: var(--surface-muted, #f7f4ef);
+	color: var(--muted, #6b6560);
+}
+.view-state-empty {
+	border: 1px solid var(--border, #e2dcd4);
+	background: var(--surface, #fffdf9);
+}
+.view-state-degraded {
+	/* projection-fault styles also apply */
+}
+.view-state-error {
+	border: 1px solid var(--danger-border, #e8b4b4);
+	background: var(--danger-bg, #fdf2f2);
+	color: var(--danger-text, #8a2f2f);
+}
+.view-state-error p {
+	margin: 0;
+}
+.layer-primary {
+	/* main facts */
+}
+.layer-diagnostic {
+	opacity: 0.98;
+}
+.layer-raw {
+	font-size: 0.9rem;
+	color: var(--muted, #6b6560);
+}
+.pool-filters {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem 0.75rem;
+	align-items: center;
+	margin: 0 0 var(--space-3, 0.75rem);
+}
+.pool-filters label {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.35rem;
+	font-size: 0.9rem;
+}
+.pool-filters select,
+.pool-filters input[type="search"] {
+	font: inherit;
+	padding: 0.25rem 0.5rem;
+	border: 1px solid var(--border, #e2dcd4);
+	border-radius: 6px;
+	background: var(--surface, #fff);
+	min-height: 2rem;
+}
+.pool-filters select:focus-visible,
+.pool-filters input[type="search"]:focus-visible {
+	outline: 2px solid var(--focus, #3d6bf3);
+	outline-offset: 2px;
+}
+
+@media (max-width: 1024px) {
+	.pool-filters {
+		flex-direction: column;
+		align-items: stretch;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	*,
+	*::before,
+	*::after {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		scroll-behavior: auto !important;
+		transition-duration: 0.01ms !important;
+	}
+}