*{box-sizing:border-box}body{margin:0;background:#061e29;color:#edf7f3;font:15px/1.6 system-ui,sans-serif}canvas{position:fixed;inset:0;width:100%;height:100%;touch-action:none}button,a,select,input{touch-action:manipulation}button,select{font:inherit;color:inherit;background:#12333dd9;border:1px solid #90b6b63b;border-radius:10px;padding:10px 15px;cursor:pointer}button:hover{background:#28505b}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #ffdd95;outline-offset:3px}button:disabled{opacity:.5;cursor:default}a{color:inherit}header{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:20px 32px;background:linear-gradient(#061e29d9,transparent);z-index:3}header a{text-decoration:none;font-weight:700;font-size:20px}header span{font-size:13px;font-weight:400;opacity:.6;margin-left:16px}aside,#lesson{position:fixed;left:36px;top:19%;width:290px;z-index:2;padding:22px;background:linear-gradient(110deg,#061e29ee,#061e2960);border-radius:18px}.eyebrow{font-size:10px;letter-spacing:3px;color:#8bdfd1;font-weight:700}h1{font-size:clamp(32px,4.5vw,64px);font-weight:400;letter-spacing:-2px;line-height:1.04;margin:24px 0}aside p{color:#b9cecf}label{display:block;font-size:12px}aside select{width:100%;margin-top:6px}#org-text{font-size:13px;min-height:65px}.primary{background:#abebcf;color:#103731;width:100%;font-weight:700;border:0}.primary:hover{background:#d0ffe7}.primary span{float:right}small{display:block;margin-top:10px;font-size:11px;opacity:.6}#location{position:fixed;right:30px;top:105px;font-size:11px;letter-spacing:2px;text-align:right;pointer-events:none}#location span{display:block;letter-spacing:0;color:#abc5c5}#lesson{top:100px;width:280px}#lesson h1{font-size:36px}#lesson>p{font-size:13px}.equation{padding:12px 0;border-block:1px solid #adcacc40;font-size:16px;color:#ffdc99}.note{color:#a7c1c3;font-size:12px}#caption{position:fixed;bottom:151px;left:50%;transform:translateX(-50%);width:min(680px,95%);padding:17px 24px;background:#07232ee8;border:1px solid #7aada94d;border-radius:15px;pointer-events:none}#phase{font-size:10px;letter-spacing:2px;color:#a5efd2}#subtitle{margin:6px 0;font-size:17px;line-height:1.45}.balance{display:flex;gap:30px;font-size:11px;color:#e8ce9b}footer{position:fixed;bottom:0;width:100%;padding:12px 28px 18px;background:linear-gradient(transparent,#061e29 30%);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:12px}#playback{display:flex;align-items:center;gap:8px;flex-wrap:wrap}#playback label{display:flex;align-items:center;gap:6px}.scrub{width:100%}.scrub input{flex:1;accent-color:#acebd0}#hint{color:#b7cccc}.motion{display:flex;align-items:center;gap:6px;white-space:nowrap}#camera-controls{position:fixed;right:25px;bottom:150px;display:flex;gap:4px;z-index:3}#camera-controls button{padding:9px;min-width:40px}body.reaction #camera-controls{bottom:310px}#labels{position:fixed;inset:0;pointer-events:none}.label{position:absolute;background:#092732d9;border:1px solid #a8d0cf50;border-radius:6px;padding:4px 9px;font-size:12px;white-space:nowrap;transform:translate(-50%,-50%)}dialog{color:#14353c;background:#f0f6f2;border:0;border-radius:20px;padding:28px;max-width:680px;width:calc(100% - 24px);max-height:85vh;overflow:auto}dialog::backdrop{background:#00141dcc;backdrop-filter:blur(8px)}dialog button{color:#14353c;background:#d3e9df}#close{float:right;font-size:22px}dialog h2{font-size:28px;line-height:1.2}dialog fieldset{margin:20px 0;border:1px solid #9cbbb0;border-radius:12px;padding:15px}dialog label{display:flex;gap:10px;font-size:15px;margin:10px 0}dialog .feedback{padding:12px;background:#d9eae1}#error{position:fixed;inset:20%;padding:30px;background:#102f3b;z-index:9}[hidden]{display:none!important}
@media(max-width:700px){header{padding:12px}header span{display:none}header button{font-size:12px;padding:10px}aside{left:12px;top:auto;bottom:100px;width:240px;padding:15px;background:#092530d9}aside h1{font-size:35px;margin:10px 0}aside>p:not(.eyebrow){display:none}#org-text{display:block!important;min-height:0}aside .eyebrow{font-size:9px;letter-spacing:2px}#location{top:80px;right:12px;font-size:9px}#lesson{top:70px;left:12px;width:210px;padding:10px}#lesson h1{font-size:25px;letter-spacing:-1px;margin:8px 0}#lesson .note{display:none}#lesson>p{margin:4px 0;font-size:11px}#lesson .equation{font-size:13px;padding:5px 0}#lesson button{padding:6px;font-size:12px}#caption{bottom:198px;padding:12px}#subtitle{font-size:14px}.balance{gap:12px;font-size:10px}footer{padding:10px 12px;gap:6px}#playback{gap:5px}#playback button,#playback select{min-height:42px;padding:7px;font-size:12px}.motion{font-size:11px}#camera-controls{right:12px;bottom:65px}body.reaction #camera-controls{bottom:145px}#hint{font-size:10px}.label{font-size:10px;padding:3px 5px}.scrub input{min-width:100px}}
@media(max-height:520px){aside{top:70px;bottom:auto;padding:12px}aside h1{font-size:30px;margin:5px 0}aside>p:not(.eyebrow){display:none}#org-text{min-height:0}#lesson{top:60px;padding:10px}#lesson h1{font-size:24px;margin:5px 0}#lesson .note{display:none}#caption{left:auto;right:12px;transform:none;width:48%;bottom:115px}#subtitle{font-size:13px}body.reaction #camera-controls{bottom:60px;right:12px}footer{padding:5px 12px}.motion{display:none}}

@media(min-width:701px){#lesson{top:85px;width:300px;padding:12px}#lesson h1{font-size:29px;margin:10px 0}#lesson .note{display:none}#lesson>p{margin:6px 0}#lesson button{padding:7px}body.reaction #camera-controls{bottom:120px}}
@media(min-width:701px){#caption{bottom:105px;padding:12px 20px;width:min(640px,70%)}#subtitle{font-size:15px}body.reaction #camera-controls{bottom:245px}}
/* Dedicated reading and rendering areas: reaction labels never float over atoms. */
body.reaction #cell{left:320px;top:135px;width:calc(100% - 340px);height:calc(100% - 395px)}
body.reaction #lesson{left:20px;top:95px;width:275px;padding:16px;max-height:calc(100% - 220px);overflow:auto;background:#082733}
body.reaction #lesson h1{font-size:29px;line-height:1.15;margin:12px 0}
body.reaction #lesson select{width:100%;font-size:13px;padding:10px 6px}
body.reaction #lesson .equation{font-size:14px;line-height:1.5;margin:12px 0}
body.reaction #lesson .note{display:block;font-size:11px;margin-top:12px}
.step-nav{display:flex;gap:5px;margin-bottom:12px}.step-nav button{flex:1;font-size:12px}
#protein-key{position:fixed;left:330px;right:25px;top:83px;text-align:center}
#protein-key strong{display:block;font-size:20px;color:#a5e6ef}#protein-key span{display:block;font-size:11px;color:#a5bdc7}
#chemical-key{position:fixed;left:330px;right:25px;bottom:213px;text-align:center;min-height:43px}
#chemical-key strong{display:block;color:#f5d28c;font-size:15px}#chemical-key span{display:block;color:#b5ded0;font-size:12px;margin-top:4px}
body.reaction #caption{left:320px;right:20px;bottom:105px;transform:none;width:auto;height:100px;padding:10px 18px;overflow:auto}
body.reaction #subtitle{font-size:14px;line-height:1.4;margin:4px 0}.balance{flex-wrap:wrap;gap:5px 18px}
body.reaction #camera-controls{left:20px;right:auto;bottom:125px}
body.reaction #location{display:none}body.reaction footer{min-height:95px;background:#061e29}
body.reaction #playback{max-width:850px}#playback input[type=checkbox]{accent-color:#acebd0}
@media(max-width:700px){
 body.reaction #lesson{left:12px;right:12px;top:65px;width:auto;padding:10px;max-height:180px;overflow:auto}
 body.reaction #lesson h1{font-size:20px;margin:4px 0}body.reaction #lesson .eyebrow{margin:0}
 body.reaction #lesson label,body.reaction #lesson .note{display:none}body.reaction #lesson select{width:57%;padding:6px;font-size:11px}
 body.reaction #lesson .equation{margin:6px 0;padding:4px;font-size:12px}body.reaction #multiplicity{font-size:10px}
 .step-nav{display:inline-flex;width:41%;margin:0;vertical-align:top}.step-nav button{font-size:10px;padding:6px!important}
 body.reaction #overview{position:absolute;right:10px;top:8px;font-size:10px}
 body.reaction #cell{left:0;top:285px;width:100%;height:calc(100% - 600px);min-height:170px}
 #protein-key{left:10px;right:10px;top:248px}#protein-key strong{font-size:15px}#protein-key span{font-size:9px}
 #chemical-key{left:10px;right:10px;bottom:270px;min-height:35px}#chemical-key strong{font-size:12px}#chemical-key span{font-size:10px}
 body.reaction #caption{left:10px;right:10px;bottom:158px;height:105px;padding:8px 12px}body.reaction #subtitle{font-size:12px}
 body.reaction footer{min-height:150px;padding:6px 10px}body.reaction #camera-controls{left:auto;right:10px;bottom:115px;gap:2px}
 body.reaction #camera-controls button{font-size:11px;padding:5px;min-width:27px}body.reaction #center{display:none}
 body.reaction #playback{gap:4px}body.reaction #playback button,body.reaction #playback select{min-height:30px;padding:5px;font-size:11px}
 body.reaction .balance{font-size:9px;gap:3px 10px}body.reaction .motion{font-size:10px}
}
@media(max-height:700px) and (max-width:700px){body.reaction{min-height:820px;overflow-y:auto}body.reaction #cell,body.reaction #lesson,body.reaction #caption,body.reaction #protein-key,body.reaction #chemical-key,body.reaction #camera-controls,body.reaction footer{position:absolute}body.reaction #cell{height:220px}body.reaction #caption{top:550px;bottom:auto}body.reaction #chemical-key{top:510px;bottom:auto}body.reaction footer{top:665px;bottom:auto}body.reaction #camera-controls{top:705px;bottom:auto}}
@media(max-width:700px){
 body.reaction #lesson{display:grid;grid-template-columns:1.4fr 1fr;gap:5px;grid-template-areas:'number number' 'title title' 'select nav' 'equation equation' 'multiple multiple';max-height:180px}
 #step-number{grid-area:number}#lesson-title{grid-area:title}body.reaction #step-select{grid-area:select;width:100%}body.reaction .step-nav{grid-area:nav;width:100%}body.reaction #equation{grid-area:equation;margin:0;padding:2px}body.reaction #multiplicity{grid-area:multiple;margin:0}
 body.reaction #lesson h1{font-size:19px}body.reaction #camera-controls{bottom:7px;top:auto;right:10px}body.reaction #camera-controls button{min-width:32px;min-height:32px}body.reaction #caption{height:115px}#chemical-key{bottom:280px}
}
@media(max-width:700px){body.reaction #lesson #step-select{width:100%;height:32px;min-width:0;font-size:10px;padding:4px}body.reaction #lesson .step-nav{gap:3px}body.reaction #lesson .step-nav button{white-space:nowrap;font-size:10px;padding:4px!important;min-width:0}body.reaction #lesson .equation{font-size:11px;line-height:1.3}body.reaction #lesson #multiplicity{font-size:9px;line-height:1.3}}
.contact-key{margin:2px 0 0;font-size:10px;line-height:1.2;color:#8fd5ed;opacity:1}
@media(min-width:701px){body.reaction #lesson{max-height:calc(100% - 285px)}}

.header-actions{display:flex;gap:8px}#audio-toggle[aria-pressed=true]{background:#b5eaca;color:#103c35}#voice-status{margin:2px 0 0;font-size:10px;color:#b9e6d0;opacity:1}
#molecular-explorer{width:min(1120px,96vw);max-width:1120px;max-height:94vh;padding:20px;background:#092b38;color:#e2f4ed;border:1px solid #507d86;border-radius:18px;overflow:auto}
#molecular-explorer::backdrop{background:#001a25e8}
.explorer-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.explorer-head h2{margin:4px 0 15px;font-size:27px}.explorer-head p{margin:0}
#molecular-explorer button,#molecular-explorer select{background:#17404f;color:#e9f7f4}#ex-close{font-size:24px}.explorer-controls{display:grid;grid-template-columns:1.15fr 1.15fr 1fr;gap:12px}.explorer-controls label{display:block;margin:0;font-size:12px}.explorer-controls select{display:block;width:100%;margin-top:5px;padding:9px;font-size:13px}
#ex-status{font-size:12px;color:#9dd6c6;margin:10px 0}#ex-stage{position:relative;width:100%;height:390px;border:1px solid #3f6b78;border-radius:12px;overflow:hidden}#ex-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}.explorer-camera{position:absolute;right:12px;bottom:12px;display:flex;gap:5px}.explorer-camera button{min-width:40px;padding:7px}
.explorer-details{margin-top:14px;font-size:12px;line-height:1.5}.explorer-details strong{font-size:17px;color:#f3d37e}.explorer-details p{margin:6px 0}.explorer-details small{font-size:11px;opacity:.8}
@media(max-width:700px){header .header-actions{gap:4px}header .header-actions button{font-size:10px;padding:8px 6px}#molecular-explorer{padding:13px;width:96vw}.explorer-head h2{font-size:22px}.explorer-controls{grid-template-columns:1fr;gap:6px}.explorer-controls label{display:grid;grid-template-columns:100px 1fr;align-items:center}.explorer-controls select{font-size:11px;padding:7px;margin:0}#ex-stage{height:290px}.explorer-camera{right:8px;bottom:8px;gap:3px}.explorer-camera button{padding:6px;min-width:32px;font-size:11px}body.reaction #playback #audio-toggle{font-size:10px}.explorer-details{font-size:11px}}

/* Reaction workspace inspired by the approved mockup; actual molecular scene retained. */
body.reaction{--rail:300px;background:#061e29}body.reaction header{height:76px;box-sizing:border-box;background:#082a35;border-bottom:1px solid #326071;padding:12px 24px}body.reaction #lesson{position:fixed;left:16px;top:90px;bottom:16px;width:var(--rail);max-height:none;padding:22px;overflow:auto;border:1px solid #326071;border-radius:20px;background:linear-gradient(145deg,#103b48,#082a35);box-sizing:border-box}body.reaction #lesson h1{font-size:30px;line-height:1.17;margin:20px 0;color:#edf7f3}body.reaction #lesson label{display:block;color:#b9d7df;font-size:12px;margin-top:24px}body.reaction #lesson select{margin-top:8px;background:#0b303e;border-color:#3b6878;padding:12px}body.reaction #lesson .equation{border:1px solid #3b6878;border-radius:12px;padding:16px;margin:22px 0;color:#f5d28c}body.reaction #lesson .note{display:block;color:#bcd5dc;line-height:1.7;font-size:12px}body.reaction .step-nav{gap:10px;margin-top:24px}body.reaction .step-nav button{min-height:44px}body.reaction #next-step{background:#7cebd0;color:#073b3e;font-weight:700}body.reaction #next-step:disabled{opacity:.4}body.reaction #overview{width:100%;margin:8px 0}body.reaction #cell{position:fixed;left:calc(var(--rail) + 32px);top:170px;width:calc(100% - var(--rail) - 48px);height:calc(100% - 452px);min-height:100px;border:1px solid #28596a;border-radius:18px;box-sizing:border-box}body.reaction #protein-key{left:calc(var(--rail) + 44px);right:24px;top:92px;text-align:left;padding:0 10px}body.reaction #protein-key strong{font-size:24px;color:#e7f5f3}body.reaction #protein-key small{margin-top:0;opacity:.8}body.reaction #protein-key span{color:#9bded9}body.reaction #chemical-key{left:calc(var(--rail) + 44px);right:220px;bottom:215px;text-align:left;min-height:56px}body.reaction #camera-controls{left:auto;right:20px;bottom:220px;gap:3px;background:#0a303c;border:1px solid #326071;border-radius:12px;padding:5px}body.reaction #camera-controls button{padding:7px;min-width:30px}body.reaction #center{font-size:11px}body.reaction #caption{left:calc(var(--rail) + 32px);right:16px;bottom:106px;height:102px;width:auto;transform:none;background:linear-gradient(110deg,#103b48,#082a35);border:1px solid #326071;border-radius:16px;padding:12px 20px;box-sizing:border-box;overflow:auto;pointer-events:auto}body.reaction #phase{font-size:12px;font-weight:700;letter-spacing:1px;color:#88ebdd}body.reaction #subtitle{color:#e3f1f3;font-size:14px;line-height:1.5}body.reaction .balance{color:#f5d28c}body.reaction footer{position:fixed;left:calc(var(--rail) + 32px);right:16px;bottom:12px;width:auto;min-height:0;box-sizing:border-box;padding:10px 14px;background:#0d3441;border:1px solid #438294;border-radius:16px;box-shadow:0 0 0 3px #2b6f7b18;gap:6px}body.reaction #playback{display:flex;max-width:none;width:100%;gap:7px}body.reaction #playback button,body.reaction #playback select{font-size:11px;padding:7px 9px;min-height:32px}body.reaction #play{background:#77ebd0;color:#073b3e;font-weight:700}body.reaction #quiz{margin-left:auto;border-color:#67a4b2}body.reaction #playback label{font-size:10px}body.reaction .scrub{flex:1;min-width:150px;width:auto}body.reaction .motion{font-size:10px}body.reaction #hint{display:none}
@media(min-width:701px) and (max-width:1100px){body.reaction{--rail:245px}body.reaction #lesson{padding:16px}body.reaction #lesson h1{font-size:25px}body.reaction #cell{height:calc(100% - 480px)}body.reaction #chemical-key{bottom:245px;right:24px}body.reaction #caption{bottom:130px}body.reaction #camera-controls{bottom:350px}body.reaction footer{min-height:106px}}
@media(max-width:700px){body.reaction{display:flex;flex-direction:column;min-height:100vh;overflow:auto;padding:80px 12px 12px;box-sizing:border-box;gap:12px}body.reaction header{height:68px;padding:10px;gap:8px}body.reaction header a{font-size:13px}body.reaction .header-actions{gap:4px}body.reaction #lesson{position:relative;inset:auto;width:100%;max-height:none;padding:14px;display:block;order:1;overflow:visible}body.reaction #lesson h1{font-size:24px;margin:8px 0}body.reaction #lesson label{display:block;margin-top:10px}body.reaction #lesson #step-select{height:40px;font-size:12px;padding:8px}body.reaction #lesson .equation{padding:10px;margin:12px 0;font-size:13px}body.reaction #lesson #multiplicity{font-size:12px}body.reaction .step-nav{display:flex;width:100%;margin:10px 0}body.reaction #lesson .step-nav button{font-size:12px;min-height:40px}body.reaction #overview{position:static;font-size:12px}body.reaction #lesson .note{display:none}body.reaction #molecule-key{order:2}body.reaction #protein-key,body.reaction #chemical-key{position:static;text-align:left;padding:4px 10px;min-height:0}body.reaction #protein-key strong{font-size:20px}body.reaction #chemical-key strong{font-size:14px}body.reaction #chemical-key span{font-size:12px}body.reaction #cell{position:relative;inset:auto;order:3;width:100%;height:300px;min-height:300px;flex:none}body.reaction #camera-controls{position:static;order:4;align-self:flex-end}body.reaction #center{display:block}body.reaction #caption{position:static;inset:auto;order:5;width:100%;height:auto;min-height:120px;overflow:visible}body.reaction footer{position:static;inset:auto;order:6;width:100%;min-height:0;padding:12px}body.reaction #playback{flex-wrap:wrap}body.reaction #playback button{min-height:40px;font-size:12px}body.reaction #playback label{font-size:12px}body.reaction .scrub{flex-basis:100%}body.reaction .motion{font-size:12px;display:flex}body.reaction #labels{pointer-events:none}}
/* Give the reaction its own larger stage; supporting content scrolls below it. */
@media(min-width:701px){
 body.reaction{--reaction-stage-height:clamp(360px,54dvh,620px);min-height:calc(var(--reaction-stage-height) + 460px);overflow-y:auto;overflow-x:hidden;}
 body.reaction #cell{position:absolute;top:164px;height:var(--reaction-stage-height);min-height:360px;}
 body.reaction #protein-key{position:absolute;top:92px;}
 body.reaction #chemical-key{position:absolute;top:calc(var(--reaction-stage-height) + 176px);bottom:auto;min-height:44px;}
 body.reaction #camera-controls{position:absolute;top:calc(var(--reaction-stage-height) + 178px);bottom:auto;}
 body.reaction #caption{position:absolute;top:calc(var(--reaction-stage-height) + 234px);bottom:auto;height:108px;overflow-y:auto;}
 body.reaction footer{position:absolute;top:calc(var(--reaction-stage-height) + 354px);bottom:auto;min-height:84px;}
}
@media(max-width:700px){body.reaction #cell{height:420px;min-height:420px;}}
/* Reserve a complete heading block above the reaction; never overlap canvas. */
@media(min-width:701px){
 body.reaction #protein-key{top:90px;min-height:92px;padding:4px 12px;box-sizing:border-box;display:flex;flex-direction:column;gap:4px;line-height:1.3;}
 body.reaction #protein-key strong{font-size:26px;line-height:1.2;display:block;margin:0;}
 body.reaction #protein-key small,body.reaction #protein-key span{position:static;display:block;font-size:13px;line-height:1.35;margin:0;}
 body.reaction #cell{top:194px;}
 body.reaction #chemical-key{top:calc(var(--reaction-stage-height) + 206px);}
 body.reaction #camera-controls{top:calc(var(--reaction-stage-height) + 208px);}
 body.reaction #caption{top:calc(var(--reaction-stage-height) + 270px);}
 body.reaction footer{top:calc(var(--reaction-stage-height) + 390px);}
 body.reaction{min-height:calc(var(--reaction-stage-height) + 496px);}
}