.error-page{height:70vh;display:flex;gap:var(--gap-xl);align-items:center;flex-direction:column;justify-content:center}.error-page .content{display:flex;gap:var(--gap-lg);align-items:center}.error-page .content .media{height:135px;border-radius:calc(var(--radius-sm) + 2px);border:1.5px solid var(--primary-soft);border-block-end-width:6px}.error-page .content .media img{border-radius:var(--radius-sm) var(--radius-sm) calc(var(--radius-sm) - 3px) calc(var(--radius-sm) - 3px);filter:grayscale(1) opacity(.7)}.error-page .content .info p{color:var(--black-soft);font-size:var(--text-md)}@media (max-width: 899px){.error-page .content{flex-direction:column}.error-page .content .info{text-align:center}}.milestone-page{min-height:100vh;display:flex;align-items:center;flex-direction:column;justify-content:space-between}.milestone-page .content-area{flex:2;width:60%;padding:3em 1.5em}.milestone-page .content-area .progress-box{display:flex;gap:var(--gap-lg);align-items:center}.milestone-page .content-area .progress-box .reward{display:flex;gap:var(--gap-md);align-items:center;font-weight:700;font-size:var(--text-md);color:var(--base-primary)}.milestone-page .content-area .progress-box .reward span{font-size:25px;filter:hue-rotate(110deg)}.milestone-page .content-area .progress-box .bar{width:100%;height:16px;position:relative;border-radius:var(--radius-lg);background-color:var(--black-lighter)}.milestone-page .content-area .progress-box .bar .line{width:10%;height:16px;position:absolute;border-radius:var(--radius-lg);background-color:var(--base-primary);transition:var(--transition-normal)}.milestone-page .content-area .progress-box .bar .line:before{content:"";scale:.9;height:25%;width:100%;top:20%;right:0;bottom:20%;left:0;position:absolute;border-radius:var(--radius-lg);background-color:var(--white-lighter);transition:var(--transition-normal)}.milestone-page .content-area .progress-box a{opacity:.5;display:flex;align-items:center;color:var(--black-soft)}.milestone-page .content-area .show-box{padding-block:3em}.milestone-page .content-area .show-box .detail-box{display:grid;gap:var(--gap-xl);animation:detail_box_animation .4s linear forwards}@keyframes detail_box_animation{0%{opacity:0}to{opacity:1}}.milestone-page .content-area .show-box .detail-box .title{display:flex;gap:var(--gap-sm);align-items:center;margin-block-end:.5em;font-size:var(--text-xl)}.milestone-page .content-area .show-box .detail-box .title:before{content:"+";color:var(--base-primary)}.milestone-page .content-area .show-box .detail-box .subtitle{margin-block-end:.3em;font-size:var(--text-md)}.milestone-page .content-area .show-box .detail-box .paragraph{line-height:180%;margin-inline:1.6em;color:var(--black-soft);font-size:var(--text-md)}.milestone-page .content-area .show-box .detail-box .paragraph a{font-weight:700}.milestone-page .content-area .show-box .detail-box .paragraph a:hover{text-decoration:underline}.milestone-page .content-area .show-box .detail-box .group-paragraphs{display:grid;gap:var(--gap-sm)}.milestone-page .content-area .reward-box{padding-block:calc(3em + 159px);display:flex;gap:var(--gap-xl);text-align:center;align-items:center;flex-direction:column;justify-content:center;animation:reward_box_animation .5s cubic-bezier(.075,.82,.165,1) forwards;animation-delay:.8s}@keyframes reward_box_animation{0%{padding-block:calc(3em + 159px)}to{padding-block:3em}}.milestone-page .content-area .reward-box .total{color:var(--base-primary)}.milestone-page .content-area .reward-box .total h1{font-size:50px}.milestone-page .content-area .reward-box .total img{width:80px;animation:gem_stone_animation .8s forwards linear}@keyframes gem_stone_animation{0%{filter:grayscale(1);transform:scale(.6) translateY(2em)}90%{filter:grayscale(1)}to{margin-block-start:0px;filter:hue-rotate(110deg);transform:scale(1) translateY(0)}}.milestone-page .content-area .reward-box .info{opacity:0;visibility:hidden;border-radius:var(--radius-lg);border:2px solid var(--black-lighter);animation:info_animation .4s linear forwards;animation-delay:1.2s}@keyframes info_animation{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}.milestone-page .content-area .reward-box .info .steps{padding:1em;display:grid;gap:var(--gap-md);grid-template-columns:repeat(6,1fr);border-block-end:1px solid var(--black-lighter)}.milestone-page .content-area .reward-box .info .steps .step{display:grid;gap:var(--gap-sm)}.milestone-page .content-area .reward-box .info .steps .step span{opacity:.7;font-weight:700;color:var(--black-soft);font-size:var(--text-md)}.milestone-page .content-area .reward-box .info .steps .step .icon{width:100%;height:40px;display:flex;align-items:center;justify-content:center;clip-path:circle();background-color:var(--black-lighter)}.milestone-page .content-area .reward-box .info .steps .step[data-checked=true] span{opacity:1;color:var(--base-primary)}.milestone-page .content-area .reward-box .info .steps .step[data-checked=true] .icon{scale:.8;color:var(--base-white);background-color:var(--base-primary);animation:step_animation .3s ease-in-out forwards;animation-delay:1.6s}@keyframes step_animation{0%{scale:.8}to{scale:1}}.milestone-page .content-area .reward-box .info .steps .step[data-checked=true]:nth-child(1) .icon{animation-delay:1.6s}.milestone-page .content-area .reward-box .info .steps .step[data-checked=true]:nth-child(2) .icon{animation-delay:1.8s}.milestone-page .content-area .reward-box .info .steps .step[data-checked=true]:nth-child(3) .icon{animation-delay:2s}.milestone-page .content-area .reward-box .info .steps .step[data-checked=true]:nth-child(4) .icon{animation-delay:2.2s}.milestone-page .content-area .reward-box .info .steps .step[data-checked=true]:nth-child(5) .icon{animation-delay:2.4s}.milestone-page .content-area .reward-box .info .steps .step[data-checked=true]:nth-child(6) .icon{animation-delay:2.6s}.milestone-page .content-area .reward-box .info .steps .step[data-checked=true]:nth-child(7) .icon{animation-delay:2.8s}.milestone-page .content-area .reward-box .info .message{padding:1em}.milestone-page .content-area .reward-box .info .message p{color:var(--black-soft);font-size:var(--text-md)}.milestone-page .action-area{width:100%;position:sticky;inset-block-end:0;padding-block:1.5em;background-color:var(--base-white);display:flex;align-items:center;flex-direction:column;justify-content:space-between;border-block-start:1px solid var(--black-lighter)}.milestone-page .action-area .actions{padding-inline:1.5em;width:60%;display:flex;align-items:center;justify-content:space-between}.milestone-page .action-area .actions:not(:has(:nth-child(2))){justify-content:end}.milestone-page .action-area .actions button{min-width:120px}@media (max-width: 1278px){.milestone-page .content-area,.milestone-page .action-area .actions{width:80%}}@media (max-width: 899px){.milestone-page .content-area,.milestone-page .action-area .actions{width:100%}}.example{display:grid;gap:var(--gap-xl);margin:0 10%;padding:1.5em;border-radius:var(--radius-md);border:1.5px solid var(--black-lighter);border-block-end-width:6px}.themes-ex .themes{display:grid;grid-template-columns:35% auto 35%}.themes-ex .themes .store{padding:.5em 10%;display:grid;gap:var(--gap-md);grid-template-columns:repeat(2,1fr);height:120px;border-radius:var(--radius-md);background-color:var(--base-white);border:1px solid var(--black-lighter);border-block-end-width:4px}.themes-ex .themes .store .start{display:flex;gap:var(--gap-sm);flex-direction:column;justify-content:center}.themes-ex .themes .store .start span{width:100%;height:8%;border-radius:var(--radius-sm);background-color:var(--black-light)}.themes-ex .themes .store .start span:nth-child(2){width:80%;opacity:.6}.themes-ex .themes .store .start span:nth-child(3){width:60%;opacity:.4}.themes-ex .themes .store .end{display:flex;gap:var(--gap-sm);flex-direction:column}.themes-ex .themes .store .end span{width:100%;height:100%;border-radius:var(--radius-sm);background-color:var(--black-light)}.themes-ex .themes .store .end span:nth-child(2){opacity:.6}.themes-ex .themes .store .end span:nth-child(3){opacity:.4}.themes-ex .themes .store:last-child span{background-color:var(--primary-light)}.themes-ex .themes .share{display:flex;flex-direction:column;justify-content:space-around}.themes-ex .themes .share .line{height:0px;width:100%;position:relative;border-block-end:1px dotted var(--primary-soft)}.themes-ex .themes .share .line:after{content:"Old Settings";position:absolute;translate:-50% -50%;padding-inline:8px;width:max-content;display:flex;align-items:center;justify-content:center;font-size:10px;border-radius:4px;text-transform:uppercase;color:var(--base-primary);border-inline:.5px solid var(--primary-soft);border-block-end:2px solid var(--primary-soft);background-color:color-mix(in srgb,var(--base-primary) 10%,var(--base-white))}.themes-ex .themes .share .line:first-child:after{inset-inline-start:30%}.themes-ex .themes .share .line:nth-child(2):after{content:"Smooth UX";inset-inline-start:50%}.themes-ex .themes .share .line:last-child:after{content:"Modern UI";inset-inline-end:-10%}.games-ex .games{display:grid;grid-template-columns:35% auto 35%}.games-ex .games .play{display:flex;flex-direction:column;justify-content:center;height:120px;position:relative;overflow-x:hidden;border-radius:var(--radius-md);background-color:color-mix(in srgb,var(--base-primary) 3%,transparent);border:1px solid var(--black-lighter);border-block-end-width:4px}.games-ex .games .play:before{content:"BEFORE";position:absolute;top:0;right:0;bottom:0;left:0;font-size:10px;padding:4px 8px;width:fit-content;height:fit-content;letter-spacing:.08em;color:var(--base-primary);background-color:var(--primary-lighter);border-end-end-radius:var(--radius-md);border-start-start-radius:var(--radius-md);border-inline-end:.5px solid var(--primary-soft);border-block-end:2px solid var(--primary-soft)}.games-ex .games .play .ground{height:3px;width:300%;margin-bottom:-3em;display:flex;justify-content:space-around;background-color:var(--primary-light);animation:play 4s linear infinite}.games-ex .games .play .ground .cube{width:8px;height:8px;position:relative;inset-block-start:-8px;background-color:var(--primary-light);clip-path:polygon(50% 0,100% 100%,0% 100%)}@keyframes play{to{translate:-50% 0}}.games-ex .games .play .character{width:12px;height:12px;position:relative;inset-inline-start:45%;border-radius:var(--radius-circle);background-color:var(--primary-soft);animation:up_down 4s ease infinite}@keyframes up_down{0%{translate:0;box-shadow:#fff9fa 0 0 0 3px}50%{translate:0 -3em;box-shadow:#feeaee 0 0 0 10px}to{translate:0;box-shadow:#fff9fa 0 0 0 3px}}.games-ex .games .play:last-child:before{content:"AFTER"}.games-ex .games .play:last-child .ground{animation-duration:1s}.games-ex .games .play:last-child .character{animation-duration:1s}.folders-ex{display:flex;justify-content:center}.folders-ex .folders{width:50%;height:200px;display:flex;align-items:end;border-radius:var(--radius-md);background-color:var(--base-white);border:1px solid var(--black-lighter);border-block-end-width:4px}.folders-ex .folders .folder{height:50%;width:100%;position:relative;border-radius:var(--radius-lg);border-start-start-radius:0;border-block-start:1.5px solid color-mix(in srgb,currentColor 8%,transparent)}.folders-ex .folders .folder:before{content:"";width:70%;height:50%;z-index:2;position:absolute;inset-block-end:100%;background-color:var(--base-white);border-start-end-radius:150%;border-start-start-radius:var(--radius-lg);border-block-start:1.5px solid color-mix(in srgb,currentColor 8%,transparent);border-inline-end:1.5px solid color-mix(in srgb,currentColor 8%,transparent)}.folders-ex .folders .folder:after{content:"*";z-index:3;font-size:50px;position:absolute;inset-block-end:70%;inset-inline-start:5px;color:var(--black-light)}.folders-ex .folders .folder .file{padding:.5em;width:20%;height:70%;position:absolute;border-radius:var(--radius-md);background-color:var(--base-white);border:1px solid color-mix(in srgb,currentColor 8%,transparent);rotate:-20deg;inset-block-start:-85%;inset-inline-start:5%}.folders-ex .folders .folder .file:nth-child(2){rotate:20deg;inset-inline-start:20%}.folders-ex .folders .folder .file:nth-child(3){height:40%;rotate:30deg;inset-block-start:-50%;inset-inline-start:50%}.folders-ex .folders .folder .file span{padding:1px 5px;font-size:var(--text-xs);border-radius:var(--radius-sm);color:var(--base-white);background-color:var(--primary-soft)}.lego-ex .lego{height:300px;display:grid;gap:var(--gap-2xl);grid-template-columns:repeat(3,1fr);padding-block-end:50px}.lego-ex .lego>div{display:flex;flex-direction:column;justify-content:space-around;position:relative}.lego-ex .lego>div:after{content:attr(data-area);width:100%;padding:4px;text-align:center;inset-block-end:-50px;position:absolute;font-size:var(--text-xs);text-transform:uppercase;border-radius:var(--radius-md);color:var(--base-primary);background-color:var(--primary-lighter);border:1px solid var(--primary-light);border-block-end-width:4px}.lego-ex .lego>div span{display:flex;align-items:center;justify-content:center;height:15%;color:var(--black-soft);border-radius:var(--radius-md);border:1px solid var(--black-lighter);border-block-end-width:4px}.lego-ex .lego>div span:before{content:attr(data-content);font-size:var(--text-lg)}.lego-ex .lego>div.components{gap:var(--gap-md);justify-content:start}.lego-ex .lego>div.components:before{content:"";height:17%;position:absolute;width:var(--gap-2xl);inset-block-start:10%;inset-inline-end:calc(var(--gap-2xl) * -1);border:1px solid var(--black-lighter);border-inline-start:none}.lego-ex .lego>div.sections{gap:var(--gap-md);justify-content:center}.lego-ex .lego>div.sections:before{content:"";height:60%;position:absolute;width:var(--gap-2xl);inset-block-start:20%;inset-inline-end:calc(var(--gap-2xl) * -1);border:1px solid var(--black-lighter);border-inline-start:none}.lego-ex .lego>div.sections span{height:15%}.lego-ex .lego>div.sections span:before{font-size:var(--text-md)}.lego-ex .lego>div.pages span{height:25%}.ping-pong-ex{height:300px;position:relative}.ping-pong-ex:before,.ping-pong-ex:after{content:"Design";position:absolute;top:0;right:0;bottom:0;left:0;font-size:10px;padding:4px 8px;width:50px;text-align:center;height:fit-content;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-soft);background-color:var(--primary-lighter);border-start-start-radius:var(--radius-sm);border-inline-end:.5px solid var(--primary-soft);border-block-end:2px solid var(--primary-soft)}.ping-pong-ex:before{border-end-end-radius:var(--radius-md);border-start-start-radius:var(--radius-md)}.ping-pong-ex:after{content:"Dev";inset:auto;inset-inline-end:0%;border-end-start-radius:var(--radius-md);border-start-end-radius:var(--radius-md)}.ping-pong-ex .ping-pong{display:flex;align-items:center;justify-content:space-between;position:relative}.ping-pong-ex .ping-pong .bar{width:8px;height:50px;position:relative;border-radius:2px;background-color:var(--primary-soft);animation:bar1_move 2s linear infinite}.ping-pong-ex .ping-pong .bar:nth-child(4){animation:bar2_move 2s linear infinite}@keyframes bar1_move{0%{inset-block-start:8%}50%{inset-block-start:-8%}to{inset-block-start:8%}}@keyframes bar2_move{0%{inset-block-start:-8%}50%{inset-block-start:8%}to{inset-block-start:-8%}}.ping-pong-ex .ping-pong .table{width:5px;height:100%;background-color:var(--primary-light);border:.5px solid var(--primary-soft);border-block-end:2px solid var(--primary-soft)}.ping-pong-ex .ping-pong .ball{width:12px;height:12px;position:absolute;border-radius:var(--radius-circle);background-color:var(--primary-soft);animation:bounce_ball 1.5s linear infinite}@keyframes bounce_ball{0%{inset-inline-start:0%;inset-block-start:40%}50%{inset-inline-start:98%;inset-block-start:50%}to{inset-inline-start:0%;inset-block-start:40%}}.components-ex .components{height:200px;display:grid;gap:var(--gap-md);grid-template-columns:repeat(2,1fr)}.components-ex .components .component{display:flex;align-items:center;justify-content:center;padding:1em;border-radius:var(--radius-md);background-color:var(--base-white);border:1px solid var(--black-lighter);border-block-end-width:4px}.components-ex .components .component .alert{width:100%;height:fit-content;padding:.7em;display:flex;align-items:center;justify-content:space-between;color:var(--primary-soft);border-radius:var(--radius-md);background-color:var(--base-white);border:1px solid var(--primary-soft);border-block-end-width:4px}.components-ex .components .component .alert .info{width:100%;display:flex;gap:var(--gap-sm);align-items:center}.components-ex .components .component .alert .info .line{width:70%;height:5px;border-radius:var(--radius-sm);background-color:var(--primary-light)}.components-ex .components .component .radio{width:60px;height:28px;position:relative;border-radius:999px;background-color:var(--base-white);border:1px solid var(--primary-soft);border-block-end-width:4px}.components-ex .components .component .radio:before{content:"";width:18px;height:18px;position:absolute;inset-block-start:3px;inset-inline-start:3px;clip-path:circle();background-color:var(--primary-soft)}.stack-ex .stack{height:200px;display:grid;grid-template-rows:repeat(5,1fr);margin-block-start:30px;position:relative;border-radius:var(--radius-md);border-start-start-radius:0;background-color:var(--base-white);border:1px solid var(--black-lighter);border-block-end-width:4px;background-image:linear-gradient(var(--black-lighter) .5px,transparent .5px),linear-gradient(to right,var(--black-lighter) .5px,transparent .5px);background-size:40px 40px}.stack-ex .stack .lang{display:flex;gap:var(--gap-sm);align-items:center;position:absolute;padding:8px 12px 8px 8px;inset-inline-start:-1px;inset-block-start:-35px;font-size:var(--text-xs);color:var(--black-soft);background-color:var(--base-white);border-radius:var(--radius-md) var(--radius-md) 0 0;border:1.5px solid var(--black-lighter);border-inline-end-width:4px;border-block-end:none}.stack-ex .stack .code{display:flex;gap:var(--gap-md);align-items:center;padding-inline:1.5em;font-family:monospace;font-size:var(--text-sm);color:var(--base-primary)}.stack-ex .stack .code:nth-child(odd){color:var(--black-soft)}.stack-ex .stack .code:before{content:attr(data-index);color:color-mix(in srgb,var(--base-black) 50%,transparent)}.path-ex .path{padding-block:2em;display:grid;gap:var(--gap-sm);justify-content:center;grid-template-rows:repeat(6,1fr);border-radius:var(--radius-md);border:1px solid var(--black-lighter);border-block-end-width:4px}.path-ex .path .point{width:40px;height:40px;position:relative;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-circle);color:var(--black-light);background-color:var(--black-lighter);border-block-end:4px solid var(--black-light)}.path-ex .path .point:first-child{color:var(--base-white);background-color:var(--base-primary)}.path-ex .path .point:last-child{background-color:var(--base-yellow);background-image:repeating-linear-gradient(-45deg,var(--white-light),var(--white-light) 15px,transparent 5px,transparent 30px)}.path-ex .path .point:nth-child(2){inset-inline-start:-2em}.path-ex .path .point:nth-child(3){inset-inline-start:-3em}.path-ex .path .point:nth-child(4){inset-inline-start:-2em}.comparison-ex .comparison{display:flex;justify-content:space-between}.comparison-ex .comparison>div{padding:.5em 10%;display:flex;align-items:center;justify-content:center;height:120px;width:35%;position:relative;border-radius:var(--radius-md);background-color:var(--primary-lighter);border:1px solid var(--black-lighter);border-block-end-width:4px}.comparison-ex .comparison>div img{width:40px;filter:hue-rotate(325deg)}.comparison-ex .comparison>div:before{content:"EXPECTATION";position:absolute;top:0;right:0;bottom:0;left:0;font-size:10px;padding:4px 8px;width:fit-content;height:fit-content;letter-spacing:.08em;color:var(--base-primary);background-color:var(--primary-lighter);border-end-end-radius:var(--radius-md);border-start-start-radius:var(--radius-md);border-inline-end:.5px solid var(--primary-soft);border-block-end:2px solid var(--primary-soft)}.comparison-ex .comparison>div:last-child:before{content:"REALITY"}@media (max-width: 899px){.example{margin-inline:0}}.home-page{min-height:100vh;display:grid;grid-template-columns:auto 50% auto}.home-page .roadmap-area{padding:1.5em;border-inline:2px solid var(--black-lighter)}.home-page .roadmap-area .current-goal{display:flex;align-items:center;justify-content:space-between;padding:1.2em;z-index:99;position:sticky;inset-block-start:1.5em;border-radius:var(--radius-lg);color:var(--base-white);background-color:var(--base-primary)}.home-page .roadmap-area .current-goal[data-theme="2"]{background-color:var(--base-purple)}.home-page .roadmap-area .current-goal[data-theme="3"]{background-color:var(--base-green)}.home-page .roadmap-area .current-goal .info{display:grid;gap:var(--gap-sm)}.home-page .roadmap-area .current-goal .info span{color:var(--white-soft);text-transform:uppercase}.home-page .roadmap-area .current-goal .status{display:flex;gap:var(--gap-sm);align-items:center;padding:12px 15px;font-weight:700;font-size:var(--text-sm);text-transform:uppercase;border-radius:var(--radius-lg);border:2px solid var(--black-light);border-block-end-width:4px}.home-page .roadmap-area .current-goal .status svg{margin-inline-start:calc(var(--gap-sm) / 2 * -1)}.home-page .roadmap-area .playground{display:grid;gap:var(--gap-xl)}.home-page .roadmap-area .playground header{opacity:.5;display:flex;gap:var(--gap-md);color:var(--black-soft);text-transform:uppercase}.home-page .roadmap-area .playground header:before,.home-page .roadmap-area .playground header:after{content:"";flex:1;margin:auto;border-block-end:2px solid var(--black-lighter)}.home-page .roadmap-area .playground .milestones{position:relative;padding-block:3em;display:flex;gap:var(--gap-lg);align-items:center;flex-direction:column;justify-content:center}.home-page .roadmap-area .playground .milestones .milestone{position:relative}.home-page .roadmap-area .playground .milestones .milestone:nth-child(2){inset-inline-start:-3em}.home-page .roadmap-area .playground .milestones .milestone:nth-child(3){inset-inline-start:-5em}.home-page .roadmap-area .playground .milestones .milestone:nth-child(4){inset-inline-start:-3em}.home-page .roadmap-area .playground .milestones .milestone[data-active=true]{border-radius:var(--radius-circle);outline-offset:5px;outline:7px solid var(--black-lighter)}.home-page .roadmap-area .playground .milestones:has(.milestone .tooltip-group) .tooltip{scale:0;inset-block-start:80%}.home-page .roadmap-area .playground .milestones .character{width:100px;position:absolute;inset-inline-end:10%;inset-block-start:45%;border-block-end:3px solid var(--black-lighter)}.home-page .roadmap-area .playground .milestones .character .image{display:flex;justify-content:center}.home-page .roadmap-area .playground .milestones .character .image img{width:50px;filter:hue-rotate(325deg)}.home-page .roadmap-area .playground section:nth-child(2) .milestones .milestone:nth-child(2){inset-inline-start:3em}.home-page .roadmap-area .playground section:nth-child(2) .milestones .milestone:nth-child(3){inset-inline-start:5em}.home-page .roadmap-area .playground section:nth-child(2) .milestones .milestone:nth-child(4){inset-inline-start:3em}.home-page .roadmap-area .playground section:nth-child(2) .character{inset-inline-end:auto;inset-inline-start:10%}.home-page .roadmap-area .playground section:not(:first-child) .character .image img{filter:grayscale(1) opacity(.15)}@media (max-width: 1278px){.home-page{grid-template-columns:auto 70% auto}}@media (max-width: 899px){.home-page{grid-template-columns:auto 1fr auto}}.tooltip{--tooltip-group-theme: var(--base-primary);z-index:2;position:absolute;font-weight:700;padding:10px 15px;width:max-content;translate:-50% -190%;inset-inline-start:50%;inset-block-start:50%;text-transform:uppercase;font-size:var(--text-sm);border-radius:var(--radius-md);color:var(--tooltip-group-theme);background-color:var(--base-white);border:2px solid var(--black-lighter);transition:var(--transition-normal);animation:move 2s ease-out infinite}.tooltip[data-theme="2"]{--tooltip-group-theme: var(--base-purple)}.tooltip[data-theme="3"]{--tooltip-group-theme: var(--base-green)}@keyframes move{0%{translate:-50% -190%}50%{translate:-50% -175%}to{translate:-50% -190%}}.tooltip:after,.tooltip:before{content:"";left:50%;bottom:-22px;position:absolute;margin-left:-10px;border:10px solid transparent;border-block-start-color:var(--black-lighter)}.tooltip:after{scale:.9;bottom:-19px;border-block-start-color:var(--base-white)}.tooltip-group{--tooltip-group-theme: var(--base-primary);z-index:3;padding:1em;width:300px;display:flex;gap:var(--gap-lg);flex-direction:column;position:absolute;translate:-25% 10%;inset-inline-start:-50%;border-radius:var(--radius-lg);color:var(--base-white);border:2px solid transparent;background-color:var(--tooltip-group-theme)}.tooltip-group[data-theme="2"]{--tooltip-group-theme: var(--base-purple)}.tooltip-group[data-theme="3"]{--tooltip-group-theme: var(--base-green)}.tooltip-group:after,.tooltip-group:before{content:"";top:-22px;left:50%;position:absolute;margin-left:-10px;border:10px solid transparent;border-block-end-color:var(--tooltip-group-theme)}.tooltip-group:after{top:-19px;scale:.9;border-block-end-color:var(--tooltip-group-theme)}.tooltip-group .info{display:grid;gap:6px}.tooltip-group .info p{color:var(--white-soft);font-size:var(--text-md)}.tooltip-group[data-disabled=true]{color:var(--black-soft);border-color:var(--black-lighter);background-color:color-mix(in srgb,var(--base-black) 3%,var(--base-white))}.tooltip-group[data-disabled=true]:before{border-block-end-color:var(--black-lighter)}.tooltip-group[data-disabled=true]:after{border-block-end-color:color-mix(in srgb,var(--base-black) 3%,var(--base-white))}.tooltip-group[data-disabled=true] .info{opacity:.7}.tooltip-group[data-disabled=true] .info p{color:var(--black-soft)}.tooltip-group[data-disabled=true] button{opacity:.7}.tooltip-group a[data-not-available=true]{opacity:.8;-webkit-user-select:none;user-select:none;pointer-events:none}:root{--base-black: #121212;--base-white: #ffffff;--base-primary: #e1116f;--base-yellow: rgb(255, 200, 0);--base-green: #1daf61;--base-purple: #693ee0;--black-soft: color-mix(in srgb, var(--base-black) 70%, transparent);--black-light: color-mix(in srgb, var(--base-black) 20%, transparent);--black-lighter: color-mix(in srgb, var(--base-black) 10%, transparent);--white-soft: color-mix(in srgb, var(--base-white) 70%, transparent);--white-light: color-mix(in srgb, var(--base-white) 20%, transparent);--white-lighter: color-mix(in srgb, var(--base-white) 10%, transparent);--primary-soft: color-mix(in srgb, var(--base-primary) 70%, transparent);--primary-light: color-mix(in srgb, var(--base-primary) 20%, transparent);--primary-lighter: color-mix(in srgb, var(--base-primary) 10%, transparent);--green-soft: color-mix(in srgb, var(--base-green) 70%, transparent);--green-light: color-mix(in srgb, var(--base-green) 20%, transparent);--green-lighter: color-mix(in srgb, var(--base-green) 10%, transparent);--purple-soft: color-mix(in srgb, var(--base-purple) 70%, transparent);--purple-light: color-mix(in srgb, var(--base-purple) 20%, transparent);--purple-lighter: color-mix(in srgb, var(--base-purple) 10%, transparent);--radius-sm: .5em;--radius-md: .7em;--radius-lg: 1em;--radius-circle: 50%;--radius-rounded: 999px;--gap-sm: 8px;--gap-md: 12px;--gap-lg: 16px;--gap-xl: 32px;--gap-2xl: 46px;--text-xs: 12px;--text-sm: 13px;--text-md: 14px;--text-lg: 16px;--text-xl: 24px;--text-2xl: 48px;--transition-fast: .1s;--transition-normal: .3s;--transition-slow: .4s}*{margin:0;padding:0;font-family:Poppins;box-sizing:border-box}html{scroll-behavior:smooth}body{color:var(--base-black);background-color:var(--base-white)}body:has(.tooltip-group){overflow:hidden}a,button{border:none;outline:none;cursor:pointer;text-decoration:none;color:var(--base-black);font-size:var(--text-md);transition:var(--transition-duration)}input,textarea,select{border:none;outline:none}.og-button{display:flex;gap:var(--gap-sm);align-items:center;justify-content:center;font-weight:700;padding:12px 15px;position:relative;font-size:var(--text-sm);text-transform:uppercase;border-radius:var(--radius-lg)}.og-button[data-variant=primary]{color:var(--base-white);background-color:var(--base-primary);border-block-end:4px solid var(--black-light)}.og-button[data-variant=primary]:hover{background-color:color-mix(in srgb,var(--base-primary) 100%,var(--base-black) 15%)}.og-button[data-variant=secondary]{color:var(--base-primary);background-color:var(--base-white);border-block-end:4px solid var(--primary-soft)}.og-button[data-variant=secondary][data-theme="2"]{color:var(--base-purple);border-block-end-color:var(--purple-soft)}.og-button[data-variant=secondary][data-theme="3"]{color:var(--base-green);border-block-end-color:var(--green-soft)}.og-button[data-variant=outline]{color:var(--black-soft);background-color:var(--base-white);border:1px solid var(--black-light);border-block-end-width:4px}.og-button[data-variant=outline]:hover{background-color:color-mix(in srgb,currentColor 5%,transparent)}.og-button[data-variant=icon]{color:var(--black-light);background-color:var(--black-lighter);border-radius:var(--radius-circle);border-block-end:6px solid var(--black-light)}.og-button[data-variant=icon][data-done=true],.og-button[data-variant=icon][data-active=true]{color:var(--base-white)}.og-button[data-variant=icon][data-done=true][data-theme="1"],.og-button[data-variant=icon][data-active=true][data-theme="1"]{background-color:var(--base-primary)}.og-button[data-variant=icon][data-done=true][data-theme="2"],.og-button[data-variant=icon][data-active=true][data-theme="2"]{background-color:var(--base-purple)}.og-button[data-variant=icon][data-done=true][data-theme="3"],.og-button[data-variant=icon][data-active=true][data-theme="3"]{background-color:var(--base-green)}.og-button[data-variant=icon][data-done=true]{background-image:repeating-linear-gradient(-45deg,var(--white-lighter),var(--white-lighter) 15px,transparent 5px,transparent 30px)}.og-button[data-variant=icon][data-completed=true]{background-color:var(--base-yellow)!important;background-image:repeating-linear-gradient(-45deg,var(--white-light),var(--white-light) 15px,transparent 5px,transparent 30px)}.og-button:active[data-variant=outline]{translate:0 2px;border-block-end-width:1px}.og-button:active:not([data-variant=outline]){translate:0 4px;border-block-end-color:transparent}.og-button:disabled,.og-button[data-disabled=true]{border:none;pointer-events:none;color:var(--black-soft)!important;background-color:var(--black-lighter)}