/* One media frame: scene, captions, scrubber and transport. */
.story-screen {overflow:hidden!important;border:1px solid #345665!important;border-radius:18px!important;background:#081a25!important;box-shadow:0 16px 48px #03111b24}
.story-perspective-again{margin:10px 0!important;padding:8px 0!important;background:transparent!important}
.media-chrome{position:relative;z-index:8;padding:12px 20px 16px;background:#07151f;color:#edf6fa;border-top:1px solid #28414d}
.media-chrome .story-seek-label{display:flex;justify-content:space-between;gap:16px;font-size:12px;color:#aec7d2;margin:0 0 5px}
.media-chrome .story-seek{display:block;width:100%;height:24px;margin:0;accent-color:#50d2bd;cursor:pointer}
.media-chrome .story-controls{display:flex;align-items:center;gap:8px;margin:6px 0 0!important;padding:0!important;border:0!important;background:transparent!important}
.media-chrome button{min-height:40px;border:1px solid #426170;background:#14303e;color:#fff;border-radius:8px;padding:8px 14px}
.media-chrome button:hover{background:#254d5d}.media-chrome button:focus-visible,.media-chrome input:focus-visible{outline:3px solid #86ecdb;outline-offset:3px}
.media-chrome #story-focus{margin-left:auto}
.story-screen.reference-experience>.story-caption{background:#102633!important;color:#fff!important;margin:0!important;border:0!important;padding:16px 24px!important;min-height:115px}
.story-screen .story-caption p,.story-screen .story-caption h3{color:inherit}
.story-screen .story-caption #story-caption{font-size:18px;line-height:1.65}
.story-screen .story-caption #story-title,.story-screen .story-caption #sentence-cue{display:none}
.story-screen .story-caption #sentence-position{color:#a9c4d0;font-size:12px;margin:8px 0 0}
.story-screen.concept-scene>.anchored-scene{height:520px!important;background:radial-gradient(ellipse at top,#193b4d,#091d2b)!important}
.concept-scene #story-body,.concept-scene #story-scene,.concept-scene #three-structure{visibility:hidden!important;pointer-events:none}
.concept-scene #ibuprofen-reference-panel{inset:0!important;width:100%!important;padding:28px 42px!important;max-width:none!important;box-sizing:border-box;align-items:stretch;background:transparent!important;display:flex;justify-content:center}
.concept-scene .reference-chapter{color:#7bcfc6;letter-spacing:.16em;font-size:11px;margin:0 0 10px}
.concept-scene .reference-location{font-size:12px;color:#b0c5cd;margin:0 0 6px}
.concept-scene #ibuprofen-reference-panel h3{font-size:28px;line-height:1.25;margin:0 0 22px;color:#fff;max-width:850px}
.concept-scene .reference-steps{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0 0 20px;padding:0}
.concept-scene .reference-steps li{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-height:125px;padding:20px!important;background:#102d3f;border:1px solid #365465!important;border-radius:12px;transition:border-color .15s,background .15s;font-size:20px!important;line-height:1.4}
.concept-scene .reference-steps li.is-current{background:#15494b!important;border:2px solid #73dcc6!important;box-shadow:0 0 0 3px #72dcc617}
.concept-scene .reference-step-number{color:#8bd9ce;font-size:13px}
.concept-scene .reference-limit{font-size:14px;line-height:1.5;max-width:850px;color:#bed0d8;margin:10px 0}
.concept-scene .reference-scale{font-size:11px;color:#88a7b6}.concept-scene .reference-flow{display:none}
.concept-scene .reference-pathway{display:flex;align-items:center;gap:12px;padding:12px 0;margin:0 0 14px}
.concept-scene .reference-pathway-node{flex:1;min-width:0;padding:22px 13px;min-height:100px;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:17px;text-align:center;border-radius:12px;background:#173749;border:1px solid #48707e}
.concept-scene .reference-arrow{transform:rotate(-90deg);flex:none}.concept-scene .reference-arrow small{display:none}
.concept-scene .reference-inhibitor{position:static!important;margin-top:10px;color:#83f0d1;font-size:14px}
.reference-pathway[data-stage="0"] .reference-inhibitor,.reference-pathway[data-stage="1"] .reference-inhibitor,.reference-pathway[data-stage="2"] .reference-inhibitor{visibility:hidden}
.concept-scene .reference-takeaway{font-size:17px;line-height:1.5;margin:6px 0;color:#93e5d1}
.concept-scene .reference-warning-card,.concept-scene .reference-dose-card{max-width:850px;margin:0;font-size:16px}
.reference-draft{font-size:12px!important;margin:0 0 14px!important}
@media(max-width:700px){
 .media-chrome{padding:10px 12px}.media-chrome .story-controls{gap:5px;flex-wrap:wrap}.media-chrome button{padding:8px 10px;font-size:12px}
 .media-chrome .story-seek-label{font-size:10px}.media-chrome .story-seek-label>span:first-child{max-width:120px}
 .story-screen.concept-scene>.anchored-scene{height:auto!important;min-height:0!important}
 .concept-scene #story-body{position:absolute!important}.concept-scene #ibuprofen-reference-panel{position:relative!important;padding:24px 18px!important;height:auto!important;min-height:450px}
 .concept-scene #ibuprofen-reference-panel h3{font-size:23px;margin-bottom:18px}
 .concept-scene .reference-steps{grid-template-columns:1fr;gap:8px;margin-bottom:10px}
 .concept-scene .reference-steps li{flex-direction:row;align-items:center;min-height:0;gap:14px;padding:13px!important;font-size:17px!important}
 .concept-scene .reference-pathway{flex-direction:column;gap:4px}.concept-scene .reference-pathway-node{width:100%;box-sizing:border-box;min-height:0;padding:12px;font-size:16px}
 .concept-scene .reference-arrow{transform:none;line-height:1}.concept-scene .reference-limit{font-size:13px}.story-screen .story-caption #story-caption{font-size:16px}
}
.story-screen.concept-scene>.three-heading{display:none!important}
.story-screen.concept-scene>.anchored-scene{min-height:0!important}
.concept-scene .reference-pathway{flex-direction:row}
.concept-scene .reference-sequence li+li:before{display:none}
@media(max-width:700px){.concept-scene .reference-pathway{flex-direction:column}}
.pathway-state{font-size:13px!important;color:#95e1d3!important;margin:0 0 12px!important}
@media(max-width:700px){
 .concept-scene .reference-pathway{display:grid;grid-template-columns:1fr 24px 1fr;grid-template-rows:auto 20px auto;gap:4px}
 .concept-scene .reference-pathway>:nth-child(1){grid-area:1/1}.concept-scene .reference-pathway>:nth-child(2){grid-area:1/2;transform:rotate(-90deg)}
 .concept-scene .reference-pathway>:nth-child(3){grid-area:1/3}.concept-scene .reference-pathway>:nth-child(4){grid-area:2/3}
 .concept-scene .reference-pathway>:nth-child(5){grid-area:3/3}.concept-scene .reference-pathway>:nth-child(6){grid-area:3/2;transform:rotate(90deg)}
 .concept-scene .reference-pathway>:nth-child(7){grid-area:3/1}
 .concept-scene .reference-pathway-node{font-size:14px;min-height:86px;height:100%}
}
/* Captions and transport are overlays inside the visual stage, including focus view. */
.story-screen .anchored-scene,.story-screen.reference-experience>.anchored-scene,.story-screen.concept-scene>.anchored-scene{position:relative!important;height:660px!important;min-height:660px!important;aspect-ratio:auto!important;overflow:hidden!important}
.story-screen .anchored-scene>.media-chrome{position:absolute!important;inset:auto 0 0!important;z-index:12;padding:10px 18px 14px;background:linear-gradient(#081b29ee,#07151f);border-top:1px solid #47626e}
.story-screen .anchored-scene>.story-caption{position:absolute!important;inset:auto 0 103px!important;z-index:10;max-height:130px!important;min-height:0!important;margin:0!important;padding:12px 22px!important;overflow:auto!important;background:#081c29f2!important;backdrop-filter:blur(6px);border:0!important}
.story-screen .anchored-scene>.story-caption #story-caption{font-size:17px!important;line-height:1.5!important;max-width:none!important}
.story-screen .anchored-scene>.story-caption #narration-timeline{display:none}
.story-screen.concept-scene #ibuprofen-reference-panel{position:absolute!important;inset:0 0 225px!important;height:auto!important;min-height:0!important;padding:22px 34px!important;overflow:auto!important;pointer-events:auto}
.story-screen.reference-experience:not(.concept-scene) #ibuprofen-reference-panel{bottom:225px;overflow:auto;justify-content:flex-start;pointer-events:auto}
.story-screen .media-chrome .story-seek-label{flex-wrap:nowrap;align-items:center;margin:0;font-size:12px}
.story-screen .media-chrome .story-seek{min-height:24px;height:24px;margin:0}
.story-screen .media-chrome .story-controls{flex-wrap:nowrap!important;margin:4px 0 0!important}
.story-screen .media-chrome button{white-space:nowrap}
@media(max-width:700px){
 .story-screen .anchored-scene,.story-screen.reference-experience>.anchored-scene,.story-screen.concept-scene>.anchored-scene{height:740px!important;min-height:740px!important}
 .story-screen.concept-scene #ibuprofen-reference-panel{inset:0 0 250px!important;padding:20px 16px!important}
 .story-screen.reference-experience:not(.concept-scene) #ibuprofen-reference-panel{top:320px;bottom:250px;padding:14px 16px;overflow:auto}
 .story-screen .anchored-scene>.story-caption{bottom:111px!important;max-height:140px!important;padding:12px 14px!important}
 .story-screen .anchored-scene>.story-caption #story-caption{font-size:16px!important}
 .story-screen .anchored-scene>.media-chrome{padding:10px 12px 14px}
 .story-screen .media-chrome button{font-size:12px;padding:7px 9px;min-width:0;white-space:normal;overflow-wrap:anywhere}
 .story-screen .media-chrome .story-seek-label{font-size:11px;gap:12px}
}
.story-screen .anchored-scene>.story-caption{bottom:var(--player-controls-height,111px)!important}
.story-screen.concept-scene #ibuprofen-reference-panel,.story-screen.reference-experience:not(.concept-scene) #ibuprofen-reference-panel{bottom:calc(var(--player-controls-height,111px) + 140px)!important}