<style>
  /* ======= CREATORS BOX ======= */

.creators-box {
  position: relative;
  border-radius: 22px;
  padding: 28px 24px 32px;
  max-width: 980px;
  margin: 0 auto;
  max-height: 480px;
  overflow: auto;

  background: #fbf7f2; /* parchment */
  border: 2px solid #8b7355; /* antique brown */
  outline: 1px solid rgba(120, 95, 70, 0.35);
  outline-offset: -10px;

  box-shadow:
    0 18px 32px rgba(40, 30, 20, 0.25),
    inset 0 0 0 1px rgba(255,255,255,0.65);

  box-sizing: border-box;
}

/* ======= TITLE ======= */

.creators-title {
  display: block;
  margin: 0 0 22px;
  padding-bottom: 12px;

  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 27px;
  color: #3d2c1e;
  letter-spacing: 0.8px;
  text-align: center;

  border-bottom: 1px solid rgba(120, 95, 70, 0.45);
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

.creators-title::after {
  content: "curated selection";
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 6px;
  color: #7a654d;
  opacity: 0.75;
}

/* ======= GRID (UNCHANGED STRUCTURE) ======= */

.creators-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 14px;
}

/* ======= CREATOR CARD ======= */

.creator {
  position: relative;
  display: block;
  padding: 6px;
  background: #fdfaf6;
  border-radius: 14px;

  border: 1px solid rgba(120, 95, 70, 0.35);

  box-shadow:
    0 4px 10px rgba(40,30,20,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.7);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.creator:hover {
  transform: translateY(-5px);
  box-shadow:
    0 14px 26px rgba(40,30,20,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.8);
}

/* ======= IMAGE ======= */

.creator img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;

  border: 2px solid #e6dccf;
  outline: 1px solid rgba(120, 95, 70, 0.55);

  background: #fff;
  filter: brightness(1.02) contrast(1.03);

  transition: transform 0.6s ease;
}

.creator:hover img {
  transform: scale(1.06);
}

/* ======= TOOLTIP ======= */

.tooltip {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%) translateY(18px);

  background: #2f241a;
  color: #f5efe8;

  padding: 5px 10px;
  border-radius: 8px;

  font-family: "Cormorant Garamond", serif;
  font-size: 11px;
  letter-spacing: 1px;
  white-space: nowrap;

  box-shadow: 0 8px 20px rgba(30,20,10,0.45);

  opacity: 0;
  pointer-events: none;

  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.creator:hover .tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(10px);
}

.tooltip::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 6px;
  background: #2f241a;
  border-radius: 6px 6px 0 0;
}

/* ======= SCROLLBAR ======= */

.creators-box::-webkit-scrollbar {
  width: 9px;
}

.creators-box::-webkit-scrollbar-track {
  background: rgba(120, 95, 70, 0.15);
  border-radius: 10px;
}

.creators-box::-webkit-scrollbar-thumb {
  background: linear-gradient(
    to bottom,
    #9b7c5d,
    #5a4331
  );
  border-radius: 10px;
}

/* ======= HORIZONTAL CARD LIST ======= */

.pp-cc-list-container {
  display: flex;
  overflow-y: hidden;
  overflow-x: auto;
  flex-direction: row;

  padding: 1rem;
  gap: 1rem;

  border: 1px solid rgba(120, 95, 70, 0.35);
  border-radius: 12px;

  background: #fdfaf6;

  box-shadow:
    inset 0 0 0.5px rgba(255,255,255,0.7),
    0 6px 16px rgba(60, 45, 30, 0.18);
}

.pp-cc-list-container::-webkit-scrollbar {
  height: 7px;
}

.pp-cc-list-container::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    #9b7c5d,
    #5a4331
  );
  border-radius: 10px;
}

/* CARD WIDTH UNCHANGED */
.pp-cc-wrapper {
  min-width: 12rem;
}

/* ======= MOBILE ======= */

@media (max-width: 767px) {
  .creators-title {
    font-size: 23px;
  }

  .creators-grid {
    gap: 10px;
  }
}
</style>
<div class="creators-box">

  <span class="creators-title">Featured Creators</span>

  <div class="creators-grid">
<div>
    <!-- Creator Card -->
    <a class="creator link here" href="#">
      <img src="https://i.postimg.cc/xdxDj7Ks/dcd1f906ab64a6aa659a41e3bfb45c06.jpg" alt="Creator Avatar">
      <span class="tooltip">NAME 1</span>
    </a>
