<!--
ACEMYSPACE PIXEL NOTEBOOK TEMPLATE
signature: aceenvw
version: 3

START HERE
Paste the whole template into your JAI profile bio, including the style block at the end.

TEXT: replace uppercase fields and lorem paragraphs with your own words.
Edit repeated names, usernames, dates, and counts in each place they appear.
Filled-in text is sample content: replace it along with the uppercase placeholders.
The profile display name, live followers, and optional verified badge come from JAI automatically.
Remove any optional personal field you do not want to share.

PICTURES: search for ENTER PIC URL HERE. For existing images, replace src="..."
with your own JAI-approved image URL and edit alt="..." for a short picture description.
Keep the quotation marks and draggable="false"; leave alt empty for decorative images.
For numbered creator placeholders, follow CREATOR PICTURES before adding an image.

LINKS: edit the existing href on the first friend, creator, and contact cards.
For unlinked cards, search for ENTER URL HERE and follow the opening/closing tag examples.
Use your full https:// destination in href. Replace LINK_URL with a short
visible label; editing these labels does not make an unlinked card clickable.
For gallery and Resources links, replace each href="ENTER URL HERE" before use.
Keep internal links beginning with # unchanged: these open the notebook pages.

SECTIONS
01 Profile: counters, mood, avatar, personal facts, and friends.
02 Navigation: the eight page labels.
03 Home: updates, welcome message, interests, and current favorites.
04 Diary: dated entries and notes.
05 Garden: three miniroom pictures and projects.
06 Gallery: bot/series pictures, descriptions, and destination links.
07 Contact: your platforms and contact preferences.
08 Rules: your boundaries and reuse policy.
09 Creators: people whose work you want to recommend, separate from your friends.
10 Resources: categories of guides, tools, and useful links.
11 Page links and theme credit: keep these in place.

MORE / FEWER ENTRIES: duplicate or remove a whole card, entry, or figure in its section,
including its matching opening and closing article, a, or figure tags and everything inside.
Keep the surrounding section and grid containers. Update displayed counts yourself.

COLORS / FONTS / SIZES: see the labeled CSS sections after the HTML.
Main colors: cream #FFF9EF, sage #DDE5D2, moss #576353, pine #364232,
peach #FDD3A2, coral #D7765A. Colors are written directly in each style rule.
Keep class names, IDs, and animation names unless you also update their matching CSS.

CHARACTER CARDS: your JAI characters appear below the notebook automatically.
Edit their pictures, names, descriptions, and tags in JAI's character editor, not this HTML.
Keep the visible aceenvw theme credit.
-->

<!-- 01 / PROFILE: edit the left-hand page below. -->
<section class="ace-shell">
<div class="ace-notebook">
<aside class="ace-left-page">
<!-- COUNTERS: replace 000 and 000000 manually. These are not live visitor counts. -->
<div class="ace-left-topline"><span>TODAY</span><b>000</b><span>|</span><span>TOTAL</span><b>000000</b></div>

<!-- MOOD: replace MOOD with your current status. -->
<div class="ace-mood-bar"><span>TODAY IS...</span><span class="ace-mood-state">MOOD</span></div>

<!-- AVATAR: two matching pictures create the blinking effect.
For one still picture: delete the second img and change the first class to "ace-avatar". -->
<div class="ace-avatar-frame">
<!-- ENTER PIC URL HERE: replace the first src with your open-eyes / main avatar. -->
<img class="ace-avatar ace-avatar-open" src="https://ella.janitorai.com/media-approved/MeXEza91NdUBn4PqH3Mop.webp" alt="" draggable="false">
<!-- ENTER PIC URL HERE: replace the second src with the matching closed-eyes avatar. -->
<img class="ace-avatar ace-avatar-closed" src="https://ella.janitorai.com/media-approved/ejb5qoY0TFQ7Nx607MQGq.webp" alt="" draggable="false">
<span class="ace-avatar-sheen"></span>
</div>

<!-- PERSONAL INFO: display name, followers, and the optional verified badge are automatic from JAI.
Edit YOUR LITTLE CORNER, NAME (your preferred name), AGE, PRONOUNS, and DATE below.
Change both the label (dt) and answer (dd) in each fact, or remove its whole div. -->
<div class="ace-mini-profile">
<p class="ace-kicker">YOUR LITTLE CORNER</p>
<p class="ace-aka">NAME</p>
<p class="ace-bio-line">AGE | PRONOUNS</p>
<p class="ace-date-line">updated DATE</p>
<dl class="ace-facts">
<div><dt>based in</dt><dd>TIMEZONE</dd></div>
<div><dt>speaks</dt><dd>LANGUAGES</dd></div>
<div><dt>making</dt><dd>CREATIVE FIELD</dd></div>
</dl>
</div>

<!-- FRIENDS: edit each name, number, and short note. Duplicate/remove a whole card
including its matching opening/closing tags and everything inside.
FIRST CARD: edit its existing href; keep its a tags.
UNLINKED CARDS: replace the opening article with:
<a class="ace-friend" href="ENTER URL HERE">
Then replace that card's closing </article> with </a>. Keep the three spans inside. -->
<section class="ace-friends">
<h3>friends</h3>
<div class="ace-friends-body">
<a class="ace-friend" href="https://janitorai.com/profiles/b73ab5c5-9067-4f92-840a-6bf64abd5b03_profile-of-aceintheinterface">
<span class="ace-friend-pixel">#1</span>
<span class="ace-friend-name">NICE EXAMPLE</span>
<span class="ace-friend-note">a little note</span>
</a>
<article class="ace-friend">
<span class="ace-friend-pixel">#2</span>
<span class="ace-friend-name">FRIEND NAME</span>
<span class="ace-friend-note">a little note</span>
</article>
<article class="ace-friend">
<span class="ace-friend-pixel">#3</span>
<span class="ace-friend-name">FRIEND NAME</span>
<span class="ace-friend-note">a little note</span>
</article>
<article class="ace-friend">
<span class="ace-friend-pixel">#4</span>
<span class="ace-friend-name">FRIEND NAME</span>
<span class="ace-friend-note">a little note</span>
</article>
</div>
</section>

<!-- PROFILE FOOTER: edit the small brand label and USERNAME below. -->
<div class="ace-profile-footer">
<b>cyworld</b>
<span>USERNAME's notebook</span>
</div>
</aside>

<!-- 02 / NAVIGATION: edit the visible labels only. Keep the classes and # links. -->
<nav class="ace-tabs">
<a class="ace-tab-home" href="#ace-home">home</a>
<a class="ace-tab-diary" href="#ace-diary">diary</a>
<a class="ace-tab-garden" href="#ace-garden-tab">garden</a>
<a class="ace-tab-gallery" href="#ace-gallery">gallery</a>
<a class="ace-tab-contact" href="#ace-contact-tab">contact</a>
<a class="ace-tab-rules" href="#ace-rules">rules</a>
<a class="ace-tab-creators" href="#ace-creators">creators</a>
<a class="ace-tab-resources" href="#ace-resources">resources</a>
</nav>

<main class="ace-right-page">
<!-- 03 / HOME: edit the page title, USERNAME, welcome message, and interests. -->
<section class="ace-panel ace-panel-home">
<header class="ace-page-head">
<div>
<span class="ace-page-title-small">a little personal homepage</span>
<h1>NAME's notebook</h1>
</div>
<p>@USERNAME / home</p>
</header>

<!-- UPDATES: replace each short message between the a tags. Keep its # link.
The diary/photo/creator/page totals are manual; update them when you change entries. -->
<section class="ace-news">
<h3>Updated news</h3>
<div class="ace-news-grid">
<p><b>diary</b><a href="#ace-diary">Lorem ipsum dolor sit amet.</a></p>
<p><b>garden</b><a href="#ace-garden-tab">Proin commodo condimentum libero.</a></p>
<p><b>photos</b><a href="#ace-gallery">Aliquam erat volutpat.</a></p>
<p><b>board</b><a href="#ace-rules">House rules and useful notes.</a></p>
</div>
<div class="ace-stats-row">
<span>diary <b>03</b></span>
<span>photos <b>04</b></span>
<span>creators <b>06</b></span>
<span>pages <b>08</b></span>
</div>
</section>

<!-- WELCOME NOTE: replace the sample heading and paragraph. The link opens Garden. -->
<article class="ace-note">
<span class="ace-page-title-small">a note at the door</span>
<h3>Welcome to my little corner</h3>
<p>A small place for stories, saved pictures, and things I am learning. Browse the pages, peek into the garden, or leave with something new to read.</p>
<a class="ace-directory-link" href="#ace-garden-tab">visit the miniroom</a>
</article>

<!-- ABOUT / CURRENTLY / FAVORITES: edit the paragraphs, fact answers, and li labels. -->
<section class="ace-lower-grid">
<article class="ace-card">
<h3>About me</h3>
<p>Maecenas libero nunc, ullamcorper at lectus ac, laoreet scelerisque quam. Phasellus id ipsum nulla. Suspendisse nulla mauris, elementum vitae ligula eu, faucibus pulvinar elit.</p>
</article>

<article class="ace-card">
<h3>Currently</h3>
<dl class="ace-facts">
<div><dt>reading</dt><dd>BOOK / STORY</dd></div>
<div><dt>playing</dt><dd>GAME / SONG</dd></div>
<div><dt>making</dt><dd>CURRENT PROJECT</dd></div>
</dl>
</article>

<article class="ace-card">
<h3>Small favorites</h3>
<ul class="ace-tags"><li>INTEREST</li><li>GENRE</li><li>FANDOM</li><li>COMFORT THING</li></ul>
<p>Mauris ut commodo neque, quis fringilla turpis. Aliquam erat volutpat.</p>
</article>
</section>
</section>

<!-- 04 / DIARY: edit DATE, MOOD, title, paragraph, and footer in each ace-diary-entry article.
Duplicate/remove a whole ace-diary-entry article to change the number of entries. -->
<section class="ace-panel ace-panel-diary">
<header class="ace-page-head">
<div>
<span class="ace-page-title-small">dear pixel diary</span>
<h1>diary</h1>
</div>
<p>small moments, kept here</p>
</header>

<!-- SAMPLE ENTRY: replace the date, mood, title, story, and listening note below. -->
<section class="ace-diary-list">
<article class="ace-diary-entry">
<div class="ace-entry-meta"><span>06 SEP 2026</span><small>unhurried</small></div>
<div>
<h3>A slow Sunday</h3>
<p>Opened a fresh page, made a warm drink, and finally gave an old idea a title. Nothing big today, just a little progress worth keeping.</p>
<p class="ace-entry-foot">listening to: rain against the window</p>
</div>
</article>
<article class="ace-diary-entry">
<div class="ace-entry-meta"><span>DATE</span><small>MOOD</small></div>
<div>
<h3>ENTRY TITLE</h3>
<p>Pellentesque laoreet sed tortor feugiat pretium. Vivamus facilisis porttitor ante, sed vulputate neque bibendum at. Fusce urna nisi, bibendum eu ex sed, condimentum feugiat eros.</p>
<p class="ace-entry-foot">a small win: YOUR NOTE</p>
</div>
</article>
<article class="ace-diary-entry">
<div class="ace-entry-meta"><span>DATE</span><small>MOOD</small></div>
<div>
<h3>ENTRY TITLE</h3>
<p>Vivamus cursus blandit sem vitae pulvinar. Nullam varius ante et est bibendum tincidunt. Aenean ut cursus mi. Sed feugiat dignissim erat aliquam aliquet.</p>
<p class="ace-entry-foot">remember this: YOUR NOTE</p>
</div>
</article>
</section>
<!-- DIARY NOTE: edit the heading, paragraph, and three wish-list items. -->
<article class="ace-note">
<h3>For another day</h3>
<p>Nunc eu arcu bibendum, viverra neque nec, pellentesque neque. Integer eleifend magna ornare accumsan viverra.</p>
<ul class="ace-tags">
<li>IDEA TO TRY</li>
<li>PLACE TO GO</li>
<li>THING TO FINISH</li>
</ul>
</article>
</section>

<!-- 05 / GARDEN: edit ROOM NAME, SEASON, and DATE, then replace the three pictures. -->
<section class="ace-panel ace-panel-garden">
<header class="ace-page-head">
<div>
<span class="ace-page-title-small">miniroom view</span>
<h1>garden</h1>
</div>
<p>interests, ideas, and growing things</p>
</header>
<section class="ace-garden">
<div class="ace-garden-tabs"><span>ROOM NAME</span><b>Miniroom</b><span>SEASON</span></div>
<div class="ace-garden-frame">
<!-- ENTER PIC URL HERE: replace src below with your first miniroom picture. -->
<img class="ace-garden-img ace-garden-1" src="https://ella.janitorai.com/media-approved/grvHiElk1vk9MJBHDxYxq.webp" alt="" draggable="false">
<!-- ENTER PIC URL HERE: replace src below with your second miniroom picture. -->
<img class="ace-garden-img ace-garden-2" src="https://ella.janitorai.com/media-approved/-2nx-ug66PMaH0XO_Wf4o.webp" alt="" draggable="false">
<!-- ENTER PIC URL HERE: replace src below with your third miniroom picture.
Keep all three images and their classes for the slideshow. -->
<img class="ace-garden-img ace-garden-3" src="https://ella.janitorai.com/media-approved/iLc11Zsjsay-mUX-TnxOj.webp" alt="" draggable="false">
<span class="ace-pixel-scan"></span>
</div>
<p class="ace-garden-tools">three saved scenes <span>tended on DATE</span></p>
</section>
<!-- PROJECTS: edit each stage, PROJECT NAME, paragraph, and next step.
Duplicate/remove a whole ace-card article for more/fewer projects. -->
<section class="ace-lower-grid">
<article class="ace-card">
<span class="ace-stage">01 / seedling</span>
<h3>PROJECT NAME</h3>
<p>Aenean varius risus nisl. Proin ac nisl ac enim porttitor gravida eget eu magna.</p>
<p class="ace-entry-foot">next: FIRST STEP</p>
</article>

<article class="ace-card">
<span class="ace-stage">02 / growing</span>
<h3>PROJECT NAME</h3>
<p>Phasellus convallis porta nisi, nec congue risus tincidunt non. Nullam consectetur consectetur tellus in cursus.</p>
<p class="ace-entry-foot">next: NEXT STEP</p>
</article>

<article class="ace-card">
<span class="ace-stage">03 / resting</span>
<h3>PROJECT NAME</h3>
<p>Fusce euismod nisi quis lorem lacinia lobortis. Integer a placerat felis.</p>
<p class="ace-entry-foot">returning: WHENEVER READY</p>
</article>
</section>
<!-- FIELD NOTES: edit the paragraph and your current inspiration / learning topic. -->
<article class="ace-note">
<h3>Field notes</h3>
<p>Vivamus nec fringilla diam, in volutpat dolor. Phasellus blandit ipsum non enim gravida, et sagittis risus hendrerit.</p>
<dl class="ace-facts">
<div><dt>collecting</dt><dd>INSPIRATION</dd></div>
<div><dt>learning</dt><dd>SKILL / TOPIC</dd></div>
</dl>
</article>
</section>

<!-- 06 / GALLERY: feature a bot portrait or series cover with its title and description.
Replace each footer's href="ENTER URL HERE" with your bot or series URL before use.
Edit "link to series/bot" if desired. Keep the image and description outside the a tags.
Add artwork credit to the caption if needed.
Duplicate/remove a whole figure, then update the Home photo count.
Keep every figure inside ace-gallery-grid, before its closing div. -->
<section class="ace-panel ace-panel-gallery">
<header class="ace-page-head">
<div>
<span class="ace-page-title-small">characters &amp; story worlds</span>
<h1>gallery</h1>
</div>
<p>stories from COLLECTION NAME</p>
</header>
<div class="ace-gallery-grid">
<!-- PHOTO 01 / ENTER PIC URL HERE: replace src below.
Replace the sample date, story title, description, and footer href. -->
<figure>
<img src="https://ella.janitorai.com/media-approved/grvHiElk1vk9MJBHDxYxq.webp" alt="" draggable="false">
<figcaption>
<small>01 / 06 SEP 2026</small>
<b>A story to return to</b>
<p>A character-led story about unexpected meetings and the choices that follow.</p>
<a class="ace-gallery-link" href="ENTER URL HERE">link to series/bot</a>
</figcaption>
</figure>

<!-- PHOTO 02 / ENTER PIC URL HERE: replace src below and edit its caption fields. -->
<figure>
<img src="https://ella.janitorai.com/media-approved/-2nx-ug66PMaH0XO_Wf4o.webp" alt="" draggable="false">
<figcaption>
<small>02 / DATE</small>
<b>BOT / SERIES TITLE</b>
<p>Proin feugiat lacus vel vestibulum dapibus. Aenean et dapibus risus.</p>
<a class="ace-gallery-link" href="ENTER URL HERE">link to series/bot</a>
</figcaption>
</figure>

<!-- PHOTO 03 / ENTER PIC URL HERE: replace src below and edit its caption fields. -->
<figure>
<img src="https://ella.janitorai.com/media-approved/iLc11Zsjsay-mUX-TnxOj.webp" alt="" draggable="false">
<figcaption>
<small>03 / DATE</small>
<b>BOT / SERIES TITLE</b>
<p>Aliquam sagittis, diam ac auctor vehicula, libero sapien aliquet justo.</p>
<a class="ace-gallery-link" href="ENTER URL HERE">link to series/bot</a>
</figcaption>
</figure>

<!-- PHOTO 04 / ENTER PIC URL HERE: replace the entire ace-gallery-placeholder div below with:
<img src="ENTER PIC URL HERE" alt="IMAGE DESCRIPTION" draggable="false">
Use your approved JAI image URL in src and describe the picture in alt.
Keep the surrounding figure and figcaption; edit DATE, BOT / SERIES TITLE, description, and footer href. -->
<figure>
<div class="ace-gallery-placeholder">PHOTO 04</div>
<figcaption>
<small>04 / DATE</small>
<b>BOT / SERIES TITLE</b>
<p>Aenean et dapibus risus. Aliquam sagittis, diam ac auctor vehicula.</p>
<a class="ace-gallery-link" href="ENTER URL HERE">link to series/bot</a>
</figcaption>
</figure>
</div>
<!-- ALBUM NOTE: edit the paragraph and the three labels below. -->
<article class="ace-note">
<h3>Behind these stories</h3>
<p>Curabitur rhoncus nibh ante, gravida rutrum magna euismod sit amet. In elementum eros vel leo semper euismod. Curabitur nec dignissim felis.</p>
<ul class="ace-tags"><li>GENRE</li><li>SETTING</li><li>THEME</li></ul>
</article>
</section>

<!-- 07 / CONTACT: edit platform titles, handles, descriptions, and destination labels.
FIRST CARD: edit its existing href; keep its a tags.
UNLINKED CARDS: replace the opening article with:
<a class="ace-link-card" href="ENTER URL HERE">
Then replace that card's closing </article> with </a>.
Replace visible LINK_URL text with a short label such as "visit my page". -->
<section class="ace-panel ace-panel-contact">
<header class="ace-page-head">
<div>
<span class="ace-page-title-small">little link shelf</span>
<h1>contact</h1>
</div>
<p>find NAME elsewhere</p>
</header>
<div class="ace-link-grid">
<!-- SAMPLE LINK: replace href with your own profile URL and edit the text below. -->
<a class="ace-link-card" href="https://janitorai.com/profiles/b73ab5c5-9067-4f92-840a-6bf64abd5b03_profile-of-aceintheinterface">
<b>JANITORAI</b>
<span>NICE EXAMPLE</span>
<p>Stories, characters, and a small corner of the community.</p>
<small>visit profile</small>
</a>

<article class="ace-link-card">
<b>PORTFOLIO</b>
<span>WORK / COLLECTION</span>
<p>Morbi maximus viverra dui vitae tincidunt. Nunc ultrices venenatis maximus.</p>
<small>LINK_URL</small>
</article>

<article class="ace-link-card">
<b>COMMUNITY</b>
<span>SPACE NAME</span>
<p>Curabitur non turpis eu ante suscipit porta. Morbi et risus imperdiet libero maximus vulputate.</p>
<small>LINK_URL</small>
</article>

<article class="ace-link-card">
<b>SUPPORT</b>
<span>PAGE NAME</span>
<p>Fusce nisi lacus, posuere sit amet tortor eget, bibendum vestibulum nibh.</p>
<small>LINK_URL</small>
</article>
</div>
<!-- CONTACT PREFERENCES: edit request status, reply pace, preferred platform, and note. -->
<article class="ace-note">
<h3>Before you write</h3>
<dl class="ace-facts">
<div><dt>requests</dt><dd>OPEN / CLOSED</dd></div>
<div><dt>reply pace</dt><dd>REPLY EXPECTATION</dd></div>
<div><dt>best place</dt><dd>PREFERRED PLATFORM</dd></div>
</dl>
<p>In convallis sagittis venenatis. Pellentesque ultricies lacinia magna sed elementum.</p>
</article>
</section>

<!-- 08 / RULES: replace all sample paragraphs with your own boundaries and policies.
Edit the numbered headings, topic labels, and closing note. -->
<section class="ace-panel ace-panel-rules">
<header class="ace-page-head">
<div>
<span class="ace-page-title-small">house rules</span>
<h1>rules</h1>
</div>
<p>boundaries for this little space</p>
</header>
<div class="ace-rules-stack">
<article>
<b>01</b>
<div>
<h3>Welcome here</h3>
<p>Curabitur pretium nec ex vitae efficitur. Nunc eget dolor metus. Vivamus in venenatis quam, eu tincidunt augue.</p>
<ul class="ace-tags"><li>WELCOME TOPIC</li><li>SHARED INTEREST</li></ul>
</div>
</article>

<article>
<b>02</b>
<div>
<h3>Personal boundaries</h3>
<p>Etiam condimentum sapien vel nisi efficitur, vel dictum mauris posuere. Integer condimentum justo quis ipsum laoreet euismod.</p>
<p class="ace-entry-foot">BOUNDARY / CONTENT NOTE</p>
</div>
</article>

<article>
<b>03</b>
<div>
<h3>Use and credit</h3>
<p>Donec ut nisi nec nunc mattis sodales ut porta leo. Phasellus libero purus, lacinia a tortor id, tristique mattis quam.</p>
<p class="ace-entry-foot">YOUR REUSE / CREDIT POLICY</p>
</div>
</article>
</div>
<article class="ace-note">
<h3>A final note</h3>
<p>Donec eget enim consequat, blandit justo ut, rhoncus enim. Morbi semper hendrerit aliquet. Quisque vitae iaculis ex, non consequat urna.</p>
<a class="ace-directory-link" href="#ace-contact-tab">contact information</a>
</article>
</section>

<!-- 09 / CREATORS: edit names, categories, descriptions, and personal notes.
FIRST CARD: edit its existing href; keep its a tags.
UNLINKED CARDS: replace the opening article with:
<a class="ace-person" href="ENTER URL HERE">
Then replace that card's closing </article> with </a>.
Replace NOTE with a short personal note about the creator.

CREATOR PICTURES: keep each outer ace-person-img span.
FIRST PICTURE: edit the existing img src and alt; do not add a second image.
NUMBERED PLACEHOLDERS (02-06): replace only the inner ace-person-placeholder span
with this image, using your own JAI-approved URL and the creator name:
<img src="ENTER PIC URL HERE" alt="CREATOR NAME" draggable="false">
Leave the number in place if you do not want a picture.
MORE / FEWER CREATORS: duplicate/remove a whole ace-person card, including its matching
article or a tags and everything inside, then update the Home creator count. -->
<section class="ace-panel ace-panel-creators">
<header class="ace-page-head">
<div>
<span class="ace-page-title-small">inspiration directory</span>
<h1>creators</h1>
</div>
<p>work worth keeping close</p>
</header>
<p>Cras dignissim eget lectus id vehicula. Aliquam sapien sapien, dapibus vitae ipsum ut, tempus rhoncus felis.</p>
<div class="ace-creators-grid">
<a class="ace-person" href="https://janitorai.com/profiles/b73ab5c5-9067-4f92-840a-6bf64abd5b03_profile-of-aceintheinterface">
<!-- FIRST CREATOR / ENTER PIC URL HERE: replace the existing img src and alt below. -->
<span class="ace-person-img"><img src="https://ella.janitorai.com/media-approved/MeXEza91NdUBn4PqH3Mop.webp" alt="NICE EXAMPLE" draggable="false"></span>
<b>NICE EXAMPLE</b>
<small>FEMPOV, ANYPOV</small>
<p>Maecenas eget purus id magna maximus imperdiet.</p>
<small>NOTE</small>
</a>

<article class="ace-person">
<span class="ace-person-img"><span class="ace-person-placeholder">02</span></span>
<b>CREATOR NAME</b>
<small>FEMPOV, WLW</small>
<p>Aliquam sollicitudin dignissim justo quis mollis.</p>
<small>NOTE</small>
</article>

<article class="ace-person">
<span class="ace-person-img"><span class="ace-person-placeholder">03</span></span>
<b>CREATOR NAME</b>
<small>MALEPOV, MLM</small>
<p>Curabitur vulputate lacus urna, id pretium velit volutpat porta.</p>
<small>NOTE</small>
</article>

<article class="ace-person">
<span class="ace-person-img"><span class="ace-person-placeholder">04</span></span>
<b>CREATOR NAME</b>
<small>FEMPOV</small>
<p>Donec mauris ex, fringilla vel euismod non, sodales vel ipsum.</p>
<small>NOTE</small>
</article>

<article class="ace-person">
<span class="ace-person-img"><span class="ace-person-placeholder">05</span></span>
<b>CREATOR NAME</b>
<small>MALEPOV, ANYPOV</small>
<p>Cras et lobortis dolor. Fusce dictum urna a rutrum faucibus.</p>
<small>NOTE</small>
</article>

<article class="ace-person">
<span class="ace-person-img"><span class="ace-person-placeholder">06</span></span>
<b>CREATOR NAME</b>
<small>ANYPOV</small>
<p>Quisque in quam lorem. In velit nunc, consequat ut lacinia ac.</p>
<small>NOTE</small>
</article>
</div>
<!-- DIRECTORY NOTE: edit the heading and closing paragraph. -->
<article class="ace-note">
<h3>On this shelf</h3>
<p>A collection of creators and work to revisit, separate from the friends list. A few pages I return to for fresh ideas.</p>
</article>
</section>

<!-- 10 / RESOURCES: rename category headings and edit each entry name and description.
The first entry is a real guide example; keep or replace its href.
For every other entry, replace href="ENTER URL HERE" with a full https:// destination before use.
Only the entry name belongs inside the a tags; keep its explanation after the closing a.
Duplicate/remove a whole li for an entry, or a whole ace-resource-category section for a category. -->
<section class="ace-panel ace-panel-resources">
<header class="ace-page-head">
<h1>RESOURCES</h1>
</header>

<section class="ace-resource-category">
<h2>PROFILE CSS</h2>
<ul>
<li><a href="https://rentry.co/jaielements">Puppy's JAI Page Breakdown</a> - A reference for the page elements and selectors used in JAI profile styling.</li>
<li><a href="ENTER URL HERE">RESOURCE NAME</a> - SHORT DESCRIPTION</li>
</ul>
</section>

<section class="ace-resource-category">
<h2>BOT CREATION</h2>
<ul>
<li><a href="ENTER URL HERE">GUIDE NAME</a> - SHORT DESCRIPTION</li>
<li><a href="ENTER URL HERE">RESOURCE NAME</a> - SHORT DESCRIPTION</li>
</ul>
</section>

<section class="ace-resource-category">
<h2>WRITING &amp; TOOLS</h2>
<ul>
<li><a href="ENTER URL HERE">TOOL NAME</a> - SHORT DESCRIPTION</li>
<li><a href="ENTER URL HERE">RESOURCE NAME</a> - SHORT DESCRIPTION</li>
</ul>
</section>
</section>
</main>

<!-- 11 / PAGE LINKS: leave these IDs unchanged; they match the navigation above. -->
<div class="ace-anchors"><span id="ace-home"></span><span id="ace-diary"></span><span id="ace-garden-tab"></span><span id="ace-gallery"></span><span id="ace-contact-tab"></span><span id="ace-rules"></span><span id="ace-creators"></span><span id="ace-resources"></span></div>
</div>
</section>

<!-- THEME CREDIT: keep this author link visible. -->
<div class="ace-credit">
<span class="ace-credit-line">CSS done by <a href="https://janitorai.com/profiles/895c6c07-6a53-4420-bff5-b874db870b32_profile-of-aceenvw" rel="noopener noreferrer" target="_blank">aceenvw</a></span>
</div>

<style>
/* PAGE TEXT + SELECTION
Set your page background in JAI's profile settings.
Change selection colors and default text color/font-family below. Customize each component's
colors and fonts in its own section. */
::selection {
background: rgba(215, 118, 90, 0.32);
color: #000;
}

html {
overflow-x: hidden;
}

body {
min-height: 100dvh;
overflow: visible;
color: #364232 !important;
font-family: Silkscreen, Pixelify Sans, Courier Prime, monospace !important;
position: relative;
}

a, a:visited {
color: #34783E;
text-decoration: none;
cursor: pointer;
transition: color 260ms ease, background 260ms ease, border-color 260ms ease, filter 260ms ease, transform 360ms cubic-bezier(0.34, 1.15, 0.64, 1);
}

a:hover, a:active {
color: #D7765A !important;
}

strong, b {
color: #34783E;
font-weight: 700;
}

/* SITE HEADER + PAGE SURROUNDINGS
Customize the top bar's background, border, shadow, and fonts below.
Change content: "cygarden 275" to rename the visible site logo. */
.profile-page-flex {
position: relative;
z-index: 2;
}

.profile-page-flex {
flex-direction: column !important;
}

.profile-page-flex,
.profile-page-container,
.profile-page-container-flex-box,
.pp-uc-background,
.profile-uc-background-flex,
.profile-info-wrapper-box,
.profile-info-hstack,
.profile-info-stack-inner,
.profile-info-stack-inner-flex {
min-height: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
transform: none !important;
}

.profile-page-container,
.pp-uc-background {
width: 100% !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
box-shadow: none !important;
border: none !important;
}

.pp-uc-background:hover,
.profile-uc-background-flex:hover,
.profile-info-wrapper-box:hover {
background: transparent !important;
box-shadow: none !important;
filter: none !important;
transform: none !important;
}

/* OWNER EDIT CONTROL */
.css-9qctsi {
z-index: 7 !important;
}

/* TOP BAR FINISH: adjust background opacity, border-bottom, box-shadow, and blur. */
.pp-top-bar,
.profile-top-bar {
z-index: 9999;
background: rgba(248, 244, 234, 0.88) !important;
border-bottom: 2px solid rgba(168, 162, 158, 0.55) !important;
box-shadow: 0 4px 0 rgba(52, 66, 50, 0.12), inset 0 -1px 0 #FFF4E5 !important;
backdrop-filter: blur(14px) saturate(1.2);
-webkit-backdrop-filter: blur(14px) saturate(1.2);
}

/* Compact header: keep the native Home link and remove obsolete spacers/tabs. */
:is(.pp-top-bar, .profile-top-bar):has(> :is(.pp-top-bar-left, .profile-top-box-flex-inner)) {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
min-width: 0;
min-height: 60px;
padding: 8px;
box-sizing: border-box;
}
.pp-top-bar-left, .profile-top-box-flex-inner {
display: flex; align-items: center; flex: 0 0 auto; min-width: 0;
}
.pp-top-bar-right, .profile-top-bar-right {
flex: 0 0 auto; min-width: 0; margin-left: 0;
}
.pp-top-bar-right > div, .profile-top-bar-right > div {
display: flex; align-items: center; gap: 8px; min-width: 0;
}
.pp-top-bar-search-spacer-top, .profile-top-box-search-input-spacer-top,
.pp-top-bar-search-spacer-bottom, .profile-top-box-search-input-spacer-bottom,
.pp-top-bar-tabs {
display: none !important;
}
.profile-top-bar-logo-box { min-width: 0; }
.pp-top-bar-logo,
.profile-top-bar-logo,
a.profile-top-bar-logo-box {
display: flex;
align-items: center;
width: auto;
min-width: 0;
min-height: 44px;
padding: 0 4px;
text-decoration: none !important;
}

.pp-top-bar-logo img,
.profile-top-bar-logo img,
a.profile-top-bar-logo-box img,
.profile-top-bar-logo-name,
.pp-top-bar-logo-name,
.profile-top-bar-logo-sub-name,
.pp-top-bar-logo-sub-name {
display: none !important;
}

