.dataviz-page{max-width:1200px;min-height:100vh;margin:0 auto;padding:4rem 1.5rem 6rem}@media (max-width:768px){.dataviz-page{padding:3rem 1rem 4rem}}.dataviz-header{margin-bottom:4rem}.dataviz-header .dataviz-eyebrow{font-family:var(--font-mono),"Fira Code",monospace;color:#8b5cf6;letter-spacing:.08em;text-transform:uppercase;align-items:center;gap:.5rem;margin-bottom:1rem;font-size:.875rem;display:inline-flex}.dataviz-header .dataviz-eyebrow:before{content:"//";opacity:.6}.dataviz-header h1{color:#eaeaea;margin:0 0 1rem;font-size:clamp(2rem,5vw,3rem);font-weight:700;line-height:1.1}.dataviz-header p{color:#eaeaea99;max-width:560px;margin:0;font-size:1.125rem;line-height:1.6}.demo-section{background:#111118;border:1px solid #ffffff14;border-radius:1rem;margin-bottom:4rem;transition:border-color .25s;overflow:hidden}.demo-section:hover{border-color:#8b5cf633}.demo-header{border-bottom:1px solid #ffffff0a;justify-content:space-between;align-items:flex-start;gap:1.5rem;padding:2rem;display:flex}@media (max-width:640px){.demo-header{flex-direction:column}}.demo-meta .demo-number{font-family:var(--font-mono),"Fira Code",monospace;color:#8b5cf6;opacity:.7;margin-bottom:.25rem;font-size:.875rem}.demo-meta h2{color:#eaeaea;margin:0 0 .5rem;font-size:1.25rem;font-weight:600}.demo-meta p{color:#eaeaea99;margin:0;font-size:.875rem;line-height:1.6}.demo-tech-badge{font-family:var(--font-mono),"Fira Code",monospace;color:#8b5cf6;background:#8b5cf61a;border:1px solid #8b5cf640;border-radius:9999px;flex-shrink:0;align-items:center;gap:.5rem;padding:.5rem .75rem;font-size:.75rem;display:inline-flex}.demo-tech-badge:before{content:"⬡";font-size:.65rem}.demo-body{padding:2rem}@media (max-width:640px){.demo-body{padding:1.5rem 1rem}}.source-toggle{cursor:pointer;font-family:var(--font-mono),"Fira Code",monospace;color:#eaeaea99;text-align:left;background:#0003;border:none;border-top:1px solid #ffffff0a;align-items:center;gap:.5rem;width:100%;padding:.75rem 2rem;font-size:.875rem;transition:color .15s;display:flex}.source-toggle:hover{color:#8b5cf6}.source-toggle .toggle-icon{transition:transform .25s;display:inline-block}.source-toggle .toggle-icon.open{transform:rotate(90deg)}.source-toggle .source-toggle-file{font-family:var(--font-mono),"Fira Code",monospace;color:#8b5cf6;opacity:.7;font-size:.75rem}.source-code-block{border-top:1px solid #ffffff0a;max-height:0;transition:max-height .4s;overflow:hidden}.source-code-block.visible{max-height:600px;overflow-y:auto}.source-code-block pre{font-family:var(--font-mono),"Fira Code",monospace;color:#eaeaea99;white-space:pre;background:#0000004d;margin:0;padding:1.5rem 2rem;font-size:.8rem;line-height:1.7;overflow-x:auto}@media (max-width:640px){.source-code-block pre{padding:1rem;font-size:.75rem}}.source-code-block .kw{color:#c792ea}.source-code-block .fn{color:#82aaff}.source-code-block .str{color:#c3e88d}.source-code-block .num{color:#f78c6c}.source-code-block .cmt{color:#eaeaea59;font-style:italic}.analytics-dashboard{flex-direction:column;gap:1.5rem;display:flex}.kpi-row{grid-template-columns:repeat(4,1fr);gap:1rem;display:grid}@media (max-width:768px){.kpi-row{grid-template-columns:repeat(2,1fr)}}@media (max-width:480px){.kpi-row{grid-template-columns:1fr 1fr}}.kpi-card{background:#1b1b28;border:1px solid #ffffff14;border-radius:.75rem;flex-direction:column;gap:.5rem;padding:1.25rem 1.5rem;transition:border-color .15s,box-shadow .15s;display:flex}.kpi-card:hover{border-color:#8b5cf64d;box-shadow:0 8px 32px #0009,0 0 0 1px #8b5cf633}.kpi-label{color:#eaeaea99;font-size:.875rem;font-weight:500}.kpi-value{color:#eaeaea;font-variant-numeric:tabular-nums;font-size:1.5rem;font-weight:700}@media (max-width:480px){.kpi-value{font-size:1.2rem}}.kpi-value.accent{color:#8b5cf6}.period-filters{flex-wrap:wrap;gap:.5rem;display:flex}.period-btn{color:#eaeaea99;font-size:.875rem;font-family:var(--font-mono),"Fira Code",monospace;cursor:pointer;background:0 0;border:1px solid #ffffff14;border-radius:9999px;padding:.5rem 1rem;transition:all .15s}.period-btn:hover{color:#eaeaea;border-color:#8b5cf6}.period-btn.active{color:#8b5cf6;background:#8b5cf626;border-color:#8b5cf6;font-weight:600}.chart-block{background:#1b1b28;border:1px solid #ffffff14;border-radius:.75rem;padding:1.25rem 1.5rem}.chart-title{color:#eaeaea99;text-transform:uppercase;letter-spacing:.06em;font-size:.875rem;font-weight:600;font-family:var(--font-mono),"Fira Code",monospace;margin:0 0 1rem}.chart-wrap{position:relative}.network-legend{font-family:var(--font-mono),"Fira Code",monospace;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;margin-bottom:1.25rem;font-size:.75rem;display:flex}.legend-item{color:#eaeaea99;text-transform:capitalize;align-items:center;gap:.5rem;display:flex}.legend-dot{border-radius:9999px;flex-shrink:0;width:8px;height:8px}.legend-hint{color:#eaeaea80;margin-left:auto;font-size:.7rem}@media (max-width:640px){.legend-hint{display:none}}.choropleth-legend{font-family:var(--font-mono),"Fira Code",monospace;align-items:center;gap:.75rem;margin-bottom:1.25rem;font-size:.75rem;display:flex}.legend-label{color:#eaeaea99;white-space:nowrap}.legend-gradient{background:linear-gradient(90deg,#8b5cf614,#8b5cf6f2);border:1px solid #ffffff14;border-radius:9999px;flex-shrink:0;width:140px;height:10px}.legend-unit{color:#eaeaea80;margin-left:.5rem;font-size:.7rem}@media (max-width:640px){.legend-unit{display:none}}.d3-tooltip{pointer-events:none;color:#eaeaea;z-index:10;white-space:nowrap;background:#1b1b28;border:1px solid #8b5cf666;border-radius:.5rem;flex-direction:column;gap:.25rem;padding:.75rem 1rem;font-size:.875rem;display:flex;position:absolute;box-shadow:0 8px 24px #0006}.d3-tooltip strong{color:#8b5cf6;margin-bottom:.25rem;font-weight:600}.d3-tooltip span{color:#eaeaea99}