:root{--epaulette-accent:#6366f1;--epaulette-secondary:#a78bfa;--epaulette-dark-bg:#161b27;--epaulette-darker-bg:#0d0f14;--epaulette-border:rgba(99,102,241,.4);--epaulette-shadow:rgba(99,102,241,.25);--epaulette-glow:rgba(99,102,241,.45);--epaulette-highlight:rgba(167,139,250,.15)}.epaulette-stripe{position:fixed;top:0;width:96px;height:100vh;background:transparent;border:none;z-index:1000;animation:slideDown 1.5s cubic-bezier(.25,.46,.45,.94);pointer-events:none}.epaulette-left{left:12px;transform-origin:top left}.epaulette-right{right:12px;transform-origin:top right}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.skills-container{flex:1 1;display:flex;flex-direction:column;align-items:center;padding:30px 10px 20px;gap:12px;position:relative;overflow:hidden;pointer-events:auto}.skills-container:before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:2px;height:100%;background:transparent;opacity:0}.epaulette-left .skills-container{animation:swayLeft 4s ease-in-out infinite}.epaulette-right .skills-container{animation:swayRight 4s ease-in-out infinite}@keyframes swayLeft{0%,to{transform:rotate(0deg) translateX(0)}25%{transform:rotate(-1deg) translateX(-2px)}75%{transform:rotate(1deg) translateX(2px)}}@keyframes swayRight{0%,to{transform:rotate(0deg) translateX(0)}25%{transform:rotate(1deg) translateX(2px)}75%{transform:rotate(-1deg) translateX(-2px)}}.skill-icon{width:50px;height:50px;background:rgba(22,27,39,.85);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--epaulette-border);border-radius:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .25s cubic-bezier(.25,.46,.45,.94);position:relative;box-shadow:0 4px 12px var(--epaulette-shadow),inset 0 1px 2px var(--epaulette-highlight);opacity:0;transform:scale(.8) translateY(20px);animation:skillEntrance .8s ease-out forwards;pointer-events:auto}@keyframes skillEntrance{0%{opacity:0;transform:scale(.8) translateY(20px) rotate(-10deg)}60%{transform:scale(1.05) translateY(-3px) rotate(3deg)}to{opacity:1;transform:scale(1) translateY(0) rotate(0deg)}}.skill-icon:hover{transform:scale(1.15);border-color:var(--epaulette-secondary);box-shadow:0 6px 20px var(--epaulette-glow),inset 0 1px 3px var(--epaulette-highlight),0 0 16px var(--epaulette-glow);background:rgba(30,36,51,.95)}.skill-icon .skill-icon-svg{transition:all .25s ease;filter:drop-shadow(0 0 3px rgba(0,0,0,.8))}.skill-icon:hover .skill-icon-svg{transform:scale(1.1);filter:drop-shadow(0 0 5px rgba(0,0,0,.9))}.skill-icon .skill-icon-img{transition:all .25s ease;filter:drop-shadow(0 0 3px rgba(0,0,0,.8))}.skill-icon:hover .skill-icon-img{transform:scale(1.1);filter:drop-shadow(0 0 5px rgba(0,0,0,.9))}.mobile-skills-button{position:fixed;top:20px;right:20px;z-index:1100;background:linear-gradient(135deg,var(--epaulette-accent),var(--epaulette-secondary));border:none;border-radius:50px;padding:12px 20px;display:flex;align-items:center;gap:8px;color:#fff;font-family:DM Sans,sans-serif;font-weight:600;font-size:14px;cursor:pointer;box-shadow:0 4px 15px rgba(99,102,241,.3),0 0 20px rgba(99,102,241,.2);transition:all .25s ease;animation:pulse 2s infinite,slideInButton 1s ease .5s both}.mobile-skills-button:focus,.mobile-skills-button:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(99,102,241,.45),0 0 30px rgba(99,102,241,.3);outline:none}.mobile-skills-button:active{transform:scale(.95)}@keyframes pulse{0%,to{box-shadow:0 4px 15px rgba(99,102,241,.3),0 0 20px rgba(99,102,241,.2)}50%{box-shadow:0 6px 25px rgba(99,102,241,.5),0 0 35px rgba(99,102,241,.35)}}.button-icon{width:16px;height:16px;flex-shrink:0}@keyframes slideInButton{0%{transform:translateX(100px);opacity:0}to{transform:translateX(0);opacity:1}}.mobile-skills-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(13,15,20,.92);z-index:1200;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.mobile-skills-container{background:linear-gradient(135deg,var(--epaulette-dark-bg),var(--epaulette-darker-bg));border:1px solid var(--epaulette-border);border-radius:16px;padding:24px;max-width:90vw;max-height:80vh;overflow-y:auto;box-shadow:0 10px 40px rgba(99,102,241,.25),inset 0 1px 3px rgba(167,139,250,.1);animation:slideUp .4s cubic-bezier(.25,.46,.45,.94)}@keyframes slideUp{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.mobile-skills-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid var(--epaulette-border)}.mobile-skills-header h3{color:var(--epaulette-accent);margin:0;font-size:18px;font-family:Space Grotesk,sans-serif;font-weight:600}.close-button{background:none;border:none;color:var(--epaulette-secondary);font-size:24px;cursor:pointer;padding:5px;border-radius:50%;transition:all .2s ease}.close-button:hover{background:var(--epaulette-accent);color:#fff;transform:scale(1.1)}.mobile-skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));grid-gap:12px;gap:12px}.mobile-skill-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:15px;background:rgba(22,27,39,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--epaulette-border);border-radius:12px;transition:all .25s ease;opacity:0;transform:translateY(20px);animation:skillSlideIn .5s ease forwards;cursor:pointer;box-shadow:0 4px 12px rgba(99,102,241,.15)}@keyframes skillSlideIn{to{opacity:1;transform:translateY(0)}}.mobile-skill-item:focus,.mobile-skill-item:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(99,102,241,.3);border-color:var(--epaulette-secondary)}.mobile-skill-item span{color:var(--text-muted,#94a3b8);font-family:DM Sans,sans-serif;font-size:11px;font-weight:500;text-align:center}@media (max-width:768px){.epaulette-stripe{display:none}.mobile-skills-button{display:flex}}@media (min-width:769px){.mobile-skills-button{display:none}.epaulette-stripe{display:flex;flex-direction:column}}@media (min-width:769px) and (max-width:1024px){.epaulette-stripe{width:72px}.epaulette-left{left:8px}.epaulette-right{right:8px}.skill-icon{width:40px;height:40px;border-radius:10px}}@media (hover:none) and (pointer:coarse){.mobile-skill-item,.mobile-skills-button{-webkit-tap-highlight-color:transparent}.mobile-skill-item:active{transform:scale(.95);transition:transform .1s ease}}@media (max-width:480px){.mobile-skills-button{top:15px;right:15px;padding:10px 16px;font-size:12px}.mobile-skills-container{padding:20px;border-radius:12px}.mobile-skills-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:10px}.mobile-skill-item{padding:12px}.mobile-skills-header h3{font-size:16px}}