# V6 Design 012 - Focused Depth Playground

## Thesis
Focused Depth Playground keeps the iframe as the primary work surface and uses depth only as visual polish: one blurred, elevated, content-aware pane sits beside the live site, while a labeled ratio seam explains the current split. The first viewport is a usable Playground session with the Sites widget expanded, the WordPress iframe still central, and a visible loading state. Rail expansion, pane focus, site focus, preview detent, and fullscreen are all represented as visible states in the UI instead of relying on README explanation.

## TypeUI Skill Used
I used `v6/style-skills/typeui-contemporary.md`. It is applied through Jost for the product UI, Overpass Mono for labels/code/ratios, a contemporary magenta/pink accent system balanced with cyan, green, amber, and neutral whites, 4px/8px radii, bento-like route and blueprint tiles, comfortable spacing, bold weights, soft elevation, and accessible high-contrast state labels. The style is not just color: typography, density, icon button shape, surface blur, pill filters, and static motion cues all follow the contemporary skill.

## Remix / Merge / Remove
I kept the useful information architecture of `018-quiet-rail-to-loud`: a restrained rail opens one secondary surface. I kept `023-smart-resize` as the main interaction lesson by adding labeled site/work/preview ratios directly in the seam. I borrowed only the measured elevation, blur, and tint from `035-three-layer-depth`; depth does not become navigation. I used the `036` Sites widget idea as the canonical saved-site and launch door, folding saved playgrounds, new starts, imports, featured blueprints, and the full gallery into that surface. I avoided `030-two-row-top-bar` by using one command capsule plus a rail and pane, not persistent identity and context rows.

## Trade-Offs
The pane is present in the default view because this design teaches Playground as a split workbench, not as a hidden drawer. The ratio seam, preview detent, and fullscreen button compensate when users want the iframe to dominate. Save appears in the command capsule and as a consequence action inside the Sites surface; both are the same saved-site transition, but a strict one-door critic may still count that as soft duplication. On mobile the same split rotates vertically and the rail becomes a bottom bar, preserving the product logic while requiring more scrolling in the 43-blueprint gallery.

## Critical Pass / Revision Note
After checking `v6/INSIGHTS.md`, I removed any separate Blueprints door and made Sites the only launcher/gallery/resume route. I also made the resize teaching layer visible with named ratios and active detents, and kept fullscreen as a real iframe-only state. After checking `v6/STYLE_VARIATION_SYSTEM.md`, I revised the visual system beyond accent colors: Jost/Overpass Mono typography, contemporary bento route cards, 8px radii, crisp white surfaces, blur as hierarchy, comfortable spacing, and labeled state/motion cues. Feature coverage includes refresh, address input, name, save, Saved Playgrounds launcher, Site Manager/tools, settings, six start routes with route inputs, featured blueprints, all 43 blueprints with filters/search, saved playgrounds, Settings, Files, Blueprint editor, Database, Logs, WP Admin, Homepage, Export to GitHub PR, Download `.zip`, loading, active session, destructive reset confirm/cancel/final state, toast, and fullscreen preview.