/* Keep the explanation legible beside the anatomical context. */
.reference-experience>.anchored-scene{aspect-ratio:auto!important;height:600px!important;min-height:600px!important}
.reference-experience #story-scene,.reference-experience #three-structure{display:none!important}
.reference-experience>.story-caption{position:relative!important;inset:auto!important;max-height:none!important;min-height:0!important;padding:20px 24px!important;border-top:1px solid #476673;background:#102633}
.reference-experience>.story-caption h3{font-size:16px!important;color:#a9d9d2!important}
.reference-experience>.story-caption #story-caption{font-size:18px!important;line-height:1.65!important;max-width:75ch}
.reference-experience>.three-heading{max-width:40%;background:none!important;padding:16px!important}
.reference-experience>.three-heading strong{font-size:16px!important}
#ibuprofen-reference-panel{position:absolute;z-index:3;inset:0 0 0 60%;padding:25px 26px 16px;background:linear-gradient(110deg,#0b1d2aee,#102c3b);border-left:1px solid #345666;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;pointer-events:none}
#ibuprofen-reference-panel .reference-location{margin:0 0 8px;color:#9ed5d2;font-size:14px;line-height:1.4}
#ibuprofen-reference-panel h3{margin:0 0 22px;font-size:24px;line-height:1.25;font-weight:500;color:#f1f7f9}
.reference-steps{padding:0;margin:0;list-style:none;display:grid;gap:10px}
.reference-steps li{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid #456271;border-radius:6px;font-size:17px;line-height:1.4;color:#dce9ee;background:#102531}
.reference-step-number{font-size:14px;color:#a1bbc5;font-variant-numeric:tabular-nums}
.reference-steps li.is-current{border-color:#b7e5da;background:#20454b;color:#fff}
.reference-sequence li+li{position:relative}.reference-sequence li+li:before{content:'↓';position:absolute;left:24px;top:-18px;color:#a7cccf;font-size:15px}
.reference-limit{font-size:14px!important;color:#c5d8df;line-height:1.5!important;margin:16px 0 0!important}
.reference-scale{font-size:13px!important;color:#9cb7c3;margin:8px 0 0!important}
.reference-takeaway{font-size:18px!important;color:#b7e5da;line-height:1.4!important;margin:14px 0 0!important}.reference-takeaway small{font-size:14px;color:#c5d8df}
.reference-pathway{display:flex;flex-direction:column;align-items:stretch;text-align:center;gap:2px}
.reference-pathway-node{padding:9px 12px;border:1px solid #547684;border-radius:5px;font-size:16px;line-height:1.4;background:#12313d;color:#e5f0f3}
.reference-arrow{font-size:18px;color:#b7d3d9;line-height:1}.reference-cox{position:relative;border-color:#a6d6d7;color:#b7e5da}
.reference-inhibitor{display:block;color:#ffcd94;margin-top:6px;visibility:hidden;font-size:15px}.reference-inhibitor b{display:inline-block;margin-left:6px}.reference-pathway:is([data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"]) .reference-inhibitor{visibility:visible}.reference-pathway:is([data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"]) .reference-outcome{border-color:#b7e5da}
.reference-experience #story-body-fallback{object-fit:contain!important;object-position:left center;width:60%!important;height:100%!important}
@media(max-width:700px){
 .reference-experience>.anchored-scene{height:800px!important;min-height:800px!important}
 .reference-experience>.three-heading{max-width:70%;padding:12px!important}
 #ibuprofen-reference-panel{inset:320px 0 0;padding:20px 20px 16px;border-left:0;border-top:1px solid #345666}
 #ibuprofen-reference-panel h3{font-size:22px;margin-bottom:15px}
 .reference-experience>.story-caption{padding:16px 18px!important}
 .reference-experience>.story-caption #story-caption{font-size:17px!important}
 .reference-steps li{font-size:17px;padding:10px 12px}
 .reference-experience #story-body-fallback{width:100%!important;height:320px!important;object-position:center!important}
}
@media(prefers-reduced-motion:reduce){#ibuprofen-reference-panel *{animation:none!important;transition:none!important}}

.reference-arrow small{font-size:12px;color:#bdd1db}.reference-dose small{display:block;line-height:1.55;margin-top:4px}.reference-flow{height:3px;background:#3e6975;margin:16px 14px 0;position:relative}.reference-flow:after{content:'›';position:absolute;right:-5px;top:-11px;font-size:22px;color:#b6d8dc}.reference-flow-marker{position:absolute;top:-4px;width:11px;height:11px;border-radius:50%;background:#ffd29b;left:0}.reference-flow-marker{animation:reference-transit var(--reference-duration,5s) cubic-bezier(.4,0,.2,1) both paused}#ibuprofen-reference-panel[data-playing="true"] .reference-flow-marker{animation-play-state:running}#ibuprofen-reference-panel[data-complete="true"] .reference-flow-marker,#ibuprofen-reference-panel[data-motion="false"] .reference-flow-marker{animation:none;left:100%}@keyframes reference-transit{0%,12%{left:0}75%,100%{left:100%}}

.reference-warning small{display:block;font-size:14px;line-height:1.5;color:#e3edf0;margin-top:5px}

/* Detailed scientist pathway: the figure replaces the anatomical placeholder and reveals with the spoken sentence. */
#ibuprofen-reference-panel[data-profile="scientist"][data-scene="mechanism"]{inset:0;border-left:0;padding:16px 26px 12px;justify-content:flex-start;overflow:auto;pointer-events:auto}
.scientist-pathway{margin:0;width:100%;min-width:0}
.scientist-pathway figcaption{font-size:15px;color:#9ed5d2;margin:0 0 4px}
.scientist-pathway svg{display:block;width:100%;max-height:330px;overflow:visible}
.scientist-pathway svg rect{fill:#12313d;stroke:#638792;stroke-width:2}
.scientist-pathway svg path:not([marker-end]){fill:none}
.scientist-pathway svg [marker-end]{fill:none;stroke:#a9cbd3;stroke-width:2.4}
.scientist-pathway svg text{fill:#e5f0f3;text-anchor:middle;font-family:system-ui,sans-serif}
.scientist-pathway svg .path-title{font-size:19px;font-weight:600}
.scientist-pathway svg .path-small{font-size:15px}
.scientist-pathway svg .path-note{font-size:13px;fill:#b5cbd2}
.scientist-pathway svg .drug-box{fill:#433322;stroke:#e2ae69}
.scientist-pathway svg .inhibit-line{stroke:#ffc985;stroke-width:2.5;fill:none}
.scientist-pathway svg .signal-box{fill:#193c43;stroke:#a1d8cb}
.path-reveal{opacity:0;transition:opacity .35s ease}
.path-intermediates{opacity:0}
.scientist-pathway[data-beat="0"][data-phase="1"] .path-intermediates,.scientist-pathway:is([data-beat="1"],[data-beat="2"],[data-beat="3"]) .path-intermediates{opacity:1}
.scientist-pathway[data-beat="1"] .path-branches,.scientist-pathway[data-beat="2"] .path-branches,.scientist-pathway[data-beat="3"] .path-branches{opacity:1}
.scientist-pathway[data-beat="2"] .path-inhibition,.scientist-pathway[data-beat="3"] .path-inhibition{opacity:1}
.scientist-pathway[data-beat="3"] .path-signaling{opacity:1}
.scientist-pathway-caption,.pathway-sources{font-size:12px!important;line-height:1.35!important;color:#b9cdd4;margin:3px 0 6px!important}
.pathway-sources a,.assay-inset a{color:#a9ddd5;text-decoration:underline;text-underline-offset:2px}
.assay-inset{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:8px 10px;margin-top:2px;border-left:3px solid #d6ad70;background:#1d2c35;color:#dae5e9;font-size:11px;line-height:1.35}
.assay-inset strong{color:#f0d3a3;font-size:12px}
@media(max-width:700px){#ibuprofen-reference-panel[data-profile="scientist"][data-scene="mechanism"]{inset:0;padding:12px 14px 10px}.scientist-pathway{overflow-x:auto}.scientist-pathway svg{width:760px;max-width:none;max-height:none}.assay-inset{grid-template-columns:1fr;gap:3px}.scientist-pathway-caption,.pathway-sources{font-size:12px!important}}
@media(prefers-reduced-motion:reduce){.path-reveal{transition:none}}

.reference-warning-card,.reference-dose-card{border:1px solid #789a9f;background:#17353e;padding:18px;border-radius:7px;font-size:17px;line-height:1.5}.reference-warning-card strong,.reference-dose-card strong{color:#ffe0b7;font-weight:500;font-size:19px}.reference-warning-card ul{padding-left:22px;margin:12px 0 0}.reference-warning-card li{margin:8px 0}.reference-dose-card p{font-size:16px!important;line-height:1.5!important;margin:12px 0 0!important}
@media(max-width:700px){.reference-experience>.anchored-scene:has([data-scene="mechanism"]){height:900px!important;min-height:900px!important}.reference-experience>.anchored-scene:has([data-scene="dose"]),.reference-experience>.anchored-scene:has([data-scene="warning"]){height:890px!important;min-height:890px!important}}

/* A generous world view, with a quiet chapter brief alongside it. */
.story-screen.reference-experience{max-width:1120px!important}.reference-experience>.three-heading{max-width:55%}.reference-pathway-node{font-size:15px}.reference-steps li{background:transparent;border-color:#345563;border-radius:3px}.reference-steps li.is-current{background:#193e47;border-color:#9ad7cd}.reference-location{letter-spacing:.08em;text-transform:uppercase;font-size:11px!important}.reference-chapter{color:#819fab;font-size:11px!important;letter-spacing:.13em;margin:0 0 12px!important}.reference-experience .reference-scale{font-size:11px!important}.reference-experience>.anchored-scene{background:#081720}

.reference-experience>.three-heading{max-width:none;width:60%;box-sizing:border-box}.reference-experience #three-scale{max-width:calc(100% - 24px)}
@media(max-width:700px){.reference-experience>.three-heading{width:100%}}

/* Profile briefs retain legible language and evidence context at every width. */
.reference-draft{font-size:14px!important;line-height:1.45!important;padding:10px 12px;border-left:2px solid #e1bc81;background:#2b3030;color:#f1d7ad;margin:0 0 14px!important}
.reference-experience.reference-structure #three-structure{display:block!important;left:0;top:90px;width:60%;height:360px;background:#102633;z-index:2}
.reference-experience.reference-structure #three-structure svg{width:100%;height:100%}
.reference-location,.reference-chapter,.reference-experience .reference-scale{font-size:13px!important}
@media(max-width:700px){.reference-experience.reference-structure #three-structure{top:70px;width:100%;height:245px}.reference-experience>.anchored-scene:has(.reference-draft){height:960px!important;min-height:960px!important}}

.reference-experience.reference-structure #story-body canvas{visibility:hidden}

/* Keep the live pathway cue available to assistive technology without adding visual clutter. */
.pathway-accessible-cue{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}