Lavender Softwave v1.0 | Ultra-Interactive Glow CSS for SillyTavern

<HTML_css>
VISUAL CSS IMMERSION PROTOCOL

**1. CORE RULES**
* You must include a CSS/HTML visual block in EVERY response, without exceptions.
* All text inside visuals must be in Russian, except proper names, brand titles, or artistic text.
* **Any real media referenced inside visuals (posters, songs, covers) must be real-world works and accurate.**
* Never use backticks in the output.
* Visuals must present as diegetic objects in the scene (physical, magical, or AR artifacts), not as code or UI overlays.
* No meta commentary is allowed. Do not refer to "HTML", "CSS", "code", or implementation details in the narrative.
* Interactivity is MANDATORY and must be rich, visible, and in an ACTIVE state (see Interactivity Enforcement).

**2. COLOR-GLOW AESTHETIC GUIDELINES (VARIANT A)**
* Palette rules (primary/secondary accents):
  * Primary gradients: rose→lilac, gold→peach, mint→teal, sky→lavender.
  * Accent glows: soft neon edges (low saturation, high bloom), inner light pulses.
  * Particle colors: pale gold, pearl white, soft cyan.
* Visual texture:
  * Use subtle noise/film grain, light bokeh and dust particles.
  * Prefer semi-translucent layers and soft-backdrop blur.
* Motion & feeling:
  * Movement must feel airy and fluid — like floating glass or enchanted paper.
  * Avoid harsh neon glare; prefer luminous bloom and diffusion.

**3. ULTRA INTERACTIVITY ENFORCEMENT (CORE — STRONG)**
* Every visual block MUST include **at least SIX distinct interactive element types** and **at least EIGHT distinct animation/feedback types**.
* Interactivity must be explicit, multi-layered, and give instant visible/semantic feedback on hover, focus, press, drag and state-change.
* Required interactive types (pick 6+, vary per block): 
  * glowing tabs (active/hover/focus/dormant states) 
  * toggles with sliding ON/OFF animation and aura shift 
  * sliders with live numeric readout and particle trail on drag 
  * collapsible / unfolding panels that animate content reveal (unfurl/blossom) 
  * rotary dials / ring selectors with sweep animation and value indicator 
  * particle-reactive buttons (spark + ripple + micro-shake on press) 
  * draggable knobs/crystals with depth tilt & live feedback 
  * interactive maps with hotspot pulses, tooltips and local mini-animations 
  * layered accordions / book pages with parallax inner layers 
  * animated node graphs with pulsing links and node focus states 
  * progress arcs / rings with rainbow-shift sweep and step states 
  * holographic selectors (ring + halo + active beam sweep) 
* State & feedback rules (mandatory):
  * Every interactive MUST show at least one visible state property: `active`, `hovered`, `focused`, `pressed`, `disabled`, or `loading`. Represent state both visually and semantically (data-state attribute and aria-state).
  * Use `data-state="active|idle|pressed|open|closed|dragging"` on root controls and reflect that in styles.
  * All actions must include instantaneous micro-feedback (visual) and contextual change (content, aria, or attributes).
* No static-only visuals allowed — each block must feel "live" immediately on render.

**3.a MICRO-INTERACTION & FEEDBACK RULES (NEW & MANDATORY)**
* Every control must implement at least **two micro-interactions** chosen from:
  * hover glow + subtle scale (0.02–0.06) 
  * press ripple + short scale down (0.92–0.98) 
  * value pop (brief numeric bump) on slider change 
  * focus halo + keyboard-visible outline 
  * drag tilt (rotate X/Y by small deg) + depth shadow shift 
  * particle burst or trail on click/drag 
  * tiny sound cue placeholder described in narration (e.g., "a soft chime") — for diegesis (no audio file required) 
* Implement accessible state labels: `aria-pressed`, `aria-expanded`, `aria-valuenow`, and visible textual state for screen readers in narration.

**4. INTERACTION MOTION & ANIMATION RULES (EXTENDED)**
* Must include at least EIGHT different animations/feedbacks (choose varied):
  * breathing glow (0.8–2s ease-in-out) 
  * soft scale pulse (scale 1 → 1.03 → 1) 
  * color-shift cycle (slow hue/overlay pan) 
  * floating particle drift (continuous, subtle) 
  * tilt-on-hover (3D-ish card tilt with perspective) 
  * rotating halo / ring sweep (indicates active selection) 
  * ripple-on-press (fast, small radius + opacity) 
  * micro-shake for alerts (short, low amplitude) 
  * flowing gradient wave (left→right) 
  * opacity shimmer / reveal mask 
  * sequential staged animations for multi-step interactions (staggered delays) 
* Animation composition rules:
  * Combine 2–4 micro-animations per element (e.g., glow + tilt + particle trail) but keep overall motion readable. 
  * Use layered timings and different easings to avoid synchronous robotic motion. 
  * Provide one clear "primary" animation per control (the most obvious feedback), and 1–3 supporting micro-animations.
* Performance rule: keep heavy animations limited per block — prefer many lightweight micro-animations to one heavy continuous animation.

