<style>
/* 🌸 LIGHT DARK THEME*/
/*main pill container. dark bg*/
.toggle-ui {
  width: 48px;
  height: 27px;
  border-radius: 50px;
  background-color: #1a1a22;
  border: 1px solid #2a2a36;
  position: relative;
  transition: background-color 0.3s ease, border 0.3s ease;
}

/*sliding moon*/
.toggle-ui::before {
  content: "☾";
  position: absolute;
  top: 3px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #111118;
  color: #e7e7ec;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  transition:
    left 0.3s ease,
    transform 0.3s ease,
    content 0.3s ease,
    background-color 0.3s ease,
    color 0.3s ease;
}

/*main pill container. Light theme bg*/
.theme-toggle[open] .toggle-ui {
  background-color: #e2e2e6;
  border: 1px solid #c8c8ce;
}

/*sliding sun*/
.theme-toggle[open] .toggle-ui::before {
  content: "𖤓";
  left: 24px;
  transform: rotate(0deg);
  background-color: #ffffff;
  color: #111114;
}

/*TOGGLE MAIN CONTAINER*/
/*fixed position on screen*/
.theme-toggle {
  position: fixed;
  top: 10px;
  right: 15px;
  z-index: 9999;
}

/*remove default arrow + enable click*/
.theme-toggle summary {
  list-style: none;
  cursor: pointer;
}
.theme-toggle summary::-webkit-details-marker {
  display: none;
}
</style>
<details class="theme-toggle">
  <summary>
    <div class="toggle-ui"></div>
  </summary>
</details>




<style>
/* 🌸 STATUS*/
/*Main container*/
.status-badge {
  position: relative;
  max-width: 280px;
  margin: 60px auto;
  padding: 20px 16px 16px;
  border: 2px solid #e7e7ec;
  border-radius: 12px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

/*Main container on hover*/
.status-badge:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px #00000066;
}

/*STATUS label. slighty up*/
.status-badge::before {
  content: "STATUS";
  position: absolute;
  top: -16px;
  left: 20px;
  padding: 2px 10px;
  font-size: 20px;
  font-family: Grenze Gotisch;
  font-weight: bold;
  border-radius: 6px;
  color: #111114;
  background-color: #e7e7ec;
  letter-spacing: 1px;
  transition: color 0.3s ease, background-color 0.3s ease;
}

/*font for description*/
.status-text {
  font-family: jura;
  font-style: italic;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  color: #e7e7ec;
  transition: color 0.3s ease;
}

/*Main container. Light theme border*/
.theme-toggle[open] ~ .status-badge {
  border-color: #111114;
}

/*Light theme label*/
.theme-toggle[open] ~ .status-badge::before {
  background-color: #111114;
  color: #e7e7ec;
}

/*Light theme description*/
.theme-toggle[open] ~ .status-badge .status-text {
  color: #0e0e12;
}
</style>
<div class="status-badge">
  <div class="status-text">
    yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap yap
  </div>
</div>




<style>
/*🌸 INBUILT PG brightening n darkening*/
/*Filter added for dark theme*/
.pp-page-background {
  filter: brightness(0.25) contrast(1.3) saturate(1.1) hue-rotate(200deg);
  transition: filter 0.35s ease;
}

/*Filter removed for light theme. THAT MEANS— USE LIGHT BG IMAGE FROM DEFAULT*/
.pp-page-background:has(.theme-toggle[open]),
.pp-page-background:has(~ * .theme-toggle[open]) {
  filter: none;
  transition: filter 0.35s ease;
}
</style>





<style>
/*🌸 USER'S PROFILE BOX*/
/*remove bg. max width to center in mobile's desktop*/
.pp-uc-background, .pp-uc-background > div {
  background: transparent !important;
  max-width: 100%
}

/*remove that annoying shadow of box when hover or click*/
.pp-uc-background:hover {
  box-shadow: none;
}
</style>




<style>
/*🌸 PFP, USERNAME, FOLLOWER COUNT, DATE JOINED*/
/*set all in column reverse*/
  .profile-info-hstack{
    margin-top: 20px;
    flex-direction: column-reverse;
    text-align:center;
  }

/*username*/
.pp-uc-title {
    font-size: 3rem;
  font-family: Grenze Gotisch;
  color: #fff
}

/*follower count , date joined*/
.pp-uc-followers-count, .pp-uc-member-since {
  font-size: 1rem;
  font-family: jura;
  color: #fff
  }

/*Light theme text color*/
body:has(.theme-toggle[open])
.pp-uc-title,
body:has(.theme-toggle[open])
.pp-uc-followers-count,
body:has(.theme-toggle[open])
.pp-uc-member-since{
  color:#000;
}

/*PFP size*/
.pp-uc-avatar{
  height: 470px;
  width: 285px
}
</style>



<style>
/*🌸 HORIZONTAL SCROLL IMAGES AESTHETIC*/
.image-stage {
  display: flex;
  gap: 4vw;
  padding:  15px;
  overflow-x: auto;
}
.image-stage::-webkit-scrollbar {
  height: 8px;
}
.image-stage::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
}
.image-stage::-webkit-scrollbar-track {
  background: transparent;
}
.img-box {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  transition: transform 0.8s ease, box-shadow 0.8s ease;
  flex: 0 0 auto;
}
.img-box:nth-child(odd) {
  width: 27vw;
  max-width: 200px;
  aspect-ratio: 2/3;
  transform: scale(0.8);
}
.img-box:nth-child(even) {
  width: 30vw;
  max-width: 240px;
  aspect-ratio: 3/4;
  transform: scale(1.06);
}
.img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.9s ease;
}

