:root{--ink:#19313b;--muted:#65747a;--paper:#f7f6f1;--white:#fffefa;--line:#d8dfda;--teal:#168b86;--teal-dark:#0c5f5c;--coral:#ef6a4f;--coral-dark:#a73e2e;--yellow:#ffd25a;font-family:"Avenir Next","Trebuchet MS",system-ui,sans-serif;font-synthesis:none}*{box-sizing:border-box}[hidden]{display:none!important}html,body{width:100%;height:100%;min-width:1000px;min-height:700px;overflow:hidden}body{margin:0;color:var(--ink);background:var(--paper)}button{color:inherit;font:inherit;cursor:pointer}:focus-visible{outline:4px solid #005fcc;outline-offset:3px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.lesson{width:100%;height:100%;display:grid;grid-template-rows:minmax(510px,1fr) 184px;gap:14px;padding:16px 18px 18px;background:radial-gradient(circle at 50% 0,#fff 0,transparent 42%),var(--paper)}.mute-button{position:fixed;z-index:80;top:16px;right:20px;width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--white);box-shadow:0 3px 0 #cbd4ce}.mute-button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}.sound-off{display:none}.mute-button[aria-pressed=true] .sound-on{display:none}.mute-button[aria-pressed=true] .sound-off{display:block}
.lab{position:relative;min-height:0;overflow:hidden;border:1px solid #d3ddd6;border-radius:22px;background-color:#f3efe4;background-image:linear-gradient(rgba(255,255,255,.62) 2px,transparent 2px),linear-gradient(90deg,rgba(255,255,255,.62) 2px,transparent 2px);background-size:54px 54px;box-shadow:0 7px 0 #d7d2c4,0 18px 40px rgba(52,62,53,.08);isolation:isolate}.lab:before{position:absolute;inset:0 0 auto;height:72px;content:"";background:linear-gradient(#e4eee9,rgba(228,238,233,.2))}.bench{position:absolute;z-index:-1;left:0;right:0;bottom:0;height:31%;border-top:9px solid #9b6339;background:repeating-linear-gradient(90deg,#c78a52 0 130px,#be804a 130px 134px)}.level-tag{position:absolute;z-index:5;left:22px;top:20px;padding:8px 13px;border:1px solid #cbdad2;border-radius:999px;color:var(--teal-dark);background:rgba(255,255,255,.9);font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.ingredient-card,.notebook{position:absolute;z-index:4;top:90px;width:230px;min-height:292px;padding:21px;border:1px solid #d6ddd8;border-radius:17px;background:rgba(255,254,250,.96);box-shadow:0 9px 0 rgba(48,72,57,.08),0 18px 30px rgba(48,72,57,.08)}.ingredient-card{left:7%;transform:rotate(-1deg);text-align:center}.notebook{right:7%;transform:rotate(1deg);background-image:repeating-linear-gradient(0deg,transparent 0 33px,rgba(52,121,184,.09) 33px 34px)}.card-kicker,.notebook-kicker{display:block;color:var(--teal-dark);font-size:10px;font-weight:950;letter-spacing:.12em;text-transform:uppercase}.sugar-bag{position:relative;width:130px;height:138px;display:grid;place-items:center;margin:15px auto 12px;border:3px solid var(--ink);border-radius:8px 8px 25px 18px;background:#fffdf5;box-shadow:5px 6px 0 #d6c9a8}.sugar-bag:before{position:absolute;inset:7px;content:"";border:2px dashed #d7c9a6;border-radius:4px 4px 18px 12px}.sugar-bag b{z-index:1;padding:7px 10px;border-radius:5px;color:white;background:var(--coral);font-size:20px;transform:rotate(-3deg)}.sugar-bag i{position:absolute;left:32px;right:32px;bottom:15px;height:29px;border-radius:50%;background:radial-gradient(circle,#fff 0 2px,#cfc9b5 2px 3px,transparent 3px);background-size:10px 9px}.ingredient-card p{margin:0;color:var(--muted);font-size:13px}.mass-total,.mass-check{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:15px;padding-top:13px;border-top:1px dashed #aebbb4}.mass-total span,.mass-check span{color:var(--muted);font-size:11px;font-weight:800}.mass-total strong{font-size:22px}
.glass-zone{position:absolute;z-index:3;left:50%;top:51%;width:430px;height:470px;transform:translate(-50%,-50%)}.glass{position:absolute;left:50%;bottom:28px;width:250px;height:365px;transform:translateX(-50%);border:5px solid rgba(25,49,59,.83);border-top:0;border-radius:5px 5px 45px 45px;background:rgba(255,255,255,.28);box-shadow:inset 12px 0 rgba(255,255,255,.35),inset -9px 0 rgba(25,49,59,.06),9px 10px 0 rgba(25,49,59,.1)}.glass-rim{position:absolute;z-index:8;left:-13px;right:-13px;top:-12px;height:25px;border:4px solid var(--ink);border-radius:50%;background:rgba(255,255,255,.78)}.water{position:absolute;left:4px;right:4px;bottom:4px;height:78%;overflow:hidden;border-radius:0 0 38px 38px;background:rgba(128,218,225,.68);transition:background .4s}.water:before{position:absolute;z-index:5;left:0;right:0;top:-9px;height:18px;content:"";border:2px solid rgba(31,111,140,.52);border-radius:50%;background:#b9eef0}.water.is-hot{background:rgba(105,208,198,.63)}.water-shine{position:absolute;z-index:6;left:11%;top:13%;width:12px;height:63%;border-radius:9px;background:rgba(255,255,255,.48)}#dissolvedParticles,#settledParticles{position:absolute;inset:0}.particle{position:absolute;width:7px;height:7px;border:1px solid #9aaeb0;border-radius:50%;background:rgba(255,255,255,.9);opacity:0;transform:scale(.35);transition:.25s}.particle.visible{opacity:.76;transform:scale(1);animation:drift 2.8s ease-in-out infinite alternate}.crystal{position:absolute;width:13px;height:13px;opacity:0;transform:translateY(-16px) rotate(45deg) scale(.4);border:1px solid #b7ad8e;border-radius:3px;background:#fffdf1;box-shadow:inset 2px 2px white,1px 2px #b9aa83;transition:.3s}.crystal.visible{opacity:1;transform:translateY(0) rotate(45deg) scale(1)}.spoon{position:absolute;z-index:12;left:58%;top:-56px;width:18px;height:330px;transform:rotate(10deg);transform-origin:50% 92%;pointer-events:none}.spoon:before{position:absolute;inset:0;content:"";border:3px solid #68787b;border-radius:10px;background:#cbd5d4}.spoon i{position:absolute;left:50%;bottom:-24px;width:55px;height:73px;transform:translateX(-50%);border:3px solid #68787b;border-radius:50%;background:#dce4e3}.glass.is-stirring .spoon{animation:stir .7s ease-in-out 2}.glass.is-stirring .water{animation:swish .35s ease-in-out 4}
.thermometer{position:absolute;z-index:10;left:3px;top:78px;width:70px;text-align:center}.thermometer>span{display:block;margin-bottom:5px;color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase}.thermometer-tube{position:relative;width:18px;height:130px;margin:0 auto 7px;overflow:hidden;border:3px solid var(--ink);border-radius:999px;background:white}.thermometer-tube:after{position:absolute;left:50%;bottom:3px;width:10px;height:10px;content:"";transform:translateX(-50%);border-radius:50%;background:var(--coral)}.thermometer-tube i{position:absolute;left:4px;right:4px;bottom:8px;height:22%;border-radius:999px;background:var(--coral);transition:height .5s}.thermometer strong{font-size:15px}.steam{position:absolute;z-index:2;left:47%;top:-3px;width:110px;height:80px;opacity:0}.steam.visible{opacity:.55}.steam i{position:absolute;bottom:0;width:17px;height:58px;border-left:5px solid white;border-radius:50%;animation:steam 1.7s infinite}.steam i:nth-child(2){left:37px}.steam i:nth-child(3){left:76px}.evidence-label{position:absolute;z-index:13;right:-4px;min-width:150px;display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid #ccd8d2;border-radius:10px;background:rgba(255,255,255,.95);box-shadow:0 4px rgba(33,58,46,.08);font-size:11px}.evidence-label i{width:9px;height:9px;border-radius:50%;background:#3479b8}.evidence-label b{display:block;font-size:14px}.dissolved-evidence{top:195px}.settled-evidence{top:340px;opacity:0;transform:translateX(9px);transition:.18s}.settled-evidence.visible{opacity:1;transform:none}.settled-evidence i{border-radius:2px;background:var(--coral);transform:rotate(45deg)}.is-focus{animation:focus-pulse .48s ease-out 3}.notebook h2{margin:20px 0 7px;font-size:25px}.notebook p{min-height:92px;margin:0;color:#536970;font-size:14px;line-height:1.48}.mass-check{align-items:end}.mass-check strong{font-size:13px;white-space:nowrap}
.level-intro,.celebration{position:absolute;z-index:40;left:50%;top:50%;width:min(530px,calc(100% - 48px));min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 48px;transform:translate(-50%,-50%);border:1px solid #d7e0db;border-radius:23px;background:rgba(255,255,255,.98);box-shadow:0 16px 0 rgba(50,82,60,.11),0 30px 65px rgba(43,70,51,.18);text-align:center}.level-intro>span,.celebration>span{color:var(--teal-dark);font-size:10px;font-weight:950;letter-spacing:.13em;text-transform:uppercase}.intro-icon{width:64px;height:64px;display:grid;place-items:center;margin:13px 0;transform:rotate(-4deg);border:3px solid var(--ink);border-radius:17px;background:var(--yellow);box-shadow:4px 4px var(--ink);font-size:24px;font-weight:1000}.level-intro h1,.celebration h1{margin:2px 0 9px;font-size:40px;letter-spacing:-.04em}.level-intro p,.celebration p{max-width:410px;margin:0 0 23px;color:#536970;font-size:15px;line-height:1.48}.level-intro button,.celebration button,.primary-button{min-height:52px;padding:0 24px;border:2px solid var(--teal-dark);border-radius:12px;color:white;background:var(--teal);box-shadow:0 6px var(--teal-dark);font-size:15px;font-weight:950}.celebration{min-height:390px;background:#fffdf4}.crystal-burst{width:90px;height:70px;position:relative}.crystal-burst i{position:absolute;left:36px;top:25px;width:18px;height:18px;transform:rotate(45deg);border:2px solid #ad8a37;background:var(--yellow);animation:crystal-pop 1.4s infinite}.crystal-burst i:nth-child(2){translate:-30px -20px}.crystal-burst i:nth-child(3){translate:35px -18px}.crystal-burst i:nth-child(4){translate:-36px 23px}.crystal-burst i:nth-child(5){translate:38px 20px}.live-callout{position:absolute;z-index:35;left:50%;top:80px;padding:11px 16px;transform:translate(-50%,-14px);border-radius:999px;color:white;background:var(--ink);opacity:0;font-size:13px;font-weight:900;transition:.18s;pointer-events:none}.live-callout.is-showing{opacity:1;transform:translate(-50%,0)}
.decision-card{display:grid;grid-template-columns:minmax(250px,.68fr) minmax(0,1.72fr);align-items:center;gap:28px;padding:18px 22px 18px 26px;border:1px solid var(--line);border-radius:17px;background:var(--white);box-shadow:0 5px #dfe5e1}.decision-heading span{display:block;margin-bottom:5px;color:var(--teal-dark);font-size:10px;font-weight:950;letter-spacing:.1em;text-transform:uppercase}.decision-heading h2{max-width:350px;margin:0;font-size:25px;line-height:1.12}.decision-content{min-width:0;display:flex;align-items:center;justify-content:center}.action-button{width:min(470px,100%);min-height:104px;display:grid;grid-template-columns:78px 1fr;place-items:center;padding:14px 30px;border:3px solid var(--teal-dark);border-radius:15px;color:white;background:var(--teal);box-shadow:0 9px var(--teal-dark);text-align:left}.action-button .action-icon{width:60px;height:60px;display:grid;place-items:center;border:3px solid white;border-radius:50%;font-size:31px}.action-button strong{display:block;font-size:25px}.action-button small{font-size:12px;opacity:.86}.action-button.is-coral{border-color:var(--coral-dark);background:var(--coral);box-shadow:0 9px var(--coral-dark)}.choice-grid{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.choice-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.choice-button{min-height:108px;padding:14px 16px;border:2px solid #d4ddd8;border-radius:13px;background:#fbfcfa;text-align:left}.choice-button:hover{transform:translateY(-3px);border-color:#79aaa6}.choice-button b{display:block;margin-bottom:6px;color:var(--teal-dark);font-size:16px}.choice-button span{color:var(--muted);font-size:12px;line-height:1.3}.result-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}.result-copy{display:flex;align-items:center;gap:14px}.result-badge{width:58px;height:58px;display:grid;place-items:center;border:3px solid var(--ink);border-radius:50%;background:var(--yellow);font-size:26px;font-weight:1000}.result-copy strong{font-size:19px}.result-copy p{margin:4px 0 0;color:var(--muted);font-size:13px}
@keyframes drift{to{translate:3px 4px}}@keyframes stir{50%{transform:rotate(-18deg) translateX(-34px)}}@keyframes swish{50%{transform:skewX(2deg) translateX(2px)}}@keyframes steam{to{transform:translateY(-12px);opacity:0}}@keyframes focus-pulse{50%{transform:scale(1.05);box-shadow:0 0 0 8px rgba(255,210,90,.35)}}@keyframes crystal-pop{50%{transform:rotate(135deg) scale(1.25)}}@media(max-width:1180px){.ingredient-card{left:3%}.notebook{right:3%}.glass-zone{transform:translate(-50%,-50%) scale(.92)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}