.skill-visual{margin:0 0 24px;padding:18px;border-radius:18px;background:radial-gradient(ellipse at 50% 40%,#173b57,#081e32 80%);border:1px solid #1d4561;color:#d7efff}
.skill-visual-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.skill-visual-heading h4{font-size:.9rem;margin:0;font-weight:600}.skill-visual-caption{font-size:.64rem;color:#6e9ab7;white-space:nowrap}.skill-visual-canvas{display:block;width:100%;height:245px;cursor:grab;touch-action:pan-y}.skill-visual-canvas:active{cursor:grabbing}
.skill-visual-controls{display:flex;align-items:end;flex-wrap:wrap;gap:8px}.skill-visual-slider{font-size:.72rem;color:#a7c8dc;flex:1;min-width:130px}.skill-visual-slider input{display:block;width:100%;accent-color:#73d5f4;height:28px;margin:0}.skill-visual-controls button,.skill-stage-buttons button{border:1px solid #4c79994d;border-radius:9px;background:#ffffff08;color:#acd8ed;min-height:40px;padding:8px 11px;font-size:.72rem;cursor:pointer}.skill-visual-controls button:hover{background:#ffffff16}.skill-stage-buttons{display:flex;gap:6px;margin-top:14px}.skill-stage-buttons button{flex:1}.skill-stage-buttons button[aria-pressed=true]{color:#073149;background:#a2e4f7}.skill-visual-readout{font-size:.75rem;color:#b6d6e9;margin:15px 0 4px}.skill-visual-hint{font-size:.7rem;color:#7b9eb6;margin:0;line-height:1.6}
@media(max-width:640px){.skill-visual{padding:14px}.skill-visual-heading{flex-wrap:wrap;gap:4px}.skill-visual-canvas{height:225px}.skill-visual-controls button,.skill-stage-buttons button{min-height:44px}.skill-visual-slider{flex-basis:100%}.skill-visual-controls button{flex:1}}