feat: improve SliderControls CustomStyles story

[p-m-p]

Summary

• Rename ProfessionalStyled to CustomStyles for better clarity
• Update visual design with neutral grey gradient and glassmorphism effects
• Fix CSS custom property naming and remove unsupported variables
• Improve spacing, sizing, and overall presentation

Changes Made

• Story Rename: ProfessionalStyled → CustomStyles for clearer naming
• Visual Updates:
  • Changed from purple to neutral grey gradient background
  • Reduced button size from 56px to 44px for better proportions
  • Enhanced wrapper with gradient background and improved centering
• CSS Variable Fixes:
  • Fixed icon property names (--play-icon → --bs-play-icon, etc.)
  • Removed 7 unsupported CSS variables that had no effect
  • Kept only the 13 variables actually supported by the component
• Layout Improvements:
  • Better spacing and padding throughout
  • Improved glassmorphism design elements

Test plan

• Verify story renders correctly in Storybook
• Confirm all CSS variables now work as expected
• Test button interactions and hover states
• Validate improved visual design and spacing

🤖 Generated with Claude Code

[changeset-bot]

⚠️ No Changeset found

Latest commit: 98951f9

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR