.tube-demo{background:#f7fafc;color:#20394f}.tube-demo__intro{padding:clamp(3rem,6vw,6rem) var(--gutter) 2.5rem;max-width:80rem;margin:auto}.tube-demo__intro h2{margin:0;font:500 clamp(2.8rem,6vw,5rem)/1.15 var(--font-latin);letter-spacing:-.04em}.tube-demo__intro h2 span{display:block;margin-top:.8rem;font-size:.28em;letter-spacing:.08em}.tube-demo__intro>p:last-child{max-width:44rem;font-size:.85rem;color:#5e7386;margin:1.6rem 0 0}.tube-story{--header-height: 5rem;display:block;position:relative;border-top:1px solid #dbe4ec}.tube-story__sticky{display:flex;flex-direction:column;align-items:center;padding:1.2rem var(--gutter) .75rem;background:radial-gradient(ellipse at 50% 43%,#fff 15%,#eef4f8)}.tube-story[data-enhanced]{height:calc(100svh - var(--header-height) + 350svh)}.tube-story[data-enhanced] .tube-story__sticky{position:sticky;top:var(--header-height);height:calc(100svh - var(--header-height));min-height:24rem}.tube-story__eyebrow{display:flex;width:100%;max-width:54rem;justify-content:space-between;gap:1rem;color:#68849d;font:600 .58rem/1.5 var(--font-latin);letter-spacing:.1em}.tube-scene{--separation: clamp(88px, 25vw, 154px);position:relative;width:100%;max-width:620px;min-height:0;height:340px;flex:1;max-height:440px;margin:auto 0}.tube-product{position:absolute;inset:0 auto 0 50%;width:60%;max-width:250px;transform:translate(-50%);transform-origin:50% 85%;transition:transform .75s ease,opacity .6s ease}.tube-svg{display:block;width:100%;height:100%;overflow:visible}.tube-body{transform-origin:100px 330px}.tube-liquid{transform-origin:100px 315px}.tube-pipette,.tube-drop,.tube-ripple,.tube-swirl,.tube-open-rim{opacity:0}.tube-result-fill{fill:transparent}.tube-reaction{transform:translateY(85px);transition:transform 1.35s ease-out}.tube-product--negative,.tube-product--high{opacity:0;transform:translate(-50%) scale(.65)}.tube-product--high .tube-result-fill{fill:#1557a6}.tube-product--high .tube-reaction,.tube-product--negative .tube-reaction{display:none}.tube-result-label{opacity:0;text-align:center;position:absolute;top:100%;width:100%;left:0;font-size:1.3rem;font-weight:600;color:#20394f;transition:opacity .4s ease}.tube-result-label span{display:block;margin-top:.3rem;font-size:1.05rem;font-weight:400;white-space:nowrap;color:#61788c}.tube-clock{position:absolute;left:calc(50% + clamp(54px,8vw,88px));top:32%;width:clamp(72px,17vw,112px);max-height:55%;opacity:0;transition:opacity .4s;pointer-events:none}.tube-clock__hand{transform-origin:80px 86px}.tube-story__caption{flex:none;text-align:center;margin:.8rem 0 .4rem}.tube-story__caption h3{font-size:clamp(1.3rem,4vw,1.9rem);line-height:1.4;margin:0;letter-spacing:-.04em}.tube-story__navigation{position:relative;width:100%;display:flex;justify-content:center}.tube-dots{display:flex}.tube-dots button{width:40px;height:44px;display:grid;place-items:center;border:0;background:transparent}.tube-dots button span{width:7px;height:7px;border-radius:50%;background:#c9d4de;transition:background .3s,transform .3s}.tube-dots [aria-current] span{background:#3c81b9;transform:scale(1.2)}.tube-scroll-hint{position:absolute;right:0;top:16px;font:500 .5rem var(--font-latin);color:#7b92a6;transition:opacity .3s}.tube-story__note{margin:0;color:#778a9b;font-size:.58rem}.tube-story__steps{margin:0;padding:2rem var(--gutter) 2rem calc(var(--gutter) + 1.5rem)}.tube-story__steps li{padding:.5rem 0}.tube-story__steps h3{margin:0;font-size:1rem}.tube-story__accessible-results{margin:0;padding:0 var(--gutter) 2rem}.tube-story[data-enhanced] .tube-story__steps,.tube-story[data-enhanced] .tube-story__accessible-results{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.tube-story:not([data-enhanced]) .tube-story__navigation{display:none}.tube-story[data-started=true] .tube-scroll-hint{opacity:0}.tube-story[data-visible=true][data-step="0"] .tube-product--main .tube-body{animation:tube-enter .6s ease both}.tube-story[data-step="0"] .tube-product--main .tube-cap-stick{opacity:0}.tube-story[data-step="0"] .tube-product--main .tube-open-rim{opacity:1}.tube-story[data-visible=true][data-step="0"] .tube-product--main .tube-pipette{animation:tube-pipette 1.9s ease both}.tube-story[data-visible=true][data-step="0"] .tube-product--main .tube-drop{animation:tube-drop 1.9s ease-in both}.tube-story[data-visible=true][data-step="0"] .tube-product--main .tube-ripple{animation:tube-ripple 1.9s ease-out both}.tube-story[data-step="1"] .tube-product--main .tube-body{animation:tube-mix 1.05s ease-in-out}.tube-story[data-step="1"] .tube-product--main .tube-liquid{animation:tube-liquid-mix 1.05s .12s ease-in-out}.tube-story[data-step="1"] .tube-product--main .tube-swirl{animation:tube-swirl 1.2s ease both}.tube-story[data-step="2"] .tube-clock{opacity:1}.tube-story[data-visible=true][data-step="2"] .tube-clock__hand{animation:tube-clock-tick 12s linear infinite}.tube-story[data-step="3"] .tube-product--main .tube-reaction,.tube-story[data-step="4"] .tube-product--main .tube-reaction{transform:translateY(0)}.tube-story[data-step="4"] .tube-product--main{transform:translate(-50%) scale(.65)}.tube-story[data-step="4"] .tube-product--negative{opacity:1;transform:translate(calc(-50% - var(--separation))) scale(.65)}.tube-story[data-step="4"] .tube-product--high{opacity:1;transform:translate(calc(-50% + var(--separation))) scale(.65)}.tube-story[data-step="4"] .tube-result-label{opacity:1;transition-delay:.4s}@keyframes tube-enter{0%{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@keyframes tube-clock-tick{to{transform:rotate(360deg)}}@keyframes tube-pipette{0%{opacity:0;transform:translateY(-12px)}18%,74%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-12px)}}@keyframes tube-drop{0%,25%{opacity:0;transform:translateY(0) scale(.7);transform-origin:100px 120px}35%{opacity:1;transform:translateY(0) scale(1)}69%{opacity:1;transform:translateY(151px)}72%,to{opacity:0;transform:translateY(151px) scale(.5)}}@keyframes tube-ripple{0%,69%{opacity:0;transform:scale(.4);transform-origin:100px 280px}73%{opacity:.8}to{opacity:0;transform:scale(2.5);transform-origin:100px 280px}}@keyframes tube-mix{0%,to{transform:rotate(0)}20%{transform:rotate(-8deg)}40%{transform:rotate(8deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(6deg)}}@keyframes tube-liquid-mix{0%,to{transform:rotate(0)}20%{transform:rotate(5deg)}40%{transform:rotate(-5deg)}60%{transform:rotate(3deg)}80%{transform:rotate(-3deg)}}@keyframes tube-swirl{0%,to{opacity:0}35%,70%{opacity:.7}}@media(min-width:701px){.tube-story{--header-height: 6rem}.tube-story__sticky{padding-top:1.6rem;padding-bottom:1rem}.tube-story__caption{margin-top:1rem}}@media(max-width:370px){.tube-scroll-hint{display:none}}@media(max-height:600px){.tube-story[data-enhanced] .tube-story__sticky{min-height:0;padding-block:.4rem}.tube-story__eyebrow,.tube-story__note{display:none}.tube-story__caption h3{font-size:1.1rem}.tube-story__caption{margin:.3rem 0 0}.tube-dots button{height:36px}}@media(prefers-reduced-motion:reduce){.tube-story *,.tube-story *:before,.tube-story *:after{animation:none!important;transition:none!important}.tube-story[data-step="0"] .tube-product--main .tube-pipette{opacity:1;transform:translateY(0)}.tube-story[data-step="0"] .tube-product--main .tube-drop{opacity:1;transform:translateY(65px)}}@media print{.tube-story[data-enhanced]{height:auto}.tube-story[data-enhanced] .tube-story__sticky{position:static;height:22rem}.tube-story[data-enhanced] .tube-story__steps,.tube-story[data-enhanced] .tube-story__accessible-results{position:static;clip-path:none;width:auto;height:auto;white-space:normal;margin:1rem}.tube-story__navigation{display:none}}