:root{--pointer-x: 50%;--pointer-y: 50%;--card-scale: 1;--card-opacity: 0;--translate-x: 0px;--translate-y: 0px;--rotate-x: 0deg;--rotate-y: 0deg;--background-x: var(--pointer-x);--background-y: var(--pointer-y);--pointer-from-center: 0;--pointer-from-top: var(--pointer-from-center);--pointer-from-left: var(--pointer-from-center);--mask: url(/content/2f92e8d5e180a15438d83e9adb8d169033a2a7eeb7eccf8c6307f9359e745c78i0);--foil: url(/content/c8f02311063f06152f46b02fb58650bc713442b58b4a07d4809b07ef026f6816i0)}.card{width:50%}:root{--card-aspect: 380 / 240;--card-radius: 5.2% / 8.3%;--card-edge: hsl(47, 100%, 78%);--card-back: hsl(205, 100%, 25%);--card-glow: hsl(175, 100%, 90%)}.card{-webkit-transform:translate3d(0px,0px,.01px);transform:translateZ(.01px);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;pointer-events:none;z-index:calc(var(--card-scale) * 2);will-change:transform,visibility,z-index}.card,.card *{outline:1px solid transparent}.card,.card__rotator{aspect-ratio:var(--card-aspect);border-radius:var(--card-radius)}.card.active .card__translater,.card.active .card__rotator{touch-action:none}.card__translater,.card__rotator{display:grid;perspective:600px;will-change:transform,box-shadow;transform-origin:center;-webkit-transform-origin:center}.card__translater{width:auto;position:relative;-webkit-transform:translate3d(var(--translate-x),var(--translate-y),.1px) scale(var(--card-scale));transform:translate3d(var(--translate-x),var(--translate-y),.1px) scale(var(--card-scale))}.card__rotator{-webkit-transform:rotateY(var(--rotate-x)) rotateX(var(--rotate-y));-webkit-transform-style:preserve-3d;transform:rotateY(var(--rotate-x)) rotateX(var(--rotate-y));transform-style:preserve-3d;pointer-events:auto}button.card__rotator{border:none;background:transparent;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.card__rotator,.card.active .card__rotator:focus{transition:box-shadow .4s ease,opacity .33s ease-out;box-shadow:0 0 3px -1px transparent,0 0 2px 1px transparent,0 0 5px 0 transparent,0 10px 20px -5px #000,0 2px 15px -5px #000,0 0 20px 0 transparent}.card__rotator *{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}.card__rotator img{-webkit-transform:translate3d(0px,0px,.01px);transform:translateZ(.01px);height:auto}.card__back{background-color:var(--card-back);-webkit-transform:rotateY(180deg) translateZ(1px);transform:rotateY(180deg) translateZ(1px);backface-visibility:visible}.card__front,.card__front *{backface-visibility:hidden}.card__front{opacity:1;transition:opacity .33s ease-out;-webkit-transform:translate3d(0px,0px,.01px);transform:translateZ(.01px)}.loading .card__front{opacity:0}.loading .card__back{-webkit-transform:rotateY(0deg);transform:rotateY(0)}.card__shine{display:grid;transform:translateZ(1px);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)}.card__shine:before,.card__shine:after{--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)}.card__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);transform:translateZ(1.2px)}.card__glare{transform:translateZ(1.41px);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}.card.masked .card__shine,.card.masked .card__shine:before,.card.masked .card__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}.card .card__glare:after{clip-path:var(--clip)}.card{--foil-brightness: .55}.card .card__shine{background-image:radial-gradient(circle at var(--pointer-x) var(--pointer-y),#fff 5%,#000 50%,#fff 80%),linear-gradient(-45deg,#000 15%,#fff,#000 85%),var(--foil);background-blend-mode:soft-light,difference;background-size:120% 120%,200% 200%,cover;background-position:center center,calc((100% * var(--pointer-from-left))) calc((100% * var(--pointer-from-top))),center center;filter:brightness(var(--foil-brightness)) contrast(1.5) saturate(1);mix-blend-mode:color-dodge;opacity:calc((1.5 * var(--card-opacity)) - var(--pointer-from-center))}.card .card__glare{opacity:var(--card-opacity);background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsla(0,0%,100%,.8) 10%,hsla(0,0%,100%,.5) 20%,hsla(0,0%,0%,.75) 90%);filter:brightness(.7) contrast(1.5)}.card .card__glare:after{content:"";opacity:var(--card-opacity);background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),hsl(0,0%,100%) 10%,hsla(0,0%,100%,.5) 20%,hsla(0,0%,0%,.5) 120%);filter:brightness(1) contrast(1.5)}.card{--space: 5%;--angle: 133deg;--imgsize: cover;--red: #f80e35;--yellow: #eedf10;--green: #21e985;--blue: #0dbde9;--violet: #c929f1;--clip-invert: polygon( 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 47.15%, 91.5% 47.15%, 91.5% 9.85%, 8% 9.85%, 8% 47.15%, 0 50% );--clip-stage: polygon( 91.5% 9.85%, 57% 9.85%, 54% 12%, 17% 12%, 16% 14%, 12% 16%, 8% 16%, 8% 47.15%, 92% 47.15% );--clip-stage-invert: polygon( 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 47.15%, 91.5% 47.15%, 91.5% 9.85%, 57% 9.85%, 54% 12%, 17% 12%, 16% 14%, 12% 16%, 8% 16%, 8% 47.15%, 0 50% );--clip-trainer: inset(14.5% 8.5% 48.2% 8.5%);--clip-borders: inset(2.8% 4% round 2.55% / 1.5%)}.card__shine,.card__glare{will-change:transform,opacity,background-image,background-size,background-position,background-blend-mode,filter}.karma-card-gradient-gold{z-index:1}.karma-card-logo,.karma-card-chip,.karma-card-diamond,.karma-card-letters{position:absolute;z-index:10}
html, body { height: 100%; width:100%; display: flex; align-items: center; margin:auto; justify-content:center;}