.skill-badge{--badge-bg:#146c94;--badge-bg-subtle:#0f5570;--badge-fg:#fff;--badge-highlight:#19a7ce;--badge-highlight-subtle:#b6eafa;--animation:gradient-angle linear infinite;--duration:3s;--shadow-size:2px;--transition:.8s cubic-bezier(.25,1,.5,1);isolation:isolate;cursor:pointer;outline-offset:4px;border:.5px solid var(--badge-bg);color:var(--badge-fg);background:var(--badge-bg);box-shadow:inset 0 0 0 1px var(--badge-bg);transition:var(--transition);border-radius:360px;padding:.5rem 1rem;font-family:Figtree,Inter,sans-serif;font-size:.875rem;font-weight:500;line-height:1.2;transition-property:background,border-color,box-shadow;position:relative;overflow:hidden}.skill-badge.non-clickable{cursor:default}.skill-badge:not(.non-clickable){border-color:#19a7ce;transition:all .2s ease-out;box-shadow:inset 0 0 0 1px #19a7ce,0 0 0 1px #19a7ce}.skill-badge:not(.non-clickable):hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px #19a7ce,0 0 0 1px #19a7ce,0 4px 12px #19a7ce4d}.skill-badge:before,.skill-badge:after,.skill-badge span:before{content:"";pointer-events:none;z-index:-1;position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%}.skill-badge:active{translate:0 1px}.skill-badge:before{--dot-size:1.5px;--dot-space:8px;background:radial-gradient(circle at var(--dot-space)var(--dot-space),#fffc var(--dot-size),transparent var(--dot-size));background-size:var(--dot-space)var(--dot-space);border-radius:inherit;opacity:0;z-index:2;pointer-events:none;width:100%;height:100%;-webkit-mask-image:radial-gradient(circle 80px at var(--mouse-x,50%)var(--mouse-y,50%),black 0%,transparent 100%);-webkit-mask-image:radial-gradient(circle 80px at var(--mouse-x,50%)var(--mouse-y,50%),black 0%,transparent 100%);mask-image:radial-gradient(circle 80px at var(--mouse-x,50%)var(--mouse-y,50%),black 0%,transparent 100%);background-position:0 0;transition:opacity .3s}.skill-badge:after{aspect-ratio:1;background:linear-gradient(-50deg,transparent,var(--badge-highlight),transparent);opacity:0;width:100%;transition:opacity var(--transition);animation:none;-webkit-mask-image:radial-gradient(circle at bottom,#0000 40%,#000);mask-image:radial-gradient(circle at bottom,#0000 40%,#000)}.skill-badge span{z-index:1}.skill-badge span:before{--size:calc(100% + 1rem);width:var(--size);height:var(--size);box-shadow:inset 0 -1ex 2rem 4px var(--badge-highlight);opacity:0;transition:opacity var(--transition);animation:calc(var(--duration)*1.5)breathe linear infinite}.skill-badge:is(:hover,:focus-visible){background:var(--badge-bg);border-color:var(--badge-bg);box-shadow:inset 0 0 0 1px var(--badge-bg),inset 0 -30px 40px -20px #b6eafa59}.skill-badge:is(:hover,:focus-visible):before{opacity:1}.skill-badge:is(:hover,:focus-visible):after{opacity:0}.skill-badge:is(:hover,:focus-visible) span:before{opacity:1}.skill-badge.active{background:var(--badge-bg);border-color:var(--badge-highlight);box-shadow:inset 0 0 0 1px var(--badge-highlight),inset 0 -30px 40px -20px #19a7ce4d,0 0 20px -5px #19a7ce66}.skill-badge.active:before,.skill-badge.active span:before{opacity:.8}.skill-badge.secondary.active{background:#e5e7eb99;border-color:#94a3b8cc;box-shadow:inset 0 0 0 1px #94a3b8cc,inset 0 -30px 40px -20px #64748b4d}.dark .skill-badge.secondary.active{background:#0f172a;border-color:#19a7cee6;box-shadow:inset 0 0 0 1px #19a7cee6,inset 0 -30px 40px -20px #19a7ce66,0 0 20px -5px #19a7ce4d}.skill-badge.secondary:is(:hover,:focus-visible){background:#e5e7eb66;border-color:#e5e7eb80;box-shadow:inset 0 0 0 1px #e5e7eb80,inset 0 -30px 40px -20px #fff9}.skill-badge.secondary:is(:hover,:focus-visible):before{opacity:.6}.skill-badge.secondary{--badge-bg:#e5e7eb4d;--badge-bg-subtle:#d1d5db66;--badge-fg:#374151;--badge-highlight:#9ca3af;--badge-highlight-subtle:#f3f4f680;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-color:#e5e7eb66}.skill-badge.secondary:before{background:radial-gradient(circle at var(--dot-space)var(--dot-space),#0000004d var(--dot-size),transparent var(--dot-size));background-size:var(--dot-space)var(--dot-space)}.dark .skill-badge.secondary{--badge-bg:#0f172ae6;--badge-bg-subtle:#1e40af66;--badge-fg:#e5e7eb;--badge-highlight:#19a7ce;--badge-highlight-subtle:#94a3b880;border-color:#94a3b899}.dark .skill-badge.secondary:is(:hover,:focus-visible){background:#0f172a;border-color:#94a3b8e6;box-shadow:inset 0 0 0 1px #94a3b8e6,inset 0 -30px 40px -20px #19a7ce73}.dark .skill-badge.secondary:before{background:radial-gradient(circle at var(--dot-space)var(--dot-space),#ffffff59 var(--dot-size),transparent var(--dot-size));background-size:var(--dot-space)var(--dot-space)}@keyframes breathe{0%,to{scale:1}50%{scale:1.2}}