.skills__header{padding-left:var(--space-14);margin-bottom:var(--space-16)}.skills__intro{margin-top:var(--space-6);font-family:var(--font-display);font-style:italic;font-size:var(--text-xl);font-weight:300;color:var(--ink-mid);line-height:1.75;max-width:520px}.skills__grid{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--space-20);padding-left:var(--space-14)}.skills__col{display:flex;flex-direction:column;gap:2.75rem}.skill{display:flex;flex-direction:column;gap:var(--space-3)}.skill__meta{display:flex;align-items:center;gap:var(--space-4)}.skill__icon-wrapper{flex-shrink:0;width:44px;height:44px;border-radius:var(--radius-full);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;background:var(--ivory-card);transition:border-color .3s ease,background .3s ease}.skill:hover .skill__icon-wrapper{border-color:var(--caramel-pale);background:var(--caramel-pale)}.skill__icon{width:22px;height:22px;flex-shrink:0;display:block;color:var(--ink-base);transition:color .3s ease,transform .3s ease}.skill:hover .skill__icon{color:var(--caramel);transform:scale(1.1)}.skill__icon--html,.skill__icon--css{width:20px;height:20px}.skill__icon--js{width:20px;height:20px;border-radius:3px}.skill__icon--react{width:24px;height:24px}.skill__icon--node{width:22px;height:22px}.skill__icon--figma{width:20px;height:28px}.skill__name{flex:1 1 0;font-family:var(--font-body);font-size:var(--text-base);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-base)}.skill__percent{font-family:var(--font-display);font-size:1.25rem;font-weight:400;font-style:italic;color:var(--ink-mid);white-space:nowrap;min-width:3rem;text-align:right}.skill__bar{width:100%;height:1px;background:var(--border);border-radius:var(--radius-sm);position:relative}.skill__bar-fill{position:absolute;top:0;left:0;height:100%;width:0;background:var(--ink-deep);border-radius:var(--radius-sm);transition:width .9s cubic-bezier(.16,1,.3,1)}.skill__bar-fill:after{content:"";position:absolute;pointer-events:none;right:-3px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:var(--radius-pill);background-color:var(--caramel);opacity:0;transition:opacity .3s ease .6s}.skill__bar-fill.is-filled:after{opacity:1}@media (max-width: 1024px){.skills__header,.skills__grid{padding-left:var(--space-10)}.skills__grid{column-gap:var(--space-12)}}@media (max-width: 768px){.skills__header,.skills__grid{padding-left:0}.skills__grid{grid-template-columns:1fr;row-gap:var(--space-10)}.skills__col{gap:2rem}.skills__header{margin-bottom:var(--space-12)}}@media (prefers-reduced-motion: reduce){.skill__bar-fill{transition:none}}