@prismatic-io/lux 0.0.2-preview.4 → 0.0.2-preview.40

package/viewer/app.css

@@ -0,0 +1,2111 @@
+:root {
+  color-scheme: only dark;
+  --ink: #f4f1e8;
+  --muted: #969b9d;
+  --faint: #686e73;
+  --canvas: #0b0d0f;
+  --panel: #111416;
+  --panel-raised: #171b1e;
+  --line: #292e31;
+  --line-soft: #202528;
+  --lime: #c8f169;
+  --lime-ink: #182208;
+  --coral: #ff8066;
+  --amber: #f7c96b;
+  --blue: #77a8ff;
+  --radius: 12px;
+  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-synthesis: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  background: var(--canvas);
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+  background:
+    radial-gradient(circle at 72% -15%, rgb(200 241 105 / 7%), transparent 31rem), var(--canvas);
+  color: var(--ink);
+}
+
+h1,
+h2,
+h3,
+p {
+  margin-top: 0;
+}
+
+button,
+input {
+  font: inherit;
+}
+
+button {
+  color: inherit;
+}
+
+.app-shell {
+  display: grid;
+  grid-template-columns: 218px minmax(0, 1fr);
+  min-height: 100vh;
+}
+
+.sidebar {
+  position: sticky;
+  top: 0;
+  display: flex;
+  height: 100vh;
+  flex-direction: column;
+  border-right: 1px solid var(--line);
+  background: rgb(9 11 12 / 88%);
+  padding: 24px 18px 20px;
+  backdrop-filter: blur(18px);
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: inherit;
+  text-decoration: none;
+}
+
+.brand-mark {
+  display: grid;
+  width: 39px;
+  height: 39px;
+  place-items: center;
+  border: 1px solid var(--lime);
+  border-radius: 10px 3px 10px 3px;
+  color: var(--lime);
+  font:
+    700 11px / 1 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  letter-spacing: 0.08em;
+}
+
+.brand strong,
+.brand small {
+  display: block;
+  letter-spacing: 0.15em;
+}
+
+.brand strong {
+  font-size: 14px;
+}
+
+.brand small {
+  margin-top: 2px;
+  color: var(--muted);
+  font:
+    500 9px / 1.2 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+}
+
+.primary-nav {
+  display: grid;
+  gap: 7px;
+  margin-top: 56px;
+}
+
+.nav-item {
+  display: grid;
+  grid-template-columns: 26px 1fr auto;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  border: 1px solid transparent;
+  border-radius: 9px;
+  background: transparent;
+  padding: 10px;
+  color: var(--muted);
+  text-align: left;
+  cursor: pointer;
+}
+
+.nav-item:hover {
+  background: var(--panel);
+  color: var(--ink);
+}
+
+.nav-item.is-active {
+  border-color: #384026;
+  background: #171d12;
+  color: var(--ink);
+}
+
+.nav-glyph {
+  display: grid;
+  width: 24px;
+  height: 24px;
+  place-items: center;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  color: var(--faint);
+  font:
+    700 9px / 1 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+}
+
+.is-active .nav-glyph {
+  border-color: #627632;
+  color: var(--lime);
+}
+
+.nav-count {
+  min-width: 24px;
+  border-radius: 99px;
+  background: #202426;
+  padding: 3px 7px;
+  color: var(--muted);
+  font:
+    600 10px / 1 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  text-align: center;
+}
+
+.sidebar-note {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: auto;
+  border-top: 1px solid var(--line-soft);
+  padding: 18px 8px;
+}
+
+.sidebar-note strong,
+.sidebar-note small {
+  display: block;
+}
+
+.sidebar-note strong {
+  font-size: 11px;
+}
+
+.sidebar-note small {
+  margin-top: 3px;
+  color: var(--faint);
+  font-size: 9px;
+}
+
+.pulse-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--lime);
+  box-shadow: 0 0 0 5px rgb(200 241 105 / 8%);
+}
+
+.shortcut-card {
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--panel);
+  padding: 12px;
+}
+
+.shortcut-card p {
+  margin: 0 0 9px;
+  color: var(--faint);
+  font:
+    600 9px / 1 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.shortcut-card dl {
+  display: grid;
+  gap: 7px;
+  margin: 0;
+}
+
+.shortcut-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.shortcut-card dt,
+.shortcut-card dd {
+  margin: 0;
+  color: var(--muted);
+  font-size: 9px;
+}
+
+kbd {
+  border: 1px solid #373d40;
+  border-bottom-color: #4d5458;
+  border-radius: 4px;
+  background: #1a1e20;
+  padding: 2px 5px;
+  color: var(--muted);
+  font:
+    500 9px / 1 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+}
+
+main {
+  min-width: 0;
+  padding: 31px 34px 20px;
+}
+
+.topbar {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 24px;
+}
+
+.eyebrow {
+  color: var(--lime);
+  font:
+    600 9px / 1 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  letter-spacing: 0.13em;
+  text-transform: uppercase;
+}
+
+h1 {
+  margin-bottom: 0;
+  font-size: clamp(25px, 3vw, 36px);
+  font-weight: 570;
+  letter-spacing: -0.045em;
+}
+
+.topbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.search {
+  display: grid;
+  grid-template-columns: auto minmax(130px, 270px) auto;
+  align-items: center;
+  gap: 9px;
+  height: 40px;
+  border: 1px solid var(--line);
+  border-radius: 9px;
+  background: var(--panel);
+  padding: 0 10px;
+  color: var(--faint);
+}
+
+.search:focus-within {
+  border-color: #617635;
+  box-shadow: 0 0 0 3px rgb(200 241 105 / 6%);
+}
+
+.search input {
+  min-width: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: var(--ink);
+  font-size: 11px;
+}
+
+.search input::placeholder {
+  color: var(--faint);
+}
+
+.icon-button {
+  display: grid;
+  width: 40px;
+  height: 40px;
+  place-items: center;
+  border: 1px solid var(--line);
+  border-radius: 9px;
+  background: var(--panel);
+  color: var(--muted);
+  cursor: pointer;
+}
+
+.icon-button:hover {
+  border-color: #485054;
+  color: var(--ink);
+}
+
+.icon-button.is-spinning {
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.metrics {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  margin-top: 27px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: rgb(17 20 22 / 75%);
+}
+
+.metrics article {
+  min-width: 0;
+  padding: 17px 19px 15px;
+}
+
+.metrics article + article {
+  border-left: 1px solid var(--line);
+}
+
+.metrics span,
+.metrics small {
+  display: block;
+  overflow: hidden;
+  color: var(--muted);
+  font-size: 9px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.metrics strong {
+  display: block;
+  margin: 9px 0 5px;
+  font:
+    520 24px / 1 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  letter-spacing: -0.05em;
+}
+
+.workspace {
+  display: grid;
+  grid-template-columns: minmax(360px, 0.86fr) minmax(470px, 1.14fr);
+  min-height: 590px;
+  margin-top: 18px;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: var(--panel);
+}
+
+.collection-pane,
+.inspector {
+  min-width: 0;
+}
+
+.collection-pane {
+  border-right: 1px solid var(--line);
+}
+
+.collection-toolbar {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  padding: 20px 20px 15px;
+}
+
+.collection-toolbar h2 {
+  margin: 6px 0 0;
+  font-size: 19px;
+  font-weight: 570;
+  letter-spacing: -0.03em;
+}
+
+.collection-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.compare-button,
+.secondary-button,
+.back-button {
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background: #181c1e;
+  padding: 7px 10px;
+  color: var(--muted);
+  font-size: 9px;
+  cursor: pointer;
+}
+
+.compare-button:hover,
+.compare-button.is-active,
+.secondary-button:hover,
+.back-button:hover {
+  border-color: #627632;
+  color: var(--lime);
+}
+
+.compare-tray {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: 8px;
+  border-top: 1px solid var(--line-soft);
+  border-bottom: 1px solid var(--line);
+  background: #141914;
+  padding: 11px 20px;
+}
+
+.compare-tray[hidden] {
+  display: none;
+}
+
+.compare-tray span {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--muted);
+  font-size: 9px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.compare-tray b {
+  display: inline-grid;
+  width: 19px;
+  height: 19px;
+  margin-right: 6px;
+  place-items: center;
+  border-radius: 5px;
+  background: var(--lime);
+  color: var(--lime-ink);
+  font-size: 8px;
+}
+
+.compare-tray i {
+  color: var(--faint);
+  font-style: normal;
+}
+
+.compare-tray small {
+  grid-column: 1 / -1;
+  color: var(--faint);
+  font-size: 8px;
+  text-align: center;
+}
+
+.result-count {
+  color: var(--faint);
+  font:
+    500 9px / 1 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+}
+
+.status-filters {
+  display: flex;
+  gap: 6px;
+  overflow-x: auto;
+  border-bottom: 1px solid var(--line);
+  border-right: 0;
+  border-left: 0;
+  border-top: 0;
+  margin: 0;
+  min-width: 0;
+  padding: 0 20px 13px;
+}
+
+.filter-chip {
+  flex: none;
+  border: 1px solid var(--line);
+  border-radius: 99px;
+  background: transparent;
+  padding: 5px 9px;
+  color: var(--muted);
+  font-size: 9px;
+  cursor: pointer;
+}
+
+.filter-chip:hover,
+.filter-chip.is-active {
+  border-color: #56662f;
+  background: #1a2015;
+  color: var(--lime);
+}
+
+.collection-list {
+  max-height: 620px;
+  overflow-y: auto;
+}
+
+.evidence-row {
+  position: relative;
+  display: grid;
+  grid-template-columns: 12px minmax(0, 1fr) auto;
+  gap: 12px;
+  width: 100%;
+  border: 0;
+  border-bottom: 1px solid var(--line-soft);
+  background: transparent;
+  padding: 16px 18px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.evidence-row:hover {
+  background: #15191b;
+}
+
+.evidence-row.is-selected {
+  background: #1a1f1a;
+  box-shadow: inset 3px 0 var(--lime);
+}
+
+.evidence-row.is-compare-mode {
+  grid-template-columns: 28px 12px minmax(0, 1fr) auto;
+}
+
+.evidence-row.is-compared {
+  background: #1a1f1a;
+}
+
+.compare-slot {
+  display: grid;
+  width: 25px;
+  height: 25px;
+  place-items: center;
+  border: 1px solid #667c32;
+  border-radius: 6px;
+  background: var(--lime);
+  color: var(--lime-ink);
+  font:
+    700 9px / 1 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+}
+
+.compare-slot.empty {
+  border-color: var(--line);
+  background: transparent;
+  color: var(--faint);
+}
+
+.status-pin {
+  width: 8px;
+  height: 8px;
+  margin-top: 4px;
+  border-radius: 50%;
+  background: var(--faint);
+}
+
+.status-pin.passed {
+  background: var(--lime);
+}
+
+.status-pin.failed,
+.status-pin.error {
+  background: var(--coral);
+}
+
+.status-pin.running {
+  background: var(--blue);
+  box-shadow: 0 0 0 4px rgb(119 168 255 / 10%);
+}
+
+.status-pin.aborted {
+  background: var(--amber);
+}
+
+.row-main {
+  min-width: 0;
+}
+
+.row-title {
+  display: block;
+  overflow: hidden;
+  font-size: 12px;
+  font-weight: 610;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.row-meta {
+  display: flex;
+  gap: 7px;
+  margin-top: 7px;
+  overflow: hidden;
+  color: var(--faint);
+  font:
+    500 9px / 1.4 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  white-space: nowrap;
+}
+
+.row-meta span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.row-metric {
+  align-self: center;
+  min-width: 52px;
+  text-align: right;
+}
+
+.row-metric strong,
+.row-metric small {
+  display: block;
+}
+
+.row-metric strong {
+  font:
+    550 13px / 1 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+}
+
+.row-metric small {
+  margin-top: 5px;
+  color: var(--faint);
+  font-size: 8px;
+  text-transform: uppercase;
+}
+
+.loading-card,
+.empty-list {
+  display: grid;
+  min-height: 300px;
+  place-content: center;
+  padding: 30px;
+  color: var(--faint);
+  text-align: center;
+}
+
+.loading-card span {
+  width: 180px;
+  height: 8px;
+  margin: 5px auto;
+  border-radius: 99px;
+  background: linear-gradient(90deg, #1b2022 30%, #293033 50%, #1b2022 70%);
+  background-size: 260% 100%;
+  animation: shimmer 1.3s infinite;
+}
+
+.loading-card span:nth-child(2) {
+  width: 135px;
+}
+
+.loading-card span:nth-child(3) {
+  width: 160px;
+}
+
+.loading-card p {
+  margin: 18px 0 0;
+  font-size: 10px;
+}
+
+@keyframes shimmer {
+  to {
+    background-position: -260% 0;
+  }
+}
+
+.inspector {
+  max-height: 710px;
+  overflow-y: auto;
+  background: linear-gradient(rgb(255 255 255 / 1%), rgb(255 255 255 / 1%)), var(--panel);
+}
+
+.inspector-empty {
+  display: grid;
+  min-height: 560px;
+  place-content: center;
+  padding: 40px;
+  text-align: center;
+}
+
+.empty-glyph {
+  display: grid;
+  width: 54px;
+  height: 54px;
+  margin: 0 auto 18px;
+  place-items: center;
+  border: 1px solid var(--line);
+  border-radius: 50%;
+  color: var(--lime);
+  font-size: 21px;
+}
+
+.inspector-empty h2 {
+  margin-bottom: 8px;
+  font-size: 16px;
+}
+
+.inspector-empty p {
+  max-width: 300px;
+  color: var(--faint);
+  font-size: 11px;
+  line-height: 1.6;
+}
+
+.detail-header {
+  padding: 23px 24px 20px;
+  border-bottom: 1px solid var(--line);
+}
+
+.detail-kicker {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.status-badge {
+  border-radius: 99px;
+  padding: 4px 8px;
+  background: #272c2f;
+  color: var(--muted);
+  font:
+    700 8px / 1 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.status-badge.passed {
+  background: var(--lime);
+  color: var(--lime-ink);
+}
+
+.status-badge.failed,
+.status-badge.error {
+  background: #3b211f;
+  color: #ff9a87;
+}
+
+.status-badge.running {
+  background: #172943;
+  color: #9ac0ff;
+}
+
+.status-badge.aborted {
+  background: #382f1d;
+  color: var(--amber);
+}
+
+.status-badge.promote {
+  background: var(--lime);
+  color: var(--lime-ink);
+}
+
+.status-badge.retain,
+.status-badge.incomplete {
+  background: #382f1d;
+  color: var(--amber);
+}
+
+.status-badge.reject {
+  background: #3b211f;
+  color: #ff9a87;
+}
+
+.detail-path {
+  overflow: hidden;
+  color: var(--faint);
+  font:
+    500 8px / 1 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.detail-title-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18px;
+}
+
+.detail-title-row h2 {
+  margin-bottom: 8px;
+  font-size: 22px;
+  font-weight: 570;
+  letter-spacing: -0.035em;
+}
+
+.detail-subtitle {
+  margin: 0;
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+.score-block {
+  min-width: 72px;
+  border-left: 1px solid var(--line);
+  padding-left: 18px;
+  text-align: right;
+}
+
+.score-block strong,
+.score-block small {
+  display: block;
+}
+
+.score-block strong {
+  font:
+    560 23px / 1 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+}
+
+.score-block small {
+  margin-top: 5px;
+  color: var(--faint);
+  font-size: 8px;
+  text-transform: uppercase;
+}
+
+.detail-body {
+  display: grid;
+  gap: 22px;
+  padding: 21px 24px 28px;
+}
+
+.attention-banner,
+.integrity-banner {
+  border: 1px solid #5a302b;
+  border-radius: 8px;
+  background: #211716;
+  padding: 11px 13px;
+  color: #ffad9d;
+  font-size: 9px;
+  line-height: 1.55;
+}
+
+.integrity-banner {
+  border-color: #405126;
+  background: #171d12;
+  color: var(--lime);
+}
+
+.detail-stats {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  border: 1px solid var(--line);
+  border-radius: 9px;
+}
+
+.detail-stats div {
+  min-width: 0;
+  padding: 11px 12px;
+}
+
+.detail-stats div + div {
+  border-left: 1px solid var(--line);
+}
+
+.detail-stats dt {
+  overflow: hidden;
+  color: var(--faint);
+  font-size: 8px;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.detail-stats dd {
+  overflow: hidden;
+  margin: 6px 0 0;
+  font:
+    520 10px / 1.3 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.detail-section h3 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  font-size: 10px;
+  font-weight: 650;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.detail-section h3 span {
+  color: var(--faint);
+  font:
+    500 9px / 1 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+}
+
+.assertion-list,
+.trace-list,
+.artifact-list,
+.suite-list {
+  display: grid;
+  gap: 7px;
+}
+
+.assertion {
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr) auto;
+  gap: 9px;
+  border: 1px solid var(--line-soft);
+  border-radius: 8px;
+  background: #141719;
+  padding: 11px;
+}
+
+.assertion-mark {
+  color: var(--coral);
+  font:
+    700 11px / 1.4 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+}
+
+.assertion.informational .assertion-mark {
+  color: var(--muted);
+}
+
+.assertion.passed .assertion-mark {
+  color: var(--lime);
+}
+
+.assertion strong,
+.assertion small {
+  display: block;
+}
+
+.assertion strong {
+  font-size: 10px;
+}
+
+.assertion small {
+  margin-top: 4px;
+  color: var(--muted);
+  font-size: 9px;
+  line-height: 1.5;
+}
+
+.assertion-score {
+  color: var(--muted);
+  font:
+    550 9px / 1.4 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+}
+
+.assertion-content {
+  min-width: 0;
+}
+
+.assertion-comment {
+  margin: 7px 0 0;
+  color: #c0c4bf;
+  font-size: 9px;
+  line-height: 1.55;
+}
+
+.diagnostic-error {
+  margin: 7px 0 0;
+  color: var(--coral);
+  font-size: 9px;
+}
+
+.diagnostic {
+  margin-top: 7px;
+  color: var(--muted);
+  font-size: 9px;
+}
+
+.diagnostic summary {
+  cursor: pointer;
+}
+
+.diagnostic pre {
+  max-height: 180px;
+  overflow: auto;
+  margin: 7px 0 0;
+  border-radius: 6px;
+  background: #0d1011;
+  padding: 9px;
+  font-size: 8px;
+  white-space: pre-wrap;
+}
+
+.agent-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 12px;
+}
+
+.agent-card {
+  padding: 14px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--panel-raised);
+}
+
+.agent-card header,
+.agent-card header div {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.agent-card header div {
+  min-width: 0;
+  flex-direction: column;
+}
+
+.agent-card header small,
+.agent-parent {
+  color: var(--muted);
+  overflow-wrap: anywhere;
+}
+
+.agent-card dl {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+  margin: 14px 0;
+}
+
+.agent-card dl div {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.agent-card dt {
+  color: var(--muted);
+}
+
+.agent-card dd {
+  margin: 0;
+  font-weight: 650;
+}
+
+.trace-item {
+  display: grid;
+  grid-template-columns: 58px minmax(0, 1fr);
+  gap: 10px;
+  border-left: 1px solid var(--line);
+  padding: 3px 0 10px 13px;
+}
+
+.trace-item time {
+  color: var(--faint);
+  font:
+    500 8px / 1.45 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+}
+
+.trace-item strong,
+.trace-item p {
+  margin: 0;
+  font-size: 9px;
+  line-height: 1.5;
+}
+
+.trace-item strong {
+  display: block;
+  margin-bottom: 2px;
+  color: var(--muted);
+  text-transform: uppercase;
+}
+
+.trace-item p {
+  overflow-wrap: anywhere;
+  color: var(--faint);
+}
+
+.artifact,
+.suite-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  border: 1px solid var(--line-soft);
+  border-radius: 7px;
+  padding: 9px 11px;
+  color: var(--muted);
+  font:
+    500 9px / 1.3 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+}
+
+.artifact span:first-child,
+.suite-item span:first-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.artifact small,
+.suite-item small {
+  flex: none;
+  color: var(--faint);
+  font-size: 8px;
+  text-transform: uppercase;
+}
+
+.artifact-button,
+.suite-button {
+  width: 100%;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+}
+
+.artifact-button:hover,
+.suite-button:hover {
+  border-color: #58672f;
+  background: #171d14;
+  color: var(--ink);
+}
+
+.artifact-button.changed small,
+.artifact-button.removed small {
+  color: var(--coral);
+}
+
+.artifact-button.added small {
+  color: var(--lime);
+}
+
+.matrix-wrap {
+  overflow-x: auto;
+  border: 1px solid var(--line);
+  border-radius: 9px;
+}
+
+.matrix {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 9px;
+}
+
+.matrix th,
+.matrix td {
+  border-bottom: 1px solid var(--line-soft);
+  padding: 10px;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.matrix th {
+  color: var(--faint);
+  font-size: 8px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.matrix td {
+  color: var(--muted);
+}
+
+.matrix tr:last-child td {
+  border-bottom: 0;
+}
+
+.matrix .metric-good {
+  color: var(--lime);
+}
+
+.matrix .metric-bad {
+  color: var(--coral);
+}
+
+.metric-neutral {
+  color: var(--muted);
+}
+
+.score-bar {
+  position: relative;
+  display: block;
+  width: 100%;
+  min-width: 92px;
+  height: 9px;
+  background: #282d30;
+}
+
+.score-fill {
+  display: block;
+  height: 100%;
+  background: var(--muted);
+}
+
+.score-fill.tone-positive,
+.score-fill.tone-after {
+  background: var(--lime);
+}
+
+.score-fill.tone-negative {
+  background: var(--coral);
+}
+
+.score-bar > .has-threshold {
+  position: absolute;
+  top: -2px;
+  height: 13px;
+  border-left: 1px solid currentColor;
+}
+
+.quantized-bar {
+  display: grid;
+  grid-template-columns: repeat(20, minmax(2px, 1fr));
+  gap: 2px;
+  width: 100%;
+  min-width: 92px;
+  height: 9px;
+}
+
+.quantized-cell {
+  min-width: 0;
+  border-radius: 1px;
+  background: #282d30;
+}
+
+.quantized-cell.is-filled.tone-positive,
+.quantized-cell.is-filled.tone-after,
+.quantized-cell.is-filled.segment-passed,
+.quantized-cell.is-filled.segment-improved,
+.legend-swatch.segment-passed,
+.legend-swatch.segment-improved {
+  background: var(--lime);
+}
+
+.quantized-cell.is-filled.tone-negative,
+.quantized-cell.is-filled.segment-regressed,
+.quantized-cell.is-filled.segment-removed,
+.legend-swatch.segment-regressed,
+.legend-swatch.segment-removed {
+  background: var(--coral);
+}
+
+.quantized-cell.is-filled.tone-before,
+.quantized-cell.is-filled.segment-agent,
+.legend-swatch.segment-agent {
+  background: var(--blue);
+}
+
+.quantized-cell.is-filled.tone-neutral,
+.quantized-cell.is-filled.segment-unchanged,
+.legend-swatch.segment-unchanged {
+  background: #899095;
+}
+
+.quantized-cell.is-filled.segment-answerer,
+.quantized-cell.is-filled.segment-added,
+.legend-swatch.segment-answerer,
+.legend-swatch.segment-added {
+  background: var(--amber);
+}
+
+.quantized-cell.is-filled.segment-grading,
+.quantized-cell.is-filled.segment-changed,
+.legend-swatch.segment-grading,
+.legend-swatch.segment-changed {
+  background: #b28cff;
+}
+
+.quantized-cell.is-filled.segment-collect,
+.legend-swatch.segment-collect {
+  background: #64c6c0;
+}
+
+.quantized-cell.is-filled.segment-ungraded,
+.quantized-cell.is-filled.segment-pending,
+.legend-swatch.segment-ungraded,
+.legend-swatch.segment-pending {
+  background: var(--faint);
+}
+
+.quantized-cell.has-threshold {
+  box-shadow: -2px 0 0 var(--amber);
+}
+
+.distribution-visual {
+  display: grid;
+  gap: 8px;
+}
+
+.visual-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px 12px;
+  color: var(--muted);
+  font:
+    500 9px / 1.3 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+}
+
+.visual-legend span {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.visual-legend b {
+  color: var(--ink);
+  font-weight: 600;
+}
+
+.legend-swatch {
+  width: 7px;
+  height: 7px;
+  border-radius: 2px;
+}
+
+.evidence-visual-grid,
+.comparison-distributions,
+.experiment-visuals {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px 20px;
+}
+
+.composition-figure,
+.comparison-bars,
+.candidate-landscape,
+.budget-visual {
+  min-width: 0;
+  margin: 0;
+}
+
+.composition-figure figcaption,
+.comparison-bars figcaption,
+.candidate-landscape figcaption,
+.budget-visual figcaption {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 9px;
+  color: var(--ink);
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.candidate-landscape figcaption small,
+.budget-visual figcaption small {
+  color: var(--faint);
+  font:
+    500 8px / 1 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  text-transform: uppercase;
+}
+
+.assertion-content > .score-bar,
+.assertion-content > .quantized-bar {
+  max-width: 220px;
+  margin-top: 8px;
+}
+
+.comparison-plot-grid {
+  display: grid;
+  gap: 11px;
+}
+
+.comparison-bars {
+  border-bottom: 1px solid var(--line-soft);
+  padding-bottom: 11px;
+}
+
+.comparison-bars:last-child {
+  border-bottom: 0;
+  padding-bottom: 0;
+}
+
+.comparison-bars figcaption b {
+  font:
+    600 9px / 1 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+}
+
+.bar-lane,
+.landscape-row,
+.budget-row {
+  display: grid;
+  grid-template-columns: 18px minmax(90px, 1fr) 58px;
+  align-items: center;
+  gap: 8px;
+  margin-top: 6px;
+}
+
+.bar-lane strong {
+  color: var(--faint);
+  font:
+    700 8px / 1 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+}
+
+.bar-lane > span:last-child,
+.landscape-row > b,
+.budget-row > b {
+  overflow: hidden;
+  color: var(--muted);
+  font:
+    500 8px / 1 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.comparison-distributions {
+  margin-top: 18px;
+  border-top: 1px solid var(--line-soft);
+  padding-top: 15px;
+}
+
+.suite-outcome-visual {
+  display: grid;
+  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
+  gap: 22px;
+}
+
+.landscape-axis {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 0 5px 138px;
+  color: var(--faint);
+  font:
+    500 7px / 1 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+}
+
+.landscape-row {
+  grid-template-columns: 130px minmax(100px, 1fr) 38px;
+  border-bottom: 1px solid var(--line-soft);
+  padding: 7px 0;
+}
+
+.landscape-row > span {
+  min-width: 0;
+}
+
+.landscape-row strong,
+.landscape-row small {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.landscape-row strong {
+  color: var(--muted);
+  font-size: 9px;
+}
+
+.landscape-row small {
+  margin-top: 3px;
+  color: var(--faint);
+  font-size: 8px;
+}
+
+.landscape-row.baseline strong::after,
+.landscape-row.target strong::after {
+  margin-left: 5px;
+  color: var(--faint);
+  font-size: 7px;
+  text-transform: uppercase;
+}
+
+.landscape-row.baseline strong::after {
+  content: "A";
+}
+
+.landscape-row.target strong::after {
+  content: "B";
+}
+
+.budget-row {
+  grid-template-columns: 80px minmax(90px, 1fr) 86px;
+  margin-top: 9px;
+}
+
+.budget-row > span:first-child {
+  color: var(--muted);
+  font-size: 9px;
+}
+
+.bar-table-cell {
+  min-width: 150px;
+}
+
+.bar-table-cell .quantized-bar {
+  display: inline-grid;
+  width: 96px;
+  min-width: 96px;
+  margin-right: 7px;
+  vertical-align: middle;
+}
+
+.bar-table-cell small {
+  display: inline;
+  margin: 0;
+  white-space: nowrap;
+}
+
+.section-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 10px;
+}
+
+.section-heading h3 {
+  flex: 1;
+  margin: 0;
+}
+
+.candidate-picker {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--faint);
+  font-size: 8px;
+  text-transform: uppercase;
+}
+
+.candidate-picker select {
+  max-width: 170px;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: #0f1213;
+  padding: 6px;
+  color: var(--ink);
+  font-size: 9px;
+}
+
+.gate-list,
+.comparison-scopes,
+.failure-list {
+  display: grid;
+  gap: 8px;
+}
+
+.gate {
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr) auto;
+  gap: 9px;
+  align-items: center;
+  border: 1px solid var(--line-soft);
+  border-radius: 8px;
+  padding: 10px;
+  color: var(--coral);
+}
+
+.gate.passed {
+  color: var(--lime);
+}
+
+.gate strong,
+.gate small {
+  display: block;
+}
+
+.gate strong {
+  color: var(--ink);
+  font-size: 9px;
+}
+
+.gate small {
+  margin-top: 3px;
+  color: var(--faint);
+  font-size: 8px;
+}
+
+.gate b {
+  color: var(--muted);
+  font:
+    500 9px / 1.2 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+}
+
+.decision-meta {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 7px 12px;
+  margin-top: 10px;
+  border-left: 2px solid #4f5e31;
+  background: #141814;
+  padding: 10px 12px;
+  font-size: 9px;
+}
+
+.decision-meta span {
+  color: var(--faint);
+  text-transform: uppercase;
+}
+
+.decision-meta strong {
+  overflow-wrap: anywhere;
+  color: var(--muted);
+}
+
+.lineage-card,
+.failure-card,
+.comparison-scope {
+  border: 1px solid var(--line-soft);
+  border-radius: 8px;
+  background: #141719;
+  padding: 11px;
+}
+
+.lineage-card > span,
+.lineage-card > small {
+  display: block;
+}
+
+.lineage-card > span {
+  font-size: 11px;
+  font-weight: 650;
+}
+
+.lineage-card > small,
+.lineage-card > p {
+  margin-top: 5px;
+  color: var(--muted);
+  font-size: 9px;
+  line-height: 1.5;
+}
+
+.lineage-card code {
+  display: inline-block;
+  margin: 5px 5px 0 0;
+  border-radius: 4px;
+  background: #202527;
+  padding: 3px 5px;
+  color: var(--faint);
+  font-size: 8px;
+}
+
+.comparison-scope > header,
+.failure-card > header {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 9px;
+  font-size: 9px;
+}
+
+.failure-card ul,
+.failure-card p {
+  margin: 6px 0 0;
+  padding-left: 18px;
+  color: var(--muted);
+  font-size: 9px;
+  line-height: 1.55;
+}
+
+.comparison-stats {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  margin: 0;
+}
+
+.comparison-stats div {
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 11px;
+}
+
+.comparison-stats dt,
+.comparison-stats small {
+  color: var(--faint);
+  font-size: 8px;
+  text-transform: uppercase;
+}
+
+.comparison-stats dd {
+  margin: 7px 0 5px;
+  font:
+    550 11px / 1.2 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+}
+
+.comparison-matrix td strong,
+.comparison-matrix td small {
+  display: block;
+}
+
+.comparison-matrix td small {
+  margin-top: 3px;
+  color: var(--faint);
+}
+
+.rationale-cell {
+  min-width: 240px;
+  white-space: normal;
+}
+
+.rationale-cell span {
+  display: inline;
+  line-height: 1.45;
+}
+
+.rationale-cell b {
+  margin: 0 5px;
+  color: var(--faint);
+}
+
+.delta-badge {
+  border-radius: 99px;
+  background: #252a2d;
+  padding: 3px 6px;
+  color: var(--muted);
+  font-size: 8px;
+  text-transform: uppercase;
+}
+
+.delta-badge.improved,
+.delta-badge.added {
+  background: #1d2917;
+  color: var(--lime);
+}
+
+.delta-badge.regressed,
+.delta-badge.removed {
+  background: #3b211f;
+  color: var(--coral);
+}
+
+.row-regressed {
+  background: rgb(255 128 102 / 5%);
+}
+
+.metric-deltas span {
+  display: block;
+  margin: 2px 0;
+}
+
+.artifact-preview,
+.artifact-diff {
+  max-height: 560px;
+  overflow: auto;
+  margin: 0;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #0c0f10;
+  padding: 14px;
+  color: #bdc2be;
+  font:
+    500 9px / 1.6 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  white-space: pre-wrap;
+}
+
+.artifact-diff span {
+  display: block;
+  min-height: 1.6em;
+}
+
+.artifact-diff b {
+  display: inline-block;
+  width: 18px;
+  user-select: none;
+}
+
+.artifact-diff .diff-added {
+  background: rgb(200 241 105 / 8%);
+  color: #d5f78a;
+}
+
+.artifact-diff .diff-removed {
+  background: rgb(255 128 102 / 8%);
+  color: #ff9a87;
+}
+
+.compact-header .back-button {
+  margin-bottom: 15px;
+}
+
+.prompt-block {
+  max-height: 160px;
+  overflow: auto;
+  border-left: 2px solid #4f5e31;
+  background: #141814;
+  padding: 12px 14px;
+  color: #b5b9b3;
+  font:
+    500 9px / 1.65 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  white-space: pre-wrap;
+}
+
+.error-card {
+  margin: 24px;
+  border: 1px solid #5a302b;
+  border-radius: 9px;
+  background: #211716;
+  padding: 16px;
+  color: #ffad9d;
+  font-size: 10px;
+  line-height: 1.6;
+}
+
+footer {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 13px 2px 0;
+  color: var(--faint);
+  font:
+    500 8px / 1.2 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+}
+
+#runs-root {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#connection-state {
+  flex: none;
+}
+
+#connection-state i {
+  display: inline-block;
+  width: 5px;
+  height: 5px;
+  margin-right: 5px;
+  border-radius: 50%;
+  background: var(--lime);
+}
+
+#connection-state.is-offline i {
+  background: var(--coral);
+}
+
+@media (max-width: 1100px) {
+  .workspace {
+    grid-template-columns: minmax(310px, 0.8fr) minmax(390px, 1.2fr);
+  }
+
+  .metrics {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .metrics article:nth-child(3) {
+    border-top: 1px solid var(--line);
+    border-left: 0;
+  }
+
+  .metrics article:nth-child(4) {
+    border-top: 1px solid var(--line);
+  }
+}
+
+@media (max-width: 830px) {
+  .app-shell {
+    display: block;
+  }
+
+  .sidebar {
+    position: static;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    height: auto;
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+    padding: 14px 18px;
+  }
+
+  .primary-nav {
+    display: flex;
+    justify-content: flex-end;
+    margin: 0;
+  }
+
+  .nav-item {
+    display: flex;
+    width: auto;
+  }
+
+  .nav-glyph,
+  .sidebar-note,
+  .shortcut-card {
+    display: none;
+  }
+
+  main {
+    padding: 24px 18px;
+  }
+
+  .workspace {
+    display: block;
+  }
+
+  .collection-pane {
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+  }
+
+  .collection-list {
+    max-height: 420px;
+  }
+
+  .inspector {
+    max-height: none;
+  }
+
+  .experiment-visuals {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 560px) {
+  .sidebar {
+    display: block;
+  }
+
+  .primary-nav {
+    justify-content: stretch;
+    margin-top: 14px;
+  }
+
+  .nav-item {
+    flex: 1;
+    justify-content: center;
+    padding: 8px;
+  }
+
+  .nav-count {
+    display: none;
+  }
+
+  .topbar {
+    display: block;
+  }
+
+  .topbar-actions {
+    margin-top: 18px;
+  }
+
+  .search {
+    flex: 1;
+  }
+
+  .metrics {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .metrics article {
+    padding: 14px;
+  }
+
+  .detail-title-row {
+    display: block;
+  }
+
+  .score-block {
+    margin-top: 14px;
+    border-left: 0;
+    padding-left: 0;
+    text-align: left;
+  }
+
+  .detail-stats {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .detail-stats div:nth-child(3) {
+    border-top: 1px solid var(--line);
+    border-left: 0;
+  }
+
+  .detail-stats div:nth-child(4) {
+    border-top: 1px solid var(--line);
+  }
+
+  .evidence-visual-grid,
+  .comparison-distributions,
+  .suite-outcome-visual {
+    grid-template-columns: 1fr;
+  }
+
+  .landscape-row {
+    grid-template-columns: 96px minmax(80px, 1fr) 34px;
+  }
+
+  .landscape-axis {
+    margin-left: 104px;
+  }
+
+  .budget-row {
+    grid-template-columns: 68px minmax(70px, 1fr) 76px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto;
+    animation-duration: 0.01ms;
+    animation-iteration-count: 1;
+  }
+}