/*dark n light images visibility status in dark theme*/
.img-dark { opacity: 1; }
.img-light { opacity: 0; }
.img-box:nth-child(odd) { box-shadow: 7px 7px 3px #e6e6ea; }
.img-box:nth-child(even) { box-shadow: 7px 7px 3px #e6e6ea; }

/*dark n light images visibility status in light theme*/
.theme-toggle[open] ~ .image-stage .img-dark { opacity: 0; }
.theme-toggle[open] ~ .image-stage .img-light { opacity: 1; }
.theme-toggle[open] ~ .image-stage .img-box:nth-child(odd) {
  box-shadow: 7px 7px 3px #0a0a0fcc;
  transform: scale(0.8);
}
.theme-toggle[open] ~ .image-stage .img-box:nth-child(even) {
  box-shadow: 7px 7px 3px #0a0a0fcc;
  transform: scale(1.06);
}
</style>
<div class="image-stage">
  <div class="img-box">
    <img class="img img-dark" src="https://files.catbox.moe/uk84cn.jpg">
    <img class="img img-light" src="https://files.catbox.moe/5awfvo.jpg">
  </div>
  <div class="img-box">
    <img class="img img-dark" src="https://files.catbox.moe/mrzfgq.jpg">
    <img class="img img-light" src="https://files.catbox.moe/ahp2yk.jpg">
  </div>
  <div class="img-box">
    <img class="img img-dark" src="https://files.catbox.moe/t1p8do.jpg">
    <img class="img img-light" src="https://files.catbox.moe/pvr73s.jpg">
  </div>
  <div class="img-box">
    <img class="img img-dark" src="https://files.catbox.moe/uk84cn.jpg">
    <img class="img img-light" src="https://files.catbox.moe/5awfvo.jpg">
    </div>
  <div class="img-box">
    <img class="img img-dark" src="https://files.catbox.moe/mrzfgq.jpg">
    <img class="img img-light" src="https://files.catbox.moe/ahp2yk.jpg">
  </div>
  <div class="img-box">
    <img class="img img-dark" src="https://files.catbox.moe/t1p8do.jpg">
    <img class="img img-light" src="https://files.catbox.moe/pvr73s.jpg">
  </div>

</div>



<style>
/*🌸 NOT DROP-DOWN BUT DESCRIPTION BOX WHERE CIRCLE SLIDES? idk what to call this 😅*/
.content{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.story-block{
  position:relative;
  width: fit-content;
  margin: 50px 0;

}
.story-block summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:center;
  align-items:center;
}

/*box attached to circle*/
.story-strip{
  position:relative;
  width:300px;
  min-height: 140px;
  background:#3b3b3b;
  border-radius:14px;
  padding:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: hidden
}

/*light theme for box attached to circle*/
.theme-toggle[open] ~ .content .story-strip{
  background:#ededed;
}

/*circle container*/
.story-circle{
  position:absolute;
  width:160px;
  height:160px;
  border-radius:50%;
  overflow:hidden;
  border:4px solid #9a9a9a;
  z-index:2;
transition: transform .6s cubic-bezier(.22,.61,.36,1), border .3s ease;
}
/*light theme circle container's border*/
.theme-toggle[open] ~ .content .story-circle{
  border-color:#fffbf4;
}
.story-circle img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity .4s ease;
}

/*opacity game for light n dark theme*/
.story-circle img.dark-theme{opacity:1;}
.story-circle img.light-theme{opacity:0;}
.theme-toggle[open] ~ .content .story-circle img.dark-theme{opacity:0;}
.theme-toggle[open] ~ .content .story-circle img.light-theme{opacity:1;}

/*Text n it's main color*/
.story-text{
  position:relative;
  width:100%;
  z-index:2;
  color:#f1f1f1;
}

/*Light theme text's color*/
.theme-toggle[open] ~ .content .story-text{
  color:#1a1a1a;
}

/*title 1 that appears before circle glides*/
.story-title1{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-family: Grenze Gotisch;
  font-size: 30px;
  font-weight:700;
  transition:opacity .4s ease;
}

/*title 2 that appears after circle glides*/
.story-title2{
  position:absolute;
  top: -60px;
  font-family: rock salt;
  font-size:15.5px;
  font-weight:600;
  opacity:0;
  transition:opacity .4s ease;
}

/*description that appears after circle glides*/
.story-desc{
  position:absolute;
  top: -20px;
  width:160px;
  font-family: Grenze Gotisch;
  font-size:15px;
  line-height:1.6;
  opacity:0;
  transition:opacity .4s ease;
  height:70px;
  overflow-y:auto;
}

/*descriptions odd and even arrangement*/
.story-block:nth-child(odd) .story-desc{
  left:0;
  text-align:left;
}
.story-block:nth-child(even) .story-desc{
  right:0;
  text-align:right;
}
.story-desc::-webkit-scrollbar{display:none;}

/*clip-path— BRUSH STROKES*/
.story-strip::after{
  content:"";
  position:absolute;
  inset:18px;
  background:#5e5e5e;
  transition:opacity .4s ease;
  transform: translate(230%, 15%) scaleX(6) scaleY(-3.5);
  clip-path:path("M32.28 72.18c-.804-.258-1.542-.822-3.096-2.37-1.332-1.326-2.826-3.042-4.122-4.74-.462-.612-.762-.93-.762-.822 0 .036.03.084.06.102.036.018.06.078.06.126 0 .048.12.336.264.642.48 1.014.636 1.362.636 1.44 0 .036.042.126.09.186.048.066.09.168.09.228 0 .054.036.192.084.3.168.39.294 1.122.258 1.506-.12 1.194-.84 2.112-1.992 2.514-.462.168-1.41.15-1.914-.036-.72-.258-1.038-.498-2.172-1.626-2.76-2.754-4.674-4.848-5.97-6.54-.306-.396-1.776-2.454-2.61-3.648-.726-1.044-3.18-4.638-3.294-4.83-.036-.054-.156-.252-.276-.432-.324-.498-.408-.708-.51-1.194-.336-1.614 1.02-3.216 2.682-3.18.252.006.486-.006.522-.03.054-.03-.228-.75-.918-2.346-.042-.096-.12-.294-.174-.432-.054-.144-.138-.372-.192-.51-.414-1.092-.486-1.308-.714-2.16-.048-.192-.132-.492-.18-.666-.048-.18-.09-.372-.09-.438 0-.06-.036-.3-.084-.534-.318-1.518-.36-2.736-.132-3.402.264-.774.804-1.38 1.518-1.704.432-.198.498-.21 1.08-.21.696 0 1.008.072 1.668.408.57.288.972.6 1.644 1.278.786.792 1.122 1.212 2.13 2.67.198.282.396.51.444.51.048 0 .228-.132.402-.294.546-.516 1.242-.786 2.04-.786.96 0 1.854.444 2.988 1.5.294.264.564.474.6.462.036-.012.084-.102.108-.198.132-.594.516-1.11 1.188-1.584.528-.372 1.302-.54 1.962-.42 1.488.264 2.952 1.152 4.434 2.7.234.24.432.426.45.414.018-.012.03-.48.036-1.044 0-1.11.054-1.38.396-2.124.552-1.212 1.584-1.872 2.916-1.872 1.278.006 2.34.6 3.972 2.226.582.576 1.44 1.56 1.806 2.064.108.15.228.276.27.276.048 0 .15-.144.228-.312.552-1.164 1.992-1.812 3.186-1.434.516.162.828.342 1.314.762.438.378.498.438 1.746 1.794 1.476 1.596 1.536 1.668 1.74 2.25.216.624.114 1.788-.192 2.166-.042.048-.078.114-.078.144 0 .03-.048.102-.102.162-.096.108-.084.15.306.906.222.438.528 1.008.672 1.272.144.264.306.564.36.66.048.102.126.234.162.3.042.066.318.564.624 1.11 1.002 1.818 1.32 2.394 1.392 2.55.03.066.162.366.3.66.51 1.098.594 1.296.87 2.058.192.534.228.654.276.882.03.132.084.318.12.414.108.288.084 1.326-.042 1.68-.294.846-.96 1.488-1.818 1.752-.498.15-.924.168-1.422.048-1.284-.294-1.98-.822-3.9-2.958-.612-.678-1.212-1.344-1.332-1.476-.12-.132-.36-.414-.534-.63-.528-.642-.87-1.026-.894-.996-.012.012.228.546.54 1.182 1.236 2.52 2.016 4.68 2.022 5.556 0 1.254-.81 2.364-1.998 2.73-.342.102-.51.12-.966.09-.3-.018-.642-.066-.756-.102-.36-.126-.978-.426-1.242-.6-.276-.186-.498-.276-.504-.198 0 .024-.012.252-.024.51-.042.714-.402 1.476-.918 1.914-.366.312-.99.6-1.464.666-.402.06-.498.054-1.38-.114l-.168-.03-.006.438c-.006.936-.21 1.476-.816 2.16-.192.216-.714.522-1.128.666-.408.138-1.32.138-1.77-.012z");
}

/*clip path in light theme*/
.theme-toggle[open] ~ .content .story-strip::after{
  background:#dcd8d3;
}

/*circle image's position in odd*/
.story-block:nth-child(odd) .story-circle{
  left:calc(50% - 140px - 70px);
}

/*Title 1 position in odd*/
.story-block:nth-child(odd) .story-title1{
  left:calc(50% - 140px + 110px);
}

/*Title 2 position in odd*/
.story-block:nth-child(odd) .story-title2{
  left:0px;
  text-align:left;
}

/*circle gliding for odd*/
.story-block:nth-child(odd)[open] .story-circle{
  transform:translateX(260px);
}

/*circle image's position in even*/
.story-block:nth-child(even) .story-circle{
  right:calc(50% - 140px - 70px);
}

/*Title 1 position in even*/
.story-block:nth-child(even) .story-title1{
  right:calc(50% - 140px + 110px);
}

/*Title 2 position in even*/
.story-block:nth-child(even) .story-title2{
  right: 0px;
  text-align:right;
}

/*circle gliding for even*/
.story-block:nth-child(even)[open] .story-circle{
  transform:translateX(-260px);
}

/*opacity game again*/
.story-block[open] .story-title1{
  opacity:0;
}
.story-block[open] .story-title2,
.story-block[open] .story-desc
{
  opacity:1;
}

/*for link. it's underlined*/
.story-text a{
  color:inherit;
  text-decoration:none;
  position:relative;
}
.story-text a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  border-bottom:1.5px dashed currentColor;
  opacity:.6;
}
</style>
<div class="content">
<details class="story-block">
<summary>
<div class="story-strip">
<div class="story-text">
<div class="story-title1"> About meow </div>
<div class="story-title2">meow personality</div>
<div class="story-desc">
Call me schemer call me a freak — I’m just <a href="https://janitorai.com/characters/c2c67cf2-13dc-41b7-8a4f-6ac057edbee1_character-starfire-teen-titans">unique</a>.
</div>
</div>
</div>
<div class="story-circle">
<img class="dark-theme" src="https://files.catbox.moe/9dspff.gif">
<img class="light-theme" src="https://files.catbox.moe/m3bqpy.gif">
</div>
</summary>
</details>
<details class="story-block">
<summary>
<div class="story-strip">
<div class="story-text">
<div class="story-title1">kitty sad</div>
<div class="story-title2">meow meow meow~</div>
<div class="story-desc">
this world shall know meow. almighty
</div>
</div>
</div>
<div class="story-circle">
<img class="dark-theme" src="https://files.catbox.moe/m3bqpy.gif">
<img class="light-theme" src="https://files.catbox.moe/9dspff.gif">
</div>
</summary>
</details>
</div>


<style>
/*🌸 HEADER AND FOOTER IN MOBILE*/
/*Footer position at top*/
.pp-mnb-wrapper{
  top: 3px;
  background: transparent;
  height: fit-content;
  backdrop-filter: none;
  z-index: 4;
  width: fit-content;
  box-shadow: none
  }

/*Reversing the icons arrangements of footer*/
.pp-mnb-container{
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 30px;
  margin-left: 12px
}

/*footer n notification icons on hover*/
.pp-mnb-container svg:hover , .css-7f563p svg:hover{
  transform: scale(1.5);
  transition: transform .5s ease, color 0.5s ease-in;
  color: #fdfcfa
}

/*footer n notification icons before hover*/
.pp-mnb-container svg, .css-7f563p svg{
  color: #fff9;
  transform: scale(.8)
}

/*Icons color of footer and notification in light theme*/
body:has(.theme-toggle[open])
.pp-mnb-container svg,
body:has(.theme-toggle[open])
.css-7f563p svg{
  color:#000;
}

/*Header bg color*/
.pp-top-bar{
  border-radius: 20px;
  background: #0004;
  border: 1px #fff3 solid;
  margin-top: 3px
}

/*header bg color in light theme*/
body:has(.theme-toggle[open]) .pp-top-bar{
  background:#fff6;
  border:1px solid #0003;
}

