@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600&family=Vazirmatn:wght@500;600&display=swap');

:root {
  font-family: 'DM Sans', sans-serif;
  color: #493d36;
  background: #f4f0e8;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  font-weight: 400;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 340px;
  min-height: 100vh;
  background: linear-gradient(180deg, #f4f0e8, #eae3d7);
}

.shelf-display {
  min-height: 100vh;
  width: min(calc(var(--shelf-width) + 320px), 100%);
  margin: auto;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.books-row {
  width: 100%;
  min-height: 270px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0;
  padding: 10px 24px 12px;
  background: linear-gradient(180deg, #e5dfd4, #f1ece3 85%, #e1d8cb);
  overflow-x: auto;
  scrollbar-width: none;
  touch-action: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  user-select: none;
  cursor: grab;
  margin-bottom: -12px;
}

.books-row::-webkit-scrollbar {
  display: none;
}

.books-row.is-dragging {
  cursor: grabbing;
}

.books-row:focus-visible {
  outline: 2px solid #a97847;
  outline-offset: 3px;
}

.book-cycle {
  display: flex;
  align-items: flex-end;
  align-self: stretch;
  flex: none;
  width: max-content;
  gap: 0;
}

.book {
  --binding-shadow: inset -.35rem 0 .5rem rgba(0, 0, 0, .38), inset .35rem 0 .5rem rgba(0, 0, 0, .34), inset 0 1px 0 #fff5;
  --book: #779077;
  --accent: #f3deb0;
  --height: 180px;
  --shadow-offset: 8px;
  --shadow-blur: 16px;
  --hover-shadow-blur: 40px;
  --hover-shadow-spread: -6px;
  --lean: 0deg;
  position: relative;
  flex: 0 0 clamp(37px, 5vw, 61px);
  max-width: 72px;
  height: var(--height);
  padding: 10px 5px 9px;
  border: 0;
  border-radius: 2px 2px 0 0;
  background: var(--book);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  border-top: 1px solid;
  border-image: linear-gradient(90deg, #45392f 0%, #d9c9ae 24%, #f5e8cf 55%, #bbac94 78%, #45392f 100%) 1;
  box-shadow: 0 var(--shadow-offset) var(--shadow-blur) rgba(0, 0, 0, .32), var(--binding-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
  transform-origin: 50% 100%;
  transform: rotate(var(--lean));
}

.book {
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.book:focus-visible {
  outline: 2px solid #f3e5c9;
  outline-offset: -4px;
}

body:has(.book-dialog[open]) {
  overflow: hidden;
}

.book-dialog {
  width: min(440px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 44px 28px 28px;
  border: 1px solid #d7c8af;
  border-radius: 12px;
  background: #f4f0e8;
  color: #493d36;
  box-shadow: 0 24px 80px #241b1655;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.book-dialog::backdrop {
  background: #30271e88;
  backdrop-filter: blur(5px);
}

.preview-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #60472f;
  font: 28px/1 'DM Sans', sans-serif;
  cursor: pointer;
}

.preview-close:hover {
  background: #e5dfd4;
}

.preview-close:focus-visible, .preview-links a:focus-visible {
  outline: 2px solid #a97847;
  outline-offset: 3px;
}

.preview-stage {
  position: relative;
  padding: 16px 14px 32px;
  perspective: 1200px;
}

.preview-stage::after {
  content: '';
  position: absolute;
  bottom: 9px;
  left: 12%;
  width: 80%;
  height: 30px;
  border-radius: 50%;
  background: #30271e66;
  filter: blur(14px);
  transform: skewX(-18deg);
  pointer-events: none;
}

.preview-volume {
  --depth: 56px;
  position: relative;
  width: min(260px, 100%);
  margin: 0 auto;
  transform-style: preserve-3d;
  transform: rotateX(7deg) rotateY(-24deg);
}

.preview-back {
  position: absolute;
  inset: 0;
  border-radius: 3px 6px 6px 3px;
  background: var(--book);
  box-shadow: 22px 26px 36px #30271e45;
  transform: translateZ(-2px);
}

.preview-pages-side, .preview-pages-top, .preview-pages-bottom {
  position: absolute;
  background: repeating-linear-gradient(90deg, #d8cbb1 0 1px, #faf3e3 1px 2px);
  backface-visibility: hidden;
}

.preview-pages-front {
  position: absolute;
  inset: 5px 2px 5px 6px;
  border-radius: 2px 5px 5px 2px;
  background: linear-gradient(90deg, #d5c7ab, #f8f1df 12%, #efe5cf);
  box-shadow: inset -1px 0 #b6a787;
  transform: translateZ(calc(var(--depth) - 1px));
}

.preview-pages-side {
  top: 5px;
  bottom: 5px;
  right: 1px;
  width: var(--depth);
  transform-origin: right center;
  transform: rotateY(90deg);
  box-shadow: inset -8px 0 12px #806f4c44;
}

.preview-pages-top, .preview-pages-bottom {
  left: 6px;
  right: 2px;
  height: var(--depth);
  background: repeating-linear-gradient(0deg, #d8cbb1 0 1px, #faf3e3 1px 2px);
}

.preview-pages-top {
  top: 3px;
  transform-origin: center top;
  transform: rotateX(90deg);
}

.preview-pages-bottom {
  bottom: 3px;
  transform-origin: center bottom;
  transform: rotateX(-90deg);
  box-shadow: inset 0 4px 5px #806f4c33;
}

.preview-cover {
  position: relative;
  width: 100%;
  min-height: 340px;
  margin: 0;
  padding: 36px 30px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  border-radius: 3px 8px 8px 3px;
  background: var(--book);
  color: var(--accent);
  text-align: center;
  box-shadow: inset 5px 0 7px #0005, inset 12px 0 0 #ffffff10, inset 14px 0 2px #0002, inset -2px 0 2px #fff4, 3px 0 6px #30271e22;
  transform-origin: left center;
  transform: translateZ(var(--depth));
  transition: transform .6s cubic-bezier(.2,.7,.25,1), box-shadow .6s ease;
  backface-visibility: hidden;
}

.preview-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, #0002, transparent 14% 45%, #ffffff18 80%, #ffffff08);
  pointer-events: none;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .preview-stage:hover .preview-cover {
    transform: translateZ(var(--depth)) rotateY(-24deg);
    box-shadow: inset 5px 0 7px #0005, inset 12px 0 0 #ffffff10, inset -2px 0 2px #fff4, 12px 5px 18px #30271e33;
  }
}

@media (prefers-reduced-motion: reduce) {
  .preview-cover {
    transition: none;
  }
}

.preview-cover::before {
  content: '';
  position: absolute;
  inset: 18px 18px 18px 23px;
  border: 1px solid color-mix(in srgb, var(--accent), transparent 40%);
  pointer-events: none;
}

.preview-border-double::before {
  border-width: 3px;
  border-style: double;
}

.preview-border-rounded::before {
  border-radius: 14px;
}

.preview-cover h2 {
  margin: 0;
  font: 600 clamp(20px, 5vw, 27px)/1.35 'Playfair Display', serif;
  overflow-wrap: anywhere;
}

.preview-cover p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

.preview-cover[lang='fa'] h2, .preview-cover p[dir='auto'] {
  font-family: 'Vazirmatn', 'DM Sans', sans-serif;
}

.preview-rule {
  position: relative;
  width: 72px;
  height: 10px;
  flex-shrink: 0;
  opacity: .75;
}

.preview-rule-double {
  background: linear-gradient(var(--accent), var(--accent)) center 3px / 100% 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center 7px / 70% 1px no-repeat;
}

.preview-rule-dotted {
  background: radial-gradient(circle, var(--accent) 1px, transparent 1.5px) center / 8px 10px repeat-x;
}

.preview-details {
  margin-top: 12px;
}

.preview-tags, .preview-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.preview-tag {
  padding: 5px 10px;
  border: 1px solid #d7c8af;
  border-radius: 20px;
  background: #ede5d6;
  font-size: 12px;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.preview-links {
  margin-top: 20px;
  gap: 12px 20px;
}

.preview-links a {
  color: #60472f;
  font-size: 13px;
  text-underline-offset: 4px;
}

.book:before {
  content: "";
  position: absolute;
  inset: 5px 4px;
  border-left: 1px solid #ffffff28;
  border-right: 1px solid #0000000c;
  pointer-events: none;
}

.book-cap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #ffffff19;
  z-index: 3;
}

.book-title, .book-author {
  min-height: 0;
  width: fit-content;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
  color: var(--accent);
  white-space: normal;
  overflow-wrap: anywhere;
  overflow: hidden;
}

.book-title {
  position: relative;
  max-width: min(100%, 2.2em);
  font: 600 clamp(9px, 1vw, 12px)/.95 'Playfair Display', serif;
  max-height: calc(var(--height) - 40px);
  margin: 4px 0;
}

.farsi-book .book-title {
  transform: none;
  direction: rtl;
  text-orientation: sideways;
  font: 600 clamp(9px, .9vw, 11px)/.9 'Vazirmatn', Tahoma, sans-serif;
}

.book-title.single-line {
  flex-shrink: 0;
  white-space: nowrap;
  overflow-wrap: normal;
}

.book-rule {
  width: 48%;
  flex: 0 0 1px;
  margin: 5px 0;
  background: color-mix(in srgb, var(--accent), transparent 48%);
}

.book-author {
  max-width: min(100%, 2.1em);
  font-size: 7px;
  line-height: .9;
  max-height: calc(var(--height) - 30px);
  opacity: .82;
}

.farsi-book .book-author.farsi-author {
  transform: none;
  direction: rtl;
  text-orientation: sideways;
  font: 500 7px/.9 'Vazirmatn', Tahoma, sans-serif;
}

.book-title.compact {
  font-size: 9px;
  line-height: .9;
}

.farsi-book .book-title.compact {
  font-size: 8px;
  line-height: .88;
}

.book-author.compact {
  font-size: 6px;
}

.farsi-book .book-author.farsi-author.compact {
  font-size: 6px;
  line-height: .88;
}

.book-mark {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 10px;
  line-height: 1;
  color: var(--accent);
}

.book:nth-child(4n+1) {
  flex-basis: clamp(34px, 4.2vw, 51px);
}

.book:nth-child(5n+2) {
  flex-basis: clamp(43px, 6vw, 72px);
}

.book:nth-child(7n+3) {
  height: calc(var(--height) - 12px);
}

.book:nth-child(9n+4) {
  height: calc(var(--height) + 8px);
}

.wood-shelf {
  width: 100%;
  height: 19px;
  background: #a97847;
  box-shadow: inset 0 3px #bd8b57, 0 4px 0 #cfbea6;
  border-radius: 1px;
  z-index: 1;
  position: relative;
}

.shelf-hanger {
  position: absolute;
  top: 100%;
  width: 16px;
  height: 22px;
  border-radius: 0 0 2px 2px;
  background: inherit;
  pointer-events: none;
}

.shelf-hanger-left {
  left: 8%;
}

.shelf-hanger-right {
  right: 8%;
}

.wood-line {
  position: absolute;
  top: 5px;
  left: 4%;
  width: 31%;
  height: 1px;
  background: #e1b47b55;
}

.shelf-tag {
  position: absolute;
  top: 50%;
  left: 24px;
  transform: translateY(-50%);
  padding: 4px 16px;
  border: 1px solid #b99863;
  border-radius: 3px;
  background: #f3e5c9;
  color: #60472f;
  box-shadow: 0 2px 3px #493d3633, inset 0 1px #fff8;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .04em;
  white-space: nowrap;
}

.wood-line.second {
  left: 54%;
  width: 20%;
  top: 12px;
}

@media (max-width: 700px) {
  .shelf-display {
    padding: 20px 12px;
  }

  .books-row {
    min-height: 250px;
    padding: 8px 10px 12px;
  }

  .book {
    flex-basis: clamp(34px, 8vw, 52px);
  }

  .book:nth-child(4n+1) {
    flex-basis: clamp(31px, 7vw, 44px);
  }

  .book:nth-child(5n+2) {
    flex-basis: clamp(38px, 9vw, 58px);
  }
}

.book.wide-title {
  flex-basis: clamp(46px, 6vw, 72px);
  min-height: var(--height);
}

.book.wide-title .book-title {
  max-width: 100%;
}

.wood-shelf + .books-row {
  margin-top: 32px;
  box-shadow: 0 -32px 0 #e5dfd4;
}

@media (hover: hover) {
  .book:hover {
    z-index: 2;
    box-shadow: 0 var(--shadow-offset) var(--hover-shadow-blur) var(--hover-shadow-spread) rgba(0, 0, 0, .48), var(--binding-shadow);
    transform: translateY(-8px) rotate(var(--lean));
  }
}

/* Book ornaments */

.book-ornament {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: .78;
}

.book-title, .book-rule, .book-author, .book-mark {
  z-index: 2;
}

.vintage-bands, .vintage-frame, .vintage-crest {
  padding-top: 34px;
  padding-bottom: 34px;
}

.vintage-bands .book-author, .vintage-frame .book-author, .vintage-crest .book-author {
  margin-bottom: 6px;
}

.vintage-bands .book-mark, .vintage-frame .book-mark, .vintage-crest .book-mark {
  display: none;
}

.vintage-bands .book-ornament {
  background: linear-gradient(to bottom, transparent 0 10px, var(--accent) 10px 12px, transparent 12px 17px, var(--accent) 17px 19px, transparent 19px calc(100% - 19px), var(--accent) calc(100% - 19px) calc(100% - 17px), transparent calc(100% - 17px) calc(100% - 12px), var(--accent) calc(100% - 12px) calc(100% - 10px), transparent calc(100% - 10px));
}

.vintage-bands .book-ornament:before {
  content: "";
  position: absolute;
  inset: 23% 6px 23%;
  border-left: 1px solid color-mix(in srgb, var(--accent), transparent 45%);
  border-right: 1px solid color-mix(in srgb, var(--accent), transparent 45%);
}

.vintage-frame .book-ornament {
  inset: 8px 5px 9px;
  border: 1px solid color-mix(in srgb, var(--accent), transparent 26%);
  box-shadow: inset 0 0 0 3px #00000014, 0 0 0 1px #00000018;
}

.vintage-frame .book-ornament:before, .vintage-frame .book-ornament:after {
  content: "✧";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font: 14px Georgia, serif;
  color: var(--accent);
  text-shadow: 0 1px 1px #0006;
}

.vintage-frame .book-ornament:before {
  top: 4px;
}

.vintage-frame .book-ornament:after {
  bottom: 4px;
}

.vintage-crest .book-ornament {
  background: linear-gradient(to bottom, transparent 0 9px, var(--accent) 9px 11px, transparent 11px 16px, var(--accent) 16px 18px, transparent 18px calc(100% - 18px), var(--accent) calc(100% - 18px) calc(100% - 16px), transparent calc(100% - 16px) calc(100% - 11px), var(--accent) calc(100% - 11px) calc(100% - 9px), transparent calc(100% - 9px));
}

.vintage-crest .book-ornament:before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 24px;
  width: 6px;
  height: 6px;
  border: 1px solid var(--accent);
  background: radial-gradient(circle at center, var(--accent) 0 1px, transparent 1px);
  transform: translateX(-50%) rotate(45deg);
}

.book.lean-right {
  margin-right: var(--lean-gap);
  z-index: 1;
}

.book.lean-left {
  margin-left: var(--lean-gap);
  z-index: 1;
}

.book.plant-neighbor {
  --lean: 4deg;
  height: calc(var(--height) - 18px);
  margin-right: -11px;
  z-index: 1;
}

.book.three-word-title {
  height: auto;
  min-height: var(--height);
}

.book.three-word-title .book-title, .book.three-word-title .book-author {
  flex-shrink: 0;
  max-height: none;
}

/* Butterfly jar */

.shelf-jar {
  position: relative;
  flex: 0 0 96px;
  height: 142px;
  margin-inline: 8px;
  align-self: flex-end;
  cursor: pointer;
  filter: drop-shadow(3px 5px 3px #47372744);
}

.shelf-jar:focus-visible {
  outline: 2px solid #a97847;
  outline-offset: 4px;
}

.jar-lid, .plant-rim {
  background: linear-gradient(90deg, #79543c, #a97852 45%, #79533b);
  box-shadow: inset 0 2px #c6996d99, 0 2px 2px #54382f44;
}

.jar-lid {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 14px;
  width: 68px;
  height: 15px;
  border-radius: 4px 4px 3px 3px;
}

.jar-neck {
  position: absolute;
  z-index: 2;
  top: 11px;
  left: 20px;
  width: 56px;
  height: 15px;
  border: 2px solid #c7b8a4;
  border-radius: 3px;
  background: #ddd2bd88;
}

.jar-glass {
  position: absolute;
  bottom: 0;
  left: 6px;
  width: 84px;
  height: 121px;
  overflow: hidden;
  border: 2px solid #ffffffa8;
  border-left-color: #c9d4cc;
  border-right-color: #9ca9a0;
  border-bottom-color: #849a91;
  border-radius: 12px 12px 19px 19px;
  background: linear-gradient(90deg, #d4e2db77 0 12%, #f8f7eb55 28% 65%, #adc2b78c 100%);
  box-shadow: inset 5px 0 7px #ffffff99, inset -7px 0 10px #5d796a44, inset 0 -6px 5px #79928166, 0 2px 2px #57473533;
}

.jar-butterfly-scene {
  position: absolute;
  top: 59px;
  left: 5px;
  width: 260px;
  height: 120px;
  perspective: 800px;
  perspective-origin: 50% 50%;
  transform: scale(.21);
  transform-origin: top left;
  animation: jar-butterfly-wander 8s ease-in-out infinite;
}

.jar-butterfly-scene .butterfly {
  animation: jar-butterfly-hover 250ms cubic-bezier(.48, .01, .54, 1) infinite alternate;
  position: relative;
  margin-left: 130px;
  transform-style: preserve-3d;
  transform: rotateX(50deg) rotateY(20deg) rotateZ(-50deg) translateY(0);
  width: 30px;
}

.jar-butterfly-scene .butterfly:before {
  background: hsl(43.2deg 47.77% 14.22%);
  border-radius: 50%;
  content: "";
  display: block;
  height: 110px;
  left: 50%;
  margin-left: -10px;
  outline: 1px solid transparent;
  position: absolute;
  top: -15px;
  transform: rotateY(100deg);
  width: 20px;
  z-index: 2;
}

.jar-butterfly-scene .wing {
  background: #888;
  display: block;
  opacity: .7;
  outline: 1px solid transparent;
  position: absolute;
  top: 0;
}

.jar-butterfly-scene .wing:first-child {
  animation: jar-leftflap 250ms cubic-bezier(.48, .01, .54, 1) infinite alternate;
  height: 1px;
  left: 0;
  transform: rotateY(-20deg);
  transform-origin: 700% 50%;
  width: 1px;
  z-index: 3;
}

.jar-butterfly-scene .wing:last-child {
  animation: jar-rightflap 250ms cubic-bezier(.48, .01, .54, 1) infinite alternate;
  right: 0;
  transform: rotateY(200deg);
  z-index: 1;
}

.jar-butterfly-scene .bit {
  background: linear-gradient(110deg, #102d53 8%, #1688ee 46%, #05080f 90%);
  box-shadow: 6px 8px 8px #03060caa, inset -8px -6px 10px #02050bcc, inset 0 0 0 4px #03060c;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  transform-origin: 100% 50%;
}

.jar-butterfly-scene .bit:first-child {
  height: 70px;
  top: 15px;
  transform: rotateZ(40deg);
  width: 130px;
}

.jar-butterfly-scene .bit:last-child {
  height: 55px;
  transform: rotateZ(-40deg);
  width: 100px;
}

@keyframes jar-butterfly-hover {
  from {
    transform: rotateX(50deg) rotateY(20deg) rotateZ(-50deg) translateZ(0);
  }

  to {
    transform: rotateX(50deg) rotateY(20deg) rotateZ(-50deg) translateZ(-3px);
  }
}

@keyframes jar-butterfly-wander {
  0%, 100% {
    transform: translate(-12px, 8px) scale(.21);
  }

  25% {
    transform: translate(12px, -20px) scale(.21);
  }

  50% {
    transform: translate(14px, 10px) scale(.21);
  }

  75% {
    transform: translate(-13px, -17px) scale(.21);
  }
}

@keyframes jar-leftflap {
  from {
    transform: rotateY(-20deg);
  }

  to {
    transform: rotateY(90deg);
  }
}

@keyframes jar-rightflap {
  from {
    transform: rotateY(200deg);
  }

  to {
    transform: rotateY(90deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .jar-butterfly-scene, .jar-butterfly-scene .butterfly, .jar-butterfly-scene .wing {
    animation: none;
  }
}

.jar-shine {
  position: absolute;
  z-index: 3;
  top: 8px;
  left: 7px;
  width: 8px;
  height: 87px;
  border-radius: 50%;
  background: #fff9;
  filter: blur(2px);
}

/* Cactus */

.shelf-plant {
  position: relative;
  flex: 0 0 100px;
  height: 185px;
  margin-inline: 6px;
  align-self: flex-end;
  transform: translateY(8px) scale(1.12);
  transform-origin: 50% 100%;
  cursor: pointer;
}

.shelf-plant:focus-visible {
  outline: 2px solid #a97847;
  outline-offset: 4px;
}

.plant-cactus {
  position: absolute;
  z-index: 2;
  inset: 0 0 65px;
  filter: drop-shadow(2px 3px 2px #35412e33);
}

.cactus-body {
  position: absolute;
  z-index: 2;
  left: 25px;
  bottom: 0;
  width: 50px;
  height: 55px;
  border-radius: 22px 22px 4px 4px;
  background: repeating-linear-gradient(90deg, transparent 0 8px, #b2c89755 9px, transparent 11px), linear-gradient(90deg, #3e6c50, #65966a 46%, #47795b);
  box-shadow: inset -5px 0 7px #27533b55, inset 4px 0 5px #d4e1ac33;
}

.cactus-body:after {
  content: "";
  position: absolute;
  inset: 10px 4px;
  background: radial-gradient(#d1d7a0 1px, transparent 1.5px) 0 0/12px 16px;
  opacity: .8;
}

.plant-pot {
  position: absolute;
  left: calc(50% - 40px);
  bottom: 0;
  width: 80px;
  height: 75px;
}

.plant-soil {
  position: absolute;
  z-index: 1;
  left: 5px;
  top: 4px;
  width: 70px;
  height: 13px;
  border-radius: 50%;
  background: #57483a;
}

.plant-rim {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 8px;
  width: 80px;
  height: 15px;
  border-radius: 2px 2px 5px 5px;
}

.plant-pot-body {
  position: absolute;
  z-index: 1;
  left: 5px;
  top: 20px;
  width: 70px;
  height: 54px;
  clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%);
  background: linear-gradient(90deg, #78533d, #a37350 43%, #79523c 100%);
  box-shadow: inset 0 -7px #54392766;
  filter: drop-shadow(3px 4px 3px #47372755);
}