Tabloto · Бенто: един материал → всички канали → „да“

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

Build a single-file, dark-first homepage for a product whose promise is a FLOW
("one input → many outputs → a human approves"). The page IS an interactive bento
grid: the cards do not describe the product, they perform it.

TRENDS
- Bento grid: one dominant card (the flow demo), one tall supporting card (the
  approval queue), compact utility cards (rules/guardrails, the automation share,
  privacy, keys, audience, CTA). Every card has a different job.
- Dark-first: layered neutral surfaces derived from the brand's darkest text colour
  (never #000). Light theme via prefers-color-scheme AND a remembered toggle
  (localStorage in try/catch). Same brand accent in both; a lighter accent tint
  for small text on dark so it passes AA.
- Purposeful micro-interactions: every state change explains something
  (idle → working → waiting → approved / returned → done). No decorative motion.

LAYOUT (12 columns desktop → 1 column ≤760px; HTML order = reading order)
+----------------------------------+------------------+
| HERO: huge 3-line headline,      | STEPS 1-2-3-4    |
| last word = the approval word,   | (ol, current step|
| underlined by an SVG stroke that | highlighted) +   |
| draws itself when all approved   | aria-live status |
+----------------------------------+------------------+
| FLOW (dominant, 2 rows):         | APPROVAL QUEUE   |
| source material card + 4 ghost   | (2 rows): empty  |
| channel slots (dashed). Button   | state → 4 rows   |
| "Split into channels" → source   | [Return] [Yes]   |
| compacts, tiles FLIP out of it   | counter "n of 4" |
| into the slots, each tile shows  | "Yes to all"     |
| its status line                  | → success panel  |
+-----------+-----------+----------+------------------+
| RULES     | ~90 %     | PRIVACY (local only)        |
| chips get | 10-seg bar: 9 machine, 1 human that     |
| ticked    | fills by approvals                       |
+--------+--+-----------+--------+--------------------+
| KEYS   | AUDIENCE / first users | CTA (accent card)  |
+--------+------------------------+--------------------+
footer: concept label

STATE MACHINE (one source of truth, mirrored in every card)
idle → splitting (button busy, label "Working…", tiles "checking", machine
segments fill, rule chips tick one by one) → review (queue built, tiles
"waiting for yes") → per item: yes (toggle, check-mark stroke draws, row tint
sweeps left→right) / returned (dashed border + text, never colour alone)
→ done when all yes (headline underline draws, success panel, reset button).

MUST
- Real brand content only; drop any card that has no source content.
- One h1; semantic sections with aria-labelledby; ol for steps; ul for queue.
- All states reachable by keyboard; :focus-visible ring; aria-pressed on toggles;
  aria-busy on the working button; one polite live region narrates the flow.
- [hidden]{display:none!important} so buttons with display:flex still hide.
- prefers-reduced-motion: no FLIP, no transitions, state still fully legible.
- Container query on the queue card (rows stack when the card is narrow).
- WCAG 2.2 AA in both themes (check after transitions settle); no horizontal
  scroll at 360px; self-hosted fonts; no CDN; < 1 MB without fonts.
- Optional ?stanje=pregled|gotovo URL switch that jumps to a still frame for
  gallery screenshots.

NEVER
- 12 identical cards, animation in every card, glass/purple gradients,
  information only on hover, magnetic buttons, colour as the only signal,
  invented numbers, customers, testimonials or logos.

(б) Бриф за Tabloto

• Идея: страницата не разказва Tabloto — тя го прави. Един материал се разгръща на пост, видео, блог и прессъобщение; бранд книгата отмята думите за стила; черновите чакат и посетителят казва „да“ (или връща за поправка). Когато всички са „да“, под „да“-то в заглавието се дорисува черта.
• Заглавие (чернова): „Един материал. Всички канали. Едно „да“.“
• Съдържание по карти: табло за съдържание и разпространение · пътят в 4 стъпки · материал → 4 канала (пост, видео, блог, прессъобщение) · човекът казва „да“ и решава · гласът „Простичко, лесно, семпло.“ + 4 думи за стила · около 90 % автоматично · лични данни — само на локален AI · всеки клиент — свои ключове · за организации, които публикуват в много канали; първите — (първите клиенти — не се показват публично без съгласие) · tabloto.eu.
• Цветове: от tokens.json — #1F6FEB (акцент/бутон), #14202E (текст → в тъмната тема става повърхност), #F2F5F9 (втори фон → в тъмната тема става текст), #4A5868 (второстепенен текст в светлата), #FFFFFF. Тъмните нива (#0B131D, #1B2A3B, #22344A) и светлата нюанса за дребен акцентен текст (#7DAEFF в тъмна, #1A5BC4 в светла) са изведени от тях заради контраста.
• Шрифт: Manrope (от ../_obshto/fonts/, с locl BGR) за всичко. Етикетите на бранда са в JetBrains Mono, който е забранен в галерията — тук са Manrope 700, главни, разреден ред, табличните цифри.
• Знак: типографско „Tabloto“ (както предлага бранд книгата) + четири квадратчета 2×2 (табло), последното в акцент — декоративно, не е лого.