.pp-top-bar-logo:after,
.profile-top-bar-logo:after,
a.profile-top-bar-logo-box:after {
content: "cygarden 275";
white-space: nowrap;
display: inline-flex;
align-items: center;
padding: 5px 11px;
border: 2px solid #34783E;
border-radius: 4px;
background: #FFF4E5;
color: #34783E;
font-family: Silkscreen, Pixelify Sans, monospace;
font-size: 0.78rem;
letter-spacing: 1px;
text-transform: lowercase;
box-shadow: 3px 3px 0 #FDD3A2;
}

.pp-top-bar-logo:is(:hover, :focus-visible):after,
.profile-top-bar-logo:is(:hover, :focus-visible):after,
a.profile-top-bar-logo-box:is(:hover, :focus-visible):after {
background: #FDD3A2;
color: #000;
box-shadow: 3px 3px 0 #D7765A;
}

/* HEADER SEARCH
Change content: "look for a tiny page..." for the empty search hint.
Adjust the input background, border, and font sizes below. */
.profile-top-bar-search-wrapper {
display: flex; align-items: center;
flex: 1 1 280px; width: auto !important; max-width: 280px;
min-width: 0; margin-left: auto; padding: 0;
}
.pp-top-bar-search-box, .profile-top-bar-search-box,
.pp-top-bar-search-form, .pp-top-bar-search-form form {
width: 100%; min-width: 0; margin: 0;
}
.pp-top-bar-search-input-group,
.profile-top-bar-search-input-group {
box-sizing: border-box;
display: flex; align-items: center;
width: 100%; min-width: 0; height: 40px; gap: 0; padding: 0;
position: relative !important;
background: #FFF4E5 !important;
border: 2px solid rgba(52, 120, 62, 0.55) !important;
border-radius: 4px !important;
color: #364232 !important;
font-family: Silkscreen, Pixelify Sans, monospace !important;
font-size: 12px !important;
box-shadow: inset 2px 2px 0 rgba(168, 162, 158, 0.22) !important;
}

/* The icon is a sibling of the input; paint the border on their shared group. */
:is(.pp-top-bar-search-input, .profile-top-bar-search-input, .pp-top-bar-search, .profile-top-bar-search) {
box-sizing: border-box; position: relative !important;
flex: 1 1 0; width: 100%; min-width: 0; max-width: none; height: 100%;
padding: 0; opacity: 1; transition: none;
background: transparent !important; border: none !important;
border-radius: 0 !important; box-shadow: none !important;
}
.pp-top-bar-search-icon {
position: static; display: flex; align-items: center; justify-content: center;
flex: 0 0 36px; width: 36px; height: 100%; padding: 0; color: inherit;
}
.pp-top-bar-search-icon > div { display: flex; }
.pp-top-bar-search-right, .profile-top-bar-search-wrapper kbd { display: none !important; }
:is(.pp-top-bar-search-input, .profile-top-bar-search-input, .pp-top-bar-search, .profile-top-bar-search) input {
box-sizing: border-box; width: 100% !important; min-width: 0; height: 100%;
padding: 0 10px 0 0 !important; background: transparent !important;
border: none !important; outline: none !important; box-shadow: none !important;
color: #364232 !important;
font-family: Silkscreen, Pixelify Sans, monospace !important;
font-size: 12px !important;
}

:is(.pp-top-bar-search-input, .profile-top-bar-search-input, .pp-top-bar-search, .profile-top-bar-search) input::placeholder {
color: transparent !important;
}

:is(.pp-top-bar-search-input, .profile-top-bar-search-input, .pp-top-bar-search, .profile-top-bar-search):after {
content: "look for a tiny page...";
position: absolute;
left: 0;
right: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
top: 50%;
transform: translateY(-50%);
color: rgba(87, 99, 83, 0.55);
font-family: Silkscreen, Pixelify Sans, monospace;
font-size: 10px;
pointer-events: none;
transition: opacity 160ms ease, visibility 0s linear 160ms !important;
}

:is(.pp-top-bar-search-input, .profile-top-bar-search-input, .pp-top-bar-search, .profile-top-bar-search):is(:focus-within, :has(input:not(:placeholder-shown))):after {
opacity: 0 !important;
visibility: hidden !important;
}

:is(.pp-top-bar-search-input, .profile-top-bar-search-input, .pp-top-bar-search, .profile-top-bar-search) input:is(:focus, :not(:placeholder-shown)) {
color: #364232 !important;
}

:is(.pp-top-bar-logo, .profile-top-bar-logo, a.profile-top-bar-logo-box):focus-visible,
:is(.pp-top-bar-search-input-group, .profile-top-bar-search-input-group):focus-within {
outline: 2px solid currentColor; outline-offset: 3px;
}
@media (max-width: 991.98px) {
:is(.pp-top-bar, .profile-top-bar):has(> :is(.pp-top-bar-left, .profile-top-box-flex-inner)) {
flex-wrap: wrap; gap: 8px;
}
.pp-top-bar-right, .profile-top-bar-right { margin-left: auto; }
.profile-top-bar-search-wrapper { order: 3; flex-basis: 100%; max-width: none; }
}

/* CREATE CHARACTER BUTTON
Change content: "new sprite" for the button label; adjust min-width, padding,
background, and border for its size and colors. The label has its own font-size. */
.pp-top-bar-create-char,
.profile-top-bar-create-char,
.glow-on-hover {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 106px !important;
min-height: 32px !important;
padding: 0 12px !important;
border: 2px solid #D7765A !important;
border-radius: 4px !important;
background: #FDD3A2 !important;
box-shadow: 3px 3px 0 #34783E !important;
color: #D7765A !important;
font-family: Silkscreen, Pixelify Sans, monospace !important;
font-size: 0 !important;
overflow: hidden !important;
}

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

.pp-top-bar-create-char:after,
.profile-top-bar-create-char:after,
.glow-on-hover:after {
content: "new sprite" !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
z-index: 2 !important;
opacity: 1 !important;
visibility: visible !important;
color: #D7765A !important;
text-shadow: 1px 1px 0 rgba(255, 244, 229, 0.75) !important;
font-family: Silkscreen, Pixelify Sans, monospace !important;
font-size: 0.72rem !important;
line-height: 1 !important;
letter-spacing: 1px !important;
text-transform: lowercase !important;
background: transparent !important;
box-shadow: none !important;
pointer-events: none !important;
}

.pp-top-bar-create-char:hover,
.profile-top-bar-create-char:hover,
.glow-on-hover:hover {
transform: translateY(-1px);
background: #FFD0B7 !important;
box-shadow: 4px 4px 0 #34783E !important;
}

.pp-top-bar-create-char:hover:after,
.profile-top-bar-create-char:hover:after,
.glow-on-hover:hover:after {
color: #000 !important;
text-shadow: none !important;
}

/* APP MENU
Customize button dimensions, icon color, and menu background, borders, and fonts below. */
:is(.pp-top-bar, .profile-top-bar) :is(.pp-top-bar-app-menu, .profile-top-bar-app-menu) {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 34px !important;
min-width: 34px !important;
height: 34px !important;
min-height: 34px !important;
padding: 0 !important;
overflow: hidden !important;
border-radius: 4px !important;
border: 2px solid #34783E !important;
background: #FFF4E5 !important;
box-shadow: 2px 2px 0 #FDD3A2 !important;
}

:is(.pp-top-bar, .profile-top-bar) :is(.pp-top-bar-app-menu, .profile-top-bar-app-menu) span div {
display: block !important;
position: relative !important;
margin: 0 !important;
width: 20px !important;
height: 20px !important;
background: #34783E !important;
clip-path: polygon(12% 18%, 88% 18%, 88% 28%, 12% 28%, 12% 46%, 88% 46%, 88% 56%, 12% 56%, 12% 74%, 88% 74%, 88% 84%, 12% 84%) !important;
}

:is(.pp-top-bar, .profile-top-bar) :is(.pp-top-bar-app-menu, .profile-top-bar-app-menu) :is(.chakra-avatar, img) {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
min-width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: none !important;
}

:is(.pp-top-bar, .profile-top-bar) :is(.pp-top-bar-app-menu, .profile-top-bar-app-menu) span {
position: absolute !important;
inset: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
z-index: 2 !important;
}

.pp-top-bar-app-menu-list,
.profile-top-bar-app-menu-list,
.chakra-modal__content {
background: #FFF4E5 !important;
border: 2px solid #34783E !important;
border-radius: 6px !important;
box-shadow: 5px 5px 0 rgba(52, 66, 50, 0.22) !important;
color: #364232 !important;
font-family: Silkscreen, Pixelify Sans, monospace !important;
z-index: 9999 !important;
}

.pp-top-bar-app-menu-list-item,
.profile-top-bar-app-menu-list-item {
font-family: Silkscreen, Pixelify Sans, monospace !important;
color: #364232 !important;
}

.pp-top-bar-app-menu-list-item:hover,
.profile-top-bar-app-menu-list-item:hover {
background: rgba(253, 211, 162, 0.65) !important;
color: #000 !important;
}

/* NOTIFICATION BUTTON + UNREAD BADGE
Customize the 44px button dimensions, 22px icon size, and button/badge colors below. */
[class*="notificationsContainer_"] {
background: transparent !important;
}

.pp-top-bar-notifications-button,
.profile-top-bar-notifications-button,
[class*="notificationsButton_"] {
position: relative;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box;
flex: 0 0 44px;
width: 44px !important;
min-width: 44px !important;
height: 44px !important;
min-height: 44px !important;
padding: 0 !important;
border: 2px solid #576353 !important;
border-radius: 6px !important;
background: #FFF4E5 !important;
color: #34783E !important;
box-shadow: 2px 2px 0 #FDD3A2 !important;
overflow: visible !important;
transform: none !important;
transition: background-color 160ms ease, box-shadow 160ms ease;
}

.pp-top-bar-notifications-button:hover,
.profile-top-bar-notifications-button:hover,
[class*="notificationsButton_"]:hover {
background: #FDD3A2 !important;
box-shadow: 2px 2px 0 #D7765A !important;
}

.pp-top-bar-notifications-button:focus-visible,
.profile-top-bar-notifications-button:focus-visible,
[class*="notificationsButton_"]:focus-visible {
outline: 2px solid #364232 !important;
outline-offset: 3px;
}

.pp-top-bar-notifications-button svg,
.profile-top-bar-notifications-button svg,
[class*="notificationsButton_"] svg {
display: block;
flex-shrink: 0;
width: 22px !important;
height: 22px !important;
color: #34783E !important;
}

.pp-top-bar-notifications-badge,
.profile-top-bar-notifications-badge,
[class*="notificationsBadge_"] {
background: #D7765A !important;
color: #1E281B !important;
border: 1px solid #FFF4E5 !important;
box-shadow: none !important;
}

/* NOTIFICATION PANEL
Change the 420px width cap, paper background, border, and Mitr text settings.
Header, unread-item, and hover colors are set separately below. */
.pp-top-bar-notifications-popover,
.profile-top-bar-notifications-popover,
[class*="notificationsPopover"] {
box-sizing: border-box;
width: min(420px, calc(100vw - 24px)) !important;
max-width: calc(100vw - 24px) !important;
border: 2px solid #576353 !important;
border-radius: 8px !important;
background: #FFF9EF !important;
box-shadow: 4px 4px 0 #DDE5D2, 5px 5px 0 #576353 !important;
color: #364232 !important;
font-family: Mitr, sans-serif !important;
font-size: 0.9rem;
line-height: 1.6;
z-index: 99999 !important;
overflow: hidden !important;
}

:is(.pp-top-bar-notifications-popover, .profile-top-bar-notifications-popover, [class*="notificationsPopover"])::before {
content: none !important;
}

:is(.pp-top-bar-notifications-popover, .profile-top-bar-notifications-popover, [class*="notificationsPopover"]) [class*="popoverHeader"] {
flex-wrap: wrap;
gap: 8px;
padding: 12px !important;
background: #E8EDDF !important;
border-bottom: 1px solid #A8B39C !important;
box-shadow: none !important;
}

:is(.pp-top-bar-notifications-popover, .profile-top-bar-notifications-popover, [class*="notificationsPopover"]) [class*="popoverTitle"] {
color: #364232 !important;
font-family: Silkscreen, Pixelify Sans, monospace !important;
font-size: 0.85rem !important;
line-height: 1.5;
}

:is(.pp-top-bar-notifications-popover, .profile-top-bar-notifications-popover, [class*="notificationsPopover"]) [class*="headerActions"] {
flex-wrap: wrap;
gap: 6px;
}

:is(.pp-top-bar-notifications-popover, .profile-top-bar-notifications-popover, [class*="notificationsPopover"]) :is([class*="notificationsList"], [class*="loadMoreWrapper"]) {
background: #FFF9EF !important;
border-color: #A8B39C !important;
}

:is(.pp-top-bar-notifications-popover, .profile-top-bar-notifications-popover, [class*="notificationsPopover"]) [class*="notificationItem"] {
background: #FFF9EF !important;
border: 0 !important;
border-bottom: 1px dashed #B9C3AE !important;
border-radius: 0 !important;
box-shadow: none !important;
color: #364232 !important;
font-family: Mitr, sans-serif !important;
}

:is(.pp-top-bar-notifications-popover, .profile-top-bar-notifications-popover, [class*="notificationsPopover"]) [class*="notificationItem"]:hover {
background: #FCEBD5 !important;
}

:is(.pp-top-bar-notifications-popover, .profile-top-bar-notifications-popover, [class*="notificationsPopover"]) :is([class*="contentWrapper"], [class*="emptyState"], [class*="loadingState"]) {
background: transparent !important;
color: #364232 !important;
font-family: Mitr, sans-serif !important;
}

:is(.pp-top-bar-notifications-popover, .profile-top-bar-notifications-popover, [class*="notificationsPopover"]) :is([class*="subject"], [class*="body"], [class*="loadingMessage"]) {
color: #364232 !important;
font-family: Mitr, sans-serif !important;
}

:is(.pp-top-bar-notifications-popover, .profile-top-bar-notifications-popover, [class*="notificationsPopover"]) :is([class*="timestamp"], [class*="highlightUsername"]) {
color: #576353 !important;
}

:is(.pp-top-bar-notifications-popover, .profile-top-bar-notifications-popover, [class*="notificationsPopover"]) :is([class*="subjectUnread"], [class*="highlightCharacter"]) {
color: #8F4835 !important;
font-weight: 600;
}

:is(.pp-top-bar-notifications-popover, .profile-top-bar-notifications-popover, [class*="notificationsPopover"]) [class*="unreadIndicator"] {
background: #D7765A !important;
box-shadow: none !important;
}

:is(.pp-top-bar-notifications-popover, .profile-top-bar-notifications-popover, [class*="notificationsPopover"]) [class*="loadingSpinner"] {
border-color: #DDE5D2 !important;
border-top-color: #576353 !important;
}

:is(.pp-top-bar-notifications-popover, .profile-top-bar-notifications-popover, [class*="notificationsPopover"]) :is([class*="characterAvatar"], [class*="userAvatar"]) {
box-sizing: border-box;
border: 2px solid #FFF9EF !important;
border-radius: 4px !important;
}

/* NOTIFICATION CONFIRMATION DIALOG
Adjust the overlay rgba color for backdrop darkness and the dialog background/border
for its paper finish. Button colors and focus outlines follow below. */
[class*="modalOverlay"]:has([class*="modalWarningText"]) {
background: rgba(54, 66, 50, 0.6) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
z-index: 100000 !important;
}

[class*="modalContent"]:has([class*="modalWarningText"]) {
box-sizing: border-box;
min-width: 0 !important;
max-width: calc(100vw - 24px) !important;
border: 2px solid #576353 !important;
border-radius: 8px !important;
background: #FFF9EF !important;
box-shadow: 4px 4px 0 #A8B39C !important;
color: #364232 !important;
font-family: Mitr, sans-serif !important;
}

[class*="modalContent"]:has([class*="modalWarningText"]) :is([class*="modalHeader"], [class*="modalBody"], [class*="modalFooter"], [class*="modalWarningText"], [class*="modalTitle"]) {
background: transparent !important;
border-color: #A8B39C !important;
color: #364232 !important;
font-family: Mitr, sans-serif !important;
}

