.completion-card{--glitter:url(/img/glitter.png);--grain:url(/img/grain.webp);--glittersize:25%;--shift:1px;--sp1:#ff7a75;--sp2:#ffed61;--sp3:#a8ff61;--sp4:#85fff7;--sp5:#7a95ff;--sp6:#d875ff;--pointer-x:50%;--pointer-y:50%;--pointer-from-center:0;--pointer-from-top:.5;--pointer-from-left:.5;--rotate-x:0deg;--rotate-y:0deg;--background-x:50%;--background-y:50%;--card-opacity:0;cursor:pointer;-webkit-tap-highlight-color:transparent;width:min(300px,100vw - 32px);transform-style:preserve-3d;will-change:transform;transform:translateZ(.01px)}.completion-card__perspective{perspective:600px}.completion-card__rotator{transform:rotateY(var(--rotate-x)) rotateX(var(--rotate-y));transform-style:preserve-3d;will-change:transform;border-radius:16px}.completion-card__inner{background:#0e0f10;border-radius:16px;position:relative;overflow:hidden;transform:translateZ(.01px);box-shadow:0 12px 35px -8px #0009,0 2px 8px #0000004d}.completion-card__border{z-index:2;background:linear-gradient(170deg,#666970 0%,#4a4c4f 20%,#36373a 40%,#57585c 60%,#3d3f43 80%,#62656a 100%);border-radius:14px;padding:7px;position:relative}.completion-card__border-shine{z-index:3;mix-blend-mode:color-dodge;opacity:calc(var(--card-opacity) * .4);pointer-events:none;will-change:opacity, background-position;background-image:repeating-linear-gradient(-30deg,#cc333326,#cc993326,#73b82e26,#2eb8b826,#3380cc26,#8834b226,#cc333326);background-size:400% 400%;background-position:calc(25% + (var(--pointer-x) / 2)) calc(25% + (var(--pointer-y) / 2));filter:brightness(1.2)saturate(.6);border-radius:14px;position:absolute;inset:0}.completion-card__border-glare{z-index:4;pointer-events:none;opacity:calc(var(--card-opacity) * .6);background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), #ffffffb3 0%, #fff3 20%, transparent 55%);mix-blend-mode:overlay;border-radius:14px;position:absolute;inset:0}.completion-card__frame{z-index:5;isolation:isolate;background:linear-gradient(175deg,#191b1f 0%,#101113 100%);border-radius:9px;flex-direction:column;gap:0;padding:14px 14px 12px;display:flex;position:relative;box-shadow:inset 0 1px #ffffff0a,0 0 0 .5px #0000004d}.completion-card__inner:after{content:"";pointer-events:none;background-image:var(--grain);opacity:.035;mix-blend-mode:overlay;z-index:6;background-size:150px 150px;border-radius:16px;position:absolute;inset:0}.completion-card__topbar{z-index:1;justify-content:space-between;align-items:center;padding:0 2px 12px;display:flex;position:relative}.completion-card__academy{text-transform:uppercase;letter-spacing:.1em;color:#ffffff80;font-size:.6rem;font-weight:700}.completion-card__badge{text-transform:uppercase;letter-spacing:.06em;color:#ffffff4d;font-size:.5rem;font-weight:500}.completion-card__thumb-wrap{z-index:1;border-radius:8px;width:100%;position:relative;overflow:hidden}.completion-card__thumb{width:100%;position:relative}.completion-card__thumb>*{border-radius:8px!important}.completion-card__thumb-shine{z-index:2;mix-blend-mode:color-dodge;opacity:calc(var(--card-opacity) * .75);will-change:transform, opacity, background-image, background-size, background-position, background-blend-mode, filter;filter:brightness(.85)contrast(2.5)saturate(.7);border-radius:8px;position:absolute;inset:0}.completion-card__thumb-shine:before,.completion-card__thumb-shine:after{content:"";border-radius:8px;position:absolute;inset:0}.completion-card__thumb-glare{z-index:3;will-change:transform, opacity, background-image;background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), #ffffffb3 10%, #ffffff73 20%, #0006 90%);opacity:calc(var(--card-opacity) * .65);mix-blend-mode:overlay;border-radius:8px;position:absolute;inset:0}.completion-card__info{text-align:center;z-index:1;flex-direction:column;align-items:center;padding:20px 8px 8px;display:flex;position:relative}.completion-card__course{letter-spacing:-.025em;color:#fffffff2;max-width:280px;margin:0;font-size:1.2rem;font-weight:700;line-height:1.25}.completion-card__separator{background:#ffffff12;width:100%;max-width:240px;height:.5px;margin:16px 0 14px}.completion-card__student-label{text-transform:uppercase;letter-spacing:.14em;color:#fff3;margin-bottom:4px;font-size:.5rem;font-weight:500}.completion-card__student-name{color:#ffffffbf;letter-spacing:-.015em;font-size:1rem;font-weight:600}.completion-card__description{color:#fff6;-webkit-line-clamp:3;-webkit-box-orient:vertical;max-width:240px;margin:12px 0 0;font-size:.72rem;font-weight:400;line-height:1.5;display:-webkit-box;overflow:hidden}.completion-card__bottombar{z-index:1;justify-content:space-between;align-items:center;margin-top:16px;padding:0 2px;display:flex;position:relative}.completion-card__stats{align-items:center;gap:5px;display:flex}.completion-card__stat{color:#fff3;letter-spacing:.01em;font-size:.55rem;font-weight:500}.completion-card__stat-dot{background:#ffffff26;border-radius:50%;width:1.5px;height:1.5px}.completion-card__meta{align-items:center;gap:8px;display:flex}.completion-card__date{color:#fff3;font-size:.55rem;font-weight:500}.completion-card__serial{color:#ffffff4d;letter-spacing:.03em;font-family:ui-monospace,monospace;font-size:.5rem;font-weight:600}.completion-card__ambient{z-index:1;pointer-events:none;opacity:var(--card-opacity);background-image:radial-gradient(farthest-corner ellipse at var(--pointer-x) var(--pointer-y), #ffffff0a 0%, #ffffff04 40%, transparent 80%);mix-blend-mode:overlay;border-radius:16px;position:absolute;inset:0}.completion-card[data-variant=rainbow]{--r1:#b92727;--r2:#be8e2d;--r3:#6bb422;--r4:#22b4b4;--r5:#22b4b4;--r6:#2975c2;--r7:#75259d}.completion-card[data-variant=rainbow] .completion-card__thumb-shine{background-image:linear-gradient(-45deg, var(--r1), var(--r5)), var(--glitter), linear-gradient(-30deg, var(--r1), var(--r2), var(--r3), var(--r4), var(--r5), var(--r6), var(--r7), var(--r1), var(--r2), var(--r3), var(--r4), var(--r5), var(--r6), var(--r7), var(--r1), var(--r2), var(--r3), var(--r4), var(--r5), var(--r6), var(--r7), var(--r1));background-blend-mode:luminosity, soft-light;background-size:200% 200%, var(--glittersize) var(--glittersize), 400% 400%;background-position:calc(25% + (50% * var(--pointer-from-left))) calc(25% + (50% * var(--pointer-from-top))), calc(50% - ((var(--shift) * 2) * var(--pointer-from-left)) + var(--shift)) calc(50% - ((var(--shift) * 2) * var(--pointer-from-top)) + var(--shift)), calc(25% + (var(--pointer-x) / 2)) calc(25% + (var(--pointer-y) / 2));filter:brightness(calc((var(--pointer-from-center) * .4) + .7)) contrast(1.8) saturate(1)}.completion-card[data-variant=rainbow] .completion-card__thumb-shine:after{background-image:var(--glitter), linear-gradient(-60deg, var(--r1), var(--r2), var(--r3), var(--r4), var(--r5), var(--r6), var(--r7), var(--r1), var(--r2), var(--r3), var(--r4), var(--r5), var(--r6), var(--r7), var(--r1), var(--r2), var(--r3), var(--r4), var(--r5), var(--r6), var(--r7), var(--r1));background-blend-mode:soft-light;background-size:var(--glittersize) var(--glittersize), 400% 400%;background-position:calc(50% - ((var(--shift) * 2) * var(--pointer-from-left)) - var(--shift)) calc(50% - ((var(--shift) * 2) * var(--pointer-from-top)) - var(--shift)), var(--pointer-x) var(--pointer-y);filter:brightness(calc((var(--pointer-from-center) * .3) + .4)) contrast(1.8) saturate(1);mix-blend-mode:exclusion}.completion-card[data-variant=rainbow] .completion-card__thumb-shine:before{filter:brightness(2)contrast();opacity:calc((var(--pointer-from-center) + .3) * .4);mix-blend-mode:multiply;background-image:url(/img/illusion-mask.png);background-position:50%;background-size:33%}.completion-card[data-variant=rainbow] .completion-card__thumb-glare{background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), #d9d9d9, #bfbfbf40 30%, #373737 130%);filter:brightness(.9)contrast(1.5);opacity:calc(var(--pointer-from-center) * .75);mix-blend-mode:hard-light}.completion-card[data-variant=gold] .completion-card__thumb-shine{background-image:var(--glitter), var(--glitter), conic-gradient(var(--sp4), var(--sp5), var(--sp6), var(--sp1), var(--sp4)), radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), #000000fa 10%, #f2f2f226 90%);background-size:var(--glittersize) var(--glittersize), var(--glittersize) var(--glittersize), cover, cover;background-blend-mode:soft-light, hard-light, overlay;filter:brightness(calc(.15 + (var(--pointer-from-center) * .25))) contrast(1.8) saturate(.6);background-position:45% 45%,55% 55%,50%,50%}.completion-card[data-variant=gold] .completion-card__thumb-shine:before{background-image:url(/img/geometric.png), linear-gradient(45deg, #f9c006, #ffea61), radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), #ebe2e0f2 10%, #000 70%);background-blend-mode:hard-light, multiply;mix-blend-mode:lighten;filter:brightness()contrast(1.1)saturate(.3);opacity:.65;background-position:50%;background-size:33%,cover,cover}.completion-card[data-variant=gold] .completion-card__thumb-shine:after{background-image:var(--glitter);background-size:var(--glittersize) var(--glittersize);background-position:calc(50% - ((var(--shift) * 2) * var(--pointer-from-left)) + var(--shift)) calc(50% - ((var(--shift) * 2) * var(--pointer-from-top)) + var(--shift));filter:brightness(calc((var(--pointer-from-center) * .4) + .4)) contrast(1.2);mix-blend-mode:overlay}.completion-card[data-variant=gold] .completion-card__thumb-glare{background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), #d0cec840 0%, #231d1a 180%);filter:brightness(1.1)contrast(1.3);mix-blend-mode:hard-light}.completion-card[data-variant=cosmos]{--space:4%}.completion-card[data-variant=cosmos] .completion-card__thumb-shine{background-image:url(/img/cosmos-bottom.png), repeating-linear-gradient(82deg, #dbcc57 calc(var(--space)*1), #78c738 calc(var(--space)*2), #39c0b7 calc(var(--space)*3), #4964d0 calc(var(--space)*4), #aa47d1 calc(var(--space)*5), #cc388c calc(var(--space)*6), #cc388c calc(var(--space)*7), #aa47d1 calc(var(--space)*8), #4964d0 calc(var(--space)*9), #39c0b7 calc(var(--space)*10), #78c738 calc(var(--space)*11), #dbcc57 calc(var(--space)*12)), radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), #c7ffff80 5%, #82a1a14d 40%, #000 130%);background-blend-mode:color-burn, multiply;background-position:center, calc(10% + (var(--pointer-from-left)*80%)) calc(10% + (var(--pointer-from-top)*80%)), center;filter:brightness(.8)contrast()saturate(.6);background-size:cover,400% 900%,cover}.completion-card[data-variant=cosmos] .completion-card__thumb-shine:before{background-image:url(/img/cosmos-middle-trans.png), repeating-linear-gradient(82deg, #dbcc57 calc(var(--space)*1), #78c738 calc(var(--space)*2), #39c0b7 calc(var(--space)*3), #4964d0 calc(var(--space)*4), #aa47d1 calc(var(--space)*5), #cc388c calc(var(--space)*6), #cc388c calc(var(--space)*7), #aa47d1 calc(var(--space)*8), #4964d0 calc(var(--space)*9), #39c0b7 calc(var(--space)*10), #78c738 calc(var(--space)*11), #dbcc57 calc(var(--space)*12));background-blend-mode:lighten, multiply;background-position:center, calc(15% + (var(--pointer-from-left)*70%)) calc(15% + (var(--pointer-from-top)*70%));filter:brightness()contrast(1.5)saturate(.6);mix-blend-mode:overlay;z-index:2;background-size:cover,400% 900%}.completion-card[data-variant=cosmos] .completion-card__thumb-shine:after{background-image:url(/img/cosmos-top-trans.png), repeating-linear-gradient(82deg, #dbcc57 calc(var(--space)*1), #78c738 calc(var(--space)*2), #39c0b7 calc(var(--space)*3), #4964d0 calc(var(--space)*4), #aa47d1 calc(var(--space)*5), #cc388c calc(var(--space)*6), #cc388c calc(var(--space)*7), #aa47d1 calc(var(--space)*8), #4964d0 calc(var(--space)*9), #39c0b7 calc(var(--space)*10), #78c738 calc(var(--space)*11), #dbcc57 calc(var(--space)*12));background-blend-mode:multiply, multiply;background-position:center, calc(20% + (var(--pointer-from-left)*60%)) calc(20% + (var(--pointer-from-top)*60%));filter:brightness()contrast(1.5)saturate(.6);mix-blend-mode:multiply;z-index:3;background-size:cover,400% 900%}.completion-card[data-variant=cosmos] .completion-card__thumb-glare{background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), #e6f5ff99 5%, #2e2b3b 150%);filter:brightness(.6)contrast(1.5)saturate(1.5);mix-blend-mode:overlay;opacity:calc(var(--card-opacity) * .5 * (.25 + var(--pointer-from-center)))}.completion-card[data-variant=sunpillar] .completion-card__thumb-shine{background-image:var(--grain), repeating-linear-gradient(0deg, var(--sp1) 5%, var(--sp2) 10%, var(--sp3) 15%, var(--sp4) 20%, var(--sp5) 25%, var(--sp6) 30%, var(--sp1) 35%), repeating-linear-gradient(133deg, #0e152e 0%, #8fa3a3 3.8%, #8fc1c1 4.5%, #8fa3a3 5.2%, #0e152e 10%, #0e152e 12%), radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), #0000001a 12%, #00000026 20%, #00000040 120%);background-blend-mode:screen, hue, hard-light;background-size:500px 100%,200% 700%,300% 100%,200% 100%;background-position:center, 0% var(--background-y), var(--background-x) var(--background-y), var(--background-x) var(--background-y);filter:brightness(.5)contrast(1.5)saturate(.4)}.completion-card[data-variant=sunpillar] .completion-card__thumb-shine:after{background-image:var(--grain), repeating-linear-gradient(0deg, var(--sp5) 5%, var(--sp6) 10%, var(--sp1) 15%, var(--sp2) 20%, var(--sp3) 25%, var(--sp4) 30%, var(--sp5) 35%), repeating-linear-gradient(133deg, #0e152e 0%, #8fa3a3 3.8%, #8fc1c1 4.5%, #8fa3a3 5.2%, #0e152e 10%, #0e152e 12%), radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), #0000001a 12%, #00000026 20%, #00000040 120%);background-blend-mode:screen, hue, hard-light;background-size:500px 100%,200% 400%,195% 100%,200% 100%;background-position:center, 0% var(--background-y), calc(var(--background-x) * -1) calc(var(--background-y) * -1), var(--background-x) var(--background-y);filter:brightness(.8)contrast(2)saturate(1.2);mix-blend-mode:soft-light}.completion-card[data-variant=sunpillar] .completion-card__thumb-shine:before{display:none}.completion-card[data-variant=sunpillar] .completion-card__thumb-glare{background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), #fff 0%, #868a8d54 45%, #333333e6 130%);opacity:calc(var(--card-opacity) * .35);mix-blend-mode:hard-light;filter:brightness(.8)contrast(1.5)}.completion-card[data-variant=radiant]{--barwidth:1.2%}.completion-card[data-variant=radiant] .completion-card__thumb-shine{background-image:radial-gradient(farthest-corner ellipse at calc((var(--pointer-x))*.5 + 25%) calc((var(--pointer-y))*.5 + 25%), #f2f2f2 20%, #ccfffb 130%), repeating-linear-gradient(45deg, #1a1a1a 0%, #1a1a1a var(--barwidth), #333 calc(var(--barwidth) + 0.01%), #333 calc(var(--barwidth)*2), #595959 calc(var(--barwidth)*2 + 0.01%), #595959 calc(var(--barwidth)*3), #6c6c6c calc(var(--barwidth)*3 + 0.01%), #6c6c6c calc(var(--barwidth)*4), gray calc(var(--barwidth)*4 + 0.01%), gray calc(var(--barwidth)*5), #6c6c6c calc(var(--barwidth)*5 + 0.01%), #6c6c6c calc(var(--barwidth)*6), #595959 calc(var(--barwidth)*6 + 0.01%), #595959 calc(var(--barwidth)*7), #333 calc(var(--barwidth)*7 + 0.01%), #333 calc(var(--barwidth)*8), #1a1a1a calc(var(--barwidth)*8 + 0.01%), #1a1a1a calc(var(--barwidth)*9), #000 calc(var(--barwidth)*9 + 0.01%), #000 calc(var(--barwidth)*10)), repeating-linear-gradient(-45deg, #1a1a1a 0%, #1a1a1a var(--barwidth), #333 calc(var(--barwidth) + 0.01%), #333 calc(var(--barwidth)*2), #595959 calc(var(--barwidth)*2 + 0.01%), #595959 calc(var(--barwidth)*3), #6c6c6c calc(var(--barwidth)*3 + 0.01%), #6c6c6c calc(var(--barwidth)*4), gray calc(var(--barwidth)*4 + 0.01%), gray calc(var(--barwidth)*5), #6c6c6c calc(var(--barwidth)*5 + 0.01%), #6c6c6c calc(var(--barwidth)*6), #595959 calc(var(--barwidth)*6 + 0.01%), #595959 calc(var(--barwidth)*7), #333 calc(var(--barwidth)*7 + 0.01%), #333 calc(var(--barwidth)*8), #1a1a1a calc(var(--barwidth)*8 + 0.01%), #1a1a1a calc(var(--barwidth)*9), #000 calc(var(--barwidth)*9 + 0.01%), #000 calc(var(--barwidth)*10));background-size:cover,210% 210%,210% 210%;background-position:center, calc(((var(--background-x) - 50%)*1.5) + 50%) calc(((var(--background-y) - 50%)*1.5) + 50%), calc(((var(--background-x) - 50%)*1.5) + 50%) calc(((var(--background-y) - 50%)*1.5) + 50%);background-blend-mode:exclusion, darken, color-dodge;filter:brightness(.4)contrast(1.8)saturate(1.2)}.completion-card[data-variant=radiant] .completion-card__thumb-shine:after{background-image:url(/img/trainerbg.png),repeating-linear-gradient(55deg,#fdb8b4 200px,#addaff 400px,#ffd7b3 600px,#b8ffe7 800px,#fdbff4 1000px,#b4f3fd 1200px,#fdb8b4 1400px);background-size:25%,400% 100%;background-position:center, calc(((var(--background-x) - 50%)*-2.5) + 50%) calc(((var(--background-y) - 50%)*-2.5) + 50%);filter:brightness(.45)contrast(2.5)saturate(1.5);mix-blend-mode:color-dodge;background-blend-mode:difference}.completion-card[data-variant=radiant] .completion-card__thumb-shine:before{background-image:var(--glitter), radial-gradient(farthest-corner ellipse at calc((var(--pointer-x))*.5 + 25%) calc((var(--pointer-y))*.5 + 25%), #949494cc 10%, #333333e6 20%, #33333380 50%);background-blend-mode:color-dodge;mix-blend-mode:overlay;filter:brightness(.5)contrast(1.5)saturate(.4);z-index:2;background-position:50%;background-size:15% 15%,350% 350%}.completion-card[data-variant=radiant] .completion-card__thumb-glare{background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), #ffffff40 0%, #404040 110%);filter:brightness(.8)contrast(1.2);mix-blend-mode:hard-light}.completion-card[data-variant=classic] .completion-card__thumb-shine{background-image:repeating-linear-gradient(110deg,#c929f1,#0dbde9,#21e985,#eedf10,#f80e35,#c929f1,#0dbde9,#21e985,#eedf10,#f80e35,#c929f1,#0dbde9,#21e985,#eedf10,#f80e35),repeating-linear-gradient(90deg,#000 0 2px,#666 2px 4px);background-position:calc(((50% - var(--background-x))*2.6) + 50%) calc(((50% - var(--background-y))*3.5) + 50%), center;background-blend-mode:overlay;filter:brightness(.9)contrast()saturate();background-size:400% 400%,cover}.completion-card[data-variant=classic] .completion-card__thumb-shine:before{--bars:3%;background-image:repeating-linear-gradient(90deg, black calc(var(--bars)*2), #b3b3b3 calc(var(--bars)*3), black calc(var(--bars)*3.5), #b3b3b3 calc(var(--bars)*4), black calc(var(--bars)*5), black calc(var(--bars)*14)), repeating-linear-gradient(90deg, black calc(var(--bars)*2), #b3b3b3 calc(var(--bars)*3), black calc(var(--bars)*3.5), #b3b3b3 calc(var(--bars)*4), black calc(var(--bars)*5), black calc(var(--bars)*10));background-position:calc(((50% - var(--background-x))*1.65 + 50%) + (var(--background-y)*.5)) var(--background-x), calc(((50% - var(--background-x))*-.9 + 50%) - (var(--background-y)*.75)) var(--background-y);background-blend-mode:screen;filter:brightness()contrast();mix-blend-mode:hard-light;background-size:200% 200%,200% 200%}.completion-card[data-variant=classic] .completion-card__thumb-shine:after{background-image:radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), #e6e6e699 0%, #c7c7c714 25%, #000 90%);mix-blend-mode:luminosity;filter:brightness(.5)contrast(3)}.completion-card[data-variant=classic] .completion-card__thumb-glare{opacity:calc(var(--card-opacity) * .6);filter:brightness(.7)contrast(1.3);mix-blend-mode:overlay}