@charset "UTF-8";@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap");:root{--size:max(5px,1vmin);--height:40em;--pad:0.7em;--border-radius:2.66em;--scene-pad:5vmin;--bg-blur:0.333em;--button-width:0.333em;--notch-height:3.33em;--notch-width:33.3%;--notch-radius:calc(var(--border-radius) - calc(var(--pad) * 2));--notch-duration:0.333s;--ease:cubic-bezier(0.666,0,0.4,1);--ease-spring:cubic-bezier(0.666,0,0.4,1.2);--ease-out:cubic-bezier(0.15,0,0.333,1);--border-width:0.4em;--deep-purple:164;--gold:22.5;--space-black:215;--silver:254;--c-h:var(--deep-purple);--c-s:100%;--c-l:50%}@-webkit-keyframes appear{to{transform:scaleX(1);opacity:1}}@keyframes appear{to{transform:scaleX(1);opacity:1}}body{background:#00000a}.scene{flex-wrap:wrap;gap:3em 0;align-items:center;align-content:center;font-family:Inter;font-size:var(--size);padding:var(--scene-pad);box-sizing:border-box}.phone-con,.scene{display:flex;justify-content:center}.phone-con{flex-basis:100%}.phone{position:relative;z-index:1;aspect-ratio:37/76;background:black;height:var(--height);border-radius:var(--border-radius);box-shadow:0 0 .1em .25em hsl(var(--c-h),20%,25%),0 0 0 var(--border-width) hsl(var(--c-h),30%,85%);box-sizing:border-box;opacity:0;transform:scale3d(1.1,1.1,1);-webkit-animation:appear 1s var(--ease-out) forwards;animation:appear 1s var(--ease-out) forwards;webkit-backface-visibility:hidden}.phone:before{content:"";position:absolute;top:var(--border-radius);right:calc(var(--border-width) * -1);bottom:var(--border-radius);left:calc(var(--border-width) * -1);border-left-width:.5em;border-bottom:.5em solid hsl(var(--c-h),20%,30%);border-right-width:.5em;border-top:.5em solid hsl(var(--c-h),20%,30%);border-left:0 solid hsl(var(--c-h),20%,30%);border-right:0 solid hsl(var(--c-h),20%,30%)}.buttons{position:absolute;inset:calc(var(--border-width) * -1);pointer-events:none}.buttons .left,.buttons .right{position:absolute;width:var(--button-width);display:flex;flex-direction:column;align-items:stretch;gap:1.5em}.buttons .left{right:100%;top:calc(var(--border-radius) * 2)}.buttons .left .button:first-child{height:2em;margin-bottom:.5em}.buttons .right{left:100%;transform:scaleX(-1);top:calc(var(--border-radius) * 3)}.buttons .right .button{height:4.5em}.buttons .button{background:hsl(var(--c-h),20%,95%);height:4em;box-shadow:inset -.15em 0 .1em black,inset 0 0 .1em hsl(var(--c-h),30%,90%),inset 0 .2em .1em hsl(var(--c-h),30%,90%),inset 0 -.2em .1em hsl(var(--c-h),30%,90%),inset -.1em .333em .1em rgba(0,0,0,.5),inset -.1em -.333em .1em rgba(0,0,0,.5);border-top-left-radius:.2em;border-bottom-left-radius:.2em}.screen-container{position:absolute;inset:0;border-radius:var(--border-radius);border:var(--pad) solid black;display:flex;flex-direction:column;align-items:center;gap:calc(var(--pad) * 2)}.bg{border-radius:calc(var(--border-radius) - var(--pad));overflow:hidden;transform:translateZ(0)}.bg,.bg>*{position:absolute;inset:0;background:black}.bg>*{display:flex;flex-direction:column;opacity:0;transition:opacity 1s var(--ease-out) .5s}.bg .section{--g-h:var(--c-h);--g-s:var(--c-s);--g-l:var(--c-l);flex-grow:1;position:relative;overflow:hidden;border-radius:calc(var(--border-radius) - var(--pad));border-bottom-left-radius:20em;border-bottom-right-radius:20em}.bg .section:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(120% 110% at 50% 92.5%,hsla(0deg,0%,0%,1) 33.3%,hsla(0deg,0%,0%,.738) 45.973%,hsla(0deg,0%,0%,.541) 55.978%,hsla(0deg,0%,0%,.382) 64.649%,hsla(0deg,0%,0%,.278) 70.9855%,hsla(0deg,0%,0%,.194) 76.655%,hsla(0deg,0%,0%,.126) 81.991%,hsla(0deg,0%,0%,.075) 86.7934%,hsla(0deg,0%,0%,.042) 90.7287%,hsla(0deg,0%,0%,.021) 93.997%,hsla(0deg,0%,0%,.008) 96.7984%,hsla(0deg,0%,0%,.002) 98.7994%,hsla(0deg,0%,0%,0) 100%),radial-gradient(100% 66.6% at 110% var(--g-hue-adjust-2-y,100%),hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,1) 33.3%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.738) 45.973%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.541) 55.978%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.382) 64.649%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.278) 70.9855%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.194) 76.655%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.126) 81.991%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.075) 86.7934%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.042) 90.7287%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.021) 93.997%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.008) 96.7984%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.002) 98.7994%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,0) 100%),radial-gradient(100% 66.6% at -10% var(--g-hue-adjust-2-y,100%),hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,1) 33.3%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.738) 45.973%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.541) 55.978%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.382) 64.649%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.278) 70.9855%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.194) 76.655%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.126) 81.991%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.075) 86.7934%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.042) 90.7287%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.021) 93.997%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.008) 96.7984%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,.002) 98.7994%,hsla(calc(var(--g-h) - var(--g-hue-adjust-2, var(--g-hue-adjust))),100%,50%,0) 100%),radial-gradient(150% 100% at 50% 80%,hsla(calc(var(--g-h) + 33.3),100%,var(--g-lightness,82.5%),0) 35%,hsla(calc(var(--g-h) + 33.3),100%,var(--g-lightness,82.5%),.262) 47.35%,hsla(calc(var(--g-h) + 33.3),100%,var(--g-lightness,82.5%),.459) 57.1%,hsla(calc(var(--g-h) + 33.3),100%,var(--g-lightness,82.5%),.618) 65.55%,hsla(calc(var(--g-h) + 33.3),100%,var(--g-lightness,82.5%),.722) 71.725%,hsla(calc(var(--g-h) + 33.3),100%,var(--g-lightness,82.5%),.806) 77.25%,hsla(calc(var(--g-h) + 33.3),100%,var(--g-lightness,82.5%),.874) 82.45%,hsla(calc(var(--g-h) + 33.3),100%,var(--g-lightness,82.5%),.925) 87.13%,hsla(calc(var(--g-h) + 33.3),100%,var(--g-lightness,82.5%),.958) 90.965%,hsla(calc(var(--g-h) + 33.3),100%,var(--g-lightness,82.5%),.979) 94.15%,hsla(calc(var(--g-h) + 33.3),100%,var(--g-lightness,82.5%),.992) 96.88%,hsla(calc(var(--g-h) + 33.3),100%,var(--g-lightness,82.5%),.998) 98.83%,hsla(calc(var(--g-h) + 33.3),100%,var(--g-lightness,82.5%),1) 100%);background-color:hsl(var(--g-h),var(--g-s),var(--g-l));transform:scale3d(1.1,1.25,1);transform-origin:bottom;transition:transform 1s var(--ease-out) .5s}.bg .section:after{content:"";border:var(--border-width) solid rgba(255,255,255,.8);filter:blur(.05em);-webkit-mask-image:radial-gradient(100% 100% at 50% 70%,black 30%,transparent 50%);mask-image:radial-gradient(100% 100% at 50% 70%,black 30%,transparent 50%);transform:translatez(2px)}.bg .section .glow,.bg .section:after{position:absolute;inset:0;border-radius:inherit}.bg .section .glow{mix-blend-mode:overlay;z-index:1;background:radial-gradient(80% 150% at 50% 100%,hsl(var(--g-h),100%,var(--g-l)),transparent 70%)}.bg .section:last-of-type{--g-h:calc(var(--c-h) - var(--g-hue-adjust, 0));--g-l:calc(var(--c-l) + 40%);--g-lightness:95%;transform:scaleY(-1) translateZ(1px)}.notch-container{position:absolute;z-index:3;top:var(--pad);right:var(--pad);left:var(--pad);display:flex;justify-content:center;height:100%;max-height:calc(var(--notch-radius) * 2);pointer-events:none;outline:none;transition:var(--notch-duration) var(--ease);transition-property:max-height,max-width,filter,transform;will-change:max-width,max-height,filter}.is-resizing .notch-container,.is-resizing .notch-container *{transition:none}.notch-container:focus-within,.notch-container:hover{--shadow-opacity:0.5;transition-timing-function:var(--ease-spring)}.notch-container:focus-within .content,.notch-container:hover .content{--content-padding:2em}.notch-container:focus-within .content .text,.notch-container:hover .content .text{opacity:1}.notch-container:focus-within .notch,.notch-container:hover .notch{max-width:100%;max-height:100%;pointer-events:all;transform:scaleX(1)}.notch-container:focus-within~.notch-blur,.notch-container:hover~.notch-blur{opacity:1;max-height:calc(var(--notch-radius) * 3.333 + var(--pad))}.notch-container:focus-within{max-height:calc(var(--notch-radius) * 3);--bar-height:1em;--bar-opacity:1}.notch-container:focus-within .left,.notch-container:focus-within .right{max-height:calc(100% - var(--bar-height, 0%) - var(--content-gap))}.notch-container:focus-within~.notch-blur{max-height:calc(var(--notch-radius) * 5);opacity:1}.notch-blur{position:absolute;z-index:2;top:calc(var(--pad) - 3px);right:calc(var(--pad) - 3px);left:calc(var(--pad) - 3px);height:100%;max-height:calc(var(--notch-radius) * 1.5);-webkit-backdrop-filter:blur(.2em);backdrop-filter:blur(.2em);-webkit-mask-image:linear-gradient(180deg,hsla(0deg,0%,0%,1) 60%,hsla(0deg,0%,0%,.738) 67.6%,hsla(0deg,0%,0%,.541) 73.6%,hsla(0deg,0%,0%,.382) 78.8%,hsla(0deg,0%,0%,.278) 82.6%,hsla(0deg,0%,0%,.194) 86%,hsla(0deg,0%,0%,.126) 89.2%,hsla(0deg,0%,0%,.075) 92.08%,hsla(0deg,0%,0%,.042) 94.44%,hsla(0deg,0%,0%,.021) 96.4%,hsla(0deg,0%,0%,.008) 98.08%,hsla(0deg,0%,0%,.002) 99.28%,hsla(0deg,0%,0%,0));mask-image:linear-gradient(180deg,hsla(0deg,0%,0%,1) 60%,hsla(0deg,0%,0%,.738) 67.6%,hsla(0deg,0%,0%,.541) 73.6%,hsla(0deg,0%,0%,.382) 78.8%,hsla(0deg,0%,0%,.278) 82.6%,hsla(0deg,0%,0%,.194) 86%,hsla(0deg,0%,0%,.126) 89.2%,hsla(0deg,0%,0%,.075) 92.08%,hsla(0deg,0%,0%,.042) 94.44%,hsla(0deg,0%,0%,.021) 96.4%,hsla(0deg,0%,0%,.008) 98.08%,hsla(0deg,0%,0%,.002) 99.28%,hsla(0deg,0%,0%,0));opacity:0;border-radius:calc(var(--border-radius) - var(--pad));transition:var(--notch-duration) var(--ease);transition-property:max-height,max-width,opacity,transform;will-change:max-width,max-height}.notch{position:relative;border-radius:var(--notch-radius);pointer-events:all;overflow:hidden;color:white;display:flex;cursor:pointer;width:100%;transition:inherit;transition-property:inherit;will-change:inherit;filter:drop-shadow(0 1em 2em hsla(0 0% 0%/var(--shadow-opacity,0)));transform:scale3d(.375,.4,1);transform-origin:top}.notch:before{content:"";position:absolute;inset:0;background:black;filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1'><defs><filter id='round'><feGaussianBlur in='SourceGraphic' stdDeviation='5' result='blur' /><feColorMatrix in='blur' mode='matrix' values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9' result='goo'/><feComposite in='SourceGraphic' in2='goo' operator='atop'/></filter></defs></svg>#round");border-radius:inherit}.content{--content-padding:1.75em;--duration-height:0.5em;--content-gap:1em;width:100%;display:flex;flex-wrap:wrap;align-items:stretch;justify-content:stretch;padding:var(--content-padding);gap:var(--content-gap);font-size:125%;transition-property:padding;will-change:padding;position:relative}.content .left,.content .right{height:100%;max-height:calc(100% - var(--bar-height, 0%));display:flex;align-items:center;gap:1em}.content,.content .bar,.content .left,.content .right,.content .text{transition:var(--notch-duration) var(--ease-out)}.content .bar,.content .left,.content .right{transition-property:max-height,opacity;will-change:max-height}.content .left{flex-grow:2}.content .text{display:flex;flex-direction:column;gap:.333em;transition-property:opacity;opacity:var(--bar-opacity,0)}.content .text:before{content:"The Move";order:1;text-transform:uppercase}.content .text:after{order:2;content:"Space Rangers";opacity:.5}.content .right{flex-grow:1}.content .tile{background:#1a1ab3;height:100%;aspect-ratio:1;border-radius:33.3%;position:relative}.content .tile:before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(50% 50% at 55% 40%,#131386,#cd1385 75%,transparent) 50%/133.3% 133.3%;background-color:yellow;filter:blur(.05em)}.content .bar{display:flex;align-items:center;gap:1em;flex-basis:100%;height:100%;max-height:var(--bar-height,0);color:rgba(255,255,255,.5);opacity:var(--bar-opacity,0)}.content .bar .duration{position:relative;height:var(--duration-height);background:rgba(255,255,255,.25);border-radius:calc(var(--duration-height) * .5);overflow:hidden;flex-grow:1}.content .bar .duration:before{content:"";height:100%;background:white;width:25%;position:absolute}.content .bar:before{content:"1:20"}.content .bar:after{content:"-1:48"}.camera{display:flex;justify-content:center;align-items:center;height:var(--notch-height);aspect-ratio:1/1;border-radius:50%;pointer-events:none;position:absolute;z-index:4;top:calc(var(--pad) * 2);right:calc(50% - calc(var(--notch-width) * .5));margin-right:calc(var(--pad) * .333)}.camera:before{content:"";height:33.3%;aspect-ratio:1;border-radius:inherit;box-shadow:inset 0 0 .25em #4c4da3;background:radial-gradient(#6667ac,transparent 50%) no-repeat 33.3% 10%/75% 50%,radial-gradient(#454680,transparent 50%) no-repeat 60% 85%/50% 50%;background-color:#080928}.screen{flex-wrap:wrap;align-content:flex-start;gap:var(--gutter);width:100%;position:relative;overflow:hidden;z-index:1;padding:var(--gutter);padding-top:calc(var(--gutter) * 3);border-radius:calc(var(--border-radius) - var(--pad));transition:opacity 1s var(--ease-out) .25s}.app,.screen{display:flex;flex-grow:1;box-sizing:border-box}.app{--col:4;aspect-ratio:1;border-radius:20%;flex-basis:15%;flex-direction:column;justify-content:space-between;gap:2%;padding:5%;font-size:1.5em;--scale:1.5;--duration:0.8s;transform:scale3d(var(--scale),var(--scale),1);-webkit-animation:appear var(--duration) var(--ease-out) forwards;animation:appear var(--duration) var(--ease-out) forwards}.app:first-child,.app:nth-child(2){flex-basis:40%;border-radius:15%;background:linear-gradient(190deg,var(--app-bg-s1,white) 33.3%,var(--app-bg-s2,var(--app-bg-s1,white))) top/100% 125%}.app:not(:first-child):not(:nth-child(2)):before{content:"";background:linear-gradient(190deg,var(--app-bg-s1,white),var(--app-bg-s2,var(--app-bg-s1,white))) top/100% 125%;border-radius:inherit;position:absolute;inset:0;filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1'><defs><filter id='round'><feGaussianBlur in='SourceGraphic' stdDeviation='5' result='blur' /><feColorMatrix in='blur' mode='matrix' values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9' result='goo'/><feComposite in='SourceGraphic' in2='goo' operator='atop'/></filter></defs></svg>#round")}.app:first-child,.app:nth-child(10),.app:nth-child(2),.app:nth-child(3),.app:nth-child(6),.app:nth-child(7){--scale:1.75;--duration:1s}.app:first-child{--app-bg-s1:#3c74c7;--app-bg-s2:#6490d2;color:white;transform-origin:125% 200%}.app:first-child:after{content:"Sunny"}.app:first-child .weather{display:flex;flex-direction:column;gap:2%}.app:first-child .weather:before{content:"Oakland"}.app:first-child .weather:after{font-size:225%;content:"80°"}.app:nth-child(2){--app-bg-s1:#cbe2ae;--app-bg-s2:#eff6e6;transform-origin:-25% 200%}.app:nth-child(2):before{content:"";align-self:flex-end;width:40%;background:#f8d7a2;border:var(--border-width) solid white;aspect-ratio:1;border-radius:50%}.app:nth-child(2):after{content:"Hudson Ave";font-weight:500;margin-top:auto}.app:nth-child(3){--app-bg-s1:#a7f88f;--app-bg-s2:#41c144;transform-origin:175% 200%}.app:nth-child(4){transform-origin:75% 230%}.app:nth-child(5){--app-bg-s1:#cecdd5;--app-bg-s2:#89888d;transform-origin:-25% 230%}.app:nth-child(6){--app-bg-s1:#1ac5fb;--app-bg-s2:#1d71f2;transform-origin:-125% 200%}.app:nth-child(7){--app-bg-s1:#fe9b01;--app-bg-s2:#f67324;transform-origin:175% 80%}.app:nth-child(8){--app-bg-s1:#cb65f0;--app-bg-s2:#8628bb;transform-origin:75% 100%}.app:nth-child(9){--app-bg-s1:#1d71f2;--app-bg-s2:#1ac8fd;transform-origin:-25% 100%}.app:nth-child(10){transform-origin:-125% 80%}.pallette{position:relative;z-index:1;order:1;display:flex;gap:2em;margin-right:2.25em;margin-bottom:-.25em}.pallette:hover~.phone-con .screen{transition-delay:.5s;opacity:0}.zoom-con{order:1}input[type=checkbox],input[type=radio]{display:none}.swatch{--swatch-size:max(30px,5em);--border-opacity:0;background:white;width:var(--swatch-size);height:var(--swatch-size);border-radius:50%;position:relative;cursor:pointer;border:max(1.5px,var(--border-width)) solid black;box-sizing:border-box;background:radial-gradient(100% 100% at 50% 30%,var(--swatch-s1),var(--swatch-s2));opacity:0;transform:translate3d(0,20%,0) scale3d(.75,.75,1);-webkit-animation:appear .333s var(--ease-out) forwards .75s;animation:appear .333s var(--ease-out) forwards .75s;display:flex;align-items:center;color:white;justify-content:center;outline:none}.swatch:before{content:"";position:absolute;inset:-1px;border-radius:inherit;border:var(--border-width) solid black;background-image:radial-gradient(400% 300% at 50% 225%,transparent 20%,white)}.swatch:not([for=zoom]):after{content:"";position:absolute;inset:calc(var(--border-width) * -1);border-width:inherit;border-style:inherit;opacity:var(--border-opacity);transition:.25s var(--ease-out);transition-property:opacity;border-radius:inherit}.swatch:not([for=zoom]):hover{--border-opacity:0.666}.swatch:not([for=zoom]):focus{--border-opacity:1}.swatch:first-child{transform-origin:100% 200%}.swatch:nth-child(2){-webkit-animation-delay:.8s;animation-delay:.8s;transform-origin:80% 200%}.swatch:nth-child(3){-webkit-animation-delay:.85s;animation-delay:.85s;transform-origin:50% 200%}.swatch:nth-child(4){-webkit-animation-delay:.9s;animation-delay:.9s;transform-origin:40% 200%}.swatch:nth-child(5){-webkit-animation-delay:.95s;animation-delay:.95s;transform-origin:20% 200%}.swatch[for=deep-purple]{--swatch-s1:hsl(var(--deep-purple),100%,50%);--swatch-s2:hsl(calc(var(--deep-purple) - 60),100%,20%)}.swatch[for=deep-purple]:before{opacity:.5}.swatch[for=gold]{--swatch-s1:hsl(var(--gold),100%,50%);--swatch-s2:hsl(var(--gold),100%,50%)}.swatch[for=space-black]{--swatch-s1:hsl(var(--space-black),50%,20%);--swatch-s2:hsl(var(--space-black),50%,10%)}.swatch[for=space-black]:before{opacity:.5}.swatch[for=silver]{--swatch-s1:hsl(var(--silver),50%,80%);--swatch-s2:hsl(var(--silver),50%,10%)}.swatch[for=silver]:before{opacity:.75}.swatch[for=random]{border-color:rgba(255,255,255,.25);transition:border-color .2s var(--ease-out)}.swatch[for=random]:before{background:none}.swatch[for=random]:hover{border-color:rgba(255,255,255,.75)}.swatch[for=random]:hover .icon{opacity:1}.swatch[for=random] .icon{position:absolute;inset:22.5%;background:url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m18 15 3 3m0 0-3 3m3-3h-4l-1-1-1-1h-1m4-13 3 3m0 0-3 3m3-3h-4l-1 1-1 1-6 8-1 1-1 1H3M3 6h4l1 1 1 1 1 1' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 50%/contain;opacity:.75;transition:opacity .2s var(--ease-out)}#random:not(:checked)~.scene .swatch[for=random]:after{border:none}#random:checked~.scene .swatch[for=random]{--swatch-s1:hsl(var(--r-h),var(--r-s),var(--r-l));--swatch-s2:hsl(var(--r-h),var(--r-s),calc(min(98%, var(--r-l) + 10%)))}#random:checked~.scene .swatch[for=random]:after{border-color:hsl(var(--r-h),50%,75%)}#random:checked~.scene .swatch[for=random] .icon{background:url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m18 15 3 3m0 0-3 3m3-3h-4l-1-1-1-1h-1m4-13 3 3m0 0-3 3m3-3h-4l-1 1-1 1-6 8-1 1-1 1H3M3 6h4l1 1 1 1 1 1' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 50%/contain}#random:checked~.scene .swatch[for=random]:focus .tooltip,#random:checked~.scene .swatch[for=random]:hover .tooltip{pointer-events:all;opacity:1}.swatch[for=zoom]{--zoom-icon:url("data:image/svg+xml,%3Csvg width='32' height='32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m5 27 9-9m-9 9v-9m0 9h9M27 5l-9 9m9-9v9m0-9h-9' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");-webkit-animation-delay:1s;animation-delay:1s;transform-origin:40% 200%;border-color:rgba(255,255,255,.25);transition:border-color .2s var(--ease-out)}.swatch[for=zoom]:before{background:none}.swatch[for=zoom]:after{content:"";position:absolute;inset:22.5%;background:var(--zoom-icon) center/cover;opacity:.75;transition:opacity .2s var(--ease-out)}.swatch[for=zoom]:hover{border-color:rgba(255,255,255,.5)}.swatch[for=zoom]:hover:after{opacity:1}.swatch[for=zoom]:focus{border-color:rgba(255,255,255,.75)}.swatch[for=zoom]:focus:after{opacity:1}.deep-purple{--c-h:var(--deep-purple);--g-hue-adjust:40;--g-hue-adjust-2:45}.deep-purple .section:last-of-type{--g-hue-adjust-2-y:85%}.gold{--c-h:var(--gold);--g-hue-adjust:0}.gold .section:last-of-type{--g-hue-adjust:15;--g-hue-adjust-2:-190;--g-lightness:82.5%}.space-black{--c-h:var(--space-black);--g-hue-adjust:0;--g-lightness:95%}.space-black .section:last-of-type{--g-hue-adjust:215;--g-hue-adjust-2:-215}.silver{--c-h:var(--silver);--c-s:10%;--g-hue-adjust:40;--g-lightness:95%;--g-hue-adjust-2-y:85%}.silver .section:last-of-type{--g-hue-adjust-2:15}.silver .glow{opacity:.25}label[for=deep-purple]:after{border-color:hsl(var(--deep-purple),50%,75%)}#deep-purple:checked~.scene .phone .bg .deep-purple{opacity:1;z-index:1;transition-delay:0s}#deep-purple:checked~.scene .phone .bg .deep-purple .section:before{transition-delay:0s;transform:scaleX(1) translateZ(0)}#deep-purple:checked~.scene .pallette label[for=deep-purple]{--border-opacity:1!important}label[for=gold]:after{border-color:hsl(var(--gold),50%,75%)}#gold:checked~.scene .phone .bg .gold{opacity:1;z-index:1;transition-delay:0s}#gold:checked~.scene .phone .bg .gold .section:before{transition-delay:0s;transform:scaleX(1) translateZ(0)}#gold:checked~.scene .pallette label[for=gold]{--border-opacity:1!important}label[for=space-black]:after{border-color:hsl(var(--space-black),50%,75%)}#space-black:checked~.scene .phone .bg .space-black{opacity:1;z-index:1;transition-delay:0s}#space-black:checked~.scene .phone .bg .space-black .section:before{transition-delay:0s;transform:scaleX(1) translateZ(0)}#space-black:checked~.scene .pallette label[for=space-black]{--border-opacity:1!important}label[for=silver]:after{border-color:hsl(var(--silver),50%,75%)}#silver:checked~.scene .phone .bg .silver{opacity:1;z-index:1;transition-delay:0s}#silver:checked~.scene .phone .bg .silver .section:before{transition-delay:0s;transform:scaleX(1) translateZ(0)}#silver:checked~.scene .pallette label[for=silver]{--border-opacity:1!important}label[for=random]:after{border-color:hsl(var(--random),50%,75%)}#random:checked~.scene .phone .bg .random{opacity:1;z-index:1;transition-delay:0s}#random:checked~.scene .phone .bg .random .section:before{transition-delay:0s;transform:scaleX(1) translateZ(0)}#random:checked~.scene .pallette label[for=random]{--border-opacity:1!important}#zoom:checked~.scene{--size:max(5px,2vmin);opacity:0;-webkit-animation:appear .5s var(--ease-out) forwards;animation:appear .5s var(--ease-out) forwards}#zoom:checked~.scene .phone{order:1}#zoom:checked~.scene .pallette,#zoom:checked~.scene .zoom-con{order:0;font-size:50%}#zoom:checked~.scene label[for=zoom]{--zoom-icon:url("data:image/svg+xml,%3Csvg width='32' height='32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m14 18-9 9m9-9v9m0-9H5M18 14l9-9m-9 9V5m0 9h9' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}#zoom:not(:checked)~.scene{opacity:0;-webkit-animation:appear-again .5s var(--ease-out) forwards;animation:appear-again .5s var(--ease-out) forwards}@-webkit-keyframes appear-again{to{transform:scaleX(1);opacity:1}}@keyframes appear-again{to{transform:scaleX(1);opacity:1}}.random{background:hsl(var(--r-h),var(--r-s),var(--r-l))}.random--colourful{--bm-outer:overlay;--bm-inner:difference}.random--moody{--bm-outer:exclusion;--bm-inner:multiply}.random--neon{--bm-outer:hue;--bm-inner:multiply}.random--abstract,.random--grayscale{--bm-outer:color-burn;--bm-inner:difference}.random--grayscale{filter:brightness(1.2) grayscale(100%) contrast(2)}.random--light-leak{--bm-outer:color-burn;--bm-inner:multiply}.shapes{mix-blend-mode:var(--bm-outer,overlay);background:hsl(var(--r-h),var(--r-s),85%);position:absolute;inset:0;z-index:1;-webkit-backface-visibility:hidden;backface-visibility:hidden}.shape{transition-property:background,inset,border-radius,filter,transform;will-change:inset,border-radius,filter;mix-blend-mode:var(--bm-inner,difference);top:50%;left:50%;aspect-ratio:1/1;background:hsl(var(--r-h),var(--r-s),var(--r-l));width:var(--w,99%);border-radius:var(--b-r,55%);filter:blur(var(--b));transform:translate3d(calc(var(--x, -1%) - 50%),calc(var(--y, -8%) - 50%),0) scale3d(var(--s-x,1.9),var(--s-y,1.15),1) rotate(var(--r,260deg))}.shape,.tooltip{position:absolute;pointer-events:none}.tooltip{--t-caret:0.5em;z-index:1;top:calc(100% + var(--t-caret) + .5em);white-space:nowrap;background:black;color:rgba(255,255,255,.75);padding:.25em;font-size:max(11px,1em);border-radius:.25em;border:1px solid #404040;opacity:0;transition:opacity .25s var(--ease)}.tooltip:after{content:"";position:absolute;bottom:calc(100% - calc(var(--t-caret) / 2) - 1px);left:calc(50% - calc(var(--t-caret) / 2));border-radius:inherit;height:var(--t-caret);width:var(--t-caret);background:inherit;border:inherit;border-top-color:transparent;border-left-color:transparent;transform:rotate(-135deg)}#zoom:checked~.scene .tooltip{top:unset;bottom:calc(100% + var(--t-caret) + .5em)}#zoom:checked~.scene .tooltip:after{transform:rotate(45deg);top:calc(100% - calc(var(--t-caret) / 2) - 1px);bottom:unset}