*{margin:0;padding:0;box-sizing:border-box}
body{overflow:hidden;background:#0d1117;font-family:'Segoe UI',system-ui,sans-serif;color:#c9d1d9}
canvas{display:block}

.back-home{
  position:fixed;left:12px;top:12px;z-index:120;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(13,17,23,.78);
  color:#e6edf3;text-decoration:none;font-weight:800;font-size:12px;
  backdrop-filter:blur(6px);
}
.back-home:hover{background:rgba(13,17,23,.92);border-color:#58a6ff}

#info{
  position:absolute;top:20px;left:20px;max-width:260px;line-height:1.6;font-size:13px;
  background:rgba(13,17,23,.85);border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:18px;backdrop-filter:blur(6px);
}
#info h1{font-size:17px;color:#e6edf3;margin-bottom:6px}
#info p{color:#8b949e;font-size:12px;margin-bottom:10px}
.legend{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:11px;color:#8b949e}
.legend-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,.15)}
.dot-chiral{background:#e74c3c}
.dot-c{background:#6a6a6a}
.dot-h{background:#dce6f0}
.dot-mirror{background:#3498db}
.c-chiral{color:#e74c3c}
.c-orange{color:#f5a623}
.c-lemon{color:#e8d44d}
#controls{
  position:absolute;top:20px;right:20px;width:270px;
  background:rgba(13,17,23,.88);border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:18px;backdrop-filter:blur(6px);
  max-height:calc(100vh - 40px);overflow-y:auto;
}
#controls h2{font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:#8b949e;margin-bottom:14px}
.cg{margin-bottom:13px}
.cg label{display:block;font-size:11px;margin-bottom:5px;color:#8b949e}
.cg label span{color:#58a6ff}
input[type=range]{width:100%;-webkit-appearance:none;height:4px;background:#30363d;border-radius:2px;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:#58a6ff;border-radius:50%;cursor:pointer}
button{
  width:100%;padding:9px 12px;border:1px solid #30363d;border-radius:6px;
  background:#161b22;color:#c9d1d9;font-size:12px;cursor:pointer;
  transition:all .15s;font-family:inherit;
}
button:hover{background:#21262d;border-color:#58a6ff}
button.active{background:#1f6feb;border-color:#58a6ff;color:#fff}
#bioPanel{
  position:absolute;bottom:20px;left:20px;width:280px;
  background:rgba(13,17,23,.88);border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:16px;backdrop-filter:blur(6px);
}
#bioPanel h3{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#8b949e;margin-bottom:10px}
.bio-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:12px}
.bio-icon{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:bold;color:#000}
.bio-name{color:#e6edf3;font-weight:600;min-width:90px}
.bio-desc{color:#8b949e;font-size:11px}
.bio-note{margin-top:6px;font-size:10px;color:#8b949e;line-height:1.5;border-top:1px solid rgba(255,255,255,.06);padding-top:8px}
#polPanel{
  display:none;
  position:absolute;bottom:20px;right:20px;width:280px;
  background:rgba(13,17,23,.88);border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:16px;backdrop-filter:blur(6px);
}
#polPanel h3{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#8b949e;margin-bottom:10px}
#polCanvas{display:block;margin:0 auto;border-radius:6px;background:rgba(0,0,0,.3)}
#polAngle{text-align:center;font-size:13px;color:#58a6ff;margin-top:8px;font-weight:600}

.pol-wrap{margin-bottom:10px}
.pol-label{display:block;font-size:11px;margin-bottom:5px;color:#8b949e}
.pol-val{color:#58a6ff}
.pol-range{width:100%;-webkit-appearance:none;height:4px;background:#30363d;border-radius:2px;outline:none}

.drawer-legend{margin-top:14px}
#status{
  position:absolute;bottom:220px;left:50%;transform:translateX(-50%);
  font-size:12px;color:#f0883e;opacity:0;transition:opacity .3s;
  pointer-events:none;text-align:center;white-space:nowrap;
}
#status.show{opacity:1}
#header,#toolbar,#drawer,#drawerBackdrop{display:none}
@media(max-width:768px){
  #info,#controls{display:none!important}
  #bioPanel,#polPanel{display:none!important}
  #bioPanel.mobile-show,#polPanel.mobile-show{display:block!important}
  #bioPanel{position:fixed!important;top:56px!important;bottom:auto!important;left:50%!important;transform:translateX(-50%)!important;right:auto!important;width:calc(100% - 32px)!important;max-width:340px!important;z-index:95!important}
  #polPanel{position:fixed!important;top:56px!important;bottom:auto!important;left:50%!important;transform:translateX(-50%)!important;right:auto!important;width:calc(100% - 32px)!important;max-width:340px!important;z-index:95!important}
  #header{display:flex!important;position:fixed;top:0;left:0;right:0;height:48px;background:rgba(13,17,23,.92);border-bottom:1px solid rgba(255,255,255,.08);align-items:center;padding:0 12px;z-index:100;backdrop-filter:blur(6px)}
  #header h1{font-size:14px;color:#e6edf3;margin-left:8px;font-weight:600}
  #header .hamburger{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#c9d1d9;cursor:pointer;border:none;background:none}
  #toolbar{display:flex!important;position:fixed;bottom:0;left:0;right:0;height:56px;background:rgba(13,17,23,.92);border-top:1px solid rgba(255,255,255,.08);align-items:center;justify-content:space-around;padding:0 2px;z-index:100;backdrop-filter:blur(6px)}
  #toolbar button{min-width:40px;height:40px;border-radius:8px;font-size:10px;padding:4px 2px;flex:1;margin:0 2px;max-width:58px;display:flex;align-items:center;justify-content:center}
  #drawerBackdrop{display:none;position:fixed;top:48px;left:0;right:0;bottom:56px;background:rgba(0,0,0,.35);z-index:85}
  #drawerBackdrop.open{display:block}
  #drawer{display:block!important;position:fixed;top:48px;left:-270px;width:260px;bottom:56px;background:rgba(13,17,23,.95);border-right:1px solid rgba(255,255,255,.08);padding:16px;z-index:90;transition:left .3s ease;overflow-y:auto;backdrop-filter:blur(6px)}
  #drawer.open{left:0}
  #status{bottom:70px!important}
}