* { margin:0; padding:0; box-sizing:border-box; }html,body { width:100%; height:100%; overflow:hidden; font-family:'Segoe UI','Malgun Gothic',sans-serif; background:#070b16; color:#e8eefc; }#view3d { position:fixed; inset:0; display:block; }#view3d canvas { display:block; width:100%; height:100%; }/* Loading */#loading{position:fixed;inset:0;background:#070b16;z-index:99;display:flex;flex-direction:column;  align-items:center;justify-content:center;gap:18px;color:#9fb4d8;}#loading .spin{width:44px;height:44px;border-radius:50%;border:4px solid #1c2a4a;border-top-color:#58c4ff;animation:sp 1s linear infinite;}@keyframes sp{to{transform:rotate(360deg)}}/* Top bar */#topbar{position:fixed;top:0;left:0;right:0;height:64px;display:flex;align-items:center;gap:16px;  padding:0 20px;background:linear-gradient(180deg,rgba(7,11,22,.92),rgba(7,11,22,.55) 80%,transparent);z-index:10;pointer-events:none;}#topbar>div:first-child{pointer-events:auto}#topbar h1{font-size:21px;font-weight:800;letter-spacing:.5px;color:#fff;}#topbar h1 span{font-size:12px;font-weight:500;color:#8fa8cf;margin-left:8px;letter-spacing:0;}#topbar .src{font-size:11px;color:#64789e;margin-top:2px;}.chip{background:rgba(13,24,48,.85);border:1px solid #23375f;border-radius:10px;padding:8px 14px;  font-size:14px;font-weight:600;white-space:nowrap;pointer-events:auto;box-shadow:0 2px 14px rgba(0,0,0,.35);}.chip b.k{color:#58c4ff}.chip b.p{color:#ffab5e}.chip small{color:#7c92b8;font-weight:400}/* The reaction equation is a key teaching element — render it as a large caption   pinned top-right (below the topbar), and make it glow while the slow-motion   transition-state window plays. */#equation{position:fixed;top:70px;right:20px;z-index:11;max-width:min(500px,calc(100vw - 40px));  font-size:21px;font-weight:700;line-height:1.5;text-align:right;white-space:normal;  background:rgba(10,18,38,.78);border:1px solid #2c4070;border-radius:12px;  padding:10px 16px;backdrop-filter:blur(8px);  box-shadow:0 4px 22px rgba(0,0,0,.4);transition:box-shadow .25s,border-color .25s;}#equation small{font-size:12.5px;display:block;margin-top:2px;}body.slowmo #equation{box-shadow:0 0 30px rgba(255,179,71,.55),0 4px 22px rgba(0,0,0,.4);  border-color:#ffb347;}body.slowmo #equation .k{color:#ffe3a1;}body.slowmo #equation b.k{color:#ffe3a1;}#btnRef{margin-left:auto;pointer-events:auto;background:#12203c;color:#bcd0f2;border:1px solid #27406e;  border-radius:8px;padding:7px 12px;cursor:pointer;font-size:12px;}#btnRef:hover{background:#1a2f56}/* Enzyme prev/next navigation — lives in the topbar, clearly distinct from the   left-box animation step controls (btnPrev/btnPlay/btnNext). Built by js/enzymenav.js. */#enznav{display:flex;align-items:center;gap:6px;pointer-events:auto;margin-left:8px;}#enznav .enz{background:#101d38;color:#c6d6f4;border:1px solid #26395f;border-radius:8px;  padding:6px 10px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:filter .15s;}#enznav .enz.prev{color:#9fc3ff;border-color:#1e3a6b;}#enznav .enz.next{color:#ffca7a;border-color:#4d3a1a;}#enznav .enz.cur{background:transparent;border-color:transparent;color:#fff;font-weight:800;  font-size:13px;cursor:default;text-transform:uppercase;letter-spacing:.3px;}#enznav .enz:hover{filter:brightness(1.3);}#enznav .enz.prev:hover{background:#17305c;}#enznav .enz.next:hover{background:#3a2c16;}/* Left panel */#panel{position:fixed;top:72px;left:14px;width:308px;max-height:calc(100% - 210px);z-index:10;  background:rgba(11,17,33,.86);backdrop-filter:blur(10px);border:1px solid #20304f;border-radius:14px;  padding:12px;display:flex;flex-direction:column;gap:10px;overflow:hidden;}#tabs{display:flex;gap:6px;}#tabs button{flex:1;min-width:0;padding:8px 4px;border-radius:8px;border:1px solid #263a63;background:#0e1830;color:#93a9cf;  cursor:pointer;font-size:12px;font-weight:600;}#tabs button.on{color:#fff;}#tabs button.on[data-tab=overview]{background:#1c2c52;border-color:#3a5a9e}#tabs button.on.k{background:#12365c;border-color:#58c4ff}#tabs button.on.p{background:#4d2c14;border-color:#ffab5e}#tabs button:hover{filter:brightness(1.25)}#steps{list-style:none;overflow-y:auto;flex:1;min-height:60px;padding-right:2px;}#steps li{padding:7px 9px;border-radius:8px;font-size:12.5px;color:#9db1d4;cursor:pointer;line-height:1.45;  border-left:3px solid transparent;margin-bottom:3px;}#steps li:hover{background:#15234177}#steps li.cur{background:#16264a;color:#fff;border-left-color:#58c4ff;font-weight:700;}#steps.pase li.cur{border-left-color:#ffab5e;}#steps li.done{color:#5f7699;}#steps li b{display:block;font-size:12.5px;}#steps li span{font-size:11px;color:#6d84aa;}#controls{border-top:1px solid #1d2c4d;padding-top:10px;display:flex;flex-direction:column;gap:8px;}.row{display:flex;gap:6px;align-items:center;}.row button{flex:1;padding:8px;border-radius:8px;border:1px solid #26395f;background:#101d38;color:#c6d6f4;  cursor:pointer;font-size:12.5px;font-weight:600;}.row button.primary{background:#155a94;border-color:#2f7fc4;}.row button.primary.pause{background:#7a4a12;border-color:#b9742a;}.row.cams button.k{border-color:#1e4a74;} .row.cams button.p{border-color:#6e4520;}.row button:hover{filter:brightness(1.3);}label{font-size:11.5px;color:#8ea4ca;display:flex;align-items:center;gap:5px;cursor:pointer;}input[type=range]{width:130px;accent-color:#58c4ff;}.opts{flex-wrap:wrap;gap:8px 12px;}/* Bottom narration */#narration{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);width:min(760px,calc(100% - 40px));  background:rgba(11,17,33,.88);backdrop-filter:blur(10px);border:1px solid #24365c;border-radius:14px;  padding:12px 18px 13px;z-index:10;box-shadow:0 6px 30px rgba(0,0,0,.45);}#narStep{font-size:11.5px;color:#5f79a3;font-weight:700;letter-spacing:.12em;}#narration h2{font-size:17px;margin:2px 0 4px;color:#fff;}#narText{font-size:14px;line-height:1.65;color:#b7c8e6;max-height:38vh;overflow-y:auto;}#narText .hl-k{color:#6fc9ff;font-weight:700} #narText .hl-p{color:#ffb46e;font-weight:700} #narText .hl-w{color:#fff;font-weight:700}#narText em{color:#ffd479;font-style:normal;font-weight:600}#narText hr{border:none;border-top:1px dashed #2a3a60;margin:8px 0;}#narText h4{font-size:12.2px;margin:7px 0 3px;color:#cfe2ff;letter-spacing:.07em;text-transform:uppercase;}#narText ul{margin:2px 0 6px;padding-left:17px;}#narText li{margin:1px 0;}#narText .fid{color:#98a7c4;}/* Collapsible narration — collapse to a slim chip so it never hides the molecule */#narration.collapsible{cursor:pointer;}#narration.collapsible .nar-toggle{position:absolute;top:6px;right:8px;width:20px;height:20px;line-height:18px;  text-align:center;border-radius:6px;border:1px solid #3d5384;background:rgba(20,30,55,.7);color:#9fb6dd;  font-size:14px;font-weight:800;cursor:pointer;}#narration.collapsible .nar-toggle:hover{background:#2a3c68;color:#fff;}#narration.collapsed{padding:6px 12px;width:auto;max-width:340px;height:26px;overflow:hidden;cursor:pointer;}#narration.collapsed h2,#narration.collapsed #narText,#narration.collapsed .nar-toggle{display:none;}#narration.collapsed #narStep{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}/* References */#refPanel{position:fixed;top:72px;right:14px;width:min(430px,calc(100% - 28px));max-height:calc(100% - 100px);  overflow-y:auto;background:rgba(11,17,33,.94);border:1px solid #24365c;border-radius:14px;padding:14px 16px;  z-index:20;display:none;}#refPanel.open{display:block;}#refPanel h3{font-size:14px;color:#fff;margin-bottom:8px;display:flex;justify-content:space-between;}#refPanel h3 button{background:none;border:none;color:#7f96bd;cursor:pointer;font-size:14px;}#refPanel ul{list-style:none;display:flex;flex-direction:column;gap:9px;}#refPanel li{font-size:11.6px;line-height:1.55;color:#a9bcdd;}#refPanel a{color:#6fc9ff;text-decoration:none;} #refPanel a:hover{text-decoration:underline;}#refPanel .note{margin-top:10px;font-size:10.8px;color:#66809f;line-height:1.55;border-top:1px dashed #24365c;padding-top:8px;}/* Legend */#legend{position:fixed;bottom:110px;right:14px;display:flex;flex-direction:column;gap:5px;font-size:11px;color:#8ea4ca;z-index:5;}#legend span{display:flex;align-items:center;gap:6px;}#legend i{width:11px;height:11px;border-radius:3px;display:inline-block;}/* 3D label overlays */.lbl{position:fixed;pointer-events:none;transform:translate(-50%,-120%);font-size:11px;font-weight:700;  padding:2px 7px;border-radius:6px;background:rgba(10,16,32,.82);border:1px solid rgba(90,130,200,.45);  white-space:nowrap;z-index:6;text-shadow:0 1px 2px #000;transition:opacity .22s;}/* callout pointer — fixed labels hang their tip on the residue atom below */.lbl::after{content:'';position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);  border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid currentColor;opacity:.85;}.lbl.badge::after{display:none;}/* while a reaction animation plays, hide stationary residue/domain labels so they   don't block the view; they fade back in the instant playback stops or finishes. */#labelLayer.playing .lbl.fixed{opacity:0;transition:opacity .22s;}/* Rule 22 — a builder may pin specific residue labels back during an arrow step   (H.PINRES) so the "which residue" link stays obvious while playback runs. */#labelLayer.playing .lbl.fixed.force{opacity:1;transition:opacity .12s;}/* Rule 22b — a builder retired a residue label for a step (H.RESHIDE): hide it even   against a leftover/stale force pin, until the step's own cleanup restores it. */#labelLayer .lbl.res.hid{opacity:0!important;}/* Smart-ligand policy: substrate labels hide while playback runs (clean view) but a   builder may pin the participating ligand(s) back with H.PINLIG — move-in/out labels   follow their molecule, and at a name-switch beat (e.g. NAD⁺→NADH) the label stays   visible the whole step so the "what becomes what" is readable. */#labelLayer.playing .lbl.lig{opacity:0;transition:opacity .22s;}#labelLayer.playing .lbl.lig.force{opacity:1;transition:opacity .12s;}.lbl.res{color:#cfe2ff;border-color:#33507f;}.lbl.nuc{color:#ffc98a;border-color:#8a5a2a;background:rgba(40,24,8,.85);}.lbl.lig{color:#aef0c5;border-color:#2c6e46;}.lbl.dist{color:#ffe08a;border-color:#8a7a2a;}.lbl.water{color:#9fd8ff;border-color:#2a5a8a;}/* Rule 30 — in-scene badge for claims that cannot be drawn directly (absence of a   general base, "no SN1 branch", TS-averaging etc.). Green = checked/affirmative note. */.lbl.badge{color:#b5f7c9;border-color:#2f7d4f;background:rgba(15,40,24,.88);border-style:dashed;  white-space:normal;max-width:250px;line-height:1.3;text-align:center;}/* Rule 30 — slow-motion (engine TL.tick sets body.slowmo for steps with slow:{a,b,f}).   A SLOW-MO badge plus warm emphasized captions so students know the slowdown is on   purpose and can read the transition state instead of catching a blur. */#slowmoBadge{display:none;position:fixed;top:14px;right:14px;z-index:1300;align-items:center;gap:8px;  font:600 13px/1 system-ui,'Segoe UI',sans-serif;color:#fff;letter-spacing:.02em;  background:rgba(170,58,18,.92);border:1px solid #ffb347;border-radius:20px;padding:7px 15px;  box-shadow:0 4px 16px rgba(120,40,0,.45);}body.slowmo #slowmoBadge{display:flex;animation:slowmoPulse 1.2s ease-in-out infinite;}@keyframes slowmoPulse{0%,100%{box-shadow:0 4px 16px rgba(120,40,0,.45);}  50%{box-shadow:0 4px 30px rgba(255,179,71,.95);}}body.slowmo .lbl:not(.badge){box-shadow:0 0 12px rgba(255,205,120,.95),0 0 2px #ffd67a;  border-color:#ffd67a;transform:translate(-50%,-120%) scale(1.04);  transition:opacity .22s,transform .25s,box-shadow .25s,border-color .25s;}body.slowmo .narr-box{box-shadow:0 0 26px rgba(255,179,71,.55);border-color:#ffb347;}/* Rule 30 — pedagogical honesty: an always-on scope note (conceptual motion,   not a measured timescale) so the reconstruction is never read as a real   kinetic simulation. Lives in the topbar flow; never occludes the reaction. */#scopeBadge{pointer-events:auto;align-self:center;font:500 11.5px/1.35 system-ui,'Segoe UI',sans-serif;  color:#9fb4d8;letter-spacing:.01em;white-space:nowrap;opacity:.9;  background:rgba(13,24,48,.55);border:1px solid #23375f;border-radius:20px;padding:6px 12px;}@media (max-width:1100px){#scopeBadge{display:none}}::-webkit-scrollbar{width:8px} ::-webkit-scrollbar-thumb{background:#22345a;border-radius:4px}@media (max-width:900px){ #panel{width:250px} #legend{display:none} #equation{font-size:17px;top:60px;} }@media (max-width:720px){  #topbar{height:54px;padding:0 12px;}  #topbar h1{font-size:16px;}  #topbar h1 span{display:block;margin-left:0;}  #topbar .src{display:none;}  #enznav .enz{padding:4px 7px;font-size:11px;}  #enznav .enz.cur{font-size:11.5px;}  #panel{top:60px;left:8px;width:100%;max-width:calc(100vw - 16px);max-height:38vh;overflow-y:auto;    backdrop-filter:blur(10px);}  #narration{width:calc(100% - 20px);left:10px;right:10px;transform:none;bottom:8px;    padding:10px 12px 10px;font-size:12px;}  #narration.collapsed{max-width:calc(100% - 20px);}  #narStep{font-size:10px;}  #narText{font-size:11.5px;}  #refPanel{top:60px;right:8px;width:calc(100% - 16px);max-height:calc(100vh - 120px);}  #topbar>div:first-child{pointer-events:auto;}}@media (max-width:480px){ #enznav{display:none;} #topbar #equation{max-width:calc(100vw - 16px);right:8px;font-size:14px;top:58px;} }