:root {
  color-scheme: dark;
  --bg: #070b14;
  --bg-2: #0b1120;
  --panel: rgba(17, 25, 42, .76);
  --panel-solid: #111a2e;
  --panel-soft: rgba(14, 22, 38, .9);
  --line: rgba(120, 150, 200, .16);
  --line-strong: rgba(105, 168, 205, .35);
  --text: #e6edf7;
  --text-dim: #91a4bf;
  --text-muted: #607896;
  --cyan: #22d3ee;
  --purple: #a855f7;
  --green: #34d399;
  --orange: #fb923c;
  --blue: #60a5fa;
  --red: #f87171;
  --mono: "SF Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --detail-width: clamp(420px, 48vw, 960px);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
  background: var(--bg);
  color: var(--text);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  background:
    radial-gradient(1100px 680px at 16% -10%, rgba(26, 58, 111, .38), transparent 58%),
    radial-gradient(900px 620px at 100% 0%, rgba(81, 35, 115, .25), transparent 52%),
    var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.app-shell { position: relative; width: 100%; height: 100dvh; overflow: hidden; }
.topbar {
  position: fixed; z-index: 50; top: 0; right: 0; left: 0; height: 64px;
  display: flex; align-items: center; gap: 16px; padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(8, 13, 25, .96), rgba(8, 13, 25, .72));
  backdrop-filter: blur(16px);
}
.brand { display: flex; align-items: center; gap: 11px; min-width: max-content; color: var(--text); text-decoration: none; }
.brand-mark {
  display: block; width: 34px; height: 34px; padding: 5px; border: 1px solid rgba(34, 211, 238, .58);
  border-radius: 10px; background: linear-gradient(145deg, rgba(34, 211, 238, .24), rgba(168, 85, 247, .24));
  box-shadow: 0 0 20px rgba(34, 211, 238, .22); object-fit: contain;
}
.brand-copy strong, .brand-copy small { display: block; }
.brand-copy strong { font-size: 15px; letter-spacing: .02em; }
.brand-copy small { margin-top: 2px; color: var(--text-dim); font-size: 10.5px; }
.search-wrap { position: relative; width: min(300px, 25vw); margin-left: auto; }
.search-box {
  display: flex; align-items: center; height: 40px; border: 1px solid var(--line); border-radius: 11px;
  background: rgba(13, 21, 37, .76); box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}
