Custom CSS Guide

Your Sanctuary profile lets you write your own CSS to restyle your bio. This page explains exactly what you can style, what's off-limits, and gives you working examples to copy.

Where to find it

1. Go to your own profile page.
2. Click Edit Sanctuary near the top right.
3. Scroll down to the Custom CSS box in the drawer.

What it can style

Your CSS only applies inside the About & Sanctuary tab of your own profile — specifically your bio card, and your Masterpiece bot spotlight card if you've set one. It never reaches your banner, avatar, username, the tab bar, the Characters or Guestbook tabs, the navigation bar, or anyone else's profile — that's enforced automatically, not just a suggestion.

Selectors you can use

Write plain CSS starting from one of these — you never need to prefix anything with your own username or ID, that part is handled for you automatically.

Selector	Targets
`.bio`	The bio card itself — background, border, shadow, padding…
`.bio p`	Paragraph text in your bio
`.bio a`	Links in your bio
`.bio strong`	Bold text
`.bio em`	Italic text
`.bio ul` / `.bio ol`	Bullet / numbered lists
`.bio h3`	All headings in your bio (`#`, `##` and `###` all render as the same tag, just at different sizes)
`body` / `html` / `:root`	Automatically rewritten to your own profile area — handy for defining CSS variables that your other rules can reuse

Rules

• Maximum 20,000 characters.
• Not allowed, at all — the whole stylesheet gets rejected if any of these appear: @import, expression(), javascript:, -moz-binding, behavior:, and the characters < / >.
• @media and @supports blocks work normally — use them for responsive tweaks.
• Any other at-rule (@font-face, @keyframes, @page, etc.) is silently dropped — it won't show an error, it just won't apply. Don't rely on custom @keyframes animations.

Examples

Recolor your bio card

.bio {
  background: #1a0f14;
  border-color: #df5763;
}
.bio p {
  color: #f4c9ce;
}

Glow effect using a shared variable

body {
  --accent-glow: 0 0 20px rgba(223, 87, 99, 0.5);
}
.bio {
  box-shadow: var(--accent-glow);
}

Style links and bold text

.bio a {
  color: #df5763;
  text-decoration: underline;
}
.bio strong {
  color: #ffffff;
}

Smaller padding on mobile

@media (max-width: 640px) {
  .bio {
    padding: 1rem;
  }
}