:root{--ink:#18342f;--muted:#62736e;--green:#1b6551;--lime:#ddecaf;--line:#dce4dd;--paper:#f5f6f1}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:15px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #a1bb35;outline-offset:5px}a{color:inherit}header{height:94px;display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--line);padding:0 4.3vw;background:#fff}.brand{display:flex;gap:9px;align-items:center;text-decoration:none;font-size:29px;letter-spacing:-1.5px;font-weight:650;line-height:.9}.brandmark{font-size:42px;color:#438454}.brand-sub{display:block;font-size:8px;letter-spacing:2px;margin-top:8px}.header-title{margin-left:35px;font-size:14px}.header-title span{color:#acb9b3;margin:0 13px}.family{margin-left:auto;border:1px solid var(--line);border-radius:30px;padding:9px 15px;font-size:11px;letter-spacing:1.5px}main{max-width:1600px;margin:auto;padding:42px 4.3vw 12px}.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px;gap:25px}.eyebrow{font-size:10px;letter-spacing:1.9px;font-weight:650;color:var(--green)}h1{font-size:clamp(25px,2.4vw,37px);letter-spacing:-1.3px;line-height:1.15;margin:11px 0}p{line-height:1.7}.intro p{margin:0;color:var(--muted);font-size:14px}.guide-link{font-size:12px;white-space:nowrap;text-underline-offset:6px}.guide-link span{margin-left:18px}.workspace{display:grid;grid-template-columns:205px minmax(0,1fr);gap:24px}#lessons{display:flex;flex-direction:column;gap:6px;padding-top:4px}.nav-button{border:0;border-radius:11px;background:transparent;text-align:left;display:flex;align-items:center;gap:12px;padding:16px 13px;color:var(--muted);width:100%;transition:background .2s}.nav-button.active{background:var(--ink);color:white}.nav-button:hover:not(.active){background:#e9eee4}.nav-number{font-size:10px;opacity:.6;align-self:flex-start;padding-top:4px}.nav-button strong{font-size:13px;display:block;font-weight:600}.nav-button small{font-size:10px;display:block;margin-top:5px;opacity:.7}.nav-foot{font-size:11px;line-height:1.7;padding:20px 12px;color:var(--muted)}.lesson{border:1px solid var(--line);border-radius:20px;background:white;overflow:hidden;min-width:0}.lesson-top{padding:25px 28px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #edf0ea}h2{margin:7px 0 0;font-size:23px;font-weight:550;letter-spacing:-.6px}.live-badge{font-size:10px;color:var(--muted);white-space:nowrap}.live-badge i{display:inline-block;width:6px;height:6px;background:#69a85c;border-radius:50%;margin-right:6px}.experience{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(255px,1fr);min-height:465px}.stage{position:relative;overflow:hidden;background:radial-gradient(ellipse at 45% 45%,#fff 0%,#fafbf8 63%,#f1f4ed 100%);min-height:465px;display:flex;align-items:center;justify-content:center;padding:28px}.instruction{border-left:1px solid #edf0ea;padding:38px 27px 24px;display:flex;flex-direction:column}h3{font-size:24px;line-height:1.2;letter-spacing:-.7px;margin:16px 0 13px;font-weight:550}.instruction p{font-size:14px;color:#586b63;margin:0 0 18px}.note{background:#f2f5ea;border-radius:9px;padding:13px 14px;font-size:12px;line-height:1.6;color:#4d624a}.note:empty{display:none}.step-controls{display:flex;gap:10px;margin-top:auto;padding-top:24px}.primary{border:0;background:var(--ink);color:white;border-radius:9px;min-height:42px;padding:12px 18px;font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:25px}.primary:hover{background:#28634e}.round{background:white;border:1px solid var(--line);border-radius:9px;width:42px;min-height:42px}.lesson-bottom{display:flex;justify-content:space-between;gap:15px;padding:19px 28px;border-top:1px solid #edf0ea}.steps{display:flex;align-items:center;gap:7px}.step-dot{height:7px;width:23px;background:#e3e9df;border:0;border-radius:8px;padding:0;position:relative}.step-dot:before{content:'';position:absolute;inset:-11px -2px}.step-dot.active{background:#366e53;width:39px}.text-button{background:none;border:0;color:var(--green);font-size:11px;padding:5px}.sources{padding:0 28px 18px;font-size:10px;color:#758179}.sources summary{cursor:pointer;list-style:none}.sources summary:before{content:'+ ';font-size:13px}.sources[open] summary:before{content:'− '}.sources p{margin:10px 0 0;max-width:800px}.closing{display:flex;gap:40px;justify-content:space-between;padding:29px 0}.closing span{font-size:13px;white-space:nowrap}.closing p{margin:0;font-size:11px;color:var(--muted);max-width:580px}footer{display:flex;justify-content:space-between;padding:18px 4.3vw 24px;border-top:1px solid var(--line);font-size:10px;color:var(--muted)}.product{width:90%;max-height:375px;object-fit:contain;filter:drop-shadow(0 18px 12px #40553716);animation:appear .7s ease both}.stage-tag{position:absolute;left:22px;top:18px;font-size:9px;color:#78867e;letter-spacing:1px;text-transform:uppercase}.stage-caption{position:absolute;bottom:18px;left:20px;right:20px;text-align:center;font-size:10px;color:#708176}.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:photoIn .7s ease both;object-position:50% 56%}.photo-shade{position:absolute;inset:0;background:linear-gradient(0deg,#071c2280,transparent 45%)}.photo-label{position:absolute;bottom:24px;left:24px;color:white;z-index:1;font-size:11px;letter-spacing:.5px;background:#163b33c9;padding:10px 14px;border-radius:8px}.focus-ring{position:absolute;border:2px solid #eff6cf;box-shadow:0 0 0 7px #c4dd8460;border-radius:50%;width:80px;height:80px;animation:pulse 2s ease-in-out infinite;pointer-events:none}.rotation{position:absolute;right:24px;top:25px;width:91px;height:91px;background:#fffef5ed;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#164636;box-shadow:0 10px 30px #001a2030}.rotation b{font-size:40px;line-height:.9;animation:quarter 3s ease infinite}.rotation span{font-size:14px;margin-top:5px}.assembly{position:relative;height:390px;width:310px;flex-shrink:0}.assembly img{position:absolute;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 7px #37534610)}.assembly .base{clip-path:polygon(0 44%,45% 42%,70% 47%,100% 43%,100% 100%,0 100%)}.assembly .tank{clip-path:polygon(0 0,100% 0,100% 41%,70% 46%,45% 42%,0 44%);animation:lift 5s ease-in-out infinite}.assembly.lid .base{clip-path:inset(35% 0 0)}.assembly.lid .tank{clip-path:inset(0 0 65% 0);animation:lid 5s ease-in-out infinite}.hero-button{border:0;background:none;width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;cursor:zoom-in}.zoom-pill{position:absolute;left:50%;bottom:3%;transform:translateX(-50%);border-radius:30px;background:var(--ink);color:white;padding:13px 20px;white-space:nowrap;font-size:12px;box-shadow:0 8px 30px #18342f30}.screen-zone{width:100%;max-width:650px;animation:screenIn .55s ease both}.screen-frame{position:relative;background:#050505;border:10px solid #1c2425;outline:1px solid #8a9491;border-radius:15px;box-shadow:0 22px 40px #183c3329;overflow:hidden;aspect-ratio:1.59}.screen-frame>img{display:block;width:100%;height:100%;object-fit:fill}.hotspot{position:absolute;border:1px solid transparent;background:transparent;border-radius:6px;color:transparent;padding:0}.hotspot:hover,.hotspot:focus-visible{background:#aade8720;border:2px solid #d5f99e;outline:0}.screen-tools{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin-top:21px}.screen-tools button,.choice{font-size:10px;border:1px solid var(--line);padding:9px 11px;border-radius:7px;background:#fff;color:var(--ink)}.screen-tools button:hover,.choice:hover{background:#eef5df}.screen-label{text-align:center;color:var(--muted);font-size:9px;margin-top:13px}.ui-reading{position:absolute;top:20%;left:10%;width:80%;height:35%;background:#0b0b0b;color:#7ddb77;text-align:center;padding:4px 0}.ui-reading strong{display:block;font-family:monospace;font-size:clamp(18px,2vw,29px);font-weight:400}.ui-reading input{display:block;width:94%;margin:12px auto 0;accent-color:#76d67a;height:16px}.ui-reading small{font:9px monospace;color:#ccc;display:block;margin-top:5px}.selected-value{position:absolute;top:71%;width:14%;height:11%;background:#101510;color:#76d67a;text-align:center;font:clamp(11px,1.4vw,21px) monospace}.demo-controls{margin-top:15px;display:flex;gap:6px;flex-wrap:wrap}.demo-controls .choice{font-size:11px}.timeline{width:100%;max-width:390px;display:grid;gap:15px}.timeline div{display:flex;align-items:center;gap:18px;border:1px solid #dce5d5;border-radius:15px;padding:20px;background:#ffffffb3;color:#57705f}.timeline b{font-weight:500;font-size:30px;color:#26604b;min-width:65px}.timeline span{font-size:12px;line-height:1.6}.max-symbol{position:absolute;right:9%;top:32%;font:600 15px monospace;border-top:2px dashed #507754;padding-top:8px;color:#507754;animation:appear .6s both}.safety-symbol{position:absolute;bottom:29px;right:25px;font-size:11px;background:#fff;padding:10px 14px;border:1px solid #d6decf;border-radius:30px}dialog{border:1px solid var(--line);border-radius:18px;max-width:480px;padding:32px;color:var(--ink);width:calc(100% - 40px)}dialog::backdrop{background:#092b2666;backdrop-filter:blur(4px)}dialog p{font-size:14px;color:var(--muted)}.close{position:absolute;right:14px;top:10px;border:0;background:transparent;font-size:27px;color:var(--muted)}@keyframes appear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes screenIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes photoIn{from{opacity:0;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}@keyframes pulse{50%{box-shadow:0 0 0 13px #c4dd8430}}@keyframes quarter{0%,15%{transform:rotate(-45deg)}65%,100%{transform:rotate(45deg)}}@keyframes lift{0%,15%,100%{transform:translateY(-14px)}65%,80%{transform:translateY(24px)}}@keyframes lid{0%,15%,100%{transform:translateY(-5px)}65%,80%{transform:translateY(29px)}}.paused .assembly .tank,.paused .rotation b,.paused .focus-ring{animation-play-state:paused}@media(min-width:1450px){.stage{min-height:500px}.experience{min-height:500px}}@media(max-width:1100px){.workspace{grid-template-columns:170px minmax(0,1fr);gap:15px}.experience{grid-template-columns:1fr}.stage{min-height:400px}.instruction{border-left:0;border-top:1px solid #edf0ea;padding:24px;display:grid;grid-template-columns:1fr auto;column-gap:25px}.instruction #step-label,.instruction h3,.instruction p,.instruction .note,.instruction #extra{grid-column:1}.instruction .step-controls{grid-column:2;grid-row:1/6;align-self:end}.instruction h3{font-size:21px;margin:9px 0}.instruction p{margin-bottom:10px}.lesson-top{padding:23px}.closing{gap:20px}.closing span{white-space:normal}.screen-zone{max-width:550px}.ui-reading strong{font-size:27px}.selected-value{font-size:19px}}@media(max-width:650px){header{height:74px;padding:0 20px;gap:10px}.brand{font-size:25px}.brandmark{font-size:34px}.brand-sub{font-size:6px}.header-title{display:none}.family{font-size:9px;padding:8px 11px}main{padding:27px 16px 0}.intro{display:block;margin-bottom:23px}h1{font-size:29px;max-width:320px}.intro p{font-size:13px;max-width:320px}.guide-link{display:inline-block;margin-top:18px;font-size:11px}.workspace{display:block}#lessons{flex-direction:row;overflow-x:auto;gap:7px;margin:0 -16px 15px;padding:0 16px 10px;scrollbar-width:thin}.nav-button{min-width:150px;padding:13px 12px;border:1px solid var(--line)}.nav-button strong{font-size:12px}.nav-button small{font-size:9px}.nav-foot{display:none}.lesson{border-radius:15px}.lesson-top{padding:19px}.lesson-top h2{font-size:20px}.live-badge{display:none}.stage{min-height:350px;padding:21px}.product{max-height:310px}.assembly{height:330px;width:270px}.instruction{display:flex;padding:22px}.instruction h3{font-size:23px;margin:12px 0}.instruction p{font-size:14px;margin-bottom:14px}.step-controls{justify-content:space-between;padding-top:20px}.step-controls .primary{flex:1}.lesson-bottom{padding:16px 20px}.sources{padding:0 20px 16px}.closing{display:block;padding:24px 5px}.closing p{margin-top:8px}footer{padding:18px 20px;gap:25px;line-height:1.7}.screen-frame{border-width:7px;border-radius:12px}.screen-tools{gap:5px;margin-top:17px}.screen-tools button{padding:8px;font-size:10px}.ui-reading strong{font-size:19px}.ui-reading input{margin-top:5px;height:12px}.ui-reading small{font-size:7px}.selected-value{font-size:12px}.photo-label{bottom:18px;left:18px}.rotation{width:76px;height:76px;right:18px;top:18px}.timeline div{padding:16px}.screen-label{line-height:1.6}.stage:has(.screen-zone){min-height:340px;padding:18px 12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.ui-reading{left:5%;width:90%;top:20%;height:38%;padding:4px 4% 0}.selected-value{pointer-events:none}.motion-control{position:absolute;top:17px;right:15px;font-size:10px;border:1px solid #dce4d4;border-radius:20px;padding:8px 11px;background:#fffffff0;color:#285440;z-index:3}.stage:has(.rotation) .motion-control{top:auto;bottom:75px}.assembly .tank{clip-path:polygon(0 0,100% 0,100% 38%,91% 38%,65% 46%,18% 39%,0 39%)}.assembly .base{clip-path:polygon(0 41%,18% 41%,65% 48%,91% 40%,100% 40%,100% 100%,0 100%)}.assembly.lid .base{clip-path:inset(35% 0 0)}.assembly.lid .tank{clip-path:inset(0 0 65% 0)}.stage:has(.assembly) .stage-tag{max-width:46%;line-height:1.6}.photo{object-position:50% 58%}.stage:has(.photo) .photo-label{max-width:calc(100% - 44px);line-height:1.5}