:root{
  --bg:#0f1419;
  --panel:#151b24;
  --panel-2:#1c2430;
  --ink:#e6edf3;
  --muted:#8b97a8;
  --accent:#4ea3ff;
  --red:#d84a4a;
  --red-ink:#f07878;
  --blue:#3a8ed6;
  --blue-ink:#6eb3e8;
  --yellow:#f0b840;
  --ok:#2ecc71;
  --border:#2a3442;
  --chip:#243245;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:14px/1.55 system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;overflow-x:hidden;max-width:100vw}
.topbar,.controls,.stage,.wiggers,.explainer,.refs{max-width:100%;min-width:0}
svg{max-width:100%;height:auto}
h1{font-size:20px;margin:0}
h2{font-size:16px;margin:0 0 8px}
h3{font-size:14px;margin:14px 0 4px;color:var(--accent)}
.zh{color:var(--muted);font-weight:400;font-size:14px}

.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 20px;background:var(--panel);border-bottom:1px solid var(--border);flex-wrap:wrap}
.toggles{display:flex;gap:10px;flex-wrap:wrap}
.toggles label{display:flex;flex-direction:column;font-size:11px;color:var(--muted);gap:2px}
.toggles select{background:var(--panel-2);color:var(--ink);border:1px solid var(--border);border-radius:4px;padding:4px 6px}

.controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;padding:12px 20px;background:var(--panel-2);border-bottom:1px solid var(--border)}
.controls > div{background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:10px 12px}
.controls label{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:12px;color:var(--muted)}
.controls input[type=range]{flex:1;accent-color:var(--accent)}
.controls b{color:var(--ink)}
.controls span{font-size:12px}
.transport{display:flex;flex-direction:column;gap:8px}
.transport button{background:var(--accent);color:#fff;border:none;padding:6px 10px;border-radius:4px;cursor:pointer;font-weight:600;align-self:flex-start}
.sliders button{background:var(--panel-2);color:var(--ink);border:1px solid var(--border);padding:4px 10px;border-radius:4px;cursor:pointer;margin-top:6px}
.readouts{display:flex;flex-direction:column;gap:4px;font-size:12px}
.readouts span{color:var(--muted)}
.readouts b{color:var(--ink);font-size:14px}
.phase-chip{background:var(--chip);padding:3px 8px;border-radius:10px;font-size:11px;align-self:flex-start}

.stage{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px 20px}
.stage.one{grid-template-columns:1fr}
.pane{background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:12px}
.pane svg{width:100%;height:auto;display:block}
.pane.hidden{display:none}
.caption{color:var(--muted);font-size:12px;margin:6px 0 0}
.swatch{display:inline-block;width:14px;height:4px;border-radius:2px;vertical-align:middle;margin:0 2px 2px 0}

.stage.one-col{grid-template-columns:1fr}
#coronarySection h2{margin:0 0 8px}
#coronary{background:#0f1419;border:1px solid var(--border);border-radius:6px;display:block;width:100%}
.coronary-stats{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0;font-size:12px;color:var(--muted)}
.coronary-stats span{background:var(--panel-2);padding:4px 10px;border-radius:12px}
.coronary-stats b{color:#fff;font-weight:700}
#coronarySection .caption{font-size:12px;line-height:1.55}
.pulse-grid{display:grid;grid-template-columns:260px 1fr;gap:12px}
.pulse-conduct svg,.pulse-traces svg{background:#0f1419;border:1px solid var(--border);border-radius:6px;display:block;width:100%}
.pulse-traces h3,.pulse-conduct h3{font-size:13px;margin:8px 0 4px;color:var(--accent)}
@media(max-width:700px){.pulse-grid{grid-template-columns:1fr}}
.wiggers{padding:12px 20px}
.wiggers svg{background:var(--panel);border:1px solid var(--border);border-radius:6px;width:100%;height:auto}
.phase-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;font-size:11px;color:var(--muted)}
.pl{background:var(--chip);padding:3px 8px;border-radius:10px}
.pl.active{background:var(--accent);color:#fff}

.explainer,.refs{padding:16px 20px;background:var(--panel);margin:12px 20px;border:1px solid var(--border);border-radius:6px}
.explainer ul{margin:6px 0;padding-left:20px}
.explainer li{margin:3px 0}
.refs ol{padding-left:22px;font-size:12px;color:var(--muted)}
.refs a{color:var(--accent);text-decoration:none}
.refs a:hover{text-decoration:underline}
.disclaimer{font-size:11px;color:var(--muted);margin-top:8px;font-style:italic}

/* SVG element styles */
.stock{fill:var(--panel-2);stroke:#6b7a8f;stroke-width:1.8}
.stock.left{stroke:var(--red)}
.stock.right{stroke:var(--blue)}
.stock-fill{opacity:.35}
.stock-label{fill:var(--ink);font-size:11px;font-weight:600;text-anchor:middle;pointer-events:none}
.stock-sub{fill:var(--muted);font-size:9px;text-anchor:middle;pointer-events:none}
.flow{stroke:#8b97a8;stroke-width:2.5;fill:none;marker-end:url(#arrow)}
.flow.active{stroke:var(--accent)}
.stock-label{fill:#ffffff}
.stock-sub{fill:#b8c2d0}
.valve{fill:var(--panel);stroke:var(--muted);stroke-width:1.5}
.valve.open{fill:var(--ok);stroke:var(--ok)}
.valve.closed{fill:var(--panel);stroke:var(--muted)}
.particle.oxy{fill:var(--red)}
.particle.deoxy{fill:var(--blue)}
.particle.coronary{fill:var(--yellow)}
.chamber-wall{fill:none;stroke-width:3}
.chamber-wall.left{stroke:var(--red)}
.chamber-wall.right{stroke:var(--blue)}
.chamber-fill{opacity:.25}
.chamber-fill.left{fill:var(--red)}
.chamber-fill.right{fill:var(--blue)}
.vessel-label{fill:var(--ink);font-size:10px;text-anchor:middle;pointer-events:none}
.wiggers-grid{stroke:var(--border);stroke-width:.5}
.wiggers-axis{stroke:var(--muted);stroke-width:1}
.wiggers-text{fill:var(--muted);font-size:10px}
.wiggers-line{fill:none;stroke-width:1.8}
.wiggers-line.lv{stroke:var(--red)}
.wiggers-line.ao{stroke:var(--yellow)}
.wiggers-line.la{stroke:#c39bd3}
.wiggers-line.vol{stroke:var(--ok)}
.wiggers-cursor{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:3 3}
.phase-band{opacity:.12}

@media (max-width:900px){
  .controls{grid-template-columns:1fr}
  .stage{grid-template-columns:1fr}
}
@media (max-width:600px){
  .topbar{padding:10px 12px}
  h1{font-size:16px}
  .controls,.stage,.wiggers,.explainer,.refs{padding-left:10px;padding-right:10px;margin-left:10px;margin-right:10px}
  .stage{margin:10px;padding:0;gap:10px}
  .explainer,.refs{margin:10px;padding:12px}
  .toggles label{font-size:10px}
  .readouts b{font-size:13px}
}