:is(.pp-top-bar-notifications-popover, .profile-top-bar-notifications-popover, [class*="notificationsPopover"], [class*="modalContent"]:has([class*="modalWarningText"])) button {
box-sizing: border-box;
min-width: 44px;
min-height: 44px;
padding: 6px 10px !important;
border: 1px solid #A8B39C !important;
border-radius: 4px !important;
background: #FFF9EF !important;
box-shadow: none !important;
color: #364232 !important;
font-family: Mitr, sans-serif !important;
font-size: 0.8rem !important;
line-height: 1.5;
}

:is(.pp-top-bar-notifications-popover, .profile-top-bar-notifications-popover, [class*="notificationsPopover"], [class*="modalContent"]:has([class*="modalWarningText"])) button:not(:disabled):hover {
background: #FDD3A2 !important;
}

:is(.pp-top-bar-notifications-popover, .profile-top-bar-notifications-popover, [class*="notificationsPopover"], [class*="modalContent"]:has([class*="modalWarningText"])) :is([class*="deleteAllButton"], [class*="archiveButton"], [class*="danger"], [class*="modalWarningIcon"]) {
color: #8F4835 !important;
}

:is(.pp-top-bar-notifications-popover, .profile-top-bar-notifications-popover, [class*="notificationsPopover"], [class*="modalContent"]:has([class*="modalWarningText"])) :is(button, a):focus-visible {
outline: 2px solid #364232 !important;
outline-offset: 2px;
}

:is(.pp-top-bar-notifications-popover, .profile-top-bar-notifications-popover, [class*="notificationsPopover"], [class*="modalContent"]:has([class*="modalWarningText"])) svg {
color: inherit !important;
}

.chakra-portal:has(#menu-list-public-profile-block-menu, .pp-uc-options-menu-item, .profile-uc-options-menu-item, .pp-top-bar-notifications-popover, .profile-top-bar-notifications-popover, [class*="notificationsPopover"]) {
position: relative;
z-index: 10000 !important;
}

:is(.chakra-popover__popper, [data-popper-placement]):has(#menu-list-public-profile-block-menu, .pp-uc-options-menu-item, .profile-uc-options-menu-item, .pp-top-bar-notifications-popover, .profile-top-bar-notifications-popover, [class*="notificationsPopover"]) {
z-index: 10000 !important;
}

/* PROFILE LAYOUT + FOLLOW / OPTIONS BUTTONS
Display name, followers, and the optional verified badge use your JAI profile information.
Customize notebook width, columns, cover colors, and padding in .profile-info-stack below. */
.profile-background-box-1,
.profile-background-box-2,
.profile-background-box-3,
.pp-uc-avatar-container,
.profile-avatar-container,
.pp-uc-avatar,
.profile-avatar,
.pp-uc-member-since,
.profile-member-since-box,
.profile-badges {
display: none !important;
}

.profile-info-wrapper-box {
width: 100% !important;
min-width: 0 !important;
padding: 0 !important;
}

.profile-info-hstack,
.profile-info-stack-inner,
.pp-uc-about-me,
.profile-about-me,
.ace-shell,
.ace-notebook,
.ace-left-page,
.ace-mini-profile {
display: contents !important;
}

.profile-info-stack {
box-sizing: border-box;
display: grid !important;
grid-template-columns: minmax(260px, 330px) minmax(0, 1fr) 86px;
grid-template-rows: repeat(11, min-content) minmax(min-content, 1fr) min-content min-content;
grid-template-areas:
"top page tabs"
"mood page tabs"
"avatar page tabs"
"kicker page tabs"
"name page tabs"
"username page tabs"
"followers page tabs"
"bio page tabs"
"updated page tabs"
"facts page tabs"
"friends page tabs"
"foot page tabs"
"buttons buttons buttons"
"credit credit credit";
gap: 0 12px !important;
width: 100% !important;
min-width: 0 !important;
max-width: 1180px !important;
margin: 0 auto !important;
padding: 34px 18px 30px 24px !important;
align-content: start !important;
align-items: stretch !important;
position: relative !important;
border: 2px solid #576353 !important;
border-radius: 24px;
background: linear-gradient(110deg, #E8EDDF, #DDE5D2 55%, #CED8C2) !important;
box-shadow: 0 4px 0 #A8B39C, 0 6px 0 #576353, 0 16px 28px rgba(54, 66, 50, 0.18), inset 0 0 0 4px rgba(255, 255, 255, 0.4) !important;
overflow-wrap: anywhere;
isolation: isolate;
}

.profile-info-stack > :is(.pp-uc-about-me, .profile-about-me) + div {
grid-area: buttons;
box-sizing: border-box;
width: min(520px, 100%) !important;
min-width: 0 !important;
margin: 0 auto !important;
padding: 0 !important;
position: relative;
z-index: 6;
}

/* FOLLOW / OPTIONS PANEL: change the paper colors, padding, and button labels below. */
.profile-info-stack > :is(.pp-uc-about-me, .profile-about-me) + div > div:has(> :is(.profile-uc-follow-flex, .pp-uc-options-menu, .profile-uc-options-menu)) {
box-sizing: border-box;
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: stretch !important;
justify-content: center !important;
gap: 10px !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 12px !important;
border: 1px solid #A8B39C;
border-left: 4px solid #D7765A;
border-radius: 4px 8px 8px 4px;
background: #FFF9EF;
box-shadow: 0 3px 0 #B9C3AE;
}

.profile-uc-follow-flex {
display: flex;
flex: 1 1 140px !important;
min-width: 0 !important;
width: auto !important;
margin: 0 !important;
}

/* FOLLOW BUTTON LABELS + COLORS
Change content: "add friend", "friend added", and "remove friend" for the default,
following, and following-hover labels. Change "more notes" below for the options label. */
.pp-uc-follow-button,
.profile-uc-follow-button {
box-sizing: border-box;
display: flex !important;
width: 100% !important;
min-width: 0 !important;
align-items: center !important;
justify-content: center !important;
min-height: 46px !important;
margin: 0 !important;
padding: 10px 12px !important;
border: 1px solid #A8B39C !important;
border-radius: 4px !important;
background: #FFF4E5 !important;
color: #364232 !important;
font-family: Silkscreen, Pixelify Sans, monospace !important;
box-shadow: 0 2px 0 #DDE5D2 !important;
white-space: normal !important;
transform: none !important;
transition: background 160ms ease, color 160ms ease;
}

:is(.pp-uc-follow-button, .profile-uc-follow-button):before,
:is(.pp-uc-follow-button, .profile-uc-follow-button):after {
content: none !important;
display: none !important;
}

.profile-uc-follow-text {
font-size: 0 !important;
font-family: inherit !important;
color: inherit !important;
}

.profile-uc-follow-text:after {
content: "add friend";
font-size: 0.72rem;
line-height: 1.5;
letter-spacing: 0.04em;
color: inherit;
text-transform: lowercase;
}

.pp-uc-follow-button[data-following="true"] .profile-uc-follow-text:after,
.profile-uc-follow-button[data-following="true"] .profile-uc-follow-text:after {
content: "friend added";
}

.pp-uc-follow-button[data-following="true"]:hover .profile-uc-follow-text:after,
.profile-uc-follow-button[data-following="true"]:hover .profile-uc-follow-text:after {
content: "remove friend";
}

.pp-uc-follow-button:hover,
.profile-uc-follow-button:hover {
background: #FDD3A2 !important;
color: #364232 !important;
border-color: #8F4835 !important;
}

:is(.pp-uc-follow-button, .profile-uc-follow-button):disabled {
opacity: 0.65;
cursor: not-allowed;
}

.pp-uc-options-menu,
.profile-uc-options-menu,
.chakra-menu__menu-button.pp-uc-options-menu {
box-sizing: border-box;
flex: 1 1 140px !important;
width: auto !important;
min-width: 0 !important;
min-height: 46px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 10px 12px !important;
border: 1px solid #A8B39C !important;
border-radius: 4px !important;
background: #FFF4E5 !important;
box-shadow: 0 2px 0 #DDE5D2 !important;
color: #364232 !important;
font-family: Silkscreen, Pixelify Sans, monospace !important;
font-size: 0 !important;
position: relative !important;
white-space: normal !important;
transform: none !important;
transition: background 160ms ease, color 160ms ease;
}

.pp-uc-options-menu span,
.profile-uc-options-menu span,
.pp-uc-options-menu svg,
.profile-uc-options-menu svg {
display: none !important;
}

.pp-uc-options-menu:after,
.profile-uc-options-menu:after {
content: "more notes";
position: static;
display: inline;
color: inherit;
font-family: Silkscreen, Pixelify Sans, monospace;
font-size: 0.72rem;
line-height: 1.5;
letter-spacing: 0.04em;
text-transform: lowercase;
pointer-events: none;
}

.pp-uc-options-menu:hover,
.profile-uc-options-menu:hover {
background: #FDD3A2 !important;
border-color: #8F4835 !important;
}

.pp-uc-follow-button:hover .profile-uc-follow-text:after,
.profile-uc-follow-button:hover .profile-uc-follow-text:after,
.pp-uc-options-menu:hover:after,
.profile-uc-options-menu:hover:after {
color: #000;
}

#menu-list-public-profile-block-menu,
.chakra-menu__menu-list:has(.pp-uc-options-menu-item, .profile-uc-options-menu-item) {
box-sizing: border-box;
min-width: min(190px, calc(100vw - 24px)) !important;
max-width: calc(100vw - 24px) !important;
padding: 6px !important;
border: 2px solid #576353 !important;
border-radius: 6px !important;
background: #FFF9EF !important;
box-shadow: 3px 3px 0 #DDE5D2, 4px 4px 0 #576353 !important;
color: #364232 !important;
font-family: Mitr, sans-serif !important;
font-size: 0.85rem !important;
line-height: 1.5;
z-index: 10000 !important;
}

.pp-uc-options-menu-item,
.profile-uc-options-menu-item,
#menu-list-public-profile-block-menu .chakra-menu__menuitem {
display: flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 10px 12px !important;
border-radius: 3px;
background: #FFF9EF !important;
color: #364232 !important;
font-family: Mitr, sans-serif !important;
font-size: 0.85rem !important;
line-height: 1.5;
white-space: normal;
}

.pp-uc-options-menu-item:is(:hover, :focus),
.profile-uc-options-menu-item:is(:hover, :focus),
#menu-list-public-profile-block-menu .chakra-menu__menuitem:is(:hover, :focus) {
background: #FDD3A2 !important;
color: #8F4835 !important;
}

:is(.pp-uc-options-menu-item, .profile-uc-options-menu-item) span {
color: inherit !important;
font-size: inherit !important;
}

.pp-uc-options-menu-item:focus-visible,
.profile-uc-options-menu-item:focus-visible,
#menu-list-public-profile-block-menu .chakra-menu__menuitem:focus-visible,
.pp-uc-follow-button:focus-visible,
.profile-uc-follow-button:focus-visible,
.pp-uc-options-menu:focus-visible,
.profile-uc-options-menu:focus-visible {
outline: 2px solid #364232 !important;
outline-offset: 2px;
}

/* NOTEBOOK COVER + PAPER
Customize tape position/colors, cover stitching, and paper borders/shadows below. */
.ace-notebook:before {
content: "";
position: absolute;
top: -8px;
left: 46px;
width: 84px;
height: 26px;
border: 1px solid rgba(143, 72, 53, 0.3);
background: repeating-linear-gradient(100deg, rgba(255, 249, 239, 0.25) 0 2px, transparent 2px 6px), rgba(253, 211, 162, 0.92);
box-shadow: 0 2px 2px rgba(54, 66, 50, 0.12);
transform: rotate(-5deg);
pointer-events: none;
z-index: 3;
}

.ace-notebook:after {
content: "";
position: absolute;
inset: 8px;
border: 1px dashed rgba(87, 99, 83, 0.55);
border-radius: 16px;
pointer-events: none;
z-index: 1;
}

.ace-left-page:before,
.ace-right-page {
position: relative;
z-index: 2;
background: #FFF9EF;
border: 1px solid #B9BAA8;
border-radius: 10px;
box-shadow: 0 3px 0 -1px #E7E1D1, 0 4px 0 -1px #A8B39C, inset 0 0 0 3px #FFFCF5;
}

.ace-left-page:before {
content: "";
position: absolute;
grid-column: 1 / 2;
grid-row: top-start / foot-end;
inset: 0 0 18px;
z-index: 1;
pointer-events: none;
}

