@charset "UTF-8";@layer core,playground,project;@layer project{.css-tricks{display:flex;flex-flow:column wrap;align-items:flex-start;justify-content:flex-start;gap:20vw;padding:20vh 20vw;font-size:1.2vw;line-height:150%}.simple-swiper{display:flex;flex-flow:column nowrap;gap:1vw}.simple-swiper .swiper{position:relative;z-index:1;width:44vw;padding-bottom:2vw;overflow:hidden;user-select:none}.simple-swiper .swiper__container{width:44vw;overflow:hidden;border-radius:1vw}.simple-swiper .swiper__items{display:flex;flex-flow:row nowrap;position:relative;z-index:1;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;line-height:0}.simple-swiper .swiper__item{flex:0 0 44vw;width:44vw;scroll-snap-align:center}.simple-swiper .swiper__item img{width:100%;aspect-ratio:4/3}.simple-swiper .swiper__drag{position:absolute;inset:0 auto auto 0;width:100%;height:calc(100% - 2vw);z-index:2}.simple-swiper .swiper__pagination{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;gap:.5vw;position:absolute;inset:auto 0 0;z-index:2}.simple-swiper .swiper__pagination-item{width:.7vw;height:.7vw;background:color-mix(in srgb,var(--playground-body-color-text) 20%,transparent);border-radius:50%;font-size:0;transition:background .321s ease-in-out}.simple-swiper .swiper__pagination-item--active{background:var(--playground-body-color-text)}.masonry-layout{width:100%}.masonry-layout p{margin-bottom:1vw}.masonry-layout>div{width:100%;column-width:200px}.masonry-layout>div>img{display:block;width:100%;height:10vw;margin-bottom:1vw;border-radius:1vw;object-fit:cover}.masonry-layout>div>img:nth-child(4n){height:30vw}.masonry-layout>div>img:nth-child(4n-1){height:20vw}.masonry-layout>div>img:nth-child(4n-2){height:15vw}.native-select-with-icons{display:flex;flex-flow:column nowrap;gap:1vw}.native-select-with-icons select,.native-select-with-icons select::picker(select){appearance:base-select;border:none}.native-select-with-icons select{width:21vw;padding:1.07vw 1.2vw;background:var(--playground-body-color-background);border:1px solid var(--playground-body-color-text);border-radius:1vw;color:var(--playground-body-color-text);font-family:inherit;font-size:inherit;line-height:inherit;outline:none;appearance:base-select}.native-select-with-icons select selectedcontent{display:flex;flex-flow:row nowrap;align-items:center;gap:.7vw}.native-select-with-icons select selectedcontent svg{width:1.4vw}.native-select-with-icons select selectedcontent svg path{stroke:var(--playground-body-color-text)}.native-select-with-icons select::picker-icon{content:"🡣";transform:translateY(.1vw);color:var(--playground-body-color-text);font-size:1vw}.native-select-with-icons select:open::picker-icon{content:"🡡";transform:translateY(-.1vw)}.native-select-with-icons select>div{margin:.5vw 0;overflow:hidden;background:var(--playground-body-color-background);border:1px solid var(--playground-body-color-text);border-radius:1vw}.native-select-with-icons select option{gap:.7vw;padding:.5vw 1.2vw;color:var(--playground-body-color-text);font-family:inherit;font-size:inherit;line-height:inherit}.native-select-with-icons select option:hover{background:var(--playground-body-color-text);color:var(--playground-body-color-background)}.native-select-with-icons select option:hover svg path{stroke:var(--playground-body-color-background)}.native-select-with-icons select option::checkmark{content:"🡢";transform:translateY(.1vw);font-size:1vw}.native-select-with-icons select option svg{width:1.2vw}.native-select-with-icons select option svg path{stroke:var(--playground-body-color-text)}.native-file-input{display:flex;flex-flow:column nowrap;gap:1vw}.native-file-input fieldset{display:flex;flex-flow:row nowrap}.native-file-input fieldset+p{margin-top:2vw}.native-file-input .input-file{position:relative;z-index:1}.native-file-input .input-file input{width:21vw;padding:1.2vw;border:1px solid var(--playground-body-color-text);border-radius:1vw;font-family:inherit;font-size:inherit;outline:none}.native-file-input .input-file input::file-selector-button{height:3.2vw;margin:-2vw 1.2vw -2vw -.8vw;padding:0 1.2vw;background:var(--playground-body-color-text);color:var(--playground-body-color-background);font-family:inherit;font-size:inherit;border:none;border-radius:1vw}.native-file-input .input-file input:not(:invalid)+button{display:inline-block}.native-file-input .input-file input+button{display:none;margin-left:1.2vw}.native-file-input .input-file input+button svg{width:1.3vw}.native-file-input .input-file--2 input::file-selector-button{width:9vw;transform:translateY(-.4vw);font-size:0}.native-file-input .input-file--2:before{content:"Select a file";position:absolute;inset:0 auto auto 0;z-index:2;padding:1.45vw 1.6vw;color:var(--playground-body-color-background);font-size:inherit;line-height:1;pointer-events:none}.native-file-input .input-file--3 input::file-selector-button{width:10vw;transform:translateY(-.4vw);font-size:0}.native-file-input .input-file--3:before{content:"Upload File";position:absolute;inset:0 auto auto 0;z-index:2;padding:1.45vw 1.6vw 0 3.4vw;color:var(--playground-body-color-background);font-size:inherit;line-height:1;pointer-events:none}.native-file-input .input-file--3:after{content:"";position:absolute;inset:1.5vw auto auto 1.7vw;z-index:3;width:1vw;height:1vw;mask:url('data:image/svg+xml;utf8,          <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">            <path d="M7 12V3.85L4.4 6.45L3 5L8 0L13 5L11.6 6.45L9 3.85V12H7ZM2 16C1.45 16 0.979333 15.8043 0.588 15.413C0.196666 15.0217 0.000666667 14.5507 0 14V11H2V14H14V11H16V14C16 14.55 15.8043 15.021 15.413 15.413C15.0217 15.805 14.5507 16.0007 14 16H2Z" fill="black"/>          </svg>        ') no-repeat center/contain;background:var(--playground-body-color-background)}.custom-css-validation form{display:flex;flex-flow:column nowrap;align-items:flex-start;gap:1vw}.custom-css-validation form input{height:4vw;width:20vw;padding:0 1.6vw;border:1px solid var(--playground-body-color-text);border-radius:1vw;font-family:inherit;font-size:inherit;outline:none}.custom-css-validation form input:invalid:placeholder-shown+.error-message{display:none}.custom-css-validation form input:invalid+.error-message{display:block}.custom-css-validation form input:invalid+.error-message:before{content:"Please enter a valid email"}.custom-css-validation form input:invalid:placeholder-shown~button{display:none}.custom-css-validation form input:invalid~button{cursor:not-allowed}.custom-css-validation form .error-message{display:none;color:#ff3d00;font-size:inherit}.custom-css-validation form button{height:4vw;padding:0 1.6vw;background:var(--playground-body-color-text);color:var(--playground-body-color-background);font-family:inherit;font-size:1.2vw;border:none;border-radius:1vw;cursor:pointer}.custom-css-validation form button:hover{background:color-mix(in srgb,var(--playground-body-color-text) 80%,transparent)}.filled-inputs-highlight{display:flex;flex-flow:column nowrap;gap:1vw}.filled-inputs-highlight form{display:flex;flex-flow:row wrap;gap:2vw}.filled-inputs-highlight input{width:12vw;padding:1.2vw;background:var(--playground-body-color-background);border:1px solid var(--playground-body-color-text);border-radius:1vw;font-family:inherit;font-size:inherit;outline:none}.filled-inputs-highlight input:not(:placeholder-shown){box-shadow:inset 0 0 0 2px var(--playground-body-color-text)}.filled-inputs-highlight input:nth-child(2n){width:7.3vw}.filled-inputs-highlight input:last-child{width:16vw}.native-autocomplete{display:flex;flex-flow:column nowrap;gap:1vw}.native-autocomplete input{width:21vw;padding:1.2vw;background:var(--playground-body-color-background);border:1px solid var(--playground-body-color-text);border-radius:1vw;font-family:inherit;font-size:inherit;outline:none;appearance:textfield}.native-autocomplete input::-webkit-textfield-decoration-container{color:var(--playground-body-color-text)}.adaptive-tooltip{display:flex;flex-flow:column nowrap;gap:1vw}.adaptive-tooltip .text{font-size:2vw;line-height:123%}.adaptive-tooltip .text:has(.anchor--1:hover)~.tooltip--1,.adaptive-tooltip .text:has(.anchor--2:hover)~.tooltip--2{display:block}.adaptive-tooltip .anchor{display:inline-flex;align-items:center;justify-content:center;transform:translate(.2vw,-.9vw);width:1.2vw;height:1.2vw;margin:0 .2vw 0 0;background:var(--playground-body-color-text);color:var(--playground-body-color-background);border-radius:50%;font-size:.7vw;line-height:0;font-weight:700;cursor:help}.adaptive-tooltip .anchor:before{content:"?"}.adaptive-tooltip .anchor--1{anchor-name:--tooltip-anchor--1}.adaptive-tooltip .anchor--2{anchor-name:--tooltip-anchor--2}.adaptive-tooltip .tooltip{display:none;position:absolute;bottom:anchor(bottom);left:anchor(left);width:21vw;margin:0 0 2.3vw 1.6vw;padding:1.2vw;background:var(--playground-body-color-background);color:var(--playground-body-color-text);border:1px solid var(--playground-body-color-text);border-radius:1vw 1vw 1vw 0;font-size:.8vw;line-height:150%}.adaptive-tooltip .tooltip--1{position-anchor:--tooltip-anchor--1}.adaptive-tooltip .tooltip--2{position-anchor:--tooltip-anchor--2}.tags-reordering{display:flex;flex-flow:column nowrap;gap:1vw}.tags-reordering .tags{display:flex;flex-flow:row wrap;gap:1vw}.tags-reordering .tags .tag{padding:.6vw 1.8vw;background:var(--playground-body-color-background);border:1px solid var(--playground-body-color-text);border-radius:3vw;font-family:inherit;font-size:inherit;cursor:pointer}.tags-reordering .tags .tag input{position:absolute;opacity:0}.tags-reordering .tags .tag:has(input:checked){order:-1;background:var(--playground-body-color-text);color:var(--playground-body-color-background)}.focus-test{display:flex;flex-flow:row wrap;gap:1vw}.focus-test input{width:12vw;padding:1.2vw;border:1px solid var(--playground-body-color-text);border-radius:1vw}.focus-test input:focus,.focus-test input:focus:not(:focus-visible){outline:none}.focus-test input:focus-visible{outline:1px solid var(--playground-body-color-text);outline-offset:4px}}