/*shifting icon*/
.css-7f563p{
  margin-right: 70px;
}
.pp-top-header{
  z-index: 4;
}

.pp-top-bar-back-button, .pp-top-bar-title{
  display: none;
}

/*user menu's main container*/
.css-mzi0gq{
  transform: unset;
  z-index: 3
}

/*Menu options container*/
.profile-top-bar-app-menu-list {
  position: fixed;
  left: 0px;
  background: linear-gradient(
      90deg,
      #ffffffdd,
      #ffffff99,
      #ffffff00
    );
  overflow: visible;
  max-height: unset;
  height: 110vh;
  box-shadow: none;
  transform: translate(0%, -2%) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  }

:has(> .profile-top-bar-app-menu-list) {
  transform: unset ! important;
}

/*light theme's menu options container*/
body:has(.theme-toggle[open]) .profile-top-bar-app-menu-list{
  background: linear-gradient(
      90deg,
      #000000dd,
      #000000aa,
      #00000066,
      #00000000
    );
}

/*icons coloring*/
.pp-top-bar-app-menu-list-item:nth-of-type(1) {
  color: #000;
}

.pp-top-bar-app-menu-list-item {
  color: #000;
}

.pp-top-bar-app-menu-list-item:nth-of-type(1):hover {
  color: #0006;
}

.pp-top-bar-app-menu-list-item:hover {
  color: #0006;
}

/*icons coloring in light theme*/
body:has(.theme-toggle[open]) .pp-top-bar-app-menu-list-item:nth-of-type(1) {
  color: #fff;
}

body:has(.theme-toggle[open]) .pp-top-bar-app-menu-list-item {
  color: #fff;
}

body:has(.theme-toggle[open]) .pp-top-bar-app-menu-list-item:nth-of-type(1):hover{
  color: #fff6;
}

body:has(.theme-toggle[open]) .pp-top-bar-app-menu-list-item:hover {
  color: #fff6;
  }
</style>


<style>
/*🌸 BOT CARD PAGE PORTION*/
.pp-tabs-indicator{
  display: none
}

/*JUST ARRANGEMENT— search, tag filter, latest*/
.character-list-pagination-flex, .character-list-pagination-box, .profile-filters-flex-outer {
  display: contents;
}
.profile-filters-flex-inner-hassearchfilter {
  flex: 1;
}

/*JUST ARRANGEMENT— Numbers of characters n pg with both sides arrows*/
.profile-pagination-flex-outer{
  align-self: center;
  order: -1
}