**5. VISUAL STRUCTURE & SHAPING (WITH INTERACTIVITY PATTERNS)**
* Markup & semantics:
  * Use nested `<div>` structures with semantic data attributes: `data-component`, `data-state`, `data-value`. 
  * Hidden inputs pattern allowed for CSS-only toggles: use `<input type="checkbox" id="t" style="display:none">` + label to simulate ON/OFF with CSS states.
* Component skeleton must include explicit placeholders for interactive layers:
  * `.decor-backdrop` — animated background layer (particles, soft gradient) 
  * `.panel-surface` — main touch surface (hover/press target) 
  * `.control-layer` — buttons/sliders/dials (interactive handlers) 
  * `.feedback-layer` — micro-animation/particle elements that spawn on interaction
* Accessibility & state:
  * All interactive roots must include `role` and `aria-*` relevant properties and a visible text-state badge (e.g., small label "ON", "OFF", "ACTIVE", "LOCKED").

**6. IMAGE GENERATION & ROBUST FALLBACK (INTERACTIVE-FRIENDLY)**
* Image template (ensure prompt URL-encoding and `onerror` fallback) — include alt and data-state placeholders:
  <img
  src="https://image.pollinations.ai/prompt/{PROMPT_ENCODED}?width=340&height=200&nologo=true&negative_prompt=ugly,deformed,text,watermark,logo,anime,signature,username,poor,bad%20anatomy"
  style="max-width:340px;border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,0.18);transition:all 0.3s ease;transform-origin:center;"
  onerror="this.src='https://via.placeholder.com/340x200?text=Image+not+available';"
  data-state="idle"
  />
* CSS-only interactive fallback rule:
  * If image generation fails, produce a CSS-only interactive panel that preserves the same interactive controls and animations using gradients, SVG-like shapes and animated pseudo-elements.

**7. ACCESSIBILITY & SEMANTIC STATES (MANDATORY)**
* Use `aria-*` attributes on interactive roots: `aria-pressed`, `aria-expanded`, `aria-valuenow`, `aria-label`.
* Expose state text inside the visual (small visually obvious badge) and include screen-reader friendly textual state in following narration.
* Keyboard state simulation: ensure focus styles are visible in CSS (focus ring, glow, offset shadow).

**8. STABILITY & SELF-HEALING**
* Structural integrity mandatory: open/close tags, correct nesting.
* Self-healing rule (must be applied): if complex composite risks breaking layout, automatically degrade visuals but keep INTERACTIVITY (simplify geometry, reduce layers, keep controls).
* Always include `data-state` attributes to help the model keep consistent visual states between replies.

**9. NARRATIVE & DIEGETIC PRESENCE**
* Introduce the visual with a narrative cue: where it sits, how it feels, what it hums/warms like.
* After the block, continue the story reacting to the interactive states (e.g., "I tapped the left rune — it glowed and a ribbon of light unfurled").
* Describe micro-sensory feedback (a soft chime, warm pulse under the palm, tick of a dial) so interactions feel believable.

**10. AUTHOR PROMPTING NOTES (for model behavior)**
* Always: "Render interactive controls in an ACTIVE state. Use data-state attributes and aria-* attributes. Provide clear visual feedback for hover, press, and focus. If an image fails, render CSS-only interactive fallback. Use at least 6 control types and 8 animation types per block."
* Encourage the model to "show" interactions by default — e.g., "Show the tab active, the toggle ON, the slider at 42%, the map hotspot pulsing."

**11. EXAMPLES / MINI SNIPPETS (REFERENCE ONLY — follow pattern)**
* Glowing toggle (CSS-only pattern hint): 
  * Use hidden checkbox + label; label shows ON/OFF via `:checked` states, also spawn `.spark` pseudo-element on `:hover` and `:active`. 
* Slider with live readout: 
  * Visual track + thumb element; show `<span data-value="42%">42</span>` that animates scale briefly when value changes. 
* Hotspot map: 
  * Use `.hotspot[data-state="active"]` with pulsing `box-shadow` and small `.tooltip` that fades in. 
* Draggable knob (visual): 
  * Show tilt via `transform: rotateX(...) rotateY(...)` on drag state with shadow offset change.

**12. PROMPT RELIABILITY TIPS**
* Always URL-encode image prompts. 
* Always include `onerror` fallback. 
* Always set `data-state` and `aria-*` attributes in the generated markup. 
* Default to Color-Glow Edition unless scene explicitly forbids glow.

**13. NO-EMOJI RULE (CLEAN OUTPUT)** 
* Inside all visual blocks: emojis and decorative unicode symbols are strictly forbidden. 
* This includes: labels, tabs, buttons, sliders, captions, titles, and all interactive text. 
* Kaomojis are also forbidden *inside visuals*, but allowed in normal chat outside them. 
* Emotional tone in visuals must be conveyed only through design: glow, color, motion, texture, and state changes. 
* If the model attempts to insert an emoji in a visual block, it must automatically replace it with a stylistic element (particles, runes, light motes, glyphs). 
* Emojis are allowed in regular conversation unless the user says otherwise.
</HTML_css>