.search-box:focus-within { border-color: rgba(34, 211, 238, .46); box-shadow: 0 0 0 3px rgba(34, 211, 238, .08); }
.search-box svg { width: 17px; height: 17px; margin-left: 11px; fill: none; stroke: var(--text-dim); stroke-width: 1.7; }
.search-box input { width: 100%; height: 100%; padding: 0 42px 0 8px; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 12px; }
.search-box input::placeholder { color: var(--text-muted); }
.search-box kbd { position: absolute; right: 9px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 5px; color: var(--text-muted); font: 10px var(--mono); }
.topbar-stats { display: flex; gap: 8px; }
.stat-group { position: relative; display: flex; align-items: stretch; gap: 1px; padding: 17px 5px 4px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.stat-source { position: absolute; top: 4px; left: 9px; color: var(--text-muted); font: 700 8px var(--mono); letter-spacing: .08em; }
.experiment-label { color: var(--green); }
.stat { min-width: 58px; padding: 0 7px; border-right: 1px solid rgba(120, 150, 200, .1); }
.stat:last-of-type { border-right: 0; }
.stat small, .stat strong { display: block; white-space: nowrap; }
.stat small { color: var(--text-muted); font-size: 8.5px; text-transform: uppercase; }
.stat strong { margin-top: 1px; color: var(--text); font: 650 12px var(--mono); }
.telemetry-toggle { align-self: center; margin: 0 3px 0 6px; padding: 5px 7px; border: 1px solid rgba(52, 211, 153, .34); border-radius: 7px; background: rgba(52, 211, 153, .1); color: #a7f3d0; font-size: 9px; cursor: pointer; }
.telemetry-toggle[aria-pressed="false"] { border-color: var(--line); background: transparent; color: var(--text-muted); }

.tree-workspace { position: fixed; inset: 64px 0 0; overflow: hidden; }
.app-shell.drawer-open .tree-workspace { right: var(--detail-width); }
.canvas-scroller {
  width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain;
  background-image:
    linear-gradient(rgba(104, 139, 181, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104, 139, 181, .045) 1px, transparent 1px);
  background-size: 38px 38px;
}
#tree-canvas { display: block; width: 100%; height: 100%; min-width: 760px; min-height: 560px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
#tree-canvas.is-panning, #tree-canvas.is-panning * { cursor: grabbing !important; }
#tree-canvas.is-unavailable { opacity: .18; }
.structure-edge { fill: none; stroke: rgba(70, 145, 178, .54); stroke-width: 1.7; vector-effect: non-scaling-stroke; transition: opacity .18s ease, stroke .18s ease, stroke-width .18s ease; }
.structure-edge.is-lineage-edge { stroke: rgba(103, 220, 239, .9); stroke-width: 2.5; filter: drop-shadow(0 0 3px rgba(34, 211, 238, .42)); }
.structure-edge.is-dimmed-edge { opacity: .2; }
.auxiliary-edge { fill: none; stroke: rgba(124, 174, 204, .62); stroke-width: 1.35; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; }
.auxiliary-related { stroke: rgba(168, 123, 208, .58); stroke-dasharray: 2 6; }
.feature-node { cursor: pointer; outline: none; transition: opacity .18s ease; }
.node-card { transition: transform .16s ease, filter .18s ease; transform-box: fill-box; transform-origin: center; }
.feature-node:hover .node-card { transform: translateY(-2px); filter: drop-shadow(0 0 12px rgba(34, 211, 238, .12)); }
.feature-node:focus-visible .node-card > .node-panel { stroke: #9beafe; stroke-width: 2; }
.feature-node.is-selected .node-card { filter: drop-shadow(0 0 13px rgba(34, 211, 238, .48)); }
.feature-node.is-selected .node-card > .node-panel { stroke: #a5f3fc; stroke-width: 3; filter: url(#node-shadow); }
.feature-node.is-selected .node-title { fill: #f2fdff; font-weight: 800; }
.feature-node.is-ancestor .node-card { filter: drop-shadow(0 0 7px rgba(96, 165, 250, .24)); }
.feature-node.is-ancestor .node-card > .node-panel { stroke: #60a5fa; stroke-width: 1.8; }
.feature-node.is-ancestor .node-title { fill: #dbeafe; }
.feature-node.is-dimmed, .feature-node.is-category-dimmed { opacity: .32; }
.node-panel { fill: url(#node-panel-gradient); stroke: rgba(82, 139, 166, .48); stroke-width: 1; vector-effect: non-scaling-stroke; }
.category-accent { fill: var(--category-color, var(--cyan)); }
.category-architecture { --category-color: var(--cyan); }
.category-model_configuration { --category-color: var(--purple); }
.category-training_configuration { --category-color: var(--green); }
.category-data { --category-color: var(--orange); }
.category-runtime { --category-color: var(--blue); }
.category-baseline { --category-color: #7dd3fc; }
.category-repository { --category-color: #7dd3fc; }
.category-parent_issue { --category-color: #94a3b8; }
.category-root_model { --category-color: var(--green); }
.category-model { --category-color: var(--orange); }
.feature-node.status-under-review { --lifecycle-color: #fbbf24; }
.feature-node.status-in-progress { --lifecycle-color: #22d3ee; }
.feature-node.status-declined { --lifecycle-color: var(--red); }
.feature-node.status-verified { --lifecycle-color: #c084fc; }
.feature-node .lifecycle-accent { fill: var(--lifecycle-color, #94a3b8); }
.feature-node.status-in-progress .node-panel {
  stroke: rgba(34, 211, 238, .95);
  stroke-width: 1.8;
  animation: in-progress-panel-pulse 2.4s ease-in-out infinite;
}
.feature-node.status-in-progress .lifecycle-accent {
  opacity: 1;
}
.feature-node.status-in-progress .validation-badge circle {
  animation: in-progress-dot-pulse 2.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.feature-node.status-in-progress .validation-badge rect {
  fill: rgba(34, 211, 238, .16);
  stroke: rgba(34, 211, 238, .68);
  stroke-width: .8;
}
.feature-node.status-in-progress .validation-badge text {
  fill: #cffafe;
  font-weight: 800;
}
@keyframes in-progress-panel-pulse {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(34, 211, 238, .28)); }
  50% { filter: drop-shadow(0 0 9px rgba(34, 211, 238, .72)); }
}
@keyframes in-progress-dot-pulse {
  0%, 100% { opacity: .8; transform: scale(.95); }
  50% { opacity: 1; transform: scale(1.25); }
}
.node-title { fill: var(--text); font-size: 12.5px; font-weight: 720; }
.node-subtitle { fill: var(--text-dim); font-size: 8.5px; }
.node-code-hint { fill: #89a3bf; font: 9px var(--mono); }
.node-badge rect { fill: rgba(120, 150, 200, .09); stroke: rgba(120, 150, 200, .2); stroke-width: .7; }
.node-badge text { fill: #9eb0c8; font-size: 7.8px; font-weight: 720; }
.validation-badge circle { fill: #9b835a; }
.validation-badge text { fill: #c6ad7b; }
.validation-conditional .validation-badge circle { fill: #d7a56c; }
.validation-conditional .validation-badge text { fill: #e6bd88; }
.validation-validated .validation-badge circle { fill: var(--green); }
.validation-failed .validation-badge circle { fill: var(--red); }
.status-open .validation-badge circle { fill: var(--green); }
.status-open .validation-badge text { fill: #a7f3d0; }
.status-closed .validation-badge circle { fill: #94a3b8; }
.status-closed .validation-badge text { fill: #cbd5e1; }
.status-reference .validation-badge circle { fill: #94a3b8; }
.status-offline .validation-badge circle { fill: var(--cyan); }
.status-under-review .validation-badge circle { fill: #fbbf24; }
.status-under-review .validation-badge text { fill: #fde68a; }
.status-in-progress .validation-badge circle { fill: #22d3ee; }
.status-in-progress .validation-badge text { fill: #cffafe; }
.status-declined .validation-badge circle { fill: var(--red); }
.status-declined .validation-badge text { fill: #fecaca; }
.status-verified .validation-badge circle { fill: #c084fc; }
.status-verified .validation-badge text { fill: #e9d5ff; }
.node-toggle circle { fill: rgba(12, 20, 35, .94); stroke: rgba(128, 161, 190, .36); stroke-width: 1; vector-effect: non-scaling-stroke; }
.node-toggle text { fill: #b1c1d4; text-anchor: middle; font-size: 12px; font-weight: 650; }
.node-exp-label { fill: #8fe6bf; font: 700 7px var(--mono); }
.node-experiment.has-wandb .node-exp-label { fill: #d1fae5; stroke: rgba(7, 11, 20, .82); stroke-width: 2.4px; paint-order: stroke fill; }
.node-experiment.has-wandb .node-exp-summary { fill: #c6f6df; }
.node-experiment.has-wandb .node-progress-track { fill: rgba(52, 211, 153, .11); }
.node-exp-summary { fill: #aebdd1; font: 8px var(--mono); }
.node-sparkline { fill: none; stroke: #6ed6a1; stroke-width: 1; opacity: .72; vector-effect: non-scaling-stroke; }
.node-progress-track { fill: rgba(255, 255, 255, .045); }
.node-progress-fill { fill: var(--category-color, var(--cyan)); opacity: .62; }
.telemetry-off .node-sparkline, .telemetry-off .node-progress-fill { visibility: hidden; }
.canvas-hint { position: fixed; z-index: 20; top: 74px; left: 50%; padding: 8px 20px 9px; transform: translateX(-50%); border: 1px solid var(--line); border-radius: 999px; background: rgba(7, 11, 20, .62); color: var(--text-dim); text-align: center; white-space: nowrap; pointer-events: none; backdrop-filter: blur(8px); }
.canvas-hint strong, .canvas-hint span { display: block; }
.canvas-hint strong { color: #dce8f5; font-size: 14px; font-weight: 750; }
.canvas-hint span { margin-top: 3px; color: var(--text-dim); font-size: 10px; }

.search-results { position: absolute; z-index: 70; top: 47px; right: 0; left: 0; padding: 6px; border: 1px solid var(--line); border-radius: 11px; background: rgba(10, 17, 30, .98); box-shadow: 0 18px 42px rgba(0, 0, 0, .48); }
.search-results button { display: block; width: 100%; padding: 8px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.search-results button:hover { background: rgba(96, 165, 250, .09); }
.search-results strong, .search-results small { display: block; }
.search-results strong { font-size: 11px; }
.search-results small { margin-top: 2px; color: var(--text-muted); font: 8.5px var(--mono); }
.search-results p { margin: 10px; color: var(--text-dim); font-size: 11px; }

.bottom-legend { position: fixed; z-index: 30; bottom: 14px; left: 14px; display: flex; max-width: calc(100% - 260px); gap: 8px; align-items: center; }
.category-filters, .semantic-legend { display: flex; gap: 6px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); backdrop-filter: blur(10px); }
.category-filters[hidden] { display: none; }
.category-chip { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--text-dim); font-size: 9.5px; cursor: pointer; }
.category-chip::before { width: 7px; height: 7px; border-radius: 2px; background: var(--chip-color); content: ""; }
.category-chip[aria-pressed="false"] { opacity: .38; filter: grayscale(.7); }
.semantic-legend { align-items: center; color: var(--text-muted); font-size: 9px; }
.semantic-legend span { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.legend-dot { width: 6px; height: 6px; border-radius: 50%; background: #9b835a; }
.conditional-dot { background: #d7a56c; }
.under-review-dot { background: #fbbf24; }
.in-progress-dot { background: var(--blue); }
.declined-dot { background: var(--red); }
.verified-dot { background: #c084fc; }
.legend-line { width: 16px; height: 0; border-top: 1px solid rgba(70, 145, 178, .72); }
.auxiliary-line { border-top-style: dashed; border-color: rgba(168, 123, 208, .72); }

.canvas-controls { position: fixed; z-index: 34; right: 14px; bottom: 14px; display: flex; gap: 6px; align-items: center; }
.canvas-controls button, .canvas-controls output { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); backdrop-filter: blur(10px); }
.canvas-controls button { cursor: pointer; }
.canvas-controls button:hover { border-color: var(--line-strong); background: var(--panel-solid); }
.canvas-controls output { width: 48px; color: var(--text-dim); font: 9px var(--mono); }
.app-shell.drawer-open .canvas-controls { right: calc(var(--detail-width) + 14px); }

.detail-panel {
  position: fixed; z-index: 45; top: 64px; right: 0; bottom: 0; width: var(--detail-width); overflow: hidden;
  border-left: 1px solid var(--line); background: linear-gradient(180deg, rgba(11, 17, 32, .98), rgba(7, 12, 23, .98));
  box-shadow: -16px 0 42px rgba(0, 0, 0, .5); backdrop-filter: blur(18px);
  transform: translateX(100%); transition: transform .26s cubic-bezier(.4, 0, .2, 1);
}
.detail-panel.is-open { transform: translateX(0); }
.drawer-topline { display: flex; height: 42px; align-items: center; justify-content: flex-end; padding: 0 14px; border-bottom: 1px solid var(--line); color: var(--text-muted); font: 700 9px var(--mono); letter-spacing: .08em; }
.drawer-topline button {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(248, 113, 113, .58);
  border-radius: 9px;
  background: rgba(248, 113, 113, .14);
  box-shadow: 0 0 10px rgba(248, 113, 113, .12);
  color: #fecaca;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.drawer-topline button:hover {
  border-color: #fca5a5;
  background: rgba(248, 113, 113, .25);
  box-shadow: 0 0 14px rgba(248, 113, 113, .3);
  color: #fff1f2;
  transform: scale(1.05);
}
.drawer-topline button:focus-visible {
  outline: 2px solid #fca5a5;
  outline-offset: 2px;
}
.detail-content { height: calc(100% - 42px); overflow-y: auto; }
.detail-content::-webkit-scrollbar { width: 7px; }
.detail-content::-webkit-scrollbar-thumb { border-radius: 5px; background: rgba(120, 150, 200, .18); }
.detail-empty { display: grid; min-height: 100%; place-items: center; color: var(--text-muted); font-size: 11px; }
.detail-header { padding: 20px 24px 17px; border-bottom: 1px solid var(--line); }
.detail-header h1 { margin: 8px 0 6px; color: var(--text); font-size: clamp(23px, 1.35vw, 28px); line-height: 1.18; letter-spacing: -.025em; }
.detail-header code { color: var(--text-muted); font: 11px var(--mono); word-break: break-all; }
.detail-header-meta { display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
.detail-header-meta .source-link { flex: 0 0 auto; }
.detail-eyebrow { display: flex; align-items: center; gap: 7px; color: var(--text-dim); font-size: 10.5px; font-weight: 700; }
.detail-category { padding: 2px 6px; border: 1px solid rgba(34, 211, 238, .16); border-radius: 999px; color: #79ddec; font: 700 9px var(--mono); text-transform: uppercase; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #9b835a; }
.detail-eyebrow.validation-conditional .status-dot { background: #d7a56c; box-shadow: 0 0 8px rgba(215, 165, 108, .35); }
.detail-title-en { margin: -2px 0 8px; color: var(--text-dim); font-size: clamp(12px, .72vw, 14px); }
.detail-section { padding: 15px 24px; border-bottom: 1px solid rgba(120, 150, 200, .12); }
.detail-section h3 { margin: 0 0 9px; color: var(--text-muted); font-size: clamp(10px, .6vw, 12px); letter-spacing: .07em; text-transform: uppercase; }
.detail-section > div { color: #c7d2e1; font-size: clamp(13px, .78vw, 15.5px); line-height: 1.62; overflow-wrap: anywhere; }
.detail-summary > div { color: #d9e3ef; font-size: clamp(14px, .84vw, 16.5px); }
.detail-section ul { margin: 6px 0; padding-left: 17px; }
.detail-section li + li { margin-top: 4px; }
.detail-section a { color: #67dcef; }
.markdown-block > :first-child { margin-top: 0; }
.markdown-block > :last-child { margin-bottom: 0; }
.markdown-block p { margin: 0 0 8px; }
.markdown-block .markdown-heading { margin: 13px 0 7px; color: #e1eaf5; line-height: 1.35; text-transform: none; letter-spacing: 0; }
.markdown-block h4 { font-size: clamp(13px, .78vw, 15.5px); }
.markdown-block h5 { font-size: clamp(12px, .72vw, 14.5px); }
.markdown-block h6 { font-size: clamp(11.5px, .68vw, 13.5px); }
.markdown-block .markdown-list { margin: 7px 0; padding-left: 20px; }
.markdown-block blockquote { margin: 8px 0; padding: 7px 10px; border-left: 2px solid rgba(34, 211, 238, .48); background: rgba(34, 211, 238, .045); color: #aebed0; }
.markdown-block code { padding: 1px 4px; border: 1px solid rgba(120, 150, 200, .16); border-radius: 4px; background: rgba(120, 150, 200, .08); color: #b7e9f1; font: .9em var(--mono); }
.markdown-block .markdown-code { margin: 8px 0; padding: 9px 10px; overflow-x: auto; border: 1px solid rgba(120, 150, 200, .15); border-radius: 7px; background: rgba(3, 8, 18, .72); }
.markdown-block .markdown-code code { padding: 0; border: 0; background: transparent; color: #cbd8e7; white-space: pre; }
.markdown-block .markdown-rule { margin: 11px 0; border: 0; border-top: 1px solid rgba(120, 150, 200, .18); }
.markdown-table-wrap { max-width: 100%; margin: 9px 0; overflow-x: auto; border: 1px solid rgba(120, 150, 200, .18); border-radius: 7px; }
.markdown-table { width: 100%; border-collapse: collapse; background: rgba(3, 8, 18, .38); font-size: 10.5px; }
.markdown-table th, .markdown-table td { padding: 6px 8px; border-right: 1px solid rgba(120, 150, 200, .13); border-bottom: 1px solid rgba(120, 150, 200, .13); text-align: left; white-space: nowrap; }
.markdown-table th:last-child, .markdown-table td:last-child { border-right: 0; }
.markdown-table tbody tr:last-child td { border-bottom: 0; }
.markdown-table th { background: rgba(120, 150, 200, .08); color: #dce7f3; font-size: 9px; letter-spacing: .03em; }
.markdown-table .markdown-align-center { text-align: center; }
.markdown-table .markdown-align-right { text-align: right; }
.math-inline { display: inline-block; max-width: 100%; color: #dbeafe; vertical-align: -.08em; }
.math-inline:not([data-math-rendered]) { padding: 0 3px; border-radius: 4px; background: rgba(96, 165, 250, .08); font-family: var(--mono); font-size: .92em; }
.math-inline .katex { font-size: 1.04em; }
.math-display { max-width: 100%; margin: 10px 0; overflow-x: auto; overflow-y: hidden; color: #dbeafe; text-align: center; }
.math-display:not([data-math-rendered]) { padding: 10px; border-radius: 7px; background: rgba(96, 165, 250, .06); font-family: var(--mono); white-space: pre-wrap; }
.math-display .katex-display { margin: .35em 0; }
.markdown-block del { color: var(--text-muted); }
.markdown-link { text-underline-offset: 2px; }
.fact-list { margin: 0; }
.fact-list > div + div { margin-top: 7px; }
.fact-list dt { color: var(--text-muted); font-size: 10px; font-weight: 700; }
.fact-list dd { margin: 2px 0 0; }
.detail-parent { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; margin: 0 0 11px; padding-bottom: 9px; border-bottom: 1px dashed var(--line); }
.detail-parent span { grid-column: 1 / -1; color: var(--text-muted); font-size: 8.5px; font-weight: 700; }
.detail-parent strong { color: var(--text); font-size: 11px; }
.detail-parent code { color: var(--text-muted); font-size: 8px; }
.delta-card + .delta-card { margin-top: 11px; }
.delta-target { display: inline-block; margin-bottom: 6px; color: #67dcef; font-size: 9px; }
.delta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.delta-grid > div { min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255, 255, 255, .025); }
.delta-grid span, .config-design > span, .config-parameters > span, .validation-row > span { display: block; margin-bottom: 4px; color: var(--text-muted); font-size: 8px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.delta-grid em { color: var(--text-muted); font-style: normal; }
.delta-card > p { margin: 7px 0 0; color: var(--text-dim); font-size: 9.5px; }
.config-design p { margin: 0; }
.config-parameters { margin-top: 10px; }
.locator-list { display: grid; gap: 9px; }
.locator-card { padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .025); }
.locator-symbol { display: block; margin-bottom: 8px; color: #76e4f4; font: 600 10px var(--mono); }
.locator-card dl { margin: 0; }
.locator-card dl > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 7px; padding: 3px 0; }
.locator-card dt { color: var(--text-muted); font-size: 8px; font-weight: 700; text-transform: uppercase; }
.locator-card dd { margin: 0; font-size: 9.5px; overflow-wrap: anywhere; }
.locator-card code { font-size: 8.5px; }
.pinned-link { display: inline-flex; margin-top: 8px; padding: 5px 8px; border: 1px solid rgba(34, 211, 238, .18); border-radius: 7px; background: rgba(34, 211, 238, .07); color: #76e4f4; font-size: 9px; font-weight: 700; text-decoration: none; }
.validation-summary { display: grid; gap: 6px; margin-bottom: 10px; padding: 10px; border: 1px solid rgba(155, 131, 90, .16); border-radius: 9px; background: rgba(155, 131, 90, .07); }
.validation-summary.validation-conditional { border-color: rgba(215, 165, 108, .2); background: rgba(215, 165, 108, .075); }
.validation-summary strong { color: #e8d7b7; font-size: 10.5px; line-height: 1.5; }
.validation-pill { width: max-content; padding: 3px 7px; border-radius: 999px; background: rgba(155, 131, 90, .13); color: #d2ba87; font-size: 8px; font-weight: 750; }
.validation-row + .validation-row { margin-top: 9px; }
.experiment-list { display: grid; gap: 10px; }
.experiment-card { padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: rgba(52, 211, 153, .045); }
.experiment-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.experiment-card-head strong { color: #d9fbe8; font-size: 11px; }
.experiment-card-head span { padding: 2px 6px; border: 1px solid rgba(52, 211, 153, .2); border-radius: 999px; color: #a7f3d0; font-size: 8px; font-weight: 750; white-space: nowrap; }
.experiment-card > code { color: var(--text-muted); font: 8.5px var(--mono); }
.experiment-card > p { margin: 7px 0 0; color: var(--text-dim); font-size: 9.5px; line-height: 1.45; }
.experiment-cursor { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(120, 150, 200, .13); }
.experiment-cursor span { color: var(--text-muted); font-size: 8px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.experiment-cursor strong { color: #bfdbfe; font-size: 9px; }
.experiment-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 9px 0 0; }
.experiment-metrics div { padding: 6px; border: 1px solid rgba(120, 150, 200, .12); border-radius: 7px; background: rgba(255, 255, 255, .025); }
.experiment-metrics dt { color: var(--text-muted); font-size: 7.5px; font-weight: 750; text-transform: uppercase; }
.experiment-metrics dd { margin: 2px 0 0; }
.experiment-metrics code { color: #e6edf7; font-size: 9px; }
.wandb-link { display: inline-flex; margin-top: 9px; padding: 5px 8px; border: 1px solid rgba(52, 211, 153, .2); border-radius: 7px; background: rgba(52, 211, 153, .075); color: #a7f3d0; font-size: 9px; font-weight: 700; text-decoration: none; }
.experiment-notice { padding: 7px 8px; border: 1px solid rgba(251, 191, 36, .24); border-radius: 8px; background: rgba(251, 191, 36, .07); color: #fde68a !important; }
.experiment-covered { overflow-wrap: anywhere; }
.experiment-covered code { display: inline-block; margin: 2px 3px 0 0; color: #8ab4d6; font-size: 7.5px; }
.detail-provenance .fact-list { font-size: 9.5px; }
.provenance-block + .provenance-block { margin-top: 12px; }
.provenance-block > span { display: block; margin-bottom: 6px; color: var(--text-muted); font-size: 8px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.provenance-sources { display: grid; gap: 8px; }
.provenance-source { padding: 9px; border: 1px solid rgba(120, 150, 200, .14); border-radius: 9px; background: rgba(255, 255, 255, .02); }
.provenance-source div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.provenance-source code { color: #8bdbea; font-size: 8.5px; }
.provenance-source strong { color: #c6d3e3; font-size: 8px; text-transform: uppercase; }
.provenance-source p { margin: 6px 0 0; color: var(--text-dim); font-size: 9px; line-height: 1.45; }
.provenance-source small { display: block; margin-top: 6px; color: var(--text-muted); font: 8px var(--mono); }
.detail-demo { margin: 12px 24px 20px; padding: 11px; border: 1px solid rgba(168, 85, 247, .18); border-radius: 10px; background: rgba(168, 85, 247, .055); }
.detail-demo strong { display: block; color: #d8b4fe; font: 700 8px var(--mono); letter-spacing: .06em; }
.detail-demo p { margin: 6px 0 0; color: var(--text-dim); font-size: 9.5px; line-height: 1.45; }

.model-detail-header { padding-bottom: 15px; }
.overview-panel {
  border-top: 1px solid rgba(96, 165, 250, .24);
  border-bottom: 1px solid rgba(96, 165, 250, .2);
  background: #0c1321;
  box-shadow: inset 3px 0 rgba(96, 165, 250, .55);
}
.overview-toggle {
  display: flex;
  width: 100%;
  height: 56px;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border: 0;
  background: transparent;
  color: #dce8f5;
  font-size: 12px;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}
.overview-toggle:hover { background: rgba(34, 211, 238, .045); }
.overview-toggle:focus-visible { outline: 2px solid rgba(34, 211, 238, .7); outline-offset: -2px; }
.overview-chevron {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #8fdce8;
  font-size: 13px;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.overview-toggle[aria-expanded="true"] .overview-chevron { transform: rotate(180deg); }
.overview-content,
.model-tab-panel {
  display: grid;
  min-width: 0;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows .28s cubic-bezier(.4, 0, .2, 1),
    opacity .2s ease,
    visibility 0s linear .28s;
}
.overview-content.is-expanded,
.model-tab-panel.is-expanded {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows .28s cubic-bezier(.4, 0, .2, 1),
    opacity .22s ease .05s,
    visibility 0s;
}
.collapsible-inner { min-height: 0; overflow: hidden; }
.pull-request-panel {
  margin-top: 10px;
  border-top: 1px solid rgba(34, 211, 238, .24);
  border-bottom: 1px solid rgba(34, 211, 238, .2);
  background: #0c1424;
  box-shadow: inset 3px 0 rgba(34, 211, 238, .5);
}
.pull-request-toggle {
  display: flex;
  width: 100%;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 24px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.pull-request-toggle:hover { background: rgba(34, 211, 238, .045); }
.pull-request-toggle[aria-expanded="true"] { background: rgba(34, 211, 238, .065); }
.pull-request-toggle:focus-visible { outline: 2px solid rgba(34, 211, 238, .7); outline-offset: -2px; }
.pull-request-copy { min-width: 0; }
.pull-request-copy strong { display: block; }
.pull-request-copy strong { color: #e4edf7; font-size: 12px; }
.pull-request-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; }
.pull-request-actions em {
  color: #9aabc0;
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
  text-transform: uppercase;
}
.pull-request-actions .pr-lifecycle-under-review { color: #fcd34d; }
.pull-request-actions .pr-lifecycle-in-progress { color: #93c5fd; }
.pull-request-actions .pr-lifecycle-declined { color: #fca5a5; }
.pull-request-actions .pr-lifecycle-verified { color: #d8b4fe; }
.pull-request-actions .pr-lifecycle-closed { color: #cbd5e1; }
.pull-request-chevron {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid rgba(34, 211, 238, .3);
  border-radius: 6px;
  background: rgba(34, 211, 238, .08);
  color: #a5f3fc;
  font-size: 11px;
  font-style: normal;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.pull-request-toggle[aria-expanded="true"] .pull-request-chevron { transform: rotate(180deg); }
.done-pr-panel {
  margin-top: 10px;
  border-top: 1px solid rgba(192, 132, 252, .25);
  border-bottom: 1px solid rgba(192, 132, 252, .2);
  background: #111426;
  box-shadow: inset 3px 0 rgba(192, 132, 252, .58);
  interpolate-size: allow-keywords;
}
.done-pr-panel::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  transition: block-size .28s cubic-bezier(.4, 0, .2, 1), opacity .2s ease, content-visibility .28s allow-discrete;
}
.done-pr-panel[open]::details-content { block-size: auto; opacity: 1; }
.done-pr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 9px 24px;
  color: inherit;
  cursor: pointer;
  list-style: none;
}
.done-pr-header::-webkit-details-marker { display: none; }
.done-pr-copy { min-width: 0; }
.done-pr-copy strong { display: block; color: #eadcff; font-size: 11.5px; }
.done-pr-copy small { display: block; margin-top: 4px; color: #aa9fbe; font: 8px var(--mono); overflow-wrap: anywhere; }
.done-target-branch-link { color: #d8b4fe; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(216, 180, 254, .45); text-underline-offset: 2px; }
.done-target-branch-link:hover { color: #f3e8ff; text-decoration-color: currentColor; }
.done-target-branch-link:focus-visible { border-radius: 2px; outline: 2px solid rgba(216, 180, 254, .72); outline-offset: 2px; }
.done-target-branch-link span { margin-left: 3px; }
.done-pr-chevron {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid rgba(192, 132, 252, .32);
  border-radius: 6px;
  background: rgba(192, 132, 252, .08);
  color: #e9d5ff;
  font: 700 9px var(--mono);
}
.done-pr-chevron::before { content: "↑"; }
.done-pr-panel:not([open]) .done-pr-chevron::before { content: "↓"; }
.done-pr-header:hover { background: rgba(192, 132, 252, .045); }
.done-pr-header:focus-visible { outline: 2px solid rgba(192, 132, 252, .7); outline-offset: -2px; }
.done-pr-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 0 24px 15px;
}
.done-report-link {
  display: flex;
  min-width: 0;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid rgba(192, 132, 252, .24);
  border-radius: 8px;
  background: #181a30;
  color: inherit;
  text-decoration: none;
}
.done-report-link:hover { border-color: rgba(192, 132, 252, .58); background: #1d2039; }
.done-report-link > span { min-width: 0; overflow: hidden; color: #eadcff; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.done-report-link i { flex: 0 0 auto; color: #d8b4fe; font-size: 13px; font-style: normal; }
.model-tab-panel { border-top: 1px solid transparent; transition-property: grid-template-rows, opacity, visibility, border-color; }
.model-tab-panel.is-expanded { border-top-color: rgba(120, 150, 200, .13); }
.copy-block { margin: 0; white-space: normal; }
.copy-block + .embedded-image, .embedded-image + .copy-block { margin-top: 10px; }
.embedded-image {
  margin: 0;
  max-width: 100%;
}
.embedded-image a {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(120, 150, 200, .2);
  border-radius: 6px;
  background: #070d18;
}
.embedded-image a:hover { border-color: rgba(34, 211, 238, .52); }
.embedded-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
}
.empty-value { color: var(--text-muted); font-style: italic; }
.section-tree-intro { margin-bottom: 13px; }
.section-tree-node + .section-tree-node { margin-top: 14px; }
.section-tree-node h4, .section-tree-node h5, .section-tree-node h6 {
  margin: 0 0 6px;
  color: #dce8f5;
  letter-spacing: 0;
  line-height: 1.4;
}
.section-tree-node h4 { font-size: 11px; }
.section-tree-node h5 { font-size: 10px; color: #c7d7e9; }
.section-tree-node h6 { font-size: 9px; color: #afc3da; }
.section-tree-children { margin: 11px 0 0 10px; padding-left: 12px; border-left: 1px solid rgba(96, 165, 250, .24); }
.section-tree-copy p { margin: 0; }
.section-tree-copy p + p { margin-top: 6px; }
.section-tree-copy strong { color: #c7d7e9; font-weight: 700; }
.source-link {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid rgba(34, 211, 238, .2);
  border-radius: 7px;
  background: rgba(34, 211, 238, .06);
  color: #7de5f3;
  font-size: 9px;
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.source-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.labeled-copy + .labeled-copy { margin-top: 13px; padding-top: 12px; border-top: 1px dashed rgba(120, 150, 200, .13); }
.labeled-copy > span {
  display: block;
  margin-bottom: 5px;
  color: #8da5c1;
  font-size: 8.5px;
  font-weight: 750;
  text-transform: uppercase;
}
.data-table { border-top: 1px solid var(--line); }
.data-table > div {
  display: grid;
  grid-template-columns: minmax(130px, 42%) minmax(0, 1fr);
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(120, 150, 200, .11);
}
.data-table span { color: var(--text-muted); font-size: 9px; }
.data-table strong { color: #dce6f2; font: 600 10px var(--mono); overflow-wrap: anywhere; }
.data-table .is-empty { opacity: .52; }
.result-table { width: 100%; overflow-x: auto; border-top: 1px solid var(--line); }
.result-table-row { display: grid; grid-auto-columns: minmax(110px, 1fr); grid-auto-flow: column; min-width: max-content; border-bottom: 1px solid rgba(120, 150, 200, .11); }
.result-table-row > * { width: 130px; padding: 7px 8px; color: #c9d5e4; font-size: 9px; overflow-wrap: anywhere; }
.result-table-head > * { color: var(--text-muted); font-size: 8px; text-transform: uppercase; }
.pr-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 24px;
  border-bottom: 1px solid rgba(120, 150, 200, .12);
  background: rgba(52, 211, 153, .035);
}
.pr-summary > div { min-width: 0; }
.pr-summary strong, .pr-summary small { display: block; }
.pr-summary strong { margin-top: 7px; color: var(--text); font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.pr-summary small { margin-top: 4px; color: var(--text-muted); font: 8.5px var(--mono); }
.pr-state { display: inline-flex; padding: 2px 6px; border: 1px solid var(--line); border-radius: 7px; color: var(--text-dim); font-size: 8px; font-weight: 750; text-transform: uppercase; }
.pr-state-open { border-color: rgba(52, 211, 153, .3); color: #a7f3d0; }
.pr-state-closed { border-color: rgba(148, 163, 184, .28); color: #cbd5e1; }
.check-list, .model-link-list { margin: 0; padding: 0; list-style: none; }
.check-list li { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(120, 150, 200, .09); color: var(--text-muted); font-size: 9.5px; }
.check-list li span { color: #64748b; }
.check-list li.is-checked { color: #d7e3ef; }
.check-list li.is-checked span { color: var(--green); }
.outcome-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.outcome-pills span { padding: 4px 7px; border: 1px solid rgba(52, 211, 153, .2); border-radius: 7px; background: rgba(52, 211, 153, .055); color: #b7f7d7; font-size: 8.5px; }
.model-link-list li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(120, 150, 200, .1); }
.model-link-list strong { color: #dbe7f3; font-size: 10px; }
.model-link-list span { color: var(--text-muted); font: 8px var(--mono); }

.empty-state { position: absolute; z-index: 4; top: 50%; left: 50%; width: min(390px, calc(100% - 40px)); padding: 24px; transform: translate(-50%, -50%); border: 1px solid var(--line); border-radius: 14px; background: rgba(11, 17, 32, .96); box-shadow: 0 18px 48px rgba(0, 0, 0, .5); text-align: center; }
.empty-state strong { display: block; margin-bottom: 8px; color: #fca5a5; }
.empty-state p { color: var(--text-dim); font-size: 11px; line-height: 1.5; }
.empty-state button { padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-solid); cursor: pointer; }

@media (max-width: 1180px) {
  .canonical-stats .stat:nth-of-type(2), .canonical-stats .stat:nth-of-type(4) { display: none; }
  .search-wrap { width: min(270px, 24vw); }
}
@media (max-width: 900px) {
  .topbar-stats { display: none; }
  .search-wrap { width: min(330px, 44vw); }
  .brand-copy small { display: none; }
}
@media (max-width: 680px) {
  .topbar { gap: 9px; padding: 0 10px; }
  .brand-copy strong { font-size: 13px; }
  .brand-mark { width: 30px; height: 30px; }
  .search-wrap { flex: 1; width: auto; }
  .search-box { height: 38px; }
  .tree-workspace, .app-shell.drawer-open .tree-workspace { right: 0; }
  #tree-canvas { width: 1100px; height: 100%; }
  .bottom-legend { right: 10px; bottom: 10px; left: 10px; max-width: none; overflow-x: auto; }
  .semantic-legend { display: none; }
  .canvas-controls, .app-shell.drawer-open .canvas-controls { right: 10px; bottom: 58px; }
  .canvas-controls output, .canvas-controls button:nth-of-type(1), .canvas-controls button:nth-of-type(2) { display: none; }
  .canvas-hint { top: 70px; width: max-content; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .detail-panel { top: auto; bottom: 0; left: 0; width: 100%; max-height: 72dvh; border-top: 1px solid var(--line); border-left: 0; transform: translateY(100%); }
  .detail-panel.is-open { transform: translateY(0); }
  .detail-content { max-height: calc(72dvh - 42px); }
  .delta-grid { grid-template-columns: 1fr; }
  .pr-summary { padding: 14px 16px; }
  .detail-section { padding-right: 16px; padding-left: 16px; }
  .data-table > div { grid-template-columns: minmax(110px, 42%) minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation: none !important; }
}

html * { letter-spacing: 0 !important; }