</div>
    <div>
    <a class="creator link here" href="#">
      <img src="https://i.postimg.cc/xdxDj7Ks/dcd1f906ab64a6aa659a41e3bfb45c06.jpg" alt="Creator Avatar">
      <span class="tooltip">NAME 2</span>
    </a>
    </div>
    <div>
    <a class="creator link here" href="#">
      <img src="https://i.postimg.cc/xdxDj7Ks/dcd1f906ab64a6aa659a41e3bfb45c06.jpg" alt="Creator Avatar">
      <span class="tooltip">NAME 3</span>
    </a>
    </div>
    <div>
    <a class="creator link here" href="#">
      <img src="https://i.postimg.cc/xdxDj7Ks/dcd1f906ab64a6aa659a41e3bfb45c06.jpg" alt="Creator Avatar">
      <span class="tooltip">NAME 4</span>
    </a>
    </div>
    <div>
    <a class="creator link here" href="#">
      <img src="https://i.postimg.cc/xdxDj7Ks/dcd1f906ab64a6aa659a41e3bfb45c06.jpg" alt="Creator Avatar">
      <span class="tooltip">NAME 5</span>
    </a>
</div>
    <div>
    <a class="creator link here" href="#">
      <img src="https://i.postimg.cc/xdxDj7Ks/dcd1f906ab64a6aa659a41e3bfb45c06.jpg" alt="Creator Avatar">
      <span class="tooltip">NAME 6</span>
    </a>
    </div>
    <div>
    <a class="creator link here" href="#">
      <img src="https://i.postimg.cc/xdxDj7Ks/dcd1f906ab64a6aa659a41e3bfb45c06.jpg" alt="Creator Avatar">
      <span class="tooltip">NAME 7</span>
    </a>
    </div>
    <div>
    <a class="creator link here" href="#">
      <img src="https://i.postimg.cc/xdxDj7Ks/dcd1f906ab64a6aa659a41e3bfb45c06.jpg" alt="Creator Avatar">
      <span class="tooltip">NAME 8</span>
    </a>
    </div>
<div>
    <a class="creator link here" href="#">
      <img src="https://i.postimg.cc/xdxDj7Ks/dcd1f906ab64a6aa659a41e3bfb45c06.jpg" alt="Creator Avatar">
      <span class="tooltip">NAME 9</span>
    </a>
</div>
    <div>
    <a class="creator link here" href="#">
      <img src="https://i.postimg.cc/xdxDj7Ks/dcd1f906ab64a6aa659a41e3bfb45c06.jpg" alt="Creator Avatar">
      <span class="tooltip">NAME 10</span>
    </a>
    </div>
    <div>
    <a class="creator link here" href="#">
      <img src="https://i.postimg.cc/xdxDj7Ks/dcd1f906ab64a6aa659a41e3bfb45c06.jpg" alt="Creator Avatar">
      <span class="tooltip">NAME 11</span>
    </a>
    </div>
    <div>
    <a class="creator link here" href="#">
      <img src="https://i.postimg.cc/xdxDj7Ks/dcd1f906ab64a6aa659a41e3bfb45c06.jpg" alt="Creator Avatar">
      <span class="tooltip">NAME 12</span>
    </a>
    </div>
    <!-- add more .creator blocks as needed -->

  </div>
</div>

<style>
.pp-top-bar-app-menu img {
  border-radius: 50%;
  border: 2px solid darkblue purple;
  padding: 2px;
  background: black;
  box-shadow: 0 0 10px rgba(255, 79, 163, 0.6);
  aspect-ratio: 0;
}
.pp-top-bar-app-menu-list {
  background: linear-gradient(180deg, #0b0b0b, #050505);
  border-radius: 18px;
  border: 1px solid rgba(255, 79, 163, 0.4);
  box-shadow:
    0 0 18px rgba(255, 79, 163, 0.25),
    inset 0 0 1px rgba(255, 79, 163, 0.05);
  padding: 35px;
}
.pp-top-bar-app-menu-list hr {
  border: none;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    purple (255, 79, 163, 0.6),
    transparent
  );
  margin: 1px 0;
}
.pp-top-bar-app-menu-list-item {
  font-family: 'Montserrat Alternates', 'Montserrat', sans-serif;
  color: #ffd6ea;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  padding: 7px 14px;
  border-radius: 12px;
  transition: all 300ms ease;
}
.pp-top-bar-app-menu-list-item:hover {
  background: rgba(255, 79, 163, 0.15);
  color: mediumpurple;
  box-shadow: inset 0 0 10px rgba(255, 79, 163, 0.3);
  transform: translateX(3px);
}
</style>

