Skip to content
Browse the catalog

F.A.Y.E. OS ☾

ThemeNo adult content

ynnderepilledPublished 16 August 2026

F.A.Y.E. OS ☾

A dark blue, webcore OS-inspired theme!

Palette

9 colours · 6 settings

dark

  • Primary#9896bb
  • Secondary#5d6da5
  • Background#0e1120
  • Text#c8caee
  • Danger#e08aa0
  • Success#8fd6c8
  • Warning#e8d6a0
  • Speech#c8caee
  • Thoughts#b0aed8

Theme controls6 settings

Accent colour
232° · 30% · 63%
Preferred mode
dark
Corner scale
0
Glass surfaces
No
Type scale
1
Character-aware colours
No

Stylesheets

1 stylesheet

Main stylesheet

/* ============================================
   F.A.Y.E. O.S. ☾ — Lumiverse Theme
   by bumyann / yanniesparlour
   + Thinking block rename + RI extension styling
   + Toolbar + Input area (updated hashes)
   ============================================ */

@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/vt323-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/pixelify-sans-400-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/pixelify-sans-700-normal.woff2) format('woff2');
}

:root {
  --faye-bg:         #0e1120;
  --faye-panel:      #1a1f35;
  --faye-panel-dark: #111626;
  --faye-lavender:   #9896bb;
  --faye-periwinkle: #5d6da5;
  --faye-indigo:     #344979;
  --faye-text:       #c8caee;
  --faye-text-dim:   #b0aed8;
  --faye-tb-char:    linear-gradient(to right, #5d6da5 0%, #9896bb 50%, #5d6da5 100%);
  --faye-tb-user:    linear-gradient(to right, #344979 0%, #5d6da5 50%, #344979 100%);
  scrollbar-color: #5d6da5 #0e1120;
}

/* ===================== BACKGROUND ===================== */
html, body {
  background:
    radial-gradient(circle, rgba(93,109,165,0.2) 1px, transparent 1px),
    linear-gradient(180deg, #0e1120 0%, #0a0d1c 100%) !important;
  background-size: 8px 8px, 100% 100% !important;
}
#root, #root > * { background: transparent !important; }
body { font-family: 'Pixelify Sans', monospace !important; }

/* ===================== SCROLLBARS ===================== */
::-webkit-scrollbar { width: 12px; background: #0e1120; }
::-webkit-scrollbar-thumb { background: #5d6da5; border: 2px solid #344979; border-radius: 0 !important; }
::-webkit-scrollbar-track { background: #0e1120; }

/* ===================== THINKING BLOCK RENAME ===================== */
/* Hide original "Thinking" label text, replace with SYSTEM CALIBRATING... */
[data-reasoning-toggle="true"] [class*="label" i] {
  font-size: 0 !important;
  line-height: 0 !important;
}
[data-reasoning-toggle="true"] [class*="label" i]::after {
  content: '> SYSTEM CALIBRATING...' !important;
  font-family: 'VT323', monospace !important;
  font-size: 14px !important;
  line-height: 1 !important;
  color: #b0aed8 !important;
  letter-spacing: 0.5px !important;
}
/* style the whole toggle row */
[data-reasoning-toggle="true"] {
  font-family: 'VT323', monospace !important;
  background: #111626 !important;
  border: 1px solid #344979 !important;
  border-radius: 0 !important;
  padding: 3px 8px !important;
  color: #b0aed8 !important;
}

/* ═══ MINIMAL MESSAGE ═══ */

[data-component="MinimalMessage"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 28px !important;
  max-width: 680px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-family: 'Pixelify Sans', monospace !important;
}
[data-component="MinimalMessage"][data-part="user"] {
  margin-left: auto !important;
  margin-right: 0 !important;
}
[data-component="MinimalMessage"]::before,
[data-component="MinimalMessage"]::after { display: none !important; }

/* AVATAR WRAPPER */
[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i]) {
  position: relative !important;
  width: 100% !important;
  min-height: 130px !important;
  background: #1a1f35 !important;
  border: 2px solid #344979 !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 rgba(20,30,80,0.8) !important;
  padding: 22px 6px 6px 6px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 6px !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
}
[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i]) > div {
  display: contents !important;
}

/* TITLE BAR */
[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i])::before {
  content: " ☾ profile.exe" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 20px !important;
  background: var(--faye-tb-char) !important;
  color: #ffffff !important;
  font-family: 'VT323', monospace !important;
  font-size: 13px !important;
  line-height: 20px !important;
  padding: 0 8px !important;
  border-bottom: 2px solid #344979 !important;
  white-space: nowrap !important;
  z-index: 5 !important;
  text-shadow: 1px 1px 0 rgba(52,73,121,0.4) !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}
[data-component="MinimalMessage"][data-part="user"] [class*="avatar" i]:not([class*="avatarFallback" i])::before {
  content: "☾ user.exe" !important;
  background: var(--faye-tb-user) !important;
}

/* AVATAR IMG */
[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i]) img {
  width: 110px !important;
  height: 110px !important;
  min-width: 110px !important;
  max-width: 110px !important;
  flex-shrink: 0 !important;
  object-fit: cover !important;
  object-position: top center !important;
  border: 2px solid #344979 !important;
  border-radius: 0 !important;
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
}

/* STATUS PANEL */
[data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i])::after {
  content: "> loading char.bmp\A> status: online \25CF\A> mood: sleepy (_\3000_)\002E\A> hp: \2665 \2665 \2665 \2665 \2665\A> ready to chat \2665" !important;
  display: block !important;
  flex: 1 1 auto !important;
  height: 110px !important;
  white-space: pre !important;
  padding: 6px 8px !important;
  font-family: 'VT323', monospace !important;
  font-size: 13px !important;
  line-height: 16px !important;
  color: #c8caee !important;
  background: #111626 !important;
  border: 2px solid #344979 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
[data-component="MinimalMessage"][data-part="user"] [class*="avatar" i]:not([class*="avatarFallback" i])::after {
  content: "> loading user.bmp\A> status: active \25CF\A> mood: lazy (\B4\FFE3\0060)\A> hp: \2661 \2661 \2661 \2661 \2661\A> ready to chat \2661" !important;
  background: #111626 !important;
}

/* BUBBLE */
[data-component="MinimalMessage"] [class*="bubble" i] {
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* HEADER */
[data-component="MinimalMessage"] [class*="header" i] {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}
[data-component="MinimalMessage"] [class*="header" i]::before {
  content: '' !important;
  display: block !important;
  height: 5px !important;
  background: var(--faye-tb-char) !important;
  border-left: 2px solid #344979 !important;
  border-right: 2px solid #344979 !important;
  border-top: none !important;
  border-bottom: none !important;
}
[data-component="MinimalMessage"][data-part="user"] [class*="header" i]::before {
  background: var(--faye-tb-user) !important;
}

/* NAME BAR */
[data-theme-mode] [data-component="MinimalMessage"] [class*="name" i],
[data-theme-mode=dark] [data-component="MinimalMessage"] [class*="name" i] {
  display: block !important;
  font-family: 'VT323', monospace !important;
  font-size: 15px !important;
  letter-spacing: 0.5px !important;
  background: #9896bb !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  border-left: 2px solid #344979 !important;
  border-right: 2px solid #344979 !important;
  border-top: 2px solid #9896bb !important;
  border-bottom: 2px solid #9896bb !important;
  border-radius: 0 !important;
  padding: 2px 8px !important;
  text-shadow: 1px 1px 0 rgba(52,73,121,0.3) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  line-height: 1.4 !important;
}
[data-theme-mode] [data-component="MinimalMessage"][data-part="user"] [class*="name" i],
[data-theme-mode=dark] [data-component="MinimalMessage"][data-part="user"] [class*="name" i] {
  background: #5d6da5 !important;
  border-top-color: #5d6da5 !important;
  border-bottom-color: #5d6da5 !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* HIDE META PILL */
[data-component="MinimalMessage"] [class*="metaPill" i] { display: none !important; }

/* MESSAGE CONTENT */
html [data-component="MinimalMessage"] [data-component="MessageContent"],
[data-theme-mode] [data-component="MinimalMessage"] [data-component="MessageContent"],
[data-theme-mode=dark] [data-component="MinimalMessage"] [data-component="MessageContent"] {
  padding: 10px 14px 12px !important;
  border: 2px solid #344979 !important;
  border-top: none !important;
  border-radius: 0 !important;
  background-color: #1a1f35 !important;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent, transparent 22px,
    rgba(152,150,187,0.15) 22px, rgba(152,150,187,0.15) 23px
  ) !important;
  background-position: 0 30px !important;
  font-family: 'Pixelify Sans', monospace !important;
  font-size: 14px !important;
  line-height: 22px !important;
  color: #c8caee !important;
  box-shadow: 3px 3px 0 rgba(20,30,80,0.6) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html [data-component="MinimalMessage"][data-part="user"] [data-component="MessageContent"],
[data-theme-mode] [data-component="MinimalMessage"][data-part="user"] [data-component="MessageContent"] {
  background-color: #111626 !important;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent, transparent 22px,
    rgba(93,109,165,0.12) 22px, rgba(93,109,165,0.12) 23px
  ) !important;
}
[data-component="MinimalMessage"] [data-component="MessageContent"]::before,
[data-component="MinimalMessage"] [data-component="MessageContent"]::after { display: none !important; }

/* PROSE STYLES */
[data-component="MinimalMessage"] [data-component="MessageContent"] em,
[data-component="MinimalMessage"] [data-component="MessageContent"] [class*="proseItalic" i] {
  color: #b0aed8 !important; font-style: italic;
}
[data-component="MinimalMessage"] [data-component="MessageContent"] strong,
[data-component="MinimalMessage"] [data-component="MessageContent"] [class*="proseBold" i] {
  color: #c8caee !important;
  text-shadow: 1px 1px 0 rgba(198,198,232,0.5) !important;
}
/* code inline — default */
[data-component="MinimalMessage"] [data-component="MessageContent"] blockquote {
  border-left: 4px solid #5d6da5 !important;
  background: #111626 !important;
  padding: 6px 12px !important;
  margin: 6px 0 !important;
  font-style: italic;
  color: #b0aed8 !important;
  border-radius: 0 !important;
}

/* HEADINGS */
[data-component="MinimalMessage"] [data-component="MessageContent"] h1,
[data-component="MinimalMessage"] [data-component="MessageContent"] h2,
[data-component="MinimalMessage"] [data-component="MessageContent"] h3,
[data-component="MinimalMessage"] [data-component="MessageContent"] h4,
[data-component="MinimalMessage"] [data-component="MessageContent"] h5,
[data-component="MinimalMessage"] [data-component="MessageContent"] h6 {
  font-family: 'VT323', monospace !important;
  letter-spacing: 1.5px !important;
  border-radius: 0 !important;
}
[data-component="MinimalMessage"] [data-component="MessageContent"] h1 {
  display: block !important;
  border: 2px solid #344979 !important;
  box-shadow: 3px 3px 0 #5d6da5 !important;
  padding: 26px 10px 6px !important;
  background: #111626 !important;
  font-size: 22px !important;
  text-transform: uppercase !important;
  color: #c8caee !important;
  position: relative !important;
  margin: 8px 0 !important;
}
[data-component="MinimalMessage"] [data-component="MessageContent"] h1::before {
  content: '☾' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 22px !important;
  line-height: 20px !important;
  padding: 1px 8px !important;
  font-size: 14px !important;
  background: var(--faye-tb-char) !important;
  color: #ffffff !important;
  border-bottom: 2px solid #344979 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  font-family: 'VT323', monospace !important;
  box-sizing: border-box !important;
}
[data-component="MinimalMessage"] [data-component="MessageContent"] h1::after {
  content: '_ [ ] X' !important;
  position: absolute !important;
  top: 0 !important; right: 8px !important;
  height: 22px !important;
  line-height: 20px !important;
  font-size: 11px !important;
  color: #ffffff !important;
  font-family: 'VT323', monospace !important;
  letter-spacing: 1px !important;
}
[data-component="MinimalMessage"] [data-component="MessageContent"] h2 {
  font-size: 20px !important;
  text-transform: uppercase !important;
  color: #c8caee !important;
  border-bottom: 2px dashed #b0aed8 !important;
  padding: 0 0 3px !important;
  background: transparent !important;
  margin: 8px 0 4px !important;
}
[data-component="MinimalMessage"] [data-component="MessageContent"] h2::before { content: '>> ' !important; }
[data-component="MinimalMessage"] [data-component="MessageContent"] h3 {
  font-size: 18px !important;
  color: #b0aed8 !important;
  border-left: 3px dotted #9896bb !important;
  padding: 0 0 0 10px !important;
  background: transparent !important;
  margin: 6px 0 !important;
}
[data-component="MinimalMessage"] [data-component="MessageContent"] h3::before { content: '>_ ' !important; }
[data-component="MinimalMessage"] [data-component="MessageContent"] h4 {
  display: inline-block !important;
  font-size: 15px !important;
  color: #c8caee !important;
  background: #111626 !important;
  border: 1px solid #5d6da5 !important;
  padding: 1px 6px !important;
  letter-spacing: 1px !important;
  margin: 4px 0 !important;
}
[data-component="MinimalMessage"] [data-component="MessageContent"] h5,
[data-component="MinimalMessage"] [data-component="MessageContent"] h6 {
  font-size: 14px !important; color: #b0aed8 !important;
}

/* ACTIONS */
[data-component="MinimalMessage"] [class*="actionsWrap" i] { opacity: 0.4; transition: opacity 0.2s; }
[data-component="MinimalMessage"]:hover [class*="actionsWrap" i] { opacity: 1; }

/* ═══ BUBBLE MESSAGE ═══ */
[data-component="BubbleMessage"] { font-family: 'Pixelify Sans', monospace !important; }

[data-theme-mode] [data-component="BubbleMessage"] [class*="name" i],
[data-theme-mode=dark] [data-component="BubbleMessage"] [class*="name" i] {
  font-family: 'VT323', monospace !important;
  font-size: 16px !important;
  background: transparent !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #9896bb !important;
  color: #9896bb !important;
  letter-spacing: 0.5px !important;
}
[data-theme-mode] [data-component="BubbleMessage"][data-part="user"] [class*="name" i] {
  -webkit-text-fill-color: #5d6da5 !important;
  color: #5d6da5 !important;
}
html [data-component="BubbleMessage"] [data-component="MessageContent"],
[data-theme-mode] [data-component="BubbleMessage"] [data-component="MessageContent"] {
  background-color: #1a1f35 !important;
  background-image: repeating-linear-gradient(
    to bottom, transparent, transparent 22px,
    rgba(152,150,187,0.1) 22px, rgba(152,150,187,0.1) 23px
  ) !important;
  background-position: 0 8px !important;
  border: 2px solid #344979 !important;
  border-radius: 0 !important;
  font-family: 'Pixelify Sans', monospace !important;
  font-size: 14px !important;
  color: #c8caee !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme-mode] [data-component="BubbleMessage"][data-part="user"] [data-component="MessageContent"] {
  background-color: #111626 !important;
  border-color: #5d6da5 !important;
}
[data-component="BubbleMessage"] [data-component="MessageContent"]::before,
[data-component="BubbleMessage"] [data-component="MessageContent"]::after { display: none !important; }

/* ════════════════════════════════════════════════════════════
   RESPONSE INSTRUCTIONS EXTENSION — F.A.Y.E. OS skin
   github.com/bumyann/Lumiverse-Response-Instructions
   ════════════════════════════════════════════════════════════ */

/* RI CSS variable overrides — scoped so they don't bleed */
#ri-strip,
#ri-float-btn {
  --lumiverse-bg:        #0e1120;
  --lumiverse-surface:   #1a1f35;
  --lumiverse-fill:      #1a1f35;
  --lumiverse-fill-hover:#1e2440;
  --lumiverse-border:    rgba(93,109,165,0.6);
  --lumiverse-text:      #c8caee;
  --lumiverse-text-dim:  #b0aed8;
  --lumiverse-accent:    #9896bb;
}

/* STRIP CONTAINER */
#ri-strip {
  background: #111626 !important;
  border: 2px solid #344979 !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 rgba(20,30,80,0.8) !important;
  font-family: 'Pixelify Sans', monospace !important;
}

/* TAB ROW — Win9x title bar */
#ri-strip-tabs {
  background: linear-gradient(to right, #5d6da5 0%, #9896bb 50%, #5d6da5 100%) !important;
  border-bottom: 2px solid #344979 !important;
  border-radius: 0 !important;
  padding: 0 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
}

.ri-stab {
  font-family: 'VT323', monospace !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  color: rgba(255,255,255,0.75) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 2px 8px !important;
  cursor: pointer !important;
  text-shadow: 1px 1px 0 rgba(52,73,121,0.4) !important;
  transition: color 0.1s !important;
}
.ri-stab:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,0.1) !important;
}
.ri-stab.active {
  color: #ffffff !important;
  background: rgba(255,255,255,0.15) !important;
  border-bottom: 2px solid #ffffff !important;
}

