/* Preserved conceptual cardiac pipeline; no patient data or model inference. */
:root{--dark:#172127;--system-line:#536169;--system-muted:#b7c3ca;--signal:#e7a3a7;--timing:#a5c5cb}
.system-toolbar .tiny-label,.node-index,#motion-toggle,.system-step-buttons>button,.engine-tokens,.sensor-tag{font-size:.875rem!important}#system-explanation{font-size:1rem!important;min-height:5em}.system-figure figcaption{font-size:.875rem!important}.system-node>p{font-size:1rem!important}.system-step-buttons>button{min-height:44px}.output-row>span{font-size:.875rem!important}
.system-figure{grid-column:1/-1;background:var(--dark);color:var(--paper);border:1px solid var(--dark);padding:25px 28px 17px;overflow:hidden;isolation:isolate;scroll-margin-top:20px}
.system-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:20px;border-bottom:1px solid #53616966}
.system-toolbar .tiny-label{color:var(--signal);letter-spacing:.11em}
.system-toolbar h3{font-family:var(--sans);font-size:1.0625rem;font-weight:400;letter-spacing:0;line-height:1.5;margin-top:5px}
#motion-toggle{border:1px solid #657179;border-radius:2px;color:#e4ebee;background:transparent;padding:9px 12px;min-height:40px;display:flex;align-items:center;gap:9px;flex-shrink:0}
#motion-toggle:hover{background:#ffffff0c}
#motion-toggle[aria-pressed=true]{background:#f5f5f2;color:#172127;border-color:#f5f5f2}
.pause-symbol{font-weight:600}
.system-flow{display:grid;grid-template-columns:1fr 1fr 1.15fr 1.1fr;gap:34px;padding:24px 0 20px}
.system-node{position:relative;min-width:0}
.node-index{color:var(--system-muted);line-height:1.4;display:flex;gap:10px}
.node-index>span{font-variant-numeric:tabular-nums;color:#8999a3}
.system-node[data-active=true] .node-index>span{color:var(--signal)}
.node-graphic{height:156px;position:relative;display:flex;align-items:center;justify-content:center;margin:10px 0 16px}
.system-node h4{font-size:1rem;font-weight:450;line-height:1.35;margin-bottom:9px;color:#eaf0f1}
.system-node>p{color:var(--system-muted);line-height:1.6}
.cardiac-source{display:flex;align-items:center;flex-direction:column;padding-top:11px}
.heart-symbol{height:69px;width:69px;color:var(--signal);z-index:2;transform-origin:center;animation:heart-beat 1.6s ease-in-out infinite}
.beat-rings{position:absolute;top:3px;left:50%;width:105px;height:105px;transform:translateX(-50%)}
.beat-rings>span{position:absolute;inset:10px;border:1px solid #b86b7470;border-radius:50%;opacity:0;animation:acoustic-ring 1.6s ease-out infinite}
.beat-rings>span:nth-child(2){animation-delay:.22s}.beat-rings>span:nth-child(3){animation-delay:.44s}
.source-signal{margin-top:15px;width:100%;max-width:180px;height:40px;overflow:hidden}
.source-signal svg{width:100%;height:40px}.source-signal path{fill:none;stroke:var(--signal);stroke-width:1.1;stroke-dasharray:700;animation:trace-reveal 3.2s linear infinite}
.incoming-waves{position:absolute;left:0;width:42px;height:85px;top:33px;opacity:.9}
.incoming-waves svg{height:100%;width:100%}.incoming-waves path{fill:none;stroke:#a6beca;stroke-width:1;stroke-dasharray:5 3;animation:input-stream 1.6s linear infinite}
.incoming-waves path:nth-child(2){stroke:var(--signal);animation-delay:.3s}.incoming-waves path:nth-child(3){stroke:#7e939b;animation-delay:.6s}
.sensor-symbol{width:124px;height:124px;margin-left:14px;position:relative}
.sensor-symbol circle{fill:var(--dark);stroke:#8ca3af;stroke-width:1}
.sensor-symbol .sensor-outer{stroke:#536771;stroke-dasharray:2 5}
.sensor-symbol .sensor-inner{stroke:var(--signal);fill:#d17a8610;animation:sensor-capture 3.2s ease-in-out infinite}
.sensor-symbol path{stroke:#e7c2c5;stroke-width:2.3;fill:none;stroke-linecap:round}
.sensor-tag{position:absolute;bottom:0;letter-spacing:.13em;color:#bbcad1}
.engine-frame{width:100%;max-width:198px;position:relative;border:1px solid #82969e;padding:12px 14px;background:#21313b55;overflow:hidden}
.engine-frame:before,.engine-frame:after{content:'';position:absolute;height:9px;width:9px;border:1px solid #d6e0e4;z-index:2}.engine-frame:before{left:-1px;top:-1px;border-right:0;border-bottom:0}.engine-frame:after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.engine-brand{line-height:1.15;letter-spacing:-.02em}
.engine-trace{width:100%;height:31px;margin-top:5px}.engine-trace svg{width:100%;height:100%}.engine-trace path{fill:none;stroke:var(--timing);stroke-width:1.25}
/* Engine glyph and output timing bars share the teaching chart's phase definition: 16 / 32 / 10 / 42. */
.engine-phases{height:7px;display:flex;gap:3px;margin:4px 0 9px}.engine-phases i{background:#748c9866;flex:16}.engine-phases i:nth-child(2){flex:32;background:#d88d985e}.engine-phases i:nth-child(3){flex:10}.engine-phases i:last-child{flex:42}
.engine-scan{position:absolute;top:0;bottom:0;left:0;width:1px;background:#b5dce2;opacity:.5;animation:engine-sweep 3.2s ease-in-out infinite}
.output-graphic{display:flex;flex-direction:column;justify-content:center;gap:9px}
.output-row{display:grid;grid-template-columns:minmax(0,66px) minmax(0,1fr);gap:12px;align-items:center;width:100%;padding-bottom:6px;border-bottom:1px solid #50616b80;min-height:28px}
.output-row>span{color:#d2dce2}.output-row svg{width:100%;height:23px;overflow:visible}.output-row svg path{fill:none;stroke:var(--signal);stroke-width:1.4;stroke-linecap:round}
.grade-bars{display:flex;gap:5px;align-items:end;height:23px}.grade-bars i{flex:1;background:#ddb6b8;height:20%;animation:output-emerge 6.4s ease-in-out infinite}.grade-bars i:nth-child(2){height:38%}.grade-bars i:nth-child(3){height:54%}.grade-bars i:nth-child(4){height:70%;opacity:.6}.grade-bars i:nth-child(5){height:85%;opacity:.4}.grade-bars i:nth-child(6){height:100%;opacity:.25}
.timing-bars{display:flex;gap:3px;height:16px}.timing-bars i{flex:16;border:1px solid #728692}.timing-bars i:nth-child(2){flex:32;background:#ae707b;border-color:#ae707b}.timing-bars i:nth-child(3){flex:10}.timing-bars i:last-child{flex:42}
.flow-connector{position:absolute;right:-30px;top:105px;width:26px;height:22px;border-top:1px solid #52616b;border-bottom:1px solid #52616b}
.flow-connector:before{content:'';position:absolute;left:0;right:0;top:10px;border-top:1px solid #52616b}
.flow-connector>i{position:absolute;top:-2px;left:0;width:5px;height:3px;background:var(--signal);animation:packet-flow 3.2s linear infinite;opacity:0}.flow-connector>i:nth-child(2){top:9px;animation-delay:.3s}.flow-connector>i:nth-child(3){top:19px;animation-delay:.6s}
.sensor-node .flow-connector>i{animation-delay:.8s;background:var(--timing)}.sensor-node .flow-connector>i:nth-child(2){animation-delay:1.1s}.sensor-node .flow-connector>i:nth-child(3){animation-delay:1.4s}.engine-node .flow-connector>i{animation-delay:1.6s}.engine-node .flow-connector>i:nth-child(2){animation-delay:1.9s}.engine-node .flow-connector>i:nth-child(3){animation-delay:2.2s}
.system-explorer{border-top:1px solid #53616966;padding-top:17px;display:grid;grid-template-columns:1.3fr 1fr;gap:25px;align-items:start}
.system-step-buttons{display:flex;gap:9px;flex-wrap:wrap;align-items:center}.system-step-buttons>button{background:transparent;border:1px solid transparent;border-bottom:1px solid #61707a;padding:8px 10px;color:#c0cbd2;overflow-wrap:anywhere;line-height:1.45;min-width:0}.system-step-buttons>button[aria-pressed=true]{color:#f8edef;border-color:#c9939b;background:#ae253918}.system-step-buttons>button:hover{background:#ffffff08}
#system-explanation{line-height:1.6;color:#d0d9de}
.system-figure figcaption{line-height:1.6;color:#a8b7c0;margin-top:16px;border-top:1px solid #53616966;padding-top:11px}
.system-figure.is-paused *{animation-play-state:paused!important}
/* The selected stage is visible on every layout, not only through its number. */
.system-node[data-active=true] h4{color:var(--signal)}
.system-node[data-active=true] .node-graphic{outline:1px solid #c9939b66;outline-offset:4px}
@keyframes heart-beat{0%,36%,100%{transform:scale(1)}10%{transform:scale(1.12)}19%{transform:scale(1.015)}28%{transform:scale(1.075)}}
@keyframes acoustic-ring{0%{transform:scale(.72);opacity:.5}75%,100%{transform:scale(1.55);opacity:0}}
@keyframes trace-reveal{0%{stroke-dashoffset:700;opacity:.5}45%,85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.5}}
@keyframes input-stream{to{stroke-dashoffset:-32}}
@keyframes sensor-capture{0%,100%{stroke:#7d949e;fill:#d17a8605}45%{stroke:#e7a3a7;fill:#d17a8635}}
@keyframes engine-sweep{0%{transform:translateX(0);opacity:0}15%,75%{opacity:.5}100%{transform:translateX(195px);opacity:0}}
@keyframes packet-flow{0%,10%{transform:translateX(0);opacity:0}20%,75%{opacity:1}90%,100%{transform:translateX(22px);opacity:0}}
@keyframes output-emerge{0%,45%,100%{transform:scaleY(.9)}70%{transform:scaleY(1)}}
@media(max-width:1100px){.system-flow{gap:27px}.system-figure{padding:22px 20px 16px}.flow-connector{right:-25px;width:23px}.system-explorer{grid-template-columns:1fr;gap:12px}.system-step-buttons>button{flex:1}#system-explanation{min-height:3em}.engine-frame{padding:12px 10px}.engine-tokens{gap:2px 4px}.output-row{grid-template-columns:minmax(0,58px) minmax(0,1fr);gap:7px}}
@media(max-width:900px){.system-flow{grid-template-columns:1fr 1fr;gap:28px 48px}.sensor-node .flow-connector{display:none}.flow-connector{right:-40px;width:34px}.engine-node .flow-connector{top:103px}.system-node h4{font-size:1.125rem}.engine-frame{max-width:200px}.incoming-waves{left:calc(50% - 95px)}.output-graphic{width:185px;margin-left:auto;margin-right:auto}.node-index{justify-content:center}.system-node h4,.system-node>p{text-align:center}.source-signal{max-width:180px}.output-row{grid-template-columns:minmax(0,70px) minmax(0,1fr)}}
@media(max-width:760px){.system-toolbar{align-items:flex-start;gap:12px}.system-toolbar h3{font-size:.9375rem;max-width:330px}#motion-toggle{padding:8px 10px}.pause-symbol{display:none}.system-figure{padding:20px 17px 16px}.system-step-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.system-step-buttons>button{padding:8px 4px}}
@media(max-width:540px){.system-toolbar{flex-wrap:wrap}.system-toolbar h3{font-size:.875rem}.system-flow{grid-template-columns:1fr;gap:0;padding-top:4px;padding-bottom:0}.system-node{display:grid;grid-template-columns:minmax(0,112px) minmax(0,1fr);column-gap:20px;padding:23px 0;border-bottom:1px solid #53616966}.node-index{grid-column:1/-1;justify-content:flex-start;margin-bottom:10px}.node-graphic{grid-column:1;grid-row:2/4;min-height:176px;width:112px;max-width:100%;margin:0;align-self:center}.system-node h4{grid-column:2;grid-row:2;text-align:left;align-self:end;font-size:1rem;margin-bottom:9px}.system-node>p{grid-column:2;grid-row:3;text-align:left;align-self:start;line-height:1.55}.flow-connector{display:none!important}.source-signal{max-width:112px}.incoming-waves{left:0;width:24px}.sensor-symbol{width:110px;height:110px;margin-left:6px}.sensor-tag{bottom:0}.engine-frame{min-height:154px;padding:10px 8px}.engine-trace{height:27px}.engine-phases{margin-bottom:6px}.output-graphic{gap:8px}.output-row{grid-template-columns:minmax(0,58px) minmax(0,1fr);gap:5px;padding-bottom:6px}.grade-bars{gap:3px}.system-explorer{border-top:0;padding-top:19px}.system-node:last-child{border-bottom:0}.system-node[data-active=true] .node-graphic{outline:0}}
/* Enlarged default text (or a very narrow screen): stack each node so labels can grow. */
@media(max-width:19.9em){.system-node{display:block}.node-index{justify-content:flex-start}.node-graphic{width:auto;max-width:16em;margin:10px 0 14px}.system-node h4,.system-node>p{text-align:left}.engine-frame{max-width:none}.output-graphic{width:100%}.output-row{grid-template-columns:1fr;gap:4px}.system-step-buttons{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.system-figure *{animation:none!important;transition:none!important}.beat-rings>span{opacity:.15;transform:scale(1.2)}.beat-rings>span:nth-child(2){transform:scale(1.4)}.beat-rings>span:nth-child(3){display:none}.engine-scan{display:none}.source-signal path{stroke-dashoffset:0}.flow-connector>i{opacity:1;left:50%}}

/* Content-sized processing graphics keep every token readable. */
.system-figure{overflow:visible}.system-toolbar>div{min-width:0}
.node-graphic{height:auto;min-height:176px}.engine-frame{height:auto;min-height:154px}
.engine-tokens{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;line-height:1.4}
.engine-tokens span{overflow-wrap:break-word}.system-explorer>*{min-width:0}
.engine-brand{display:block;overflow-wrap:anywhere}

/* Without the script there are no traces to animate or controls to operate. */
html:not(.pipeline-ready) .system-figure *{animation:none!important}
html:not(.pipeline-ready) #motion-toggle,html:not(.pipeline-ready) .system-step-buttons,html:not(.pipeline-ready) .segmented{display:none!important}