/* BioTela: identidade definida pela autora em 22/10/2026. */
:root{--biotela-primary:#D0C1F4;--biotela-ink:#292039;--biotela-accent:#D0C1F4;}
header .brand{color:var(--biotela-primary)}
header .brand img{object-fit:contain;border-radius:9px}
:focus-visible{outline:3px solid var(--biotela-primary);outline-offset:4px}
#category-filters button[aria-pressed="true"]{background:var(--biotela-primary);color:var(--biotela-ink);border-color:var(--biotela-primary)}

/* BioTela: lavanda e navegação dedicada à exploração celular. */
body.home-view{background:#F5F0FC;color:#2E2450;--mint:#D0C1F4;--ink:#2E2450}
.home-view header{background:#302344;color:#F5F0FC;border-color:#d0c1f433}
.home-view .brand small{color:#ded2ef}.home-view .site-nav{background:#49347A;border-color:#d0c1f444}
.home-view .site-nav a{color:#F5F0FC}.home-view .site-nav [aria-current]{background:#D0C1F4;color:#2E2450}
.home-view .welcome{background:#F5F0FC;color:#2E2450}
.home-view .home-hero{background:linear-gradient(90deg,#F5F0FC 0%,#F5F0FCee 40%,#F5F0FC88 67%,#F5F0FC33 100%),url('assets/celula.png') right 8% center/auto 88% no-repeat;min-height:490px}
.home-view .intro h1{color:#2E2450}.home-view .intro h1 em{color:#49347A}.home-view .intro>p:not(.eyebrow){color:#53466b}
.home-view .intro .eyebrow{background:#e7ddf6;color:#49347A}
.home-view .start-actions{max-width:none}.home-view .start-actions a{padding:16px 22px;border-radius:30px;text-decoration:none;font-size:15px;display:inline-flex;align-items:center}
.home-view .primary{background:#D0C1F4;color:#2E2450;border:1px solid #b5a0de}.home-view .primary:hover{background:#c3afea}
.home-view .start-actions .outline{background:#fff9;color:#49347A;border:1px solid #9c86c6}
.home-view .home-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.home-view .home-cards a,.home-view .home-cards a:nth-child(n){background:#fff;color:#2E2450;border-color:#ded2ef;box-shadow:0 6px 20px #49347A0a}
.home-view .home-cards small,.home-view .home-cards p{color:#635576}.home-view .home-cards b,.home-view .home-footer a{color:#49347A}
.home-view .home-footer{color:#635576;border-color:#ded2ef}.home-view .header-actions a{padding:10px 15px;border:1px solid #d0c1f466;border-radius:10px;color:#F5F0FC;text-decoration:none}
@media(max-width:700px){.home-view .site-nav{flex-wrap:wrap}.home-view .site-nav a{font-size:11px;padding:8px}.home-view .home-hero{padding-bottom:190px;background:linear-gradient(180deg,#F5F0FC 0%,#F5F0FCee 55%,#F5F0FC44 100%),url('assets/celula.png') right bottom/auto 55% no-repeat}.home-view .home-cards{grid-template-columns:1fr}.home-view .start-actions{flex-direction:column;align-items:flex-start}}
/* Lilás mais presente no fundo e nos cartões, conforme escolha da autora. */
body.home-view,.home-view .welcome{background:#E4D8F5}
.home-view .home-hero{background:linear-gradient(90deg,#E4D8F5 0%,#E4D8F5ee 40%,#E4D8F588 67%,#E4D8F533 100%),url('assets/celula.png') right 8% center/auto 88% no-repeat}
.home-view .home-cards a,.home-view .home-cards a:nth-child(n){background:#D8C8EE;border-color:#bda6dc}
.home-view .intro .eyebrow{background:#D0C1F4}.home-view .start-actions .outline{background:#e9dff8}
@media(max-width:700px){.home-view .home-hero{background:linear-gradient(180deg,#E4D8F5 0%,#E4D8F5ee 55%,#E4D8F544 100%),url('assets/celula.png') right bottom/auto 55% no-repeat}}
/* Tema BioTela em todos os ambientes e etapas; cores científicas preservadas. */
body:not(.home-view){--bg:#E4D8F5;--panel:#D8C8EE;--ink:#2E2450;--muted:#59476e;--mint:#49347A;background:#E4D8F5!important;color:#2E2450;color-scheme:light}
body:not(.home-view) header{background:#302344!important;color:#f5f0fc;border-color:#8d73b2!important}
body:not(.home-view) header a,body:not(.home-view) header span{color:#eee5fb}
body:not(.home-view) aside,body:not(.home-view) #lesson,body:not(.home-view) #caption,body:not(.home-view) .caption,body:not(.home-view) .card,body:not(.home-view) footer,body:not(.home-view) .notice,body:not(.home-view) #org-text,body:not(.home-view) #camera-controls,body:not(.home-view) #error{background:#D8C8EE!important;color:#2E2450!important;border-color:#aa91ca!important;box-shadow:none}
body:not(.home-view) button,body:not(.home-view) select,body:not(.home-view) #search{background:#e9dff8!important;color:#2E2450!important;border-color:#aa91ca!important}
body:not(.home-view) button:hover{background:#c9b4e5!important}
body:not(.home-view) .primary,body:not(.home-view) #next-step,body:not(.home-view) #play,body:not(.home-view) #category-filters button[aria-pressed=true]{background:#D0C1F4!important;color:#2E2450!important}
body:not(.home-view) aside p,body:not(.home-view) #lesson h1,body:not(.home-view) #lesson label,body:not(.home-view) #lesson .note,body:not(.home-view) #subtitle,body:not(.home-view) #hint,body:not(.home-view) #location span,body:not(.home-view) .card p,body:not(.home-view) .card small,body:not(.home-view) #detail,body:not(.home-view) .scene-heading small{color:#59476e!important}
body:not(.home-view) .eyebrow,body:not(.home-view) #phase,body:not(.home-view) #protein-key strong,body:not(.home-view) #protein-key span,body:not(.home-view) #chemical-key strong,body:not(.home-view) #chemical-key span,body:not(.home-view) .equation,body:not(.home-view) .balance,body:not(.home-view) #energy{color:#49347A!important}
body:not(.home-view) .label{background:#49347Ae8;color:#fff;border-color:#cdb9e7}
body:not(.home-view) #viewport,body:not(.home-view) #ex-stage{background:#B7A0D7!important;border-color:#aa91ca}
body:not(.home-view) dialog,body:not(.home-view) #nad-formula-dialog{background:#E4D8F5!important;color:#2E2450!important}
body:not(.home-view) dialog .feedback{background:#D0C1F4!important;color:#2E2450}
body:not(.home-view) a{color:#49347A}body:not(.home-view) input{accent-color:#49347A}
/* Cores e tipografia conforme referência visual da autora — 22/10/2026. */
:root{--biotela-primary:#D0C1F4;--biotela-ink:#34205D;--biotela-teal:#29ADC4}
body,body.home-view,body:not(.home-view){font-family:'Segoe UI',Arial,sans-serif;--bg:#F4EEFF;--panel:#EAE0FA;--ink:#34205D;--muted:#5C4782;--mint:#29ADC4;background:#F4EEFF!important;color:#34205D}
h1,h2,h3,.brand{font-family:'Trebuchet MS','Segoe UI',sans-serif;letter-spacing:-.025em;font-weight:700}
body:not(.home-view) #lesson h1,body:not(.home-view) aside h1,body:not(.home-view) .scene-heading h2,body:not(.home-view) #protein-key strong{color:#34205D!important;font-weight:700}
body:not(.home-view) #lesson h1{font-size:32px;line-height:1.2}
body:not(.home-view) .scene-heading h2{font-size:32px;line-height:1.2}
body:not(.home-view) #protein-key strong{font-size:30px}
body header,body.home-view header,body:not(.home-view) header{background:linear-gradient(110deg,#342050,#432B66)!important;color:#FBF8FF;border-color:#573D7C!important}
body header .brand,body:not(.home-view) header a{color:#FBF8FF}body header .brand small,body:not(.home-view) header span{color:#CDBCE8}
body:not(.home-view) aside,body:not(.home-view) #lesson,body:not(.home-view) #caption,body:not(.home-view) .caption,body:not(.home-view) .card,body:not(.home-view) footer,body:not(.home-view) .notice,body:not(.home-view) #org-text,body:not(.home-view) #camera-controls{background:linear-gradient(135deg,#EDE4FC,#E7DCF8)!important;border:1px solid #CFBDF0!important;border-radius:16px;color:#34205D!important;box-shadow:none}
body:not(.home-view) button,body:not(.home-view) select,body:not(.home-view) #search{background:#F5EFFF!important;color:#34205D!important;border:1px solid #BEA5E7!important;border-radius:12px}
body:not(.home-view) button:hover{background:#E4D6F8!important}
body:not(.home-view) .primary,body:not(.home-view) #next-step,body:not(.home-view) #next{background:#29ADC4!important;color:#fff!important;border-color:#199BB3!important;font-weight:600}
body:not(.home-view) #play{background:#8060CF!important;color:#fff!important;border-color:#7856C7!important}
body:not(.home-view) button:disabled{opacity:.45}
body:not(.home-view) .eyebrow,body:not(.home-view) #phase{color:#43276C!important;font-weight:700;letter-spacing:.15em}
body:not(.home-view) aside p,body:not(.home-view) #lesson label,body:not(.home-view) #lesson .note,body:not(.home-view) #subtitle,body:not(.home-view) #hint,body:not(.home-view) #location span,body:not(.home-view) .card p,body:not(.home-view) .card small,body:not(.home-view) #detail,body:not(.home-view) .scene-heading small,body:not(.home-view) #protein-key span,body:not(.home-view) #chemical-key span{color:#5C4782!important}
body:not(.home-view) .equation{background:#F3EDFD!important;color:#34205D!important;border:1px solid #B99DDF!important;border-radius:12px;font-weight:600}
body:not(.home-view) .contact-key{color:#16859D;opacity:1}
body:not(.home-view) #viewport,body:not(.home-view) #ex-stage{background:#B7A0DE!important;border:1px solid #A78BCE;border-radius:18px}
body:not(.home-view) .scene-heading{border-left:7px solid #29ADC4;padding-left:20px;margin-bottom:14px}
body:not(.home-view) input{accent-color:#29ADC4}body:not(.home-view) input[type=range]{accent-color:#29ADC4}
body:not(.home-view) .atom-key{background:#F3EDFD;color:#5C4782;border:1px solid #CFBDF0}
body:not(.home-view) dialog,body:not(.home-view) #nad-formula-dialog{background:#F4EEFF!important;color:#34205D!important}
.home-view .welcome{background:#F4EEFF!important}.home-view .home-hero{background:linear-gradient(90deg,#F4EEFF 0%,#F4EEFFee 40%,#F4EEFF88 67%,#F4EEFF33 100%),url('assets/celula.png') right 8% center/auto 88% no-repeat}
.home-view .home-cards a,.home-view .home-cards a:nth-child(n){background:#EAE0FA;border-color:#CFBDF0;color:#34205D}
@media(max-width:700px){body:not(.home-view) #lesson h1,body:not(.home-view) .scene-heading h2{font-size:25px}.home-view .home-hero{background:linear-gradient(180deg,#F4EEFF 0%,#F4EEFFee 55%,#F4EEFF44 100%),url('assets/celula.png') right bottom/auto 55% no-repeat}}
/* Tela da célula conforme referência lavanda, preservando a cena interativa. */
body.cell-view:not(.reaction){background:#F1EAFD!important;color:#29164F}
body.cell-view:not(.reaction) #intro{top:120px;bottom:86px;left:28px;width:min(340px,29vw);padding:26px;background:linear-gradient(135deg,#f8f4ffe8,#eee5fbe8)!important;border:1px solid #ded0f5!important;border-radius:20px;overflow:auto;box-shadow:0 8px 28px #8060cf0a}
body.cell-view:not(.reaction) #intro h1{font-size:clamp(46px,5vw,76px);font-weight:700;line-height:1.05;letter-spacing:-.045em;color:#29164F;margin:28px 0}
body.cell-view:not(.reaction) #intro h1::after{content:'.';color:#10B1C3}
body.cell-view:not(.reaction) #intro>p:not(.eyebrow){color:#8067B4!important;font-size:18px;line-height:1.55}
body.cell-view:not(.reaction) #intro .eyebrow{color:#6139CE!important;letter-spacing:.2em;line-height:1.6;font-size:11px}
body.cell-view:not(.reaction) #intro label{color:#49347A;font-size:14px;font-weight:600;margin-top:24px}
body.cell-view:not(.reaction) #intro select{background:#fbf8ff!important;border-color:#ddccfa!important;font-weight:600;padding:14px;color:#49347A!important}
body.cell-view:not(.reaction) #org-text{background:#EDE4FC!important;border:0!important;border-left:4px solid #0DB2C5!important;padding:18px;border-radius:12px;margin:16px 0;font-size:15px!important;min-height:0;color:#8067B4!important}
body.cell-view:not(.reaction) #enter{background:#06ADC2!important;color:white!important;padding:16px;border-radius:12px;font-size:16px;margin-top:14px}
body.cell-view:not(.reaction) #location{color:#7353B2;top:124px;font-weight:700}
body.cell-view:not(.reaction) #location span{color:#8A72BA!important;font-weight:400}
body.cell-view:not(.reaction) .label{background:#493078ed;border:1px solid #8062ac;color:#fff;font-weight:600;padding:6px 12px;border-radius:8px}
body.cell-view:not(.reaction) #camera-controls{padding:8px;bottom:90px;background:#f7f2ffdd!important;border:1px solid #dfd0f7!important;gap:5px;backdrop-filter:blur(8px)}
body.cell-view:not(.reaction) #camera-controls button{background:#faf7ff!important;border-color:#dfd0f7!important;min-height:44px}
body.cell-view:not(.reaction) footer{background:#F5EFFFed!important;border:0!important;border-top:1px solid #e6d9f8!important;border-radius:0;min-height:64px;color:#8067B4!important}
body.cell-view:not(.reaction) #hint{color:#8067B4!important}
body.cell-view:not(.reaction) #intro small{opacity:1;color:#8067B4}
@media(max-width:700px){body.cell-view:not(.reaction) #intro{top:auto;bottom:90px;left:12px;width:245px;max-height:54vh;padding:18px}body.cell-view:not(.reaction) #intro h1{font-size:40px;margin:16px 0}body.cell-view:not(.reaction) #intro .eyebrow{font-size:9px}body.cell-view:not(.reaction) #intro label{margin-top:10px;font-size:12px}body.cell-view:not(.reaction) #org-text{padding:10px;font-size:12px!important}body.cell-view:not(.reaction) #enter{font-size:13px;padding:12px}body.cell-view:not(.reaction) #camera-controls{right:10px;bottom:70px;padding:4px}body.cell-view:not(.reaction) #camera-controls button{padding:7px;min-width:30px}body.cell-view:not(.reaction) #location{top:85px}}body.cell-view:not(.reaction) #intro h1{font-size:clamp(42px,4vw,68px)}
@media(min-width:701px) and (max-height:800px){body.cell-view:not(.reaction) #intro{top:104px;bottom:80px;padding:20px}body.cell-view:not(.reaction) #intro h1{font-size:46px;margin:16px 0}body.cell-view:not(.reaction) #intro>p:not(.eyebrow){font-size:15px;line-height:1.5}body.cell-view:not(.reaction) #intro .eyebrow{font-size:9px;margin-bottom:8px}body.cell-view:not(.reaction) #intro label{font-size:12px;margin-top:12px}body.cell-view:not(.reaction) #intro select{padding:10px}body.cell-view:not(.reaction) #org-text{padding:10px;font-size:12px!important;margin:12px 0}body.cell-view:not(.reaction) #enter{padding:12px;font-size:14px;margin-top:8px}body.cell-view:not(.reaction) #intro small{font-size:10px;margin-top:6px}}
.home-view .sibling-project{width:90%;max-width:1440px;margin:28px auto 0;display:flex;align-items:center;gap:30px;padding:24px 30px;border:1px solid #CFC1E9;border-radius:22px;background:linear-gradient(110deg,#E6DCF7,#E8F4F1);color:#34205D}
.home-view .sibling-project img{width:150px;height:130px;object-fit:contain;flex:none}
.home-view .sibling-project .eyebrow{font-size:10px;letter-spacing:.14em;color:#49347A;margin:0 0 8px}
.home-view .sibling-project h2{font-size:26px;margin:0 0 10px}
.home-view .sibling-project p{font-size:15px;color:#59476E;max-width:800px;margin:0 0 14px;line-height:1.65}
.home-view .sibling-project a{display:inline-block;color:#166577;font-size:15px;font-weight:600;text-underline-offset:4px}
.home-view .sibling-new-tab{font-size:11px;font-weight:400}
@media(max-width:700px){.home-view .sibling-project{padding:20px;gap:14px;align-items:flex-start}.home-view .sibling-project img{width:70px;height:85px}.home-view .sibling-project h2{font-size:22px}.home-view .sibling-project p{font-size:14px}}

/* Participant names stay readable independently of the 3D camera. */
#pc-participant-labels:not([hidden]){display:flex;justify-content:space-between;gap:12px;grid-column:1/-1;color:#34205D;font:600 16px/1.35 'Segoe UI',sans-serif;}
#pc-participant-labels span{background:#F7F1FF;border:1px solid #B59BD8;border-radius:8px;padding:5px 12px;}
body.pc-stage #experience .scene-meta{display:grid;grid-template-columns:1fr auto;gap:4px 12px;}
@media(min-width:851px){body.gng.pc-stage #experience article{grid-template-rows:62px minmax(0,1fr) 88px 88px 78px;}}
@media(max-width:600px){#pc-participant-labels:not([hidden]){font-size:15px;flex-wrap:wrap;}}

#er-regions:not([hidden]){position:absolute;z-index:3;top:10px;left:12px;right:12px;display:flex;justify-content:space-between;gap:8px;pointer-events:none;color:#34205D;font:600 15px/1.3 "Segoe UI",sans-serif;}#er-regions span{background:#F4EEFF;padding:5px 9px;border-radius:7px;}
/* Readable labels independent of camera scale, in their own band. */
#experience #transport-regions:not([hidden]),#experience #er-regions:not([hidden]){position:relative;inset:auto;min-height:46px;padding:7px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#EEE4FC;z-index:2;font:600 17px/1.35 'Segoe UI',sans-serif;color:#34205D;}
#experience #transport-regions span,#experience #transport-regions span:nth-child(2),#experience #er-regions span{font-size:17px;font-weight:600;line-height:1.35;padding:2px 6px;background:transparent;}
#experience #viewport:has(#transport-regions:not([hidden])) canvas,#experience #viewport:has(#er-regions:not([hidden])) canvas{height:calc(100% - 46px);}
#experience .scene-heading small{font-size:14px;line-height:1.4;color:#49347A;}
#experience .scene-meta .legend h3{font-size:15px;}
#experience .scene-meta .legend ol{font-size:14px;line-height:1.4;}
#experience #subtitle,#experience #detail{font-size:16px;line-height:1.5;color:#49347A;}
@media(min-width:851px){body.gng #experience>article{grid-template-rows:84px minmax(170px,1fr) 68px 100px 78px;}body.gng.pc-stage #experience>article{grid-template-rows:84px minmax(170px,1fr) 100px 100px 78px;}}
@media(max-width:600px){#experience #transport-regions:not([hidden]),#experience #er-regions:not([hidden]){gap:4px;padding:6px;min-height:60px;}#experience #transport-regions span,#experience #transport-regions span:nth-child(2),#experience #er-regions span{font-size:15px;}#experience #viewport:has(#transport-regions:not([hidden])) canvas,#experience #viewport:has(#er-regions:not([hidden])) canvas{height:calc(100% - 60px);}}

#biotin-label:not([hidden]){position:absolute;z-index:4;pointer-events:none;width:154px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 9px;border:2px solid #7944BD;border-radius:9px;background:#F7F0FF;color:#34205D;box-shadow:none;line-height:1.2;}#biotin-label strong{font:700 16px/1.2 'Segoe UI',sans-serif;}#biotin-label span{font:600 16px/1.25 'Segoe UI',sans-serif;}#biotin-label small{font:400 12px/1.2 'Segoe UI',sans-serif;}

/* Biotin details belong below the scene, never over the reacting atoms. */
#experience #viewport #biotin-label{display:none!important;}#pc-participant-labels:not([hidden]){justify-content:flex-start;flex-wrap:wrap;gap:5px 10px;font-size:14px;}#pc-participant-labels span{padding:3px 8px;}

body.reaction .contact-key{color:#61318D!important;opacity:1;font-size:12px;}
/* A larger reaction stage, with supporting panels in a scrolling column. */
@media(min-width:851px){
 body.gng{--metabolic-stage-height:clamp(420px,54dvh,640px);overflow-y:auto;min-height:calc(var(--metabolic-stage-height) + 550px);}
 body.gng #experience>article,body.gng.pc-stage #experience>article{position:absolute;top:90px;bottom:auto;height:auto;display:grid;grid-template-rows:minmax(84px,auto) var(--metabolic-stage-height) auto minmax(110px,auto) auto;gap:12px;padding-bottom:24px;}
 body.gng #experience .scene-heading{overflow:visible;}
 body.gng #experience .scene-meta{min-height:64px;padding:4px 0;}
 body.gng #experience .caption{height:auto;max-height:190px;overflow-y:auto;}
 body.gng #experience .controls{min-height:78px;flex-wrap:wrap;}
}
@media(max-width:850px){body.gng #experience #viewport{height:500px;min-height:420px;}}
/* Shared reaction-stage dimensions across every pathway and step. */
@media(min-width:851px){
 body:has(#experience:not([hidden])){--metabolic-stage-height:clamp(500px,60dvh,720px);overflow-y:auto!important;min-height:calc(var(--metabolic-stage-height) + 550px)!important;}
 #experience>article{position:absolute!important;top:90px!important;bottom:auto!important;height:auto!important;grid-template-rows:minmax(88px,auto) var(--metabolic-stage-height) auto minmax(110px,auto) auto!important;gap:12px!important;padding-bottom:24px;}
 #experience #viewport{height:var(--metabolic-stage-height)!important;min-height:500px!important;}
 #experience .scene-heading{overflow:visible!important;}
 #experience .scene-meta{min-height:64px;padding:6px 0;}
 #experience .caption{height:auto;max-height:190px;overflow-y:auto;}
 #experience .controls{min-height:78px;flex-wrap:wrap;}
}
@media(max-width:850px){#experience #viewport,body.gng #experience #viewport{height:500px!important;min-height:500px!important;}}
@media(min-width:701px){body.reaction{--reaction-stage-height:clamp(500px,60dvh,720px);}}
@media(max-width:700px){body.reaction #cell{height:500px;min-height:500px;}}

body.reaction .contact-key{color:#79628F!important;}

/* Normal view keeps playback, captions and reaction together. */
@media(min-width:851px){
 body:has(#experience:not([hidden])){min-height:100dvh!important;overflow:hidden!important;}
 #experience>article{position:fixed!important;top:90px!important;bottom:8px!important;height:auto!important;grid-template-rows:76px minmax(180px,1fr) auto 86px 78px!important;gap:8px!important;padding-bottom:0!important;}
 #experience #viewport{height:100%!important;min-height:0!important;}
 #experience .scene-meta{min-height:48px;padding:0;}
 #experience .caption{height:86px;max-height:86px;padding:10px 14px;overflow-y:auto;}
 #experience .controls{min-height:0;padding:8px;}
 body.reaction{min-height:100dvh!important;overflow:hidden!important;}
 body.reaction #cell{position:fixed;top:184px;height:calc(100dvh - 422px);min-height:180px;}
 body.reaction #protein-key{position:fixed;top:90px;}
 body.reaction #chemical-key{position:fixed;top:auto;bottom:180px;min-height:44px;}
 body.reaction #camera-controls{position:fixed;top:auto;bottom:184px;}
 body.reaction #caption{position:fixed;top:auto;bottom:94px;height:78px;padding:8px 14px;}
 body.reaction footer{position:fixed;top:auto;bottom:8px;min-height:0;max-height:78px;overflow:auto;padding:8px;}
 body.reaction #playback{gap:5px;}
 body.reaction #chemical-key{right:330px;}
}
#expand-reaction{white-space:nowrap;font-size:12px;font-weight:600;min-height:34px;}
/* Fullscreen/classroom mode hides navigation, retaining caption and playback. */
body.presentation-mode{overflow:hidden!important;min-height:100dvh!important;background:#F5F0FC!important;}
body.presentation-mode header,body.presentation-mode #lesson,body.presentation-mode #experience>aside,body.presentation-mode #intro{display:none!important;}
body.presentation-mode #expand-reaction{position:fixed;right:14px;top:12px;z-index:1002;}
body.presentation-mode #experience>article{position:fixed!important;inset:12px 12px 8px!important;grid-template-rows:48px minmax(160px,1fr) auto 76px 72px!important;gap:8px!important;}
body.presentation-mode #experience .scene-heading{padding-right:180px!important;overflow:auto!important;}
body.presentation-mode #experience .scene-heading h2{font-size:23px;margin:0;}
body.presentation-mode #experience .scene-heading .eyebrow{display:none;}
body.presentation-mode #experience #viewport{height:100%!important;min-height:0!important;}
body.presentation-mode #experience .caption{height:76px;max-height:76px;}
body.presentation-mode #experience .controls{min-height:0;}
body.reaction.presentation-mode #cell{position:fixed;left:12px;right:12px;top:76px;width:calc(100% - 24px);height:calc(100dvh - 290px);min-height:0;}
body.reaction.presentation-mode #protein-key{left:20px;right:190px;top:10px;min-height:0;padding:0;gap:1px;}
body.reaction.presentation-mode #protein-key strong{font-size:24px;}
body.reaction.presentation-mode #protein-key small{display:none;}
body.reaction.presentation-mode #chemical-key{position:fixed;top:auto;left:20px;right:350px;bottom:160px;min-height:44px;}
body.reaction.presentation-mode #camera-controls{position:fixed;left:auto;right:16px;top:auto;bottom:164px;}
body.reaction.presentation-mode #caption{position:fixed;left:12px;right:12px;top:auto;bottom:86px;height:70px;}
body.reaction.presentation-mode footer{position:fixed;left:12px;right:12px;top:auto;bottom:8px;max-height:70px;}

body.presentation-mode:fullscreen{background:#F5F0FC!important;width:100vw!important;height:100dvh!important;}body.presentation-mode::backdrop{background:#F5F0FC;}body.presentation-mode #expand-reaction{right:80px;z-index:10000;}

/* Keep molecular captions in a reserved strip below the reaction canvas. */
@media(min-width:851px){
 body.reaction:not(.presentation-mode) #cell{height:calc(100dvh - 482px)!important;min-height:140px!important;}
 body.reaction:not(.presentation-mode) #chemical-key{top:calc(100dvh - 290px)!important;bottom:auto!important;height:106px!important;min-height:0!important;box-sizing:border-box;overflow:auto;display:flex;flex-direction:column;gap:3px;padding:0 4px!important;}
 body.reaction #chemical-key #nad-formula-open{align-self:flex-start;padding:4px 10px!important;min-height:28px!important;font-size:13px!important;}
 body.reaction #chemical-key #cofactor-name{font-size:13px!important;line-height:1.3!important;overflow-wrap:anywhere;}
 body.reaction.presentation-mode #chemical-key{top:calc(100dvh - 268px)!important;bottom:auto!important;height:100px!important;overflow:auto;}
 body.reaction.presentation-mode #cell{height:calc(100dvh - 352px)!important;}
}

/* All glycolysis stages: contain names, cofactors and optional actions. */
body.reaction #chemical-key,body.reaction #caption{box-sizing:border-box;min-width:0;max-width:calc(100vw - 32px);overflow-x:hidden!important;overflow-wrap:break-word;word-break:normal;}
body.reaction #chemical-key>*{box-sizing:border-box;max-width:100%;white-space:normal!important;flex-shrink:0;}
body.reaction #chemical-key strong,body.reaction #chemical-key span,body.reaction #chemical-key small{display:block;margin:0;line-height:1.3;}
body.reaction #chemical-key button{white-space:normal!important;height:auto;}
body.reaction #caption p{max-width:100%;overflow-wrap:break-word;}
@media(min-width:701px) and (max-width:850px){
 body.reaction #chemical-key{top:calc(var(--reaction-stage-height) + 206px)!important;bottom:auto!important;right:24px!important;min-height:0!important;height:118px!important;overflow-y:auto!important;display:flex;flex-direction:column;gap:4px;}
 body.reaction #camera-controls{top:calc(var(--reaction-stage-height) + 334px)!important;bottom:auto!important;}
 body.reaction #caption{top:calc(var(--reaction-stage-height) + 394px)!important;bottom:auto!important;}
 body.reaction footer{top:calc(var(--reaction-stage-height) + 514px)!important;bottom:auto!important;}
 body.reaction{min-height:calc(var(--reaction-stage-height) + 620px)!important;}
}
@media(max-width:700px){
 body.reaction:not(.presentation-mode) #chemical-key{position:static!important;inset:auto!important;height:auto!important;min-height:0!important;width:100%!important;max-width:100%!important;padding:8px!important;overflow:visible!important;display:flex;flex-direction:column;gap:5px;}
}
@media(min-width:851px){body.reaction #chemical-key{background:#F5F0FC!important;border-radius:8px;} }

.pathway-navigation{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:18px}.pathway-navigation a{font-size:13px}

/* Taller glycolysis reaction preview requested by the user. */
@media(min-width:851px){
 body.reaction:not(.presentation-mode){--glycolysis-preview-height:clamp(320px,calc(100dvh - 340px),520px);overflow-y:auto!important;min-height:calc(var(--glycolysis-preview-height) + 450px)!important;}
 body.reaction:not(.presentation-mode) #protein-key{position:absolute!important;top:90px!important;min-height:56px!important;height:56px;display:grid!important;grid-template-columns:1fr 1fr;gap:2px 12px!important;padding:0 10px!important;align-content:start;}
 body.reaction:not(.presentation-mode) #protein-key strong{grid-column:1/-1;font-size:24px!important;line-height:1.2;}
 body.reaction:not(.presentation-mode) #protein-key small,body.reaction:not(.presentation-mode) #protein-key span{font-size:12px!important;line-height:1.3;}
 body.reaction:not(.presentation-mode) #cell{position:absolute!important;top:154px!important;height:var(--glycolysis-preview-height)!important;min-height:320px!important;}
 body.reaction:not(.presentation-mode) #chemical-key{position:absolute!important;top:calc(var(--glycolysis-preview-height) + 166px)!important;bottom:auto!important;right:330px!important;height:74px!important;overflow:auto!important;}
 body.reaction:not(.presentation-mode) #camera-controls{position:absolute!important;top:calc(var(--glycolysis-preview-height) + 166px)!important;bottom:auto!important;}
 body.reaction:not(.presentation-mode) #caption{position:absolute!important;top:calc(var(--glycolysis-preview-height) + 250px)!important;bottom:auto!important;height:86px!important;}
 body.reaction:not(.presentation-mode) footer{position:absolute!important;top:calc(var(--glycolysis-preview-height) + 348px)!important;bottom:auto!important;min-height:84px!important;}
}

/* Shared tall reaction area, compact information strip and always-visible playback. */
@media(min-width:851px){
 body.reaction:not(.presentation-mode),body:has(#experience:not([hidden])):not(.presentation-mode){min-height:100dvh!important;height:100dvh;overflow:hidden!important;}
 body.reaction:not(.presentation-mode){--glycolysis-preview-height:calc(100dvh - 368px);}
 body.reaction:not(.presentation-mode) #protein-key{position:fixed!important;top:86px!important;height:48px!important;min-height:0!important;}
 body.reaction:not(.presentation-mode) #cell{position:fixed!important;top:140px!important;height:var(--glycolysis-preview-height)!important;min-height:0!important;}
 body.reaction:not(.presentation-mode) #chemical-key{position:fixed!important;top:calc(100dvh - 222px)!important;bottom:auto!important;height:58px!important;min-height:0!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;align-content:start;gap:0 6px!important;padding:0 4px!important;overflow:hidden!important;}
 body.reaction:not(.presentation-mode) #chemical-key strong{grid-column:1;font-size:13px!important;line-height:1.2;}
 body.reaction:not(.presentation-mode) #chemical-key #cofactor-name{grid-column:1/-1;font-size:11px!important;line-height:1.2!important;}
 body.reaction:not(.presentation-mode) #chemical-key .contact-key{grid-column:1/-1;font-size:10px!important;line-height:1.2;}
 body.reaction:not(.presentation-mode) #chemical-key #nad-formula-open{grid-column:2;grid-row:1;padding:2px 6px!important;min-height:22px!important;font-size:11px!important;}
 body.reaction:not(.presentation-mode) #camera-controls{position:fixed!important;top:calc(100dvh - 222px)!important;bottom:auto!important;max-height:52px;padding:4px!important;}
 body.reaction:not(.presentation-mode) #camera-controls button{min-height:32px!important;padding:5px 7px!important;}
 body.reaction:not(.presentation-mode) #caption{position:fixed!important;top:calc(100dvh - 158px)!important;bottom:auto!important;height:64px!important;min-height:0!important;padding:6px 12px!important;overflow:auto;}
 body.reaction:not(.presentation-mode) #caption p{font-size:12px!important;line-height:1.3;margin:3px 0;}
 body.reaction:not(.presentation-mode) #caption .balance{font-size:10px;}
 body.reaction:not(.presentation-mode) footer{position:fixed!important;top:auto!important;bottom:8px!important;height:80px!important;min-height:0!important;max-height:80px!important;padding:6px 9px!important;overflow:hidden!important;display:block;}
 body.reaction:not(.presentation-mode) #playback{display:flex!important;flex-wrap:wrap;align-items:center;gap:4px!important;}
 body.reaction:not(.presentation-mode) #playback button,body.reaction:not(.presentation-mode) #playback select{font-size:11px!important;padding:5px 7px!important;min-height:28px!important;}
 body.reaction:not(.presentation-mode) #playback label{font-size:10px!important;}
 body.reaction:not(.presentation-mode) #playback .scrub{flex:1 0 100%!important;width:100%!important;min-width:0;padding-left:145px;box-sizing:border-box;height:24px;}
 body.reaction:not(.presentation-mode) footer .motion{position:absolute;left:10px;bottom:9px;font-size:10px;}
 #experience:not([hidden])>article{top:86px!important;bottom:8px!important;grid-template-rows:48px minmax(180px,1fr) 58px 64px 80px!important;gap:6px!important;}
 #experience .scene-heading{min-height:0!important;padding:0 10px!important;overflow:hidden!important;}
 #experience .scene-heading .eyebrow{font-size:9px;line-height:10px;margin:0;}
 #experience .scene-heading h2{font-size:21px;line-height:25px;margin:0;}
 #experience .scene-heading small{font-size:11px;line-height:13px;display:block;}
 #experience .scene-meta{height:58px!important;min-height:0!important;padding:0!important;gap:4px!important;overflow:hidden;}
 #experience .legend{margin:0!important;padding:2px 8px!important;gap:10px;}
 #experience .legend h3{margin:0!important;font-size:12px;line-height:16px;}
 #experience .legend ol{font-size:11px;line-height:15px;padding-left:16px;}
 #experience .camera{padding:3px!important;gap:3px!important;}
 #experience .camera button{padding:5px 7px!important;font-size:11px;min-height:32px;}
 #experience #pc-participant-labels{font-size:10px;line-height:12px;gap:3px 6px;}
 #experience #pc-participant-labels span{padding:0 3px;}
 #experience .caption{height:64px!important;min-height:0!important;max-height:64px!important;padding:5px 12px!important;overflow:auto;}
 #experience .caption #phase{font-size:10px;line-height:13px;}
 #experience .caption #subtitle{font-size:12px;line-height:15px;margin:2px 0;}
 #experience .caption #detail,#experience .caption #energy{font-size:10px;line-height:13px;}
 #experience .controls{height:80px;min-height:0!important;margin-top:0!important;padding:5px 9px!important;gap:5px!important;align-content:center;overflow:hidden;}
 #experience .controls button,#experience .controls select{font-size:11px!important;min-height:28px!important;padding:5px 7px!important;}
 #experience .controls label{font-size:10px!important;}
 #experience .controls .timeline{flex-basis:100%!important;padding:0!important;min-height:20px;}
 #experience .controls #narration-status{font-size:10px;}
}
@media(min-width:851px) and (max-width:1100px){
 body.reaction:not(.presentation-mode){--glycolysis-preview-height:calc(100dvh - 390px);}
 body.reaction:not(.presentation-mode) #chemical-key,body.reaction:not(.presentation-mode) #camera-controls{top:calc(100dvh - 244px)!important;}
 body.reaction:not(.presentation-mode) #caption{top:calc(100dvh - 180px)!important;}
 body.reaction:not(.presentation-mode) footer{height:102px!important;max-height:102px!important;}
 #experience:not([hidden])>article{grid-template-rows:48px minmax(150px,1fr) 58px 64px 102px!important;}
 #experience .controls{height:102px;}
}