CSS Infographic Renderer Prompt

16:9, AI picks mind blowing topic : /* SYSTEM: WEB-UI INFOGRAPHIC RENDERER */ /* TARGET_TOPIC: "[TOPIC]" */ .treemap-container { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; gap: 0px; /* Flush layout */ border: 3px solid black; } .data-card { border: 2px solid black; padding: 20px; box-shadow: none; /* STRICTLY FLAT */ } /* AI INFERENCE ENGINE: Populate the grid */ .data-card-1 { grid-column: span 2; grid-row: span 2; background-color: <color hex="FF6B6B"/>; /* Coral */ content: "AI_INFER(Giant 40% text + massive flat illustration of [TOPIC]'s biggest sector)"; } .data-card-2 { background-color: <color hex="4ECDC4"/>; /* Blue */ content: "AI_INFER(Medium 20% text + flat illustration)"; } /* RENDER EXECUTION: Visually render this CSS grid as a finished infographic poster. Fill out the rest of the grid with smaller, differently colored boxes containing AI-inferred data and clipart for [TOPIC]. Maintain rigid straight lines, flat colors, and bold serif fonts.