<style>

/* ═══════════════════════════════════════════════════════════
   GRAY WINDOW — a JanitorAI profile template
   (retro PC window, gray version by DoomAI)

   Written in short lines on purpose, so it fits on a phone
   screen and is easy to read and copy from a paste site.

   HOW TO USE
   1. Copy this WHOLE file (the <style> block plus everything
      below it) into your JanitorAI profile's About Me box.
   2. Search the file for the word  EDIT  — every spot you can
      change something is marked with it.
   3. Delete any section you don't want. Each bio section is
      one <details> block: delete from its  <details  line down
      to its matching  </details>  line. The intro box and the
      banner box are plain <div> blocks — delete those the same
      way.

   HOW TO RECOLOR — every color is a hex code like #a6adb4.
   Use find & replace (Ctrl+H) to swap them everywhere at once:

     #0a0a0a   page + window background (darkest)
     #141414   panels, bars, chips, inputs
     #1b1b1b   lighter panels (headers, name strips, captions)
     #1c1c1c   the loud banner background
     #1f1f1f   hover rows / unread highlight background
     #2e2e2e   quiet borders
     #a6adb4   MAIN accent — borders, titles, links, buttons
     #e3e6e9   BRIGHT accent — icons, bullets, banner, hovers
     #d6d9db   normal text
     #8b9196   dim text (labels, placeholders, footer)
     #ffffff14 / rgba(255,255,255,…)  tints + glows, leave as is

   Tip: keep one mid-gray accent + one near-white accent and
   the theme stays readable. The red close-button flash is on
   purpose (real window chrome) — search  e81123  to change or
   remove it.

   ONE WARNING: the hover effects in section 19 look for the
   exact text "border-left:3px solid #a6adb4" and
   "border-left:6px solid #e3e6e9" inside the style blocks
   below. If you edit those style blocks, keep those two lines
   written exactly like that.

   OPTIONAL WEB FONT — the import below is OFF. To turn it on,
   delete the line above it (the one that ends with OFF.) and
   the line below the link (the one that is just  */ ). The
   @import line must end up as the very first line in <style>.
/*
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap');
*/

/* ═══ 01 · BASE — text, links, text selection ═══
   Controls plain text color, link colors, and the color you
   get when you highlight text with the mouse.
   EDIT: swap #d6d9db for another text color, #a6adb4 for
   links, #e3e6e9 for the link hover color. */
