CSS TEMPLATE

by:@GOOD_BOY_PUPPYY

<style>

/* === COLOR SECTION === white | gray | #363636 | #141414 | black */

:root{

--ri-line:#363636;

--ri-dim:#ffffff70;

--ri-faint:#ffffff2b;

--ri-panel:#0e0e0f;

}

/* LIGHTEST COLOR SECTION */

.css-jdhqy4 > div, .profile-top-bar-create-char, [class="popoverTitle"], [class="headerActions"] button, [class="subject"], [class="subject"] *, .pp-top-bar-search-history [role='button'] span, .profile-top-bar-app-menu-list-item, .profile-top-bar-app-menu-list svg, .profile-followers-count, .profile-uc-follow-button, .pp-uc-options-menu, .profile-badge-total-text::after, .profile-character-search-input, [class="collapsedContainer"] [class="tag"], #root .react-select__dropdown-indicator svg, .profile-character-card-name-box, .profile-character-card-description-markdown-container, .profile-character-card-tag-limitless, details summary, .profile-title-heading {

color: white;

}

[class="notificationIcon"], #search-input, .pp-top-bar-search-history [role='button'] :is(button svg, span[class='icon'] path), .profile-filter-button-vsc-filter {

color: white !important;

fill: white !important;

}

[class*="notificationsBadge"], .profile-uc-follow-button:hover, .pp-uc-options-menu:hover, .profile-character-card-stack:hover .profile-character-card-name-box {

background: white;

}

[class*="headerActions"] button, .pp-top-bar-search-history, .profile-top-bar-app-menu-list {

border: 1px solid white;

}

/* LIGHT COLOR SECTION */

.profile-top-bar-logo-sub-name, .profile-top-bar-search::after, .profile-top-bar-search-box div:has(svg), .profile-badge-total-count, #root .react-select__single-value { color: gray; }

/* MEDIUM COLOR SECTION */

