:root{--bg:#050608;--panel:#0d0f13;--line:#1e232b;--fg:#e9e6df;--muted:#8a909a;--orange:#ff9e00;--blue:#1d9bf0;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:14px/1.45 var(--sans);overflow:hidden}
body{display:flex}
#stage{position:relative;flex:1;min-width:0;height:100vh}
#stage canvas{display:block;width:100%;height:100%;cursor:grab}
#stage canvas:active{cursor:grabbing}
#hud{position:absolute;left:22px;top:18px;pointer-events:none;text-shadow:0 1px 6px #000}
#hudKicker{font:600 11px var(--mono);letter-spacing:.14em;color:var(--muted)}
#hudState{font:800 64px/1 var(--sans);margin:6px 0 2px}
#hudQN{font:500 15px var(--mono);color:#d8d4cc}
#hudAtom{margin-top:10px;font-weight:600}
#hudSize,#hudEnergy{font:13px var(--mono);color:#c9c4bb}
#legend{position:absolute;left:22px;bottom:20px;font:12px var(--mono);color:#d0ccc4;pointer-events:none}
#legend .lg-title{color:var(--muted);letter-spacing:.1em;font-size:10px;margin-bottom:4px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:-1px}
.dot.o{background:var(--orange)}.dot.b{background:var(--blue)}.dot.w{background:#fff}
#fps{position:absolute;right:12px;top:10px;font:11px var(--mono);color:#5d636c}
#hint{position:absolute;right:14px;bottom:14px;font:11px var(--mono);color:#59606a}
#panel{width:390px;flex:none;height:100vh;overflow-y:auto;background:var(--panel);border-left:1px solid var(--line);padding:16px 18px 30px}
#panel h1{font-size:19px;margin:0 0 4px}
.sub{color:var(--muted);margin:0 0 10px;font-size:13px}
section{border-top:1px solid var(--line);padding:12px 0 10px}
h2{font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#b7b2a9;margin:0 0 10px;display:flex;align-items:center;gap:8px}
select{width:100%;background:#151920;color:var(--fg);border:1px solid #2a3039;border-radius:6px;padding:7px 8px;font:inherit}
.row{display:grid;grid-template-columns:92px 1fr;align-items:center;gap:10px;margin:6px 0}
.row label{font:12px var(--mono);color:#cfcac2}
.row b{color:var(--orange);font-weight:600}
input[type=range]{width:100%;accent-color:var(--orange)}
.chk{display:flex;align-items:center;gap:8px;font-size:13px;margin:6px 0;cursor:pointer;text-transform:none;letter-spacing:0;color:var(--fg);font-family:var(--sans)}
h2 .chk{margin:0;font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#b7b2a9}
.pill{font:600 12px var(--mono);background:#1c2129;color:var(--fg);padding:1px 8px;border-radius:10px;letter-spacing:0;text-transform:none}
.pill:empty{display:none}
.note{color:var(--muted);font-size:12.5px;margin:8px 0 0}
#scenarioText{color:#d6d1c8;font-size:13px}
.badge{background:#3a2a00;color:#ffcf6b;border:1px solid #6b4d00;border-radius:6px;padding:6px 8px;font:600 11px var(--mono);margin:8px 0 0}
.hidden{display:none!important}
#explain p{margin:0 0 8px}
#explain b{color:#fff}
#explain .o{color:var(--orange)}#explain .b{color:var(--blue)}
.card{background:#11151b;border:1px solid var(--line);border-radius:8px;padding:6px 10px 8px;margin:0 0 10px}
.card.warn{border-color:#6b4d00;background:#1d1606}
.card .eq{overflow-x:auto;overflow-y:hidden;font-size:13px}
.card .katex-display{margin:.5em 0}
.cap{margin:0;color:#aaa59c;font-size:12.5px}
footer{border-top:1px solid var(--line);padding-top:12px;color:var(--muted);font-size:12px}
footer a{color:#d9a24a}
@media (max-width:900px){body{flex-direction:column;overflow:auto}#stage{height:62vh;flex:none}#panel{width:100%;height:auto;border-left:0}html,body{overflow:auto}}
/* Tesla Lab + page nav */
.pagenav{display:flex;gap:10px;align-items:center;font:600 12px var(--mono);margin:0 0 12px}
.pagenav a{color:var(--orange);text-decoration:none;border:1px solid #3a2a00;background:#1d1606;padding:4px 9px;border-radius:6px}
.pagenav a:hover{background:#2a2009}
.pagenav .here{color:var(--muted)}
#stage>canvas#cv{cursor:default}
.tesla-title{font:800 46px/1.05 var(--sans);margin:6px 0 2px}
.tesla-sub{font:500 14px var(--sans);color:#c9c4bb;margin-bottom:8px}
.tesla-line{font:13px var(--mono);color:#d8d4cc}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tab,.btn{background:#151920;color:var(--fg);border:1px solid #2a3039;border-radius:6px;padding:7px 8px;font:600 12.5px var(--sans);cursor:pointer}
.tab:hover,.btn:hover{border-color:#4a5260}
.tab.active{background:#2a1f05;border-color:var(--orange);color:#ffd28a}
.btn{width:100%;margin-top:8px}
.ctl .row{grid-template-columns:118px 1fr}
/* Einstein Lab */
.tab.wide{grid-column:1/-1}
.ebadge{display:inline-block;margin:10px 0 0;padding:3px 9px;border-radius:6px;font:700 11px var(--mono);letter-spacing:.1em;border:1px solid}
.ebadge.proven{background:#0b2414;color:#4ade80;border-color:#1f6b3a}
.ebadge.theory{background:#1b1430;color:#c084fc;border-color:#5b3a8f}
.ebadge.speculative{background:#2a1010;color:#f87171;border-color:#7f2a2a}
#hud .ebadge{margin:0 0 8px}
#simBadgeNote{margin-top:6px}
.pagenav{flex-wrap:wrap}
/* Folding Lab */
.fold-stage{display:flex;flex-direction:column;padding:96px 14px 10px 14px;gap:8px;overflow:hidden}
#foldHud{position:absolute;left:22px;top:12px;pointer-events:none}
.fold-title{font-size:38px}
#arena{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;flex:1 1 55%;min-height:0;overflow:auto}
.racer{position:relative;background:#0b0d11;border:1px solid var(--line);border-radius:8px;min-height:170px}
.racer canvas{width:100%;height:100%;display:block}
.racer .rl{position:absolute;left:8px;top:6px;font:600 11.5px var(--mono);text-shadow:0 1px 4px #000}
.racer .rr{position:absolute;right:8px;top:6px;font:700 15px var(--mono)}
.racer .rb{position:absolute;left:8px;bottom:5px;font:11px var(--mono);color:var(--muted)}
.racer.exp{border-color:#3d2f63}
.tagx{font:700 9.5px var(--mono);background:#2a1f48;color:#c8b6ff;border-radius:4px;padding:1px 5px;margin-left:4px}
.tagb{font:700 9.5px var(--mono);background:#11283a;color:#8fd0ff;border-radius:4px;padding:1px 5px;margin-left:4px}
#chartWrap{flex:0 0 36%;background:#0b0d11;border:1px solid var(--line);border-radius:8px;min-height:180px}
#chartWrap canvas,#quantumWrap canvas{width:100%;height:100%;display:block}
#quantumWrap{flex:1;background:#0b0d11;border:1px solid var(--line);border-radius:8px}
.txt{width:100%;background:#151920;color:var(--fg);border:1px solid #2a3039;border-radius:6px;padding:6px 8px;font:12px var(--mono)}
.btnrow{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.btn.primary{background:#3a2a00;border-color:#6b4d00;color:#ffcf6b}
.racer-row{border:1px solid var(--line);border-radius:6px;padding:4px 8px;margin:0 0 6px}
.racer-row summary{cursor:pointer;font-size:13px;display:flex;align-items:center;gap:6px}
.racer-row .sw{display:inline-block;width:10px;height:10px;border-radius:2px}
table.lb{width:100%;border-collapse:collapse;font:11.5px var(--mono)}
table.lb th{color:var(--muted);text-align:left;font-weight:600;border-bottom:1px solid var(--line);padding:3px 4px}
table.lb td{padding:3px 4px;border-bottom:1px solid #161a20}
table.lb tr.top td{color:#ffcf6b}
.tablewrap{overflow-x:auto}
.tab.on{background:#3a2a00;border-color:#6b4d00;color:#ffcf6b}
.ebadge.myth{background:#2a1a05;color:#fbbf24;border-color:#7a5208}
/* ---------- shared top nav (nav.js) ---------- */
body{padding-top:48px}
#stage,#panel{height:calc(100vh - 48px)}
.topnav{position:fixed;top:0;left:0;right:0;height:48px;z-index:50;display:flex;align-items:center;gap:6px;margin:0;padding:0 10px;background:#0a0c10f2;border-bottom:1px solid #2a3039;backdrop-filter:blur(6px);overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.topnav::-webkit-scrollbar{display:none}
.topnav .brand{font:800 13px var(--sans);color:#fff;margin-right:6px;text-decoration:none;border:0;background:none;padding:0}
.topnav a,.topnav .here{font:600 13px var(--sans);padding:7px 11px;border-radius:8px;text-decoration:none;border:1px solid transparent;flex:none}
.topnav a{color:#cfcac2;background:none;border-color:transparent}
.topnav a:hover{background:#1a1f27}
.topnav .here{color:#ffd28a;background:#2a1f05;border-color:var(--orange)}
.topnav .navspacer{flex:1}
.topnav button{flex:none;font:600 12px var(--sans);background:#151920;color:var(--fg);border:1px solid #2a3039;border-radius:8px;padding:6px 10px;cursor:pointer}
.modebtn b{color:var(--orange)}
/* sub-tabs: clearer simulation picker */
.tabs .tab{padding:9px 8px;font-size:13px}
/* ---------- help layer (help.js) ---------- */
.helpcard{background:#0f1a24;border:1px solid #1f4460;border-radius:10px;padding:10px 12px;margin:8px 0 10px}
.helpcard h3{margin:0 0 4px;font:700 13px var(--sans);color:#8fd0ff}
.helpcard p{margin:4px 0;font-size:13px}
.helpcard ul{margin:4px 0 4px 18px;padding:0;font-size:13px}
.helpcard .why{color:#a7f3d0}
.labgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.labgrid a{display:block;background:#151920;border:1px solid #2a3039;border-radius:8px;padding:7px 8px;color:var(--fg);text-decoration:none;font-size:12px}
.labgrid a b{display:block;font-size:13px;color:#ffd28a}
.ihelp{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:#1f4460;color:#cfe9ff;font:700 10px var(--sans);margin-left:4px;cursor:help;vertical-align:1px}
.term{border-bottom:1px dotted #8fd0ff;cursor:help}
#tipbox{position:fixed;z-index:100;max-width:280px;background:#0b1620;color:#e9f4ff;border:1px solid #2f6a94;border-radius:8px;padding:8px 10px;font:13px/1.4 var(--sans);box-shadow:0 6px 24px #000a;pointer-events:none}
#glossary{position:fixed;inset:60px 10px 10px auto;width:min(420px,calc(100vw - 20px));z-index:90;background:#0d1117;border:1px solid #2f6a94;border-radius:12px;padding:12px 14px;overflow-y:auto;box-shadow:0 10px 40px #000c}
#glossary dt{font-weight:700;color:#8fd0ff;margin-top:8px}#glossary dd{margin:2px 0 0;font-size:13px;color:#d6d1c8}
#glossary input{width:100%;padding:7px;background:#151920;color:var(--fg);border:1px solid #2a3039;border-radius:6px}
body.simple .nerd-only{display:none!important}
@media (max-width:900px){#stage{height:58vh}#panel{height:auto}.topnav .brand{display:none}}
/* ---------- protein view ---------- */
#proteinWrap{flex:1;position:relative;background:#07090d;border:1px solid var(--line);border-radius:8px;min-height:300px}
#proteinWrap canvas{width:100%;height:100%;display:block}
.plabel{position:absolute;top:10px;font:600 12px var(--mono);color:#cfe9ff;text-shadow:0 1px 4px #000}
.plegend{position:absolute;left:10px;bottom:8px;font:12px var(--mono);color:#cfcac2}
.plegend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin:0 4px 0 10px;vertical-align:-1px}
/* ---------- mobile layout (≤640px): slim nav, compact HUD strip above the canvas, touch targets ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden}
@media (max-width:640px){
  body{padding-top:44px}
  .topnav{height:44px;gap:2px;padding:0 6px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);scroll-snap-type:x proximity}
  .topnav a,.topnav .here{font-size:13px;padding:8px 10px;min-height:36px;display:inline-flex;align-items:center;scroll-snap-align:center}
  .topnav .navspacer{flex:0 0 4px}
  .topnav button{padding:7px 9px;min-height:36px;font-size:12px}
  #glossary{inset:52px 8px 8px 8px;width:auto}
  #stage{display:flex;flex-direction:column;height:auto!important;min-height:0}
  #stage>canvas,#stage canvas#cv{order:2;width:100%;height:56vh!important;min-height:300px;flex:none}
  #hud{order:1;position:static;padding:8px 12px 6px;background:#07090d;border-bottom:1px solid var(--line);max-width:100%;overflow:hidden}
  #hudKicker{font-size:9.5px;letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #hudState{font-size:30px;margin:2px 0 0;display:inline-block;margin-right:8px}
  #hudQN{display:inline-block;font-size:12px}
  #hudAtom{margin-top:2px;font-size:13px}
  #hudSize,#hudEnergy,.tesla-line{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tesla-title,.fold-title{font-size:22px!important;line-height:1.1;margin:2px 0 0}
  .tesla-sub{font-size:12px;margin-bottom:2px}
  #hud .ebadge{font-size:10px}
  #legend{position:static;order:3;padding:6px 12px;font-size:11px}
  #hint{display:none}
  #fps{top:auto;bottom:6px;right:8px;font-size:10px;z-index:2}
  #panel{width:100%!important;padding:12px 12px 28px;height:auto!important}
  #panel h1{font-size:18px}
  p,li,.sub,.note,.cap{font-size:14px}
  .row{grid-template-columns:84px 1fr;gap:8px}
  .row label{font-size:12.5px}
  input[type=range]{height:28px}
  select,.btn,.tab,button{min-height:38px;font-size:14px}
  .tabs{grid-template-columns:1fr 1fr}
  .card .eq,.katex-display{overflow-x:auto;overflow-y:hidden;max-width:100%}
  img,svg,video,table,pre{max-width:100%}
  .labgrid{grid-template-columns:1fr 1fr}
  #chartWrap,#quantumWrap,#proteinWrap{order:4;width:100%;max-width:100%}
}
@media (max-width:640px){
  #hudKicker{display:none}
  .tesla-sub,#hudLine2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #hudLine2{display:none}
  #hud .ebadge{display:inline-block;margin:2px 0}
}
@media (max-width:640px){
  .fold-stage{padding:0 8px 8px!important;overflow:visible}
  #foldHud{position:static;padding:8px 4px 4px;pointer-events:auto}
  #arena{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));overflow:visible}
}
@media (max-width:640px){
  #hud .tesla-title{display:inline-block;margin-right:6px;vertical-align:middle;max-width:100%}
  #hud .ebadge{vertical-align:middle}
  #hud{padding:6px 12px 5px}
}