.sphere-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; margin-bottom: 3rem; }
#skill-sphere { cursor: grab; border-radius: 50%; display: block; }
#skill-sphere:active { cursor: grabbing; }
.sphere-hint { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-dim); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 0.75rem; animation: fadeIn 1s ease 1s both; }
.skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.2rem; }
.skill-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 1.4rem; transition: var(--tr); opacity: 0; transform: translateY(20px); }
.skill-card.visible { opacity: 1; transform: translateY(0); }
.skill-card:hover { border-color: var(--border-h); box-shadow: 0 0 24px var(--glow); background: var(--surface2); }
.skill-icon { font-size: 1.2rem; color: var(--purple-l); margin-bottom: 0.6rem; }
.skill-card-title { font-family: var(--font-mono); font-size: 0.82rem; color: var(--cyan); margin-bottom: 0.9rem; letter-spacing: 0.5px; }
.skill-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.skill-card:hover .tag { border-color: rgba(99,102,241,0.3); color: var(--text-mid); }
.skill-card:hover .tag.hot { color: var(--purple-l); }