.profile-top-bar-logo-name, .profile-member-since-box, .profile-character-search-input::placeholder { color: #363636; }

.profile-top-bar-search, [class="notificationsPopover"], [class="contentWrapperUnread"], .profile-uc-background-flex, .profile-followers-count, .profile-uc-follow-button, .pp-uc-options-menu, .profile-character-search-input, .profile-filter-button, [class="collapsedContainer"] [class="tag"], #root .react-select__control, .profile-character-card-stack, .pp-cc-tags-item { border: 1px solid #363636; }

/* DARK COLOR SECTION */

.profile-page-background, .profile-followers-count, #root .react-select__option:hover, #root .react-select__option--is-focused, .profile-character-card-name-box, .pp-cc-tags-item, details { background: #141414; }

details[open] .details-content { border: 1px solid #141414; }

/* DARKEST COLOR SECTION */

.profile-uc-follow-button:hover, .pp-uc-options-menu:hover, .profile-character-card-stack:hover .profile-character-card-name-box { color: black; }

.css-jdhqy4 > div, .profile-top-bar, .profile-top-bar-search, .pp-top-bar-search-history, [class="notificationsPopover"], .profile-top-bar-app-menu-list, .profile-uc-background-flex, .profile-uc-follow-button, .pp-uc-options-menu, .profile-character-search-input, .profile-filter-button, #root ~ :has(> .profile-filter-modal-modal-overlay) [data-focus-lock-disabled] > > , #root .react-select__control, #root .react-select__indicator-separator, #root .react-select__menu, .profile-character-card-stack, .details-content { background: black; }

.css-jdhqy4 > div { border: 1px solid black; }

p, a { color: white; }

a:hover { color: #7f7f7f; }

::selection { background: #7f7f7f !important; color: white; }

/* ===========END OF SECTION========== */

/* =============PAGE SECTION============ */

.profile-page-background { opacity: 1; }

.profile-page-background::after {

content: "";

position: fixed; inset: 0; pointer-events: none; opacity: .5; : 1;

background-image:

linear-gradient(#ffffff08 1px, transparent 1px),

linear-gradient(90deg, #ffffff08 1px, transparent 1px),

repeating-linear-gradient(#00000000 0 3px, #ffffff05 3px 4px);

background-size: 48px 48px, 48px 48px, 100% 4px;

}

/* TOOLTIPS */

.css-jdhqy4 > div { padding: 6px; border-radius: 1px; font-weight: 600; font-size: 14px; box-shadow: none; font-family: 'DM Sans', sans-serif; }

.chakra-tooltip__arrow-wrapper { display: none; }

/* ===========END OF SECTION========== */

/* =============HEADER SECTION============ */

.profile-top-bar {

box-shadow: none; backdrop-filter: blur(0);

border-bottom: 1px solid #363636;

position: relative;

}

/* thin barcode rail running under the whole header */

.profile-top-bar::after{

content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; pointer-events:none;

background: repeating-linear-gradient(90deg,#ffffff40 0 1px,transparent 1px 3px,#ffffff20 3px 5px,transparent 5px 9px);

opacity:.6;

}

.profile-top-bar-logo { text-shadow: none !important; }

/* LOGO -> BARCODE

the "JanitorAI BETA" wordmark becomes a scannable-looking barcode

with the name printed underneath, like a filed dossier. */

.profile-top-bar-logo-name{

font-size: 0 !important;

position: relative;

display: block;

width: 168px;

height: 34px;

background:

repeating-linear-gradient(90deg,

#fff 0 2px, transparent 2px 4px,

#fff 4px 5px, transparent 5px 9px,

#fff 9px 12px, transparent 12px 13px,

#fff 13px 14px, transparent 14px 18px);

filter: drop-shadow(0 0 6px #ffffff30);

}

.profile-top-bar-logo-name::after{

content: "S T A R R P U P P Y Y";

position: absolute; left: 0; right: 0; bottom: -12px;

font-family: 'DM Sans', sans-serif; font-size: 8px; letter-spacing: 3px;

color: var(--ri-dim); text-align: center;

}

.profile-top-bar-logo-sub-name{

font-family: 'DM Sans', sans-serif; font-size: 0 !important;

}

.profile-top-bar-logo-sub-name::after{

content: "C O D E : M U T T"; font-size: 7px; letter-spacing: 1px; color: var(--ri-dim);

}

.profile-top-bar-create-char {

font-family: 'DM Sans', sans-serif; text-transform: uppercase;

position: relative; letter-spacing: 1px;

}

.profile-top-bar-create-char, .profile-top-bar-create-char::before, .profile-top-bar-create-char::after { background: none; }

/* NOTIF BUTTON */

[class="notificationsButton"], [class="notificationsButton"]:hover { background: none; }

[class*="notificationsBadge"] {

top: .65rem; right: .75rem; font-size: 0; padding: unset; height: .5rem;

min-width: unset; aspect-ratio: 1; box-shadow: none; border: 1px solid black;

}

/* POPUPS / TASK BARS — MATCHED TO THE PROFILE THEME

every floating panel (notifications, search history, menus, modals)

gets the same black panel, hairline border, corner ticks and

slide-in-from-the-side motion. */

[class*="notificationsPopover"], .pp-top-bar-search-history,

.profile-top-bar-app-menu-list,

#root ~ :has(> .profile-filter-modal-modal-overlay) [data-focus-lock-disabled] > > {

border-radius: 1px !important;

box-shadow: 0 24px 60px #000000cc !important;

border: 1px solid var(--ri-line) !important;

background: linear-gradient(180deg,var(--ri-panel) 0%,#000 60%) !important;

position: relative;

overflow: visible;

animation: riSlideIn .38s cubic-bezier(.16,.84,.3,1) both;

}

[class*="notificationsPopover"]::after, .pp-top-bar-search-history::after,

.profile-top-bar-app-menu-list::after{

content:""; position:absolute; inset:0; pointer-events:none;

background:

linear-gradient(90deg,#fff 0 10px,transparent 10px) top left/100% 1px no-repeat,

linear-gradient(90deg,transparent calc(100% - 10px),#fff 0) bottom right/100% 1px no-repeat;

opacity:.5;

}

@keyframes riSlideIn{

from { opacity: 0; transform: translateX(26px) scale(.98); clip-path: inset(0 0 0 100%); }

to { opacity: 1; transform: translateX(0) scale(1); clip-path: inset(0 0 0 0%); }

}

[class*="notificationsPopover"]::before { content: unset; }

[class*="popoverHeader"] { background: none; box-shadow: none; border-bottom: 1px solid var(--ri-line); }

[class*="popoverTitle"] { font-weight: 600; font-size: 20px; font-family: 'Lato', sans-serif; text-transform: uppercase; letter-spacing: 2px; }

[class*="headerActions"] { gap: 4px; }

[class*="headerActions"] button { background: none; box-shadow: none; transition: all 500ms; border-radius: 1px; }

[class*="headerActions"] button:hover { background: #ffffff14; box-shadow: none; }

#root [class*="notificationItem"] {

background: unset; padding: .5rem; gap: .5rem;

border-bottom: 1px solid var(--ri-line); align-items: center; transition: unset;

}

[class*="unreadIndicator"] { width: 6rem; background: radial-gradient(circle at 6rem 50%, #0000 62.5%, #ffffff40) 200% 200%; box-shadow: unset; border-radius: unset; }

[class="avatarSection"] { display: contents; }

[class*="avatarContainer"] { min-width: 5rem; height: auto; aspect-ratio: 1; transition: transform 500ms, filter 500ms; }

[class*="characterAvatar"] { width: 4rem; height: auto; aspect-ratio: 1; border-radius: 999px; object-position: top; box-shadow: unset; border: unset; }

[class*="userAvatar"] { bottom: 0; right: 0; min-width: unset; width: 2rem; aspect-ratio: 1; height: auto; object-position: top; border-radius: 999px; box-shadow: unset; border: unset; }

[class="notificationItem"]:hover :is([class="characterAvatar"], [class="userAvatar"]) { box-shadow: unset; transform: unset; }

a[class*="avatarContainer"]:hover { transform: scale(1.05); filter: drop-shadow(0 0 .5rem #ffffff40); }

[class="contentWrapper"] [class="content"] { display: contents; }

[class*="contentWrapper"] { flex-flow: column; padding: .5rem .75rem; gap: .5rem; border-radius: 1px; }

[class*="contentWrapperUnread"] { background: #3636367d; }

[class*="contentWrapper"]:hover { background: #36363640; }

[class="notificationItem"]:not(:has([class="contentWrapperUnread"])) :is([class="avatarContainer"], [class*="contentWrapper"]) { filter: grayscale(.75) opacity(.5); }

[class="subject"], [class="subject"] * { font-size: 16px; font-family: 'DM Sans', sans-serif; }

[class="body"] { font-family: 'Lato', sans-serif; color: lightgray; }

/* SEARCH BAR */

.profile-top-bar-search { border-radius: 2px; }

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

.profile-top-bar-search-box div:has(svg) { opacity: 1; }

#search-input::placeholder { opacity: 0; }

#search-input {

position: absolute; width: calc(100% - 2.5rem) !important; padding-right: 2.5rem !important;

font-family: Lato, sans-serif; font-size: 1rem !important; caret-color: white;

}

.profile-top-bar-search::after {

content: "can't find what you're looking for? search here . . .";

position: absolute; max-width: calc(100% - (2.5rem * 2)); top: 50%; transform: translateY(-50%);

overflow: hidden; white-space: nowrap; text-overflow: ellipsis; pointer-events: none;

font-family: Lato, sans-serif; font-size: 1rem; font-weight: normal; transition: opacity 200ms ease-in-out;

}

.profile-top-bar-search:focus-within::after,

.profile-top-bar-search:has(#search-input:not(:placeholder-shown))::after { opacity: 0; }

.profile-top-bar-search:focus-within #search-input,

#search-input:not(:placeholder-shown) { opacity: 1; }

.pp-top-bar-search-history [role='button'] { background-color: unset; transition: background-color 200ms ease-in-out; }

.pp-top-bar-search-history [role='button'] span { font-family: 'Lato', sans-serif; font-size: 1rem; font-weight: normal; }

.pp-top-bar-search-history [role='button'] :is(button svg, span[class*='icon'] path) { opacity: 1; transition: color 200ms ease-in-out, fill 200ms ease-in-out; }

/* PERSONAL MENU */

.profile-top-bar-app-menu-list { outline: none; }

.profile-top-bar-app-menu-list-item { font-family: 'Lato', sans-serif; text-transform: uppercase; letter-spacing: 1px; }

/* ===========END OF SECTION========== */

/* ========PROFILE CARD SECTION==========

v2: full-bleed, stretched, stacked. the profile owns the first

screen; the bot rail arrives on scroll. */

.profile-uc-background-flex {

padding: 0;

max-width: 100% !important;

width: 100%;

min-height: 88vh;

display: flex;

flex-direction: column;

justify-content: center;

border-radius: 2px;

position: relative;

overflow: hidden;

isolation: isolate;

}

.profile-uc-background-flex > div { background: transparent !important; }

.profile-uc-background-flex:hover { box-shadow: none; }

/* opaque diagonal banner */

.profile-uc-background-flex::before {

content: ""; position: absolute; inset: 0; : 0; pointer-events: none;

background:

linear-gradient(105deg, #ffffff14 0 34%, #ffffff00 34.4% 100%),

linear-gradient(180deg, #0e0e0f 0%, #000 70%);

}

.profile-uc-background-flex::after {

content: "N T / S T — RE03 · 178cm · CONFIRMED";

position: absolute; left: .35rem; top: 50%; : 3;

transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl;

font-family: 'DM Sans', sans-serif; font-size: 9px; letter-spacing: 3px;

text-transform: uppercase; color: #ffffff40; pointer-events: none;

}

/* scroll cue at the bottom of the profile screen */

.profile-about-me::after{

content: "▼ EAT THEM UP!";

display: block; margin: 26px auto 0; width: fit-content;

font-family: 'DM Sans', sans-serif; font-size: 9px; letter-spacing: 5px;

color: var(--ri-dim); animation: riBob 2.4s ease-in-out infinite;

}

@keyframes riBob { 0%,100%{transform:translateY(0);opacity:.5} 50%{transform:translateY(5px);opacity:1} }

.profile-info-hstack {

flex-direction: row; align-items: center; justify-content: flex-start;

gap: 1.25rem; padding: 2rem 1.25rem 1rem 2.25rem; position: relative; : 2;

}

/* AVATAR — FLOATING FOCAL POINT */

.profile-avatar-container {

flex: 0 0 auto; position: relative; order: 2;

animation: ppFloat 6s ease-in-out infinite; filter: drop-shadow(0 22px 30px #000000cc);

}

.profile-avatar {

height: 100%; width: 400px; object-fit: cover; object-position: 50% 30%;

box-shadow: none; border-radius: 1px; border: transparent;

transition: filter .4s ease, transform .4s ease;

}

.profile-avatar-container:hover .profile-avatar { transform: scale(1.02); }

.profile-avatar-container::before { content: ""; position: absolute; inset: -14px -14px 14px 14px; border: 1px solid var(--ri-faint); border-radius: 1px; : -1; }

@keyframes ppFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

/* USERNAME — LARGE, ON ITS SIDE */ .

profile-info-stack { padding: 10px; position: relative; : 2; }

.profile-info-stack-inner { padding: 10px; gap: .35rem; align-items: flex-start; }

.css-9qctsi { : 10; } .profile-title-heading { font-size: clamp(3.5rem,5vw,5rem); line-height: 1.5; font-family: 'DM Sans', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: -2px; writing-mode: vertical-rl; transform: rotate(180deg); max-height: 100vh; overflow: visible; text-decoration: none; border-right: 4px solid #ffffffff; padding-right: 6px; text-shadow: 0 0 24px #ffffff30; }

/* FOLLOWERS */

.profile-followers-count { text-transform: uppercase; font-size: 11px; border-radius: 2px; margin: 5px 0; width: fit-content; padding: 2px 10px; font-family: 'Lato', sans-serif; letter-spacing: 1px; }

.profile-badges { filter: grayscale(1); }

.profile-member-since-box { font-size: 11px; font-family: 'Raleway', sans-serif; font-weight: 600; letter-spacing: 1px; }

/* BIO */

.profile-about-me { width: 100%; padding: 10px 32px 28px; position: relative; : 2; }

/* FOLLOW / OPTIONS BUTTONS */

.profile-about-me + div > div { justify-content: flex-start; gap: 14px; margin: 10px 0 16px 32px; }

.profile-uc-follow-button { border-radius: 1px; transition-duration: .2s !important; }

.profile-uc-follow-button::before { content: unset; }

.profile-uc-follow-text { font-family: 'Lato', sans-serif; font-weight: 600; letter-spacing: 1px; }

.pp-uc-options-menu { border-radius: 1px; text-transform: uppercase; font-family: 'Lato', sans-serif; }

/* ===========END OF SECTION========== */

/* ===========BOT PAGE SECTION============ */

.profile-tabs-wrapper { visibility: hidden; }

.profile-badge-flex-outer { background: none; border: none; box-shadow: none; }

.profile-badge-flex-inner { font-size: 14px; }

.profile-badge-total-text { font-size: 0; }

.profile-badge-total-text::after { content: "bots"; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; }

.profile-character-search-input, .profile-filter-button, #root .react-select__control { border-radius: 1px; }

.profile-character-search-input { font-size: 14px; text-transform: uppercase; font-family: 'DM Sans', sans-serif; }

.profile-character-search-input::placeholder { font-weight: 600; }

.profile-character-search-input:is(:hover,:focus,:active) { border-color: #ffffff70; box-shadow: none; }

/* BOT CARDS — SIDEWAYS SCROLLING RAIL

the grid becomes one horizontal filmstrip you drag/scroll through. */

.profile-character-card-container{

display: flex !important;

flex-wrap: wrap !important;

overflow-x: auto;

overflow-y: hidden;

scroll-snap-type: x mandatory;

gap: 5px;

padding: 22px 8px 26px;

scroll-padding-left: 8px;

border-top: 1px solid var(--ri-line);

border-bottom: 1px solid var(--ri-line);

background: none !important;

box-shadow: none;

scrollbar: transparent !important;

}

.profile-character-card-container::-webkit-scrollbar { height: 6px; }

.profile-character-card-container::-webkit-scrollbar-track { background: #ffffff0d; }

.profile-character-card-container::-webkit-scrollbar-thumb { background: repeating-linear-gradient(90deg,#fff 0 2px,#ffffff40 2px 6px); }

.profile-character-card-container> div{

flex: 0 0 auto !important;

width: 230px !important;

max-width: 230px !important;

scroll-snap-align: start;

}

.profile-character-card-wrapper > div:empty { display: none; }

.profile-character-card-wrapper:hover { box-shadow: none; }

.profile-character-card-stack {

border-radius: 0; position: relative; overflow: hidden; padding-top: 18px;

transition: border-color .35s ease, transform .35s ease;

}

.profile-character-card-stack:hover { border-color: #ffffff80; transform: translateY(-4px); }

.profile-character-card-stack::before {

content: "S T ☆ R R // F ! L E"; position: absolute; top: 0; left: 0; right: 0; height: 18px;

display: flex; align-items: center; padding-left: 4px;

font-family: 'DM Sans', sans-serif; font-size: 8px; letter-spacing: 2px; color: var(--ri-dim);

background: repeating-linear-gradient(90deg,#ffffff26 0 1px,transparent 1px 4px) right / 45% 100% no-repeat, var(--ri-panel);

: 4; pointer-events: none;

}

.profile-character-card-stack::after {

content: ""; position: absolute; top: 26px; right: 6px; : 4; width: 10px; height: 34px;

pointer-events: none; opacity: 0; transform: translateX(6px);

transition: opacity .35s ease, transform .35s ease;

background: linear-gradient(#ffffff 0 30%, transparent 30% 35%, #8f8f8f 35% 65%, transparent 65% 70%, #363636 70% 100%);

box-shadow: 0 0 0 1px #ffffff30;

}

.profile-character-card-stack:hover::after { opacity: 1; transform: translateX(0); }

.profile-character-card-avatar-aspect-ratio, .profile-character-card-avatar-image { height: 250px; border-radius: 0; }

.profile-character-card-avatar-image { filter: grayscale(1) contrast(1.05); transition: filter .35s ease, transform .45s ease; width:100%; object-fit:cover; }

.profile-character-card-stack:hover .profile-character-card-avatar-image { filter: grayscale(0); transform: scale(1.03); }

.profile-character-card-stack-link-component { display: flex; flex-direction: column-reverse; }

.profile-character-card-stack-link-component-box { padding: 0; }

.profile-character-card-name-box {

position: relative; overflow: hidden; padding-left: 4px; font-size: 16px;

font-family: 'DM Serif Text', serif; font-weight: 200; letter-spacing: unset;

text-transform: unset; text-shadow: none; border-left: 3px solid #ffffff7d;

transition: color .4s ease, background-color .4s ease;

}

.profile-character-card-name-box::before {

content: ' '; position: absolute; top: 0; left: -75%; height: 100%; width: 50%;

background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);

transform: skewX(-20deg);

}

.profile-character-card-stack:hover .profile-character-card-name-box::before { animation: sheenMove 1s forwards; background: #ffffff; }

.profile-character-card-stack:has(.pp-tag-christmas):hover .profile-character-card-name-box::before { background: #e2ffcf; }

.profile-character-card-stack:has(.pp-tag-halloween):hover .profile-character-card-name-box::before { background: #ffe4bd; }

.profile-character-card-stack:has(.pp-tag-thevalentine):hover .profile-character-card-name-box::before { background: #ffd1e2; }

.profile-character-card-stack:has(.pp-tag-2025):hover .profile-character-card-name-box::before { background: #53b960; }

@keyframes sheenMove { from{left:-75%} to{left:125%} }

.profile-character-card-creator-name-link { display: none; }

.profile-character-card-box ~ div { display: none; }

.profile-character-card-description-box { margin-top: 20px; font-family: 'Lato', sans-serif; border-top: 1px solid #ffffff1f; padding-top: 8px; }

.profile-character-card-star-line, .profile-character-card-star { display: none; }

.profile-character-card-stats-box { top: 293px; width: 100%; display: flex; justify-content: center; }

.profile-character-card-ribbon { position: static; overflow: visible; filter: none; inset: unset; padding: 0; }

.profile-character-card-ribbon-wrap { clip-path: unset; padding: 0; box-shadow: none; background: transparent; overflow: visible; border-radius: 0; }

.profile-character-card-chats-hstack { font-weight: 200; font-size: 12px; font-family: 'DM Sans', sans-serif; background: none; border-bottom: 1px solid #ffffff; }

.profile-character-cards-chat-count-tbmessages { display: none; }

.profile-character-card-chats-hstack::before { content: " L O G S | "; }

.profile-character-card-tags ul { justify-content: center; align-items: flex-end; }

.profile-character-card-tags a { display: flex; }

.pp-cc-tags-item { font-weight: 200; border-radius: 0; font-size: 12px; color: rgb(255 255 255 / 65%); width: 100%; text-transform: uppercase; letter-spacing: 1px; }

.profile-character-card-tag-limitless { font-size: 0; background: transparent; border: none; width: 0; }

.profile-character-card-tag-limitless::before { content: "🔞"; font-size: 13px; }

.profile-character-card-tokens-count { font-size: .7rem; font-family: 'DM Sans', sans-serif; font-weight: 200; letter-spacing: .5px; color: var(--ri-dim); text-shadow: none; }

/* ===========END OF SECTION========== */

/* ====STYLING FOR HTML IN THE ACTUAL BIO SECTION==== */

details { margin: 10px 0; display: inline-block; width: 100%; font-family: 'Lato', sans-serif; text-align: left; border-radius: 1px; overflow: hidden; position: relative; border: none; }

details summary { font-family: 'DM Sans', sans-serif; font-size: 20px; padding: 6px 8px; cursor: pointer; user-select: none; position: relative; border: none; list-style: none; text-transform: uppercase; letter-spacing: 1px; }

details summary::-webkit-details-marker { display: none; }

details summary::before { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: #8080801f; transform: skewX(-20deg); }

details:hover summary::before { animation: sheenMoveSummary 1s forwards; }

.details-content { max-height: 0; width: 100%; overflow: hidden; padding: 0 16px; opacity: 0; transform: translateY(-5px);

transition: max-height .5s ease-in-out, opacity .4s ease-in-out, transform .4s ease-in-out, padding-top .3s ease, padding-bottom .3s ease, border .4s ease; }

details[open] .details-content { max-height: 500px; overflow-y: auto; opacity: 1; transform: translateY(0); padding-top: 12px; padding-bottom: 12px; }

@keyframes sheenMoveSummary { from{left:-75%} to{left:125%} }

/* BIO BANNER */

.bio-banner { position: relative; width: 100%; padding: 14px 16px; margin-bottom: 12px; overflow: hidden;

background: linear-gradient(100deg, #ffffff17 0 40%, var(--ri-panel) 40.5% 100%); border-left: 4px solid #ffffff7d; }

.bio-banner .bb-kicker { font-family: 'DM Sans', sans-serif; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--ri-dim); }

.bio-banner .bb-title { font-family: 'DM Sans', sans-serif; font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -1px; color: white; text-transform: lowercase; }

.bio-banner .bb-sub { font-family: 'Lato', sans-serif; font-size: 12px; color: lightgray; }

.bio-banner::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 35%; background: repeating-linear-gradient(90deg,#ffffff2e 0 1px,transparent 1px 5px); pointer-events: none; }

/* INFO BLOCKS */

.info-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }

.info-block { flex: 1 1 45%; background: var(--ri-panel); border: 1px solid var(--ri-line); border-radius: 1px; padding: 8px 10px; transition: border-color .3s ease, transform .3s ease; }

.info-block:hover { border-color: #ffffff70; transform: translateY(-2px); }

.info-block .ib-label { font-family: 'DM Sans', sans-serif; font-size: 9px; letter-spacing: 3px; text-transform: uppercase; color: var(--ri-dim); display: block; }

.info-block .ib-value { font-family: 'Lato', sans-serif; font-size: 15px; color: white; }

/* STAT BARS */

.stat-row { display: flex; align-items: center; gap: 8px; font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #ffffffb0; margin: 4px 0; }

.stat-row .bar { flex: 1; height: 4px; background: var(--ri-line); position: relative; overflow: hidden; }

.stat-row .bar > span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg,#7f7f7f,#ffffff); }

/* PALETTE SWATCH BLOCKS */

.palette { display: flex; align-items: center; gap: 8px; margin: 12px 0; }

.palette .p-label { font-family: 'DM Sans', sans-serif; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--ri-dim); }

.palette .swatches { display: flex; gap: 4px; }

.palette .swatches i { width: 22px; height: 22px; display: block; box-shadow: 0 0 0 1px #ffffff30; transition: transform .25s ease; }

.palette .swatches i:hover { transform: translateY(-3px); }

.palette .s1{background:#fff} .palette .s2{background:#b4b4b4} .palette .s3{background:#7f7f7f} .palette .s4{background:#363636} .palette .s5{background:#0e0e0f}

/* MARQUEE / TICKER STRIP */

.ticker { overflow: hidden; white-space: nowrap; border-top: 1px solid var(--ri-line); border-bottom: 1px solid var(--ri-line); padding: 4px 0; margin: 12px 0; font-family: 'DM Sans', sans-serif; font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--ri-dim); }

.ticker > span { display: inline-block; animation: tickerScroll 18s linear infinite; }

@keyframes tickerScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* PHOTO RAIL — SCROLLING BAR FOR PICTURES */

.photo-rail {

position: relative;

overflow: hidden;

width: 100%;

margin: 16px 0;

padding: 10px 0;

border-top: 1px solid var(--ri-line);

border-bottom: 1px solid var(--ri-line);

}

.photo-rail .pr-track {

display: flex;

flex-wrap: nowrap;

gap: 10px;

width: max-content;

animation: railScroll 32s linear infinite;

}

.photo-rail .pr-track img {

flex: 0 0 150px;

width: 150px;

height: 200px;

object-fit: cover;

border: 1px solid var(--ri-line);

}

@keyframes railScroll {

from { transform: translateX(0); }

to { transform: translateX(-50%); }

}

/* FLOATING TEXT BOXES */

.float-field{ position: relative; margin: 18px 0 26px; min-height: 120px; }

.float-box{

position: relative; display: inline-block; max-width: 260px; margin: 6px 10px;

background: linear-gradient(180deg,var(--ri-panel),#000);

border: 1px solid var(--ri-line); border-left: 3px solid #ffffff7d;

padding: 8px 12px; border-radius: 1px;

box-shadow: 0 14px 28px #000000a6;

animation: floatBox 7s ease-in-out infinite;

transition: border-color .3s ease, box-shadow .3s ease;

}

.float-box:hover{ border-color:#ffffff80; box-shadow:0 18px 36px #000, 0 0 0 1px #ffffff20; }

.float-box::after{

content:""; position:absolute; top:6px; right:6px; width:22px; height:5px;

background: repeating-linear-gradient(90deg,#fff 0 1px,transparent 1px 3px); opacity:.5;

}

.float-box .fb-label{ display:block; font-family:'DM Sans',sans-serif; font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--ri-dim); }

.float-box .fb-text{ font-family:'Lato',sans-serif; font-size:13px; color:#fff; }

.float-box.tilt-l{ transform: rotate(-1.5deg); animation-delay:-1.5s; }

.float-box.tilt-r{ transform: rotate(1.5deg); animation-delay:-3.5s; }

.float-box.slow{ animation-duration: 9s; }

@keyframes floatBox { 0%,100%{translate:0 0} 50%{translate:0 -10px} }

.side-tasks {

position: fixed; right: 0; top: 10vh; : 50;

display: flex; flex-direction: column; gap: 8px; /* Increased gap */

/* Changed from 34px to 44px to match the new larger handle width */

transform: translateX(calc(100% - 44px));

transition: transform .45s cubic-bezier(.16,.84,.3,1);

}

.side-tasks:hover, .side-tasks:focus-within { transform: translateX(0); }

.side-tasks::before {

content: "T A S K S"; position: absolute; left: -1px; top: 0; bottom: 0;

width: 44px; /* Increased handle width from 34px */

display: flex; align-items: center; justify-content: center;

writing-mode: vertical-rl; transform: rotate(180deg);

font-family: 'DM Sans', sans-serif;

font-size: 13px; /* Increased font size from 9px */

letter-spacing: 6px; /* Increased spacing from 4px */

color: var(--ri-dim);

background: linear-gradient(180deg, var(--ri-panel), #000);

border: 1px solid var(--ri-line);

pointer-events: none;

}

.side-tasks .st-item {

margin-left: 44px; /* Increased from 34px to clear the larger handle */

min-width: 250px; /* Increased panel width from 190px */

padding: 12px 18px; /* Increased padding from 8px 12px */

background: linear-gradient(180deg, var(--ri-panel), #000);

border: 1px solid var(--ri-line); border-radius: 2px;

font-family: 'Lato', sans-serif;

font-size: 15px; /* Increased font size from 12px */

color: #fff; letter-spacing: 1px;

display: flex; align-items: center; gap: 12px; /* Increased gap */

transition: border-color .3s ease, background .3s ease;

}

.side-tasks .st-item:hover { border-color: #ffffff80; background: #ffffff0f; }

.side-tasks .st-item::before {

content: "#"; color: var(--ri-dim);

font-size: 24px; /* Increased icon font size from 20px */

}

/* TWO COLUMNS */

.container { display: flex; width: 100%; }

.column { width: 50%; padding: 10px; box-sizing: border-box; }

.left { color: white; text-align: left; }

.right { color: lightgray; text-align: left; }

/* TEXT STYLING */

.profile-about-me h1 { font-family: 'Raleway', sans-serif; color: lightgray; font-weight: 600; font-size: 1.8em; letter-spacing: 1px; }

/* =========== RESPONSIVE / NO-OVERFLOW FIXES ============ */

html, body, .profile-page-background { max-width: 100%; overflow-x: hidden; }

.profile-uc-background-flex, .profile-about-me, .profile-info-hstack { box-sizing: border-box; max-width: 100%; }

.ticker, .bio-banner, .float-field, .info-grid, .photo-rail { max-width: 100%; }

@media (max-width: 1024px){

.profile-title-heading{ font-size: clamp(2.25rem,7vw,3.5rem); max-height: 58vh; }

.profile-avatar-container{ height: 300px; width: 230px; }

.profile-about-me{ padding: 10px 20px 28px; }

.profile-info-hstack{ padding: 1.5rem 1rem .75rem 1.75rem; }

}

@media (max-width: 720px){

.profile-info-hstack{ flex-direction: column; align-items: stretch; gap: 1rem; padding: 1.25rem 1rem 1rem 1.5rem; }

.profile-info-stack, .profile-info-stack-inner{ padding: 0; }

.profile-title-heading{

writing-mode: horizontal-tb; transform: none; max-height: none;

border-right: none; border-left: 4px solid #ffffff7d;

padding: 0 0 0 10px; font-size: clamp(2rem,10vw,3rem); letter-spacing: -1px;

}

.profile-avatar-container{ order: 0; width: calc(100% - 28px); max-width: 420px; height: 320px; margin: 14px; animation: none; }

.profile-avatar-container::before{ inset: -12px; }

.profile-uc-background-flex::after{ display: none; }

.profile-about-me{ padding: 10px 14px 28px; }

.bio-banner .bb-title{ font-size: clamp(1.5rem,8vw,2.25rem); }

.info-grid{ grid-template-columns: 1fr; }

.float-field{ display: flex; flex-direction: column; gap: 14px; }

.float-box{ width: 100%; max-width: none; margin: 0; transform: none !important; animation: none; }

.photo-rail .pr-track img{ height: 180px; }

.side-tasks{ top: auto; bottom: 12vh; }

.side-tasks .st-item{ min-width: 150px; font-size: 11px; }

.profile-top-bar-search{ display: none; }

}

@media (max-width: 480px){

.profile-avatar-container{ height: 260px; }

.stat-row{ font-size: 10px; }

}

</style>

<div class="st-item">Repeat</div>

</div>

<span class="bb-kicker">DUMBASS · TOP #5 FEMBOY CREATOR · 5'3"</span>

<div class="bb-title">CERTIFIED BOYLIKER</div>

<span class="bb-sub">Amongst A Sea of Fortune, You Were The Treasure I Found.</span>

</div>

<div class="ticker"><span>FEMBOYS — LADIES— OMEGAVERSE — MAGIC — ZOMBIES — DEMIHUMANS — ANPOV— FEMBOYS — LADIES — OMEGAVERSE — MAGIC — ZOMBIES — DEMIHUMANS — ANYPOV</span></div>

<div class="float-box tilt-l"><span class="fb-label">infection status</span><span class="fb-text">Confirmed infected by medical examination.</span></div>

<div class="float-box tilt-r slow"><span class="fb-label">field note</span><span class="fb-text">“whistle stop” — recorded twice, never in the same district.</span></div>

<div class="float-box"><span class="fb-label">clearance</span><span class="fb-text">NT / ST — archive access granted.</span></div>

</div>

<div class="info-block"><span class="ib-label">GENDER</span><span class="ib-value">T R A N S M A S C</span></div>

<div class="info-block"><span class="ib-label">MAIN PRODUCT</span><span class="ib-value"> F E M B O Y S !</span></div>

<div class="info-block"><span class="ib-label">STATUS</span><span class="ib-value">S L O W</span></div>

</div>

<div class="stat-row">quality <span class="bar"><span style="width:70%"></span></span> 70%</div>

<div class="stat-row">creativity<span class="bar"><span style="width:55%"></span></span> 55%</div>

<span class="p-label">setting colour</span>

</div>

</div>

<summary>click to expand</summary>

<div class="details-content">I'll add something here soon.</div>

</details>

<p>SILLY STUFF HERE!</p>

Created Aug 8

Updated Sep 6

Published Aug 8