/* close button */
#ri-strip-close {
  font-family: 'VT323', monospace !important;
  font-size: 13px !important;
  color: rgba(255,255,255,0.8) !important;
  background: transparent !important;
  border: none !important;
  margin-left: auto !important;
  cursor: pointer !important;
  padding: 2px 6px !important;
}
#ri-strip-close:hover { color: #ffffff !important; background: rgba(255,255,255,0.15) !important; }

/* on-dot */
.ri-on-dot {
  width: 6px !important; height: 6px !important;
  background: #344979 !important;
  border-radius: 50% !important;
  display: inline-block !important;
}
.ri-on-dot.on { background: #8fd6c8 !important; }

/* PANELS */
.ri-spanel {
  background: #111626 !important;
  padding: 8px 10px !important;
}

/* TOOLBAR */
.ri-toolbar {
  background: #1a1f35 !important;
  border: 2px solid #344979 !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  padding: 3px 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* ON/OFF TOGGLE */
#ri-toggle,
.ri-toggle {
  font-family: 'VT323', monospace !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  background: #1a1f35 !important;
  color: #b0aed8 !important;
  border: 2px solid #344979 !important;
  border-radius: 0 !important;
  padding: 1px 8px !important;
  cursor: pointer !important;
  box-shadow: 1px 1px 0 rgba(255,255,255,0.05), 2px 2px 0 #344979 !important;
  transition: background 0.1s !important;
}
#ri-toggle.on,
.ri-toggle.on {
  background: #344979 !important;
  color: #ffffff !important;
  box-shadow: inset 1px 1px 0 #5d6da5 !important;
}

/* ICON BUTTONS (presets, clear, nav) */
.ri-icon-btn {
  font-family: 'Pixelify Sans', monospace !important;
  background: #1a1f35 !important;
  color: #b0aed8 !important;
  border: 2px solid #344979 !important;
  border-radius: 0 !important;
  padding: 1px 6px !important;
  cursor: pointer !important;
  box-shadow: 1px 1px 0 rgba(255,255,255,0.05), 2px 2px 0 #344979 !important;
  transition: background 0.15s !important;
}
.ri-icon-btn:hover {
  background: #9896bb !important;
  color: #ffffff !important;
  box-shadow: -1px -1px 0 rgba(255,255,255,0.08), -2px -2px 0 #344979 !important;
}
.ri-icon-btn:active { box-shadow: inset 1px 1px 0 #344979 !important; transform: translate(1px,1px) !important; }
.ri-icon-btn.danger:hover { background: #e08aa0 !important; color: #ffffff !important; }

/* TEXTAREAS */
.ri-textarea,
#ri-textarea,
#wfm-instruction,
#wfm-draft {
  font-family: 'Pixelify Sans', monospace !important;
  font-size: 13px !important;
  background: #1a1f35 !important;
  color: #c8caee !important;
  border: 2px solid #344979 !important;
  border-radius: 0 !important;
  padding: 8px 10px !important;
  resize: vertical !important;
  line-height: 1.6 !important;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent, transparent 24px,
    rgba(152,150,187,0.1) 24px, rgba(152,150,187,0.1) 25px
  ) !important;
  background-position: 0 8px !important;
}
.ri-textarea:focus,
#ri-textarea:focus,
#wfm-instruction:focus,
#wfm-draft:focus {
  outline: 2px solid #5d6da5 !important;
  border-color: #5d6da5 !important;
}
.ri-textarea::placeholder,
#ri-textarea::placeholder { color: #5d6da5 !important; font-family: 'VT323', monospace !important; }

/* WFM NAV */
#wfm-nav { display: none; }
#wfm-nav.visible {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 0 !important;
}
#wfm-prev, #wfm-next {
  font-family: 'VT323', monospace !important;
  font-size: 16px !important;
  background: #1a1f35 !important;
  color: #9896bb !important;
  border: 2px solid #344979 !important;
  border-radius: 0 !important;
  padding: 0 6px !important;
  cursor: pointer !important;
}
#wfm-prev:hover, #wfm-next:hover { background: #344979 !important; color: #ffffff !important; }
#wfm-counter {
  font-family: 'VT323', monospace !important;
  font-size: 13px !important;
  color: #b0aed8 !important;
}

