.toolsContainer{justify-content:space-between;gap:24px;width:100%;margin-top:50px;margin-bottom:50px;display:flex}.toolsInputGroup,.toolsQuizGroup{width:100%;max-width:calc(50% - 12px)}.toolsInput{padding:16px 22px;font-size:17px}.toolsLabel{font-size:22px}.toolsButton{width:52px;height:52px}.toolsLock{width:36px;height:36px}.toolsOnlineText{font-size:15px}.toolsOnlineCount{font-size:22px}@media (max-width:1550px){.toolsContainer{margin-top:40px;margin-bottom:40px}.toolsLabel{font-size:20px}.toolsInput{padding:14px 20px;font-size:16px}.toolsButton{width:48px;height:48px}.toolsOnlineCount{font-size:20px}.toolsOnlineText{font-size:14px}}@media (max-width:1024px){.toolsContainer{flex-direction:column;gap:20px;margin-top:40px}.toolsInputGroup,.toolsQuizGroup{max-width:100%!important;padding:28px!important}.toolsLabel{font-size:18px!important}.toolsInput{padding:15px 20px!important;font-size:16px!important}.toolsButton{width:48px!important;height:48px!important}.toolsLock{width:32px!important;height:32px!important}}@media (max-width:768px){.toolsContainer{gap:16px;margin-top:30px;margin-bottom:30px}.toolsInputGroup,.toolsQuizGroup{border-radius:20px!important;gap:16px!important;padding:24px!important}.toolsLabel{gap:10px!important;font-size:17px!important}.toolsInput{padding:14px 18px!important;font-size:15px!important}.toolsButton{width:44px!important;height:44px!important}.toolsQuizContent{flex-direction:column!important;align-items:stretch!important;gap:16px!important}.toolsOnlineText{font-size:14px!important}.toolsOnlineCount{font-size:20px!important}.toolsLock{width:28px!important;height:28px!important}}@media (max-width:431px){.toolsInputGroup,.toolsQuizGroup{border-radius:18px!important;gap:14px!important;padding:20px!important}.toolsLabel{gap:8px!important;font-size:16px!important}.toolsInput{padding:12px 16px!important;font-size:14px!important}.toolsButton{width:40px!important;height:40px!important}.toolsButton svg{width:20px!important;height:20px!important}}
:root{--primary-blue:#6db5f9;--primary-purple:#bb5eed;--bright-blue:#4db6ff;--dark-blue:#131d30;--dark-gray:#374151}.variantCard{color:var(--dark-blue);cursor:pointer;box-shadow:0 8px 32px rgba(var(--subject-rgb),.12),0 4px 16px #00000014,0 2px 8px #0000000a,inset 0 2px 4px #ffffffb3,inset 0 -2px 4px #00000005;-webkit-backdrop-filter:blur(20px)saturate(180%);transform-style:preserve-3d;background:radial-gradient(47.2% 50% at 50.39% 88.37%,#ffffff1f 0%,#fff0 100%),#ffffff0a;border-radius:50px;justify-content:center;align-items:center;padding:16px 24px;font-size:17px;font-weight:700;text-decoration:none;transition:all .4s cubic-bezier(.34,1.56,.64,1);display:flex;position:relative;overflow:hidden}.variantCard:before{content:"";border-radius:inherit;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:xor;-webkit-mask-composite:xor;pointer-events:none;z-index:1;background:linear-gradient(150deg,#ffffff7a 16.73%,#ffffff14 30.2% 68.2%,#fff9 81.89%);padding:1px;position:absolute;inset:0}.variantCard:after{content:"";background:radial-gradient(circle at center,rgba(var(--subject-rgb),.2)0%,rgba(var(--subject-rgb),.1)25%,transparent 50%);opacity:0;z-index:0;width:200%;height:200%;transition:all .5s cubic-bezier(.34,1.56,.64,1);position:absolute;top:-50%;left:-50%;transform:scale(.5)rotate(0)}.variantCard>*{z-index:2;position:relative}.variantCard:hover{color:rgb(var(--subject-rgb));box-shadow:0 12px 48px rgba(var(--subject-rgb),.2),0 8px 24px #0000001f,0 4px 12px #00000014,inset 0 2px 6px #ffffffe6,inset 0 -2px 6px #00000008;background:radial-gradient(47.2% 50% at 50.39% 88.37%,#ffffff2e 0%,#fff0 100%),#ffffff14;transform:translateY(-4px)}.variantCard:hover:after{opacity:1;transform:scale(1)rotate(180deg)}.variantCard:active{transition:all .15s;transform:translateY(-2px)}@media (max-width:1600px){.variantCard{padding:14px 20px;font-size:15px}}@media (max-width:1280px){.variantCard{padding:13px 18px;font-size:15px}}@media (max-width:1024px){.variantCard{min-height:54px;padding:14px 20px;font-size:15px}}@media (max-width:768px){.variantCard{border-radius:40px;min-height:50px;padding:12px 16px;font-size:15px}}@media (max-width:640px){.variantCard{border-radius:30px;min-height:48px;padding:12px 14px;font-size:14px}}@media (max-width:480px){.variantCard{border-radius:24px;width:100%;min-height:44px;padding:10px 12px;font-size:14px}}