<style>
  .status-box {
  grid-column: 2;
  grid-row: 2;
  align-self: center;

  background: #f3e6cf;
  border: 2px solid #2a1f14;
  border-radius: 14px;

  padding: 12px 16px;
  max-width: 100%;

  font-size: 13px;
  letter-spacing: 0.4px;
  color: #2a1f14;

  display: flex;
  flex-direction: column;
  gap: 6px;

  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}


.status-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
}


.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  position: relative;
}


.status-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: pulse 1.6s infinite;
  opacity: 0.6;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}


.status-message {
  font-size: 13px;
  opacity: 0.85;
}


.status-music {
  font-size: 12px;
  opacity: 0.7;
  font-style: italic;
}



.status-box.online .status-dot,
.status-box.online .status-dot::after {
  background: #4caf50;
}

.status-box.busy .status-dot,
.status-box.busy .status-dot::after {
  background: #e6a23c;
}

.status-box.hiatus .status-dot,
.status-box.hiatus .status-dot::after {
  background: #b39ddb;
}

.status-box.offline .status-dot,
.status-box.offline .status-dot::after {
  background: #9e9e9e;
}
</style>
<div class="status-box online">
  <div class="status-header">
    <span class="status-dot"></span>
    <span class="status-text">ONLINE</span>
  </div>

  <div class="status-message">
    Add your status here! ♡
  </div>

  <div class="status-music">
    🎧 Now playing: Song name by Song artist
  </div>
</div>

<style>


[class*="Popover_"]{
  background: #0e0b0d;
  border: none;
  padding: 0;
  font-family: "Cardo", serif;
  box-shadow: none;
}


[class*="popoverHeader_"]{
  background: transparent;
  padding: 1.2rem 1.6rem 0.6rem;
  border-bottom: 1px dashed rgba(255, 182, 213, 0.25);
}


[class*="popoverTitle_"]{
  color: #ffb6d5;
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: .15em;
  text-transform: lowercase;
}


[class*="popoverHeader_"] button{
  background: transparent;
  color: #7a6a73;
  border-radius: 0;
}
[class*="popoverHeader_"] button:hover{
  color: #ffb6d5;
}


[class*="_notificationItem_"]{
  background: transparent;
  border: none;
  padding: 1.2rem 1.6rem;
  position: relative;
}


[class*="_notificationItem_"]::before{
  content: "";
  position: absolute;
  left: .9rem;
  top: 1.2rem;
  bottom: 1.2rem;
  width: 1px;
  background: rgba(255,182,213,0.15);
}


[class*="_notificationItem_"]:hover{
  transform: translateX(6px);
}


