/* flask life */
.fl{display:inline-block;line-height:0}
.fl .flsvg{display:block;width:100%;height:100%;overflow:visible}
.fl-liq{transition:transform 1.1s cubic-bezier(.3,.8,.3,1)}
.fl[data-on="1"] .flsvg{filter:drop-shadow(0 0 5px rgba(227,255,4,.4))}
.fl.bump .flsvg{animation:flbump .95s ease-out}
.fl.full .flsvg{animation:flfull 3s ease-in-out infinite}
@keyframes flbump{0%{filter:drop-shadow(0 0 2px rgba(227,255,4,.3))}35%{filter:drop-shadow(0 0 14px rgba(227,255,4,.9)) brightness(1.25)}100%{filter:drop-shadow(0 0 5px rgba(227,255,4,.4))}}
@keyframes flfull{0%,100%{filter:drop-shadow(0 0 4px rgba(227,255,4,.35))}50%{filter:drop-shadow(0 0 13px rgba(227,255,4,.8))}}
/* practice flask */
.pfl{display:flex;align-items:center;gap:10px;font:500 13px/1.25 Inter,system-ui,sans-serif;color:#B9B9B3}
.pfl .fl{width:26px;height:31px;flex:none}.pfl-t b{color:#F4F4F2;font-weight:700}
.lab .pfl{margin:2px 0 0}
.pbar .pfl{margin-left:auto}
/* quiz flasks */
.mix.hasfl>div:not(.qfls){position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mix .qfls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:6px 0 4px;font-size:inherit}
.mix .qf{display:flex;flex-direction:column;align-items:center;gap:7px;padding:16px 8px 14px;border:1px solid #2A2A28;border-radius:18px;background:#121211;text-align:center}
.qf .fl{width:62px;height:74px}.mix .qf b{display:block;height:auto;background:none;font:600 13.5px/1.2 Inter,system-ui,sans-serif;color:#D9D9D4}.qf i{font:700 12px/1 "Space Mono",ui-monospace,monospace;font-style:normal;color:#8C8C86}
.qf.top{border-color:#E3FF04}.mix .qf.top b{color:#F4F4F2}.qf.top i{color:#E3FF04}
/* flask on lab labels */
.callout .label::before,.evtag::before{content:"";display:inline-block;width:11px;height:13px;margin-right:7px;vertical-align:-1px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='185 138 590 702'><path d='M346 152 H614 M398 152 V322 L206 742 a58 58 0 0 0 53 84 H701 a58 58 0 0 0 53-84 L562 322 V152' fill='none' stroke='black' stroke-width='64' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='185 138 590 702'><path d='M346 152 H614 M398 152 V322 L206 742 a58 58 0 0 0 53 84 H701 a58 58 0 0 0 53-84 L562 322 V152' fill='none' stroke='black' stroke-width='64' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat}
/* dividers */
.fdiv{display:flex;align-items:center;gap:22px;margin:clamp(24px,4vw,44px) auto;max-width:min(1120px,calc(100% - 44px));color:#E3FF04}
.fdiv i{flex:1;height:1px;background:linear-gradient(90deg,transparent,#3A3A38 30%,#3A3A38 70%,transparent)}
.fdiv svg{width:50px;height:60px;flex:none;overflow:visible}
.fdiv svg path{fill:none;stroke:#E3FF04;stroke-width:26;stroke-linecap:round;stroke-linejoin:round}
html.fd-ready .fdiv svg path{stroke-dasharray:2400;stroke-dashoffset:2400;transition:stroke-dashoffset 1.5s ease}
html.fd-ready .fdiv.on svg path{stroke-dashoffset:0}
html.fd-ready .fdiv.on svg{filter:drop-shadow(0 0 7px rgba(227,255,4,.45));transition:filter .6s 1.2s}
main.hv>.fdiv{margin:-60px auto!important}
@media(max-width:700px){main.hv>.fdiv{margin:-40px auto!important}}
.fdiv+section{padding-top:clamp(4px,1.5vw,18px)!important;margin-top:0!important}
@media(max-width:700px){.fdiv svg{width:42px;height:50px}.fdiv{gap:16px}
 .hv-why h2,.hv-why .hv-why-l,.hv-why figcaption{text-align:center!important;margin-left:auto!important;margin-right:auto!important;text-wrap:balance}
 .hv-why .aifig{margin-left:auto;margin-right:auto}}
/* footer logo draws itself in, like the dividers (no glow on the footer, by request) */
html.fd-ready .sf .sf-lock .mk svg path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s ease}
html.fd-ready .sf .sf-lock .mk svg path:nth-child(n+2){transition-duration:.5s;transition-delay:1.1s}
html.fd-ready .sf .sf-lock .mk svg g path{transition-duration:1.2s!important;transition-delay:.7s!important}
html.fd-ready .sf .sf-lock.on .mk svg path{stroke-dashoffset:0}
html.fd-init .fdiv svg path,html.fd-init .sf .mk svg path{transition:none!important}
/* 404 and thanks */
.fl404{width:64px;height:76px;margin:0 0 16px}.fl404 .flsvg{animation:flick 3.4s steps(1) infinite}
@keyframes flick{0%,100%{opacity:1}90%{opacity:.35}92%{opacity:1}95%{opacity:.5}97%{opacity:1}}
.flthanks{width:64px;height:76px;margin:0 0 16px}
@media(max-width:520px){.mix .qfls{gap:8px}.qf .fl{width:50px;height:60px}.mix .qf b{font-size:12.5px}}
@media(prefers-reduced-motion:reduce){html.fd-ready .sf .sf-lock .mk svg path{stroke-dashoffset:0;transition:none}.fl-liq{transition:none}.fl.bump .flsvg,.fl.full .flsvg,.fl404 .flsvg{animation:none}html.fd-ready .fdiv svg path{stroke-dashoffset:0;transition:none}}