{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gallery-console-control-styles",
  "type": "registry:ui",
  "title": "Console hardware styles",
  "description": "Shared scoped CSS for molded tempo controls.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui/console-controls.css",
      "content": "/**\n * Source: https://maru.audio/ui-kit/console-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/* Molded graphite kit. Lighting stays fixed while position markers move. */\n.indexed-knob,\n.capsule-fader,\n.panel-toggle {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  flex: none;\n  touch-action: none;\n  outline: none;\n  border: 0;\n  padding: 0;\n  background: none;\n  user-select: none;\n  cursor: pointer;\n}\n.indexed-knob[aria-disabled=\"true\"],\n.capsule-fader[aria-disabled=\"true\"],\n.panel-toggle:disabled {\n  opacity: 0.45;\n  cursor: default;\n}\n.indexed-knob__rim {\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  background: linear-gradient(150deg, #181714, #565552 40%, #161512 82%);\n  box-shadow:\n    0 3px 3px #25242188,\n    inset 0 2px 1px #6d6c6960;\n  border: 2px solid #1c1b18;\n}\n.indexed-knob__cap {\n  position: absolute;\n  inset: 9%;\n  border-radius: 50%;\n  background:\n    radial-gradient(ellipse at 43% 5%, #73726f80, transparent 52%),\n    linear-gradient(#585754, #31302d 62%, #191815);\n  box-shadow:\n    inset 0 2px 2px #aaa99a55,\n    0 5px 6px #11100dc0;\n}\n.indexed-knob__cap:after {\n  content: \"\";\n  position: absolute;\n  inset: 23%;\n  border-radius: 50%;\n  background: linear-gradient(#565552, #353431);\n  box-shadow:\n    0 5px 8px #12110e,\n    inset 0 1px 2px #a3a39544;\n}\n.indexed-knob__rotor {\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  pointer-events: none;\n}\n.indexed-knob__rotor i {\n  position: absolute;\n  left: 47%;\n  top: 5%;\n  width: 6%;\n  height: 33%;\n  border-radius: 8px;\n  background: linear-gradient(90deg, #9e9d9a, #eeeee6, #959491);\n  box-shadow: 0 1px 2px #161512;\n}\n.indexed-knob[data-dimple] .indexed-knob__cap {\n  inset: 1.5%;\n  background: linear-gradient(#555451, #2d2c29);\n  box-shadow:\n    inset 0 2px 1px #98979455,\n    0 8px 8px #23221faa;\n}\n.indexed-knob[data-dimple] .indexed-knob__cap:after {\n  display: none;\n}\n.indexed-knob[data-dimple] .indexed-knob__rotor i {\n  top: 10%;\n  left: 33%;\n  height: 34%;\n  width: 34%;\n  border-radius: 50%;\n  background: radial-gradient(ellipse at 50% 0%, #252421, #474643 83%);\n  box-shadow:\n    inset 0 3px 5px #22211e70,\n    0 1px 1px #96959250;\n}\n.capsule-fader {\n  border: 5px solid #4c4b48;\n  border-radius: 33px;\n  background: linear-gradient(90deg, #2a2926, #353431, #252421);\n  box-shadow:\n    inset 3px 4px 8px #151411cc,\n    0 1px 2px #6e6d6a55;\n}\n.capsule-fader__slot {\n  position: absolute;\n  top: 35px;\n  bottom: 35px;\n  left: 21px;\n  width: 9px;\n  background: #181714;\n  box-shadow:\n    inset 1px 0 2px #100f0c,\n    1px 1px 1px #696865;\n}\n.capsule-fader__cap {\n  position: absolute;\n  left: 5px;\n  right: 5px;\n  height: 106px;\n  transform: translateY(-50%);\n  border-radius: 23px;\n  background: linear-gradient(90deg, #464542, #3d3c39);\n  border: 1px solid #63625f;\n  box-shadow:\n    0 5px 6px #11100dc0,\n    inset 0 1px 1px #8b8a8755;\n  pointer-events: none;\n}\n.capsule-fader__cap:before {\n  content: \"\";\n  position: absolute;\n  inset: 21px 2px;\n  background: linear-gradient(#474643, #373633);\n  border: 1px solid #61605d;\n  border-radius: 8px;\n  box-shadow: inset 0 1px 3px #11100d55;\n}\n.capsule-fader__cap i {\n  position: absolute;\n  left: -3px;\n  right: -3px;\n  top: 49%;\n  height: 5px;\n  background: #e3e2df;\n  border-radius: 5px;\n  box-shadow: 0 2px 1px #151411;\n}\n.panel-toggle__surface {\n  position: absolute;\n  inset: 0;\n  border: 3px solid #191815;\n  border-radius: 50%;\n  background: #391426;\n  box-shadow:\n    inset 0 2px 3px #b7889670,\n    0 3px 2px #23231d88;\n  overflow: hidden;\n}\n.panel-toggle__surface:before {\n  content: \"\";\n  position: absolute;\n  inset: 3px;\n  border-radius: inherit;\n  background:\n    repeating-linear-gradient(0deg, transparent 0 8px, #0d001c44 8px 13px),\n    repeating-linear-gradient(90deg, transparent 0 8px, #0d001c44 8px 13px),\n    radial-gradient(ellipse at 35% 18%, #825065, #420720 70%);\n}\n.panel-toggle__surface[data-on] {\n  border-color: #9e345f;\n  box-shadow:\n    0 0 8px #fa33869e,\n    0 2px 2px #29201d;\n}\n.panel-toggle__surface[data-on]:before {\n  background:\n    repeating-linear-gradient(0deg, transparent 0 8px, #ffffff50 8px 13px),\n    repeating-linear-gradient(90deg, transparent 0 8px, #ffffff50 8px 13px),\n    radial-gradient(ellipse at 45% 28%, #fffff5, #f8b3d2 65%, #ed5897);\n  box-shadow: inset 0 0 5px #ff4c9e;\n}\n.panel-toggle__surface[data-rocker] {\n  border-radius: 8px;\n  border-color: #32312e;\n  background: linear-gradient(#484744, #262522);\n  box-shadow:\n    0 5px 5px #242320,\n    inset 0 2px 1px #757471,\n    inset 0 -2px 2px #181714;\n}\n.panel-toggle__surface[data-rocker]:before {\n  display: none;\n}\n.panel-toggle__surface[data-rocker][data-on] {\n  background: linear-gradient(#504f4c, #302f2c);\n  box-shadow:\n    0 3px 5px #252421,\n    inset 0 2px 1px #82817e,\n    inset 0 -3px 2px #181714;\n}\n.panel-toggle__surface[data-pressed] {\n  filter: brightness(0.9);\n  transform: translateY(1px);\n}\n.panel-toggle:focus-visible .panel-toggle__surface[data-rocker] {\n  box-shadow:\n    0 0 0 1px #d7d6d3,\n    inset 0 2px 1px #757471;\n}\n",
      "type": "registry:file",
      "target": "@ui/console-controls.css"
    }
  ]
}