Remediate broken layout on the demo home page (persona intact):
- Hero rendered with no height: it relied on min-h-screen /
responsive Tailwind that the host JIT drops on a cold provision.
Drive hero sizing + type through compiled .kg-hero* CSS classes
(input_css_append is compiled every build). Mascot repositioned to
bottom-center behind readable content; confetti/ABC/reduced-motion
fallback preserved. All builtin field reads unchanged.
- Landing header was position:absolute and overlapped the feature
grid when the hero collapsed -> switch to the default's in-flow
sticky header (collision gone).
- feature-grid columns never formed (lg:grid-cols-3 not compiled) ->
route through compiled .kg-cols/.kg-cols-3 media-query grid.
- Empty art-wall polaroids ballooned into large blank squares ->
graceful 4:3 capped placeholder with a playful crayon wash.
- Define .kg-section (was only in the dead assets/style.css, so
persona sections had no padding) and add a consistent .kg-sect
rhythm; trim oversized section padding.
- Alphabet strip now a single scrollable row (was flex-wrap) so the
sticky header stays compact on mobile.
- Mobile: all layout-critical grids are compiled media-query CSS
(mobile-first, 1 col), no fixed widths > viewport, tap targets ok.
No .reveal/scroll-hide pattern in this theme; whitespace was real
layout void. Colors stay semantic tokens; check-safety 32 checks OK.
No version bump.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
85d95d0545