:root {
  --sm-cool: 83 221 255;
  --sm-hot: 255 63 207;
}

body[data-material-profile="max"] { --sm-cool: 255 177 90; --sm-hot: 255 107 39; }
body[data-material-profile="reverb"] { --sm-cool: 144 116 255; --sm-hot: 255 107 39; }
body[data-material-profile="groove"] { --sm-cool: 255 107 39; --sm-hot: 255 196 150; }
body[data-material-profile="mbc"] { --sm-cool: 255 183 77; --sm-hot: 255 63 207; }
body[data-material-profile="voice"] { --sm-cool: 118 176 255; --sm-hot: 255 107 39; }
body[data-material-profile="web"] { --sm-cool: 255 107 39; --sm-hot: 255 183 77; }

.sm-control {
  --sm-shift-x: 0px;
  --sm-shift-y: 0px;
  --sm-scale-x: 1;
  --sm-scale-y: 1;
  --sm-tilt: 0deg;
  --sm-glow: 0;
  transform-origin: center;
}

.sm-control[data-sm-kind="button"]:not(.sm-cap):not(.sm-child-surface) {
  transform:
    translate(var(--sm-shift-x), var(--sm-shift-y))
    rotate(var(--sm-tilt))
    scale(var(--sm-scale-x), var(--sm-scale-y));
  will-change: transform, filter, border-radius;
}

.sm-control.sm-child-surface > .sm-surface {
  transform:
    translateX(-50%)
    translate(var(--sm-shift-x), var(--sm-shift-y))
    rotate(var(--sm-tilt))
    scale(var(--sm-scale-x), var(--sm-scale-y)) !important;
  transform-origin: center;
  will-change: transform, filter;
}

.sm-control.sm-child-surface.sm-live > .sm-surface {
  filter:
    drop-shadow(-1px 0 2px rgb(var(--sm-cool) / var(--sm-glow-mid)))
    drop-shadow(1px 0 2px rgb(var(--sm-hot) / var(--sm-glow-soft)));
}

.sm-control[data-sm-kind="button"].sm-live:not(.sm-cap):not(.sm-child-surface) {
  border-radius: 54% 46% 57% 43% / 44% 57% 43% 56%;
  filter:
    drop-shadow(-1px 0 2px rgb(var(--sm-cool) / var(--sm-glow-mid)))
    drop-shadow(1px 0 2px rgb(var(--sm-hot) / var(--sm-glow-soft)));
}

.sm-control[data-sm-kind="slider"] .z-slider__thumb,
.sm-control[data-sm-kind="slider"] .display-thumb {
  clip-path: none !important;
  border-radius: 47% 53% 48% 52% / 55% 45% 56% 44% !important;
  transform:
    translate(var(--sm-shift-x), var(--sm-shift-y))
    rotate(var(--sm-tilt))
    scale(var(--sm-scale-x), var(--sm-scale-y)) !important;
  transform-origin: center;
  will-change: transform, border-radius, filter;
}

.sm-control[data-sm-kind="slider"].sm-live .z-slider__thumb,
.sm-control[data-sm-kind="slider"].sm-live .display-thumb {
  border-radius: 63% 37% 59% 41% / 43% 59% 42% 58% !important;
  filter:
    saturate(1.1)
    drop-shadow(-1.5px 0 2px rgb(var(--sm-cool) / var(--sm-glow-strong)))
    drop-shadow(1.5px 0 2px rgb(var(--sm-hot) / var(--sm-glow-mid)));
}

.sm-control[data-sm-kind="knob"] .z-knob__body,
.sm-control[data-sm-kind="knob"] .knob-body {
  border-radius: 49% 51% 50% 50% / 48% 47% 53% 52% !important;
  transform:
    translate(var(--sm-shift-x), var(--sm-shift-y))
    rotate(var(--sm-tilt))
    scale(var(--sm-scale-x), var(--sm-scale-y)) !important;
  transform-origin: center;
  will-change: transform, border-radius, filter;
}

