/* ppuzzle.dev */
* { 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; }
.gradient-bar { height: 3px; background: linear-gradient(90deg, #3b82f6, #8b5cf6); }
.overview { text-align: center; padding: 4rem 2rem 3rem; }
.puzzle-icon { display: inline-block; width: 20px; height: 20px; clip-path: polygon(0 0, 70% 0, 70% 30%, 100% 30%, 100% 100%, 30% 100%, 30% 70%, 0 70%); background: #3b82f6; margin-bottom: 1rem; }
.brand { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: clamp(1.8rem, 4vw, 2.5rem); }
.timestamp { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; color: #4b5563; margin-top: 0.3rem; }
.key-metric { margin-top: 2rem; }
.progress-ring { width: 100px; height: 100px; border-radius: 50%; background: conic-gradient(#3b82f6 0% 73%, #1f2937 73% 100%); margin: 0 auto; display: flex; align-items: center; justify-content: center; position: relative; }
.progress-ring::before { content: ''; position: absolute; width: 76px; height: 76px; border-radius: 50%; background: #111827; }
.ring-value { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 1.5rem; position: relative; z-index: 1; }
.metric-label { font-size: 0.75rem; color: #9ca3af; margin-top: 0.8rem; }
.analysis { max-width: 480px; margin: 0 auto; padding: 2rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.panel { background: #1f2937; border: 1px solid #374151; border-radius: 8px; padding: 1.2rem; }
.panel-title { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.8rem; }
.data-bar { height: 16px; background: #374151; border-radius: 4px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 4px; }
.bar-fill.blue { background: #3b82f6; }
.bar-fill.purple { background: #8b5cf6; }
.bar-label { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: #9ca3af; margin-top: 0.4rem; }
.comparison { max-width: 480px; margin: 0 auto; padding: 2rem 1.5rem; }
.section-title { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1rem; margin-bottom: 1rem; }
.compare-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }
.compare-card { background: #1f2937; border: 1px solid #374151; border-radius: 8px; padding: 1rem; text-align: center; }
.region-name { font-size: 0.65rem; color: #9ca3af; margin-bottom: 0.3rem; }
.region-score { font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; font-weight: 500; }
.region-score.green { color: #22c55e; }
.region-score.red { color: #ef4444; }
.summary { max-width: 480px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.summary-text { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1rem; text-align: center; color: #9ca3af; }
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }