@font-face{font-family:Nunito;src:url('/simulations/vendor/fonts/nunito-800-latin.woff2') format('woff2');font-weight:800;font-display:swap}
:root{--page:#f4f7f5;--panel:#fff;--sunken:#edf3f0;--ink:#2b2118;--muted:#5a4c3e;--blue:#2f6da8;--red:#d9432b;--amber:#f2b544;--green:#4e9a6b;--border:#d2dcd5;--font:system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:var(--font);background:var(--page);color:var(--ink)}body{overflow:hidden}#lab{height:100%;display:flex;flex-direction:column;padding:14px;gap:12px}header{display:flex;gap:12px;align-items:center;min-height:34px}h1{font:800 clamp(14px,2vw,22px) Nunito,var(--font);margin:0}.brand,.chip{font-size:11px;font-weight:800;white-space:nowrap;padding:6px 10px;border-radius:99px;background:#e8f3ec;border:1.5px solid var(--ink)}.chip{background:var(--panel)}#workspace{display:grid;grid-template-columns:245px minmax(0,1fr) 250px;gap:12px;flex:1;min-height:0}.card{background:var(--panel);border:1.5px solid var(--ink);border-radius:16px;padding:14px;overflow:auto}h2{font-size:11px;font-weight:800;letter-spacing:.06em;margin:0 0 12px;color:var(--muted)}.control{background:var(--sunken);padding:10px;border-radius:12px;margin-bottom:10px}.control label{display:flex;justify-content:space-between;gap:8px;font-size:13px;font-weight:700}.control output{color:var(--blue);white-space:nowrap}.control input{width:100%;height:28px;accent-color:var(--green);cursor:pointer}.control select{width:100%;margin-top:8px;min-height:40px;border:1.5px solid var(--ink);border-radius:9px;padding:6px;background:var(--panel);font:700 13px var(--font);color:var(--ink)}button{font:700 13px var(--font);color:var(--ink);background:var(--panel);border:1.5px solid var(--ink);border-radius:11px;padding:9px 12px;min-height:42px;cursor:pointer}button:hover{background:var(--sunken)}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:3px}#actions,#toolbar{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}#actions button{background:var(--green);color:#fff}#experiment{display:flex;flex-direction:column;min-height:0;min-width:0;gap:8px}#visual-stage{position:relative;flex:1;min-height:180px;background:linear-gradient(160deg,#edf6f5,#f8faf9);border:1px solid var(--border);border-radius:16px;overflow:hidden}#canvas2d,#scene3d{width:100%;height:100%;position:absolute;inset:0}#scene3d canvas{display:block;touch-action:none}#graph{width:100%;height:155px;flex:none;background:var(--panel);border:1px solid var(--border);border-radius:13px}.camera{position:absolute;bottom:10px;left:10px;display:flex;flex-wrap:wrap;gap:5px}.camera button{padding:6px 9px;font-size:11px;min-height:36px}.legend{font-size:11px;color:var(--muted);min-height:16px;line-height:1.4}dl{margin:0}dl div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border);padding:10px 0}dt{font-size:12px;color:var(--muted)}dd{margin:0;font-size:14px;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}.formula{font-weight:700;font-size:13px;line-height:1.5;overflow-wrap:anywhere}.investigate{margin-top:18px;padding-top:12px;border-top:1px solid var(--border)}p{font-size:12px;line-height:1.55}summary{font-weight:700;font-size:12px;cursor:pointer;padding:10px 0}#status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}html[data-kb-host=offload] #lab{padding:8px}html[data-kb-host=offload] #workspace{grid-template-columns:minmax(0,1fr)}html[data-kb-host=offload] header{display:none}html[data-kb-host=offload] #observations{display:none}html[data-kb-host=offload] #camera{display:none}
@media(max-width:900px){#workspace{grid-template-columns:200px minmax(0,1fr)}#observations{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:200px}#observations h2{grid-column:1/-1}#observations dl{grid-row:2/5}.investigate{margin-top:0}#graph{height:130px}}
@media(max-width:600px){body{overflow:auto}#lab{height:auto;min-height:100%;padding:8px;gap:8px}header{flex-wrap:wrap;gap:6px}.brand{display:none}#workspace{display:flex;flex-direction:column;gap:8px}#experiment{order:-1}#visual-stage{height:300px;flex:none}#graph{height:150px}#setup{display:grid;grid-template-columns:1fr 1fr;gap:8px}#setup h2,#formula{grid-column:1/-1}#observations{display:block;max-height:none}.camera{right:8px}.camera button{flex:1}html[data-kb-host=offload] #lab{height:100%;min-height:0}html[data-kb-host=offload] #workspace{height:100%;display:block}html[data-kb-host=offload] #experiment{height:100%}html[data-kb-host=offload] #visual-stage{flex:1;height:auto;min-height:130px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
#live-readouts dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:7px}#live-readouts dl div{display:block;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:7px 10px}#live-readouts dt{font-size:10px;margin-bottom:3px}#live-readouts dd{text-align:start;font-size:13px}