<style>

/* ── PAGE ─────────────────────────────────── */
.profile-page-flex          { flex-direction: column; align-items: center; }
.css-1wfbrwg                { flex-direction: column !important; }
.profile-uc-background-flex { width: 100%; padding: 0; max-width: unset; }
.pp-uc-member-since         { display: none; }
.pp-uc-about-me             { display: contents; }
.css-1uodvt1                { display: contents; }
.profile-member-since-box + button { display: none; }

/* ── PROFILE CARD ─────────────────────────── */
.pp-uc-background {
  background-color: #EDE5DA;
  background-image:
    radial-gradient(#b5ada4 1.25px, transparent 1.25px),
    radial-gradient(#b5ada4 1.25px, #EDE5DA 1.25px);
  background-size: 50px 50px;
  background-position: 0 0, 25px 25px;
  border: 3px solid #262425;
  border-radius: 30px;
  max-width: 1200px;
  max-height: 1000px;
  overflow: visible;
  box-shadow: 7px 10px 0 #262425;
  transition: 500ms;
  padding-bottom: 1rem;
}
.pp-uc-background:hover { box-shadow: 5px 5px 0 #262425; }
.pp-uc-background > div:empty { background: transparent !important; }
.pp-uc-background > div:not(:empty) { display: flex; justify-content: center; }

/* ── MAIN GRID ────────────────────────────── */
.css-8g8ihq:only-child {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 2.5rem;
  width: 100%;
  height: 700px;
}

/* ── PFP ──────────────────────────────────── */
.pp-uc-avatar-container {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  align-self: stretch;
  padding: 0;
  border-radius: 0 25px 0 0;
  overflow: hidden;
  background: #EDE5DA;
  box-shadow: none;
  z-index: 1;
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}
.pp-uc-avatar {
  width: 100%;
  height: 100%;
  object-position: top;
  object-fit: cover;
  display: block;
  border-radius: 0;
  mask-image: linear-gradient(to left, black 80%, transparent 100%);
}

/* ── USER INFO ────────────────────────────── */
.css-8g8ihq .css-8g8ihq {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  align-self: end;
  z-index: 3;
  padding: 1.5rem;
  width: 100%;
}
.profile-info-stack-inner-flex {
  align-self: end;
  z-index: 4;
  background: #262425;
  color: #EDE5DA;
  padding: 5px 20px;
  border-radius: 50px;
}
.profile-info-stack-inner-flex::before {font-weight: 600; }
.profile-info-stack-inner-flex::after  {font: italic 600 1em serif; }

.pp-uc-title { font-size: 0; padding: 0 4px; position: relative; }
.pp-uc-title::before {
  font: 400 1.2rem/1 pangolin, serif;
  letter-spacing: 1px;
  text-decoration: underline;
}
.pp-uc-title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 80%;
  width: 0; height: 0;
  border: 14px solid transparent;
  border-top-color: #262425;
  border-bottom: 0; border-right: 0;
  margin-left: 10px;
  margin-bottom: -19px;
}

/* ── FOLLOWERS ────────────────────────────── */
.pp-uc-followers-count {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  align-self: start;
  z-index: 4;
  background: #262425;
  color: #EDE5DA;
  font: 600 1rem dm sans, serif;
  padding: 5px 20px;
  border-radius: 50px;
  position: relative;
}
.pp-uc-followers-count::after {
  content: '';
  position: absolute;
  bottom: 0; left: 80%;
  width: 0; height: 0;
  border: 14px solid transparent;
  border-top-color: #262425;
  border-bottom: 0; border-left: 0;
  margin-left: -70px;
  margin-bottom: -14px;
}
.pp-uc-followers-count span:nth-of-type(2) { font-size: 0; }
.pp-uc-followers-count span:nth-of-type(2)::before {font-size: 1rem; }

/* ── BADGES ───────────────────────────────── */
.profile-badges { align-self: end; }
.profile-badge-img { filter: grayscale(100%); }

/* ── FOLLOW / OPTIONS BUTTONS ─────────────── */
div:has(> .css-1aq5geu) {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  width: 100%;
  display: flex;
  gap: 0.5rem;
  padding: 0 1rem 0.4rem;
  box-sizing: border-box;
  align-items: center;
  margin-bottom: 2rem;
}
.Btn, .pp-uc-options-menu {
  flex: 1;
  width: 100%;
  border-radius: 20px;
  border: 2px solid #8a8688;
  transition: 500ms;
}
.Btn { background: #262425; }
.Btn::before { display: none; }
.Btn:hover, .pp-uc-options-menu:hover { transform: translateY(-3px); }
.Btn span { font: 700 1em pangolin, serif; color: #EDE5DA; text-transform: lowercase; }
.profile-uc-follow-text, .css-15w88gn > span:nth-child(1) { font: 700 1em pangolin, serif; }
.pp-uc-options-menu { background: #262425; color: #EDE5DA; }

/* ── TAB NAV ──────────────────────────────── */
.pw-nav {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  display: flex;
  height: 100%;
  margin: 0.4rem 1rem;
  border-radius: 999px;
  z-index: 999;
}
.pw-tab {
  flex: 1;
  font: 700 0.92rem dm serif text, serif;
  cursor: pointer;
  color: #EDE5DA;
  background: #262425;
  border-radius: 40px;
  transition: 250ms;
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  outline: none;
}
.pw-tab:hover { filter: brightness(1.2); }
.pw-tab:focus { filter: brightness(1.4); font-weight: 900; font-style: italic; outline: none; }

/* ── TAB PANELS ───────────────────────────── */
.pw-panel {
  grid-column: 1 / 2;
  grid-row: 1 / -1;
  padding: 2rem;
  color: #EDE5DA;
  font-weight: 600;
  line-height: 1.75;
  border-radius: 27px 0 0 27px;
  opacity: 0;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 400ms;
  box-sizing: border-box;
}
.pw-nav:not(:has(.pw-tab:focus)) ~ #pw-p1        { opacity: 1; visibility: visible; pointer-events: all; }
.pw-nav:has(.pw-tab:nth-child(1):focus) ~ #pw-p1,
.pw-nav:has(.pw-tab:nth-child(2):focus) ~ #pw-p2,
.pw-nav:has(.pw-tab:nth-child(3):focus) ~ #pw-p3 { opacity: 1; visibility: visible; pointer-events: all; }
.pw-nav:has(.pw-tab:focus) ~ .pw-panel            { opacity: 0; visibility: hidden; pointer-events: none; }

.pw-scroll {
  overflow: auto;
  flex: 1;
  flex-direction: column;
  font-family: dm sans, serif;
  padding-bottom: 4rem;
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}
.pw-scroll::-webkit-scrollbar { display: none; }

.pw-title {
  font: 900 1.8rem/1 pangolin, serif;
  color: #EDE5DA;
  margin: 0 0 0.75rem -2rem;
  padding: 6px 20px;
  border-radius: 0 50px 50px 0;
  text-align: right;
  letter-spacing: 1px;
  text-shadow: 1px 0 0 #3d3b3c, -1px 0 0 #3d3b3c, 0 1px 0 #3d3b3c, 0 -1px 0 #3d3b3c;
  background: #262425;
  position: relative;
}
.pw-title::before {
  content: "read me!";
  font: 400 1.3rem/1.2 dm serif text, serif;
  position: absolute;
  left: 1rem;
  letter-spacing: 0;
  top: 8px;
}
.pw-panel p:not(.pw-title) {
  background: #262425;
  padding: 15px 10px;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 500;
}

/* ── DO NOT REMOVE ───────────────────────────────── */
.credits {position: absolute;bottom: -20px;left: 1rem;width: fit-content;color: #000;font: 700 0.72rem pangolin, serif;padding: 5px 10px;white-space: nowrap;opacity: 50%;}.credits a { color: #000; }body:not(:has(.credits)) .chakra-portal::after {content: "removing credits can mkake ur profile reportable!  Do not be an ungrateful little prick.";position: fixed;inset: 0;z-index: 999999;display: flex;align-items: center;justify-content: center;background: #111;color: #f9f9f9;font: 900 clamp(1.5rem, 4vw, 3rem) serif;pointer-events: all;text-align: center;padding: 2rem;}

/* ── MOBILE ───────────────────────────────── */
@media (max-width: 799px) {
  .css-8g8ihq:only-child {
    grid-template-columns: 1fr;
    grid-template-rows: auto 2.5rem auto;
    height: unset;
  }
.pp-uc-avatar-container  { grid-column: 1/2; grid-row: 1/2; height: 500px; border-radius: 25px; }
.pp-uc-avatar { mask-image: unset; }
.css-8g8ihq .css-8g8ihq { grid-column: 1/2; grid-row: 1/2; }
.pp-uc-followers-count  { grid-column: 1/2; grid-row: 1/2; font-size: .8rem; padding: 5px 15px; }
.pp-uc-followers-count::after { margin-left: -47px; margin-bottom: -10px; }
.pp-uc-followers-count span:nth-of-type(2)::before { font-size: .8rem; }
.pw-nav { grid-column: 1/2; grid-row: 2/3; }
 .pw-panel  { grid-column: 1/2; grid-row: 3/4; }
  div:has(> .css-1aq5geu)  { grid-column: 1/2; grid-row: 1/1; z-index: 999; position: relative; top: -14.8rem; right: 2rem; transform: scale(.9); margin-bottom: 0; }
.profile-info-stack-inner-flex { padding: 5px 15px; }
.profile-info-stack-inner-flex::before { font-size: .8rem; }
  .pp-uc-title::before { font-size: .8rem; }
 .pw-title { height: 40px; font-size: 1.5rem; }
  .pw-title::before { top: 4px; font-size: 1.1rem; }
  .pw-scroll { max-height: 350px; }
  .credits { bottom: -8px !important; }
}
</style>


<div class="pw-nav">
  <div class="pw-tab" tabindex="0">tab 1</div>
  <div class="pw-tab" tabindex="0">tab 2</div>
  <div class="pw-tab" tabindex="0">tab 3</div>
</div>
<div class="pw-panel" id="pw-p1">
  <p class="pw-title">tab 1</p>
  <div class="pw-scroll">
    <p>ill do this later</p>
  </div>
</div>
<div class="pw-panel" id="pw-p2">
  <p class="pw-title">tab 2</p>
  <div class="pw-scroll">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at tellus eleifend augue ultricies tristique quis non mi. Aenean rutrum sodales quam, eu sollicitudin sapien.</p>
  </div>
</div>
<div class="pw-panel" id="pw-p3">
  <p class="pw-title">tab 3</p>
  <div class="pw-scroll">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at tellus eleifend augue ultricies tristique quis non mi. Aenean rutrum sodales quam, eu sollicitudin sapien. Sed eu ex feugiat, lacinia leo id, rutrum tortor. Fusce hendrerit hendrerit quam, condimentum scelerisque arcu volutpat in. Vivamus et nunc ac arcu varius rhoncus ut sed massa. Ut dictum ante non erat euismod malesuada. Donec efficitur diam eu purus tincidunt congue.</p>
    <p>Pellentesque tortor velit, congue vel nibh in, dictum elementum sapien. Cras posuere nisi eu orci sagittis ultricies. Aenean bibendum mauris sed elementum iaculis. Ut eu facilisis eros. Aliquam lorem augue, iaculis vitae metus sit amet, accumsan dictum nisi. Nunc eu sollicitudin eros. Vestibulum hendrerit ornare metus a finibus.</p>
    <p>Nulla quis eros risus. Praesent lobortis, arcu ac euismod fermentum, sapien enim ornare metus, nec iaculis elit felis quis diam. Aenean fermentum auctor rutrum. In eu nunc erat. Aenean suscipit leo mi, non iaculis ligula sodales vel.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at tellus eleifend augue ultricies tristique quis non mi. Aenean rutrum sodales quam, eu sollicitudin sapien. Sed eu ex feugiat, lacinia leo id, rutrum tortor. Fusce hendrerit hendrerit quam, condimentum scelerisque arcu volutpat in. Vivamus et nunc ac arcu varius rhoncus ut sed massa. Ut dictum ante non erat euismod malesuada. Donec efficitur diam eu purus tincidunt congue.</p>
    <p>Pellentesque tortor velit, congue vel nibh in, dictum elementum sapien. Cras posuere nisi eu orci sagittis ultricies. Aenean bibendum mauris sed elementum iaculis. Ut eu facilisis eros. Aliquam lorem augue, iaculis vitae metus sit amet, accumsan dictum nisi. Nunc eu sollicitudin eros. Vestibulum hendrerit ornare metus a finibus.</p>
    <p>Nulla quis eros risus. Praesent lobortis, arcu ac euismod fermentum, sapien enim ornare metus, nec iaculis elit felis quis diam. Aenean fermentum auctor rutrum. In eu nunc erat. Aenean suscipit leo mi, non iaculis ligula sodales vel.</p>
  </div>
</div>
<div class="credits">
  <a href="https://janitorai.com/profiles/5d6df38d-636b-40e3-9825-3f3b9edb9eab_profile-of-zyxy">profile css by @zyxy | do not remove credit</a>
</div>


<style>
/* ── PLACEHOLDERS// change this to your likings ───────────────────────────────── */
.profile-info-stack-inner-flex::before {
  content: "hey im "; 
}
.profile-info-stack-inner-flex::after  {
  content: " ♡ ";
}
.pp-uc-title::before {
  content: "name";
}
.pp-uc-followers-count span:nth-of-type(2)::before { 
  content: "cuties";
}
</style>