:root{--scene-background:#3c705f;font-synthesis:none;-webkit-font-smoothing:antialiased;color:#162028;background:var(--scene-background);--secondary:#414f59;--blue:#0060c9;--glass:linear-gradient(145deg, #ffffff6e, #f8fbff30 56%, #f3f9ff52);--glass-base:#f4f8fc21;--frost:blur(24px) saturate(135%);--glass-shadow:inset 0 1px 0 #ffffff9e, inset 0 -1px 0 #ffffff3d, 0 3px 8px #2235430a, 0 12px 32px -12px #22354333;--separator:#30425029;--track:#3f4e5a2b;font-family:-apple-system,BlinkMacSystemFont,system-ui,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:1920px;min-height:1080px;margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}button:focus-visible,input:focus-visible{outline:3px solid var(--blue);outline-offset:3px}[hidden]{display:none!important}#stage{background:radial-gradient(at 45% 34%,#98b78945,#0000 58%),radial-gradient(at 7% 83%,#2046364f,#0000 55%),linear-gradient(132deg,#315b4e 0%,#487d65 43%,#376b59 69%,#214b41 100%);width:1920px;height:1080px;position:relative;overflow:hidden}#stage:before{content:"";pointer-events:none;opacity:.083;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='white' filter='url(%23grain)' d='M0 0h200v200H0z'/%3E%3C/svg%3E");position:absolute;inset:0}.chalkboard-notes{pointer-events:none;-webkit-user-select:none;user-select:none;fill:#fff;letter-spacing:1px;width:1920px;height:1080px;font-family:Chalkboard SE,Chalkboard,Bradley Hand,cursive;font-size:32px;font-weight:400;position:absolute;inset:0}.chalkboard-notes .chalk-line{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round}#lab{object-fit:cover;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block;position:absolute;inset:0}.presenter{filter:drop-shadow(12px 16px 17px #2624243d);pointer-events:none;-webkit-user-select:none;user-select:none;width:auto;height:1119px;position:absolute;bottom:-113px;left:0}.chapter-nav,.heading,.controls,.observation,.reaction,.loading-card{background:var(--glass) var(--glass-base);-webkit-backdrop-filter:var(--frost);backdrop-filter:var(--frost);box-shadow:var(--glass-shadow);border:1px solid #fff9;border-bottom-color:#ffffff5c;border-radius:28px}.chapter-nav{border-radius:100px;gap:2px;padding:5px;display:flex;position:absolute;top:30px;left:50%;transform:translate(-50%)}.chapter-nav button{border-radius:inherit;color:var(--secondary);letter-spacing:-.015em;background:0 0;border:none;justify-content:center;align-items:baseline;gap:8px;padding:11px 17px;font-size:14px;font-weight:560;line-height:18px;transition:background-color .16s,box-shadow .16s;display:flex}.chapter-nav button>span{font-variant-numeric:tabular-nums;font-size:11px;font-weight:650}.chapter-nav button:hover:enabled:not(.selected){background:#ffffff4d}.chapter-nav button.selected{color:#182533;background:#ffffffc9;box-shadow:inset 0 1px 1px #fff,0 1px 4px #2a3d4d33}.chapter-nav button.selected>span{color:var(--blue)}.lesson-sidebar{--glass-base:#f4f8fc7a;pointer-events:none;gap:12px;width:432px;display:grid;position:absolute;top:28px;right:32px}.heading{padding:20px 24px 22px}.eyebrow,.step-tag,.reaction>span{letter-spacing:.075em;color:var(--secondary);font-size:11px;font-weight:650;line-height:15px}.eyebrow{align-items:center;gap:10px;display:flex}.experiment-number{min-width:30px;height:27px;color:var(--blue);letter-spacing:-.02em;background:#ffffff78;border-radius:9px;place-items:center;padding-inline:5px;font-size:14px;font-weight:650;display:grid;box-shadow:inset 0 1px #ffffffbf,0 1px 2px #2537461a}.heading h1{letter-spacing:-.04em;margin:15px 0 6px;font-size:32px;font-weight:700;line-height:1.12}.subtitle{letter-spacing:-.018em;color:var(--secondary);font-size:17px;line-height:1.3}.controls{gap:19px;padding:23px 24px 16px;display:grid}.step-tag{display:block}.instruction h2{letter-spacing:-.032em;margin:7px 0 5px;font-size:23px;font-weight:650;line-height:1.17}.instruction p{color:var(--secondary);margin:0;font-size:14px;line-height:1.42}.doses{background:#ffffff3d;border:1px solid #fff6;border-radius:17px;padding-inline:16px;display:grid}.dose{padding-block:13px}.dose+.dose{border-top:1px solid var(--separator)}.dose-name{grid-template-columns:1fr auto;align-items:baseline;gap:2px 10px;display:grid}.formula{letter-spacing:-.025em;font-size:17px;font-weight:630;line-height:1.2}.dose-caption{color:var(--secondary);grid-row:2;font-size:12px;line-height:1.3}.dose-name strong{font-variant-numeric:tabular-nums;letter-spacing:-.045em;grid-area:1/2/3;align-self:center;font-size:27px;font-weight:600;line-height:1}.dose-name i{letter-spacing:0;color:var(--secondary);font-size:14px;font-style:normal;font-weight:500}#salt-state{font-size:22px}.drop-dots{gap:5px;margin-top:9px;display:flex}.drop-dots span,.evaporation-track{background:var(--track);border-radius:4px;height:4px}.drop-dots span{flex:1}.dose-naoh .filled{background:#0075e8}.dose-indicator .filled{background:#bc7409}.dose-acid .filled{background:#c94c65;flex:0 38px}.color-state{align-items:center;gap:7px;margin-top:7px;font-size:14px;display:flex}.color-state strong{font-weight:600}.color-state>span{border:1px solid var(--separator);border-radius:50%;width:13px;height:13px}.evaporation-track{margin-top:9px;overflow:hidden}.evaporation-track>span{border-radius:inherit;background:#bd7712;width:0;height:100%;display:block}.timeline{color:var(--secondary);font-variant-numeric:tabular-nums;align-items:center;gap:12px;font-size:12px;font-weight:550;display:flex}#scrubber{--track-fill:linear-gradient(to right, var(--blue) var(--progress,0%), var(--track) var(--progress,0%));--thumb-shadow:inset 0 0 0 1px #28384812, 0 1px 4px #23303e4a;appearance:none;cursor:pointer;pointer-events:auto;background:0 0;border:0;border-radius:8px;flex:1;min-width:0;height:28px;margin:0}#scrubber::-webkit-slider-runnable-track{background:var(--track-fill);border-radius:4px;height:4px}#scrubber::-moz-range-track{background:var(--track-fill);border-radius:4px;height:4px}#scrubber::-webkit-slider-thumb{appearance:none;width:19px;height:19px;box-shadow:var(--thumb-shadow);background:#fff;border-radius:50%;margin-top:-7.5px}#scrubber::-moz-range-thumb{width:19px;height:19px;box-shadow:var(--thumb-shadow);background:#fff;border:0;border-radius:50%}.observation{align-items:center;gap:15px;padding:18px 24px;display:flex}.observation-dot{background:var(--tone,#c62573);height:10px;box-shadow:0 0 0 4px color-mix(in srgb, var(--tone,#c62573) 16%, transparent);border-radius:50%;flex:0 0 10px}.observation[data-tone=clear],.observation[data-tone=salt]{--tone:#25809d}.observation[data-tone=heat]{--tone:#c4770c}.observation strong{letter-spacing:-.025em;font-size:17px;font-weight:630;display:block}.observation div>span,.reaction small{color:var(--secondary);margin-top:4px;font-size:13px;line-height:1.35;display:block}.reaction{padding:19px 24px}.reaction strong{letter-spacing:-.025em;margin-top:8px;font-size:22px;font-weight:600;display:block}.loading{z-index:10;background:#bed2dc59;place-items:center;display:grid;position:absolute;inset:0}.loading-card{text-align:center;justify-items:center;gap:9px;max-width:520px;padding:28px 36px;display:grid}.loading strong{letter-spacing:-.03em;font-size:22px;font-weight:650}#loading-detail{color:var(--secondary);font-size:14px}.loader{border:3px solid var(--track);border-top-color:var(--blue);border-radius:50%;width:28px;height:28px;margin-bottom:7px;animation:.85s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:no-preference){#stage:has(#loading:not([hidden])) [data-enter]{opacity:0;animation:none}.loading-card{animation:.16s ease-out .15s backwards page-enter}.drop-dots span{transition:background-color .14s ease-out}}@media (prefers-reduced-motion:reduce){.chapter-nav button{transition:none}.loader{animation:none}}@media (prefers-reduced-transparency:reduce){:root{--glass-base:#edf2f5;--frost:none}}