script.js
Changed around line 68: document.addEventListener("DOMContentLoaded", () => {
- }, 7000); // 7 seconds delay
+ }, 20000); // 7 seconds delay
index.scroll
Changed around line 29: main
- div animate-spin h-8 w-8 border-4 border-blue-500 border-t-transparent rounded-full
+ div
+ class animate-spin h-8 w-8 border-4 border-blue-500 border-t-transparent rounded-full
index.scroll
Changed around line 26: main
+ div
+ id loading-indicator
+ class hidden
+ div animate-spin h-8 w-8 border-4 border-blue-500 border-t-transparent rounded-full
+ p Analyzing leadership style...
+ class mt-2
script.js
Changed around line 45: document.addEventListener("DOMContentLoaded", () => {
- // Simulate analysis
- const randomPoint = points[Math.floor(Math.random() * points.length)];
+ // Show loading indicator
+ const loadingIndicator = document.getElementById("loading-indicator");
+ loadingIndicator.classList.remove("hidden");
+ matchResult.classList.add("hidden"); // Hide previous result if any
- // Animate result
- drawPlot();
- animatePoint(randomPoint.x, randomPoint.y);
+ // Simulate analysis with timeout
+ setTimeout(() => {
+ // Hide loading indicator
+ loadingIndicator.classList.add("hidden");
- // Show result
- matchResult.classList.remove("hidden");
+ // Perform analysis
+ const randomPoint = points[Math.floor(Math.random() * points.length)];
- // Fictional leaders for demo
- const leaders = ["Hitler"];
- matchResult.textContent = `${leaders[Math.floor(Math.random() * leaders.length)]}`;
+ // Animate result
+ drawPlot();
+ animatePoint(randomPoint.x, randomPoint.y);
+
+ // Show result
+ matchResult.classList.remove("hidden");
+
+ // Fictional leaders for demo
+ const leaders = ["Hitler"];
+ matchResult.textContent = `${leaders[Math.floor(Math.random() * leaders.length)]}`;
+ }, 7000); // 7 seconds delay
index.scroll
Changed around line 25: main
+ h1 Compare to:
script.js
Changed around line 57: document.addEventListener("DOMContentLoaded", () => {
- matchResult.textContent = `Your leader most closely matches: ${leaders[Math.floor(Math.random() * leaders.length)]}`;
+ matchResult.textContent = `${leaders[Math.floor(Math.random() * leaders.length)]}`;
index.scroll
Changed around line 8: header
- h1 Bad Leader Analogy
+ h1 Bad Leader Analogy Generator
index.scroll
Changed around line 8: header
- h1 Tyrant Mapper
+ h1 Bad Leader Analogy
index.scroll
Changed around line 20: main
- button Compare Now
+ button Find Analogy
index.scroll
Changed around line 25: main
- h2 Closest Historical Match
- h1 Your leader most closely matches:
+ h1
index.scroll
Changed around line 26: main
- p Your leader most closely matches:
+ h1 Your leader most closely matches:
index.scroll
Changed around line 23: main
+ div
+ class result-card
+ h2 Closest Historical Match
+ p Your leader most closely matches:
+ id match-result
+ class hidden
- section
- class results
- div
- class result-card
- h2 Closest Historical Match
- p
- id match-result
- class hidden
- Your leader most closely matches:
script.js
Changed around line 1
- document.addEventListener('DOMContentLoaded', () => {
- const canvas = document.getElementById('pca-plot');
- const ctx = canvas.getContext('2d');
- const compareButton = document.getElementById('compare-button');
- const matchResult = document.getElementById('match-result');
+ document.addEventListener("DOMContentLoaded", () => {
+ const canvas = document.getElementById("pca-plot");
+ const ctx = canvas.getContext("2d");
+ const compareButton = document.getElementById("compare-button");
+ const matchResult = document.getElementById("match-result");
- // Generate random PCA data points
- const points = Array.from({length: 200}, () => ({
- x: Math.random() * canvas.width,
- y: Math.random() * canvas.height,
- label: ''
- }));
+ // Generate random PCA data points
+ const points = Array.from({ length: 200 }, () => ({
+ x: Math.random() * canvas.width,
+ y: Math.random() * canvas.height,
+ label: "",
+ }));
- function drawPlot() {
- ctx.clearRect(0, 0, canvas.width, canvas.height);
-
- // Draw axes
- ctx.strokeStyle = '#475569';
- ctx.beginPath();
- ctx.moveTo(canvas.width/2, 0);
- ctx.lineTo(canvas.width/2, canvas.height);
- ctx.moveTo(0, canvas.height/2);
- ctx.lineTo(canvas.width, canvas.height/2);
- ctx.stroke();
+ function drawPlot() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
- // Draw points
- points.forEach(point => {
- ctx.beginPath();
- ctx.arc(point.x, point.y, 3, 0, Math.PI * 2);
- ctx.fillStyle = '#6366f1';
- ctx.fill();
- });
- }
+ // Draw axes
+ ctx.strokeStyle = "#475569";
+ ctx.beginPath();
+ ctx.moveTo(canvas.width / 2, 0);
+ ctx.lineTo(canvas.width / 2, canvas.height);
+ ctx.moveTo(0, canvas.height / 2);
+ ctx.lineTo(canvas.width, canvas.height / 2);
+ ctx.stroke();
- function animatePoint(x, y) {
- ctx.beginPath();
- ctx.arc(x, y, 6, 0, Math.PI * 2);
- ctx.fillStyle = '#a855f7';
- ctx.fill();
- ctx.strokeStyle = '#ffffff';
- ctx.stroke();
- }
+ // Draw points
+ points.forEach((point) => {
+ ctx.beginPath();
+ ctx.arc(point.x, point.y, 3, 0, Math.PI * 2);
+ ctx.fillStyle = "#6366f1";
+ ctx.fill();
+ });
+ }
- compareButton.addEventListener('click', () => {
- const input = document.getElementById('leader-input').value;
- if (!input) return;
+ function animatePoint(x, y) {
+ ctx.beginPath();
+ ctx.arc(x, y, 6, 0, Math.PI * 2);
+ ctx.fillStyle = "#a855f7";
+ ctx.fill();
+ ctx.strokeStyle = "#ffffff";
+ ctx.stroke();
+ }
- // Simulate analysis
- const randomPoint = points[Math.floor(Math.random() * points.length)];
-
- // Animate result
- drawPlot();
- animatePoint(randomPoint.x, randomPoint.y);
-
- // Show result
- matchResult.classList.remove('hidden');
-
- // Fictional leaders for demo
- const leaders = ['Napoleon Bonaparte', 'Julius Caesar', 'Alexander the Great', 'Genghis Khan'];
- matchResult.textContent = `Your leader most closely matches: ${leaders[Math.floor(Math.random() * leaders.length)]}`;
- });
+ compareButton.addEventListener("click", () => {
+ const input = document.getElementById("leader-input").value;
+ if (!input) return;
+
+ // Simulate analysis
+ const randomPoint = points[Math.floor(Math.random() * points.length)];
- // Initial plot
+ // Animate result
- });
+ animatePoint(randomPoint.x, randomPoint.y);
+
+ // Show result
+ matchResult.classList.remove("hidden");
+
+ // Fictional leaders for demo
+ const leaders = ["Hitler"];
+ matchResult.textContent = `Your leader most closely matches: ${leaders[Math.floor(Math.random() * leaders.length)]}`;
+ });
+
+ // Initial plot
+ drawPlot();
+ });
index.scroll
Changed around line 9: header
- p Compare modern leaders to historical figures using AI-powered analysis
+ p Compare modern leaders to 1 million historical figures using AI-powered analysis
index.scroll
Changed around line 8: header
- h1 Tyrant Tracker
+ h1 Tyrant Mapper
index.scroll
Changed around line 2: buildHtml
- title Tyrant Tracker - Historical Leader Comparison
+ title Tyrant Mapper - Historical Leader Comparison
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://tyrant.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Tyrant Tracker - Historical Leader Comparison
+ style.css
+ header
+ class hero
+ div
+ class hero-content
+ h1 Tyrant Tracker
+ p Compare modern leaders to historical figures using AI-powered analysis
+ main
+ section
+ class visualization
+ div
+ class input-container
+ label Describe a leader's characteristics:
+ for leader-input
+ textarea
+ id leader-input
+ placeholder Enter details about policies, actions, and leadership style...
+ button Compare Now
+ id compare-button
+ class gradient-button
+ div
+ class plot-container
+ canvas
+ id pca-plot
+ width 800
+ height 600
+ section
+ class results
+ div
+ class result-card
+ h2 Closest Historical Match
+ p
+ id match-result
+ class hidden
+ Your leader most closely matches:
+ footer
+ p Built with data science and historical analysis
+ nav
+ a About
+ href #
+ a Methodology
+ href #
+ a Data Sources
+ href #
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "msg_01W4WafrxNyPp49YpBEDR8Aw",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll create a website that visualizes historical leaders using PCA plots and helps compare them to user descriptions. Let's call it \"Tyrant Tracker.\"\n\n---domain---\ntyrant.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://tyrant.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Tyrant Tracker - Historical Leader Comparison\nstyle.css\nheader\n class hero\n div\n class hero-content\n h1 Tyrant Tracker\n p Compare modern leaders to historical figures using AI-powered analysis\nmain\n section\n class visualization\n div\n class input-container\n label Describe a leader's characteristics:\n for leader-input\n textarea\n id leader-input\n placeholder Enter details about policies, actions, and leadership style...\n button Compare Now\n id compare-button\n class gradient-button\n div\n class plot-container\n canvas\n id pca-plot\n width 800\n height 600\n section\n class results\n div\n class result-card\n h2 Closest Historical Match\n p\n id match-result\n class hidden\n Your leader most closely matches:\nfooter\n p Built with data science and historical analysis\n nav\n a About\n href #\n a Methodology\n href #\n a Data Sources\n href #\nscript.js\n---style.css---\n:root {\n --primary-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);\n --surface-gradient: linear-gradient(to right, #ffffff05, #ffffff10);\n --text-primary: #f8fafc;\n --text-secondary: #94a3b8;\n --bg-primary: #0f172a;\n --bg-secondary: #1e293b;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, sans-serif;\n background-color: var(--bg-primary);\n color: var(--text-primary);\n line-height: 1.6;\n}\n\n.hero {\n padding: 2rem;\n text-align: center;\n background: var(--surface-gradient);\n backdrop-filter: blur(12px);\n}\n\n.hero h1 {\n font-size: 3.5rem;\n background: var(--primary-gradient);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n margin-bottom: 1rem;\n}\n\n.visualization {\n max-width: 1200px;\n margin: 2rem auto;\n padding: 0 1rem;\n display: grid;\n grid-template-columns: 1fr 2fr;\n gap: 2rem;\n}\n\n.input-container {\n background: var(--bg-secondary);\n padding: 1.5rem;\n border-radius: 1rem;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n}\n\ntextarea {\n width: 100%;\n height: 150px;\n background: var(--bg-primary);\n border: 1px solid #334155;\n border-radius: 0.5rem;\n padding: 1rem;\n color: var(--text-primary);\n margin: 1rem 0;\n resize: none;\n}\n\n.gradient-button {\n background: var(--primary-gradient);\n color: white;\n border: none;\n padding: 0.75rem 1.5rem;\n border-radius: 0.5rem;\n cursor: pointer;\n font-weight: 600;\n transition: opacity 0.2s;\n}\n\n.gradient-button:hover {\n opacity: 0.9;\n}\n\n.plot-container {\n background: var(--bg-secondary);\n border-radius: 1rem;\n padding: 1rem;\n aspect-ratio: 4/3;\n}\n\ncanvas {\n width: 100%;\n height: 100%;\n border-radius: 0.5rem;\n}\n\n.result-card {\n background: var(--bg-secondary);\n border-radius: 1rem;\n padding: 1.5rem;\n margin: 1rem auto;\n max-width: 800px;\n}\n\n.hidden {\n display: none;\n}\n\n@media (max-width: 768px) {\n .visualization {\n grid-template-columns: 1fr;\n }\n \n .hero h1 {\n font-size: 2.5rem;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const canvas = document.getElementById('pca-plot');\n const ctx = canvas.getContext('2d');\n const compareButton = document.getElementById('compare-button');\n const matchResult = document.getElementById('match-result');\n\n // Generate random PCA data points\n const points = Array.from({length: 200}, () => ({\n x: Math.random() * canvas.width,\n y: Math.random() * canvas.height,\n label: ''\n }));\n\n function drawPlot() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n \n // Draw axes\n ctx.strokeStyle = '#475569';\n ctx.beginPath();\n ctx.moveTo(canvas.width/2, 0);\n ctx.lineTo(canvas.width/2, canvas.height);\n ctx.moveTo(0, canvas.height/2);\n ctx.lineTo(canvas.width, canvas.height/2);\n ctx.stroke();\n\n // Draw points\n points.forEach(point => {\n ctx.beginPath();\n ctx.arc(point.x, point.y, 3, 0, Math.PI * 2);\n ctx.fillStyle = '#6366f1';\n ctx.fill();\n });\n }\n\n function animatePoint(x, y) {\n ctx.beginPath();\n ctx.arc(x, y, 6, 0, Math.PI * 2);\n ctx.fillStyle = '#a855f7';\n ctx.fill();\n ctx.strokeStyle = '#ffffff';\n ctx.stroke();\n }\n\n compareButton.addEventListener('click', () => {\n const input = document.getElementById('leader-input').value;\n if (!input) return;\n\n // Simulate analysis\n const randomPoint = points[Math.floor(Math.random() * points.length)];\n \n // Animate result\n drawPlot();\n animatePoint(randomPoint.x, randomPoint.y);\n \n // Show result\n matchResult.classList.remove('hidden');\n \n // Fictional leaders for demo\n const leaders = ['Napoleon Bonaparte', 'Julius Caesar', 'Alexander the Great', 'Genghis Khan'];\n matchResult.textContent = `Your leader most closely matches: ${leaders[Math.floor(Math.random() * leaders.length)]}`;\n });\n\n // Initial plot\n drawPlot();\n});\n---end---\n\nThis implementation creates a sleek, modern interface with a beautiful gradient design and interactive PCA plot. The main features include:\n\n1. A responsive layout that works well on both desktop and mobile\n2. A gradient-enhanced header with a clear purpose statement\n3. An interactive canvas showing 200 random data points representing historical leaders\n4. A textarea for user input with a gradient button for comparison\n5. Smooth animations when showing results\n6. A clean, dark theme with carefully chosen colors and typography\n\nThe design follows accessibility guidelines with proper contrast ratios and semantic HTML. The JavaScript provides basic interactivity with simulated data points and random matching for demonstration purposes. In a real implementation, you'd need to add actual PCA data and matching algorithms.\n\nThe CSS uses modern features like CSS variables, grid layout, and smooth transitions. The layout is fully responsive and adapts well to different screen sizes."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 902,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 1987
+ }
+ }
readme.scroll
Changed around line 1
+ # tyrant.scroll.pub
+
+ Prompt: website
+ Agent: claude
+ Model: claude-3-5-sonnet-20241022
+
+ ## User prompt
+ Build a website which shows a PCA plot of all bad historical world leaders in history. It should show about 200 randomly drawn dots. And then you should be able to describe a world leader and it will show you which leader from history is most like the leader you are running against. Show there should be one input. As much as possible above the fold. Make it look visually appealing. Cool gradients etc.
+
+ ## System prompt
+ You are an expert web developer. Create a website based on this request: "Build a website which shows a PCA plot of all bad historical world leaders in history. It should show about 200 randomly drawn dots. And then you should be able to describe a world leader and it will show you which leader from history is most like the leader you are running against. Show there should be one input. As much as possible above the fold. Make it look visually appealing. Cool gradients etc."
+
+ Requirements:
+ - Use only Scroll, CSS, and JavaScript (NO frameworks, NO external dependencies)
+ - Create clean, semantic HTML5
+ - Make it mobile-responsive
+ - Follow modern best practices and accessibility guidelines
+ - Keep it simple but professional
+ - Use only relative links and no external resources
+ - Do not put a copyright symbol or all rights reserved in the footer.
+ - Make it beautiful. Dazzling. Advanced used of CSS.
+
+ As a refresher, for doing the html body, Scroll is a whitespace based language that uses a single indented space to mark a line (aka particle) as a subparticle of a parent line.
+
+ For example:
+
+ header
+ class hero
+ nav
+ div Scroll
+ class logo
+ div
+ class nav-links
+ a Features
+ href #features
+ a Examples
+ href #examples
+ a Edit
+ href edit.html
+ a GitHub
+ class cta-button
+ href https://github.com/breck7/scroll
+ div
+ class hero-content
+ h1 Write Better with Scroll
+ p The extendible markup language that makes source beautiful and compiles to anything
+ a Get Started
+ class primary-button
+ href https://hub.scroll.pub/
+ main
+ section
+ id features
+ class features
+ h2 Why Scroll?
+ div
+ class feature-grid
+ div
+ class feature-card
+ div ⚡
+ class feature-icon
+ h3 Simple Syntax
+ p Like Markdown, but more powerful. No parentheses needed.
+ div
+ class feature-card
+ div 🧩
+ class feature-icon
+ h3 Extendible
+ p Build your own custom parsers.
+ div
+ class feature-card
+ div 🎨
+ class feature-icon
+ h3 Beautiful Output
+ p Create stunning documents with minimal effort.
+ div
+ class feature-card
+ div 🚀
+ class feature-icon
+ h3 Fast & Light
+ p Built on the efficient PPS Stack.
+ section
+ id examples
+ class code-demo
+ h2 See It In Action
+ div
+ class code-container
+ pre
+ class code-example
+ div
+ class code-output
+ footer
+ div
+ class footer-content
+ div
+ class footer-links
+ a Documentation
+ href https://scroll.pub/tutorial.html
+ a Community
+ href https://www.reddit.com/r/WorldWideScroll/
+ a Blog
+ href https://scroll.pub/blog
+ p Started by Breck Yunits. Evolved by a community.
+ https://twitter.com/breckyunits Breck Yunits
+ https://github.com/breck7/scroll/graphs/contributors community
+
+
+ First suggest a short, memorable domain name ending in scroll.pub that represents this website. Then provide the website files. Use this exact format:
+
+ ---domain---
+ (domainscroll.pub here)
+ ---index.scroll---
+ buildHtml
+ baseUrl https://(domainscroll.pub here)
+ metaTags
+ editButton /edit.html
+ title (Title here)
+ style.css
+
+ (body content here. no blank lines please.)
+
+ script.js
+ ---style.css---
+ (CSS content here)
+ ---script.js---
+ (JavaScript content here)
+ ---end---
script.js
Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const canvas = document.getElementById('pca-plot');
+ const ctx = canvas.getContext('2d');
+ const compareButton = document.getElementById('compare-button');
+ const matchResult = document.getElementById('match-result');
+
+ // Generate random PCA data points
+ const points = Array.from({length: 200}, () => ({
+ x: Math.random() * canvas.width,
+ y: Math.random() * canvas.height,
+ label: ''
+ }));
+
+ function drawPlot() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ // Draw axes
+ ctx.strokeStyle = '#475569';
+ ctx.beginPath();
+ ctx.moveTo(canvas.width/2, 0);
+ ctx.lineTo(canvas.width/2, canvas.height);
+ ctx.moveTo(0, canvas.height/2);
+ ctx.lineTo(canvas.width, canvas.height/2);
+ ctx.stroke();
+
+ // Draw points
+ points.forEach(point => {
+ ctx.beginPath();
+ ctx.arc(point.x, point.y, 3, 0, Math.PI * 2);
+ ctx.fillStyle = '#6366f1';
+ ctx.fill();
+ });
+ }
+
+ function animatePoint(x, y) {
+ ctx.beginPath();
+ ctx.arc(x, y, 6, 0, Math.PI * 2);
+ ctx.fillStyle = '#a855f7';
+ ctx.fill();
+ ctx.strokeStyle = '#ffffff';
+ ctx.stroke();
+ }
+
+ compareButton.addEventListener('click', () => {
+ const input = document.getElementById('leader-input').value;
+ if (!input) return;
+
+ // Simulate analysis
+ const randomPoint = points[Math.floor(Math.random() * points.length)];
+
+ // Animate result
+ drawPlot();
+ animatePoint(randomPoint.x, randomPoint.y);
+
+ // Show result
+ matchResult.classList.remove('hidden');
+
+ // Fictional leaders for demo
+ const leaders = ['Napoleon Bonaparte', 'Julius Caesar', 'Alexander the Great', 'Genghis Khan'];
+ matchResult.textContent = `Your leader most closely matches: ${leaders[Math.floor(Math.random() * leaders.length)]}`;
+ });
+
+ // Initial plot
+ drawPlot();
+ });
style.css
Changed around line 1
+ :root {
+ --primary-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
+ --surface-gradient: linear-gradient(to right, #ffffff05, #ffffff10);
+ --text-primary: #f8fafc;
+ --text-secondary: #94a3b8;
+ --bg-primary: #0f172a;
+ --bg-secondary: #1e293b;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: system-ui, -apple-system, sans-serif;
+ background-color: var(--bg-primary);
+ color: var(--text-primary);
+ line-height: 1.6;
+ }
+
+ .hero {
+ padding: 2rem;
+ text-align: center;
+ background: var(--surface-gradient);
+ backdrop-filter: blur(12px);
+ }
+
+ .hero h1 {
+ font-size: 3.5rem;
+ background: var(--primary-gradient);
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+ margin-bottom: 1rem;
+ }
+
+ .visualization {
+ max-width: 1200px;
+ margin: 2rem auto;
+ padding: 0 1rem;
+ display: grid;
+ grid-template-columns: 1fr 2fr;
+ gap: 2rem;
+ }
+
+ .input-container {
+ background: var(--bg-secondary);
+ padding: 1.5rem;
+ border-radius: 1rem;
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+ }
+
+ textarea {
+ width: 100%;
+ height: 150px;
+ background: var(--bg-primary);
+ border: 1px solid #334155;
+ border-radius: 0.5rem;
+ padding: 1rem;
+ color: var(--text-primary);
+ margin: 1rem 0;
+ resize: none;
+ }
+
+ .gradient-button {
+ background: var(--primary-gradient);
+ color: white;
+ border: none;
+ padding: 0.75rem 1.5rem;
+ border-radius: 0.5rem;
+ cursor: pointer;
+ font-weight: 600;
+ transition: opacity 0.2s;
+ }
+
+ .gradient-button:hover {
+ opacity: 0.9;
+ }
+
+ .plot-container {
+ background: var(--bg-secondary);
+ border-radius: 1rem;
+ padding: 1rem;
+ aspect-ratio: 4/3;
+ }
+
+ canvas {
+ width: 100%;
+ height: 100%;
+ border-radius: 0.5rem;
+ }
+
+ .result-card {
+ background: var(--bg-secondary);
+ border-radius: 1rem;
+ padding: 1.5rem;
+ margin: 1rem auto;
+ max-width: 800px;
+ }
+
+ .hidden {
+ display: none;
+ }
+
+ @media (max-width: 768px) {
+ .visualization {
+ grid-template-columns: 1fr;
+ }
+
+ .hero h1 {
+ font-size: 2.5rem;
+ }
+ }