/* BINDER RINGS: adjust right/width for placement and the gradient colors for their finish. */
.ace-left-page:after {
content: "";
position: absolute;
grid-column: 1 / 2;
grid-row: top-start / foot-end;
top: 24px;
bottom: 42px;
right: -25px;
width: 36px;
background:
linear-gradient(180deg, transparent 31px, #576353 31px 32px, #EEF0E9 32px 34px, #A8B39C 34px 37px, #576353 37px 38px, transparent 38px) center top / 28px 72px no-repeat space,
radial-gradient(circle, #576353 0 3px, #CED8C2 3px 5px, transparent 5.5px) left top / 12px 72px no-repeat space,
radial-gradient(circle, #576353 0 3px, #CED8C2 3px 5px, transparent 5.5px) right top / 12px 72px no-repeat space;
pointer-events: none;
z-index: 4;
}

.ace-right-page {
grid-area: page;
min-width: 0;
margin-bottom: 18px;
padding: 24px 30px 22px;
background: linear-gradient(90deg, rgba(87, 99, 83, 0.08), transparent 22px), #FFF9EF;
overflow: hidden;
}

/* PAGE TEXT, NOTES + INTEREST TAGS
Change .ace-panel font-family, font-size, line-height, and color for page text.
Customize note padding/background, fact-label column width (78px), and tag colors below. */
.ace-notebook *,
.ace-notebook *:before,
.ace-notebook *:after {
box-sizing: border-box;
}

.ace-panel {
display: none;
min-width: 0;
animation: acePanelIn 260ms ease both;
font-family: Mitr, sans-serif;
font-size: 0.95rem;
line-height: 1.7;
color: #364232;
}

.ace-panel p {
margin: 0;
text-wrap: pretty;
}

.ace-panel .ace-entry-foot {
margin-top: 10px;
font-size: 0.8rem;
color: #576353;
}

.ace-note {
margin: 20px 0;
padding: 18px;
border: 1px solid #CBC8B9;
border-left: 4px solid #D7765A;
background: #FFF4E5;
box-shadow: 3px 3px 0 rgba(168, 162, 158, 0.18);
}

.ace-note:last-child {
margin-bottom: 0;
}

.ace-facts {
margin: 12px 0 0;
font-family: Mitr, sans-serif;
font-size: 0.88rem;
line-height: 1.6;
text-align: left;
}

.ace-facts > div {
display: grid;
grid-template-columns: 78px minmax(0, 1fr);
gap: 10px;
padding: 6px 0;
border-bottom: 1px dotted #A8A29E;
}

.ace-facts dt {
color: #576353;
}

.ace-facts dd {
margin: 0;
color: #364232;
}

.ace-note .ace-facts {
margin-bottom: 12px;
}

.ace-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
list-style: none;
padding: 0;
margin: 12px 0;
}

.ace-tags li {
padding: 3px 8px;
border: 1px solid #A8B39C;
background: #E8EDDF;
color: #364232;
font-size: 0.78rem;
}

.ace-directory-link {
display: inline-flex;
align-items: center;
min-height: 44px;
margin-top: 12px;
padding: 6px 12px;
border: 1px solid #576353;
background: #DDE5D2;
color: #364232 !important;
font-family: Mitr, sans-serif;
font-size: 0.88rem;
}

.ace-directory-link:hover {
background: #FDD3A2;
}

.ace-shell a:hover {
color: #24552C !important;
}

.ace-shell a:focus-visible {
outline: 2px solid #364232;
outline-offset: 2px;
}

/* PROFILE SIDEBAR + AVATAR
Adjust the sidebar-item margin-left and margin-right values (18px each) below.
Customize counter/mood colors and profile text sizes below. The avatar frame is capped
at 220px; .ace-avatar uses contain for uncropped art. Change both 5.8s durations together for blink speed. */
.profile-info-stack :is(.ace-left-page > :not(.ace-mini-profile), .ace-mini-profile > *, .profile-info-stack-inner-flex, .pp-uc-followers-count, .profile-followers-count) {
box-sizing: border-box;
position: relative;
min-width: 0;
margin-left: 18px !important;
margin-right: 18px !important;
z-index: 2;
}

.ace-left-topline {
grid-area: top;
margin-top: 22px;
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 7px;
font-size: 0.64rem;
color: #576353;
text-transform: uppercase;
white-space: nowrap;
}

.ace-left-topline b:nth-of-type(1) {
color: #D7765A;
}

.ace-mood-bar {
grid-area: mood;
margin-bottom: 14px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 10px;
border: 2px solid rgba(168, 162, 158, 0.45);
border-radius: 4px;
background: #FFF4E5;
box-shadow: inset 2px 2px 0 rgba(168, 162, 158, 0.16);
font-size: 0.68rem;
color: #34783E;
}

.ace-mood-state {
color: #576353;
}

.ace-avatar-frame {
grid-area: avatar;
justify-self: center;
position: relative;
width: min(220px, calc(100% - 36px));
aspect-ratio: 1;
margin-top: 0;
margin-bottom: 14px;
border: 2px solid rgba(168, 162, 158, 0.52);
border-radius: 8px;
background:
linear-gradient(90deg, rgba(115, 156, 84, 0.08) 1px, transparent 1px),
linear-gradient(180deg, rgba(115, 156, 84, 0.08) 1px, transparent 1px),
#F8F4EA;
background-size: 14px 14px, 14px 14px, auto;
box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.72), 0 6px 0 rgba(168, 162, 158, 0.18);
overflow: hidden;
image-rendering: pixelated;
}

.ace-avatar {
position: absolute;
inset: 10px;
width: calc(100% - 20px);
height: calc(100% - 20px);
object-fit: contain;
object-position: center bottom;
pointer-events: none;
-webkit-user-drag: none;
image-rendering: pixelated;
}

.ace-avatar-open {
z-index: 2;
animation: aceBlinkOpen 5.8s steps(1, end) infinite;
}

.ace-avatar-closed {
z-index: 3;
opacity: 0;
animation: aceBlinkClosed 5.8s steps(1, end) infinite;
}

@keyframes aceBlinkOpen {
0%, 86%, 92%, 100% { opacity: 1; }
87%, 91% { opacity: 0; }
}

@keyframes aceBlinkClosed {
0%, 86%, 92%, 100% { opacity: 0; }
87%, 91% { opacity: 1; }
}

.ace-avatar-sheen {
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
background: repeating-linear-gradient(180deg, transparent 0, transparent 5px, rgba(0, 0, 0, 0.04) 6px, transparent 7px);
opacity: 0.45;
}

.ace-mini-profile {
text-align: center;
color: #576353;
text-wrap: pretty;
}

.ace-mini-profile p {
margin-top: 0;
margin-bottom: 0;
text-align: center;
}

.ace-kicker {
grid-area: kicker;
letter-spacing: 0.08em;
color: #576353;
font-size: 0.72rem;
line-height: 1.4;
margin-bottom: 6px !important;
}

.profile-info-stack-inner-flex {
grid-area: name;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: nowrap !important;
gap: 6px !important;
width: auto !important;
min-width: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 0 !important;
height: auto !important;
overflow: visible !important;
text-align: center;
}

.pp-uc-title,
.profile-title-heading {
display: block !important;
flex: 0 1 auto;
min-width: 0 !important;
max-width: 100%;
margin: 0 !important;
padding: 0 !important;
color: #34783E !important;
font-family: Silkscreen, Pixelify Sans, monospace !important;
font-size: clamp(1rem, 1.6vw, 1.25rem) !important;
line-height: 1.3 !important;
letter-spacing: 0.02em !important;
text-shadow: 2px 2px 0 #FDD3A2 !important;
white-space: normal !important;
overflow-wrap: anywhere;
text-align: center;
}

/* PROFILE NAME: customize the name color and font above; all membership levels use these colors. */
:is(.pp-uc-title, .profile-title-heading),
:is(.pp-uc-title, .profile-title-heading) :is(span, .plus-shiny-username) {
background: none !important;
background-clip: border-box !important;
-webkit-background-clip: border-box !important;
-webkit-text-fill-color: currentColor !important;
animation: none !important;
filter: none !important;
}

:is(.pp-uc-title, .profile-title-heading) :is(span, .plus-shiny-username) {
color: inherit !important;
font: inherit !important;
letter-spacing: inherit !important;
text-align: inherit !important;
text-shadow: inherit !important;
}

:is(.pp-uc-title, .profile-title-heading) .plus-shiny-username {
display: inline !important;
position: static !important;
inset: auto !important;
transform: none !important;
}

/* PROFILE BADGES: change the matching 18px sizes below and the name row's gap above. */
.profile-info-stack-inner-flex > :is(.profile-verified-box, .profile-janitor-plus-box) {
box-sizing: border-box;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
align-self: center !important;
flex: 0 0 18px !important;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
min-height: 18px !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
inset: auto !important;
transform: none !important;
overflow: visible !important;
}

:is(.profile-verified-box, .profile-janitor-plus-box) > span {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 18px !important;
height: 18px !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
inset: auto !important;
transform: none !important;
line-height: 1 !important;
overflow: visible !important;
}
.profile-janitor-plus-box [class*="_wrapperPaired_"] {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 18px !important;
height: 18px !important;
padding: 0 !important;
margin: 0 !important;
line-height: 1 !important;
}


.profile-verified-box svg,
.profile-janitor-plus-box > span > svg,
.profile-janitor-plus-box [class*="_wrapperPaired_"] svg {
display: block !important;
flex-shrink: 0;
width: 18px !important;
height: 18px !important;
margin: 0 !important;
position: static !important;
transform: none !important;
}

.pp-uc-followers-count,
.profile-followers-count {
grid-area: followers;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: wrap;
gap: 0 6px;
width: auto !important;
margin-top: 8px !important;
margin-bottom: 0 !important;
padding: 0 !important;
color: #576353 !important;
font-family: Mitr, sans-serif !important;
font-size: 0.8rem !important;
line-height: 1.65 !important;
font-variant-numeric: tabular-nums;
text-align: center;
white-space: normal;
overflow-wrap: anywhere;
}

.pp-uc-followers-count span,
.profile-followers-count span {
margin: 0 !important;
color: inherit !important;
font: inherit !important;
}

:is(.pp-uc-followers-count, .profile-followers-count) span:first-child {
color: #364232 !important;
font-weight: 600 !important;
}

.ace-aka {
grid-area: username;
letter-spacing: 0.04em;
color: #8F4835;
font-size: 0.76rem;
margin-top: 4px !important;
}

.ace-bio-line,
.ace-date-line {
font-variant-numeric: tabular-nums;
margin-top: 12px !important;
font-size: 0.62rem;
line-height: 1.65;
color: #576353;
}

.ace-bio-line {
grid-area: bio;
}

.ace-date-line {
grid-area: updated;
margin-top: 3px !important;
color: #8F4835;
font-size: 0.62rem;
letter-spacing: 0.4px;
}

.ace-mini-profile > .ace-facts {
grid-area: facts;
margin-top: 12px;
margin-bottom: 14px;
}

.ace-profile-footer {
grid-area: foot;
align-self: end;
margin-top: auto;
margin-bottom: 36px;
padding-top: 16px;
border-top: 1px solid rgba(168, 162, 158, 0.55);
display: flex;
flex-direction: column;
gap: 4px;
color: #576353;
}

.ace-profile-footer b {
color: #34783E;
font-size: 0.95rem;
}

.ace-profile-footer span {
color: #8F4835;
font-size: 0.64rem;
}

/* FRIENDS LIST
Adjust row padding, dotted borders, and name/note font sizes. The number column is 30px wide. */
.ace-friends {
grid-area: friends;
min-width: 0;
margin-bottom: 14px;
}

.ace-friends-body {
display: grid;
gap: 4px;
}

.ace-friend {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 0 8px;
align-items: center;
min-height: 44px;
padding: 7px 0;
border-bottom: 1px dotted #A8A29E;
color: #364232;
font-family: Mitr, sans-serif;
font-size: 0.86rem;
}

.ace-friend-pixel {
grid-area: 1 / 1 / 3 / 2;
font-family: Silkscreen, monospace;
font-size: 0.7rem;
color: #34783E;
}

.ace-friend-note {
grid-column: 2;
color: #576353;
font-size: 0.78rem;
}

/* PAGE HEADINGS + NEWS
Customize heading colors, font-family, and font-size below. News labels use a 64px column;
the statistics row uses four columns. Edit their visible wording and counts in the HTML. */
.ace-page-head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
margin-bottom: 18px;
border-bottom: 1px solid rgba(168, 162, 158, 0.42);
padding-bottom: 8px;
}

.ace-page-title-small {
display: block;
color: #576353;
font-family: Silkscreen, monospace;
font-size: 0.62rem;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 4px;
}

.ace-page-head h1 {
text-wrap: balance;
margin: 0;
color: #34783E;
font-family: Silkscreen, Pixelify Sans, monospace !important;
font-size: clamp(1.3rem, 3vw, 2rem);
line-height: 1.1;
text-shadow: 2px 2px 0 #FDD3A2;
}

.ace-page-head p {
margin: 0;
color: #576353;
font-size: 0.8rem;
}

.ace-news {
margin-bottom: 18px;
}

.ace-news h3,
.ace-card h3,
.ace-note h3,
.ace-diary-entry h3,
.ace-rules-stack h3,
.ace-friends h3 {
margin: 0 0 9px;
color: #34783E;
font-family: Silkscreen, Pixelify Sans, monospace !important;
font-size: 0.86rem;
letter-spacing: 0.5px;
text-transform: none;
}

.ace-news-grid {
display: grid;
grid-template-columns: 1fr;
gap: 5px;
}

.ace-news-grid p {
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
gap: 7px;
align-items: center;
margin: 0;
min-width: 0;
color: #576353;
font-size: 0.9rem;
border-bottom: 1px dotted rgba(168, 162, 158, 0.7);
padding-bottom: 4px;
}

.ace-news-grid b {
text-align: center;
display: inline-flex;
justify-content: center;
padding: 2px 4px;
border-radius: 3px;
background: #FDD3A2;
color: #364232;
font-family: Silkscreen, monospace;
font-size: 0.62rem;
line-height: 1.2;
}

.ace-news-grid p:nth-child(2) b,
.ace-news-grid p:nth-child(4) b {
background: #DDE5D2;
}

.ace-news-grid a {
display: flex;
align-items: center;
min-height: 44px;
text-decoration: underline;
text-underline-offset: 3px;
}

.ace-stats-row {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
margin-top: 10px;
color: #576353;
font-size: 0.8rem;
}

.ace-stats-row span {
border-bottom: 1px dotted rgba(168, 162, 158, 0.7);
padding-bottom: 4px;
}

.ace-stats-row b {
color: #34783E;
}

.ace-garden-tabs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 8px;
color: #576353;
font-size: 0.72rem;
}

.ace-garden-tabs b {
color: #34783E;
text-shadow: 1px 1px 0 #FDD3A2;
}

.ace-garden-tabs span:not(:last-child):after,
.ace-garden-tabs b:after {
content: "|";
margin-left: 12px;
color: #A8A29E;
text-shadow: none;
}

/* GARDEN IMAGES + SLIDESHOW
Change aspect-ratio for the frame shape and object-fit/object-position for image cropping.
For a different loop duration, keep the three animation delays at zero, one-third, and two-thirds of it. */
.ace-garden-frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border: 2px solid rgba(168, 162, 158, 0.58);
background: #F8F4EA;
overflow: hidden;
image-rendering: pixelated;
box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.58), 0 5px 0 rgba(168, 162, 158, 0.18);
}

.ace-garden-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
opacity: 0;
pointer-events: none;
-webkit-user-drag: none;
image-rendering: pixelated;
animation: aceGardenSlide 15s linear infinite;
}

.ace-garden-1 {
animation-delay: 0s;
}

.ace-garden-2 {
animation-delay: 5s;
}

.ace-garden-3 {
animation-delay: 10s;
}

@keyframes aceGardenSlide {
0% { opacity: 0; transform: scale(1.01); }
4% { opacity: 1; transform: scale(1); }
29% { opacity: 1; transform: scale(1.015); }
33.333% { opacity: 0; transform: scale(1.02); }
100% { opacity: 0; transform: scale(1.02); }
}

.ace-pixel-scan {
position: absolute;
inset: 0;
z-index: 5;
pointer-events: none;
background:
linear-gradient(180deg, rgba(255, 244, 229, 0.16), transparent 24%, transparent 76%, rgba(54, 66, 50, 0.12)),
repeating-linear-gradient(180deg, transparent 0, transparent 5px, rgba(0, 0, 0, 0.045) 6px, transparent 7px);
}

.ace-garden-tools {
text-transform: lowercase;
letter-spacing: 0.02em;
display: flex;
align-items: center;
gap: 6px;
margin: 8px 0 0;
color: #576353;
font-size: 0.64rem;
}

.ace-garden-tools span {
margin-left: auto;
padding: 3px 7px;
border-radius: 4px;
background: #A8A29E;
color: #FFF4E5;
}

/* HOME + GARDEN TEXT CARDS
Change 190px for the minimum card width, gap for spacing, and .ace-card padding,
background, border, and shadow for the card finish. */
.ace-lower-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
gap: 10px;
margin-top: 18px;
}

.ace-card {
min-width: 0;
padding: 13px;
border: 2px solid rgba(168, 162, 158, 0.45);
border-radius: 8px;
background: rgba(255, 244, 229, 0.74);
box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.72), 3px 3px 0 rgba(253, 211, 162, 0.5);
}

.ace-card p {
margin: 0;
text-wrap: pretty;
}

.ace-card h3 {
text-wrap: balance;
}

.ace-stage {
display: block;
margin-bottom: 8px;
font-size: 0.8rem;
color: #576353;
}

/* RESOURCES: edit category heading sizes, divider style, and list spacing below. */
.ace-resource-category {
margin-top: 20px;
padding-top: 16px;
border-top: 1px dashed currentColor;
}

.ace-resource-category h2 {
margin: 0 0 10px;
font-family: Silkscreen, Pixelify Sans, monospace;
font-size: 0.9rem;
line-height: 1.6;
}

.ace-resource-category ul {
margin: 0;
padding: 0 0 0 20px;
list-style: disc;
}

.ace-resource-category li {
margin: 8px 0;
padding-left: 4px;
}

.ace-resource-category a {
display: inline-block;
min-height: 24px;
max-width: 100%;
color: inherit;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
overflow-wrap: anywhere;
}

/* NOTEBOOK TABS
Customize tab spacing, padding, fonts, and normal/hover/selected colors below.
Rename visible tabs in the HTML; keep their classes, hash links, and matching IDs together. */
.ace-tabs {
grid-area: tabs;
align-self: start;
min-width: 0;
margin: 54px 0 0 -14px;
z-index: 3;
display: flex;
flex-direction: column;
gap: 6px;
}

.ace-tabs a {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-height: 44px;
padding: 8px 10px;
border: 2px solid #576353;
border-left: 0;
border-radius: 0 7px 7px 0;
background: #DDE5D2;
color: #364232 !important;
font-size: 0.72rem;
line-height: 1.4;
text-align: center;
box-shadow: 2px 2px 0 rgba(54, 66, 50, 0.18);
user-select: none;
transition: background-color 160ms ease;
}

.ace-tabs a:hover {
background: #FFF4E5;
}

body:has(#ace-home:target) .ace-tab-home,
body:has(#ace-diary:target) .ace-tab-diary,
body:has(#ace-garden-tab:target) .ace-tab-garden,
body:has(#ace-gallery:target) .ace-tab-gallery,
body:has(#ace-contact-tab:target) .ace-tab-contact,
body:has(#ace-rules:target) .ace-tab-rules,
body:has(#ace-creators:target) .ace-tab-creators,
body:has(#ace-resources:target) .ace-tab-resources,
body:not(:has(#ace-diary:target)):not(:has(#ace-garden-tab:target)):not(:has(#ace-gallery:target)):not(:has(#ace-contact-tab:target)):not(:has(#ace-rules:target)):not(:has(#ace-creators:target)):not(:has(#ace-resources:target)) .ace-tab-home {
background: #FDD3A2;
color: #000 !important;
box-shadow: inset 4px 0 0 #D7765A, 2px 2px 0 rgba(54, 66, 50, 0.18);
}

.ace-anchors {
position: fixed;
left: -9999px;
top: 0;
width: 1px;
height: 1px;
overflow: hidden;
pointer-events: none;
}

.ace-panel-home {
display: block;
}

body:has(#ace-home:target) .ace-panel,
body:has(#ace-diary:target) .ace-panel,
body:has(#ace-garden-tab:target) .ace-panel,
body:has(#ace-gallery:target) .ace-panel,
body:has(#ace-contact-tab:target) .ace-panel,
body:has(#ace-rules:target) .ace-panel,
body:has(#ace-creators:target) .ace-panel,
body:has(#ace-resources:target) .ace-panel {
display: none;
}

body:has(#ace-home:target) .ace-panel-home,
body:has(#ace-diary:target) .ace-panel-diary,
body:has(#ace-garden-tab:target) .ace-panel-garden,
body:has(#ace-gallery:target) .ace-panel-gallery,
body:has(#ace-contact-tab:target) .ace-panel-contact,
body:has(#ace-rules:target) .ace-panel-rules,
body:has(#ace-creators:target) .ace-panel-creators,
body:has(#ace-resources:target) .ace-panel-resources {
display: block;
}

@keyframes acePanelIn {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
}

/* THEME CREDIT
Customize spacing, pill colors, font-size, and decorative line gradients below.
Keep the visible author credit and its link in the HTML. */
.ace-credit {
grid-area: credit;
width: min(900px, calc(100% - 32px));
margin: 8px auto 32px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 5;
}

.ace-credit:before,
.ace-credit:after {
content: "";
height: 1px;
flex: 1 1 auto;
background: linear-gradient(90deg, transparent, rgba(87, 99, 83, 0.45), transparent);
}

.ace-credit-line {
flex: 0 0 auto;
margin: 0 12px;
padding: 5px 10px;
border: 1px solid rgba(87, 99, 83, 0.35);
border-radius: 999px;
background: rgba(255, 244, 229, 0.78);
color: #576353;
font-family: Silkscreen, Pixelify Sans, monospace;
font-size: 0.62rem;
letter-spacing: 1px;
text-transform: lowercase;
}

.ace-credit-line a {
color: #34783E !important;
}

.ace-credit-line a:hover {
color: #D7765A !important;
filter: drop-shadow(0 0 5px rgba(215, 118, 90, 0.4));
}

/* CHARACTER COLLECTION + SEARCH CONTROLS
Change the collection's 1180px width cap and outer padding below.
Customize tab, search, filter, sort, and pagination colors/fonts in this section. */
.profile-tabs-chakra-tabs,
.characters-list-container-flex,
.profile-tab-panel > :has(> .characters-list-container-flex) {
box-sizing: border-box;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}

.profile-page-container-flex-box {
box-sizing: border-box;
width: min(1180px, 100%) !important;
max-width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
align-self: center;
margin: 0 auto !important;
padding: 0 16px 36px !important;
font-family: Mitr, sans-serif;
color: #364232;
}

/* CHARACTERS / SCRIPTS TABS: customize the paper colors, selected accent, and label size. */
.pp-tabs-wrapper,
.profile-tabs-wrapper {
box-sizing: border-box;
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: flex-end !important;
gap: 8px !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 10px 10px 0 !important;
border: 0 !important;
border-bottom: 2px solid #A8B39C !important;
border-radius: 10px 10px 0 0;
background: #DDE5D2 !important;
box-shadow: none !important;
overflow: visible !important;
}

:is(.pp-tabs-wrapper, .profile-tabs-wrapper) > :is(button, .pp-tabs-button, .profile-tabs-button) {
box-sizing: border-box;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 1 auto !important;
min-width: 0 !important;
max-width: 100% !important;
min-height: 44px !important;
margin: 0 !important;
padding: 10px 18px !important;
color: #364232 !important;
font-family: Silkscreen, Pixelify Sans, monospace !important;
font-size: 0.75rem !important;
line-height: 1.5 !important;
letter-spacing: 0.03em;
white-space: normal !important;
overflow-wrap: anywhere;
background: #FFF9EF !important;
border: 1px solid #A8B39C !important;
border-radius: 7px 7px 0 0 !important;
box-shadow: none !important;
transform: none !important;
}

:is(.pp-tabs-wrapper, .profile-tabs-wrapper) > :is(button, .pp-tabs-button, .profile-tabs-button):not(:disabled):hover {
background: #FCEBD5 !important;
}

:is(.pp-tabs-wrapper, .profile-tabs-wrapper) > :is(button, .pp-tabs-button, .profile-tabs-button):is([aria-selected="true"], [data-selected]) {
background: #FDD3A2 !important;
border-color: #D7765A !important;
box-shadow: inset 0 3px 0 #D7765A !important;
}

:is(.pp-tabs-wrapper, .profile-tabs-wrapper) > :is(button, .pp-tabs-button, .profile-tabs-button):focus-visible {
outline: 2px solid #364232 !important;
outline-offset: -5px;
}

.pp-tabs-indicator,
.profile-tabs-indicator {
display: none !important;
}

.pp-tabs-panels,
.profile-tabs-panels,
.profile-tab-panel {
box-sizing: border-box;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
min-width: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}

.character-list-pagination-flex,
.profile-filters-flex-inner {
flex-wrap: wrap !important;
gap: 12px !important;
}

.character-list-pagination-flex {
box-sizing: border-box;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 18px 0 !important;
padding: 14px !important;
border: 1px solid #A8B39C;
border-left: 4px solid #D7765A;
border-radius: 4px 8px 8px 4px;
background: repeating-linear-gradient(180deg, transparent 0 23px, rgba(87, 99, 83, 0.08) 23px 24px), #FFF9EF;
box-shadow: 0 3px 0 #DDE5D2;
}

/* SEARCH + SORT TOOLBAR
Customize control spacing, the 180px search flex basis, and the 160px sort width below. */
.character-list-pagination-flex > *,
.profile-filters-flex-outer,
.profile-filters-flex-inner,
.profile-filters-flex-inner-hassearchfilter,
.profile-filters-flex-inner-onorderchanged {
box-sizing: border-box;
min-width: 0 !important;
max-width: 100% !important;
margin: 0 !important;
}

.character-list-pagination-flex > :has(.profile-filters-flex-outer) {
flex: 1 1 420px !important;
width: auto !important;
padding: 0 !important;
}

.profile-filters-flex-outer,
.profile-filters-flex-inner {
width: 100% !important;
padding: 0 !important;
}

.profile-filters-flex-inner {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
}

.profile-filters-flex-inner > * {
margin: 0 !important;
}

.profile-filters-flex-inner-hassearchfilter {
display: flex !important;
flex: 1 1 180px !important;
width: auto !important;
padding: 0 !important;
gap: 8px !important;
}

.profile-filters-flex-inner-hassearchfilter .profile-character-search-input-group {
box-sizing: border-box;
flex: 1 1 0 !important;
width: auto !important;
min-width: 0 !important;
max-width: 100% !important;
}

.profile-filters-flex-inner-onorderchanged {
flex: 0 1 160px !important;
width: 160px !important;
padding: 0 !important;
}

.profile-filters-flex-inner-onorderchanged .transparent {
box-sizing: border-box;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}

.pp-fl-filter-button,
.profile-filter-button {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 44px;
width: 44px !important;
padding: 0 !important;
}

.pp-fl-search-input,
.profile-character-search-input,
.pp-fl-filter-button,
.profile-filter-button,
.pp-pg-total,
.profile-badge-flex-outer,
.profile-pagination-prev-hstack button,
.pp-pg-page-button,
.profile-filters-flex-inner-onorderchanged .transparent .react-select__control {
box-sizing: border-box;
min-height: 44px !important;
border: 1px solid #A8B39C !important;
border-radius: 6px !important;
background: #FFF9EF !important;
color: #364232 !important;
box-shadow: 2px 2px 0 #DDE5D2 !important;
font-family: Mitr, sans-serif;
}

.profile-filters-flex-inner-onorderchanged .transparent .react-select__control {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
font-size: 0.85rem;
line-height: 1.5;
}

.profile-filters-flex-inner-onorderchanged .transparent .react-select__value-container {
box-sizing: border-box;
flex: 1 1 0 !important;
min-width: 0 !important;
padding: 6px 10px !important;
}

.profile-filters-flex-inner-onorderchanged .transparent .react-select__single-value,
.profile-filters-flex-inner-onorderchanged .transparent .react-select__placeholder {
max-width: 100%;
margin: 0 !important;
font-family: Mitr, sans-serif !important;
font-size: 0.85rem !important;
line-height: 1.5;
}

.profile-filters-flex-inner-onorderchanged .transparent .react-select__indicators {
flex: 0 0 34px;
align-self: stretch;
justify-content: center;
}

.profile-filters-flex-inner-onorderchanged .transparent .react-select__dropdown-indicator {
padding: 6px !important;
}

.profile-filters-flex-inner-onorderchanged .transparent .react-select__indicator-separator {
background: #B9C3AE !important;
}

.pp-fl-filter-button svg,
.profile-filter-button svg {
width: 18px;
height: 18px;
color: inherit !important;
}

.pp-pg-total:before,
.profile-badge-flex-outer:before {
background: none !important;
}

.pp-fl-search-input::placeholder,
.profile-character-search-input::placeholder,
.profile-filters-flex-inner-onorderchanged .transparent .react-select__single-value,
.profile-filters-flex-inner-onorderchanged .transparent .react-select__placeholder,
.profile-filters-flex-inner-onorderchanged .transparent .react-select__dropdown-indicator {
color: #576353 !important;
}

.profile-filters-flex-inner-onorderchanged .transparent .react-select__menu {
box-sizing: border-box;
width: 100% !important;
min-width: 0 !important;
margin-top: 6px;
background: #FFF9EF !important;
border: 1px solid #A8B39C !important;
border-radius: 6px;
box-shadow: 3px 3px 0 #DDE5D2;
font-family: Mitr, sans-serif;
z-index: 9999 !important;
}

.profile-filters-flex-inner-onorderchanged .transparent .react-select__menu-list {
background: #FFF9EF !important;
padding: 4px;
}

.profile-filters-flex-inner-onorderchanged .transparent .react-select__option {
box-sizing: border-box;
min-height: 44px;
padding: 10px 12px;
border-radius: 3px;
font-size: 0.85rem;
line-height: 1.5;
color: #364232 !important;
background: #FFF9EF !important;
}

.profile-filters-flex-inner-onorderchanged .transparent .react-select__option--is-focused,
.profile-filters-flex-inner-onorderchanged .transparent .react-select__option--is-selected,
.profile-pagination-prev-hstack .pp-pg-page-button-active,
.profile-pagination-prev-hstack .profile-pagination-page-button-active {
background: #FDD3A2 !important;
color: #364232 !important;
}

/* CHARACTER FILTER DIALOG
Customize overlay darkness, the 640px dialog width cap, paper/header backgrounds,
and button colors. Customize selected-tag background, border, and inset accent below. */
#root ~ *:has(> .profile-filter-modal-modal-overlay) {
position: relative;
z-index: 10000 !important;
}

.profile-filter-modal-modal-overlay {
background: rgba(54, 66, 50, 0.6) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}

.profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * {
box-sizing: border-box;
max-width: min(640px, calc(100vw - 24px)) !important;
max-height: calc(100dvh - 48px) !important;
margin: 24px auto !important;
padding: 0 !important;
gap: 0 !important;
border: 2px solid #576353 !important;
border-radius: 8px !important;
background: #FFF9EF !important;
box-shadow: 4px 4px 0 #DDE5D2, 5px 5px 0 #576353 !important;
color: #364232 !important;
font-family: Mitr, sans-serif !important;
}

.profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > header {
padding: 18px 68px 16px 20px !important;
border-bottom: 1px solid #A8B39C;
background: #E8EDDF !important;
border-radius: 6px 6px 0 0;
color: #364232 !important;
font-family: Silkscreen, Pixelify Sans, monospace !important;
font-size: 1rem !important;
line-height: 1.5;
}

.profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > button {
top: 8px;
right: 10px;
padding: 0 !important;
}

.profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] > * > * > button + * {
min-height: 0;
padding: 18px 20px 20px !important;
overflow-y: auto;
}

.profile-filter-modal-body-flex {
min-width: 0;
flex-direction: column;
gap: 12px !important;
color: #364232 !important;
}

.profile-filter-modal-body-tags-flex-box {
width: 100%;
min-width: 0;
}

.profile-filter-modal-body-tags-flex-box-heading {
margin: 0 0 12px !important;
color: #576353 !important;
font-family: Mitr, sans-serif !important;
font-size: 0.85rem !important;
}

.profile-filter-modal-body-flex :has(> [class*="_tagsContainer_"]) {
flex-wrap: wrap;
min-width: 0;
gap: 8px;
}

.profile-filter-modal-body-flex [class*="_tagsContainer_"] {
min-width: 0;
max-width: 100%;
}

.profile-filter-modal-body-flex [class*="_collapsedContainer_"] {
gap: 6px;
}

.profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] button {
box-sizing: border-box;
min-width: 44px;
min-height: 44px;
padding: 7px 10px;
border: 1px solid #A8B39C !important;
border-radius: 4px !important;
background: #FFF9EF !important;
color: #364232 !important;
box-shadow: none !important;
font-family: Mitr, sans-serif !important;
font-size: 0.85rem !important;
line-height: 1.5;
}

.profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] button:not(:disabled):hover {
background: #FCEBD5 !important;
}

.profile-filter-modal-body-flex button[class*="_tagSelected_"] {
border-color: #8F4835 !important;
background: #FDD3A2 !important;
box-shadow: inset 3px 0 0 #8F4835 !important;
font-weight: 600;
}

.profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] button:focus-visible {
outline: 2px solid #364232 !important;
outline-offset: 2px;
}

.profile-filter-modal-modal-overlay ~ [data-focus-lock-disabled] svg {
color: inherit !important;
}

.profile-filter-modal-body-flex [class*="_gradientLeft_"] {
background: linear-gradient(to left, transparent, #FFF9EF 70%) !important;
}

.profile-filter-modal-body-flex [class*="_gradientRight_"] {
background: linear-gradient(to right, transparent, #FFF9EF 70%) !important;
}

.profile-filter-modal-body-flex [class*="_divider_"] {
color: #A8B39C !important;
}

/* PAGE NAVIGATION
Adjust margin/padding for spacing, gap for button separation, and button font-size below. */
.profile-pagination-flex-outer:has(.profile-pagination-prev-hstack) {
box-sizing: border-box;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
align-self: stretch !important;
justify-content: center !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 14px auto 0 !important;
padding: 8px 0;
}

.profile-pagination-prev-hstack,
.profile-pagination-flex-inner {
box-sizing: border-box;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
flex: 0 1 auto !important;
width: auto !important;
min-width: 0 !important;
max-width: 100% !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin: 0 !important;
}

.profile-pagination-prev-hstack > *,
.profile-pagination-flex-inner > * {
margin: 0 !important;
}

.profile-pagination-prev-hstack button,
.pp-pg-page-button {
box-sizing: border-box;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
min-width: 44px !important;
padding: 6px 10px;
font-family: Silkscreen, Pixelify Sans, monospace;
font-size: 0.75rem;
}

.profile-pagination-prev-hstack :is(button, .pp-pg-page-button):not(:disabled):hover {
background: #FDD3A2 !important;
border-color: #C39A77 !important;
}

.profile-pagination-prev-hstack :is(.pp-pg-page-button-active, .profile-pagination-page-button-active) {
border-color: #D7765A !important;
box-shadow: 0 2px 0 #8F4835 !important;
}

.profile-page-container-flex-box :is(a, button, input):focus-visible,
.pp-pg-page-button:focus-visible,
.profile-filters-flex-inner-onorderchanged .transparent .react-select__control--is-focused {
outline: 2px solid #364232 !important;
outline-offset: 3px;
}

/* CHARACTER CARD LIST
Customize gap for card spacing and padding for space around the horizontal collection. */
.pp-cc-list-container,
.profile-character-card-list {
box-sizing: border-box;
display: flex !important;
flex-flow: row nowrap !important;
gap: 24px !important;
width: 100% !important;
min-width: 0;
padding: 8px 4px 18px !important;
align-items: flex-start;
overflow-x: auto !important;
}

main footer:not(.pp-mnb-wrapper):not(:has(.pp-mnb-container)),
.pp-cc-tokens-count,
.profile-character-card-tokens-count,
.profile-character-card-box,
.pp-cc-creator-name,
.profile-character-card-creator-name-box,
.profile-character-card-creator-name-link,
.profile-character-card-star-line,
.pp-cc-star-line,
img[alt="Stars"] {
display: none !important;
}


/* PUBLIC SCRIPTS
Edit scripts in JAI, not the bio. Change 240px for the minimum card width and gap for spacing.
Customize paper, shadow, and accent colors below for the ruled-paper cards. */
.profile-public-scripts {
box-sizing: border-box;
min-width: 0;
max-width: 100%;
color: #364232;
font-family: Mitr, sans-serif;
}

.profile-public-scripts [class*="_grid_"] {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
gap: 16px;
min-width: 0;
}

.profile-public-scripts [class*="_gridLoading_"],
.profile-public-scripts [class*="_emptyState_"],
.profile-public-scripts [class*="_statusText_"] {
color: #576353;
font-family: Mitr, sans-serif;
font-size: 0.875rem;
line-height: 1.6;
overflow-wrap: anywhere;
}

.profile-public-scripts [class*="_card_"] {
box-sizing: border-box;
flex-direction: column;
gap: 10px;
min-width: 0;
max-width: 100%;
min-height: 132px;
padding: 0.875rem 1rem;
border: 1px solid #A8B39C;
border-left: 3px solid #D7765A;
border-radius: 3px 8px 8px 3px;
background: repeating-linear-gradient(180deg, transparent 0 23px, rgba(87, 99, 83, 0.09) 23px 24px), #FFF9EF;
box-shadow: 0 2px 0 #DDE5D2;
color: #364232;
font-family: Mitr, sans-serif;
text-align: left;
text-decoration: none;
overflow-wrap: anywhere;
}

.profile-public-scripts [class*="_card_"]:hover,
.profile-public-scripts [class*="_card_"]:focus-within {
border-color: #8F4835;
box-shadow: 0 3px 0 #A8B39C;
}

.profile-public-scripts [class*="_card_"]:focus-visible,
.profile-public-scripts [class*="_card_"] :is(a, button):focus-visible,
.profile-public-scripts [class*="_retryButton_"]:focus-visible {
outline: 2px solid #364232 !important;
outline-offset: 3px;
}

.profile-public-scripts [class*="_card_"] [class*="_header_"],
.profile-public-scripts [class*="_card_"] [class*="_footer_"] {
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px;
min-width: 0;
max-width: 100%;
}

/* SCRIPT FOOTER: edit metadata spacing and divider colors below. */
.profile-public-scripts [class*="_card_"] [class*="_footer_"]:not([hidden]) {
display: flex !important;
}

.profile-public-scripts [class*="_card_"] [class*="_title_"] {
flex: 1 1 140px;
min-width: 0;
margin: 0;
color: #364232 !important;
font-family: Mitr, sans-serif;
font-size: 1rem;
font-weight: 500;
line-height: 1.5;
}

.profile-public-scripts [class*="_card_"] [class*="_typeBadge_"] {
box-sizing: border-box;
max-width: 100%;
padding: 3px 6px;
border: 1px solid #A8B39C;
border-radius: 3px;
background: #DDE5D2;
color: #364232;
font-family: Silkscreen, Pixelify Sans, monospace;
font-size: 0.625rem;
line-height: 1.6;
}

.profile-public-scripts [class*="_card_"] [class*="_description_"] {
margin: 0;
color: #576353 !important;
font-family: Mitr, sans-serif;
font-size: 0.875rem;
line-height: 1.65;
}

.profile-public-scripts [class*="_card_"] :is([class*="_title_"], [class*="_description_"]) {
display: block;
max-height: none;
-webkit-line-clamp: unset;
overflow: visible;
text-overflow: clip;
}

.profile-public-scripts [class*="_card_"] :is([class*="_title_"], [class*="_description_"], [class*="_typeBadge_"], [class*="_meta_"]) {
min-width: 0;
white-space: normal;
overflow-wrap: anywhere;
}

.profile-public-scripts [class*="_card_"] [class*="_footer_"] {
margin-top: auto;
padding-top: 8px;
border-top: 1px solid rgba(215, 118, 90, 0.35);
}

.profile-public-scripts [class*="_card_"] [class*="_meta_"] {
flex-wrap: wrap;
gap: 4px;
max-width: 100%;
color: #576353;
font-family: Mitr, sans-serif;
font-size: 0.75rem;
line-height: 1.6;
}

.profile-public-scripts [class*="_card_"] [class*="_avatarStack_"] {
flex-wrap: wrap;
min-width: 0;
max-width: 100%;
}

.profile-public-scripts [class*="_card_"] :is([class*="_avatar_"], [class*="_avatarFallback_"], [class*="_avatarMore_"]) {
box-sizing: border-box;
flex-shrink: 0;
width: 26px;
height: 26px;
border: 2px solid #FFF9EF;
border-radius: 50%;
background: #DDE5D2;
color: #364232;
font-family: Mitr, sans-serif;
font-size: 0.625rem;
object-fit: cover;
}

/* RETRY BUTTON: customize colors below; keep a minimum 44px tap target. */
.profile-public-scripts [class*="_retryButton_"] {
box-sizing: border-box;
min-width: 44px;
min-height: 44px;
max-width: 100%;
padding: 8px 14px;
border: 1px solid #A8B39C;
border-radius: 4px;
background: #DDE5D2;
color: #364232;
font-family: Mitr, sans-serif;
font-size: 0.875rem;
line-height: 1.5;
white-space: normal;
overflow-wrap: anywhere;
}

.profile-public-scripts [class*="_retryButton_"]:not(:disabled):not([aria-disabled="true"]):hover {
border-color: #8F4835;
background: #FDD3A2;
}

/* CHARACTER CARD SIZE + PAPER
Change min(540px, 90%) in flex for card width; the 640px mobile section sets its own width.
Customize cover colors here and paper gradients, column proportions, gap, and padding in the stack below. */
.pp-cc-wrapper,
.profile-character-card-wrapper {
box-sizing: border-box;
position: relative;
flex: 0 0 min(540px, 90%);
width: 100% !important;
max-width: none !important;
height: auto !important;
min-width: 0;
padding: 6px !important;
border: 2px solid #576353 !important;
border-radius: 5px 10px 10px 5px !important;
background: #DDE5D2 !important;
box-shadow: inset 0 0 0 1px #F6F8EF, 0 3px 0 #F5F0E3, 0 4px 0 #A8B39C, 0 6px 0 #576353 !important;
overflow: visible !important;
transform: none !important;
}

/* EVENT DECORATIONS: hide seasonal layers and ornaments; keep card content. */
:is(.pp-cc-wrapper, .profile-character-card-wrapper) > :is(.pp-cc-gradient-1, .pp-cc-gradient-2, .pp-cc-gradient-3),
:is(.pp-cc-wrapper, .profile-character-card-wrapper) > div:not(.profile-character-card-stack):has(~ .profile-character-card-stack),
:is(.pp-cc-wrapper, .profile-character-card-wrapper) > .profile-character-card-stack > :is(.profile-character-card-box, div:has(> :is(.pp-cc-tokens-count, .profile-character-card-tokens-count))) ~ * {
display: none !important;
}

.profile-character-card-stack {
box-sizing: border-box;
position: relative;
isolation: isolate;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas: "portrait title" "portrait description" "tags tags";
grid-template-rows: auto 1fr auto;
gap: 14px 24px !important;
width: 100%;
height: auto !important;
min-width: 0;
padding: 20px !important;
background: transparent !important;
overflow: visible !important;
font-family: Mitr, sans-serif;
color: #364232;
}

.profile-character-card-stack:before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: repeating-linear-gradient(180deg, transparent 0 23px, rgba(87, 99, 83, 0.12) 23px 24px), #FFF9EF;
box-shadow: inset 0 0 0 1px #B9BAA8;
clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
pointer-events: none;
}

.profile-character-card-stack:after {
content: "";
position: absolute;
grid-area: portrait;
top: 0;
bottom: 0;
right: -14px;
width: 3px;
background: repeating-linear-gradient(180deg, #A8B39C 0 6px, #E8E2D6 6px 18px);
box-shadow: -2px 0 0 #FFFDF8, 2px 0 0 #E8E2D6;
pointer-events: none;
}

/* CHARACTER LINKS: customize the focus-outline color and hovered title underline below. */
.profile-character-card-stack-link-component {
display: contents;
}

.profile-character-card-stack > *,
.profile-character-card-stack-link-component > * {
min-width: 0;
margin: 0 !important;
}

.profile-character-card-stack-link-component:focus-visible :is(.profile-character-card-stack-link-component-box, .profile-character-card-avatar-aspect-ratio) {
outline: 2px solid #364232;
outline-offset: 3px;
}

.profile-character-card-stack-link-component:hover :is(.pp-cc-name, .profile-character-card-name-box) {
text-decoration: underline;
text-underline-offset: 4px;
}

.profile-character-card-stack-link-component-box {
grid-area: title;
padding: 0 0 10px 9px !important;
border-left: 2px solid rgba(215, 118, 90, 0.55);
border-bottom: 1px solid rgba(215, 118, 90, 0.4);
}

.pp-cc-name,
.profile-character-card-name-box {
text-shadow: none !important;
filter: none !important;
font-family: Silkscreen, Pixelify Sans, monospace !important;
font-size: 1rem !important;
line-height: 1.5;
color: #364232 !important;
text-align: left;
white-space: normal;
overflow-wrap: anywhere;
}

/* CHARACTER PORTRAIT SIZE
Change min-height (280px) and border widths for the photo mount.
The image rule below uses object-fit: cover; use contain to show the full image instead. */
.profile-character-card-avatar-aspect-ratio {
grid-area: portrait;
position: relative !important;
inset: auto !important;
align-self: stretch;
box-sizing: border-box;
width: 100% !important;
height: 100% !important;
min-height: 280px;
aspect-ratio: auto !important;
padding: 0 !important;
border: 7px solid #FFFCF5;
border-bottom-width: 20px;
border-radius: 2px !important;
background: #FFFCF5;
box-shadow: 0 0 0 1px #8D9983, 2px 3px 0 #E7E1D1;
overflow: visible;
}

/* PORTRAIT TAPE: adjust width, height, gradient colors, and the two rotation angles below. */
.profile-character-card-avatar-aspect-ratio:before,
.profile-character-card-avatar-aspect-ratio:after {
content: "" !important;
position: absolute;
top: -7px;
z-index: 2;
width: 44px;
height: 14px;
padding: 0 !important;
border: 1px solid rgba(195, 154, 119, 0.5);
background: repeating-linear-gradient(90deg, rgba(255, 252, 245, 0.3) 0 2px, transparent 2px 5px), rgba(253, 211, 162, 0.85);
box-shadow: 0 1px 2px rgba(54, 66, 50, 0.15);
pointer-events: none;
}

.profile-character-card-avatar-aspect-ratio:before {
left: -12px;
transform: rotate(-35deg);
}

.profile-character-card-avatar-aspect-ratio:after {
right: -12px;
transform: rotate(35deg);
}

.pp-cc-avatar,
.profile-character-card-avatar-image {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 0 !important;
}

.profile-character-card-description-box {
grid-area: description;
height: auto !important;
max-height: none !important;
padding: 0 !important;
background: transparent;
font-size: 0.9rem;
line-height: 1.65;
}

/* DESCRIPTION PREVIEW
Change -webkit-line-clamp: 4 for the visible line count, and font-size/line-height for readability. */
.pp-cc-description,
.profile-character-card-description-markdown-container {
display: -webkit-box !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
max-height: none !important;
font-family: Mitr, sans-serif !important;
font-size: 0.9rem !important;
line-height: 1.65 !important;
color: #364232 !important;
text-align: left;
overflow-wrap: anywhere;
}

.pp-cc-description p,
.profile-character-card-description-markdown-container p {
margin: 0 0 0.5em;
color: inherit;
}

.pp-cc-description img,
.profile-character-card-description-markdown-container img {
max-width: 100%;
height: auto;
}

.pp-cc-tags,
.profile-character-card-tags {
grid-area: tags;
height: auto !important;
max-height: none !important;
padding: 6px 0 0 !important;
border-top: 1px dashed #A8B39C;
overflow: visible !important;
}

.pp-cc-tags ul,
.profile-character-card-tags ul {
display: flex !important;
flex-flow: row wrap !important;
justify-content: flex-start !important;
gap: 3px !important;
width: 100%;
padding: 0 !important;
margin: 0 !important;
list-style: none;
}

.pp-cc-tags li,
.profile-character-card-tags li,
:is(.pp-cc-tags, .profile-character-card-tags) :is(.pp-cc-tags-wrap, .pp-cc-tags-wrap-regular, .pp-cc-tags-wrap-custom, .profile-character-card-tags-wrap, .profile-character-card-tags-wrap-regular) {
display: flex;
align-items: center;
flex: 0 1 auto;
min-width: 0;
max-width: 100%;
margin: 0 !important;
padding: 0 !important;
}

/* CHARACTER TAGS
Customize label padding, border, background, color, and 0.65rem font-size below. */
:is(.pp-cc-tags, .profile-character-card-tags) a {
display: flex;
align-items: center;
min-width: 0;
max-width: 100%;
min-height: 24px;
padding: 0 !important;
}

:is(.pp-cc-tags, .profile-character-card-tags) :is(.pp-cc-tags-item, .pp-cc-tags-regular, .pp-cc-tags-custom, .pp-tag-limitless, .profile-character-card-tag-limitless) {
display: inline-block;
box-sizing: border-box;
min-width: 0;
max-width: 100%;
min-height: 20px;
padding: 1px 5px !important;
border: 1px solid #9AA68E !important;
border-radius: 2px 4px 4px 2px !important;
background: #E8EDDF !important;
color: #364232 !important;
box-shadow: none;
font-family: Mitr, sans-serif !important;
font-size: 0.65rem !important;
line-height: 1.35;
white-space: normal !important;
overflow-wrap: anywhere;
}

/* REGULAR TAG EMOJIS: change font-size from 0 to inherit to show them. */
:is(.pp-cc-tags, .profile-character-card-tags) .pp-cc-tags-regular:not(.pp-cc-tags-custom, .pp-tag-limitless, .profile-character-card-tag-limitless)::first-letter {
font-size: 0 !important;
}

:is(.pp-cc-tags, .profile-character-card-tags) :is(.pp-tag-limitless, .profile-character-card-tag-limitless),
:is(.pp-cc-tags, .profile-character-card-tags) a:is(:hover, :focus-visible) > span {
background: #FDD3A2 !important;
}

.profile-character-card-stats-box {
position: absolute !important;
top: -10px !important;
left: 50% !important;
right: auto !important;
bottom: auto !important;
z-index: 3;
width: auto !important;
max-width: calc(100% - 32px);
padding: 0 !important;
transform: translateX(-50%) !important;
}

.profile-character-card-stats-box > span,
.pp-cc-ribbon,
.profile-character-card-ribbon,
.pp-cc-ribbon-wrap,
.profile-character-card-ribbon-wrap {
position: static !important;
inset: auto !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
background: none !important;
clip-path: none !important;
box-shadow: none !important;
filter: none !important;
transform: none !important;
}

.pp-cc-chats,
.profile-character-card-chats-hstack {
display: flex;
align-items: center;
gap: 6px;
padding: 3px 8px;
border: 1px solid #C39A77;
border-radius: 2px;
background: #FDD3A2;
color: #364232 !important;
font-family: Mitr, sans-serif;
font-size: 0.72rem;
line-height: 1.5;
}

.pp-cc-chats-count,
.profile-character-card-chats-count,
.pp-cc-chats svg,
.profile-character-card-chats-hstack svg {
color: #364232 !important;
}

.pp-cc-chats-count,
.profile-character-card-chats-count {
font-size: inherit !important;
line-height: inherit;
}

.pp-cc-chats svg,
.profile-character-card-chats-hstack svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}

/* DIARY, GALLERY, CONTACT, RULES + CREATORS
Customize gallery minimum card width (200px), contact columns (2), and creator minimum
card width (260px) below. Set creator portrait width and its grid column together (both 76px). */
.ace-diary-list,
.ace-gallery-grid,
.ace-link-grid,
.ace-rules-stack,
.ace-creators-grid {
min-width: 0;
}

.ace-gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
gap: 18px;
}

.ace-gallery-grid figure,
.ace-person {
margin: 0;
min-width: 0;
padding: 9px;
border: 1px solid #CBC8B9;
border-radius: 3px;
background: #FFF9EF;
box-shadow: 3px 3px 0 rgba(168, 162, 158, 0.2);
}

/* GALLERY PHOTOS + CAPTIONS
Adjust mount padding and tape colors below. Images use a 16:9 aspect-ratio and cover cropping;
change those image settings for your artwork. Caption gap and margin control text spacing. */
.ace-gallery-grid figure {
position: relative;
padding: 12px;
}

.ace-gallery-grid figure:before {
content: "";
position: absolute;
top: -6px;
left: calc(50% - 22px);
width: 44px;
height: 14px;
background: rgba(221, 229, 210, 0.88);
border: 1px solid rgba(87, 99, 83, 0.25);
pointer-events: none;
}

.ace-gallery-grid img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border: 1px solid #A8A29E;
}

.ace-gallery-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 16 / 9;
border: 1px dashed currentColor;
font-family: Silkscreen, Pixelify Sans, monospace;
font-size: 0.75rem;
}

/* GALLERY LINKS: edit the footer label in HTML and its size and spacing here. */
.ace-gallery-link {
display: inline-flex;
align-items: center;
min-height: 44px;
max-width: 100%;
padding: 4px 0;
color: inherit;
font-size: 0.8rem;
text-decoration: underline;
text-underline-offset: 3px;
overflow-wrap: anywhere;
}

.ace-gallery-grid figcaption {
display: grid;
gap: 7px;
margin-top: 12px;
}

.ace-gallery-grid figcaption b {
color: #34783E;
font-family: Silkscreen, monospace;
font-size: 0.8rem;
}

.ace-gallery-grid small,
.ace-link-card small,
.ace-person small {
font-size: 0.78rem;
color: #576353;
}

.ace-diary-list {
display: grid;
margin-top: 16px;
}

.ace-diary-entry,
.ace-rules-stack article {
display: grid;
grid-template-columns: 80px minmax(0, 1fr);
gap: 16px;
min-width: 0;
padding: 18px 0;
border-bottom: 1px solid #CBC8B9;
}

.ace-diary-entry > div:last-child {
border-left: 1px solid #D7765A;
padding-left: 16px;
}

.ace-entry-meta {
display: flex;
flex-direction: column;
gap: 6px;
color: #8F4835;
font-size: 0.8rem;
}

.ace-entry-meta small {
color: #576353;
}

.ace-link-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}

.ace-link-card {
display: grid;
gap: 5px;
padding: 13px;
border: 2px solid rgba(52, 120, 62, 0.38);
border-radius: 10px;
background: #FFF4E5;
box-shadow: 3px 3px 0 rgba(253, 211, 162, 0.7);
}

.ace-link-card b,
.ace-person b {
color: #34783E;
font-family: Silkscreen, Pixelify Sans, monospace !important;
font-size: 0.76rem;
letter-spacing: 0.5px;
}

.ace-link-card span {
color: #576353;
}

.ace-rules-stack {
display: grid;
}

.ace-rules-stack article {
grid-template-columns: 30px minmax(0, 1fr);
}

.ace-rules-stack > article > b {
color: #8F4835;
font-family: Silkscreen, monospace;
font-size: 0.85rem;
}

.ace-creators-grid {
display: grid;
gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
margin-top: 18px;
}

.ace-creators-grid > .ace-person {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 76px !important;
gap: 6px;
align-content: start;
align-items: start;
padding: 14px;
color: #364232;
}

.ace-person > p:has(> .ace-person-img) {
display: contents !important;
}

.ace-person > b,
.ace-person > p:has(> .ace-person-img) > b {
grid-column: 1;
grid-row: 1;
}

.ace-person > small:first-of-type:not(:last-child),
.ace-person > p:has(> .ace-person-img) > small {
grid-column: 1;
grid-row: 2;
}

.ace-person > p,
.ace-person > small:last-child {
grid-column: 1 / -1;
}

a.ace-person:hover,
a.ace-friend:hover,
a.ace-link-card:hover {
background: #FDD3A2;
}

.ace-person-img {
grid-column: 2;
grid-row: 1 / 3;
display: flex;
align-items: center;
justify-content: center;
width: 76px;
aspect-ratio: 1 / 1;
border: 1px solid #A8B39C;
background: #E8EDDF;
}

.ace-person-img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

.ace-person-placeholder {
color: #34783E;
font-family: Silkscreen, Pixelify Sans, monospace;
font-size: 0.78rem;
}

/* TABLET + MOBILE OVERRIDES
Customize each size range here after changing desktop settings above.
At 1199.98px and below, adjust notebook columns and page padding. */
@media (max-width: 1199.98px) {
.profile-info-stack {
grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) 86px;
}

.ace-right-page {
padding: 22px 24px 20px;
}
}

@media (max-width: 991.98px) {
/* TABLETS: 991.98px AND BELOW
Adjust notification top/max-height here. The notebook becomes one column below;
customize profile spacing and the wrapping tab row in this same size range. */
.pp-top-bar-notifications-popover,
.profile-top-bar-notifications-popover,
[class*="notificationsPopover"] {
box-sizing: border-box;
top: 4.5rem !important;
max-width: calc(100vw - 24px) !important;
max-height: min(70dvh, calc(100dvh - 10rem)) !important;
overflow-y: auto !important;
}

:is(.pp-top-bar-notifications-popover, .profile-top-bar-notifications-popover, [class*="notificationsPopover"]) [class*="notificationsList"] {
max-height: min(55dvh, calc(100dvh - 15rem)) !important;
overflow-y: auto !important;
}

/* MOBILE HEADER
Customize the paper colors, 6px spacing, title font, and 44px Back/options controls below. */
.pp-top-header {
background: #FFF4E5 !important;
color: #364232 !important;
}

.pp-top-header :is(.pp-top-bar, .profile-top-bar) {
box-sizing: border-box;
display: grid !important;
grid-template-columns: minmax(94px, 1fr) minmax(0, 1.1fr) minmax(94px, 1fr);
align-items: center !important;
gap: 6px !important;
width: 100%;
min-width: 0;
padding: 4px 8px !important;
background: #FFF4E5 !important;
border-bottom: 2px solid #576353 !important;
box-shadow: 0 3px 0 #DDE5D2 !important;
}

.pp-top-header :is(.pp-top-bar, .profile-top-bar) > div:first-child {
min-width: 0;
justify-self: start;
}

.pp-top-header :is(.pp-top-bar, .profile-top-bar) > div:nth-child(2) {
min-width: 0;
max-width: 100%;
text-align: center;
}

.pp-top-header :is(.pp-top-bar-title, .profile-top-bar-title) {
margin: 0 !important;
max-width: 100%;
color: #34783E !important;
font-family: Silkscreen, Pixelify Sans, monospace !important;
font-size: clamp(0.7rem, 3vw, 0.9rem) !important;
line-height: 1.4 !important;
text-align: center !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.pp-top-header :is(.pp-top-bar, .profile-top-bar) > div:last-child {
grid-column: 3;
grid-row: 1;
justify-self: end !important;
width: max-content !important;
margin: 0 !important;
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 6px !important;
min-width: 0;
}

.pp-top-header :is(.pp-top-bar-back-button, .profile-top-bar-back-button),
.pp-top-header :is(.pp-top-bar, .profile-top-bar) > div:last-child > div:first-child > div > button {
box-sizing: border-box;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 44px !important;
min-height: 44px !important;
padding: 6px 8px !important;
border: 2px solid #576353 !important;
border-radius: 6px !important;
background: #FFF4E5 !important;
color: #34783E !important;
box-shadow: 2px 2px 0 #FDD3A2 !important;
font-family: Silkscreen, Pixelify Sans, monospace !important;
font-size: 0.7rem !important;
line-height: 1.4 !important;
transition: background-color 160ms ease, box-shadow 160ms ease;
}

.pp-top-header :is(.pp-top-bar, .profile-top-bar) > div:last-child > div:first-child > div > button {
width: 44px !important;
height: 44px !important;
padding: 0 !important;
}

.pp-top-header :is(.pp-top-bar-back-button, .profile-top-bar-back-button) p {
margin: 0 !important;
font: inherit !important;
color: inherit !important;
}

.pp-top-header :is(.pp-top-bar-back-button, .profile-top-bar-back-button) .chakra-button__icon {
margin: 0 4px 0 0 !important;
}

.pp-top-header :is(.pp-top-bar-back-button, .profile-top-bar-back-button) svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}

.pp-top-header :is(.pp-top-bar-back-button, .profile-top-bar-back-button):hover,
.pp-top-header :is(.pp-top-bar, .profile-top-bar) > div:last-child > div:first-child > div > button:hover {
background: #FDD3A2 !important;
box-shadow: 2px 2px 0 #D7765A !important;
}

.pp-top-header :is(.pp-top-bar-back-button, .profile-top-bar-back-button):focus-visible,
.pp-top-header :is(.pp-top-bar, .profile-top-bar) > div:last-child > div:first-child > div > button:focus-visible {
outline: 2px solid #364232 !important;
outline-offset: 3px;
}

/* BOTTOM NAVIGATION
Customize paper/border colors, container padding, 60px minimum height, and 22px icons. */
.pp-mnb-wrapper {
background: #FFF9EF !important;
border-top: 1px solid #A8B39C !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}

.pp-mnb-container {
box-sizing: border-box;
display: flex !important;
align-items: center !important;
justify-content: space-around !important;
gap: 6px !important;
height: auto !important;
min-height: 60px;
padding: 6px 8px !important;
border: 2px solid #576353 !important;
border-radius: 12px 12px 6px 6px !important;
background: #FFF9EF !important;
box-shadow: 0 -3px 0 #DDE5D2, 0 -4px 0 #A8B39C !important;
color: #364232 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}

.pp-mnb-container > a,
.pp-mnb-container .pp-mnb-user-menu {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
border: 1px solid transparent;
border-radius: 6px;
background: transparent !important;
color: #364232 !important;
}

.pp-mnb-container .pp-mnb-item,
.pp-mnb-container :is(.pp-top-bar-app-menu, .profile-top-bar-app-menu) {
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
color: inherit !important;
}

.pp-mnb-container > a:is(:hover, :focus-visible, :active),
.pp-mnb-container .pp-mnb-user-menu:is(:hover, :focus-within) {
border-color: #C39A77;
background: #FDD3A2 !important;
}

.pp-mnb-container :is(a, button, [tabindex]):focus-visible {
outline: 2px solid #364232 !important;
outline-offset: 2px;
}

.pp-mnb-container svg {
flex-shrink: 0;
width: 22px !important;
height: 22px !important;
color: inherit !important;
}

.pp-mnb-container :is(.pp-top-bar-app-menu, .profile-top-bar-app-menu) {
position: relative;
background: transparent !important;
}

.pp-mnb-container :is(.pp-top-bar-app-menu, .profile-top-bar-app-menu) > span {
opacity: 0 !important;
}

.pp-mnb-container :is(.pp-top-bar-app-menu, .profile-top-bar-app-menu)::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 22px;
height: 16px;
background: repeating-linear-gradient(to bottom, currentColor 0 2px, transparent 2px 7px);
transform: translate(-50%, -50%);
pointer-events: none;
}

.pp-top-bar,
.profile-top-bar {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}

.profile-info-stack {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: repeat(16, min-content);
grid-template-areas: "top" "mood" "avatar" "kicker" "name" "username" "followers" "bio" "updated" "facts" "friends" "foot" "tabs" "page" "buttons" "credit";
padding: 26px 18px 18px !important;
}

.ace-notebook:before,
.ace-notebook:after,
.ace-left-page:after {
display: none;
content: none;
}

.ace-friends-body {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px 16px;
}

.ace-tabs {
margin: 0 0 12px;
flex-direction: row;
flex-wrap: wrap;
}

.ace-tabs a {
flex: 1 1 auto;
border: 2px solid #576353;
border-radius: 7px 7px 2px 2px;
}

}

/* SMALL TABLETS: 892px AND BELOW
Customize stacked heading spacing and the single-column home/garden text cards. */
@media (max-width: 892px) {
.ace-page-head {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}

.ace-lower-grid {
grid-template-columns: 1fr;
}
}

/* PHONES: 767.98px AND BELOW
Customize the 230px avatar width cap and two-column statistics row. */
@media (max-width: 767.98px) {
.ace-avatar-frame {
width: min(230px, calc(100% - 36px));
}

.ace-stats-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ace-garden-tools {
flex-wrap: wrap;
}

.ace-garden-tools span {
margin-left: 0;
}
}

/* MOBILE DETAILS: 640px AND BELOW
Change min(340px, 90%) for character card width; portraits are square with a 320px height cap.
Customize compact padding, 16:10 garden framing, and single-column content grids here. */
@media (max-width: 640px) {
/* PAGE BUTTONS: adjust gap to change spacing within the centered row. */
.profile-pagination-prev-hstack {
width: 100% !important;
gap: 6px !important;
}

.character-list-pagination-flex {
padding: 10px !important;
}

.character-list-pagination-flex .character-list-pagination-box {
flex: 1 1 100%;
width: 100%;
}

.character-list-pagination-box .profile-pagination-flex-outer {
justify-content: center !important;
}

.profile-filters-flex-inner-onorderchanged {
flex: 1 1 130px !important;
width: auto !important;
}

.pp-cc-list-container,
.profile-character-card-list {
gap: 16px !important;
}

.pp-cc-wrapper,
.profile-character-card-wrapper {
flex-basis: min(340px, 90%);
}

.profile-page-container-flex-box {
padding: 0 12px 28px !important;
}

.profile-character-card-stack {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "portrait" "title" "description" "tags";
grid-template-rows: auto;
gap: 14px !important;
padding: 16px !important;
}

.profile-character-card-stack:after {
content: none;
}

.profile-character-card-avatar-aspect-ratio {
height: auto !important;
min-height: 0;
max-height: 320px;
aspect-ratio: 1 / 1 !important;
}

.profile-info-stack {
padding: 12px 10px !important;
border-radius: 16px;
}

.ace-right-page {
border-radius: 10px;
padding: 16px 12px;
}

.ace-page-head h1 {
font-size: 1.1rem;
}

.ace-garden-frame {
aspect-ratio: 16 / 10;
}

.ace-gallery-grid,
.ace-link-grid,
.ace-creators-grid,
.ace-friends-body {
grid-template-columns: 1fr;
}

.ace-diary-entry {
grid-template-columns: 1fr;
gap: 10px;
}

.ace-entry-meta {
flex-direction: row;
flex-wrap: wrap;
gap: 12px;
}

.ace-note {
padding: 14px;
}
}

/* NARROW PHONES: 440px AND BELOW
Adjust notebook/page side padding, profile-name size, and credit text size here. */
@media (max-width: 440px) {
.profile-info-stack {
padding-left: 7px !important;
padding-right: 7px !important;
}

.ace-right-page {
padding: 13px 9px;
}

.pp-uc-title,
.profile-title-heading {
font-size: 1rem !important;
}

.ace-credit-line {
font-size: 0.54rem;
letter-spacing: 0.5px;
}
}

/* REDUCED MOTION
Keep these overrides for visitors who request less motion: the open-eye avatar
and first garden image stay visible without the repeating animations. */
@media (prefers-reduced-motion: reduce) {
*, *:before, *:after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}

.ace-avatar-open,
.ace-garden-1 {
opacity: 1 !important;
}

.ace-avatar-closed,
.ace-garden-2,
.ace-garden-3 {
opacity: 0 !important;
}
}

/* HIGH CONTRAST
Change the border color below if needed, keeping it distinct from the paper backgrounds. */
@media (prefers-contrast: more) {
.pp-cc-wrapper,
.profile-character-card-wrapper,
.profile-info-stack,
.ace-left-page:before,
.ace-right-page,
.ace-card,
.ace-note,
.ace-link-card,
.ace-person,
.ace-friend,
.ace-diary-entry,
.ace-rules-stack article,
.ace-gallery-grid figure,
.ace-avatar-frame,
.ace-garden-frame,
.ace-tabs a,
.pp-uc-follow-button,
.profile-uc-follow-button,
.pp-uc-options-menu,
.profile-uc-options-menu {
border-color: #000 !important;
}
}

</style>
