{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gallery-spectral-control-styles",
  "type": "registry:ui",
  "title": "Spectral control styles",
  "description": "Scoped graphite material, recessed choices and colored spectral geometry.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui/spectral-controls.css",
      "content": "/**\n * Source: https://maru.audio/ui-kit/spectral-control-styles\n * Copyright © [Maru](https://maru.audio)\n *\n * Maru UI Kit — https://maru.audio/ui-kit\n *\n * Installed from the Maru UI registry. This file is yours now: edit it\n * freely, it will not be overwritten unless you re-run the add command.\n *\n * Keep this item’s companion files and CSS imports together. Dependencies\n * declared by the registry are installed with the source.\n */\n.spectral-knob {\n  position: relative;\n  cursor: ns-resize;\n  touch-action: none;\n  outline: none;\n  flex-shrink: 0;\n}\n.spectral-knob__scale {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.spectral-knob__rim {\n  position: absolute;\n  inset: 9%;\n  border-radius: 50%;\n  background: linear-gradient(145deg, #3b3d40, #1c1e20);\n  box-shadow:\n    inset 2px 2px 3px #131516,\n    inset -1px -1px 2px #636468,\n    2px 4px 7px #17191b;\n}\n.spectral-knob__cap {\n  position: absolute;\n  inset: 17%;\n  border-radius: 50%;\n  background: radial-gradient(\n    ellipse at 40% 25%,\n    #414448,\n    #303236 65%,\n    #222427\n  );\n  box-shadow:\n    inset 0 1px 2px #66676a,\n    inset 0 -5px 6px #151719,\n    0 5px 7px #181a1c;\n  display: grid;\n  place-items: center;\n}\n.spectral-knob__cap > i {\n  position: absolute;\n  inset: 5%;\n  border-radius: 50%;\n  background: conic-gradient(\n    from -5deg,\n    transparent 0deg,\n    #a3a6a8 1deg,\n    transparent 3deg\n  );\n  pointer-events: none;\n}\n.spectral-knob__readout {\n  font:\n    300 20px/1.1 Arial,\n    sans-serif;\n  color: #d1d2d3;\n  text-align: center;\n}\n.spectral-knob__readout small {\n  display: block;\n  font-size: 11px;\n  margin-top: 3px;\n}\n.spectral-fader {\n  position: relative;\n  cursor: ns-resize;\n  touch-action: none;\n  outline: none;\n  overflow: visible;\n}\n.spectral-fader__bars {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  gap: 1.5px;\n  align-items: flex-end;\n  pointer-events: none;\n}\n.spectral-fader__bars > i {\n  position: relative;\n  flex: 1;\n  background: color-mix(in srgb, var(--spectral-accent), #1c2023 62%);\n  box-shadow: inset 1px 0 1px #ffffff18;\n  border: 1px solid #171b1c50;\n}\n.spectral-fader__bars b {\n  display: block;\n  position: absolute;\n  inset: 0 0 auto;\n  background: linear-gradient(\n    90deg,\n    var(--spectral-accent),\n    color-mix(in srgb, var(--spectral-accent), white 22%)\n  );\n  box-shadow: 0 1px 2px #0009;\n}\n.spectral-fader__line {\n  position: absolute;\n  left: 0;\n  right: 0;\n  border-top: 2px solid #d7d8d5;\n  pointer-events: none;\n}\n.spectral-fader__line output {\n  position: absolute;\n  left: 50%;\n  top: -12px;\n  transform: translateX(-50%);\n  min-width: 40px;\n  padding: 3px 9px;\n  border: 1px solid #93969870;\n  background: #484b4be8;\n  box-shadow: 0 4px 6px #14161760;\n  color: #eee;\n  font:\n    14px Arial,\n    sans-serif;\n  text-align: center;\n}\n.spectral-fader[data-kind=\"meter\"] .spectral-fader__bars {\n  gap: 14px;\n}\n.spectral-fader[data-kind=\"meter\"] .spectral-fader__bars > i {\n  background: var(--spectral-accent);\n}\n.spectral-fader[data-kind=\"meter\"] .spectral-fader__bars b {\n  background: repeating-linear-gradient(\n    to top,\n    #161a1b65 0 1px,\n    transparent 1px 3px\n  );\n}\n.spectral-fader[data-kind=\"meter\"]:before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  width: 3px;\n  transform: translateX(-50%);\n  background: #17191c;\n  box-shadow: 1px 0 1px #ffffff40;\n}\n.spectral-fader[data-kind=\"meter\"] .spectral-fader__line {\n  border: 0;\n}\n.spectral-fader[data-kind=\"meter\"] .spectral-fader__line output {\n  font-size: 11px;\n  padding: 4px 1px;\n  min-width: 42px;\n  background: #383c3cbf;\n}\n.spectral-selector {\n  display: flex;\n  padding: 5px;\n  border-radius: 30px;\n  background: linear-gradient(#26282a, #484a4c);\n  box-shadow:\n    inset 2px 3px 4px #141617,\n    inset -1px -1px 2px #535659;\n}\n.spectral-selector button {\n  font:\n    12px Arial,\n    sans-serif;\n  letter-spacing: 1px;\n  color: #77797c;\n  border: 0;\n  padding: 9px 15px;\n  background: linear-gradient(#424446, #282a2c);\n  box-shadow:\n    inset 0 1px 1px #77797a50,\n    0 2px 3px #161819;\n  cursor: pointer;\n  flex: 1;\n}\n.spectral-selector button:first-of-type {\n  border-radius: 20px 0 0 20px;\n}\n.spectral-selector button:last-of-type {\n  border-radius: 0 20px 20px 0;\n}\n.spectral-selector button[aria-pressed=\"true\"] {\n  color: var(--spectral-accent);\n  text-shadow: 0 0 8px\n    color-mix(in srgb, var(--spectral-accent), transparent 60%);\n  background: linear-gradient(#282a2c, #3b3d3f);\n}\n.spectral-selector--curved {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  background: none;\n  box-shadow: none;\n  padding: 0;\n  width: 110px;\n  height: 220px;\n  justify-content: space-between;\n}\n.spectral-selector--curved svg {\n  position: absolute;\n  right: 0;\n  top: 0;\n  width: 70px;\n  height: 100%;\n  pointer-events: none;\n}\n.spectral-selector--curved button {\n  position: relative;\n  flex: 0;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 9px;\n  padding: 4px 0;\n  background: none;\n  box-shadow: none;\n  border-radius: 0;\n  font-size: 10px;\n  color: #c0c2c3;\n  white-space: nowrap;\n}\n.spectral-selector--curved button:nth-of-type(2),\n.spectral-selector--curved button:nth-of-type(3) {\n  margin-right: 24px;\n}\n.spectral-selector--curved button i {\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background: #55585a;\n  box-shadow: 0 0 2px #6b6e70;\n  flex-shrink: 0;\n}\n.spectral-selector--curved button[aria-pressed=\"true\"] i {\n  background: var(--spectral-accent);\n  box-shadow: 0 0 5px var(--spectral-accent);\n}\n.spectral-toggle {\n  outline: none;\n  border: 1px solid #77797b;\n  border-radius: 2px;\n  background: transparent;\n  color: #77797b;\n  padding: 5px 12px;\n  cursor: pointer;\n  font:\n    12px Arial,\n    sans-serif;\n}\n.spectral-toggle span[data-on] {\n  color: #61c5bd;\n  text-shadow: 0 0 6px #59b8b570;\n}\n.spectral-toggle:has(span[data-on]) {\n  border-color: #242628;\n  background: linear-gradient(#202325, #303436);\n  box-shadow:\n    inset 1px 2px 3px #151718,\n    0 1px 1px #5b5d6030;\n}\n.spectral-toggle[data-round] {\n  border: 0;\n  border-radius: 50%;\n  width: 60px;\n  height: 60px;\n  padding: 10px;\n  background: linear-gradient(140deg, #34373a, #222527);\n  box-shadow:\n    inset 0 1px 1px #5e6062,\n    2px 4px 5px #151719;\n  color: #ddd;\n  font-size: 10px;\n  letter-spacing: 1px;\n}\n.spectral-toggle[data-round] span {\n  white-space: pre-line;\n}\n.spectral-knob[aria-disabled=\"true\"],\n.spectral-fader[aria-disabled=\"true\"],\n.spectral-toggle[aria-disabled=\"true\"],\n.spectral-selector:has(button:disabled) {\n  opacity: 0.45;\n}\n\n.spectral-knob__rim {\n  z-index: 1;\n}\n.spectral-knob__scale {\n  z-index: 2;\n}\n.spectral-knob__cap {\n  z-index: 3;\n}\n\n.spectral-selector button:focus-visible {\n  outline: none;\n  filter: brightness(1.2);\n}\n",
      "type": "registry:file",
      "target": "@ui/spectral-controls.css"
    }
  ]
}