{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gallery-graphite-control-styles",
  "type": "registry:ui",
  "title": "Graphite material styles",
  "description": "Scoped brushed graphite and machined aluminum artwork.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui/graphite-controls.css",
      "content": "/**\n * Source: https://maru.audio/ui-kit/graphite-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.graphite-knob,\n.graphite-fader,\n.graphite-toggle {\n  position: relative;\n  display: block;\n  flex: none;\n  cursor: ns-resize;\n  outline: none !important;\n  user-select: none;\n  touch-action: none;\n  box-sizing: border-box;\n}\n.graphite-knob[aria-disabled=\"true\"],\n.graphite-fader[aria-disabled=\"true\"],\n.graphite-toggle[aria-disabled=\"true\"] {\n  opacity: 0.5;\n  cursor: default;\n}\n.graphite-knob span,\n.graphite-knob svg,\n.graphite-fader span {\n  pointer-events: none;\n}\n.graphite-knob__scale {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  filter: drop-shadow(0 1px 1px #141a1c);\n}\n.graphite-knob__plate {\n  position: absolute;\n  inset: 8%;\n  border: 3px solid #13191b;\n  border-radius: 50%;\n  background: linear-gradient(155deg, #434a4d, #2b3033);\n  box-shadow:\n    inset 0 2px 2px #747c7e99,\n    0 2px 1px #69707366;\n}\n.graphite-knob__cap {\n  position: absolute;\n  inset: 26%;\n  border-radius: 50%;\n  background: linear-gradient(#464d50, #272c2f);\n  box-shadow:\n    0 17px 12px -3px #080c0f,\n    inset 0 2px 2px #68717488,\n    0 -2px 2px 11px #58606322,\n    0 -3px 2px 14px #20252866;\n}\n.graphite-knob__rotor {\n  position: absolute;\n  inset: 0;\n}\n.graphite-knob__rotor i {\n  position: absolute;\n  width: 5.5%;\n  height: 5.5%;\n  top: 14%;\n  left: 47.25%;\n  border-radius: 50%;\n  background: #f1f5f5;\n  box-shadow: 0 1px 2px #141819;\n}\n.graphite-fader__scale {\n  position: absolute;\n  inset: 7% 7%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n.graphite-fader__scale i {\n  height: 2px;\n  width: 100%;\n  background: #89929477;\n  box-shadow: 0 1px #252c2f;\n}\n.graphite-fader__slot {\n  position: absolute;\n  inset: 0 auto;\n  left: 47%;\n  width: 10%;\n  background: #111719;\n  border-left: 2px solid #495155;\n  border-right: 2px solid #67717655;\n  box-shadow: inset 3px 0 5px #080d0f;\n}\n.graphite-fader__cap {\n  position: absolute;\n  left: 0;\n  width: 100%;\n  height: 68px;\n  transform: translateY(-50%);\n  border-radius: 6px;\n  background: linear-gradient(\n    #4b5356 0%,\n    #3c4346 20%,\n    #30373a 48%,\n    #303639 80%,\n    #202629\n  );\n  box-shadow:\n    0 9px 8px #10161999,\n    inset 0 3px 3px #68737777,\n    inset 0 -2px 3px #151b1e;\n}\n.graphite-fader__cap:before,\n.graphite-fader__cap:after {\n  content: \"\";\n  position: absolute;\n  left: 4%;\n  right: 4%;\n  height: 11px;\n  border-radius: 5px;\n  background: linear-gradient(#3b4346, #444c4f);\n  box-shadow: inset 0 1px 2px #6b747633;\n}\n.graphite-fader__cap:before {\n  top: 3px;\n}\n.graphite-fader__cap:after {\n  bottom: 3px;\n}\n.graphite-fader__cap i {\n  position: absolute;\n  left: 5%;\n  right: 5%;\n  top: 48%;\n  height: 3px;\n  background: #d9e4e4;\n  border-radius: 2px;\n  box-shadow: 0 1px 2px #172023;\n}\n.graphite-selector {\n  display: flex;\n  box-sizing: border-box;\n  padding: 4px;\n  height: 94px;\n  border-radius: 10px;\n  background: #182023;\n  box-shadow:\n    inset 0 2px 3px #121719,\n    0 1px 2px #71808266;\n}\n.graphite-selector button {\n  font:\n    900 19px Arial,\n    Helvetica,\n    sans-serif;\n  color: #e6eaeb;\n  text-shadow: 0 1px 1px #151b1e;\n  flex: 1;\n  border: 1px solid #71797b66;\n  border-radius: 4px;\n  background: linear-gradient(#41494d, #2b3236);\n  box-shadow:\n    0 3px 5px #0c1215,\n    inset 0 1px 1px #88919444;\n  cursor: pointer;\n}\n.graphite-selector button[aria-pressed=\"true\"] {\n  background: linear-gradient(#20272a, #333b3f);\n  box-shadow: inset 0 4px 7px #10171a;\n  border-color: #20282b;\n}\n.graphite-selector button:focus-visible {\n  outline: none;\n  color: #fff;\n  text-shadow: 0 0 5px #d7ecee88;\n}\n.graphite-selector button:disabled {\n  opacity: 0.5;\n  cursor: default;\n}\n.graphite-toggle {\n  cursor: pointer;\n}\n.graphite-toggle__surface {\n  position: absolute;\n  inset: 0;\n  border-radius: 24px;\n  background: linear-gradient(90deg, #161d20, #252c30);\n  box-shadow:\n    inset 1px 2px 3px #101719,\n    0 1px 1px #a5b1b155;\n}\n.graphite-toggle__surface > i {\n  position: absolute;\n  left: 4px;\n  top: 4px;\n  width: 35px;\n  height: 35px;\n  border-radius: 50%;\n  background: conic-gradient(\n    from 10deg,\n    #c7cdcd,\n    #f1f4f3,\n    #7d898b,\n    #e9eeee,\n    #959fa1,\n    #e4eaea,\n    #c7cdcd\n  );\n  box-shadow:\n    0 3px 4px #070d0f,\n    inset 0 0 0 2px #bcc5c5,\n    inset 0 0 6px #faffff;\n}\n.graphite-toggle__surface[data-on=\"false\"] > i {\n  top: 53px;\n}\n.graphite-toggle__surface[data-power] {\n  border-radius: 7px;\n  border: 4px solid #182023;\n  background: repeating-linear-gradient(\n    0deg,\n    #c0c7c8 0px,\n    #c5cdcd 1px,\n    #bcc6c6 2px,\n    #bec7c8 3px\n  );\n  box-shadow:\n    0 2px 3px #151a1d,\n    inset 0 6px 8px #f8fbfb,\n    inset 0 -10px 10px #5e6a70;\n}\n.graphite-toggle__surface[data-power] svg {\n  position: absolute;\n  height: 48px;\n  width: 48px;\n  left: calc(50% - 24px);\n  top: 5px;\n  fill: none;\n  stroke: #333c40;\n  stroke-width: 7;\n  stroke-linecap: round;\n  filter: drop-shadow(0 1px 1px #eef7f6);\n}\n.graphite-toggle__surface[data-power][data-on=\"false\"] {\n  filter: brightness(0.72);\n}\n.graphite-toggle__surface[data-power][data-pressed=\"true\"] {\n  box-shadow:\n    inset 0 4px 8px #47545a,\n    inset 0 -4px 6px #d1dddd;\n}\n",
      "type": "registry:file",
      "target": "@ui/graphite-controls.css"
    }
  ]
}