.jar{position:relative;display:flex;flex-direction:column;aspect-ratio:96/124;margin-inline:auto;width:96px;z-index:10}.jar>a{flex:1;display:flex;flex-direction:column;text-decoration:none;color:#222}@media (hover: hover){.jar:hover{--cap-delay: .3s}.jar:hover .cap{transform-origin:left center;transform:rotate(var(--open-deg)) translate(calc(var(--index) * 5px)) translateY(calc(var(--ul-height) * -1))}.jar:hover li{animation:fadeInRotate .3s ease forwards;animation-delay:calc(var(--i) * .1s + var(--cap-delay))}}.jar.active{--cap-delay: .3s}.jar.active .cap{transform-origin:left center;transform:rotate(var(--open-deg)) translate(calc(var(--index) * 5px)) translateY(calc(var(--ul-height) * -1 - 15px))}.jar.active li{animation:fadeInRotate .3s ease forwards;animation-delay:calc(var(--i) * .1s + var(--cap-delay))}.cap{height:16px;background-color:#f9ab25;border-radius:3px;box-shadow:inset -3px -3px #0000001a;transition:.3s ease-out}.jar__content{position:relative;padding:8px 12px 16px 8px;background-color:#4c75f2;flex:1;display:flex;flex-direction:column;justify-content:flex-end;border-radius:8px;box-shadow:inset -5px -6px #0000001a,0 2px 2.3px #00000040,0 4px 8.4px #00000040}.jar__content h3{text-align:center;font-size:14px;font-weight:400;background-color:#fff;box-shadow:3px 3px #00000040;padding:2px;min-height:40px;align-content:center}.jar__content ul{position:absolute;bottom:calc(100% + 1.5rem);left:0;width:120%}.jar__content ul li{font-size:15px;transform-origin:left;transform:translate(-20px) rotate(var(--rotation));opacity:0;text-wrap:nowrap;overflow:hidden;mask-image:linear-gradient(to right,#000 20%,#000 60%,transparent)}.jar__content a{color:#222;text-decoration:none}.jar__content a:before{content:"";position:absolute;inset:0}.middle{content:"";display:block;width:100%;height:10px;max-width:90%;margin-inline:auto;background-color:#4c75f2;box-shadow:inset -2px -2px #0000001a;border-radius:6px}@keyframes fadeInRotate{0%{opacity:0;transform:translate(-20px) rotate(var(--rotation))}to{opacity:1;transform:translate(0) rotate(var(--rotation))}}.power-plug{position:absolute;right:95%;top:0;z-index:-1;transform:translate(10px,20px)}.desk-light-wrapper{position:relative;z-index:15;width:fit-content;margin-inline:auto;justify-self:center}@media (min-width: 1030px){.desk-light-wrapper{grid-column:initial;justify-self:initial}}.lamp{position:relative;width:155px;height:190px;display:flex;flex-direction:column;justify-content:flex-end}.base{width:75px;z-index:5}.base:before{content:"";display:block;width:50px;height:20px;background-color:#6455d9;border-top-left-radius:10px;border-top-right-radius:10px}.base:after{content:"";display:block;width:100%;height:12px;background-color:#8576ff;border-top-left-radius:5px;border-top-right-radius:5px}.base:before,.base:after{margin-inline:auto}.joint{--rotation-1: 20;--rotation-2: calc(var(--rotation-1) * -1);--rotation-3: 0;position:absolute;width:13px;height:80px;border-inline:3px solid #a1b0e8;transform-origin:bottom center;transition:.3s ease-out}.joint.joint-1{left:32px;transform:rotate(calc(var(--rotation-1) * 1deg));bottom:25px;z-index:4;anchor-name:--joint-1}.joint.joint-1:after{content:"";position:absolute;left:50%;transform:translate(-50%);bottom:calc(100% - 12.5px);width:25px;height:25px;background-color:#6455d9;border-radius:50%;border:7px solid #8576ff}.joint.joint-2{--threshold: 1.2;position-anchor:--joint-1;bottom:anchor(top);left:30px;transform:translate(calc(var(--rotation-2) * var(--threshold) * -1px)) rotate(calc(var(--rotation-2) * 1deg));z-index:3;anchor-name:--joint-2}.joint.joint-2:after{content:"";position:absolute;left:50%;transform:translate(-50%);bottom:calc(100% - 12.5px);width:25px;height:25px;background-color:#6455d9;border-radius:50%;border:7px solid #8576ff}.joint.joint-3{position-anchor:--joint-2;top:-1px;left:anchor(left);left:36px;top:4px;width:50px;height:13px;border-inline:none;border-block:3px solid #a1b0e8;transform-origin:left center;transform:translate(calc(var(--rotation-2) * .1 * 1px)) rotate(calc(var(--rotation-2) * 1deg))}.joint.joint-3:after{content:"";--size: 34px;position:absolute;right:-10px;top:-10px;width:var(--size);height:var(--size);background-color:#6455d9;border-radius:50%}.joint.joint-3 .lightSVG{position:absolute;left:calc(100% - 20px);top:-30px;width:80px;height:70px;transform:rotate(var(--lampRotation));transform-origin:15px center}.joint.joint-3 .lightSVG svg{width:100%;height:100%}.joint.joint-3 .lightSVG:after{--light-lg-color: rgb( from var(--light-lg-base-color, #8576ff) r g b / .15 );content:"";position:absolute;width:200px;height:190%;left:75%;top:-43%;background:linear-gradient(to right,var(--light-lg-color) 1.11%,transparent);clip-path:polygon(0% 23%,100% 0%,100% 100%,0% 76%);transition:.3s ease-out}.joint.joint-3 .lightSVG.off:after{opacity:0}@property --_index{syntax: "<integer>"; inherits: false; initial-value: 0;}.experiments-list{--col-count: 2;display:grid;grid-template-columns:repeat(var(--col-count),1fr);row-gap:3rem}@media (min-width: 650px){.experiments-list{--col-count: 3}}@media (min-width: 870px){.experiments-list{--col-count: 4}}.experiments-list>div:not(.line){--_index: sibling-index();--index: var(--_index);display:flex;justify-content:flex-end;align-items:center;flex-direction:column;padding-top:2rem;border-bottom:20px solid #fff}.experiment-item{container-type:size;container-name:experiment;--test-pos: random(10%, 70%, 15%);position:relative;display:flex;flex-direction:column;height:100%;width:100%;aspect-ratio:95/170;border-top:1px solid rgba(0,0,0,.1);border-right:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);max-width:150px;border-top-left-radius:10px;border-top-right-radius:10px}.experiment-item:hover p{transform:translateY(0)}.experiment-item .cap{height:24px;background-color:#422547;border-top-left-radius:10px;border-top-right-radius:10px}.experiment-item .content{flex:1;background:#dee5fc;padding:0 .75rem 1rem}.experiment-item .content-inner{--circle-pos-x: random(-10%, 110%, 10%);--circle-pos-y: random(0%, 100%, 10%);display:flex;align-items:center;justify-content:center;height:100%;background-color:hsl(from #461b7e calc(var(--index) * 15) s calc(l + 40));background-image:radial-gradient(circle 50px at var(--circle-pos-x) var(--circle-pos-y),rgba(from #fff r g b/.75) 10%,transparent);border-bottom-left-radius:15px;border-bottom-right-radius:15px;box-shadow:inset 0 -5px 5px 2px #0000001a,inset 0 -10px #0000000b}.experiment-item a{flex:0 0 130%;text-decoration:none;color:#222}.experiment-item a:after{content:"";position:absolute;inset:0;width:100%;height:100%}.experiment-item p{text-align:center;font-size:17px;font-weight:400;background-color:#fff;box-shadow:3px 3px #00000040;padding:8px;min-height:40px;align-content:center;rotate:-2deg;transform:translateY(var(--test-pos));transition:transform .3s ease-out}.experiments-list .line{grid-column:1/-1;height:20px;background-color:#fff;margin-bottom:2rem;width:max(100%,min(1150px,100vw - 100% + 100vw - 50%));margin-left:max(0px,(100% - 1150px) / 2);box-shadow:0 3px 10px #0000001a;border-image:conic-gradient(#fff 0 0) fill 0/0/0 5vw;display:none}.experiments-list .line:last-of-type{margin-bottom:0}.lab-mixer{--color-1: #dd4f54;--color-2: #f0a632;--color-3: #a68cf7;--color-4: #2b98f0;--color-5: #e45ebf;overflow:hidden;margin-bottom:10rem}.lab-mixer.is-mixing .lab-mixer__end{opacity:0}.lab-mixer.is-mixing .lab-mixer__start{transform:translate(50%)}.lab-mixer__row{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:2rem}.lab-mixer__row>*{transition:opacity .3s var(--ease-elastic-in-3),transform .3s var(--ease-elastic-in-3)}.lab-mixer__form{max-width:600px;margin-inline:auto;display:flex;flex-direction:column;gap:1rem}.lab-mixer__start{position:relative;display:flex;justify-content:center}.lab-mixer__end{display:flex;flex-direction:column;gap:2rem}.lab-mixer__results{margin-block:2rem 1rem;animation:fadeIn .5s ease forwards}.lab-mixer__results-title{text-align:center;font-size:1.125rem;font-weight:400}.lab-mixer__results-empty{text-align:center;color:var(--gray-7);margin-bottom:1rem}.lab-mixer__header{text-align:center}.lab-mixer__header h2{font-size:1.5rem}.bowl{anchor-name:--bowl;--top-radius: 25px;--bottom-radius: 12px;--color-1: #dd4f54;--color-2: #f0a632;--color-3: #a68cf7;--color-4: #2b98f0;--color-5: #e45ebf;--mix-1: color-mix(in srgb, var(--color-1), var(--color-2));--mix-2: color-mix(in srgb, var(--mix-1), var(--color-3));--mix-3: color-mix(in srgb, var(--mix-2), var(--color-4));--mix-4: color-mix(in srgb, var(--mix-3), var(--color-5));--reflection-color-00: rgb(from #fff r g b / .1);--reflection-color-0: rgb(from #fff r g b / .25);--reflection-color-1: rgb(from #fff r g b / .35);--reflection-color-2: rgb(from #fff r g b / .65);position:relative;display:flex;flex-direction:column-reverse;justify-content:flex-start;width:70px;height:250px;background-color:#d1d6e6;box-shadow:0 0 0 4px #fff3;border-radius:var(--top-radius) var(--top-radius) var(--bottom-radius) var(--bottom-radius)}.bowl.mix-1 span{background-color:var(--mix-1)!important}.bowl.mix-2 span{background-color:var(--mix-2)!important}.bowl.mix-3 span{background-color:var(--mix-3)!important}.bowl.mixing{animation:mix 1s ease-out infinite alternate}.bowl.mixing span.fade-in:last-child{clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%);animation:mixEffect 1s ease-out infinite alternate,fadeIn .5s ease forwards}.bowl:after{content:"";position:absolute;top:-1px;left:0;width:100%;height:36px;background-color:#a7abb8;border-radius:50%}.bowl:before{content:"";--reflection-item-1: linear-gradient( 65deg, var(--reflection-color-1), transparent );--reflection-item-2: linear-gradient( 65deg, var(--reflection-color-1), transparent );--reflection-item-3: radial-gradient( ellipse 100% 40px at center, var(--reflection-color-0) 0%, var(--reflection-color-0) 50%, transparent 0 );--reflection-item-4: radial-gradient( ellipse 100% 40px at center, var(--reflection-color-0) 0%, var(--reflection-color-0) 50%, transparent 0 );position:absolute;inset:0;z-index:1;background-image:var(--reflection-item-1),var(--reflection-item-2),var(--reflection-item-3),var(--reflection-item-4);background-size:20px 120px,10px 80px,20px 40px,15px 35px;background-position:0 100%,90% 100%,10px 70px,calc(100% - 5px) 120px;background-repeat:no-repeat}.bowl span{display:block;height:40px;width:100%;transform-origin:bottom;transition:all .5s ease;border-top:2px solid rgba(0,0,0,.07)}.bowl span:first-child{border-bottom-left-radius:var(--bottom-radius);border-bottom-right-radius:var(--bottom-radius)}.bowl span.fade-in{opacity:0;transform:scaleY(0);animation:fadeIn .5s ease forwards}.bowl span.fade-out{opacity:0;transform:scaleY(0)}.lab-mixer:has(.has-selector.active) .move{--distance: 95%}.lab-mixer:has(.has-selector.active) .bowl-test .item{offset-path:path("M382 100.669C325.297 16.844 51.6697 -56.5025 8.15385 70.2279C-5.74586 110.708 8.15206 151.557 8.81477 179")}.lab-mixer:has(.clamp.active) .bowl-test .item{offset-path:path("M441 100.669C375.493 16.844 59.3816 -56.5025 9.10931 70.2279C-6.94851 110.708 9.10725 151.557 9.87286 179")}.lab-mixer:has(.grid.active) .bowl-test .item{offset-path:path("M501 100.669C426.539 16.844 67.2241 -56.5025 10.081 70.2279C-8.17154 110.708 10.0786 151.557 10.9489 179")}.lab-mixer:has(.flex.active) .bowl-test .item{offset-path:path("M554 100.669C471.631 16.8439 74.1517 -56.5027 10.9393 70.2278C-9.25188 110.708 10.9367 151.557 11.8994 179")}.bowl-test{position:absolute;position-anchor:--container-query;left:anchor(--bowl center);right:anchor(center);bottom:anchor(center);height:180px}.bowl-test .item{height:20px;width:70px;background-color:var(--bg-color, red);border-radius:10px;offset-path:path("M307 100.669C261.339 16.8439 40.9969 -56.5027 5.95523 70.2278C-5.23769 110.708 7.46635 197.557 8 225");offset-distance:0%;opacity:0}.bowl-test .item.move{animation:showItem 1.5s ease-out forwards;--distance: 100%}@keyframes showItem{0%{offset-distance:0%;opacity:0}50%{opacity:1;offset-distance:var(--distance)}to{opacity:0;offset-distance:var(--distance)}}.samples{display:flex;gap:1rem;z-index:1}.samples li{display:flex;align-items:flex-end;justify-content:center;position:relative;background-color:#dd4f54;width:40px;height:160px;padding:8px;border-radius:8px;cursor:pointer;border:3px solid transparent;box-shadow:0 3px 5px 0 transparent}.samples li.active{border-color:#00000080;box-shadow:0 5px 5px #0003}.samples li.container-queries{background-color:#dd4f54;anchor-name:--container-query}.samples li.has-selector{background-color:#f0a632;anchor-name:--has}.samples li.clamp{background-color:#a68cf7;anchor-name:--clamp}.samples li.grid{background-color:#2b98f0;anchor-name:--grid}.samples li.flex{background-color:#e45ebf;anchor-name:--flex}.samples li span{color:#fff;writing-mode:vertical-lr;white-space:nowrap;user-select:none;transform:scale(-1)}.mix-btn{width:100%;appearance:none;border:0;padding:16px 24px;font-size:16px;font-weight:700;border-radius:10px;color:#fff;background:var(--blue-7);transition:.3s ease-out;cursor:pointer}.mix-btn:hover{background-color:hsl(from var(--blue-7) h s calc(l - 5))}.mix-btn[disabled]{background-color:var(--gray-5);cursor:not-allowed}.lab-mixer__note{color:var(--gray-7);font-size:.875rem;text-align:center}@keyframes fadeIn{0%{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}@keyframes fadeOut{0%{opacity:1;transform:scaleY(1)}to{opacity:0;transform:scaleY(0)}}@keyframes mix{25%{transform:translate(-3px)}50%{transform:translate(3px) rotate(2.5deg)}75%{transform:translate(0) rotate(2.5deg)}to{transform:translate(0) rotate(-2.5deg)}}@keyframes mixEffect{25%{clip-path:polygon(0% 2%,100% 0%,100% 100%,0% 100%)}60%{clip-path:polygon(0% 10%,100% 0%,100% 100%,0% 100%)}75%{clip-path:polygon(0% 15%,100% 0%,100% 100%,0% 100%)}90%{clip-path:polygon(0% 3%,100% 0%,100% 100%,0% 100%)}}.construction-banner[data-astro-cid-6zbzgwgs]{display:flex;align-items:center;justify-content:center;gap:.5rem;max-width:850px;margin-inline:auto;padding:1rem;border-radius:12px;background-color:#fff7e0;color:#6b4e00;box-shadow:0 0 0 5px #0000000d}html{--color-item1: red;--color-item2: blue;--color-item3: green}.wrapper[data-astro-cid-j7pv25f6]{margin:auto;padding:1.5rem;max-width:1100px}.jars-list[data-astro-cid-j7pv25f6]{--column-count: 2;position:relative;max-width:850px;margin-inline:auto;display:flex;flex-wrap:wrap;align-items:flex-end;row-gap:3rem;margin-block:var(--size-12) 7rem;padding-bottom:20px}.jars-list[data-astro-cid-j7pv25f6]>div[data-astro-cid-j7pv25f6]{flex:1 1 170px;border-bottom:20px solid #fff;box-shadow:0 2px #0000001a}.jars-list[data-astro-cid-j7pv25f6]>div[data-astro-cid-j7pv25f6]:has(.desk-light-wrapper){grid-column:1/-1}@media (min-width: 1030px){.jars-list[data-astro-cid-j7pv25f6]>div[data-astro-cid-j7pv25f6]:has(.desk-light-wrapper){grid-column:initial}}@media (min-width: 500px){.jars-list[data-astro-cid-j7pv25f6]{--column-count: 2}}@media (min-width: 780px){.jars-list[data-astro-cid-j7pv25f6]{--column-count: 5}}.jars-list[data-astro-cid-j7pv25f6] .jar[data-astro-cid-j7pv25f6]{margin-inline:auto}.line[data-astro-cid-j7pv25f6]{grid-column:1/-1;grid-row:calc(1 * var(--index));width:100%;height:20px;background-color:#fff;box-shadow:0 3px 10px #0000001a;margin-bottom:4rem}@media (min-width: 780px){.line[data-astro-cid-j7pv25f6].mobile-only:last-of-type{display:none}}@media (min-width: 1030px){.line[data-astro-cid-j7pv25f6].mobile-only{display:none}}html{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased}