:root {
  --bg-0: #07090d;
  --bg-1: #0c1016;
  --surface: #111720;
  --surface-2: #151d27;
  --surface-3: #1a2430;
  --text-primary: #f3f6f8;
  --text-secondary: #aab4c0;
  --text-muted: #727e8c;
  --accent-info: #66b3ff;
  --accent-healthy: #63d69a;
  --accent-warning: #f2b35d;
  --accent-critical: #f06c75;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --chrome-h: 64px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22, .78, .22, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-snap-type: y mandatory; background: var(--bg-0); }
body { margin: 0; overflow-x: clip; background: var(--bg-0); color: var(--text-primary); font-family: var(--sans); }
button, a { font: inherit; }
button { border: 0; }
a { color: inherit; }
button:focus-visible, a:focus-visible, [tabindex="0"]:focus-visible { outline: 2px solid var(--accent-info); outline-offset: 3px; }

.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 10px 14px; transform: translateY(-150%); background: var(--text-primary); color: var(--bg-0); }
.skip-link:focus { transform: none; }

.presenter-bar {
  position: fixed;
  z-index: 300;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: 150px minmax(600px, 1fr) 250px;
  align-items: center;
  height: var(--chrome-h);
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 9, 13, .94);
  backdrop-filter: blur(14px);
}

.brand { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-decoration: none; }
.brand i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-info); box-shadow: 0 0 12px rgba(102,179,255,.6); }

