{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gallery-grain-control-styles",
  "type": "registry:component",
  "title": "Grain control styles",
  "description": "Scoped brushed charcoal ring dials and scan/bar rails.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/grain-controls.css",
      "content": "/**\n * Source: https://maru.audio/ui-kit/grain-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.grain-knob {\n  position: relative;\n  flex-shrink: 0;\n  touch-action: none;\n  outline: none;\n  cursor: ns-resize;\n}\n.grain-knob svg {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n}\n.grain-knob__cap {\n  position: absolute;\n  inset: 15%;\n  border-radius: 50%;\n  background: linear-gradient(140deg, #34383a, #272b2c);\n  box-shadow:\n    inset 1px 1px 1px #515556,\n    1px 2px 2px #171a1b;\n}\n.grain-knob__rotor {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n.grain-knob__rotor i {\n  position: absolute;\n  left: 48%;\n  top: 15%;\n  width: 7%;\n  height: 16%;\n  background: #b5c9cf;\n  border-radius: 1px;\n}\n.grain-knob[aria-disabled=\"true\"] {\n  opacity: 0.3;\n  cursor: default;\n}\n.grain-fader {\n  position: relative;\n  touch-action: none;\n  outline: none;\n  cursor: ns-resize;\n  width: 15px;\n  background: #181c1c;\n}\n.grain-fader[data-orientation=\"horizontal\"] {\n  height: 13px;\n  cursor: ew-resize;\n  background: #10191c;\n}\n.grain-fader__bar {\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  background: #1ec7dc;\n}\n.grain-fader__ticks {\n  position: absolute;\n  inset: 0;\n  background: repeating-linear-gradient(\n    90deg,\n    transparent 0 3px,\n    #1e5661 3px 4px\n  );\n}\n.grain-fader__scan {\n  position: absolute;\n  bottom: 0;\n  width: 0;\n  height: 0;\n  border-left: 6px solid transparent;\n  border-right: 6px solid transparent;\n  border-bottom: 10px solid #20cce4;\n  transform: translateX(-50%);\n  filter: drop-shadow(0 0 2px #13b8ca);\n}\n.grain-fader:focus-visible .grain-fader__bar {\n  background: #9aeffa;\n}\n",
      "type": "registry:file",
      "target": "@components/grain-controls.css"
    }
  ]
}