p { color: #d6d9db; }
a { color: #a6adb4; }
a:hover { color: #e3e6e9; }
::selection { background: #d6d9db !important; color: #0a0a0a; }

/* ═══ 02 · FONTS — makes site text use the "code" font ═══
   Don't edit the long list of names. It is just everything
   that should use the font. EDIT: to change the font, change
   'JetBrains Mono' on the last line of this rule (it must be
   a font JanitorAI/the visitor has). */
.profile-title-heading, .profile-top-bar-logo-name,
.profile-top-bar-logo-sub-name, .profile-top-bar-create-char,
.profile-top-bar-app-menu-list-item, .profile-followers-count,
.profile-member-since-box, .profile-uc-follow-button,
.profile-uc-follow-text, .pp-uc-options-menu,
.profile-character-search-input, .profile-filter-button,
.profile-character-card-name-box,
.profile-character-card-description-box,
.pp-cc-tags-item, .profile-character-card-tokens-count,
[class*="popoverTitle"], [class*="headerActions"] button,
[class*="_subject_"], [class*="_body_"] *,
#root .react-select__control, #root .react-select__menu,
details, .css-jdhqy4 > div {
  font-family: 'JetBrains Mono', monospace;
}

/* ═══ 03 · SQUARE CORNERS — removes all rounded corners ═══
   EDIT: to get rounded corners back on something, delete its
   name from this list. */
.profile-avatar, .profile-avatar-container,
[class*="characterAvatar"], [class*="userAvatar"],
.profile-character-card-avatar-image,
.profile-character-card-avatar-aspect-ratio,
.profile-character-card-stack,
.profile-uc-background-flex, .profile-top-bar-search,
.profile-followers-count, .profile-uc-follow-button,
.pp-uc-options-menu, .profile-character-search-input,
.profile-filter-button, .pp-cc-tags-item,
#root .react-select__menu, #root .react-select__control,
.chakra-modal__content, details {
  border-radius: 0 !important;
}

/* ═══ 04 · TOP BAR — the strip across the top of the site ═══
   EDIT: the line under the bar is "border-bottom: 1px solid
   #a6adb4" (make it 3px for a thicker line, or "none" to
   remove it). */
.profile-top-bar {
  background: #0a0a0a;
  box-shadow: none;
  backdrop-filter: none;
  border-bottom: 1px solid #a6adb4;
}
.profile-top-bar-logo { text-shadow: none !important; }
.profile-top-bar-logo-name {
  color: #a6adb4;
  font-weight: 600;
}
.profile-top-bar-logo-name::before {
  content: "◢ ";
  color: #e3e6e9;
  font-size: 0.7em;
}
.profile-top-bar-logo-sub-name { color: #8b9196; }
/* the CREATE A CHARACTER button */
.profile-top-bar-create-char {
  color: #a6adb4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: none;
  border: 1px solid #a6adb4;
  padding: 4px 12px;
}
.profile-top-bar-create-char::before,
.profile-top-bar-create-char::after { background: none; }
.profile-top-bar-create-char:hover {
  background: #a6adb4;
  color: #0a0a0a;
}
.profile-top-bar-create-char:active {
  transform: translateY(1px);
}

/* ═══ 05 · PROFILE CARD — your avatar + the title strip ═══
   The strip across the top of the card is made by the rule
   with "::before" and the buttons on its right by the rule
   with "::after".
   EDIT: change the words in quotes after "content:" to rename
   the strip.
   NOTE: the three little buttons on the strip are just
   decoration. They are drawn by the site, so they can't be
   clicked. */
.profile-uc-background-flex {
  position: relative;
  background: #0a0a0a;
  border: 1px solid #a6adb4;
  padding: 28px 0 0 0;
}
.profile-uc-background-flex > div {
  background: transparent !important;
}
.profile-uc-background-flex:hover { box-shadow: none; }
/* the strip itself (EDIT the text inside the quotes) */
.profile-uc-background-flex::before {
  content: "◢ SYS://USER_PROFILE";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 28px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  z-index: 5;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #a6adb4;
  background: #141414;
  border-bottom: 1px solid #a6adb4;
  pointer-events: none;
}
/* the three decorative buttons on the strip's right */
.profile-uc-background-flex::after {
  content: " ─  □  ✕ ";
  white-space: pre;
  position: absolute;
  top: 4px; right: 6px;
  height: 20px;
  display: flex;
  align-items: center;
  padding: 0;
  z-index: 6;
  font-family: 'JetBrains Mono', monospace;
  font-size: .85rem;
  line-height: 1;
  letter-spacing: .037em;
  color: #8b9196;
  cursor: default;
  pointer-events: none;
}

/* ═══ 06 · AVATAR — your picture, frame, corner brackets ═══
   EDIT: the picture size is "width: 280px; height: 280px"
   (keep them the same number so it stays square).
   EDIT: the glow is the "box-shadow" lines. The 16px and 36px
   are how far the glow spreads. Make them smaller for a
   weaker glow, or replace the whole value with  none  to
   remove the glow.
   EDIT: the brackets are the "16px" numbers in the ::after
   rule (their length). Delete that rule to remove them. */
.profile-avatar-container {
  position: relative;
  width: 280px; height: 280px;
  margin: 0 auto;
  background: #141414;
  border: 1px solid #a6adb4;
  overflow: hidden;
  box-shadow:
    0 0 16px rgba(255,255,255,.22),
    0 0 36px rgba(255,255,255,.09);
}
.profile-avatar-container::after {
  content: "";
  position: absolute;
  top: 8px; right: 8px;
  bottom: 8px; left: 8px;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(#a6adb4, #a6adb4) top left / 16px 2px no-repeat,
    linear-gradient(#a6adb4, #a6adb4) top left / 2px 16px no-repeat,
    linear-gradient(#a6adb4, #a6adb4) top right / 16px 2px no-repeat,
    linear-gradient(#a6adb4, #a6adb4) top right / 2px 16px no-repeat,
    linear-gradient(#a6adb4, #a6adb4) bottom left / 16px 2px no-repeat,
    linear-gradient(#a6adb4, #a6adb4) bottom left / 2px 16px no-repeat,
    linear-gradient(#a6adb4, #a6adb4) bottom right / 16px 2px no-repeat,
    linear-gradient(#a6adb4, #a6adb4) bottom right / 2px 16px no-repeat;
}
.profile-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ═══ 07 · PROFILE INFO — name, followers, member-since ═══
   EDIT: ".profile-badges { filter: grayscale(1) }" makes your
   badges black and white. Delete that line to give them their
   color back. */
.profile-title-heading {
  color: #a6adb4;
  text-decoration: none;
  letter-spacing: 0.04em;
}
.profile-followers-count {
  color: #a6adb4;
  background: #141414;
  border: 1px solid #a6adb4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.profile-member-since-box { color: #8b9196; }
.profile-badges { filter: grayscale(1); }

/* ═══ 08 · FOLLOW + OPTIONS BUTTONS ═══
   Hover = fills with the main accent. Click = presses down
   1 pixel. */
.profile-uc-follow-button, .pp-uc-options-menu {
  color: #a6adb4;
  background: #141414;
  border: 1px solid #a6adb4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.profile-uc-follow-button:hover,
.pp-uc-options-menu:hover {
  background: #a6adb4;
  color: #0a0a0a;
}
.profile-uc-follow-button:active,
.pp-uc-options-menu:active { transform: translateY(1px); }
.profile-uc-follow-button::before { content: none; }

/* ═══ 09 · BOT CARDS — the grid of your characters ═══
   EDIT: picture height is "height: 250px".
   EDIT: on hover the card gets a gray edge and a bright
   frame; the colors are on the ":hover" lines.
   EDIT: the ▸ in front of each bot name is the "content" on
   the ::before line. Change it or delete the line.
   EDIT: the corner brackets on each picture are the long
   ::after rule (the "12px" numbers are their length). Delete
   that rule to remove them. */
.profile-character-card-wrapper,
.profile-character-card-wrapper > div:empty {
  background: none !important;
  box-shadow: none;
}
.profile-character-card-wrapper:hover { box-shadow: none; }
.profile-character-card-stack {
  background: #0a0a0a;
  border: 1px solid #2e2e2e;
  outline: 1px solid transparent;
  outline-offset: 3px;
  transition:
    border-color 0.15s ease,
    outline-color 0.15s ease;
}
.profile-character-card-stack:hover {
  border-color: #a6adb4;
  outline-color: #e3e6e9;
  box-shadow: none;
}
.profile-character-card-avatar-aspect-ratio,
.profile-character-card-avatar-image {
  height: 250px;
  border: 1px solid #2e2e2e;
}
.profile-character-card-avatar-aspect-ratio {
  position: relative;
}
.profile-character-card-avatar-aspect-ratio::after {
  content: "";
  position: absolute;
  top: 8px; right: 8px;
  bottom: 8px; left: 8px;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(#a6adb4, #a6adb4) top left / 12px 2px no-repeat,
    linear-gradient(#a6adb4, #a6adb4) top left / 2px 12px no-repeat,
    linear-gradient(#a6adb4, #a6adb4) top right / 12px 2px no-repeat,
    linear-gradient(#a6adb4, #a6adb4) top right / 2px 12px no-repeat,
    linear-gradient(#a6adb4, #a6adb4) bottom left / 12px 2px no-repeat,
    linear-gradient(#a6adb4, #a6adb4) bottom left / 2px 12px no-repeat,
    linear-gradient(#a6adb4, #a6adb4) bottom right / 12px 2px no-repeat,
    linear-gradient(#a6adb4, #a6adb4) bottom right / 2px 12px no-repeat;
}
/* the bot name strip */
.profile-character-card-name-box {
  color: #a6adb4;
  background: #1b1b1b;
  text-shadow: none;
  border-top: 1px solid #a6adb4;
}
.profile-character-card-name-box::before {
  content: "▸ ";
  color: #e3e6e9;
}
.profile-character-card-stack:hover
.profile-character-card-name-box {
  color: #e3e6e9;
}
.profile-character-card-star-line,
.profile-character-card-star { display: none; }
.profile-character-card-creator-name-link { display: none; }
.profile-character-card-description-box { color: #d6d9db; }
/* the little tag chips (Female, Villain, AnyPOV...) */
.pp-cc-tags-item {
  color: #8b9196;
  background: #141414;
  border: 1px solid #2e2e2e;
}
.pp-cc-tags-item:hover {
  color: #a6adb4;
  border-color: #a6adb4;
}
.profile-character-card-tag-limitless {
  font-size: 0;
  background: transparent;
  border: none;
  width: 0;
}
.profile-character-card-tag-limitless::before {
  content: "🔞";
  font-size: 16px;
}
.profile-character-card-tokens-count { color: #8b9196; }

/* ═══ 10 · HIDDEN CLUTTER — hidden on purpose ═══
   EDIT: delete one of these lines to bring that thing back.
   - first line: the chat-count ribbon on bot cards
   - second line: the total-bots badge
   - third line: the tab bar (Bots / Favorites etc.) */
.profile-character-card-stats-box { display: none; }
.profile-badge-flex-outer { display: none; }
.profile-tabs-wrapper { visibility: hidden; }

/* ═══ 11 · SEARCH BAR ═══ */
.profile-top-bar-search {
  background: #141414;
  border: 1px solid #2e2e2e;
}
.profile-top-bar-search:hover,
.profile-top-bar-search:focus-within {
  box-shadow: none;
  border-color: #a6adb4;
}
#search-input {
  font-family: 'JetBrains Mono', monospace !important;
  color: #d6d9db !important;
  caret-color: #a6adb4;
}
#search-input::placeholder {
  color: #8b9196 !important;
  opacity: 1;
}

/* ═══ 12 · APP MENU — the dropdown from the menu button ═══ */
.profile-top-bar-app-menu-list {
  background: #141414;
  border: 1px solid #a6adb4;
  box-shadow: none;
}
.profile-top-bar-app-menu-list-item {
  color: #d6d9db;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.profile-top-bar-app-menu-list-item:hover { color: #e3e6e9; }

/* ═══ 13 · NOTIFICATIONS — the bell popup ═══
   The bright stripe on the left of a notification means it is
   unread. EDIT: its color is the "border-left: 4px solid
   #e3e6e9" line. */
[class*="notificationsButton"],
[class*="notificationsButton"]:hover {
  background: none !important;
}
[class*="notificationsBadge"] {
  background: #e3e6e9 !important;
  color: #0a0a0a !important;
  border: 1px solid #0a0a0a;
}
.chakra-popover__popper,
.chakra-popover__body {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.chakra-popover__arrow { display: none !important; }
[class*="notificationsPopover"] {
  background: #0a0a0a !important;
  border: 2px solid #a6adb4 !important;
  border-radius: 0 !important;
  box-shadow: 0 0 18px rgba(255,255,255,.12) !important;
  overflow: hidden;
  font-family: 'JetBrains Mono', monospace;
}
[class*="popoverHeader"] {
  background: #141414 !important;
  border-bottom: 1px solid #a6adb4 !important;
}
[class*="popoverTitle"] {
  color: #a6adb4 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
[class*="popoverTitle"]::before {
  content: "◢ ";
  color: #e3e6e9;
}
[class*="headerActions"] button {
  color: #d6d9db !important;
  background: none !important;
}
[class*="headerActions"] button:hover {
  color: #e3e6e9 !important;
  background: none !important;
}
[class*="notificationItem"] {
  background: #0a0a0a !important;
  border: 1px solid #a6adb4 !important;
  border-radius: 0 !important;
  margin: 8px 10px !important;
  padding: 10px 12px !important;
}
[class*="notificationItem"]:hover {
  border-color: #e3e6e9 !important;
}
[class*="contentWrapperUnread"] {
  border-left: 4px solid #e3e6e9 !important;
  background: #1f1f1f !important;
}
[class*="_subject_"] {
  color: #a6adb4 !important;
  font-weight: 600;
}
[class*="_body_"] * { color: #d6d9db !important; }
[class*="notificationsPopover"] [class*="_time_"] {
  color: #8b9196 !important;
}

/* ═══ 14 · FILTER POPUP + DROPDOWNS ═══ */
.profile-filter-button {
  background: #141414;
  border: 1px solid #2e2e2e;
  color: #d6d9db;
}
.profile-filter-button:hover { border-color: #a6adb4; }
.profile-filter-button-vsc-filter {
  color: #d6d9db !important;
  fill: #d6d9db !important;
}
.profile-character-search-input {
  background: #141414;
  border: 1px solid #2e2e2e;
  color: #d6d9db;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.profile-character-search-input::placeholder {
  color: #8b9196;
}
.profile-character-search-input:is(:hover, :focus, :active) {
  border-color: #a6adb4;
}
#root ~ :has(> .profile-filter-modal-modal-overlay)
[data-focus-lock-disabled] > * > * {
  background: #141414;
  border: 1px solid #a6adb4;
  border-radius: 0;
}
.profile-filter-modal-modal-overlay
~ [data-focus-lock-disabled] > * > * > header {
  color: #e3e6e9;
}
.profile-filter-modal-modal-overlay
~ [data-focus-lock-disabled] > * > * > header::before {
  content: "┌─ ";
}
[class*="_collapsedContainer_"] [class*="_tag_"] {
  background: #141414;
  color: #d6d9db;
  border: 1px solid #2e2e2e;
  text-transform: uppercase;
}
[class*="_collapsedContainer_"] [class*="_tag_"]:hover {
  border-color: #e3e6e9;
}
[class*="_collapsedContainer_"] [class*="_tagSelected_"] {
  border-color: #a6adb4;
  background: #ffffff14;
}
#root .react-select__control {
  background: #141414;
  border: 1px solid #2e2e2e;
  color: #d6d9db;
  text-transform: uppercase;
}
#root .react-select__control:is(:hover, :focus, :active),
#root .react-select__control--menu-is-open {
  border-color: #a6adb4;
}
#root .react-select__single-value { color: #8b9196; }
#root .react-select__menu {
  background: #141414;
  border: 1px solid #a6adb4;
  box-shadow: none;
}
#root .react-select__option:hover,
#root .react-select__option--is-focused {
  background: #2e2e2e;
}

/* ═══ 15 · TOOLTIPS — boxes that pop up on hover ═══ */
.css-jdhqy4 > div {
  background: #141414;
  color: #d6d9db;
  border: 1px solid #a6adb4;
  box-shadow: none;
  border-radius: 0;
}
.chakra-tooltip__arrow-wrapper { display: none; }

/* ═══ 16 · BIO WINDOW BUTTONS — the ─  □  ✕ ═══
   ─ and □ are decoration (they do nothing). Clicking ✕ makes
   the window shake and flash red, a little joke. The red is
   kept on purpose — it looks like a real Windows close
   button. EDIT: to remove the joke, delete the 3 lines that
   start with "@keyframes" and ".win:has(". EDIT: to remove
   the buttons, delete the <span class="win-btns"> block in
   the HTML below. */
.win-btns {
  display: flex;
  align-items: center;
  gap: 2px;
  letter-spacing: 0;
}
.win-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  padding: 0 5px;
  color: #8b9196;
  background: transparent;
  border: 1px solid transparent;
  font-family: 'JetBrains Mono', monospace;
  font-size: .85rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition:
    background .12s ease,
    color .12s ease,
    border-color .12s ease;
}
.win-btn:hover {
  color: #a6adb4;
  border-color: #2e2e2e;
  background: rgba(255,255,255,.06);
}
.win-btn:active { transform: translateY(1px); }
.win-x { color: #e3e6e9 !important; }
.win-x:hover {
  background: #e81123 !important;
  border-color: #e81123 !important;
  color: #fff !important;
}
.win-x:active { background: #ff5f6b !important; }
@keyframes win-shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
.win:has(.win-x:active) { animation: win-shake .3s ease; }
.win:has(.win-x:active) .win-bar {
  background: #2a0808 !important;
  border-bottom-color: #e81123 !important;
}

/* ═══ 17 · BIO SECTIONS — the collapsible boxes ═══
   Each box is a <details> in the HTML. Click the header to
   open or close.
   EDIT: "[+]" and "[-]" are the open/close icons (the two
   "content:" lines). Change them to anything you like, for
   example "▸ " and "▾ ". */
details {
  background: #141414;
  border: 1px solid #2e2e2e;
  border-left: 3px solid #a6adb4;
  border-radius: 0;
  width: 100%;
  text-align: left;
  margin: 0 0 0.8rem 0;
  overflow: hidden;
}
details[open] { border-color: #a6adb4; }
details summary {
  background: #1b1b1b;
  color: #a6adb4;
  cursor: pointer;
  list-style: none;
  padding: 0.6rem 0.8rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  user-select: none;
}
details summary::-webkit-details-marker { display: none; }
details summary::before {
  content: "[+] ";
  color: #e3e6e9;
}
details[open] summary::before {
  content: "[-] ";
}
details[open] summary {
  border-bottom: 1px solid #2e2e2e;
}
details summary:hover { color: #e3e6e9; }

/* ═══ 18 · BIO ROWS, IMAGE TILES, LINK BUTTONS ═══
   Hover effects for the rows (the ▣ and ▸ lines), the image
   tiles, and the link buttons. */
.ui-row:hover { background: #1f1f1f !important; }
.ui-btn:hover {
  background: #a6adb4 !important;
  color: #0a0a0a !important;
}
.ui-btn:active { transform: translateY(1px); }
.ui-tile:hover { border-color: #a6adb4 !important; }
.profile-about-me h1 {
  color: #a6adb4;
  font-weight: 600;
  font-size: 1.8em;
}

/* ═══ 19 · BIO HOVER FRAMES — boxes light up on hover ═══
   NOTE: the two "div[style*=...]" rules work by matching the
   exact text written inside the HTML's style blocks below.
   If you rewrite those style blocks, keep the border-left
   lines written exactly like they are.
   EDIT: to turn all of this off, delete this whole section. */
details {
  transition:
    border-color .15s ease,
    border-left-color .15s ease;
}
details:hover {
  border-color: #a6adb4 !important;
  border-left-color: #e3e6e9 !important;
}
div[style*="border-left:3px solid #a6adb4"] {
  transition:
    border-color .15s ease,
    border-left-color .15s ease;
}
div[style*="border-left:3px solid #a6adb4"]:hover {
  border-color: #a6adb4 !important;
  border-left-color: #e3e6e9 !important;
}
div[style*="border-left:6px solid #e3e6e9"] {
  transition:
    border-color .15s ease,
    box-shadow .15s ease;
}
div[style*="border-left:6px solid #e3e6e9"]:hover {
  border-color: #e3e6e9 !important;
  box-shadow: 0 0 14px rgba(255,255,255,.18);
}
.ui-row {
  transition:
    background .15s ease,
    border-color .15s ease;
}
.ui-row:hover {
  border-bottom-color: #a6adb4 !important;
}
.ui-tile {
  transition:
    border-color .15s ease,
    box-shadow .15s ease;
}
.ui-tile:hover {
  box-shadow: 0 0 10px rgba(255,255,255,.1);
}

/* ═══ 20 · SCROLLBARS + KEYBOARD FOCUS ═══ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: #0a0a0a;
}
::-webkit-scrollbar-thumb { background: #2e2e2e; }
::-webkit-scrollbar-thumb:hover { background: #a6adb4; }
:focus-visible {
  outline: 1px solid #e3e6e9;
  outline-offset: 2px;
}

/* ═══ 21 · WINDOW LABEL — printed label on the window edge ═══
   Decoration, like the tiny label on real hardware. */
.win { position: relative; }
.win::after {
  content: "DOOMAI";
  position: absolute;
  right: 4px;
  bottom: 36px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'JetBrains Mono', monospace;
  font-size: .5rem;
  letter-spacing: .3em;
  color: #343434;
  pointer-events: none;
}
.dm-gray-7f3a { -webkit-font-smoothing: antialiased; }
</style>

<!-- ╔═════════════════════════════════════════════╗
     ║  BIO CONTENT STARTS HERE (you edit this part) ║
     ║  Search for the word EDIT to find each spot   ║
     ╚═════════════════════════════════════════════╝ -->

<!-- THE WINDOW: everything below sits inside this one big
     box. It ends at the very last </div> at the bottom of the
     file.
     EDIT: the border is "border: 3px double #a6adb4" — change
     3px for thickness, double for the style (try solid). -->
<div class="win dm-gray-7f3a"
     style="background:#0a0a0a;
            border:3px double #a6adb4;
            color:#d6d9db;
            font-family:'Inter',Arial,sans-serif;
            line-height:1.65">

<!-- TITLE BAR -->
<div class="win-bar"
     style="display:flex;
            align-items:center;
            justify-content:space-between;
            gap:.6rem;
            background:#141414;
            border-bottom:1px solid #a6adb4;
            padding:.5rem .9rem;
            font-family:'JetBrains Mono',monospace;
            font-size:.78rem;
            letter-spacing:.12em">
<!-- EDIT: the window title. Change the words after the ◢ -->
<span class="win-title"
      style="color:#a6adb4;
             font-weight:700">◢ YOUR TITLE HERE</span>
<!-- the three buttons. Delete this whole block (down to the
     matching closing tag) to remove them -->
<span class="win-btns">
<span class="win-btn" title="minimize">─</span>
<span class="win-btn" title="maximize">□</span>
<span class="win-btn win-x" title="close — nice try">✕</span>
</span>
</div>

<!-- BODY: all your panels live in here -->
<div class="win-body" style="padding:1rem">

<!-- INTRO PANEL
     EDIT: change the words inside the <p> ... </p>.
     A line break inside the text is written as <br>
     Bold words go between <strong> and </strong>
     TO REMOVE THIS PANEL: delete from <div style=... down to
     its matching </div>. -->
<div style="background:#141414;
            border:1px solid #2e2e2e;
            border-left:3px solid #a6adb4;
            padding:.9rem 1rem;
            margin:0 0 .8rem 0">
<p style="margin:0">Your intro goes here — a few lines about
you, your page, or your bots. Delete this sentence and write
your own.</p>
</div>

<!-- LOUD BANNER (optional)
     EDIT: change the words inside <strong> ... </strong>.
     The ⚠ is the icon.
     TO REMOVE THIS BANNER: delete from <div style="display:...
     down to its matching </div>. -->
<div style="display:flex;
            align-items:center;
            gap:.8rem;
            background:#1c1c1c;
            border:1px solid #e3e6e9;
            border-left:6px solid #e3e6e9;
            padding:.7rem 1rem;
            margin:0 0 1rem 0">
<span style="color:#e3e6e9;
             font-family:'JetBrains Mono',monospace;
             font-size:1.3rem;
             line-height:1">⚠</span>
<p style="font-size:1.15rem;
          font-weight:700;
          color:#e3e6e9;
          margin:0"><strong>LOUD BANNER — edit these words, or
delete the whole block.</strong></p>
</div>

<!-- CURRENTLY PANEL (listening / playing, anything you like)
     EDIT: the little header word "◢ CURRENTLY" below.
     EDIT: the words inside <strong> ... </strong> on each row.
     TO ADD A ROW: copy one whole row (from <div style=... down
     to its matching </div>), paste it under the last row,
     change the icon and words.
     TO REMOVE A ROW: delete that whole row. -->
<div style="background:#141414;
            border:1px solid #2e2e2e;
            border-left:3px solid #a6adb4;
            padding:.9rem 1rem;
            margin:0 0 1rem 0">
<div style="font-family:'JetBrains Mono',monospace;
            font-size:.7rem;
            letter-spacing:.12em;
            color:#a6adb4;
            margin-bottom:.55rem">◢ CURRENTLY</div>

<!-- ROW: listening. EDIT: the label word and the song name -->
<div style="display:flex;
            gap:.6rem;
            align-items:flex-start;
            margin-bottom:.45rem">
<span style="color:#e3e6e9;
             font-family:'JetBrains Mono',monospace;
             min-width:1.1rem">♪</span>
<div>
<span style="color:#8b9196;
             font-size:.85rem">Listening to:</span>
<strong style="color:#d6d9db">song name goes here</strong>
</div>
</div>

<!-- ROW: playing. EDIT: the label word and the game name -->
<div style="display:flex;
            gap:.6rem;
            align-items:flex-start">
<span style="color:#e3e6e9;
             font-family:'JetBrains Mono',monospace;
             min-width:1.1rem">▶</span>
<div>
<span style="color:#8b9196;
             font-size:.85rem">Playing:</span>
<strong style="color:#d6d9db">game name goes here</strong>
</div>
</div>
</div>

<!-- ═══════════ SECTION: BULLET ROWS ═══════════
     Each section is a <details> box.
     TO ADD A WHOLE NEW SECTION: copy one entire block (from
     <details down to its matching </details>) and paste it
     anywhere between the panels.
     EDIT: the section name is inside <summary> ... </summary>.
     OPEN OR CLOSED when the page loads: the word  open  makes
     it start open. Delete  open  from the first line below to
     make it start closed.
     TO ADD A BULLET: copy one whole row (from
     <div class="ui-row" down to its matching </div>), paste it
     under the last row, then change the words.
     TO REMOVE A BULLET: delete that whole row.
     NOTE: the last row of every section has no line under it.
     That is normal. -->
<details open
         style="background:#141414;
                border:1px solid #2e2e2e;
                border-left:3px solid #a6adb4;
                margin:0 0 .8rem 0">
<summary style="background:#1b1b1b;
                color:#a6adb4;
                font-family:'JetBrains Mono',monospace;
                font-size:.75rem;
                letter-spacing:.12em;
                padding:.6rem .8rem;
                cursor:pointer">SECTION ONE — RENAME ME</summary>
<!-- EDIT: the words inside the inner <div> ... </div>.
     The ▣ is the bullet icon. -->
<div class="ui-row"
     style="display:flex;
            gap:.7rem;
            align-items:flex-start;
            padding:.7rem 1rem;
            border-bottom:1px solid #2e2e2e">
<span style="color:#a6adb4;
             font-family:'JetBrains Mono',monospace">▣</span>
<div>Bullet rows like this are for facts about you or your
page. Replace this text, then copy the whole row to make more
bullets.</div>
</div>
<div class="ui-row"
     style="display:flex;
            gap:.7rem;
            align-items:flex-start;
            padding:.7rem 1rem;
            border-bottom:1px solid #2e2e2e">
<span style="color:#a6adb4;
             font-family:'JetBrains Mono',monospace">▣</span>
<div>Another bullet. Keep as many as you like — or delete the
ones you don't need.</div>
</div>
<!-- a bright bullet: the icon color is #e3e6e9 instead of
     #a6adb4 -->
<div class="ui-row"
     style="display:flex;
            gap:.7rem;
            align-items:flex-start;
            padding:.7rem 1rem">
<span style="color:#e3e6e9;
             font-family:'JetBrains Mono',monospace">▣</span>
<div><strong>A bright bullet with bold text — use rows like
this for the one or two things you really want to stand
out.</strong></div>
</div>
</details>

<!-- ═══════════ SECTION: IMAGE TILES ═══════════
     EDIT: the picture link is the web address after  src="  .
     It must be an image you uploaded to JanitorAI (the link
     starts with https://ella.janitorai.com/media-approved/ ).
     Other sites' links show up blank. The one below is a demo
     picture — replace it with your own.
     EDIT: the caption under the picture. The bold name is
     between <strong> and </strong>.
     TO ADD A TILE: copy one whole tile (from
     <div class="ui-tile" down to its matching </div>), paste
     it under the last tile, change the link and caption.
     TO REMOVE THIS SECTION: delete from <details down to its
     matching </details>. -->
<details open
         style="background:#141414;
                border:1px solid #2e2e2e;
                border-left:3px solid #a6adb4;
                margin:0 0 .8rem 0">
<summary style="background:#1b1b1b;
                color:#a6adb4;
                font-family:'JetBrains Mono',monospace;
                font-size:.75rem;
                letter-spacing:.12em;
                padding:.6rem .8rem;
                cursor:pointer">IMAGE TILES — RENAME ME</summary>
<div style="padding:.8rem 1rem 0 1rem">
<div class="ui-tile"
     style="background:#0a0a0a;
            border:1px solid #2e2e2e;
            margin:0 0 .8rem 0">
<!-- EDIT: replace the src link with your own uploaded image -->
<img src="PUT YOUR IMAGE HERE"
     alt=""
     style="max-width:100%;
            height:auto;
            display:block;
            margin:0 auto">
<div style="background:#1b1b1b;
            border-top:1px solid #a6adb4;
            padding:.55rem .8rem"><strong>PLACE NAME</strong> —
a short description goes here</div>
</div>
</div>
</details>

<!-- ═══════════ SECTION: LINKS ═══════════
     EDIT: each link needs its address in TWO places:
       1) inside href="..."   (where the click goes)
       2) the words after the ▶ (what people read)
     Change both so they match. Keep the quote marks.
     The example links point to example.com — swap them.
     TO ADD A LINK: copy one whole block (from
     <div style="padding... down to its matching </div>), paste
     it at the end of this section, change words and address.
     TO REMOVE A LINK BLOCK: delete that whole block. -->
<details open
         style="background:#141414;
                border:1px solid #2e2e2e;
                border-left:3px solid #a6adb4;
                margin:0 0 .8rem 0">
<summary style="background:#1b1b1b;
                color:#a6adb4;
                font-family:'JetBrains Mono',monospace;
                font-size:.75rem;
                letter-spacing:.12em;
                padding:.6rem .8rem;
                cursor:pointer">LINKS</summary>
<div style="padding:.8rem 1rem;
            border-bottom:1px solid #2e2e2e">
<p style="margin:0 0 .5rem 0">A line of text above the button
is optional — delete this sentence if you don't want it.</p>
<a class="ui-btn"
   href="https://example.com"
   style="display:inline-block;
          color:#a6adb4;
          border:1px solid #a6adb4;
          background:#0a0a0a;
          padding:.4rem .8rem;
          font-family:'JetBrains Mono',monospace;
          font-size:.8rem;
          word-break:break-all;
          text-decoration:none">▶ your link text here</a>
</div>
<div style="padding:.8rem 1rem">
<p style="margin:0 0 .5rem 0">Another label (optional):</p>
<a class="ui-btn"
   href="https://example.com"
   style="display:inline-block;
          color:#a6adb4;
          border:1px solid #a6adb4;
          background:#0a0a0a;
          padding:.4rem .8rem;
          font-family:'JetBrains Mono',monospace;
          font-size:.8rem;
          word-break:break-all;
          text-decoration:none">▶ another link — delete this
block if unneeded</a>
</div>
</details>

<!-- ═══════════ SECTION: PLAIN PARAGRAPHS ═══════════
     EDIT: the words inside each <p> ... </p>.
     New line inside a paragraph = <br>
     TO REMOVE A ROW: delete that whole
     <div class="ui-row"> ... </div>. -->
<details open
         style="background:#141414;
                border:1px solid #2e2e2e;
                border-left:3px solid #a6adb4;
                margin:0 0 .8rem 0">
<summary style="background:#1b1b1b;
                color:#a6adb4;
                font-family:'JetBrains Mono',monospace;
                font-size:.75rem;
                letter-spacing:.12em;
                padding:.6rem .8rem;
                cursor:pointer">SECTION TWO — RENAME ME</summary>
<div class="ui-row" style="padding:.7rem 1rem;
                           border-bottom:1px solid #2e2e2e">
<p style="margin:0">Plain paragraph rows like this are for
anything that doesn't need a bullet — notes, requests,
disclaimers. Replace this text.</p>
</div>
<div class="ui-row" style="padding:.7rem 1rem">
<p style="margin:0">Another paragraph. Use <br> to start a new
line inside the same row. Delete the rows you don't need.</p>
</div>
</details>

<!-- END OF BODY (the panels above all sit inside this) -->
</div>

<!-- STATUS BAR AT THE BOTTOM
     EDIT: the footer words between the ░▒▓█ and █▓▒░ marks.
     The ● on the right is the bright dot. Delete that line to
     remove it. -->
<div class="win-foot"
     style="display:flex;
            align-items:center;
            justify-content:space-between;
            gap:.6rem;
            background:#141414;
            border-top:1px solid #a6adb4;
            padding:.45rem .9rem;
            font-family:'JetBrains Mono',monospace;
            font-size:.65rem;
            letter-spacing:.12em;
            color:#8b9196">
<span>░▒▓█ YOUR FOOTER TEXT HERE █▓▒░</span>
<span style="display:flex;
             align-items:center;
             gap:.6rem">
<span title="DoomAI"
      style="color:#3d3d3d;
             letter-spacing:.2em">DOOMAI.GRAY</span>
<span style="color:#e3e6e9">●</span>
</span>
</div>

<!-- END OF THE WINDOW. Do not delete this last closing tag. -->
</div>