.viz-root{--surface-1: rgba(255, 255, 255, .5);--ink-2: var(--ink-soft);--muted: var(--ink-soft);--border: var(--hairline);--app: #0f7a5a;--app-light: #d1fae5;--infra: #2563eb;--infra-light: #dbeafe;--org: #6d28d9;--org-light: #ede9fe;--on-dark: #ffffff;--active: #f59e0b}.viz-root *{box-sizing:border-box}.viz-root{padding:28px 20px 40px}.viz-root .viz-wrap{max-width:900px;margin:0 auto}.viz-root header.viz{text-align:center;margin-bottom:24px}.viz-root header.viz h1{font-size:24px;margin:0 0 8px;font-weight:650}.viz-root header.viz p.standfirst{color:var(--ink-2);font-size:14px;max-width:50ch;margin:0 auto}.viz-root .legend{display:flex;gap:18px;align-items:center;justify-content:center;font-size:12px;color:var(--ink-2);margin:16px 0 24px;flex-wrap:wrap}.viz-root .legend .key{display:inline-flex;align-items:center;gap:6px}.viz-root .legend .sw{width:12px;height:12px;border-radius:3px;display:inline-block}.viz-root .framework-selector{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:28px}.viz-root .fw-btn{background:var(--surface-1);border:1px solid var(--border);color:var(--ink-2);padding:8px 14px;border-radius:6px;font-size:12px;cursor:pointer;transition:all .2s ease}.viz-root .fw-btn:hover{border-color:var(--ink-2);color:var(--ink)}.viz-root .fw-btn.active{border-color:var(--active);background:#f59e0b1a;color:var(--ink);font-weight:600}.viz-root .three-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:32px}@media(max-width:600px){.viz-root .three-cols{grid-template-columns:1fr}}.viz-root .layer-col{background:var(--surface-1);border:1px solid var(--border);border-radius:12px;padding:24px 20px;text-align:center;transition:all .3s ease}.viz-root .layer-col h3{font-size:14px;margin:0 0 8px;font-weight:600;text-transform:uppercase;letter-spacing:.03em}.viz-root .layer-col .pct{font-size:56px;font-weight:700;margin:0;line-height:1;transition:all .3s ease}.viz-root .layer-col .count{font-size:13px;color:var(--muted);margin:8px 0 0;transition:all .3s ease}.viz-root .layer-col .bar{height:8px;border-radius:4px;margin:16px 0;transition:all .3s ease}.viz-root .layer-col.app h3,.viz-root .layer-col.app .pct{color:var(--app)}.viz-root .layer-col.app .bar{background:var(--app)}.viz-root .layer-col.infra h3,.viz-root .layer-col.infra .pct{color:var(--infra)}.viz-root .layer-col.infra .bar{background:var(--infra)}.viz-root .layer-col.org h3,.viz-root .layer-col.org .pct{color:var(--org)}.viz-root .layer-col.org .bar{background:var(--org)}.viz-root .examples{text-align:left;margin-top:16px;padding-top:16px;border-top:1px solid var(--hairline)}.viz-root .examples-title{font-size:11px;color:var(--muted);margin:0 0 8px;text-transform:uppercase;letter-spacing:.05em}.viz-root .examples ul{margin:0;padding:0 0 0 16px;font-size:12px;color:var(--ink-2)}.viz-root .examples li{margin-bottom:4px}.viz-root .context{text-align:center;font-size:13px;color:var(--ink-2);margin-bottom:32px;min-height:20px}.viz-root .context strong{color:var(--ink)}.viz-root .comparison{background:var(--surface-1);border:1px solid var(--border);border-radius:12px;padding:20px 24px}.viz-root .comparison h2{font-size:14px;margin:0 0 16px;font-weight:600;color:var(--ink-2)}.viz-root .stacked-bars{width:100%}.viz-root .bar-row{display:flex;align-items:center;margin-bottom:10px;cursor:pointer;padding:4px 0;border-radius:4px;transition:background .15s}.viz-root .bar-row:hover{background:var(--hairline)}.viz-root .bar-row.active{background:#f59e0b1a}.viz-root .bar-label{width:110px;font-size:12px;color:var(--ink-2);flex-shrink:0;padding-left:8px}.viz-root .bar-row.active .bar-label{color:var(--ink);font-weight:600}.viz-root .bar-track{flex:1;height:20px;display:flex;border-radius:4px;overflow:hidden;margin-right:8px}.viz-root .bar-seg{display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;color:var(--on-dark);min-width:0;transition:width .3s ease}.viz-root .bar-seg.app{background:var(--app)}.viz-root .bar-seg.infra{background:var(--infra)}.viz-root .bar-seg.org{background:var(--org)}.viz-root .bar-seg span{color:#fff}.viz-root .attribution{max-width:70ch;margin:.75rem auto 0;font-size:.72rem;line-height:1.5;color:var(--muted)}.viz-root footer.viz{margin-top:32px;text-align:center;font-size:11px;color:var(--muted)}