/* plotgrapher.com */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #111827; color: #f3f4f6; font-family: 'Inter', sans-serif; font-weight: 400; line-height: 1.6; }
.hero { text-align: center; padding: 4rem 2rem 2rem; }
.brand { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.tagline { font-size: 0.8rem; color: #9ca3af; margin-top: 0.3rem; }
.chart-panel { background: #1f2937; border: 1px solid #374151; border-radius: 8px; padding: 1.25rem; }
.hero-chart { max-width: 400px; margin: 2rem auto 0; display: flex; gap: 0.5rem; }
.y-axis { display: flex; flex-direction: column; justify-content: space-between; font-family: 'Fira Code', monospace; font-size: 0.5rem; color: #6b7280; padding-right: 0.5rem; }
.bar-chart { flex: 1; display: flex; align-items: flex-end; gap: 8px; height: 180px; background: repeating-linear-gradient(0deg, transparent, transparent 35px, #374151 35px, #374151 36px); }
.bar { width: 40px; background: #3b82f6; border-radius: 4px 4px 0 0; position: relative; flex-shrink: 0; }
.bar.green { background: #22c55e; }
.bar.orange { background: #f97316; }
.bar.purple { background: #a855f7; }
.bar-label { font-family: 'Fira Code', monospace; font-size: 0.5rem; position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); color: #6b7280; }
.gallery { max-width: 480px; margin: 0 auto; padding: 2rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.chart-title { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 0.75rem; margin-bottom: 0.75rem; }
.line-chart, .scatter-chart { height: 120px; position: relative; background: repeating-linear-gradient(0deg, transparent, transparent 29px, #374151 29px, #374151 30px); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #3b82f6; position: absolute; }
.dot.green { background: #22c55e; }
.dot.orange { background: #f97316; }
.dot.purple { background: #a855f7; }
.legend { text-align: center; padding: 1.5rem; }
.legend-strip { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }
.legend-item { font-family: 'Fira Code', monospace; font-size: 0.55rem; display: flex; align-items: center; gap: 0.3rem; color: #9ca3af; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.legend-dot.blue { background: #3b82f6; }
.legend-dot.green { background: #22c55e; }
.legend-dot.orange { background: #f97316; }
.legend-dot.purple { background: #a855f7; }
.demo { text-align: center; padding: 3rem 2rem 4rem; }
.demo-text { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.1rem; color: #3b82f6; }
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }