What is Global Style?
Global Style is a CSS stylesheet that applies to your entire creation — affecting all chat content, including greetings, AI replies, and every user message.
Why Do You Need Global Style?
Global Style is never sent to the AI, so no matter how many CSS rules you write, they produce zero token consumption.
Without Global Style, achieving a consistent visual theme requires repeating inline style attributes on every HTML element. Those inline styles are sent to the AI along with each message, consuming extra tokens on every single exchange.
For example, to implement a card container with a background, border, font, and padding:
Inline approach (repeated every time, sent to the AI):
<div style="background-color:#1a1a2e;padding:12px 16px;border-radius:8px;color:#eee;font-size:14px;line-height:1.6;border:1px solid #3a3a5c;margin-bottom:8px;font-family:Georgia,serif;letter-spacing:0.5px;">
Content
</div>With Global Style (class-based, styles never sent to the AI):
<div class="card">Content</div>For just this one container, the inline approach costs roughly 45–50 tokens; the class approach costs only 4–5 tokens.
Assume a full conversation contains 20 such containers:
| Approach | Tokens per container | 20 containers | Over 50 conversation turns |
|---|---|---|---|
| Inline styles | ~47 tokens | ~940 tokens | ~47,000 tokens |
| Global class | ~5 tokens | ~100 tokens | ~5,000 tokens |
Global Style can reduce this overhead by ~90% — and the savings compound the longer a conversation runs.
Full CSS3 Support
Global Style supports the complete CSS3 syntax, including:
- Selectors (class, tag, descendant, pseudo-class, etc.)
- Variables (
--var) - Animations (
@keyframes,transition,animation) - Flexbox (
flex) - Media queries (
@media) - And all other standard CSS3 properties
Tips
- Define Global Style once — no need to repeat it in every message.
- Put commonly used containers, text styles, and color variables in Global Style for centralized management.