<div class="status-box"><b>STATUS:</b> Text text text text text text</div>
<div class="pfp-flowers"><img src="https://i.imgur.com/4J4K8i0.png" alt=""></div>
<div class="pfp-flowers-bottom"><img src="https://i.imgur.com/4J4K8i0.png" alt=""></div>

<div class="about-section">
  <details class="profile-tab tab-1" name="profile-tabs">
    <summary>About me</summary>
  </details>
  <details class="profile-tab tab-2" name="profile-tabs">
    <summary>Rules &amp; Boundaries</summary>
    <div class="about-box">
      <h2>Rules &amp; Boundaries</h2>
      <p class="about-subtitle">What I do and do not tolerate on my page.</p>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      <li>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
      <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</li>
      <li>Duis aute irure dolor in reprehenderit in voluptate velit esse.</li>
    </div>
  </details>
 <details class="profile-tab tab-3" name="profile-tabs">
  <summary>Recommended Creators</summary>
  <div class="about-box">
    <h2>Recommended Creators</h2>
    <p class="about-subtitle">Go give them some love!</p>
    <ul class="creator-list">
      <li><a href="link%20here">Creator One</a></li>
      <li><a href="link%20here">Creator Two</a></li>
      <li><a href="link%20here">Creator Three</a></li>
      <li><a href="link%20here">Creator Four</a></li>
      <li><a href="link%20here">Creator Five</a></li>
      <li><a href="link%20here">Creator Six</a></li>
    </ul>
  </div>
</details>
<details class="profile-tab tab-4" name="profile-tabs">
  <summary>My content</summary>
  <div class="about-box">
    <h2>My content</h2>
    <p class="about-subtitle">What you'll find on my page!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nec tellus sed augue semper porta mauris massa.</p>
    <ul>
      <li>You can also list here</li>
    </ul>
    <h3>My tags</h3>
    <div class="tag-list">
      <a href="link%20here" class="content-tag">tag1</a>
      <a href="link%20here" class="content-tag">tag2</a>
      <a href="link%20here" class="content-tag">tag3</a>
      <a href="link%20here" class="content-tag">tag4</a>
      <a href="link%20here" class="content-tag">tag5</a>
    </div>
  </div>
</details>
  <div class="about-box">
<h2>About me</h2>
<p class="about-subtitle">Little introduction about me and what I like!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris.</p>
  </div>
  <img src="https://i.imgur.com/yByxTYS.png" alt="" class="corner-image top-left">
  <img src="https://i.imgur.com/yByxTYS.png" alt="" class="corner-image top-right">
</div>

<p class="radi-credit">Profile CSS by <a href="https://janitorai.com/profiles/b6b9e08d-4999-4281-a5b0-281deaf64954_profile-of-miss-radiance">@MissRadiance</a></p>



<style>


  .pp-top-bar { 
    background-color: black;
    border-bottom: 2px solid white;
  }
._compact_udhx2_1 img {
  filter: grayscale(100%)
}

/*Your user menu pfp */
.css-fsfp0u img {
  border: 2px solid grey;
  filter: grayscale(1);
}
.pp-top-bar-app-menu-list { /* The container for all the menu buttons  */
  background: white;
  border: 2px solid black;
  outline-offset: 1px;
  outline: 1px solid white;
  border-radius: 16px;
  box-shadow: none !important;
}

.pp-top-bar-app-menu-list-item { /* Styling for all of the buttons */
  color: white;
  font-family: Cardo;
  border-radius: 12px;
  background-color: black;
}
.pp-top-bar-app-menu-list-item:hover { /* options on hover (color: being the text) (background being the background of the options) */
  background: white;
  color: black;
}

.glow-on-hover, .glow-on-hover::before, .glow-on-hover::after { 
  background: transparent;
}
.pp-top-bar-create-char { 
  font-size: 0;
}
.pp-top-bar-create-char::after { /* The create a character button */
  font-size: 1.25rem;
  font-family: cardo, serif;
  content: "✿ Gardener's Dominion ✿ ";
  font-weight: 500;
  opacity: 1;
  position: relative;
  left: -5px;
  color: white;
  transition: 500ms;
}

/* Top bar, credits to procrastination */
.pp-top-bar-create-char:hover::after {
  color: grey;
}

.pp-top-bar-search {
  background: white;
  border: 1px solid grey;
  border-radius: 1px;
  position: relative;
  overflow: hidden;
}
.pp-top-bar-search::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 107, 107, 0.15),
    transparent
  );
  pointer-events: none;
  transition: none;
}

.pp-top-bar-search:hover::before {
  left: 150%;
  transition: left 800ms ease;
}

.pp-top-bar-search:hover {
  box-shadow: none;
}

.profile-top-bar-search-box div:has(svg) { 
  color: black;
  opacity: 1;
}
#search-input::placeholder { 
  opacity: 0;
}
#search-input { 
  position: absolute;
  width: calc(100% - 2.5rem) !important;
  padding-right: 2.5rem !important;
  font-family: cardo, serif !important;
  font-size: 1rem !important;
  color: darkgrey !important; 
  caret-color: black; 
}
.pp-top-bar-search::after { 
  content: "Searching for something else . . . ?"; 
  position: absolute;
  max-width: calc(100% - (2.5rem * 2));
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  font-family: cinzel, serif;
  font-size: 1rem;
  font-weight: 400;
  color: black;
  transition: opacity 200ms ease-in-out;
}
.pp-top-bar-search:focus-within::after,
.pp-top-bar-search:has(#search-input:not(:placeholder-shown))::after { 
  opacity: 0;
}

  /* The notifications menu, this took years off my life and gave me dementia but it is sexy and beautiful and I added arrows so slay */
/* THE MAIN CONTAINER BOX */
.pp-top-bar-notifications-popover,
.profile-top-bar-notifications-popover,
[class*="notificationsPopover_"] {
  background: #0c0c0c;/* main background colour */
  border: 2px solid white;/* outer border */
  border-radius: 0;/* 0 = sharp corners, raise for rounded */
  box-shadow: unset;/* removes JanitorAI's drop shadow */
}

/* JanitorAI draws a rounded shape on top of the box this squares the overlay too */
.pp-top-bar-notifications-popover::before,
.pp-top-bar-notifications-popover::after,
[class*="notificationsPopover_"]::before,
[class*="notificationsPopover_"]::after {
  border-radius: 0 !important;
}

/* this just keeps it from getting that weird overlay where like the top corners are rounded inside the main container */
.pp-top-bar-notifications-popover .pp-top-bar-notifications-item-avatar img:nth-of-type(2),
[class*="notificationsPopover_"] [class*="userAvatar_"] {
  border-radius: 50% !important;
}

