{
  "name": "Chaotic Neutral",
  "css": "/* ═══════════════════════════════════════\n   Obsidian Glass\n   ═══════════════════════════════════════ */\n\n:root {\n  /* ===== Core UI (Dark, sleek, high contrast) ===== */\n  --background: #09090b;              /* Deep matte obsidian */\n  --foreground: #e4e4e7;              /* Crisp off-white text */\n\n  --card: rgba(24, 24, 27, 0.9);      \n  --card-foreground: #e4e4e7;         \n\n  --popover: rgba(24, 24, 27, 0.75);  /* Slightly less transparent for readability */\n  --popover-foreground: #e4e4e7;      \n\n  --primary: #b6bfba;                 /* Pure white for primary actions */\n  --primary-foreground: #000000;      /* Black text on white buttons */\n\n  --secondary: rgba(63, 63, 70, 0.3); /* Transparent grey surfaces */\n  --secondary-foreground: #fafafa;    \n\n  --muted: rgba(39, 39, 42, 0.4);     \n  --muted-foreground: #a1a1aa;        \n\n  --accent: rgba(82, 82, 91, 0.3);    \n  --accent-foreground: #ffffff;       \n\n  --destructive: #7f1d1d;             /* Subdued dark red for danger */\n  --destructive-foreground: #fca5a5;  \n\n  /* Subtle, barely-there borders for the glass look */\n  --border: rgba(255, 255, 255, 0.08); \n  --input: rgba(255, 255, 255, 0.05);  \n  --ring: rgba(255, 255, 255, 0.2);    \n\n  /* ===== ZERO RADIUS (Sharp & Square) ===== */\n  --radius: 0px;                      \n\n  /* Transparent Sidebar */\n  --sidebar: rgba(9, 9, 11, 0.6);     \n  --sidebar-foreground: #a1a1aa;      \n  --sidebar-border: rgba(255, 255, 255, 0.05); \n  --sidebar-accent: rgba(255, 255, 255, 0.05); \n  --sidebar-accent-foreground: #ffffff; \n\n  /* ===== Glow (Neutralized to faint silver light) ===== */\n  --glow-primary: rgba(255, 255, 255, 0.03); \n  --glow-accent: rgba(255, 255, 255, 0.02);  \n\n  /* ===== Glass effects (Frosty and clean) ===== */\n  --glass-bg: linear-gradient(\n    135deg,\n    rgba(255, 255, 255, 0.04) 0%,\n    rgba(255, 255, 255, 0.01) 100%\n  );                                   \n  --glass-border: rgba(255, 255, 255, 0.06); \n\n  --glass-strong-bg: linear-gradient(\n    135deg,\n    rgba(255, 255, 255, 0.08) 0%,\n    rgba(255, 255, 255, 0.03) 100%\n  );                                   \n  --glass-strong-border: rgba(255, 255, 255, 0.12); \n  --glass-strong-shadow: 0 8px 32px rgba(0, 0, 0, 0.6),\n    inset 0 1px rgba(255, 255, 255, 0.05);  \n\n  /* ===== Decorative glow effects (Muted) ===== */\n  --glow-color-1: rgba(255, 255, 255, 0.06); \n  --glow-color-2: rgba(255, 255, 255, 0.04); \n  --glow-color-3: rgba(255, 255, 255, 0.02); \n  --glow-sm-1: rgba(255, 255, 255, 0.05);    \n  --glow-sm-2: rgba(255, 255, 255, 0.02);    \n\n  /* ===== Scrollbar ===== */\n  --scrollbar-track: transparent; \n  --scrollbar-border: rgba(255, 255, 255, 0.15);      \n\n  /* ===== Cursor ===== */\n  --cursor-pink: auto;  /* Turns off the pink arrow */\n\n  /* ===== Palettes (Hijacked to be Monochrome/Silver) ===== */\n  \n  --y2k-pink: #d4d4d8;                  \n  --y2k-purple: #333336;\n  --y2k-blue: #71717a;\n  --y2k-mint: #e4e4e7;\n  --y2k-peach: #52525b;\n  --y2k-lavender: #d4d4d8;\n  --y2k-yellow: #f4f4f5;\n\n  --pastel-rose: #e4e4e7;\n  --pastel-lilac: #d4d4d8;\n  --pastel-sky: #a1a1aa;\n  --pastel-mint: #71717a;\n  --pastel-coral: #52525b;\n  --pastel-peach: #a1a1aa;\n  --pastel-lavender: #d4d4d8;\n  --pastel-periwinkle: #e4e4e7;\n\n  --rgb-red: #52525b;\n  --rgb-orange: #71717a;\n  --rgb-yellow: #a1a1aa;\n  --rgb-green: #d4d4d8;\n  --rgb-cyan: #e4e4e7;\n  --rgb-blue: #d4d4d8;\n  --rgb-indigo: #a1a1aa;\n  --rgb-violet: #71717a;\n\n  /* ==== Custom ==== */\n  --indicator: #5dc27d;\n}\n\n/* ─────────────────────────────────────────────────────────\n   Custom Cursor (Universal Hollow Arrow)\n   ───────────────────────────────────────────────────────── */\n\n/* Applies the hollow arrow to literally everything on the page */\n*, body, html, a, button, [role=\"button\"], .cursor-pointer, .cursor-text, select, input, textarea, [contenteditable=\"true\"] {\n  cursor: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\"><path d=\"M 1 1 L 9 21 L 12 13 L 20 10 Z\" fill=\"none\" stroke=\"%23e4e4e7\" stroke-width=\"2\" stroke-linejoin=\"miter\"/></svg>') 1 1, auto !important;\n}\n\n/* ─────────────────────────────────────────────\n   Homepage Overrides \n   ───────────────────────────────────────────── */\n\n/* Override the hardcoded colored gradients on the icons */\n.group .group-hover\\:scale-110 {\n  background: var(--secondary) !important; \n  border: 1px solid var(--border);         \n  color: var(--foreground) !important;    \n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;\n}\n\n/* Wrapper cards (Remove scanlines, fix pink hover shadow) */\n.btn-scanlines::after {\n  display: none !important; \n}\n\n.group.card-3d-tilt {\n  --tw-shadow-color: rgba(255, 255, 255, 0.05) !important; \n  background: var(--card) !important;\n  border: 1px solid var(--border) !important;\n  border-radius: var(--radius) !important;\n}\n\n.group.card-3d-tilt:hover {\n  border-color: var(--ring) !important;\n  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--ring) !important;\n}\n\n/* Logo Splash (Kill the pulsing orange rings and bunny glow) */\n.bunny-glow, \n.animate-pulse-ring {\n  animation: none !important;     \n  box-shadow: none !important;   \n}\n\n/* Force-remove the Tailwind orange shadow class from the logo container */\n.shadow-orange-500\\/20 {\n  --tw-shadow: none !important;\n  border: 1px solid var(--border) !important; \n  border-radius: var(--radius) !important;\n}\n\n/* ─────────────────────────────────────────────────────────\n   Sleeker, Thinner TopBar\n   ───────────────────────────────────────────────────────── */\n\n/* Reduce the overall height of the TopBar */\n.mari-topbar {\n  height: 1.5rem !important; \n  background: var(--background) !important; \n  padding: 0 0.5rem !important;\n}\n\n/* Hide the heavy border line at the bottom */\n.mari-topbar > .absolute.inset-x-0.bottom-0 {\n  display: none !important;\n}\n\n/* Buttons (Icons and spacing) */\n.mari-topbar button {\n  padding: 0.4rem !important; \n  border-radius: var(--radius) !important;\n}\n\n/* Icons */\n.mari-topbar button svg {\n  width: 0.9rem !important;\n  height: 0.9rem !important;\n}\n\n/* Center navigation container */\nnav[data-tour=\"panel-buttons\"] {\n  gap: 0 !important;\n  padding: 0.25rem !important;\n}\n\n/* Clean up the hover effect for a minimalist \"fade\" instead of a block */\n.mari-topbar button:hover {\n  background: transparent !important;\n  color: var(--foreground) !important; \n  transform: none !important;\n}\n\n/* ─────────────────────────────────────────────────────────\n   Modal Window Styling\n   ───────────────────────────────────────────────────────── */\n\n/* Top Gradient Bar */\n.mari-modal-panel .pastel-gradient {\n  background: var(--primary) !important;\n  opacity: 0.8;\n  height: 2px !important; \n}\n\n/* Modal Window Container */\n.mari-modal-panel.os-window {\n  background: var(--popover) !important;\n  border: 1px solid var(--border) !important;\n  border-radius: var(--radius) !important;\n  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), \n              0 0 0 1px rgba(255, 255, 255, 0.05) !important;\n}\n\n/* Step Buttons (1, 2, 3, 4) */\n.mari-modal-panel button.rounded-full {\n  background: var(--secondary) !important;\n  border: 1px solid var(--border) !important;\n  color: var(--muted-foreground) !important;\n  border-radius: var(--radius) !important; /* Force squares over circles */\n}\n\n/* Make the active step look highlighted */\n.mari-modal-panel button.bg-\\[var\\(--primary\\)\\] {\n  background: var(--primary) !important;\n  color: var(--primary-foreground) !important;\n  border: none !important;\n}\n\n/* Tweak input fields inside the modal for better glass consistency */\n.mari-modal-panel textarea, \n.mari-modal-panel input {\n  background: rgba(0, 0, 0, 0.2) !important;\n  border: 1px solid var(--border) !important;\n  border-radius: var(--radius) !important;\n}\n\n.mari-modal-panel textarea:focus {\n  border-color: var(--primary) !important;\n  background: rgba(0, 0, 0, 0.3) !important;\n}\n\n/* Pill buttons (Surprise me, etc.) */\n.mari-modal-panel .rounded-full.bg-\\[var\\(--secondary\\)\\] {\n  background: rgba(255, 255, 255, 0.03) !important;\n  border: 1px solid rgba(255, 255, 255, 0.05) !important;\n  border-radius: var(--radius) !important;\n}\n\n.mari-modal-panel .rounded-full:hover {\n  background: rgba(255, 255, 255, 0.08) !important;\n}\n\n/* ─────────────────────────────────────────────\n   Buttons, Icons & Indicators (Obsidian Glass)\n   ───────────────────────────────────────────── */\n\n/* Action Buttons (\"New\", \"Add Connection\") */\nbutton.bg-gradient-to-r,\nbutton.bg-gradient-to-br {\n  background: var(--secondary) !important;    \n  border: 1px solid var(--border) !important;  \n  color: var(--foreground) !important;         \n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important; \n  border-radius: var(--radius) !important;\n}\n\nbutton.bg-gradient-to-r:hover,\nbutton.bg-gradient-to-br:hover {\n  background: var(--accent) !important;        \n  border-color: var(--ring) !important;\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;\n}\n\n/* Square Icon Containers (Bot, Users, Books, Globe, etc.) */\ndiv.bg-gradient-to-br,\ndiv.bg-gradient-to-r {\n  background: var(--muted) !important;         \n  border: 1px solid var(--border) !important;\n  color: var(--foreground) !important;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;\n  border-radius: var(--radius) !important;\n}\n\n/* \"Active Tab\" Indicator Pills (The little horizontal bars at the bottom) */\nspan.bg-gradient-to-r,\nspan.bg-gradient-to-br {\n  background: var(--foreground) !important; \n  box-shadow: 0 0 8px rgba(255, 255, 255, 0.4) !important;\n  border-radius: var(--radius) !important;\n}\n\n/* ─────────────────────────────────────────────\n   List Items, Badges & Toggles (Obsidian Glass)\n   ───────────────────────────────────────────── */\n\n/* Neutralize all colored text and icons (Purple, Yellow, Sky blue) */\n[class*=\"text-purple-\"],\n[class*=\"text-yellow-\"],\n[class*=\"hover\\:text-sky-\"]:hover {\n  color: var(--foreground) !important;    \n}\n\n/* Neutralize SVG Fill colors (like the yellow Star icon) */\n[class*=\"fill-yellow-\"] {\n  fill: var(--foreground) !important;\n}\n\n/* Neutralize all colored backgrounds (Badges, Active Cards, Checkmarks, Toggles) */\n[class*=\"bg-purple-\"],\n[class*=\"hover\\:bg-sky-\"]:hover {\n  background-color: var(--secondary) !important;\n}\n\n/* Fix Tailwind's colored borders/rings (Active list item outlines) */\n[class*=\"ring-purple-\"] {\n  --tw-ring-color: var(--border) !important; \n}\n\n/* The Vertical Inline-Gradient Marker */\n/* Targets those absolute-positioned spans with hardcoded inline gradients */\nspan.absolute[style*=\"linear-gradient\"] {\n  background: var(--foreground) !important; \n  box-shadow: 0 0 8px rgba(255, 255, 255, 0.4) !important;\n}\n\n/* Online/Status Indicators (Green dot) */\n.bg-green-500 {\n  background-color: var(--indicator) !important;\n  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6) !important; \n  border-radius: var(--radius) !important; /* Makes it a square indicator */\n}\n\n/* ─────────────────────────────────────────────\n   World HUD & Game Status (Dusty/Muted Colors)\n   ───────────────────────────────────────────── */\n\n/* Muted Sage Green (Replaces bright Emerald for Map/Quests) */\n[class*=\"text-emerald-\"] {\n  color: #84ad9a !important;\n}\n\n/* Muted Slate-Lavender (Replaces bright Violet for the Calendar) */\n[class*=\"text-violet-\"] {\n  color: #9990ad !important;\n}\n\n/* Muted Dusty Gold (Replaces bright Amber for the Clock/Inventory) */\n[class*=\"text-amber-\"] {\n  color: #bba888 !important;\n}\n\n/* Muted Dusty Rose (Thermometer) */\n[stroke=\"#fb7185\"] {\n  stroke: #c4939b !important;\n}\n[fill=\"#fb7185\"] {\n  fill: #c4939b !important;\n}\n\n/* Optional: Refine the HUD Button Backgrounds slightly */\nbutton.bg-black\\/40 {\n  background: var(--card) !important;\n  border: 1px solid var(--border) !important;\n}\nbutton.hover\\:bg-black\\/60:hover {\n  background: var(--secondary) !important;\n  border-color: var(--ring) !important;\n}\n\n/* ─────────────────────────────────────────────\n   Mute Emojis (Desaturated & Softened)\n   ───────────────────────────────────────────── */\n\nspan.text-sm.leading-none.shrink-0 {\n  filter: saturate(40%) brightness(0.9) !important;\n}\n\n/* ─────────────────────────────────────────────\n   Typing Indicator Dots\n   ───────────────────────────────────────────── */\n\n.mari-message-typing span {\n  background-color: var(--foreground) !important; \n  opacity: 0.5; \n  box-shadow: 0 0 6px rgba(255, 255, 255, 0.4) !important; \n  border-radius: var(--radius) !important; /* Square typing dots */\n}\n\n/* ─────────────────────────────────────────────\n   Avatar Generating Pulse Ring\n   ───────────────────────────────────────────── */\n\n/* Targets both the standard and RPG generating rings */\n.glimmer-streaming,\n.rpg-streaming {\n  box-shadow:\n    0 0 0 2px rgba(255, 255, 255, 0.15),\n    0 0 16px rgba(255, 255, 255, 0.1) !important;\n  animation: obsidian-stream-pulse 2s ease-in-out infinite !important;\n}\n\n/* Custom white pulse animation */\n@keyframes obsidian-stream-pulse {\n  0%, 100% {\n    box-shadow:\n      0 0 0 2px rgba(255, 255, 255, 0.15),\n      0 0 16px rgba(255, 255, 255, 0.1);\n  }\n  50% {\n    box-shadow:\n      0 0 0 3px rgba(255, 255, 255, 0.3),\n      0 0 24px rgba(255, 255, 255, 0.2);\n  }\n}\n\n/* ─────────────────────────────────────────────────────────\n   RPG Character Nameplate (Detecting RPG messages only)\n   ───────────────────────────────────────────────────────── */\n\n.mari-message:has(.rpg-avatar-glow) .mari-message-body > .flex.items-baseline {\n  background: var(--card) !important;\n  backdrop-filter: blur(4px);\n  border: 1px solid var(--border) !important;\n  border-radius: var(--radius) !important; \n  padding: 4px 12px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);\n  width: fit-content;\n  margin-bottom: -16px;\n  position: relative;\n  z-index: 10;\n}\n\n/* Hide the timestamp only in messages that have the RPG avatar glow */\n.mari-message:has(.rpg-avatar-glow) .mari-message-timestamp {\n  display: none !important;\n}\n\n/* Style the name inside that specific RPG pill */\n.mari-message:has(.rpg-avatar-glow) .mari-message-name {\n  font-size: 0.825rem !important;\n  font-weight: 700 !important;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);\n}\n\n/* ─────────────────────────────────────────────────────────\n   RPG Avatar - Portrait & Faded Style\n   ───────────────────────────────────────────────────────── */\n\n/* Transform the avatar container into a large portrait */\n.mari-message:has(.rpg-avatar-glow) .rpg-avatar-glow > div {\n  width: 5.5rem !important;        /* Makes it wider */\n  height: 8rem !important;         /* Makes it taller */\n  border-radius: var(--radius) !important; \n  --tw-ring-width: 0px !important; \n  box-shadow: none !important;\n}\n\n/* Image positioning (keeps focus on the top half/face of the image) */\n.mari-message:has(.rpg-avatar-glow) .rpg-avatar-glow img {\n  object-position: top center !important; \n}\n\n/* Assistant Avatar Mask (Assuming they are on the Left, fade towards Right and Bottom) */\n.mari-message-assistant:has(.rpg-avatar-glow) .rpg-avatar-glow > div {\n  -webkit-mask-image: linear-gradient(to bottom right, black 35%, transparent 100%);\n  mask-image: linear-gradient(to bottom right, black 35%, transparent 100%);\n}\n\n/* User Avatar Mask (Assuming you are on the Right, fade towards Left and Bottom) */\n.mari-message-user:has(.rpg-avatar-glow) .rpg-avatar-glow > div {\n  -webkit-mask-image: linear-gradient(to bottom left, black 35%, transparent 100%);\n  mask-image: linear-gradient(to bottom left, black 35%, transparent 100%);\n}\n\n/* Stretch the animated breath glow behind it to fit the new portrait shape */\n.rpg-avatar-glow {\n  transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n\n.rpg-avatar-glow::after {\n  background: radial-gradient(ellipse at center, var(--foreground) 0%, transparent 65%) !important;\n  filter: blur(12px) !important;\n  animation: rpg-breath-glow 4s ease-in-out infinite !important;\n  width: 140% !important;\n  height: 120% !important;\n  top: -10% !important;\n  left: -20% !important;\n}\n\n.rpg-avatar-glow:hover {\n  transform: scale(1.05);\n}\n\n.rpg-avatar-glow:hover::after {\n  opacity: 1 !important;\n}\n\n@keyframes rpg-breath-glow {\n  0%, 100% { opacity: 0.2; transform: scale(0.95); }\n  50% { opacity: 0.5; transform: scale(1.05); }\n}\n\n/* ─────────────────────────────────────────────────────────\n   Message Edit Mode \n   ───────────────────────────────────────────────────────── */\n\n/* The Edit Textarea */\n.mari-message-bubble textarea {\n  background: rgba(0, 0, 0, 0.3) !important; \n  border: 1px solid var(--border) !important;\n  border-radius: var(--radius) !important;\n  --tw-ring-shadow: none !important;\n  --tw-ring-color: transparent !important;\n  box-shadow: none !important;\n  \n  transition: all 0.2s ease !important;\n}\n\n/* Active/Focus state (Replacing the Blue Glow) */\n.mari-message-bubble textarea:focus {\n  border-color: var(--primary) !important; \n  box-shadow: 0 0 12px var(--glow-primary) !important; \n  background: rgba(0, 0, 0, 0.5) !important;\n}\n\n/* \"Save\" Button (Neutralizing the hardcoded bright emerald) */\n.mari-message-bubble button[title*=\"Save\"] {\n  color: var(--muted-foreground) !important;\n  border-radius: var(--radius) !important;\n}\n\n.mari-message-bubble button[title*=\"Save\"]:hover {\n  background: var(--secondary) !important;\n  color: var(--indicator) !important; \n}\n\n/* \"Cancel\" Button */\n.mari-message-bubble button[title*=\"Cancel\"] {\n  color: var(--muted-foreground) !important;\n  border-radius: var(--radius) !important;\n}\n\n.mari-message-bubble button[title*=\"Cancel\"]:hover {\n  background: var(--secondary) !important;\n  /* Uses our muted dusty rose theme variable when hovered */\n  color: var(--destructive-foreground) !important; \n}\n\n/* ─────────────────────────────────────────────────────────\n   Chat Input Area \n   ───────────────────────────────────────────────────────── */\n\n/* Neutralize the blue border and shadow */\n.mari-chat-input-box {\n  background: rgba(0, 0, 0, 0.4) !important; \n  border: 2px solid var(--border) !important; \n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important; \n  border-radius: var(--radius) !important;\n  transition: all 0.2s ease !important;\n}\n\n/* Style for when the box is \"Active\" (focused) */\n.mari-chat-input-box:focus-within {\n  border-color: var(--primary) !important; \n  box-shadow: 0 0 12px var(--glow-primary) !important; \n}\n\n/* Neutralize the send button text color if it has a hardcoded blue tint */\n.mari-chat-send-btn {\n  color: var(--primary) !important;\n  border-radius: var(--radius) !important;\n}\n\n/* Ensure placeholder and text are readable */\n.mari-chat-input-textarea::placeholder {\n  color: var(--muted-foreground) !important;\n  opacity: 0.5 !important;\n}\n\n/* ─────────────────────────────────────────────\n   GLOBAL SHARP EDGES OVERRIDE \n   (Forces un-styled tailwind elements to square off)\n   ───────────────────────────────────────────── */\n\nbutton, \ninput, \ntextarea, \nselect, \n.rounded, \n.rounded-sm, \n.rounded-md, \n.rounded-lg, \n.rounded-xl, \n.rounded-2xl {\n  border-radius: var(--radius) !important;\n}"
}