@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}

:root{--page:#f5f7f4;--ink:#283e43;--muted:#607271;--border:#dce4de;--sunken:#f1f5f2;--green:#477e70}body{font-size:14px}#lab{padding:18px;gap:16px}header{min-height:36px;gap:14px}.brand{border:0;background:#e6efe4;color:#466340;letter-spacing:.02em}.edition{margin-inline-start:auto;font-size:10px;letter-spacing:.15em;color:#71857c;white-space:nowrap}h1{font-size:19px}#workspace{grid-template-columns:220px minmax(0,1fr) 240px;gap:16px}.card{border:1px solid var(--border);border-radius:20px;padding:18px}h2{letter-spacing:.07em;color:#61766a}.control{padding:12px;background:#f2f5f0}.control label{font-size:12px}.control select{border:1px solid #cfdcd3;border-radius:10px;font-weight:500}button{border:1px solid #c9d7cf;border-radius:11px;font-size:12px;transition:background .15s,transform .15s}button:hover{background:#e7efe9}button:active{transform:translateY(1px)}button:disabled{opacity:.4;cursor:not-allowed}#actions button{background:#e6eee6;color:#365d4c;min-height:40px;flex:1 1 100%;text-align:start}#next{background:#477e70!important;color:white!important}#experiment{border:1px solid var(--border);border-radius:22px;background:#fcfdfb;padding:18px;gap:10px;overflow:auto}#stage-heading{display:flex;gap:10px;align-items:center;justify-content:space-between;min-height:28px}#eyebrow{font-size:13px;font-weight:700;color:#4a6c62}#stage-count{background:#edf2ec;border:1px solid #dbe5db;border-radius:8px;padding:5px 9px;font-size:12px;font-weight:700;white-space:nowrap;direction:ltr}#visual-stage{border:0;background:#fcfdfb;border-radius:14px;min-height:250px;flex:1;overflow:visible}#scene{display:block;width:100%;height:100%;min-height:250px;max-height:570px;direction:ltr}#scene text{font-weight:600}#caption{font-size:11px;color:#647975;line-height:1.55;min-height:30px}#scene-tools{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}#scene-tools:empty{display:none}#scene-tools button{min-width:46px}#base-A{background:#faedd0}#base-T{background:#dceff0}#base-G{background:#eee8f7}#base-C{background:#f8e3df}#live-readouts dl{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:8px}#live-readouts dl div{background:#f2f6f0;border:0;border-radius:12px;padding:10px}#live-readouts dt{font-size:10px;color:#697c73}#live-readouts dd{font-size:15px;color:#304e43;overflow-wrap:anywhere}#sources a{display:block;font-size:11px;padding:4px 0;color:#3c746e}#observations p{font-size:12px;line-height:1.7}#observations details{border-top:1px solid var(--border);padding-top:4px;margin-top:10px}#toolbar{margin:0 0 12px;gap:6px}#toolbar button{flex:1}.draggable{cursor:grab;touch-action:none}.dragging .draggable{cursor:grabbing}#scene:focus-visible{outline:3px solid #4d8ca2;outline-offset:-3px;border-radius:18px}body[data-lab=earthquake] #scene{cursor:crosshair}#status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}[hidden]{display:none!important}html[data-kb-host=offload] #lab{padding:0}html[data-kb-host=offload] #experiment{height:100%;padding:12px;border:0;border-radius:0}html[data-kb-host=offload] #visual-stage{min-height:170px}html[data-kb-host=offload] #scene{min-height:170px}html[data-kb-host=offload] #workspace{display:block;height:100%}html[data-kb-host=offload] #caption{font-size:10px}html[data-kb-host=offload] #live-readouts dl div{padding:7px 10px}
@media(max-width:1100px){#workspace{grid-template-columns:190px minmax(0,1fr)}#observations{display:block;grid-column:1/-1;max-height:240px}#lab{height:auto;min-height:100%}body{overflow:auto}#experiment{min-height:570px}html[data-kb-host=offload] #lab{height:100%;min-height:0}html[data-kb-host=offload] #experiment{min-height:0}}
@media(max-width:600px){#lab{padding:10px}#workspace{display:flex;gap:12px}#experiment{padding:12px;min-height:460px}#visual-stage{height:280px;min-height:250px}#scene{min-height:250px}#setup{display:block}.card{padding:15px}#parameters{display:grid;grid-template-columns:1fr;gap:4px}#observations{max-height:none}h1{font-size:16px}.edition{display:none}#live-readouts dd{font-size:13px}html[data-kb-host=offload] #visual-stage{height:auto;min-height:180px}html[data-kb-host=offload] #scene{min-height:180px}html[data-kb-host=offload] #caption{line-height:1.4}}
@media(prefers-reduced-motion:reduce){button{transition:none}}
@media(prefers-color-scheme:dark){:root{--page:#172623;--panel:#20312d;--ink:#e1ece5;--muted:#acc1b6;--border:#385047;--sunken:#2c4138}#experiment,#visual-stage{background:#fcfdfb;color:#283e43}.card{background:var(--panel)}.control{background:#293e35}.control select,button{background:#253c32;color:#e1ece5;border-color:#4a6659}.control output{color:#a2cdbb}h1{color:#e1ece5}h2{color:#bad2c1}#actions button{background:#345647;color:#e4f2e9}#observations #sources a{color:#a6d5c6}#scene-tools button{color:#283e43}#scene-tools button:not([id^=base]){background:#edf4ec}}
/* Inquiry experiments: quieter chrome, generous diagrams, consistent teaching colours. */
#experiment{background:#fffefa;padding:18px}#visual-stage{background:#fffefa}#scene{max-height:600px}#scene text{font-weight:550}#eyebrow{font-size:12px;font-weight:600;max-width:75%}#stage-count{font-variant-numeric:tabular-nums;font-size:11px;white-space:normal;text-align:center}#live-readouts dl div{border-top:2px solid #a8c9b6;background:#f0f5ee}#live-readouts dd{font-size:19px;letter-spacing:-.02em}body[data-lab=bonding] #live-readouts dl div,body[data-lab=rates] #live-readouts dl div{border-color:#d3b984;background:#faf5e9}body[data-lab=decay] #live-readouts dl div{border-color:#a8b4d2;background:#f0f2f8}body[data-lab=climate] #live-readouts dl div{border-color:#b3ccda;background:#edf4f8}#actions{gap:8px}#actions button:first-child{background:#3f7968;color:#fff}#actions button{font-size:11px;padding:10px 12px}#capture{border-style:dashed;background:#faf8f0!important;color:#655b42!important}#caption{font-size:11px;min-height:22px}#observations p{line-height:1.75}#toolbar button{font-size:11px;padding:9px 8px}#parameters .control{padding:12px 13px}html[data-kb-host=offload] #experiment{background:#fffefa}html[data-kb-host=offload] #live-readouts dd{font-size:16px}@media(max-width:600px){#live-readouts dl{grid-template-columns:repeat(2,minmax(0,1fr))}#scene{min-height:240px}#caption{font-size:10px}#experiment{min-height:480px}#eyebrow{max-width:68%}#live-readouts dd{font-size:16px}}@media(prefers-color-scheme:dark){#experiment,#visual-stage{background:#fffefa}#actions button:first-child{background:#4c8a74}#capture{background:#354c3b!important;color:#e1e9d9!important}}