.skills-page{padding:40px 20px;max-width:1200px;margin:0 auto}.skills-content{margin-top:30px;line-height:1.8;display:flex;flex-direction:column;gap:30px}.skills-page h1{color:var(--color-text-strong);border-bottom:2px solid var(--color-border);padding-bottom:12px;position:relative}.skills-page h1:after{content:"";position:absolute;left:0;bottom:-2px;width:60px;height:2px;background:var(--color-accent);border-radius:2px}.skill-chapter{background-color:var(--color-surface);padding:20px;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);border:1px solid var(--color-border)}.skill-chapter h2{color:var(--color-accent-hover);font-size:1.4rem;margin-bottom:15px;border-bottom:1px solid var(--color-border);padding-bottom:8px;font-weight:600}.skill-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,200px));grid-gap:15px;gap:15px;justify-content:start}.skill-item{aspect-ratio:2/1;display:flex;align-items:center;justify-content:center;background-color:#2e3a52;padding:15px;transition:all .25s ease;text-decoration:none;position:relative}.skill-item,.skill-item:after{border:1px solid var(--color-border);border-radius:var(--radius-sm)}.skill-item:after{content:attr(title);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background-color:var(--color-surface-2);color:var(--color-text);padding:8px 12px;font-size:.9rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease;margin-bottom:8px}.skill-item:hover{border-color:var(--color-accent);box-shadow:var(--shadow-accent);transform:translateY(-2px)}.skill-item:hover:after{opacity:1}.skill-logo{object-fit:contain}.skill-name{font-size:.9rem;font-weight:500;color:var(--color-text)}@media (max-width:768px){.skills-page{padding:20px 15px}.skill-chapter{padding:15px}.skill-list{grid-template-columns:repeat(auto-fill,minmax(120px,120px));gap:12px}.skill-item{padding:12px}.skill-logo{width:80px;height:80px}}@media (max-width:480px){.skills-page h1{font-size:1.8rem}.skill-chapter h2{font-size:1.2rem}.skill-list{grid-template-columns:repeat(auto-fill,minmax(100px,100px));gap:10px}.skill-item{padding:10px}.skill-logo{width:70px;height:70px}.skill-name{font-size:.8rem}}