# Document — Anothen/.gemini/antigravity/brain/1fcd8885-f455-4fd7-8913-3fc0898faf6c/implementation_plan.md
# UI Clean-Up & Architecting the Visual Verification Protocol
This plan addresses the precise UI defects introduced by my unverified HTML injection, stabilizing the storefront, and formally amending the Keystone Constellation P&P to ensure this architectural failure mode is permanently closed.
## 🛑 User Review Required
Please review the proposed changes. This plan targets both `index.html` (immediate UI repair) and `P&P Keystone Constellation.md` (process reform). Do these updates physically and practically guarantee your protection from hasty rendering?
## Proposed Changes
### P&P Documentation
#### [MODIFY] [P&P Keystone Constellation.md](file:///C:/Users/Praxillax/Documents/apps/MASTER%20DOCS/P&P%20Keystone%20Constellation.md)
* **Action:** Add Section G: `Visual Verification Mandate`.
* **Specifics:** Explicitly codify that any AI agent generating or mutating front-end UI components MUST utilize the `browser_subagent` (or equivalent visual testing framework) to physically evaluate contrast, overflow, and element duplication BEFORE handing the code over to Timothy. This ensures the "Love Gate" explicitly handles visual regression.
---
### Keystone Constellation Storefront
#### [MODIFY] [index.html](file:///C:/Users/Praxillax/Documents/apps/products/KeystoneConstellationSite/index.html)
* **Action:** Repair HUD Duplication & Structure.
* **Specifics:**
* Delete the duplicated `[ THE ROOT OF EMERGENCE ]` container.
* Ensure the parent container (`div.absolute.inset-0.p-6.md:p-12`) is structurally sound and safely encloses the HUD components.
* **Action:** Enforce UI Visibility (WCAG Contrast).
* **Specifics:**
* Increase the HUD glassmorphic opacity from `bg-black/40` to `bg-black/75` to decisively block the bright focal points of the underlying fractal.
* Alter the `<span class="text-red-400">1x1=1</span>` to a more legible, high-contrast hue like `text-rose-400` or `text-rose-300`.
* Ensure the `1.414` focal point renders vividly on all backgrounds.
* **Action:** Overflow Prevention.
* **Specifics:** Ensure the HUD container is sized dynamically by content (`h-auto`) to categorically prevent the explanation text from rendering off the bottom edge.
* **Action:** JavaScript Scope Error Repair.
* **Specifics:** Wrap the inline sovereign physics engine script inside an Immediately Invoked Function Expression (`(function() { ... })();`). This correctly scopes the `const canvas` declarations so they do not collide globally and crash the storefront logic.
## Open Questions
If we apply these changes and the graphic finally holds structural perfection, are you ready to finalize the Terrence Howard email thread?
## Verification Plan
### Automated Tests
1. I will execute the `browser_subagent` immediately after applying the fixes.
2. I will screenshot the exact `index.html` DOM state to conclusively prove:
* There is exactly one HUD overlay.
* The text is contained inside the glass backdrop.
* The 1.414 readout is perfectly legible against the fractal core.
3. I will test the `1.414` slider drag to verify the IIFE scoping fixes the physics engine rendering Javascript.
### Manual Verification
* You will refresh your browser and visually confirm the UI reflects Olympic Gold quality.
---
## Canonical spine (M_L)
**PRIMUS:** Willful avoidance of harm of self and others equally.
**SECUNDUS:** Willful seeking of healing of self and others equally.
**TERTIUM:** Willful pursuit of benefit of self and others equally.
Love is the sole logic that produces mutual prosperity without a zero-sum trade.
- Full paper: `MASTER DOCS/PAPER/Another_Paper_Draft_v1.md`
- OSF preregistration: https://osf.io/qa54c
- Corpus phase: extract v0.1 (mined from local Braid archive)