[class*="Indicator_"]{
  background: #ffb6d5;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}


[class*="_notificationTitle_"],
[class*="_subject_"]{
  color: #f3e8ee;
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: .04em;
}


[class*="_notificationMessage_"],
[class*="_body_"]{
  color: #c3aeb9;
  font-size: .8rem;
  line-height: 1.6;
  font-style: italic;
}


[class*="_notificationTime_"],
[class*="_timestamp_"]{
  color: #ffb6d5;
  font-size: .65rem;
  letter-spacing: .25em;
  text-transform: lowercase;
  opacity: .7;
}


[class*="_archiveButton"]{
  background: transparent;
  color: #9b8a93;
  border-radius: 0;
}
[class*="_archiveButton"]:hover{
  color: #ffb6d5;
}


[class*="_loadMoreButton_"]{
  border: none;
  background: transparent;
  color: #ffb6d5;
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: lowercase;
}
[class*="_loadMoreButton_"]:hover{
  text-decoration: underline;
}
</style>

<style>
/* ===== BOTANICAL THEME ===== */

.floral-dropdowns {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
  font-family: "Playfair Display", "Cormorant Garamond", serif;
}

/* CARD */
.floral-card {
  position: relative;
  background: linear-gradient(180deg, #fbf9f6, #f2efe9);
  border: 1.6px solid #b6c1a6;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(120, 140, 110, 0.25);
}

/* subtle vine overlay */
.floral-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("https://www.transparenttextures.com/patterns/leaf.png");
  opacity: 0.08;
  pointer-events: none;
}

/* SUMMARY */
.floral-card summary {
  cursor: pointer;
  list-style: none;
  padding: 26px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #3d4a33;
  font-size: 18px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  position: relative;
}

/* remove default arrow */
.floral-card summary::-webkit-details-marker {
  display: none;
}

/* decorative divider */
.floral-card summary::after {
  content: "❦ ❦ ❦";
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  color: #9aac88;
  letter-spacing: 6px;
  opacity: 0.7;
}

/* ICON */
.floral-arrow {
  font-size: 20px;
  color: #7a8a63;
  transition: transform 0.7s ease;
}

.floral-card[open] .floral-arrow {
  transform: rotate(180deg);
}

/* CONTENT */
.floral-content {
  max-height: 190px;
  overflow-y: auto;
  padding: 18px 28px 28px;
  color: #4a553f;
  font-size: 15px;
  line-height: 1.75;
}

/* scrollbar */
.floral-content::-webkit-scrollbar {
  width: 6px;
}

.floral-content::-webkit-scrollbar-thumb {
  background: #a7b496;
  border-radius: 10px;
}

.floral-content::-webkit-scrollbar-track {
  background: transparent;
}

/* hover glow */
.floral-card:hover {
  box-shadow: 0 25px 65px rgba(120, 150, 110, 0.35);
  transform: translateY(-2px);
  transition: all 0.4s ease;
}
</style>


<div class="floral-dropdowns">

  <details class="floral-card">
    <summary>
      <span>About the creator</span>
      <span class="floral-arrow">❧</span>
    </summary>
    <div class="floral-content">
      <p>
        Your text goes here beautiful...
      </p>
    </div>
  </details>

  <details class="floral-card">
    <summary>
      <span>About the page</span>
      <span class="floral-arrow">✦</span>
    </summary>
    <div class="floral-content">
      <p>
        Your text goes here beautiful...
      </p>
    </div>
  </details>

  <details class="floral-card">
    <summary>
      <span>House rules</span>
      <span class="floral-arrow">✵</span>
    </summary>
    <div class="floral-content">
      <p>
         Your text goes here beautiful...
      </p>
    </div>
  </details>

  <details class="floral-card">
    <summary>
      <span>Where to find me</span>
      <span class="floral-arrow">✿</span>
    </summary>
    <div class="floral-content">
      <p>
        Your text goes here beautiful...
      </p>
    </div>
  </details>

</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Playfair+Display:ital,wght@0,500;1,500&family=UnifrakturCook:wght@700&display=swap');

.horror-dropdowns {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  font-family: "Playfair Display", serif;
}

/* CARD BASE */
.horror-card {
  position: relative;
  background: linear-gradient(180deg, #0b0b0e, #140a10);
  border: 1.5px solid #3a0f1b;
  border-radius: 14px 0 14px 0; /* sharp gothic corners */
  overflow: hidden;
  box-shadow: 0 0 25px rgba(120, 0, 40, 0.35);
}

/* BLOOD DRIP EFFECT */
.horror-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 6px;
  width: 100%;
  background: linear-gradient(90deg, #5a0b1f, #8b102d, #5a0b1f);
  opacity: 0.7;
}

/* SUMMARY */
.horror-card summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #e6d5dc;
  font-size: 18px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  font-family: "UnifrakturCook", cursive;
}

.horror-card summary::-webkit-details-marker {
  display: none;
}

/* ICON / ARROW */
.horror-icon {
  font-size: 20px;
  transition: transform 0.6s ease, color 0.6s ease;
  color: #a4163a;
}

.horror-card[open] .horror-icon {
  transform: rotate(180deg) scale(1.1);
  color: #ff2f6d;
}

/* CONTENT */
.horror-content {
  max-height: 180px;
  overflow-y: auto;
  padding: 0 22px 22px;
  color: #cfc0c8;
  font-size: 14.5px;
  line-height: 1.7;
  font-family: "Playfair Display", serif;
}

/* SCROLLBAR */
.horror-content::-webkit-scrollbar {
  width: 7px;
}

.horror-content::-webkit-scrollbar-thumb {
  background: linear-gradient(#7a1330, #a4163a);
  border-radius: 10px;
}

.horror-content::-webkit-scrollbar-track {
  background: transparent;
}

/* HOVER EFFECT */
.horror-card:hover {
  box-shadow: 0 0 35px rgba(180, 20, 70, 0.55);
  transform: translateY(-2px);
  transition: 0.4s ease;
}

/* BLOOD MOON GLOW */
.horror-card:hover summary {
  color: #ffd6e2;
}

/* OPTIONAL DECOR SYMBOL */
.horror-symbol {
  position: absolute;
  bottom: 10px;
  right: 14px;
  font-size: 34px;
  opacity: 0.08;
  pointer-events: none;
}
</style>