.visualization-player{box-sizing:border-box;width:100%;max-width:100%;overflow:hidden}.visualization-container{background:var(--color-gray-900);border:1px solid var(--color-gray-700);border-radius:var(--radius-md);width:100%;height:200px;margin-bottom:var(--space-2);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.visualization-loading{align-items:center;gap:var(--space-2);color:var(--color-gray-400);font-size:var(--text-sm);flex-direction:column;display:flex}.loading-spinner{border:2px solid var(--color-gray-600);border-top-color:var(--color-white);border-radius:50%;width:24px;height:24px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.visualization-error{align-items:center;gap:var(--space-2);color:var(--color-error);font-size:var(--text-sm);text-align:center;padding:var(--space-4);flex-direction:column;display:flex}.error-icon{font-size:var(--text-2xl)}.visualization-placeholder{color:var(--color-gray-500);font-size:var(--text-sm)}.visualization-controls{gap:var(--space-2);flex-wrap:wrap;align-items:center;display:flex}.viz-play-button,.viz-stop-button,.viz-report-button{padding:var(--space-2)var(--space-4);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-bold);font-family:var(--font-display);cursor:pointer;transition:all var(--transition-fast);text-transform:uppercase;letter-spacing:.05em;border:none}.viz-play-button{background:var(--color-black);color:var(--color-white)}.viz-play-button:hover:not(:disabled){background:var(--color-gray-800);transform:translateY(-1px)}.viz-stop-button{color:var(--color-black);border:2px solid var(--color-gray-300);background:0 0}.viz-stop-button:hover:not(:disabled){border-color:var(--color-error);color:var(--color-error);transform:translateY(-1px)}.viz-report-button{color:var(--color-gray-500);border:2px solid var(--color-gray-200);background:0 0}.viz-report-button:hover:not(:disabled){border-color:var(--color-gray-400);color:var(--color-gray-700);transform:translateY(-1px)}.viz-play-button:disabled,.viz-stop-button:disabled,.viz-report-button:disabled{opacity:.4;cursor:not-allowed}.viz-select{padding:var(--space-2)var(--space-3);border:2px solid var(--color-gray-300);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-bold);font-family:var(--font-display);cursor:pointer;transition:all var(--transition-fast);text-transform:uppercase;letter-spacing:.05em;color:var(--color-black);-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:var(--space-8);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L2 4h8z'/%3E%3C/svg%3E") right 12px center no-repeat}.viz-select:hover{border-color:var(--color-gray-500)}.viz-select:focus{border-color:var(--color-black);outline:none}.viz-select option{text-transform:none;font-weight:400}.viz-playing-indicator{color:var(--color-success);font-weight:var(--font-bold);font-size:var(--text-sm);align-items:center;gap:var(--space-2);display:flex}.viz-playing-indicator:before{content:"";background:var(--color-success);border-radius:50%;width:8px;height:8px;animation:1.5s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.9)}}@media (max-width:640px){.visualization-container{height:150px}.visualization-controls{flex-direction:column;align-items:stretch}.viz-play-button,.viz-stop-button,.viz-report-button,.viz-select{text-align:center;width:100%}.viz-select{background-position:right 16px center}}