/*"CHARACTERs" TAB*/
/*bg, width, aligned to center*/
.pp-tabs-wrapper {
  width: 100%;
  height: 55px;
  background: linear-gradient(
    180deg, #fff3, #fff2, #fff1, #fff1,#fff2,
  #fff3,
  #fff4);
  justify-content: center;
  align-items: center;
  border-bottom: none;
  border-radius: 50px;
  margin-top: 70px;
}

/*bg in light theme*/
body:has(.theme-toggle[open]) .pp-tabs-wrapper{
  background: linear-gradient(
    180deg, #0003, #0002, #0001, #0001,#0002,
  #0003,
  #0004);
}

/*Hide "characters" text*/
.pp-tabs-button{
  font-size: 0;
  width: 100%
}

/*our text in place*/
.pp-tabs-button::before{
  content: "*yawn* meow";
  font-family: Abril Fatface;
  font-size: 45px;
  color: transparent;
  -webkit-text-stroke: 1px #c0c0c0;
}
/*our text color in light theme*/
body:has(.theme-toggle[open]) .pp-tabs-button::before {
  -webkit-text-stroke: 1.5px #000
}

/*NUMBERS OF CHARACTERS*/
/*bg n border*/
.pp-pg-total {
  background: #fff3;
  border: #fff 1px solid;
  }

/*bg n border in light theme*/
body:has(.theme-toggle[open]) .pp-pg-total {
  background: #0006;
  border: #000 1px solid;
}

.pp-pg-total:before{
  display: none;
}

/*text color + font for numbers and alphabets*/
.pp-pg-total-count , .pp-pg-total-text::after {
  color: #fff;
  font-family: jura;
  font-size: 15px;
  }

/*light theme text color*/
body:has(.theme-toggle[open]) .pp-pg-total-count , body:has(.theme-toggle[open]) .pp-pg-total-text::after {
  color: #000
}

/*hides actual text*/
.pp-pg-total-text{
  font-size: 0;
}

/*shows our text*/
.pp-pg-total-text::after{
  content: "meow";
}

/* <, pg numbers, > icons color*/
.pp-pg-prev-button svg, .pp-pg-next-button svg, .pp-pg-page-button{
  color: #fff ;
}

/* <, pg numbers, > icons color in light theme*/
body:has(.theme-toggle[open]) .pp-pg-prev-button svg, body:has(.theme-toggle[open]) .pp-pg-next-button svg, body:has(.theme-toggle[open]) .pp-pg-page-button{
  color: #000 ;
}

/*Bg color of 0g number*/
.pp-pg-page-button{
  background: #fff4
}

/*it's light theme bg*/
body:has(.theme-toggle[open]) .pp-pg-page-button{
  background: #0004
}

/*SEARCH*/
/*bg (fixed) N text color (when we interact on search bar section)*/
.pp-fl-search-input {
  background: #fff3;
  font-family:  Crimson Text;
  color: #fff;
}

/*it's light theme*/
body:has(.theme-toggle[open]) .pp-fl-search-input {
  background: #0002;
  color: #0008;
}


/*cross icon's color*/
.pp-fl-search-input ~ div svg {
  color: #fff ! important;
}
/*cross icon's light theme color*/
body:has(.theme-toggle[open]) .pp-fl-search-input ~ div svg {
  color: #000 !important;
}

/*remove purple like border around the search box*/
.pp-fl-search-input,
.pp-fl-search-input:is(:hover, :focus) {
  box-shadow: none;
  border: 1px solid #fff;
}

/*border color in light theme*/
body:has(.theme-toggle[open])
.pp-fl-search-input,
body:has(.theme-toggle[open])
.pp-fl-search-input:is(:hover, :focus) {
  border: 1px solid #000;
}

 /*placeholder text's color*/
.pp-fl-search-input::placeholder {
  color: #fff5;
}

 /*placeholder text's color in light theme*/
body:has(.theme-toggle[open])
.pp-fl-search-input::placeholder {
  color: #0006;
}

/*TAGS FILTER*/
/*bg n border*/
.pp-fl-filter-button {
    background: #fff3;
    border: 1px solid #fff;
}
/*bg n border in light theme*/
body:has(.theme-toggle[open]) .pp-fl-filter-button {
  background: #0003;
  border: 1px solid #000;
}

/*icon color*/
.pp-fl-filter-button svg {
    fill: #fff5;
}
/*icon color in light theme*/
body:has(.theme-toggle[open]) .pp-fl-filter-button svg {
  fill: #0005;
}

/*When pop up— bg color of tags filter*/
.css-1dljitb {
  background: #0006 !important;
  backdrop-filter: blur(14px)
}
/*it's light theme*/
body:has(.theme-toggle[open]) .css-1dljitb {
  background: #fff6 !important;
}

/*all those tags bg n border*/
._tag_1fwqk_6, ._tag_1fwqk_6:hover{
  background: #fff3;
  color: #fff;
  border: 1px solid #fff;
  font-family: grenze gotisch
}
/*it's light theme*/
body:has(.theme-toggle[open]) ._tag_1fwqk_6 {
  background: #0003;
  color: #000;
  border: 1px solid #000;
}

/* "filters" text size*/
.css-dcyl1x{
  font-size: 3rem
}
/* "tags" text size*/
.css-178jenf{
  font-size: 2rem
}

/* "filters" + "tags" text color and font*/
.css-dcyl1x, .css-178jenf {
  font-family: Alegreya Sans SC;
  color: #fff;
  font-weight: 5;
  text-align: center;
  font-weight: bold;
}

/*Light theme— "filters" + "tags" + close button icon color*/
body:has(.theme-toggle[open]) .css-dcyl1x, body:has(.theme-toggle[open]) .css-178jenf , body:has(.theme-toggle[open]) .css-lyo4r5 svg{
  color: #000
}

/*expand button*/
._expandButton_1lgbq_153, ._expandButton_1lgbq_153:hover{
  background: #000;
  border: #fff6 solid 1px
}
/*expand button's light theme*/
body:has(.theme-toggle[open]) ._expandButton_1lgbq_153, body:has(.theme-toggle[open]) ._expandButton_1lgbq_153:hover{
  background: #fff;
  border: #0006 solid 1px
}
</style>


<style>
/* 🌸 MY TOUCH— TO HIDE THOSE TRANSPARENT BLUE FLASHING THINGIES WHEN WE HOVER OR TAP*/
*{
  -webkit-tap-highlight-color: transparent;
}
*:focus{
  outline: none;
}
*:focus-visible{
  outline: none;
}
</style>


<style>
/*LATEST*/
/*bg color*/
.transparent .react-select__control {
  background: #fff3;
  border-radius: 2px;
  height: 40px;
  width: 125px;
  border: 1px solid #fff;
}

/*light theme bg color*/
body:has(.theme-toggle[open]) .transparent .react-select__control {
  background: #0003;
  border: 1px solid #000;
}

/*slight touching of border on hover*/
.transparent .react-select__control:hover{
  border: 1px solid #fff;
}

/*Light theme— slight touching of border on hover*/
body:has(.theme-toggle[open]) .transparent .react-select__control:hover{
  border: 1px solid #000;
}

/*divider line between "latest" + down arrow*/
.css-1wy0on6 span{
  background: #fff3 ! important
}
/*light theme*/
body:has(.theme-toggle[open]) .css-1wy0on6 span{
  background: #0003 !important;
}

/*"Lastest" text color… NOT INSIDE THE POPUP ONE */
.transparent .react-select__value-container>div{
  color: #fff5;
  font-family: Crimson Text;
  font-size: 1rem;
}
/*Light theme— "Lastest" text color*/
body:has(.theme-toggle[open]) .transparent .react-select__value-container > div{
  color: #0005;
}

/*down arrow icon color*/
.css-8mmkcg{
  fill: #fff5
}
/*down arrow icon color in light theme*/
body:has(.theme-toggle[open]) .css-8mmkcg{
  fill: #0005;
}

/*when pop up— Main bg*/
.transparent .react-select__menu{
  background: #fff3;
  border: 1px solid #000
}
/*light theme's main bg*/
body:has(.theme-toggle[open]) .transparent .react-select__menu{
  background: #0003;
  border: 1px solid #fff;
}

/*base text color for all 4 text— POPULAR, LATEST, TRENDING, TRENDING 24H*/
.react-select__option:nth-of-type(1), .react-select__option:nth-of-type(2), .react-select__option:nth-of-type(3), .react-select__option:nth-of-type(4) {
  color: #000;
  border: none;
  letter-spacing: 0.7px;
  transition: letter-spacing .3s ease-in
}

/*it's light theme's text color*/
body:has(.theme-toggle[open])
.react-select__option:nth-of-type(1),
body:has(.theme-toggle[open])
.react-select__option:nth-of-type(2),
body:has(.theme-toggle[open])
.react-select__option:nth-of-type(3),
body:has(.theme-toggle[open])
.react-select__option:nth-of-type(4){
  color: #fff;
}

/*Selected text*/
.transparent .react-select__option--is-selected {
  background: #0006;
  color: #fff
}
/*selected text light theme*/
body:has(.theme-toggle[open]) .transparent .react-select__option--is-selected{
  background: #fff6;
  color: #000;
}

/*hover text*/
.transparent .react-select__option:hover{
  letter-spacing: -.2px;
  background: #000;
  color: #fff
}

/*hover text's light theme*/
  body:has(.theme-toggle[open]) .transparent .react-select__option:hover{
  background: #fff;
  color: #000;
  }
</style>


<style>
/*🌸 FIXING DESKTOP'S HEADER*/
.pp-top-bar-create-char{
  display: none;
}
.pp-top-bar-logo-name, .pp-top-bar-logo-sub-name{
  color: #fff;
  font-family: grenze gotisch
}
body:has(.theme-toggle[open]) .pp-top-bar-logo-name, body:has(.theme-toggle[open])  .pp-top-bar-logo-sub-name{
  color: #000;}
.pp-top-bar-search {
  background: #fff3;
}
.pp-top-bar-search-icon svg {
  color: #fff;
}


@media screen and (min-width: 769px) {
.pp-top-bar-app-menu{
  left: -150px
}
.theme-toggle {
  top: 17px;
  right: 20px
}

}
</style>



<style>
/*🌸 FOLLOW N OPTIONS BUTTON*/
div:has(>.profile-uc-follow-flex){
  justify-content: center
}
.Btn {
  background: #ffffff33;
  border: 1px solid #ffffffcc;
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.3s ease;

}
.Btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(202, 199, 204, 0.1),
    transparent
  );
  transform: skewX(-25deg);
  z-index: 1;
  transition: left 0.4s ease;
  pointer-events: none;
}
.Btn:hover::before {
  left: 0;
}
.Btn:hover {
  background-color: #ffffff33;
  transform: scale(1.05);
}
.Btn > span {
  font-size: 0;
  width: auto;
  font-family:  Crimson Text;
}
.Btn span::after {
  content: "U in?";
  font-size: 1rem;
  color: #fff;
  font-weight: bolder;
}
.Btn[data-following=true] span::after {
  content: "Welcome!!";
  font-weight: bolder;
  font-size: 1rem;
  color: #fff;
  transition: 0.3s all ease;
}
.css-15w88gn {
  background: #ffffff33;
  border: 1px solid #ffffffcc;
  border-radius: 20px;
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  color: #fff
}
.css-15w88gn:hover, .css-15w88gn:active, .css-15w88gn[data-active] {
  background: #ffffff33;
  transform: scale(1.03);
}
.css-1hzyiq5 {
    margin: 0;
}
body:has(.theme-toggle[open]) .Btn{
  background:#00000033;
  border:1px solid #000000cc;
}
body:has(.theme-toggle[open]) .Btn::before{
  background:linear-gradient(
    to right,
    transparent,
    rgba(30,30,30,0.12),
    transparent
  );
}
body:has(.theme-toggle[open]) .Btn:hover{
  background-color:#00000033;
}
body:has(.theme-toggle[open]) .Btn span::after,
body:has(.theme-toggle[open]) .Btn[data-following=true] span::after{
  color:#000;
}
body:has(.theme-toggle[open]) .css-15w88gn{
  background:#00000033;
  border:1px solid #000000cc;
  color: #000
}
body:has(.theme-toggle[open])
.css-15w88gn:hover,
body:has(.theme-toggle[open])
.css-15w88gn:active,
body:has(.theme-toggle[open])
.css-15w88gn[data-active]{
  background:#00000033;
}

/*Container inside options*/
#menu-list-public-profile-block-menu{
    background: transparent;
    box-shadow: none;
    display: grid;
    gap: 10px
}

