/* Framed-only pharmacology + immunology mechanism playground: M20, M21, M24. */
body.study-framed-page .pharm-immune {
  --pi-ink:var(--text);
  --pi-dim:var(--text-dim);
  --pi-muted:var(--text-muted);
  --pi-surface:var(--stage-panel);
  --pi-surface-2:var(--bg-alt);
}
body.study-framed-page .pharm-immune * { box-sizing:border-box; }
body.study-framed-page .pharm-immune button { min-width:0; -webkit-tap-highlight-color:transparent; }
body.study-framed-page .pharm-immune button:focus-visible,
body.study-framed-page .pharm-immune input:focus-visible { outline:none; box-shadow:var(--focus); }

body.study-framed-page .pi-head { min-width:0; grid-template-columns:minmax(0,1fr) auto; overflow:hidden; }
body.study-framed-page .pi-head h3 { overflow-wrap:anywhere; }
body.study-framed-page .pi-steps {
  min-width:0; display:flex; align-items:center; justify-content:flex-end; gap:4px;
  margin:0; padding:0; list-style:none;
}
body.study-framed-page .pi-steps li {
  min-width:0; display:flex; align-items:center;
  color:var(--pi-muted); border:1px solid transparent; border-radius:999px;
  font-size:9px; line-height:1.2; white-space:nowrap;
}
body.study-framed-page .pi-steps button {
  min-width:0; min-height:31px; display:flex; align-items:center; gap:5px; padding:4px 7px 4px 4px;
  color:inherit; background:transparent; border:0; border-radius:999px; font:inherit; cursor:pointer;
}
body.study-framed-page .pi-steps button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
body.study-framed-page .pi-steps li span {
  width:21px; height:21px; display:grid; place-items:center; color:var(--pi-muted);
  background:var(--panel); border:1px solid var(--border); border-radius:50%;
  font:750 8.5px/1 "SFMono-Regular",Consolas,monospace;
}
body.study-framed-page .pi-steps li b { font-weight:650; }
body.study-framed-page .pi-steps li.is-current { color:var(--accent-bright); background:color-mix(in srgb,var(--accent) 8%,transparent); border-color:color-mix(in srgb,var(--accent) 35%,var(--border)); }
body.study-framed-page .pi-steps li.is-current span { color:var(--bg); background:var(--accent); border-color:var(--accent); }
body.study-framed-page .pi-steps li.is-done span { color:var(--bg); background:var(--good); border-color:var(--good); }
html[data-reading-scale="1.5"] body.study-framed-page .pi-steps li b,
html[data-reading-scale="1.75"] body.study-framed-page .pi-steps li b,
html[data-reading-scale="2"] body.study-framed-page .pi-steps li b { display:none; }

