{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "book-styles",
  "type": "registry:style",
  "files": [
    {
      "path": "registry/styles/book.css",
      "content": ".book-perspective {\n  --book-default-width: 196;\n  --book-depth: 29cqw;\n  --book-border-radius: 6px 4px 4px 6px;\n  --hover-rotate: -20deg;\n  --hover-scale: 1.066;\n  --hover-translate-x: -8px;\n  --aspect-ratio: 49 / 60;\n  --bg-shadow: linear-gradient(\n      90deg,\n      hsla(0, 0%, 100%, 0),\n      hsla(0, 0%, 100%, 0) 12%,\n      hsla(0, 0%, 100%, 0.25) 29.25%,\n      hsla(0, 0%, 100%, 0) 50.5%,\n      hsla(0, 0%, 100%, 0) 75.25%,\n      hsla(0, 0%, 100%, 0.25) 91%,\n      hsla(0, 0%, 100%, 0)\n    ),\n    linear-gradient(\n      90deg,\n      rgba(0, 0, 0, 0.03),\n      rgba(0, 0, 0, 0.1) 12%,\n      transparent 30%,\n      rgba(0, 0, 0, 0.02) 50%,\n      rgba(0, 0, 0, 0.2) 73.5%,\n      rgba(0, 0, 0, 0.5) 75.25%,\n      rgba(0, 0, 0, 0.15) 85.25%,\n      transparent\n    );\n  perspective: 900px;\n  display: inline-block;\n  width: -moz-fit-content;\n  width: fit-content;\n}\n\n@media (hover: hover) {\n  .book-perspective:hover .book-rotate-wrapper {\n    transform: rotateY(var(--hover-rotate)) scale(var(--hover-scale))\n      translateX(var(--hover-translate-x));\n  }\n}\n\n.book-rotate-wrapper {\n  aspect-ratio: var(--aspect-ratio);\n  width: -moz-fit-content;\n  width: fit-content;\n  transform: rotate(0deg);\n  position: relative;\n  transform-style: preserve-3d;\n  min-width: calc(var(--book-width) * 1px);\n  transition: transform .25s ease-out;\n  container-type: inline-size;\n}\n\n.book-rotate-wrapper > :first-child {\n  position: absolute;\n  min-width: calc(var(--book-width) * 1px);\n}\n\n.book-rotate-wrapper .book-pages {\n  background: linear-gradient(90deg, #eaeaea, transparent 70%),\n    linear-gradient(#fff, #fafafa);\n}\n\n.book-rotate-wrapper .book-pages.book-textured {\n  background: repeating-linear-gradient(\n    90deg,\n    #fff,\n    #efefef 1px,\n    #fff 3px,\n    #9a9a9a 0\n  );\n}\n\n.book-rotate-wrapper .book-pages {\n  height: calc(100% - 2 * 3px);\n  width: calc(var(--book-depth) - 2px);\n  top: 3px;\n  position: absolute;\n  transform: translateX(\n      calc(var(--book-width) * 1px - var(--book-depth) / 2 - 3px)\n    )\n    rotateY(90deg) translateX(calc(var(--book-depth) / 2));\n}\n\n.book-rotate-wrapper .book-back {\n  position: absolute;\n  left: 0;\n  width: calc(var(--book-width) * 1px);\n  height: 100%;\n  border-radius: var(--book-border-radius);\n  transform: translateZ(calc(-1 * var(--book-depth)));\n}\n\n.book-rotate-wrapper.book-stripe .book-content {\n  gap: calc((24px / var(--book-default-width)) * var(--book-width));\n}\n\n.book-rotate-wrapper.book-stripe .book-content .book-title {\n  line-height: 1.25em;\n  font-size: 10.5cqw;\n  letter-spacing: -.02em;\n}\n\n.book-rotate-wrapper.book-stripe .book-back {\n  background-color: var(--book-color);\n}\n\n.book-rotate-wrapper.book-stripe .book-stripe {\n  background: var(--book-color);\n  width: 100%;\n  position: relative;\n  flex: 1 1;\n  overflow: hidden;\n}\n\n.book-rotate-wrapper.book-stripe .book-stripe .book-illustration {\n  -o-object-fit: cover;\n  object-fit: cover;\n}\n\n.book-rotate-wrapper.book-stripe .book-stripe .book-bind {\n  position: absolute;\n  background: var(--bg-shadow);\n  mix-blend-mode: overlay;\n}\n\n.book-rotate-wrapper.book-simple.book-color .book-book {\n  background: var(--book-color);\n}\n\n.book-rotate-wrapper.book-simple.book-color .book-bind {\n  mix-blend-mode: overlay;\n  opacity: 1;\n}\n\n.book-rotate-wrapper.book-simple:not(.book-color) .book-book:after {\n  box-shadow: inset 0 1px 2px 0 hsla(0, 0%, 100%, 0.1);\n}\n\n.book-rotate-wrapper.book-simple .book-back {\n  background: var(--book-color);\n}\n\n.book-rotate-wrapper.book-simple .book-body {\n  width: 100%;\n  height: 100%;\n}\n\n.book-rotate-wrapper.book-simple .book-content {\n  gap: calc((16px / var(--book-default-width)) * var(--book-width));\n}\n\n.book-rotate-wrapper.book-simple .book-content .book-title {\n  line-height: 1.25em;\n  font-size: 12cqw;\n  letter-spacing: -.02em;\n  text-shadow: 0 .025em .5px hsla(0, 0%, 100%, 0.5), -.02em -.02em .5px\n    rgba(0, 0, 0, 0.5);\n  text-shadow: 0 .025em .5px color-mix(in srgb, var(--book-color) 80%, #fff 20%),\n    -.02em -.02em .5px color-mix(in srgb, var(--book-color) 80%, #000 20%);\n}\n\n.book-book {\n  width: calc(var(--book-width) * 1px);\n  height: 100%;\n  border-radius: var(--book-border-radius);\n  overflow: hidden;\n  /* background: var(--ds-background-200); */\n  position: relative;\n  /* box-shadow: 0 1px 1px 0 rgba(0,0,0,.02),0 4px 8px -4px rgba(0,0,0,.1),0 16px 24px -8px rgba(0,0,0,.03); */\n  background: linear-gradient(\n      180deg,\n      hsla(0, 0%, 100%, 0.1),\n      hsla(0, 0%, 100%, 0) 50%,\n      hsla(0, 0%, 100%, 0)\n    ), #1f1f1f;\n  box-shadow:\n    0 1.8px 3.6px rgba(0, 0, 0, 0.05), 0 10.8px 21.6px rgba(0, 0, 0, 0.08), inset 0 -.9px 0 rgba(\n      0,\n      0,\n      0,\n      0.1\n    ), inset 0 1.8px 1.8px hsla(0, 0%, 100%, 0.1), inset 3.6px 0 3.6px rgba(\n      0,\n      0,\n      0,\n      0.1\n    );\n}\n\n.book-book .book-texture {\n  background-image: url(https://assets.vercel.com/image/upload/v1720554484/front/design/book-texture.avif);\n  background-size: cover;\n  position: absolute;\n  inset: 0;\n  border-radius: var(--book-border-radius);\n  mix-blend-mode: hard-light;\n  background-repeat: no-repeat;\n  opacity: 0.5;\n  pointer-events: none;\n  filter: brightness(1.1);\n}\n\n.book-book .book-texture {\n  opacity: 1;\n  filter: brightness(1);\n}\n\n.book-book:after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border: 1px solid var(--ds-gray-alpha-400);\n  width: 100%;\n  height: 100%;\n  border-radius: inherit;\n  box-shadow: inset 0 1px 2px 0 hsla(0, 0%, 100%, 0.3);\n  pointer-events: none;\n}\n\n.book-book:after {\n  border: none;\n}\n\n.book-book .book-bind {\n  height: 100%;\n  width: 8.2%;\n}\n\n.book-book .book-content {\n  padding: 6.1%;\n  container-type: inline-size;\n  width: 100%;\n}\n\n.book-book .book-content .book-title {\n  text-wrap: balance;\n  color: var(--book-text-color);\n}\n\n.book-body .book-bind {\n  min-width: 8.2%;\n  background: var(--bg-shadow);\n  opacity: 0.2;\n}\n\n@media screen and (max-width: 400px) {\n  .book-perspective {\n    --book-width: var(--xs-book-width, var(--sm-book-width));\n  }\n}\n\n@media screen and (min-width: 401px) and (max-width: 600px) {\n  .book-perspective {\n    --book-width: var(--sm-book-width);\n  }\n}\n\n@media screen and (min-width: 601px) and (max-width: 768px) {\n  .book-perspective {\n    --book-width: var(\n      --smd-book-width,\n      var(--md-book-width, var(--sm-book-width))\n    );\n  }\n}\n\n@media screen and (min-width: 769px) and (max-width: 960px) {\n  .book-perspective {\n    --book-width: var(\n      --md-book-width,\n      var(--smd-book-width, var(--sm-book-width))\n    );\n  }\n}\n\n@media screen and (min-width: 961px) {\n  .book-perspective {\n    --book-width: var(\n      --lg-book-width,\n      var(--md-book-width, var(--smd-book-width, var(--sm-book-width)))\n    );\n  }\n}\n\n@layer geist {\n  .stack-stack {\n    display: flex;\n    flex-direction: var(--stack-direction, column);\n    align-items: var(--stack-align, stretch);\n    justify-content: var(--stack-justify, flex-start);\n    flex: var(--stack-flex, initial);\n    gap: var(--stack-gap, 0);\n  }\n\n  /* .stack_padding__ox8JS {\n        padding: var(--stack-padding,0)\n    } */\n\n  @media screen and (max-width: 600px) {\n    .stack-stack {\n      --stack-direction: var(--sm-stack-direction);\n      --stack-align: var(--sm-stack-align);\n      --stack-justify: var(--sm-stack-justify);\n      --stack-padding: var(--sm-stack-padding);\n      --stack-gap: var(--sm-stack-gap);\n    }\n  }\n\n  @media screen and (min-width: 601px) and (max-width: 960px) {\n    .stack-stack {\n      --stack-direction: var(--md-stack-direction, var(--sm-stack-direction));\n      --stack-align: var(--md-stack-align, var(--sm-stack-align));\n      --stack-justify: var(--md-stack-justify, var(--sm-stack-justify));\n      --stack-padding: var(--md-stack-padding, var(--sm-stack-padding));\n      --stack-gap: var(--md-stack-gap, var(--sm-stack-gap));\n    }\n  }\n\n  @media screen and (min-width: 961px) and (max-width: 1200px) {\n    .stack-stack {\n      --stack-direction: var(\n        --lg-stack-direction,\n        var(--md-stack-direction, var(--sm-stack-direction))\n      );\n      --stack-align: var(\n        --lg-stack-align,\n        var(--md-stack-align, var(--sm-stack-align))\n      );\n      --stack-justify: var(\n        --lg-stack-justify,\n        var(--md-stack-justify, var(--sm-stack-justify))\n      );\n      --stack-padding: var(\n        --lg-stack-padding,\n        var(--md-stack-padding, var(--sm-stack-padding))\n      );\n      --stack-gap: var(--lg-stack-gap, var(--md-stack-gap, var(--sm-stack-gap)));\n    }\n  }\n\n  @media screen and (min-width: 1201px) {\n    .stack-stack {\n      --stack-direction: var(\n        --xl-stack-direction,\n        var(\n          --lg-stack-direction,\n          var(--md-stack-direction, var(--sm-stack-direction))\n        )\n      );\n      --stack-align: var(\n        --xl-stack-align,\n        var(--lg-stack-align, var(--md-stack-align, var(--sm-stack-align)))\n      );\n      --stack-justify: var(\n        --xl-stack-justify,\n        var(\n          --lg-stack-justify,\n          var(--md-stack-justify, var(--sm-stack-justify))\n        )\n      );\n      --stack-padding: var(\n        --xl-stack-padding,\n        var(\n          --lg-stack-padding,\n          var(--md-stack-padding, var(--sm-stack-padding))\n        )\n      );\n      --stack-gap: var(\n        --xl-stack-gap,\n        var(--lg-stack-gap, var(--md-stack-gap, var(--sm-stack-gap)))\n      );\n    }\n  }\n}\n",
      "type": "registry:style"
    }
  ]
}