.drug-explore { display:inline-flex; align-items:center; gap:.9rem; border:0; border-radius:2rem; margin-top:1.4rem; padding:.65rem 1rem; background:#edf4f7; color:#28586d; font:600 .875rem/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; cursor:pointer; }
.drug-explore>span { display:grid; place-items:center; width:1.5rem; height:1.5rem; border-radius:50%; background:#fff; font-size:1.3rem; font-weight:400; }
.drug-explore:hover { background:#dcecf1; }
.fibrosis-explorer { border:0; margin:0; padding:0; width:100%; height:100dvh; max-width:none; max-height:none; overflow:hidden; color:#25252b; background:#fff; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; }
.fibrosis-explorer[open] { display:flex; flex-direction:column; }
.fibrosis-explorer::backdrop { background:#fff; }
.fibrosis-explorer [hidden] { display:none!important; }
.fibrosis-explorer button,.fibrosis-explorer a { -webkit-tap-highlight-color:transparent; }
.fibrosis-explorer button:focus-visible,.fibrosis-explorer a:focus-visible,.fibrosis-explorer summary:focus-visible { outline:3px solid #2378cf; outline-offset:4px; }
.fx-healthy { --fx-tint:#edf7f7; --fx-accent:#346d78; }
.fx-fibrotic { --fx-tint:#fcf1ed; --fx-accent:#945242; }
.fx-model { --fx-tint:#f1eef9; --fx-accent:#67518d; }
.fx-response { --fx-tint:#edf6f1; --fx-accent:#2c6e5c; }
.fx-toolbar { flex:0 0 64px; display:flex; align-items:center; gap:1rem; padding:12px clamp(20px,3vw,48px); }
.fx-brand { display:flex; align-items:center; gap:20px; font-size:14px; margin-right:auto; }
.fx-brand strong { font-weight:600; }
.fx-brand>span { color:#61616c; border-left:1px solid #d2d2d7; padding-left:20px; }
.fx-close { display:grid; place-items:center; width:36px; height:36px; flex:0 0 36px; border:0; border-radius:50%; background:#ececee; color:#505055; font:300 27px/1 Arial,sans-serif; cursor:pointer; }
.fx-close:hover { background:#dfdfe3; }
.fx-back { border:0; background:none; padding:.5rem; color:#53535f; font-family:inherit; font-weight:500; font-size:.9375rem; line-height:1.3; cursor:pointer; }
.fx-navigation { width:100%; padding:0 clamp(20px,3vw,48px) 16px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; flex-shrink:0; border-bottom:1px solid #edf0f3; }
.fx-tab { display:flex; align-items:center; gap:.6rem; min-width:0; padding:0 1rem 0 .2rem; border:1px solid #e5e7eb; border-radius:15px; background:#f8f9fb; color:#4d5665; font:600 .9375rem/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; text-align:left; cursor:pointer; }
.fx-tab>img { width:105px; height:67px; object-fit:contain; }
.fx-tab[aria-pressed="true"] { background:var(--fx-tint); color:var(--fx-accent); border-color:var(--fx-accent); }
.fx-tab:hover { background:var(--fx-tint); }
.fx-scroll { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; padding:20px clamp(20px,3vw,48px) 30px; }
.fx-overview,.fx-detail { width:100%; max-width:1600px; margin:0 auto; }
.fx-overview>header { margin:1rem 0 2rem; }
.fx-eyebrow { margin:0 0 .65rem; color:#5b6472; font-size:.8125rem; font-weight:600; letter-spacing:.05em; }
.fx-overview h2 { font-family:inherit; font-size:clamp(2.8rem,4.6vw,4.6rem); font-weight:650; line-height:1.03; letter-spacing:-.045em; color:#202126; margin:0; }
.fx-overview h2 span { color:#747580; }
.fx-overview header>p:last-child { margin:1.15rem 0 0; font-size:1.1rem; color:#5b6472; }
.fx-card-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.fx-card { position:relative; min-width:0; min-height:340px; border:0; border-radius:24px; padding:25px; text-align:left; background:var(--fx-tint); color:#25252b; cursor:pointer; overflow:hidden; font-family:inherit; transition:translate .2s; }
.fx-card:hover { translate:0 -3px; }
.fx-card-label { display:block; }
.fx-card>.fx-card-label { position:absolute; top:25px; left:25px; right:25px; font-size:1.2rem; font-weight:600; }
.fx-card-teaser { position:absolute; top:60px; left:25px; right:25px; font-size:1.45rem; font-weight:650; line-height:1.2; letter-spacing:-.025em; max-width:13ch; }
.fx-card>img { position:absolute; width:110%; max-width:none; height:210px; object-fit:contain; left:-5%; bottom:32px; mix-blend-mode:multiply; }
.fx-card-plus { position:absolute; right:20px; bottom:18px; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--fx-accent); color:#fff; font-size:23px; line-height:1; font-weight:300; }
.fx-overview-note { margin:1.25rem 0 0; font-size:.875rem; color:#5b6472; }
.fx-detail-heading { margin:6px 0 22px; }
.fx-detail-heading .fx-eyebrow { color:var(--fx-accent); }
.fx-detail-heading h3 { margin:0; color:#24242b; font-family:inherit; font-size:clamp(2rem,3.2vw,3rem); line-height:1.08; letter-spacing:-.035em; font-weight:650; }
.fx-detail-heading>p:last-child { margin:.85rem 0 0; max-width:75ch; font-size:1.0625rem; color:#535e6e; }
.fx-detail-layout { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:24px; align-items:start; }
.fx-figure { position:sticky; top:0; margin:0; border-radius:24px; background:linear-gradient(145deg,var(--fx-tint),#fff); overflow:hidden; }
.fx-figure img { width:100%; height:auto; min-height:250px; object-fit:contain; mix-blend-mode:multiply; }
.fx-figure figcaption { padding:0 24px 22px; color:var(--fx-accent); font-size:.875rem; font-weight:550; }
.fx-setting-badge { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; padding:18px 22px 0; }
.fx-setting-badge>span { color:#5d5670; font-size:.75rem; }
.fx-setting-badge>strong { font-size:.8125rem; font-weight:600; color:#67518d; background:#fff; border:1px solid #d8cde9; border-radius:2rem; padding:.35rem .7rem; }
.fx-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.fx-fact { border-radius:18px; padding:22px 20px; background:var(--fx-tint); }
.fx-fact>p { color:var(--fx-accent); font-size:.75rem; line-height:1.4; font-weight:550; min-height:2.8em; margin:0 0 .75rem; }
.fx-fact h4 { margin:0 0 .75rem; color:#292b33; font:650 1.2rem/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; letter-spacing:-.025em; }
.fx-fact>div { color:#4b5566; font-size:.9375rem; line-height:1.55; }
.fx-cite { color:var(--fx-accent); font-size:.75rem; text-decoration:none; white-space:nowrap; }
.fx-cite:hover { text-decoration:underline; }
.fx-sources { margin:1.2rem 0 0; border-top:1px solid #e3e7ed; padding-top:1rem; font-size:.875rem; color:#455b73; }
.fx-sources summary { cursor:pointer; font-weight:550; }
.fx-sources ol { margin:1rem 0 0; padding:0; list-style:none; display:grid; gap:.65rem; }
.fx-sources li { display:flex; gap:1rem; align-items:baseline; flex-wrap:wrap; }
.fx-sources a { color:#345b81; text-decoration:none; }
.fx-sources a:hover { text-decoration:underline; }
.fx-sources li>span { color:#5b6472; font-size:.8125rem; }
.fx-next { display:inline-flex; align-items:center; gap:.8rem; padding:.65rem 0; margin-top:1rem; color:var(--fx-accent,#345b81); background:none; border:0; font-family:inherit; font-size:.9375rem; line-height:1.4; font-weight:600; text-align:left; cursor:pointer; }
.fx-next:hover { text-decoration:underline; text-underline-offset:.2em; }
.fx-interaction { margin-top:16px; padding:20px; border:1px solid #dfe4eb; border-radius:18px; }
.fx-interaction-heading { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:.5rem 1rem; margin-bottom:1rem; }
.fx-interaction-heading h4 { font-size:.9375rem; font-weight:600; margin:0; color:#333b49; }
.fx-interaction-heading>span { font-size:.75rem; color:#657184; }
.fx-options { display:flex; flex-wrap:wrap; gap:.5rem; }
.fx-options button { padding:.55rem .9rem; border:1px solid #dce2eb; border-radius:2rem; background:#fff; color:#505a6a; font-family:inherit; font-size:.8125rem; font-weight:550; cursor:pointer; min-height:38px; }
.fx-options button[aria-pressed="true"] { color:var(--fx-accent); background:var(--fx-tint); border-color:var(--fx-accent); }
.fx-setting-copy { margin-top:1rem; min-height:5rem; }
.fx-setting-copy>strong { font-size:1rem; font-weight:600; color:#303844; }
.fx-setting-copy>p { font-size:.9375rem; color:#535e6e; margin:.4rem 0 0; line-height:1.55; max-width:63ch; }
.fx-program { margin:1rem 0 0; font-size:.8125rem; color:#616b7b; }
@media(max-width:1150px) {
 .fx-card-grid { gap:12px; }
 .fx-card { min-height:320px; padding:20px; }
 .fx-card>.fx-card-label,.fx-card-teaser { left:20px; right:20px; }
 .fx-card-teaser { font-size:1.25rem; }
 .fx-card>img { height:185px; }
 .fx-tab { gap:.25rem; padding-right:.5rem; font-size:.875rem; }
 .fx-tab>img { width:76px; }
 .fx-detail-layout { grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:18px; }
 .fx-facts { grid-template-columns:1fr; gap:10px; }
 .fx-fact { padding:17px 20px; }
 .fx-fact>p { min-height:0; margin-bottom:.4rem; }
 .fx-fact h4 { font-size:1.15rem; margin-bottom:.4rem; }
 .fx-figure img { min-height:220px; }
}
@media(max-width:760px) {
 .fx-toolbar { padding-inline:20px; }
 .fx-brand { gap:12px; }
 .fx-brand>span { display:none; }
 .fx-navigation { gap:7px; padding:0 16px 12px; }
 .fx-tab { flex-direction:column; justify-content:center; gap:0; padding:2px 3px 10px; text-align:center; font-size:.75rem; line-height:1.25; }
 .fx-tab>img { width:65px; height:45px; }
 .fx-scroll { padding:16px 20px 28px; }
 .fx-overview>header { margin-top:.5rem; }
 .fx-overview h2 { font-size:3rem; }
 .fx-overview header>p:last-child { font-size:1rem; }
 .fx-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .fx-card { min-height:275px; }
 .fx-card>.fx-card-label { font-size:1rem; top:20px; left:16px; right:16px; }
 .fx-card-teaser { font-size:1.15rem; top:50px; left:16px; right:16px; }
 .fx-card>img { height:160px; bottom:30px; width:125%; left:-12.5%; }
 .fx-card-plus { right:14px; bottom:14px; width:27px; height:27px; }
 .fx-detail-heading h3 { font-size:2rem; }
 .fx-detail-heading>p:last-child { font-size:1rem; }
 .fx-detail-layout { grid-template-columns:1fr; gap:18px; }
 .fx-figure { position:static; max-width:36rem; width:100%; margin:auto; }
 .fx-figure img { min-height:0; height:220px; }
 .fx-figure figcaption { padding:0 20px 18px; }
 .fx-facts { grid-template-columns:1fr; }
 .fx-interaction { padding:18px; }
 .fx-setting-copy { min-height:6rem; }
}
@media(prefers-reduced-motion:reduce) { .fibrosis-explorer * { transition:none!important; animation:none!important; } }

/* Keep each control beside the visual it changes. */
.fx-detail-interactive .fx-detail-layout{grid-template-columns:minmax(0,1.22fr) minmax(280px,.78fr)}
.fx-detail-interactive .fx-facts{grid-template-columns:1fr}
.fx-detail-interactive .fx-fact{padding:18px 22px}
.fx-detail-interactive .fx-fact>p{min-height:0;margin-bottom:.4rem}
.fx-detail-interactive .fx-fact h4{margin-bottom:.45rem}
.fx-interactive-figure .fx-interaction{border:0;border-radius:0;padding:20px 24px 0;margin:0}
.fx-interactive-figure .fx-interaction-heading{margin-bottom:.75rem}
.fx-interactive-figure .fx-setting-copy{min-height:0;margin-top:1rem}
.fx-interactive-figure .fx-setting-copy>p{margin-top:.35rem;font-size:.875rem}
.fx-interactive-figure .fx-options button{background:#ffffffb8;min-height:42px}
.fx-live-art{width:100%;padding:2px 10px 12px}
.fx-live-art>svg,.fx-live-art img{display:block;width:100%;height:auto;min-height:0;aspect-ratio:760/440;object-fit:contain;mix-blend-mode:normal}
.fx-interactive-figure .fx-setting-badge{padding:0 24px 20px}
.fx-comparison-art:not([hidden]),.fx-live-art [data-model-state]{animation:fx-diagram-in .32s ease both}
@keyframes fx-diagram-in{from{opacity:.35;translate:0 5px}to{opacity:1;translate:0 0}}
@media(max-width:1150px){.fx-detail-interactive .fx-detail-layout{grid-template-columns:minmax(0,1.15fr) minmax(250px,.85fr)}.fx-interactive-figure .fx-interaction{padding:18px 20px 0}.fx-interactive-figure .fx-options{gap:.4rem}.fx-interactive-figure .fx-options button{padding:.5rem .7rem}.fx-live-art{padding-inline:0}}
@media(max-width:760px){.fx-detail-interactive .fx-detail-layout{grid-template-columns:1fr}.fx-interactive-figure .fx-interaction{padding:18px 18px 0}.fx-interactive-figure .fx-setting-copy{min-height:0}.fx-interactive-figure .fx-setting-badge{padding:0 18px 18px}.fx-live-art>svg,.fx-live-art img{height:auto;min-height:0}.fx-detail-interactive .fx-fact{padding:17px 20px}}
@media(prefers-reduced-motion:reduce){.fx-comparison-art,.fx-live-art [data-model-state]{animation:none!important}}