/*For "block this creator"*/
.pp-uc-options-menu-item {
  background: #fff3;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 20px;
  height: 30px;
  font-family: share tech
}

body:has(.theme-toggle[open]) .pp-uc-options-menu-item {
  background: #0003;
  color: #000;
  border: 1px solid #000;
}

/*"Options" font*/
.pp-uc-options-menu span {
  font-family:  Crimson Text;
  font-weight: bolder;
}
</style>


<style>
/*🌸 BOT CARD*/
div:has(> .css-1s5evre),
div:has(~ .css-1s5evre) {
  background: transparent !important;
}
div:has(> div > .css-1s5evre) {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
div:has(> .css-1s5evre) {
  flex: 0 1 400px;
}
.pp-cc-wrapper {
  position: relative;
  height: 400px;
  overflow: hidden;
  box-shadow: none ! important;
}
.pp-cc-wrapper > div:not(:empty)::before {
  position: absolute;
  content: "";
  inset: 0;
  z-index: -2;
  background: transparent;
  transition: all 500ms;
}

/*Bot image*/
.css-1q7rmf0 {
  width: 200px;
  height: 400px;
  border-radius: 20px;
  border: 2px solid #fff;
  left: 100px;
  filter: none;
  backdrop-filter: none;
  transition: filter 0.5s ease, left 0.4s ease-in-out
}

.pp-cc-wrapper:hover .css-1q7rmf0 {
  filter: grayscale(70%);
  left: 190px;
}

/*bot name container*/
.profile-character-card-stack-link-component-box {
  position: absolute;
  width: 70%;
  height: 40px;
  background: #000;
  z-index: 1;
  border: 2px solid #fff;
  border-radius: 15px;
  top: 10px;
  left: 60px
}

/*bot name*/
.pp-cc-name {
  font-family: cinzel;
  color: #fff;
  text-align: center;
  font-size: 13px;
  transition: opacity 0.4s ease-in-out
}
.pp-cc-wrapper:hover .pp-cc-name{
  opacity: 0
}

/*tricking username container to work as custom tag*/
.profile-character-card-creator-name-link{
  position: absolute;
  width: 70%;
  height: 40px;
  z-index: 1;
  top: 10px;
  left: 60px;
  justify-content: center;
  background: transparent;
}
.profile-character-card-creator-name-link::after{
  content: "shru";
  font-family: cinzel;
  color: #fff;
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out
}
.pp-cc-wrapper:hover .profile-character-card-creator-name-link::after{
  opacity: 1
}

.pp-cc-wrapper:has(.pp-tag-shru1) .profile-character-card-creator-name-link::after {
content: "custom shru 1";
}
.pp-cc-wrapper:has(.pp-tag-shru2) .profile-character-card-creator-name-link::after {
content: "shru 2";
}


.pp-cc-creator-name{
  font-size: 0
}

/*chat ribbon*/
.css-euh5x6 {
  display: none;
}

/*description text color*/
.css-199gcrh p {
  color: #fff;
  text-align: center;
}

/*Description paragraph container*/
 .pp-cc-description {
  position: absolute;
  background: #000;
  width: 200px;
  height: 200px;
  top: 100px;
  left: 0px;
  padding: 20px;
  border-radius: 20px;
  font-family: courgette;
  z-index: 2;
  opacity: 0;
  transition: left .3s ease-in-out, opacity 0.3s ease;
  box-shadow:
    inset 0 0 0 5px #000000,
    inset 0 0 0 6px #ffffff,
    inset 0 0 0 7px #000000;
}
.pp-cc-wrapper:hover .pp-cc-description{
  left: 20px;
  opacity: 1
}

/*tags*/
.pp-cc-tags * {
  display: inline-block;
  white-space: nowrap;
}

.pp-cc-tags{
  position: absolute;
  bottom: 0;
  width: 70%;
  max-width: 100%;
  height: 70px;
  background: #000;
  right: 60px;
  border-radius: 20px;
  border: 2px solid #fff;
  overflow-x: auto ! important;
  display: flex;
  flex-direction: row;
  align-items: center;
  opacity: 0;
  transition: opacity 0.7s ease
}
/*Hides scrollbar*/
.pp-cc-tags::-webkit-scrollbar {
  display: none;
}
.pp-cc-wrapper:hover .pp-cc-tags{
  opacity: 1
}

.pp-cc-tags-item {
  display: inline-block;
  border: 1px solid #fff;
  border-radius: 20px;
  color: #fff;
  font-family: courgette;
  font-size: 12px;
}
.pp-cc-tags-item:hover{
  border: 1px solid #fff
}

.pp-cc-tags-regular::first-letter {
  font-size: 0;
}
.pp-cc-avatar {
  border-radius: 0;
}
.profile-character-card-stats-box, .pp-cc-star-line, .pp-cc-star, .profile-character-card-box{
  display: none;
}
.pp-tag-limitless{
  background: transparent;
}

/*light theme bot card coloring*/
body:has(.theme-toggle[open]) .css-1q7rmf0{
  border: 2px solid #000;
}
body:has(.theme-toggle[open]) .profile-character-card-stack-link-component-box{
  background: #fff;
  border: 2px solid #000;
}
body:has(.theme-toggle[open]) .pp-cc-name{
  color: #000;
}
body:has(.theme-toggle[open]) .profile-character-card-creator-name-link::after{
  color: #000;
}
body:has(.theme-toggle[open]) .css-199gcrh p{
  color: #000;
}
body:has(.theme-toggle[open]) .pp-cc-description{
  background: #fff;
  box-shadow:
    inset 0 0 0 5px #ffffff,
    inset 0 0 0 6px #000000,
    inset 0 0 0 7px #ffffff;
}
body:has(.theme-toggle[open]) .pp-cc-tags{
  background: #fff;
  border: 2px solid #000;
}
body:has(.theme-toggle[open]) .pp-cc-tags-item{
  color: #000;
  border: 1px solid #000;
}
body:has(.theme-toggle[open]) .pp-cc-tags-item:hover{
  border: 1px solid #000;
}
</style>


<style>
/*🌸 NOTIFICATION*/
/*TY CUTIES TO FIND THAT UNREAD'S CLASS SELECTOR 😭*/
/*Main container*/
  [class*="notificationsPopover_"]{
    background: none;
    border: none;
    box-shadow: none;
  }

/*"notifications" section*/
  [class*="popoverHeader_"]{
background: #0005;
border-radius: 50px;
border: 1px solid #fff5
}
body:has(.theme-toggle[open]) [class*="popoverHeader_"]{
background: #fff5;
border: 1px solid #0005
}


/*notification list*/
[class*="notificationsList_"]{
background: #0005;
border: 1px solid #fff5;
border-radius: 50px;
padding: 20px 10px;
}
body:has(.theme-toggle[open]) [class*="notificationsList_"] {
background: #fff5;
border: 1px solid #0005
}

[class*="notificationsList_"]::-webkit-scrollbar-track, [class*="notificationsList_"]::-webkit-scrollbar-thumb{
  background: transparent;
}


/*individual notifications box bg  coloring*/
[class*="notificationItem_"] {
  background: #fff;
  border-radius: 20px;
  margin: 20px 0px;
}

body:has(.theme-toggle[open]) [class*="notificationItem_"] {
  background: #000;
}



[class*="notificationItem_"]:hover {
  background: #fff5;
}
body:has(.theme-toggle[open]) [class*="notificationItem_"]:hover {
  background: #0005;
}


[class*="notificationsList_"] *:is([class*="notificationItem_"] img:nth-of-type(1)){
  box-shadow: unset;
  border: 1px solid #000
}

[class*="notificationItem_"] img:nth-of-type(1){
  height: 80px;
}


[class*="contentWrapper_"]{
  background: transparent ;
}


/*heart clip path*/
[class*="_unreadIndicator_"]{
  background: #000;
  position: absolute;
  top: 50px;
  left: 250px;
  width: 100px;
  transform: scale(-1);
  clip-path: path("M79.254 107.46c-2.16-.864-1.296-8.082 1.26-10.764.522-.54.648-.594 1.278-.486 1.638.252 4.212 1.926 5.616 3.654 1.08 1.332 1.53 2.232 1.638 3.348.09.828.036.972-.396 1.404-.252.27-.702.504-.954.54-.792.108-2.214-.288-3.42-.936-.612-.324-1.152-.558-1.188-.522-.036.036-.27.522-.54 1.062-1.062 2.142-2.25 3.114-3.294 2.7zM66.096 99c-2.088-.432-4.212-1.854-6.786-4.518-2.988-3.096-5.256-6.516-7.65-11.574-.738-1.548-1.386-2.808-1.44-2.808-.054 0-.576.954-1.17 2.124-4.5 8.802-9.63 14.04-12.744 13.014-.342-.126-.846-.414-1.116-.666l-.468-.432-1.188.36c-1.44.45-3.276.468-4.572.054-1.296-.414-2.484-1.602-3.06-3.042-.378-.954-.414-1.332-.414-3.852.018-2.916.162-3.834 1.206-7.29 3.15-10.314 11.466-21.51 19.71-26.514 2.16-1.314 5.976-2.466 5.976-1.8 0 .522-.486.864-1.476 1.044-1.692.324-2.934.828-4.878 1.998-2.268 1.368-3.33 2.232-5.598 4.554-4.194 4.302-8.766 11.538-11.214 17.838-1.548 3.942-2.142 6.57-2.196 9.576-.054 3.15.54 4.536 2.394 5.49.864.45 3.096.54 4.014.162l.54-.216-.234-1.026c-.36-1.512-.306-5.292.108-8.082.63-4.32 2.178-9.792 4.122-14.634 1.062-2.61 3.618-7.848 4.446-9.126 1.53-2.286 4.662-5.13 5.994-5.382.882-.18.666.162-.684 1.08-1.548 1.044-3.726 3.312-4.806 4.968-.45.702-1.404 2.466-2.142 3.924-4.446 8.838-7.29 19.998-6.588 25.884.108.972.288 1.854.378 1.944.612.612 5.202-2.538 8.334-5.724 3.258-3.312 4.896-5.67 6.786-9.81.36-.828 1.206-.666 1.494.27.342 1.062 4.752 5.058 7.722 6.984 4.86 3.15 10.332 4.32 12.528 2.646.396-.288.396-.306.144-1.728-1.386-7.83-5.454-16.794-10.26-22.554-1.35-1.62-3.6-3.798-4.464-4.32-.486-.288-.684-.756-.342-.756.234 0 1.89 1.314 3.042 2.412 5.148 4.878 10.404 15.156 12.222 23.886.288 1.386.558 2.304.666 2.268.108-.036.432-.504.738-1.044 1.296-2.394.594-7.11-1.818-12.168-2.088-4.374-6.516-10.98-9.324-13.896-1.422-1.494-4.248-3.744-6.444-5.184-.972-.63-1.764-1.17-1.764-1.224 0-.198 2.106.684 3.276 1.368 2.826 1.638 4.338 2.736 6.12 4.392 6.894 6.426 11.106 13.986 11.844 21.294.378 3.636-.252 6.246-1.89 7.83l-.63.612-.072 2.682c-.072 2.97-.27 4.14-1.008 5.742-1.062 2.322-3.078 3.438-5.364 2.97zm2.862-.846c1.17-.594 1.944-1.674 2.52-3.438.504-1.512.738-6.822.324-6.642-1.368.558-2.304.702-4.104.612-2.016-.09-3.474-.486-5.418-1.476-2.826-1.44-6.894-4.716-9.504-7.65-.756-.846-1.422-1.548-1.494-1.584-.09-.036-.27.252-.432.63-.288.648-.27.738.108 1.674.216.54.954 2.106 1.62 3.456 3.852 7.776 8.982 13.5 13.122 14.652 1.332.36 2.178.306 3.258-.234zm-30.06-3.96c1.98-.972 5.544-5.076 7.704-8.91.558-1.008.54-1.494-.036-.63-.432.666-3.996 4.212-5.4 5.4-1.566 1.296-3.456 2.592-4.806 3.276l-.972.486.486.432c.684.594 1.746.576 3.024-.054z")
}

body:has(.theme-toggle[open]) [class*="_unreadIndicator_"]{
  background: #fff
}

/*heading n time or date text n comment*/
[class*="_subject_"],
[class*="_timestamp_"], [class*="_body_"]{
  color: #000
}


/*Comment text size n font*/
[class*="_body_"]{
  font-family: Crimson text;
  font-size: 0.85rem
}

/*heading text size n font*/
[class*="_subject_"]{
  font-family: grenze gotisch;
  font-size: 1rem
}

/*unread text*/
[class*="_subjectUnread_"] {
background: unset;
-webkit-background-clip: unset;
-webkit-text-fill-color: unset;
background-clip: unset;
color: #000;
}


body:has(.theme-toggle[open]) [class*="_subject_"], body:has(.theme-toggle[open]) [class*="_timestamp_"], body:has(.theme-toggle[open]) [class*="_subjectUnread_"], body:has(.theme-toggle[open]) [class*="_body_"]{
  color: #fff
}

[class*="popoverTitle_"]{
  color: #fff;
  font-family: grenze gotisch;
  font-size: 2rem
}

body:has(.theme-toggle[open]) [class*="popoverTitle_"]{
  color: #000
}
</style>


<style>
/* 🌸 Watermark or credit*/
.credit {
    position: absolute;
    top: -27px;
    right: 10px;
    font-family: 'Courgette', cursive;
    font-size: 14px;
    color: #fff6;
    padding: 4px 8px;
    border-radius: 4px;
}
.credit a {
    color: #fff6;
    text-decoration: none;
}
.credit a:hover {
  text-decoration: underline;
  text-shadow: 0 0 15px #fff;
}
</style>

<div class="credit">
    <a href="https://janitorai.com/profiles/eff11c02-441d-4da4-9839-19800ae55be5_profile-of-fictional-fairy">css by @fictional_fairy</a>
</div>