/* WFM ACTION BUTTONS */
.wfm-btn {
  font-family: 'Pixelify Sans', monospace !important;
  background: #1a1f35 !important;
  color: #c8caee !important;
  border: 2px solid #344979 !important;
  border-radius: 0 !important;
  padding: 3px 10px !important;
  cursor: pointer !important;
  box-shadow: 1px 1px 0 rgba(255,255,255,0.05), 2px 2px 0 #344979 !important;
}
.wfm-btn:hover { background: #9896bb !important; color: #ffffff !important; }
.wfm-btn:active { box-shadow: inset 1px 1px 0 #344979 !important; transform: translate(1px,1px) !important; }
.wfm-btn.primary {
  background: #5d6da5 !important;
  color: #ffffff !important;
  border-color: #344979 !important;
}
.wfm-btn.primary:hover { background: #9896bb !important; }

/* WFM loading */
#wfm-loading { display: none; color: #b0aed8 !important; font-family: 'VT323', monospace !important; font-size: 13px !important; }
#wfm-loading.visible { display: block !important; }

/* FLOAT BUTTON */
#ri-float-btn {
  background: #1a1f35 !important;
  border: 2px solid #344979 !important;
  border-radius: 0 !important;
  box-shadow: 2px 2px 0 rgba(20,30,80,0.8) !important;
  color: #9896bb !important;
  font-family: 'VT323', monospace !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}
#ri-float-btn:hover,
#ri-float-btn.active {
  background: #344979 !important;
  color: #ffffff !important;
  box-shadow: -2px -2px 0 rgba(20,30,80,0.8) !important;
}
#ri-float-btn .ri-btn-label { color: inherit !important; font-family: 'VT323', monospace !important; }
#ri-float-btn .ri-btn-dot { background: #344979 !important; }
#ri-float-btn .ri-btn-dot.on { background: #8fd6c8 !important; }

/* PRESET MODAL */
.ri-preset-list {
  background: #1a1f35 !important;
  border: 2px solid #344979 !important;
  border-radius: 0 !important;
}
.ri-preset-row {
  background: #111626 !important;
  border-bottom: 1px solid rgba(93,109,165,0.3) !important;
  padding: 6px 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.ri-preset-row:hover { background: #1a1f35 !important; }
.ri-preset-name {
  font-family: 'Pixelify Sans', monospace !important;
  color: #c8caee !important;
  font-size: 13px !important;
}
.ri-preset-del {
  font-family: 'VT323', monospace !important;
  color: #b0aed8 !important;
  background: transparent !important;
  border: 1px solid #344979 !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  padding: 0 4px !important;
}
.ri-preset-del:hover { color: #e08aa0 !important; border-color: #e08aa0 !important; }
.ri-preset-empty {
  font-family: 'VT323', monospace !important;
  color: #5d6da5 !important;
  font-size: 13px !important;
  padding: 8px !important;
}
.ri-preset-save-row {
  background: #111626 !important;
  border-top: 2px solid #344979 !important;
  padding: 6px 10px !important;
  display: flex !important;
  gap: 6px !important;
}
.ri-preset-input {
  font-family: 'Pixelify Sans', monospace !important;
  background: #1a1f35 !important;
  color: #c8caee !important;
  border: 2px solid #344979 !important;
  border-radius: 0 !important;
  padding: 3px 8px !important;
  flex: 1 !important;
}
.ri-preset-input:focus { outline: 2px solid #5d6da5 !important; }

/* ═══ MOBILE ═══ */
@media (max-width: 720px) {
  [data-component="MinimalMessage"] {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  [data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i]) {
    min-height: 100px !important; padding: 20px 4px 4px !important;
  }
  [data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i]) img {
    width: 80px !important; height: 80px !important;
    min-width: 80px !important; max-width: 80px !important;
  }
  [data-component="MinimalMessage"] [class*="avatar" i]:not([class*="avatarFallback" i])::after {
    height: 80px !important; font-size: 11px !important; line-height: 13px !important;
  }
}


/* =====================================================
   CHAT TOOLBAR
   ._chatToolbar_zj87l_156  ._toolbarBtn_zj87l_361
   ===================================================== */

._chatToolbar_zj87l_156 {
  background: linear-gradient(to right, #5d6da5 0%, #9896bb 50%, #5d6da5 100%) !important;
  border-bottom: 2px solid #344979 !important;
  border-radius: 0 !important;
  padding: 2px 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  box-shadow: 0 2px 0 rgba(20,30,80,0.5) !important;
}


._toolbarBtn_zj87l_361 {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 0 !important;
  color: rgba(255,255,255,0.85) !important;
  padding: 2px 6px !important;
  cursor: pointer !important;
  font-family: 'VT323', monospace !important;
  transition: background 0.1s !important;
}
._toolbarBtn_zj87l_361:hover {
  background: rgba(255,255,255,0.15) !important;
  color: #ffffff !important;
}
._toolbarBtn_zj87l_361 svg { stroke: currentColor !important; }

/* =====================================================
   INPUT AREA
   _container_181w6_2  →  _sendBtn_181w6_870
   ===================================================== */

[data-component="InputArea"]._container_181w6_2,
._container_181w6_2 {
  background: #0e1120 !important;
  border-top: 3px solid #344979 !important;
  border-radius: 0 !important;
}

._actionBar_181w6_97 {
  background: #1a1f35 !important;
  border-bottom: 2px solid #344979 !important;
  border-radius: 0 !important;
  padding: 3px 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
}

._actionBtn_181w6_112 {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: #b0aed8 !important;
  padding: 3px 6px !important;
  cursor: pointer !important;
  transition: background 0.1s, color 0.1s !important;
}
._actionBtn_181w6_112:hover {
  background: #344979 !important;
  color: #ffffff !important;
}
._actionBtn_181w6_112 svg { stroke: currentColor !important; }

._actionDivider_181w6_104 {
  width: 1px !important;
  height: 14px !important;
  background: rgba(93,109,165,0.4) !important;
  margin: 0 2px !important;
  display: inline-block !important;
}

._inputRow_181w6_583 {
  background: #1a1f35 !important;
  border: 2px solid #344979 !important;
  border-radius: 0 !important;
  margin: 6px 8px !important;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.04), 2px 2px 0 rgba(20,30,80,0.5) !important;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent, transparent 22px,
    rgba(152,150,187,0.08) 22px, rgba(152,150,187,0.08) 23px
  ) !important;
  background-position: 0 8px !important;
  display: flex !important;
  align-items: flex-end !important;
}

._inputWrapper_181w6_589 {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  position: relative !important;
}

._textareaMirror_181w6_720 {
  max-height: 140px !important;
  overflow: hidden !important;
}

._textarea_181w6_715 {
  background: transparent !important;
  color: #c8caee !important;
  font-family: 'Pixelify Sans', monospace !important;
  font-size: 14px !important;
  border: none !important;
  outline: none !important;
  padding: 10px 16px !important;
  resize: none !important;
  line-height: 1.6 !important;
  max-height: 140px !important;
  overflow-y: auto !important;
  scrollbar-color: #5d6da5 #1a1f35 !important;
  scrollbar-width: thin !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
._textarea_181w6_715::placeholder {
  color: #5d6da5 !important;
  font-family: 'VT323', monospace !important;
  font-size: 15px !important;
}

._attachBtn_181w6_530 {
  background: transparent !important;
  border: none !important;
  color: #5d6da5 !important;
  cursor: pointer !important;
  padding: 4px 6px !important;
  align-self: flex-end !important;
  transition: color 0.1s !important;
}
._attachBtn_181w6_530:hover { color: #9896bb !important; }
._attachBtn_181w6_530 svg { stroke: currentColor !important; }

._sendBtnShell_181w6_870 {
  align-self: flex-end !important;
  flex-shrink: 0 !important;
}

._sendBtn_181w6_870 {
  background: #344979 !important;
  border: 2px solid #5d6da5 !important;
  border-radius: 0 !important;
  color: #c8caee !important;
  padding: 4px 8px !important;
  cursor: pointer !important;
  box-shadow: 1px 1px 0 rgba(255,255,255,0.05), 2px 2px 0 #344979 !important;
  transition: background 0.1s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
._sendBtn_181w6_870:hover {
  background: #5d6da5 !important;
  color: #ffffff !important;
}
._sendBtn_181w6_870:active {
  box-shadow: inset 1px 1px 0 #344979 !important;
  transform: translate(1px,1px) !important;
}
._sendBtnIcon_181w6_925 svg { stroke: currentColor !important; }

/* attach + mic — stack vertically in their own column via grid */
._inputRow_181w6_583 {
  display: grid !important;
  grid-template-columns: 28px 1fr auto !important;
  align-items: end !important;
}

._attachBtn_181w6_530 {
  grid-column: 1 !important;
  width: 28px !important;
  padding: 4px !important;
  align-self: auto !important;
  justify-self: center !important;
  flex-shrink: unset !important;
}

._inputWrapper_181w6_589 {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
}

._sendBtnShell_181w6_870 {
  grid-column: 3 !important;
  grid-row: 1 / 3 !important;
  align-self: end !important;
}

/* =====================================================
   LANDING PAGE / CHARACTER LIBRARY
   homepage_library extension — li94x + 1va4i hashes
   ===================================================== */

/* OVERALL PAGE */
[data-component="LandingPage"],
._container_1va4i_7 {
  background: #0e1120 !important;
  font-family: 'Pixelify Sans', monospace !important;
}

/* HEADER — "Character Library" title + search */
._header_1va4i_121 {
  background: #0e1120 !important;
  border-bottom: 3px solid #344979 !important;
  padding: 10px 16px !important;
  font-family: 'Pixelify Sans', monospace !important;
}

[data-component="LandingPageHeader"] h1,
[data-component="LandingPageHeader"] h2,
[data-component="LandingPageHeader"] [class*="_title_"],
._header_1va4i_121 h1,
._header_1va4i_121 h2 {
  font-family: 'VT323', monospace !important;
  color: #c8caee !important;
  letter-spacing: 1px !important;
  text-shadow: 1px 1px 0 rgba(52,73,121,0.4) !important;
}

[data-component="LandingPageHeader"] p,
[data-component="LandingPageHeader"] [class*="_subtitle_"],
[data-component="LandingPageHeader"] [class*="_description_"] {
  color: #b0aed8 !important;
  font-family: 'Pixelify Sans', monospace !important;
  font-size: 13px !important;
}

/* TABS ROW (All / This Chat / Favorites / Shared) */
._landingToolbar_1va4i_130 {
  background: #111626 !important;
  border-bottom: 2px solid #344979 !important;
  font-family: 'Pixelify Sans', monospace !important;
  padding: 0 8px !important;
}

._landingToolbar_1va4i_130 button,
._landingToolbar_1va4i_130 [class*="_tab_"],
._landingToolbar_1va4i_130 [class*="_btn_"] {
  font-family: 'Pixelify Sans', monospace !important;
  color: #b0aed8 !important;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 6px 10px !important;
  transition: color 0.1s, border-color 0.1s !important;
}

._landingToolbar_1va4i_130 button:hover,
._landingToolbar_1va4i_130 [class*="_tab_"]:hover {
  color: #c8caee !important;
  background: rgba(152,150,187,0.08) !important;
  border-bottom-color: #5d6da5 !important;
  box-shadow: none !important;
}

._landingToolbar_1va4i_130 [class*="_active_"],
._landingToolbar_1va4i_130 [aria-selected="true"],
._landingToolbar_1va4i_130 [class*="_selected_"] {
  color: #c8caee !important;
  border-bottom: 2px solid #9896bb !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* FILTER / SORT ROW (tags dropdown, sort, order) */
._library_li94x_16,
section._library_li94x_16,
[class*="_filterRow_"],
[class*="_controls_"] {
  background: #0e1120 !important;
}

._library_li94x_16 select,
._library_li94x_16 button:not([class*="_card_"]),
[class*="_filterRow_"] select,
[class*="_filterRow_"] button {
  font-family: 'Pixelify Sans', monospace !important;
  background: #1a1f35 !important;
  color: #c8caee !important;
  border: 2px solid #344979 !important;
  border-radius: 0 !important;
  box-shadow: 1px 1px 0 rgba(255,255,255,0.04), 2px 2px 0 #344979 !important;
  padding: 3px 8px !important;
}

/* SEARCH BAR */
._header_1va4i_121 input[type="search"],
._header_1va4i_121 input[type="text"],
[data-component="LandingPageHeader"] input {
  font-family: 'Pixelify Sans', monospace !important;
  background: #1a1f35 !important;
  color: #c8caee !important;
  border: 2px solid #344979 !important;
  border-radius: 0 !important;
  padding: 4px 10px !important;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.04) !important;
}

._header_1va4i_121 input::placeholder,
[data-component="LandingPageHeader"] input::placeholder {
  color: #5d6da5 !important;
  font-family: 'VT323', monospace !important;
  font-size: 15px !important;
}

/* GRID */
._grid_li94x_155 {
  background: #0e1120 !important;
  padding: 10px !important;
}

/* CHARACTER CARDS */
._card_li94x_167,
._cardSelected_li94x_168 {
  background: #1a1f35 !important;
  border: 2px solid #344979 !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 rgba(20,30,80,0.8) !important;
  font-family: 'Pixelify Sans', monospace !important;
  transition: border-color 0.1s, box-shadow 0.1s !important;
  overflow: hidden !important;
}

._card_li94x_167:hover {
  border-color: #5d6da5 !important;
  box-shadow: 3px 3px 0 rgba(93,109,165,0.6) !important;
}

._cardSelected_li94x_168 {
  border-color: #9896bb !important;
  box-shadow:
    3px 3px 0 rgba(93,109,165,0.8),
    inset 0 0 0 1px rgba(152,150,187,0.2) !important;
}

/* IMAGE FRAME */
._imageFrame_li94x_179 {
  border-radius: 0 !important;
  border-bottom: 2px solid #344979 !important;
}

/* CARD FOOTER (name + creator) */
._cardFooter_li94x_186 {
  background: #111626 !important;
  border-top: 2px solid #344979 !important;
  padding: 4px 8px !important;
  font-family: 'Pixelify Sans', monospace !important;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent, transparent 22px,
    rgba(152,150,187,0.06) 22px, rgba(152,150,187,0.06) 23px
  ) !important;
}

._cardFooter_li94x_186 [class*="_name_"],
._cardFooter_li94x_186 [class*="_title_"] {
  font-family: 'VT323', monospace !important;
  color: #c8caee !important;
  font-size: 15px !important;
  letter-spacing: 0.5px !important;
}

._cardFooter_li94x_186 [class*="_creator_"],
._cardFooter_li94x_186 [class*="_author_"],
._cardFooter_li94x_186 [class*="_sub_"],
._cardFooter_li94x_186 span:last-child {
  color: #5d6da5 !important;
  font-size: 12px !important;
}

/* BODY / MAIN SCROLL AREA */
._body_li94x_136 {
  background: #0e1120 !important;
}

/* SETTINGS BUTTON */
._header_1va4i_121 [class*="_settings_"],
._header_1va4i_121 button[title*="Settings"],
._header_1va4i_121 button[aria-label*="Settings"] {
  font-family: 'VT323', monospace !important;
  color: #b0aed8 !important;
  background: #1a1f35 !important;
  border: 2px solid #344979 !important;
  border-radius: 0 !important;
  box-shadow: 1px 1px 0 rgba(255,255,255,0.04), 2px 2px 0 #344979 !important;
  padding: 3px 8px !important;
}

._header_1va4i_121 button[title*="Settings"]:hover,
._header_1va4i_121 button[aria-label*="Settings"]:hover {
  background: #344979 !important;
  color: #ffffff !important;
}

/* CLOSE BUTTON ON HEADER */
._header_1va4i_121 button[title*="Close"],
._header_1va4i_121 button[aria-label*="Close"] {
  color: #b0aed8 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
._header_1va4i_121 button[title*="Close"]:hover {
  color: #e08aa0 !important;
}

/* =====================================================
   CHAT LIST BUTTONS
   _listBtn_1va4i_985
   ===================================================== */

._listBtn_1va4i_985 {
  background: #1a1f35 !important;
  border: 2px solid #344979 !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 rgba(20,30,80,0.8) !important;
  font-family: 'Pixelify Sans', monospace !important;
  color: #c8caee !important;
  margin-bottom: 6px !important;
  transition: border-color 0.1s, box-shadow 0.1s !important;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent, transparent 22px,
    rgba(152,150,187,0.05) 22px, rgba(152,150,187,0.05) 23px
  ) !important;
}

._listBtn_1va4i_985:hover {
  border-color: #5d6da5 !important;
  box-shadow: 3px 3px 0 rgba(93,109,165,0.6) !important;
  background-color: #1e2440 !important;
}

/* active/selected state (current chat — the teal highlight) */
._listBtn_1va4i_985[aria-pressed="true"],
._listBtn_1va4i_985[aria-selected="true"],
._listBtn_1va4i_985[class*="_active_"],
._listBtn_1va4i_985[class*="_selected_"] {
  background-color: #1e2440 !important;
  border-color: #9896bb !important;
  box-shadow: 3px 3px 0 rgba(152,150,187,0.4) !important;
}

/* character name */
._listBtn_1va4i_985 [class*="_name_"],
._listBtn_1va4i_985 [class*="_title_"],
._listBtn_1va4i_985 strong {
  font-family: 'VT323', monospace !important;
  color: #c8caee !important;
  font-size: 16px !important;
  letter-spacing: 0.5px !important;
}

/* timestamp / date lines */
._listBtn_1va4i_985 [class*="_time_"],
._listBtn_1va4i_985 [class*="_date_"],
._listBtn_1va4i_985 [class*="_meta_"],
._listBtn_1va4i_985 [class*="_subtitle_"],
._listBtn_1va4i_985 span:not(strong) {
  font-family: 'Pixelify Sans', monospace !important;
  color: #5d6da5 !important;
  font-size: 12px !important;
}

/* "Active" badge */
._listBtn_1va4i_985 [class*="_badge_"],
._listBtn_1va4i_985 [class*="_status_"],
._listBtn_1va4i_985 [class*="_tag_"] {
  font-family: 'VT323', monospace !important;
  background: #344979 !important;
  color: #c8caee !important;
  border: 1px solid #5d6da5 !important;
  border-radius: 0 !important;
  padding: 1px 6px !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
}

/* avatar image */
._listBtn_1va4i_985 img {
  border: 2px solid #344979 !important;
  border-radius: 0 !important;
}

3 attached files: assets/001-pixelify-sans-400-normal.woff2, assets/002-vt323-400-normal.woff2, assets/003-pixelify-sans-700-normal.woff2