.portfolio-filter{color:#d4d4d8;overflow-wrap:anywhere;background:linear-gradient(165deg,#2a2926,#191917 52%,#111110);border:1px solid #ffffff24;border-radius:9999px;max-width:100%;min-height:44px;padding:10px 20px;font-size:14px;font-weight:600;line-height:1.6;transition:transform .18s,border-color .18s,box-shadow .18s;position:relative;box-shadow:inset 0 1px #ffffff21,inset 0 -2px #0006,0 4px #050505,0 8px 15px #00000040}.portfolio-filter.is-active{color:#120c02;background:linear-gradient(165deg,#ffc354,#f59e0b 55%,#df8703);border-color:#ffc354;box-shadow:inset 0 1px #ffffff59,inset 0 -2px #84480033,0 4px #864d00,0 8px 18px #f59e0b2b}.portfolio-filter:focus-visible{outline-offset:5px;outline:2px solid #fbbf24}.portfolio-project-card{background:linear-gradient(155deg,#282622,#191917 60%,#111110);border:1px solid #ffffff26;transition:border-color .2s,box-shadow .2s;box-shadow:inset 0 1px #ffffff1f,inset 0 -2px #00000059,0 5px #050505,0 12px 28px #0000004d}.portfolio-project-card:focus-within{border-color:#f59e0b8c;box-shadow:inset 0 1px #ffffff26,0 5px #070604,0 14px 30px #0006,0 0 20px #f59e0b12}@media (hover:hover) and (pointer:fine){.portfolio-filter:hover{border-color:#fbbf24;transform:translateY(-2px)}.portfolio-project-card:hover{border-color:#f59e0b73;box-shadow:inset 0 1px #ffffff26,0 5px #070604,0 14px 30px #0006,0 0 20px #f59e0b12}}.portfolio-filter:active{transform:translateY(1px)}@media (prefers-reduced-motion:reduce){.portfolio-filter,.portfolio-project-card{transition:none}.portfolio-filter:hover,.portfolio-filter:active{transform:none}}