#matrixCanvas{z-index:0;pointer-events:none;width:100%;height:100%;position:fixed;top:0;left:0}.skill-search-wrap{max-width:450px;margin:0 auto;position:relative}.skill-search-icon{color:var(--color-neutral-400,#a3a3a3);pointer-events:none;position:absolute;top:50%;left:18px;transform:translateY(-50%)}.skill-search-input{border-radius:9999px;outline:none;width:100%;padding:14px 48px;font-size:.875rem;font-weight:500;transition:all .3s}html:not(.dark) .skill-search-input{color:var(--color-neutral-800,#262626);border:1px solid var(--color-neutral-200,#e5e5e5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffffd9}html.dark .skill-search-input{color:var(--color-neutral-100,#f5f5f5);border:1px solid var(--color-neutral-700,#404040);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#1a1a1ad9}.skill-search-input:focus{border-color:var(--color-primary,#8b5cf6);box-shadow:0 0 0 3px color-mix(in srgb, var(--color-primary,#8b5cf6) 20%, transparent)}.skill-search-input::placeholder{color:var(--color-neutral-400,#a3a3a3)}.skill-clear-btn{cursor:pointer;color:var(--color-neutral-400,#a3a3a3);opacity:0;pointer-events:none;background:0 0;border:none;justify-content:center;align-items:center;transition:opacity .3s,color .2s;display:flex;position:absolute;top:50%;right:14px;transform:translateY(-50%)}.skill-clear-btn.active{opacity:.6;pointer-events:auto}.skill-clear-btn:hover{opacity:1;color:#ef4444}.skill-section{opacity:1;max-height:3000px;transition:max-height .5s cubic-bezier(.4,0,.2,1),opacity .3s;overflow:hidden}.skill-section.section-hidden{opacity:0;pointer-events:none;max-height:0!important}.skills-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1rem;display:grid}@media (width<=640px){.skills-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.75rem}}.card-wrapper{cursor:pointer;border-radius:16px;padding:1.5px;position:relative;overflow:hidden}.card-wrapper:before{content:"";background:conic-gradient(from 0deg, transparent 0%, var(--color-primary,#8b5cf6) 6%, #3b82f6 12%, #06b6d4 18%, #10b981 24%, transparent 30%, transparent 50%, var(--color-primary,#8b5cf6) 56%, #3b82f6 62%, #06b6d4 68%, #10b981 74%, transparent 80%, transparent 100%);opacity:.12;transition:opacity .5s;animation:6s linear infinite spinBorder;position:absolute;inset:-200%}.card-wrapper:hover:before{opacity:.7}.card-wrapper:after{content:"";pointer-events:none;z-index:3;border-radius:16px;transition:border-color .4s;position:absolute;inset:0}html:not(.dark) .card-wrapper:after{border:1px solid color-mix(in srgb, var(--color-primary,#8b5cf6) 10%, transparent)}html.dark .card-wrapper:after{border:1px solid var(--color-neutral-700,#404040)}.card-wrapper:hover:after{border-color:color-mix(in srgb, var(--color-primary,#8b5cf6) 35%, transparent)}@keyframes spinBorder{to{transform:rotate(360deg)}}.skill-card{z-index:1;text-align:center;transform-style:preserve-3d;will-change:transform;border-radius:14px;padding:1.5rem .75rem 1.25rem;transition:transform .4s cubic-bezier(.175,.885,.32,1.275),box-shadow .4s;position:relative}html:not(.dark) .skill-card{box-shadow:0 1px 3px #0000000d, 0 0 0 1px color-mix(in srgb, var(--color-primary,#8b5cf6) 6%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffffd9}html.dark .skill-card{box-shadow:0 1px 3px #0000004d, 0 0 0 1px var(--color-neutral-700,#404040);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#1a1a1ad9}.card-wrapper:hover .skill-card{transform:translateY(-6px)scale(1.04)}html:not(.dark) .card-wrapper:hover .skill-card{box-shadow:0 8px 24px color-mix(in srgb, var(--color-primary,#8b5cf6) 10%, transparent)}html.dark .card-wrapper:hover .skill-card{box-shadow:0 8px 24px color-mix(in srgb, var(--color-primary,#8b5cf6) 20%, transparent)}.skill-card:before{content:"";z-index:-1;background:radial-gradient(circle, color-mix(in srgb, var(--color-primary,#8b5cf6) 10%, transparent), transparent 70%);border-radius:50%;width:0;height:0;transition:width .5s,height .5s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.card-wrapper:hover .skill-card:before{width:250%;height:250%}.skill-icon-wrap{justify-content:center;align-items:center;width:48px;height:48px;margin:0 auto;transition:transform .4s cubic-bezier(.175,.885,.32,1.275),filter .4s;display:inline-flex}.skill-icon-wrap svg,.skill-icon-wrap i{width:100%;height:100%;font-size:40px;transition:all .4s cubic-bezier(.175,.885,.32,1.275)}.card-wrapper:hover .skill-icon-wrap{filter:drop-shadow(0 0 10px color-mix(in srgb, var(--color-primary,#8b5cf6) 50%, transparent));transform:scale(1.15)}.skill-label{letter-spacing:.02em;margin-top:.75rem;font-size:.75rem;font-weight:600;transition:color .3s,transform .3s}html:not(.dark) .skill-label{color:var(--color-neutral-500,#737373)}html.dark .skill-label{color:var(--color-neutral-400,#a3a3a3)}.card-wrapper:hover .skill-label{transform:translateY(-2px)}html:not(.dark) .card-wrapper:hover .skill-label{color:var(--color-neutral-800,#262626)}html.dark .card-wrapper:hover .skill-label{color:var(--color-neutral-100,#f5f5f5)}.ripple{background:color-mix(in srgb, var(--color-primary,#8b5cf6) 30%, transparent);pointer-events:none;z-index:10;border-radius:50%;animation:.6s ease-out forwards rippleAnim;position:absolute;transform:scale(0)}@keyframes rippleAnim{to{opacity:0;transform:scale(4)}}.skill-item.dimmed{opacity:.08;filter:blur(4px);pointer-events:none;transition:all .3s;transform:scale(.85)}