.sm-control[data-sm-kind="knob"].sm-live .z-knob__body,
.sm-control[data-sm-kind="knob"].sm-live .knob-body {
  border-radius: 55% 45% 52% 48% / 44% 56% 47% 53% !important;
  filter:
    saturate(1.06)
    drop-shadow(-1.5px 0 2px rgb(var(--sm-cool) / var(--sm-glow-mid)))
    drop-shadow(1.5px 0 2px rgb(var(--sm-hot) / var(--sm-glow-soft)));
}

.sm-control.sm-cap::after {
  transform:
    translate(-50%, -50%)
    translate(var(--sm-shift-x), var(--sm-shift-y))
    rotate(var(--sm-tilt))
    scale(var(--sm-scale-x), var(--sm-scale-y)) !important;
  transform-origin: center;
}

.sm-control.sm-cap.sm-live::after {
  border-radius: 61% 39% 58% 42% / 42% 59% 41% 58% !important;
  filter:
    saturate(1.08)
    drop-shadow(-1.5px 0 2px rgb(var(--sm-cool) / var(--sm-glow-mid)))
    drop-shadow(1.5px 0 2px rgb(var(--sm-hot) / var(--sm-glow-soft)));
}

body[data-material-profile="max"] .sm-control[data-sm-kind="button"].sm-live:not(.sm-cap),
body[data-material-profile="max"] .sm-control[data-sm-kind="slider"].sm-live .z-slider__thumb,
body[data-material-profile="max"] .sm-control[data-sm-kind="slider"].sm-live .display-thumb,
body[data-material-profile="max"] .sm-control[data-sm-kind="knob"].sm-live .z-knob__body {
  border-radius: 52% 48% 51% 49% / 47% 53% 48% 52% !important;
}

body[data-material-profile="reverb"] .sm-control[data-sm-kind="knob"].sm-live .knob-body {
  border-radius: 58% 42% 54% 46% / 41% 59% 43% 57% !important;
  filter:
    blur(.08px)
    drop-shadow(-2px 0 3px rgb(var(--sm-cool) / var(--sm-glow-mid)))
    drop-shadow(2px 0 3px rgb(var(--sm-hot) / var(--sm-glow-soft)));
}

body[data-material-profile="groove"] .sm-control[data-sm-kind="button"].sm-live:not(.sm-cap) {
  border-radius: 59% 41% 55% 45% / 42% 58% 44% 56%;
}

body[data-material-profile="mbc"] .sm-control[data-sm-kind="button"].sm-live:not(.sm-cap):not(.sm-child-surface) {
  border-radius: 54% 46% 58% 42% / 48% 55% 45% 52%;
}

body[data-material-profile="voice"] .record-control.sm-control.sm-live {
  border-radius: 52% 48% 51% 49% / 46% 54% 48% 52%;
  filter:
    drop-shadow(-2px 0 4px rgb(var(--sm-cool) / var(--sm-glow-soft)))
    drop-shadow(2px 0 4px rgb(var(--sm-hot) / var(--sm-glow-mid)));
}

body[data-material-profile="web"] .sm-control[data-sm-kind="button"].sm-live:not(.sm-cap) {
  border-radius: 51% 49% 52% 48% / 48% 52% 49% 51%;
}

@media (prefers-reduced-motion: reduce) {
  .sm-control,
  .sm-control::before,
  .sm-control::after,
  .sm-control .z-slider__thumb,
  .sm-control .display-thumb,
  .sm-control .z-knob__body,
  .sm-control .knob-body {
    transform: none !important;
    filter: none !important;
  }
  .sm-control.sm-child-surface > .sm-surface { transform: translateX(-50%) !important; }
  .sm-control.sm-cap::after { transform: translate(-50%, -50%) !important; }
}

html[data-material-reduced="true"] .sm-control,
html[data-material-reduced="true"] .sm-control::before,
html[data-material-reduced="true"] .sm-control::after,
html[data-material-reduced="true"] .sm-control .z-slider__thumb,
html[data-material-reduced="true"] .sm-control .display-thumb,
html[data-material-reduced="true"] .sm-control .z-knob__body,
html[data-material-reduced="true"] .sm-control .knob-body {
  transform: none !important;
  filter: none !important;
}
html[data-material-reduced="true"] .sm-control.sm-child-surface > .sm-surface { transform: translateX(-50%) !important; }
html[data-material-reduced="true"] .sm-control.sm-cap::after { transform: translate(-50%, -50%) !important; }