/* monopole.city */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0a0f1a; color: #e0e0e0; font-family: 'Inter', sans-serif; font-weight: 400; line-height: 1.6; }
.control-label { font-family: 'JetBrains Mono', monospace; font-size: 0.55rem; color: #22d3ee; text-align: center; padding: 0.75rem; letter-spacing: 0.15em; }
.hero { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; position: relative; padding: 2rem; }
.skyline { display: flex; align-items: flex-end; gap: 3px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
.building { background: #111827; border: 1px solid #1e293b; }
.hero-content { position: relative; z-index: 1; text-align: center; margin-bottom: 3rem; }
.brand { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(2rem, 6vw, 3.5rem); letter-spacing: 0.05em; }
.population { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: #22d3ee; margin-top: 0.5rem; }
.districts { max-width: 560px; margin: 0 auto; padding: 3rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.district-panel { background: #111827; padding: 1.25rem; border-radius: 4px; }
.cyan-header { border-top: 3px solid #22d3ee; }
.amber-header { border-top: 3px solid #f59e0b; }
.green-header { border-top: 3px solid #22c55e; }
.district-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; }
.district-metrics { display: flex; flex-wrap: wrap; gap: 1rem; }
.metric { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: #22d3ee; }
.city-grid { text-align: center; padding: 3rem 2rem; }
.grid-map { display: inline-grid; grid-template-columns: repeat(12, 1fr); gap: 2px; }
.block { width: 20px; height: 20px; background: #1e293b; display: inline-block; }
.block.active { background: #22c55e; animation: pulse 3s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.shutdown { text-align: center; padding: 4rem 2rem; }
.close-text { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: #374151; }
.footer-brand { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.6rem; color: #1e293b; display: block; margin-top: 0.5rem; }
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }