:root{background:#edf4fa;color:#17333b}body{margin:0;font:17px/1.55 system-ui,sans-serif}main{max-width:1600px;margin:auto;padding:18px}button,a.button{font:650 15px/1.35 system-ui;cursor:pointer;border:1px solid #8aa9a1;border-radius:9px;padding:10px 13px;background:#fff;color:#17333b;min-height:44px;box-sizing:border-box;text-decoration:none}button:hover{background:#eaf4f2}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #b3924e;outline-offset:3px}[hidden]{display:none!important}h1{font-size:clamp(1.2rem,2.5vw,1.8rem);margin:0}h2{font-size:clamp(1.5rem,2.5vw,2rem);margin:6px 0 12px}.resource-topbar,.controls,.model-controls,.learning-tabs{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.resource-topbar{margin-bottom:18px}.heart-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(340px,1fr);gap:20px;align-items:start}.model-card,.learning-card{border:1px solid #b5c7cc;border-radius:16px;background:#fff;padding:18px;box-shadow:0 3px 10px #17333b0d}.model-controls{margin-bottom:12px}.model-controls button[aria-pressed=true],.learning-tabs button[aria-pressed=true],.part-group button[aria-pressed=true],#pump-choices button[aria-pressed=true]{background:#176b61;color:#fff;border-color:#10544c}.learning-tabs{margin-bottom:18px}.learning-tabs button{background:#ff8b78;color:#17232e;border-color:#c44d38}.learning-tabs button[aria-pressed=true]{background:#c85846;color:#fff}.part-group{margin-bottom:14px}.part-group h3{font-size:.95rem;margin:0 0 6px}.part-group .buttons,#pump-choices{display:flex;gap:8px;flex-wrap:wrap}.part-group button{font-size:14px;padding:8px 11px;min-height:40px}.part-group button[data-side=low]{border-left:5px solid #387bbc}.part-group button[data-side=high]{border-left:5px solid #c94653}#heart-stage{height:clamp(350px,55vh,650px);position:relative;background:#f5f7f8;border:1px solid #d1dce0;border-radius:12px;overflow:hidden;touch-action:none}#heart-stage canvas{width:100%;height:100%;display:block}#heart-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:white}#model-loading{position:absolute;bottom:12px;left:12px;right:12px;padding:8px 12px;border-radius:8px;background:#ffffffeb;color:#17333b;font-size:14px}.model-hint{font-size:.95rem;font-weight:650;margin:12px 0 6px}.model-note{font-size:.85rem;line-height:1.5;color:#52676e;margin:0}.eyebrow{font-size:.9rem;font-weight:700;letter-spacing:.02em;color:#52676e}#heart-explanation{margin-top:16px;padding:18px;border-radius:12px;border:1px solid #ccdadc;background:#f5f9fa}#heart-explanation p{font-size:1.1rem;line-height:1.65;margin:8px 0}.explanation-controls{margin-top:16px}#step-controls{margin-top:14px}#step-previous,#step-next,#flow-play{background:#176b61;color:white;border-color:#10544c}#flow-choices{display:flex;gap:6px;flex-wrap:wrap}#flow-choices button{font-size:13px;padding:7px 9px;min-height:36px}#flow-choices button[aria-current=step]{outline:3px solid #b3924e;outline-offset:1px;font-weight:800}#flow-choices button[data-oxygen=low]{background:#e0efff;border-color:#4286ba}#flow-choices button[data-oxygen=high]{background:#ffe5e6;border-color:#bb5a62}#flow-choices button[data-oxygen=exchange]{background:#e3f5ea;border-color:#3e906c}.heart-credits{font-size:.9rem;margin-top:20px;padding:14px;border:1px solid #b5c7cc;border-radius:12px;background:#fff}.heart-credits a{color:#176b61}.heart-credits summary{cursor:pointer;font-weight:700}.model-card{position:sticky;top:16px}@media(max-width:850px){.heart-layout{grid-template-columns:1fr}.model-card{position:static}#heart-stage{height:380px}main{padding:12px}.model-card,.learning-card{padding:14px}.resource-topbar{gap:8px}}
html[data-appearance=dark] :is(.model-card,.learning-card,.heart-credits){background:#202c38;color:#f1f5f8;border-color:#627487}html[data-appearance=dark] #heart-explanation{background:#283746;border-color:#627487}html[data-appearance=dark] :is(.model-note,.eyebrow){color:#d0dae3}html[data-appearance=dark] .heart-credits a{color:#b8dbd3}html[data-appearance=dark] .learning-tabs button{background:#c78a7e;color:#17232e}html[data-reading-contrast=high] :is(.model-card,.learning-card,.heart-credits,#heart-explanation){border:2px solid currentColor}html:not([data-reading-size=standard]) #heart-explanation p{font-size:var(--reading-font)!important}html[data-reading-spacing=comfortable] #heart-explanation p{line-height:1.9}
/* The teaching diagram is the default; detailed 3D anatomy remains a separate choice. */
#visual-title{font-size:1.2rem;margin:0 0 12px}.heart-layout{grid-template-columns:minmax(0,1.45fr) minmax(320px,1fr)}.learning-tabs{margin:0 0 16px;gap:12px}.learning-tabs button{font-size:16px;padding:12px 18px}.learning-tabs button[aria-pressed=true]{background:#176b61;color:white;border-color:#10544c}#circulation-picture svg{display:block;width:100%;height:auto;max-height:70vh;max-height:70dvh}.flow-track{stroke-width:7;opacity:.36}.flow-track.low{stroke:#276ba5}.flow-track.high{stroke:#bc3d51}.flow-track.exchange{stroke:#287c58}.flow-track.is-active{opacity:1;stroke-width:11;filter:drop-shadow(0 0 3px #ac861c55)}.chamber text{font-family:system-ui,sans-serif;font-size:20px;font-weight:750;fill:#17333b}.small-label{font:14px system-ui,sans-serif;fill:#664a47}.diagram-valve .leaflet-left,.diagram-valve .leaflet-right{fill:none;stroke:#835d12;stroke-width:4;stroke-linecap:round;transition:d .2s}.diagram-valve.is-open circle{fill:#dbf2da;stroke:#35783b;stroke-width:3}.is-highlighted{filter:drop-shadow(0 0 4px #b88b28)}.chamber.is-highlighted>path{stroke-width:7;stroke:#8a6519}.diagram-organ.is-highlighted{filter:drop-shadow(0 0 5px #b88b28)}.chamber.is-pumping{transform-box:fill-box;transform-origin:center;animation:heart-pump .85s ease-in-out infinite}@keyframes heart-pump{0%,100%{transform:scale(1)}45%{transform:scale(.96)}}.flow-legend{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:.85rem;margin:10px 0 14px}.flow-legend>span:first-child,.flow-legend>span:nth-child(2){font-weight:750}.oxygen-low{color:#276ba5}.oxygen-high{color:#b53449}#visual-step{font-weight:750;margin:12px 0 0}#flow-step-list{margin-top:16px}#flow-step-list summary{cursor:pointer;font-weight:650;padding:10px 0}#flow-step-list #flow-choices{margin-top:10px}#model-part-label{position:absolute;bottom:12px;left:12px;right:12px;pointer-events:none;text-align:center;padding:8px 12px;border-radius:8px;background:#fffdf0e8;color:#17333b;font-weight:750}#model-loading:not([hidden])~#model-part-label{display:none}#circulation-picture [role=button]{cursor:pointer}#circulation-picture [role=button]:focus-visible{outline:3px solid #b3924e}html[data-appearance=dark] .flow-legend{color:#e6edf3}html[data-appearance=dark] .oxygen-low{color:#a0cfff}html[data-appearance=dark] .oxygen-high{color:#ffb7c0}html[data-reading-motion=reduced] .chamber.is-pumping{animation:none}@media(max-width:850px){.heart-layout{grid-template-columns:1fr}#circulation-picture svg{max-height:none}.learning-tabs{gap:8px}.learning-tabs button{padding:10px 12px;font-size:14px}}

html[data-appearance=dark] .learning-tabs button[aria-pressed=true]{background:#375f51;color:#fff;border-color:#719881}