/* Endocrine laboratory: composition matched to the approved desktop concept. */
:root{--edge:#12618c;--cyan:#29e7f3;--panel:#02192e;--muted:#abc9e6}
body{background:radial-gradient(ellipse at 70% 24%,#062957 0,transparent 54%),#001225;font-family:"Segoe UI",Arial,sans-serif;font-size:14px}
header{height:57px;padding:0 2.1%;background:#001225e8;gap:24px;border-color:#0c496f}
header .brand img{width:235px;height:49px}
header nav{gap:30px}header nav a{font-size:13px}
main{max-width:1660px;padding:0 19px 80px}
.breadcrumbs{position:relative;z-index:2;height:26px;align-items:center;margin:0;font-size:11px;padding-left:12px;gap:9px}
.hero{height:163px;min-height:0;padding:10px 14px 11px;isolation:isolate;background:none;position:relative}
.hero:before{content:"";position:absolute;inset:-27px -19px -5px;z-index:-2;background:url('assets/hero.webp') right 48%/auto 365px no-repeat}
.hero:after{content:"";position:absolute;inset:-27px -19px -5px;z-index:-1;background:linear-gradient(90deg,#001225 0%,#001225f7 31%,#001225ac 49%,#00122516 72%,#0012250a)}
.hero .eyebrow{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.07em;margin:0 0 3px}
.art-icon{width:29px;height:29px;flex:none;color:currentColor;filter:drop-shadow(0 0 5px #18caff40)}
.hero .eyebrow .art-icon{width:24px;height:24px;border:1px solid #1c93b8;border-radius:3px;padding:2px}
.hero h1{font-size:clamp(29px,2.85vw,43px);letter-spacing:-.8px;line-height:1.1;margin:3px 0 6px;max-width:1050px;text-shadow:0 2px 10px #001122}
.hero .lead{font-size:16px;line-height:1.24;max-width:740px;color:#e3eefa;text-shadow:0 2px 6px #001126}
.badges{margin-top:9px;gap:10px}.badges span{display:flex;align-items:center;gap:8px;font-size:12px;padding:3px 13px;line-height:21px;background:linear-gradient(#29204bbd,#160e32c9);box-shadow:inset 0 0 9px #b04cf225}
.badges span:first-child{background:linear-gradient(#004942b8,#002b2bba)}.badges .art-icon{width:20px;height:20px}
.tabs{grid-template-columns:1.14fr 1fr 1fr 1fr;gap:4px;margin:6px 0 9px}
.tabs button{height:45px;font-size:15px;color:#a7d9ff;border-radius:7px;background:linear-gradient(#04203af0,#00152bf0);box-shadow:inset 0 0 10px #00101d;gap:14px}
.tabs .art-icon{width:31px;height:31px}.tabs button>span{height:31px;display:flex}
.tabs [aria-selected=true]{color:#33edff;background:linear-gradient(110deg,#02435c,#002d45);border-color:#04dffc;box-shadow:inset 0 -3px 12px #00dfff5c,0 0 12px #07cded31}
.panel{background:linear-gradient(135deg,#031d34ef,#001329f5);border-color:#12658b;border-radius:9px;box-shadow:inset 0 0 18px #00101a6e}
.anatomy-grid{grid-template-columns:minmax(245px,20fr) minmax(0,42fr) minmax(400px,38fr);gap:6px}
.anatomy-grid>aside,.body-panel{height:466px}
.glands{padding:5px}.glands summary{font-size:14px;padding:2px 8px 6px;color:#edf5ff;line-height:18px}
.glands details>div{gap:4px}.glands button{height:49px;gap:8px;padding:0 7px 0 0;border-color:#123b5b;background:linear-gradient(110deg,#052b43a6,#00172d);border-radius:7px;overflow:hidden}
.glands button strong{font-size:12px;line-height:1.1}.glands button small{font-size:10px;line-height:1.17;margin-top:2px;color:#a6cae8}
.gland-thumb{width:70px;height:48px;flex:0 0 70px;object-fit:contain;background:radial-gradient(ellipse,#11346799,transparent 75%);filter:drop-shadow(0 0 5px #3185c452)}
.glands button[aria-pressed=true]{border-color:#36eaff;background:linear-gradient(100deg,#0a4e69,#002139);box-shadow:inset 0 0 9px #00dffb75,0 0 8px #00cafa50}
.glands button[aria-pressed=true] .gland-thumb{filter:drop-shadow(0 0 5px #ff9b76)}
.body-panel{background:radial-gradient(ellipse at 50% 42%,#0d3a69ad,transparent 60%),#00182f;isolation:isolate}
.body-panel:before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(circle at 15% 20%,#4da9ff51 0,transparent 2px),radial-gradient(circle at 80% 60%,#557afa40 0,transparent 3px),radial-gradient(circle at 32% 76%,#52e3ff40 0,transparent 2px);background-size:107px 133px,157px 177px,87px 99px;opacity:.65}
.model-wrap{background:radial-gradient(ellipse at 50% 30%,#12589e35,transparent 68%)}
.scene-tools{background:linear-gradient(#00182eea,#00182e22);padding:5px 6px;align-items:start;gap:3px}
.scene-tools label{font-size:0;display:flex;gap:0;flex:1}.scene-tools select{font-size:10px;padding:4px;width:83px;background:#05263dcc}
.scene-tools button{font-size:9px;padding:5px 6px;background:#04253fc9;border-color:#22617e}
.scene-tools .zoom-tools{gap:2px}.scene-tools .zoom-tools button{width:24px;height:26px;font-size:19px}
.display-tools{bottom:13px;font-size:9px;gap:6px;padding:2px 7px;background:#00172bbd;border-color:#123454}
.display-tools input[type=range]{min-height:21px;width:60px}.display-tools label{gap:4px}
#scene-caption{font-size:7px;min-height:12px;padding:1px 6px;color:#9ebed6;background:#00172bd6}
.model-label{font-size:12px;line-height:1.15;background:#00122865;border-radius:5px;padding:4px 5px;max-width:153px;color:#f1f6ff;text-shadow:0 1px 5px #000;font-weight:650}
.model-label small{font-size:10px;line-height:1.13;display:block;color:#bcd1e8;font-weight:400;margin-top:3px;max-width:130px}
.model-label.left{left:4px}.model-label.right{right:3px}.model-label:hover{background:#06314e}
.model-callouts>svg{overflow:visible}.organ-dot{filter:drop-shadow(0 0 4px currentColor);pointer-events:none}
.organ-panel{padding:10px 10px 9px}.organ-top{grid-template-columns:minmax(0,1fr) 155px;gap:10px;min-height:145px}
.organ-top h2{font-size:23px;line-height:1.12;letter-spacing:-.3px;margin-bottom:8px}.organ-top p{font-size:11px;line-height:1.3;margin:0 0 6px}
#preview-button{height:144px;background:radial-gradient(ellipse,#124777,#031934 75%);border:1px solid #2179b1;border-radius:7px;position:relative;box-shadow:inset 0 0 15px #41bfff15}
#organ-preview{height:117px;object-fit:contain;filter:drop-shadow(0 0 8px #ef905a20)}
#preview-button:before{content:"⛶";position:absolute;top:3px;right:5px;font-size:22px;color:#b9eaff}
#preview-button span{border-color:#124b75;font-size:10px;padding:3px;line-height:17px;background:#001329bf}
.organ-panel>h3{margin:7px 0 6px;font-size:13px;line-height:16px}
.hormone-cards{gap:5px;grid-template-columns:repeat(3,minmax(0,1fr))}
.hormone-card{display:flex;gap:4px;align-items:center;text-align:left;padding:3px;min-width:0;height:88px;overflow:hidden;border:1px solid #247db4;border-radius:8px;background:radial-gradient(ellipse at 30% 50%,#1c487baa,#062443);transition:border-color .18s,box-shadow .18s}
.hormone-card .hormone-art{width:43px;height:63px;flex:0 0 43px;filter:drop-shadow(0 0 4px #b481ff80)}
.hormone-card>span{display:block;min-width:0}.hormone-card strong{font-size:10px;line-height:1.13;margin:0 0 4px;color:#e3efff}
.hormone-card>span>span{font-size:9px;line-height:1.15;color:#b4ceea;display:block}
.hormone-card[aria-pressed=true]{border-color:#37ccf2;box-shadow:inset 0 0 10px #1289e54d}
.info-grid{gap:6px;margin-top:7px}.info-grid>section{border-color:#124866;padding:6px 8px;border-radius:7px}
.info-grid h3{font-size:13px;margin:0 0 6px}.info-grid ul{font-size:10px;line-height:1.22}
.info-grid li{margin:6px 0;padding-left:20px;min-height:14px}.info-grid li:before{width:14px;height:14px;display:grid;place-items:center;border:1px solid #36e8c6;border-radius:50%;font-size:10px;background:#004b5355}
#organ-targets li{display:flex;gap:6px;align-items:center;padding-left:0;margin:5px 0}#organ-targets li:before{display:none}#organ-targets .art-icon{width:20px;height:20px;color:#75cbfa}
.organ-panel>.takeaway{font-size:11px;margin:7px 0 0;padding:7px 9px;line-height:1.3}.organ-panel>.takeaway strong{margin-bottom:3px}
#gland-structure h3{font-size:12px}#gland-structure svg{height:90px}
.quick-grid{gap:7px;margin:8px 0 14px;grid-template-columns:repeat(4,minmax(0,1fr))}
.quick{height:255px;min-height:0;gap:6px;padding:8px 10px 8px;background:linear-gradient(140deg,#073666,#021933 55%,#061d4b);border-color:#167cc3;border-radius:8px}
.quick>strong{font-size:15px;line-height:1.1;gap:8px;min-height:25px;letter-spacing:-.2px}
.quick>strong>b{width:27px;height:27px;display:grid;place-items:center;padding:0;flex:0 0 27px;font-size:20px;box-shadow:inset 0 0 8px #16e8ed38}
.quick>strong>span{font-size:23px;filter:drop-shadow(0 0 5px #287dff)}
.quick .quick-visual{height:132px;flex:0 0 132px;border-color:#1c5b84;background:#001b37;border-radius:10px}
.quick>span:not(.quick-visual){font-size:11px;line-height:1.25}
.quick em{font-size:12px;line-height:17px;padding:7px;border-color:#23c5fe;background:linear-gradient(#0d5082,#012957);box-shadow:inset 0 0 8px #06bffc4d;min-height:33px}
.quick .anatomy-mini{position:relative;overflow:hidden;background:radial-gradient(ellipse at left,#0c3a68,#00192c)}
.anatomy-mini #anatomy-mini{width:42%;height:100%;object-fit:cover;object-position:center}
.anatomy-mini .mini-glands{width:58%;padding:7px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:5px}
.mini-glands img{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;border:1px solid #13557c;border-radius:7px;background:#031830;box-shadow:inset 0 0 8px #16719e33}
.quick:nth-child(2){border-color:#1c8ade}.quick:nth-child(3){border-color:#078dbb}.quick:nth-child(4){border-color:#536df3;background:linear-gradient(140deg,#092961,#06142f 80%)}
.quick #graph-mini{height:111px;flex-basis:111px}.quick .mini-legend{display:flex;flex-wrap:wrap;gap:3px 9px;font-size:9px;min-height:11px;margin:-2px 3px 0}
.mini-legend span:before{content:"━ ";color:var(--series-color)}
.practice-preview{display:flex;height:140px;min-height:0;border:1px solid #18456c;border-radius:9px;background:#021b34;gap:4px;padding:2px}
#clipboard-visual{width:31%;display:flex;align-items:center}.clipboard-art{width:100%;height:130px;filter:drop-shadow(0 0 7px #3276ff88)}
.mini-tasks{width:69%;gap:3px;font-size:10px;padding:7px 3px 3px;align-content:center;line-height:1.2}
.mini-progress{display:flex;flex-wrap:wrap;gap:5px 9px;align-items:center;border:1px solid #174970;border-radius:6px;background:#001b35;padding:5px 7px;margin:0}
.progress-caption{font-size:10px;color:#d2eaff}.mini-progress progress{width:31%;height:10px;flex:1}.mini-progress #progress-text{font-size:10px}
.quick:last-child em{border-color:#8364ff;background:linear-gradient(#333979,#1c1654);box-shadow:inset 0 0 9px #9c42e55e}
/* Other modes keep the same compact desktop workspace; controls remain scrollable. */
@media(min-width:1101px){.mode-panel{height:466px;overflow:auto;scrollbar-width:thin;padding:14px 18px}.mode-panel h2{font-size:25px}.mode-panel .eyebrow{font-size:10px}.mode-panel>p{font-size:12px;margin:5px 0}.segmented{margin:9px 0}.segmented button{padding:6px 10px}.signal-diagram{height:183px}.mode-panel .toolbar{margin:8px 0;gap:6px}.mode-panel .toolbar button{font-size:12px;padding:6px 9px}.mode-panel .toolbar>label{font-size:11px}.cell-options{margin:8px 0;gap:7px}.cell-options button{font-size:11px;padding:6px}.cell-options button>span{font-size:25px}.mode-panel .takeaway{font-size:12px;padding:8px}.mode-panel h3{margin:7px 0 4px;font-size:13px}.experiment-grid{gap:15px;margin:9px 0}.control{font-size:12px;gap:8px;margin:11px 0}.control input{min-height:20px}.regulation-scheme svg{height:110px}.metrics{margin:7px 0;gap:8px}.metric{padding:6px 9px}.metric strong{font-size:21px}.metric span{font-size:11px}.graph svg{max-height:230px}.task-tabs{margin:10px 0}.task-options{margin:10px 0}.task-options label{padding:10px}.match-grid{margin:12px 0}.mode-panel details{margin-top:8px;font-size:12px}}
.signal-diagram{background:linear-gradient(#041f3abf,#02172bbf),url('assets/signaling.webp') center/cover}
.signal-diagram svg{filter:drop-shadow(0 0 7px #5359d231)}
.signal-diagram svg>path:first-of-type{fill-opacity:.7}.signal-diagram svg>circle{fill-opacity:.85}
.hormone-particle{filter:drop-shadow(0 0 3px currentColor)}
@media(min-width:1101px) and (max-width:1450px){.anatomy-grid{grid-template-columns:minmax(235px,20fr) minmax(0,42fr) minmax(390px,38fr)}.gland-thumb{width:60px;flex-basis:60px}.glands button strong{font-size:11px}.glands button small{font-size:10px}.organ-top{grid-template-columns:minmax(0,1fr) 133px}.organ-top h2{font-size:22px}.organ-top p{font-size:10.5px}.hormone-card .hormone-art{width:34px;flex-basis:34px}.hormone-card strong{font-size:9.5px}.hormone-card>span>span{font-size:8.5px}.quick>strong{font-size:14px}.model-label{max-width:134px;font-size:11px}.model-label small{font-size:9px;max-width:119px}}
@media(max-width:1100px){.anatomy-grid{grid-template-columns:230px minmax(0,1fr)}.anatomy-grid>aside,.body-panel{height:470px}.organ-panel{grid-column:1/-1;height:auto!important;max-height:none}.organ-top{grid-template-columns:1fr 180px}.organ-top p{font-size:13px}.hormone-card strong{font-size:12px}.hormone-card>span>span{font-size:11px}.info-grid ul{font-size:12px}.quick-grid{grid-template-columns:1fr 1fr}.hero h1{font-size:32px}.hero .lead{font-size:14px;max-width:620px}.hero:before{opacity:.8}.hero:after{background:linear-gradient(90deg,#001225 20%,#001225aa 64%,#00122525)}.tabs button{font-size:12px;gap:8px}.tabs .art-icon{width:25px}.model-label{font-size:11px;max-width:140px}.model-label small{font-size:10px}.quick{height:263px}.quick>strong{font-size:16px}.mode-panel{height:auto;padding:16px}.signal-diagram{height:260px}.quick .mini-legend{font-size:10px}.mini-tasks{font-size:12px}}
@media(max-width:700px){header{height:55px;gap:6px;padding:0 10px}header .brand img{width:155px;height:42px}header nav{gap:10px}header nav a{font-size:11px}main{padding:0 10px 85px}.breadcrumbs{height:auto;min-height:31px;padding:5px 0;font-size:9px;gap:4px}.hero{height:auto;min-height:205px;padding:8px 1px 12px}.hero:before{inset:-35px -10px -2px;background-size:auto 265px;background-position:68% center;opacity:.65}.hero:after{inset:-35px -10px -2px;background:linear-gradient(90deg,#001225eb,#00122599 62%,#00122555)}.hero .eyebrow{font-size:8px;gap:6px;letter-spacing:.035em}.hero .eyebrow .art-icon{width:19px;height:19px}.hero h1{font-size:30px;max-width:100%;line-height:1.08;letter-spacing:-.6px;margin:6px 0 8px}.hero .lead{font-size:14px;line-height:1.3;background:transparent}.badges{gap:5px;flex-wrap:wrap;margin-top:11px}.badges span{font-size:10px;padding:2px 8px;gap:5px;line-height:20px}.badges .art-icon{width:15px;height:15px}.tabs{display:flex;overflow-x:auto;scrollbar-width:thin;margin:5px 0 8px;padding:1px 0 4px;gap:5px;scroll-snap-type:x proximity}.tabs button{height:46px;flex:0 0 205px;font-size:12px;gap:8px;scroll-snap-align:start;white-space:normal}.tabs button>span{height:27px}.tabs .art-icon{width:27px;height:27px}.anatomy-grid{display:flex;gap:8px}.anatomy-grid .body-panel{height:510px}.anatomy-grid .glands{height:auto!important}.glands details>div{grid-template-columns:1fr 1fr;gap:5px}.glands button{height:70px;gap:4px;padding:0 3px}.gland-thumb{width:48px;height:58px;flex-basis:48px}.glands button strong{font-size:10px}.glands button small{font-size:9px;line-height:1.15}.glands summary{font-size:14px;padding:6px}.scene-tools{display:flex;gap:3px;padding:6px}.scene-tools label{display:flex;font-size:0;gap:0}.scene-tools select{width:91px;font-size:11px;padding:4px}.scene-tools button{font-size:10px;padding:5px}.scene-tools .zoom-tools{position:absolute;top:42px;right:6px;display:grid;gap:4px}.scene-tools .zoom-tools button{width:29px;height:29px}.model-label{max-width:98px;font-size:10px;padding:3px;background:#00162b77}.model-label small{display:none}.display-tools{bottom:22px;font-size:9px;gap:5px;padding:4px 6px}.display-tools input[type=range]{width:68px}.display-tools>label:first-child{display:grid}#scene-caption{font-size:8px;min-height:20px;padding:2px 6px}.organ-panel{max-height:none;padding:12px}.organ-top{grid-template-columns:1fr 112px;min-height:158px;gap:8px}.organ-top h2{font-size:22px}.organ-top p{font-size:12px;line-height:1.3}#preview-button{height:151px}#organ-preview{height:123px}.hormone-cards{grid-template-columns:1fr}.hormone-card{height:auto;min-height:77px;padding:5px;gap:10px}.hormone-card .hormone-art{width:52px;height:63px;flex-basis:52px}.hormone-card strong{font-size:13px}.hormone-card>span>span{font-size:12px;line-height:1.3}.info-grid{gap:7px}.info-grid h3{font-size:14px}.info-grid ul{font-size:12px}.info-grid li{margin:8px 0}.organ-panel>.takeaway{font-size:12px;padding:9px}.quick-grid{grid-template-columns:1fr;gap:9px}.quick{height:278px;padding:10px}.quick>strong{font-size:17px}.quick>span:not(.quick-visual){font-size:12px}.quick .quick-visual{height:146px;flex-basis:146px}.quick #graph-mini{height:127px;flex-basis:127px}.quick em{font-size:13px}.practice-preview{height:157px}.clipboard-art{height:145px}.mini-tasks{font-size:12px}.quick .mini-legend{font-size:10px}.mode-panel{padding:14px 11px}.mode-panel h2{font-size:24px}.mode-panel .eyebrow{font-size:10px}.signal-diagram{height:220px}.experiment-grid{grid-template-columns:1fr}.cell-options{grid-template-columns:1fr 1fr}.quick .anatomy-mini #anatomy-mini{width:40%}.anatomy-mini .mini-glands{width:60%}.tabs button:focus-visible{outline-offset:-4px}}
@media(prefers-reduced-motion:reduce){.quick,.hormone-card,.tabs button{transition:none}.hormone-particle{animation:none!important}}
@media(min-width:1101px){.glands button strong{font-size:12px}.glands button small{font-size:10.5px}.organ-top p{font-size:12px;line-height:1.3}.hormone-card strong{font-size:10.5px}.hormone-card>span>span{font-size:9.5px}.info-grid ul{font-size:11px}.quick #graph-mini svg text{font-size:21px}.quick #graph-mini{height:116px;flex-basis:116px}.quick .mini-legend{font-size:10px}}
.signal-workspace{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:16px;align-items:start}.signal-lab,.target-lab{min-width:0}.target-lab{padding:12px;background:#03244099;border:1px solid #155778;border-radius:9px}.target-lab .cell-options{grid-template-columns:1fr 1fr}.target-lab .cell-options button{min-height:62px}.target-lab p{font-size:12px}.target-lab h3{font-size:15px}.signal-lab .signal-diagram{height:220px}.signal-lab .toolbar{gap:6px}.signal-lab .toolbar>label{font-size:10px;margin:0;gap:5px;flex:1}.signal-lab .toolbar input{width:90px;min-width:70px}.signal-lab .takeaway{font-size:11px;line-height:1.3;margin:5px 0}.signal-lab .segmented{margin-top:5px}
@media(max-width:1100px){.signal-workspace{grid-template-columns:1fr}.signal-lab .toolbar>label{flex:1 1 40%}.signal-lab .signal-diagram{height:260px}.target-lab .cell-options button{font-size:13px}.target-lab p{font-size:14px}}
@media(max-width:700px){.model-label:not(.selected),.pointer-line:not(.selected),.organ-dot:not(.selected){display:none}.signal-lab .signal-diagram{height:210px}.signal-lab .toolbar>label{flex:1 1 100%;display:flex}.signal-lab .toolbar input{flex:1;width:auto}.signal-lab .takeaway{font-size:12px}.target-lab{padding:10px}.target-lab .cell-options button{font-size:12px;min-height:90px}.signal-workspace{gap:10px}}