* { 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; }

/* 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}
#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;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:11px;color:#5f79a3;font-weight:700;letter-spacing:.12em;}
#narration h2{font-size:15.5px;margin:2px 0 4px;color:#fff;}
#narText{font-size:12.8px;line-height:1.6;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 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;}
/* 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;}
.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;}

::-webkit-scrollbar{width:8px} ::-webkit-scrollbar-thumb{background:#22345a;border-radius:4px}
@media (max-width:900px){ #panel{width:250px} #legend{display:none} }
@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:30vw;} }