/* The promoted story uses the same stack, XPU, and traffic styles as the KV trace. */
.story-deck #topology-path { display: flex; align-items: center; justify-content: center; gap: 16px; flex-shrink: 0; margin: 8px 0 0; color: #526879; font-size: 16px; }
.topology-route { display: flex; gap: 10px; align-items: center; }
.topology-chip { display: inline-block; border: 1px solid #7d9eb9; padding: 5px 12px; background: #edf4f9; color: #225f98; }
.topology-chip.hbf { color: #ac642f; background: #fbf1e7; border-color: #cba681; }
.topology-chip.xpu { color: #225f98; background: #dbe7f0; border-color: #7b9bb5; }
.topology-name { font-weight: 600; }
.story-deck #chapters { gap: 5px; }
.story-deck #chapters button { min-width: 27px; }
.story-deck .page { min-width: 75px; }
.story-deck #results[data-view='weights'] { display: flex; justify-content: center; min-height: 0; }
.weight-layout { display: grid; grid-template-columns: 230px minmax(0,1fr); align-items: center; gap: 24px; width: 100%; }
.weight-roster h2 { margin: 0 0 16px; font: 600 23px var(--ace-heading); color: #225f98; }
.weight-kind { padding: 9px 0; border-bottom: 1px solid #dce5eb; }
.weight-kind b { font-size: 22px; color: #395e7a; font-weight: 500; }
.weight-kind p { font-size: 16px; color: #526879; margin: 5px 0 8px; }
.weight-kind i { display: block; height: 8px; width: 100%; background: #628d84; }
.weight-kind.shared i { background: #7b9fb9; }
.weight-kind.experts i { background: #c59166; }
.weight-access-note { font-size: 16px; line-height: 1.4; color: #526879; margin: 18px 0 0; }
.weight-package { display: block; width: 100%; max-height: 445px; }
.weight-kv-band { fill: #d0e1d9; stroke: #82a59a; stroke-width: .6; }
.shared-weight-band { fill: #d0e1ed; stroke: #91adbf; stroke-width: .6; }
.weight-band-label { fill: #41645a; font: 19px 'Segoe UI',sans-serif; }
.weight-band-label.shared { fill: #42657f; font-size: 16px; }
.expert-tile rect { fill: #edd0b3; stroke: #ba8b63; stroke-width: 1; }
.expert-tile text { fill: #91572e; font: 21px 'Segoe UI',sans-serif; }
.expert-tile.active rect { fill: #bb7641; stroke: #985724; stroke-width: 1.5; }
.expert-tile.active text { fill: white; }
.weight-compute-label { fill: #496a84; font: 23px 'Segoe UI',sans-serif; }
.weight-path-label { fill: #6a8294; font: 18px 'Segoe UI',sans-serif; }
.story-deck #results[data-view='parallelism'] { display: flex; flex-direction: column; justify-content: center; min-height: 0; gap: 12px; }
.parallel-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.projector .parallel-controls button { padding: 8px 13px; font-size: 16px; }
.parallel-system { display: block; width: 100%; max-height: 360px; min-height: 0; flex: 1; }
.parallel-group-bound { fill: #fff; stroke: var(--group-color); stroke-width: 1.5; }
.parallel-group-label { fill: var(--group-color); font: 600 21px var(--ace-heading); }
.parallel-collective { fill: none; stroke: var(--group-color); stroke-width: 1.5; }
.projector .parallel-system .parallel-xpu-title { font: 16px 'Segoe UI',sans-serif; }
.mini-dies { fill: none; stroke: #9aafbf; stroke-width: .7; }
.hbf .mini-dies { stroke: #c79870; }
.model-space { fill: #fff8ef; stroke: #d9b895; }
.model-share, .expert-chip { fill: #e7c3a0; stroke: #c18e63; stroke-width: .7; }
.parallel-resident text { fill: #825029; font: 20px 'Segoe UI',sans-serif; }
.parallel-explanation { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; }
.parallel-explanation strong { font: 600 25px var(--ace-heading); color: #225f98; }
.parallel-explanation b { font-size: 19px; color: #395f7c; font-weight: 500; }
.parallel-explanation p { font-size: 17px; margin: 5px 0 0; color: #526879; }
.parallel-key { font-size: 15px; margin: 0; color: #687f90; }
.hbm-key { color: #225f98; }
.hbf-key { color: #b56c33; }
@media (min-width:761px) and (max-height:750px) {
  .story-deck #topology-path { font-size: 14px; margin-top: 5px; gap: 12px; }
  .topology-chip { padding: 3px 9px; }
  .story-deck #stage[data-mode='replacement'] .figure-layout,
  .story-deck #stage[data-mode='chain'] .figure-layout { padding-top: 6px; gap: 0; }
  .story-deck #stage[data-mode='replacement'] #explanation,
  .story-deck #stage[data-mode='chain'] #explanation { height: 110px; }
  .parallel-system { max-height: 325px; }
  .parallel-explanation strong { font-size: 23px; }
  .parallel-explanation b { font-size: 18px; }
  .parallel-explanation p { font-size: 16px; }
}
@media (min-width:761px) and (max-height:650px) {
  .story-deck #results[data-view='parallelism'] { gap: 7px; }
  .projector .parallel-controls button { padding: 5px 9px; font-size: 14px; }
  .parallel-system { max-height: 230px; }
  .weight-roster h2 { font-size: 20px; margin-bottom: 7px; }
  .weight-kind b { font-size: 19px; }
  .weight-kind { padding: 6px 0; }
  .weight-kind p, .weight-access-note { font-size: 14px; }
  .weight-layout { grid-template-columns: 195px minmax(0,1fr); gap: 20px; }
  .story-deck #topology-path { gap: 8px; font-size: 13px; }
  .story-deck #stage[data-mode='workload'] .figure-layout { padding-top: 6px; }
}
@media (max-width:1100px) and (min-width:761px) {
  .story-deck #chapters { gap: 1px; }
  .story-deck #chapters button { min-width: 23px; font-size: 15px; }
  .topology-detail { display: none; }
}
@media (max-width:760px) {
  .story-deck #topology-path { flex-wrap: wrap; gap: 8px; font-size: 13px; }
  .topology-detail { width: 100%; text-align: center; }
  .topology-chip { padding: 4px 7px; }
  .topology-route { gap: 5px; }
  .story-deck #chapters { flex-wrap: wrap; }
  .story-deck #results[data-view='weights'], .story-deck #results[data-view='parallelism'] { padding: 20px 0; gap: 16px; }
  .weight-layout { display: flex; flex-direction: column; gap: 25px; }
  .weight-roster { width: 100%; }
  .weight-kind { display: inline-block; width: 32%; vertical-align: top; padding-right: 8px; box-sizing: border-box; }
  .weight-kind b { font-size: 17px; }
  .weight-kind p { font-size: 14px; }
  .weight-access-note { font-size: 15px; }
  .parallel-system { flex: none; width: 100%; height: auto; }
  .parallel-explanation { grid-template-columns: 1fr; gap: 14px; }
  .projector .parallel-controls button { font-size: 13px; padding: 7px 8px; }
}