{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gallery-disc-control-styles",
  "type": "registry:ui",
  "title": "Disc control styles",
  "description": "Scoped frosted blue materials and procedural disc artwork.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui/disc-controls.css",
      "content": "/**\n * Source: https://maru.audio/ui-kit/disc-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.disc-knob {\n  position: relative;\n  display: block;\n  touch-action: none;\n  cursor: ns-resize;\n  outline: none !important;\n}\n.disc-knob svg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  overflow: visible;\n}\n.disc-knob__cap {\n  position: absolute;\n  inset: 12%;\n  border-radius: 50%;\n  background: linear-gradient(145deg, #bdced5, #acbfc7);\n  border: 2px solid #c3d4db;\n  box-shadow:\n    inset 0 3px 1px #d3e0e54d,\n    0 5px 5px #273d4845,\n    0 13px 11px #283c4333,\n    0 0 0 6px #9aaeb533;\n}\n.disc-knob__index {\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  pointer-events: none;\n}\n.disc-knob__index i {\n  position: absolute;\n  left: 49%;\n  top: 17%;\n  height: 13%;\n  width: 2%;\n  border-radius: 2px;\n  background: #304651;\n}\n.disc-knob__ticks:before,\n.disc-knob__ticks:after {\n  content: \"\";\n  position: absolute;\n  background: #334b57;\n  width: 2px;\n  height: 8%;\n  left: calc(50% - 1px);\n  border-radius: 2px;\n}\n.disc-knob__ticks:before {\n  top: 0;\n}\n.disc-knob__ticks:after {\n  bottom: 0;\n}\n.disc-selector {\n  display: flex;\n  height: 30px;\n  padding: 11px 12px;\n  box-sizing: border-box;\n  border-radius: 30px;\n  background: linear-gradient(#bdccd2, #d3dfe4);\n  box-shadow:\n    inset 0 3px 6px #81979f44,\n    0 5px 11px #3b566c30,\n    inset 0 -2px 3px #eff6f6a6;\n}\n.disc-selector button {\n  border: 0;\n  background: #34434f;\n  padding: 0;\n  flex: 1;\n  cursor: pointer;\n  height: 6px;\n  border-right: 1px solid #afc1cc;\n}\n.disc-selector button:first-child {\n  border-radius: 5px 0 0 5px;\n}\n.disc-selector button:last-child {\n  border-radius: 0 5px 5px 0;\n  border-right: 0;\n}\n.disc-selector button[aria-pressed=\"true\"] {\n  background: #faffff;\n  box-shadow: 0 0 9px #fff8;\n}\n.disc-selector button:focus-visible {\n  outline: 1px dotted #354d5b;\n  outline-offset: 3px;\n}\n.disc-button {\n  box-sizing: border-box;\n  cursor: pointer;\n  font: inherit;\n  color: #283b47;\n}\n.disc-button--key {\n  width: 48px;\n  height: 8px;\n  border-radius: 6px;\n  background: #fffff2;\n  border: 2px solid #04090c;\n  box-shadow: 0 0 7px #e4f7ff66;\n}\n.disc-button--key[aria-pressed=\"false\"] {\n  background: #8da7b1;\n}\n.disc-button--solo {\n  width: 33px;\n  height: 29px;\n  border-radius: 8px;\n  border: 1px solid #829ba6;\n  background: #b3c5cd;\n  box-shadow: 0 2px 3px #536c7438;\n}\n.disc-button--solo svg {\n  width: 24px;\n  height: 24px;\n  fill: #8da3ad;\n  stroke: #8da3ad;\n  stroke-width: 1.5;\n}\n.disc-button--solo[aria-pressed=\"true\"] {\n  background: #d1e1e5;\n}\n.disc-button--solo[aria-pressed=\"true\"] svg {\n  fill: #3d6874;\n  stroke: #3d6874;\n}\n.disc-button--pill {\n  height: 34px;\n  padding: 0 13px;\n  border-radius: 24px;\n  background: #b5c8d1;\n  border: 1px solid #859fa9;\n  letter-spacing: 0.5px;\n  white-space: nowrap;\n}\n.disc-tray {\n  position: relative;\n  aspect-ratio: 1;\n  box-sizing: border-box;\n  border-radius: 36px;\n  background: linear-gradient(140deg, #7e9ba6, #34515e);\n  border: 3px solid #9db3bd;\n  box-shadow:\n    inset 0 0 0 2px #53707c,\n    0 3px 0 #09151d,\n    0 5px 0 #c1d0d5,\n    0 24px 25px #253e5438;\n  overflow: hidden;\n}\n.disc-tray__corner {\n  position: absolute;\n  top: 11px;\n  width: 25%;\n  height: 25%;\n  background: radial-gradient(at 70% 80%, #172c32, #000);\n  border: 1px solid #93a8ac;\n}\n.disc-tray__corner--left {\n  left: 11px;\n  border-radius: 20px 5px 80px 5px;\n}\n.disc-tray__corner--right {\n  right: 11px;\n  border-radius: 5px 20px 5px 80px;\n}\n.disc-tray__record {\n  position: absolute;\n  inset: 7%;\n  border-radius: 50%;\n  background: #c0d9e2;\n  border: 5px solid #02090c;\n  box-shadow: 0 0 0 5px #829fa9;\n  transform: rotate(var(--disc-rotation));\n  filter: hue-rotate(var(--disc-hue));\n}\n.disc-tray[data-variant=\"ember\"] .disc-tray__record {\n  background: radial-gradient(\n    circle at 50% 48%,\n    #ffb600 0%,\n    #ff9a00 18%,\n    #ff354d 48%,\n    #ff007b 69%\n  );\n}\n.disc-tray[data-variant=\"aqua\"] .disc-tray__record {\n  background: radial-gradient(\n    circle at 45% 66%,\n    #002d35 2%,\n    #006357 35%,\n    #00efc8 70%\n  );\n}\n.disc-tray__record:after {\n  content: \"\";\n  position: absolute;\n  inset: 33%;\n  border-radius: 50%;\n  background: #010709;\n  border: 2px solid #94afba;\n}\n.disc-tray__card {\n  position: absolute;\n  inset: 51% 0 0;\n  background: linear-gradient(135deg, #8fa9b6f8, #93a9b6f5);\n  color: #f7fbff;\n  border-top: 1px solid #a8c3cc55;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 17px 23px;\n}\n.disc-tray__card:after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(138deg, transparent 65%, #647f8c24 65%);\n  pointer-events: none;\n}\n.disc-tray__caption {\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  font:\n    9px Arial,\n    sans-serif;\n  letter-spacing: 1.5px;\n}\n.disc-tray__card strong {\n  font:\n    bold 29px Arial,\n    sans-serif;\n  letter-spacing: 3px;\n  z-index: 1;\n}\n.disc-tray[data-variant=\"ember\"] strong {\n  font: 600 25px monospace;\n  letter-spacing: 1px;\n}\n.disc-tray[data-variant=\"aqua\"] strong {\n  font:\n    33px Georgia,\n    serif;\n  letter-spacing: 1px;\n}\n.disc-tray__card small {\n  font:\n    9px Arial,\n    sans-serif;\n  letter-spacing: 6px;\n  margin-right: -6px;\n  white-space: nowrap;\n}\n.disc-tray__hub {\n  position: absolute;\n  width: 13%;\n  height: 13%;\n  top: 43.5%;\n  left: 43.5%;\n  border-radius: 50%;\n  background: #303c44;\n  border: 3px solid #060c11;\n  box-shadow: 0 0 0 2px #637c88;\n  box-sizing: border-box;\n}\n.disc-tray__hub:before {\n  content: \"\";\n  position: absolute;\n  inset: 37%;\n  border: 2px solid #1a262c;\n  border-radius: 50%;\n  background: #060b0d;\n}\n.disc-tray__hub i {\n  position: absolute;\n  width: 10%;\n  height: 10%;\n  background: #101b20;\n  border-radius: 50%;\n}\n.disc-tray__hub i:nth-child(1) {\n  top: 15%;\n  left: 45%;\n}\n.disc-tray__hub i:nth-child(2) {\n  bottom: 15%;\n  left: 45%;\n}\n.disc-tray__hub i:nth-child(3) {\n  top: 45%;\n  left: 15%;\n}\n.disc-tray__hub i:nth-child(4) {\n  top: 45%;\n  right: 15%;\n}\n.disc-tray__screws {\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n  pointer-events: none;\n  background:\n    radial-gradient(circle at 32% 5%, #010809 0 2px, transparent 3px),\n    radial-gradient(circle at 68% 5%, #010809 0 2px, transparent 3px),\n    radial-gradient(circle at 5% 32%, #010809 0 2px, transparent 3px),\n    radial-gradient(circle at 95% 32%, #010809 0 2px, transparent 3px);\n}\n.disc-tray[data-active=\"false\"] {\n  filter: saturate(0.15);\n  opacity: 0.7;\n}\n.disc-button:focus-visible {\n  outline: 1px dotted #304753;\n  outline-offset: 3px;\n}\n",
      "type": "registry:file",
      "target": "@ui/disc-controls.css"
    }
  ]
}