:root {--icon: url(/images/avatar/assets.png);--grain: url(/images/avatar/grain.webp);--pointer-x: 50%;--pointer-y: 50%;--pointer-from-center: 0;--pointer-from-top: 0.5;--pointer-from-left: 0.5;--card-opacity: 0;--rotate-x: 0deg;--rotate-y: 0deg;--background-x: 50%;--background-y: 50%;--behind-gradient: radial-gradient(farthest-side circle at var(--pointer-x) var(--pointer-y),hsla(266,100%,90%,var(--card-opacity)) 4%,hsla(266,50%,80%,calc(var(--card-opacity)*0.75)) 10%,hsla(266,25%,70%,calc(var(--card-opacity)*0.5)) 50%,hsla(266,0%,60%,0) 100%),radial-gradient(35% 52% at 55% 20%,#00ffaac4 0%,#073aff00 100%),radial-gradient(100% 100% at 50% 50%,#00c1ffff 1%,#073aff00 76%),conic-gradient(from 124deg at 50% 50%,#c137ffff 0%,#07c6ffff 40%,#07c6ffff 60%,#c137ffff 100%);--inner-gradient: linear-gradient(145deg,#60496e8c 0%,#71C4FF44 100%);--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);--card-radius: 30px;}.pc-card-wrapper {perspective: 500px;transform: translate3d(0, 0, 0.1px);position: relative;touch-action: none;}.pc-card-wrapper::before {content: '';position: absolute;inset: -10px;background: inherit;background-position: inherit;border-radius: inherit;transition: all 0.5s ease;filter: contrast(2) saturate(2) blur(36px);transform: scale(0.8) translate3d(0, 0, 0.1px);background-size: 100% 100%;background-image: var(--behind-gradient);}.pc-card-wrapper:hover, .pc-card-wrapper.active {--card-opacity: 1;}.pc-card-wrapper:hover::before, .pc-card-wrapper.active::before {filter: contrast(1) saturate(2) blur(40px) opacity(1);transform: scale(0.9) translate3d(0, 0, 0.1px);}.pc-card {height: 80svh;max-height: 540px;display: grid;aspect-ratio: 0.718;border-radius: var(--card-radius);position: relative;background-blend-mode: color-dodge, normal, normal, normal;animation: glow-bg 12s linear infinite;box-shadow: rgba(0, 0, 0, 0.8) calc((var(--pointer-from-left) * 10px) - 3px) calc((var(--pointer-from-top) * 20px) - 6px) 20px -5px;transition: transform 1s ease;transform: translate3d(0, 0, 0.1px) rotateX(0deg) rotateY(0deg);background-size: 100% 100%;background-position: 0 0, 0 0, 50% 50%, 0 0;background-image: radial-gradient( farthest-side circle at var(--pointer-x) var(--pointer-y), hsla(266, 100%, 90%, var(--card-opacity)) 4%, hsla(266, 50%, 80%, calc(var(--card-opacity) * 0.75)) 10%, hsla(266, 25%, 70%, calc(var(--card-opacity) * 0.5)) 50%, hsla(266, 0%, 60%, 0) 100% ), radial-gradient(35% 52% at 55% 20%, #00ffaac4 0%, #073aff00 100%), radial-gradient(100% 100% at 50% 50%, #00c1ffff 1%, #073aff00 76%), conic-gradient(from 124deg at 50% 50%, #c137ffff 0%, #07c6ffff 40%, #07c6ffff 60%, #c137ffff 100%);overflow: hidden;}.pc-card:hover, .pc-card.active {transition: none;transform: translate3d(0, 0, 0.1px) rotateX(var(--rotate-y)) rotateY(var(--rotate-x));}.pc-card * {display: grid;grid-area: 1/-1;border-radius: var(--card-radius);transform: translate3d(0, 0, 0.1px);pointer-events: none;}.pc-inside {inset: 1px;position: absolute;background-image: var(--inner-gradient);background-color: rgba(0, 0, 0, 0.95);transform: translate3d(0, 0, 0.01px);}.pc-shine {mask-image: var(--icon);mask-mode: luminance;mask-repeat: repeat;mask-size: 150%;mask-position: top calc(200% - (var(--background-y) * 5)) left calc(100% - var(--background-x));transition: filter 0.6s ease;filter: brightness(0.66) contrast(1.33) saturate(0.33) opacity(0.5);animation: holo-bg 18s linear infinite;mix-blend-mode: color-dodge;}.pc-card::after {content: '';position: absolute;inset: 0;background-image: var(--grain);background-size: 200px;opacity: 0.1;mix-blend-mode: overlay;pointer-events: none;z-index: 5;border-radius: var(--card-radius);}.pc-shine, .pc-shine::after {--space: 5%;--angle: -45deg;transform: translate3d(0, 0, 1px);overflow: hidden;z-index: 3;background: transparent;background-size: cover;background-position: center;background-image: repeating-linear-gradient(0deg, 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)), repeating-linear-gradient(var(--angle), #0e152e 0%, hsl(180, 10%, 60%) 3.8%, hsl(180, 29%, 66%) 4.5%, hsl(180, 10%, 60%) 5.2%, #0e152e 10%, #0e152e 12%), radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y), hsla(0, 0%, 0%, 0.1) 12%, hsla(0, 0%, 0%, 0.15) 20%, hsla(0, 0%, 0%, 0.25) 120%);background-position: 0 var(--background-y), var(--background-x) var(--background-y), center;background-blend-mode: color, hard-light;background-size: 500% 500%, 300% 300%, 200% 200%;background-repeat: repeat;}.pc-glare {transform: translate3d(0, 0, 1.1px);overflow: hidden;background-image: radial-gradient( farthest-corner circle at var(--pointer-x) var(--pointer-y), hsl(248, 25%, 80%) 12%, hsla(207, 40%, 30%, 0.8) 90% );mix-blend-mode: overlay;filter: brightness(0.8) contrast(1.2);z-index: 4;}.pc-content {max-height: 100%;overflow: hidden;text-align: center;position: relative;transform: translate3d( calc(var(--pointer-from-left) * -6px + 3px), calc(var(--pointer-from-top) * -6px + 3px), 0.1px ) !important;z-index: 20;mix-blend-mode: normal;}.pc-avatar-content {mix-blend-mode: normal;overflow: hidden;z-index: 10;}.pc-avatar-content .avatar {width: 100%;position: absolute;left: 50%;transform: translateX(-50%) scale(1);bottom: 2px;opacity: 1;}.pc-user-info {position: absolute;bottom: 20px;left: 20px;right: 20px;z-index: 2;display: flex;align-items: center;justify-content: space-between;background: rgba(255, 255, 255, 0.1);backdrop-filter: blur(30px);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 15px;padding: 12px 14px;pointer-events: auto;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 20px rgba(108, 99, 255, 0.2);}.pc-user-details {display: flex;align-items: center;gap: 12px;}.pc-mini-avatar {width: 48px;height: 48px;border-radius: 50%;overflow: hidden;border: 1px solid rgba(255, 255, 255, 0.1);flex-shrink: 0;}.pc-mini-avatar img {width: 100%;height: 100%;object-fit: cover;border-radius: 50%;}.pc-user-text {display: flex;align-items: flex-start;flex-direction: column;gap: 6px;}.pc-handle {font-size: 14px;font-weight: 500;color: rgba(255, 255, 255, 0.9);line-height: 1;}.pc-status {font-size: 14px;color: rgba(255, 255, 255, 0.7);line-height: 1;}.pc-contact-btn {border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 8px;padding: 8px 16px;font-size: 14px;font-weight: 600;cursor: pointer;transition: all 0.2s ease;backdrop-filter: blur(10px);}.pc-contact-btn:hover {border-color: rgba(255, 255, 255, 0.4);transform: translateY(-1px);transition: all 0.2s ease;}.pc-details {width: 100%;position: absolute;top: 3em;display: flex;flex-direction: column;}.pc-details h3, .pc-details p {background-clip: text;font-weight: 600;}.pc-details h3 {margin-bottom: 5px;font-size: 28px;background-image: linear-gradient(to bottom, #fff, #6f6fbe);}.pc-details p {top: -12px;font-size: 16px;white-space: nowrap;background-image: linear-gradient(to bottom, #fff, #4a4ac0);}@keyframes glow-bg {0% {--bgrotate: 0deg;}100% {--bgrotate: 360deg;}}@keyframes holo-bg {0% {background-position: 0 var(--background-y), 0 0, center;}100% {background-position: 0 var(--background-y), 90% 90%, center;}}.btn {font-size: 1.2rem;padding: 1rem 2.5rem;border: none;outline: none;border-radius: 0.4rem;cursor: pointer;text-transform: uppercase;background-color: rgb(14, 14, 26);color: rgb(234, 234, 234);font-weight: 700;transition: 0.6s;box-shadow: 0px 0px 60px #1f4c65;}.btn:active {scale: 0.92;}.btn:hover {background: rgb(78,29,78);background: linear-gradient(270deg, rgba(2, 29, 78, 0.681) 0%, rgba(31, 215, 232, 0.873) 60%);color: rgb(4, 4, 38);}.wow img{filter: brightness(0.8);}.type--A {--line_color: #555555;--back_color: #ffecf6;}.type--B {--line_color: #1b1919;--back_color: #e9ecff;}.type--C {--line_color: rgb(134 70 244 / var(--tw-bg-opacity));--back_color: #defffa;}.button {position: relative;z-index: 0;width: 240px;height: 56px;text-decoration: none;font-size: 14px;font-weight: bold;color: blue;letter-spacing: 2px;transition: all 0.3s ease;}.button__text {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;}.button::before, .button::after, .button__text::before, .button__text::after {content: "";position: absolute;height: 3px;border-radius: 2px;background: var(--line_color);transition: all 0.5s ease;}.button::before {top: 0;left: 54px;width: calc(100% - 56px * 2 - 16px);}.button::after {top: 0;right: 54px;width: 8px;}.button__text::before {bottom: 0;right: 54px;width: calc(100% - 56px * 2 - 16px);}.button__text::after {bottom: 0;left: 54px;width: 8px;}.button__line {position: absolute;top: 0;width: 56px;height: 100%;overflow: hidden;}.button__line::before {content: "";position: absolute;top: 0;width: 150%;height: 100%;box-sizing: border-box;border-radius: 300px;border: solid 3px var(--line_color);}.button__line:nth-child(1), .button__line:nth-child(1)::before {left: 0;}.button__line:nth-child(2), .button__line:nth-child(2)::before {right: 0;}.button:hover {letter-spacing: 6px;}.button:hover::before, .button:hover .button__text::before {width: 8px;}.button:hover::after, .button:hover .button__text::after {width: calc(100% - 56px * 2 - 16px);}.button__drow1, .button__drow2 {position: absolute;z-index: -1;border-radius: 16px;transform-origin: 16px 16px;}.button__drow1 {top: -16px;left: 40px;width: 32px;height: 0;transform: rotate(30deg);}.button__drow2 {top: 44px;left: 77px;width: 32px;height: 0;transform: rotate(-127deg);}.button__drow1::before, .button__drow1::after, .button__drow2::before, .button__drow2::after {content: "";position: absolute;}.button__drow1::before {bottom: 0;left: 0;width: 0;height: 32px;border-radius: 16px;transform-origin: 16px 16px;transform: rotate(-60deg);}.button__drow1::after {top: -10px;left: 45px;width: 0;height: 32px;border-radius: 16px;transform-origin: 16px 16px;transform: rotate(69deg);}.button__drow2::before {bottom: 0;left: 0;width: 0;height: 32px;border-radius: 16px;transform-origin: 16px 16px;transform: rotate(-146deg);}.button__drow2::after {bottom: 26px;left: -40px;width: 0;height: 32px;border-radius: 16px;transform-origin: 16px 16px;transform: rotate(-262deg);}.button__drow1, .button__drow1::before, .button__drow1::after, .button__drow2, .button__drow2::before, .button__drow2::after {background: var(--back_color);}.button:hover .button__drow1 {animation: drow1 ease-in 0.06s;animation-fill-mode: forwards;}.button:hover .button__drow1::before {animation: drow2 linear 0.08s 0.06s;animation-fill-mode: forwards;}.button:hover .button__drow1::after {animation: drow3 linear 0.03s 0.14s;animation-fill-mode: forwards;}.button:hover .button__drow2 {animation: drow4 linear 0.06s 0.2s;animation-fill-mode: forwards;}.button:hover .button__drow2::before {animation: drow3 linear 0.03s 0.26s;animation-fill-mode: forwards;}.button:hover .button__drow2::after {animation: drow5 linear 0.06s 0.32s;animation-fill-mode: forwards;}@keyframes drow1 {0% {height: 0;}100% {height: 100px;}}@keyframes drow2 {0% {width: 0;opacity: 0;}10% {opacity: 0;}11% {opacity: 1;}100% {width: 120px;}}@keyframes drow3 {0% {width: 0;}100% {width: 80px;}}@keyframes drow4 {0% {height: 0;}100% {height: 120px;}}@keyframes drow5 {0% {width: 0;}100% {width: 124px;}}.container {width: 100%;height: 300px;display: flex;flex-direction: column;justify-content: center;align-items: center;}.button:not(:last-child) {margin-bottom: 64px;}.download .button {position: relative;overflow: hidden;height: 3rem;padding: 15px 2rem;border-radius: 1.5rem;background: #3d3a4e;background-size: 400%;color: #fff;border: none;cursor: pointer;}.download .button:hover::before {transform: scaleX(1);}.download .button-content {position: relative;z-index: 1;}.download .button::before {content: "";position: absolute;top: 0;left: 0;transform: scaleX(0);transform-origin: 0 50%;width: 100%;height: inherit;border-radius: inherit;background: linear-gradient( 82.3deg, rgba(150, 93, 233, 1) 10.8%, rgba(99, 88, 238, 1) 94.3% );transition: all 0.476s;}.blog img{border-radius: 20px;}