.labs-article{max-width:none}.labs-stack{flex-direction:column;gap:1.5rem;display:flex}.lab-card{background:#ffffff8c;border:1px solid #00000014;border-radius:.625rem;margin-top:0;overflow:hidden}.lab-card__title{color:var(--site-text);border-bottom:1px solid #0000000f;padding:.75rem 1rem;font-size:.8125rem;font-weight:520;line-height:1.2rem}.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(#00000017 .65px,#0000 .65px);background-size:12px 12px;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;min-height:21rem;padding:2.5rem 1rem 2rem;display:flex;overflow:hidden}.loader-stage{min-height:15rem}.sound-stage{min-height:16rem}.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{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}.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}}