.pp-top-bar-notifications-popover-header,
[class*="popoverHeader_"] {
  padding: 1rem 1.25rem;          /* space around the header contents */
  background: #000000;            /* darker than the box so it reads as a header */
  border-bottom: 2px solid white;
}

/* the word "Notifications" itself */
.pp-top-bar-notifications-popover-title,
[class*="popoverTitle_"] {
  font-family: "Cardo", serif;
  font-size: 1.6rem; /* how big the title is */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;  /* space between letters */
  color: #FFFFFF; /* the letters themselves */
  /*outline around each letter cuz normal shadow would like sit on one side so gotta do allat to make it like- wrap around it. */
  text-shadow:
    -1px  0    0 #a3a3a3,
     1px  0    0 #a3a3a3,
     0   -1px  0 #a3a3a3,
     0    1px  0 #a3a3a3,
    -1px -1px  0 #a3a3a3,
     1px -1px  0 #a3a3a3,
    -1px  1px  0 #a3a3a3,
     1px  1px  0 #a3a3a3;
}


/* ============ NOTIF HEADER BUTTONS ========= */

/* the strip the three buttons sit in */
.pp-top-bar-notifications-popover-actions
[class*="headerActions_"] {
  background: transparent !important;
  border: none !important;
  padding: 0;
  gap: 0.5rem; /* space between the buttons */
}

/* all three buttons, resting */
.pp-top-bar-notifications-close,
[class*="deleteAllButton_"],
[class*="markAllReadButton_"],
[class*="closeButton_"] {
  background: #242424;  /* button circle colour */
  color: #FFFFFF;   /* icon colour */
  border: 1px solid white;
  border-radius: 50%;  /* 50% = circle, 0 = square */
  transition: color 500ms, background 500ms;
}

/* all three buttons, hovered */
.pp-top-bar-notifications-close:hover,
[class*="deleteAllButton_"]:hover,
[class*="markAllReadButton_"]:hover,
[class*="closeButton_"]:hover {
  background: white;
  color: black;
  box-shadow: none;
}

/* forces the icons to follow the button colour instead of their own */
.pp-top-bar-notifications-delete-all svg,
[class*="deleteAllButton_"] svg,
[class*="markAllReadButton_"] svg,
[class*="closeButton_"] svg {
  color: inherit;
  fill: currentColor;
}

/* the "View All" notifications button */
.pp-top-bar-notifications-popover a[href="/notifications"] {
  background: #242424;
  color: white;
  border: 1px solid white;
  border-radius: 0;
  font-family: "Cutive Mono", monospace;
  box-shadow: none;
  transition: color 500ms, background 500ms;
}


.pp-top-bar-notifications-popover a[href="/notifications"]:hover {
  background: white;
  color: black;
}


/* Scroll bar stuff */

.pp-top-bar-notifications-list,
[class*="notificationsList_"] {
  background: transparent;
  scrollbar-width: thin;                    /* firefox only */
  scrollbar-color: #a3a3a3 #0c0c0c;         /* firefox only: bar, then track */
}

.pp-top-bar-notifications-list::-webkit-scrollbar,
[class*="notificationsList_"]::-webkit-scrollbar {
  width: 8px;  /* how thick the whole scrollbar is */
}

/* the draggable bar */
.pp-top-bar-notifications-list::-webkit-scrollbar-thumb,
[class*="notificationsList_"]::-webkit-scrollbar-thumb {
  background: #a3a3a3;
  border-radius: 0;
}
.pp-top-bar-notifications-list::-webkit-scrollbar-thumb:hover,
[class*="notificationsList_"]::-webkit-scrollbar-thumb:hover {
  background: white;
}

/* the groove behind the bar */
.pp-top-bar-notifications-list::-webkit-scrollbar-track,
[class*="notificationsList_"]::-webkit-scrollbar-track {
  background: #0c0c0c;
}

/* --- the little arrows at each end */

.pp-top-bar-notifications-list::-webkit-scrollbar-button,
[class*="notificationsList_"]::-webkit-scrollbar-button {
  display: block;
  height: 12px;                   /* how tall the arrow buttons are */
  background-color: #0c0c0c;      /* the square behind the arrow */
  background-repeat: no-repeat;
}

/* webkit shows two arrows at each end by default, which looks broken.
   this hides the duplicates so there's one arrow top and one bottom */
.pp-top-bar-notifications-list::-webkit-scrollbar-button:vertical:start:increment,
.pp-top-bar-notifications-list::-webkit-scrollbar-button:vertical:end:decrement,
.pp-top-bar-notifications-list::-webkit-scrollbar-button:horizontal,
[class*="notificationsList_"]::-webkit-scrollbar-button:vertical:start:increment,
[class*="notificationsList_"]::-webkit-scrollbar-button:vertical:end:decrement,
[class*="notificationsList_"]::-webkit-scrollbar-button:horizontal {
  display: none;
}