.stage-progress { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; white-space: nowrap; }
.stage-progress a { padding: 7px 8px; border: 1px solid transparent; border-radius: 5px; color: var(--text-muted); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-decoration: none; transition: 180ms ease; }
.stage-progress a:hover { color: var(--text-primary); }
.stage-progress a.active { border-color: rgba(102,179,255,.5); background: rgba(102,179,255,.08); color: var(--accent-info); }
.stage-progress a.completed { color: var(--text-secondary); }
.stage-progress a.upcoming { color: #46515e; }
.stage-progress i { width: 18px; height: 1px; background: var(--line-strong); }
.stage-group-label { color: #5f6b78; font-family: var(--mono); font-size: 8px; letter-spacing: .12em; }
.forward-label { margin-left: 12px; }

.presenter-meta { display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: var(--text-muted); font-family: var(--mono); font-size: 9px; letter-spacing: .07em; white-space: nowrap; }
.presenter-meta > span:nth-child(2) { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.presenter-meta button { width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-1); color: var(--text-secondary); cursor: pointer; }
.presenter-meta button:hover { border-color: var(--line-strong); color: var(--text-primary); }

.scene { position: relative; height: 100svh; min-height: 650px; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; border-bottom: 1px solid rgba(255,255,255,.035); background: var(--bg-0); }
.scene::after { content: attr(data-index); position: absolute; z-index: 0; right: 4vw; top: 11vh; color: rgba(255,255,255,.025); font-size: clamp(150px, 21vw, 320px); font-weight: 800; line-height: .75; pointer-events: none; }
.scene-inner { position: relative; z-index: 1; width: min(1500px, 100%); height: 100%; margin: 0 auto; padding: calc(var(--chrome-h) + 22px) clamp(40px, 5vw, 78px) 24px; }
.scene-inner.wide { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 14px; }
.scene-inner.centered { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.scene-inner.split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(310px, .65fr); align-items: center; gap: clamp(28px, 4vw, 60px); }

.scene-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; min-height: 68px; }
.scene-heading > div { min-width: 0; }
.scene-heading > p, .scene-heading > div > p:last-child { max-width: 460px; margin: 8px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.breadcrumb, .micro-label { margin: 0 0 9px; color: var(--accent-info); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
h2 { max-width: 1080px; margin: 0; font-size: clamp(34px, 3.7vw, 56px); font-weight: 570; line-height: 1.01; letter-spacing: -.045em; }
h3 { margin: 0; }
.section-lede { max-width: 760px; color: var(--text-secondary); font-size: 15px; line-height: 1.5; }
blockquote { display: flex; align-items: center; justify-content: center; min-height: 46px; margin: 0; padding: 11px 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--text-secondary); font-size: 14px; font-weight: 550; text-align: center; }
.time-chip, .stage-complete { align-self: center; padding: 8px 11px; border-left: 2px solid var(--accent-info); color: var(--text-secondary); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .09em; }
.stage-complete { color: var(--accent-healthy); border-color: var(--accent-healthy); }
.synthetic-badge { position: absolute; right: 14px; bottom: 11px; color: var(--text-muted); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; }

.primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 14px; border-radius: 6px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-decoration: none; cursor: pointer; }
.primary-button { background: var(--accent-info); color: #06101a; }
.secondary-button { border: 1px solid var(--line-strong); background: var(--bg-1); color: var(--text-secondary); }

/* Opening */
.opening-layout { padding-top: var(--chrome-h); }
.opening-layout .micro-label { margin-bottom: 24px; }
.opening-layout h1 { margin: 0; font-size: clamp(76px, 10vw, 150px); font-weight: 530; line-height: .92; letter-spacing: -.07em; }
.opening-subtitle { margin: 32px 0 0; color: var(--text-secondary); font-size: clamp(23px, 2.5vw, 38px); font-weight: 350; line-height: 1.15; letter-spacing: -.035em; opacity: 0; transform: translateY(10px); animation: openingIn 700ms var(--ease) 900ms forwards; }
.opening-timing { display: flex; align-items: center; gap: 16px; margin-top: 45px; color: var(--text-muted); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; }
.opening-timing span { display: flex; gap: 8px; }
.opening-timing b { color: var(--text-secondary); }
.opening-timing i { width: 30px; height: 1px; background: var(--line-strong); }
.next-cue { position: absolute; bottom: 24px; display: grid; gap: 4px; color: var(--text-muted); font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-decoration: none; }
.next-cue span { color: var(--accent-info); font-size: 17px; }
@keyframes openingIn { to { opacity: 1; transform: none; } }

/* Capability overview */
.capability-map { display: grid; grid-template-columns: 1fr 32px 1fr 32px 1fr; align-items: stretch; gap: 10px; min-height: 0; }
.capability-map > i { align-self: center; color: var(--text-muted); font-size: 20px; text-align: center; }
.capability-stage { display: grid; grid-template-rows: auto auto auto 1fr auto auto auto; align-content: start; gap: 7px; padding: clamp(17px, 2.2vh, 24px); border-top: 2px solid var(--line); background: linear-gradient(180deg, var(--surface), rgba(17,23,32,.45)); color: var(--text-primary); text-align: left; cursor: pointer; transition: 200ms ease; }
.capability-stage:hover, .capability-stage.active { border-color: var(--accent-info); transform: translateY(-2px); }
.capability-stage > span, .capability-stage small, .capability-stage em { color: var(--text-muted); font-family: var(--mono); font-size: 10px; font-style: normal; letter-spacing: .08em; }
.capability-stage h3 { font-size: clamp(28px, 3vw, 43px); letter-spacing: -.04em; }
.capability-stage p { margin: 4px 0 8px; color: var(--text-secondary); font-size: 15px; line-height: 1.4; }
.capability-stage strong { font-size: 13px; }
.capability-stage q { margin-top: 7px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--accent-info); font-size: 13px; font-weight: 650; }
.answer-contract { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 44px; color: var(--text-secondary); }
.answer-contract span { color: var(--accent-info); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; }
.answer-contract strong { font-size: 13px; }

/* Shared topology */
.scale-metrics { display: flex; align-items: center; gap: 17px; min-height: 34px; color: var(--text-secondary); font-size: 13px; }
.scale-metrics b { color: var(--text-primary); font-size: 17px; }
.scale-metrics i { width: 28px; height: 1px; background: var(--line-strong); }
.topology-workbench { display: grid; grid-template-columns: 120px minmax(0, 1fr) 270px; gap: 12px; min-height: 0; }
.topology-stage-tabs { display: grid; align-content: center; gap: 7px; }
.topology-stage-tabs button, .overlay-controls button, .query-chips button, .evolution-tabs button, .principle-tabs button, .diagnostic-steps button { border: 1px solid var(--line); border-radius: 5px; background: transparent; color: var(--text-muted); font-family: var(--mono); font-size: 10px; letter-spacing: .06em; cursor: pointer; }
.topology-stage-tabs button { min-height: 42px; text-align: left; padding: 0 11px; }
.topology-stage-tabs button.active, .overlay-controls button.active, .query-chips button.active, .evolution-tabs button.active, .principle-tabs button.active, .diagnostic-steps button.active { border-color: rgba(102,179,255,.55); background: rgba(102,179,255,.08); color: var(--accent-info); }
.topology-canvas-card, .shared-graph-card, .query-graph-wrap { position: relative; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-1); }
.topology-svg { display: block; width: 100%; height: 100%; min-height: 0; }
.topology-frame-copy { display: flex; flex-direction: column; justify-content: center; padding: 18px; border-top: 2px solid var(--accent-info); background: var(--surface); }
.topology-frame-copy span { color: var(--accent-info); font-family: var(--mono); font-size: 10px; letter-spacing: .09em; }
.topology-frame-copy strong { margin-top: 12px; font-size: 22px; line-height: 1.15; }
.topology-frame-copy p { margin: 12px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.topology-question { position: absolute; left: 16px; bottom: 14px; padding: 8px 11px; border-left: 2px solid var(--accent-info); background: rgba(7,9,13,.85); color: var(--text-primary); font-size: 13px; }
.scope-note, .claim-note { margin: 0; color: var(--text-muted); font-size: 11px; line-height: 1.4; }
.scope-note { text-align: center; }

.topology-svg .edge { fill: none; stroke: #34404c; stroke-width: 1.5; opacity: .7; transition: 220ms ease; }
.topology-svg .edge.path { stroke: var(--accent-info); stroke-width: 3; opacity: .95; }
.topology-svg .edge.degraded { stroke: var(--accent-warning); stroke-width: 3; opacity: 1; }
.topology-svg .edge.dim { opacity: .1; }
.topology-svg .node-shape { fill: #141c25; stroke: #647180; stroke-width: 1.4; transition: 220ms ease; }
.topology-svg .node-label { fill: var(--text-secondary); font-family: var(--mono); font-size: 12px; font-weight: 700; text-anchor: middle; pointer-events: none; }
.topology-svg .node-sub { fill: var(--text-muted); font-family: var(--mono); font-size: 10px; text-anchor: middle; pointer-events: none; }
.topology-svg .node.active .node-shape { fill: rgba(102,179,255,.16); stroke: var(--accent-info); }
.topology-svg .node.suspect .node-shape { fill: rgba(242,179,93,.18); stroke: var(--accent-warning); }
.topology-svg .node.healthy .node-shape { stroke: var(--accent-healthy); }
.topology-svg .node.dim { opacity: .16; }
.topology-svg .node[tabindex="0"] { cursor: pointer; }
.topology-svg .server-component { fill: #182631; stroke: #718295; stroke-width: 1.2; }
.topology-svg .server-accent { fill: rgba(102,179,255,.2); stroke: var(--accent-info); }

/* Syslog problem */
.raw-log-story { min-height: 0; }
.raw-log-story h2 { font-size: clamp(35px, 4vw, 57px); }
.raw-log-stack { display: grid; gap: 6px; }
.raw-log-stack code { display: grid; grid-template-columns: 122px 1fr; align-items: center; min-height: 45px; padding: 7px 12px; border-left: 2px solid #4f5d6c; background: var(--bg-1); color: var(--text-secondary); font: 12px/1.35 var(--mono); }
.raw-log-stack code span { color: var(--text-muted); font-size: 10px; }
.raw-log-stack code.new-expression { border-color: var(--accent-warning); color: var(--text-primary); }
.raw-log-stack code.new-expression span { color: var(--accent-warning); }
.semantic-bracket { display: grid; grid-template-columns: 40px auto 1fr; align-items: center; gap: 10px; margin-top: 8px; color: var(--text-muted); font-family: var(--mono); font-size: 10px; }
.semantic-bracket i { height: 18px; border-bottom: 1px solid var(--accent-info); border-left: 1px solid var(--accent-info); }
.semantic-bracket strong { color: var(--accent-info); font-size: 14px; }
.problem-dimensions { display: grid; align-content: center; gap: 12px; padding: 22px; border-top: 2px solid var(--accent-info); background: var(--surface); }
.problem-dimensions > span { color: var(--text-muted); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; }
.problem-dimensions dl { display: grid; margin: 0; }
.problem-dimensions dl div { display: grid; grid-template-columns: 110px 1fr; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); }
.problem-dimensions dt { color: var(--text-primary); font-size: 20px; font-weight: 650; }
.problem-dimensions dd { margin: 0; color: var(--text-secondary); font-size: 12px; }
.transformation-goal { display: grid; justify-items: center; gap: 7px; margin-top: 6px; color: var(--text-muted); font-family: var(--mono); font-size: 10px; text-align: center; }
.transformation-goal i { color: var(--accent-info); font-style: normal; font-size: 17px; }
.transformation-goal strong { color: var(--text-primary); font-size: 11px; }

/* System planes */
.plane-diagram { display: grid; grid-template-columns: 190px minmax(0, 1fr); grid-template-rows: 1fr 20px 1fr; gap: 7px 14px; min-height: 0; }
.plane-label { display: grid; align-content: center; gap: 5px; padding-right: 16px; border-right: 1px solid var(--line); }
.plane-label span { color: var(--accent-info); font-family: var(--mono); font-size: 11px; }
.plane-label strong { font-size: 14px; }
.plane-label small { color: var(--text-muted); font-size: 11px; line-height: 1.4; }
.system-row { display: flex; align-items: stretch; justify-content: center; min-width: 0; }
.system-row > b { display: grid; place-items: center; width: 28px; flex: 0 0 28px; color: var(--text-muted); font-weight: 400; }
.system-node { display: flex; min-width: 120px; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 10px; border-top: 2px solid var(--line-strong); background: var(--surface); text-align: center; }
.system-node strong { font-size: 11px; letter-spacing: .04em; }
.system-node small { color: var(--text-muted); font-size: 10px; }
.system-node.boundary-node { border-color: var(--accent-info); }
.management-node { flex: 1.8; }
.management-node div { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.management-node div span { padding: 5px 7px; background: var(--bg-1); color: var(--text-secondary); font-size: 10px; }
.plane-turn { grid-column: 2; color: var(--accent-info); text-align: center; }
.processing-plane { display: contents; }
.processing-plane > * { opacity: .18; transition: 300ms var(--ease); }
.plane-diagram.processing-visible .processing-plane > * { opacity: 1; }

/* Recognition */
.recognition-contract { display: grid; grid-template-columns: 190px minmax(0, 1fr) 355px; grid-template-rows: auto minmax(0, 1fr); gap: 10px 12px; min-height: 0; }
.variant-input { grid-row: 1 / 3; display: grid; align-content: center; gap: 7px; padding: 16px; border-top: 2px solid var(--line-strong); background: var(--surface); }
.variant-input > span, .structured-event > span, .entity-schema > span { color: var(--accent-info); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; }
.variant-input code { padding: 8px; background: var(--bg-1); color: var(--text-secondary); font: 11px var(--mono); }
.match-pipeline { grid-column: 2 / 4; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 10px 14px; border: 1px solid var(--line); color: var(--text-secondary); font-family: var(--mono); font-size: 10px; }
.match-pipeline i { color: var(--accent-info); font-style: normal; }
.schema-table { display: grid; align-content: center; min-width: 0; background: var(--surface); }
.schema-table > div { display: grid; grid-template-columns: 65px 1.25fr 1.25fr 1.2fr 40px; gap: 7px; align-items: center; min-height: 47px; padding: 5px 10px; border-bottom: 1px solid var(--line); color: var(--text-secondary); font-size: 10px; }
.schema-table .schema-head { min-height: 35px; color: var(--text-muted); font-family: var(--mono); font-size: 9px; }
.schema-table strong { color: var(--text-primary); font-family: var(--mono); font-size: 10px; }
.structured-event, .entity-schema { display: block; min-width: 0; margin: 0; padding: 16px; overflow: hidden; border-top: 2px solid var(--accent-info); background: var(--bg-1); color: var(--text-secondary); font: 11px/1.55 var(--mono); white-space: pre-wrap; }
.structured-event > span, .entity-schema > span { display: block; margin-bottom: 10px; }

/* Flywheel */
.flywheel-layout { display: grid; grid-template-rows: auto 1fr auto; gap: 13px; min-height: 0; }
.recognition-metric { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 58px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.recognition-metric span { color: var(--accent-info); font-family: var(--mono); font-size: 10px; letter-spacing: .08em; }
.recognition-metric strong { color: var(--text-secondary); font-size: 12px; }
.recognition-metric i { color: var(--text-muted); font-style: normal; }
.recognition-metric small { color: var(--text-muted); font-size: 10px; }
.flywheel { display: flex; align-items: center; justify-content: center; min-height: 0; }
.flywheel button { min-width: 148px; min-height: 92px; padding: 10px; border-top: 2px solid var(--line-strong); background: var(--surface); color: var(--text-secondary); font-family: var(--mono); font-size: 10px; line-height: 1.5; cursor: pointer; }
.flywheel button.active { border-color: var(--accent-info); background: rgba(102,179,255,.07); color: var(--text-primary); }
.flywheel i { width: 34px; color: var(--text-muted); font-style: normal; text-align: center; }
.trend-card { display: grid; grid-template-columns: 1fr 30px 1fr 30px 1fr 2.2fr; align-items: center; min-height: 70px; padding: 10px 16px; background: var(--surface); }
.trend-card div { display: grid; gap: 5px; }
.trend-card span { color: var(--text-muted); font-family: var(--mono); font-size: 9px; }
.trend-card strong { font-size: 19px; }
.trend-card i { height: 1px; background: var(--accent-info); }
.trend-card small { color: var(--text-secondary); font-size: 10px; line-height: 1.5; }

/* Stage close */
.source-band { display: grid; grid-template-columns: repeat(4, 1fr); min-height: 0; }
.source-band article { display: grid; align-content: center; min-width: 0; padding: 16px; border-top: 2px solid var(--line-strong); border-right: 1px solid var(--line); background: var(--surface); }
.source-band article:last-child { border-right: 0; }
.source-band span { color: var(--text-muted); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; }
.source-band strong { margin-top: 9px; font-size: 19px; }
.source-band p { margin: 8px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.source-band a { margin-top: 7px; color: var(--accent-info); font-size: 10px; }
.sensing-flow, .manual-investigation, .implementation-flow, .opportunity-flow, .learning-loop { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 11px; border: 1px solid var(--line); color: var(--text-secondary); font-family: var(--mono); font-size: 10px; }
.sensing-flow i, .manual-investigation i, .implementation-flow i, .opportunity-flow i, .learning-loop i { color: var(--accent-info); font-style: normal; }
.sensing-flow strong { color: var(--text-primary); }
.stage-handoff { display: grid; grid-template-columns: 1fr 1.2fr auto; align-items: center; gap: 18px; min-height: 50px; color: var(--text-secondary); }
.stage-handoff p { margin: 0; font-size: 11px; }
.stage-handoff strong { font-size: 13px; }
.stage-handoff a { color: var(--accent-info); font-family: var(--mono); font-size: 10px; text-decoration: none; }

/* Pages 2–8 · review refinements */
.capability-map { align-self: center; width: 100%; height: clamp(290px, 40vh, 360px); }
.capability-stage { grid-template-rows: auto auto auto auto auto auto auto; align-content: center; padding: 16px 18px; }
.capability-stage p { margin-bottom: 3px; }
.capability-stage small { margin-top: 2px; color: var(--accent-info); }
.capability-stage q { padding-top: 9px; }

.compact-topology-page { grid-template-rows: auto auto minmax(0, 1fr) auto !important; gap: 8px !important; }
.compact-topology-page .scale-metrics { justify-content: center; min-height: 26px; padding: 1px 0 5px; }
.compact-topology-page .topology-workbench { height: 100%; grid-template-columns: 112px minmax(0, 1fr) 255px; }
.compact-topology-page .topology-canvas-card { height: 100%; }
.compact-topology-page .topology-stage-tabs button { min-height: 38px; }
.scope-note strong { color: var(--accent-info); font: 10px var(--mono); letter-spacing: .08em; }
.topology-svg .density-label { fill: #718090; font: 8px var(--mono); font-weight: 700; text-anchor: middle; letter-spacing: .05em; }
.topology-svg .density-dots { fill: rgba(102,179,255,.5); font: 14px var(--mono); text-anchor: middle; letter-spacing: .35em; }

.syslog-problem-page { grid-template-rows: auto minmax(0, 1fr) !important; }
.syslog-problem-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .72fr); gap: 16px; min-height: 0; }
.syslog-problem-body .raw-log-story { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 7px; }
.log-stream-label { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; min-height: 28px; }
.log-stream-label span { color: var(--accent-info); font: 9px var(--mono); letter-spacing: .09em; }
.log-stream-label strong { color: var(--text-secondary); font-size: 11px; }
.syslog-problem-body .raw-log-stack { align-content: stretch; }
.syslog-problem-body .raw-log-stack code { grid-template-columns: 118px minmax(0, 1fr); min-height: 0; padding: 6px 10px; font-size: 10.5px; }
.raw-log-stack code.other-event { border-color: #405160; }
.raw-log-stack code.other-event span { color: #8795a4; }
.syslog-problem-body .semantic-bracket { margin-top: 0; }
.syslog-problem-body .problem-dimensions { gap: 8px; padding: 16px 18px; }
.problem-statement { margin: 0; color: var(--text-primary); font-size: 13px; font-weight: 600; line-height: 1.42; }
.syslog-problem-body .problem-dimensions dl div { grid-template-columns: 104px 1fr; padding: 6px 0; }
.syslog-problem-body .problem-dimensions dt { font-size: 17px; }
.syslog-problem-body .problem-dimensions dd { font-size: 10.5px; }
.syslog-problem-body .transformation-goal { gap: 4px; margin-top: 0; }

.collection-page-body { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; min-height: 0; }
.legacy-workflow { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 35px; padding: 6px 12px; border: 1px solid rgba(242,179,93,.22); background: rgba(242,179,93,.035); color: var(--text-secondary); font-size: 10px; }
.legacy-workflow > span { color: var(--accent-warning); font: 9px var(--mono); letter-spacing: .1em; }
.legacy-workflow > i { color: var(--text-muted); font-style: normal; }
.legacy-workflow > small { margin-left: 8px; color: var(--text-muted); font-size: 9px; }
.collection-page-body .plane-diagram { grid-template-columns: 170px minmax(0, 1fr); grid-template-rows: 1fr 12px 1fr; gap: 5px 12px; }
.architecture-row { display: grid; align-items: stretch; min-width: 0; }
.architecture-row.stable-row { grid-template-columns: minmax(120px,1.05fr) 54px minmax(110px,.82fr) 66px minmax(165px,1.35fr) 54px minmax(120px,.9fr); }
.architecture-row.processing-row { grid-template-columns: minmax(155px,1.25fr) 36px minmax(115px,.86fr) 36px minmax(150px,1.18fr) 36px minmax(140px,1fr); }
.architecture-row .system-node { min-width: 0; padding: 8px 7px; }
.architecture-row .system-node strong { font-size: 10px; }
.architecture-row .system-node small { font-size: 9px; }
.system-icon { width: min(106px, 78%); height: 54px; overflow: visible; color: #8494a5; }
.system-icon .icon-stroke { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.system-icon text { fill: var(--text-secondary); font: 9px var(--mono); font-weight: 800; text-anchor: middle; }
.boundary-node .system-icon { color: var(--accent-info); }
.flow-connector { position: relative; display: grid; place-items: center; min-width: 0; padding: 0 4px; }
.flow-connector i { position: relative; display: block; width: 100%; height: 1px; background: #465361; }
.flow-connector i::after { content: ""; position: absolute; right: -1px; top: -3px; width: 6px; height: 6px; border-top: 1px solid #738292; border-right: 1px solid #738292; transform: rotate(45deg); }
.flow-connector span { position: absolute; top: 7px; color: var(--text-muted); font: 7px var(--mono); letter-spacing: .05em; }
.flow-connector.multi-line { grid-template-rows: repeat(3, 1fr); gap: 1px; padding-top: 11px; padding-bottom: 11px; }
.flow-connector.multi-line span { top: 1px; }
.management-node div { gap: 3px; }
.management-node div span { padding: 3px 5px; font-size: 8px; }
.consumer-node { border-color: var(--accent-warning); }
.consumer-node em { color: var(--accent-warning); font: 8px var(--mono); font-style: normal; }
.storage-brands { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; width: 100%; }
.storage-brands span { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 27px; background: var(--bg-1); color: var(--text-secondary); font: 8px var(--mono); }
.storage-brands i { display: inline-block; width: 15px; height: 15px; }
.elastic-mark i { border-radius: 50%; background: linear-gradient(90deg,#f2b35d 0 48%,#66b3ff 48% 100%); clip-path: polygon(0 15%,100% 0,100% 85%,0 100%); }
.clickhouse-mark i { background: repeating-linear-gradient(90deg,#f2b35d 0 2px,transparent 2px 4px); border-right: 2px solid #f06c75; }

#recognition-layer .scene-inner { grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 9px; }
.recognition-ribbon { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 34px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--text-muted); font: 9px var(--mono); }
.recognition-ribbon i { color: var(--accent-info); font-style: normal; }
.recognition-ribbon strong { color: var(--text-secondary); font-size: 9px; }
.recognition-workbench { display: grid; grid-template-columns: minmax(205px,.85fr) minmax(390px,1.55fr) minmax(240px,.95fr); gap: 10px; min-height: 0; }
.recognition-before, .recognition-after, .abstraction-step { min-height: 0; background: var(--surface); }
.recognition-before { display: grid; align-content: center; gap: 6px; padding: 12px; border-top: 2px solid var(--line-strong); }
.recognition-before > span, .recognition-after > span { color: var(--accent-info); font: 9px var(--mono); letter-spacing: .08em; }
.recognition-before code { display: grid; gap: 3px; padding: 7px; background: var(--bg-1); color: var(--text-secondary); font: 9px/1.3 var(--mono); }
.recognition-before code b { color: var(--text-muted); font-size: 8px; text-transform: uppercase; }
.abstraction-stack { display: grid; grid-template-rows: 1.12fr .88fr; gap: 9px; min-height: 0; }
.abstraction-step { display: grid; grid-template-rows: auto minmax(0, 1fr); padding: 11px; border-top: 2px solid var(--accent-info); }
.abstraction-step header { display: grid; grid-template-columns: 24px 1fr; gap: 8px; align-items: start; }
.abstraction-step header > span { color: var(--accent-info); font: 11px var(--mono); }
.abstraction-step header strong { display: block; font-size: 12px; }
.abstraction-step header small { display: block; margin-top: 3px; color: var(--text-muted); font-size: 9px; line-height: 1.35; }
.rule-table { display: grid; align-content: center; margin-top: 7px; }
.rule-table > div { display: grid; grid-template-columns: 1.1fr 1fr 1.1fr; gap: 6px; align-items: center; min-height: 27px; padding: 4px 6px; border-bottom: 1px solid var(--line); color: var(--text-secondary); font-size: 8.5px; }
.rule-table .rule-head { color: var(--text-muted); font: 8px var(--mono); }
.rule-table b { color: var(--text-primary); font: 8.5px var(--mono); }
.alias-grid { display: grid; grid-template-columns: .82fr 18px 1.18fr; gap: 4px 6px; align-content: center; margin-top: 6px; }
.alias-grid code, .alias-grid b { padding: 4px 6px; background: var(--bg-1); font: 8.5px var(--mono); }
.alias-grid code { color: var(--text-secondary); }
.alias-grid b { color: var(--accent-info); }
.alias-grid i { align-self: center; color: var(--text-muted); font-style: normal; text-align: center; }
.recognition-after { display: block; margin: 0; padding: 14px; overflow: hidden; border-top: 2px solid var(--accent-healthy); color: var(--text-secondary); font: 9.5px/1.55 var(--mono); white-space: pre-wrap; }
.recognition-after > span { display: block; margin-bottom: 9px; color: var(--accent-healthy); }

.learning-system { display: grid; grid-template-columns: minmax(170px,.72fr) minmax(480px,1.75fr) minmax(180px,.78fr); gap: 10px; min-height: 0; }
.reactive-lane, .review-service, .impact-feedback { min-height: 0; padding: 12px; background: var(--surface); }
.reactive-lane { display: grid; align-content: center; border-top: 2px solid var(--accent-warning); }
.reactive-lane > span, .review-service header span, .impact-feedback > span, .cluster-queue > span, .rule-editor > span { color: var(--accent-info); font: 8.5px var(--mono); letter-spacing: .08em; }
.reactive-lane > span { color: var(--accent-warning); }
.reactive-lane div { display: grid; gap: 6px; margin-top: 12px; }
.reactive-lane div b, .reactive-lane div strong { padding: 8px; background: var(--bg-1); color: var(--text-secondary); font-size: 10px; line-height: 1.3; }
.reactive-lane div strong { color: var(--text-primary); }
.reactive-lane div i { color: var(--accent-warning); font-style: normal; text-align: center; }
.reactive-lane small { margin-top: 10px; color: var(--text-muted); font-size: 9px; line-height: 1.35; }
.review-service { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 8px; border-top: 2px solid var(--accent-info); }
.review-service header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.review-service header strong { font-size: 15px; }
.review-pipeline { display: grid; grid-template-columns: 1fr 20px 1fr 20px 1fr; align-items: stretch; }
.review-pipeline button, .rule-editor button, .impact-feedback button { border: 1px solid var(--line); background: var(--bg-1); color: var(--text-secondary); font: 8.5px/1.35 var(--mono); cursor: pointer; }
.review-pipeline button { display: grid; grid-template-columns: auto 1fr; gap: 5px; align-items: center; min-height: 39px; padding: 5px; text-align: left; }
.review-pipeline button b { color: var(--accent-info); }
.review-pipeline i { align-self: center; color: var(--text-muted); font-style: normal; text-align: center; }
.learning-system [data-flywheel-step].active { border-color: var(--accent-info); background: rgba(102,179,255,.08); color: var(--text-primary); }
.review-console { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-height: 0; }
.cluster-queue, .rule-editor { display: grid; align-content: center; gap: 5px; padding: 9px; background: var(--bg-1); }
.cluster-queue b { font-size: 11px; }
.cluster-queue code { padding: 5px; background: #0a0e13; color: var(--text-secondary); font: 8.5px var(--mono); }
.cluster-queue small { color: var(--text-muted); font-size: 8.5px; }
.rule-editor label { display: grid; grid-template-columns: 52px 1fr; gap: 5px; padding: 5px; border-bottom: 1px solid var(--line); color: var(--text-muted); font-size: 8.5px; }
.rule-editor label b, .rule-editor label code { color: var(--text-secondary); font: 8.5px var(--mono); }
.rule-editor button, .impact-feedback button { min-height: 30px; padding: 5px; color: var(--accent-info); }
.impact-feedback { display: grid; align-content: center; border-top: 2px solid var(--accent-healthy); }
.impact-feedback > span { color: var(--accent-healthy); }
.impact-number { display: grid; grid-template-columns: auto 1fr auto auto 1fr; align-items: center; gap: 5px; margin-top: 14px; }
.impact-number small { color: var(--text-muted); font: 7.5px var(--mono); }
.impact-number b, .impact-number strong { font-size: 25px; }
.impact-number strong { color: var(--accent-healthy); }
.impact-number i { color: var(--accent-info); font-style: normal; }
.impact-feedback p { margin: 11px 0; color: var(--text-secondary); font-size: 9.5px; line-height: 1.4; }
.trend-card small b { color: var(--accent-healthy); }

#sensing-layer .scene-inner { grid-template-rows: auto minmax(0, 1fr) auto auto; }
.source-band { gap: 10px; background: transparent; }
.source-band article { position: relative; align-content: center; justify-items: start; padding: 18px; overflow: hidden; border: 1px solid var(--line); border-top: 2px solid var(--line-strong); border-radius: 6px; }
.source-band article::after { content: ""; position: absolute; right: -22px; bottom: -28px; width: 90px; height: 90px; border: 1px solid rgba(102,179,255,.08); border-radius: 50%; }
.source-band article:last-child { border-right: 1px solid var(--line); }
.source-band article:nth-child(3) { border-top-color: var(--accent-info); }
.source-icon { width: 58px; height: 44px; margin-bottom: 12px; fill: none; stroke: #8292a3; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.source-band article:nth-child(3) .source-icon { stroke: var(--accent-info); }
.sensing-flow { min-height: 46px; border-color: rgba(102,179,255,.25); background: rgba(102,179,255,.03); }

/* Integration problem */
.dual-problem { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; min-height: 0; }
.dual-problem article { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; padding: 17px; border-top: 2px solid var(--line-strong); background: var(--surface); }
.card-heading span { color: var(--accent-info); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; }
.card-heading strong { display: block; margin-top: 7px; font-size: 20px; }
.card-heading p { margin: 6px 0 0; color: var(--text-secondary); font-size: 11px; }
.baseline-card svg { width: 100%; height: 100%; min-height: 180px; }
.baseline-card .grid-line { fill: none; stroke: var(--line); }
.baseline-card .threshold-line { fill: none; stroke: var(--accent-warning); stroke-dasharray: 7 5; }
.baseline-card .series-a { fill: none; stroke: #8895a3; stroke-width: 2; }
.baseline-card .series-b { fill: none; stroke: var(--accent-info); stroke-width: 2; }
.baseline-card .anomaly-line { fill: none; stroke: var(--accent-critical); stroke-width: 2.2; }
.baseline-card text { fill: var(--text-muted); font: 9px var(--mono); }
.baseline-card > small { color: var(--text-muted); font-size: 10px; }
.dashboard-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; align-content: center; }
.dashboard-wall span { display: grid; place-items: center; min-height: 68px; padding: 7px; border: 1px solid var(--line); color: var(--text-secondary); font: 10px var(--mono); text-align: center; }
.dashboard-wall small { margin-top: 5px; color: var(--text-muted); font-size: 9px; }
.dashboard-questions { color: var(--text-muted); font-size: 10px; text-align: center; }

/* Entity model */
.entity-model-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; min-height: 0; }
.entity-layers { display: grid; grid-template-rows: auto 1fr auto 1fr auto; gap: 8px; padding: 16px; border-top: 2px solid var(--accent-info); background: var(--surface); }
.entity-layers > span { color: var(--accent-info); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; }
.entity-line { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 8px; }
.entity-line b { display: grid; place-items: center; min-height: 55px; padding: 8px; background: var(--bg-1); color: var(--text-secondary); font-size: 11px; text-align: center; }
.entity-line i { color: var(--text-muted); font: 9px var(--mono); }
.scope-cloud { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.scope-cloud b { display: grid; place-items: center; min-height: 42px; padding: 6px; border: 1px dashed var(--line-strong); color: var(--text-secondary); font-size: 10px; text-align: center; }
.entity-layers > small { color: var(--text-muted); font-size: 10px; }
.entity-schema { font-size: 10.5px; }
.signal-landing { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); }
.signal-landing span { display: grid; place-items: center; min-height: 42px; padding: 7px; background: var(--surface); color: var(--text-secondary); font: 9px var(--mono); text-align: center; }

/* Graph pages */
.overlay-controls { display: flex; gap: 5px; }
.overlay-controls button { min-height: 34px; padding: 0 10px; }
.shared-graph-card { min-height: 0; }
.graph-legend { display: flex; align-items: center; gap: 15px; min-height: 35px; color: var(--text-muted); font-size: 10px; }
.graph-legend span { display: flex; align-items: center; gap: 5px; }
.graph-legend i { width: 8px; height: 8px; border-radius: 50%; background: #7c8998; }
.graph-legend .tor-dot { background: var(--accent-info); }
.graph-legend .fabric-dot { background: #ba9cff; }
.graph-legend .warning-dot { background: var(--accent-warning); }
.graph-legend strong { margin-left: auto; color: var(--text-secondary); }
.graph-tooltip { position: fixed; z-index: 500; width: 240px; padding: 12px; border: 1px solid var(--line-strong); border-radius: 6px; background: rgba(7,9,13,.97); color: var(--text-secondary); font-size: 11px; line-height: 1.45; pointer-events: none; }
.graph-tooltip strong { display: block; margin-bottom: 6px; color: var(--text-primary); font-size: 13px; }
.query-page { grid-template-rows: auto auto minmax(0, 1fr) auto !important; gap: 10px; }
.query-chips { display: flex; gap: 6px; min-width: 0; }
.query-chips button { flex: 1; min-height: 34px; padding: 0 8px; }
.query-workbench { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 12px; min-height: 0; }
.evidence-panel { display: grid; align-content: start; gap: 9px; padding: 15px; border-top: 2px solid var(--accent-warning); background: var(--surface); }
.evidence-panel > span { color: var(--accent-warning); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; }
.evidence-panel > div { display: grid; gap: 5px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.evidence-panel small, .evidence-panel dt { color: var(--text-muted); font: 9px var(--mono); }
.evidence-panel > div strong { font-size: 16px; line-height: 1.25; }
.evidence-panel dl { display: grid; gap: 7px; margin: 0; }
.evidence-panel dl div { display: grid; grid-template-columns: 88px 1fr; gap: 8px; }
.evidence-panel dd { margin: 0; color: var(--text-secondary); font-size: 10.5px; line-height: 1.35; }

/* Pages 1–12 · second detailed review */
.capability-map { height: clamp(330px, 43vh, 390px); }
.capability-stage { grid-template-rows: auto auto auto auto auto auto auto auto; gap: 6px; }
.other-projects { min-height: 42px; margin-top: 3px; padding: 7px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.other-projects span { color: var(--text-muted); font: 8px var(--mono); letter-spacing: .08em; }
.other-projects p { margin: 4px 0 0; color: var(--text-secondary); font: 10px/1.35 var(--mono); }
.capability-stage q { margin-top: 0; border-top: 0; }

.syslog-problem-body .raw-log-stack { gap: 3px; }
.syslog-problem-body .raw-log-stack code { grid-template-columns: 124px minmax(0, 1fr); min-height: 25px; padding: 3px 8px; border-left-width: 3px; font-size: 9.3px; line-height: 1.15; }
.syslog-problem-body .raw-log-stack code span { font-size: 8px; letter-spacing: .025em; }
.raw-log-stack code.event-link { border-color: rgba(102,179,255,.78); background: rgba(102,179,255,.055); }
.raw-log-stack code.event-link span { color: #85c2ff; }
.raw-log-stack code.new-expression { background: rgba(242,179,93,.065); }
.raw-log-stack code.event-routing { border-color: #aa8ee7; background: rgba(170,142,231,.055); }
.raw-log-stack code.event-routing span { color: #bca8ef; }
.raw-log-stack code.event-power { border-color: #ef9a63; background: rgba(239,154,99,.055); }
.raw-log-stack code.event-power span { color: #efaa7e; }
.raw-log-stack code.event-cooling { border-color: #e8767e; background: rgba(232,118,126,.052); }
.raw-log-stack code.event-cooling span { color: #ed9298; }
.raw-log-stack code.event-process { border-color: #72c99a; background: rgba(114,201,154,.052); }
.raw-log-stack code.event-process span { color: #8ad5aa; }

.collection-page-body .plane-diagram { grid-template-rows: 1fr 30px 1fr; }
.plane-turn { position: relative; width: 100%; min-height: 30px; overflow: visible; }
.plane-bridge { display: block; width: 100%; height: 30px; overflow: visible; }
.plane-bridge > path { fill: none; stroke: rgba(139,190,235,.68); stroke-width: 1.4; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.plane-bridge marker path { fill: #8bbdeb; }

.recognition-workbench { grid-template-columns: minmax(190px,.7fr) minmax(500px,1.95fr) minmax(225px,.82fr); }
.recognition-before { gap: 4px; padding: 9px; }
.recognition-before code { padding: 5px 6px; font-size: 8.3px; }
.abstraction-stack { grid-template-rows: minmax(0,1.58fr) minmax(0,.42fr); gap: 7px; }
.abstraction-step { padding: 8px 9px; }
.regex-step header small { max-width: 520px; }
.regex-rule-table { display: grid; align-content: center; min-height: 0; margin-top: 5px; }
.regex-rule-table > div { display: grid; grid-template-columns: 125px minmax(0,1fr) 92px; gap: 7px; align-items: center; min-height: 37px; padding: 4px 5px; border-bottom: 1px solid var(--line); }
.regex-rule-table .regex-head { min-height: 20px; color: var(--text-muted); font: 8.2px var(--mono); letter-spacing: .05em; }
.regex-rule-table b { color: var(--text-primary); font: 9px/1.25 var(--mono); }
.regex-rule-table code { color: #a9c9e8; font: 9px/1.24 var(--mono); overflow-wrap: anywhere; }
.regex-rule-table span { color: var(--text-muted); font: 8.8px/1.25 var(--mono); }
.entity-normalizer { grid-template-columns: 210px minmax(0,1fr); align-items: center; }
.entity-normalizer .alias-grid { margin: 0; }

.learning-system { grid-template-columns: minmax(190px,.62fr) 44px minmax(600px,2.35fr); gap: 9px; }
.before-system { border: 1px solid rgba(242,179,93,.28); border-top: 3px solid var(--accent-warning); background: rgba(242,179,93,.045); }
.before-system > strong { display: block; margin-top: 10px; font-size: 14px; line-height: 1.25; }
.before-system div { margin-top: 10px; }
.before-system div b, .before-system div strong { padding: 6px 7px; font-size: 9px; }
.system-transition { display: grid; align-content: center; justify-items: center; gap: 8px; color: var(--text-muted); }
.system-transition span { writing-mode: vertical-rl; transform: rotate(180deg); font: 8px var(--mono); letter-spacing: .12em; }
.system-transition i { color: var(--accent-info); font-style: normal; font-size: 22px; }
.continuous-system { display: grid; grid-template-rows: auto minmax(0,1fr); gap: 8px; min-width: 0; padding: 10px; border: 1px solid rgba(102,179,255,.27); border-top: 3px solid var(--accent-info); background: rgba(102,179,255,.025); }
.after-system-header { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.after-system-header span { color: var(--accent-info); font: 8.5px var(--mono); letter-spacing: .09em; }
.after-system-header strong { font-size: 13px; }
.after-system-grid { display: grid; grid-template-columns: minmax(0,1fr) 175px; gap: 8px; min-height: 0; }
.continuous-system .review-service { padding: 8px; border-top-width: 1px; }
.continuous-system .impact-feedback { padding: 9px; background: rgba(114,201,154,.035); }
.continuous-system .impact-number { margin-top: 10px; }

.alert-platform-card { grid-template-rows: auto auto minmax(110px,1fr) auto !important; gap: 8px; }
.alert-platform-flow { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--text-secondary); font: 8.5px var(--mono); }
.alert-platform-flow i { color: var(--accent-info); font-style: normal; }
.alert-platform-card svg { min-height: 115px; }
.major-project-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); }
.major-project-strip span { display: grid; gap: 3px; min-height: 45px; padding: 7px; background: var(--bg-1); color: var(--text-muted); font-size: 8.5px; line-height: 1.25; }
.major-project-strip b { color: var(--text-secondary); font: 8px var(--mono); }

.entity-model-page { grid-template-rows: auto minmax(0,1fr) auto !important; }
.entity-scope-layout { display: grid; grid-template-columns: minmax(0,1fr) 265px; gap: 12px; min-height: 0; }
.entity-scope-canvas { position: relative; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-1); }
.topsight-svg { display: block; width: 100%; height: 100%; min-height: 0; }
.relation-contract { display: grid; align-content: stretch; gap: 7px; min-height: 0; }
.relation-contract > span { padding: 7px 9px; border-left: 2px solid var(--accent-info); color: var(--accent-info); font: 8.5px var(--mono); letter-spacing: .08em; }
.relation-contract article { display: grid; align-content: center; gap: 5px; min-height: 0; padding: 10px 12px; border-top: 1px solid var(--line-strong); background: var(--surface); }
.relation-contract small { color: var(--text-muted); font: 8px var(--mono); letter-spacing: .06em; }
.relation-contract strong { font-size: 12px; line-height: 1.25; }
.relation-contract p { margin: 0; color: var(--text-secondary); font-size: 9px; line-height: 1.3; }
.relation-contract article > i { color: var(--accent-info); font: 8px var(--mono); font-style: normal; }
.scope-relation div { display: flex; flex-wrap: wrap; gap: 4px; }
.scope-relation b { padding: 4px 5px; border: 1px dashed var(--line-strong); color: var(--text-secondary); font: 7.5px var(--mono); }
.scope-relation .service-scope-key { border-color: #66b3ff; }
.scope-relation .mini-scope-key { border-color: #aa8ee7; }
.scope-relation .pod-scope-key { border-color: #718090; }
.scope-relation .maintenance-scope-key { border-color: #f2b35d; }
.scope-relation .firmware-scope-key { border-color: #72c99a; }

.ts-column-labels text { fill: #7c8998; font: 8px var(--mono); font-weight: 700; text-anchor: middle; letter-spacing: .08em; }
.ts-scope-frame { fill: rgba(255,255,255,.018); stroke-width: 1.2; stroke-dasharray: 7 5; vector-effect: non-scaling-stroke; }
.ts-scope-frame.pod { fill: rgba(113,128,144,.018); stroke: rgba(113,128,144,.46); }
.ts-scope-frame.service, .ts-scope-frame.service-b { fill: rgba(102,179,255,.035); stroke: rgba(102,179,255,.62); }
.ts-scope-frame.service-b { fill: rgba(117,191,222,.025); stroke: rgba(117,191,222,.48); }
.ts-scope-frame.mini, .ts-scope-frame.mini-b { fill: rgba(170,142,231,.027); stroke: rgba(170,142,231,.55); }
.ts-scope-frame.maintenance { fill: rgba(242,179,93,.038); stroke: rgba(242,179,93,.72); }
.ts-scope-frame.firmware { fill: rgba(114,201,154,.038); stroke: rgba(114,201,154,.72); }
.ts-scope-label { fill: #7c8998; font: 8px var(--mono); font-weight: 700; letter-spacing: .06em; }
.ts-scope-label.service, .ts-scope-label.service-b { fill: #82c1ff; }
.ts-scope-label.mini, .ts-scope-label.mini-b { fill: #b6a1eb; }
.ts-scope-label.maintenance { fill: #f2b35d; }
.ts-scope-label.firmware { fill: #72c99a; }
.ts-edge { fill: none; stroke: #394653; stroke-width: 1.05; opacity: .48; transition: 160ms ease; vector-effect: non-scaling-stroke; }
.ts-edge.service { stroke: rgba(102,179,255,.48); }
.ts-edge.fabric { stroke: rgba(170,142,231,.4); }
.ts-edge.path { stroke: var(--accent-info); stroke-width: 2.4; opacity: .95; }
.ts-edge.degraded { stroke: var(--accent-warning); stroke-width: 2.5; opacity: 1; }
.ts-edge.hovered { stroke: #eef7ff; stroke-width: 3.2; opacity: 1; filter: drop-shadow(0 0 4px rgba(102,179,255,.7)); }
.ts-edge.dim { opacity: .055; }
.ts-edge-hit { fill: none; stroke: rgba(102,179,255,.03); stroke-width: 14; cursor: crosshair; pointer-events: stroke; }
.ts-node { transition: 160ms ease; cursor: pointer; }
.ts-node-shape { fill: #141c25; stroke: #667483; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.ts-node.service .ts-node-shape { fill: rgba(102,179,255,.11); stroke: rgba(102,179,255,.72); }
.ts-node.server .ts-node-shape { fill: #17212b; }
.ts-node.tor .ts-node-shape { stroke: #66b3ff; }
.ts-node.leaf .ts-node-shape, .ts-node.spine .ts-node-shape { stroke: #aa8ee7; }
.ts-node.active .ts-node-shape { fill: rgba(102,179,255,.24); stroke: #8bc8ff; stroke-width: 2; }
.ts-node.suspect .ts-node-shape { fill: rgba(242,179,93,.2); stroke: var(--accent-warning); stroke-width: 2; }
.ts-node.changed .ts-node-shape { fill: rgba(114,201,154,.15); stroke: var(--accent-healthy); }
.ts-node.dim { opacity: .12; }
.ts-node-label { fill: var(--text-secondary); font: 8.5px var(--mono); font-weight: 700; text-anchor: middle; pointer-events: none; }
.ts-node-sub { fill: var(--text-muted); font: 6.8px var(--mono); text-anchor: middle; pointer-events: none; }
.graph-legend .service-dot { background: #85c2ff; }
.graph-legend .server-dot { background: #7c8998; }
.traffic-readout { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 6px 0 2px; }
.traffic-readout b { color: var(--accent-info); font: 15px var(--mono); }
.traffic-readout span { color: var(--text-muted); font-size: 8px; }
.traffic-sparkline { display: block; width: 100%; height: 55px; margin-bottom: 5px; }
.traffic-sparkline path { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 1; }
.traffic-sparkline polyline { fill: none; stroke: var(--accent-info); stroke-width: 2; }

/* Page 13 · TopSight full-stack system */
.topsight-system-page .scene-heading { align-items: center; }
.topsight-system-body { display: grid; grid-template-rows: minmax(0,1fr) 42px; gap: 8px; min-height: 0; }
.topsight-system { display: grid; grid-template-columns: minmax(170px,.85fr) 18px minmax(190px,1fr) 18px minmax(220px,1.12fr) 18px minmax(230px,1.15fr); gap: 7px; min-height: 0; }
.topsight-system > section { min-height: 0; padding: 13px; border-top: 2px solid var(--line-strong); background: var(--surface); }
.topsight-system section > span, .topsight-system section header > span, .experience-layer article > span { color: var(--accent-info); font: 9.5px var(--mono); letter-spacing: .08em; }
.topsight-system .system-arrow { align-self: center; color: var(--accent-info); font-style: normal; text-align: center; }
.context-source-layer { display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 10px; }
.context-source-layer > div { display: grid; align-content: center; gap: 6px; }
.context-source-layer b { padding: 8px; background: var(--bg-1); color: var(--text-secondary); font-size: 10.5px; font-weight: 550; }
.context-source-layer small, .api-surface-layer header small, .api-example small { color: var(--text-muted); font-size: 9.5px; line-height: 1.35; }
.model-engine-layer { display: grid; grid-template-rows: 1fr 1fr; gap: 8px; }
.model-engine-layer article { display: grid; align-content: center; gap: 8px; padding: 12px; background: var(--bg-1); }
.model-engine-layer article:first-child { border-left: 2px solid var(--accent-info); }
.model-engine-layer article:last-child { border-left: 2px solid #ba9cff; }
.model-engine-layer strong { font-size: 13px; line-height: 1.35; }
.model-engine-layer p { margin: 0; color: var(--text-muted); font-size: 10px; line-height: 1.4; }
.api-surface-layer { display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 8px; border-color: var(--accent-info) !important; }
.api-surface-layer header { display: grid; gap: 4px; }
.api-selector { display: grid; align-content: center; gap: 5px; }
.api-selector button { min-height: 29px; padding: 5px 8px; border-left: 2px solid var(--line-strong); background: var(--bg-1); color: var(--text-secondary); font: 9.3px var(--mono); text-align: left; cursor: pointer; }
.api-selector button.active { border-color: var(--accent-info); background: rgba(102,179,255,.08); color: var(--text-primary); }
.api-example { display: grid; gap: 5px; padding: 9px; background: #090d12; }
.api-example code { color: #9ecaf4; font: 9.5px var(--mono); overflow-wrap: anywhere; }
.api-example strong { font-size: 11px; line-height: 1.35; }
.experience-layer { display: grid; grid-template-rows: 1.05fr .95fr; gap: 8px; }
.experience-layer article { display: grid; align-content: center; gap: 8px; padding: 12px; background: var(--bg-1); }
.experience-layer article:first-child { border-left: 2px solid var(--accent-info); }
.experience-layer article:last-child { border-left: 2px solid var(--accent-healthy); }
.experience-layer strong { font-size: 13px; line-height: 1.35; }
.experience-layer p { margin: 0; color: var(--text-secondary); font-size: 10.5px; line-height: 1.4; }
.experience-layer article > div { display: flex; flex-wrap: wrap; gap: 5px; }
.experience-layer code { padding: 5px 7px; background: #090d12; color: var(--text-secondary); font: 9.3px var(--mono); }
.topsight-system-notes { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); }
.topsight-system-notes span { display: flex; align-items: center; gap: 7px; padding: 7px 10px; background: var(--bg-1); color: var(--text-secondary); font-size: 9.5px; }
.topsight-system-notes b { color: var(--accent-info); font: 9px var(--mono); }

/* Page 14 · automation gap */
.automation-problem-page .scene-heading { align-items: center; }
.automation-problem-body { display: grid; grid-template-rows: clamp(225px,34vh,265px) minmax(0,1fr); gap: 10px; min-height: 0; }
.problem-entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-height: 0; }
.problem-entry-grid article { display: grid; min-height: 0; padding: 14px; border-top: 2px solid var(--line-strong); background: var(--surface); }
.problem-entry-grid article.alert-entry { grid-template-rows: auto minmax(0,1fr) auto; border-color: var(--accent-warning); }
.problem-entry-grid article.human-entry { grid-template-rows: auto auto minmax(0,1fr) auto; border-color: var(--accent-info); }
.problem-entry-grid header span { color: var(--accent-info); font: 9.5px var(--mono); letter-spacing: .08em; }
.alert-entry header span { color: var(--accent-warning); }
.problem-entry-grid header strong { display: block; margin-top: 6px; font-size: 15px; }
.alert-funnel { display: grid; grid-template-columns: 1fr 124px 1fr; align-items: center; gap: 8px; }
.alert-funnel div { display: grid; place-items: center; min-height: 64px; padding: 8px; background: var(--bg-1); text-align: center; }
.alert-funnel b, .human-volume b { color: var(--text-primary); font-size: 19px; }
.alert-funnel small, .human-volume small { margin-top: 4px; color: var(--text-muted); font-size: 9.5px; }
.alert-funnel i { color: var(--accent-warning); font: 9px/1.35 var(--mono); font-style: normal; text-align: center; }
.flap-example { display: grid; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.flap-example > span { color: var(--accent-warning); font: 9px var(--mono); }
.flap-example > div { display: flex; align-items: center; gap: 5px; }
.flap-example code, .flap-example strong, .flap-example b { flex: 1; padding: 6px; background: var(--bg-1); color: var(--text-secondary); font: 9px/1.25 var(--mono); text-align: center; }
.flap-example b { color: var(--accent-healthy); }
.flap-example i { color: var(--text-muted); font-style: normal; }
.human-volume { display: flex; align-items: baseline; gap: 9px; margin-top: 9px; }
.human-volume p { margin: 0 0 0 auto; color: var(--text-muted); font-size: 9.5px; }
.symptom-examples { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; align-content: center; }
.symptom-examples q { display: grid; place-items: center; min-height: 56px; padding: 8px; background: var(--bg-1); color: var(--text-secondary); font-size: 10.5px; line-height: 1.35; text-align: center; }
.synthetic-inline { color: var(--text-muted); font: 9px var(--mono); }
.manual-bottleneck { display: flex; align-content: center; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; min-height: 0; padding: 12px; border: 1px solid var(--line); background: rgba(102,179,255,.025); }
.manual-bottleneck > em { flex: 0 0 100%; color: var(--accent-info); font: 9px var(--mono); font-style: normal; text-align: center; }
.manual-bottleneck span { display: grid; place-items: center; align-content: center; flex: 1; min-width: 112px; min-height: 65px; padding: 7px; background: var(--surface); color: var(--text-secondary); text-align: center; }
.manual-bottleneck span b { font: 9.5px/1.3 var(--mono); }
.manual-bottleneck span small { margin-top: 5px; color: var(--text-muted); font-size: 9px; line-height: 1.25; }
.manual-bottleneck i { color: var(--accent-info); font-style: normal; }
.manual-bottleneck strong { flex: 0 0 100%; color: var(--accent-warning); font: 9px var(--mono); text-align: center; }

/* Page 15 · RCA finite-state platform */
.rca-platform-page .scene-heading { align-items: center; }
.rca-platform-body { display: grid; grid-template-rows: 92px 42px minmax(108px,1fr) 25px 47px; gap: 7px; min-height: 0; }
.rca-platform-strip { display: grid; grid-template-columns: 1fr 22px 1.08fr 22px 1.08fr; align-items: stretch; min-height: 0; }
.rca-platform-strip article { display: grid; align-content: center; gap: 6px; padding: 11px; border-top: 2px solid var(--accent-info); background: var(--surface); }
.rca-platform-strip > i { align-self: center; color: var(--accent-info); font-style: normal; text-align: center; }
.rca-platform-strip span, .rca-trigger-band > span, .rca-catalog-band > span { color: var(--accent-info); font: 9px var(--mono); letter-spacing: .08em; }
.rca-platform-strip code { color: #a9c9e8; font: 9.5px/1.4 var(--mono); }
.rca-platform-strip strong { font-size: 11px; line-height: 1.4; }
.rca-platform-strip small { color: var(--text-muted); font-size: 9px; }
.rca-trigger-band { display: flex; align-items: center; gap: 7px; padding: 7px 10px; background: var(--bg-1); }
.rca-trigger-band b { padding: 5px 8px; background: var(--surface); color: var(--text-secondary); font-size: 9px; }
.rca-trigger-band i { color: var(--accent-info); font-style: normal; }
.rca-trigger-band strong { font-size: 11px; }
.rca-trigger-band em { margin-left: auto; color: var(--accent-warning); font: 9px var(--mono); font-style: normal; }
.fsm-flow { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); align-items: stretch; gap: 7px; min-width: 0; min-height: 0; background: linear-gradient(var(--line-strong),var(--line-strong)) 12.5% 25% / 75% 1px no-repeat, linear-gradient(var(--line-strong),var(--line-strong)) 12.5% 75% / 75% 1px no-repeat, linear-gradient(var(--line-strong),var(--line-strong)) 87.5% 25% / 1px 50% no-repeat; }
.fsm-node:nth-child(1) { grid-column: 1; grid-row: 1; }
.fsm-node:nth-child(2) { grid-column: 2; grid-row: 1; }
.fsm-node:nth-child(3) { grid-column: 3; grid-row: 1; }
.fsm-node:nth-child(4) { grid-column: 4; grid-row: 1; }
.fsm-node:nth-child(5) { grid-column: 4; grid-row: 2; }
.fsm-node:nth-child(6) { grid-column: 3; grid-row: 2; }
.fsm-node:nth-child(7) { grid-column: 2; grid-row: 2; }
.fsm-node:nth-child(8) { grid-column: 1; grid-row: 2; }
.fsm-node { position: relative; z-index: 1; display: grid; place-items: center; align-content: center; min-width: 0; min-height: 0; padding: 8px; border-top: 2px solid var(--line-strong); background: var(--surface); color: var(--text-secondary); text-align: center; transition: 180ms ease; }
.fsm-node small { color: var(--accent-info); font: 9px var(--mono); }
.fsm-node strong { margin-top: 5px; font-size: 12px; line-height: 1.25; }
.fsm-node span { margin-top: 4px; color: var(--text-muted); font-size: 9.5px; line-height: 1.25; }
.fsm-node.gate { border-color: var(--accent-warning); }
.fsm-flow .complete { border-color: var(--accent-healthy); background: rgba(99,214,154,.07); color: var(--text-primary); }
.fsm-flow .running { border-color: var(--accent-info); background: rgba(102,179,255,.08); box-shadow: 0 0 0 3px rgba(102,179,255,.08); }
.rca-run-status { display: flex; align-items: center; justify-content: space-between; color: var(--text-muted); font: 9px var(--mono); }
.rca-run-status #rcaStatus { color: var(--accent-info); }
.rca-catalog-band { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rca-catalog-band b { padding: 5px 7px; background: var(--bg-1); color: var(--text-secondary); font-size: 9.2px; }
.rca-catalog-band i { width: 1px; height: 20px; margin-left: auto; background: var(--line); }
.rca-catalog-band strong { color: var(--accent-healthy); font: 9px var(--mono); }
.rca-catalog-band small { color: var(--text-muted); font-size: 9px; }

/* Page 16 · troubleshooting agent evolution */
.troubleshooting-agent-page { grid-template-rows: auto 40px minmax(0,1fr) auto !important; gap: 9px !important; }
.evolution-tabs, .principle-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.evolution-tabs button, .principle-tabs button { min-height: 39px; }
.evolution-stage { display: grid; grid-template-rows: minmax(0,1fr) auto; gap: 9px; min-height: 0; }
.evolution-main { display: grid; grid-template-columns: 130px 22px 175px 22px minmax(0,1fr); align-items: stretch; gap: 7px; min-height: 0; }
.evolution-input, .control-owner { display: grid; place-items: center; align-content: center; min-height: 0; padding: 12px; background: var(--surface); text-align: center; }
.evolution-input span, .control-owner span { color: var(--text-muted); font: 9px var(--mono); }
.evolution-input strong, .control-owner strong { margin-top: 8px; font-size: 14px; }
.control-owner { border-top: 2px solid var(--accent-info); }
.control-owner small { margin-top: 5px; color: var(--text-muted); font-size: 9px; }
.evolution-main > i { align-self: center; color: var(--accent-info); font-style: normal; text-align: center; }
.decomposition-panel { display: grid; grid-template-rows: auto minmax(0,1fr); gap: 8px; min-height: 0; padding: 11px; border: 1px solid var(--line); background: var(--bg-1); }
.decomposition-panel > p { margin: 0; color: var(--text-secondary); font-size: 11px; line-height: 1.4; }
.decomposition { display: grid; place-items: center; min-height: 0; }
.workflow-block { width: 100%; padding: 20px; border-top: 2px solid var(--accent-info); background: var(--surface); color: var(--text-secondary); font: 11px/1.5 var(--mono); text-align: center; }
.workflow-sequence { display: grid; grid-template-columns: 1fr 16px 1fr 16px 1fr 16px 1fr 16px 1fr 16px 1fr; align-items: center; width: 100%; }
.workflow-sequence span { display: grid; place-items: center; min-height: 78px; padding: 7px; border-top: 2px solid var(--accent-info); background: var(--surface); color: var(--text-secondary); font: 9.3px/1.3 var(--mono); text-align: center; }
.workflow-sequence i { color: var(--accent-info); font-style: normal; text-align: center; }
.subworkflow-grid, .atomic-grid { display: grid; gap: 7px; width: 100%; }
.subworkflow-grid { grid-template-columns: 1fr 1fr; }
.atomic-grid { grid-template-columns: repeat(4,1fr); }
.subworkflow-grid span, .atomic-grid span { display: grid; place-items: center; min-height: 58px; padding: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--text-secondary); font: 9.5px/1.3 var(--mono); text-align: center; }
.evolution-bottom { display: grid; grid-template-columns: 1.45fr .55fr; gap: 9px; min-height: 66px; }
.control-shift-rail { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.control-shift-rail span { flex: 1; padding: 7px; background: var(--bg-1); color: var(--text-muted); font: 9px var(--mono); text-align: center; }
.control-shift-rail i { color: var(--accent-info); font-style: normal; }
.control-shift-rail b { color: var(--text-secondary); font-size: 9px; }
.evolution-stage[data-phase="workflow"] [data-owner-phase="workflow"], .evolution-stage[data-phase="subworkflow"] [data-owner-phase="subworkflow"], .evolution-stage[data-phase="atomic"] [data-owner-phase="atomic"] { background: rgba(102,179,255,.1); color: var(--accent-info); }
#evolutionTraits { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
#evolutionTraits span { display: grid; place-items: center; padding: 7px; border-left: 2px solid var(--line-strong); background: var(--surface); color: var(--text-secondary); font: 9px var(--mono); text-align: center; }

/* Page 17 · enterprise agent constraints */
.agent-constraint-page .scene-heading { align-items: center; }
.platform-chip { max-width: 285px; padding: 8px 10px; border-left: 2px solid var(--accent-info); color: var(--text-secondary); font: 9px/1.4 var(--mono); text-align: right; }
.agent-constraint-body { display: grid; grid-template-rows: 39px minmax(0,1fr) 48px; gap: 8px; min-height: 0; }
.bottleneck-tabs { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.bottleneck-tabs button { display: flex; align-items: center; gap: 8px; padding: 0 10px; border-top: 2px solid var(--line-strong); background: var(--surface); color: var(--text-secondary); font: 9px var(--mono); cursor: pointer; }
.bottleneck-tabs button span { color: var(--text-muted); }
.bottleneck-tabs button.active { border-color: var(--accent-warning); background: rgba(242,179,93,.07); color: var(--text-primary); }
.agent-constraint-layout { display: grid; grid-template-columns: 290px minmax(0,1fr); gap: 10px; min-height: 0; }
.bottleneck-detail { display: grid; align-content: center; gap: 10px; padding: 17px; border-top: 2px solid var(--accent-warning); background: var(--surface); }
.bottleneck-detail > span { color: var(--accent-warning); font: 9.5px var(--mono); letter-spacing: .07em; }
.bottleneck-detail > strong { font-size: 19px; line-height: 1.25; }
.bottleneck-detail > p { margin: 0; color: var(--text-secondary); font-size: 11px; line-height: 1.5; }
.bottleneck-detail > div { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.bottleneck-detail > div b { padding: 7px; background: var(--bg-1); color: var(--text-muted); font: 9px var(--mono); text-align: center; }
.agent-platform-map { display: grid; grid-template-rows: minmax(0,1fr) auto; gap: 8px; min-height: 0; }
.platform-flow { display: grid; grid-template-columns: minmax(0,1fr) 20px 185px 20px minmax(0,1fr); align-items: stretch; min-height: 0; }
.platform-flow > i { align-self: center; color: var(--accent-info); font-style: normal; text-align: center; }
.grounded-context, .bounded-coverage { display: grid; align-content: center; gap: 7px; padding: 13px; background: var(--surface); }
.grounded-context > span, .bounded-coverage > span, .agent-core-card > span, .agent-formula > span { color: var(--accent-info); font: 9px var(--mono); letter-spacing: .08em; }
.grounded-context > strong, .bounded-coverage > strong { font-size: 14px; }
.grounded-context > div, .bounded-coverage > div { display: grid; gap: 5px; }
.grounded-context b, .bounded-coverage b { padding: 6px; background: var(--bg-1); color: var(--text-secondary); font-size: 9.5px; font-weight: 550; }
.grounded-context .hidden-item, .grounded-context .truth-item, .bounded-coverage .missing-item { border: 1px dashed var(--line-strong); }
.agent-core-card { display: grid; place-items: center; align-content: center; padding: 13px; border-right: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--bg-1); text-align: center; }
.agent-core-card strong { margin-top: 8px; font-size: 17px; }
.agent-core-card small { margin-top: 5px; color: var(--text-muted); font-size: 9px; }
.agent-core-card div { margin-top: 13px; color: var(--text-secondary); font: 9px/1.55 var(--mono); }
.ownership-bridge { display: grid; grid-template-columns: 100px 18px 1fr 18px 100px; align-items: center; gap: 6px; padding: 7px 10px; background: var(--bg-1); }
.ownership-bridge span { padding: 5px; background: var(--surface); color: var(--text-secondary); font: 9px var(--mono); text-align: center; }
.ownership-bridge i { color: var(--text-muted); font-style: normal; }
.ownership-bridge strong { color: var(--accent-warning); font-size: 9px; text-align: center; }
.ownership-bridge small { grid-column: 1 / -1; color: var(--text-muted); font-size: 9px; text-align: center; }
.agent-platform-map[data-bottleneck="knowledge"] .hidden-item, .agent-platform-map[data-bottleneck="truth"] .truth-item, .agent-platform-map[data-bottleneck="interfaces"] .missing-item { border-color: var(--accent-warning); background: rgba(242,179,93,.08); color: var(--text-primary); }
.agent-platform-map[data-bottleneck="ownership"] .ownership-bridge { box-shadow: inset 0 0 0 1px rgba(242,179,93,.55); }
.agent-formula { display: grid; grid-template-columns: 190px minmax(0,1fr) 320px; align-items: center; gap: 14px; min-height: 0; padding: 8px 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.agent-formula strong { font-size: 14px; }
.agent-formula small { color: var(--text-muted); font-size: 9.5px; text-align: right; }

/* Principles */
.principle-stage { display: grid; grid-template-columns: .75fr 1.25fr; min-height: 0; background: var(--surface); }
.principle-copy { display: grid; align-content: center; padding: 24px; border-right: 1px solid var(--line); }
.principle-copy > span { color: var(--accent-info); font: 10px var(--mono); }
.principle-copy h3 { margin-top: 12px; font-size: clamp(27px, 3vw, 42px); line-height: 1.05; }
.principle-copy p { margin: 14px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.principle-diagram { display: grid; align-content: center; gap: 10px; padding: 22px; }
.mapping-row { display: grid; grid-template-columns: 1fr 30px 1fr; align-items: center; min-height: 55px; }
.mapping-row span, .mapping-row strong { display: grid; place-items: center; height: 100%; padding: 9px; background: var(--bg-1); color: var(--text-secondary); font-size: 11px; text-align: center; }
.mapping-row i { color: var(--accent-info); font-style: normal; text-align: center; }
.provider-flow { display: grid; grid-template-columns: 1fr 24px 1fr 24px 2fr; align-items: center; gap: 4px; }
.provider-flow > strong { display: grid; place-items: center; min-height: 58px; padding: 8px; border-top: 2px solid var(--accent-info); background: var(--bg-1); font-size: 10px; text-align: center; }
.provider-flow > i { color: var(--accent-info); font-style: normal; transform: rotate(-90deg); }
.provider-flow > div { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.provider-flow > div span { display: grid; place-items: center; min-height: 34px; background: var(--bg-1); color: var(--text-secondary); font: 9px var(--mono); }
.vertical-chain { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; }
.vertical-chain span { padding: 11px; background: var(--bg-1); color: var(--text-secondary); font-size: 11px; }
.vertical-chain i { color: var(--accent-info); font-style: normal; }
.agency-equation-large { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 10px; }
.agency-equation-large span { display: grid; place-items: center; min-height: 100px; padding: 12px; border-top: 2px solid var(--accent-info); background: var(--bg-1); color: var(--text-secondary); font-size: 13px; text-align: center; }
.agency-equation-large i { color: var(--accent-info); font-style: normal; font-size: 20px; }

/* Future plan 01 · AI infrastructure market thesis */
.market-thesis-page { grid-template-rows: auto 44px minmax(0, 1fr) auto !important; gap: 10px !important; }
.career-thesis-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.career-thesis-tabs button { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; border: 1px solid var(--line); border-radius: 5px; background: transparent; color: var(--text-muted); font: 10px var(--mono); letter-spacing: .05em; cursor: pointer; }
.career-thesis-tabs button span { color: #56616e; }
.career-thesis-tabs button.active { border-color: rgba(102,179,255,.55); background: rgba(102,179,255,.07); color: var(--text-primary); }
.career-thesis-tabs button.active span { color: var(--accent-info); }
.career-thesis-stage { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr); min-height: 0; overflow: hidden; background: var(--surface); }
.career-thesis-copy { display: grid; align-content: center; padding: clamp(24px,3.4vw,48px); border-right: 1px solid var(--line); }
.career-thesis-copy > span { color: var(--accent-info); font: 10px var(--mono); letter-spacing: .09em; }
.career-thesis-copy > strong { max-width: 720px; margin-top: 14px; font-size: clamp(28px,3vw,44px); font-weight: 570; line-height: 1.06; letter-spacing: -.035em; }
.career-thesis-copy > p { max-width: 720px; margin: 17px 0 0; color: var(--text-secondary); font-size: 15px; line-height: 1.5; }
.career-thesis-copy > div { max-width: 720px; margin-top: 21px; padding: 12px 15px; border-left: 2px solid var(--accent-info); background: var(--bg-1); color: var(--text-primary); font-size: 12px; line-height: 1.45; }
.market-evidence-ladder { display: grid; grid-template-rows: auto repeat(3,minmax(0,1fr)); gap: 6px; min-height: 0; padding: 18px; background: var(--bg-1); }
.market-evidence-ladder > span { color: var(--text-muted); font: 9px var(--mono); letter-spacing: .1em; text-align: center; }
.market-evidence { display: grid; align-content: center; min-height: 0; padding: 11px 15px; border-left: 2px solid var(--line-strong); background: var(--surface); opacity: .5; transition: 220ms var(--ease); }
.market-evidence small { color: var(--text-muted); font: 9px var(--mono); letter-spacing: .08em; }
.market-evidence strong { margin-top: 5px; font-size: 15px; line-height: 1.25; }
.market-evidence p { margin: 5px 0 0; color: var(--text-secondary); font-size: 10.5px; line-height: 1.35; }
.market-evidence.active { border-color: var(--accent-info); background: rgba(102,179,255,.065); opacity: 1; transform: translateX(-4px); }
.market-evidence.active small { color: var(--accent-info); }

/* Future plan 02 · Why AI infrastructure systems thesis */
.infrastructure-thesis-page { grid-template-rows: auto minmax(0,1fr) auto !important; gap: 10px !important; }
.infrastructure-thesis-body { display: grid; grid-template-rows: 58px minmax(190px,1fr) 88px 44px; gap: 8px; min-height: 0; }
.model-pressure-rail { display: grid; grid-template-columns: minmax(190px,.82fr) 28px minmax(360px,1.55fr) 28px minmax(170px,.72fr); align-items: center; min-height: 0; padding: 0 16px; border: 1px solid var(--line); background: var(--bg-1); }
.model-pressure-rail span, .model-pressure-rail strong { font: 10px/1.35 var(--mono); letter-spacing: .055em; text-align: center; }
.model-pressure-rail span { color: var(--text-secondary); }
.model-pressure-rail strong { color: var(--text-primary); }
.model-pressure-rail span:last-child { color: var(--accent-info); }
.model-pressure-rail i { color: var(--accent-info); font-style: normal; text-align: center; }
.infrastructure-pillars { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; min-height: 0; }
.infrastructure-pillar { display: grid; align-content: center; min-width: 0; padding: 16px 18px; border-top: 2px solid var(--line-strong); background: var(--surface); color: var(--text-secondary); text-align: left; cursor: pointer; opacity: .62; transition: 180ms ease; }
.infrastructure-pillar small { color: var(--text-muted); font: 9.5px/1.3 var(--mono); letter-spacing: .065em; }
.infrastructure-pillar strong { margin-top: 9px; color: inherit; font-size: 20px; line-height: 1.15; letter-spacing: -.01em; }
.infrastructure-pillar p { margin: 9px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.42; }
.infrastructure-pillar div { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--text-muted); font: 9px/1.35 var(--mono); letter-spacing: .035em; }
.infrastructure-pillar.active { border-color: var(--accent-info); background: rgba(102,179,255,.075); color: var(--text-primary); opacity: 1; transform: translateY(-2px); }
.infrastructure-pillar.active small, .infrastructure-pillar.active div { color: var(--accent-info); }
.infrastructure-pillar-detail { display: grid; grid-template-columns: .92fr 1.1fr 1.18fr; gap: 1px; min-height: 0; background: var(--line); }
.infrastructure-pillar-detail > div { display: grid; align-content: center; min-width: 0; padding: 12px 16px; background: var(--bg-1); }
.infrastructure-pillar-detail small { color: var(--accent-info); font: 9px/1.25 var(--mono); letter-spacing: .065em; }
.infrastructure-pillar-detail strong { margin-top: 6px; font-size: 14px; line-height: 1.28; }
.infrastructure-pillar-detail p { margin: 6px 0 0; color: var(--text-secondary); font-size: 10.5px; line-height: 1.38; }
.infrastructure-pillar-detail > div:last-child small { color: var(--accent-warning); }
.infra-career-filter { display: grid; grid-template-columns: auto auto 16px auto 16px auto 16px auto minmax(220px,1fr); align-items: center; gap: 6px; min-width: 0; min-height: 0; padding: 7px 10px; border: 1px solid var(--line); background: var(--bg-1); }
.infra-career-filter span { color: var(--accent-info); font: 9px var(--mono); letter-spacing: .08em; }
.infra-career-filter b { padding: 5px 7px; background: var(--surface); color: var(--text-secondary); font: 8.5px var(--mono); letter-spacing: .035em; white-space: nowrap; }
.infra-career-filter i { color: var(--accent-info); font-style: normal; text-align: center; }
.infra-career-filter small { color: var(--text-muted); font: 8px/1.25 var(--mono); letter-spacing: .035em; text-align: right; }

/* Why RadixArk */
.why-radixark-page { grid-template-rows: auto minmax(0,1fr) 104px auto !important; gap: 9px !important; }
.why-fit-layout { display: grid; grid-template-columns: minmax(0,1fr) 170px minmax(0,1fr); min-height: 0; overflow: hidden; }
.radix-foundations, .steven-contribution { display: grid; grid-template-rows: auto repeat(3,minmax(0,1fr)); gap: 5px; min-height: 0; }
.radix-foundations { padding-right: 10px; }
.steven-contribution { padding-left: 10px; }
.radix-foundations > span, .steven-contribution > span { color: var(--accent-info); font: 9px var(--mono); letter-spacing: .09em; }
.radix-foundations article, .steven-contribution article { display: grid; align-content: center; min-height: 0; padding: 9px 13px; border-left: 2px solid var(--line-strong); background: var(--surface); }
.radix-foundations article { border-color: var(--accent-info); }
.radix-foundations small, .steven-contribution small { color: var(--text-muted); font: 8.5px var(--mono); letter-spacing: .07em; }
.radix-foundations strong, .steven-contribution strong { margin-top: 4px; font-size: 14px; }
.radix-foundations p, .steven-contribution p { margin: 4px 0 0; color: var(--text-secondary); font-size: 10.5px; line-height: 1.3; }
.fit-connector { display: grid; align-content: center; justify-items: center; gap: 10px; padding: 14px; border-right: 1px solid var(--line); border-left: 1px solid var(--line); color: var(--text-muted); text-align: center; }
.fit-connector span { font: 8.5px var(--mono); letter-spacing: .07em; }
.fit-connector i { color: var(--accent-info); font-style: normal; }
.fit-connector strong { color: var(--text-primary); font-size: 11px; line-height: 1.4; }
.kv-thesis { display: grid; grid-template-columns: 180px minmax(260px,1.15fr) minmax(300px,1fr); grid-template-rows: 1fr auto; align-items: center; gap: 5px 14px; min-height: 0; padding: 10px 14px; border-top: 1px solid rgba(242,179,93,.55); border-bottom: 1px solid rgba(242,179,93,.25); background: rgba(242,179,93,.035); }
.kv-thesis > span { color: var(--accent-warning); font: 9px var(--mono); letter-spacing: .08em; }
.kv-thesis > strong { font-size: 13px; line-height: 1.35; }
.kv-thesis > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.kv-thesis b { padding: 5px 7px; background: var(--bg-1); color: var(--text-secondary); font: 8.5px var(--mono); }
.kv-thesis > small { grid-column: 2 / 4; color: var(--text-muted); font-size: 8.5px; text-align: right; }
.claim-note { text-align: right; }

/* Closing */
.closing-layout { padding-top: var(--chrome-h); }
.closing-layout .breadcrumb { margin-bottom: 8px; }
.closing-layout h2 { font-size: clamp(58px, 7vw, 102px); line-height: .92; }
.closing-layout h3 { margin-top: 8px; color: var(--accent-info); font-size: clamp(25px, 2.5vw, 38px); opacity: 0; transform: translateY(8px); transition: 400ms var(--ease); }
.closing-answer-demo { display: grid; gap: 8px; width: min(1120px, 100%); margin-top: 10px; opacity: 0; transform: translateY(8px); transition: 400ms var(--ease); }
.closing-query { display: grid; grid-template-columns: 220px minmax(0,1fr) 285px; align-items: center; gap: 14px; min-height: 50px; padding: 10px 14px; border-left: 2px solid var(--accent-info); background: var(--surface); text-align: left; }
.closing-query span, .closing-query small, .closing-reasoning-row span, .closing-concrete-answer > span { color: var(--text-muted); font-family: var(--mono); font-size: 9px; letter-spacing: .07em; }
.closing-query span { color: var(--accent-info); }
.closing-query strong { font-size: 17px; font-weight: 600; }
.closing-query small { text-align: right; }
.closing-reasoning-row { display: grid; grid-template-columns: 1fr 24px 1fr 24px 1fr; align-items: stretch; gap: 6px; }
.closing-reasoning-row article { display: grid; align-content: center; min-height: 86px; padding: 11px 14px; border-top: 2px solid var(--line-strong); background: var(--bg-1); text-align: left; }
.closing-reasoning-row article:first-child { border-color: var(--accent-info); }
.closing-reasoning-row article:nth-of-type(2) { border-color: var(--accent-warning); }
.closing-reasoning-row article:last-child { border-color: var(--accent-healthy); }
.closing-reasoning-row strong { margin-top: 5px; font-size: 14px; }
.closing-reasoning-row p { margin: 6px 0 0; color: var(--text-secondary); font-size: 11px; line-height: 1.35; }
.closing-reasoning-row > i { align-self: center; color: var(--accent-info); font-style: normal; }
.closing-concrete-answer { display: grid; grid-template-columns: 220px minmax(0,1fr); align-items: center; gap: 14px; min-height: 78px; padding: 12px 14px; border: 1px solid rgba(99,214,154,.35); background: rgba(99,214,154,.06); text-align: left; }
.closing-concrete-answer > span { color: var(--accent-healthy); }
.closing-concrete-answer p { margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.closing-concrete-answer p strong { color: var(--text-primary); }
.closing-layout blockquote { width: min(1120px,100%); min-height: 36px; margin-top: 9px; padding: 7px 14px; font-size: 12px; opacity: 0; transform: translateY(8px); transition: 400ms var(--ease); }
.closing-layout .primary-button { margin-top: 9px; }
.closing-layout[data-closing-step="1"] h3, .closing-layout[data-closing-step="1"] .closing-answer-demo, .closing-layout[data-closing-step="1"] blockquote { opacity: 1; transform: none; }

/* Q&A */
.qna-layout .breadcrumb { margin-bottom: 14px; }
.qna-layout h2 { font-size: clamp(74px, 10vw, 146px); line-height: .9; letter-spacing: -.055em; }
.qna-subtitle { max-width: 840px; margin: 24px 0 0; color: var(--text-secondary); font-size: clamp(15px, 1.35vw, 20px); line-height: 1.5; }
.qna-layout blockquote { width: min(1050px,100%); margin-top: 18px; }

/* Appendix */
.appendix-scene { display: none; }
.appendix-scene:target { display: block; }
.pingmesh-flow { display: flex; align-items: stretch; justify-content: center; min-height: 100px; }
.pingmesh-flow > div { display: grid; place-items: center; flex: 1; padding: 12px; border-top: 2px solid var(--accent-info); background: var(--surface); text-align: center; }
.pingmesh-flow > div strong { font-size: 11px; }
.pingmesh-flow > div small { margin-top: 7px; color: var(--text-muted); font-size: 9px; }
.pingmesh-flow > i { display: grid; place-items: center; width: 30px; color: var(--accent-info); font-style: normal; }
.pingmesh-layout { display: grid; grid-template-columns: 220px 1fr 260px; gap: 14px; min-height: 0; }
.scope-selector { display: grid; align-content: center; gap: 6px; padding: 14px; background: var(--surface); }
.scope-selector span { color: var(--text-muted); font: 9px var(--mono); }
.scope-selector button { min-height: 32px; border: 1px solid var(--line); background: var(--bg-1); color: var(--text-secondary); font-size: 10px; }
.scope-selector button.active { border-color: var(--accent-info); color: var(--accent-info); }
.health-matrix { display: grid; grid-template-columns: 40px repeat(4, 1fr); grid-template-rows: 35px repeat(4, 1fr); gap: 5px; padding: 14px; background: var(--surface); }
.health-matrix b { display: grid; place-items: center; color: var(--text-muted); font: 10px var(--mono); }
.health-matrix i { border-radius: 4px; background: rgba(99,214,154,.28); }
.health-matrix i.warn { background: rgba(242,179,93,.45); }
.health-matrix i.bad { background: rgba(240,108,117,.55); }
.pingmesh-facts { display: grid; align-content: center; gap: 5px; padding: 15px; background: var(--surface); }
.pingmesh-facts span { color: var(--accent-info); font: 9px var(--mono); }
.pingmesh-facts strong { margin-bottom: 7px; font-size: 11px; }
.pingmesh-facts small { color: var(--text-muted); font-size: 9px; }

/* Notes */
.keyboard-help { position: fixed; z-index: 700; bottom: 18px; left: 50%; padding: 9px 13px; transform: translateX(-50%); border: 1px solid var(--line); border-radius: 6px; background: var(--bg-1); color: var(--text-secondary); font: 10px var(--mono); }
noscript { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 30px; background: var(--bg-0); color: var(--text-primary); }

@media (max-height: 820px) and (min-width: 981px) {
  :root { --chrome-h: 58px; }
  .presenter-bar { grid-template-columns: 125px minmax(600px,1fr) 220px; padding: 0 16px; }
  .scene-inner { padding: calc(var(--chrome-h) + 14px) clamp(28px,4vw,58px) 16px; }
  .scene-inner.wide { gap: 9px; }
  .scene-heading { min-height: 55px; }
  h2 { font-size: clamp(31px,3.3vw,47px); }
  .breadcrumb { margin-bottom: 5px; font-size: 9px; }
  blockquote { min-height: 38px; padding: 7px 12px; font-size: 12px; }
  .capability-stage { padding: 14px; }
  .capability-stage p { font-size: 13px; }
  .capability-map { height: clamp(300px,41vh,330px); }
  .capability-stage { gap: 4px; padding-top: 10px; padding-bottom: 10px; }
  .other-projects { min-height: 36px; padding: 5px 0; }
  .compact-topology-page .topology-stage-tabs button { min-height: 33px; }
  .raw-log-stack code { min-height: 40px; }
  .syslog-problem-body .raw-log-stack code { min-height: 0; padding-top: 4px; padding-bottom: 4px; }
  .syslog-problem-body .raw-log-stack code { padding-top: 2px; padding-bottom: 2px; font-size: 8.5px; }
  .problem-dimensions dl div { padding: 7px 0; }
  .collection-page-body { gap: 5px; }
  .legacy-workflow { min-height: 29px; padding-top: 4px; padding-bottom: 4px; }
  .architecture-row .system-node { padding-top: 5px; padding-bottom: 5px; }
  .system-icon { height: 42px; }
  .recognition-ribbon { min-height: 28px; }
  .recognition-before, .abstraction-step, .recognition-after { padding: 8px; }
  .regex-rule-table > div { min-height: 34px; }
  .learning-system { gap: 7px; }
  .reactive-lane, .review-service, .impact-feedback { padding: 8px; }
  .review-service { gap: 5px; }
  .source-band article { padding: 12px; }
  .dashboard-wall span { min-height: 58px; }
  .fsm-node, .fsm-decision { min-height: 63px; }
  .decomposition { min-height: 190px; }
  .context-column, .handler-column { padding: 12px; }
  .context-column li, .handler-column li { padding: 5px; }
  .foundation-blocks article { padding: 15px; }
  .closing-layout h2 { font-size: clamp(52px,6.5vw,78px); }
  .closing-query { grid-template-columns: 185px minmax(0,1fr) 250px; min-height: 44px; padding: 8px 11px; }
  .closing-query strong { font-size: 15px; }
  .closing-reasoning-row article { min-height: 72px; padding: 8px 11px; }
  .closing-reasoning-row strong { font-size: 12px; }
  .closing-reasoning-row p { margin-top: 4px; font-size: 10px; }
  .closing-concrete-answer { grid-template-columns: 185px minmax(0,1fr); min-height: 66px; padding: 9px 11px; }
  .closing-concrete-answer p { font-size: 10.5px; }
  .qna-layout h2 { font-size: clamp(68px,9vw,112px); }
  .qna-subtitle { margin-top: 15px; }
  .career-thesis-copy { padding: 24px 30px; }
  .career-thesis-copy > strong { font-size: clamp(27px,2.8vw,38px); }
  .career-thesis-copy > p { margin-top: 12px; font-size: 13px; }
  .career-thesis-copy > div { margin-top: 14px; }
  .infrastructure-thesis-body { grid-template-rows: 50px minmax(170px,1fr) 76px 40px; gap: 7px; }
  .infrastructure-pillar { padding: 12px 14px; }
  .infrastructure-pillar strong { margin-top: 7px; font-size: 17px; }
  .infrastructure-pillar p { margin-top: 7px; font-size: 10.5px; }
  .infrastructure-pillar div { margin-top: 11px; padding-top: 8px; }
  .infrastructure-pillar-detail > div { padding: 8px 11px; }
  .infrastructure-pillar-detail strong { margin-top: 4px; font-size: 12.5px; }
  .infrastructure-pillar-detail p { margin-top: 4px; font-size: 9.5px; }
  .infra-career-filter { padding: 5px 8px; }
  .infra-career-filter b { padding: 4px 6px; font-size: 8px; }
  .infra-career-filter small { font-size: 7.5px; }
  .why-radixark-page { grid-template-rows: auto minmax(0,1fr) 98px auto !important; }
  .kv-thesis { padding-top: 7px; padding-bottom: 7px; }
}

@media (max-width: 1320px) and (min-width: 981px) {
  .presenter-bar { grid-template-columns: 90px minmax(610px,1fr) 205px; }
  .brand span { display: none; }
  .stage-group-label { display: none; }
  .stage-progress a { padding-right: 6px; padding-left: 6px; font-size: 8px; }
  .topology-workbench, .compact-topology-page .topology-workbench { grid-template-columns: 105px minmax(0,1fr) 220px; }
  .syslog-problem-body { grid-template-columns: minmax(0,1.35fr) minmax(285px,.8fr); }
  .raw-log-stack code { grid-template-columns: 100px 1fr; font-size: 11px; }
  .syslog-problem-body .raw-log-stack code { font-size: 9.5px; }
  .collection-page-body .plane-diagram { grid-template-columns: 145px minmax(0,1fr); }
  .architecture-row.stable-row { grid-template-columns: minmax(105px,1fr) 42px minmax(100px,.82fr) 50px minmax(145px,1.3fr) 42px minmax(110px,.9fr); }
  .architecture-row.processing-row { grid-template-columns: minmax(135px,1.2fr) 30px minmax(105px,.85fr) 30px minmax(130px,1.15fr) 30px minmax(120px,1fr); }
  .recognition-workbench { grid-template-columns: minmax(165px,.64fr) minmax(470px,1.9fr) minmax(195px,.78fr); }
  .regex-rule-table > div { grid-template-columns: 108px minmax(0,1fr) 80px; gap: 5px; }
  .learning-system { grid-template-columns: minmax(165px,.58fr) 36px minmax(560px,2.2fr); }
  .after-system-grid { grid-template-columns: minmax(0,1fr) 155px; }
  .entity-scope-layout { grid-template-columns: minmax(0,1fr) 235px; }
  .recognition-contract { grid-template-columns: 160px minmax(0,1fr) 300px; }
  .query-workbench { grid-template-columns: minmax(0,1fr) 290px; }
  .evidence-panel dd { font-size: 9.5px; }
  .fsm-node { min-width: 85px; font-size: 9.5px; }
  .fsm-decision { min-width: 130px; }
  .evolution-main { grid-template-columns: 115px 18px 150px 18px minmax(0,1fr); }
}

@media (max-width: 980px) {
  html { scroll-snap-type: none; }
  .presenter-bar { grid-template-columns: 1fr auto; height: 56px; }
  .stage-progress { position: fixed; z-index: 301; right: 10px; bottom: 9px; left: 10px; justify-content: flex-start; padding: 7px; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: rgba(7,9,13,.95); }
  .stage-group-label, .stage-progress i { display: none; }
  .presenter-meta > span:nth-child(2), .presenter-meta #resetButton { display: none; }
  .scene { height: auto; min-height: 100svh; overflow: visible; }
  .scene-inner { height: auto; min-height: 100svh; padding: 86px 24px 92px; }
  .scene-inner.wide { display: flex; flex-direction: column; }
  .scene-inner.split { display: flex; flex-direction: column; align-items: stretch; }
  .scene-heading { align-items: flex-start; flex-direction: column; min-height: 0; }
  .capability-map, .topology-workbench, .recognition-contract, .recognition-workbench, .learning-system, .syslog-problem-body, .dual-problem, .entity-model-layout, .entity-scope-layout, .query-workbench, .decision-layout, .rca-layout, .agent-value-system, .principle-stage, .future-columns, .pingmesh-layout { grid-template-columns: 1fr; }
  .capability-map { height: auto; }
  .capability-map > i { transform: rotate(90deg); }
  .topology-stage-tabs, .overlay-controls, .query-chips { display: flex; overflow-x: auto; }
  .topology-stage-tabs button, .query-chips button { min-width: 135px; }
  .topology-canvas-card, .shared-graph-card, .query-graph-wrap { min-height: 430px; }
  .topology-frame-copy { min-height: 160px; }
  .plane-diagram { display: flex; flex-direction: column; }
  .architecture-row { grid-template-columns: 1fr !important; gap: 6px; }
  .flow-connector { min-height: 22px; }
  .flow-connector i { width: 1px; height: 22px; }
  .flow-connector i::after { right: -3px; top: auto; bottom: 0; transform: rotate(135deg); }
  .flow-connector span { position: static; }
  .flow-connector.multi-line { display: none; }
  .legacy-workflow, .recognition-ribbon { flex-wrap: wrap; }
  .system-row { flex-direction: column; gap: 6px; }
  .system-row > b { width: auto; transform: rotate(90deg); }
  .plane-turn { transform: none; }
  .processing-plane { display: flex; flex-direction: column; }
  .recognition-workbench, .learning-system { display: grid; }
  .system-transition { min-height: 46px; }
  .system-transition span { writing-mode: horizontal-tb; transform: none; }
  .system-transition i { transform: rotate(90deg); }
  .after-system-grid { grid-template-columns: 1fr; }
  .recognition-before, .recognition-after, .reactive-lane, .review-service, .impact-feedback { min-height: 220px; }
  .entity-scope-canvas { min-height: 560px; }
  .relation-contract article { min-height: 130px; }
  .variant-input { grid-row: auto; }
  .match-pipeline { grid-column: auto; overflow-x: auto; }
  .flywheel { align-items: stretch; flex-direction: column; }
  .flywheel i { width: auto; transform: rotate(90deg); }
  .trend-card { grid-template-columns: 1fr; gap: 8px; }
  .trend-card i { width: 1px; height: 15px; }
  .source-band, .foundation-blocks { grid-template-columns: 1fr 1fr; }
  .stage-handoff { grid-template-columns: 1fr; }
  .entity-line { grid-template-columns: 1fr; }
  .entity-line i { text-align: center; }
  .signal-landing { grid-template-columns: 1fr; }
  .entry-layout { grid-template-columns: 1fr; gap: 8px; }
  .entry-layout > b { min-height: 24px; }
  .manual-investigation, .implementation-flow, .learning-loop, .opportunity-flow { flex-wrap: wrap; }
  .fsm-flow { align-items: stretch; flex-direction: column; }
  .fsm-flow > i { width: auto; transform: none; }
  .evolution-stage { grid-template-columns: 1fr; }
  .evolution-stage > i { transform: rotate(90deg); }
  .agent-core-card { min-height: 240px; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .agency-boundary, .agent-formula { grid-template-columns: 1fr; }
  .agency-boundary i { width: 100%; height: 1px; }
  .closing-query, .closing-concrete-answer { grid-template-columns: 1fr; }
  .closing-query small { text-align: left; }
  .closing-reasoning-row { grid-template-columns: 1fr; }
  .closing-reasoning-row > i { transform: rotate(90deg); }
  .topsight-system { grid-template-columns: 1fr; }
  .topsight-system .system-arrow { transform: rotate(90deg); }
  .topsight-system-notes { grid-template-columns: 1fr; }
  .problem-entry-grid { grid-template-columns: 1fr; }
  .automation-problem-body { grid-template-rows: auto auto; }
  .manual-bottleneck span { flex-basis: 42%; }
  .rca-platform-body { grid-template-rows: auto; }
  .rca-platform-strip { grid-template-columns: 1fr; }
  .rca-platform-strip > i { transform: rotate(90deg); }
  .rca-trigger-band, .rca-catalog-band { flex-wrap: wrap; }
  .fsm-flow { grid-template-columns: 1fr 1fr; }
  .fsm-node { grid-column: auto !important; grid-row: auto !important; min-height: 110px; }
  .evolution-main { grid-template-columns: 1fr; }
  .evolution-main > i { transform: rotate(90deg); }
  .workflow-sequence { grid-template-columns: 1fr; gap: 5px; }
  .workflow-sequence i { transform: rotate(90deg); }
  .evolution-bottom { grid-template-columns: 1fr; }
  .control-shift-rail { flex-wrap: wrap; }
  .agent-constraint-layout { grid-template-columns: 1fr; }
  .platform-flow { grid-template-columns: 1fr; gap: 7px; }
  .platform-flow > i { transform: rotate(90deg); }
  .ownership-bridge, .agent-formula { grid-template-columns: 1fr; }
  .ownership-bridge small { grid-column: auto; }
  .market-thesis-page, .infrastructure-thesis-page, .why-radixark-page { display: flex !important; }
  .career-thesis-tabs { grid-template-columns: 1fr; }
  .career-thesis-stage, .why-fit-layout { grid-template-columns: 1fr; overflow: visible; }
  .career-thesis-copy { border-right: 0; border-bottom: 1px solid var(--line); }
  .market-evidence-ladder { min-height: 420px; }
  .infrastructure-thesis-body { grid-template-rows: auto auto auto auto; overflow: visible; }
  .model-pressure-rail { grid-template-columns: 1fr; gap: 7px; min-height: 180px; padding: 18px; }
  .model-pressure-rail i { transform: rotate(90deg); }
  .infrastructure-pillars { grid-template-columns: 1fr; }
  .infrastructure-pillar { min-height: 170px; }
  .infrastructure-pillar-detail { grid-template-columns: 1fr; }
  .infrastructure-pillar-detail > div { min-height: 105px; }
  .infra-career-filter { grid-template-columns: 1fr; min-height: 310px; }
  .infra-career-filter i { transform: rotate(90deg); }
  .infra-career-filter small { text-align: left; }
  .why-fit-layout { gap: 18px; }
  .radix-foundations, .steven-contribution { padding: 0; }
  .radix-foundations article, .steven-contribution article { min-height: 110px; }
  .fit-connector { min-height: 150px; border: 1px solid var(--line); }
  .kv-thesis { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 220px; }
  .kv-thesis > div { justify-content: flex-start; }
  .kv-thesis > small { grid-column: auto; text-align: left; }
  .appendix-scene:target { min-height: auto; }
}

@media (max-width: 620px) {
  .scene-inner { padding-right: 16px; padding-left: 16px; }
  h2 { font-size: 32px; }
  .opening-layout h1 { font-size: 60px; }
  .opening-timing { align-items: flex-start; flex-direction: column; }
  .opening-timing i { display: none; }
  .scale-metrics { align-items: flex-start; flex-direction: column; }
  .scale-metrics i { display: none; }
  .source-band, .foundation-blocks, .scope-cloud, .dashboard-wall, .product-thesis ul, .context-column ul, .handler-column ul { grid-template-columns: 1fr; }
  .recognition-metric { align-items: flex-start; flex-direction: column; }
  .schema-table { overflow-x: auto; }
  .schema-table > div { min-width: 690px; }
  .evolution-tabs, .principle-tabs, .diagnostic-steps { grid-template-columns: 1fr; }
  .decision-compare { grid-template-columns: 1fr; }
  .decision-facts { grid-template-columns: 1fr; }
  .provider-flow { grid-template-columns: 1fr; }
  .provider-flow > i { transform: none; }
  .agency-equation-large { grid-template-columns: 1fr; }
  .agency-equation-large i { transform: rotate(90deg); text-align: center; }
  .fit-band { align-items: flex-start; flex-direction: column; padding: 12px; }
  .career-thesis-copy { padding: 24px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .opening-subtitle { opacity: 1; transform: none; }
}