#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}:root{--pointer-x: 50%;--pointer-y: 50%;--card-scale: 1;--card-opacity: .8;--translate-x: 0px;--translate-y: 0px;--rotate-x: 0;--rotate-y: 0;--background-x: var(--pointer-x);--background-y: var(--pointer-y);--card-aspect: .718;--card-radius: 4.55% / 3.5%;--glittersize: 25%;--sunpillar-1: hsl(2, 100%, 73%);--sunpillar-2: hsl(53, 100%, 69%);--sunpillar-3: hsl(93, 100%, 69%);--sunpillar-4: hsl(176, 100%, 76%);--sunpillar-5: hsl(228, 100%, 74%);--sunpillar-6: hsl(283, 100%, 73%);--sunpillar-clr-1: var(--sunpillar-1);--sunpillar-clr-2: var(--sunpillar-2);--sunpillar-clr-3: var(--sunpillar-3);--sunpillar-clr-4: var(--sunpillar-4);--sunpillar-clr-5: var(--sunpillar-5);--sunpillar-clr-6: var(--sunpillar-6);--space: 5%;--angle: 133deg;--foil: url(/foil.png);--mask: url(/mask.png);--glitter: url(/glitter.png)}.card{display:grid;perspective:1000px}.card *{width:100%;display:grid;grid-area:1/1;aspect-ratio:var(--card-aspect);border-radius:var(--card-radius);image-rendering:optimizeQuality;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;pointer-events:none;overflow:hidden;transform:rotateX(var(--rotate-x)) rotateY(var(--rotate-y));box-shadow:0 10px 20px -5px #000,0 2px 15px -5px #000}.shine{display:grid;overflow:hidden;z-index:3;background:transparent;background-size:cover;background-position:center;filter:brightness(.85) contrast(2.75) saturate(.65);mix-blend-mode:color-dodge;opacity:var(--card-opacity)}.shine:before{--sunpillar-clr-1: var(--sunpillar-5);--sunpillar-clr-2: var(--sunpillar-6);--sunpillar-clr-3: var(--sunpillar-1);--sunpillar-clr-4: var(--sunpillar-2);--sunpillar-clr-5: var(--sunpillar-3);--sunpillar-clr-6: var(--sunpillar-4);grid-area:1/1;transform:translateZ(1px);border-radius:var(--card-radius)}.shine:after{--sunpillar-clr-1: var( --sunpillar-6 );--sunpillar-clr-2: var( --sunpillar-1 );--sunpillar-clr-3: var( --sunpillar-2 );--sunpillar-clr-4: var( --sunpillar-3 );--sunpillar-clr-5: var( --sunpillar-4 );--sunpillar-clr-6: var( --sunpillar-5 );grid-area:1/1;transform:translateZ(1.2px);border-radius:var(--card-radius)}.shine,.shine:before,.shine:after{-webkit-mask-image:var(--mask);mask-image:var(--mask);-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:center center;mask-position:center center}.glare{overflow:hidden;background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsla(0,0%,100%,.8) 10%,hsla(0,0%,100%,.65) 20%,hsla(0,0%,0%,.5) 90%);opacity:var(--card-opacity);mix-blend-mode:overlay}.shine{background-image:var(--glitter),var(--glitter),radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsla(150,20%,10%,1) 10%,hsla(177,22%,80%,.1) 50%,hsla(0,0%,95%,.98) 90%);background-size:var(--glittersize) var(--glittersize),var(--glittersize) var(--glittersize),cover;background-position:40% 45%,55% 55%,center center;background-blend-mode:soft-light,color-burn;filter:brightness(1) contrast(1) saturate(.9)}.shine:before{content:"";-webkit-mask-image:none!important;mask-image:none!important;background-image:var(--foil),radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsla(50,20%,90%,.95) 10%,rgba(181,139,164,.5) 50%,hsl(0,0%,0%) 60%);background-size:cover,cover;background-position:center center,center center;background-blend-mode:color-burn;mix-blend-mode:lighten;filter:brightness(1) contrast(1) saturate(1);opacity:.5}.shine:after{content:"";-webkit-mask-image:none!important;mask-image:none!important;background-image:repeating-linear-gradient(calc(var(--angle)),var(--sunpillar-clr-1) calc(var(--space)*1),var(--sunpillar-clr-2) calc(var(--space)*2),var(--sunpillar-clr-3) calc(var(--space)*3),var(--sunpillar-clr-4) calc(var(--space)*4),var(--sunpillar-clr-5) calc(var(--space)*5),var(--sunpillar-clr-6) calc(var(--space)*6),var(--sunpillar-clr-1) calc(var(--space)*7));background-size:400% 800%;background-position:calc(50% + (50% - (var(--background-x))) * 3) calc(50% + (50% - (var(--background-y))) * 3);filter:brightness(calc(.75 - (var(--pointer-from-center) * .5))) contrast(1) saturate(1);mix-blend-mode:saturation}.glare{background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsla(50,20%,90%,.45) 0%,hsla(150,20%,30%,.45) 45%,hsla(0,0%,0%,.9) 120%);filter:brightness(.9) contrast(2)}.glare:after{content:"";-webkit-mask-image:var(--mask);mask-image:var(--mask);-webkit-mask-size:cover;mask-size:cover;background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsla(50,20%,90%,.75) 0%,hsla(150,20%,30%,.65) 45%,hsla(0,0%,0%,1) 90%);filter:brightness(1) contrast(1.5);mix-blend-mode:overlay;opacity:1}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#393c41;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}