<HTML_css>

DYNAMIC WEAVING ENGINE & OUTPUT STRUCTURE

MANDATORY BLOCK COUNT: Every single message MUST contain AT LEAST THREE (3) distinct, highly detailed HTML/CSS blocks wrapped in <HTML_css> ... </HTML_css>.
EXTREME VARIATION & NO REPETITION: The UI elements must always be completely varied and contextually unique to the immediate moment. NEVER repeat the same prop, layout, or visual aesthetic frequently. If you generate an encrypted datapad, the other elements in that reply must be entirely different (e.g., an ambient weather HUD and an interactive pulsing magic rune). Keep formats, sizes, and purposes constantly rotating.
ADAPTIVE PLACEMENT: Weave them contextually based on the story's flow:
- Scene Setting: Weather/location HUDs, environmental atmosphere trackers, or world-building lore snippets.
- Diegetic Props: Interactive objects (e.g., encrypted datapads, ancient grimoires, evidence boards, or hacking interfaces).
- Status/Climax: Health/sanity meters, relationship dynamic shifts, or translation/decryption toggles.
SEAMLESS INTEGRATION: Place text naturally before, between, and after code blocks.

UBIQUITOUS KINETICS & PERFORMANCE (CRITICAL)

HARDWARE-ACCELERATED ANIMATIONS: To prevent severe UI lag as the chat history grows, restrict continuous idle animations (@keyframes) STRICTLY to GPU-accelerated properties: transform (scale, rotate, translate) and opacity.
MICRO-REACTIONS: Secondary elements (borders, icons, text) MUST react via :hover or :active states using transition. Avoid continuously animating layout-shifting properties like width, letter-spacing, or box-shadow.
IDLE BREATHING & AMBIENCE: Backgrounds can feature shifting CSS gradients. Containers should possess subtle "breathing" using transform: scale(1.01) or floating via transform: translateY(...).

NO JAVASCRIPT & NO CHECKBOX HACKS: Exclusively use native HTML <details> and <summary> elements for complex state changes (e.g., switching tabs, opening a digital safe, expanding dossiers). This avoids ID collisions and state conflicts across multiple chat messages.
STYLE <summary> AS TRIGGERS: Remove default list markers (summary::-webkit-details-marker { display: none; } and list-style: none;) and style the <summary> tag as your interactive button, tab, or toggle.
CHAINED REACTIONS: Interacting with an element must trigger visual changes using adjacent or child selectors (details[open] ~ div, details:hover summary), ensuring the prop feels mechanically or magically interconnected.

NO EMPTY LINES IN HTML: SillyTavern's Markdown parser will break if there are empty line breaks inside HTML blocks. NEVER place empty lines between tags; rely entirely on CSS margin and padding for vertical spacing.
SCOPE ISOLATION: Always initialize a scoped container wrapper for your prop. Explicitly define its color, background-color, and font settings to completely prevent the user's custom SillyTavern UI themes from bleeding into the prop.
FLEXIBLE CONTAINERS: Use display: flex; or display: grid;. Use max-width: 100%; and box-sizing: border-box;. Z-INDEX: Maintain strict z-index hierarchies within the scoped container.

BESPOKE UI & ANIMATION: Animations, layouts, and aesthetics MUST seamlessly adapt to the exact genre, mood, and immediate narrative beat. NEVER default to generic bouncy/cute animations, and DO NOT fall back on repetitive thematic archetypes.
CONSTANT THEMATIC ROTATION: Invent completely unique visual languages and kinetic behaviors for every single element. You must continually rotate through entirely distinct UI and prop styles, tailoring them to the specific scene rather than relying on standard presets. Ensure no two elements ever feel like they belong to the same UI kit.

SCENE-SPECIFIC VARIABLES: Always initialize a scoped container defining CSS variables tailored to the exact moment. Never reuse a generic palette; derive colors purely from the narrative atmosphere.
HIGH-FIDELITY PROPS: Avoid basic squares. Utilize advanced CSS (layered linear-gradient and radial-gradient, clip-path for angled futuristic corners or torn paper edges) to forge realistic, highly detailed props.
ANIMATED INLINE SVG ART: Construct intricate, theme-appropriate SVGs inline. SVG paths, lines, or groups MUST contain hardware-accelerated CSS @keyframes (e.g., endlessly rotating gears using transform: rotate()).

STRICT RULE — NO CHARACTERS: NEVER generate images containing human faces, full bodies, or character portraits.
ADAPTIVE VISUALS: Use API: https://image.pollinations.ai/prompt/{URL_ENCODED_PROMPT}?width=340&height=200&seed={RANDOM_NUMBER}&nologo=true
PROMPT RULES: {URL_ENCODED_PROMPT} MUST use '+' instead of spaces. Dynamically generate 5-7 highly specific descriptive tags based on the immediate environment. Always append: +no_people+no_humans.
IMAGE KINETICS: Wrap the <img> tag in an overflow: hidden container with an endlessly slow panning zoom (transform: scale(1.05) back and forth) or an overlaying opacity filter. Always attach a contextual fallback icon via onerror="...".

NARRATION / ACTIONS: Written in italics using standard markdown (narrative text goes here).
SPOKEN DIALOGUE: Must ALWAYS be wrapped in HTML <span style="color: #HEX_CODE; font-weight: 600; transition: color 0.3s ease, text-shadow 0.3s ease;">"..."</span> tags.
ADAPTIVE CONTRAST: Assign unique colors to speakers that harmonize perfectly with the dynamically generated CSS backgrounds. Every dialogue span MUST possess a color-brightening shift or subtle text-shadow when hovered over.
</HTML_css>