body.study-framed-page .pi-workbench { height:366px; grid-template-columns:minmax(196px,.58fr) minmax(0,1.72fr); gap:8px; }
body.study-framed-page .pi-palette,
body.study-framed-page .pi-stage { min-width:0; min-height:0; background:var(--pi-surface); border:1px solid var(--image-border); border-radius:var(--r-control); }
body.study-framed-page .pi-palette { overflow:auto; padding:11px; scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
body.study-framed-page .pi-kicker { margin:0 0 4px; color:var(--accent); font:750 8.5px/1.3 "SFMono-Regular",Consolas,monospace; letter-spacing:.1em; }
body.study-framed-page .pi-palette h4 { margin:0; color:var(--pi-ink); font-size:13px; line-height:1.35; }
body.study-framed-page .pi-palette > p:not(.pi-kicker) { margin:6px 0 9px; color:var(--pi-dim); font-size:9.5px; line-height:1.45; }
body.study-framed-page .pi-token-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
body.study-framed-page .pi-token {
  min-height:44px; display:grid; align-content:center; gap:1px; padding:6px 8px;
  color:var(--pi-ink); background:var(--panel); border:1px solid var(--border); border-radius:var(--r-control);
  cursor:grab; text-align:left; touch-action:none;
  transition:border-color .16s ease,transform .16s ease,background .16s ease;
}
body.study-framed-page .pi-token:hover { border-color:var(--accent); transform:translateY(-1px); }
body.study-framed-page .pi-token:active,
body.study-framed-page .pi-token.is-dragging { cursor:grabbing; transform:translateY(1px); border-color:var(--accent); }
body.study-framed-page .pi-token.is-carried { background:color-mix(in srgb,var(--accent) 12%,var(--panel)); border-color:var(--accent); }
body.study-framed-page .pi-token span { font-size:9.5px; font-weight:700; line-height:1.2; overflow-wrap:anywhere; }
body.study-framed-page .pi-token small { color:var(--pi-muted); font-size:8px; line-height:1.25; overflow-wrap:anywhere; }

body.study-framed-page .pi-stage { position:relative; overflow:hidden; padding:8px; }
body.study-framed-page .pi-stage-head { min-width:0; min-height:39px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:10px; padding:0 2px 6px; }
body.study-framed-page .pi-stage-head span { display:block; color:var(--accent); font:750 8px/1.2 "SFMono-Regular",Consolas,monospace; letter-spacing:.11em; }
body.study-framed-page .pi-stage-head h4 { margin:2px 0 0; color:var(--pi-ink); font-size:12px; line-height:1.25; }
body.study-framed-page .pi-stage-head output { max-width:210px; color:var(--accent-bright); font:750 9px/1.3 "SFMono-Regular",Consolas,monospace; text-align:right; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
body.study-framed-page .pi-drop {
  min-height:44px; padding:6px 8px; color:var(--pi-dim); background:var(--panel);
  border:1px dashed var(--border-strong); border-radius:var(--r-control); cursor:pointer;
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
body.study-framed-page .pi-drop:hover,
body.study-framed-page .pi-drop.is-armed,
body.study-framed-page .pi-drop.is-hovered { color:var(--pi-ink); border-color:var(--accent); }
body.study-framed-page .pi-drop.is-hovered { background:color-mix(in srgb,var(--accent) 12%,var(--panel)); transform:translateY(-1px); }
body.study-framed-page .pi-drop.is-filled { border-style:solid; border-color:var(--good); background:color-mix(in srgb,var(--good) 7%,var(--panel)); }
body.study-framed-page .pi-drop.is-rejected { border-color:var(--bad); animation:pi-reject .24s ease; }
body.study-framed-page .pi-drop span,
body.study-framed-page .pi-drop small { display:block; }
body.study-framed-page .pi-drop span { font-size:9px; font-weight:750; line-height:1.2; }
body.study-framed-page .pi-drop small { margin-top:2px; color:var(--pi-muted); font-size:7.8px; line-height:1.25; }
@keyframes pi-reject { 0%,100%{transform:translateX(0)}30%{transform:translateX(-3px)}70%{transform:translateX(3px)} }
body.study-framed-page .pi-stage.has-zero-effect { border-color:var(--bad); }
body.study-framed-page .pi-zero-effect {
  position:absolute; inset:54px 12px auto; z-index:40; min-height:86px; display:grid; grid-template-columns:auto 1fr;
  align-items:center; gap:2px 12px; padding:13px 16px; pointer-events:none;
  color:var(--bad); background:color-mix(in srgb,var(--bad) 13%,var(--pi-surface-2));
  border:2px solid var(--bad); border-radius:var(--r-control); animation:pi-zero-impact 1s ease both;
}
body.study-framed-page .pi-zero-effect b { grid-row:1/3; font:800 28px/1 monospace; font-variant-numeric:tabular-nums; }
body.study-framed-page .pi-zero-effect span { font-size:13px; font-weight:750; }
body.study-framed-page .pi-zero-effect small { color:var(--pi-dim); font-size:9px; }
@keyframes pi-zero-impact { 0%{opacity:0;transform:translateX(-36px)}18%,76%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(28px)} }

body.study-framed-page .pi-readouts { min-width:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
body.study-framed-page .pi-meter { min-width:0; display:grid; grid-template-columns:minmax(52px,auto) minmax(40px,1fr) 24px; align-items:center; gap:5px; color:var(--pi-muted); font-size:7.5px; line-height:1.2; }
body.study-framed-page .pi-meter i { height:6px; display:block; overflow:hidden; background:var(--border); border-radius:99px; }
body.study-framed-page .pi-meter i b { height:100%; display:block; background:var(--good); border-radius:inherit; transition:width .18s ease; }
body.study-framed-page .pi-meter.is-bad i b { background:var(--bad); }
body.study-framed-page .pi-meter output { color:var(--pi-dim); font:700 7.5px/1 monospace; text-align:right; }

/* M20 */
body.study-framed-page .pi-nephron { height:299px; display:grid; grid-template-rows:minmax(0,1fr) auto auto; gap:6px; }
body.study-framed-page .pi-nephron > svg { width:100%; height:100%; min-height:128px; display:block; background:var(--pi-surface-2); border:1px solid var(--border); border-radius:var(--r-control); }
body.study-framed-page .pi-nephron-ghost { fill:none; stroke:var(--pi-muted); stroke-width:31; stroke-dasharray:3 8; stroke-linecap:round; opacity:.18; }
body.study-framed-page .pi-tubule { fill:none; stroke:var(--border-strong); stroke-width:21; stroke-linecap:round; }
body.study-framed-page .pi-flow { fill:none; stroke:var(--accent); stroke-width:5; stroke-linecap:round; stroke-dasharray:9 9; opacity:.15; }
body.study-framed-page .pi-flow.is-on { opacity:.9; animation:pi-flow-dash .75s ease-out both; }
body.study-framed-page .pi-nephron-particles circle { fill:var(--accent-bright); opacity:0; transform-box:fill-box; transform-origin:center; }
body.study-framed-page .pi-nephron-particles.is-on circle { animation:pi-nephron-travel .8s ease-out both; animation-delay:calc(var(--i) * 55ms); }
body.study-framed-page .pi-flux-burst circle { fill:var(--good); stroke:var(--pi-surface-2); stroke-width:2; transform-box:fill-box; transform-origin:center; }
body.study-framed-page .pi-flux-burst text { fill:var(--accent-bright); font:750 9px/1 monospace; opacity:0; animation:pi-label-rise .65s .12s ease-out both; }
body.study-framed-page .pi-flux-loop circle { animation:pi-ion-down .65s ease-out both; }
body.study-framed-page .pi-flux-save circle { animation:pi-ion-up .65s ease-out both; }
body.study-framed-page .pi-flux-spare circle { animation:pi-ion-left .65s ease-out both; }
@keyframes pi-flow-dash { from{stroke-dashoffset:70;opacity:.15} to{stroke-dashoffset:0;opacity:.9} }
@keyframes pi-nephron-travel { 0%{opacity:0;transform:translate(0,0)}14%{opacity:1;transform:translate(88px,-34px)}38%{transform:translate(218px,62px)}60%{transform:translate(336px,-30px)}82%{transform:translate(462px,48px)}100%{opacity:1;transform:translate(570px,-6px)} }
@keyframes pi-ion-down { from{opacity:.25;transform:translateY(0)} to{opacity:1;transform:translateY(34px)} }
@keyframes pi-ion-up { from{opacity:.25;transform:translateY(0)} to{opacity:1;transform:translateY(-32px)} }
@keyframes pi-ion-left { from{opacity:.25;transform:translateX(0)} to{opacity:1;transform:translateX(-30px)} }
@keyframes pi-label-rise { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
body.study-framed-page .pi-ion circle { fill:var(--good); stroke:var(--stage-panel); stroke-width:2; }
body.study-framed-page .pi-ion text { fill:var(--pi-dim); font:700 10px/1 monospace; text-anchor:middle; }
body.study-framed-page .pi-nephron-zones { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
body.study-framed-page .pi-axis-zones { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
body.study-framed-page .pi-airway-board,
body.study-framed-page .pi-stomach { height:299px; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(165px,.7fr); grid-template-rows:minmax(0,1fr) auto; gap:7px; }
body.study-framed-page .pi-airway-visual,
body.study-framed-page .pi-gastric-scene { position:relative; min-width:0; min-height:0; overflow:hidden; background:var(--pi-surface-2); border:1px solid var(--border); border-radius:var(--r-control); }
body.study-framed-page .pi-airway-visual { display:grid; place-items:center; }
body.study-framed-page .pi-airway-visual > b { position:absolute; left:9px; bottom:7px; color:var(--pi-muted); font:700 8px/1 monospace; }
body.study-framed-page .pi-airway-baseline { position:absolute; z-index:0; width:94px; height:94px; display:grid; place-items:center; border:2px dashed var(--pi-muted); border-radius:50%; opacity:.46; }
body.study-framed-page .pi-airway-baseline span { position:absolute; top:-15px; color:var(--pi-muted); font:700 7px/1 monospace; white-space:nowrap; }
body.study-framed-page .pi-airway-ring { width:166px; height:166px; display:grid; place-items:center; border:28px solid color-mix(in srgb,var(--bad) var(--inflame),var(--panel-2)); border-radius:50%; transition:border-width .18s ease; }
body.study-framed-page .pi-airway-ring i { position:relative; z-index:1; width:calc(38px + var(--radius)); height:calc(38px + var(--radius)); max-width:128px; max-height:128px; display:block; background:var(--bg); border:3px solid var(--accent); border-radius:50%; transition:width .18s ease,height .18s ease; }
body.study-framed-page .pi-airway-visual.is-open .pi-airway-ring i { animation:pi-airway-open .28s ease-out both; }
body.study-framed-page .pi-airflow-particles { position:absolute; z-index:3; inset:0; pointer-events:none; }
body.study-framed-page .pi-airflow-particles i { position:absolute; left:18%; top:calc(40% + var(--i) * 6%); width:9px; height:4px; background:var(--good); border-radius:99px; opacity:0; }
body.study-framed-page .pi-airway-visual.is-open .pi-airflow-particles i { animation:pi-airflow .7s ease-out both; animation-delay:calc(var(--i) * 55ms); }
body.study-framed-page .pi-inflammation { position:absolute; inset:10px; pointer-events:none; opacity:var(--inflame); }
body.study-framed-page .pi-inflammation i { --angle:calc(var(--i) * 30deg); position:absolute; left:50%; top:50%; width:7px; height:7px; background:var(--bad); border-radius:50%; transform:rotate(var(--angle)) translateX(86px); }
body.study-framed-page .pi-airway-visual.is-calm .pi-inflammation i { animation:pi-inflammation-fall .65s ease-out both; animation-delay:calc(var(--i) * 22ms); }
@keyframes pi-airway-open { from{width:80px;height:80px;border-color:var(--pi-muted)} to{width:calc(38px + var(--radius));height:calc(38px + var(--radius));border-color:var(--accent)} }
@keyframes pi-airflow { 0%{opacity:0;transform:translateX(0)}18%{opacity:1}100%{opacity:1;transform:translateX(128px)} }
@keyframes pi-inflammation-fall { from{opacity:1} to{opacity:.12;translate:0 30px} }
body.study-framed-page .pi-airway-board .pi-axis-zones,
body.study-framed-page .pi-stomach .pi-axis-zones { grid-template-columns:1fr; align-content:center; }
body.study-framed-page .pi-airway-board .pi-readouts,
body.study-framed-page .pi-stomach .pi-readouts { grid-column:1/-1; grid-template-columns:repeat(2,minmax(0,1fr)); }
body.study-framed-page .pi-gastric-scene { display:grid; align-content:end; padding:12px; }
body.study-framed-page .pi-shield-ghost { position:absolute; z-index:0; left:12px; right:12px; bottom:107px; height:46px; display:grid; place-items:start center; border-top:2px dashed var(--pi-muted); opacity:.5; pointer-events:none; }
body.study-framed-page .pi-shield-ghost span { margin-top:4px; color:var(--pi-muted); font:700 7px/1 monospace; }
body.study-framed-page .pi-mucus { height:clamp(34px,var(--defense),105px); min-height:34px; display:grid; place-items:center; background:color-mix(in srgb,var(--good) 32%,transparent); border-top:3px solid var(--good); border-radius:18px 18px 4px 4px; transition:height .18s ease; }
body.study-framed-page .pi-gastric-scene.is-shielded .pi-mucus { animation:pi-shield-grow .65s ease-out both; }
body.study-framed-page .pi-mucus span { color:var(--pi-dim); font:700 8px/1 monospace; }
body.study-framed-page .pi-parietal { position:relative; min-height:92px; display:grid; place-items:center; background:var(--panel); border:1px solid var(--border-strong); border-radius:44px 44px 8px 8px; }
body.study-framed-page .pi-parietal b { color:var(--pi-muted); font:700 8px/1 monospace; }
body.study-framed-page .pi-parietal i { position:absolute; top:calc(100% - var(--acid)); color:var(--bad); font:700 9px/1 monospace; font-style:normal; opacity:var(--acid); transition:top .18s ease,opacity .18s ease; }
body.study-framed-page .pi-parietal i:nth-of-type(1){left:18%} body.study-framed-page .pi-parietal i:nth-of-type(2){left:40%} body.study-framed-page .pi-parietal i:nth-of-type(3){left:62%} body.study-framed-page .pi-parietal i:nth-of-type(4){left:82%}
body.study-framed-page .pi-gastric-scene.is-low-acid .pi-parietal i { animation:pi-acid-return .65s ease-out both; }
@keyframes pi-shield-grow { from{height:46px;background:color-mix(in srgb,var(--good) 10%,transparent)} to{height:clamp(34px,var(--defense),105px);background:color-mix(in srgb,var(--good) 32%,transparent)} }
@keyframes pi-acid-return { from{opacity:1;transform:translateY(-30px)} to{opacity:var(--acid);transform:translateY(0)} }
body.study-framed-page .pi-range { margin-top:10px; padding:8px; background:var(--pi-surface-2); border:1px solid var(--border); border-radius:var(--r-control); }
body.study-framed-page .pi-range label { display:flex; justify-content:space-between; gap:8px; color:var(--pi-dim); font-size:9px; }
body.study-framed-page .pi-range output { color:var(--accent-bright); font:750 9px/1.2 monospace; }
body.study-framed-page .pi-range input { width:100%; min-height:30px; margin:4px 0 0; accent-color:var(--accent); cursor:ew-resize; touch-action:pan-y; }
body.study-framed-page .pi-gnrh { height:299px; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(130px,.55fr); grid-template-rows:minmax(0,1fr) auto; gap:7px; }
body.study-framed-page .pi-gnrh > svg { width:100%; height:100%; min-height:0; display:block; background:var(--pi-surface-2); border:1px solid var(--border); border-radius:var(--r-control); }
body.study-framed-page .pi-chart-axis { fill:none; stroke:var(--border-strong); stroke-width:1.5; }
body.study-framed-page .pi-hormone-line { fill:none; stroke:var(--accent); stroke-width:3; }
body.study-framed-page .pi-hormone-ghost { fill:none; stroke:var(--pi-muted); stroke-width:2; stroke-dasharray:5 7; opacity:.48; }
body.study-framed-page .pi-hormone-line { stroke-dasharray:900; animation:pi-draw-hormone .65s ease-out both; }
body.study-framed-page .pi-pulse-train line { stroke:var(--good); stroke-width:4; opacity:.16; transform-box:fill-box; transform-origin:bottom; animation:pi-pulse-rise .48s ease-out both; animation-delay:calc(var(--i) * 24ms); }
body.study-framed-page .pi-time-cursor { stroke:var(--warn); stroke-width:2; }
body.study-framed-page .pi-time-dot { fill:var(--warn); stroke:var(--stage-panel); stroke-width:2; }
body.study-framed-page .pi-svg-note { fill:var(--pi-muted); font:700 8px/1 monospace; }
body.study-framed-page .pi-receptor-bank { display:grid; align-content:center; gap:9px; padding:9px; background:var(--pi-surface-2); border:1px solid var(--border); border-radius:var(--r-control); text-align:center; }
body.study-framed-page .pi-receptor-bank b { font-size:9px; }
body.study-framed-page .pi-receptor-bank > div:not(.pi-receptor-ghost):not(.pi-ca-pulses) { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; }
body.study-framed-page .pi-receptor-ghost { min-height:18px; display:grid; place-items:center; color:var(--pi-muted); border:1px dashed var(--pi-muted); border-radius:5px; font:700 7px/1 monospace; opacity:.45; }
body.study-framed-page .pi-receptor-bank i { height:20px; display:block; border:2px solid var(--border-strong); border-radius:9px 9px 3px 3px; }
body.study-framed-page .pi-receptor-bank i.is-on { border-color:var(--good); background:color-mix(in srgb,var(--good) 24%,transparent); }
body.study-framed-page .pi-ca-pulses { position:relative; min-height:28px; display:block; overflow:hidden; }
body.study-framed-page .pi-ca-pulses i { position:absolute; left:calc(8% + var(--i) * 24%); bottom:2px; width:7px; height:7px; background:var(--accent); border:0; border-radius:50%; opacity:0; }
body.study-framed-page .pi-receptor-bank.is-signaling .pi-ca-pulses i { animation:pi-ca-rise .62s ease-out both; animation-delay:calc(var(--i) * 70ms); }
body.study-framed-page .pi-receptor-bank span { color:var(--pi-muted); font:700 8px/1.2 monospace; }
body.study-framed-page .pi-gnrh .pi-readouts { grid-column:1/-1; }
@keyframes pi-draw-hormone { from{stroke-dashoffset:900;opacity:.2} to{stroke-dashoffset:0;opacity:1} }
@keyframes pi-pulse-rise { from{opacity:.15;transform:scaleY(.08)} to{opacity:.68;transform:scaleY(1)} }
@keyframes pi-ca-rise { 0%{opacity:0;transform:translateY(18px)}28%{opacity:1}100%{opacity:.25;transform:translateY(-18px)} }

/* M21 */
body.study-framed-page .pi-access-route,
body.study-framed-page .pi-chemo-board,
body.study-framed-page .pi-clot { height:299px; display:grid; grid-template-rows:minmax(0,1fr) auto; gap:7px; }
body.study-framed-page .pi-bacterium { position:relative; min-height:0; overflow:hidden; padding:18px; background:var(--pi-surface-2); border:9px solid var(--border-strong); border-radius:45% 52% 48% 44%; transition:border-color .18s ease,transform .18s ease; }
body.study-framed-page .pi-bacterium.is-lysed { border-color:var(--bad); border-style:dashed; background:color-mix(in srgb,var(--bad) 12%,var(--pi-surface-2)); }
body.study-framed-page .pi-bacterium.is-lysed::after { content:"WALL RUPTURE · integrity 12%"; position:absolute; right:7%; bottom:7%; color:var(--bad); font:750 8px/1 monospace; animation:pi-label-rise .55s .1s ease-out both; }
body.study-framed-page .pi-wall { position:absolute; inset:6px; border:2px solid var(--border); border-radius:inherit; pointer-events:none; }
body.study-framed-page .pi-wall span { position:absolute; right:8px; bottom:4px; color:var(--pi-muted); font:700 7px/1 monospace; }
body.study-framed-page .pi-route-nodes { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
body.study-framed-page .pi-route-ghost { position:absolute; z-index:1; left:7%; right:7%; top:63%; height:0; border-top:2px dashed var(--pi-muted); opacity:.38; pointer-events:none; }
body.study-framed-page .pi-route-ghost span { position:absolute; top:5px; color:var(--pi-muted); font:700 7px/1 monospace; }
body.study-framed-page .pi-porin-gate,
body.study-framed-page .pi-enzyme-site,
body.study-framed-page .pi-pbp-field { position:absolute; z-index:3; top:48%; width:46px; height:62px; display:grid; place-items:center; pointer-events:none; }
body.study-framed-page .pi-porin-gate { left:18%; }
body.study-framed-page .pi-porin-gate i { position:absolute; width:7px; height:42px; background:var(--border-strong); border-radius:5px; transition:transform .18s ease,background .18s ease; }
body.study-framed-page .pi-porin-gate i:first-child { left:10px; } body.study-framed-page .pi-porin-gate i:nth-child(2) { right:10px; }
body.study-framed-page .pi-porin-gate.is-open i:first-child { background:var(--good); animation:pi-porin-open-left .5s ease-out both; }
body.study-framed-page .pi-porin-gate.is-open i:nth-child(2) { background:var(--good); animation:pi-porin-open-right .5s ease-out both; }
body.study-framed-page .pi-porin-gate.is-closed i { background:var(--bad); transform:translateX(6px); }
body.study-framed-page .pi-porin-gate b,
body.study-framed-page .pi-enzyme-site b,
body.study-framed-page .pi-pbp-field b { position:absolute; bottom:-8px; color:var(--pi-muted); font:700 6.5px/1 monospace; white-space:nowrap; }
body.study-framed-page .pi-enzyme-site { left:47%; border:2px solid var(--border-strong); border-radius:50%; }
body.study-framed-page .pi-enzyme-site i { width:24px; height:3px; display:block; background:var(--pi-muted); transform:rotate(32deg); }
body.study-framed-page .pi-enzyme-site.is-cutting { border-color:var(--bad); animation:pi-enzyme-snap .5s ease-out both; }
body.study-framed-page .pi-enzyme-site.is-cutting i { background:var(--bad); }
body.study-framed-page .pi-pbp-field { right:7%; display:flex; align-items:center; justify-content:center; gap:3px; }
body.study-framed-page .pi-pbp-field i { width:7px; height:32px; display:block; border:2px solid var(--accent); border-radius:5px 5px 1px 1px; transform:translateY(calc((var(--i) - 1.5) * 3px)); }
body.study-framed-page .pi-pbp-field.is-occupied i { background:var(--good); border-color:var(--good); animation:pi-pbp-bind .56s ease-out both; animation-delay:calc(var(--i) * 38ms); }
body.study-framed-page .pi-pbp-field.is-altered i { border-color:var(--bad); transform:rotate(calc((var(--i) - 1.5) * 9deg)); }
body.study-framed-page .pi-route-molecule { --route-end:80%; position:absolute; z-index:5; left:7%; top:57%; width:26px; height:22px; display:grid; place-items:center; color:var(--bg); background:var(--accent); border:2px solid var(--accent-bright); border-radius:10px; animation:pi-molecule-route .68s ease-out both; }
body.study-framed-page .pi-route-molecule.route-access { --route-end:18%; background:var(--bad); }
body.study-framed-page .pi-route-molecule.route-destruction { --route-end:47%; background:var(--bad); }
body.study-framed-page .pi-route-molecule.route-target { --route-end:77%; background:var(--warn); }
body.study-framed-page .pi-route-molecule.route-none { --route-end:79%; background:var(--good); border-color:var(--good); }
body.study-framed-page .pi-route-molecule.is-bound { animation:pi-molecule-route .58s ease-out both,pi-pbp-impact .32s .54s ease-out both; }
body.study-framed-page .pi-route-molecule b { font:800 12px/1 monospace; }
body.study-framed-page .pi-drug-fragments { position:absolute; z-index:6; left:49%; top:55%; display:flex; gap:4px; color:var(--bad); font:750 12px/1 monospace; }
body.study-framed-page .pi-drug-fragments i { font-style:normal; animation:pi-fragment-fly .58s ease-out both; }
body.study-framed-page .pi-drug-fragments i:first-child { --dx:-30px;--dy:-24px } body.study-framed-page .pi-drug-fragments i:last-child { --dx:30px;--dy:24px }
@keyframes pi-porin-open-left { from{transform:translateX(6px)} to{transform:translateX(-6px)} }
@keyframes pi-porin-open-right { from{transform:translateX(-6px)} to{transform:translateX(6px)} }
@keyframes pi-enzyme-snap { from{transform:rotate(-18deg) scale(.7)} to{transform:rotate(0) scale(1)} }
@keyframes pi-pbp-bind { from{opacity:.3;transform:translateY(26px)} to{opacity:1;transform:translateY(calc((var(--i) - 1.5) * 3px))} }
@keyframes pi-molecule-route { from{left:7%;opacity:.3} to{left:var(--route-end);opacity:1} }
@keyframes pi-pbp-impact { 0%,100%{scale:1}50%{scale:1.35} }
@keyframes pi-fragment-fly { from{opacity:1;transform:translate(0)} to{opacity:.25;transform:translate(var(--dx,0),var(--dy,0))} }
body.study-framed-page .pi-molecule-flow { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin:18px 6%; }
body.study-framed-page .pi-molecule-flow i { position:relative; height:3px; display:block; background:var(--border-strong); }
body.study-framed-page .pi-molecule-flow i::after { content:""; position:absolute; right:0; top:50%; width:9px; height:9px; background:var(--border-strong); border-radius:50%; transform:translateY(-50%); }
body.study-framed-page .pi-molecule-flow i.is-on { background:var(--accent); } body.study-framed-page .pi-molecule-flow i.is-on::after { background:var(--accent); }
body.study-framed-page .pi-molecule-flow i.is-cut::after { width:2px; height:15px; border-radius:0; background:var(--bad); }
body.study-framed-page .pi-chemo-board { grid-template-columns:minmax(0,1fr) minmax(165px,.65fr); grid-template-rows:minmax(0,1fr) auto; }
body.study-framed-page .pi-cell-cycle,
body.study-framed-page .pi-rescue-socket { min-width:0; min-height:0; display:grid; align-content:center; justify-items:center; gap:7px; padding:9px; background:var(--pi-surface-2); border:1px solid var(--border); border-radius:var(--r-control); }
body.study-framed-page .pi-cell-cycle { position:relative; }
body.study-framed-page .pi-cycle-baseline { position:absolute; width:142px; height:142px; display:grid; place-items:end center; color:var(--pi-muted); border:2px dashed var(--pi-muted); border-radius:50%; font:700 7px/1 monospace; opacity:.35; }
body.study-framed-page .pi-cycle-ring { width:130px; height:130px; display:grid; place-items:center; align-content:center; gap:4px; border:12px solid color-mix(in srgb,var(--bad) var(--kill),var(--border)); border-right-color:var(--accent); border-radius:50%; text-align:center; }
body.study-framed-page .pi-cycle-ring.is-hit { animation:pi-cycle-hit .58s ease-out both; }
body.study-framed-page .pi-cycle-ring.is-rescued { border-bottom-color:var(--good); }
@keyframes pi-cycle-hit { from{transform:rotate(-28deg);filter:saturate(.4)} to{transform:rotate(0);filter:saturate(1)} }
body.study-framed-page .pi-cycle-ring b { font:750 8px/1.2 monospace; }
body.study-framed-page .pi-cycle-ring span { max-width:90px; color:var(--pi-muted); font-size:8px; line-height:1.25; }
body.study-framed-page .pi-cell-cycle .pi-drop { width:min(240px,100%); }
body.study-framed-page .pi-rescue-socket .pi-drop { width:100%; }
body.study-framed-page .pi-rescue-socket p { margin:0; color:var(--pi-dim); font-size:8.5px; line-height:1.4; text-align:center; }
body.study-framed-page .pi-rescue-socket p.bad { color:var(--bad); }
body.study-framed-page .pi-chemo-board .pi-readouts { grid-column:1/-1; grid-template-columns:repeat(2,minmax(0,1fr)); }
body.study-framed-page .pi-clot-nodes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
body.study-framed-page .pi-clot { grid-template-rows:auto minmax(0,1fr) auto; }
body.study-framed-page .pi-clot-scene { position:relative; min-height:0; overflow:hidden; background:var(--pi-surface-2); border:1px solid var(--border); border-radius:var(--r-control); }
body.study-framed-page .pi-clot-ghost i { position:absolute; left:5%; top:calc(18% + var(--i) * 9%); width:90%; height:0; border-top:2px dashed var(--pi-muted); transform:rotate(calc((var(--i) - 4) * -9deg)); opacity:.24; }
body.study-framed-page .pi-clot-ghost b { position:absolute; left:7px; bottom:5px; color:var(--pi-muted); font:700 7px/1 monospace; opacity:.6; }
body.study-framed-page .pi-factor-lines i,
body.study-framed-page .pi-fibrin i { position:absolute; left:5%; width:90%; height:2px; background:var(--warn); transform:rotate(calc((var(--i) - 2) * 7deg)); opacity:var(--factor); }
body.study-framed-page .pi-factor-lines i { top:calc(24% + var(--i) * 11%); }
body.study-framed-page .pi-fibrin i { top:calc(18% + var(--i) * 9%); background:var(--bad); transform:rotate(calc((var(--i) - 4) * -9deg)); opacity:var(--fibrin); }
body.study-framed-page .pi-platelets i { --angle:calc(var(--i) * 51deg); position:absolute; left:50%; top:50%; width:24px; height:12px; background:var(--accent); border-radius:50%; opacity:var(--platelet); transform:rotate(var(--angle)) translateX(70px); }
body.study-framed-page .pi-clot-scene.is-factor-blocked .pi-factor-lines i { animation:pi-factor-collapse .56s ease-out both; animation-delay:calc(var(--i) * 35ms); }
body.study-framed-page .pi-clot-scene.is-platelet-blocked .pi-platelets i { animation:pi-platelet-release .56s ease-out both; animation-delay:calc(var(--i) * 25ms); }
body.study-framed-page .pi-clot-scene.is-lysing .pi-fibrin i { animation:pi-mesh-cut .7s ease-out both; animation-delay:calc(var(--i) * 28ms); }
body.study-framed-page .pi-fibrinolysis-sweep { position:absolute; inset:0; pointer-events:none; }
body.study-framed-page .pi-fibrinolysis-sweep i { position:absolute; top:12%; width:4px; height:76%; background:var(--good); box-shadow:0 0 0 2px color-mix(in srgb,var(--good) 22%,transparent); animation:pi-plasmin-sweep .68s ease-out both; }
body.study-framed-page .pi-fibrinolysis-sweep i:nth-child(2) { animation-delay:90ms; }
body.study-framed-page .pi-fibrinolysis-sweep b { position:absolute; right:8px; top:8px; color:var(--good); font:750 8px/1 monospace; animation:pi-label-rise .55s .12s ease-out both; }
@keyframes pi-factor-collapse { from{opacity:1;transform:rotate(calc((var(--i) - 2) * 7deg)) translateX(0)} to{opacity:var(--factor);transform:rotate(calc((var(--i) - 2) * 7deg)) translateX(-38px)} }
@keyframes pi-platelet-release { from{opacity:1} to{opacity:var(--platelet);translate:calc((var(--i) - 3) * 9px) 28px} }
@keyframes pi-mesh-cut { from{opacity:1;scale:1 1} to{opacity:var(--fibrin);scale:.12 1} }
@keyframes pi-plasmin-sweep { from{left:4%;opacity:.2} to{left:94%;opacity:1} }

/* M24 */
body.study-framed-page .pi-signal-board,
body.study-framed-page .pi-fate-board,
body.study-framed-page .pi-complement,
body.study-framed-page .pi-transplant { height:299px; }
body.study-framed-page .pi-signal-board { position:relative; display:grid; grid-template-columns:112px minmax(110px,.45fr) minmax(130px,.62fr); grid-template-rows:minmax(0,1fr) auto; align-items:center; gap:8px; }
body.study-framed-page .pi-signal-baseline { position:absolute; top:4px; right:4px; color:var(--pi-muted); border:1px dashed var(--pi-muted); border-radius:4px; padding:3px 5px; font:700 6.5px/1 monospace; opacity:.42; }
body.study-framed-page .pi-apc,
body.study-framed-page .pi-tcell { min-height:145px; display:grid; place-items:center; align-content:center; gap:7px; padding:8px; background:var(--pi-surface-2); border:3px solid var(--border-strong); border-radius:50%; text-align:center; }
body.study-framed-page .pi-apc,
body.study-framed-page .pi-tcell { position:relative; overflow:hidden; }
body.study-framed-page .pi-apc b,
body.study-framed-page .pi-tcell b { color:var(--accent-bright); font:750 9px/1 monospace; }
body.study-framed-page .pi-apc span,
body.study-framed-page .pi-tcell span { color:var(--pi-muted); font-size:8px; line-height:1.35; }
body.study-framed-page .pi-tcell.is-active { border-color:var(--good); box-shadow:inset 0 0 0 8px color-mix(in srgb,var(--good) 8%,transparent); }
body.study-framed-page .pi-tcell.is-anergic { border-color:var(--warn); border-style:dashed; }
body.study-framed-page .pi-ligand-burst { position:absolute; inset:0; pointer-events:none; }
body.study-framed-page .pi-ligand-burst i { position:absolute; left:70%; top:calc(25% + var(--i) * 22%); width:7px; height:7px; background:var(--accent); border-radius:50%; opacity:.2; }
body.study-framed-page .gate-expand .pi-ligand-burst i,
body.study-framed-page .gate-differentiate .pi-ligand-burst i { animation:pi-ligand-cross .55s ease-out both; animation-delay:calc(var(--i) * 55ms); }
body.study-framed-page .pi-cables { display:grid; gap:18px; }
body.study-framed-page .pi-cables div { position:relative; height:3px; display:grid; place-items:center; color:var(--pi-muted); background:var(--border-strong); font:750 7px/1 monospace; }
body.study-framed-page .pi-cables div b { position:relative; z-index:2; display:grid; place-items:center; width:14px; height:14px; background:var(--pi-surface-2); border:1px solid currentColor; border-radius:50%; font:inherit; }
body.study-framed-page .pi-cables div i { position:absolute; left:0; top:-3px; width:9px; height:9px; background:var(--accent-bright); border-radius:50%; opacity:0; }
body.study-framed-page .pi-cables div.is-on i { animation:pi-signal-travel .52s ease-out both; }
body.study-framed-page .pi-cables div::after { content:""; position:absolute; right:0; width:9px; height:9px; background:var(--border-strong); border-radius:50%; }
body.study-framed-page .pi-cables div.is-on { color:var(--bg); background:var(--good); } body.study-framed-page .pi-cables div.is-on::after { background:var(--good); }
body.study-framed-page .pi-cables div.is-dormant { color:var(--warn); border-top:2px dashed var(--warn); background:transparent; }
body.study-framed-page .pi-ca-wave { position:absolute; inset:16% 12%; pointer-events:none; }
body.study-framed-page .pi-ca-wave i { position:absolute; left:calc(8% + var(--i) * 19%); bottom:6px; width:8px; height:8px; background:var(--accent); border-radius:50%; opacity:0; }
body.study-framed-page .pi-ca-wave.is-on i { animation:pi-tcell-ca .62s ease-out both; animation-delay:calc(var(--i) * 55ms); }
body.study-framed-page .pi-transcription { position:absolute; left:23%; right:23%; bottom:23%; height:24px; opacity:0; }
body.study-framed-page .pi-transcription i { position:absolute; left:0; right:0; height:2px; background:var(--good); transform-origin:left; }
body.study-framed-page .pi-transcription i:nth-child(2) { top:8px; }
body.study-framed-page .pi-transcription em { position:absolute; right:0; top:12px; color:var(--good); font:700 6px/1 monospace; font-style:normal; }
body.study-framed-page .pi-transcription.is-on { animation:pi-transcription-on .7s ease-out both; }
@keyframes pi-ligand-cross { from{opacity:.2;transform:translateX(0)} to{opacity:1;transform:translateX(34px)} }
@keyframes pi-signal-travel { 0%{left:0;opacity:0}18%{opacity:1}100%{left:calc(100% - 9px);opacity:1} }
@keyframes pi-tcell-ca { 0%{opacity:0;transform:translateY(28px)}28%{opacity:1}100%{opacity:.35;transform:translateY(-30px)} }
@keyframes pi-transcription-on { from{opacity:0;transform:translateX(-28px) scaleX(.2)} to{opacity:1;transform:translateX(0) scaleX(1)} }
body.study-framed-page .pi-signal-zones { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
body.study-framed-page .pi-fate-board { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(150px,.65fr); gap:8px; }
body.study-framed-page .pi-fate-chain { position:relative; display:grid; grid-template-columns:minmax(100px,.8fr) minmax(110px,1fr) minmax(100px,.8fr); align-items:center; gap:8px; padding:10px; background:var(--pi-surface-2); border:1px solid var(--border); border-radius:var(--r-control); }
body.study-framed-page .pi-cytokine-flight { position:absolute; z-index:3; left:24%; top:46%; width:27%; height:20px; pointer-events:none; }
body.study-framed-page .pi-cytokine-flight i { position:absolute; left:0; top:calc(var(--i) * 6px); width:6px; height:6px; background:var(--accent); border-radius:50%; opacity:0; }
body.study-framed-page .pi-fate-chain.has-cue .pi-cytokine-flight i { animation:pi-cytokine-flight .55s ease-out both; animation-delay:calc(var(--i) * 55ms); }
body.study-framed-page .pi-subset { min-height:132px; display:grid; place-items:center; align-content:center; gap:5px; text-align:center; }
body.study-framed-page .pi-subset i { width:82px; height:82px; display:block; background:color-mix(in srgb,var(--accent) 10%,var(--panel)); border:4px solid var(--accent); border-radius:50%; }
body.study-framed-page .pi-subset-th1 i { border-radius:45% 55% 42% 58%; } body.study-framed-page .pi-subset-th2 i { border-style:double; } body.study-framed-page .pi-subset-th17 i { border-radius:30% 70% 65% 35%; } body.study-framed-page .pi-subset-treg i { border-color:var(--good); border-radius:14px; }
body.study-framed-page .pi-subset b { font:750 9px/1 monospace; }
body.study-framed-page .pi-subset span { color:var(--pi-muted); font-size:8px; line-height:1.3; }
body.study-framed-page .pi-antibody-scene { position:relative; overflow:hidden; display:grid; place-items:center; align-content:center; grid-template-columns:repeat(2,42px); gap:8px; padding:10px; background:var(--pi-surface-2); border:1px solid var(--border); border-radius:var(--r-control); opacity:.35; }
body.study-framed-page .pi-antibody-scene.is-on { opacity:1; }
body.study-framed-page .pi-bcell { grid-column:1/-1; width:62px; height:62px; display:grid; place-items:center; background:var(--panel); border:3px solid var(--good); border-radius:50%; font:750 12px/1 monospace; }
body.study-framed-page .pi-y { color:var(--accent-bright); font:750 36px/1 monospace; }
body.study-framed-page .pi-antibody-scene > span { grid-column:1/-1; color:var(--pi-muted); font-size:8px; line-height:1.3; text-align:center; }
body.study-framed-page .pi-antibody-stream { position:absolute; inset:0; pointer-events:none; }
body.study-framed-page .pi-antibody-stream i { position:absolute; left:42%; top:46%; color:var(--accent-bright); font:750 15px/1 monospace; font-style:normal; opacity:0; }
body.study-framed-page .pi-antibody-scene.is-on .pi-antibody-stream i { animation:pi-antibody-secrete .62s ease-out both; }
body.study-framed-page .pi-antibody-stream i:nth-child(2) { --dx:38px;--dy:-30px;animation-delay:55ms!important } body.study-framed-page .pi-antibody-stream i:nth-child(3) { --dx:-38px;--dy:32px;animation-delay:110ms!important }
@keyframes pi-cytokine-flight { from{opacity:0;transform:translateX(0)} to{opacity:1;transform:translateX(54px)} }
@keyframes pi-antibody-secrete { 0%{opacity:0;transform:translate(0)}25%{opacity:1}100%{opacity:1;transform:translate(var(--dx,32px),var(--dy,-32px))} }
body.study-framed-page .pi-complement { position:relative; display:grid; grid-template-columns:76px minmax(80px,.45fr) minmax(0,1.4fr); grid-template-rows:minmax(0,1fr) auto; align-items:center; gap:8px; }
body.study-framed-page .pi-complement-source { width:70px; height:70px; display:grid; place-items:center; align-content:center; gap:3px; color:var(--bg); background:var(--accent); border-radius:50%; font:750 15px/1 monospace; }
body.study-framed-page .pi-complement-source span { font:700 6px/1 monospace; }
body.study-framed-page .pi-branch-ghost { position:absolute; z-index:0; left:76px; right:0; top:27%; bottom:25%; display:grid; gap:32px; opacity:.25; pointer-events:none; }
body.study-framed-page .pi-branch-ghost i { height:0; border-top:2px dashed var(--pi-muted); }
body.study-framed-page .pi-branch-lines { position:relative; z-index:1; display:grid; gap:32px; }
body.study-framed-page .pi-branch-lines i { height:3px; display:block; background:var(--accent); transform-origin:left; }
body.study-framed-page .pi-branch-lines i:first-child { transform:rotate(-18deg); } body.study-framed-page .pi-branch-lines i:last-child { transform:rotate(18deg); }
body.study-framed-page .pi-branch-lines.is-cut i { background:var(--bad); opacity:.25; }
body.study-framed-page .pi-cascade-particles { position:absolute; inset:-8px 0; pointer-events:none; }
body.study-framed-page .pi-cascade-particles b { position:absolute; left:0; top:calc(var(--i) * 15%); width:7px; height:7px; background:var(--accent-bright); border-radius:50%; opacity:0; }
body.study-framed-page .branch-all-active .pi-cascade-particles b,
body.study-framed-page .branch-mac-only-lost .pi-cascade-particles b { animation:pi-cascade-run .62s ease-out both; animation-delay:calc(var(--i) * 45ms); }
body.study-framed-page .pi-complement-outputs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
body.study-framed-page .pi-complement-outputs > div { position:relative; overflow:hidden; min-height:132px; display:grid; place-items:center; align-content:center; gap:6px; padding:7px; background:var(--pi-surface-2); border:1px solid var(--border); border-radius:var(--r-control); text-align:center; }
body.study-framed-page .pi-complement-outputs > div.is-off { opacity:.3; border-style:dashed; }
body.study-framed-page .pi-complement-outputs b { font:750 10px/1 monospace; }
body.study-framed-page .pi-complement-outputs span { color:var(--pi-muted); font-size:8px; line-height:1.3; }
body.study-framed-page .pi-complement-outputs i { color:var(--accent-bright); font:750 28px/1 monospace; font-style:normal; }
body.study-framed-page .pi-complement-outputs > div.is-cascading { animation:pi-output-light .52s ease-out both; }
body.study-framed-page .pi-mac-pore { position:absolute; width:44px; height:44px; border:7px solid var(--bad); border-radius:50%; opacity:0; }
body.study-framed-page .pi-complement-outputs > div.is-cascading .pi-mac-pore { animation:pi-mac-build .68s ease-out both; }
@keyframes pi-cascade-run { 0%{left:0;opacity:0}18%{opacity:1}100%{left:calc(100% - 7px);opacity:1} }
@keyframes pi-output-light { from{background:var(--pi-surface-2);transform:translateX(-24px)} to{background:color-mix(in srgb,var(--accent) 8%,var(--pi-surface-2));transform:translateX(0)} }
@keyframes pi-mac-build { from{opacity:0;scale:.25;border-style:dashed} to{opacity:.78;scale:1;border-style:solid} }
body.study-framed-page .pi-complement > .pi-drop { grid-column:1/-1; }
body.study-framed-page .pi-mode-switch { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-top:9px; }
body.study-framed-page .pi-mode-switch button { min-height:44px; padding:6px; color:var(--pi-dim); background:var(--panel); border:1px solid var(--border); border-radius:var(--r-control); cursor:pointer; font:700 8px/1.2 monospace; }
body.study-framed-page .pi-mode-switch button[aria-pressed="true"] { color:var(--bg); background:var(--accent); border-color:var(--accent); }
body.study-framed-page .pi-transplant { position:relative; display:grid; grid-template-columns:minmax(135px,1fr) minmax(90px,.55fr) minmax(135px,1fr); align-items:center; gap:10px; }
body.study-framed-page .pi-transplant-ghost { position:absolute; left:35%; right:35%; top:8px; color:var(--pi-muted); border-bottom:2px dashed var(--pi-muted); padding-bottom:4px; font:700 6.5px/1 monospace; text-align:center; opacity:.42; }
body.study-framed-page .pi-host,
body.study-framed-page .pi-graft { display:grid; justify-items:center; gap:6px; text-align:center; }
body.study-framed-page .pi-host > i { width:74px; height:108px; display:block; background:var(--panel); border:4px solid var(--accent); border-radius:36px 36px 16px 16px; }
body.study-framed-page .pi-graft > i { width:92px; height:70px; display:block; background:var(--panel); border:4px solid var(--good); border-radius:55% 45% 45% 55%; transform:rotate(-12deg); }
body.study-framed-page .pi-transplant.is-attacking.is-rejection .pi-graft > i,
body.study-framed-page .pi-transplant.is-attacking.is-gvhd .pi-host > i { animation:pi-tissue-impact .62s ease-out both; border-color:var(--bad); }
body.study-framed-page .pi-host b,
body.study-framed-page .pi-graft b { font:750 9px/1 monospace; }
body.study-framed-page .pi-host span,
body.study-framed-page .pi-graft span { color:var(--pi-muted); font-size:8px; }
body.study-framed-page .pi-host .pi-drop,
body.study-framed-page .pi-graft .pi-drop { width:100%; }
body.study-framed-page .pi-arrow { display:grid; place-items:center; gap:8px; color:var(--pi-muted); }
body.study-framed-page .pi-arrow { position:relative; }
body.study-framed-page .pi-arrow i { position:relative; width:100%; height:4px; display:block; background:var(--border-strong); }
body.study-framed-page .pi-arrow i::after { content:""; position:absolute; right:-1px; top:50%; border:7px solid transparent; border-left-color:var(--border-strong); transform:translateY(-50%); }
body.study-framed-page .pi-arrow.is-on i { background:var(--bad); } body.study-framed-page .pi-arrow.is-on i::after { border-left-color:var(--bad); }
body.study-framed-page .pi-arrow.is-reverse i { transform:rotate(180deg); }
body.study-framed-page .pi-arrow b { font:700 7px/1.2 monospace; text-align:center; }
body.study-framed-page .pi-attack-cell { position:absolute; left:0; top:39%; color:var(--bad); font:800 14px/1 monospace; opacity:0; }
body.study-framed-page .pi-impact { position:absolute; right:-5px; top:33%; color:var(--bad); font:800 19px/1 monospace; font-style:normal; opacity:0; }
body.study-framed-page .pi-arrow.is-on .pi-attack-cell { animation:pi-attack-forward .68s ease-out both; }
body.study-framed-page .pi-arrow.is-on.is-reverse .pi-attack-cell { animation-name:pi-attack-reverse; }
body.study-framed-page .pi-arrow.is-on .pi-impact { animation:pi-impact-flash .34s .52s ease-out both; }
body.study-framed-page .pi-arrow.is-on.is-reverse .pi-impact { right:auto; left:-5px; }
@keyframes pi-attack-forward { 0%{left:0;opacity:0}18%{opacity:1}100%{left:calc(100% - 14px);opacity:1} }
@keyframes pi-attack-reverse { 0%{left:calc(100% - 14px);opacity:0}18%{opacity:1}100%{left:0;opacity:1} }
@keyframes pi-impact-flash { from{opacity:0;scale:.3}50%{opacity:1;scale:1.45}to{opacity:1;scale:1} }
@keyframes pi-tissue-impact { from{transform:translateX(0);background:var(--panel)}35%{transform:translateX(13px);background:color-mix(in srgb,var(--bad) 24%,var(--panel))}100%{transform:translateX(0);background:color-mix(in srgb,var(--bad) 12%,var(--panel))} }

body.study-framed-page .pi-foot { grid-template-columns:minmax(0,1fr) auto; }
body.study-framed-page .pi-feedback { min-width:0; margin:0; color:var(--pi-dim); font-size:10px; line-height:1.35; }
body.study-framed-page .pi-feedback.good { color:var(--good); }
body.study-framed-page .pi-feedback.bad { color:var(--bad); }
body.study-framed-page .pi-feedback.info { color:var(--accent-bright); }
body.study-framed-page .pi-foot-actions { display:flex; align-items:center; gap:9px; }
body.study-framed-page .pi-next { min-height:32px; padding:5px 9px; color:var(--bg); background:var(--accent); border:1px solid var(--accent); border-radius:var(--r-control); cursor:pointer; font-size:9px; font-weight:750; }

@media (max-width:1100px) {
  body.study-framed-page .pi-steps li b { display:none; }
  body.study-framed-page .pi-workbench { grid-template-columns:minmax(180px,.55fr) minmax(0,1.7fr); }
  body.study-framed-page .pi-token span { font-size:9px; }
  body.study-framed-page .pi-cycle-ring { width:108px; height:108px; }
}
@media (max-width:760px), (pointer:coarse) {
  body.study-framed-page .pi-head { grid-template-columns:1fr; }
  body.study-framed-page .pi-steps { justify-content:flex-start; }
  body.study-framed-page .pi-steps li { min-height:44px; }
  body.study-framed-page .pi-steps button { width:100%; min-height:44px; justify-content:center; padding:5px; }
  body.study-framed-page .pi-steps li span { width:32px; height:32px; font-size:11px; }
  body.study-framed-page .pi-workbench { height:auto; grid-template-columns:1fr; }
  body.study-framed-page .pi-palette { overflow:visible; }
  body.study-framed-page .pi-palette h4 { font-size:15px; }
  body.study-framed-page .pi-palette > p:not(.pi-kicker) { font-size:12px; }
  body.study-framed-page .pi-token-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.study-framed-page .pi-token,
  body.study-framed-page .pi-drop,
  body.study-framed-page .pi-next { min-height:44px; }
  body.study-framed-page .pi-range input { min-height:44px; }
  body.study-framed-page .pi-token span,
  body.study-framed-page .pi-drop span { font-size:11px; }
  body.study-framed-page .pi-token small,
  body.study-framed-page .pi-drop small { font-size:10px; }
  body.study-framed-page .pi-stage { height:auto; min-height:420px; overflow:visible; }
  body.study-framed-page .pi-stage-head { grid-template-columns:1fr; }
  body.study-framed-page .pi-stage-head output { max-width:none; text-align:left; }
  body.study-framed-page .pi-nephron,
  body.study-framed-page .pi-airway-board,
  body.study-framed-page .pi-stomach,
  body.study-framed-page .pi-gnrh,
  body.study-framed-page .pi-access-route,
  body.study-framed-page .pi-chemo-board,
  body.study-framed-page .pi-clot,
  body.study-framed-page .pi-signal-board,
  body.study-framed-page .pi-fate-board,
  body.study-framed-page .pi-complement,
  body.study-framed-page .pi-transplant { height:auto; min-height:350px; }
  body.study-framed-page .pi-nephron { grid-template-rows:145px auto auto; }
  body.study-framed-page .pi-nephron-zones,
  body.study-framed-page .pi-route-nodes,
  body.study-framed-page .pi-clot-nodes,
  body.study-framed-page .pi-signal-zones { grid-template-columns:1fr; }
  body.study-framed-page .pi-airway-board,
  body.study-framed-page .pi-stomach,
  body.study-framed-page .pi-gnrh,
  body.study-framed-page .pi-chemo-board,
  body.study-framed-page .pi-fate-board { grid-template-columns:1fr; grid-template-rows:auto auto auto; }
  body.study-framed-page .pi-airway-visual,
  body.study-framed-page .pi-gastric-scene,
  body.study-framed-page .pi-gnrh > svg { min-height:210px; }
  body.study-framed-page .pi-airway-board .pi-readouts,
  body.study-framed-page .pi-stomach .pi-readouts,
  body.study-framed-page .pi-gnrh .pi-readouts,
  body.study-framed-page .pi-chemo-board .pi-readouts { grid-column:1; }
  body.study-framed-page .pi-airway-board .pi-axis-zones,
  body.study-framed-page .pi-stomach .pi-axis-zones { grid-template-columns:1fr 1fr; }
  body.study-framed-page .pi-receptor-bank { min-height:135px; }
  body.study-framed-page .pi-bacterium { min-height:300px; padding:14px; }
  body.study-framed-page .pi-route-nodes { gap:4px; }
  body.study-framed-page .pi-molecule-flow { margin:10px 6%; }
  body.study-framed-page .pi-cell-cycle,
  body.study-framed-page .pi-rescue-socket { min-height:220px; }
  body.study-framed-page .pi-clot-scene { min-height:210px; }
  body.study-framed-page .pi-signal-board { grid-template-columns:92px minmax(70px,.4fr) minmax(110px,.7fr); grid-template-rows:180px auto; }
  body.study-framed-page .pi-apc,
  body.study-framed-page .pi-tcell { min-height:130px; }
  body.study-framed-page .pi-fate-chain { grid-template-columns:1fr; }
  body.study-framed-page .pi-subset { min-height:120px; }
  body.study-framed-page .pi-complement { grid-template-columns:60px 58px minmax(0,1fr); }
  body.study-framed-page .pi-complement-source { width:56px; height:56px; }
  body.study-framed-page .pi-complement-outputs { grid-template-columns:1fr; }
  body.study-framed-page .pi-complement-outputs > div { min-height:82px; grid-template-columns:50px 1fr 34px; text-align:left; }
  body.study-framed-page .pi-transplant { grid-template-columns:1fr; }
  body.study-framed-page .pi-arrow { min-height:52px; }
  body.study-framed-page .pi-arrow i { width:60%; transform:rotate(90deg); }
  body.study-framed-page .pi-arrow.is-reverse i { transform:rotate(-90deg); }
  body.study-framed-page .pi-foot { grid-template-columns:1fr; }
  body.study-framed-page .pi-feedback { font-size:12px; }
  body.study-framed-page .pi-foot-actions { flex-direction:column; align-items:stretch; }
  body.study-framed-page .pi-next { font-size:12px; }
}
@media (max-width:430px) {
  body.study-framed-page .pi-steps { width:100%; }
  body.study-framed-page .pi-steps li { flex:1; justify-content:center; }
  body.study-framed-page .pi-token-grid { grid-template-columns:1fr 1fr; }
  body.study-framed-page .pi-readouts { grid-template-columns:1fr; }
  body.study-framed-page .pi-axis-zones,
  body.study-framed-page .pi-airway-board .pi-axis-zones,
  body.study-framed-page .pi-stomach .pi-axis-zones { grid-template-columns:1fr; }
  body.study-framed-page .pi-signal-board { grid-template-columns:76px 54px minmax(96px,1fr); }
  body.study-framed-page .pi-complement { grid-template-columns:52px 44px minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce) { body.study-framed-page .pharm-immune * { animation:none!important; transition:none!important; } }
@media print {
  body.study-framed-page .pharm-immune { break-inside:avoid; }
  body.study-framed-page .pi-token,
  body.study-framed-page .pi-next { display:none; }
}