.labs-article{min-width:0;max-width:none}.labs-stack{flex-direction:column;gap:1.75rem;display:flex}.lab-study{flex-direction:column;min-width:0;scroll-margin-top:2rem;display:flex}.lab-study__title{color:var(--site-text);margin:0 0 .4rem;padding-left:.125rem;font-size:.8125rem;font-weight:520;line-height:1.2rem}.lab-study__title a{color:inherit;text-decoration:none}.lab-study__title a:hover{color:var(--site-soft)}.lab-study__title a:focus-visible{outline-offset:2px;border-radius:.125rem;outline:2px solid #00000024}.lab-card{background:#ffffff8c;border:1px solid #00000014;border-radius:.625rem;flex-direction:column;flex:1;margin-top:0;display:flex;overflow:hidden}.lab-card__handle{width:100%;height:2.25rem;color:var(--site-muted);cursor:pointer;background:#ffffff8c;border:0;border-top:1px solid #0000000f;justify-content:center;align-items:center;padding:0;transition:color .12s,background .12s;display:flex}.lab-card__handle:hover,.lab-card__handle:focus-visible,.lab-card__handle[aria-expanded=true]{color:var(--site-text);background:#0000000b;outline:none}.lab-stage{background-image:radial-gradient(#0000005c .7px,#0000 .7px);background-size:12px 12px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:1.5rem;min-height:21rem;padding:2.5rem 1rem 2rem;display:flex;overflow:hidden}.loader-stage,.sound-stage{min-height:21rem}.daylight-stage{isolation:isolate;background:#fffdfa;min-height:21rem;padding:0;position:relative;overflow:hidden}.daylight-scene{background:var(--daylight-base);pointer-events:none;position:absolute;inset:0;overflow:hidden}.daylight-scene[data-playing=false] .daylight-foliage,.daylight-scene[data-playing=false] .daylight-grain{animation-play-state:paused}.daylight-playback{z-index:4;color:#181816ad;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;place-items:center;padding:0;display:grid;position:absolute;inset:0}.daylight-playback__glass{-webkit-backdrop-filter:blur(12px)saturate(1.2);backdrop-filter:blur(12px)saturate(1.2);opacity:1;background:#ffffff57;border:1px solid #ffffff94;border-radius:50%;place-items:center;width:2.25rem;height:2.25rem;transition:opacity .42s,transform .42s,background .14s,box-shadow .14s;display:grid;transform:scale(1);box-shadow:0 .35rem 1.2rem #26231b1f,inset 0 1px #ffffffad}.daylight-playback.is-playing .daylight-playback__glass{opacity:0;transform:scale(.9)}.daylight-playback:focus-visible{outline:none}.daylight-playback.is-playing:focus-visible .daylight-playback__glass{opacity:1;transform:scale(1)}.daylight-playback:focus-visible .daylight-playback__glass,.daylight-playback.is-paused:hover .daylight-playback__glass{background:#ffffff7a;box-shadow:0 .35rem 1.2rem #26231b1f,inset 0 1px #ffffffc7,0 0 0 3px #ffffff3d}.daylight-playback:disabled{cursor:default}.daylight-playback .lucide-play{margin-left:.1rem}@media (hover:hover) and (pointer:fine){.daylight-playback.is-playing:hover .daylight-playback__glass{opacity:1;transform:scale(1)}}.daylight-filter{width:0;height:0;position:absolute}.daylight-glow,.daylight-glow-bounce{opacity:var(--daylight-glow-opacity);position:absolute;inset:0}.daylight-glow{background:linear-gradient(309deg, var(--daylight-bounce), var(--daylight-bounce) 20%, transparent 68%)}.daylight-glow-bounce{background:linear-gradient(355deg, var(--daylight-bounce) 0%, transparent 34%, transparent 100%)}.daylight-perspective{opacity:1;width:126%;height:150%;transform:perspective(26rem) rotateZ(var(--daylight-rotation)) rotateY(-2deg) skewX(4deg);transform-origin:100% 0;transform-style:preserve-3d;position:absolute;top:-30%;right:-8%}.daylight-foliage{filter:url(#daylight-wind);mix-blend-mode:multiply;width:116%;height:128%;opacity:var(--daylight-foliage-opacity);transform-origin:72% 28%;background:url(/labs/daylight-foliage.png) 100% 0/155% no-repeat;animation:8s ease-in-out infinite daylight-billow;position:absolute;top:-8%;right:-8%}.daylight-blinds{width:148%;position:absolute;top:0;bottom:0;left:-38%}.daylight-shutters{flex-direction:column;align-items:flex-end;gap:2.15rem;height:100%;display:flex}.daylight-shutters span{background:rgb(21 20 18/var(--daylight-shadow-opacity));flex:none;width:100%;height:.55rem}.daylight-bars{justify-content:space-around;display:flex;position:absolute;inset:0}.daylight-bars span,.daylight-vertical-shutter{background:rgb(21 20 18/var(--daylight-shadow-opacity));height:100%}.daylight-bars span{width:.28rem}.daylight-vertical-shutter{z-index:1;width:.8rem;position:absolute;top:0;right:48%}.daylight-progressive-blur,.daylight-progressive-blur span{position:absolute;inset:0}.daylight-progressive-blur span{-webkit-mask-image:linear-gradient(252deg, transparent, transparent var(--blur-stop-1), black var(--blur-stop-2), black);-webkit-mask-image:linear-gradient(252deg, transparent, transparent var(--blur-stop-1), black var(--blur-stop-2), black);mask-image:linear-gradient(252deg, transparent, transparent var(--blur-stop-1), black var(--blur-stop-2), black)}.daylight-progressive-blur span:first-child{--blur-stop-1:0%;--blur-stop-2:0%;-webkit-backdrop-filter:blur(var(--daylight-blur-1));backdrop-filter:blur(var(--daylight-blur-1))}.daylight-progressive-blur span:nth-child(2){--blur-stop-1:38%;--blur-stop-2:76%;-webkit-backdrop-filter:blur(var(--daylight-blur-2));backdrop-filter:blur(var(--daylight-blur-2))}.daylight-progressive-blur span:nth-child(3){--blur-stop-1:42%;--blur-stop-2:72%;-webkit-backdrop-filter:blur(var(--daylight-blur-3));backdrop-filter:blur(var(--daylight-blur-3))}.daylight-progressive-blur span:nth-child(4){--blur-stop-1:70%;--blur-stop-2:84%;-webkit-backdrop-filter:blur(var(--daylight-blur-4));backdrop-filter:blur(var(--daylight-blur-4))}.daylight-grain{z-index:3;filter:brightness(1.2)sepia(.5);mix-blend-mode:multiply;opacity:.075;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.62'/%3E%3C/svg%3E");background-size:11rem 11rem;animation:1s steps(2,end) infinite daylight-grain;position:absolute;inset:-4rem}@keyframes daylight-billow{0%,to{transform:perspective(25rem)rotateX(0)rotateY(0)scale(1)}25%{transform:perspective(25rem)rotateX(1deg)rotateY(2deg)scale(1.02)}50%{transform:perspective(25rem)rotateX(-4deg)rotateY(-2deg)scale(.97)}75%{transform:perspective(25rem)rotateX(1deg)rotateY(-1deg)scale(1.04)}}@keyframes daylight-grain{0%{transform:translateY(2rem)}20%{transform:translate(-3rem,1rem)}40%{transform:translate(-1rem,3rem)}60%{transform:translate(1rem,-2rem)}80%{transform:translate(3rem,.5rem)}to{transform:translate(-2rem)}}.thonk-button{color:#fffffff5;width:7.5rem;height:4.75rem;font:inherit;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:linear-gradient(#fff 0%,#f5f5f3 100%);border:1px solid #00000021;border-radius:1rem;place-items:center;display:grid;position:relative;box-shadow:0 .55rem #dededb,0 .75rem 1.5rem #0000001f}.thonk-button:after{border-radius:inherit;content:"";pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 1px #ffffffe6}.thonk-button:hover{background:linear-gradient(#fff 0%,#f1f1ef 100%)}.thonk-button:active{box-shadow:0 .12rem #d7d7d4,0 .3rem .65rem #0000001a}.thonk-button:focus-visible{outline:none;box-shadow:0 .55rem #dededb,0 .75rem 1.5rem #0000001f,0 0 0 3px #0000001a}.thonk-button svg{filter:drop-shadow(0 -1px #00000047)drop-shadow(0 1px #fff)}.loader-variants{grid-template-columns:repeat(3,1fr);align-items:center;gap:2.25rem;width:100%;max-width:25rem;display:grid}.loader-variant{aspect-ratio:1;place-items:center;min-width:0;display:grid}.conic-loader{--loader-origin-y:50%;width:4.5rem;height:4.5rem;position:relative;overflow:hidden;box-shadow:0 .4rem 1.25rem #00000014}.conic-loader__layer{background:conic-gradient(from var(--loader-angle) at 50% var(--loader-origin-y), var(--loader-color-a) 0deg, var(--loader-color-b) 180deg, var(--loader-color-a) 360deg);opacity:.52;position:absolute;inset:0}.conic-loader__layer.is-base{opacity:1}.conic-loader--square{border-radius:.2rem}.conic-loader--circle{border-radius:50%}.conic-loader--triangle{--loader-origin-y:62%;clip-path:polygon(50% 0,100% 100%,0 100%)}.semantic-box-frame{justify-content:center;align-items:stretch;width:100%;min-height:10rem;display:flex;position:relative}.semantic-box{z-index:1;touch-action:none;background:#fdfdfcf5;border:1px solid #0000001f;border-radius:.75rem;align-items:center;max-width:100%;min-height:10rem;display:flex;position:relative;overflow:hidden;box-shadow:0 .5rem 2rem #0000000f,0 1px 2px #0000000a}.semantic-box__copy{width:100%;padding:1.5rem}.semantic-box__copy.is-expanded{padding-top:2.5rem}.semantic-box__copy strong{color:var(--site-text);font-size:.875rem;font-weight:460;line-height:1.4;display:block}.semantic-box__copy p{color:var(--site-text);margin:.45rem 0 0;font-size:.875rem;font-weight:460;line-height:1.4}.semantic-box__attribution{display:inline-flex;position:absolute;top:.65rem;left:.65rem}.semantic-box__attribution button{color:#0000004d;cursor:help;background:0 0;border:0;border-radius:50%;place-items:center;width:1.25rem;height:1.25rem;padding:0;display:grid}.semantic-box__attribution button:hover,.semantic-box__attribution button:focus-visible{color:var(--site-soft);background:#0000000b;outline:none}.semantic-box__attribution [role=tooltip]{z-index:2;color:#fff;opacity:0;pointer-events:none;background:#181817f0;border-radius:.35rem;width:max-content;padding:.3rem .45rem;font-size:.625rem;font-weight:450;line-height:.9rem;transition:opacity .12s,transform .12s;position:absolute;top:calc(100% + .3rem);left:0;transform:translateY(-.15rem)}.semantic-box__attribution:hover [role=tooltip],.semantic-box__attribution:focus-within [role=tooltip]{opacity:1;transform:translateY(0)}.semantic-box__handle{cursor:ew-resize;touch-action:none;background:0 0;border:0;width:1.6rem;height:1.6rem;padding:0;position:absolute;bottom:0;right:0}.semantic-box__handle span,.semantic-box__handle:before,.semantic-box__handle:after{content:"";background:#0000004d;border-radius:999px;width:.2rem;height:.2rem;position:absolute}.semantic-box__handle span{bottom:.65rem;right:.25rem}.semantic-box__handle:before{bottom:.38rem;right:.38rem}.semantic-box__handle:after{bottom:.25rem;right:.65rem}.semantic-box__expansion-ghost{z-index:2;pointer-events:none;background:#ffffff2e;border:1px dashed #282b2e85;border-radius:.75rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 .5rem 2rem #00000009}.semantic-box__expansion-ghost:after{content:"";background:#fdfdfcf0;border:1px solid #282b2e8c;border-radius:50%;width:.35rem;height:.35rem;position:absolute;bottom:-.15rem;right:-.15rem}.semantic-box__ghost-hand{z-index:3;color:#222426ad;filter:drop-shadow(0 1px 1px #ffffffe6);pointer-events:none;width:1.25rem;height:1.25rem;position:absolute;bottom:-.85rem}.semantic-box__ghost-hand svg{fill:none;stroke:currentColor;stroke-linejoin:round;stroke-width:1.5px;width:100%;height:100%;display:block;overflow:visible}.zoom-progress{align-items:center;width:10rem;height:2.25rem;display:flex}.zoom-progress input{appearance:none;cursor:ew-resize;background:0 0;width:100%;height:2rem;margin:0}.zoom-progress input::-webkit-slider-runnable-track{background:linear-gradient(to right, #00000094 var(--zoom-progress), #0000001f var(--zoom-progress));border-radius:999px;height:.25rem}.zoom-progress input::-webkit-slider-thumb{appearance:none;border:2px solid var(--site-bg);background:#000000ad;border-radius:50%;width:.875rem;height:.875rem;margin-top:-.3125rem;box-shadow:0 0 0 1px #00000014}.zoom-progress input::-moz-range-track{background:#0000001f;border-radius:999px;height:.25rem}.zoom-progress input::-moz-range-progress{background:#00000094;border-radius:999px;height:.25rem}.zoom-progress input::-moz-range-thumb{border:2px solid var(--site-bg);background:#000000ad;border-radius:50%;width:.875rem;height:.875rem}.zoom-progress input:focus-visible{outline:none}.zoom-progress input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #0000001f}.lab-settings{overflow:hidden}.lab-settings__inner{background:#00000004;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;padding:1rem;display:grid;position:relative}.lab-setting{position:relative}.lab-setting__label{color:var(--site-soft);justify-content:space-between;align-items:center;margin-bottom:.55rem;font-size:.6875rem;font-weight:500;display:flex}.lab-setting__label>span{align-items:center;gap:.25rem;display:inline-flex}.lab-settings output{color:var(--site-muted);font-variant-numeric:tabular-nums}.lab-setting>input[type=range]{appearance:none;cursor:ew-resize;background:0 0;width:100%;height:1.25rem;margin:0}.lab-setting>input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, #000000b8 var(--setting-progress), #0000001f var(--setting-progress));border:0;border-radius:999px;height:.1875rem}.lab-setting>input[type=range]::-webkit-slider-thumb{appearance:none;background:#383837;border:0;border-radius:50%;width:.875rem;height:.875rem;margin-top:-.34375rem}.lab-setting>input[type=range]::-moz-range-track{background:#0000001f;border:0;border-radius:999px;height:.1875rem}.lab-setting>input[type=range]::-moz-range-progress{background:#000000b8;border:0;border-radius:999px;height:.1875rem}.lab-setting>input[type=range]::-moz-range-thumb{background:#383837;border:0;border-radius:50%;width:.875rem;height:.875rem}.lab-setting>input[type=range]:focus{outline:none}.lab-setting>input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #0000001a}.lab-setting__color{cursor:pointer;background:0 0;border:1px solid #00000014;border-radius:.25rem;width:1.5rem;height:1.5rem;padding:0;display:block;overflow:hidden}.lab-setting__color::-webkit-color-swatch-wrapper{padding:0}.lab-setting__color::-webkit-color-swatch{border:0}.lab-setting__color::-moz-color-swatch{border:0}.lab-setting__color:focus-visible{outline:none;box-shadow:0 0 0 2px #0000001a}.lab-setting--palettes{grid-column:1/-1}.lab-setting__palette-list{align-items:center;gap:.9rem;display:flex;overflow-x:auto}.lab-setting__palette{flex:none;align-items:center;gap:.3rem;display:inline-flex}.lab-setting__palette-number{color:var(--site-text);font-variant-numeric:tabular-nums;flex:none;font-size:.6875rem;font-weight:650;line-height:1}.lab-setting__segments{background:#0000000b;border-radius:.375rem;grid-template-columns:repeat(4,1fr);gap:.1875rem;padding:.1875rem;display:grid}.lab-setting__segments button{height:1.5rem;color:var(--site-muted);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:.25rem;padding:0;font-size:.6875rem;transition:background .1s,color .1s,box-shadow .1s;position:relative}.lab-setting__segments button:hover{color:var(--site-text)}.lab-setting__segments button:focus-visible{outline:none;box-shadow:0 0 0 2px #0000001a}.lab-setting__segments button[aria-pressed=true]{color:var(--site-text)}.lab-setting__segment-highlight{background:#fffffff2;border-radius:.25rem;position:absolute;inset:0;box-shadow:0 1px 2px #00000014}.lab-setting__segment-label{z-index:1;position:relative}.lab-setting__value{align-items:center;gap:.3rem;display:inline-flex}.lab-setting__value button{width:1rem;height:1rem;color:var(--site-muted);cursor:pointer;background:0 0;border:0;border-radius:50%;place-items:center;padding:0;transition:color .1s,background .1s;display:grid}.lab-setting__value button:hover:not(:disabled),.lab-setting__value button:focus-visible{color:var(--site-text);background:#0000000f;outline:none}.lab-setting__value button:disabled{opacity:.2;cursor:default}.lab-setting__info{z-index:1;display:inline-flex;position:relative}.lab-setting__info button{color:#00000052;cursor:help;background:0 0;border:0;place-items:center;width:1rem;height:1rem;padding:0;display:grid}.lab-setting__info button:hover,.lab-setting__info button:focus-visible{color:var(--site-soft);outline:none}.lab-tooltip-positioner{z-index:10000}.lab-floating-tooltip{color:#fff;background:#181817f0;border:1px solid #00000014;border-radius:.35rem;width:max-content;max-width:min(14rem,100vw - 1.5rem);padding:.35rem .5rem;font-size:.6875rem;font-weight:450;line-height:1rem;box-shadow:0 .25rem 1rem #0000001a}@media (width<=640px){.lab-stage{min-height:19rem;padding-inline:.75rem}.semantic-box{max-width:calc(100vw - 4.5rem)}.semantic-box__handle{width:2.5rem;height:2.5rem}.lab-settings__inner{grid-template-columns:1fr}.loader-variants{gap:.75rem}.conic-loader{width:3.75rem;height:3.75rem}}@media (prefers-reduced-motion:reduce){.daylight-foliage,.daylight-grain{animation:none}.daylight-playback__glass{transition:none}.semantic-box__expansion-ghost,.semantic-box__ghost-hand{display:none}}