.data-modes-container{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:100%}.data-mode-demo{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:8px;border:2px solid var(--color-text, #333);background:var(--color-background-neutral, #f5f5f5);min-height:70px;position:relative;box-shadow:inset 1px 1px #fffc,inset -1px -1px #0000004d}.data-mode-demo.persistent{border-color:#2e8b57}.data-mode-demo.persistent .mode-label,.data-mode-demo.persistent .mode-value{color:#2e8b57}.data-mode-demo.awareness{border-color:#ff6b35}.data-mode-demo.awareness .mode-label,.data-mode-demo.awareness .mode-value{color:#ff6b35}.data-mode-demo .mode-value{font-size:1.4em;font-weight:700;line-height:1}.data-mode-demo .large-number-display{display:flex;flex-direction:column;align-items:center;line-height:1}.data-mode-demo .large-number-display .number-main{font-size:.9em}.data-mode-demo .large-number-display .number-suffix{font-size:.5em;opacity:.8}#viewCount{width:auto!important;border:none!important;background:none!important;font-size:1.4em;font-weight:700;line-height:1;color:#2e8b57;text-align:center}#viewCount .mode-description{font-size:.7em;color:var(--color-text, #333);margin-top:2px}.modes-separator{font-size:.9em;color:var(--color-text-translucent, rgba(51, 51, 51, .5));font-weight:700}.user-dots{display:flex;gap:3px;margin-top:4px;flex-wrap:wrap;justify-content:center}.user-dot{width:8px;height:8px;border-radius:50%;border:1px solid rgba(0,0,0,.3);animation:pulse-dot 2s infinite}.user-dot:first-child{border:1px solid #000;box-shadow:0 0 3px #00000080}.user-dot-overflow{width:16px;height:8px;background:var(--color-text-translucent, rgba(51, 51, 51, .5));color:#fff;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.5em;font-family:Courier New,monospace;font-weight:700;animation:pulse-dot 2s infinite}@keyframes pulse-dot{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.8}}