/* UP arrow */
.pp-top-bar-notifications-list::-webkit-scrollbar-button:vertical:decrement,
[class*="notificationsList_"]::-webkit-scrollbar-button:vertical:decrement {
  background-image:
    linear-gradient(to bottom right, transparent 49%, #a3a3a3 50%),
    linear-gradient(to bottom left,  transparent 49%, #a3a3a3 50%);
  background-size: 4px 5px, 4px 5px;        /* half-width, then height */
  background-position: 0 center, 4px center;
}

/* DOWN arrow */
.pp-top-bar-notifications-list::-webkit-scrollbar-button:vertical:increment,
[class*="notificationsList_"]::-webkit-scrollbar-button:vertical:increment {
  background-image:
    linear-gradient(to top right, transparent 49%, #a3a3a3 50%),
    linear-gradient(to top left,  transparent 49%, #a3a3a3 50%);
  background-size: 4px 5px, 4px 5px;
  background-position: 0 center, 4px center;
}

/* arrows on hover */
.pp-top-bar-notifications-list::-webkit-scrollbar-button:vertical:decrement:hover,
[class*="notificationsList_"]::-webkit-scrollbar-button:vertical:decrement:hover {
  background-image:
    linear-gradient(to bottom right, transparent 49%, white 50%),
    linear-gradient(to bottom left,  transparent 49%, white 50%);
}
.pp-top-bar-notifications-list::-webkit-scrollbar-button:vertical:increment:hover,
[class*="notificationsList_"]::-webkit-scrollbar-button:vertical:increment:hover {
  background-image:
    linear-gradient(to top right, transparent 49%, white 50%),
    linear-gradient(to top left,  transparent 49%, white 50%);
}

.pp-top-bar-notifications-item,
[class*="notificationItem_"] {
  height: 125px;
  min-height: 125px;
  max-height: 125px;
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid #a3a3a3;   /* the line between notifications */
  width: 100%;
  overflow: hidden;/* clips anything taller than the row */
  padding: 0; /* must stay 0 or the image can't reach the edges */
  display: flex;
  align-items: stretch;
  gap: 0;
  position: relative;
  transition: background 300ms;   /* how slowly the row fades on hover */
}

/* the row you're hovering over */
.pp-top-bar-notifications-item:hover,
[class*="notificationItem_"]:hover {
  background: #242424;
}

.pp-top-bar-notifications-item > *:not(.pp-top-bar-notifications-item-unread),
[class*="notificationItem_"] > *:not([class*="unreadIndicator_"]) {
  background: transparent;
}

/* the vertical bar marking an unread notification */
.pp-top-bar-notifications-item-unread,
[class*="unreadIndicator_"] {
  background: white;
  align-self: stretch; /* makes it run the full row height */
}

/* the column the image sits in */
.pp-top-bar-notifications-item-avatar-section,
[class*="avatarSection_"] {
  flex: 0 0 150px;  /* how WIDE the image column is */
  width: 150px; /* dont touch this */
  height: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* the frame that crops the image */
.pp-top-bar-notifications-item-avatar,
[class*="avatarContainer_"] {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  min-width: 0;
  overflow: hidden;/* this is what does the cropping */
}

/* the bot's picture */
.pp-top-bar-notifications-item-avatar img:nth-of-type(1),
[class*="characterAvatar_"] {
  position: absolute;
  top: 0;
  left: -25px;  /* CROPPING THE LEFT EDGE */
  width: calc(100% + 25px);
  height: 100%;
  object-fit: cover; /* fills the frame instead of squashing */
  object-position: 58% 42%;
  border-radius: 0;
  filter: grayscale(0.9); /* greyed out to match the profile, colour comes back on hover */

  /* THE LOW TAPER FADE ON THE BOT IMAGE*/
  -webkit-mask-image: linear-gradient(to right, #000 52%, transparent 100%);
          mask-image: linear-gradient(to right, #000 52%, transparent 100%);

  /* hover zoom, see below */
  transform-origin: right center;
  transition: transform 600ms ease, filter 600ms ease !important;   /* how slow the zoom is */
  will-change: transform;
}

/* HOVER ZOOM —  the image raise if u want it more dramatic but probably dont bc its dramatic enuff idk */
.pp-top-bar-notifications-item:hover .pp-top-bar-notifications-item-avatar img:nth-of-type(1),
[class*="notificationItem_"]:hover [class*="characterAvatar_"] {
  transform: scale(1.12) !important;
  filter: grayscale(0);
}

/* the little profile picture, tucked in the bottom-left corner on comment notifs */
.pp-top-bar-notifications-item-avatar img:nth-of-type(2),
[class*="userAvatar_"] {
  position: absolute;
  left: 5px;
  bottom: 5px;
  width: 36px; /* size of the badge */
  height: 36px; /* keep the same as width to stay circular if u raise it this thang will be oval af. if u want a square see border-radius*/
  object-fit: cover;
  border: 2px solid white; /* ring around the badge */
  border-radius: 50%;
}


/* the block all the text sits in */
.pp-top-bar-notifications-item-content-wrapper,
[class*="contentWrapper_"],
[class*="contentWrapperUnread_"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  padding: 0.6rem 2.4rem 0.6rem 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  margin-left: -45px;/* Pulls the text leftwards so it sits on top of the faded part of the image, Raise for more room. */
  position: relative;
  z-index: 1;
}

/* THE NOTIFICATION TITLE (first line, e.g. "New comment on...") */
.pp-top-bar-notifications-item-subject,
[class*="subject_"],
[class*="subjectUnread_"] {
  font-family: "Cardo", serif;
  font-size: 1.12em; /* relative to the site's size, not fixed */
  color: white;
  line-height: 1.3;

  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;     /* gap between text and the underline */
  text-decoration-color: #a3a3a388;  /* last two digits = opacity higher number more visible or something*/

  background: unset;
  -webkit-text-fill-color: unset;
  overflow-wrap: anywhere; /* stops long words breaking the layout */

  /* clips the title to 2 lines. change the 2 to allow more or fewer. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* THE BODY TEXT (second line) */
.pp-top-bar-notifications-item-body,
[class*="notificationItem_"] [class*="body_"] {
  color: #a3a3a3;
  line-height: 1.35;
  overflow-wrap: anywhere;

  /* clips the message to 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* THE DATE (third line) */
.pp-top-bar-notifications-item-timestamp,
[class*="notificationItem_"] [class*="timestamp_"] {
  color: #a3a3a3;
  font-family: "Cutive Mono", monospace;
  opacity: 0.75;/* 1 = solid, lower = more faded */
}

/* BOT NAMES — */
[class*="highlightCharacter_"],
[class*="highlightCharacterBody_"] {
  color: white;
  font-family: "Cardo", serif;
  font-size: 1.05em;
}

/* USERNAMES — white monospace */
[class*="highlightUsername_"] {
  color: white;
  font-family: "Cutive Mono", monospace;
}

  /* Styling for the archive button, (The little trashcan that appears when u hover) */
.pp-top-bar-notifications-item-archive,
[aria-label="Archive notification"] {
  box-shadow: none;
  border: 1px solid white;
}

.pp-top-bar-notifications-item-archive:hover,
[aria-label="Archive notification"]:hover {
background: white;
color: black;
transform:unset;
box-shadow:none;/* Fuck this stupid thing Janitorai and their stupid box shadows jesus christ.*/
}


/* ============= CHARACTERS / CHATS / SCRIPTS TABS ============= */

/* The main tab container */
.profile-tabs-chakra-tabs
#profile-tabs {
  background: transparent !important;
  border: none;
  box-shadow: none;
}

/* The row the tab buttons sit in */
.pp-tabs-wrapper {
  background: transparent;
  border: none;
  box-shadow: none;
  gap: 8px; /* space between the buttons */
  padding-bottom: 8px;
}

/* Tab buttons, resting */
.pp-tabs-button {
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid white;
  border-radius: 12px;
  color: #a3a3a3;
  font-family: "Cutive Mono", monospace;
  box-shadow: none;
  text-shadow: none;
  transition: background 0.2s, color 0.2s;
}

/* Tab buttons, hovered */
.profile-tabs-button:hover {
  background: #242424;
  color: white;
}

/* The tab you're currently on */
.pp-tabs-button[aria-selected="true"] {
  background: white;
  color: black;
}

/* The glowing bar under the active tab */
.pp-tabs-indicator {
  background: white !important;
  box-shadow: none;
  filter: none;
  height: 1px;
}


/* ============= BOT LIST HEADER ============= */

/* Stacks the search, tags latest dropdown ect in a centered column */
.css-m8ywhg {
flex-direction: column;
align-content: center;
justify-content: center;
align-items: center;
flex: 1;
}
/* The purple header button, stripped of its background, shadow, and border */
.Btn2-purple {
  background: transparent;
  box-shadow: none;
  border: none;
  outline: none;
}
/* The purple button's inner layer, also made see-through */
.Btn2-purple:before {
  background: transparent;
  transition: none;
}
/* Hides the button's original text, keep this at 0 */
.Btn2-purple p {
  font-size: 0px;
}
/* The replacement text for the button, change the content to whatever u want */
.Btn2-purple p::after {
  content: " flowers in the garden ";
  font-size: 20px;
  font-family: cardo, serif;
  color: white;
}
/* Stops the text glowing when the button is clicked */
.Btn2-purple:active p::after,
.Btn2-purple:focus p::after {
  text-shadow: none;
}

/* Shrinks the header text on phones */
@media (max-width: 768px) {
  .Btn2-purple p::after {
    font-size: 14px;
  }

  .css-wd8hou {
    font-size: 14px;
  }
}


/* ============= SEARCH BAR & FILTER BUTTON ============= */

/* The filter button next to the search bar */
.pp-fl-filter-button {
  background-color: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 0;
}
/* The filter button's icon */
.pp-fl-filter-button svg {
  color: white !important;
}
/* Filter button, hovered */
.pp-fl-filter-button:hover{
  background-color: black;
}

/* Search bar when you hover over it or click into it */
.profile-character-search-input:is(:hover, :focus, :focus-visible) {
  color: white;
  outline-color: grey;
  border: 1px solid;
  box-shadow: none;
}
/* The search bar box itself */
.pp-fl-search-input {
  background:rgba(0, 0, 0, 0.7);
  border-radius: 0;
  border: 1px solid rgba(0, 0, 0, 0.7);
}
/* The text you type into the search bar */
.pp-fl-search-input {
  font-family: Montserrat;
  color: white;
  caret-color: white; /* the blinking typing line */
  font-weight: 100;
}


/* ============= LATEST DROPDOWN ============= */
/* THank you tigerdropped */
/* The dropdown box, closed */
:is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__control {
  background: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 0 !important;
}
/* The currently chosen sort option text */
:is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__single-value {
  color: white;
  font-family:Cutive Mono, serif;
  font-weight: 400;
  font-size: 1.25rem;
}
/* Hides the little divider line next to the arrow */
:is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__indicator-separator {
  display: none;
}
/* The dropdown arrow */
:is(.default, .dark, .transparent, .css-b62m3t-container) svg {
  color: white;
  transition: 500ms;
}
/* Flips the arrow upside down while the menu is open */
:is(.default, .dark, .transparent, .css-b62m3t-container):has(.css-qr46ko) svg {
  transform: rotateX(180deg);
}
/* The open dropdown menu */
:is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__menu {
  width: max-content;
  text-align: center;
  background: black;
  border: 2px solid black;
  border-radius: 0;
}
/* Removes the padding around the options list */
.css-qr46ko {
  padding: 0;
}
/* Each option in the menu */
:is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__option {
  color: grey;
  font-family: cardo, serif;
  font-weight: 500;
  border-bottom: 2px solid white;
}
/* An option, hovered */
:is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__option:hover {
  background: darkgray;
  transition: 500ms;
  color: white;
}
/* The option that's currently selected or being pointed at */
:is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__option--is-selected, :is(.default, .dark, .transparent, .css-b62m3t-container) .react-select__option--is-focused {
  background: grey;
  transition: 500ms;
  color: white;
}


/* ============= PAGE BUTTONS ============= */

/* Centers the page number buttons under the bot cards */
.pp-cc-list-container + div {
  justify-content: center;
}
/* The previous/next page arrows */
:is(.pp-pg-prev-button, .pp-pg-next-button) svg {
  color: white;
  opacity: 1;
}


/* ============= FILTER POP-UP ============= */

/* The filter pop-up box */
#root ~ :has(> .profile-filter-modal-modal-overlay) [data-focus-lock-disabled] > * > * {
  background: black !important;
  border: 2px solid white;
  border-radius: 0;
}
/* The pop-up's title and the tags heading */
.profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > header, .profile-filter-modal-body-tags-flex-box-heading {
  text-align: center;
  font-family: cutive mono, serif;
  font-weight: 100;
  color: white;
}
/* The pop-up's close button */
.profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > button {
  border-radius: 50%;
  color: #242424;
}
/* Close button when hovered or clicked */
.profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > button:is(:hover, :focus, :active) {
  background: white;
}


/* ============= TAG FILTER BAR ============= */

/* The box holding the tag bar, stacks it in a centered column */
*:has(> [class*="_tagsContainer_"]) {
  margin: 0;
  margin: 0;
  padding: 0;
  gap: 1rem;
  flex-flow: column;
  align-items: center;
}
/* Hides the extra filter button in the tag bar */
[class*="_filterButton_"] {
  display: none;
}

/* The Show All Tags / Hide Tags button */
[class*="_expandButton_"] {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  gap: 0.5rem;
  width: auto;
  border-radius: 0;
  background: #242424;
  border: 2px solid white;
  outline: 1px solid white;
  outline-offset: 2px;
  color: white;
  transition: background 500ms, color 500ms, border 500ms;
}
/* Makes the button's icon follow the text colour */
[class*="_expandButton_"] *:is(svg, path) {
  stroke: currentColor !important;
}
/* The button's text when the tags are closed */
[class*="_expandButton_"]::before {
  content: "Show All Tags";
  font-family: cutive mono, serif;
  font-size: 1rem;
  font-weight: 700;
}
/* The button's text when the tags are open */
[class*="_tagsContainer_"]:has([class*="_expanded"]) + [class*="_expandButton_"]::before {
  content: "Hide Tags";
}
/* The button when hovered or clicked */
[class*="_expandButton_"]:is(:hover, :focus, :active) {
  background: black;
}

/* The box the tags sit in */
[class*="_tagsContainer_"] {
  width: 100%;
  padding: 0.5rem;
  border: 2px solid white;
  border-radius: 0;
  transition: border-radius 500ms;
}
/* The fade on the left edge of the tag bar */
[class*="_gradientLeft_"] {
  background: linear-gradient(to left, transparent, #0C0404 50% 100%);
}
/* The fade on the right edge of the tag bar */
[class*="_gradientRight_"] {
  right: 0 !important;
  background: linear-gradient(to right, transparent, #0C0404 50% 100%);
}
/* Centers the tags when the bar is expanded */
[class*="_collapsedContainer_"][class*="_expanded_"] {
  justify-content: center;
}
/* Removes extra spacing around the tag rows */
[class*="_collapsedContainer_"] [class*="_motionDiv_"] { margin: 0; }


/* The left/right scroll arrows on the tag bar */
[class*="_navigationButton"] {
  padding: 0;
  padding: 0;
  border-radius: 50%;
  background: #242424;
  border: 2px solid;
  color: white;
  transition: background 500ms, color 500ms, border 500ms;
}

/* Makes the arrow icons visible and follow the text colour */
[class*="_navigationButton"] path { opacity: 1; stroke: currentColor; }
/* Nudges the arrow icons so they sit centered in the circle */
[class*="_navigationButton"] svg { position: relative; top: -1px; }
[class*="_navigationButtonLeft"] svg { left: -2px; }
/* Scroll arrows when hovered or clicked */
[class*="_navigationButton"]:is(:hover, :focus, :active) {
  background: black;
}

/* Each tag in the tag bar */
[class*="_collapsedContainer_"] [class*="_tag_"] {
  border: none;
  border-bottom: 1px solid;
  border-radius: 0;
  display: inline-block;
  text-align: center;
  color: white;
  font-family: cardo, serif;
  text-transform: lowercase;
  transition: 500ms;
}
/* Removes the emoji at the start of each tag */
[class*="_collapsedContainer_"] [class*="_tag_"]::first-letter {
  font-size: 0;
}
/* A tag you've selected */
[class*="_collapsedContainer_"] [class*="_tagSelected_"] {
  color: #242424;
  box-shadow: unset !important;
  text-shadow: unset !important;
}
/* An unselected tag, hovered */
[class*="_collapsedContainer_"] [class*="_tag_"]:not([class*="_tagSelected_"]):hover {
  color: #444444;
}
/* Tags shrink a little when clicked */
[class*="_collapsedContainer_"] [class*="_tag_"]:active {
  transform: scale(0.95);
}
/* The divider between tag groups */
[class*="_motionDiv_"][class*="_divider_"] {
  color: white;
}


/* ============= BOT CARDS ============= */

/* Space between the bot cards */
.pp-cc-list-container{
gap: 1.3rem;
}

/* Removes the box shadow on hover */
.profile-character-card-wrapper,
.css-1ifqy49 {
  box-shadow: none;
}

/* Makes every background layer of the card black */
.pp-cc-wrapper,.pp-cc-gradient-1,.pp-cc-gradient-2,.pp-cc-gradient-3,.pp-cc-wrapper>*:not(.css-1s5evre){
    background: black !important;
}

/* Smooth transition for the hover effect */
.profile-character-card-wrapper {
    transition: transform 0.3s ease;
}

/* Enlarges and slides the card up on hover */
.profile-character-card-wrapper:hover {
    transform: scale(1.02) translateY(-9px);
    box-shadow: none;
}

/* Chat ribbon positioning, removes absolute positioning to prevent overlap */
.profile-character-card-stats-box {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    display: flex;
    right: -60px;
    margin: 5px 0;
}

/* Strips the ribbon's background, shape, and shadow */
.pp-cc-ribbon,
.pp-cc-ribbon-wrap {
  background-color: transparent;
  clip-path: none;
  box-shadow: none;
  position: static;
  padding: 0;
}

/* Essentials */
/* Negates the ribbon's inset, hidden overflow, and drop shadow */
.pp-cc-ribbon {
  inset: unset;
  overflow: visible;
  filter: none;
  padding: 0;
}
/* Removes the ribbon's weird shape, weird shadow, and hidden overflow */
.pp-cc-ribbon-wrap {
  clip-path: unset;
  padding: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
  border-radius: 0;
}
/* Chat count text, background, and icon */
.pp-cc-chats {
    font-weight: 200;
    font-size: 13px;
    font-family: 'cardo';
    background: none;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* needed for positioning the line below */
}

/* The little line under the chat count */
.pp-cc-chats::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 30px;
    transform: translateX(-50%);
    width: 35%;
    height: 1px;
    background: #ffffff7d;
}

/* Adds "Chats" after the number */
.profile-character-card-chats-count::after {
    content: " Chats •";
}
/* Hides the chat icon */
.pp-cc-chats svg {
  display: none;
}
/* New dot icon in place of the chat icon */
.pp-cc-chats::before {
  content: "•";
}
/* Makes everything inside the ribbon full width */
.profile-character-card-stats-box * {
  width: 100%;
}

/* The main card box */
.profile-character-card-stack {
  background: black;
  border: 1px solid white;
  outline: 1px solid white;
  outline-offset: 2px;
  border-radius: 1px;
}

/* Lets the bot name, image, and ribbon be reordered */
.profile-character-card-stack-link-component {
  display: flex;
  flex-direction: column;
}

/* Moves the bot name to the middle */
.profile-character-card-stack-link-component-box {
  order: 2;
}

/* Keeps the image at the top */
.profile-character-card-avatar-aspect-ratio {
  order: 1;
}

/* Moves the chat ribbon below the bot name */
.profile-character-card-stats-box {
  order: 3;
}

/* Hides the username on the bot card */
.profile-character-card-creator-name-box {
  display: none;
}

/* Makes the bot image taller */
.profile-character-card-avatar-aspect-ratio {
  height: auto;
  padding-bottom: 50%; /* If you wanna make it bigger just increase this number */
}

/* The bot image fills its box without squishing */
.profile-character-card-avatar-image {
  height: 100%;
  object-fit: cover;
  border-radius: 1px
}

/* Shrinks the tags container and adds a scroll when needed */
.profile-character-card-tags {
  max-height: 80px; /* Adjust this value to your preferred height */
  overflow-y: auto;
  overflow-x: hidden;
}

/* Token count container */
.profile-character-card-box {
  background-color: white;
}

/* Flower at the end of the token count */
.profile-character-card-tokens-count::after {
    content: " ✿";
    color: black;
}

/* Flower at the start of the token count */
.profile-character-card-tokens-count::before {
    content: "✿ ";
    color: black;
}

/* Token count text */
.profile-character-card-tokens-count {
  color: black;
  text-shadow: none;
  font-family: Courier Prime;
  font-size: 12px;
  text-align: center;
  position: relative;
  top: 3px
}

/* Bot name container, centers the text */
.profile-character-card-stack-link-component-box {
  background-color: white;
  text-align: center;
}

/* Description box: same size on every card, sits closer to the chat count
   if you want a scroll bar on this replace overflow: hidden; with overflow-y: auto; */
.profile-character-card-description-box {
  min-height: 130px;
  max-height: 130px;
  overflow: hidden;
  margin-top: 8px !important;
  padding-top: 0;
}

/* Bot name text */
.profile-character-card-name-box {
  color: black;
  text-align: center;
  font-family: cardo;
  font-size: 15px;
  text-shadow: none;
}

/* The font/colour of the text in the bot description */
.pp-cc-description p {
  margin: 0;
  font-family: cardo;
  font-size: 13px;
  line-height: 1.4;
  color: white;
}
/* Hides the public chat count */
.css-y395z1 {
  display: none;
}

/* Greyscale bot images by default */
.profile-character-card-avatar-image {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

/* Removes the greyscale on hover */
.profile-character-card-stack:hover .profile-character-card-avatar-image {
  filter: grayscale(0%);
}

/* Hides the original star image */
.profile-character-card-star {
  display: none;
}

/* The divider line, full width */
.profile-character-card-star-line {
  width: 100%;
  position: relative;
  margin: 10px 0;
  border: 1px solid white;
}

/* The flower centered on the divider line */
.profile-character-card-star-line::before {
  content: "✿";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.9);
  padding: 0 8px;
  font-size: 16px;
  color: white;
  border: 1px solid white;
  line-height: 1;
  z-index: 2;
}

/* Moves the description down so it doesn't hit the divider line */
.profile-character-card-description-box {
  margin-top: 15px;
}


/* ===== TAG GRID ===== */

/* The tags list, turned into a two column grid */
.css-k1urot {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(90px, 130px)); /* 2 columns, each 90px to 130px wide */
  justify-content: center;
  gap: 4px;
  width: 100%;
  max-height: inherit; /* keeps the tag scroll working */
}

/* Each tag's cell in the grid */
.pp-cc-tags-wrap-regular,
.pp-cc-tags-wrap-custom,
.css-1yp4ln {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
}

/* Every tag is the exact same box, long names get "..." */
.pp-cc-tags-item,
.pp-cc-tags-regular,
.pp-cc-tags-custom {
  display: block;
  width: 100%;
  min-width: 90px;
  max-width: 130px;
  height: 24px;
  line-height: 22px; /* keep this 2px less than the height */
  padding: 0 6px;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tag styling bc yeah */
.pp-cc-tags-regular,
.pp-cc-tags-custom {
  border: 1px solid white;
  color: white;
  background: black;
  border-radius: 1px;
}

/* Tags when hovered or clicked */
:is(.pp-cc-tags-regular, .pp-cc-tags-custom):is(:hover, :focus) {
  border: white;
  background: white;
  color: black;
}

/* REMOVING THE FIRST EMOJI ON TAGS (Creds to tigerdropped ily) */
/* regular tags */
.pp-cc-tags-regular::first-letter {
  font-size: 0;
}

/* @Procrastination was the pioneer, now it was made easier through labels 🩵 */
/* Removes the original text for the "dead dove" tag */
.pp-tag-deaddove { font-size: 0; }

/* Replaces the text for the "dead dove" tag */
.pp-tag-deaddove::after {
    content: "Dead Dove";
    font-size: 0.75rem;
}


/* ===== LIMITLESS / EXCLUSIVE TAG ===== */

/* Stays on top of the tag grid, spanning both columns */
.pp-cc-tags-wrap:has(.pp-tag-limitless) {
  grid-column: 1 / -1;
  width: 100%;
  display: block;
}

/* The Exclusive bar */
.pp-cc-tags-wrap .pp-tag-limitless {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 20px; /* how tall the bar is */
  line-height: normal;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  font-family: Cardo;
  font-weight: 1000;
  background: white !important; /* also wipes out the purple gradient */
  box-shadow: none !important;
  border: 2px solid white;
  border-radius: 1px;
}

/* Hides the original "Limitless" text */
.pp-cc-tags-wrap .pp-tag-limitless,
.pp-cc-tags-wrap .pp-tag-limitless * {
  font-size: 0 !important;
  color: transparent !important;
}

/* "Exclusive" text - visible by default */
.pp-cc-tags-wrap .pp-tag-limitless::before {
  content: "・ Exclusive ・";
  font-size: 14px !important;
  color: black !important;
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* "Choose me?" text - hidden by default, sits on top of "Exclusive" */
.pp-cc-tags-wrap .pp-tag-limitless::after {
  content: "‪‪❤︎‬ Choose me? ‪‪❤︎‬";
  font-size: 14px !important;
  color: black !important;
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* On hover - "Exclusive" fades out... */
.profile-character-card-stack:hover .pp-cc-tags-wrap .pp-tag-limitless::before {
  opacity: 0;
}

/* ...and "Choose me?" fades in */
.profile-character-card-stack:hover .pp-cc-tags-wrap .pp-tag-limitless::after {
  opacity: 1;
}


/* ===== EVENT DECORATIONS ===== */

/* Getting rid of decorations from events (stamp on 2025 bot card) */
.css-1wqmh16,.css-nip9dx img,.css-xrg4vd img,.css-1awld45,.css-1cui3us   {
  display: none;
}

/* Hides the creator name plus extra event decorations and icons */
.pp-cc-creator-name,.css-1wqmh16,.css-nip9dx img,.css-xrg4vd img,.css-1awld45,.css-1cui3us,.css-5v5qgx img,.css-itvw0n,.css-1henxb,.css-8828od svg {
    display: none;
}

/* =======  ✿ END OF BOT CARD SECTION  ✿ ======= */

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

.pp-uc-background,
.pp-uc-background > div:empty { /* No background on the card or its layers */
  background: transparent !important;
}

._btnPrimary_1fl1d_80 { /* this is the stupid purple button */
  Display: none;
}
/* ===== GRID LAYOUT ===== */
.profile-info-stack { /* One grid holding the user info AND the bio */
  display: grid !important;
  grid-template-columns: 1fr;
  grid-template-areas:
    "name"
    "followers"
    "avatar"
    "buttons"
    "bio"
    "credit";
  gap: 10px;
  justify-items: center;
  container-type: inline-size;
}

.profile-info-hstack,
.css-1uodvt1,
.profile-info-stack-inner,
.css-1uodvt1 > .css-8g8ihq,
.pp-uc-about-me:has(.status-box, .pfp-flowers, .pfp-flowers-bottom),
.pp-uc-about-me *:has(.status-box, .pfp-flowers, .pfp-flowers-bottom) {
  display: contents !important;
}

.profile-info-stack-inner-flex,
.pp-uc-followers-count,
.pp-uc-avatar-container,
.profile-badges,
.bio-content,
.pp-uc-about-me + * { /* Clears built-in spacing so the grid gap controls it */
  margin: 0 !important;
}

/* ===== USERNAME ===== */
.profile-info-stack-inner-flex { /* Username row, spans the full card */
  grid-area: name;
  width: 100%;
  justify-content: center;
  z-index: 1;
}

.pp-uc-title { /* Username styling */
  font-family: "Cardo";
  font-size: clamp(28px, 7vw, 50px);
  font-size: clamp(28px, 10cqi, 50px);
  line-height: 1.1;
  color: white;
  width: 100%;
  text-align: center;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  z-index: 1;
    text-shadow:
    -0.04em -0.04em 0 black,
     0.04em -0.04em 0 black,
    -0.04em  0.04em 0 black,
     0.04em  0.04em 0 black,
     0      -0.05em 0 black,
     0       0.05em 0 black,
    -0.05em  0      0 black,
     0.05em  0      0 black;

}

/* ===== FOLLOWERS ===== */
.pp-uc-followers-count { /* Centered right under the username */
  grid-area: followers;
  justify-self: center;
  font-family: "Cutive Mono";
  font-size: clamp(12px, 1vw, 14px);
  color: white;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 12px;
  border: 2px solid white;
  text-align: center;
  width: 90%;
  box-sizing: border-box;
  white-space: normal;
  z-index: 1;
}

.pp-uc-followers-count::before { /* Text before the number */
  content: " ✿ Thank you for ";
  font-family: "Cutive Mono";
  color: white;
}

.pp-uc-followers-count::after { /* Text after the number */
  content: "! ✿ ";
  font-family: "Cutive Mono";
  color: white;
}

/* ===== PROFILE PICTURE ===== */
.pp-uc-avatar-container { /* PFP sits under the follower count */
  grid-area: avatar;
  height: 400px;
  width: 100% !important;
  max-width: none !important;
  z-index: 1;
}

.pp-uc-avatar { /* PFP styling */
  height: 100%;
  width: 100%;
  box-shadow: none;
  border-radius: 0;
  border: 3px solid white;
  outline: 1px solid white;
  outline-offset: 3px;
  filter: grayscale(0.9);
  z-index: 1;
}

/* ===== STATUS BOX ===== */
.status-box { /* Sits in the PFP's lower left corner */
  grid-area: avatar;
  align-self: end;
  justify-self: start;
  max-width: calc(100% - 24px);
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  padding: 6px 12px;
  font-family: "Cutive Mono";
  font-size: clamp(11px, 3.5cqi, 12px);
  line-height: 1.3;
  color: white;
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid white;
  border-radius: 12px;
}

.status-box b { /* Bold "STATUS:" label */
  font-weight: bold;
  color: white;
}

/* ===== BADGES, BIO & BUTTONS ===== */
.profile-badges { /* Badges sit just above the status box on the PFP */
  grid-area: avatar;
  align-self: end;
  justify-self: start;
  justify-content: flex-start;
  position: relative;
  z-index: 2;
  margin: 0 0 30px !important;
}

.pp-uc-about-me + * { /* Follow/options buttons, between PFP and tabs */
  grid-area: buttons;
  width: 100%;
  margin: 40px 0 0 0 !important;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 5;
}

div:has(> .profile-uc-follow-flex),
.css-1aq5geu { /* Inner row holding both buttons */
  justify-content: center;
  gap: 10px;
}
.pp-uc-follow-button, .pp-uc-options-menu { /*Styles both the follow button AND options menu */
  background: black !important;
  border-radius: 0;
  border: 2px solid #E5E4E2;
  max-width: 15rem;
  width: 15rem;
}

.pp-uc-options-menu-list { /* Options dropdown stays on top of everything */
  z-index: 1000 !important;
  color: white;
  font-family: Cutive Mono;
  border-radius: 1px;
}

.pp-uc-background:hover { /* No box shadow on the card */
  box-shadow: none;
}
.pp-uc-follow-button span { 
  font-size: 0;
  width: auto;
}
.pp-uc-follow-button span::after { /* The replacement text for the follow button pre-follow */
  content: " Join the garden?"; 
  font-size: 1rem;
  font-family: Cutive Mono;
  color: white;
}

.pp-uc-follow-button[data-following="true"] span::after {/*The text for after you follow */
  content: "Thank you xoxo"; 
}

.pp-uc-options-menu span:first-child {  /*This is the original follow text, keep this at 0 otherwise it'll break */
  font-size: 0;
}

.pp-uc-options-menu span:first-child::after {/*The options text, idk i just put more options bc I didn't know what else to put lololol change it to whatever u want */
  content: "More options";
  font-size: 1rem;
  color: white;
  font-family: Cutive Mono;
}

.pp-uc-member-since { /* Join date fully removed (no empty gap) */
  display: none;
}
/* ===== PFP FLOWERS ===== */
.pfp-flowers { /* Full-width background behind username, followers & PFP */
  grid-row: name-start / avatar-end;
  grid-column: 1 / -1;
  justify-self: stretch;
  align-self: stretch;
  top: -38%;
  position: relative;
  z-index: 0;
  margin: 0 ;
  overflow: visible;
  filter: grayscale(90%);
}


.pfp-flowers img { /* Fills the box without stretching the image */
  position: absolute;
  inset: 0;
  width: 110%;
  height: 110%;
  object-position: center top;
  filter: greyscale(1);
}
/* ===== PFP FLOWERS: BOTTOM ===== */
.pfp-flowers-bottom { /* Upside-down flowers coming out from under the PFP */
  grid-area: avatar;
  justify-self: stretch;
  align-self: stretch;
  position: relative;
  z-index: 0;
  margin: 0 !important;
  pointer-events: none;
  filter: grayscale(90%);
}

.pfp-flowers-bottom img { /* Flipped image, starts behind the PFP and spills out below */
  position: absolute;
  left: 0;
  top: 70%;
  width: 100%;
  height: auto;
  transform: scaleY(-1);
}
/* ===== PFP FLOWERS: PHONES ===== */
/* ===== PFP FLOWERS: PHONES ===== */
@media (max-width: 480px) {
  .pfp-flowers {
    top: 0;
    transform: translateY(-80px);
  }

  .pfp-flowers img {
    width: 100%;
    height: 50%;
  }
}


/* ===== ABOUT SECTION ===== */
.about-section { /* Holds the tabs + about box, sits under the PFP */
  grid-area: bio;
  justify-self: stretch;
  width: 100%;
  position: relative;
  z-index: 2;
  margin: 60px 0 0 0 !important;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}

/* ===== TAB BUTTONS ===== */
.profile-tab { /* Each tab */
  min-width: 0;
}

.profile-tab > summary { /* Button styling */
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(2.4em + 16px); /* keeps every button two lines tall */
  box-sizing: border-box;
  padding: 2px 10px;
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid white;
  border-radius: 12px;
  color: #a3a3a3;
  font-family: "Cutive Mono";
  font-size: clamp(4px, 4cqi, 12px);
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.profile-tab > summary::-webkit-details-marker { display: none; } /* Hides the arrow */
.profile-tab > summary::marker { content: ""; }

.profile-tab > summary:hover { /* Hover highlight */
  color: white;
}

.tab-2[open] > summary,
.tab-3[open] > summary,
.tab-4[open] > summary,
.about-section:not(:has(.tab-2[open], .tab-3[open], .tab-4[open])) .tab-1 > summary { /* Active button */
  background: white;
  color: black;
}

/* ===== ABOUT BOX ===== */
.about-box { /* Every tab's content box */
  grid-column: 1 / -1;
  position: relative;
  z-index: 2;
  width: 100%;
  height: 350px;
  overflow-y: auto;
  box-sizing: border-box;
  margin: 0;
  padding: 20px;
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid white;
  border-radius: 12px;
  text-align: center;
  font-family: Arial, sans-serif;
  scrollbar-width: thin;
  scrollbar-color: white transparent;
}

.profile-tab > .about-box { /* Opened tabs cover the About me box exactly */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
}

.about-section:has(.tab-2[open], .tab-3[open], .tab-4[open]) > .about-box { /* Hides About me underneath */
  visibility: hidden;
}

.about-box h2 { /* Headings */
  position: relative;
  display: block;
  width: fit-content;
  margin: 0 0 16px 25px;
  padding-bottom: 8px;
  font-size: 24px;
  color: white;
  border-bottom: 2px solid white;
  text-align: left;
  font-family: Cutive Mono, serif;
}
.about-box .about-subtitle { /* Small text under the heading */
  margin: 0 0 15px 25px;
  font-family: "Cutive Mono";
  font-size: 12px;
  letter-spacing: 0.05em;
  color: #a3a3a3;
  text-align: left;
}
.about-box h2::before,
.about-box h2::after { /* Flowers on either end of the heading underline */
  content: "❀";
  position: absolute;
  bottom: -12px;
  font-size: 16px;
  color: white;
}
.about-box ul { /* Lists */
  margin: 0 0 0 25px;
  padding: 0;
  list-style: none;
  text-align: left;
}

.about-box li { /* Each list item */
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.5;
  color: #a3a3a3;
  font-family: cardo, serif;
}

.about-box li + li { /* Space between items */
  margin-top: 8px;
}

.about-box li::before { /* Flower bullet */
  content: "✿";
  position: absolute;
  left: 0;
  color: white;
}

.about-box h2::before { left: -25px; }
.about-box h2::after { right: -25px; }
/* ===== RECOMMENDED CREATORS ===== */
.about-box .creator-list { /* Names flow side by side and wrap */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 8px;
}

.about-box .creator-list li { /* Removes the vertical list spacing */
  margin-top: 0;
  padding-left: 0;
}

.about-box .creator-list li::before { /* Removes the bullet flower */
  content: none;
}

.about-box .creator-list li:not(:last-child)::after { /* Flower between names */
  content: "❀";
  margin: 0 10px;
  color: white;
}

.about-box .creator-list a { /* Creator links */
  color: white;
  text-decoration: none;
  border-bottom: 1px solid #a3a3a3;
  transition: color 0.2s, border-color 0.2s;
}

.about-box .creator-list a:hover {
  color: #a3a3a3;
  border-color: white;
}
.about-box p { /* Text */
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #a3a3a3;
  text-align: left;
  font-family: cardo, serif;
}

.about-box p + p { /* Space between paragraphs */
  margin-top: 12px;
}
/* ===== SUBHEADINGS ===== */
.about-box h3 { /* Subheadings with a line trailing off to the right */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin: 25px 0 12px 0;
  font-family: "Cutive Mono";
  font-size: 16px;
  font-weight: bold;
  color: white;
  text-align: left;
}
.about-box h3::after { /* The trailing line */
  content: "";
  flex: 1;
  height: 1px;
  background: #a3a3a3;
}

/* ===== TAGS ===== */
.tag-list { /* Row of tag boxes */
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 0 25px;
}

.content-tag { /* Each tag box */
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 5px 12px;
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid white;
  border-radius: 12px;
  color: #a3a3a3;
  font-family: "Cutive Mono";
  font-size: 12px;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}

.content-tag:hover { /* Hover colors */
  background: #242424;
  color: white;
  text-decoration: none;
}

.content-tag::before { /* The shimmer streak, waits off to the left */
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  pointer-events: none;
}

.content-tag:hover::before { /* Shimmer sweeps across on hover */
  animation: tag-shimmer 0.6s ease-in-out;
}

@keyframes tag-shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}
/* ===== CORNER IMAGES ===== */
.corner-image { /* Sit on the section so the scrolling box can't clip them */
  position: absolute;
  z-index: 4;
  width: 110px;
  height: 110px;
  border-radius: 8px;
  filter: grayscale(0.9);
  pointer-events: none;
}

.corner-image.top-left {
  bottom: -20px;
  left: -20px;
  transform: rotate(100deg);
}

.corner-image.top-right {
  bottom: -20px;
  right: -20px;
}


/* ===== CREDIT ===== */
.radi-credit { /* DO NAWT REMOVE THIS PLEASE */
  grid-area: credit;
  justify-self: center;
  position: relative;
  z-index: 2;
  margin: 25px 0 0 0 !important;
  font-family: "Cutive Mono";
  font-size: 11px;
  color: #a3a3a3;
  text-align: center;
}

.radi-credit a { /* The @MissRadiance link */
  color: white;
  text-decoration: none;
  border-bottom: 1px solid #a3a3a3;
  transition: color 0.2s, border-color 0.2s;
}

.radi-credit a:hover {
  color: #a3a3a3;
  border-color: white;
}


.css-9qctsi { z-index: 10;}
</style>