DelightfulTempe's Profile Template

<style>
    html {
        color-scheme: dark !important;
        background: #0e0410 !important;
    }

    body {
        background: unset !important;
        color: #f7eef5 !important;
        font-family: "DM Sans", sans-serif !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body[data-scroll-locked] {
        margin-right: unset !important;
    }
    body::-webkit-scrollbar {
        width: 8px !important;
    }
    body::-webkit-scrollbar-thumb {
        background: #e63956 !important;
        border-radius: 999px;
    }

    html,
    body,
    #root {
        background-color: #0e0410 !important;
        background-image:
            radial-gradient(rgba(230, 57, 86, 0.16) 1.5px, transparent 1.5px),
            radial-gradient(rgba(255, 77, 141, 0.08) 1px, transparent 1px) !important;
        background-size:
            28px 28px,
            28px 28px !important;
        background-position:
            0 0,
            14px 14px !important;
    }

    #root {
        overflow-x: clip !important;
    }

    #root main,
    #root main > .profile-page-container {
        padding: 0 !important;
    }

    @media only screen and (max-width: 768px) {
        html {
            overflow: unset !important;
        }
        html,
        body {
            height: unset !important;
            min-height: 100% !important;
        }
    }

    #root > div,
    div[class*="_wrapper_"],
    div[class*="_main_"],
    main,
    footer,
    .chakra-stack.profile-page-container,
    .profile-page-container-flex-box {
        background: unset !important;
        background-color: transparent !important;
    }

    *:has(~ .profile-info-wrapper-box),
    main + footer,
    footer.pp-footer,
    footer[class*="_footer_"],
    .profile-background-box-1,
    .profile-background-box-2,
    .profile-background-box-3 {
        display: none !important;
    }

    .profile-page-flex {
        z-index: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 2.75rem !important;
        width: 100% !important;
        max-width: 1080px !important;
        margin: 0 auto !important;
        padding: 4.5rem 1.5rem 5rem 1.5rem !important;
        box-sizing: border-box !important;
    }

    .pp-uc-background,
    .profile-page-container-flex-box {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .pp-top-bar-outer,
    .pp-top-header {
        position: fixed !important;
        width: 100% !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 100 !important;
        pointer-events: none !important;
    }

    .pp-top-bar {
        pointer-events: auto !important;
        background: rgba(13, 3, 14, 0.9) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border: none !important;
        border-bottom: none !important;
        box-shadow: 0 4px 25px rgba(0, 0, 0, 0.6) !important;
        align-items: center !important;
        margin-inline: auto !important;
    }

    .pp-top-bar-inner {
        max-width: 1780px !important;
        height: 3.5rem !important;
        padding: 0 1.5rem !important;
    }

    .pp-top-bar-logo h2 {
        font:
            700 1.35rem/1 "Fraunces",
            serif !important;
        font-style: italic !important;
        color: #ff5376 !important;
        letter-spacing: 0.02em !important;
        text-shadow: 0 0 16px rgba(230, 57, 86, 0.5) !important;
    }

    .pp-top-bar-logo p {
        font-size: 0 !important;
    }
    .pp-top-bar-logo p::after {
        content: "CUPID";
        font:
            700 0.68rem/1 "Jura",
            sans-serif !important;
        letter-spacing: 0.12em !important;
        color: #f7c873 !important;
        background: rgba(247, 200, 115, 0.15) !important;
        border: 1px solid rgba(247, 200, 115, 0.4) !important;
        padding: 0.18rem 0.55rem !important;
        border-radius: 999px !important;
        margin-left: 0.45rem !important;
        vertical-align: middle !important;
    }

    .pp-top-bar-search {
        background: rgba(255, 255, 255, 0.06) !important;
        backdrop-filter: blur(8px) !important;
        border: none !important;
        outline: none !important;
        border-radius: 999px !important;
        transition: all 250ms ease !important;
    }
    .pp-top-bar-search:hover,
    .pp-top-bar-search:focus-within {
        background: rgba(255, 255, 255, 0.12) !important;
        border: none !important;
        outline: none !important;
        box-shadow: 0 0 16px rgba(230, 57, 86, 0.35) !important;
    }

    .pp-top-bar-create-char::before,
    .pp-top-bar-create-char::after,
    .glow-on-hover::before,
    .glow-on-hover::after,
    .glow-on-hover:hover::before,
    .glow-on-hover:hover::after {
        display: none !important;
        content: none !important;
        opacity: 0 !important;
    }

    .pp-top-bar-create-char {
        position: relative !important;
        width: auto !important;
        min-width: max-content !important;
        height: 2.25rem !important;
        padding: 0 1.25rem !important;
        border-radius: 999px !important;
        background: linear-gradient(135deg, #e63956, #9b1933) !important;
        color: #ffffff !important;
        font:
            700 0.82rem/2.25rem "DM Sans",
            sans-serif !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        box-shadow: 0 4px 14px rgba(230, 57, 86, 0.45) !important;
        transition: all 250ms ease !important;
        border: none !important;
        outline: none !important;
        z-index: 1 !important;
    }
    .pp-top-bar-create-char:hover,
    .pp-top-bar-create-char:focus,
    a.pp-top-bar-create-char.glow-on-hover:hover {
        background: #ff5376 !important;
        color: #ffffff !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 20px rgba(230, 57, 86, 0.65) !important;
    }

    [class*="notificationsButton"],
    .pp-top-bar-notifications-button {
        all: unset !important;
        cursor: pointer !important;
        width: 2.25rem !important;
        height: 2.25rem !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.07) !important;
        border: none !important;
        outline: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        color: #ffffff !important;
        box-sizing: border-box !important;
        transition: all 250ms ease !important;
    }
    [class*="notificationsButton"]:hover,
    .pp-top-bar-notifications-button:hover {
        background: rgba(230, 57, 86, 0.25) !important;
        box-shadow: 0 0 14px rgba(230, 57, 86, 0.6) !important;
        border: none !important;
        outline: none !important;
    }
    [class*="notificationsButton"] svg,
    [class*="notificationIcon"],
    .pp-top-bar-notifications-icon {
        width: 1.2rem !important;
        height: 1.2rem !important;
        fill: #ffffff !important;
        stroke: #ffffff !important;
        color: #ffffff !important;
        display: block !important;
        margin: auto !important;
    }
    [class*="notificationsBadge"] {
        position: absolute !important;
        top: -3px !important;
        right: -3px !important;
        background: #e63956 !important;
        color: #ffffff !important;
        font:
            700 0.72rem/1 "Jura",
            sans-serif !important;
        padding: 0.15rem 0.4rem !important;
        border-radius: 999px !important;
        border: none !important;
        min-width: 1.15rem !important;
        height: 1.15rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
    }

    .pp-top-bar-inner .pp-top-bar-app-menu {
        all: unset !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        width: 2.25rem !important;
        height: 2.25rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        border: none !important;
        outline: none !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        transition: all 250ms ease !important;
    }
    .pp-top-bar-inner .pp-top-bar-app-menu:hover {
        box-shadow: 0 0 14px rgba(230, 57, 86, 0.6) !important;
        border: none !important;
        outline: none !important;
    }
    .pp-top-bar-inner .pp-top-bar-app-menu * {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        border: none !important;
    }

    [class*="notificationsPopover"],
    [class*="modalContent"],
    .chakra-popover__content {
        background: linear-gradient(165deg, #18081a, #0d030e) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;

        outline: none !important;

        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85) !important;
        color: #f7eef5 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    [class*="notificationsList"],
    [class*="notificationsBody"],
    .chakra-popover__body:has([class*="notification"]) {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        max-height: 420px !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 !important;
        margin: 0 !important;
        scrollbar-width: thin !important;
        scrollbar-color: #e63956 rgba(255, 255, 255, 0.05) !important;
    }
    [class*="notificationsList"]::-webkit-scrollbar {
        width: 6px !important;
    }
    [class*="notificationsList"]::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05) !important;
    }
    [class*="notificationsList"]::-webkit-scrollbar-thumb {
        background: #e63956 !important;
        border-radius: 999px !important;
    }

    [class*="notificationsList"] > *,
    [class*="notificationItem"],
    [class*="notificationRow"],
    [class*="notificationCard"] {
        border-radius: 0 !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid rgba(230, 57, 86, 0.15) !important;
        padding: 0 !important;
        transition: background-color 180ms ease !important;
        box-sizing: border-box !important;
    }

    [class*="contentWrapperUnread"],
    [class*="contentWrapper"]:has([class*="Unread"]),
    [class*="contentWrapper"]:has([class*="unread"]),
    [class*="notificationItem"][class*="unread"],
    [class*="moderationNotification"],
    [class*="verificationNotification"],
    [class*="announcementNotification"] {
        background: rgba(230, 57, 86, 0.14) !important;
        border-radius: 0 !important;
    }

    [class*="contentWrapper"] {
        background: transparent !important;
        border-radius: 0 !important;
        transition: background-color 180ms ease !important;
    }

    [class*="unreadIndicator"] {
        background: #e63956 !important;
        box-shadow: 0 0 10px rgba(230, 57, 86, 0.7) !important;
        border-radius: 0 !important;
    }

    [class*="notificationItem"]:hover,
    [class*="contentWrapper"]:hover,
    [class*="contentWrapperUnread"]:hover,
    [class*="notificationsList"] > *:hover {
        background: rgba(230, 57, 86, 0.25) !important;
    }

    [class*="archiveButton"] {
        background: rgba(18, 5, 20, 0.8) !important;
        border: 1px solid rgba(230, 57, 86, 0.35) !important;
        border-radius: 0.5rem !important;
        color: #ffe6ee !important;
    }
    [class*="archiveButton"]:hover {
        background: #e63956 !important;
        color: #ffffff !important;
        border-color: #ff5376 !important;
    }

    .chakra-menu__menu-list,
    div[role="menu"],
    .pp-top-bar-app-menu-list,
    .profile-top-bar-app-menu-list {
        background: linear-gradient(165deg, #18081a, #0d030e) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        outline: none !important;
        border-radius: 1rem !important;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85) !important;
        padding: 0.4rem !important;
        min-width: 190px !important;
        overflow: hidden !important;
        z-index: 9999 !important;
    }

    .chakra-menu__menuitem,
    button[role="menuitem"],
    a[role="menuitem"],
    [role="menuitem"],
    .pp-top-bar-app-menu-list-item,
    .profile-top-bar-app-menu-list-item {
        all: unset !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem !important;
        width: 100% !important;
        padding: 0.65rem 1rem !important;
        border-radius: 0.65rem !important;
        background: transparent !important;
        color: #f7eef5 !important;
        font-family: "DM Sans", sans-serif !important;
        font-size: 0.88rem !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
        transition:
            background 180ms ease,
            color 180ms ease !important;
        border: none !important;
        outline: none !important;
    }

    .chakra-menu__menuitem:hover,
    .chakra-menu__menuitem:focus,
    .chakra-menu__menuitem[data-focus],
    [role="menuitem"]:hover,
    [role="menuitem"]:focus,
    [role="menuitem"][data-focus],
    .pp-top-bar-app-menu-list-item:hover,
    .profile-top-bar-app-menu-list-item:hover {
        background: rgba(230, 57, 86, 0.22) !important;
        color: #ffffff !important;
        border: none !important;
        outline: none !important;
    }

    .profile-uc-options-menu-item svg {
        color: #ff5376 !important;
        fill: currentColor !important;
        width: 1.05rem !important;
        height: 1.05rem !important;
        flex-shrink: 0 !important;
    }

    .pp-uc-background {
        position: relative !important;
        background: linear-gradient(
            165deg,
            #18071a,
            #100411 65%,
            #0a020b
        ) !important;
        border: none !important;
        outline: none !important;
        border-radius: 2rem !important;
        box-shadow:
            0 24px 60px rgba(0, 0, 0, 0.75),
            0 0 45px rgba(230, 57, 86, 0.1) !important;
        overflow: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .profile-info-wrapper-box {
        display: contents !important;
    }
    .profile-info-stack {
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .profile-about-me {
        display: contents !important;
    }

    .dt-cover-wrap {
        order: -2 !important;
        position: relative;
        width: 100%;
        height: 220px;
        border-radius: 2rem 2rem 0 0;
        overflow: hidden;
        box-sizing: border-box;
    }
    .dt-cover-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 30%;
        filter: brightness(0.8) contrast(1.15);
        transition: transform 600ms ease;
    }
    .dt-cover-wrap:hover .dt-cover-img {
        transform: scale(1.04);
    }
    .dt-cover-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to bottom,
            rgba(13, 3, 14, 0.2) 0%,
            rgba(16, 4, 17, 0.95) 100%
        );
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        padding: 1.25rem 1.75rem;
        box-sizing: border-box;
    }
    .dt-cover-links {
        display: flex;
        gap: 0.75rem;
        flex-wrap: wrap;
    }
    .dt-cover-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.4rem 0.95rem;
        border-radius: 999px;
        background: rgba(16, 4, 17, 0.85);
        backdrop-filter: blur(10px);

        color: #f7c873;
        font-family: "Jura", sans-serif;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-decoration: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
        white-space: nowrap;
    }
    .dt-icon-sm {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

    .profile-info-hstack {
        order: -1 !important;
        position: relative !important;

        margin-top: -4.5rem !important;
        padding: 0 2rem !important;
        display: flex !important;
        flex-flow: row wrap !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        gap: 1.5rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .pp-uc-avatar-container {
        height: 9rem !important;
        width: 9rem !important;
        aspect-ratio: 1 / 1 !important;
        flex-shrink: 0 !important;
        border-radius: 2rem !important;
        overflow: hidden !important;
    }

    .pp-uc-avatar {
        height: 100% !important;
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 2rem !important;
        overflow: hidden !important;
        outline: 4px solid #100411 !important;

        box-shadow:
            0 12px 30px rgba(0, 0, 0, 0.7),
            0 0 25px rgba(230, 57, 86, 0.4) !important;
        transition: transform 250ms ease !important;
        box-sizing: border-box !important;
    }
    .pp-uc-avatar:hover {
        transform: scale(1.04) rotate(-2deg);
    }

    .pp-uc-avatar img,
    .pp-uc-avatar .chakra-avatar__img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        aspect-ratio: 1 / 1 !important;
        display: block !important;
        border-radius: inherit !important;
    }

    .chakra-avatar__initials {
        background: linear-gradient(135deg, #e63956, #801026) !important;
        color: #ffffff !important;
        font:
            700 2.5rem "Fraunces",
            serif !important;
    }

    .profile-info-stack-inner {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.25rem !important;
        margin-bottom: 0.5rem !important;
    }
    .profile-info-stack-inner::before {
        content: "The Random Kid";
        font:
            700 1.9rem/1.1 "Fraunces",
            serif !important;
        font-style: italic !important;
        color: #ffffff !important;
        text-shadow: 0 2px 14px rgba(230, 57, 86, 0.4);
    }
    .pp-uc-title {
        font-family: "Jura", sans-serif !important;
        font-weight: 700 !important;
        font-size: 0.95rem !important;
        color: #ff5376 !important;
        letter-spacing: 0.05em !important;
    }
    .pp-uc-followers-count {
        font-family: "Jura", sans-serif !important;
        font-size: 0.8rem !important;
        color: #f7c873 !important;
        font-weight: 600 !important;
        margin: 0.25rem 0 !important;
    }
    .pp-uc-followers-count span:nth-of-type(2) {
        font-size: 0 !important;
    }
    .pp-uc-followers-count::after {
        content: " Mutual Matches";
        font-family: "Jura", sans-serif !important;
        font-size: 0.8rem !important;
        color: #f7c873 !important;
    }
    .pp-uc-member-since {
        font-family: "DM Sans", sans-serif !important;
        font-size: 0.78rem !important;
        color: #c4a1b5 !important;
    }

    .pp-uc-follow-button {
        background: linear-gradient(135deg, #e63956, #9b1933) !important;
        border: 1px solid rgba(230, 57, 86, 0.5) !important;
        color: #ffffff !important;
        border-radius: 999px !important;
        padding: 0.55rem 1.6rem !important;
        font:
            700 0.85rem "Jura",
            sans-serif !important;
        letter-spacing: 0.06em !important;
        box-shadow: 0 4px 16px rgba(230, 57, 86, 0.4) !important;
        transition: all 250ms ease !important;
    }
    .pp-uc-follow-button:hover {
        background: #ff5376 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 22px rgba(230, 57, 86, 0.6) !important;
    }

    .pp-uc-options-menu,
    button.pp-uc-options-menu,
    .profile-user-card-options-menu,
    .profile-info-hstack .chakra-menu__menu-button {
        background: rgba(255, 255, 255, 0.08) !important;

        border-radius: 999px !important;
        color: #ffe6ee !important;
        padding: 0.55rem 1.1rem !important;
        font:
            700 0.85rem "Jura",
            sans-serif !important;
        letter-spacing: 0.05em !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.4rem !important;
        cursor: pointer !important;
        transition: all 250ms ease !important;
    }
    .pp-uc-options-menu:hover,
    button.pp-uc-options-menu:hover,
    .profile-user-card-options-menu:hover,
    .profile-info-hstack .chakra-menu__menu-button:hover {
        background: rgba(230, 57, 86, 0.25) !important;
        border-color: #ff5376 !important;
        box-shadow: 0 0 14px rgba(230, 57, 86, 0.4) !important;
    }

    .profile-about-me + div {
        order: -1 !important;
        padding: 0 2rem 0.5rem 2rem !important;
        box-sizing: border-box !important;
    }

    .dt-thought-card {
        background: rgba(22, 7, 23, 0.75);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(230, 57, 86, 0.3);
        border-radius: 1.25rem;
        padding: 0.9rem 1.4rem;
        margin: 1.25rem 2rem 0 2rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
        box-sizing: border-box;
        width: auto;
    }
    .dt-thought-icon-box {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(230, 57, 86, 0.15);
        border: 1px solid rgba(230, 57, 86, 0.35);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .dt-thought-text {
        font-family: "DM Sans", sans-serif;
        font-size: 0.88rem;
        font-style: italic;
        line-height: 1.5;
        color: #ffe6ee;
        margin: 0;
        word-break: break-word;
    }

    .dt-bio-body {
        padding: 1.5rem 2rem 2.5rem 2rem;
        display: flex;
        flex-direction: column;
        gap: 1.75rem;
        box-sizing: border-box;
        width: 100%;
    }

    .tab-identifiers {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        visibility: hidden !important;
    }

    .dt-tabs-nav {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        gap: 0.25rem;
        border-bottom: 1px solid rgba(230, 57, 86, 0.3);
        padding-bottom: 0;
        width: 100%;
        box-sizing: border-box;
    }
    .dt-tabs-nav::-webkit-scrollbar {
        display: none;
    }

    .dt-tab-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.65rem 1.25rem;
        color: #ff5376;
        font-family: "DM Sans", sans-serif;
        font-weight: 700;
        font-size: 0.92rem;
        text-decoration: none;
        border-bottom: 2px solid transparent;
        transition:
            color 250ms,
            border-color 250ms;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .dt-tab-btn:hover {
        color: #ffffff;
    }

    [href="#tab-vibe"],
    #root:has(#tab-vibe:target) [href="#tab-vibe"],
    #root:has(#tab-menu:target) [href="#tab-menu"],
    #root:has(#tab-limits:target) [href="#tab-limits"],
    #root:has(#tab-friends:target) [href="#tab-friends"],
    #root:has(#tab-discord:target) [href="#tab-discord"] {
        color: #ffffff !important;
        border-bottom: 2px solid #e63956 !important;
        text-shadow: 0 0 10px rgba(230, 57, 86, 0.6);
    }

    #root:has(
            #tab-menu:target,
            #tab-limits:target,
            #tab-friends:target,
            #tab-discord:target
        )
        [href="#tab-vibe"] {
        color: #ff5376 !important;
        border-bottom: 2px solid transparent !important;
        text-shadow: none !important;
    }

    .dt-section {
        display: none;
        position: relative;
        padding-top: 1.25rem;
        width: 100%;
        box-sizing: border-box;
        animation: dtFadeIn 300ms ease forwards;
    }
    @keyframes dtFadeIn {
        from {
            opacity: 0;
            transform: translateY(6px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .dt-section-vibe {
        display: block;
    }

    #root:has(#tab-vibe:target) .dt-section-vibe,
    #root:has(#tab-menu:target) .dt-section-menu,
    #root:has(#tab-limits:target) .dt-section-limits,
    #root:has(#tab-friends:target) .dt-section-friends,
    #root:has(#tab-discord:target) .dt-section-discord {
        display: block !important;
    }

    #root:has(
            #tab-menu:target,
            #tab-limits:target,
            #tab-friends:target,
            #tab-discord:target
        )
        .dt-section-vibe {
        display: none !important;
    }

    #root:has(#tab-vibe:target) .dt-section:not(.dt-section-vibe),
    #root:has(#tab-menu:target) .dt-section:not(.dt-section-menu),
    #root:has(#tab-limits:target) .dt-section:not(.dt-section-limits),
    #root:has(#tab-friends:target) .dt-section:not(.dt-section-friends),
    #root:has(#tab-discord:target) .dt-section:not(.dt-section-discord) {
        display: none !important;
    }

    .dt-section::after {
        position: absolute !important;
        top: 0.25rem !important;
        right: 1.25rem !important;
        content: "01" !important;
        font:
            900 3.25rem/1 "Fraunces",
            serif !important;
        color: rgba(230, 57, 86, 0.22) !important;
        letter-spacing: -0.04em !important;
        pointer-events: none !important;
        user-select: none !important;
        z-index: 1 !important;
    }
    .dt-section-menu::after {
        content: "02" !important;
    }
    .dt-section-limits::after {
        content: "03" !important;
    }
    .dt-section-friends::after {
        content: "04" !important;
    }
    .dt-section-discord::after {
        content: "05" !important;
    }

    .dt-section > h2,
    .dt-section > h2.chakra-heading,
    .dt-section > .dt-section-title,
    .dt-section-title {
        font:
            700 1.65rem/1.25 "Fraunces",
            serif !important;
        font-style: italic !important;
        color: #ffffff !important;
        display: block !important;
        margin: 0 !important;
        margin-bottom: 1.25rem !important;
        padding-right: 4.5rem !important;
        letter-spacing: 0.02em !important;
        box-sizing: border-box !important;
    }
    .dt-section > h2::first-letter,
    .dt-section > h2.chakra-heading::first-letter,
    .dt-section > .dt-section-title::first-letter,
    .dt-section-title::first-letter {
        color: #e63956 !important;
    }

    .dt-grid {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)) !important;
        gap: 1.25rem !important;
        margin-top: 0.5rem !important;
        box-sizing: border-box !important;
    }

    .dt-card {
        background: rgba(18, 6, 19, 0.75);
        outline: 1px solid rgba(230, 57, 86, 0.3);
        outline-offset: -1px;
        border-radius: 1.5rem;
        padding: 1.4rem 1.6rem;
        transition:
            transform 250ms ease,
            outline-color 250ms ease,
            box-shadow 250ms ease;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
        box-sizing: border-box;
    }
    .dt-card:hover {
        transform: translateY(-3px);
        outline-color: #ff5376;
        box-shadow: 0 10px 30px rgba(230, 57, 86, 0.15);
    }

    .dt-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-family: "Jura", sans-serif;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #f7c873;
        background: rgba(247, 200, 115, 0.12);
        border: 1px solid rgba(247, 200, 115, 0.35);
        padding: 0.2rem 0.65rem;
        border-radius: 999px;
        margin-bottom: 0.75rem;
        width: fit-content;
    }
    .dt-badge.danger {
        color: #ff5252;
        background: rgba(255, 82, 82, 0.12);
        border-color: rgba(255, 82, 82, 0.4);
    }

    .dt-card > h4,
    .dt-card > h4.chakra-heading,
    .dt-card > .dt-card-heading,
    .dt-card-heading {
        font:
            600 1.15rem/1.3 "Fraunces",
            serif !important;
        font-style: italic !important;
        color: #ffffff !important;
        margin: 0 0 0.75rem 0 !important;
        padding: 0 !important;
        letter-spacing: normal !important;
    }
    .dt-card > h4::first-letter,
    .dt-card > h4.chakra-heading::first-letter,
    .dt-card-heading::first-letter {
        color: inherit !important;
    }
    .dt-card-body {
        font-size: 0.88rem;
        line-height: 1.65;
        color: #d8bad0;
        margin: 0;
    }

    .dt-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.75rem;
    }
    .dt-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        font-family: "Jura", sans-serif;
        font-size: 0.76rem;
        font-weight: 600;
        padding: 0.35rem 0.85rem;
        border-radius: 999px;
        background: rgba(230, 57, 86, 0.12);
        border: 1px solid rgba(230, 57, 86, 0.35);
        color: #ffe6ee;
        transition: all 200ms ease;
    }
    .dt-pill:hover {
        background: rgba(230, 57, 86, 0.28);
        border-color: #ff5376;
    }
    .dt-pill.strike {
        background: rgba(255, 82, 82, 0.08);
        border: 1px dashed rgba(255, 82, 82, 0.4);
        color: #e09696;
        text-decoration: line-through;
    }

    .dt-faq-list {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
        margin-top: 0.5rem;
    }
    .dt-faq-item {
        background: rgba(230, 57, 86, 0.06);
        border: 1px solid rgba(230, 57, 86, 0.2);
        border-radius: 0.85rem;
        overflow: hidden;
        transition:
            background 200ms ease,
            border-color 200ms ease,
            box-shadow 200ms ease;
    }
    .dt-faq-item:hover {
        background: rgba(230, 57, 86, 0.1);
        border-color: rgba(255, 77, 141, 0.4);
    }
    .dt-faq-item[open] {
        background: rgba(230, 57, 86, 0.12);
        border-color: rgba(255, 77, 141, 0.5);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    }
    .dt-faq-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        cursor: pointer;
        user-select: none;
        font-family: "DM Sans", sans-serif;
        font-size: 0.86rem;
        font-weight: 600;
        color: #ffe6ee;
        transition: color 200ms ease;
        list-style: none;
        outline: none;
    }
    .dt-faq-summary::-webkit-details-marker,
    .dt-faq-summary::marker {
        display: none !important;
    }
    .dt-faq-summary:hover {
        color: #ffffff;
    }
    .dt-faq-arrow {
        display: inline-block;
        width: 0.45rem;
        height: 0.45rem;
        border-right: 2px solid #ff4d8d;
        border-bottom: 2px solid #ff4d8d;
        transform: rotate(45deg);
        transition:
            transform 250ms cubic-bezier(0.16, 1, 0.3, 1),
            border-color 200ms ease;
        flex-shrink: 0;
        margin-left: 0.75rem;
    }
    .dt-faq-item[open] .dt-faq-arrow {
        transform: rotate(-135deg);
    }
    .dt-faq-content {
        padding: 0.65rem 1rem 0.85rem 1rem;
        font-family: "DM Sans", sans-serif;
        font-size: 0.82rem;
        line-height: 1.55;
        color: #d8c2cf;
        border-top: 1px solid rgba(230, 57, 86, 0.14);
    }

    .dt-friend-card {
        display: flex;
        align-items: center;
        gap: 1.15rem;
        background: rgba(18, 6, 19, 0.75);
        outline: 1px solid rgba(230, 57, 86, 0.3);
        outline-offset: -1px;
        border-radius: 1.5rem;
        padding: 1rem 1.25rem;
        text-decoration: none;
        transition: all 250ms ease;
        width: 100%;
        box-sizing: border-box;
    }
    .dt-friend-card:hover {
        transform: translateY(-3px);
        outline-color: #ff5376;
        box-shadow: 0 10px 30px rgba(230, 57, 86, 0.2);
    }
    .dt-friend-avatar {
        width: 64px;
        height: 64px;
        border-radius: 1.25rem;
        object-fit: cover;
        border: 2px solid #e63956;
        flex-shrink: 0;
    }
    .dt-friend-info {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        flex-grow: 1;
    }
    .dt-friend-name {
        font:
            700 1.05rem "Fraunces",
            serif;
        font-style: italic;
        color: #ffffff;
    }
    .dt-friend-handle {
        font:
            600 0.78rem "Jura",
            sans-serif;
        color: #ff5376;
    }
    .dt-friend-desc {
        font-size: 0.8rem;
        color: #d8bad0;
        line-height: 1.4;
        margin: 0;
    }

    .dt-discord-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        margin-top: 0.5rem !important;
        width: 100%;
        box-sizing: border-box;
    }
    .dt-discord-server-card {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        width: 100%;
        aspect-ratio: 16 / 9;
        background: #0e0410;
        border: 1.5px solid rgba(230, 57, 86, 0.45);
        border-radius: 1.5rem;
        overflow: hidden;
        text-decoration: none !important;
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6);
        transition:
            transform 250ms ease,
            box-shadow 250ms ease,
            border-color 250ms ease;
        box-sizing: border-box;
        cursor: pointer;
        isolation: isolate;
        transform: translateZ(0);
        -webkit-mask-image: -webkit-radial-gradient(white, black);
    }
    .dt-discord-server-card:first-child {
        grid-column: 1 / -1;
        aspect-ratio: 21 / 9;
        max-height: 280px;
    }
    .dt-discord-server-card:hover {
        transform: translateY(-3px);
        border-color: #e63956;
        box-shadow: 0 16px 40px rgba(230, 57, 86, 0.35);
    }
    .dt-discord-server-banner {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        filter: brightness(0.85);
        transition:
            transform 350ms ease,
            filter 350ms ease;
        display: block;
    }
    .dt-discord-server-card:hover .dt-discord-server-banner {
        transform: scale(1.03);
        filter: brightness(0.92);
    }
    .dt-discord-server-content {
        position: relative;
        z-index: 2;
        width: 100%;
        box-sizing: border-box;
        padding: 0.75rem 1.15rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        min-height: 3.25rem;
        background: linear-gradient(
            to top,
            rgba(14, 4, 16, 0.98) 0%,
            rgba(14, 4, 16, 0.8) 50%,
            rgba(14, 4, 16, 0.2) 85%,
            transparent 100%
        );
    }
    .dt-discord-server-content > h3,
    .dt-discord-server-content > h3.chakra-heading,
    .dt-discord-server-content > .dt-discord-server-name,
    .dt-discord-server-name {
        font-family: "Fraunces", serif !important;
        font-size: 1.15rem !important;
        font-weight: 700 !important;
        font-style: italic !important;
        color: #ffffff !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        letter-spacing: normal !important;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
    }
    .dt-discord-server-content > h3::first-letter,
    .dt-discord-server-content > h3.chakra-heading::first-letter,
    .dt-discord-server-name::first-letter {
        color: inherit !important;
    }
    .dt-discord-join-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.4rem;
        background: rgba(18, 6, 19, 0.75);
        border: 1px solid rgba(230, 57, 86, 0.5);
        color: #f7eef5;
        font-family: "DM Sans", sans-serif;
        font-weight: 700;
        font-size: 0.82rem;
        letter-spacing: 0.03em;
        padding: 0.38rem 0.85rem;
        border-radius: 999px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        transition:
            transform 200ms ease,
            background 200ms ease,
            border-color 200ms ease,
            box-shadow 200ms ease,
            color 200ms ease;
        pointer-events: none;
        line-height: 1 !important;
        box-sizing: border-box;
    }
    .dt-discord-join-btn .dt-join-arrow {
        color: #ff5376;
        transition:
            transform 200ms ease,
            color 200ms ease;
        display: inline-block;
    }
    .dt-discord-server-card:hover .dt-discord-join-btn {
        background: #e63956;
        border-color: #ff7799;
        color: #ffffff;
        transform: translateY(-1px);
        box-shadow: 0 4px 18px rgba(230, 57, 86, 0.65);
    }
    .dt-discord-server-card:hover .dt-discord-join-btn .dt-join-arrow {
        color: #ffffff;
        transform: translateX(3px);
    }

    .dt-guides-wrap {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
        margin-top: 1rem;
        width: 100%;
        box-sizing: border-box;
    }
    .dt-guide-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.85rem 1.15rem;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(230, 57, 86, 0.25);
        border-radius: 1rem;
        text-decoration: none;
        color: #ffe6ee;
        transition: all 200ms ease;
        box-sizing: border-box;
    }
    .dt-guide-item:hover {
        background: rgba(230, 57, 86, 0.18);
        border-color: #ff5376;
        transform: translateX(4px);
    }
    .dt-guide-title {
        font:
            600 0.85rem "DM Sans",
            sans-serif;
        display: flex;
        align-items: center;
        gap: 0.6rem;
    }

    .pp-tabs-wrapper,
    .profile-tabs-wrapper,
    .chakra-tabs__tab-list {
        background: rgba(22, 8, 23, 0.85) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border: none !important;
        outline: none !important;
        border-radius: 999px !important;
        padding: 0.35rem !important;
        gap: 0.35rem !important;
        display: inline-flex !important;
        width: fit-content !important;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6) !important;
    }
    .pp-tabs-indicator {
        display: none !important;
    }
    .pp-tabs-button {
        border-radius: 999px !important;
        padding: 0.55rem 1.4rem !important;
        font:
            700 0.82rem "Jura",
            sans-serif !important;
        letter-spacing: 0.08em !important;
        color: #c4a1b5 !important;
        background: transparent !important;
        border: none !important;
        transition: all 250ms ease !important;
    }
    .pp-tabs-button:hover {
        color: #ffffff !important;
        background: rgba(230, 57, 86, 0.18) !important;
    }
    .pp-tabs-button[aria-selected="true"] {
        background: linear-gradient(135deg, #e63956, #9b1933) !important;
        color: #ffffff !important;
        box-shadow: 0 4px 14px rgba(230, 57, 86, 0.45) !important;
    }

    .character-list-pagination-flex {
        align-items: center !important;
        margin-top: 1.5rem !important;
    }
    .pp-pg-total-count {
        font:
            700 1.5rem "Fraunces",
            serif !important;
        color: #ff5376 !important;
    }
    .pp-pg-total-text {
        font-size: 0 !important;
    }
    .pp-pg-total-text::after {
        content: " Potential Matches";
        font:
            600 0.85rem "Jura",
            sans-serif !important;
        color: #c4a1b5 !important;
    }

    .profile-character-search-input {
        background: rgba(20, 7, 21, 1) !important;
        border: none !important;
        outline: none !important;
        border-radius: 999px !important;
        color: #ffffff !important;
        padding-left: 2.25rem !important;
    }
    .profile-character-search-input:focus {
        box-shadow: 0 0 16px rgba(230, 57, 86, 0.4) !important;
        border: none !important;
        outline: none !important;
    }
    .pp-fl-filter-button,
    #root .react-select__control {
        background: rgba(20, 7, 21, 1) !important;
        border: none !important;
        outline: none !important;
        border-radius: 999px !important;
        transition: all 200ms ease !important;
    }
    .pp-fl-filter-button:hover,
    #root .react-select__control:hover {
        background: rgba(230, 57, 86, 0.15) !important;
    }
    .react-select__single-value {
        color: #ffe6ee !important;
        font-family: "Jura", sans-serif !important;
        font-weight: 600 !important;
    }
    #root .react-select__menu {
        background: linear-gradient(165deg, #18081a, #0d030e) !important;
        border: none !important;
        outline: none !important;
        border-radius: 1.25rem !important;
        box-shadow: 0 14px 35px rgba(0, 0, 0, 1) !important;
        overflow: hidden !important;
    }
    #root .react-select__option {
        background: transparent !important;
        color: #ffe6ee !important;
        font-family: "DM Sans", sans-serif !important;
        transition: background 200ms ease !important;
    }
    #root .react-select__option:hover {
        background: rgba(230, 57, 86, 0.25) !important;
        color: #ffffff !important;
    }

    #root ~ div .pp-fl-modal {
        background: linear-gradient(165deg, #18081a, #0d030e) !important;
        border: none !important;
        outline: none !important;
        border-radius: 2rem !important;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8) !important;
    }
    .profile-filter-modal-modal-overlay {
        backdrop-filter: blur(10px) !important;
        background: rgba(10, 3, 11, 0.75) !important;
    }

    .pp-cc-list-container {
        display: flex !important;
        flex-flow: row nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 2.25rem !important;
        padding: 2.5rem 1.5rem 3rem 2rem !important;
        mask-image: linear-gradient(
            to right,
            transparent 0,
            #000 24px,
            #000 calc(100% - 24px),
            transparent 100%
        );
        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0,
            #000 24px,
            #000 calc(100% - 24px),
            transparent 100%
        );
        counter-reset: bot-card;
    }
    .pp-cc-list-container::-webkit-scrollbar {
        height: 6px !important;
    }
    .pp-cc-list-container::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 999px !important;
    }
    .pp-cc-list-container::-webkit-scrollbar-thumb {
        background: #e63956 !important;
        border-radius: 999px !important;
    }

    .pp-cc-wrapper {
        flex: 0 0 315px !important;
        width: 315px !important;
        max-width: 85vw !important;
        min-width: 290px !important;
        scroll-snap-align: start !important;
        scroll-snap-stop: normal !important;
        position: relative !important;
        container-type: inline-size !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        counter-increment: bot-card;
    }

    .pp-cc-wrapper::before {
        pointer-events: none !important;
        position: absolute !important;
        top: 0.25rem !important;
        left: 0.75rem !important;
        content: counter(bot-card) !important;
        font:
            900 4.75rem/1 "Fraunces",
            serif !important;
        color: rgba(255, 77, 141, 0.45) !important;
        -webkit-text-stroke: 0.75px rgba(14, 4, 16, 0.45) !important;
        paint-order: stroke fill !important;
        text-shadow: 0 4px 16px rgba(0, 0, 0, 0.85) !important;
        z-index: 10 !important;
        letter-spacing: -0.04em !important;
    }

    .pp-cc-gradient-1,
    .pp-cc-gradient-2,
    .pp-cc-gradient-3,
    [class*="pp-cc-gradient"],
    .pp-cc-star-line,
    .profile-character-card-creator-name-link {
        display: none !important;
    }

    .profile-character-card-stack-link-component,
    .pp-cc-ribbon,
    .pp-cc-ribbon-wrap {
        display: contents !important;
    }

    .profile-character-card-stack {
        position: relative !important;
        display: grid !important;
        grid-template-rows: 310px 44px auto !important;
        grid-template-columns: 100% !important;
        gap: 0 !important;
        width: 100% !important;
        border-radius: 1.75rem !important;
        overflow: hidden !important;
        border: 1px solid rgba(230, 57, 86, 0.35) !important;
        outline: none !important;
        background: #140516 !important;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
        transition:
            border-color 250ms ease,
            box-shadow 250ms ease !important;
        box-sizing: border-box !important;
    }
    .pp-cc-wrapper:hover .profile-character-card-stack {
        border-color: #ff5376 !important;
        box-shadow: 0 20px 48px rgba(230, 57, 86, 0.3) !important;
    }

    .profile-character-card-avatar-aspect-ratio {
        grid-row: 1 / 2 !important;
        grid-column: 1 / -1 !important;
        position: relative !important;
        width: 100% !important;
        height: 310px !important;
        aspect-ratio: unset !important;
        overflow: hidden !important;
        border-radius: 1.75rem 1.75rem 0 0 !important;
        z-index: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }
    .profile-character-card-avatar-aspect-ratio::before {
        content: unset !important;
    }

    .profile-character-card-avatar-aspect-ratio::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background:
            linear-gradient(
                to bottom,
                rgba(18, 4, 19, 0.85) 0%,
                rgba(18, 4, 19, 0.4) 30%,
                transparent 55%
            ),
            linear-gradient(
                to top,
                rgba(18, 4, 19, 0.95) 0%,
                rgba(18, 4, 19, 0.5) 40%,
                transparent 70%
            ) !important;
        z-index: 2 !important;
        pointer-events: none !important;
    }

    #root .pp-cc-avatar {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border: none !important;
        border-radius: 0 !important;
        transform: none !important;
        transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    .pp-cc-wrapper:hover #root .pp-cc-avatar {
        transform: scale(1.06) !important;
    }

    .pp-cc-wrapper:has(.pp-tag-limitless) .profile-character-card-stack::after {
        grid-row: 1 / 2 !important;
        grid-column: 1 / -1 !important;
        position: absolute !important;
        top: 1rem !important;
        right: 1rem !important;
        bottom: unset !important;
        left: unset !important;
        z-index: 4 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        content: "NSFW" !important;
        font:
            800 0.72rem/1 "Jura",
            sans-serif !important;
        color: #f7c873 !important;
        background: rgba(18, 5, 20, 0.5) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        border: 1px solid rgba(247, 200, 115, 0.5) !important;
        border-radius: 999px !important;
        padding: 0.22rem 0.65rem !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6) !important;
    }

    .profile-character-card-stack-link-component-box {
        grid-row: 1 / 2 !important;
        grid-column: 1 / -1 !important;
        position: absolute !important;
        top: unset !important;
        bottom: 1rem !important;
        left: 1.25rem !important;
        right: 1.25rem !important;
        z-index: 3 !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        min-height: unset !important;
        border-radius: 0 !important;
        pointer-events: auto !important;
    }
    .profile-character-card-stack-link-component-box::before {
        content: unset !important;
    }

    .pp-cc-name {
        color: #ffffff !important;
        font:
            700 1.35rem/1.2 "Fraunces",
            serif !important;
        font-style: italic !important;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
    }

    .profile-character-card-description-box {
        grid-row: 1 / 2 !important;
        grid-column: 1 / -1 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 310px !important;
        max-height: 310px !important;
        z-index: 6 !important;
        background: #0e0410 !important;
        border-radius: 1.75rem 1.75rem 0 0 !important;
        border: none !important;
        outline: none !important;
        padding: 1.6rem 1.4rem !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        transform: translateY(101%) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition:
            transform 350ms cubic-bezier(0.16, 1, 0.3, 1),
            opacity 250ms ease,
            visibility 350ms !important;
        pointer-events: none !important;
    }

    .pp-cc-wrapper:hover .profile-character-card-description-box {
        transform: translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .pp-cc-description,
    .pp-cc-description * {
        margin: 0 !important;
        font:
            500 0.88rem/1.65 "DM Sans",
            sans-serif !important;
        color: #ffe6ee !important;
        pointer-events: none !important;
    }

    .profile-character-card-stats-box,
    #root .profile-character-card-stats-box,
    div.profile-character-card-stats-box {
        grid-row: 2 / 3 !important;
        grid-column: 1 / -1 !important;
        position: relative !important;
        top: unset !important;
        right: unset !important;
        bottom: unset !important;
        left: unset !important;
        width: 100% !important;
        height: 44px !important;
        z-index: 3 !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #1a081c !important;
        border-top: 1px solid rgba(230, 57, 86, 0.25) !important;
        box-sizing: border-box !important;
        pointer-events: auto !important;
    }

    .pp-cc-chats {
        display: contents !important;
    }

    .profile-character-cards-chat-count-tbmessages,
    .profile-character-card-public-chats-icon,
    .profile-character-card-box::before {
        display: none !important;
    }

    .pp-cc-chats-count,
    #root .pp-cc-chats-count,
    span.pp-cc-chats-count {
        all: unset !important;
        position: absolute !important;
        left: 1.25rem !important;
        top: 0 !important;
        height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        font-family: "Jura", sans-serif !important;
        font-size: 0.8rem !important;
        line-height: 1 !important;
        font-weight: 600 !important;
        color: #c4a1b5 !important;
        text-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
        letter-spacing: 0.02em !important;
        z-index: 5 !important;
    }
    .pp-cc-chats-count::after {
        content: " msgs" !important;
        font-family: "Jura", sans-serif !important;
        font-weight: 600 !important;
        font-size: 0.8rem !important;
        color: #c4a1b5 !important;
        margin-left: 0.25rem !important;
    }

    .pp-cc-public-chats,
    #root .pp-cc-public-chats,
    div.pp-cc-public-chats {
        all: unset !important;
        position: absolute !important;
        left: 50% !important;
        top: 0 !important;
        transform: translateX(-50%) !important;
        height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 5 !important;
    }
    .pp-cc-public-chats-count,
    #root .pp-cc-public-chats-count,
    span.pp-cc-public-chats-count {
        all: unset !important;
        font-family: "Jura", sans-serif !important;
        font-size: 0.8rem !important;
        line-height: 1 !important;
        font-weight: 600 !important;
        color: #c4a1b5 !important;
        text-shadow: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
        letter-spacing: 0.02em !important;
    }
    .pp-cc-public-chats-count::after {
        content: " pub" !important;
        font-family: "Jura", sans-serif !important;
        font-weight: 600 !important;
        font-size: 0.8rem !important;
        color: #c4a1b5 !important;
        margin-left: 0.25rem !important;
    }

    .profile-character-card-box,
    #root .profile-character-card-box,
    div.profile-character-card-box {
        grid-row: 2 / 3 !important;
        grid-column: 1 / -1 !important;
        position: absolute !important;
        top: 0 !important;
        right: 1.25rem !important;
        bottom: unset !important;
        left: unset !important;
        height: 44px !important;
        width: auto !important;
        z-index: 5 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        pointer-events: auto !important;
    }
    .pp-cc-tokens-count,
    #root .pp-cc-tokens-count,
    p.pp-cc-tokens-count,
    .profile-character-card-tokens-count {
        all: unset !important;
        font-family: "Jura", sans-serif !important;
        font-size: 0.8rem !important;
        line-height: 1 !important;
        font-weight: 600 !important;
        color: #c4a1b5 !important;
        text-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        letter-spacing: 0.02em !important;
    }

    .pp-cc-tags {
        grid-row: 3 / 4 !important;
        grid-column: 1 / -1 !important;
        position: relative !important;
        z-index: 10 !important;
        width: 100% !important;
        min-height: 80px !important;
        padding: 0.85rem 1rem 1.15rem 1rem !important;
        background: #120413 !important;
        border-top: 1px solid rgba(230, 57, 86, 0.18) !important;
        box-sizing: border-box !important;
        display: block !important;
        pointer-events: auto !important;
        overflow: visible !important;
        border-radius: 0 0 1.75rem 1.75rem !important;
        margin: 0 !important;
    }
    .pp-cc-tags ul {
        position: static !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        background: transparent !important;
        outline: none !important;
        border: none !important;
        height: auto !important;
        width: 100% !important;
        transform: none !important;
        pointer-events: auto !important;
    }
    .pp-cc-tags li {
        pointer-events: auto !important;
        position: relative !important;
        z-index: 12 !important;
    }
    .pp-cc-tags a {
        font-size: 0 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        display: inline-flex !important;
    }
    .pp-cc-tags li:has(.pp-tag-limitless) {
        display: none !important;
    }

    .pp-cc-tags span:not(.pp-tag-limitless) {
        display: inline-flex !important;
        align-items: center !important;
        background: rgba(230, 57, 86, 0.14) !important;
        border: 1px solid rgba(230, 57, 86, 0.32) !important;
        border-radius: 999px !important;
        color: #ffe6ee !important;
        font:
            600 0.74rem/1 "Jura",
            sans-serif !important;
        padding: 0.32rem 0.68rem !important;
        transition: all 200ms ease !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }
    .pp-cc-tags span:not(.pp-tag-limitless):hover {
        background: rgba(230, 57, 86, 0.45) !important;
        border-color: #ff5376 !important;
        color: #ffffff !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 2px 8px rgba(230, 57, 86, 0.35) !important;
    }

    .profile-pagination-prev-hstack {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 3rem auto !important;
        background: transparent !important;
        position: static !important;
    }
    .profile-pagination-prev-hstack::before {
        display: none !important;
    }

    ._pagesContainer_1jhaa_68,
    .profile-pagination-flex-inner {
        all: unset !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.65rem !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .pp-pg-prev-button,
    .pp-pg-next-button {
        all: unset !important;
        box-sizing: border-box !important;
        width: 2.25rem !important;
        height: 2.25rem !important;
        border-radius: 50% !important;
        background: rgba(230, 57, 86, 0.12) !important;
        border: 1px solid rgba(230, 57, 86, 0.35) !important;
        color: #ff5376 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 250ms ease !important;
    }
    .pp-pg-prev-button:hover,
    .pp-pg-next-button:hover {
        background: #e63956 !important;
        color: #ffffff !important;
        border-color: #e63956 !important;
    }

    .pp-pg-page-button,
    [class*="_pageButton_"] {
        all: unset !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 2.25rem !important;
        height: 2.25rem !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        font:
            700 0.95rem/1 "Jura",
            sans-serif !important;
        transition: all 250ms ease !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(230, 57, 86, 0.25) !important;
        color: #ffe6ee !important;
        box-shadow: none !important;
        outline: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .pp-pg-page-button:hover {
        background: rgba(230, 57, 86, 0.25) !important;
        border-color: #ff5376 !important;
    }

    .pp-pg-page-button-active,
    #root .pp-pg-page-button-active,
    [class*="_pageButtonActive_"] {
        background: linear-gradient(135deg, #e63956, #9b1933) !important;
        border: 1px solid #ff5376 !important;
        color: #ffffff !important;
        border-radius: 50% !important;
        box-shadow: none !important;
        outline: none !important;
    }

    .pp-mnb-wrapper {
        all: unset !important;
        display: contents !important;
    }

    .pp-mnb-container {
        pointer-events: auto !important;
        position: fixed !important;
        inset: auto 0 0 0 !important;
        z-index: 3001 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: stretch !important;
        height: 3.5rem !important;
        padding: 0 !important;
        margin: 0 !important;
        background: rgba(13, 3, 14, 0.95) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border-top: 1px solid rgba(230, 57, 86, 0.3) !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .pp-mnb-container > a,
    .pp-mnb-container > div {
        flex: 1 1 0% !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        background: transparent !important;
    }

    .pp-mnb-container .pp-mnb-item {
        all: unset !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 2.5rem !important;
        height: 2.5rem !important;
        margin: 0 auto !important;
        padding: 0 !important;
        color: #ffe6ee !important;
        transition:
            color 200ms ease,
            transform 200ms ease !important;
        box-sizing: border-box !important;
    }

    .pp-mnb-container .pp-mnb-item svg,
    .pp-mnb-container .pp-mnb-item-icon {
        width: 1.4rem !important;
        height: 1.4rem !important;
        font-size: 1.4rem !important;
        display: block !important;
        margin: auto !important;
        padding: 0 !important;
        color: inherit !important;
        fill: currentColor !important;
        stroke: none !important;
    }

    .pp-mnb-container .pp-mnb-item:hover,
    .pp-mnb-container a:hover .pp-mnb-item,
    .pp-mnb-container .pp-mnb-item[aria-selected="true"] {
        color: #ff5376 !important;
    }

    .pp-mnb-container .pp-mnb-user-menu {
        width: 2.5rem !important;
        height: 2.5rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .pp-mnb-container .pp-mnb-user-menu button,
    .pp-mnb-container .pp-mnb-user-menu .pp-top-bar-app-menu {
        all: unset !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 2.25rem !important;
        height: 2.25rem !important;
        margin: 0 auto !important;
        padding: 0 !important;
        border-radius: 50% !important;
        box-sizing: border-box !important;
        transition: all 200ms ease !important;
    }

    .pp-mnb-container .pp-mnb-user-menu .pp-top-bar-app-menu span,
    .pp-mnb-container .pp-mnb-user-menu .pp-top-bar-app-menu div {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        max-width: 2.25rem !important;
        max-height: 2.25rem !important;
        box-sizing: border-box !important;
    }

    .pp-mnb-container .pp-mnb-user-menu svg {
        width: 1.4rem !important;
        height: 1.4rem !important;
        max-width: 1.4rem !important;
        max-height: 1.4rem !important;
        display: block !important;
        margin: auto !important;
        padding: 0 !important;
        color: #ffe6ee !important;
        transition: color 200ms ease !important;
    }

    .pp-mnb-container .pp-mnb-user-menu svg path {
        fill: currentColor !important;
        transition: fill 200ms ease !important;
    }

    .pp-mnb-container .pp-mnb-user-menu:hover svg,
    .pp-mnb-container .pp-mnb-user-menu:hover svg path,
    .pp-mnb-container .pp-mnb-user-menu .pp-top-bar-app-menu:hover svg,
    .pp-mnb-container .pp-mnb-user-menu .pp-top-bar-app-menu:hover svg path {
        color: #ff5376 !important;
        fill: #ff5376 !important;
    }

    .pp-mnb-container .pp-mnb-user-menu .chakra-avatar {
        width: 1.85rem !important;
        height: 1.85rem !important;
        min-width: 1.85rem !important;
        min-height: 1.85rem !important;
        max-width: 1.85rem !important;
        max-height: 1.85rem !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1.5px solid rgba(230, 57, 86, 0.6) !important;
        box-sizing: border-box !important;
        margin: auto !important;
        padding: 0 !important;
        transition:
            border-color 200ms ease,
            box-shadow 200ms ease !important;
    }

    .pp-mnb-container .pp-mnb-user-menu img,
    .pp-mnb-container .pp-mnb-user-menu .chakra-avatar__img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .pp-mnb-container .pp-mnb-user-menu:hover .chakra-avatar {
        border-color: #ff5376 !important;
        box-shadow: 0 0 10px rgba(230, 57, 86, 0.6) !important;
    }

    @media only screen and (max-width: 768px) {
        .profile-page-flex {
            padding: 3.75rem 0.75rem 3rem 0.75rem !important;
            gap: 1.75rem !important;
        }
        .pp-uc-background {
            border-radius: 1.5rem !important;
        }
        .dt-cover-wrap {
            height: 150px !important;
            border-radius: 1.5rem 1.5rem 0 0 !important;
        }
        .dt-cover-overlay {
            padding: 0.75rem 1rem !important;
            justify-content: flex-start !important;
            flex-direction: column !important;
            align-items: flex-start !important;
        }
        .profile-info-hstack {
            margin-top: -3.5rem !important;
            padding: 0 1rem !important;
            flex-direction: column !important;
            align-items: flex-start !important;
            gap: 1rem !important;
        }
        .pp-uc-avatar-container {
            height: 6.5rem !important;
            width: 6.5rem !important;
        }
        .profile-info-stack-inner::before {
            font-size: 1.5rem !important;
        }
        .dt-thought-card {
            margin: 1rem 0.75rem 0 0.75rem !important;
            padding: 0.75rem 1rem !important;
        }
        .dt-bio-body {
            padding: 1.25rem 0.75rem 2rem 0.75rem !important;
        }
        .dt-section {
            padding-top: 2.25rem !important;
            position: relative !important;
        }
        .dt-section > h2,
        .dt-section > h2.chakra-heading,
        .dt-section > .dt-section-title,
        .dt-section-title {
            font-size: 1.45rem !important;
            line-height: 1.25 !important;
            margin-bottom: 1.25rem !important;
            padding-right: 4rem !important;
            max-width: calc(100% - 3.75rem) !important;
        }
        .dt-section::after {
            top: 0.25rem !important;
            right: 0.75rem !important;
            font-size: 2.75rem !important;
            line-height: 1 !important;
        }
        .dt-grid {
            grid-template-columns: 1fr !important;
        }
        .dt-discord-grid {
            grid-template-columns: 1fr !important;
        }
        .dt-discord-server-card {
            aspect-ratio: 16 / 9 !important;
            max-height: none !important;
        }
        .dt-discord-server-card:first-child {
            grid-column: span 1 !important;
            aspect-ratio: 16 / 9 !important;
            max-height: none !important;
        }
        .dt-discord-server-content {
            padding: 0.5rem 0.75rem !important;
        }
        .dt-discord-server-content > h3,
        .dt-discord-server-content > h3.chakra-heading,
        .dt-discord-server-content > .dt-discord-server-name,
        .dt-discord-server-name {
            font-size: 1rem !important;
            line-height: 1 !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        .dt-discord-join-btn {
            font-size: 0.78rem !important;
            padding: 0.35rem 0.8rem !important;
            border-radius: 999px !important;
        }
        .pp-cc-wrapper {
            flex: 0 0 85vw !important;
            width: 85vw !important;
            min-width: unset !important;
            margin-left: 0.75rem !important;
        }
    }
</style>

<!-- Cover banner -->
<div class="dt-cover-wrap">
    <img
        src="https://ella.janitorai.com/media-approved/SIDBR4HWRBNCFnj6rcCL6.webp"
        alt="Cover"
        class="dt-cover-img"
    />
    <div class="dt-cover-overlay">
        <div class="dt-cover-links">
            <span class="dt-cover-pill">
                <img
                    src="https://ella.janitorai.com/media-approved/rVLcJYPVfVQ93fDgrMRUv.webp"
                    class="dt-icon-sm"
                    alt="Sparkles"
                />
                <span>Fueled by Tempeh &amp; Vibes</span>
            </span>
            <span class="dt-cover-pill">
                <img
                    src="https://ella.janitorai.com/media-approved/_8ne6o91HtGx67BDeDbdw.webp"
                    class="dt-icon-sm"
                    alt="Heart"
                />
                <span>Fluff &amp; Angst Enjoyer</span>
            </span>
        </div>
    </div>
</div>

<!-- Thoughts Dialogue Card -->
<div class="dt-thought-card">
    <div class="dt-thought-icon-box">
        <img
            src="https://ella.janitorai.com/media-approved/Nu8EpYkqStMKes4sokBpK.webp"
            class="dt-icon-sm"
            alt="Quote"
        />
    </div>
    <p class="dt-thought-text">
        “Making bots whenever the mood strikes, usually somewhere between sweet
        fluff and emotional damage!”
    </p>
</div>

<!-- Fixed tab anchors for jump-free :target switching -->
<div class="tab-identifiers">
    <span id="tab-vibe"></span>
    <span id="tab-menu"></span>
    <span id="tab-limits"></span>
    <span id="tab-friends"></span>
    <span id="tab-discord"></span>
</div>

<!-- Bio Body -->
<div class="dt-bio-body">
    <!-- Tab Navigation -->
    <div class="dt-tabs-nav">
        <a href="#tab-vibe" class="dt-tab-btn"
            ><img
                src="https://ella.janitorai.com/media-approved/MzqxEZ_JfuL-mk5Y5Ky96.webp"
                class="dt-icon-sm"
                alt="Vibe"
            />
            About Me</a
        >
        <a href="#tab-menu" class="dt-tab-btn"
            ><img
                src="https://ella.janitorai.com/media-approved/Uo-NLDONK45zgB_zlHu_h.webp"
                class="dt-icon-sm"
                alt="Menu"
            />
            What I Do</a
        >
        <a href="#tab-limits" class="dt-tab-btn"
            ><img
                src="https://ella.janitorai.com/media-approved/ieEMQHCJO8murqJmDyYin.webp"
                class="dt-icon-sm"
                alt="Limits"
            />
            What I Don't Do</a
        >
        <a href="#tab-friends" class="dt-tab-btn"
            ><img
                src="https://ella.janitorai.com/media-approved/WDPL-Xz8jTKQDK7HRu7Ub.webp"
                class="dt-icon-sm"
                alt="Friends"
            />
            My Friends</a
        >
        <a href="#tab-discord" class="dt-tab-btn"
            ><img
                src="https://ella.janitorai.com/media-approved/pAbLzJ58H0pM_HauRNRIQ.webp"
                class="dt-icon-sm"
                alt="Discord"
            />
            Community & Links</a
        >
    </div>

    <!-- SECTION 1: BIO -->
    <section class="dt-section dt-section-vibe">
        <h2 class="dt-section-title">A Little Bit About Me.</h2>
        <div class="dt-grid">
            <div class="dt-card">
                <span class="dt-badge"
                    ><img
                        src="https://ella.janitorai.com/media-approved/YoIu-AmxMyER_3c7Br0Yd.webp"
                        class="dt-icon-sm"
                        alt="Spark"
                    />
                    HEY THERE!</span
                >
                <h4 class="dt-card-heading">Welcome to my corner!</h4>
                <p class="dt-card-body">
                    Not really sure what to put here, but hey, thanks for
                    stopping by!
                    <br /><br />
                    Anyway, you can call me <strong>Tempe</strong>. If it is not
                    obvious, I am a male and I love tempeh, duh! <br /><br />
                    I make bots in my free time whenever I feel like it. If you
                    notice any inconsistencies, issues, or just have a
                    suggestion, feel free to let me know by leaving a comment on
                    the relevant bot!
                    <br /><br />
                    Feel free to reach out to me on Discord:
                    <strong>@DelightfulTempe</strong>
                </p>
            </div>

            <!-- FAQS -->
            <div class="dt-card">
                <span class="dt-badge"
                    ><img
                        src="https://ella.janitorai.com/media-approved/NYiepWkq_ABU8NMgP0SfC.webp"
                        class="dt-icon-sm"
                        alt="FAQ"
                    />
                    QUICK FAQS</span
                >
                <h4 class="dt-card-heading">
                    Things you might be wondering...
                </h4>
                <div class="dt-faq-list">
                    <details class="dt-faq-item">
                        <summary class="dt-faq-summary">
                            <span>Do you take bot requests?</span>
                            <span class="dt-faq-arrow"></span>
                        </summary>
                        <div class="dt-faq-content">
                            Not taking formal requests right now, but feel free
                            to let me know your ideas! If something sparks my
                            inspiration, I might just make it.
                        </div>
                    </details>

                    <details class="dt-faq-item">
                        <summary class="dt-faq-summary">
                            <span>How do you create your images?</span>
                            <span class="dt-faq-arrow"></span>
                        </summary>
                        <div class="dt-faq-content">
                            I'm using TensorArt to generate my images. You can
                            find my profile
                            <a href="https://tensor.art/u/1020819132020431977"
                                >here</a
                            >. Feel free to remix my images and use them for
                            your own needs!
                        </div>
                    </details>

                    <details class="dt-faq-item">
                        <summary class="dt-faq-summary">
                            <span>How do you create your bot bios?</span>
                            <span class="dt-faq-arrow"></span>
                        </summary>
                        <div class="dt-faq-content">
                            I wrote a guide on how you can design your bot's bio
                            more freely using inline CSS. You can find the link
                            on the
                            <a href="#tab-discord">Community & Links</a> tab.
                        </div>
                    </details>
                </div>
            </div>
        </div>
    </section>

    <!-- SECTION 2: WHAT I LIKE MAKING -->
    <section class="dt-section dt-section-menu">
        <h2 class="dt-section-title">What I Like Making.</h2>
        <div class="dt-grid">
            <div class="dt-card">
                <span class="dt-badge"
                    ><img
                        src="https://ella.janitorai.com/media-approved/Uo-NLDONK45zgB_zlHu_h.webp"
                        class="dt-icon-sm"
                        alt="Wine"
                    />
                    MY FAVORITE TROPES</span
                >
                <h4 class="dt-card-heading">
                    Stories and dynamics I love cooking up...
                </h4>
                <div class="dt-pills">
                    <span class="dt-pill"
                        ><img
                            src="https://ella.janitorai.com/media-approved/_8ne6o91HtGx67BDeDbdw.webp"
                            class="dt-icon-sm"
                            alt="Icon"
                        />
                        Wholesome Fluff</span
                    >
                    <span class="dt-pill"
                        ><img
                            src="https://ella.janitorai.com/media-approved/MzqxEZ_JfuL-mk5Y5Ky96.webp"
                            class="dt-icon-sm"
                            alt="Icon"
                        />
                        Heavy Emotional Angst</span
                    >
                    <span class="dt-pill"
                        ><img
                            src="https://ella.janitorai.com/media-approved/YoIu-AmxMyER_3c7Br0Yd.webp"
                            class="dt-icon-sm"
                            alt="Icon"
                        />
                        Slowburn &amp; Yearning</span
                    >
                    <span class="dt-pill"
                        ><img
                            src="https://ella.janitorai.com/media-approved/Uo-NLDONK45zgB_zlHu_h.webp"
                            class="dt-icon-sm"
                            alt="Icon"
                        />
                        Bittersweet Scenarios</span
                    >
                    <span class="dt-pill"
                        ><img
                            src="https://ella.janitorai.com/media-approved/_8ne6o91HtGx67BDeDbdw.webp"
                            class="dt-icon-sm"
                            alt="Icon"
                        />
                        Hurt &amp; Comfort</span
                    >
                    <span class="dt-pill"
                        ><img
                            src="https://ella.janitorai.com/media-approved/Nu8EpYkqStMKes4sokBpK.webp"
                            class="dt-icon-sm"
                            alt="Icon"
                        />
                        Grounded Everyday Drama</span
                    >
                    <span class="dt-pill"
                        ><img
                            src="https://ella.janitorai.com/media-approved/YoIu-AmxMyER_3c7Br0Yd.webp"
                            class="dt-icon-sm"
                            alt="Icon"
                        />
                        Deep Psychological Lore</span
                    >
                    <span class="dt-pill"
                        ><img
                            src="https://ella.janitorai.com/media-approved/_8ne6o91HtGx67BDeDbdw.webp"
                            class="dt-icon-sm"
                            alt="Icon"
                        />
                        Second Chances &amp; Regret</span
                    >
                </div>
            </div>

            <div class="dt-card">
                <span class="dt-badge"
                    ><img
                        src="https://ella.janitorai.com/media-approved/ahrSdENHlkV3CQmZM0gUn.webp"
                        class="dt-icon-sm"
                        alt="Star"
                    />
                    MY BOT PHILOSOPHY</span
                >
                <h4 class="dt-card-heading">Characters that feel human...</h4>
                <p class="dt-card-body">
                    I love writing characters with real emotions,
                    vulnerabilities, and realistic flaws. Whether it is a cozy
                    scenario where you are just enjoying a quiet afternoon
                    together, or an angst-heavy route that leaves you staring at
                    the ceiling, I want every interaction to feel genuine and
                    earned.
                    <br /><br />
                    Take your time, write however you like, and have fun
                    exploring the stories!
                </p>
            </div>
        </div>
    </section>

    <!-- SECTION 3: WHAT I DON'T MAKE -->
    <section class="dt-section dt-section-limits">
        <h2 class="dt-section-title">What I Don't Make.</h2>
        <div class="dt-grid">
            <div class="dt-card">
                <span class="dt-badge danger"
                    ><img
                        src="https://ella.janitorai.com/media-approved/ieEMQHCJO8murqJmDyYin.webp"
                        class="dt-icon-sm"
                        alt="Ban"
                    />
                    HARD LIMITS</span
                >
                <h4 class="dt-card-heading">
                    Things you won't find on my page...
                </h4>
                <div class="dt-pills">
                    <span class="dt-pill strike"
                        ><img
                            src="https://ella.janitorai.com/media-approved/ieEMQHCJO8murqJmDyYin.webp"
                            class="dt-icon-sm"
                            alt="Icon"
                        />
                        Cheating / NTR</span
                    >
                    <span class="dt-pill strike"
                        ><img
                            src="https://ella.janitorai.com/media-approved/ieEMQHCJO8murqJmDyYin.webp"
                            class="dt-icon-sm"
                            alt="Icon"
                        />
                        Furry Characters</span
                    >
                    <span class="dt-pill strike"
                        ><img
                            src="https://ella.janitorai.com/media-approved/ieEMQHCJO8murqJmDyYin.webp"
                            class="dt-icon-sm"
                            alt="Icon"
                        />
                        Mecha / Giant Robots</span
                    >
                    <span class="dt-pill strike"
                        ><img
                            src="https://ella.janitorai.com/media-approved/ieEMQHCJO8murqJmDyYin.webp"
                            class="dt-icon-sm"
                            alt="Icon"
                        />
                        Extreme Degenerate Content</span
                    >
                    <span class="dt-pill strike"
                        ><img
                            src="https://ella.janitorai.com/media-approved/ieEMQHCJO8murqJmDyYin.webp"
                            class="dt-icon-sm"
                            alt="Icon"
                        />
                        Gross / Taboo Fetishes</span
                    >
                </div>
            </div>

            <div class="dt-card">
                <span class="dt-badge danger"
                    ><img
                        src="https://ella.janitorai.com/media-approved/yYv571q0yUR8wV29zmtQp.webp"
                        class="dt-icon-sm"
                        alt="X"
                    />
                    A QUICK HEADS-UP</span
                >
                <h4 class="dt-card-heading">Keeping it honest and fun...</h4>
                <p class="dt-card-body">
                    No hate at all if you enjoy these things, but they are just
                    not my cup of tea and I do not have any interest in making
                    them. I prefer sticking to what I genuinely enjoy writing,
                    like heartfelt romance, realistic drama, and good
                    old-fashioned angst.
                    <br /><br />
                    Thanks a lot for understanding and keeping the vibe chill!
                </p>
            </div>
        </div>
    </section>

    <!-- SECTION 4: FRIENDS -->
    <section class="dt-section dt-section-friends">
        <h2 class="dt-section-title">My Friends.</h2>
        <div class="dt-grid">
            <a
                href="https://janitorai.com/profiles/50d5d604-4306-4ec8-abf8-9f8cf21b9f8f_profile-of-lycolycolii"
                target="_blank"
                class="dt-friend-card"
            >
                <img
                    src="https://ella.janitorai.com/media-approved/cwRMHw4VURlEK4N6-ZzLK.webp?width=512"
                    alt="Lycolycolii"
                    class="dt-friend-avatar"
                />
                <div class="dt-friend-info">
                    <div class="dt-friend-name">Lycolycolii</div>
                    <div class="dt-friend-handle">@Lycolycolii</div>
                    <p class="dt-friend-desc">Mommy maker.</p>
                </div>
            </a>

            <a
                href="https://janitorai.com/profiles/ebcac624-b956-43f0-9db4-0252dd63fe6c_profile-of-only-lemon"
                target="_blank"
                class="dt-friend-card"
            >
                <img
                    src="https://ella.janitorai.com/avatars/US7fXeUuxhT7D9XXyHv-V.webp?width=512"
                    alt="Lemon"
                    class="dt-friend-avatar"
                />
                <div class="dt-friend-info">
                    <div class="dt-friend-name">Lemon</div>
                    <div class="dt-friend-handle">@OnlyLemon</div>
                    <p class="dt-friend-desc">Cool genner.</p>
                </div>
            </a>

            <a
                href="https://janitorai.com/profiles/70409e0b-0b6c-4f37-bd8b-883644fcc798_profile-of-dnalo-r"
                target="_blank"
                class="dt-friend-card"
            >
                <img
                    src="https://ella.janitorai.com/avatars/i3kWWQ8UkD6rYHjOdb527.webp?width=512"
                    alt="dnaloR"
                    class="dt-friend-avatar"
                />
                <div class="dt-friend-info">
                    <div class="dt-friend-name">dnaloR</div>
                    <div class="dt-friend-handle">@dnaloR</div>
                    <p class="dt-friend-desc">Random star gazer.</p>
                </div>
            </a>

            <a
                href="https://janitorai.com/profiles/f0322734-79e8-469b-8b6b-68266146bc3c_profile-of-dex-969"
                target="_blank"
                class="dt-friend-card"
            >
                <img
                    src="https://ella.janitorai.com/profile-avatar-approved/f0322734-79e8-469b-8b6b-68266146bc3c/1653443/ntsZMvjfi05nWm9BRa6fN.webp"
                    alt="Dex"
                    class="dt-friend-avatar"
                />
                <div class="dt-friend-info">
                    <div class="dt-friend-name">Dex</div>
                    <div class="dt-friend-handle">@dex969</div>
                    <p class="dt-friend-desc">Meme dealer.</p>
                </div>
            </a>

            <div class="dt-friend-card">
                <img
                    src="https://ella.janitorai.com/media-approved/xB8PmLjdhqFRcvgnOq-fB.webp"
                    alt="Bloop"
                    class="dt-friend-avatar"
                />
                <div class="dt-friend-info">
                    <div class="dt-friend-name">Bloop</div>
                    <div class="dt-friend-handle">@bloop</div>
                    <p class="dt-friend-desc">Random brat.</p>
                </div>
            </div>

            <a
                href="https://janitorai.com/profiles/46a18b1a-2999-447c-bf90-8d7f981d0e2f_profile-of-gabrrielsefu"
                target="_blank"
                class="dt-friend-card"
            >
                <img
                    src="https://ella.janitorai.com/profile-avatar-approved/46a18b1a-2999-447c-bf90-8d7f981d0e2f/1450864/aAGScWBJSMeRffZbEtKlW.webp"
                    alt="gabrrielsefu"
                    class="dt-friend-avatar"
                />
                <div class="dt-friend-info">
                    <div class="dt-friend-name">Aemeath</div>
                    <div class="dt-friend-handle">@gabrrielsefu</div>
                    <p class="dt-friend-desc">Random twerker.</p>
                </div>
            </a>
        </div>
    </section>

    <!-- SECTION 5: DISCORD SERVERS & LINKS -->
    <section class="dt-section dt-section-discord">
        <h2 class="dt-section-title">Community & Links.</h2>

        <!-- Discord Servers -->
        <div class="dt-discord-grid">
            <a
                href="https://discord.gg/hmKeywUU3x"
                target="_blank"
                class="dt-discord-server-card"
            >
                <img
                    src="https://ella.janitorai.com/media-approved/ImmsnTea8Au3Mgi9_xpDr.webp"
                    alt="Banner Dominion"
                    class="dt-discord-server-banner"
                />
                <div class="dt-discord-server-content">
                    <h3 class="dt-discord-server-name">Dominion</h3>
                    <span class="dt-discord-join-btn"
                        >Join <span class="dt-join-arrow">→</span></span
                    >
                </div>
            </a>

            <a
                href="https://discord.gg/dnVpQQKEJ7"
                target="_blank"
                class="dt-discord-server-card"
            >
                <img
                    src="https://ella.janitorai.com/media-approved/v-WgOOGk9o1arzY-49qAw.webp"
                    alt="Banner Zero's Cohort"
                    class="dt-discord-server-banner"
                />
                <div class="dt-discord-server-content">
                    <h3 class="dt-discord-server-name">Zero's Cohort</h3>
                    <span class="dt-discord-join-btn"
                        >Join <span class="dt-join-arrow">→</span></span
                    >
                </div>
            </a>

            <a
                href="https://discord.gg/RED8CtmZta"
                target="_blank"
                class="dt-discord-server-card"
            >
                <img
                    src="https://ella.janitorai.com/media-approved/shpkuNGCMkiX_zgqni5PV.webp"
                    alt="Banner Lycoris Chorus"
                    class="dt-discord-server-banner"
                />
                <div class="dt-discord-server-content">
                    <h3 class="dt-discord-server-name">Lycoris' Chorus</h3>
                    <span class="dt-discord-join-btn"
                        >Join <span class="dt-join-arrow">→</span></span
                    >
                </div>
            </a>
        </div>

        <!-- Links -->
        <div class="dt-guides-wrap">
            <a
                href="https://rentry.co/jai-bio-guide-by-delightfultempe"
                class="dt-guide-item"
            >
                <div class="dt-guide-title">
                    <img
                        src="https://ella.janitorai.com/media-approved/xaC7G3c7hXsSSO4fhhekZ.webp"
                        class="dt-icon-sm"
                        alt="Book"
                    />
                    <span>Guide: JanitorAI Unrestricted Bot Bio Guide</span>
                </div>
                <img
                    src="https://ella.janitorai.com/media-approved/LDy0Si5RkBjgMq0CTJoNR.webp"
                    class="dt-icon-sm"
                    alt="Link"
                />
            </a>

            <a href="#" class="dt-guide-item">
                <div class="dt-guide-title">
                    <img
                        src="https://ella.janitorai.com/media-approved/YoIu-AmxMyER_3c7Br0Yd.webp"
                        class="dt-icon-sm"
                        alt="Lore"
                    />
                    <span>Template: Love this profile? Grab the template!</span>
                </div>
                <img
                    src="https://ella.janitorai.com/media-approved/LDy0Si5RkBjgMq0CTJoNR.webp"
                    class="dt-icon-sm"
                    alt="Link"
                />
            </a>
        </div>
    </section>
</div>