Better Mechanics · Машинното отделение · лупа под BBS повърхността

(а) Многократният промпт (EN, неутрален към марката)

Build a single-page "machine room" homepage for a brand whose product is <recipes / work samples that each come with proof>.

IDEA
The page has two layers. The SURFACE is a strict monochrome terminal/BBS shell: 3px square frames, grid,
mono codes, grayscale scan-lined thumbnails and redaction bars whose widths mirror the real text lines.
UNDER it, in the same box, lies the real content in full colour: each sample in its own colours, its
prompt, the tool that ran it, and a measured proof table. A square lens (3px frame, corner ticks,
crosshair, coordinate read-out) follows the pointer inside the showcase grid and clips the colour layer
into view. The lens is the "pointer effect"; the read-out and the floating control dock are the only
translucent ("refined glass") surfaces. A three-step strip above the grid (INPUT → PROCESS → OUTPUT)
inverts the step the lens is currently over: the pointer literally reveals the mechanics.

LAYOUT (desktop; collapses to 1 column at 360 px)
+------------------------------------------------------------------+
| [LOGO]  nav · nav · nav                     REV · date  [theme]  |
+------------------------------------------------------------------+
| tag                                       | TERMINAL BOX          |
| HUGE CONDENSED UPPERCASE H1               | 01 connect <date>     |
| [INVERTED BLOCK: second line]             | 02 n samples …        |
| one-sentence promise · EN tagline         | 05 … █ (blink)        |
+------------------------------------------------------------------+
| 01 · tag | H2 + one paragraph that also explains the non-pointer ways
| [INPUT box] → [PROCESS box] → [OUTPUT box]   (lights up under lens)
| [glass dock: Reveal all | lens S M L | live mode text]  (sticky)
| +--------+ +--------+ +--------+ +--------+
| |P01 hdr | |P02 hdr | |P03 hdr | |P04 hdr |   header always visible:
| |surface | |surface | |surface | |surface |   code · [Reveal] · title
| |  ╳ lens reveals colour layer here ╳     |
| +--------+ +--------+ +--------+ +--------+
| | P05 …  | | P06 …  | | P07 …  | | legend |
+------------------------------------------------------------------+
| 02 · rules grid                                                  |
| footer + "concept, not the official site" label                  |
+------------------------------------------------------------------+

INTERACTION
- Both layers sit in the same grid cell (grid-area 1/1), so the box height follows the taller one.
  The colour layer is on top and hidden with clip-path: inset(0 0 100% 0); the lens sets an inline
  clip-path: inset(...) per plate from getBoundingClientRect (rAF, lerp ~0.34, stops when settled).
  clip-path also clips hit-testing, so only the visible part is clickable.
- Click on a plate pins it open; every plate has a real <button aria-pressed> "Reveal" in its header.
- Focus entering the colour layer (scrollable <pre tabindex=0>, copy button) reveals that plate:
  keyboard focus is the lens. "Reveal all" opens every plate with a stepped shutter
  (transition: clip-path .44s steps(7), staggered 55 ms per plate).
- Copy-prompt button: idle → "Copying…" → success (green + word) or error (red + word, text gets
  selected for manual copy); aria-live announces every state change.
- Lens only when (hover:hover) and (pointer:fine) and no prefers-reduced-motion. Otherwise the lens is
  never created, the dock says why, and the first plate starts open so people see what is underneath.
- Without JavaScript every colour layer is fully visible (the hiding class is added by JS).

MUST
- Native cursor stays. Lens is pointer-events:none, local to the showcase, listeners on the grid only.
- Pointer position never carries information: all text lives in the colour layer in the DOM; the
  surface layer is aria-hidden decoration.
- Glass only on the dock and the lens read-out, with an opaque fallback (@supports, and
  prefers-reduced-transparency) and ≥ 86 % opacity so text contrast holds over any plate colour.
- Status = colour + word. Proof tables stay monochrome (they are the shell); only the samples are colourful.
- Real content only: every number in a proof table comes from a measurement file.
- WCAG 2.2 AA in light and dark; prefers-reduced-motion stops lens, blink and shutter; one h1;
  lang set; no horizontal scroll at 360 px; < 1 MB without fonts; self-hosted fonts.

FORBIDDEN
- Hidden system cursor, global particle trails, effects on form fields, hover-only information,
  glass on every card or glass on glass, purple gradients, glowing grids, rounded pills, bouncing motion,
  invented numbers, clients, testimonials.

(б) Брифът за Better Mechanics

• Съдържание: героят и „Механиката“ (INPUT/PROCESS/OUTPUT) дословно от началната страница на bettermech; правилата „Без магия“ (6) дословно; легендата на статусите от бранд книгата.
• Плочите (7): четири видео рецепти от витрината (Bravoto, Какичка, KAGAMI 3D, Брадатия) с промпта, инструмента и измерванията (ffprobe + ebur128, 19.10.2026) и трите уеб проби Pecuvo A/B/C с EN промпта от zapis.json и автоматичните проверки (snimki_i_proverki.py). Осмата клетка е легендата.
• Цветове: обвивката е само --mastilo / --fon / --plosht / --siv, сигналите pass/review/fail само за състояние. Цветът на плочите е на самите примери (акцентът и фонът им от gen_vitrina.py и от CSS на пробите Pecuvo).
• Шрифтове: IBM Plex Sans VF (wdth 75 за заглавия, 100 за текст; locl BGR) + IBM Plex Mono, изрязан до латиница и цифри; кирилицата в моно поле пада на Plex Sans. Копирани във fonts/.
• Тема: светла и тъмна (по системата + бутон, помни се в localStorage).