index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://iriseda.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Iris Dataset EDA
+ style.css
+ header
+ class hero
+ nav
+ div IrisEDA
+ class logo
+ div
+ class nav-links
+ a Overview
+ href #overview
+ a Dataset
+ href #dataset
+ a EDA
+ href #eda
+ a Visualizations
+ href #visualizations
+ div
+ class hero-content
+ h1 Iris Dataset Exploratory Data Analysis
+ p Understanding flower species through data visualization and statistical analysis
+ a View Code
+ class primary-button
+ href #code
+ main
+ section
+ id overview
+ class overview
+ h2 Project Overview
+ p This project performs Exploratory Data Analysis (EDA) on the Iris dataset, containing information about three species of iris flowers (Setosa, Versicolor, and Virginica) based on four numerical features.
+ div
+ class stats-grid
+ div
+ class stat-card
+ h3 150
+ p Samples
+ div
+ class stat-card
+ h3 4
+ p Features
+ div
+ class stat-card
+ h3 3
+ p Species
+ section
+ id dataset
+ class dataset
+ h2 Dataset Information
+ p The Iris dataset is a well-known dataset in machine learning and statistics, built into Seaborn.
+ div
+ class feature-table
+ table
+ thead
+ tr
+ th Feature
+ th Description
+ tbody
+ tr
+ td Sepal Length
+ td Length of sepal in cm
+ tr
+ td Sepal Width
+ td Width of sepal in cm
+ tr
+ td Petal Length
+ td Length of petal in cm
+ tr
+ td Petal Width
+ td Width of petal in cm
+ section
+ id eda
+ class eda
+ h2 Exploratory Data Analysis
+ div
+ class eda-steps
+ div
+ class step-card
+ h3 1. Data Preprocessing
+ ul
+ li Checking for missing values
+ li Summary statistics
+ li Understanding distributions
+ div
+ class step-card
+ h3 2. Data Visualization
+ ul
+ li Pairplot - Feature relationships
+ li Boxplot - Outlier detection
+ li Heatmap - Correlation analysis
+ section
+ id visualizations
+ class visualizations
+ h2 Data Visualizations
+ div
+ class viz-container
+ div
+ class viz-card
+ h3 Pairplot
+ div
+ class viz-placeholder
+ id pairplot
+ div
+ class viz-card
+ h3 Boxplot
+ div
+ class viz-placeholder
+ id boxplot
+ div
+ class viz-card
+ h3 Heatmap
+ div
+ class viz-placeholder
+ id heatmap
+ section
+ id code
+ class code
+ h2 Implementation Code
+ pre
+ class code-block
+ code # Python code would appear here
+ class language-python
+ footer
+ div
+ class footer-content
+ p A data science exploration project using the Iris dataset
+ script.js
prompt.json
Changed around line 1
+ {
+ "id": "480c3ee4-0277-4727-beed-543e91b3c8b6",
+ "object": "chat.completion",
+ "created": 1747803694,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "Here's my suggestion for the domain and the complete website files:\n\n---domain---\niriseda.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://iriseda.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Iris Dataset EDA\nstyle.css\nheader\n class hero\n nav\n div IrisEDA\n class logo\n div\n class nav-links\n a Overview\n href #overview\n a Dataset\n href #dataset\n a EDA\n href #eda\n a Visualizations\n href #visualizations\n div\n class hero-content\n h1 Iris Dataset Exploratory Data Analysis\n p Understanding flower species through data visualization and statistical analysis\n a View Code\n class primary-button\n href #code\nmain\n section\n id overview\n class overview\n h2 Project Overview\n p This project performs Exploratory Data Analysis (EDA) on the Iris dataset, containing information about three species of iris flowers (Setosa, Versicolor, and Virginica) based on four numerical features.\n div\n class stats-grid\n div\n class stat-card\n h3 150\n p Samples\n div\n class stat-card\n h3 4\n p Features\n div\n class stat-card\n h3 3\n p Species\n section\n id dataset\n class dataset\n h2 Dataset Information\n p The Iris dataset is a well-known dataset in machine learning and statistics, built into Seaborn.\n div\n class feature-table\n table\n thead\n tr\n th Feature\n th Description\n tbody\n tr\n td Sepal Length\n td Length of sepal in cm\n tr\n td Sepal Width\n td Width of sepal in cm\n tr\n td Petal Length\n td Length of petal in cm\n tr\n td Petal Width\n td Width of petal in cm\n section\n id eda\n class eda\n h2 Exploratory Data Analysis\n div\n class eda-steps\n div\n class step-card\n h3 1. Data Preprocessing\n ul\n li Checking for missing values\n li Summary statistics\n li Understanding distributions\n div\n class step-card\n h3 2. Data Visualization\n ul\n li Pairplot - Feature relationships\n li Boxplot - Outlier detection\n li Heatmap - Correlation analysis\n section\n id visualizations\n class visualizations\n h2 Data Visualizations\n div\n class viz-container\n div\n class viz-card\n h3 Pairplot\n div\n class viz-placeholder\n id pairplot\n div\n class viz-card\n h3 Boxplot\n div\n class viz-placeholder\n id boxplot\n div\n class viz-card\n h3 Heatmap\n div\n class viz-placeholder\n id heatmap\n section\n id code\n class code\n h2 Implementation Code\n pre\n class code-block\n code # Python code would appear here\n class language-python\nfooter\n div\n class footer-content\n p A data science exploration project using the Iris dataset\nscript.js\n---style.css---\n:root {\n --primary: #6a4c93;\n --secondary: #8a5a44;\n --accent: #f8bbd0;\n --light: #f5f5f5;\n --dark: #333;\n --text: #444;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n\nbody {\n line-height: 1.6;\n color: var(--text);\n background-color: var(--light);\n}\n\nheader.hero {\n background: linear-gradient(135deg, var(--primary), #8e44ad);\n color: white;\n padding: 2rem 0;\n text-align: center;\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 2rem;\n margin-bottom: 3rem;\n}\n\n.logo {\n font-size: 1.8rem;\n font-weight: bold;\n}\n\n.nav-links {\n display: flex;\n gap: 1.5rem;\n}\n\n.nav-links a {\n color: white;\n text-decoration: none;\n transition: opacity 0.3s;\n}\n\n.nav-links a:hover {\n opacity: 0.8;\n}\n\n.hero-content {\n max-width: 800px;\n margin: 0 auto;\n padding: 0 1rem;\n}\n\n.hero-content h1 {\n font-size: 2.5rem;\n margin-bottom: 1rem;\n}\n\n.hero-content p {\n font-size: 1.2rem;\n margin-bottom: 2rem;\n opacity: 0.9;\n}\n\n.primary-button {\n display: inline-block;\n background-color: var(--accent);\n color: var(--dark);\n padding: 0.8rem 1.5rem;\n border-radius: 50px;\n text-decoration: none;\n font-weight: bold;\n transition: transform 0.3s, box-shadow 0.3s;\n}\n\n.primary-button:hover {\n transform: translateY(-3px);\n box-shadow: 0 10px 20px rgba(0,0,0,0.1);\n}\n\nsection {\n padding: 4rem 1rem;\n max-width: 1200px;\n margin: 0 auto;\n}\n\nh2 {\n font-size: 2rem;\n margin-bottom: 2rem;\n color: var(--primary);\n text-align: center;\n}\n\n.stats-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.stat-card {\n background: white;\n padding: 2rem;\n border-radius: 10px;\n text-align: center;\n box-shadow: 0 5px 15px rgba(0,0,0,0.05);\n transition: transform 0.3s;\n}\n\n.stat-card:hover {\n transform: translateY(-5px);\n}\n\n.stat-card h3 {\n font-size: 2.5rem;\n color: var(--primary);\n}\n\n.feature-table {\n overflow-x: auto;\n margin-top: 2rem;\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n background: white;\n border-radius: 10px;\n overflow: hidden;\n box-shadow: 0 5px 15px rgba(0,0,0,0.05);\n}\n\nth, td {\n padding: 1rem;\n text-align: left;\n border-bottom: 1px solid #eee;\n}\n\nth {\n background-color: var(--primary);\n color: white;\n}\n\ntr:hover {\n background-color: #f9f9f9;\n}\n\n.eda-steps {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.step-card {\n background: white;\n padding: 2rem;\n border-radius: 10px;\n box-shadow: 0 5px 15px rgba(0,0,0,0.05);\n}\n\n.step-card h3 {\n color: var(--secondary);\n margin-bottom: 1rem;\n}\n\n.step-card ul {\n padding-left: 1.5rem;\n}\n\n.viz-container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 2rem;\n margin-top: 2rem;\n}\n\n.viz-card {\n background: white;\n padding: 1.5rem;\n border-radius: 10px;\n box-shadow: 0 5px 15px rgba(0,0,0,0.05);\n}\n\n.viz-placeholder {\n height: 250px;\n background: #f5f5f5;\n border-radius: 8px;\n margin-top: 1rem;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #888;\n}\n\n.code-block {\n background: #2d2d2d;\n color: #f8f8f2;\n padding: 1.5rem;\n border-radius: 8px;\n overflow-x: auto;\n margin-top: 2rem;\n}\n\nfooter {\n background: var(--dark);\n color: white;\n text-align: center;\n padding: 2rem 1rem;\n}\n\n.footer-content {\n max-width: 800px;\n margin: 0 auto;\n}\n\n@media (max-width: 768px) {\n nav {\n flex-direction: column;\n gap: 1rem;\n }\n \n .hero-content h1 {\n font-size: 2rem;\n }\n \n section {\n padding: 2rem 1rem;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n // Create simple visualizations in the placeholder divs\n const vizContainers = {\n pairplot: createDummyViz('Pairplot showing relationships between features'),\n boxplot: createDummyViz('Boxplot showing distribution of each feature'),\n heatmap: createDummyViz('Heatmap showing feature correlations')\n };\n \n Object.keys(vizContainers).forEach(id => {\n const container = document.getElementById(id);\n if (container) {\n container.innerHTML = vizContainers[id];\n }\n });\n \n // Add smooth scrolling for navigation links\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function(e) {\n e.preventDefault();\n const targetId = this.getAttribute('href');\n const targetElement = document.querySelector(targetId);\n \n if (targetElement) {\n targetElement.scrollIntoView({\n behavior: 'smooth'\n });\n }\n });\n });\n \n // Add animation to stats cards on scroll\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.opacity = 1;\n entry.target.style.transform = 'translateY(0)';\n }\n });\n }, { threshold: 0.1 });\n \n document.querySelectorAll('.stat-card').forEach(card => {\n card.style.opacity = 0;\n card.style.transform = 'translateY(20px)';\n card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';\n observer.observe(card);\n });\n});\n\nfunction createDummyViz(text) {\n const svg = ``;\n return svg;\n}\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 1064,
+ "completion_tokens": 2528,
+ "total_tokens": 3592,
+ "prompt_tokens_details": {
+ "cached_tokens": 0
+ },
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 1064
+ },
+ "system_fingerprint": "fp_8802369eaa_prod0425fp8"
+ }
readme.scroll
Changed around line 1
+ # iriseda.scroll.pub
+
+ Prompt: website
+ Agent: deepseek
+ Model: deepseek-chat
+
+ ## User prompt
+ # 🌸 Iris Dataset - Exploratory Data Analysis (EDA) ## 📌 Project Overview This project performs **Exploratory Data Analysis (EDA)** on the **Iris dataset**, a well-known dataset in machine learning and statistics. The dataset contains information about three species of iris flowers (**Setosa, Versicolor, and Virginica**) based on four numerical features: - **Sepal Length** - **Sepal Width** - **Petal Length** - **Petal Width** The goal of this project is to **understand the data distribution, visualize feature relationships, and extract key insights** using Python libraries such as **Pandas, NumPy, Matplotlib, and Seaborn**. ## 📊 Dataset Information - **Dataset:** Built-in Seaborn `iris` dataset - **Samples:** 150 - **Features:** 4 numerical features - **Classes:** 3 flower species 🔗 **Dataset Source:** [Seaborn's GitHub Repository](https://github.com/mwaskom/seaborn-data) ## 🛠️ Libraries Used - `pandas` → Data manipulation - `numpy` → Numerical operations - `matplotlib` → Basic data visualization - `seaborn` → Advanced statistical visualization ## 📌 Exploratory Data Analysis (EDA) ### ✅ Step 1: Data Preprocessing ✔️ Checking for missing values ✔️ Summary statistics ✔️ Understanding feature distributions ### ✅ Step 2: Data Visualization 📊 **Pairplot** → Relationship between different features 📉 **Boxplot** → Identifying outliers in the dataset 🔥 **Heatmap** → Correlation between features
+
+ ## System prompt
+ You are an expert web developer. Create a website based on this request: " # 🌸 Iris Dataset - Exploratory Data Analysis (EDA) ## 📌 Project Overview This project performs **Exploratory Data Analysis (EDA)** on the **Iris dataset**, a well-known dataset in machine learning and statistics. The dataset contains information about three species of iris flowers (**Setosa, Versicolor, and Virginica**) based on four numerical features: - **Sepal Length** - **Sepal Width** - **Petal Length** - **Petal Width** The goal of this project is to **understand the data distribution, visualize feature relationships, and extract key insights** using Python libraries such as **Pandas, NumPy, Matplotlib, and Seaborn**. ## 📊 Dataset Information - **Dataset:** Built-in Seaborn `iris` dataset - **Samples:** 150 - **Features:** 4 numerical features - **Classes:** 3 flower species 🔗 **Dataset Source:** [Seaborn's GitHub Repository](https://github.com/mwaskom/seaborn-data) ## 🛠️ Libraries Used - `pandas` → Data manipulation - `numpy` → Numerical operations - `matplotlib` → Basic data visualization - `seaborn` → Advanced statistical visualization ## 📌 Exploratory Data Analysis (EDA) ### ✅ Step 1: Data Preprocessing ✔️ Checking for missing values ✔️ Summary statistics ✔️ Understanding feature distributions ### ✅ Step 2: Data Visualization 📊 **Pairplot** → Relationship between different features 📉 **Boxplot** → Identifying outliers in the dataset 🔥 **Heatmap** → Correlation between features "
+
+ 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', function() {
+ // Create simple visualizations in the placeholder divs
+ const vizContainers = {
+ pairplot: createDummyViz('Pairplot showing relationships between features'),
+ boxplot: createDummyViz('Boxplot showing distribution of each feature'),
+ heatmap: createDummyViz('Heatmap showing feature correlations')
+ };
+
+ Object.keys(vizContainers).forEach(id => {
+ const container = document.getElementById(id);
+ if (container) {
+ container.innerHTML = vizContainers[id];
+ }
+ });
+
+ // Add smooth scrolling for navigation links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function(e) {
+ e.preventDefault();
+ const targetId = this.getAttribute('href');
+ const targetElement = document.querySelector(targetId);
+
+ if (targetElement) {
+ targetElement.scrollIntoView({
+ behavior: 'smooth'
+ });
+ }
+ });
+ });
+
+ // Add animation to stats cards on scroll
+ const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.style.opacity = 1;
+ entry.target.style.transform = 'translateY(0)';
+ }
+ });
+ }, { threshold: 0.1 });
+
+ document.querySelectorAll('.stat-card').forEach(card => {
+ card.style.opacity = 0;
+ card.style.transform = 'translateY(20px)';
+ card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
+ observer.observe(card);
+ });
+ });
+
+ function createDummyViz(text) {
+ const svg = `
+
+ ${text}
+ `;
+ return svg;
+ }
style.css
Changed around line 1
+ :root {
+ --primary: #6a4c93;
+ --secondary: #8a5a44;
+ --accent: #f8bbd0;
+ --light: #f5f5f5;
+ --dark: #333;
+ --text: #444;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ }
+
+ body {
+ line-height: 1.6;
+ color: var(--text);
+ background-color: var(--light);
+ }
+
+ header.hero {
+ background: linear-gradient(135deg, var(--primary), #8e44ad);
+ color: white;
+ padding: 2rem 0;
+ text-align: center;
+ }
+
+ nav {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 2rem;
+ margin-bottom: 3rem;
+ }
+
+ .logo {
+ font-size: 1.8rem;
+ font-weight: bold;
+ }
+
+ .nav-links {
+ display: flex;
+ gap: 1.5rem;
+ }
+
+ .nav-links a {
+ color: white;
+ text-decoration: none;
+ transition: opacity 0.3s;
+ }
+
+ .nav-links a:hover {
+ opacity: 0.8;
+ }
+
+ .hero-content {
+ max-width: 800px;
+ margin: 0 auto;
+ padding: 0 1rem;
+ }
+
+ .hero-content h1 {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+ }
+
+ .hero-content p {
+ font-size: 1.2rem;
+ margin-bottom: 2rem;
+ opacity: 0.9;
+ }
+
+ .primary-button {
+ display: inline-block;
+ background-color: var(--accent);
+ color: var(--dark);
+ padding: 0.8rem 1.5rem;
+ border-radius: 50px;
+ text-decoration: none;
+ font-weight: bold;
+ transition: transform 0.3s, box-shadow 0.3s;
+ }
+
+ .primary-button:hover {
+ transform: translateY(-3px);
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+ }
+
+ section {
+ padding: 4rem 1rem;
+ max-width: 1200px;
+ margin: 0 auto;
+ }
+
+ h2 {
+ font-size: 2rem;
+ margin-bottom: 2rem;
+ color: var(--primary);
+ text-align: center;
+ }
+
+ .stats-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+ }
+
+ .stat-card {
+ background: white;
+ padding: 2rem;
+ border-radius: 10px;
+ text-align: center;
+ box-shadow: 0 5px 15px rgba(0,0,0,0.05);
+ transition: transform 0.3s;
+ }
+
+ .stat-card:hover {
+ transform: translateY(-5px);
+ }
+
+ .stat-card h3 {
+ font-size: 2.5rem;
+ color: var(--primary);
+ }
+
+ .feature-table {
+ overflow-x: auto;
+ margin-top: 2rem;
+ }
+
+ table {
+ width: 100%;
+ border-collapse: collapse;
+ background: white;
+ border-radius: 10px;
+ overflow: hidden;
+ box-shadow: 0 5px 15px rgba(0,0,0,0.05);
+ }
+
+ th, td {
+ padding: 1rem;
+ text-align: left;
+ border-bottom: 1px solid #eee;
+ }
+
+ th {
+ background-color: var(--primary);
+ color: white;
+ }
+
+ tr:hover {
+ background-color: #f9f9f9;
+ }
+
+ .eda-steps {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+ }
+
+ .step-card {
+ background: white;
+ padding: 2rem;
+ border-radius: 10px;
+ box-shadow: 0 5px 15px rgba(0,0,0,0.05);
+ }
+
+ .step-card h3 {
+ color: var(--secondary);
+ margin-bottom: 1rem;
+ }
+
+ .step-card ul {
+ padding-left: 1.5rem;
+ }
+
+ .viz-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+ margin-top: 2rem;
+ }
+
+ .viz-card {
+ background: white;
+ padding: 1.5rem;
+ border-radius: 10px;
+ box-shadow: 0 5px 15px rgba(0,0,0,0.05);
+ }
+
+ .viz-placeholder {
+ height: 250px;
+ background: #f5f5f5;
+ border-radius: 8px;
+ margin-top: 1rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #888;
+ }
+
+ .code-block {
+ background: #2d2d2d;
+ color: #f8f8f2;
+ padding: 1.5rem;
+ border-radius: 8px;
+ overflow-x: auto;
+ margin-top: 2rem;
+ }
+
+ footer {
+ background: var(--dark);
+ color: white;
+ text-align: center;
+ padding: 2rem 1rem;
+ }
+
+ .footer-content {
+ max-width: 800px;
+ margin: 0 auto;
+ }
+
+ @media (max-width: 768px) {
+ nav {
+ flex-direction: column;
+ gap: 1rem;
+ }
+
+ .hero-content h1 {
+ font-size: 2rem;
+ }
+
+ section {
+ padding: 2rem 1rem;
+ }
+ }