/* B-only narrative: labels follow the geometry; explanation never covers it. */
.direction-b .b-hero{align-self:center}
.direction-b .b-opening{grid-template-columns:34% 66%;align-items:center}
.direction-b .b-opening .b-story{padding:24px 28px 20px 0}
.b-story .story-heading{display:flex;gap:16px;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.b-story .story-heading h2{font-size:17px;line-height:1.5;margin:0;font-weight:500}
.b-story .story-length{color:#a9bad0;font-size:11px;white-space:nowrap}
.direction-b .b-opening .b-story .m3d-film{background:#101d2e;border:1px solid #34435a;border-radius:6px}
.b-story{--story-accent:#9ebfde}
.b-story[data-film-scene="1"] .m3d-film,.b-story[data-film-scene="3"] .m3d-film{--story-accent:#97dfcc}
.b-story[data-film-scene="2"] .m3d-film{--story-accent:#efc58b}
.b-story[data-film-scene="4"] .m3d-film{--story-accent:#d9c19a}
.b-story .story-caption{min-height:165px;box-sizing:border-box;padding:24px 26px 12px;position:relative;z-index:1}
.b-story .story-eyebrow{font-size:11px;letter-spacing:.08em;color:var(--story-accent);margin:0 0 10px}
.b-story .story-caption h3{font-size:clamp(20px,1.65vw,28px);line-height:1.35;font-weight:500;margin:0 0 10px;text-wrap:balance}
.b-story .story-caption>p:last-child{color:#b9c9da;font-size:14px;line-height:1.7;margin:0;max-width:660px}
.direction-b .b-opening .b-story .m3d-film-stage{height:350px;background:#101d2e}
.b-story .m3d-film-stage:after{display:none}
.b-story .story-leaders{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
.b-story .story-leaders polyline{fill:none;stroke:var(--story-accent);stroke-width:1;opacity:.65}
.b-story .story-leaders circle{fill:var(--story-accent)}
.b-story .story-label{position:absolute;padding:5px 8px;max-width:180px;box-sizing:border-box;font-size:12px;line-height:1.5;background:#101d2ef2;color:#d4e3ef;border-left:2px solid var(--story-accent);pointer-events:none}
.b-story .label-a{left:20px;top:34px}
.b-story .label-b{right:20px;top:48px}
.b-story .label-c{left:20px;bottom:44px}
.b-story .story-context{position:absolute;left:24px;bottom:12px;font-size:10px;letter-spacing:.03em;color:#8fa6bc;pointer-events:none}
.b-story .story-concept{position:absolute;right:24px;bottom:12px;font-size:10px;color:#8fa6bc;pointer-events:none}
.b-story .story-takeaway{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-height:48px;box-sizing:border-box;margin:0 24px;padding:12px 0;border-top:1px solid #2a3b4e;font-size:13px;line-height:1.65;color:var(--story-accent)}
.b-story .story-takeaway a{color:#d2e9e2;font-size:12px;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.b-story .story-transport{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 18px 12px;color:#a9bad0}
.b-story .story-state{font-size:11px;padding-left:6px}
.b-story .story-transport>div{display:flex;gap:5px}
.b-story .story-transport button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:74px;padding:8px 12px;background:transparent;border:1px solid transparent;border-radius:3px;font-size:12px;font-family:inherit;color:#d2deea;cursor:pointer}
.b-story .story-transport .m3d-playback{border-color:#526477;background:#1c2b3d}
.b-story .story-transport button:hover:not(:disabled){background:#30455b}
.b-story .story-transport button:disabled{opacity:.36;cursor:default}
.b-story button:focus-visible{outline:2px solid #c2eadf;outline-offset:-3px}
.direction-b .b-opening .b-story .m3d-film-steps{grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:0;gap:0;background:#132135;border-color:#34435a;border-radius:0}
.b-story .m3d-film-steps:before{background:var(--story-accent);z-index:2}
.direction-b .b-opening .b-story .m3d-film-step{display:flex;flex-direction:column;gap:5px;min-height:66px;padding:10px 4px;border-radius:0;line-height:1.3;background:transparent}
.b-story .m3d-film-step>span{font-size:10px;letter-spacing:.07em;color:#8da4b9}
.b-story .m3d-film-step b{font-size:11px;font-weight:500;color:#b5c6d5}
.direction-b .b-opening .b-story .m3d-film-step.is-active{background:#25364b}
.b-story .m3d-film-step.is-active b,.b-story .m3d-film-step.is-active>span{color:var(--story-accent)}
.direction-b .b-opening .b-story .m3d-film-step:hover{background:#2b4055}
.direction-b .b-opening .b-story #m3d-summary{font-size:11px;line-height:1.7;margin:12px 0 0;color:#90a4b9}
.b-story [hidden]{display:none!important}
@media(min-width:1550px){.b-story .story-caption{min-height:155px}.direction-b .b-opening .b-story .m3d-film-stage{height:380px}}
@media(max-width:1100px){.direction-b .b-opening{grid-template-columns:31% 69%}.direction-b .b-hero{padding-left:24px;padding-right:16px}.direction-b .b-hero h1{font-size:68px}.b-story .story-heading{display:block}.b-story .story-length{display:block;margin-top:4px}.b-story .story-caption{min-height:190px;padding-inline:20px}.direction-b .b-opening .b-story{padding-right:20px}.b-story .story-label{font-size:11px;max-width:155px}.b-story .story-state{max-width:110px;line-height:1.5}}
@media(max-width:760px){.direction-b .b-opening{display:block}.direction-b .b-hero{padding:32px 24px}.direction-b .b-hero h1{font-size:76px}.direction-b .b-opening .b-story{padding:0 18px 24px}.b-story .story-heading{display:flex}.b-story .story-heading h2{font-size:15px}.b-story .story-caption{min-height:172px;padding:20px 18px 10px}.b-story .story-caption h3{font-size:22px}.b-story .story-label{max-width:150px}.b-story .story-takeaway{margin-inline:18px;flex-wrap:wrap;gap:3px}.b-story .story-transport{padding-inline:10px}}
@media(max-width:440px){.b-story .story-heading{display:block}.b-story .story-caption{min-height:208px}.b-story .story-caption>p:last-child{font-size:13px}.direction-b .b-opening .b-story .m3d-film-stage{height:300px}.b-story .story-label{max-width:128px;font-size:11px;padding:4px 6px}.b-story .label-a{left:10px;top:18px}.b-story .label-b{right:10px;top:61px}.b-story .label-c{left:10px;bottom:42px}.b-story .story-context{left:12px;bottom:15px;font-size:9px}.b-story .story-concept{right:12px;bottom:3px;font-size:9px}.b-story .story-transport{flex-wrap:wrap;justify-content:center;padding-top:6px}.b-story .story-state{max-width:none;flex-basis:100%;text-align:center;padding:0}.b-story .story-transport button{min-width:78px}.b-story .m3d-film-step b{font-size:10px}.direction-b .b-opening .b-story .m3d-film-step{min-height:74px}}
@media(prefers-reduced-motion:reduce){.b-story *{scroll-behavior:auto;transition:none!important}}

/* Electrical chapters replace the structural view, not a miniature overlay. */
.direction-b .b-opening .b-story[data-film-scene="2"] .m3d-film-stage,
.direction-b .b-opening .b-story[data-film-scene="3"] .m3d-film-stage{overflow:hidden}
.b-story:is([data-film-scene="2"],[data-film-scene="3"]) .m3d-film-canvas,
.b-story:is([data-film-scene="2"],[data-film-scene="3"]) .story-leaders,
.b-story:is([data-film-scene="2"],[data-film-scene="3"]) .story-label,
.b-story:is([data-film-scene="2"],[data-film-scene="3"]) .story-context,
.b-story:is([data-film-scene="2"],[data-film-scene="3"]) .story-concept{opacity:var(--model-opacity,1)}
.b-story .electrical-story{position:absolute;left:0;top:0;width:100%;padding:8px 24px 18px;color:#d8e5f1;opacity:var(--electrical-reveal,0);transform:translateY(calc((1 - var(--electrical-reveal,0))*28px));pointer-events:none}
.b-story[data-story-view="electrical"] .electrical-story{pointer-events:auto}
.b-story .m3d-film-canvas,.b-story .story-leaders{height:var(--model-height,350px)}
.b-story .m3d-film-canvas,.b-story .story-leaders,.b-story .story-label{opacity:var(--model-opacity,1);transform:translateX(calc(var(--model-retreat,0)*-26px)) scale(calc(1 - var(--model-retreat,0)*.12));transform-origin:50% 50%}
.b-story[data-story-view="electrical"] .m3d-film-canvas,.b-story[data-story-view="electrical"] .story-leaders,.b-story[data-story-view="electrical"] .story-label{visibility:hidden}
.b-story[data-story-view="bridge"] .label-a{border-color:#8de6cd;color:#8de6cd}
.b-story[data-story-view="bridge"] .label-b{border-color:#efba79;color:#efba79}
.b-story .electrical-heading{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:.875rem;font-weight:500}
.b-story .electrical-concept{font-size:.75rem;color:#9fb2c5;font-weight:400}
.b-story .electrical-legend{display:flex;gap:8px 20px;flex-wrap:wrap;padding:13px 0 18px;font-size:.8125rem}
.b-story .electrical-key{display:inline-flex;gap:7px;align-items:center}
.b-story .electrical-key i{display:block;width:22px;height:0;border-top:2px solid currentColor}
.b-story .electrical-key.reference{color:#9fb0c3}
.b-story .electrical-key.reference i{border-top-style:dashed}
.b-story .electrical-key.stressed{color:#efba79}
.b-story .electrical-key.target{color:#8de6cd}
.b-story .electrical-plots{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
.b-story .electrical-plots figure{min-width:0;margin:0}
.b-story .electrical-plots figcaption{font-size:.875rem;line-height:1.5;margin-bottom:6px}
.b-story .electrical-plots svg{display:block;width:100%;height:258px;overflow:visible}
.b-story .electrical-plots svg text{font-family:var(--body);font-size:12px;fill:#bccedf}
.b-story .electrical-plots svg .plot-axis{stroke:#75899e;fill:none;stroke-width:1}
.b-story .electrical-plots svg .plot-guide{stroke:#4b6075;stroke-width:1;stroke-dasharray:3 5;fill:none}
.b-story .electrical-plots svg .plot-base{stroke:#9fb0c3;stroke-width:2;stroke-dasharray:6 5;fill:none}
.b-story .electrical-plots svg .plot-stress{stroke:#efba79;stroke-width:2.5;fill:none}
.b-story .electrical-plots svg .plot-target{stroke:#8de6cd;stroke-width:2.5;fill:none}
.b-story .electrical-plots svg .plot-note{fill:#e0ebf6;font-size:12px}
.b-story .electrical-plots svg .plot-delta{stroke:#e0ebf6;stroke-width:1.2;fill:none}
.b-story .electrical-reading{font-size:.875rem;line-height:1.7;min-height:3.4em;margin:12px 0 4px;color:#deebf7}
.b-story .electrical-assumptions{font-size:.75rem;line-height:1.7;color:#9fb2c5;margin:0}
.b-story .electrical-assumptions a{white-space:nowrap}
@media(max-width:1250px) and (min-width:761px), (max-width:590px){
  .b-story .electrical-plots{grid-template-columns:1fr;gap:18px}
  .b-story .electrical-plots svg{height:240px}
  .b-story .electrical-plots figure:last-child svg{height:178px}
}
@media(max-width:440px){.b-story .electrical-story{padding-inline:16px}.b-story .electrical-heading{font-size:.875rem}.b-story .electrical-legend{gap:7px 12px}.b-story .electrical-reading{font-size:.875rem}}
