:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #d1dbe4; background: #101820; font-synthesis: none; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; font-size: 13px; }
main { max-width: 1550px; margin: auto; padding: 12px 25px 15px; }
button, a { font: inherit; touch-action: manipulation; }
button { cursor: pointer; color: #b9ccdd; border: 1px solid #354656; background: #101820; border-radius: 3px; padding: 4px 9px; font-size: 11px; }
button:hover { background: #1b2a37; border-color: #9ab7cb; }
button:disabled { cursor: default; opacity: .45; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid #b7a1df; outline-offset: 3px; }
a { color: #93c2e3; text-underline-offset: 3px; }
header { display: flex; align-items: center; gap: 8px; min-height: 36px; border-bottom: 1px solid #283744; padding-bottom: 8px; }
h1 { font-size: 17px; margin: 0 18px 0 0; font-weight: 620; letter-spacing: -.4px; }
.diagram-scroll { overflow-x: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
dialog { width: min(750px, calc(100% - 28px)); max-height: 85vh; padding: 22px 25px; border: 1px solid #445c70; border-radius: 5px; color: #d1dbe4; background: #101820; box-shadow: 0 15px 65px #00000066; }
dialog::backdrop { background: #04080db8; }
.dialog-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; padding-bottom: 14px; border-bottom: 1px solid #304251; margin-bottom: 16px; }
.eyebrow { font-size: 9px; color: #95adbf; letter-spacing: .1em; margin-bottom: 6px; }
h2 { margin: 0; font-size: 23px; letter-spacing: -.4px; font-weight: 600; }
#close-dialog { font-size: 22px; border: 0; line-height: 1; padding: 4px 8px; }
#dialog-content { font-size: 13px; line-height: 1.7; }
#dialog-content p { margin: 0 0 13px; }
#dialog-content h3 { font-size: 14px; margin: 20px 0 8px; }
#dialog-content ul, #dialog-content ol { padding-left: 21px; }
code, .math { font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; }
.math { background: #192834; border-left: 2px solid #7295ae; padding: 11px 13px; margin: 13px 0; overflow-x: auto; }
.aside { background: #29261e; border-left: 2px solid #b19358; padding: 10px 13px; margin: 14px 0; font-size: 12px; }
.detail-table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 11px; margin: 11px 0; }
th, td { padding: 8px 9px; border-bottom: 1px solid #304251; text-align: left; vertical-align: top; }
th { background: #1a2935; font-weight: 550; color: #a0b8c8; }
.row-selector { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.row-selector [aria-pressed="true"] { color: #101820; background: #675985; border-color: #675985; }
.badge { padding: 3px 5px; border-radius: 2px; font-size: 9px; white-space: nowrap; background: #1c3040; color: #a9d0e4; }
.badge.reduction { color: #d4b47c; background: #30281b; }.badge.serial { background: #292138; color: #bfacd9; }
@media (max-width: 620px) { main { padding: 8px; }h1 { margin-right: 4px; font-size: 15px; }header { gap: 3px; } }
@media print { main { max-width: none; padding: 0; }.diagram-scroll { overflow: visible; } }

.row-selector [aria-pressed="true"] { color: #f1f5f8; }

.vector-view { display: grid; grid-template-columns: minmax(0, 364px) minmax(130px, 1fr); gap: 20px; align-items: start; margin: 16px 0; }
#vector-picture { display: block; width: 100%; aspect-ratio: 1; image-rendering: pixelated; border: 1px solid #3b586d; cursor: crosshair; background: #0c1219; }
#coordinate-readout { font-family: monospace; font-size: 12px; min-height: 4em; }
.reference-actions { display: flex; gap: 7px; flex-wrap: wrap; margin: 16px 0 4px; }
.reference-actions button { font-size: 12px; padding: 6px 10px; }
@media (max-width: 620px) { .vector-view { grid-template-columns: 1fr; gap: 12px; } }

/* Component flows: the position stays explicit; arithmetic reads in ordinary words. */
body { font-size: 16px; }
main { max-width: 1750px; padding: 12px 20px 18px; }
h1 { font-size: 20px; }
dialog { width: min(1030px, calc(100% - 28px)); padding: 22px 28px; }
.dialog-heading { position: sticky; top: -22px; padding-top: 14px; background: #101820; z-index: 2; }
.eyebrow { font-size: 12px; letter-spacing: .04em; }
h2 { font-size: 25px; }
#dialog-content { font-size: 16px; line-height: 1.65; }
#dialog-content h3 { font-size: 17px; }
code, .math { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 16px; }
.math { line-height: 1.8; }
#dialog-content .aside { font-size: 14px; }
#coordinate-readout { font-size: 15px; }
table { font-size: 15px; }
.dependency { padding: 10px 13px; border-left: 3px solid #88b5d4; background: #192a37; }
.dependency.reduction { border-color: #d5b174; background: #2c271d; }
.dependency.serial { border-color: #6dc5ae; background: #172d27; }
.detail-flow-scroll { overflow-x: auto; margin: 14px 0 20px; }
.detail-flow { display: block; width: 100%; min-width: 820px; }
.detail-flow .flow-wire { stroke: #adc7db; stroke-width: 2.5; fill: none; }
.detail-flow .flow-node rect { fill: #1a2d3c; stroke: #698ba8; }
.detail-flow .flow-node text { fill: #e1eaf1; font-size: 16px; font-family: inherit; }
.detail-flow .flow-node .flow-subtitle { fill: #b9cada; font-size: 14px; }
.detail-flow .flow-node.reduction rect { fill: #30271c; stroke: #c39b5f; }
.detail-flow .flow-node.reference rect, .detail-flow .flow-node.parameter rect { fill: #242238; stroke: #9683b6; }
.detail-flow .flow-node.inspected rect { stroke: #d3b5ff; stroke-width: 2.7; }
#dialog-content .operation-steps { list-style: none; margin: 15px 0 22px; padding: 0; }
.operation-steps > li { position: relative; border: 1px solid #486782; background: #172735; margin: 0 0 24px; padding: 12px 16px; border-radius: 4px; }
.operation-steps > li:not(:last-child)::after { content: '↓'; position: absolute; bottom: -26px; left: calc(50% - 6px); color: #aac6db; font-size: 22px; line-height: 24px; }
.operation-steps > li strong { color: #e5edf3; font-weight: 620; }
.operation-steps > li > div { color: #b7c9d9; margin-top: 4px; }
.operation-steps > li.reduction { border-color: #b09059; background: #2c261d; }
.operation-steps > li.output { border-color: #70ad99; background: #19332a; }
.parallel-lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.parallel-lanes > section { min-width: 0; }
#dialog-content .parallel-lanes h3 { padding: 9px 11px; border-top: 2px solid #8ba6c8; background: #172534; margin: 12px 0; }
.notation { border-top: 1px solid #425868; margin-top: 20px; padding-top: 10px; }
.notation summary { cursor: pointer; color: #a6c4da; font-size: 15px; }
.reference-actions button { font-size: 15px; padding: 7px 12px; }
.bubble-outline { fill: #192939; fill-opacity: .2; stroke: #597489; stroke-width: 1.3; }
.detail-flow .operation-title { paint-order: stroke; stroke: #101820; stroke-width: 6px; stroke-linejoin: round; }
.matrix-detail { max-width: 620px; margin: 20px auto; }
.matrix-detail table { border-left: 2px solid #b5a0d4; border-right: 2px solid #b5a0d4; font-variant-numeric: tabular-nums; }
.matrix-detail td { color: #d3c5e8; }
.matrix-detail p { font-size: 14px; color: #9fb2c4; }
.detail-flow .flow-wire { stroke-linecap: round; stroke-linejoin: round; }
.detail-flow .flow-node.record rect { fill: #101820; stroke: #7898ad; }
.detail-flow .flow-node:not(.record):not(.parameter):not(.reference) rect { fill-opacity: .65; }
.operation-steps > li { border-radius: 26px; padding: 14px 22px; background: #17273580; margin-bottom: 28px; }
.operation-steps > li:not(:last-child)::after { left: 28px; bottom: -29px; line-height: 27px; }
.dependency { border-radius: 0 18px 18px 0; }

@media (max-width: 620px) { main { padding: 8px; } dialog { padding: 16px; }.dialog-heading { top: -16px; } .parallel-lanes { grid-template-columns: 1fr; } }
.detail-flow .flow-wire.query { stroke: #c2a5f1; }
.detail-flow .flow-wire.kv { stroke: #e2b36f; }
.detail-flow .flow-wire.parameter { stroke: #c9b2ea; }
.detail-flow .flow-node.elision rect { fill: none; stroke: none; }
.detail-flow .flow-node.elision text { fill: #a4b6c5; font-size: 22px; }

@media (max-width: 620px) { h1 { min-width: 0; font-size: 17px; } }

/* Fit the default desktop viewport at 100% zoom. The diagram remains
   horizontally scrollable on narrow screens, but no longer requires zooming
   out on a normal laptop display. */
body { font-size: 13px; }
main { max-width: 1550px; padding: 12px 25px 15px; }
h1 { font-size: 17px; }
dialog { width: min(750px, calc(100% - 28px)); padding: 22px 25px; }
h2 { font-size: 23px; }
#dialog-content { font-size: 13px; }
#dialog-content h3 { font-size: 14px; }
code, .math { font-size: 11px; }
#coordinate-readout { font-size: 12px; }
table { font-size: 11px; }
.detail-flow { min-width: 760px; }
.detail-flow .flow-node text { font-size: 13px; }
.detail-flow .flow-node .flow-subtitle { font-size: 11px; }
.force-scroll { overflow-x: auto; }
#force-architecture {
  display: block;
  width: 100%;
  min-width: 900px;
  height: auto;
  background: #101820;
  border: 1px solid #2d4353;
  border-radius: 6px;
}
#force-architecture .force-edge {
  fill: none;
  stroke: #8fa9bc;
  stroke-width: 2;
  stroke-linecap: round;
}
#force-architecture .force-edge.parameter { stroke: #c4a2e7; stroke-dasharray: 6 5; }
#force-architecture .force-edge.lookup-weight { stroke-dasharray: 1 6; }
#force-architecture .force-edge.residual { stroke: #8eb7d2; }
#force-architecture .force-edge.gather { stroke: #70d8cc; }
#force-architecture .force-edge.control { stroke: #a68cbe; stroke-width: 1.4; }
#force-architecture .force-edge.cache-read { stroke: #72b8df; stroke-dasharray: 5 4; }
#force-architecture .force-edge.cache-write { stroke: #70d8cc; stroke-width: 2.5; }
#force-architecture .force-edge.provenance { stroke: #698494; stroke-dasharray: 2 6; }
#force-architecture .force-cache > .force-outline { stroke-width: 2.5; stroke-dasharray: 8 3; }
#force-architecture .force-stage > .force-outline { stroke-dasharray: 5 4; }
#force-architecture .force-routing > .force-outline { fill: #112a2d; stroke: #70d8cc; stroke-dasharray: 3 4; }
#force-architecture .window-label { fill: #b5cbd2; font-size: 11px; }
#force-architecture .attention-cell { stroke: #3c5c63; fill: #183239; }
#force-architecture .attention-cell.is-active { fill: #21483f; stroke: #9ee9db; }
#force-architecture .attention-cell.is-future { fill: #101c24; stroke-dasharray: 2 2; }
#force-architecture .attention-cell.is-reused { fill: #13212b; stroke: #405562; opacity: .45; }
#force-architecture .force-node { cursor: pointer; }
#force-architecture .force-node > rect,
#force-architecture .force-node > .force-outline {
  stroke-width: 1.5;
  transition: fill .15s ease, stroke .15s ease;
}
#force-architecture .force-node.force-data > rect,
#force-architecture .force-node.force-data > .force-outline {
  fill: #352451;
  stroke: #b995e4;
}
#force-architecture .force-node.force-function > rect,
#force-architecture .force-node.force-function > .force-outline {
  fill: #573417;
  stroke: #f0aa5c;
}
#force-architecture .force-node:hover > rect,
#force-architecture .force-node:focus > rect,
#force-architecture .force-node:hover > .force-outline,
#force-architecture .force-node:focus > .force-outline {
  stroke: #f1e6ff;
  stroke-width: 2.2;
}
#force-architecture .force-title {
  fill: #e5edf4;
  font-size: 14px;
  font-weight: 650;
  pointer-events: none;
}
#force-architecture .force-subtitle {
  fill: #dbc2f6;
  font: 12px ui-monospace, monospace;
  pointer-events: none;
}
#force-architecture .force-storage {
  fill: #f1d6a5;
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
}
.cache-ledger { margin: 20px 0; padding: 16px; border: 1px solid #344b5a; border-radius: 8px; overflow-x: auto; }
.cache-ledger h2 { font-size: 18px; }
.cache-ledger p { font-size: 12px; line-height: 1.5; }
.cache-ledger button { font-size: 13px; }
@media (max-width: 760px) {
  .force-scroll { overflow-x: hidden; }
  #force-architecture { min-width: 0; width: 100%; }
}

#force-architecture .force-parameter > .force-outline { fill: #292039; stroke: #ddc0ff; stroke-width: 2; }
#force-architecture .force-edge.membership { stroke: #698494; stroke-dasharray: 2 6; }
#force-architecture .force-edge.position { stroke: #9bbacb; }

#force-architecture .force-reduction > .force-outline { stroke-width: 2.5; }

/* Categories stay on the ovoids; scheduling explanations live in the modal. */
#model-select { margin-left: auto; max-width: 100%; padding: 5px 9px; border: 1px solid #486071; border-radius: 4px; background: #15222c; color: #d1dbe4; font: inherit; }
#model-select:focus-visible { outline: 2px solid #b7a1df; outline-offset: 3px; }
#force-architecture .force-kind { fill: #edc391; font: 600 10px Inter, ui-sans-serif, system-ui, sans-serif; pointer-events: none; }
#force-architecture .force-node.operation-reduce > .force-outline { stroke: #f1cf7e; stroke-width: 2.8; }
#force-architecture .force-node.operation-window > .force-outline { stroke: #7ed2c9; stroke-dasharray: 2 3; }
#force-architecture .force-node.operation-lookup > .force-outline,
#force-architecture .force-node.operation-select > .force-outline { fill: #19313a; stroke: #8acadd; stroke-dasharray: 8 3 2 3; }
#force-architecture .force-node.operation-state > .force-outline { fill: #1d3930; stroke: #7edbb0; stroke-width: 2.8; }
#force-architecture .force-node.operation-point > .force-outline { fill: #533321; stroke: #f0aa5c; }
#force-architecture .force-node.operation-serial > .force-outline { fill: #24313e; stroke: #aebed1; }
.dependency-card { border-bottom: 1px solid #405568; padding-bottom: 16px; margin-bottom: 18px; }
.operation-tag { color: #edc391; font-weight: 650; margin-bottom: 10px; }
.operation-tag.reduce { color: #f1cf7e; }.operation-tag.state { color: #7edbb0; }
.operation-tag.lookup, .operation-tag.select, .operation-tag.route, .operation-tag.window { color: #8acadd; }
.dependency-card dl { display: grid; grid-template-columns: 110px 1fr; gap: 7px 12px; margin: 0 0 14px; }
.dependency-card dt { color: #d8e3ec; font-weight: 600; }.dependency-card dd { margin: 0; }
#dialog-content .stage-order { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; padding: 0; margin: 12px 0; }
.stage-order li { position: relative; padding: 4px 8px; border: 1px solid #647585; border-radius: 18px; background: #1a2934; }
.stage-order li:not(:last-child)::after { content: '→'; position: absolute; right: -17px; color: #bfc6d1; }
.dependency-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.dependency-links strong { min-width: 65px; }.dependency-links button { font-size: 12px; }
@media (max-width: 620px) { header { flex-wrap: wrap; gap: 7px; } #model-select { margin-left: 0; font-size: 12px; } .dependency-card dl { grid-template-columns: 1fr; gap: 3px; }.dependency-card dd { margin-bottom: 7px; } }

/* Storage lifetime palette: fixed weights, persistent state, and ephemeral signals. */
#force-architecture .force-node.force-parameter > .force-outline,
#force-architecture .force-node.force-data.force-parameter > .force-outline {
  fill: #123b70;
  stroke: #58a6ff;
}
#force-architecture .force-node.force-cache > .force-outline {
  fill: #651f2b;
  stroke: #ff6b78;
}
#force-architecture .force-node.force-value > .force-outline,
#force-architecture .force-node.force-function > .force-outline,
#force-architecture .force-node.force-routing > .force-outline {
  fill: #174d35;
  stroke: #67d69a;
}

/* Abstract pipeline hooks: function bubbles use geometry and labels as well as color. */
#force-architecture .force-node.force-function > .force-outline { stroke-width: 2.4; stroke-dasharray: 7 3; }
#force-architecture .force-node.force-function.operation-reduce > .force-outline { stroke-dasharray: none; }
#force-architecture .force-node.force-function.operation-window > .force-outline { stroke-dasharray: 2 4; }
#force-architecture .force-node.force-function.operation-state > .force-outline { stroke-dasharray: 10 3 2 3; }
#force-architecture .force-node.force-function.operation-serial > .force-outline { stroke-dasharray: 1 4; }
#force-architecture .force-node.force-function .force-kind { fill: #b8f3d1; }

#force-architecture .force-operation-icon { pointer-events: none; opacity: .92; }

/* Map/lookup operations use a sharp-cornered rectangle and a dedicated function color. */
#force-architecture .force-node.operation-map > .force-outline {
  fill: #49351a;
  stroke: #f0b84b;
  stroke-width: 2.6;
  stroke-dasharray: none;
}
#force-architecture .force-node.operation-map .force-title,
#force-architecture .force-node.operation-map .force-subtitle { fill: #ffe0a0; }
#force-architecture .force-node.operation-map .force-title { font-size: 12px; }
#force-architecture .force-node.operation-map .force-subtitle { font-size: 10px; }
#force-architecture .force-node.operation-map > .force-outline { rx: 0; }

#force-architecture .force-node.operation-map .force-kind { font-size: 13px; }
#force-architecture .force-node.operation-map .force-subtitle { font-size: 11px; }

#force-architecture .force-edge.feedback { stroke: #f0b84b; stroke-dasharray: 10 6; stroke-width: 2.5; }

/* Function geometry is independent of data lifetime and operation subtype. */
#force-architecture .force-node.operation-function > .force-outline {
  fill: #49351a; stroke: #f0b84b; stroke-width: 2.4; stroke-dasharray: none; rx: 0;
}
#force-architecture .force-node.operation-function .force-kind { fill: #ffd18a; }
.detail-flow .flow-node:not(.record):not(.parameter):not(.reference):not(.elision) rect {
  fill: #49351a; stroke: #f0b84b;
}

.retention-flow { pointer-events: none; }
#force-architecture .retention-step { fill: #302616; stroke: #c99a48; stroke-width: 1; }
#force-architecture .retention-label { fill: #ffe0a0; font: 13px ui-monospace, monospace; }
#force-architecture .retention-note { fill: #ffe0a0; font: 10px ui-monospace, monospace; }
#force-architecture .retention-arrow { fill: none; stroke: #f0b84b; stroke-width: 1.5; }



.pipeline-layout { display: grid; grid-template-columns: 155px minmax(0, 1fr); gap: 14px; align-items: start; }
.stage-legend { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; padding: 10px; background: #15222c; border: 1px solid #354656; }
.stage-legend strong { display: block; margin-bottom: 10px; }
#stage-navigation { display: grid; gap: 3px; }
#stage-navigation button { text-align: left; border: 0; border-left: 3px solid transparent; border-radius: 0; padding: 6px; }
#stage-navigation button small { display: block; color: #9fb2c4; font-size: 10px; }
#stage-navigation button[aria-current="step"] { border-color: #f0b84b; background: #49351a; color: #ffe0a0; }
#force-architecture [data-force-node] { scroll-margin-top: 24px; }
@media (max-width: 760px) {
  .pipeline-layout { display: block; }
  .stage-legend { top: 0; z-index: 3; max-height: 110px; }
  .stage-legend strong { display: none; }
  #stage-navigation { display: flex; overflow-x: auto; }
  #stage-navigation button { flex: 0 0 125px; }
  #force-architecture [data-force-node] { scroll-margin-top: 120px; }
}

/* Shared view navigation and the analytic decode ledger. */
[hidden] { display: none !important; }
.view-tabs { display:flex; gap:6px; border-bottom:1px solid #304251; margin:12px 0 20px; }
.view-tabs button { padding:10px 18px; font-size:15px; border:0; border-bottom:3px solid transparent; border-radius:0; background:transparent; }
.view-tabs [aria-selected="true"] { color:#e8dcff; border-bottom-color:#b8a0e7; }
.stats-heading p,.stats-note { color:#9db1c1; line-height:1.6; font-size:14px; }
.stats-controls { display:flex; flex-wrap:wrap; align-items:end; gap:20px; margin:22px 0 12px; }
.stats-controls label { display:grid; gap:8px; font-size:13px; color:#a9bdcc; }
.stats-controls input,.stats-controls select,.stats-table-heading select { font:inherit; color:#deebf5; background:#182530; border:1px solid #476072; padding:9px; border-radius:4px; max-width:100%; }
.stats-controls input { width:200px; }.stats-controls input:invalid { border-color:#e99f7d; }
.stats-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:24px 0 34px; }
.stats-summary article { background:#17252f; border:1px solid #354b5a; border-radius:8px; padding:20px; }
.stats-summary article>div { font-size:13px; color:#a6bbcb; }.stats-summary strong { display:block; font-size:32px; color:#d0b8fa; margin:12px 0; font-variant-numeric:tabular-nums; }
.stats-summary p { font-size:13px; line-height:1.55; margin:0; color:#a6bbcb; }
#statistics-panel { max-width:1440px; margin:auto; padding-bottom:40px; }
#statistics-panel h3 { font-size:19px; margin-top:32px; }
.stats-family-row { display:grid; grid-template-columns:150px minmax(40px,1fr) 105px 110px; gap:16px; align-items:center; margin:14px 0; font-size:14px; }
.stats-family-row>strong,.stats-family-row>span:last-child { text-align:right; font-variant-numeric:tabular-nums; }.stats-family-row>span:last-child { color:#93abba; }
.stats-bar-track { height:9px; background:#1c2c38; border-radius:3px; }.stats-bar-track>div { min-width:2px; height:100%; background:#94b9cd; border-radius:3px; }
.stats-table-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-top:22px; }.stats-table-heading h3 { margin:0 !important; }.stats-table-heading label { font-size:13px; }
.stats-table-scroll { overflow-x:auto; margin:15px 0 25px; }#statistics-panel table { font-size:13px; line-height:1.5; }#statistics-panel th { white-space:nowrap; }
#statistics-panel td small { display:block; color:#87a0b2; font-size:11px; margin-bottom:4px; }.stats-numeric { white-space:nowrap; font-variant-numeric:tabular-nums; }.stats-formula { min-width:235px; color:#a6bccb; }
.stats-caveats,.stats-method { font-size:14px; line-height:1.7; color:#a6bbcb; }.stats-method { padding:18px; border:1px solid #354b5a; border-radius:7px; }.stats-method summary { cursor:pointer; color:#d7e3ed; }.stats-total { background:#192b34; }
@media(max-width:900px) { .stats-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }.stats-family-row { grid-template-columns:100px minmax(20px,1fr) 75px 85px; gap:8px; font-size:12px; } }
@media(max-width:480px) { .stats-summary { grid-template-columns:1fr; }.stats-controls { display:grid; }.view-tabs button { font-size:14px; padding:10px; }.stats-family-row { grid-template-columns:95px minmax(20px,1fr) 70px; }.stats-family-row>span:last-child { display:none; } }

#force-architecture.has-trace .force-edge { opacity:.13; }
#force-architecture.has-trace .force-edge.is-traced { opacity:1; stroke-width:3; }

.stats-flow { margin:30px 0; padding:22px; border:1px solid #3a5361; border-radius:12px; background:linear-gradient(135deg,#152832,#101b25); }
.stats-flow h3 { margin:6px 0 10px; font-size:25px; }
.stats-flow-scroll { overflow-x:auto; }
#stats-flow-graph { display:block; width:100%; min-width:0; max-width:1200px; margin:auto; }
.stats-flow-edge { fill:none; stroke:#83bca9; opacity:1; }
.stats-flow-node { cursor:pointer; }
.stats-flow-node ellipse { fill:#1c3542; stroke:#79b29f; stroke-width:1.5; }
.stats-flow-node text { fill:#e2f2ed; font-size:15px; font-weight:600; pointer-events:none; }
.stats-flow-node .stats-flow-count { font-size:16px; fill:#eff8fc; font-weight:700; }
.stats-flow-node:hover ellipse,.stats-flow-node:focus ellipse,.stats-flow-node.is-selected ellipse { stroke:#d4ffe7; stroke-width:3; fill:#285142; }
.stats-flow-node:focus { outline:none; }
.stats-flow .is-dim { opacity:.14; }
.stats-flow td { vertical-align:top; }
.stats-flow td details { min-width:220px; max-width:520px; }
.stats-flow td summary { cursor:pointer; color:#b1ddcc; }
.stats-flow td details p { font-size:12px; padding-top:10px; }
@media(max-width:600px){.stats-flow{padding:12px}.stats-flow h3{font-size:21px}#stats-flow-graph{min-width:0}}

.stats-flow [data-tone=static] { --flow-tone:#7abcf3; }
.stats-flow [data-tone=kv] { --flow-tone:#ef8989; }
.stats-flow [data-tone=state] { --flow-tone:#ef8989; }
.stats-flow [data-tone=live] { --flow-tone:#89d5b1; }
.stats-flow-node[data-tone] ellipse { stroke:var(--flow-tone,#79b29f); }
.stats-flow-node .stats-flow-operand { font-size:10px; font-weight:400; fill:var(--flow-tone,#b5cbd3); }
#stats-flow-graph.is-detailed .stats-flow-node > text:not(.stats-flow-count):not(.stats-flow-operand):not(.stats-flow-unit) { font-size:14px; }
.stats-flow-legend { display:flex; flex-wrap:wrap; gap:12px 22px; margin:18px 0; font-size:12px; }
.stats-flow-legend[hidden] { display:none; }
.stats-flow-legend span::before { content:''; display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px; background:var(--flow-tone); }
.stats-flow-inspector { border-left:3px solid #75b79f; padding:4px 18px; margin:20px 0; background:#11202a; font-size:14px; }
.stats-flow h4 { margin:12px 0; font-size:16px; color:#dbece5; }
.stats-flow-equation { font-family:ui-monospace,monospace; color:#b9dccf; overflow-wrap:anywhere; }
.stats-flow dl { display:grid; grid-template-columns:160px 1fr; gap:9px 16px; line-height:1.6; font-size:13px; }
.stats-flow dt { color:#b1d2c6; }.stats-flow dd { margin:0; color:#b3c5d0; }
.stats-flow-catalog { margin:16px 0; }
#stats-flow-catalog > details { border-left:2px solid var(--flow-tone); padding:8px 12px; margin:8px 0; }
#stats-flow-ranking td:first-child { min-width:230px; max-width:420px; }
@media(max-width:600px){.stats-flow dl{grid-template-columns:1fr;gap:4px}.stats-flow dd{margin-bottom:8px}#stats-flow-graph.is-detailed .stats-flow-node > text:not(.stats-flow-count):not(.stats-flow-operand):not(.stats-flow-unit){font-size:17px}.stats-flow-node .stats-flow-operand{font-size:11px}}
.stats-flow .stats-controls { grid-template-columns:minmax(0,1fr); }
.stats-flow .stats-controls label,.stats-flow .stats-controls select { min-width:0; max-width:100%; }
.stats-flow-node[data-tone=static] ellipse { fill:#19364b; }
.stats-flow-node[data-tone=kv] ellipse,.stats-flow-node[data-tone=state] ellipse { fill:#452b33; }
.stats-flow-node[data-tone=live] ellipse { fill:#1a3b32; }
.stats-flow-node.is-selected ellipse,.stats-flow-node:focus ellipse { stroke:#eef8fb; stroke-width:3; }
@media(max-width:600px){#stats-flow-graph.is-detailed .stats-flow-node > text:not(.stats-flow-count):not(.stats-flow-operand):not(.stats-flow-unit){font-size:15px}}

#stats-flow-graph.is-detailed .stats-flow-node > text.stats-flow-unit, #stats-flow-graph .stats-flow-node .stats-flow-unit { font-size:12px; font-weight:600; fill:#eff8fc; }

.stats-flow-edge-label { fill:#e7fff6; stroke:#10212b; stroke-width:4px; paint-order:stroke; stroke-linejoin:round; font-weight:700; pointer-events:none; }
.stats-flow-edge { opacity:1; }

.stats-flow-label-leader { fill:none; stroke:#a7c9bf; stroke-width:.65; stroke-dasharray:2 3; opacity:.65; pointer-events:none; }

.stats-flow-edge.is-retained { stroke-dasharray:7 5; }
.stats-flow-edge { stroke-linejoin:round; stroke-linecap:round; }
.stats-flow-edge-label { pointer-events:auto; }

.stats-flow-edge.is-incoming { stroke:#87c8ff; }
.stats-flow-edge.is-outgoing { stroke:#ffcc87; }
.stats-flow-ports { display:grid; grid-template-columns:1fr 1fr; gap:12px; font-size:13px; }
.stats-flow-ports ul { margin:8px 0; padding-left:18px; }
.stats-flow-ports li { margin:5px 0; }
@media(max-width:600px){.stats-flow-ports{grid-template-columns:1fr}}

.stats-flow-edge-halo { fill:none; stroke:#13252e; stroke-linejoin:round; stroke-linecap:round; pointer-events:none; }

/* The normalized vector is the handoff between mixer and feed-forward stages. */
#force-architecture .force-handoff .force-outline { stroke: #6ee7d2; stroke-width: 3; fill: #153e38; }
#force-architecture .force-handoff .force-kind { fill: #a5f3e3; font-weight: 700; }
#force-architecture .force-stage-divider path { stroke: #548b84; stroke-width: 1; stroke-dasharray: 6 5; fill: none; }
#force-architecture .force-stage-divider text { fill: #a5d9d0; font-size: 12px; font-weight: 650; letter-spacing: .6px; }
#stage-navigation .stage-nav-section { color: #8fa9b9; font-size: 10px; font-weight: 700; padding: 12px 5px 4px; }
#stage-navigation .stage-nav-handoff { border-left-color: #6ee7d2; color: #a5f3e3; }
@media (max-width: 760px) { #stage-navigation .stage-nav-section { display: none; } }

/* Operation classes are independent of data-bubble lifetime colors. */
.step-fixed { --op-fill: #123b70; --op-stroke: #58a6ff; }
.step-dynamic { --op-fill: #63300f; --op-stroke: #ff9b42; }
.step-add { --op-fill: #164b49; --op-stroke: #65d7cc; }
.step-reduce { --op-fill: #244725; --op-stroke: #97d978; }
.step-nonlinear { --op-fill: #651f3d; --op-stroke: #ff7faa; }
.step-position { --op-fill: #124752; --op-stroke: #58d9f0; }
.step-select { --op-fill: #492b68; --op-stroke: #bf9aff; }
.step-route { --op-fill: #303b48; --op-stroke: #b4c4d6; }
#force-architecture .retention-step[data-op-kind] { fill: var(--op-fill); stroke: var(--op-stroke); }
.op-legend { margin: 0 0 14px; padding: 10px 12px; background: #15222c; border: 1px solid #354656; font-size: 12px; }
#op-legend-key { display: flex; flex-wrap: wrap; gap: 8px; }
.op-tag { display: inline-block; padding: 3px 7px; border: 1px solid var(--op-stroke); background: var(--op-fill); color: #f0f4f8; border-radius: 3px; font-size: 11px; }
.op-legend details { margin-top: 10px; }
.op-legend summary { cursor: pointer; }

.pipeline-legend-title { display: block; margin-bottom: 7px; }
.node-legend-title { margin-top: 12px; }
.pipeline-node-key { display: flex; flex-wrap: wrap; gap: 8px; }
.node-legend-tag { padding: 4px 10px; border: 1px solid; border-radius: 20px; color: #f0f4f8; font-size: 11px; }
.node-static { background: #123b70; border-color: #58a6ff; }
.node-ephemeral { background: #174d35; border-color: #6fdda2; }
.node-mutable { background: #651f2b; border-color: #ff6b78; border-style: dashed; }

/* Unit-time decode parallelism; exact samples remain inspectable at any scale. */
.stats-parallel { margin:22px 0 30px; padding:22px; border:1px solid #355062; border-radius:14px; background:#0c1d27; }
#statistics-panel .stats-parallel h3 { margin-top:6px; }
.stats-parallel-chart-scroll { overflow-x:auto; }
#stats-parallel-plot { display:block; width:100%; height:auto; min-height:190px; touch-action:auto; }
#stats-parallel-plot text { fill:#abc3d2; font-size:13px; }
.parallel-area { fill:#64cbb455; stroke:#79e0c6; stroke-width:1; }
.parallel-grid { stroke:#304653; stroke-width:1; }
.parallel-boundary { stroke:#d6b1fb; stroke-width:1; stroke-dasharray:3 5; opacity:.35; }
#stats-parallel-cursor { stroke:#fff; fill:#fff; pointer-events:none; }
.stats-parallel-slider { display:flex; gap:15px; align-items:center; font-size:13px; }
.stats-parallel-slider input { flex:1; min-width:0; accent-color:#79e0c6; }
#stats-parallel-inspector { min-height:138px; font-size:13px; }
.parallel-kind-list { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
.parallel-kind-list span { border-left:3px solid var(--parallel-color); padding:4px 9px; background:#172d39; border-radius:3px; }
#stats-parallel-counts { overflow-x:auto; }
@media(max-width:600px) { .stats-parallel { padding:13px 10px; } #stats-parallel-plot { min-height:0; min-width:850px; } .stats-parallel-slider { flex-wrap:wrap; } .stats-parallel-slider input { flex-basis:100%; } }

/* ryle.dev page frame around the extracted views. */
.viz-frame { display:flex; justify-content:space-between; align-items:baseline; gap:6px 16px; flex-wrap:wrap; padding:6px 0 10px; font-size:12px; }
.viz-frame a { color:#9fb3c4; text-decoration:none; }
.viz-frame a:hover { color:#e8eef3; }
.viz-frame .name { font-weight:600; color:#e8eef3; }
#site-title { font-size:17px; margin:0 12px 0 0; }
.site-header { flex-wrap:wrap; }
.site-header > .view-tabs { margin:0; border:0; }
#app-loading { color:#95adbf; }
#model-controls { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin:8px 0; font-size:12px; }
#model-controls select { margin:0; font-size:12px; color:#d1dbe4; background:#101820; border:1px solid #354656; border-radius:3px; padding:3px 6px; }